/* Making the Towns game page. Loads after styles.css */
@font-face{font-family:'Silkscreen';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/silkscreen-latin-400-normal.woff2) format('woff2')}
.mt{
  --mt-ink:#0E0806; --mt-panel:#170D08; --mt-panel2:#21130B; --mt-line:#3A2610; --mt-edge:#8A6A22;
  --mt-gold:#F2C14E; --mt-gold2:#E8A32A; --mt-cream:#F4E9D4; --mt-muted:#BFAE93;
  --mt-blue:#2F6FE0; --mt-red:#D83A3A; --mt-green:#5BE38A;
  --mt-pixel:'Silkscreen','IBM Plex Mono',monospace;
  --mt-goldgrad:linear-gradient(180deg,#FFF1B8 0%,#F2C14E 38%,#C98A1C 62%,#FBD774 100%);
  background:var(--mt-ink);color:var(--mt-cream)
}
.mt .site-header{background:rgba(14,8,6,.8);border-bottom-color:var(--mt-line)}
.mt-kicker{font-family:var(--mt-pixel);font-size:13px;letter-spacing:.12em;color:var(--mt-gold);text-transform:uppercase}
.mt-display{font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.9;margin:0}
.mt-gold-text{background:var(--mt-goldgrad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #5A3A0C)}
.btn-mt{background:var(--mt-goldgrad);color:#2A1804;border:none;box-shadow:inset 0 -3px 0 rgba(90,58,12,.6),0 0 0 1px #5A3A0C;transition:transform .2s,box-shadow .2s,filter .2s}
.btn-mt:hover{color:#2A1804;transform:translateY(-2px);filter:brightness(1.08);box-shadow:inset 0 -3px 0 rgba(90,58,12,.6),0 12px 34px rgba(242,193,78,.35)}
.btn-mt-g{border:1px solid var(--mt-edge);color:var(--mt-cream);background:rgba(14,8,6,.4);transition:border-color .2s,color .2s}
.btn-mt-g:hover{border-color:var(--mt-gold);color:var(--mt-gold)}

/* Hero */
.mt-hero{position:relative;overflow:hidden;isolation:isolate;background:#120806}
.mt-hero .bg{position:absolute;inset:-40px;background:url(/assets/games/mtt/bg-blur.jpg) center/cover;filter:brightness(.38) saturate(1.2);z-index:-3;transform:scale(1.1)}
.mt-hero:after{content:'';position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 70% 40%,rgba(242,193,78,.14) 0%,rgba(14,8,6,0) 50%),linear-gradient(180deg,rgba(14,8,6,0) 60%,var(--mt-ink) 100%)}
.mt-beam{position:absolute;top:-10%;width:34%;height:130%;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(255,230,168,.28) 0%,rgba(255,230,168,0) 75%);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);mix-blend-mode:screen}
.mt-beam.l{left:2%;transform-origin:50% 0;animation:mtSweepL 8s ease-in-out infinite}
.mt-beam.r{right:2%;transform-origin:50% 0;animation:mtSweepR 8s ease-in-out infinite}
@keyframes mtSweepL{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(12deg)}}
@keyframes mtSweepR{0%,100%{transform:rotate(18deg)}50%{transform:rotate(-12deg)}}
.mt-hero .wrap{min-height:calc(100svh - var(--header));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;padding-block:56px 80px}
.mt-copy{display:flex;flex-direction:column;gap:26px}
.mt-logo{margin:0;width:min(560px,100%)}
.mt-logo img{display:block;width:100%;height:auto;filter:drop-shadow(0 16px 30px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(242,193,78,.18))}
.mt-tag{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(26px,2.8vw,40px);line-height:1.05;text-transform:uppercase;color:var(--mt-cream)}
.mt-tag span{display:block}
.mt-tag span:last-child{color:var(--mt-gold)}
.mt-chips{display:flex;gap:10px;flex-wrap:wrap}
.mt-chip{font-family:var(--mt-pixel);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:9px 12px;border:1px solid var(--mt-edge);background:rgba(14,8,6,.6);color:var(--mt-cream)}
.mt-chip.hot{background:var(--mt-gold);color:#2A1804;border-color:var(--mt-gold)}
.mt-chip .rec{display:inline-block;width:8px;height:8px;border-radius:50%;background:#FF4D4D;box-shadow:0 0 8px #FF4D4D;margin-right:8px;vertical-align:middle;animation:blink 1.4s ease-in-out infinite}
.mt-ctas{display:flex;gap:14px;flex-wrap:wrap}
.mt-screen{position:relative;justify-self:center;width:min(560px,100%);padding:14px;background:linear-gradient(180deg,#3A2610,#1A0E06);border:2px solid var(--mt-edge);box-shadow:0 40px 90px rgba(0,0,0,.7),0 0 0 6px #120806,0 0 0 8px var(--mt-edge),0 0 80px rgba(242,193,78,.18)}
.mt-screen video{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:#000}
.mt-screen .corner{position:absolute;width:22px;height:22px;border:3px solid var(--mt-gold)}
.mt-screen .tl{left:-8px;top:-8px;border-right:none;border-bottom:none}
.mt-screen .tr{right:-8px;top:-8px;border-left:none;border-bottom:none}
.mt-screen .bl{left:-8px;bottom:-8px;border-right:none;border-top:none}
.mt-screen .br{right:-8px;bottom:-8px;border-left:none;border-top:none}
.mt-screen .live{position:absolute;left:28px;top:28px;font-family:var(--mt-pixel);font-size:11px;padding:6px 9px;background:rgba(14,8,6,.8);border:1px solid var(--mt-edge);color:var(--mt-cream);animation:none}

/* Sections */
.mt-sec{padding-top:clamp(96px,11vw,150px)}
.mt-head{display:flex;flex-direction:column;gap:16px;max-width:760px;margin-bottom:clamp(36px,4vw,56px)}
.mt-head h2{font-size:clamp(56px,7vw,100px)}
.mt-head p{margin:0;font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:var(--mt-muted)}

/* Match demo */
.match{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.mbar-wrap{padding:28px;border:2px solid var(--mt-edge);background:linear-gradient(180deg,var(--mt-panel2),var(--mt-panel));box-shadow:0 30px 70px rgba(0,0,0,.5)}
.mbar-label{display:flex;justify-content:space-between;font-family:var(--mt-pixel);font-size:12px;color:var(--mt-muted);margin-bottom:10px}
.mbar{position:relative;height:56px;border-radius:30px;border:3px solid var(--mt-gold);background:var(--mt-red);overflow:hidden;box-shadow:inset 0 0 0 2px #2A1804}
.mbar .you{position:absolute;left:0;top:0;bottom:0;width:var(--m,50%);background:linear-gradient(180deg,#5E95FF,#2F6FE0 55%,#1F4FB0);transition:width .9s cubic-bezier(.3,1.4,.5,1)}
.mbar .you:after{content:'';position:absolute;right:-3px;top:0;bottom:0;width:6px;background:var(--mt-gold);box-shadow:0 0 10px var(--mt-gold)}
.mbar .nums{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;padding:0 22px;font-family:var(--display);font-weight:900;font-size:30px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.5)}
.mstatus{margin-top:18px;min-height:64px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:900;font-size:clamp(34px,3.6vw,48px);text-transform:uppercase;color:var(--mt-green);text-shadow:0 0 18px rgba(91,227,138,.4);text-align:center}
.mstatus.gold{color:var(--mt-gold);text-shadow:0 0 22px rgba(242,193,78,.5)}
.mstatus.pop{animation:pop .5s cubic-bezier(.2,.8,.2,1) both}
.msteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.msteps li{display:grid;grid-template-columns:48px 1fr;gap:16px;padding:18px 20px;border:1px solid var(--mt-line);background:var(--mt-panel);transition:border-color .3s,background .3s,transform .3s}
.msteps li.on{border-color:var(--mt-gold);background:var(--mt-panel2);transform:translateX(6px)}
.msteps .n{width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-family:var(--mt-pixel);font-size:20px;background:#2A1804;color:var(--mt-gold);border:1px solid var(--mt-edge)}
.msteps li.on .n{background:var(--mt-gold);color:#2A1804}
.msteps h3{margin:2px 0 4px;font-family:var(--display);font-weight:800;font-size:26px;text-transform:uppercase;color:var(--mt-cream)}
.msteps p{margin:0;font-size:16px;line-height:1.55;color:var(--mt-muted)}
.mreplay{margin-top:16px;min-height:44px;padding:0 16px;font-family:var(--mt-pixel);font-size:12px;background:transparent;border:1px solid var(--mt-edge);color:var(--mt-muted);cursor:pointer}
.mreplay:hover{color:var(--mt-gold);border-color:var(--mt-gold)}

/* Features, styled like cards in a hand */
.mt-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.mcard{position:relative;padding:26px 24px 26px;background:linear-gradient(180deg,#24150C,#150B06);border:2px solid var(--mt-edge);box-shadow:inset 0 0 0 4px #120806,inset 0 0 0 5px rgba(242,193,78,.25);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s;display:flex;flex-direction:column;gap:12px}
.mcard:hover{transform:translateY(-8px) rotate(-.8deg);border-color:var(--mt-gold);box-shadow:inset 0 0 0 4px #120806,inset 0 0 0 5px rgba(242,193,78,.5),0 26px 60px rgba(0,0,0,.6),0 0 40px rgba(242,193,78,.15)}
.mcard .type{align-self:flex-start;font-family:var(--mt-pixel);font-size:11px;padding:5px 8px;color:#fff;background:var(--mt-red)}
.mcard:nth-child(2) .type{background:#3B8A4E}
.mcard:nth-child(3) .type{background:var(--mt-blue)}
.mcard:nth-child(4) .type{background:#8A4FD6}
.mcard:nth-child(5) .type{background:#C9761C}
.mcard:nth-child(6) .type{background:#6B7280}
.mcard h3{margin:0;font-family:var(--display);font-weight:900;font-size:32px;line-height:.95;text-transform:uppercase;color:var(--mt-cream)}
.mcard p{margin:0;font-size:16px;line-height:1.6;color:var(--mt-muted)}

/* Tour poster */
.poster{position:relative;border:3px solid var(--mt-edge);background:radial-gradient(ellipse at 50% 0%,#3A1A0C 0%,#170B06 70%);padding:clamp(32px,5vw,64px);box-shadow:inset 0 0 0 8px #120806,inset 0 0 0 10px rgba(242,193,78,.35),0 40px 90px rgba(0,0,0,.6)}
.poster-top{text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center;margin-bottom:36px}
.poster-top h2{font-size:clamp(56px,8vw,120px)}
.poster-top p{margin:0;max-width:640px;font-size:18px;line-height:1.6;color:var(--mt-muted)}
.bill{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.bill li{display:flex;gap:18px;align-items:baseline;padding:18px 0;border-bottom:1px dashed rgba(242,193,78,.3)}
.bill b{flex:none;width:170px;font-family:var(--mt-pixel);font-weight:400;font-size:14px;color:var(--mt-gold)}
.bill span{font-size:16px;line-height:1.55;color:var(--mt-cream)}

/* Signup, MTT skin */
.mt .signup{background-color:#2A1804;background-image:radial-gradient(rgba(242,193,78,.14) 1.2px,transparent 1.2px),linear-gradient(135deg,#4A1010 0%,#2A1804 60%,#3A2610 100%);background-size:22px 22px,100% 100%;border:2px solid var(--mt-edge);border-radius:0;box-shadow:inset 0 0 0 6px #120806,inset 0 0 0 8px rgba(242,193,78,.3)}
.mt .signup h2{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(56px,6.6vw,96px);line-height:.88;margin:0;background:var(--mt-goldgrad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mt .signup p{color:var(--mt-muted)}
.mt .signup .fine{color:#9E8E75}
.mt .signup .fine a{color:var(--mt-cream)}
.mt .signup label{color:var(--mt-cream)}
.mt .field input{border-color:var(--mt-edge);background:var(--mt-cream)}
.mt .field button{background:var(--mt-gold);border-color:var(--mt-gold);color:#2A1804}
.mt .field button:hover{color:#2A1804;background:#FFD66E}
.mt .err{color:#FFB4A8}
.mt .done{background:#120806;border:1px solid var(--mt-edge)}
.mt .done b{color:var(--mt-gold)}
.mt .signup .ghost-logo{position:absolute;right:-30px;bottom:-30px;width:380px;opacity:.12;pointer-events:none;transform:rotate(-6deg)}

/* More games */
.mt .more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.mt .more{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:32px;text-decoration:none;min-height:180px;border:2px solid var(--mt-line);transition:transform .3s,border-color .3s}
.mt .more:hover{transform:translateY(-4px)}
.mt .more img{width:min(260px,55%);height:auto;flex:none}
.mt .more span{font-family:var(--mt-pixel);font-size:12px;color:var(--mt-cream)}
.more-cf{background:radial-gradient(ellipse at 30% 40%,#3B0F66 0%,#0B0420 75%)}
.more-cf:hover{border-color:#FF3DC8 !important}
.more-tide{background:linear-gradient(180deg,#0F4C5C 0%,#0B2F3A 100%)}
.more-tide:hover{border-color:#E9B949 !important}
.mt .doc-footer{border-top-color:var(--mt-line);margin-top:clamp(96px,10vw,140px)}

@media (max-width:900px){
  .mt-hero .wrap{grid-template-columns:1fr;min-height:0;padding-block:40px 64px}
  .mt-copy{align-items:center;text-align:center}
  .mt-chips,.mt-ctas{justify-content:center}
  .mt-logo{width:min(440px,92%)}
  .mt-beam{width:60%}
  .match{grid-template-columns:1fr}
  .mt-cards{grid-template-columns:1fr 1fr}
  .bill{grid-template-columns:1fr}
  .mt .more-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .mt-ctas{flex-direction:column;width:100%}
  .mt-ctas .btn{width:100%}
  .mt-cards{grid-template-columns:1fr}
  .bill li{flex-direction:column;gap:6px}
  .bill b{width:auto}
  .mbar .nums{font-size:24px;padding:0 16px}
  .mt .more{flex-direction:column;align-items:flex-start;min-height:0}
  .mt .more img{width:70%}
  .mt .signup .ghost-logo{width:240px}
}
@media (prefers-reduced-motion:reduce){.mt-beam{animation:none}.mbar .you{transition:none}}
.more-cf img{width:min(360px,72%) !important}