/* Mousetrap: the HUD and menus (kit/hud.js, kit/menus.js) over the canvas. Subway-sign language:
   black bands with the thin white rule near the top, white Helvetica-ish type (Inter), route
   bullets, mono numbers. Phone portrait first; everything clears the notch and the home bar.
   Anton is the one display face: the WASTED card only. */
@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");
:root{
  --sa-t:env(safe-area-inset-top,0px);--sa-b:env(safe-area-inset-bottom,0px);--sa-l:env(safe-area-inset-left,0px);--sa-r:env(safe-area-inset-right,0px);
  --band:rgba(8,9,10,.9);--band-solid:#0a0b0c;--w:#fff;--dim:rgba(255,255,255,.64);--faint:rgba(255,255,255,.36);--hair-w:rgba(255,255,255,.14);
  --amber:#FFC24A;--you:#FFD36B;--red:#EE352E;--line:#EE352E;
  --gut:10px;--top:calc(var(--sa-t) + 46px);
  --sans:"Inter",-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
body.mousetrap{background:#050607;color:#fff}

/* the shell's corner chrome, made legible over a dark tunnel and a bright sky alike */
.c-back,.c-sound{top:calc(var(--sa-t) + 10px)!important}
.c-back{left:calc(var(--sa-l) + var(--gut))!important}
.c-sound{right:calc(var(--sa-r) + var(--gut))!important;gap:6px!important}
.c-back a,.c-sound button{
  display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:14px;
  background:rgba(8,9,10,.62);color:rgba(255,255,255,.82)!important;font-size:10.5px;
}
.c-back a:hover,.c-sound button:hover{color:#fff!important;background:rgba(8,9,10,.85)}
.c-back svg path{fill:#fff!important}
.c-back svg{width:13px!important;height:13px!important}
.c-sound kbd{box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)!important}

.mt-hud{position:fixed;inset:0;z-index:3;pointer-events:none;font-family:var(--sans);color:#fff;-webkit-font-smoothing:antialiased;transition:opacity .25s}
.mt-hud.hidden{opacity:0}
.mt-hud.dim .mt-center,.mt-hud.dim .mt-zone,.mt-hud.dim .mt-edges,.mt-hud.dim .mt-chips,.mt-hud.dim .mt-fx{opacity:0}
.mt-hud button{pointer-events:auto;font:inherit;color:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
:where(.mt-hud) small{font-size:inherit}
.mt-hud.shake .mt-sign,.mt-hud.shake .mt-bottom{animation:mt-shake .38s cubic-bezier(.36,.07,.19,.97)}
@keyframes mt-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}

/* ---- the sign band: the route bullet, next stop, real distance; the whole line at real spacing */
.mt-sign{
  position:absolute;z-index:1;top:var(--top);left:calc(var(--sa-l) + var(--gut));right:calc(var(--sa-r) + var(--gut));
  background:var(--band);border-radius:12px;padding:15px 14px 9px;overflow:hidden;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.6);
}
/* the thin white rule every MTA sign carries along its top */
.mt-sign::before,.m-sign::before,.mt-arrive::before{content:"";position:absolute;left:0;right:0;top:6px;height:1.5px;background:rgba(255,255,255,.88)}
.sign-next{display:flex;align-items:center;gap:11px;min-width:0}
.bullet{width:34px;height:34px;flex:none;display:block}
.sign-name{display:flex;flex-direction:column;min-width:0;flex:1}
.sign-name small,.strip-labels,.mt-radar small,.meter-labels,.pw-label,.chip small,.mt-arrive small,.stat-top .size-stage{
  font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.sign-name b{font-size:23px;font-weight:700;letter-spacing:-.015em;line-height:1.08;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sign-name b.long{font-size:19px}
.sign-dist{display:grid;grid-template-columns:auto auto;align-items:baseline;justify-content:end;column-gap:4px;text-align:right;flex:none}
.sign-dist b{font-family:var(--mono);font-size:20px;font-weight:500;color:var(--amber);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sign-dist .dist-u{font-family:var(--mono);font-size:11px;color:var(--amber);opacity:.85}
.sign-dist .dist-to{grid-column:1/-1;font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.sign-dist .dist-to:empty{display:none}

.strip{margin-top:9px}
.strip-line{position:relative;height:14px;margin:0 4px}
.strip-rail,.strip-done{position:absolute;left:0;right:0;top:6px;height:2px;border-radius:1px;background:rgba(255,255,255,.2)}
.strip-done{background:var(--line);transform-origin:left;transform:scaleX(0);height:3px;top:5.5px}
.stop{position:absolute;top:4px;width:2px;height:6px;margin-left:-1px;background:rgba(255,255,255,.38);border-radius:1px}
.stop.on{background:#fff}
/* express stops: the map's white circle */
.stop.exp{top:3px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--band-solid);box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.55)}
.stop.exp.on{box-shadow:inset 0 0 0 1.6px #fff;background:#fff}
.you{position:absolute;top:1px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--you);box-shadow:0 0 0 2px var(--band-solid);z-index:1;transition:left .2s linear}
.you i{position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--you);opacity:0;animation:mt-ping 1.6s ease-out infinite}
@keyframes mt-ping{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.strip-labels{display:flex;justify-content:space-between;gap:8px;margin-top:4px;font-size:9px;color:var(--faint)}
.strip-mid{font-family:var(--mono);font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--dim)}

/* ---- chips under the sign: effects and powers running, each with a ring running down; pause */
.mt-chips{
  position:absolute;top:calc(var(--top) + 104px);right:calc(var(--sa-r) + var(--gut));left:calc(var(--sa-l) + var(--gut));
  display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:flex-start;gap:6px;
}
.chip{display:flex;align-items:center;gap:7px;height:34px;padding:0 11px 0 3px;border-radius:17px;background:var(--band);animation:mt-chip .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes mt-chip{from{transform:scale(.6);opacity:0}}
.chip-ic{position:relative;width:28px;height:28px;flex:none}
.chip-ic svg.pw-ic,.chip-ic svg.fx-ic{position:absolute;inset:4px;width:20px;height:20px}
.chip-ic .fx-ic{border-radius:50%;background:var(--c);padding:2px}
.chip-ring{position:absolute;inset:0;width:28px;height:28px;transform:rotate(-90deg)}
.chip-ring circle{fill:none;stroke:var(--c);stroke-width:3;stroke-linecap:round;stroke-dasharray:113.1;filter:brightness(1.25)}
.chip-t{display:flex;flex-direction:column;line-height:1.1}
.chip-t b{font-size:12.5px;font-weight:700;letter-spacing:-.005em}
.chip-t small{font-size:8.5px;letter-spacing:.07em;color:var(--dim)}
.mt-pause{width:34px;height:34px;border-radius:17px;background:var(--band);display:grid;place-items:center;flex:none}
.mt-pause svg{width:11px;height:13px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round}
.mt-hud:not(.touch) .mt-pause{display:none}

/* ---- the middle: arrival card, zone banner, toasts, the power burst */
.mt-center{position:absolute;left:0;right:0;top:calc(var(--top) + 150px);display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 16px}
.mt-arrive{
  position:relative;background:var(--band-solid);border-radius:10px;padding:17px 22px 13px;min-width:min(330px,100%);max-width:100%;text-align:left;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.7);
}
.mt-arrive.in{animation:mt-card 3.2s cubic-bezier(.2,.9,.2,1) both}
@keyframes mt-card{0%{transform:translateY(-10px) scale(.96);opacity:0}8%{transform:none;opacity:1}88%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
.mt-arrive small{display:block;color:var(--dim)}
.arr-name{display:block;font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.05;margin:2px 0 8px;text-transform:uppercase}
.arr-next{display:block;font-size:15px;font-weight:600;color:#fff;padding-top:8px;border-top:1px solid var(--hair-w)}
.arr-k{font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--amber);margin-right:4px}
.arr-where{display:block;font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:5px}
.arr-where:empty{display:none}

/* a food stretch: its own sign band drops out from under the next-stop sign, then back up */
.mt-zone{position:absolute;z-index:0;top:calc(var(--top) + 106px);left:calc(var(--sa-l) + var(--gut));right:calc(var(--sa-r) + var(--gut));
  display:flex;align-items:center;gap:12px;padding:17px 16px 12px;border-radius:12px;background:var(--band-solid);overflow:hidden;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.7)}
.mt-zone::before{content:"";position:absolute;left:0;right:0;top:6px;height:1.5px;background:rgba(255,255,255,.88)}
.zone-ic{width:30px;height:30px;flex:none}
.zone-t{display:flex;flex-direction:column;min-width:0}
.zone-name{font-size:21px;font-weight:700;letter-spacing:.01em;line-height:1.1;text-transform:uppercase;color:#fff}
.zone-note{font-size:13px;font-weight:500;line-height:1.3;color:var(--dim);margin-top:3px}
.zone-note:empty{display:none}
.mt-zone[hidden],.mt-arrive[hidden],.mt-burst[hidden],.mt-hic[hidden]{display:none}
/* on a phone the banner takes the chips' row: they and the middle step down while it's out */
.mt-chips,.mt-center{transition:transform .35s cubic-bezier(.2,.9,.2,1)}
@media (max-width:759px){ .mt-hud.zone-on .mt-chips,.mt-hud.zone-on .mt-center{transform:translateY(84px)} }
.mt-zone.in{animation:mt-zone 3.6s cubic-bezier(.2,.9,.2,1) both}
@keyframes mt-zone{0%{transform:translateY(-120%);opacity:0}10%{transform:none;opacity:1}88%{transform:none;opacity:1}100%{transform:translateY(-120%);opacity:0}}
.mt-toasts{display:flex;flex-direction:column;align-items:center;gap:6px}
.toast{
  font-size:13px;font-weight:700;letter-spacing:.02em;padding:6px 12px 6px 11px;border-radius:16px;background:var(--band);white-space:nowrap;
  display:flex;align-items:center;gap:7px;animation:mt-toast 1.4s cubic-bezier(.2,.9,.2,1) both;
}
.toast.old{opacity:.55;scale:.86;transition:opacity .2s,scale .2s}
.toast::before{content:"";width:7px;height:7px;border-radius:50%;background:#33c27a;flex:none}
.t-bad{background:#FCCC0A;color:#111}.t-bad::before{background:#111}
.t-nerve{color:#FFB04A}.t-nerve::before{background:#FF6319}
.t-power{background:#fff;color:#111}.t-power::before{background:var(--line)}
.t-info{color:var(--dim)}.t-info::before{background:var(--dim)}
/* the turnstile's reader: green dot-matrix on black */
.t-lcd{flex-direction:column;gap:2px;border-radius:6px;padding:8px 16px;background:#050805;box-shadow:inset 0 0 0 2px #2a2f2a;font-family:var(--mono);font-weight:500;color:#7dff8a;text-shadow:0 0 8px rgba(125,255,138,.6);letter-spacing:.08em}
.t-lcd::before{display:none}.t-lcd small{font-size:9px;color:rgba(125,255,138,.6);text-shadow:none;letter-spacing:.06em}
@keyframes mt-toast{0%{transform:translateY(6px);opacity:0}12%{transform:none;opacity:1}80%{opacity:1}100%{opacity:0;transform:translateY(-6px)}}

.mt-burst{display:flex;flex-direction:column;align-items:center;gap:6px}
.mt-burst .pw-ic{width:56px;height:56px;filter:drop-shadow(0 8px 24px rgba(0,0,0,.6))}
.mt-burst b{font-size:18px;font-weight:800;letter-spacing:-.01em;text-transform:uppercase;text-shadow:0 2px 16px rgba(0,0,0,.8)}
.mt-burst.in{animation:mt-burst .9s ease-out both}
@keyframes mt-burst{0%{transform:scale(.85);opacity:0}20%{transform:none;opacity:1}70%{opacity:1}100%{opacity:0}}
.mt-hic{position:absolute;left:50%;bottom:calc(var(--sa-b) + 190px);font-size:22px;font-weight:800;font-style:italic;color:#c9f59a;text-shadow:0 2px 10px rgba(0,0,0,.8)}
.mt-hic.in{animation:mt-hic .7s ease-out both}
@keyframes mt-hic{0%{transform:translate(-50%,10px) scale(.5);opacity:0}25%{transform:translate(-50%,0) scale(1.15);opacity:1}100%{transform:translate(-30%,-30px);opacity:0}}

/* ---- the bottom: stats, radar, the power button */
.mt-bottom{
  position:absolute;left:calc(var(--sa-l) + var(--gut));right:calc(var(--sa-r) + var(--gut));bottom:calc(var(--sa-b) + 12px);
  display:flex;align-items:flex-end;gap:8px;
}
.mt-stats,.mt-radar{background:var(--band);border-radius:12px}
.mt-stats{flex:1;min-width:0;max-width:280px;padding:9px 11px 10px}
.stat-top{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:7px}
.stat-k{font-size:9px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.stat-top .size-stage{color:#fff;font-size:9.5px;letter-spacing:.06em;white-space:nowrap}
.lives{display:flex;gap:2px}
.life svg{width:19px;height:12px;display:block;fill:#d8c6b4;stroke:#d8c6b4}
.life .m-eye{fill:#111}
.life .m-tail{fill:none;stroke:#e7a59a}
.life.lost svg{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1}
.life.lost .m-eye{fill:none;stroke:none}.life.lost .m-tail{stroke:rgba(255,255,255,.3)}
.meter{position:relative;height:7px;border-radius:4px;background:rgba(255,255,255,.13);overflow:hidden}
.meter .fill{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);border-radius:inherit;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.size .fill{background:linear-gradient(90deg,#e6d6c4,#b39277 55%,#7b6352)}
.size .seg{position:absolute;top:0;bottom:0;width:1.5px;margin-left:-.75px;background:rgba(8,9,10,.7)}
.size.pop{animation:mt-pop .5s ease-out}
@keyframes mt-pop{30%{box-shadow:0 0 0 2px var(--you),0 0 14px var(--you)}}
.meter-labels{display:flex;justify-content:space-between;margin-top:4px;font-size:8.5px;color:var(--faint)}
.meter-labels .speed{font-family:var(--mono);font-weight:400;letter-spacing:.02em;text-transform:none}
.energy{display:flex;align-items:center;gap:6px;margin-top:7px}
.energy svg{width:9px;height:12px;fill:var(--amber);flex:none}
.energy .meter{flex:1;height:5px}
.en .fill{background:var(--amber)}
.energy.low svg{fill:var(--red);animation:mt-blink .6s steps(2) infinite}
.energy.low .en .fill{background:var(--red)}
@keyframes mt-blink{50%{opacity:.25}}

.mt-radar{padding:7px 8px 6px;flex:none}
.radar-title{display:block;font-size:8.5px!important;margin:0 0 4px 1px;color:var(--faint)!important}
.mt-radar.boost .radar-title{color:#33c27a!important}
.mt-radar.boost .radar-title::after{content:" ×3"}
.radar-cols{display:flex;gap:3px}
.col{position:relative;width:24px;height:78px;border-radius:5px;background:rgba(255,255,255,.05);overflow:hidden}
.col.plat{width:12px;background:repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 3px,transparent 3px 6px)}
.col small{position:absolute;left:0;right:0;bottom:2px;text-align:center;font-size:7px!important;letter-spacing:.04em!important;line-height:1;color:var(--faint)!important}
.col small span{display:block}
.col.plat small{display:none}
.col.gap{width:8px;background:rgba(255,255,255,.025)}
.col.gap small,.col.gap .rail,.col.gap .car,.col.gap .arrow,.col.gap .heat{display:none}
.col.mine small{color:var(--you)!important}
.col .rail{position:absolute;left:35%;right:35%;top:3px;bottom:16px;border-left:1px solid rgba(255,255,255,.1);border-right:1px solid rgba(255,255,255,.1)}
.col .heat{position:absolute;inset:0;opacity:0;background:linear-gradient(rgba(255,170,40,.55),rgba(255,170,40,.2))}
.col.from-behind .heat{background:linear-gradient(rgba(255,170,40,.15),rgba(255,170,40,.55))}
.col.hot .heat{background:linear-gradient(rgba(238,53,46,.6),rgba(238,53,46,.2))}
.col.hot.from-behind .heat{background:linear-gradient(rgba(238,53,46,.2),rgba(238,53,46,.6))}
.col .car{position:absolute;left:24%;right:24%;top:0;height:calc(100% - 14px);transform-origin:top;opacity:0;background:#dfe4ea;border-radius:2px}
.col.stopped .car{background:#9aa3ad}
.col .me{position:absolute;left:50%;top:calc(50% - 7px);width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--you);opacity:0;box-shadow:0 0 0 2px rgba(8,9,10,.85)}
.col.mine .me{opacity:1}
.col .arrow{position:absolute;left:50%;width:0;height:0;margin-left:-6px;border:6px solid transparent;opacity:0}
.col.head-on .arrow{top:3px;border-top:8px solid var(--amber);border-bottom:0;opacity:1}
.col.from-behind .arrow{bottom:17px;border-bottom:8px solid var(--amber);border-top:0;opacity:1}
.col.stopped .arrow{border:0;width:10px;height:10px;margin-left:-5px;background:var(--amber);border-radius:2px}
.col.hot .arrow{border-top-color:#fff;border-bottom-color:#fff}
.col.hot.stopped .arrow{background:#fff}

.mt-power-wrap{display:flex;flex-direction:column;align-items:center;gap:5px;flex:none}
.mt-power{position:relative;width:78px;height:78px;border-radius:50%;background:var(--band);display:grid;place-items:center;touch-action:none}
.mt-power .ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(255,255,255,.13);stroke-width:6}
.ring-fill{fill:none;stroke:#FF6319;stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset .3s}
.pw-slot{display:none}
.pw-slot .pw-ic{width:56px;height:56px;display:block}
.pw-empty{display:flex;align-items:baseline;font-family:var(--mono);color:var(--dim)}
.pw-empty b{font-size:19px;font-weight:500;color:#fff;letter-spacing:-.03em}
.pw-empty small{font-size:10px}
.pw-label{font-size:9px!important;white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis}
.pw-label kbd{font-family:var(--mono);font-size:8.5px;padding:1px 4px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);margin-left:3px}
.mt-power.full .ring-fill{stroke:var(--you)}
.mt-power.full{box-shadow:0 0 0 3px rgba(255,211,107,.3),0 0 22px rgba(255,211,107,.35)}
.mt-power.stored{background:var(--band-solid);box-shadow:0 0 0 3px var(--band),0 0 22px -2px var(--pc)}
.mt-power.stored .ring-fill{stroke:var(--pc);filter:brightness(1.3)}
.mt-power.stored .pw-slot{display:block}
.mt-power.stored .pw-empty{display:none}
.mt-power.stored + .pw-label{color:#fff}
.mt-power.got{animation:mt-got .55s cubic-bezier(.2,1.6,.4,1)}
.mt-power:active{transform:scale(.94)}
@keyframes mt-throb{to{box-shadow:0 0 0 3px rgba(255,211,107,.35),0 0 26px rgba(255,211,107,.5)}}
@keyframes mt-got{0%{transform:scale(.6)}100%{transform:none}}

/* on-screen ← → (a setting): a row above the bottom cluster */
.mt-pad{position:absolute;left:calc(var(--sa-l) + var(--gut));bottom:calc(var(--sa-b) + 136px);display:flex;gap:10px}
.mt-pad button{width:64px;height:56px;border-radius:14px;background:var(--band);display:grid;place-items:center}
.mt-pad button:active{background:rgba(40,42,46,.95)}
.mt-pad svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mt-pad[hidden]{display:none}

/* ---- edge arrows: a train close on your track or the next one over */
.mt-edges{position:absolute;inset:0}
.edge{position:absolute;display:none;height:30px;padding:0 10px;transform:translateX(-50%);border-radius:15px;background:rgba(255,170,40,.92);align-items:center;gap:5px}
.edge b{font-style:normal;font-size:13px;font-weight:800;color:#111}.edge.hot b{color:#fff}.edge b:empty{display:none}
.edge b::before{content:"TRAIN ";font-size:9px;letter-spacing:.08em;font-weight:700}
.edge svg{width:22px;height:13px;fill:none;stroke:#111;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.edge.on{display:flex;animation:mt-fadein .25s ease-out both}
@keyframes mt-fadein{from{opacity:0;transform:translate(-50%,6px)}}
.edge.top{top:calc(var(--top) + 150px)}
.edge.top svg{transform:rotate(180deg)}
.edge.bottom{bottom:calc(var(--sa-b) + 150px)}
.edge.hot{background:var(--red)}
.edge.hot svg{stroke:#fff}
.edge.mine{height:34px;border-radius:17px}

/* ---- screen tints for powers and effects */
.mt-fx{position:absolute;inset:0;overflow:hidden}
.ov{position:absolute;inset:0;opacity:0;display:none}
.ov.live{display:block}
.mt-fx{opacity:.6}
.ov-slowmo{background:radial-gradient(ellipse at 50% 55%,rgba(60,40,140,0) 35%,rgba(60,30,130,.55) 100%),rgba(70,60,170,.14);
  box-shadow:inset 0 0 120px rgba(150,120,255,.35)}
.ov-frost{background:radial-gradient(ellipse at 50% 50%,rgba(210,240,255,0) 42%,rgba(200,235,255,.55) 82%,rgba(235,250,255,.85) 100%),rgba(150,200,255,.12);
  box-shadow:inset 0 0 60px 12px rgba(235,250,255,.7)}
.ov-frost::after{content:"";position:absolute;inset:0;opacity:.55;mix-blend-mode:screen;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .96 0 0 0 0 1 0 0 0 9 -5.2'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23f)'/%3E%3C/svg%3E");
  -webkit-mask:radial-gradient(ellipse at center,transparent 45%,#000 85%);mask:radial-gradient(ellipse at center,transparent 45%,#000 85%)}
.ov-ghost{background:radial-gradient(ellipse at center,rgba(170,220,230,0) 40%,rgba(150,210,225,.35) 100%),rgba(140,190,210,.12)}
.ov-surf{box-shadow:inset 0 0 60px rgba(255,214,90,.6),inset 0 0 12px rgba(255,255,220,.8);animation:mt-flicker .12s steps(2) infinite}
@keyframes mt-flicker{50%{filter:brightness(1.6)}}
.ov-stink{background:radial-gradient(ellipse at 50% 100%,rgba(140,200,60,.45),rgba(140,200,60,0) 60%)}
.ov-dizzy{inset:-40%;background:conic-gradient(from 0deg,rgba(120,255,110,.2),rgba(190,90,255,.18),rgba(80,200,255,.16),rgba(255,120,200,.16),rgba(120,255,110,.2));animation:mt-spin 3.2s linear infinite}
@keyframes mt-spin{to{transform:rotate(360deg)}}
.ov-poison{background:radial-gradient(ellipse at center,rgba(60,180,60,0) 40%,rgba(40,160,50,.6) 100%);animation:mt-pulse 1.1s ease-in-out infinite alternate}
@keyframes mt-pulse{from{filter:brightness(.7)}to{filter:brightness(1.3)}}
.ov-sluggish{background:radial-gradient(ellipse at center,rgba(90,60,30,0) 40%,rgba(80,55,30,.55) 100%),rgba(120,90,50,.12)}
.ov-glitch b{position:absolute;left:0;right:0;height:2.5%;mix-blend-mode:screen;background:linear-gradient(90deg,rgba(255,0,80,.22),rgba(0,255,220,.22));animation:mt-glitch 1.8s steps(1) infinite}
.ov-glitch b:nth-child(1){top:18%}.ov-glitch b:nth-child(2){top:52%;animation-delay:-.6s}.ov-glitch b:nth-child(3){top:71%;animation-delay:-1.2s}
@keyframes mt-glitch{0%{transform:translateX(-30%) scaleY(1);opacity:1}20%{transform:translateX(12%) scaleY(.4)}40%{opacity:0}60%{transform:translateX(-6%) scaleY(1.6);opacity:.8}80%{opacity:0}}
.mt-hud.glitchy .mt-sign{animation:mt-jitter 1.2s steps(1) infinite}
@keyframes mt-jitter{0%{transform:none}30%{transform:translateX(1px)}34%{transform:none}70%{transform:translateX(-1px)}74%{transform:none}}
.ov-express{background:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 18px,rgba(255,255,255,.35) 18px 20px,rgba(255,255,255,0) 20px 47px),radial-gradient(ellipse at center,rgba(255,255,255,.75),rgba(238,53,46,.35));
  -webkit-mask:radial-gradient(ellipse at center,#000 10%,transparent 30%,#000 70%);mask:radial-gradient(ellipse at center,rgba(0,0,0,.8) 15%,rgba(0,0,0,.3) 35%,#000 75%);animation:mt-streak .18s linear infinite}
@keyframes mt-streak{to{background-position:47px 0,0 0}}
.ov-hit{display:block;background:radial-gradient(ellipse at center,rgba(238,53,46,.25),rgba(238,53,46,.75))}
.ov-hit.on{animation:mt-hit .5s ease-out}
@keyframes mt-hit{0%{opacity:1}100%{opacity:0}}
.ov-danger{background:radial-gradient(ellipse at center,rgba(238,53,46,0) 55%,rgba(238,53,46,.5) 100%)}

/* ---- WASTED: the last life gone, time crawling, the screen drained gray */
.mt-wasted{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0 20px;
  background:linear-gradient(transparent 32%,rgba(0,0,0,.55) 44%,rgba(0,0,0,.55) 58%,transparent 70%)}
.mt-wasted b{font-family:Anton,Impact,"Arial Narrow Bold",sans-serif;font-weight:400;font-size:clamp(64px,22vw,150px);line-height:1;letter-spacing:.02em;
  text-transform:uppercase;color:#c8102e;-webkit-text-stroke:3px #1a0306;paint-order:stroke fill;text-shadow:0 4px 0 #1a0306,0 10px 40px rgba(0,0,0,.7)}
.w-why{font-size:15px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.88);text-align:center;text-shadow:0 2px 8px #000}
.w-why::first-letter{text-transform:uppercase}
.mt-wasted.in b{animation:mt-wasted 1.4s cubic-bezier(.15,.85,.25,1) both}
.mt-wasted.in .w-why{animation:mt-why .6s .7s ease-out both}
.mt-wasted.in{animation:mt-wbg .5s ease-out both}
@keyframes mt-wasted{0%{transform:scale(1.35);opacity:0}25%{opacity:1}100%{transform:scale(1)}}
@keyframes mt-why{from{opacity:0;transform:translateY(6px)}}
@keyframes mt-wbg{from{opacity:0}}
.mt-hud.is-wasted .mt-sign,.mt-hud.is-wasted .mt-bottom,.mt-hud.is-wasted .mt-chips,.mt-hud.is-wasted .mt-center,.mt-hud.is-wasted .mt-zone,.mt-hud.is-wasted .mt-edges{opacity:0;transition:opacity .6s}
.mt-wasted[hidden]{display:none}
/* first-run hints: one quiet line above the bottom cluster */
.mt-hint{position:absolute;left:50%;bottom:calc(var(--sa-b) + 128px);transform:translateX(-50%);max-width:calc(100vw - 40px);
  padding:7px 14px;border-radius:16px;background:rgba(8,9,10,.72);font-size:13px;font-weight:600;color:rgba(255,255,255,.92);white-space:nowrap}
.mt-hint[hidden]{display:none}
.mt-hint.in{animation:mt-hint 3.6s ease both}
@keyframes mt-hint{0%{opacity:0;transform:translate(-50%,6px)}10%{opacity:1;transform:translateX(-50%)}85%{opacity:1}100%{opacity:0}}
.mt-hud.dying .mt-hint{display:none}
.mt-hud.dying .col .heat,.mt-hud.dying .mt-edges,.mt-hud.dying .ov-danger{opacity:0!important;animation:none}
canvas.mt-gray{filter:grayscale(1) brightness(.7);transition:filter 1s}

/* ---- phones held sideways and desktops: the sign across the top, cluster in the corners */
@media (min-width:760px){
  :root{--gut:20px;--top:calc(var(--sa-t) + 52px)}
  .mt-sign{display:grid;grid-template-columns:minmax(300px,380px) 1fr;column-gap:22px;align-items:center;padding:16px 18px 11px}
  .strip{margin-top:0}
  .sign-name b{font-size:26px}
  .bullet{width:40px;height:40px}
  .mt-chips{top:calc(var(--top) + 84px)}
  .mt-zone{top:calc(var(--top) + 84px);right:auto;width:min(460px,calc(100vw - 40px))}
  .mt-center{top:calc(var(--top) + 130px)}
  .mt-stats{max-width:300px;padding:11px 14px 12px}
  .mt-bottom{gap:12px}
  .mt-stats{margin-right:auto}
  .col{width:34px;height:96px}
  .col small{font-size:7.5px!important}
  .mt-power{width:92px;height:92px}
  .pw-slot .pw-ic{width:66px;height:66px}
  .edge.top{top:calc(var(--top) + 110px)}
  .edge.bottom{bottom:calc(var(--sa-b) + 140px)}
  .arr-name{font-size:38px}
  .toast{font-size:18px}
}
@media (max-height:500px) and (orientation:landscape){
  :root{--top:calc(var(--sa-t) + 44px)}
  .mt-sign{padding:12px 14px 8px}
  .col{height:70px}
  .mt-power{width:72px;height:72px}
  .mt-center{top:calc(var(--top) + 96px)}
  .arr-name{font-size:26px}
}
@media (max-width:359px){ .col{width:20px} .sign-name b{font-size:20px} }

/* ============ menus ============ */
.mt-menus{position:fixed;inset:0;z-index:4;pointer-events:none;font-family:var(--sans);color:#fff;-webkit-font-smoothing:antialiased}
.mt-menu{
  position:absolute;inset:0;pointer-events:auto;overflow:auto;display:flex;align-items:center;justify-content:center;
  padding:calc(var(--sa-t) + 54px) calc(var(--sa-r) + 16px) calc(var(--sa-b) + 22px) calc(var(--sa-l) + 16px);
  background:radial-gradient(ellipse at 50% 40%,rgba(5,6,7,.55),rgba(5,6,7,.9));opacity:0;transition:opacity .25s;
}
.mt-menu.in{opacity:1}.mt-menu.out{opacity:0;pointer-events:none}
.m-col{width:min(440px,100%);display:flex;flex-direction:column;align-items:stretch;gap:12px;transform:translateY(10px);transition:transform .35s cubic-bezier(.2,.9,.2,1)}
.m-col.narrow{width:min(380px,100%)}
.mt-menu.in .m-col{transform:none}
.m-sign{position:relative;display:flex;align-items:center;gap:13px;background:var(--band-solid);border-radius:12px;padding:19px 16px 14px;text-align:left}
.m-sign .bullet{width:40px;height:40px}
.m-sign b{display:block;font-size:24px;font-weight:700;letter-spacing:-.015em;line-height:1.1}
.m-sign small{display:block;margin-top:3px;font-size:12.5px;color:var(--dim);line-height:1.35}
.m-sign .arr{font-weight:400;color:var(--dim)}
.m-btn{
  pointer-events:auto;display:flex;align-items:center;justify-content:center;gap:10px;height:54px;border-radius:12px;border:0;cursor:pointer;
  font:inherit;font-size:17px;font-weight:700;letter-spacing:-.005em;transition:transform .12s,background .2s;
}
.m-btn:active{transform:scale(.98)}
.m-btn.primary{background:#fff;color:#0a0b0c}
.m-btn.primary:hover{background:#f1f1f1}
.m-btn.ghost{background:rgba(255,255,255,.08);color:#fff;font-weight:600;font-size:15px;height:48px}
.m-btn.ghost:hover{background:rgba(255,255,255,.14)}
.m-btn:focus-visible{outline:2px solid var(--you);outline-offset:3px}
.m-btn .k{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;opacity:.5}
.m-btn .k:empty{display:none}
.m-btn b{font-weight:700;margin-left:4px}

/* title: the name as an IRT mosaic tablet */
.tablet{
  position:relative;padding:12px;border-radius:4px;
  background:
    conic-gradient(from 90deg at 50% 50%,#7c2b22 25%,#a8462f 0 50%,#7c2b22 0 75%,#a8462f 0) 0 0/12px 12px;
  box-shadow:0 22px 50px -18px rgba(0,0,0,.8),inset 0 0 0 2px rgba(0,0,0,.25);
}
.tablet::before{content:"";position:absolute;inset:8px;border:2px solid #e8dfc8;border-radius:2px;pointer-events:none}
.tablet-word{
  display:block;position:relative;padding:22px 10px 20px;text-align:center;border-radius:2px;
  background:repeating-linear-gradient(0deg,rgba(120,105,80,.2) 0 1px,transparent 1px 7px),
             repeating-linear-gradient(90deg,rgba(120,105,80,.2) 0 1px,transparent 1px 7px),#ebe3cf;
  font-size:clamp(30px,10.4vw,60px);font-weight:800;letter-spacing:.03em;white-space:nowrap;text-transform:uppercase;line-height:1;color:transparent;
}
.tablet-word::after{
  content:attr(data-w);position:absolute;inset:22px 10px 20px;
  background:repeating-linear-gradient(0deg,#1d3557 0 6px,#ebe3cf 6px 7px),#1d3557;
  -webkit-background-clip:text;background-clip:text;
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 6px,rgba(0,0,0,.5) 6px 7px);mask:repeating-linear-gradient(90deg,#000 0 6px,rgba(0,0,0,.5) 6px 7px);
}
.m-pitch{font-size:15px;line-height:1.45;color:var(--dim);text-align:center;margin:2px 6px 4px}
.m-best{text-align:center;font-family:var(--mono);font-size:11px;color:var(--dim)}
.m-best span{color:var(--amber);text-transform:uppercase;letter-spacing:.08em;margin-right:6px}

/* how to play */
.moves{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.move{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:14px 10px 13px;border-radius:12px;background:rgba(10,11,12,.86)}
.move b{font-size:15px;font-weight:700}
.move small{font-size:12px;line-height:1.35;color:var(--dim)}
.move .keys{display:flex;gap:5px;height:56px;align-items:center}
.move kbd{display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 10px;border-radius:8px;background:#1b1d20;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 3px 0 rgba(255,255,255,.08);font-family:var(--mono);font-size:16px;color:#fff}
.pair{display:flex;gap:2px}
.swipe{width:50px;height:56px}
.swipe .ph{fill:#1b1d20;stroke:rgba(255,255,255,.4);stroke-width:2}
.swipe .trail{stroke:rgba(255,211,107,.45);stroke-width:4;stroke-linecap:round;fill:none}
.swipe .head{stroke:var(--you);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.swipe .tip{fill:#fff;stroke:rgba(255,211,107,.5);stroke-width:4;animation:mt-swipe 1.6s cubic-bezier(.5,0,.3,1) infinite}
.swipe .notch{fill:rgba(255,255,255,.22)}
@keyframes mt-swipe{0%,20%{transform:none;opacity:1}70%{transform:translate(var(--dx),var(--dy));opacity:1}85%{transform:translate(var(--dx),var(--dy));opacity:0}100%{transform:none;opacity:0}}
.fake-power{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#000;box-shadow:0 0 0 3px #B933AD}
.fake-power .pw-ic{width:42px;height:42px}
.rules{list-style:none;display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:12px;background:rgba(10,11,12,.86)}
.rules li{display:flex;gap:10px;font-size:13.5px;line-height:1.4;color:var(--dim)}
.rules b{color:#fff;font-weight:600}
.r-ic{flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--amber);color:#111;font-size:8px;font-style:normal;display:grid;place-items:center}
.r-ic.food{background:#d8c6b4}.r-ic.nerve{background:#FF6319}

/* the power picker */
.m-picker{flex-direction:column;gap:14px;background:radial-gradient(ellipse at 50% 45%,rgba(5,6,7,.45),rgba(5,6,7,.88))}
.pk-head{display:flex;align-items:center;justify-content:space-between;gap:16px;width:min(560px,100%)}
.pk-title small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--you)}
.pk-title b{display:block;font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.05}
.pk-clock{position:relative;width:52px;height:52px;flex:none}
.pk-clock svg{width:100%;height:100%;transform:rotate(-90deg)}
.pk-clock .bg{fill:rgba(10,11,12,.9);stroke:rgba(255,255,255,.14);stroke-width:4}
.pk-clock .fg{fill:none;stroke:rgba(255,255,255,.75);stroke-width:3;stroke-linecap:round}
.pk-clock b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:19px;font-weight:500}
.m-picker.hurry .pk-clock .fg{stroke:var(--amber)}
.m-picker.hurry .pk-clock b{color:var(--amber)}
.pk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;width:min(560px,100%)}
.pk-card{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;padding:14px 10px 12px;border:0;border-radius:14px;cursor:pointer;
  background:rgba(12,13,14,.94);color:#fff;font:inherit;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.08);
  transition:transform .18s ease-out,box-shadow .18s,opacity .25s;animation:mt-deal .35s ease-out both;
}
.pk-card:nth-child(2){animation-delay:.04s}.pk-card:nth-child(3){animation-delay:.08s}.pk-card:nth-child(4){animation-delay:.12s}.pk-card:nth-child(5){animation-delay:.16s}.pk-card:nth-child(6){animation-delay:.2s}
@keyframes mt-deal{from{transform:translateY(8px);opacity:0}}
.pk-card:hover,.pk-card:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--c),0 0 24px -6px var(--c);transform:translateY(-2px)}
.pk-ic .pw-ic{width:52px;height:52px;display:block}
.pk-card b{font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.15}
.pk-card small{font-size:11.5px;line-height:1.3;color:var(--dim)}
.pk-sec{position:absolute;top:8px;right:9px;font-family:var(--mono);font-size:9px;color:var(--faint);text-transform:uppercase}
.pk-key{position:absolute;top:7px;left:8px;min-width:18px;height:18px;padding:0 4px;border-radius:4px;display:grid;place-items:center;font-family:var(--mono);font-size:10px;color:var(--dim);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.pk-card.chosen{box-shadow:inset 0 0 0 3px var(--c),0 0 40px -4px var(--c);transform:scale(1.06);z-index:1;animation:none}
.pk-card.not{opacity:.18;transform:scale(.94);animation:none}
.m-picker.auto .pk-card.chosen{animation:mt-auto .5s ease-out}
@keyframes mt-auto{0%{transform:scale(.9)}60%{transform:scale(1.1)}100%{transform:scale(1.06)}}
.pk-hint{font-size:12.5px;color:var(--dim);text-align:center}
@media (max-width:759px){
  .m-picker{gap:10px;background:rgba(5,6,7,.84)}
  .pk-card{padding:11px 8px 10px;gap:3px;border-radius:12px}
  .pk-ic .pw-ic{width:44px;height:44px}
  .pk-card b{font-size:14px}
  .pk-card small{font-size:11px;line-height:1.25}
  .pk-title b{font-size:24px}
}
@media (min-width:760px){
  .pk-grid,.pk-head{width:min(780px,100%)}
  .pk-grid{grid-template-columns:repeat(3,1fr);gap:12px}
  .pk-card{padding:20px 16px 16px}
  .pk-ic .pw-ic{width:64px;height:64px}
  .pk-card b{font-size:17px}
}
@media (min-width:1180px) and (min-aspect-ratio:3/2){
  .pk-grid,.pk-head{width:min(1180px,100%)}
  .pk-grid{grid-template-columns:repeat(6,1fr)}
}
@media (max-height:500px) and (orientation:landscape){
  .m-picker{gap:8px;padding-top:calc(var(--sa-t) + 46px)}
  .pk-grid{grid-template-columns:repeat(3,1fr);width:min(700px,100%)}
  .pk-card{padding:8px 8px 8px;gap:2px}
  .pk-card small{display:none}
  .pk-ic .pw-ic{width:38px;height:38px}
}

/* game over */
.over-strip{position:relative;height:22px;margin:4px 10px 2px}
.os-rail,.os-done{position:absolute;left:0;right:0;top:10px;height:2px;background:rgba(255,255,255,.2)}
.os-done{height:4px;top:9px;background:var(--line);transform-origin:left}
.os-stop{position:absolute;top:8px;width:2px;height:8px;margin-left:-1px;background:rgba(255,255,255,.35)}
.os-stop.on{background:#fff}
.os-stop.exp{top:7px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#0a0b0c;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.os-stop.exp.on{background:#fff}
.os-you{position:absolute;top:4px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--you);box-shadow:0 0 0 3px #0a0b0c}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stats div{background:rgba(10,11,12,.88);border-radius:12px;padding:11px 13px 12px}
.stats dt{font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.stats dd{font-size:28px;font-weight:700;letter-spacing:-.02em;margin-top:2px;font-variant-numeric:tabular-nums}
.stats dd small{font-size:13px;font-weight:500;color:var(--dim);letter-spacing:0}
.stats dd.sz{font-size:19px;line-height:1.5}
.new{display:inline-block;padding:2px 8px;border-radius:6px;background:var(--you);color:#111;font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}

@media (prefers-reduced-motion:reduce){
  .ov-dizzy,.ov-surf,.ov-poison,.ov-express,.ov-glitch b,.mt-hud.glitchy *,.you i,.mt-power.full,.edge.on,.swipe .tip,.col.hot .heat{animation:none!important}
  .mt-hud.shake .mt-sign,.mt-hud.shake .mt-bottom{animation:none}
}