/* =========================================================
   FIND 1 PIXEL — public-facing visual system
   Square, quiet, editorial. Everything comes from the pixel.
   ========================================================= */

:root {
  --bg:#f4f3ef;
  --paper:#fbfaf7;
  --ink:#111212;
  --ink-2:#535452;
  --ink-3:#969792;
  --line:rgba(17,18,18,.14);
  --line-strong:rgba(17,18,18,.26);
  --accent:#3157ff;
  --accent-soft:rgba(49,87,255,.10);
  --danger:#e02e2e;
  --board-max:650px;
  --font:"Avenir Next",Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overscroll-behavior:none}
body{
  position:fixed;inset:0;overflow:hidden;width:100vw;height:100vh;height:100dvh;
  background-color:var(--bg);color:var(--ink);font-family:var(--font);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;
  background-image:
    linear-gradient(rgba(17,18,18,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,18,18,.026) 1px,transparent 1px);
  background-size:24px 24px;
}
button{font:inherit;color:inherit}
.screen{width:100%;height:100%;display:flex;flex-direction:column;align-items:center}
.hidden{display:none!important}

/* START --------------------------------------------------- */
.start-screen{justify-content:center;position:relative;isolation:isolate}
.start-content{width:min(86vw,820px);position:relative;z-index:2}
.eyebrow{font-size:.62rem;font-weight:800;letter-spacing:.19em;color:var(--ink-2);margin-bottom:32px}
.brand{display:flex;flex-direction:column;font-size:clamp(4.4rem,13vw,9rem);font-weight:680;letter-spacing:-.078em;line-height:.76}
.brand-row{display:flex;align-items:baseline;gap:.04em}
.brand-one{display:inline-grid;place-items:center;width:.72em;height:.72em;background:var(--ink);color:var(--bg);font-size:.83em;line-height:1;letter-spacing:-.04em;margin-right:.08em}
.brand-pixel{width:.095em;height:.095em;background:var(--accent);margin-left:.10em;align-self:flex-end;margin-bottom:.06em}
.tagline{margin-top:34px;font-size:clamp(1rem,2.2vw,1.3rem);color:var(--ink-2);letter-spacing:-.018em}
.start-meta{margin-top:50px;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr)}
.start-meta>div{padding:15px 0 16px;display:flex;flex-direction:column;gap:4px}
.start-meta>div+div{border-left:1px solid var(--line);padding-left:18px}
.meta-label,.footer-label{font-size:.49rem;font-weight:850;letter-spacing:.16em;color:var(--ink-3)}
.start-meta strong{font-family:var(--mono);font-size:.84rem;font-weight:650;letter-spacing:-.03em}
.start-btn{margin-top:24px;border:0;background:var(--ink);color:var(--paper);height:48px;padding:0 18px;display:inline-flex;gap:42px;align-items:center;cursor:pointer;font-size:.65rem;font-weight:800;letter-spacing:.16em}
.button-pixel{width:8px;height:8px;background:var(--accent)}
.start-btn:active{transform:translate(1px,1px)}
.start-note{margin-top:12px;font-family:var(--mono);font-size:.49rem;letter-spacing:.06em;color:var(--ink-3)}
.start-foot{position:absolute;left:4vw;bottom:calc(18px + env(safe-area-inset-bottom,0px));font-family:var(--mono);font-size:.5rem;letter-spacing:.12em;color:var(--ink-3)}
.pixel-field{position:absolute;right:6vw;top:8vh;width:168px;display:grid;grid-template-columns:repeat(3,48px);gap:12px;opacity:.55;z-index:1}
.pixel-field i{width:48px;height:48px;border:1px solid var(--line)}
.pixel-field i:nth-child(2),.pixel-field i:nth-child(6),.pixel-field i:nth-child(8){background:rgba(17,18,18,.035)}
.pixel-field i:nth-child(5){background:var(--accent);border-color:var(--accent);width:12px;height:12px;align-self:center;justify-self:center}

/* GAME ---------------------------------------------------- */
.game-screen{justify-content:space-between;padding:20px 26px calc(16px + env(safe-area-inset-bottom,0px));position:relative}
.hud{width:100%;max-width:var(--board-max);display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:16px;min-height:38px}
.hud-brand-wrap{display:flex;flex-direction:column;gap:5px}
.hud-brand{font-size:.78rem;font-weight:800;letter-spacing:-.035em;display:flex;align-items:center;gap:6px}
.hud-pixel{width:6px;height:6px;background:var(--accent);display:inline-block}
.phase-counter{font-family:var(--mono);color:var(--ink-3);font-size:.48rem;letter-spacing:.08em}
.phase-center{display:flex;gap:9px;align-items:baseline;justify-self:center}
.phase-label{font-size:.56rem;font-weight:850;letter-spacing:.16em}
.phase-range{font-family:var(--mono);color:var(--ink-3);font-size:.51rem}
.hud-score{justify-self:end;display:flex;gap:18px;align-items:end}
.hud-best,.hud-level{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.hud-score small{font-size:.44rem;font-weight:850;letter-spacing:.14em;color:var(--ink-3)}
.hud-score b{font-family:var(--mono);font-size:.72rem;font-weight:650;letter-spacing:-.04em}
.progress-track{width:100%;max-width:var(--board-max);height:4px;margin-top:10px;overflow:hidden;background:repeating-linear-gradient(90deg,rgba(17,18,18,.09) 0 5px,transparent 5px 7px)}
.progress-fill{height:100%;width:0%;background:var(--accent);transition:width .24s steps(8,end)}

.board-wrap{flex:1;width:100%;min-height:0;padding:13px 0;display:flex;align-items:center;justify-content:center;position:relative;overflow:visible}
.board{
  position:relative;width:min(89vw,calc(100dvh - 178px),var(--board-max));height:min(89vw,calc(100dvh - 178px),var(--board-max));min-width:180px;min-height:180px;
  overflow:hidden;cursor:crosshair;touch-action:none;border-radius:2px;background:#d4d1cb;
  box-shadow:0 0 0 1px rgba(17,18,18,.18),0 18px 52px rgba(17,18,18,.10);transform:translateZ(0)
}
.board::before{content:"";position:absolute;inset:-1px;pointer-events:none;z-index:4;border:1px solid rgba(255,255,255,.16)}
#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.zone-highlight{position:absolute;z-index:6;width:50%;height:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.70);box-shadow:inset 0 0 0 999px rgba(49,87,255,.04);pointer-events:none;animation:zoneIn .18s steps(2,end)}
@keyframes zoneIn{from{opacity:0}to{opacity:1}}
.board.flash{animation:boardHit .22s steps(2,end)}
@keyframes boardHit{50%{filter:brightness(1.06)}}

.game-footer{width:100%;max-width:var(--board-max);min-height:44px;display:grid;grid-template-columns:1fr auto auto 1fr;gap:16px;align-items:end}
.footer-stat,.assist-slot,.fast-run,.bonus-slot{display:flex;flex-direction:column;gap:3px}
.timer,#assist-value,#fast-run-value,#bonus-slot-value{font-family:var(--mono);font-size:.75rem;font-weight:650;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.assist-slot{align-items:center;text-align:center;border:0;background:transparent;padding:0;color:var(--ink-2);cursor:default;min-width:92px}
.assist-slot.ready,.assist-slot.active{cursor:pointer}
.assist-slot.ready #assist-value,.assist-slot.active #assist-value{color:var(--accent)}
.assist-slot.ready::after{content:var(--label-use,"USE");font-size:.42rem;font-weight:900;letter-spacing:.16em;color:var(--accent);margin-top:2px}
.assist-slot.active::after{content:var(--label-exit,"EXIT");font-size:.42rem;font-weight:900;letter-spacing:.16em;color:var(--accent);margin-top:2px}
.assist-slot.waiting #assist-value{color:var(--ink-3);font-size:.56rem}
.fast-run{text-align:center;align-items:center;color:var(--ink-2)}
.bonus-slot{justify-self:end;align-items:flex-end;border:0;background:transparent;padding:0;cursor:pointer;text-align:right}
.bonus-slot:disabled{cursor:default}
.bonus-slot.empty #bonus-slot-value{color:var(--ink-3)}
.bonus-slot.ready #bonus-slot-value,.bonus-slot.armed #bonus-slot-value{color:var(--accent)}
.bonus-slot.ready::after{content:var(--label-use,"USE");font-size:.42rem;font-weight:900;letter-spacing:.16em;color:var(--accent);margin-top:2px}
.sub-hint{width:100%;max-width:var(--board-max);margin-top:8px;color:var(--ink-3);font-size:.49rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;text-align:center;min-height:12px}

.toast{position:absolute;top:50%;left:50%;z-index:30;transform:translate(-50%,-50%) scale(.98);opacity:0;pointer-events:none;white-space:nowrap;padding:11px 14px;border-radius:1px;color:var(--paper);background:rgba(17,18,18,.94);font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.08em;transition:opacity .13s linear,transform .13s linear}
.toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.click-mark{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;pointer-events:none;z-index:8}
.click-mark::before,.click-mark::after{content:"";position:absolute;background:rgba(255,255,255,.84)}
.click-mark::before{width:18px;height:1px;left:0;top:8px}.click-mark::after{width:1px;height:18px;left:8px;top:0}
.click-mark.hit{animation:markOut .38s steps(4,end) forwards}.click-mark.miss{filter:sepia(1) saturate(5);animation:markOut .48s steps(4,end) forwards}
@keyframes markOut{to{transform:scale(1.7);opacity:0}}
.target-reveal{position:absolute;z-index:9;width:14px;height:14px;margin:-7px 0 0 -7px;border:1px solid var(--danger);pointer-events:none;animation:revealBlink .55s steps(2,end) forwards}
@keyframes revealBlink{0%,55%{opacity:1}100%{opacity:0}}

/* MAGNIFIER ASSIST ---------------------------------------- */
.magnifier-lens{position:absolute;z-index:10;overflow:hidden;pointer-events:none;background:#ddd;box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink),8px 8px 0 rgba(17,18,18,.12)}
#magnifier-canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
.magnifier-cross{position:absolute;inset:50% auto auto 50%;width:10px;height:10px;transform:translate(-50%,-50%);pointer-events:none}
.magnifier-cross::before,.magnifier-cross::after{content:"";position:absolute;background:rgba(17,18,18,.62)}
.magnifier-cross::before{width:10px;height:1px;left:0;top:4px}.magnifier-cross::after{width:1px;height:10px;left:4px;top:0}
.board:has(.magnifier-lens:not(.hidden)){cursor:none}

/* ULTIMATE ------------------------------------------------ */
.ultimate-target{position:absolute;z-index:12;width:22px;height:22px;border:0;padding:0;background:transparent;cursor:default;touch-action:none}
.ultimate-target span{position:absolute;width:2px;height:2px;left:50%;top:50%;transform:translate(-50%,-50%);background:#bdbcb7;border-radius:0;box-shadow:none;pointer-events:none}
body.ultimate-mode .sub-hint{opacity:.26}

/* BONUS CHOICE -------------------------------------------- */
.bonus-choice{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px;background:rgba(244,243,239,.94);backdrop-filter:blur(10px)}
.bonus-dialog{width:min(760px,94vw)}
.bonus-kicker{font-family:var(--mono);font-size:.53rem;font-weight:750;letter-spacing:.14em;color:var(--accent);margin-bottom:13px}
.bonus-dialog h2{font-size:clamp(2.6rem,8vw,5.4rem);line-height:.86;letter-spacing:-.065em;font-weight:680}
.bonus-choice-time{margin-top:17px;color:var(--ink-2);font-family:var(--mono);font-size:.65rem}
.bonus-options{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-strong);border:1px solid var(--line-strong);margin-top:34px}
.bonus-card{min-height:190px;border:0;background:var(--paper);padding:20px;text-align:left;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;transition:background .12s linear}
.bonus-card:hover,.bonus-card:focus-visible{background:#fff;outline:none}.bonus-card:active{background:var(--accent-soft)}
.bonus-card strong{margin-top:28px;font-size:.68rem;letter-spacing:.15em}
.bonus-card small{margin-top:8px;color:var(--ink-2);font-size:.67rem;line-height:1.45;max-width:180px}
.bonus-icon{width:34px;height:34px;display:grid;place-items:center;position:relative;border:1px solid var(--line-strong)}
.zone-icon i{width:50%;height:50%;position:absolute;left:0;top:0;background:var(--accent)}
.pulse-icon i{width:5px;height:5px;background:var(--accent);box-shadow:0 0 0 5px var(--accent-soft),0 0 0 10px rgba(49,87,255,.05)}
.shield-icon i{width:17px;height:21px;border:2px solid var(--accent);border-top-width:4px;clip-path:polygon(0 0,100% 0,100% 66%,50% 100%,0 66%)}
.bonus-rule{margin-top:12px;font-size:.49rem;font-weight:800;letter-spacing:.14em;color:var(--ink-3)}

/* CINEMATIC ----------------------------------------------- */
.cinematic{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;background:rgba(244,243,239,.97);color:var(--ink)}
.cinematic-kicker{margin-bottom:16px;color:var(--accent);font-family:var(--mono);font-size:.52rem;font-weight:800;letter-spacing:.16em;min-height:.8em}
.cinematic-main{font-size:clamp(2.8rem,9vw,6.4rem);line-height:.86;font-weight:680;letter-spacing:-.065em;max-width:900px}
.cinematic-sub{margin-top:18px;color:var(--ink-2);font-family:var(--mono);font-size:.61rem;font-weight:700;letter-spacing:.10em;min-height:1.4em}

/* DEBUG --------------------------------------------------- */
.debug-panel{position:fixed;top:8px;left:8px;z-index:120;max-width:min(420px,calc(100vw - 16px));max-height:50vh;overflow:auto;padding:9px 11px;background:rgba(10,10,12,.92);color:#efefef;font:11px/1.38 var(--mono);white-space:pre-wrap;pointer-events:none}
.debug-target{position:absolute;pointer-events:none;border:1px solid #ff3344;background:rgba(255,51,68,.08);z-index:9}

@media(max-width:620px){
  .game-screen{padding:14px 14px calc(12px + env(safe-area-inset-bottom,0px))}
  .board{width:min(93vw,calc(100dvh - 166px));height:min(93vw,calc(100dvh - 166px))}
  .phase-range,.phase-counter{display:none}.hud{min-height:28px}.hud-score{gap:11px}.phase-label{font-size:.50rem}.hud-score b{font-size:.66rem}
  .game-footer{gap:8px}.timer,#assist-value,#fast-run-value,#bonus-slot-value{font-size:.66rem}.sub-hint{font-size:.44rem}
  .bonus-options{grid-template-columns:1fr}.bonus-card{min-height:116px;display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:14px}.bonus-card .bonus-icon{grid-row:1/3}.bonus-card strong{margin-top:0}.bonus-card small{margin-top:3px;max-width:none}
  .pixel-field{right:-44px;top:30px;transform:scale(.72)}
  .start-meta strong{font-size:.76rem}.start-meta>div+div{padding-left:10px}
}
@media(max-width:390px){.fast-run{display:none}.game-footer{grid-template-columns:1fr 1fr 1fr}.assist-slot{min-width:0}.bonus-slot{grid-column:auto}.assist-slot.waiting #assist-value{font-size:.48rem}}
@media(prefers-reduced-motion:reduce){.progress-fill,.toast{transition:none}}

/* ONLINE / LEADERBOARDS ---------------------------------- */
.start-screen{overflow-y:auto;overflow-x:hidden;justify-content:flex-start;padding:clamp(42px,7vh,86px) 4vw 56px}
.start-shell{width:min(1180px,92vw);display:grid;grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);gap:clamp(44px,7vw,92px);align-items:center;margin:auto 0;position:relative;z-index:3}
.start-content{width:100%}
.mode-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:34px}.mode-buttons .start-btn{margin-top:0;width:100%}.daily-btn{background:var(--paper)!important;color:var(--ink)!important;border-color:var(--ink)!important}.daily-btn .button-pixel{background:var(--accent)}.daily-note{margin-top:8px;font-family:var(--mono);font-size:.45rem;font-weight:750;letter-spacing:.09em;color:var(--ink-3);line-height:1.45}
.start-meta-online>div:first-child{min-width:0}
.player-name-button{border:0;background:transparent;padding:0;text-align:left;font-family:var(--mono);font-size:.84rem;font-weight:650;letter-spacing:-.03em;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.player-name-button:hover,.player-name-button:focus-visible{color:var(--accent);outline:none}

.account-card{margin-top:18px;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);padding:13px 0 12px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-items:center}
.account-copy{min-width:0}.account-kicker{display:block;font-family:var(--mono);font-size:.43rem;font-weight:850;letter-spacing:.14em;color:var(--ink-3);margin-bottom:3px}.account-copy strong{display:block;font-size:.7rem;letter-spacing:.08em}.account-copy small{display:block;margin-top:4px;max-width:430px;font-size:.58rem;line-height:1.35;color:var(--ink-3)}
.account-card.secured .account-copy strong{color:var(--accent)}
.account-actions{display:flex;gap:7px;justify-content:flex-end;align-items:center;flex-wrap:wrap}.account-btn{min-height:36px;padding:0 11px;border:1px solid var(--line-strong);background:transparent;font-family:var(--mono);font-size:.46rem;font-weight:850;letter-spacing:.09em;cursor:pointer;display:inline-flex;align-items:center;gap:7px}.account-btn:hover,.account-btn:focus-visible{background:var(--ink);color:var(--paper);outline:none}.account-btn-primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}.account-btn-primary:hover,.account-btn-primary:focus-visible{background:var(--accent);border-color:var(--accent)}.account-btn:disabled{opacity:.45;cursor:wait}.google-mark{background:#fff;color:#111}.account-message{grid-column:1/-1;min-height:14px;margin:1px 0 0;font-family:var(--mono);font-size:.45rem;line-height:1.35;letter-spacing:.055em;color:var(--ink-3)}.account-message.success{color:var(--accent)}.account-message.error{color:var(--danger)}.account-message.busy{color:var(--ink-3)}

.leaderboard-panel{background:rgba(251,250,247,.78);border:1px solid var(--line-strong);box-shadow:10px 10px 0 rgba(17,18,18,.035);padding:20px;backdrop-filter:blur(8px)}
.leaderboard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.leaderboard-kicker{display:block;font-family:var(--mono);font-size:.48rem;font-weight:800;letter-spacing:.16em;color:var(--accent);margin-bottom:5px}
.leaderboard-head h2{font-size:1.05rem;line-height:1;font-weight:780;letter-spacing:-.04em}
.online-status{font-family:var(--mono);font-size:.46rem;font-weight:800;letter-spacing:.12em;padding:5px 7px;border:1px solid var(--line-strong)}
.online-status.online{color:#1f7d48;border-color:rgba(31,125,72,.35);background:rgba(31,125,72,.05)}
.online-status.connecting{color:var(--accent);border-color:rgba(49,87,255,.28);background:var(--accent-soft)}
.online-status.offline{color:var(--ink-3)}
.leaderboard-grids{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.leaderboard-block{min-width:0}
.leaderboard-title{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:8px}
.leaderboard-title strong{font-size:.54rem;letter-spacing:.14em}
.leaderboard-title span{font-family:var(--mono);font-size:.43rem;color:var(--ink-3);letter-spacing:.08em}
.leaderboard-list{list-style:none;border-top:1px solid var(--line)}
.leaderboard-list li{display:grid;grid-template-columns:24px minmax(0,1fr) auto auto;gap:7px;align-items:center;min-height:27px;border-bottom:1px solid rgba(17,18,18,.075);font-family:var(--mono);font-size:.58rem}
.leaderboard-list .rank{color:var(--ink-3);font-size:.48rem}
.leaderboard-list .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leaderboard-list .score{font-weight:750}.leaderboard-list .time{font-size:.49rem;color:var(--ink-3);font-weight:650;min-width:54px;text-align:right}.leaderboard-list.daily-list li{grid-template-columns:24px minmax(0,1fr) auto}.leaderboard-list.daily-list .time{color:var(--ink);font-size:.58rem;font-weight:750}
.leaderboard-list li.is-you{background:var(--accent-soft);color:var(--accent)}
.leaderboard-list li.placeholder .name{color:var(--ink-3)}
.your-ranks{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:18px}
.your-rank-card{background:var(--paper);padding:12px 13px;display:grid;grid-template-columns:1fr auto;align-items:end;gap:4px 12px}
.your-rank-card .meta-label{grid-column:1/3}
.your-rank-card strong{font-family:var(--mono);font-size:1rem;letter-spacing:-.04em}
.your-rank-card small{font-family:var(--mono);font-size:.48rem;color:var(--ink-3);justify-self:end}
.leaderboard-message{margin-top:11px;font-family:var(--mono);font-size:.46rem;line-height:1.4;letter-spacing:.07em;color:var(--ink-3)}

/* PLAYER NAME --------------------------------------------- */
.name-modal{position:fixed;inset:0;z-index:110;display:grid;place-items:center;padding:24px;background:rgba(244,243,239,.95);backdrop-filter:blur(10px)}
.name-dialog{width:min(560px,94vw)}
.name-dialog h2{font-size:clamp(2.8rem,9vw,5.4rem);line-height:.87;letter-spacing:-.065em;font-weight:680}
.name-dialog>p{margin-top:17px;color:var(--ink-2);font-size:.8rem;line-height:1.45;max-width:430px}
.name-field{display:block;margin-top:30px;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);padding:12px 0 10px}
.name-field span{display:block;font-family:var(--mono);font-size:.44rem;font-weight:800;letter-spacing:.11em;color:var(--ink-3);margin-bottom:7px}
.name-field input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font-family:var(--mono);font-size:clamp(1.35rem,5vw,2.1rem);font-weight:700;letter-spacing:.02em;text-transform:uppercase;caret-color:var(--accent);user-select:text;-webkit-user-select:text}
.name-field input::placeholder{color:rgba(17,18,18,.18)}
.name-error{min-height:18px!important;margin-top:8px!important;color:var(--danger)!important;font-family:var(--mono);font-size:.5rem!important;letter-spacing:.05em}
.name-error.available{color:var(--accent)!important}.name-error.checking{color:var(--ink-3)!important}.name-error.taken{color:var(--danger)!important}
.name-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.name-actions button{height:42px;padding:0 15px;border:1px solid var(--line-strong);font-size:.55rem;font-weight:850;letter-spacing:.13em;cursor:pointer}
.name-cancel{background:transparent}.name-save{background:var(--ink);color:var(--paper)!important;border-color:var(--ink)!important}.name-save:disabled{opacity:.45;cursor:wait}

@media(max-width:900px){
  .start-screen{padding-top:42px;justify-content:flex-start}
  .start-shell{grid-template-columns:1fr;gap:34px;width:min(760px,92vw);margin:0 auto}
  .brand{font-size:clamp(4rem,18vw,7.5rem)}
  .pixel-field{opacity:.28}
  .leaderboard-panel{margin-bottom:40px}
}
@media(max-width:620px){
  .start-screen{padding:30px 14px 54px}
  .mode-buttons{grid-template-columns:1fr}
  .start-shell{width:100%;gap:26px}
  .eyebrow{margin-bottom:22px}
  .tagline{margin-top:25px}
  .start-meta{margin-top:34px}
  .leaderboard-panel{padding:14px}
  .leaderboard-grids{gap:11px}
  .leaderboard-list li{grid-template-columns:21px minmax(0,1fr) auto;font-size:.52rem;min-height:25px}
  .your-rank-card{padding:10px}
  .player-name-button{font-size:.72rem;max-width:110px}
}
@media(max-width:430px){
  .leaderboard-grids{grid-template-columns:1fr}
  .leaderboard-block+ .leaderboard-block{margin-top:5px}
}

/* BONUS PROGRESSION V2 ------------------------------------ */
.bonus-swap-options{grid-template-columns:repeat(2,1fr)}
.bonus-choice-mark{min-width:42px;height:28px;padding:0 8px;display:grid;place-items:center;border:1px solid var(--line-strong);font-family:var(--mono);font-size:.43rem;font-weight:850;letter-spacing:.12em;color:var(--ink-2)}
.bonus-choice-mark.accent{color:var(--accent);border-color:rgba(49,87,255,.35);background:var(--accent-soft)}
@media(max-width:620px){.bonus-swap-options{grid-template-columns:1fr}.bonus-swap-options .bonus-card{min-height:116px}}

/* FEEDBACK CONTROLS --------------------------------------- */
.feedback-toggle{
  width:max-content;border:0;background:transparent;padding:0;color:var(--ink-3);cursor:pointer;
  font-family:var(--mono);font-size:.43rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase
}
.feedback-toggle:hover,.feedback-toggle:focus-visible{color:var(--accent);outline:none}
.feedback-toggle.is-off{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1px}
.feedback-toggle-start{position:absolute;right:4vw;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:5}
.hud-brand-wrap .feedback-toggle{margin-top:1px}

/* RUN SUMMARY --------------------------------------------- */
.run-summary{
  position:fixed;inset:0;z-index:105;display:grid;place-items:center;padding:24px;
  background:rgba(244,243,239,.975);backdrop-filter:blur(12px)
}
.run-summary-shell{width:min(760px,94vw)}
.run-summary-kicker{font-family:var(--mono);font-size:.52rem;font-weight:850;letter-spacing:.16em;color:var(--accent);margin-bottom:18px}
.run-summary-score-wrap{display:flex;align-items:flex-end;gap:16px;border-bottom:1px solid var(--line-strong);padding-bottom:20px}
.run-summary-score-wrap strong{font-family:var(--mono);font-size:clamp(5rem,18vw,10rem);line-height:.72;letter-spacing:-.09em;font-weight:650}
.run-summary-score-wrap span{padding-bottom:5px;font-family:var(--mono);font-size:.5rem;font-weight:850;letter-spacing:.14em;color:var(--ink-3)}
.run-summary-headline{margin-top:18px;font-size:clamp(1.25rem,3vw,1.9rem);font-weight:700;letter-spacing:-.035em}
.run-summary-stats{margin-top:34px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line)}
.run-summary-stats>div{padding:14px 0 15px;display:flex;flex-direction:column;gap:5px}
.run-summary-stats>div+div{border-left:1px solid var(--line);padding-left:16px}
.run-summary-stats strong{font-family:var(--mono);font-size:.82rem;font-weight:650;letter-spacing:-.03em}
.run-summary-actions{display:flex;gap:8px;align-items:center;margin-top:24px;flex-wrap:wrap}
.summary-btn{height:46px;padding:0 16px;border:1px solid var(--line-strong);background:var(--paper);cursor:pointer;font-size:.56rem;font-weight:850;letter-spacing:.13em;display:inline-flex;align-items:center;justify-content:center;gap:28px}
.summary-btn:hover,.summary-btn:focus-visible{background:#fff;outline:none;border-color:var(--ink)}
.summary-btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.summary-btn.primary:hover,.summary-btn.primary:focus-visible{background:#000}
.summary-btn.ghost{background:transparent;color:var(--ink-2)}
.share-status{min-height:18px;margin-top:10px;color:var(--ink-3);font-family:var(--mono);font-size:.48rem;letter-spacing:.07em}
.run-summary.complete .run-summary-kicker{color:#1f7d48}
.run-summary.complete .run-summary-score-wrap strong{color:var(--accent)}

@media(max-width:620px){
  .feedback-toggle-start{right:14px}
  .run-summary{padding:18px}
  .run-summary-score-wrap{align-items:flex-start;flex-direction:column;gap:12px}
  .run-summary-score-wrap span{padding-bottom:0}
  .run-summary-stats{grid-template-columns:1fr}
  .run-summary-stats>div{display:grid;grid-template-columns:1fr auto;align-items:end;padding:10px 0}
  .run-summary-stats>div+div{border-left:0;border-top:1px solid var(--line);padding-left:0}
  .run-summary-stats .meta-label{align-self:center}
  .run-summary-actions{display:grid;grid-template-columns:1fr 1fr}
  .summary-btn.primary{grid-column:1/3}
  .summary-btn{width:100%}
}

/* LAUNCH CHECK -------------------------------------------- */
.launch-check{
  position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:24px;
  background:rgba(244,243,239,.96);backdrop-filter:blur(12px);
}
.launch-check-dialog{width:min(620px,94vw)}
.launch-check-kicker{display:block;margin-bottom:14px;font-family:var(--mono);font-size:.5rem;font-weight:850;letter-spacing:.17em;color:var(--accent)}
.launch-check-dialog h2{font-size:clamp(3rem,10vw,6.2rem);line-height:.84;letter-spacing:-.07em;font-weight:680}
.launch-check-intro{margin-top:18px;max-width:470px;color:var(--ink-2);font-size:.8rem;line-height:1.5}
.launch-check-list{margin-top:30px;border-top:1px solid var(--line-strong)}
.launch-check-item{display:grid;grid-template-columns:16px 1fr;gap:14px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line)}
.launch-check-pixel{width:8px;height:8px;margin-top:5px;background:var(--ink);box-shadow:8px 0 0 rgba(17,18,18,.16)}
.launch-check-item strong{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em}
.launch-check-item small{display:inline-block;margin-top:4px;color:var(--ink-3);font-family:var(--mono);font-size:.49rem;line-height:1.45;letter-spacing:.035em}
.launch-check-close{margin-top:22px;width:100%;height:50px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:0 17px;font-size:.58rem;font-weight:850;letter-spacing:.14em}
.launch-check-close:hover,.launch-check-close:focus-visible{background:#000;outline:none}
.launch-check.is-closing{opacity:0;transition:opacity 160ms ease;pointer-events:none}
@media(max-width:620px){
  .launch-check{padding:18px}
  .launch-check-dialog h2{font-size:clamp(2.8rem,17vw,5.2rem)}
  .launch-check-list{margin-top:24px}
  .launch-check-item{padding:12px 0}
}

/* LANGUAGE GATE ------------------------------------------- */
.language-screen{
  position:relative;justify-content:center;background:#fff;overflow:hidden;padding:28px;
}
.language-shell{width:min(860px,92vw);display:flex;flex-direction:column;align-items:center;gap:28px}
.language-logo-wrap{position:relative;width:min(760px,88vw)}
.language-logo{display:block;width:100%;height:auto;object-fit:contain;user-select:none;-webkit-user-drag:none}
.language-enter-pixel{position:absolute;left:88.55%;top:65.65%;width:4.1%;aspect-ratio:1;border:0;padding:0;background:transparent;cursor:pointer;transform:scale(1);transition:transform .12s ease,box-shadow .12s ease;touch-action:manipulation}
.language-enter-pixel:disabled{cursor:default;pointer-events:none}
.language-enter-pixel:not(:disabled):hover,.language-enter-pixel:not(:disabled):focus-visible{outline:none;transform:scale(1.32);box-shadow:0 0 0 1px rgba(49,87,255,.22)}
.language-enter-pixel:not(:disabled):active{transform:scale(.88)}
.language-enter-hint{margin-top:-9px;font-family:var(--mono);font-size:.48rem;font-weight:800;letter-spacing:.13em;color:var(--ink-3);text-align:center;min-height:1em}
.language-options{display:flex;align-items:center;justify-content:center;gap:1px;background:rgba(17,18,18,.18);border:1px solid rgba(17,18,18,.18)}
.language-options button{
  min-width:138px;height:46px;padding:0 18px;border:0;background:#fff;color:#111212;cursor:pointer;
  font-family:var(--mono);font-size:.58rem;font-weight:850;letter-spacing:.14em;transition:background .12s linear,color .12s linear
}
.language-options button:hover,.language-options button:focus-visible{background:#111212;color:#fff;outline:none}
.language-options button.selected{background:#111212;color:#fff}
.language-options button:active{background:var(--accent);color:#fff}
.language-foot{position:absolute;left:28px;bottom:22px;font-family:var(--mono);font-size:.48rem;letter-spacing:.12em;color:#9a9a96}
@media(max-width:620px){
  .language-screen{padding:18px}.language-shell{gap:22px}.language-logo-wrap{width:min(92vw,620px)}
  .language-options{width:min(420px,92vw);display:grid;grid-template-columns:1fr}
  .language-options button{width:100%;min-width:0;height:44px}
  .language-foot{left:18px;bottom:16px}
}

/* DAILY PIXELS -------------------------------------------- */
body.daily-mode .assist-slot,body.daily-mode .fast-run,body.daily-mode .bonus-slot{display:none!important}
body.daily-mode .game-footer{grid-template-columns:1fr}
body.daily-mode .hud-best{display:none}
body.daily-mode .phase-center{color:var(--accent)}

/* DEV F8 -------------------------------------------------- */
.dev-nav{position:fixed;right:12px;top:12px;z-index:9999;width:280px;padding:12px;background:rgba(10,10,12,.96);color:#fff;border:1px solid rgba(255,255,255,.2);font-family:var(--mono);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.dev-nav.hidden{display:none!important}.dev-nav-title{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:800;letter-spacing:.12em;margin-bottom:10px}.dev-nav input{width:100%;height:34px;background:#18191c;color:#fff;border:1px solid #555;padding:0 8px;font:12px var(--mono)}.dev-nav-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:7px}.dev-nav button{height:30px;border:1px solid #555;background:#222;color:#fff;font:10px var(--mono);cursor:pointer}.dev-nav button:hover{background:#3157ff}.dev-nav-go{grid-column:1/5!important;background:#3157ff!important}

@media(max-width:620px){.leaderboard-list:not(.daily-list) li{grid-template-columns:21px minmax(0,1fr) auto auto}.leaderboard-list.daily-list li{grid-template-columns:21px minmax(0,1fr) auto}.leaderboard-list .time{min-width:48px}}

@media(max-width:700px){.account-card{grid-template-columns:1fr;gap:10px}.account-actions{justify-content:stretch}.account-btn{flex:1 1 100%;justify-content:center}.account-copy small{max-width:none}}

/* V8.1 — LANGUAGE SCREEN RESPONSIVE HEIGHT FIX
   Keep every entry control visible even on short mobile/landscape viewports. */
.language-screen{
  min-height:0;
  padding:
    max(14px, env(safe-area-inset-top, 0px))
    max(18px, env(safe-area-inset-right, 0px))
    max(14px, env(safe-area-inset-bottom, 0px))
    max(18px, env(safe-area-inset-left, 0px));
}
.language-shell{
  width:min(860px,92vw);
  max-height:100%;
  gap:clamp(12px,2.8dvh,28px);
}
.language-logo-wrap{
  /* The logo is square: constrain it by available HEIGHT as well as width. */
  width:min(760px,88vw,calc(100dvh - 180px));
  max-width:100%;
  flex:0 1 auto;
}
.language-logo{
  width:100%;
  max-height:calc(100dvh - 180px);
}
.language-enter-hint{
  margin-top:clamp(-9px,-1dvh,-3px);
}
@media(max-width:620px){
  .language-screen{
    padding:
      max(12px, env(safe-area-inset-top, 0px))
      max(14px, env(safe-area-inset-right, 0px))
      max(12px, env(safe-area-inset-bottom, 0px))
      max(14px, env(safe-area-inset-left, 0px));
  }
  .language-shell{gap:clamp(10px,2.2dvh,22px)}
  .language-logo-wrap{
    /* Reserve room for the 3 stacked language buttons + hint. */
    width:min(92vw,620px,calc(100dvh - 245px));
  }
  .language-logo{max-height:calc(100dvh - 245px)}
}
/* Very short screens / phones in landscape:
   keep the languages on one row so the page always fits without scrolling. */
@media(max-height:560px){
  .language-shell{gap:9px}
  .language-logo-wrap{
    width:min(88vw,620px,calc(100dvh - 145px));
  }
  .language-logo{max-height:calc(100dvh - 145px)}
  .language-options{
    width:min(460px,92vw);
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .language-options button{
    width:100%;
    min-width:0;
    height:40px;
    padding:0 6px;
    font-size:.5rem;
    letter-spacing:.09em;
  }
  .language-enter-hint{
    margin-top:0;
    font-size:.43rem;
    letter-spacing:.08em;
  }
  .language-foot{display:none}
}
/* Extremely small-height browser windows: prioritize the interactive controls. */
@media(max-height:400px){
  .language-screen{padding-top:8px;padding-bottom:8px}
  .language-shell{gap:6px}
  .language-logo-wrap{
    width:min(82vw,520px,calc(100dvh - 112px));
  }
  .language-logo{max-height:calc(100dvh - 112px)}
  .language-options button{height:34px;font-size:.46rem}
  .language-enter-hint{font-size:.4rem}
}


/* V8.2 — CLEAR GAME MODE CHOICE -------------------------- */
.mode-choice{margin-top:30px}
.mode-choice-kicker{
  display:block;margin-bottom:10px;
  font-family:var(--mono);font-size:.52rem;font-weight:900;
  letter-spacing:.16em;color:var(--ink);text-transform:uppercase
}
.mode-choice .mode-buttons{margin-top:0;gap:10px}
.mode-choice .mode-btn{
  position:relative;min-height:92px;height:auto;
  padding:17px 46px 16px 18px;
  background:var(--ink)!important;color:var(--paper)!important;
  border:1px solid var(--ink)!important;
  display:flex;align-items:center;justify-content:flex-start;
  text-align:left;gap:14px
}
.mode-choice .mode-btn:hover,.mode-choice .mode-btn:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px
}
.mode-choice .mode-btn-copy{display:flex;flex-direction:column;gap:7px;min-width:0}
.mode-choice .mode-btn-title{
  display:block;color:var(--paper);font-size:.69rem;font-weight:900;
  line-height:1.15;letter-spacing:.12em
}
.mode-choice .mode-btn-desc{
  display:block;color:rgba(244,243,239,.72);
  font-family:var(--mono);font-size:.45rem;font-weight:700;
  line-height:1.35;letter-spacing:.055em
}
.mode-choice .mode-btn .button-pixel{
  position:absolute;right:17px;top:50%;transform:translateY(-50%);
  flex:0 0 auto
}
.mode-choice .daily-btn{background:var(--ink)!important;color:var(--paper)!important;border-color:var(--ink)!important}
.mode-choice .daily-btn .button-pixel{background:var(--accent)}
@media(max-width:620px){
  .mode-choice{margin-top:26px}
  .mode-choice-kicker{font-size:.49rem;margin-bottom:9px}
  .mode-choice .mode-buttons{grid-template-columns:1fr;gap:9px}
  .mode-choice .mode-btn{min-height:82px;padding:14px 42px 13px 15px}
  .mode-choice .mode-btn-title{font-size:.64rem}
  .mode-choice .mode-btn-desc{font-size:.43rem}
}


/* V8.3 — CHALLENGE A FRIEND ------------------------------ */
.challenge-mode-btn{
  grid-column:1 / -1;
  width:100%;
  margin-top:10px!important;
  min-height:82px!important;
}
.challenge-mode-btn .mode-btn-desc{max-width:620px}

.challenge-overlay{
  position:fixed;inset:0;z-index:140;display:grid;place-items:center;
  padding:clamp(16px,4vw,32px);
  background:rgba(244,243,239,.982);
  backdrop-filter:blur(12px)
}
.challenge-card{
  width:min(610px,94vw);
  border-top:2px solid var(--ink);border-bottom:1px solid var(--line-strong);
  padding:clamp(22px,5vw,38px) 0;
}
.challenge-kicker{
  display:block;font-family:var(--mono);font-size:.5rem;font-weight:900;
  letter-spacing:.17em;color:var(--accent);margin-bottom:15px
}
.challenge-card h2{
  margin:0;font-size:clamp(2rem,7vw,4rem);line-height:.92;
  letter-spacing:-.055em;text-transform:uppercase
}
.challenge-lead{
  margin:18px 0 0;max-width:560px;font-size:.76rem;line-height:1.55;color:var(--ink-2)
}
.challenge-name-field{display:block;margin-top:26px}
.challenge-name-field>span{
  display:block;margin-bottom:8px;font-family:var(--mono);font-size:.45rem;
  font-weight:850;letter-spacing:.14em;color:var(--ink-3)
}
.challenge-name-field input{
  width:100%;height:54px;border:1px solid var(--line-strong);border-radius:0;
  background:transparent;color:var(--ink);padding:0 14px;
  font:800 .82rem var(--mono);letter-spacing:.08em;text-transform:uppercase;outline:none
}
.challenge-name-field input:focus{border-color:var(--accent)}
.challenge-error{
  min-height:18px;margin:7px 0 0;font-family:var(--mono);
  font-size:.45rem;font-weight:800;letter-spacing:.07em;color:#a01818
}
.challenge-primary,.challenge-secondary{
  min-height:50px;border:1px solid var(--ink);border-radius:0;
  font-family:var(--mono);font-size:.56rem;font-weight:900;letter-spacing:.12em;
  cursor:pointer;text-transform:uppercase
}
.challenge-primary{
  width:100%;margin-top:18px;padding:0 16px;background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:space-between;gap:20px
}
.challenge-primary:hover,.challenge-primary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.challenge-secondary{
  width:100%;margin-top:8px;padding:0 16px;background:transparent;color:var(--ink)
}
.challenge-target-card{
  margin-top:24px;padding:16px 0;border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-strong);display:grid;grid-template-columns:1fr auto;
  gap:3px 18px;align-items:end
}
.challenge-target-card>span{
  font-family:var(--mono);font-size:.44rem;font-weight:850;letter-spacing:.13em;color:var(--ink-3)
}
.challenge-target-card strong{
  grid-row:1 / 3;grid-column:2;font-family:var(--mono);font-size:clamp(2rem,8vw,3.6rem);
  line-height:.85;letter-spacing:-.06em
}
.challenge-target-card small{font-family:var(--mono);font-size:.52rem;font-weight:800;letter-spacing:.08em}
.challenge-rule{
  margin:18px 0 0;font-family:var(--mono);font-size:.48rem;font-weight:850;
  letter-spacing:.1em;color:var(--ink-3)
}
.challenge-result-time{
  margin-top:25px;display:flex;align-items:flex-end;gap:8px;border-bottom:1px solid var(--line-strong);
  padding-bottom:18px
}
.challenge-result-time strong{
  font-family:var(--mono);font-size:clamp(4.7rem,18vw,8.5rem);
  line-height:.7;letter-spacing:-.08em
}
.challenge-result-time span{font-family:var(--mono);font-size:.7rem;font-weight:900;letter-spacing:.12em}
.challenge-result-actions{margin-top:18px}
body.challenge-mode .assist-slot,
body.challenge-mode .bonus-slot,
body.challenge-mode .fast-run{display:none!important}
body.challenge-mode .game-footer{grid-template-columns:1fr!important}
body.challenge-mode .game-footer .timer-wrap{max-width:320px}
body.challenge-mode #phase-range{display:none}
@media(max-width:620px){
  .challenge-mode-btn{margin-top:9px!important}
  .challenge-card{width:min(94vw,560px)}
  .challenge-card h2{font-size:clamp(2rem,12vw,3.2rem)}
}


/* V8.7 — DAILY STREAK ------------------------------------ */
.streak-summary{
  margin-top:15px;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);
  padding:14px 0 13px
}
.streak-summary-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.streak-kicker{
  display:block;font-family:var(--mono);font-size:.43rem;font-weight:900;
  letter-spacing:.15em;color:var(--accent);margin-bottom:4px
}
.streak-summary-head strong{display:block;font-size:.65rem;letter-spacing:.08em}
.streak-status{
  flex:0 0 auto;min-height:24px;padding:0 8px;border:1px solid var(--line-strong);
  display:inline-flex;align-items:center;font-family:var(--mono);font-size:.41rem;
  font-weight:900;letter-spacing:.1em
}
.streak-status.active{border-color:var(--accent);color:var(--accent)}
.streak-status.active::before{content:"";width:5px;height:5px;background:var(--accent);margin-right:6px}
.streak-summary-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}
.streak-summary-stats>div{border:1px solid var(--line);padding:10px 11px}
.streak-summary-stats strong{
  display:inline-block;margin-top:5px;font-family:var(--mono);font-size:1.25rem;
  line-height:1;letter-spacing:-.05em
}
.streak-summary-stats small{
  margin-left:5px;font-family:var(--mono);font-size:.38rem;font-weight:850;
  letter-spacing:.1em;color:var(--ink-3)
}
.streak-open{
  width:100%;min-height:38px;margin-top:9px;padding:0 11px;border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-family:var(--mono);font-size:.44rem;font-weight:900;letter-spacing:.1em
}
.streak-open:hover,.streak-open:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.streak-modal{
  position:fixed;inset:0;z-index:145;display:grid;place-items:center;
  padding:clamp(16px,4vw,32px);background:rgba(244,243,239,.985);backdrop-filter:blur(12px)
}
.streak-dialog{width:min(680px,95vw);max-height:min(820px,92dvh);overflow:auto;border-top:2px solid var(--ink);padding:26px 0 0}
.streak-dialog h2{margin:0;font-size:clamp(2rem,7vw,4rem);line-height:.92;letter-spacing:-.055em;text-transform:uppercase}
.streak-explain{margin:17px 0 22px;max-width:610px;font-size:.68rem;line-height:1.55;color:var(--ink-2)}
.streak-list-head{
  display:grid;grid-template-columns:32px minmax(0,1fr) 68px 105px;gap:8px;
  padding:0 8px 7px;border-bottom:1px solid var(--line-strong);
  font-family:var(--mono);font-size:.39rem;font-weight:900;letter-spacing:.1em;color:var(--ink-3)
}
.streak-list{list-style:none;margin:0;padding:0}
.streak-list li{
  display:grid;grid-template-columns:32px minmax(0,1fr) 68px 105px;gap:8px;
  min-height:34px;align-items:center;padding:0 8px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:.48rem;font-weight:800
}
.streak-list li.is-you{background:rgba(49,87,255,.055)}
.streak-list .streak-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.streak-list .streak-best{text-align:right}
.streak-list .streak-state{text-align:right;color:var(--ink-3);font-size:.41rem}
.streak-list .streak-state.active{color:var(--accent)}
.streak-list .streak-state.active::before{
  content:"";display:inline-block;width:5px;height:5px;background:var(--accent);margin-right:5px;vertical-align:1px
}
.streak-legend{
  display:flex;gap:15px;flex-wrap:wrap;margin-top:13px;
  font-family:var(--mono);font-size:.39rem;font-weight:800;letter-spacing:.07em;color:var(--ink-3)
}
.streak-legend>span{display:flex;align-items:center;gap:5px}
.streak-dot{display:inline-block;width:5px;height:5px;background:var(--accent)}
.streak-close{
  width:100%;min-height:45px;margin-top:18px;border:1px solid var(--ink);background:transparent;
  color:var(--ink);font-family:var(--mono);font-size:.48rem;font-weight:900;letter-spacing:.12em;cursor:pointer
}
@media(max-width:620px){
  .streak-list-head,.streak-list li{grid-template-columns:25px minmax(0,1fr) 54px 86px;gap:5px}
  .streak-list li{font-size:.44rem}
  .streak-list .streak-state{font-size:.37rem}
}


/* V8.8 — GLOBAL PIXELS + PERSONAL STREAK RANK ------------ */
.global-pixel-counter{
  position:absolute;top:calc(18px + env(safe-area-inset-top,0px));right:clamp(14px,3vw,34px);
  z-index:12;display:flex;align-items:baseline;gap:8px;pointer-events:none;
  font-family:var(--mono);white-space:nowrap
}
.global-pixel-counter span{
  font-size:.39rem;font-weight:850;letter-spacing:.12em;color:var(--ink-3)
}
.global-pixel-counter strong{
  font-size:.55rem;font-weight:900;letter-spacing:.03em;color:var(--ink)
}
.streak-summary-stats{grid-template-columns:repeat(3,1fr)}
.streak-your-position{
  display:grid;grid-template-columns:auto auto 1fr;gap:10px;align-items:center;
  margin-top:14px;padding:11px 12px;border:1px solid var(--line-strong);
  font-family:var(--mono)
}
.streak-your-position>span{
  font-size:.4rem;font-weight:900;letter-spacing:.11em;color:var(--ink-3)
}
.streak-your-position>strong{
  font-size:1rem;letter-spacing:-.04em
}
.streak-your-position>small{
  min-width:0;text-align:right;font-size:.42rem;font-weight:800;letter-spacing:.06em;
  color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
@media(max-width:620px){
  .global-pixel-counter{
    top:calc(10px + env(safe-area-inset-top,0px));right:12px;gap:6px
  }
  .global-pixel-counter span{font-size:.34rem}
  .global-pixel-counter strong{font-size:.48rem}
  .streak-summary-stats{grid-template-columns:repeat(3,1fr);gap:6px}
  .streak-summary-stats>div{padding:9px 8px}
  .streak-summary-stats strong{font-size:1.05rem}
  .streak-summary-stats small{font-size:.32rem;margin-left:3px}
  .streak-your-position{grid-template-columns:auto auto;gap:6px 10px}
  .streak-your-position>small{grid-column:1 / -1;text-align:left}
}
@media(max-width:390px){
  .global-pixel-counter span{display:none}
}


/* V9.0 — LIVE MULTIPLAYER -------------------------------- */
.mode-buttons-four{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}
.mode-buttons-four .mode-btn{
  min-height:112px!important;
  height:100%;
  margin-top:0!important;
}
.mode-buttons-four .mode-btn-title{font-size:clamp(.76rem,1.5vw,1rem)}
.mode-buttons-four .mode-btn-desc{max-width:260px}
.challenge-mode-btn{margin-top:0!important}
.live-mode-btn{
  background:var(--paper)!important;color:var(--ink)!important;border-color:var(--ink)!important
}
.live-mode-btn .button-pixel{background:var(--accent)}

.live-overlay{
  position:fixed;inset:0;z-index:155;display:grid;place-items:center;
  padding:clamp(16px,4vw,32px);background:rgba(244,243,239,.986);backdrop-filter:blur(12px)
}
.live-card{
  width:min(620px,94vw);max-height:92dvh;overflow:auto;border-top:2px solid var(--ink);
  border-bottom:1px solid var(--line-strong);padding:clamp(22px,5vw,38px) 0
}
.live-kicker{
  display:block;font-family:var(--mono);font-size:.48rem;font-weight:900;
  letter-spacing:.16em;color:var(--accent);margin-bottom:14px
}
.live-card h2,.live-round-result h2{
  margin:0;font-size:clamp(2.2rem,8vw,4.5rem);line-height:.9;letter-spacing:-.055em;text-transform:uppercase
}
.live-lead{margin:17px 0 0;max-width:560px;font-size:.76rem;line-height:1.55;color:var(--ink-2)}
.live-primary,.live-secondary{
  min-height:50px;border:1px solid var(--ink);border-radius:0;font-family:var(--mono);
  font-size:.53rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase;cursor:pointer
}
.live-primary{
  width:100%;margin-top:18px;padding:0 16px;background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:space-between;gap:18px
}
.live-primary:disabled{opacity:.35;cursor:not-allowed}
.live-secondary{width:100%;margin-top:8px;background:transparent;color:var(--ink);padding:0 14px}
.live-secondary.strong{margin-top:0;background:var(--paper)}
.live-divider{
  display:flex;align-items:center;gap:10px;margin:17px 0;font:850 .42rem var(--mono);
  letter-spacing:.11em;color:var(--ink-3)
}
.live-divider::before,.live-divider::after{content:"";height:1px;background:var(--line);flex:1}
.live-join-form{display:grid;grid-template-columns:1fr 160px;gap:8px}
.live-join-form label>span,.live-mini-label{
  display:block;margin-bottom:7px;font:850 .42rem var(--mono);letter-spacing:.12em;color:var(--ink-3)
}
.live-join-form input{
  width:100%;height:50px;border:1px solid var(--line-strong);border-radius:0;background:transparent;
  color:var(--ink);padding:0 13px;outline:none;text-transform:uppercase;
  font:900 .85rem var(--mono);letter-spacing:.18em
}
.live-join-form input:focus{border-color:var(--accent)}
.live-error{min-height:18px;margin:8px 0 0;color:#a01818;font:800 .43rem var(--mono);letter-spacing:.05em}

.live-room-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px}
.live-room-head strong{display:block;font:900 clamp(2.6rem,11vw,5rem)/.85 var(--mono);letter-spacing:.12em}
.live-copy{
  min-height:34px;padding:0 11px;border:1px solid var(--ink);background:transparent;color:var(--ink);
  font:900 .43rem var(--mono);letter-spacing:.1em;cursor:pointer
}
.live-rules-strip{
  display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr;gap:7px 9px;align-items:baseline;
  margin:18px 0;padding:11px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)
}
.live-rules-strip span{font:900 1.1rem var(--mono)}
.live-rules-strip small{font:850 .38rem var(--mono);letter-spacing:.09em;color:var(--ink-3)}
.live-player-head{
  display:grid;grid-template-columns:1fr auto;gap:10px;padding:0 8px 7px;border-bottom:1px solid var(--line-strong);
  font:900 .4rem var(--mono);letter-spacing:.11em;color:var(--ink-3)
}
.live-player-list{list-style:none;margin:0;padding:0}
.live-player-list li{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;min-height:38px;
  padding:0 8px;border-bottom:1px solid var(--line);font:800 .5rem var(--mono)
}
.live-player-list .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-player-list .host::after{content:" HOST";font-size:.34rem;color:var(--accent);letter-spacing:.08em}
.live-player-list .ready{color:var(--accent)}
.live-player-list .offline{color:var(--ink-3)}
.live-lobby-status{min-height:18px;margin:10px 0 0;font:800 .43rem var(--mono);letter-spacing:.06em;color:var(--ink-3)}

.live-scoreboard{
  position:absolute;top:12px;right:12px;z-index:9;width:min(210px,42vw);pointer-events:none;
  border:1px solid rgba(20,20,20,.2);background:rgba(244,243,239,.92);backdrop-filter:blur(5px);
  padding:7px 8px
}
.live-scoreboard .row{
  display:grid;grid-template-columns:18px minmax(0,1fr) 26px;gap:5px;align-items:center;
  min-height:20px;font:800 .38rem var(--mono);letter-spacing:.04em
}
.live-scoreboard .row.me{font-weight:950}
.live-scoreboard .rank{color:var(--ink-3)}
.live-scoreboard .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-scoreboard .score{text-align:right}
.live-eliminated{
  position:absolute;inset:0;z-index:12;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(244,243,239,.95);text-align:center;pointer-events:none
}
.live-eliminated strong{font:950 clamp(2rem,8vw,4rem) var(--mono);letter-spacing:-.05em}
.live-eliminated span{margin-top:10px;font:850 .48rem var(--mono);letter-spacing:.1em;color:var(--ink-3)}

.live-round-result{
  position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px;background:rgba(244,243,239,.97);pointer-events:none
}
.live-round-result>strong{margin-top:18px;font:950 clamp(1.8rem,7vw,4rem) var(--mono);letter-spacing:.02em}
.live-round-result>p{margin:8px 0 0;font:900 .65rem var(--mono);letter-spacing:.12em;color:var(--ink-3)}

.live-final-head,.live-final-list li{
  display:grid;grid-template-columns:36px minmax(0,1fr) 64px;gap:8px;align-items:center
}
.live-final-head{
  margin-top:22px;padding:0 8px 7px;border-bottom:1px solid var(--line-strong);
  font:900 .4rem var(--mono);letter-spacing:.1em;color:var(--ink-3)
}
.live-final-list{list-style:none;margin:0;padding:0}
.live-final-list li{
  min-height:40px;padding:0 8px;border-bottom:1px solid var(--line);
  font:850 .52rem var(--mono)
}
.live-final-list li:first-child{font-weight:950}
.live-final-list .pts{text-align:right}

body.live-mode .assist-slot,
body.live-mode .bonus-slot,
body.live-mode .fast-run{display:none!important}
body.live-mode .game-footer{grid-template-columns:1fr!important}
body.live-mode .game-footer .timer-wrap{max-width:320px}
body.live-mode #phase-range{display:none}
body.live-mode .sub-hint{font-weight:850}

@media(max-width:620px){
  .mode-buttons-four{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .mode-buttons-four .mode-btn{min-height:104px!important;padding:12px!important}
  .mode-buttons-four .mode-btn-title{font-size:.68rem}
  .mode-buttons-four .mode-btn-desc{font-size:.36rem;line-height:1.35}
  .live-join-form{grid-template-columns:1fr}
  .live-rules-strip{grid-template-columns:auto 1fr auto 1fr auto 1fr;gap:5px}
  .live-scoreboard{top:8px;right:8px;width:min(180px,48vw);padding:5px 6px}
  .live-scoreboard .row{font-size:.34rem}
}

.live-player-list .name em{font-style:normal;font-size:.34rem;color:var(--accent);letter-spacing:.08em}


/* V9.0.1 — strict 2x2 equal mode grid */
.mode-choice .mode-buttons-four{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,minmax(112px,1fr))!important;
  grid-auto-flow:row!important;
  gap:10px!important;
  align-items:stretch!important;
}
.mode-choice .mode-buttons-four > .mode-btn{
  grid-column:auto!important;
  grid-row:auto!important;
  width:100%!important;
  min-width:0!important;
  min-height:112px!important;
  height:100%!important;
  margin:0!important;
  align-self:stretch!important;
}
.mode-choice .mode-buttons-four > .challenge-mode-btn,
.mode-choice .mode-buttons-four > .live-mode-btn{
  grid-column:auto!important;
  width:100%!important;
  margin:0!important;
  min-height:112px!important;
}
.mode-choice .mode-buttons-four .mode-btn-desc{
  max-width:none!important;
}
@media(max-width:620px){
  .mode-choice .mode-buttons-four{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,minmax(104px,1fr))!important;
    gap:7px!important;
  }
  .mode-choice .mode-buttons-four > .mode-btn,
  .mode-choice .mode-buttons-four > .challenge-mode-btn,
  .mode-choice .mode-buttons-four > .live-mode-btn{
    min-height:104px!important;
    height:100%!important;
  }
}


/* V9.1 — Live immersion / invite link */
.live-eliminated{
  background:rgba(244,243,239,.58)!important;
  backdrop-filter:blur(.6px);
  -webkit-backdrop-filter:blur(.6px);
}
.live-eliminated strong{
  color:var(--ink);
  text-shadow:0 1px 0 rgba(244,243,239,.8);
}
.live-eliminated span{
  color:var(--ink)!important;
  background:rgba(244,243,239,.68);
  padding:5px 8px;
}
.live-room-actions{
  display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap
}
.live-room-actions .live-copy{margin:0}
@media(max-width:520px){
  .live-room-head{align-items:flex-start}
  .live-room-actions{flex-direction:column;align-items:stretch}
}


/* V9.2 — live cursor personalization ---------------------- */
.live-player-list .name.self{
  cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px
}
.live-player-list .name.self:hover{color:var(--accent)}
.live-appearance{
  margin-top:12px;padding:12px;border:1px solid var(--line-strong);background:rgba(244,243,239,.65)
}
.live-appearance-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.live-appearance-head strong{font:900 .64rem var(--mono);letter-spacing:.04em}
.live-appearance-close{
  width:30px;height:30px;border:1px solid var(--ink);background:transparent;color:var(--ink);
  font:900 1rem var(--mono);cursor:pointer
}
.live-color-palette,.live-cursor-palette{display:flex;gap:7px;flex-wrap:wrap}
.live-color-choice{
  width:28px;height:28px;border:2px solid transparent;padding:0;cursor:pointer;background:var(--choice)
}
.live-color-choice.selected{outline:2px solid var(--ink);outline-offset:2px}
.live-color-choice.taken{opacity:.22;cursor:not-allowed}
.live-cursor-label{margin-top:14px}
.live-cursor-choice{
  width:40px;height:40px;border:1px solid var(--line-strong);background:transparent;color:var(--cursor-preview);
  display:grid;place-items:center;cursor:pointer;padding:4px
}
.live-cursor-choice svg{width:24px;height:24px;overflow:visible}
.live-cursor-choice.selected{border-color:var(--ink);outline:2px solid var(--ink);outline-offset:1px}
.live-cursors{
  position:absolute;inset:0;z-index:14;pointer-events:none;overflow:hidden
}
.live-remote-cursor{
  position:absolute;left:0;top:0;transform:translate(-2px,-2px);color:var(--cursor-color);
  transition:left 90ms linear,top 90ms linear;will-change:left,top
}
.live-remote-cursor .cursor-icon{
  width:18px;height:18px;display:block;filter:drop-shadow(0 1px 0 rgba(255,255,255,.85))
}
.live-remote-cursor .cursor-icon svg{width:18px;height:18px;overflow:visible}
.live-remote-cursor .cursor-name{
  position:absolute;left:15px;top:11px;max-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding:2px 4px;background:rgba(244,243,239,.82);border:1px solid currentColor;
  font:900 .34rem var(--mono);letter-spacing:.04em;color:inherit
}
.live-cursors-toggle{
  position:absolute;left:8px;top:8px;z-index:16;display:none;align-items:center;gap:6px;
  min-height:28px;padding:0 8px;border:1px solid rgba(20,20,20,.28);
  background:rgba(244,243,239,.9);color:var(--ink);font:850 .34rem var(--mono);
  letter-spacing:.08em;cursor:pointer
}
.live-cursors-toggle strong{font-size:.36rem;color:var(--accent)}
body.live-mode .live-cursors-toggle{display:flex}
body.live-mode .live-cursors-toggle.hidden{display:none}
body.live-mode .live-cursors{display:block}
body.live-mode .live-cursors.hidden{display:none}
.live-eliminated{z-index:12!important}
@media(max-width:620px){
  .live-cursors-toggle{left:6px;top:6px;min-height:26px;font-size:.31rem}
  .live-remote-cursor .cursor-name{font-size:.31rem}
}

.live-player-list button.name{
  border:0;background:transparent;color:inherit;padding:0;margin:0;text-align:left;
  font:inherit;min-width:0;display:flex;align-items:center;gap:6px
}
.live-player-swatch{
  width:8px;height:8px;display:inline-block;flex:0 0 auto;border:1px solid rgba(20,20,20,.2)
}
.live-customize-hint{
  margin:7px 8px 0;font:800 .36rem var(--mono);letter-spacing:.07em;color:var(--ink-3)
}

/* V9.2 preflight eye-check must sit above live/challenge lobbies */
.launch-check{z-index:180!important}


/* V9.2.3 — Live-only HUD cleanup */
.hud-controls-row{
  display:flex;align-items:center;gap:10px;min-height:16px
}
body.live-mode .hud{
  grid-template-columns:1fr auto!important;
}
body.live-mode .phase-center,
body.live-mode .phase-counter,
body.live-mode .hud-best{
  display:none!important;
}
body.live-mode .hud-score{
  grid-column:2;justify-self:end;gap:0
}
body.live-mode .hud-level{
  align-items:flex-end
}
body.live-mode .hud-controls-row .live-cursors-toggle{
  position:static!important;
  left:auto!important;top:auto!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  font-family:var(--mono)!important;
  font-size:.43rem!important;
  font-weight:850!important;
  letter-spacing:.12em!important;
  color:var(--ink-3)!important;
  gap:4px!important;
}
body.live-mode .hud-controls-row .live-cursors-toggle strong{
  font-size:.43rem!important;
}
body.live-mode .game-footer{
  display:flex!important;
  justify-content:center!important;
  align-items:flex-end!important;
  grid-template-columns:none!important;
}
body.live-mode .game-footer .footer-stat{
  align-items:center!important;
  text-align:center!important;
  min-width:130px
}
body.live-mode .game-footer .timer{
  font-size:.86rem
}


/* V9.2.4 — lobby mode grouping + visible player appearance */
.mode-choice{
  margin-top:34px;
}
.mode-choice-heading{
  display:flex;align-items:center;gap:14px;margin-bottom:16px
}
.mode-choice-heading::after{
  content:"";height:1px;background:var(--line-strong);flex:1
}
.mode-choice-heading strong{
  font-size:clamp(.78rem,1.8vw,1.05rem);
  font-weight:900;letter-spacing:.11em;text-transform:uppercase
}
.mode-section + .mode-section{
  margin-top:17px
}
.mode-section-title{
  display:block;margin-bottom:8px;
  font-family:var(--mono);font-size:.43rem;font-weight:900;
  letter-spacing:.15em;color:var(--ink-3)
}
.mode-buttons-pair{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
  margin-top:0!important
}
.mode-buttons-pair > .mode-btn,
.mode-buttons-pair > .challenge-mode-btn,
.mode-buttons-pair > .live-mode-btn{
  grid-column:auto!important;
  width:100%!important;
  min-width:0!important;
  min-height:112px!important;
  height:100%!important;
  margin:0!important
}
.mode-buttons-pair .mode-btn-desc{
  max-width:none!important
}
.live-player-cursor{
  width:19px;height:19px;display:inline-grid;place-items:center;flex:0 0 auto
}
.live-player-cursor svg{
  width:17px;height:17px;overflow:visible
}
.live-player-name-text{
  color:inherit
}
.live-player-list button.name em{
  color:var(--accent)
}
.live-appearance-visible{
  margin:12px 0 0;
  font:800 .36rem var(--mono);
  letter-spacing:.08em;
  color:var(--ink-3);
  text-transform:uppercase
}
@media(max-width:620px){
  .mode-choice{margin-top:26px}
  .mode-choice-heading{margin-bottom:13px}
  .mode-buttons-pair{
    gap:7px!important
  }
  .mode-buttons-pair > .mode-btn,
  .mode-buttons-pair > .challenge-mode-btn,
  .mode-buttons-pair > .live-mode-btn{
    min-height:104px!important
  }
}


/* V9.3 — background music controls ------------------------- */
.music-controls{
  position:fixed;right:18px;bottom:18px;z-index:260;
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  pointer-events:none
}
.music-toggle,.music-panel{pointer-events:auto}
.music-toggle{
  position:relative;width:38px;height:38px;padding:0;
  display:grid;place-items:center;
  border:1px solid var(--ink);border-radius:0;
  background:rgba(244,243,239,.94);color:var(--ink);
  cursor:pointer;backdrop-filter:blur(8px);
  box-shadow:0 6px 20px rgba(17,18,18,.08)
}
.music-toggle::after{
  content:"";position:absolute;right:4px;bottom:4px;width:4px;height:4px;background:var(--accent)
}
.music-toggle.is-muted::after{background:var(--ink-3)}
.music-toggle svg{
  width:21px;height:21px;overflow:visible;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:square;stroke-linejoin:miter
}
.music-toggle svg path:first-child{fill:currentColor;stroke:none}
.music-toggle:hover,.music-toggle:focus-visible{color:var(--accent);outline:none}
.music-panel{
  width:190px;padding:12px;
  border:1px solid var(--ink);
  background:rgba(244,243,239,.975);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 28px rgba(17,18,18,.10)
}
.music-panel-head{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:9px;margin-bottom:9px;border-bottom:1px solid var(--line-strong);
  font:900 .43rem var(--mono);letter-spacing:.15em
}
.music-panel-pixel{width:6px;height:6px;background:var(--accent)}
.music-mute{
  width:100%;min-height:34px;border:1px solid var(--ink);
  background:transparent;color:var(--ink);
  font:900 .42rem var(--mono);letter-spacing:.11em;
  cursor:pointer
}
.music-mute:hover,.music-mute:focus-visible{background:var(--ink);color:var(--paper);outline:none}
.music-volume-row{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;
  margin-top:12px;
  font:850 .38rem var(--mono);letter-spacing:.1em;color:var(--ink-3)
}
.music-volume-row input[type="range"]{
  width:100%;height:14px;margin:0;
  appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer
}
.music-volume-row input[type="range"]::-webkit-slider-runnable-track{
  height:2px;background:var(--line-strong)
}
.music-volume-row input[type="range"]::-webkit-slider-thumb{
  appearance:none;-webkit-appearance:none;
  width:10px;height:10px;margin-top:-4px;border:0;border-radius:0;background:var(--accent)
}
.music-volume-row input[type="range"]::-moz-range-track{
  height:2px;background:var(--line-strong);border:0
}
.music-volume-row input[type="range"]::-moz-range-thumb{
  width:10px;height:10px;border:0;border-radius:0;background:var(--accent)
}
@media(max-width:620px){
  .music-controls{right:12px;bottom:12px}
  .music-toggle{width:36px;height:36px}
  .music-panel{width:178px}
}


/* V9.3.1 — discreet return-to-home controls ---------------- */
.top-home-button{
  width:26px;height:26px;padding:4px;border:0;background:transparent;
  display:grid;place-items:center;color:var(--ink-3);cursor:pointer;
}
.top-home-button svg{
  width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.55;
  stroke-linecap:square;stroke-linejoin:miter;overflow:visible
}
.top-home-button:hover,.top-home-button:focus-visible{color:var(--accent);outline:none}
.game-home-button{
  margin-right:1px;border-right:1px solid var(--line);padding-right:8px;width:32px
}
.overlay-home-button{
  position:absolute;top:max(16px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left));
  z-index:4;width:34px;height:34px;border:1px solid rgba(20,20,20,.18);
  background:rgba(244,243,239,.72);backdrop-filter:blur(6px)
}
.overlay-home-button svg{width:16px;height:16px}
@media(max-width:620px){
  .overlay-home-button{top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));width:32px;height:32px}
  .game-home-button{width:29px;padding-right:6px}
}


/* V9.3.2 — blue mode hover + Live final average time */
.mode-choice .mode-btn{
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .08s ease;
}
.mode-choice .mode-btn:hover,
.mode-choice .mode-btn:focus-visible{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  outline:none!important;
}
.mode-choice .mode-btn:hover .button-pixel,
.mode-choice .mode-btn:focus-visible .button-pixel{
  background:var(--paper)!important;
}
.live-final-head,.live-final-list li{
  grid-template-columns:36px minmax(0,1fr) 72px 54px!important;
}
.live-final-head span:nth-child(3),
.live-final-list .avg{
  text-align:right;
}
.live-final-list .avg{
  font-variant-numeric:tabular-nums;
  color:var(--ink-3);
}
.live-final-list li:first-child .avg{
  color:var(--ink);
}
@media(max-width:520px){
  .live-final-head,.live-final-list li{
    grid-template-columns:28px minmax(0,1fr) 62px 42px!important;
    gap:6px!important;
  }
}


/* V9.3.3 — same-room Live replay */
.live-replay{
  margin-top:18px!important;
}
.live-final-home{
  margin-top:8px!important;
}
.live-replay-meta{
  display:inline-flex;align-items:center;gap:12px;margin-left:auto
}
.live-replay-count,
#live-replay-count{
  font-family:var(--mono);
  font-size:.54rem;
  font-weight:900;
  letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
}
.live-replay.waiting{
  background:var(--paper)!important;
  color:var(--ink)!important;
  border-color:var(--ink)!important;
  opacity:1!important;
}
.live-replay.waiting .button-pixel{
  background:var(--accent)!important;
}
.live-replay:disabled:not(.waiting){
  opacity:.38;
}


/* V9.4 — Pixel Battle / Pixel Chaos ----------------------- */
.live-variant-choice{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 20px
}
.live-variant-btn{
  min-height:74px;padding:12px 14px;border:1px solid var(--line-strong);
  background:transparent;color:var(--ink);text-align:left;cursor:pointer;
  display:flex;flex-direction:column;justify-content:center;gap:6px
}
.live-variant-btn strong{
  font-size:.62rem;font-weight:950;letter-spacing:.1em
}
.live-variant-btn small{
  font-family:var(--mono);font-size:.39rem;font-weight:800;letter-spacing:.09em;color:var(--ink-3)
}
.live-variant-btn:hover,.live-variant-btn:focus-visible{
  border-color:var(--accent);outline:none;color:var(--accent)
}
.live-variant-btn.selected{
  background:var(--ink);border-color:var(--ink);color:var(--paper)
}
.live-variant-btn.selected small{color:rgba(244,243,239,.68)}
.live-variant-btn.selected:hover,.live-variant-btn.selected:focus-visible{
  background:var(--accent);border-color:var(--accent);color:#fff
}
.live-chaos-preflight{
  margin:14px 0 0;padding:10px 12px;border-left:3px solid var(--accent);
  background:var(--accent-soft);color:var(--ink);
  font-family:var(--mono);font-size:.48rem;font-weight:900;line-height:1.45;letter-spacing:.055em
}
.live-chaos-effects{
  position:absolute;inset:0;z-index:13;pointer-events:none;overflow:hidden
}
.chaos-repel-wave{
  position:absolute;width:10px;height:10px;border:2px solid var(--accent);border-radius:50%;
  transform:translate(-50%,-50%) scale(.2);opacity:.9;
  animation:chaos-repel-wave .2s ease-out forwards
}
@keyframes chaos-repel-wave{
  to{transform:translate(-50%,-50%) scale(5.6);opacity:0}
}
.live-chaos-local-cursor{
  position:absolute;left:0;top:0;z-index:15;pointer-events:none;
  transform:translate(-2px,-2px);color:var(--cursor-color);will-change:left,top
}
.live-chaos-local-cursor .cursor-icon{
  width:18px;height:18px;display:block;filter:drop-shadow(0 1px 0 rgba(255,255,255,.85))
}
.live-chaos-local-cursor .cursor-icon svg{width:18px;height:18px;overflow:visible}
body.live-chaos-mode .board{cursor:none!important}
body.live-chaos-mode .live-cursors-toggle.forced{
  opacity:.62;cursor:default;text-decoration:none
}
@media(max-width:620px){
  .live-variant-choice{gap:6px}
  .live-variant-btn{min-height:66px;padding:10px}
  .live-variant-btn strong{font-size:.56rem}
  .live-variant-btn small{font-size:.35rem}
  .live-chaos-preflight{font-size:.43rem}
}


/* V9.4.1 — Pixel Chaos requires a real cursor */
.live-variant-btn.unavailable,
.live-variant-btn:disabled{
  opacity:.38;
  cursor:not-allowed;
  filter:grayscale(.25);
}
.live-variant-btn.unavailable:hover,
.live-variant-btn.unavailable:focus-visible,
.live-variant-btn:disabled:hover,
.live-variant-btn:disabled:focus-visible{
  border-color:var(--line-strong);
  color:var(--ink);
  background:transparent;
}
.live-variant-btn.selected.unavailable,
.live-variant-btn.selected:disabled{
  background:rgba(17,18,18,.12);
  border-color:var(--line-strong);
  color:var(--ink-2);
}
.live-variant-btn.selected.unavailable small,
.live-variant-btn.selected:disabled small{
  color:var(--ink-3);
}


/* V9.5 — rotating Pixel Chaos rules ------------------------ */
.live-chaos-rule-badge{
  position:absolute;top:7px;left:50%;z-index:18;transform:translateX(-50%);
  padding:6px 9px;border:1px solid rgba(17,18,18,.22);
  background:rgba(244,243,239,.88);backdrop-filter:blur(6px);
  color:var(--ink);font:900 .39rem var(--mono);letter-spacing:.09em;
  white-space:nowrap;pointer-events:none
}
.chaos-trail-dot{
  position:absolute;width:5px;height:5px;transform:translate(-50%,-50%);
  background:var(--trail-color);box-shadow:0 0 0 1px rgba(255,255,255,.35);
  opacity:.62;animation:chaos-trail-fade 2s linear forwards
}
@keyframes chaos-trail-fade{
  0%{opacity:.64;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.45)}
}
.chaos-echo{
  position:absolute;transform:translate(-2px,-2px);color:var(--echo-color);
  pointer-events:none;filter:saturate(.8)
}
.chaos-echo .cursor-icon{width:18px;height:18px;display:block}
.chaos-echo .cursor-icon svg{width:18px;height:18px;overflow:visible}
.chaos-elastic-line{
  position:absolute;height:1px;transform-origin:0 50%;pointer-events:none;
  background:linear-gradient(90deg,rgba(49,87,255,.2),rgba(49,87,255,.95),rgba(49,87,255,.2));
  box-shadow:0 0 6px rgba(49,87,255,.18)
}
.chaos-repel-wave.miss-wave{
  border-color:var(--danger);border-width:2px;
  animation:chaos-miss-wave .4s ease-out forwards
}
@keyframes chaos-miss-wave{
  from{transform:translate(-50%,-50%) scale(.3);opacity:.9}
  to{transform:translate(-50%,-50%) scale(14);opacity:0}
}
@media(max-width:620px){
  .live-chaos-rule-badge{top:5px;font-size:.35rem;padding:5px 7px}
}

/* V9.6 — MES STATS ------------------------------------------------ */
.stats-shortcut-row{display:flex;justify-content:flex-end;margin:-2px 0 10px}
.stats-shortcut{border:1px solid var(--ink);background:var(--ink);padding:10px 14px;color:var(--paper);font-family:var(--mono);font-size:.65rem;font-weight:900;letter-spacing:.11em;cursor:pointer;display:inline-flex;align-items:center;gap:9px;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.stats-shortcut:hover,.stats-shortcut:focus-visible{background:var(--accent);border-color:var(--accent);color:var(--paper);outline:none;transform:translateY(-1px)}
.stats-shortcut span:last-child{font-size:.78rem;line-height:1}
.stats-screen{position:fixed;inset:0;z-index:170;background:rgba(244,243,239,.992);overflow:auto;padding:clamp(18px,4vw,34px)}
.stats-shell{width:min(980px,96vw);margin:0 auto;padding-bottom:34px}
.stats-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:4px 0 18px;border-bottom:1px solid var(--line-strong)}
.stats-close{justify-self:start;border:0;background:transparent;color:var(--ink-3);font-family:var(--mono);font-size:.44rem;font-weight:900;letter-spacing:.1em;cursor:pointer;display:flex;align-items:center;gap:7px;padding:6px 0}
.stats-close:hover,.stats-close:focus-visible{color:var(--accent);outline:none}
.stats-wordmark{grid-column:2;font-size:.72rem;font-weight:900;letter-spacing:-.035em;display:flex;align-items:center;gap:6px}
.stats-wordmark>span{width:6px;height:6px;background:var(--accent);display:inline-block}
.stats-title-row{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;padding:clamp(28px,6vw,54px) 0 22px}
.stats-kicker{display:block;font-family:var(--mono);font-size:.45rem;font-weight:900;letter-spacing:.16em;color:var(--accent);margin-bottom:8px}
.stats-title-row h2{margin:0;font-size:clamp(2.8rem,9vw,6.2rem);line-height:.84;letter-spacing:-.07em;font-weight:700}
.stats-side{display:flex;flex-direction:column;align-items:flex-end;gap:12px;min-width:220px}
.stats-share-generate,.stats-share-send{border:1px solid var(--ink);background:var(--ink);color:var(--paper);padding:11px 15px;font-family:var(--mono);font-size:.52rem;font-weight:900;letter-spacing:.11em;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.stats-share-generate:hover,.stats-share-generate:focus-visible,.stats-share-send:hover,.stats-share-send:focus-visible{background:var(--accent);border-color:var(--accent);outline:none;transform:translateY(-1px)}
.stats-player{text-align:right;min-width:170px}
.stats-player span,.stats-card span,.stats-section-grid span{display:block;font-family:var(--mono);font-size:.4rem;font-weight:900;letter-spacing:.11em;color:var(--ink-3)}
.stats-player strong{display:block;margin-top:7px;font-family:var(--mono);font-size:1rem;letter-spacing:.04em}
.stats-primary-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:9px;margin-top:8px}
.stats-card{min-height:116px;border:1px solid var(--line-strong);padding:14px;display:flex;flex-direction:column;justify-content:space-between;background:rgba(255,255,255,.38)}
.stats-card strong{font-family:var(--mono);font-size:clamp(1.8rem,5vw,3.4rem);line-height:.9;letter-spacing:-.06em}
.stats-card-highlight{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.stats-card-highlight span{color:rgba(244,243,239,.62)}
.stats-card-highlight strong{color:var(--paper)}
.stats-sections{margin-top:18px;border-top:2px solid var(--ink)}
.stats-section{padding:17px 0 18px;border-bottom:1px solid var(--line-strong)}
.stats-section-head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.stats-section-head>span{font-family:var(--mono);font-size:.4rem;color:var(--accent);font-weight:900;letter-spacing:.1em}
.stats-section-head>strong{font-size:.66rem;letter-spacing:.12em}
.stats-section-grid{display:grid;gap:8px}
.stats-section-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.stats-section-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.stats-section-grid>div{min-height:70px;border:1px solid var(--line);padding:11px 12px;display:flex;flex-direction:column;justify-content:space-between}
.stats-section-grid strong{font-family:var(--mono);font-size:1.35rem;line-height:1;letter-spacing:-.045em}
.stats-note{margin:14px 0 0;font-family:var(--mono);font-size:.38rem;line-height:1.5;letter-spacing:.07em;color:var(--ink-3)}
.stats-share-panel{margin-top:20px;padding:18px;border:1px solid var(--line-strong);background:rgba(255,255,255,.44)}
.stats-share-panel.hidden{display:none}
.stats-share-panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.stats-share-panel-head strong,.stats-share-panel-head span{font-family:var(--mono);font-size:.46rem;font-weight:900;letter-spacing:.12em}
.stats-share-panel-head span{color:var(--accent)}
.stats-share-preview-wrap{display:flex;justify-content:center;align-items:center;padding:18px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(240,239,234,.88));overflow:hidden}
.stats-share-preview{display:block;width:min(100%,390px);height:auto;border:1px solid var(--line-strong);box-shadow:0 14px 34px rgba(0,0,0,.12);background:#f4f3ef}
.stats-share-send{margin-top:14px;width:100%;justify-content:center}
.stats-share-status{min-height:1.4em;margin:10px 0 0;font-family:var(--mono);font-size:.4rem;line-height:1.4;letter-spacing:.08em;color:var(--ink-3)}
@media(max-width:700px){
  .stats-primary-grid{grid-template-columns:1fr 1fr}.stats-card-highlight{grid-column:1/-1}
  .stats-section-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats-title-row{align-items:flex-start;flex-direction:column}.stats-side{align-items:flex-start;min-width:0}.stats-player{text-align:left}
}
@media(max-width:430px){
  .stats-screen{padding:14px 12px}.stats-shell{width:100%}.stats-primary-grid{grid-template-columns:1fr}.stats-card-highlight{grid-column:auto}
  .stats-section-grid.two,.stats-section-grid.four{grid-template-columns:1fr 1fr}.stats-title-row h2{font-size:3.5rem}.stats-share-panel{padding:14px}.stats-share-generate,.stats-share-send{width:100%}
}


/* V9.6.4 — PWA install ------------------------------------------------ */
.install-app-btn{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.install-app-btn:hover,.install-app-btn:focus-visible{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.pwa-ios-modal{position:fixed;inset:0;z-index:310;display:grid;place-items:center;padding:20px;background:rgba(244,243,239,.94);backdrop-filter:blur(12px)}
.pwa-ios-modal.hidden{display:none}
.pwa-ios-card{width:min(460px,94vw);border-top:2px solid var(--ink);border-bottom:1px solid var(--line-strong);background:var(--paper);padding:24px 0 0}
.pwa-ios-kicker{display:block;margin-bottom:10px;font-family:var(--mono);font-size:.44rem;font-weight:900;letter-spacing:.16em;color:var(--accent)}
.pwa-ios-card h2{margin:0;font-size:clamp(2rem,8vw,4.2rem);line-height:.9;letter-spacing:-.055em}
.pwa-ios-card p{margin:18px 0 0;color:var(--ink-2);font-size:.78rem;line-height:1.55}
.pwa-ios-close{width:100%;min-height:48px;margin-top:22px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:.52rem;font-weight:900;letter-spacing:.1em;cursor:pointer}
.pwa-ios-close:hover,.pwa-ios-close:focus-visible{background:var(--accent);border-color:var(--accent);outline:none}
@media(max-width:700px){.install-app-btn{flex:1 1 100%;justify-content:center}}


/* V9.6.5 — AUTH PROVIDERS -------------------------------- */
.auth-provider-modal{position:fixed;inset:0;z-index:230;display:grid;place-items:center;padding:18px;background:rgba(14,14,15,.54);backdrop-filter:blur(9px)}
.auth-provider-modal.hidden{display:none}
.auth-provider-card{width:min(430px,94vw);background:var(--paper);border:1px solid var(--ink);box-shadow:12px 12px 0 rgba(0,0,0,.12);padding:18px}
.auth-provider-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--line-strong)}
.auth-provider-kicker{font-family:var(--mono);font-size:.45rem;font-weight:900;letter-spacing:.15em;color:var(--accent)}
.auth-provider-close{border:0;background:transparent;color:var(--ink);font:500 1.25rem/1 Arial,sans-serif;cursor:pointer;padding:2px 4px}
.auth-provider-close:hover,.auth-provider-close:focus-visible{color:var(--accent);outline:none}
.auth-provider-card h2{margin:22px 0 8px;font-size:clamp(1.7rem,7vw,2.8rem);line-height:.92;letter-spacing:-.055em}
.auth-provider-card>p{margin:0 0 18px;max-width:360px;font-size:.66rem;line-height:1.5;color:var(--ink-3)}
.auth-provider-options{display:grid;gap:7px}
.auth-provider-option{width:100%;min-height:52px;border:1px solid var(--line-strong);background:transparent;color:var(--ink);padding:0 12px;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;text-align:left;font-family:var(--mono);font-size:.52rem;font-weight:900;letter-spacing:.1em;cursor:pointer}
button.auth-provider-option:hover,button.auth-provider-option:focus-visible{background:var(--ink);color:var(--paper);outline:none}
.auth-provider-mark{display:grid;place-items:center;width:24px;height:24px;border:1px solid currentColor;font-family:Arial,sans-serif;font-size:.72rem;font-weight:800;letter-spacing:0}

.auth-email-form{display:grid;gap:10px;margin-top:2px}
.auth-email-form.hidden{display:none}
.auth-email-field{display:grid;gap:6px}
.auth-email-field>span{font-family:var(--mono);font-size:.4rem;font-weight:900;letter-spacing:.11em;color:var(--ink-3)}
.auth-email-field input{width:100%;min-height:45px;border:1px solid var(--line-strong);background:rgba(255,255,255,.42);color:var(--ink);padding:0 11px;font-family:var(--mono);font-size:.68rem;outline:none}
.auth-email-field input:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.auth-password-rules{margin:0!important;font-family:var(--mono);font-size:.36rem!important;line-height:1.45!important;letter-spacing:.07em;color:var(--ink-3)!important}
.auth-email-error{min-height:16px;margin:0!important;font-family:var(--mono);font-size:.4rem!important;line-height:1.35!important;letter-spacing:.055em;color:var(--danger)!important}
.auth-email-submit{width:100%;min-height:48px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);padding:0 12px;font-family:var(--mono);font-size:.5rem;font-weight:900;letter-spacing:.11em;cursor:pointer}
.auth-email-submit:hover,.auth-email-submit:focus-visible{background:var(--accent);border-color:var(--accent);outline:none}
.auth-email-submit:disabled{opacity:.45;cursor:wait}
.auth-email-link{border:0;background:transparent;color:var(--ink-3);padding:5px 0;font-family:var(--mono);font-size:.4rem;font-weight:900;letter-spacing:.09em;cursor:pointer;text-align:left}
.auth-email-link:hover,.auth-email-link:focus-visible{color:var(--accent);outline:none}
.email-mark{font-family:var(--mono);font-size:.72rem}
.auth-provider-cancel{width:100%;margin-top:12px;border:0;background:transparent;padding:8px;font-family:var(--mono);font-size:.43rem;font-weight:900;letter-spacing:.11em;color:var(--ink-3);cursor:pointer}
.auth-provider-cancel:hover,.auth-provider-cancel:focus-visible{color:var(--accent);outline:none}
.account-provider-mark{display:grid;place-items:center;width:17px;height:17px;border:1px solid currentColor;font-family:Arial,sans-serif;font-size:.62rem;font-weight:800;letter-spacing:0}