/* No Mice Here arcade: shared game shell. Full screen app, no page scroll, big type. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/fraunces-normal-latin.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 700;font-display:swap;src:url(/fonts/fraunces-italic-latin.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/inter-normal-latin.woff2) format('woff2')}
:root{--paper:#F4EEE3;--paper-2:#EDE4D4;--card:#FBF8F2;--ink:#1E2B24;--ink-2:#3C4A42;--muted:#565F58;--accent:#C2603A;--accent-ink:#9A4826;--accent-l:#F2B694;--accent-soft:#F0D9C9;--sage:#8FA18F;--sage-soft:#DCE3D6;--night:#121a16;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;--sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body.g{background:var(--night);color:var(--paper);font:400 18px/1.45 var(--sans);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;z-index:50}.skip:focus{left:12px;top:12px;background:var(--paper);color:var(--ink);padding:10px 14px;border-radius:10px}
:focus-visible{outline:3px solid var(--accent-l);outline-offset:3px;border-radius:8px}
.app{height:100vh;height:100dvh;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom)}
/* top bar */
.gbar{flex:none;display:flex;align-items:center;gap:clamp(6px,1.2vw,14px);padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));background:var(--ink);border-bottom:1px solid rgba(244,238,227,.12);min-height:64px}
.g-home{display:flex;align-items:center;gap:10px;color:var(--paper);text-decoration:none;font:500 19px/1 var(--serif);flex:none}
.g-home svg{width:40px;height:40px}
.g-crumb{color:var(--accent-l);text-decoration:none;font:600 15px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:12px 6px;flex:none}
.g-crumb:hover{text-decoration:underline}
.g-title{font:500 clamp(20px,2.4vw,30px)/1.05 var(--serif);letter-spacing:-.01em;margin:0;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-timer{flex:none;display:flex;align-items:center;gap:8px;background:rgba(244,238,227,.08);border:1px solid rgba(244,238,227,.18);border-radius:999px;padding:8px 16px;font:600 clamp(20px,2.4vw,28px)/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--paper)}
.g-timer svg{width:22px;height:22px;stroke:var(--accent-l)}
.g-timer.is-on{border-color:var(--accent-l)}
.g-tb{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:52px;height:52px;padding:0 14px;border-radius:999px;border:1px solid rgba(244,238,227,.3);background:transparent;color:var(--paper);font:600 16px/1 var(--sans);cursor:pointer}
.g-tb:hover{background:rgba(244,238,227,.1)}
.g-tb svg{width:24px;height:24px;flex:none}
.g-tb[aria-pressed="false"] .on,.g-tb[aria-pressed="true"] .off{display:none}
.g-tb.fs{background:var(--accent-ink);border-color:var(--accent-ink)}
.g-tb.fs:hover{background:#7f3a1e}
@media (max-width:1100px){.g-home span{display:none}}
@media (max-width:820px){.g-tb .lbl{display:none}.g-tb{padding:0;width:52px}.g-crumb{display:none}}
@media (max-width:520px){.gbar{gap:6px;padding-inline:8px}.g-home svg{width:36px;height:36px}.g-title{font-size:18px}.g-timer{padding:7px 10px;font-size:18px}.g-timer svg{display:none}.g-tb{width:44px;min-width:44px;height:44px}.g-tb svg{width:21px;height:21px}}
/* stage */
.stage-w{flex:1 1 auto;min-height:0;position:relative}
.stage{position:absolute;inset:0;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;outline:none}
.stage:focus-visible{box-shadow:inset 0 0 0 4px var(--accent-l)}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* HUD pills over the stage */
.hud{position:absolute;left:0;right:0;top:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:flex-start;padding:12px;pointer-events:none;z-index:3}
.pill{display:inline-flex;align-items:center;gap:10px;background:rgba(18,26,22,.78);border:1px solid rgba(244,238,227,.18);border-radius:999px;padding:9px 18px;font:600 clamp(18px,2.2vw,26px)/1 var(--sans);color:var(--paper);font-variant-numeric:tabular-nums;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.pill small{font:600 13px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-l)}
.bar{width:clamp(80px,12vw,160px);height:14px;border-radius:99px;background:rgba(244,238,227,.15);overflow:hidden}
.bar i{display:block;height:100%;width:100%;background:var(--sage);border-radius:99px;transition:width .2s}
.bar.low i{background:var(--accent)}
.bar.sick i{background:#8fbf3f}
.toast{position:absolute;left:50%;top:22%;transform:translate(-50%,-50%) scale(.9);z-index:4;pointer-events:none;background:var(--paper);color:var(--ink);font:600 clamp(24px,3.6vw,44px)/1.1 var(--serif);padding:16px 30px;border-radius:999px;box-shadow:0 20px 50px -20px rgba(0,0,0,.6);opacity:0;transition:opacity .2s,transform .25s;white-space:nowrap;max-width:94%;overflow:hidden;text-overflow:ellipsis}
.toast.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.toast.bad{background:var(--accent);color:#fff}
.toast.good{background:var(--sage-soft);color:var(--ink)}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}
/* overlays */
.ov{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:clamp(10px,3vw,40px);background:rgba(12,18,15,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.ov[hidden]{display:none}
.ov .card{background:var(--card);color:var(--ink);border-radius:30px;padding:clamp(22px,4vw,44px);width:min(680px,100%);max-height:100%;overflow:auto;text-align:center;box-shadow:0 40px 80px -30px rgba(0,0,0,.7);overscroll-behavior:contain}
.ov .eyebrow{font:600 14px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 12px}
.ov h2{font:400 clamp(34px,5.4vw,60px)/1 var(--serif);letter-spacing:-.02em;margin:0 0 14px;font-variation-settings:"opsz" 144}
.ov h2 i{color:var(--accent);font-style:italic}
.ov p{font-size:clamp(19px,2.2vw,23px);margin:0 auto 18px;max-width:30ch;color:var(--ink-2)}
.ov .big-ic{width:clamp(90px,14vw,150px);height:auto;margin:0 auto 10px;display:block}
.btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:8px}
.gbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:64px;padding:0 34px;border-radius:999px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);font:600 clamp(19px,2.2vw,22px)/1 var(--sans);text-decoration:none;cursor:pointer}
.gbtn:hover{background:var(--accent);border-color:var(--accent)}
.gbtn.ghost{background:transparent;color:var(--ink)}
.gbtn.ghost:hover{background:var(--ink);color:var(--paper)}
.ov .score,.score{font:500 clamp(54px,9vw,96px)/1 var(--serif);color:var(--accent);margin:4px 0 6px;font-variant-numeric:tabular-nums}
.ov .score-l,.score-l{font:600 14px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lesson{background:var(--sage-soft);border-radius:20px;padding:16px 20px;margin:18px auto;max-width:34ch;font:500 clamp(19px,2.2vw,22px)/1.3 var(--sans);color:var(--ink)}
.lesson b{color:var(--accent-ink)}
/* initials */
.ini{display:flex;justify-content:center;gap:12px;margin:10px 0 6px}
.ini-c{display:flex;flex-direction:column;align-items:center;gap:6px}
.ini-c button{width:72px;height:52px;border-radius:14px;border:1px solid rgba(30,43,36,.25);background:var(--paper);color:var(--ink);cursor:pointer;display:grid;place-items:center}
.ini-c button svg{width:26px;height:26px}
.ini-l{width:72px;height:80px;display:grid;place-items:center;font:500 54px/1 var(--serif);background:var(--ink);color:var(--paper);border-radius:16px}
.ini-msg{font-size:18px;color:var(--accent-ink);min-height:1.3em;margin:4px 0 0}
.board{list-style:none;margin:16px auto 6px;padding:0;max-width:420px;text-align:left}
.board li{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;padding:8px 14px;border-radius:12px;font:600 22px/1.2 var(--sans);font-variant-numeric:tabular-nums}
.board li:nth-child(odd){background:rgba(30,43,36,.05)}
.board li.new{background:var(--accent-soft)}
.board .rk{font:500 22px/1 var(--serif);color:var(--accent-ink)}
.board .nm{letter-spacing:.12em}
.board-empty{color:var(--muted);font-size:19px}
.board-h{font:500 26px/1.1 var(--serif);margin:18px 0 0}
/* big touch pads (runner) */
.pad{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));z-index:3;width:clamp(110px,15vw,170px);height:clamp(110px,15vw,170px);border-radius:50%;border:3px solid rgba(244,238,227,.5);background:rgba(18,26,22,.55);color:var(--paper);font:600 clamp(18px,2.2vw,24px)/1 var(--sans);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}
.pad svg{width:44%;height:auto}
.pad.left{left:max(16px,env(safe-area-inset-left))}.pad.right{right:max(16px,env(safe-area-inset-right))}
.pad.glow{border-color:#ffd166;background:rgba(194,96,58,.75);box-shadow:0 0 0 8px rgba(255,209,102,.25)}
.pad.held{background:var(--accent);border-color:#fff}
.dock{position:absolute;z-index:3}

[hidden]{display:none!important}
.ov h2:focus,.ov h2:focus-visible{outline:none}

.ov .score-l{margin:6px auto 0}
.ov .score-sub{font-size:clamp(17px,2vw,20px);margin:0 auto 6px}
@media (max-height:1100px){
 .ov .big-ic{width:clamp(56px,8vh,100px);margin-bottom:6px}
 .ov h2{font-size:clamp(30px,4.6vh,52px);margin-bottom:10px}
 .ov .score{font-size:clamp(42px,6.5vh,76px)}
 .lesson{margin:10px auto;padding:12px 18px}
 .ini{margin:6px 0 2px}.ini-l{height:62px;font-size:42px}.ini-c button{height:40px}
 .ov p{margin-bottom:10px}
}
@media (max-height:700px){ .ov .big-ic{display:none} .ov .card{padding:18px 20px} }