:root {
  --bg:       #13100a;
  --surface:  #221608;
  --surface2: #2d1e0d;
  --tile:     #291b0d;
  --tile2:    #241809;
  --wall:     #0d0905;
  --gold:     #e8c55a;
  --gold2:    #f2d472;
  --gold-dim: #7a5c28;
  --text:     #c4a47e;
  --text-dim: #6a4a28;
  --danger:   #d95c3a;
  --gap: 2px;
  --sm-safe-top: env(safe-area-inset-top, 0px);
  --sm-safe-right: env(safe-area-inset-right, 0px);
  --sm-safe-bottom: env(safe-area-inset-bottom, 0px);
  --sm-safe-left: env(safe-area-inset-left, 0px);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; user-select:none; -webkit-tap-highlight-color:transparent; }
html,body {
  height:100%; overflow:hidden; touch-action:none;
  /* Stop iOS / Android pull-to-refresh + scroll-bounce — those still
     fire even with overflow:hidden and were translating the cabinet
     under the player's finger during swipes. */
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  background:radial-gradient(ellipse at 50% 25%, #1c1408 0%, #0c0a06 100%);
  color:var(--text);
}
/* touch-action is NOT inherited — the body's `none` doesn't cascade.
   Pin it on the cabinet and every descendant so a swipe over the board,
   the HUD, or any button can never be hijacked into a scroll/zoom. */
#appShell, #appShell * {
  touch-action: none;
}
#appShell {
  position:fixed;
  inset:0;
  overflow:hidden;
}
#screenLayer,
#modalLayer,
#fxLayer {
  position:fixed;
  inset:0;
}
#screenLayer { z-index:20; }
#modalLayer { z-index:200; pointer-events:none; }
#fxLayer { z-index:150; pointer-events:none; }

/* ── Screens ─────────────────────────── */
.screen {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center;
  overflow-y:auto;
  transition:opacity .25s ease, transform .25s ease;
}
.screen.hidden,
.screen[data-active="false"] { opacity:0; pointer-events:none; transform:translateY(10px); }
.screen[data-active="true"] { opacity:1; pointer-events:auto; transform:translateY(0); }

/* ── Home screen ─────────────────────── */
#homeScreen {
  justify-content:flex-start;
  padding:clamp(1.2rem,4.5vh,2.8rem) 1.25rem 2rem;
  gap:1.1rem;
}
.home-date {
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text); text-align:center;
}
.home-date-nav {
  display: flex; align-items: center; gap: 1.8rem;
  width: 100%; max-width: 420px; justify-content: center;
  margin-bottom: -0.4rem;
}
.date-arrow {
  background: none; border: none; color: var(--text-dim);
  font-size: 1.4rem; cursor: pointer; padding: 0.5rem;
  transition: color 0.2s;
}
.date-arrow:hover { color: var(--gold); }
.date-display { text-align: center; }
.date-label {
  font-size: .6rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-top: .15rem;
}
.btn-today {
  font-size: .6rem; padding: .25rem .75rem; border-radius: 20px;
  background: var(--surface2); color: var(--text-dim);
  border: 1px solid var(--gold-dim); cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.05em;
  transition: all 0.2s;
}
.btn-today:hover { color: var(--text); background: var(--gold-dim); }
.btn-today.hidden { display: none; }
.daily-section-label {
  font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-dim); width:100%; max-width:420px; text-align:left;
}
.daily-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:.55rem; width:100%; max-width:420px;
}
.daily-tile {
  background:var(--surface);
  border:1px solid rgba(255,255,255,.05); border-radius:12px;
  padding:.9rem .8rem .8rem; cursor:pointer;
  display:flex; flex-direction:column; gap:.22rem;
  position:relative; overflow:hidden;
  transition:background .12s, transform .08s, box-shadow .12s;
  min-height:88px;
}
.daily-tile::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,var(--ttint,rgba(232,197,90,.04)) 0%,transparent 60%);
  pointer-events:none;
}
.daily-tile:hover  { background:var(--surface2); box-shadow:0 4px 22px rgba(0,0,0,.45); transform:translateY(-1px); }
.daily-tile:active { transform:scale(.97); }
.daily-tile.done   { border-color:rgba(232,197,90,.15); }
.tile-header { display:flex; align-items:center; gap:.4rem; }
.tile-emoji  { font-size:1.05rem; line-height:1; }
.tile-label  { font-size:.8rem; font-weight:700; letter-spacing:.03em; color:var(--text); }
.tile-stars  { font-size:.78rem; letter-spacing:.05em; margin-top:.1rem; }
.tile-stars .on  { color:var(--gold); }
.tile-stars .off { color:var(--gold-dim); }
.tile-hint   { font-size:.62rem; color:var(--text-dim); margin-top:auto; }
.tile-done-badge {
  position:absolute; top:.52rem; right:.62rem;
  font-size:.56rem; letter-spacing:.08em; text-transform:uppercase;
  color:#8de48d; font-weight:700;
}

/* ── Home bottom ─────────────────────── */
.home-divider {
  width:100%; max-width:420px;
  border:none; border-top:1px solid rgba(255,255,255,.05);
}
.btn-all-levels {
  width:100%; max-width:420px;
  background:var(--surface); color:var(--text-dim);
  border:1px solid rgba(255,255,255,.06);
  padding:.62rem 1rem; border-radius:10px;
  font-size:.78rem; font-weight:600; cursor:pointer;
  text-align:center; letter-spacing:.04em;
  transition:background .12s, color .12s;
  font-family:inherit;
}
.btn-all-levels:hover { background:var(--surface2); color:var(--text); }
.btn-all-levels:active { transform:translateY(1px); }

/* ── Select ──────────────────────────── */
#selectScreen {
  justify-content:flex-start;
  padding:clamp(1.5rem,5vh,3rem) 1.25rem 2rem;
  gap:1.4rem;
}
.select-header {
  display:flex; align-items:center; gap:.5rem;
  width:100%; max-width:520px;
}
.select-back {
  background:none; border:none; color:var(--text-dim);
  font-size:1.2rem; cursor:pointer; padding:.1rem .4rem;
  border-radius:6px; line-height:1;
  transition:color .12s; font-family:inherit;
}
.select-back:hover { color:var(--text); }
.title-wrap { text-align:center; flex:1; }
.game-title {
  font-size:clamp(1.8rem,6vw,2.6rem);
  font-weight:900; letter-spacing:.03em;
  color:var(--gold);
  text-shadow:0 0 28px rgba(232,197,90,.35), 0 2px 0 #3a2200, 0 4px 14px rgba(0,0,0,.75);
  line-height:1.1;
}
.game-sub {
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--text-dim); margin-top:.3rem;
}
.level-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(128px,1fr));
  gap:.55rem; width:100%; max-width:520px;
}
.lvl-card {
  background:var(--surface);
  border:1px solid rgba(255,255,255,.05); border-radius:10px;
  padding:.85rem .75rem; cursor:pointer;
  display:flex; flex-direction:column; gap:.28rem;
  position:relative; overflow:hidden;
  transition:background .12s, transform .08s, box-shadow .12s;
}
.lvl-card::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(232,197,90,.04) 0%,transparent 55%);
  pointer-events:none;
}
.lvl-card:hover { background:var(--surface2); box-shadow:0 4px 22px rgba(0,0,0,.45); transform:translateY(-1px); }
.lvl-card:active { transform:scale(.97); }
.card-num  { font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim); }
.card-name { font-size:.84rem; font-weight:600; color:var(--text); }
.card-meta {
  position: relative;
  z-index: 1;
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.card-par {
  width: fit-content;
  color: var(--gold);
  font: 700 .58rem/1 Menlo, Consolas, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.card-meta .card-state {
  margin-top: 0;
}
.card-stars{ font-size:.72rem; margin-top:.1rem; }
.card-stars .on { color:var(--gold); }
.card-stars .off{ color:var(--gold-dim); }

/* ── Game screen ─────────────────────── */
#gameScreen {
  justify-content:center; padding:.55rem .9rem .7rem; gap:0;
  background:radial-gradient(ellipse at 50% 25%, #1c1408 0%, #0c0a06 100%);
}

.g-header {
  display:flex; align-items:center; gap:.5rem;
  width:100%; max-width:520px; margin-bottom:.3rem;
}
.back-btn {
  background:none; border:none; color:var(--text-dim);
  font-size:1.2rem; cursor:pointer; padding:.1rem .4rem;
  border-radius:6px; line-height:1;
  transition:color .12s;
}
.back-btn:hover { color:var(--text); }
.g-lvl-name { flex:1; font-size:.82rem; font-weight:600; letter-spacing:.04em; }
.g-tier-badge {
  font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.18rem .5rem; border-radius:4px;
  background:rgba(255,255,255,.06); color:var(--text-dim);
}
.g-tier-badge.t-easy   { color:#8de48d; }
.g-tier-badge.t-medium { color:#e8d46a; }
.g-tier-badge.t-hard   { color:#e8a84a; }
.g-tier-badge.t-expert { color:#e86a6a; }

.scoreboard {
  display:flex; align-items:center; gap:1rem;
  width:100%; max-width:520px;
  font-size:.73rem; color:var(--text-dim); margin-bottom:.45rem;
}
.sc-item strong { color:var(--text); font-weight:600; }
.sc-stars { margin-left:auto; font-size:.86rem; letter-spacing:.06em; color:var(--gold); }

/* ── Grid ────────────────────────────── */
#gridWrap {
  position:relative;
  flex-shrink:0;
  width:max-content;
  height:max-content;
}
#renderLayer {
  position:absolute;
  inset:0;
}
#inputLayer {
  position:relative;
}
#renderLayer {
  z-index:5;
  pointer-events:none;
}
#inputLayer {
  z-index:20;
  pointer-events:none;
}
#boardHitLayer {
  position:relative;
  z-index:20;
  display:grid; gap:var(--gap);
  background:transparent; border-radius:8px; padding:var(--gap);
  /* Inherit pointer-events so the board hit layer only captures clicks
     when its parent screen is active. Hard-coded `auto` caused the
     hidden game screen's board to keep intercepting menu taps. */
  pointer-events:inherit;
}
.hit-cell {
  appearance:none; -webkit-appearance:none;
  position:relative; display:flex; align-items:center;
  justify-content:center; border:0; padding:0;
  background:transparent; border-radius:4px;
  box-shadow:none; color:transparent; cursor:default;
  font:inherit;
}
.hit-cell:focus { outline:none; }
.hit-cell.tappable { cursor:pointer; }
.hit-cell:disabled {
  appearance:none; -webkit-appearance:none;
  background:transparent; border:0; box-shadow:none;
  opacity:1; cursor:default;
}
.cell {
  position:relative; display:flex; align-items:center;
  justify-content:center; border-radius:4px;
}
.c-floor { background:var(--tile); }

.c-wall {
  background: transparent;
  box-sizing: border-box;
  /* Glow effect for the borders */
  filter: drop-shadow(0 0 3px var(--gold));
  z-index: 2;
}
.c-wall.w-t { border-top: 3px solid var(--gold); }
.c-wall.w-b { border-bottom: 3px solid var(--gold); }
.c-wall.w-l { border-left: 3px solid var(--gold); }
.c-wall.w-r { border-right: 3px solid var(--gold); }

.c-hole {
  background:#050403;
  border-radius:50%;
  box-shadow:0 0 0 2px #0d0905, inset 0 0 12px rgba(0,0,0,1);
}

.c-hole.hole-locked { opacity:.3; }
.c-cheese,.c-cat,.c-chili { background:var(--tile); }

.cell.tappable { cursor:pointer; }
.ci-chili { filter:drop-shadow(0 0 4px rgba(255,80,40,.55)); }

@keyframes holePulse {
  0%,100% { box-shadow:0 0 0 2px #0d0905, inset 0 0 12px rgba(0,0,0,1), 0 0 0 0 rgba(232,197,90,0); }
  50%      { box-shadow:0 0 0 2px #0d0905, inset 0 0 12px rgba(0,0,0,1), 0 0 12px 4px rgba(232,197,90,.3); }
}
.c-hole.hole-ready { animation:holePulse 1.6s ease-in-out infinite; }

.ci { pointer-events:none; line-height:1; }
.ci-cheese { filter:drop-shadow(0 0 3px rgba(255,215,70,.5)); }
.ci-cat    { filter:drop-shadow(0 0 4px rgba(220,75,45,.5)); }

/* ── Mouse sprite ────────────────────── */
#mouseSprite {
  position:absolute; display:flex; align-items:center; justify-content:center;
  pointer-events:none; z-index:10;
  opacity:0;
  transform:translate(-50%,-50%);
  transition:left .19s cubic-bezier(.4,0,.2,1), top .19s cubic-bezier(.4,0,.2,1);
}
#mouseSprite.dead-fall {
  transition:left .19s, top .19s, opacity .42s ease-in .04s, transform .48s cubic-bezier(.55,0,1,.45) .02s;
  opacity:0;
  transform:translate(-50%,-50%) translateY(55px) rotate(450deg) scale(.22);
}
#mouseSprite.dead-trap {
  transition:transform .28s, opacity .28s;
  transform:translate(-50%,-50%) scale(.45);
  opacity:0;
}
#mouseSprite.hot {
  filter:drop-shadow(0 0 6px rgba(255,140,40,.95)) drop-shadow(0 0 14px rgba(255,60,20,.7));
  animation:hotPulse .55s ease-in-out infinite alternate;
}
@keyframes hotPulse {
  0%   { filter:drop-shadow(0 0 5px rgba(255,160,40,.85)) drop-shadow(0 0 10px rgba(255,60,20,.55)); }
  100% { filter:drop-shadow(0 0 9px rgba(255,200,60,1))   drop-shadow(0 0 18px rgba(255,40,10,.85)); }
}
.smoke-puff {
  position:absolute; pointer-events:none; z-index:9;
  font-size:18px; opacity:.7;
  transform:translate(-50%,-50%);
  animation:smokeFade .9s ease-out forwards;
}
@keyframes smokeFade {
  0%   { opacity:.75; transform:translate(-50%,-50%) scale(.6); }
  100% { opacity:0;   transform:translate(-50%,-90%) scale(1.4); }
}
.hit-cell.hint-flash,
.cell.hint-flash {
  box-shadow: 0 0 0 3px var(--gold), 0 0 14px 4px rgba(232,197,90,.55) inset;
  animation: hintPulse 1.1s ease-out 2;
}
@keyframes hintPulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--gold), 0 0 14px 4px rgba(232,197,90,.55) inset; }
  50%      { box-shadow: 0 0 0 5px var(--gold), 0 0 22px 6px rgba(232,197,90,.85) inset; }
}

/* ── Eat order ───────────────────────── */
#eatRow {
  display:flex; gap:3px; align-items:center; justify-content:center;
  min-height:24px; margin-top:.4rem;
  width:100%; max-width:520px;
}
.eslot {
  width:14px; height:14px;
  border:1px dashed rgba(232,197,90,.2); border-radius:3px;
  display:flex; align-items:center; justify-content:center; font-size:9px;
}
.eslot.on { border-style:solid; border-color:rgba(232,197,90,.5); }

/* ── Status ──────────────────────────── */
#statusEl {
  font-size:.75rem; text-align:center;
  min-height:1.85em; margin-top:.28rem;
  color:var(--text-dim); transition:color .15s;
  width:100%; max-width:520px;
}
#statusEl.s-win { color:var(--gold); font-weight:600; }
#statusEl.s-bad { color:#d96a48; }

/* ── Controls ────────────────────────── */
.controls {
  display:flex; gap:.42rem; justify-content:center;
  margin-top:.35rem;
}
button {
  font-family:inherit;
  background:var(--surface); color:var(--text);
  border:1px solid rgba(255,255,255,.07);
  padding:.42rem .88rem; border-radius:8px;
  font-size:.78rem; cursor:pointer;
  transition:background .1s, transform .07s;
}
button:hover  { background:var(--surface2); }
button:active { transform:translateY(1px); }
button:disabled { opacity:.28; cursor:default; transform:none; }
.kb-hint {
  font-size:.6rem; color:var(--text-dim); opacity:.38;
  margin-top:.3rem; text-align:center;
}

/* ── Win overlay ─────────────────────── */
#winOverlay {
  position:fixed; inset:0;
  background:rgba(10,8,4,.96);
  z-index:200;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.75rem;
  opacity:0; pointer-events:none;
  transition:opacity .35s;
}
#winOverlay.show { opacity:1; pointer-events:all; }
.win-stars { font-size:2.1rem; letter-spacing:.18em; }
.win-title {
  font-size:1.55rem; font-weight:900; letter-spacing:.06em;
  color:var(--gold);
  text-shadow:0 0 28px rgba(232,197,90,.45), 0 2px 0 #3a2200, 0 5px 16px rgba(0,0,0,.8);
}
.win-tier-badge {
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.2rem .65rem; border-radius:5px; background:rgba(255,255,255,.06);
}
.win-tier-badge.t-easy   { color:#8de48d; }
.win-tier-badge.t-medium { color:#e8d46a; }
.win-tier-badge.t-hard   { color:#e8a84a; }
.win-tier-badge.t-expert { color:#e86a6a; }
.win-detail { font-size:.8rem; color:var(--text-dim); }
.win-actions { display:flex; gap:.55rem; margin-top:.35rem; flex-wrap:wrap; justify-content:center; }
.btn-next {
  background:var(--gold); color:#12100a;
  font-weight:700; border-color:transparent;
  padding:.48rem 1.4rem;
}
.btn-next:hover { background:var(--gold2); }
.btn-share {
  background:var(--surface2); color:var(--text-dim);
  border:1px solid rgba(255,255,255,.09);
  padding:.42rem .88rem;
}
.btn-share:hover { color:var(--text); }

/* ── Share toast ─────────────────────── */
#shareToast {
  position:fixed; bottom:2rem; left:50%; transform:translateX(-50%) translateY(20px);
  background:#2a1e12; border:1px solid rgba(232,197,90,.25); border-radius:8px;
  padding:.5rem 1.1rem; font-size:.78rem; color:var(--gold);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:300;
}
#shareToast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── Practice section ───────────────── */
.practice-section-label {
  font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-dim); width:100%; max-width:420px; text-align:left;
  margin-top:.2rem;
}
.practice-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:.45rem; width:100%; max-width:420px;
}
.practice-tile {
  background:var(--surface);
  border:1px solid rgba(255,255,255,.05); border-radius:10px;
  padding:.65rem .75rem; cursor:pointer;
  display:flex; align-items:center; gap:.5rem;
  transition:background .12s, transform .08s;
}
.practice-tile:hover  { background:var(--surface2); transform:translateY(-1px); }
.practice-tile:active { transform:scale(.97); }
.pt-emoji { font-size:.95rem; line-height:1; }
.pt-label { font-size:.75rem; font-weight:600; color:var(--text); }

/* ── Generating spinner ──────────────── */
#genOverlay {
  position:fixed; inset:0; background:rgba(10,8,4,.92);
  z-index:150; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.9rem;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
#genOverlay.show { opacity:1; pointer-events:all; }
.gen-spinner {
  width:36px; height:36px; border-radius:50%;
  border:3px solid rgba(232,197,90,.15);
  border-top-color:var(--gold);
  animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.gen-label { font-size:.82rem; color:var(--text-dim); }

/* ── Analyser overlay ────────────────── */
#diffOverlay {
  position:fixed; inset:0; background:rgba(0,0,0,.78);
  z-index:100; display:flex; align-items:center; justify-content:center;
}
#diffBox {
  background:#1a1025; border:1px solid #5b4a7a; border-radius:10px;
  padding:1.2rem; max-width:700px; width:92vw; max-height:88vh;
  overflow-y:auto; font-family:monospace; font-size:.77rem; color:#f4ecd8;
}
#diffBox h2 { font-size:.92rem; margin-bottom:.3rem; color:#ffd97d; }
#diffBox .dsub { font-size:.66rem; opacity:.5; margin-bottom:.8rem; }
#diffBox table { width:100%; border-collapse:collapse; }
#diffBox th {
  text-align:left; border-bottom:1px solid #5b4a7a;
  padding:.3rem .4rem; color:#b39ddb; font-weight:600; white-space:nowrap;
}
#diffBox td { padding:.25rem .4rem; border-bottom:1px solid rgba(255,255,255,.05); white-space:nowrap; }
#diffBox tr:last-child td { border:none; }
#diffBox .dbar { display:inline-block; height:9px; background:#7c5cbf; border-radius:2px; vertical-align:middle; }
#diffBox .dscore { font-weight:700; color:#ffd97d; display:inline-block; min-width:1.2em; text-align:right; }
#diffBox .unsolvable td { color:#ff8b6b; }
#diffBox .chips { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.7rem; }
#diffBox .chip { background:#2a1e10; border-radius:4px; padding:.15rem .45rem; }
#diffBox .dnote { font-size:.64rem; opacity:.42; margin-top:.7rem; line-height:1.5; }
#diffBox button { margin-top:.8rem; background:#5b4a7a; color:#f4ecd8; border:none; padding:.35rem 1rem; border-radius:6px; cursor:pointer; font-family:inherit; }
/* ═══ IN-GAME ASCII / VECTOR UI ═══════════════════ */

#gameScreen,
#gameScreen *,
#winOverlay,
#winOverlay * {
  font-family: 'Menlo','Consolas','Courier New',ui-monospace,monospace;
  letter-spacing: .04em;
}

#gameScreen { background: #000 !important; }

/* Header */
#gameScreen .g-header {
  border-bottom: 1px solid #00ffff66;
  padding: .35rem .2rem;
  text-shadow: 0 0 6px rgba(0,255,255,.4);
}
#hudLayer,
#hudLayerBottom {
  width:100%;
  max-width:520px;
}
#hudLayerBottom {
  display:flex;
  flex-direction:column;
  align-items:center;
}
#gameScreen .back-btn {
  background: transparent;
  color: #00ffff;
  border: 1px solid #00ffff66;
  padding: .12rem .5rem;
  font-size: .85rem;
  text-shadow: 0 0 6px rgba(0,255,255,.5);
  border-radius: 0;
}
#gameScreen .back-btn:hover { background: #00ffff22; color: #fff; }
#gameScreen .g-lvl-name {
  color: #ffe066;
  text-shadow: 0 0 8px rgba(255,224,102,.4);
  text-transform: uppercase;
  font-size: .85rem;
}
#gameScreen .g-lvl-name::before { content: '> '; opacity: .6; }
#gameScreen .g-tier-badge {
  border: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  text-shadow: 0 0 6px currentColor;
}
#gameScreen .g-tier-badge::before { content: '['; margin-right: .15em; opacity: .7; }
#gameScreen .g-tier-badge::after  { content: ']'; margin-left:  .15em; opacity: .7; }

/* Scoreboard — terminal readout */
#gameScreen .scoreboard {
  border-top: 1px solid #ffaa0044;
  border-bottom: 1px solid #ffaa0044;
  padding: .35rem .25rem;
  font-size: .72rem;
  color: #ffaa66;
  text-shadow: 0 0 6px rgba(255,170,102,.35);
  text-transform: uppercase;
}
#gameScreen .sc-item strong {
  color: #ffe066;
  text-shadow: 0 0 8px rgba(255,224,102,.6);
  font-weight: 700;
}
#gameScreen .sc-stars {
  color: #ffe066;
  text-shadow: 0 0 8px rgba(255,224,102,.6);
  letter-spacing: .25em;
}
#gameScreen .sc-stars::before { content: '[ '; opacity: .6; }
#gameScreen .sc-stars::after  { content: ' ]'; opacity: .6; }
.win-stars::before { content: '[ '; opacity: .55; margin-right: .2em; }
.win-stars::after  { content: ' ]'; opacity: .55; margin-left: .2em; }

/* Grid frame: ASCII corner brackets around the play area */
#gameScreen #gridWrap {
  position: relative;
  margin: .4rem 0;
  padding: .8rem;
}
#gameScreen #gridWrap::before,
#gameScreen #gridWrap::after,
#gameScreen #gridWrap > .corner-tl,
#gameScreen #gridWrap > .corner-tr,
#gameScreen #gridWrap > .corner-bl,
#gameScreen #gridWrap > .corner-br {
  position: absolute;
  color: #00ffff;
  text-shadow: 0 0 8px rgba(0,255,255,.7);
  font-size: 1.1rem; line-height: 1;
  pointer-events: none;
  z-index: 6;
}
#gameScreen #gridWrap::before { content: '┌'; top: 0; left: 0; }
#gameScreen #gridWrap::after  { content: '┐'; top: 0; right: 0; }

/* Eat row — styled checkboxes */
#gameScreen #eatRow {
  font-size: .7rem;
  color: #ffaa66;
  text-shadow: 0 0 6px rgba(255,170,102,.4);
}
#gameScreen .eslot {
  width: 16px; height: 16px;
  border: 1px solid #ffaa6655;
  border-radius: 0;
  background: transparent;
  color: #ffe066;
}
#gameScreen .eslot.on {
  border-color: #ffe066;
  box-shadow: 0 0 6px rgba(255,224,102,.5);
}

/* Status — terminal blink line */
#gameScreen #statusEl {
  font-size: .72rem;
  color: #00ffff;
  text-shadow: 0 0 6px rgba(0,255,255,.5);
  text-transform: uppercase;
  border-top: 1px dashed #00ffff33;
  padding-top: .3rem;
}
#gameScreen #statusEl::before { content: '> '; opacity: .6; }
#gameScreen #statusEl.s-win {
  color: #ffe066;
  text-shadow: 0 0 10px rgba(255,224,102,.7);
  animation: vectorWinBlink .6s steps(2) infinite;
}
#gameScreen #statusEl.s-bad {
  color: #ff3344;
  text-shadow: 0 0 8px rgba(255,51,68,.7);
}
@keyframes vectorWinBlink {
  0%,49% { opacity: 1; }
  50%,100% { opacity: .55; }
}

/* Controls — bracketed terminal buttons */
#gameScreen .controls { gap: .4rem; margin-top: .55rem; }
#gameScreen .controls button {
  background: transparent;
  color: #00ffff;
  border: 1px solid #00ffff88;
  border-radius: 0;
  padding: .35rem .7rem;
  font-size: .72rem;
  text-shadow: 0 0 6px rgba(0,255,255,.55);
  position: relative;
  text-transform: uppercase;
  font-weight: 700;
}
#gameScreen .controls button:hover {
  background: #00ffff1a;
  color: #fff;
  box-shadow: 0 0 10px rgba(0,255,255,.4);
}
#gameScreen .controls button:disabled {
  opacity: .25;
  text-shadow: none;
  box-shadow: none;
}

#gameScreen .kb-hint {
  font-size: .58rem;
  color: #00ffff66;
  text-shadow: 0 0 4px rgba(0,255,255,.3);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-top: .35rem;
}
#gameScreen .kb-hint::before { content: '// '; opacity: .5; }

/* Win overlay — terminal frame */
#winOverlay {
  background: rgba(0,0,0,.92);
}
#winOverlay::before {
  content: '';
  position: absolute; inset: 18% 12%;
  border: 1px solid #00ffffaa;
  box-shadow: 0 0 24px rgba(0,255,255,.3), inset 0 0 24px rgba(0,255,255,.15);
  pointer-events: none;
}
.win-stars {
  font-family: 'Menlo','Courier New',ui-monospace,monospace !important;
  color: #ffe066;
  text-shadow: 0 0 18px rgba(255,224,102,.7);
  letter-spacing: .3em;
}
.win-title {
  font-family: 'Menlo','Courier New',ui-monospace,monospace !important;
  color: #00ffff !important;
  text-shadow: 0 0 22px rgba(0,255,255,.7), 0 0 8px #fff !important;
  letter-spacing: .25em !important;
  font-weight: 700 !important;
}
.win-detail {
  color: #ffaa66 !important;
  text-shadow: 0 0 6px rgba(255,170,102,.5);
  text-transform: uppercase;
  font-size: .72rem !important;
}
.win-detail::before { content: '── '; opacity: .5; }
.win-detail::after  { content: ' ──'; opacity: .5; }
.win-tier-badge {
  font-family: monospace !important;
  border: 1px solid currentColor !important;
  background: transparent !important;
  border-radius: 0 !important;
  text-shadow: 0 0 6px currentColor;
}
.win-tier-badge::before { content: '['; opacity: .7; }
.win-tier-badge::after  { content: ']'; opacity: .7; }
.win-actions button {
  background: transparent !important;
  color: #00ffff !important;
  border: 1px solid #00ffff !important;
  border-radius: 0 !important;
  padding: .42rem 1rem !important;
  font-family: monospace !important;
  text-shadow: 0 0 6px rgba(0,255,255,.55);
  letter-spacing: .12em;
  font-weight: 700;
}
.win-actions button:hover {
  background: #00ffff22 !important;
  color: #fff !important;
  box-shadow: 0 0 12px rgba(0,255,255,.5);
}
.win-actions .btn-next {
  color: #ffe066 !important;
  border-color: #ffe066 !important;
  text-shadow: 0 0 8px rgba(255,224,102,.6);
}
.win-actions .btn-next:hover {
  background: #ffe06622 !important;
  box-shadow: 0 0 14px rgba(255,224,102,.55);
}
.win-actions .btn-share { opacity: .85; }

/* CRT scanline overlay — only over the actual game board (the 3D window),
   not the entire game screen or the UI panels. */
#gridWrap::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,255,255,.04) 0,
    rgba(0,255,255,.04) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: screen;
}

/* ═══ CHAPTER LIST ════════════════════ */
#chapterList { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: .55rem; }
.chapter-row {
  background: transparent; border: 1px solid #00ffff44;
  padding: .8rem .9rem; cursor: pointer;
  font-family: Menlo, Consolas, monospace;
  color: #00ffff; text-shadow: 0 0 6px rgba(0,255,255,.4);
  transition: background .12s, border-color .12s;
}
.chapter-row:hover { background: rgba(0,255,255,.06); border-color: #00ffff; }
.ch-header { display: flex; justify-content: space-between; font-weight: 700; letter-spacing: .12em; font-size: .82rem; }
.ch-title { color: #ffe066; text-shadow: 0 0 8px rgba(255,224,102,.5); }
.ch-progress { color: #00ffff; }
.ch-sub { font-size: .62rem; color: #00ffff99; margin-top: .22rem; letter-spacing: .04em; }
.ch-dots { margin-top: .55rem; display: flex; gap: .35rem; }
.ch-dot { width: 14px; height: 14px; border: 1px solid #00ffff66; display: inline-block; }
.ch-dot.done { background: #ffe066; border-color: #ffe066; box-shadow: 0 0 6px rgba(255,224,102,.7); }

/* ═══ SETTINGS ════════════════════════ */
#settingsScreen { padding: clamp(1.2rem,4vh,2rem) 1.25rem; gap: 1rem; }
#settingsScreen, #settingsScreen * { font-family: Menlo, Consolas, monospace; }
.settings-list { display: flex; flex-direction: column; gap: .55rem; width: 100%; max-width: 420px; }
.settings-row {
  display: flex; justify-content: space-between; align-items: center;
  border: 1px solid #00ffff44; padding: .65rem .85rem;
  color: #00ffff; text-shadow: 0 0 6px rgba(0,255,255,.4);
  letter-spacing: .12em; font-size: .8rem; cursor: pointer;
}
.settings-row input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px;
  border: 1px solid #00ffff; background: transparent;
  cursor: pointer; position: relative;
}
.settings-row input[type="checkbox"]:checked {
  background: #ffe066; box-shadow: 0 0 8px rgba(255,224,102,.7);
}
.btn-settings {
  width: 100%; max-width: 420px; background: transparent;
  color: #ffe066; border: 1px solid #ffe06666; padding: .55rem 1rem;
  font-family: Menlo, Consolas, monospace; letter-spacing: .12em;
  text-shadow: 0 0 6px rgba(255,224,102,.4);
  cursor: pointer;
}
.btn-settings:hover { background: rgba(255,224,102,.1); }
.btn-play {
  width: 100%; max-width: 420px;
  margin: 0 auto 1.2rem; display: block;
  background: linear-gradient(180deg, #ffe066 0%, #f5c93f 100%);
  color: #1a1a1a; border: 1px solid #ffe066;
  padding: .9rem 1rem; font-size: 1.15rem; font-weight: bold;
  font-family: Menlo, Consolas, monospace; letter-spacing: .18em;
  box-shadow: 0 0 16px rgba(255,224,102,.45);
  cursor: pointer; border-radius: 4px;
  transition: transform .08s ease, box-shadow .15s ease;
}
.btn-play:hover  { box-shadow: 0 0 22px rgba(255,224,102,.7); transform: translateY(-1px); }
.btn-play:active { transform: scale(.98); }
.select-back { color: #00ffff; border: 1px solid #00ffff66; padding: .25rem .6rem; font-family: Menlo, Consolas, monospace; }

.g-tier-badge.hidden, .win-tier-badge.hidden { display: none !important; }

/* ═══ SHELL REFRESH ═══════════════════ */
:root {
  --cyan: #00e6ff;
  --cyan-dim: rgba(0,230,255,.28);
  --amber: #ffd95a;
  --shell: rgba(7,12,14,.72);
  --shell-strong: rgba(7,12,15,.9);
  --shell-line: rgba(0,230,255,.22);
}
html, body {
  font-family: "Chakra Petch", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,217,90,.16), transparent 32%),
    radial-gradient(circle at 20% 80%, rgba(0,230,255,.12), transparent 26%),
    linear-gradient(180deg, #110d08 0%, #050607 52%, #020304 100%);
}
#appShell {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,217,90,.06), transparent 30%),
    linear-gradient(180deg, rgba(4,7,8,.12), rgba(4,7,8,.62));
}
.fx-stars,
.fx-grid,
.fx-sweep {
  position:absolute;
  inset:0;
}
.fx-stars {
  opacity:.45;
  background-image:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 14%, rgba(255,217,90,.7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 33% 72%, rgba(0,230,255,.6) 0 1px, transparent 1.5px),
    radial-gradient(circle at 64% 56%, rgba(255,255,255,.85) 0 1px, transparent 1.5px),
    radial-gradient(circle at 87% 82%, rgba(255,255,255,.65) 0 1px, transparent 1.5px);
}
.fx-grid {
  opacity:.22;
  background:
    linear-gradient(rgba(0,230,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,230,255,.05) 1px, transparent 1px);
  background-size: 100% 22px, 22px 100%;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.8) 22%, rgba(0,0,0,1) 100%);
}
.fx-sweep {
  background: linear-gradient(115deg, transparent 15%, rgba(255,255,255,.045) 50%, transparent 84%);
  transform: translateX(-110%);
  animation: shellSweep 12s linear infinite;
  opacity:.6;
}
@keyframes shellSweep {
  to { transform: translateX(120%); }
}
.screen {
  transition: opacity .3s ease, transform .3s ease, filter .3s ease;
}
.screen.hidden,
.screen[data-active="false"] {
  transform: translateY(14px) scale(.985);
  filter: blur(2px);
}
.screen[data-active="true"] {
  transform: translateY(0) scale(1);
  filter: none;
}
#homeScreen,
#selectScreen,
#settingsScreen {
  padding-bottom: 3rem;
}
#homeScreen .title-wrap,
#selectScreen .title-wrap,
#settingsScreen .title-wrap {
  position: relative;
}
#homeScreen .title-wrap::before,
#selectScreen .title-wrap::before,
#settingsScreen .title-wrap::before {
  content: 'SHIPBOARD ARCHIVE';
  display: block;
  margin-bottom: .65rem;
  color: rgba(0,230,255,.7);
  font: 500 .62rem/1 "IBM Plex Mono", monospace;
  letter-spacing: .34em;
  text-transform: uppercase;
}
.game-title {
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--amber);
  text-shadow: 0 0 28px rgba(255,217,90,.26), 0 0 55px rgba(255,217,90,.14);
  text-transform: uppercase;
}
.game-sub {
  letter-spacing: .36em;
  color: rgba(255,217,90,.62);
  margin-top: .45rem;
}
.btn-play,
.btn-settings,
.chapter-row,
.lvl-card,
.settings-row,
.win-actions button,
#gameScreen .controls button,
#gameScreen .back-btn,
.select-back {
  transition: transform .16s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.ui-panel {
  position: relative;
  overflow: hidden;
}
.ui-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 24%) top left / 18px 1px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 24%) top left / 1px 18px no-repeat,
    linear-gradient(270deg, rgba(255,255,255,.08), transparent 24%) top right / 18px 1px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 24%) top right / 1px 18px no-repeat,
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 24%) bottom left / 18px 1px no-repeat,
    linear-gradient(0deg, rgba(255,255,255,.08), transparent 24%) bottom left / 1px 18px no-repeat,
    linear-gradient(270deg, rgba(255,255,255,.08), transparent 24%) bottom right / 18px 1px no-repeat,
    linear-gradient(0deg, rgba(255,255,255,.08), transparent 24%) bottom right / 1px 18px no-repeat;
}
.ui-panel[data-panel-label]::before {
  content: attr(data-panel-label);
  position: absolute;
  top: .45rem;
  left: .7rem;
  transform: none;
  padding: .08rem .45rem;
  font: 500 .54rem/1 "IBM Plex Mono", monospace;
  letter-spacing: .24em;
  text-transform: uppercase;
  background: rgba(4,8,10,.94);
  color: rgba(0,230,255,.82);
  border: 1px solid rgba(0,230,255,.28);
  z-index: 2;
}
.ui-panel--amber[data-panel-label]::before {
  color: rgba(255,217,90,.86);
  border-color: rgba(255,217,90,.28);
}
.panel-kicker,
.card-kicker {
  font: 500 .54rem/1 "IBM Plex Mono", monospace;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(0,230,255,.74);
  margin-bottom: .55rem;
}
.btn-play {
  background:
    linear-gradient(180deg, rgba(255,217,90,.98), rgba(255,217,90,.84)),
    linear-gradient(90deg, rgba(255,255,255,.12), transparent 34%, rgba(0,0,0,.14));
  color: #0b1012;
  border: 1px solid rgba(255,217,90,.55);
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255,217,90,.15), 0 18px 40px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-play:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255,217,90,.25), 0 24px 45px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-settings,
.settings-row,
.chapter-row,
.lvl-card {
  background: linear-gradient(180deg, rgba(8,14,18,.92), rgba(6,10,14,.98));
  box-shadow: 0 18px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.025);
}
.btn-settings {
  border-color: rgba(255,217,90,.34);
}
.btn-settings:hover,
.settings-row:hover,
.chapter-row:hover,
.lvl-card:hover {
  transform: translateY(-2px);
}
.chapter-row {
  border: 1px solid rgba(0,230,255,.22);
  font-family: "IBM Plex Mono", Menlo, Consolas, monospace;
  padding-top: 1.1rem;
}
.chapter-row:hover {
  border-color: rgba(0,230,255,.44);
  box-shadow: 0 28px 48px rgba(0,0,0,.34);
}
.lvl-card {
  border: 1px solid rgba(0,230,255,.18);
  border-radius: 12px;
  padding-top: 1.15rem;
}
.lvl-card::before {
  background:
    linear-gradient(135deg, rgba(255,217,90,.08) 0%, transparent 44%),
    linear-gradient(90deg, transparent 0%, rgba(0,230,255,.05) 100%);
}
.lvl-card:hover {
  border-color: rgba(0,230,255,.42);
  box-shadow: 0 22px 36px rgba(0,0,0,.38);
}
.card-num { color: rgba(0,230,255,.72); }
.card-name { color: #f5efe1; }
.card-kicker {
  margin-bottom: .32rem;
}
#settingsScreen,
#settingsScreen * {
  font-family: "IBM Plex Mono", Menlo, Consolas, monospace;
}
.settings-row {
  border: 1px solid rgba(0,230,255,.24);
  padding: 1.05rem .95rem .8rem;
}
#gameScreen {
  background:
    radial-gradient(circle at 50% 18%, rgba(255,217,90,.06), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(0,230,255,.05), transparent 38%),
    linear-gradient(180deg, rgba(2,4,6,.72), rgba(1,2,4,.94)) !important;
}
#hudLayer,
#hudLayerBottom {
  width: 100%;
  max-width: 520px;
}
#gameScreen .g-header {
  border: 1px solid rgba(0,230,255,.24);
  border-bottom-color: rgba(255,217,90,.22);
  padding: .75rem .55rem .45rem;
  background: linear-gradient(180deg, rgba(7,12,15,.94), rgba(7,12,15,.74));
  box-shadow: 0 16px 36px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.03);
}
#gameScreen .scoreboard {
  border: 1px solid rgba(255,170,0,.22);
  padding: .8rem .55rem .45rem;
  background: linear-gradient(180deg, rgba(21,14,7,.78), rgba(10,9,8,.52));
  box-shadow: 0 14px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.025);
}
#gameScreen #gridWrap {
  margin: .75rem 0 .7rem;
  padding: 1.15rem 1rem 1rem;
  background:
    linear-gradient(180deg, rgba(8,12,14,.78), rgba(6,10,12,.52)),
    radial-gradient(circle at 50% 0%, rgba(0,230,255,.08), transparent 45%);
  border: 1px solid rgba(0,230,255,.24);
  box-shadow:
    0 24px 46px rgba(0,0,0,.36),
    inset 0 0 0 1px rgba(255,255,255,.02),
    inset 0 0 38px rgba(0,230,255,.05);
  animation: boardDock .28s ease;
}
@keyframes boardDock {
  from { opacity: .7; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
#gameScreen #statusEl {
  width: 100%;
  text-align: center;
  padding: .45rem .6rem 0;
}
#winOverlay::after {
  content: 'MISSION CLEAR';
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,217,90,.5);
  font: 500 .68rem/1 "IBM Plex Mono", monospace;
  letter-spacing: .42em;
}

/* ═══ MISSION BOARD REDESIGN ═════════════ */
#homeScreen {
  align-items: center;
  justify-content: flex-start;
  gap: clamp(.9rem, 2.2vh, 1.35rem);
  padding: clamp(.85rem, 2.5vh, 1.35rem) clamp(.75rem, 3vw, 2rem) 1.1rem;
}
.home-command {
  position: relative;
  width: min(1120px, 94vw);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: clamp(1rem, 3vw, 2.2rem);
  align-items: center;
  padding: clamp(1.05rem, 3vw, 1.65rem);
  border: 1px solid rgba(0,230,255,.34);
  border-left: 5px solid rgba(0,230,255,.85);
  background:
    linear-gradient(100deg, rgba(0,230,255,.1), transparent 36%),
    radial-gradient(circle at 84% 18%, rgba(255,217,90,.16), transparent 28%),
    linear-gradient(180deg, rgba(8,14,18,.9), rgba(4,7,10,.72));
  box-shadow: 0 26px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  overflow: hidden;
}
.home-command::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(0,230,255,.11) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, transparent 0 58%, rgba(255,217,90,.08) 58% 59%, transparent 59%);
  opacity: .38;
}
.home-command::after {
  content: '';
  position: absolute;
  right: clamp(220px, 29vw, 340px);
  top: .8rem;
  bottom: .8rem;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(0,230,255,.55), transparent);
}
.home-command > * {
  position: relative;
  z-index: 1;
}
#homeScreen .title-wrap {
  flex: 0 1 auto;
  text-align: left;
}
#homeScreen .title-wrap::before {
  content: 'VECTOR FLIGHT DECK';
  margin-bottom: .72rem;
  color: rgba(0,230,255,.82);
}
#homeScreen .game-title {
  font-size: clamp(2.45rem, 7.8vw, 5.85rem);
  line-height: .86;
  letter-spacing: .03em;
  text-shadow:
    0 0 32px rgba(255,217,90,.25),
    0 7px 0 rgba(255,90,160,.18),
    0 14px 36px rgba(0,0,0,.76);
}
#homeScreen .game-sub {
  margin-top: .85rem;
  color: rgba(245,239,225,.7);
  letter-spacing: .32em;
}
.home-actions {
  display: grid;
  gap: .65rem;
  align-self: stretch;
  align-content: center;
}
.home-actions .btn-play,
.home-actions .btn-settings {
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.home-actions .btn-play {
  min-height: 68px;
  font-size: 1.2rem;
  box-shadow: 0 0 0 1px rgba(255,217,90,.28), 0 20px 38px rgba(0,0,0,.38), 0 0 38px rgba(255,217,90,.18);
}
.home-actions .btn-settings {
  min-height: 44px;
  background:
    linear-gradient(180deg, rgba(8,14,18,.9), rgba(5,8,11,.9)),
    linear-gradient(90deg, rgba(255,217,90,.12), transparent);
}
.campaign-shell {
  width: min(1120px, 94vw);
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: .75rem;
  align-items: stretch;
}
.campaign-rail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  min-height: 100%;
  padding: .8rem .2rem;
  border: 1px solid rgba(255,217,90,.24);
  color: rgba(255,217,90,.78);
  background: linear-gradient(180deg, rgba(255,217,90,.08), rgba(0,230,255,.04));
  font: 600 .58rem/1 "IBM Plex Mono", monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
#chapterList {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}
.chapter-row {
  min-height: 142px;
  display: grid;
  align-content: start;
  gap: .44rem;
  padding: 1.45rem 1rem .92rem;
  border-radius: 0;
  border: 1px solid rgba(0,230,255,.25);
  border-left: 4px solid rgba(0,230,255,.85);
  background:
    linear-gradient(112deg, rgba(0,230,255,.09), transparent 42%),
    linear-gradient(180deg, rgba(8,14,18,.94), rgba(4,7,10,.9));
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.chapter-row:nth-child(4n+2) {
  border-left-color: rgba(255,217,90,.88);
  background:
    linear-gradient(112deg, rgba(255,217,90,.1), transparent 42%),
    linear-gradient(180deg, rgba(8,14,18,.94), rgba(4,7,10,.9));
}
.chapter-row:nth-child(4n+3) {
  border-left-color: rgba(255,68,170,.78);
  background:
    linear-gradient(112deg, rgba(255,68,170,.09), transparent 42%),
    linear-gradient(180deg, rgba(8,14,18,.94), rgba(4,7,10,.9));
}
.chapter-row:nth-child(4n) {
  border-left-color: rgba(110,255,155,.78);
}
.chapter-row .ui-panel::before {
  position: absolute;
}
.chapter-row .panel-kicker {
  margin: 0 0 .04rem;
}
.ch-header {
  align-items: start;
  gap: 1rem;
  font-size: .92rem;
  letter-spacing: .09em;
}
.ch-title {
  color: #f5efe1;
}
.ch-progress {
  color: rgba(255,217,90,.95);
  font-size: .78rem;
}
.ch-sub {
  max-width: 44rem;
  color: rgba(0,230,255,.66);
  font-size: .68rem;
  line-height: 1.45;
  letter-spacing: .05em;
}
.ch-meter {
  width: 100%;
  height: 4px;
  margin-top: .12rem;
  background: rgba(0,230,255,.12);
  overflow: hidden;
}
.ch-meter span {
  display: block;
  width: var(--chapter-progress, 0%);
  height: 100%;
  background: linear-gradient(90deg, rgba(255,217,90,.95), rgba(0,230,255,.85));
  box-shadow: 0 0 12px rgba(255,217,90,.35);
}
.ch-dots {
  gap: .28rem;
  flex-wrap: wrap;
}
.ch-dot {
  width: 18px;
  height: 7px;
  border: 1px solid rgba(0,230,255,.52);
  background: rgba(0,230,255,.05);
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 0 100%);
}
.ch-dot.done {
  background: rgba(255,217,90,.92);
  border-color: rgba(255,217,90,.95);
}
#selectScreen {
  padding: clamp(.85rem, 2.8vh, 1.4rem) clamp(.75rem, 3vw, 2rem) 1.1rem;
  gap: .95rem;
}
.select-header {
  max-width: 1120px;
  padding: .75rem .9rem;
  border: 1px solid rgba(0,230,255,.24);
  border-left: 4px solid rgba(255,217,90,.85);
  background: linear-gradient(90deg, rgba(255,217,90,.09), rgba(0,230,255,.05));
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.select-back,
#gameScreen .back-btn,
#gameScreen .controls button {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}
.level-grid {
  max-width: 1120px;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: .8rem;
}
.lvl-card {
  min-height: 150px;
  border-radius: 0;
  padding: 1.35rem 1rem .9rem;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.card-num {
  position: absolute;
  right: .75rem;
  bottom: .42rem;
  color: rgba(0,230,255,.12);
  font: 700 3.4rem/.78 "Chakra Petch", sans-serif;
  letter-spacing: 0;
}
.card-name {
  position: relative;
  z-index: 1;
  min-height: 2.2rem;
  color: #f5efe1;
  font-size: 1rem;
  line-height: 1.15;
}
.card-state {
  position: relative;
  z-index: 1;
  margin-top: auto;
  color: rgba(255,217,90,.78);
  font: 600 .58rem/1 "IBM Plex Mono", monospace;
  letter-spacing: .22em;
}
.card-par {
  color: rgba(0,230,255,.78);
  font: 700 .58rem/1 "IBM Plex Mono", monospace;
  letter-spacing: .18em;
}
.card-stars {
  position: relative;
  z-index: 1;
}
#hudLayer {
  max-width: min(760px, 94vw);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .72fr);
  gap: .55rem;
  align-items: stretch;
}
#hudLayerBottom {
  max-width: min(760px, 94vw);
}
#gameScreen .g-header,
#gameScreen .scoreboard,
#gameScreen #gridWrap {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
#gameScreen .g-header,
#gameScreen .scoreboard {
  margin: 0;
}
#gameScreen #gridWrap {
  margin: .7rem 0 .62rem;
}

@media (max-width: 760px) {
  .home-command {
    grid-template-columns: 1fr;
    gap: .9rem;
    min-height: 292px;
    align-content: start;
  }
  .home-command::after {
    display: none;
  }
  .home-actions {
    grid-template-columns: 1fr 1fr;
  }
  .home-actions .btn-play,
  .home-actions .btn-settings {
    min-height: 50px;
    padding-left: .7rem;
    padding-right: .7rem;
    letter-spacing: .14em;
  }
  .campaign-shell {
    grid-template-columns: 1fr;
  }
  .campaign-rail {
    min-height: 0;
    flex-direction: row;
    writing-mode: horizontal-tb;
    padding: .5rem .7rem;
  }
  #chapterList {
    grid-template-columns: 1fr;
  }
  .chapter-row {
    min-height: 126px;
  }
  #hudLayer {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 440px) {
  .home-command {
    min-height: 318px;
  }
  #homeScreen .game-title {
    font-size: clamp(2.1rem, 15vw, 3.4rem);
  }
  #homeScreen .game-sub {
    letter-spacing: .2em;
  }
  .home-actions {
    grid-template-columns: 1fr;
  }
  .level-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
  }
  .lvl-card {
    min-height: 132px;
    padding-left: .82rem;
    padding-right: .82rem;
  }
  .card-num {
    font-size: 2.8rem;
  }
}

/* ═══ ARCADE SLAB RESET ══════════════════ */
:root {
  --arcade-green: #32ff19;
  --arcade-cyan: #20d7ff;
  --arcade-pink: #ff0a83;
  --arcade-yellow: #ffed00;
  --arcade-white: #f7f7f2;
  --arcade-black: #050505;
  --arcade-gray: #1c1c1c;
  --arcade-shadow: #000;
}
html, body {
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 100% 4px,
    linear-gradient(90deg, rgba(50,255,25,.08) 1px, transparent 1px) 0 0 / 86px 100%,
    radial-gradient(circle at 70% 22%, rgba(255,237,0,.08), transparent 28%),
    radial-gradient(circle at 14% 72%, rgba(32,215,255,.12), transparent 32%),
    #090909 !important;
  color: var(--arcade-white);
}
#appShell {
  background: transparent;
}
.fx-grid {
  opacity: .08;
  background-size: 64px 64px;
}
.fx-sweep {
  opacity: .12;
}
#screenLayer {
  z-index: 20;
}
.screen {
  scrollbar-width: none;
}
.screen::-webkit-scrollbar {
  display: none;
}
.ui-panel,
.ui-panel::before,
.ui-panel::after {
  border: 0;
  background: none;
}
.ui-panel[data-panel-label]::before,
.chapter-row .ui-panel::before,
#gridWrap[data-panel-label]::before,
.g-header[data-panel-label]::before,
.scoreboard[data-panel-label]::before {
  display: none;
}
#homeScreen,
#selectScreen,
#settingsScreen {
  padding: clamp(1rem, 4vw, 3rem);
  gap: clamp(1.15rem, 3vw, 2.2rem);
}
#homeScreen {
  display: block !important;
}
.home-command,
.select-header,
.settings-list,
#hudLayer,
#hudLayerBottom {
  width: min(1120px, 92vw);
}
.home-command {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 340px);
  align-items: center;
  gap: clamp(1.2rem, 4vw, 3rem);
  padding: clamp(1.4rem, 4vw, 3rem);
  background: transparent;
  border: 0;
  box-shadow: none;
  clip-path: none;
  overflow: visible;
  margin: 0 auto clamp(1.7rem, 4vw, 3rem);
}
.home-command::before,
.home-command::after {
  display: none;
}
#homeScreen .title-wrap,
#selectScreen .title-wrap,
#settingsScreen .title-wrap {
  text-align: left;
}
#homeScreen .title-wrap::before,
#selectScreen .title-wrap::before,
#settingsScreen .title-wrap::before {
  display: none;
}
.game-title,
#homeScreen .game-title {
  color: var(--arcade-yellow);
  font-family: "Chakra Petch", Impact, sans-serif;
  font-size: clamp(3.5rem, 9vw, 7.2rem);
  font-weight: 700;
  line-height: .88;
  letter-spacing: .02em;
  text-shadow:
    0 12px 0 #5d3245,
    0 18px 0 var(--arcade-black),
    0 26px 40px rgba(0,0,0,.75);
}
.game-sub {
  width: fit-content;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  padding: .6rem 1.1rem;
  color: var(--arcade-black);
  background: var(--arcade-white);
  border: 5px solid var(--arcade-black);
  border-radius: 999px;
  box-shadow: 9px 9px 0 var(--arcade-pink);
  font: 800 clamp(.72rem, 1.3vw, 1rem)/1 "Chakra Petch", sans-serif;
  letter-spacing: .18em;
}
.home-actions {
  display: grid;
  gap: 1rem;
  align-content: center;
}
.btn-play,
.btn-settings,
.select-back,
#gameScreen .back-btn,
#gameScreen .controls button,
.win-actions button {
  min-height: 0;
  border: 6px solid var(--arcade-black) !important;
  border-radius: 26px !important;
  clip-path: none !important;
  box-shadow: 11px 11px 0 var(--arcade-shadow) !important;
  color: var(--arcade-black) !important;
  font-family: "Chakra Petch", Arial Black, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-shadow: none !important;
  transform: translate(0,0);
}
.btn-play:hover,
.btn-settings:hover,
.select-back:hover,
#gameScreen .back-btn:hover,
#gameScreen .controls button:hover,
.chapter-row:hover,
.lvl-card:hover {
  transform: translate(-3px, -3px) !important;
  box-shadow: 14px 14px 0 var(--arcade-shadow) !important;
}
.btn-play:active,
.btn-settings:active,
.select-back:active,
#gameScreen .back-btn:active,
#gameScreen .controls button:active,
.chapter-row:active,
.lvl-card:active {
  transform: translate(5px, 5px) !important;
  box-shadow: 5px 5px 0 var(--arcade-shadow) !important;
}
.home-actions .btn-play,
.btn-play {
  min-height: 116px;
  padding: 1rem 1.5rem;
  background: var(--arcade-green) !important;
  font-size: clamp(1.8rem, 4vw, 3.2rem) !important;
}
.home-actions .btn-settings,
.btn-settings {
  min-height: 72px;
  padding: .9rem 1.2rem;
  background: var(--arcade-white) !important;
  font-size: clamp(1rem, 2vw, 1.45rem) !important;
}
.campaign-shell {
  width: min(1120px, 92vw);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0 auto;
}
.campaign-rail {
  min-height: 0;
  width: fit-content;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  writing-mode: horizontal-tb;
  padding: .72rem 1rem;
  border: 5px solid var(--arcade-black);
  border-radius: 999px;
  background: var(--arcade-yellow);
  box-shadow: 8px 8px 0 var(--arcade-shadow);
  color: var(--arcade-black);
  font: 800 .82rem/1 "Chakra Petch", sans-serif;
  letter-spacing: .14em;
}
#chapterList {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem);
}
.chapter-row {
  min-height: 230px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.25rem;
  overflow: visible;
  cursor: pointer;
  border: 6px solid var(--arcade-black) !important;
  border-radius: 28px !important;
  clip-path: none !important;
  background: var(--tile-accent, var(--arcade-cyan)) !important;
  box-shadow: 12px 12px 0 var(--arcade-shadow), inset 0 -10px 0 rgba(0,0,0,.08) !important;
  color: var(--arcade-black) !important;
  text-shadow: none !important;
}
.chapter-row:nth-child(2n) {
  transform: translateY(18px);
}
.chapter-row:nth-child(2n):hover {
  transform: translate(-3px, 15px) !important;
}
.ch-big {
  position: absolute;
  right: 1rem;
  bottom: .7rem;
  color: rgba(0,0,0,.12);
  font: 800 5.4rem/.75 "Chakra Petch", sans-serif;
  letter-spacing: -.04em;
}
.panel-kicker,
.card-kicker {
  width: fit-content;
  margin: 0;
  padding: .38rem .62rem;
  color: var(--arcade-white);
  background: var(--arcade-black);
  border-radius: 999px;
  font: 800 .66rem/1 "Chakra Petch", sans-serif;
  letter-spacing: .12em;
}
.ch-header {
  display: block;
  font-family: "Chakra Petch", sans-serif;
  letter-spacing: 0;
}
.ch-title {
  display: block;
  color: var(--arcade-black);
  font-size: clamp(1.05rem, 1.7vw, 1.55rem);
  font-weight: 800;
  line-height: 1;
}
.ch-progress {
  display: inline-block;
  margin-top: .55rem;
  padding: .34rem .55rem;
  border: 3px solid var(--arcade-black);
  border-radius: 999px;
  color: var(--arcade-black);
  background: rgba(255,255,255,.72);
  font-size: .86rem;
}
.ch-sub {
  color: rgba(0,0,0,.76);
  font: 800 .78rem/1.2 "Chakra Petch", sans-serif;
  letter-spacing: 0;
}
.ch-meter {
  height: 10px;
  margin-top: auto;
  border: 3px solid var(--arcade-black);
  border-radius: 999px;
  background: rgba(255,255,255,.55);
}
.ch-meter span {
  background: var(--arcade-black);
  box-shadow: none;
}
.ch-dots {
  display: none;
}
#selectScreen .select-header,
#settingsScreen .select-header {
  max-width: min(1120px, 92vw);
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 1px;
  gap: 1rem;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  clip-path: none;
}
.select-back,
#gameScreen .back-btn {
  min-height: 58px;
  padding: .55rem 1rem;
  background: var(--arcade-white) !important;
  font-size: 1.1rem !important;
}
#selectScreen .game-title,
#settingsScreen .game-title {
  width: fit-content;
  max-width: 100%;
  padding: .55rem 1rem .65rem;
  color: var(--arcade-black);
  background: var(--arcade-yellow);
  border: 6px solid var(--arcade-black);
  border-radius: 24px;
  box-shadow: 10px 10px 0 var(--arcade-shadow);
  font-size: clamp(1.15rem, 3vw, 2.5rem) !important;
  line-height: 1;
  text-shadow: none;
}
.level-grid {
  max-width: min(1120px, 92vw);
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: clamp(1rem, 2vw, 1.4rem);
}
.lvl-card {
  min-height: 178px;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.1rem;
  border: 6px solid var(--arcade-black) !important;
  border-radius: 26px !important;
  clip-path: none !important;
  background: var(--tile-accent, var(--arcade-cyan)) !important;
  box-shadow: 11px 11px 0 var(--arcade-shadow), inset 0 -10px 0 rgba(0,0,0,.08) !important;
  color: var(--arcade-black);
  cursor: pointer;
}
.card-kicker {
  background: var(--arcade-black);
  color: var(--arcade-white);
}
.card-num {
  position: static;
  order: 2;
  margin-top: .6rem;
  color: var(--arcade-black);
  font: 800 clamp(3rem, 7vw, 4.8rem)/.85 "Chakra Petch", sans-serif;
}
.card-name {
  order: 3;
  min-height: 0;
  color: var(--arcade-black);
  font: 800 1.05rem/1.05 "Chakra Petch", sans-serif;
}
.card-state {
  order: 4;
  width: fit-content;
  margin-top: auto;
  padding: .3rem .55rem;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  color: var(--arcade-black);
  font: 800 .7rem/1 "Chakra Petch", sans-serif;
  letter-spacing: .08em;
}
.card-meta {
  order: 4;
  margin-top: auto;
}
.card-par {
  width: fit-content;
  padding: .3rem .55rem;
  border-radius: 999px;
  background: var(--arcade-black);
  color: var(--arcade-white);
  font: 800 .7rem/1 "Chakra Petch", sans-serif;
  letter-spacing: .08em;
}
.card-meta .card-state {
  order: initial;
  margin-top: 0;
}
.card-stars {
  display: none;
}
#settingsScreen .settings-list {
  max-width: min(760px, 92vw);
  gap: 1rem;
}
.settings-row {
  min-height: 82px;
  padding: 1rem 1.2rem;
  border: 6px solid var(--arcade-black) !important;
  border-radius: 24px !important;
  background: var(--arcade-cyan) !important;
  box-shadow: 10px 10px 0 var(--arcade-shadow) !important;
  color: var(--arcade-black);
  font: 800 1.1rem/1 "Chakra Petch", sans-serif;
  letter-spacing: .04em;
  text-shadow: none;
}
.settings-row:nth-child(2) {
  background: var(--arcade-green) !important;
}
.settings-row:nth-child(3) {
  background: var(--arcade-yellow) !important;
}
.settings-row input[type="checkbox"] {
  width: 34px;
  height: 34px;
  border: 5px solid var(--arcade-black);
  border-radius: 9px;
  background: var(--arcade-white);
}
.settings-row input[type="checkbox"]:checked {
  background: var(--arcade-pink);
  box-shadow: inset 0 0 0 5px var(--arcade-white);
}
#gameScreen {
  justify-content: flex-start !important;
  align-items: center;
  overflow-y: auto;
  padding: .85rem;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 100% 4px,
    radial-gradient(circle at 50% 25%, rgba(32,215,255,.08), transparent 36%),
    #090909 !important;
}
#hudLayer {
  max-width: min(900px, 96vw);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, .8fr);
  gap: .85rem;
}
#gameScreen .g-header,
#gameScreen .scoreboard {
  min-height: 70px;
  padding: .85rem 1rem;
  border: 5px solid var(--arcade-black) !important;
  border-radius: 22px !important;
  clip-path: none !important;
  box-shadow: 8px 8px 0 var(--arcade-shadow) !important;
  color: var(--arcade-black);
  text-shadow: none;
}
#gameScreen .g-header {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  background: var(--arcade-cyan) !important;
}
#gameScreen .scoreboard {
  background: var(--arcade-yellow) !important;
}
.g-lvl-name,
.sc-item,
.sc-item strong,
.sc-stars {
  color: var(--arcade-black);
  font-family: "Chakra Petch", sans-serif;
  font-weight: 800;
  text-shadow: none;
}
#gameScreen .g-lvl-name,
#gameScreen .sc-item,
#gameScreen .sc-item strong,
#gameScreen .sc-stars {
  color: var(--arcade-black) !important;
  text-shadow: none !important;
}
.g-lvl-name {
  font-size: clamp(.95rem, 2vw, 1.35rem);
  line-height: 1.05;
}
.sc-stars {
  letter-spacing: .1em;
}
#gameScreen #gridWrap {
  margin: 1rem 0 .85rem;
  padding: clamp(.65rem, 2vw, 1rem);
  border: 5px solid var(--arcade-black) !important;
  border-radius: 34px !important;
  clip-path: none !important;
  background: rgba(255,255,255,.05) !important;
  box-shadow: 12px 12px 0 var(--arcade-shadow), inset 0 0 0 2px rgba(255,255,255,.05) !important;
}
#inputLayer,
#boardHitLayer {
  pointer-events: inherit;
}
.hit-cell.tappable {
  cursor: pointer;
}
.hit-cell,
.hit-cell:hover,
.hit-cell:active,
.hit-cell:focus,
.hit-cell:focus-visible {
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
.projected-hint {
  color: #f5efe1;
  font: 700 .68rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0;
  text-shadow: 0 0 10px rgba(0,246,255,.95), 0 0 18px rgba(255,217,90,.65);
  transform-origin: center;
  z-index: 12;
}
#hudLayerBottom {
  max-width: min(900px, 96vw);
  display: grid;
  justify-items: center;
  gap: .65rem;
}
#statusEl,
#gameScreen #statusEl {
  width: fit-content;
  min-height: 0;
  padding: .65rem 1rem;
  border: 5px solid var(--arcade-black);
  border-radius: 999px;
  background: var(--arcade-white);
  box-shadow: 8px 8px 0 var(--arcade-shadow);
  color: var(--arcade-black);
  font: 800 clamp(.82rem, 2vw, 1.1rem)/1 "Chakra Petch", sans-serif;
  letter-spacing: .05em;
  text-shadow: none;
}
#gameScreen #statusEl::before {
  content: '';
}
#gameScreen #statusEl.s-win {
  background: var(--arcade-green);
  color: var(--arcade-black);
}
#gameScreen #statusEl.s-bad {
  background: var(--arcade-pink);
  color: var(--arcade-white);
}
#gameScreen .controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .9rem;
  margin-top: .15rem;
}
#gameScreen .controls button {
  min-width: 132px;
  min-height: 58px;
  padding: .65rem 1rem;
  background: var(--arcade-cyan) !important;
  font-size: 1rem !important;
}
#gameScreen .controls button:nth-child(2) {
  background: var(--arcade-yellow) !important;
}
#gameScreen .controls button:nth-child(3) {
  background: var(--arcade-green) !important;
}
#gameScreen .controls button:disabled {
  opacity: .4;
  filter: grayscale(1);
}
.kb-hint {
  width: fit-content;
  padding: .45rem .85rem;
  border-radius: 999px;
  background: rgba(0,0,0,.72);
  color: rgba(255,255,255,.7);
  font: 800 .72rem/1 "Chakra Petch", sans-serif;
  letter-spacing: .12em;
}
#eatRow {
  color: var(--arcade-yellow);
  font: 800 .86rem/1 "Chakra Petch", sans-serif;
  letter-spacing: .1em;
}

/* Hide the explicit goal/status copy from the play screen. */
#gameScreen #statusEl {
  display: none !important;
}

@media (max-width: 900px) {
  #chapterList {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .chapter-row:nth-child(2n) {
    transform: none;
  }
  .chapter-row:nth-child(2n):hover {
    transform: translate(-3px, -3px) !important;
  }
  #hudLayer {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  #homeScreen,
  #selectScreen,
  #settingsScreen {
    padding: .9rem .75rem 1.6rem;
  }
  .home-command {
    width: min(540px, 94vw);
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 0;
  }
  #homeScreen .game-title {
    font-size: clamp(3rem, 16vw, 4.8rem);
  }
  .game-sub {
    font-size: .66rem;
    letter-spacing: .12em;
    box-shadow: 6px 6px 0 var(--arcade-pink);
  }
  .home-actions {
    grid-template-columns: 1fr;
  }
  .home-actions .btn-play,
  .btn-play {
    min-height: 92px;
  }
  .campaign-shell,
  #chapterList,
  .level-grid {
    width: min(540px, 94vw);
  }
  #chapterList,
  .level-grid {
    grid-template-columns: 1fr;
  }
  .chapter-row,
  .lvl-card {
    min-height: 170px;
  }
  .campaign-rail {
    width: 100%;
    justify-content: space-between;
  }
  #selectScreen .select-header,
  #settingsScreen .select-header {
    grid-template-columns: 1fr;
  }
  #selectScreen .game-title,
  #settingsScreen .game-title {
    width: 100%;
  }
  #gameScreen .g-header {
    grid-template-columns: 72px minmax(0, 1fr);
  }
  .g-tier-badge {
    grid-column: 2;
  }
  #gameScreen .controls button {
    min-width: 104px;
  }
}

/* ═══ SLAB REFINEMENT + PALETTES ═════════ */
:root {
  --arcade-green: var(--ui-d, #6eff9b);
  --arcade-cyan: var(--ui-a, #00dff6);
  --arcade-pink: var(--ui-c, #ff4aa8);
  --arcade-yellow: var(--ui-b, #ffd95a);
  --arcade-white: var(--ui-paper, #f5efe1);
  --arcade-black: var(--ui-ink, #07090b);
  --arcade-shadow: var(--ui-shadow-color, rgba(0,0,0,.78));
  --slab-shadow: 5px 5px 0 var(--arcade-shadow);
  --slab-shadow-hover: 7px 7px 0 var(--arcade-shadow);
  --slab-shadow-down: 2px 2px 0 var(--arcade-shadow);
  --slab-border: 4px solid var(--arcade-black);
}
:root[data-ui-pulse] {
  --arcade-cyan: var(--ui-pulse-a);
  --arcade-yellow: var(--ui-pulse-b);
  --arcade-pink: var(--ui-pulse-c);
}
html,
body,
.chapter-row,
.lvl-card,
.btn-play,
.btn-settings,
.select-back,
#gameScreen .back-btn,
#gameScreen .controls button,
.settings-row,
.settings-palette,
.campaign-rail,
#gameScreen .g-header,
#gameScreen .scoreboard,
#gameScreen #gridWrap {
  transition:
    background-color .28s ease,
    background .28s ease,
    border-color .28s ease,
    box-shadow .22s ease,
    color .22s ease,
    transform .14s ease;
}
html, body {
  background:
    linear-gradient(rgba(0,223,246,.03) 1px, transparent 1px) 0 0 / 100% 4px,
    linear-gradient(90deg, rgba(0,223,246,.055) 1px, transparent 1px) 0 0 / 72px 100%,
    radial-gradient(circle at 70% 18%, color-mix(in srgb, var(--arcade-yellow) 11%, transparent), transparent 30%),
    radial-gradient(circle at 10% 78%, color-mix(in srgb, var(--arcade-cyan) 12%, transparent), transparent 32%),
    #050708 !important;
}
.game-title,
#homeScreen .game-title {
  color: var(--ui-title, var(--arcade-yellow));
  text-shadow:
    0 8px 0 color-mix(in srgb, var(--arcade-pink) 42%, #111),
    0 12px 0 rgba(0,0,0,.72),
    0 20px 32px rgba(0,0,0,.64);
}
.game-sub,
.campaign-rail,
#selectScreen .game-title,
#settingsScreen .game-title,
#statusEl,
#gameScreen #statusEl,
.settings-palette {
  border: var(--slab-border) !important;
  box-shadow: var(--slab-shadow) !important;
}
.game-sub {
  background: color-mix(in srgb, var(--arcade-white) 92%, var(--arcade-cyan));
  color: var(--arcade-black);
  box-shadow: 4px 4px 0 var(--arcade-pink) !important;
}
.btn-play,
.btn-settings,
.select-back,
#gameScreen .back-btn,
#gameScreen .controls button,
.win-actions button,
.chapter-row,
.lvl-card,
.settings-row {
  border: var(--slab-border) !important;
  box-shadow: var(--slab-shadow) !important;
}
.btn-play:hover,
.btn-settings:hover,
.select-back:hover,
#gameScreen .back-btn:hover,
#gameScreen .controls button:hover,
.chapter-row:hover,
.lvl-card:hover,
.settings-row:hover,
.palette-option:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: var(--slab-shadow-hover) !important;
}
.btn-play:active,
.btn-settings:active,
.select-back:active,
#gameScreen .back-btn:active,
#gameScreen .controls button:active,
.chapter-row:active,
.lvl-card:active,
.palette-option:active {
  transform: translate(2px, 2px) !important;
  box-shadow: var(--slab-shadow-down) !important;
}
.home-actions .btn-play,
.btn-play {
  background: var(--arcade-yellow) !important;
}
.home-actions .btn-settings,
.btn-settings,
.select-back,
#gameScreen .back-btn {
  background: color-mix(in srgb, var(--arcade-white) 94%, var(--arcade-cyan)) !important;
}
.campaign-rail {
  background: var(--arcade-cyan);
  box-shadow: var(--slab-shadow) !important;
}
.chapter-row,
.lvl-card {
  background: color-mix(in srgb, var(--tile-accent, var(--arcade-cyan)) 88%, #ffffff 12%) !important;
  box-shadow: var(--slab-shadow), inset 0 -7px 0 rgba(0,0,0,.08) !important;
}
.chapter-row:nth-child(2n) {
  transform: none;
}
.chapter-row:nth-child(2n):hover {
  transform: translate(-1px, -1px) !important;
}
.panel-kicker,
.card-kicker {
  background: var(--arcade-black);
  color: var(--arcade-white);
}
.ch-progress,
.card-state {
  border-color: var(--arcade-black);
  background: color-mix(in srgb, var(--arcade-white) 86%, transparent);
}
.settings-palette {
  display: grid;
  gap: .8rem;
  padding: 1rem;
  border-radius: 24px;
  background: color-mix(in srgb, var(--arcade-cyan) 18%, #090909);
}
.settings-palette-title {
  color: var(--arcade-white);
  font: 800 .86rem/1 "Chakra Petch", sans-serif;
  letter-spacing: .12em;
}
.palette-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: .7rem;
}
.palette-option {
  appearance: none;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: .65rem;
  min-height: 58px;
  padding: .55rem .7rem;
  border: 3px solid var(--arcade-black);
  border-radius: 18px;
  background: var(--arcade-white);
  box-shadow: 3px 3px 0 var(--arcade-shadow);
  color: var(--arcade-black);
  cursor: pointer;
  font: 800 .78rem/1 "Chakra Petch", sans-serif;
  letter-spacing: .08em;
}
.palette-option.is-active {
  background: var(--arcade-yellow);
}
.palette-swatch {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 40px;
  height: 34px;
  overflow: hidden;
  border: 3px solid var(--arcade-black);
  border-radius: 10px;
}
.palette-swatch::before {
  content: '';
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  background:
    linear-gradient(90deg, var(--sw-a) 0 25%, var(--sw-b) 25% 50%, var(--sw-c) 50% 75%, var(--sw-d) 75%);
}
#settingsScreen .settings-list {
  max-width: min(820px, 92vw);
}
#settingsScreen .settings-row {
  background: color-mix(in srgb, var(--arcade-white) 88%, var(--arcade-cyan)) !important;
}
#settingsScreen .settings-row:nth-child(3) {
  background: color-mix(in srgb, var(--arcade-cyan) 72%, var(--arcade-white)) !important;
}
#settingsScreen .settings-row:nth-child(4) {
  background: color-mix(in srgb, var(--arcade-yellow) 80%, var(--arcade-white)) !important;
}
#gameScreen {
  justify-content: safe center !important;
  align-items: center;
  overflow-y: auto;
}
.game-stage {
  width: min(920px, 96vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto 0;
}
#hudLayer,
#hudLayerBottom {
  width: 100%;
}
#gameScreen .g-header,
#gameScreen .scoreboard,
#gameScreen #gridWrap {
  border: var(--slab-border) !important;
  box-shadow: var(--slab-shadow) !important;
}
#gameScreen .g-header {
  background: color-mix(in srgb, var(--arcade-cyan) 78%, var(--arcade-white)) !important;
}
#gameScreen .scoreboard {
  background: color-mix(in srgb, var(--arcade-yellow) 82%, var(--arcade-white)) !important;
}
#gameScreen #gridWrap {
  background:
    linear-gradient(rgba(255,255,255,.035), rgba(255,255,255,.035)),
    color-mix(in srgb, var(--arcade-cyan) 8%, #050708) !important;
}
#gameScreen .controls button {
  box-shadow: 4px 4px 0 var(--arcade-shadow) !important;
}
#gameScreen .controls button:nth-child(1) {
  background: color-mix(in srgb, var(--arcade-white) 88%, var(--arcade-cyan)) !important;
}
#gameScreen .controls button:nth-child(2) {
  background: color-mix(in srgb, var(--arcade-yellow) 84%, var(--arcade-white)) !important;
}
#gameScreen .controls button:nth-child(3) {
  background: color-mix(in srgb, var(--arcade-cyan) 78%, var(--arcade-white)) !important;
}
.kb-hint {
  background: rgba(0,0,0,.58);
}

@media (max-height: 760px) {
  #gameScreen {
    justify-content: flex-start !important;
  }
  .game-stage {
    margin: 0;
  }
}

/* Final game-screen centering pass. */
#gameScreen {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100dvh;
  padding: clamp(.65rem, 2vh, 1.2rem) clamp(.75rem, 3vw, 1.4rem);
  overflow-y: auto;
}
.game-stage {
  width: min(760px, 96vw);
  max-width: 96vw;
  margin: auto;
  align-items: center;
}
#gameScreen #hudLayer,
#gameScreen #hudLayerBottom {
  width: min(760px, 100%);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  align-self: center;
}
#gameScreen #hudLayer {
  grid-template-columns: minmax(0, 1.25fr) minmax(220px, .8fr);
  justify-content: center;
}
#gameScreen #gridWrap {
  align-self: center;
  margin-left: auto;
  margin-right: auto;
}
#gameScreen .controls {
  width: 100%;
  justify-content: center;
}

@media (max-width: 720px), (max-height: 760px) {
  #gameScreen {
    justify-content: flex-start !important;
  }
  .game-stage {
    width: min(560px, 96vw);
    margin: 0 auto;
  }
  #gameScreen #hudLayer {
    grid-template-columns: 1fr;
  }
}

/* ═══ HOME: 1970s SYSTEMS GRAPHIC PASS ═══ */
#appShell[data-screen="home"] .fx-stars,
#appShell[data-screen="home"] .fx-sweep {
  display: none;
}
#appShell[data-screen="home"] .fx-grid {
  opacity: var(--ui-home-grid-opacity, .035);
  background-size: 96px 96px;
}
/* The viewport-wide grid reads as "scanlines" on the game screen — hide it
   there so the only scanline-like effect comes from the in-board overlay
   (#gridWrap::after) and the 3D shader. Same on select/settings screens. */
#appShell[data-screen="game"] .fx-grid,
#appShell[data-screen="select"] .fx-grid,
#appShell[data-screen="settings"] .fx-grid {
  display: none;
}
#homeScreen {
  --home-paper: var(--ui-home-paper, #e8e2bc);
  --home-cream: var(--ui-home-cream, #f1e9c8);
  --home-olive: var(--ui-home-olive, #292d24);
  --home-teal: var(--ui-home-teal, #0d7d78);
  --home-teal-soft: var(--ui-home-teal-soft, #67b8aa);
  --home-blue: var(--ui-home-blue, #27476d);
  --home-orange: var(--ui-home-orange, #d94c18);
  --home-gold: var(--ui-home-gold, #dcc86b);
  --home-ink: var(--ui-home-ink, #11130f);
  position: relative;
  min-height: 100%;
  padding-top: clamp(1.4rem, 5vh, 4.4rem);
  background:
    radial-gradient(circle at 78% 18%, rgba(220,200,107,.09), transparent 24%),
    linear-gradient(180deg, #101410 0%, #070a09 100%);
  overflow-x: hidden;
}
#homeScreen .home-vector-lines {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
  opacity: var(--ui-home-field-opacity, .54);
}
#homeScreen .home-vector-lines path {
  fill: none;
  stroke: var(--home-paper);
  stroke-width: 5.5;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}
#homeScreen .home-vector-lines__bank {
  transform-origin: 88% 58%;
}
#homeScreen::before {
  content: '';
  position: fixed;
  left: max(-13vw, -180px);
  bottom: max(-22vw, -230px);
  width: min(62vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--home-orange);
  opacity: .9;
  pointer-events: none;
  z-index: -1;
}
#homeScreen::after {
  display: none;
}
#homeScreen .home-command,
#homeScreen .campaign-shell {
  position: relative;
  z-index: 1;
}
#homeScreen .home-command {
  width: min(1120px, 90vw);
  grid-template-columns: minmax(0, 1fr) minmax(240px, 330px);
  gap: clamp(2rem, 7vw, 7rem);
  padding: 0;
  margin-bottom: clamp(2.4rem, 7vh, 5.2rem);
}
#homeScreen .title-wrap {
  padding-left: clamp(.1rem, 1vw, .7rem);
}
#homeScreen .game-title {
  color: var(--home-paper);
  font-size: clamp(4rem, 10.8vw, 8.4rem);
  line-height: .82;
  letter-spacing: .015em;
  text-shadow:
    0 8px 0 var(--ui-home-title-shadow, rgba(13,125,120,.78)),
    0 14px 0 var(--ui-home-title-deep, rgba(0,0,0,.72));
}
#homeScreen .vector-logo {
  width: min(58vw, 560px);
  max-width: 100%;
  line-height: 0;
  color: var(--home-gold);
  text-shadow: none;
  transform-origin: 48% 52%;
  transform-style: preserve-3d;
  perspective: 760px;
  filter:
    drop-shadow(0 7px 0 var(--ui-home-title-shadow, rgba(255,210,26,.58)))
    drop-shadow(0 12px 0 var(--ui-home-title-deep, rgba(0,0,0,.78)));
}
#homeScreen .vector-logo > span:not(.vector-logo__glyph) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
#homeScreen .vector-logo__letters {
  position: relative;
  width: 100%;
  aspect-ratio: var(--logo-aspect, 1.98 / 1);
  overflow: visible;
  perspective: 900px;
  transform-style: preserve-3d;
}
#homeScreen .vector-logo .vector-logo__glyph {
  position: absolute;
  display: block;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  transform-origin: center;
  transform-style: preserve-3d;
  will-change: transform;
  animation: vector-letter-float var(--float-dur, 28000ms) var(--float-ease, linear) infinite;
  animation-delay: var(--float-delay, 0ms);
}
#homeScreen .vector-logo__glyph-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
#homeScreen .vector-logo__letter {
  fill: currentColor;
}
#homeScreen .vector-logo__edge {
  stroke: rgba(4, 8, 7, .72);
  stroke-width: .032;
  stroke-linejoin: round;
}
#homeScreen .vector-logo__edge--deep {
  fill: rgba(0, 0, 0, .74);
}
#homeScreen .vector-logo__edge--cool {
  fill: var(--ui-home-title-shadow, rgba(13,125,120,.78));
}
#homeScreen .vector-logo__edge--warm {
  fill: rgba(116, 103, 43, .38);
}
#homeScreen .vector-logo__letter--face {
  stroke: rgba(255, 246, 162, .24);
  stroke-width: .018;
  stroke-linejoin: round;
}
#homeScreen .vector-logo__letter--rim {
  fill: none;
  stroke: rgba(2, 6, 5, .72);
  stroke-width: .045;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
@keyframes vector-letter-float {
  0%, 100% {
    transform:
      translate3d(0, 0, 0)
      rotateX(var(--base-rx, 0deg))
      rotateY(var(--base-ry, 0deg))
      rotateZ(var(--base-rz, 0deg))
      scale(1);
  }
  34% {
    transform:
      translate3d(var(--float-x, 0px), var(--float-y, 0px), var(--float-z, 4px))
      rotateX(calc(var(--base-rx, 0deg) + var(--float-rx, 0deg)))
      rotateY(calc(var(--base-ry, 0deg) + var(--float-ry, 0deg)))
      rotateZ(calc(var(--base-rz, 0deg) + var(--float-rz, 0deg)))
      scale(var(--float-scale, 1.01));
  }
  68% {
    transform:
      translate3d(var(--float-x2, 0px), var(--float-y2, 0px), calc(var(--float-z, 4px) * .42))
      rotateX(calc(var(--base-rx, 0deg) + var(--float-rx2, 0deg)))
      rotateY(calc(var(--base-ry, 0deg) + var(--float-ry2, 0deg)))
      rotateZ(calc(var(--base-rz, 0deg) + var(--float-rz2, 0deg)))
      scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  #homeScreen .vector-logo__glyph {
    animation: none;
  }
}
#homeScreen .game-sub {
  display: none !important;
}
#homeScreen .home-actions {
  gap: 1.1rem;
}
#homeScreen .home-actions .btn-play,
#homeScreen .home-actions .btn-settings {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 4px solid var(--home-ink) !important;
  border-radius: 28px !important;
  box-shadow: 5px 5px 0 rgba(0,0,0,.72) !important;
  color: var(--home-ink) !important;
}
#homeScreen .home-actions .btn-play {
  min-height: 102px;
  background: var(--home-gold) !important;
}
#homeScreen .home-actions .btn-settings {
  min-height: 66px;
  background: var(--home-cream) !important;
}
#homeScreen .home-actions .btn-play::before,
#homeScreen .home-actions .btn-settings::before {
  content: '01';
  position: absolute;
  right: .85rem;
  bottom: -.2rem;
  z-index: -1;
  color: rgba(17,19,15,.11);
  font: 800 5.8rem/.78 "Chakra Petch", sans-serif;
  letter-spacing: -.06em;
}
#homeScreen .home-actions .btn-settings::before {
  content: '02';
  font-size: 4rem;
  bottom: -.1rem;
}
#homeScreen .home-actions .btn-play::after,
#homeScreen .home-actions .btn-settings::after {
  content: '';
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: .72rem;
  height: 12px;
  z-index: -1;
  opacity: .42;
  background: repeating-linear-gradient(
    to right,
    var(--home-ink) 0 28px,
    transparent 28px 38px
  );
}
#homeScreen .home-actions .btn-settings::after {
  left: auto;
  top: .66rem;
  right: 1rem;
  bottom: auto;
  width: 88px;
  height: 34px;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, transparent 0 31%, rgba(17,19,15,.38) 32% 38%, transparent 39% 100%),
    radial-gradient(circle at center, transparent 0 55%, rgba(17,19,15,.25) 56% 62%, transparent 63% 100%);
}
#homeScreen .home-actions .btn-play:hover,
#homeScreen .home-actions .btn-settings:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 6px 6px 0 rgba(0,0,0,.72) !important;
}
#homeScreen .campaign-shell {
  width: min(1120px, 90vw);
  gap: 1.15rem;
}
#homeScreen .campaign-rail {
  width: fit-content;
  padding: .6rem .95rem;
  border: 3px solid var(--home-ink) !important;
  border-radius: 999px;
  background: var(--home-teal-soft);
  color: var(--home-ink);
  box-shadow: 4px 4px 0 rgba(0,0,0,.62) !important;
  letter-spacing: .13em;
}
#homeScreen #chapterList {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.35rem);
}
#homeScreen .chapter-row {
  min-height: 212px;
  border: 4px solid var(--home-ink) !important;
  border-radius: 24px !important;
  box-shadow: 5px 5px 0 rgba(0,0,0,.68), inset 0 -7px 0 rgba(17,19,15,.08) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--tile-accent, var(--home-gold)) 76%, var(--home-paper)) 0%, color-mix(in srgb, var(--tile-accent, var(--home-gold)) 62%, var(--home-cream)) 100%) !important;
  overflow: hidden;
}
#homeScreen .chapter-row > * {
  position: relative;
  z-index: 1;
}
#homeScreen .chapter-row .ch-surface {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  opacity: .36;
  transform: translateX(var(--crater-shift, 0));
}
#homeScreen .chapter-row .crater-fill {
  fill: rgba(0,0,0,.08);
}
#homeScreen .chapter-row .crater-rim {
  fill: none;
  stroke: rgba(0,0,0,.32);
  stroke-width: 4;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
#homeScreen .chapter-row .crater-cut {
  fill: rgba(255,255,255,.12);
  stroke: rgba(0,0,0,.18);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
#homeScreen .chapter-row .crater-scar {
  fill: none;
  stroke: rgba(0,0,0,.24);
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
#homeScreen .chapter-row .crater-scar--short {
  stroke-width: 2;
  opacity: .65;
}
:root[data-ui-palette="mono"] #homeScreen .chapter-row {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--home-gold) 88%, #fff) 0%, var(--home-gold) 54%, color-mix(in srgb, var(--home-gold) 72%, var(--home-ink)) 100%) !important;
}
:root[data-ui-palette="mono"] #homeScreen .chapter-row .ch-surface {
  opacity: .43;
}
#homeScreen .chapter-row::after {
  display: none;
}
#homeScreen .chapter-row:nth-child(4n+2)::after,
#homeScreen .chapter-row:nth-child(4n+4)::after {
  display: none;
}
#homeScreen .chapter-row:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 6px 6px 0 rgba(0,0,0,.68), inset 0 -7px 0 rgba(17,19,15,.08) !important;
}
#homeScreen .panel-kicker {
  background: var(--home-ink);
  color: var(--home-paper);
}
#homeScreen .ch-big {
  display: none;
}
#homeScreen .ch-title,
#homeScreen .ch-progress,
#homeScreen .ch-sub {
  color: var(--home-ink);
}
#homeScreen .ch-meter {
  border-color: var(--home-ink);
  background: rgba(255,255,255,.32);
}
#homeScreen .ch-meter span {
  background: var(--home-ink);
}

:root[data-ui-palette="minter"] #homeScreen {
  background:
    radial-gradient(circle at 74% 18%, color-mix(in srgb, var(--home-gold) 18%, transparent), transparent 22%),
    radial-gradient(circle at 12% 80%, color-mix(in srgb, var(--home-teal) 15%, transparent), transparent 28%),
    linear-gradient(180deg, #050606 0%, #020303 100%);
}
:root[data-ui-palette="minter"] #homeScreen .game-title {
  color: var(--home-gold);
  text-shadow:
    0 7px 0 var(--home-orange),
    0 12px 0 var(--home-blue),
    0 0 28px color-mix(in srgb, var(--home-teal) 48%, transparent);
}
:root[data-ui-palette="minter"] #homeScreen::before {
  background: var(--home-blue);
  opacity: .82;
}
:root[data-ui-palette="minter"] #homeScreen::after {
  display: none;
}
:root[data-ui-palette="minter"] #homeScreen .home-vector-lines path {
  stroke: var(--home-teal);
}
:root[data-ui-palette="minter"] #homeScreen .home-actions .btn-play::after,
:root[data-ui-palette="minter"] #homeScreen .home-actions .btn-settings::after,
:root[data-ui-palette="minter"] #homeScreen .chapter-row::after {
  opacity: .3;
}

@media (max-width: 900px) {
  #homeScreen #chapterList {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  #homeScreen {
    padding-top: 1rem;
  }
  #homeScreen::before {
    width: 86vw;
    left: -42vw;
    bottom: -36vw;
  }
  #homeScreen::after {
    display: none;
  }
  #homeScreen .home-command {
    grid-template-columns: 1fr;
    gap: 1.4rem;
    margin-bottom: 2rem;
  }
  #homeScreen .game-title {
    font-size: clamp(3.5rem, 18vw, 5.4rem);
  }
  #homeScreen .vector-logo {
    width: min(88vw, 430px);
  }
  #homeScreen #chapterList {
    grid-template-columns: 1fr;
  }
  #homeScreen .chapter-row {
    min-height: 180px;
  }
}

/* Vector Cabinet OS: mobile portrait-only UI pass. */
:root {
  --cab-bg: #050909;
  --cab-bg-2: #071514;
  --cab-panel: rgba(5, 15, 15, 0.82);
  --cab-cyan: #42f5ff;
  --cab-yellow: #ffe66d;
  --cab-green: #7cff6b;
  --cab-magenta: #ff3fa4;
  --cab-orange: #ff6a00;
  --cab-text: #d9f7ef;
  --cab-muted: rgba(217, 247, 239, .68);
}

html,
body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% -10%, rgba(66,245,255,.13), transparent 38%),
    linear-gradient(180deg, #020505 0%, var(--cab-bg) 44%, #020303 100%) !important;
}

body {
  display: flex;
  justify-content: center;
}

#appShell {
  width: min(100vw, 430px);
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background:
    linear-gradient(rgba(66,245,255,.045) 1px, transparent 1px) 0 0 / 100% 4px,
    radial-gradient(circle at 18% 16%, rgba(255,230,109,.12), transparent 28%),
    radial-gradient(circle at 85% 8%, rgba(255,63,164,.10), transparent 30%),
    linear-gradient(180deg, rgba(7,21,20,.98), rgba(3,7,7,.98)) !important;
  box-shadow: 0 0 0 1px rgba(66,245,255,.2), 0 0 42px rgba(0,0,0,.86);
}

#appShell::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  background:
    linear-gradient(rgba(255,255,255,.035) 50%, rgba(0,0,0,.12) 50%) 0 0 / 100% 4px,
    radial-gradient(ellipse at center, transparent 48%, rgba(0,0,0,.48) 100%);
  mix-blend-mode: screen;
  opacity: .46;
}

#portraitGate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  place-items: center;
  padding: 2rem;
  background: #020505;
  color: var(--cab-cyan);
  font: 700 1rem/1.4 "IBM Plex Mono", monospace;
  letter-spacing: .18em;
  text-align: center;
}
#portraitGate span {
  display: block;
  margin-top: .8rem;
  color: var(--cab-yellow);
}

#screenLayer,
.screen {
  width: 100%;
}

.screen {
  min-height: 100dvh;
  overflow-y: auto;
  scrollbar-width: none;
}
.screen::-webkit-scrollbar { display: none; }

#homeScreen,
#selectScreen,
#settingsScreen,
#gameScreen {
  padding: max(.8rem, env(safe-area-inset-top)) .78rem max(.85rem, env(safe-area-inset-bottom)) !important;
  background:
    linear-gradient(rgba(66,245,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(66,245,255,.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 8%, rgba(66,245,255,.11), transparent 34%) !important;
  background-size: 100% 5px, 32px 32px, auto !important;
}

#homeScreen::before,
#homeScreen::after {
  display: none !important;
}

#homeScreen .home-vector-lines {
  display: none !important;
}

#homeScreen .home-command {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: .65rem !important;
  margin: 0 0 .75rem !important;
  padding: 0 !important;
}

#homeScreen .title-wrap {
  padding: 0 !important;
}

#homeScreen .vector-logo {
  width: 100% !important;
  max-width: 100% !important;
}

#homeScreen .game-title {
  font-size: clamp(2.65rem, 18.5vw, 5.1rem) !important;
  color: var(--cab-cyan) !important;
  text-shadow: 0 0 14px rgba(66,245,255,.75), 0 0 34px rgba(66,245,255,.25) !important;
}

#homeScreen .home-actions {
  display: grid !important;
  grid-template-columns: 1.35fr 1fr !important;
  gap: .65rem !important;
  width: 100% !important;
}

#homeScreen .home-actions .btn-play,
#homeScreen .home-actions .btn-settings,
.sector-launch,
.select-back,
#gameScreen .controls button,
#gameScreen .back-btn {
  min-height: 3.1rem;
  border: 1px solid currentColor !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent) -160% 0 / 80% 100% no-repeat,
    rgba(5,15,15,.78) !important;
  color: var(--cab-yellow) !important;
  box-shadow: inset 0 0 0 1px rgba(255,230,109,.16), 0 0 18px rgba(255,230,109,.16) !important;
  font: 700 .92rem/1 "IBM Plex Mono", monospace !important;
  letter-spacing: .16em !important;
  animation: cabinetSweep 4s linear infinite;
}

#homeScreen .home-actions .btn-settings,
.select-back,
#gameScreen .back-btn,
#gameScreen .controls button {
  color: var(--cab-cyan) !important;
  box-shadow: inset 0 0 0 1px rgba(66,245,255,.16), 0 0 14px rgba(66,245,255,.14) !important;
}

@keyframes cabinetSweep {
  0%, 52% { background-position: -160% 0, 0 0; }
  72%, 100% { background-position: 260% 0, 0 0; }
}

.neon-panel,
.ui-panel,
#gridWrap {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--tile-accent, var(--cab-cyan)) 88%, transparent) !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 34%),
    var(--cab-panel) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.045),
    0 0 18px color-mix(in srgb, var(--tile-accent, var(--cab-cyan)) 24%, transparent) !important;
}

.neon-panel::before,
.ui-panel::before,
#gridWrap::before {
  content: attr(data-panel-label);
  position: absolute;
  top: .55rem;
  left: .65rem;
  color: color-mix(in srgb, var(--tile-accent, var(--cab-cyan)) 92%, #fff);
  font: 700 .58rem/1 "IBM Plex Mono", monospace;
  letter-spacing: .18em;
  opacity: .9;
}

#homeScreen .campaign-shell {
  width: 100% !important;
  gap: .65rem !important;
}

#homeScreen .campaign-rail {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  padding: .55rem .7rem !important;
  border: 1px solid var(--cab-cyan) !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%) !important;
  background: rgba(5,15,15,.78) !important;
  color: var(--cab-green) !important;
  box-shadow: 0 0 14px rgba(66,245,255,.16) !important;
  font: 700 .78rem/1 "IBM Plex Mono", monospace;
}

#homeScreen #chapterList {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: .7rem !important;
}

.sector-map-panel {
  min-height: 335px;
  padding: 2.15rem .85rem .8rem;
  --tile-accent: var(--cab-cyan);
}

.sector-map-field {
  position: relative;
  height: 285px;
  background:
    linear-gradient(transparent 0 87%, rgba(66,245,255,.18) 88% 89%, transparent 90%) 0 0 / 100% 38px,
    linear-gradient(90deg, transparent 0 90%, rgba(66,245,255,.13) 91% 92%, transparent 93%) 0 0 / 42px 100%,
    radial-gradient(circle at center, rgba(66,245,255,.08), transparent 70%);
  overflow: hidden;
}

.sector-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.sector-links line {
  stroke: rgba(66,245,255,.58);
  stroke-width: .62;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 5px rgba(66,245,255,.45));
}
.sector-links line.is-complete {
  stroke: rgba(255,230,109,.9);
  stroke-dasharray: 4 4;
  animation: routeDash 5s linear infinite;
}
@keyframes routeDash { to { stroke-dashoffset: -40; } }

.sector-node {
  position: absolute;
  left: var(--node-x);
  top: var(--node-y);
  width: 4.15rem;
  height: 4.15rem;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--tile-accent);
  cursor: pointer;
  isolation: isolate;
}
.sector-node::before,
.sector-node::after {
  content: '';
  position: absolute;
  inset: .18rem;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  background: rgba(5,15,15,.88);
  border: 1px solid currentColor;
  box-shadow: 0 0 14px color-mix(in srgb, currentColor 42%, transparent);
  z-index: -1;
}
.sector-node::after {
  inset: -.1rem;
  opacity: .22;
  background: currentColor;
  filter: blur(9px);
}
.sector-node span {
  font: 700 1.15rem/1 "IBM Plex Mono", monospace;
  letter-spacing: .08em;
  text-shadow: 0 0 10px currentColor;
}
.sector-node i {
  position: absolute;
  bottom: .5rem;
  font: 700 .45rem/1 "IBM Plex Mono", monospace;
  opacity: .82;
}
.sector-node.is-selected {
  color: var(--cab-green);
  animation: nodePulse 1.8s ease-in-out infinite;
}
.sector-node.is-selected::before {
  box-shadow: 0 0 0 8px rgba(124,255,107,.08), 0 0 22px rgba(124,255,107,.54);
}
@keyframes nodePulse {
  50% { transform: translate(-50%, -50%) scale(1.055); }
}

.sector-detail {
  padding: 2.15rem 1rem 1rem;
  --tile-accent: var(--cab-green);
}
.sector-detail__kicker,
.sector-stat span,
.sector-note span {
  color: var(--cab-green);
  font: 700 .66rem/1 "IBM Plex Mono", monospace;
  letter-spacing: .18em;
}
.sector-detail h2 {
  margin: .45rem 0 1.05rem;
  color: var(--cab-text);
  font: 700 1.35rem/1.05 "IBM Plex Mono", monospace;
  letter-spacing: .08em;
}
.sector-stat {
  display: grid;
  gap: .28rem;
  padding: .72rem 0;
  border-top: 1px dotted rgba(124,255,107,.5);
}
.sector-stat b {
  color: var(--cab-yellow);
  font: 700 1.35rem/1 "IBM Plex Mono", monospace;
  letter-spacing: .12em;
}
.sector-note {
  padding: .85rem 0 .95rem;
  border-top: 1px dotted rgba(124,255,107,.5);
}
.sector-note p {
  margin: .5rem 0 0;
  color: var(--cab-text);
  font: 500 .83rem/1.45 "IBM Plex Mono", monospace;
}
.sector-launch {
  width: 100%;
}

.field-preview {
  padding: 2.15rem .75rem .75rem;
  --tile-accent: var(--cab-yellow);
}
.preview-board {
  display: grid;
  gap: 2px;
  padding: .4rem;
  border: 1px solid rgba(255,230,109,.36);
  background:
    linear-gradient(rgba(255,230,109,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(66,245,255,.09) 1px, transparent 1px),
    rgba(0,0,0,.24);
  background-size: 100% 18px, 18px 100%, auto;
}
.preview-row {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 2px;
}
.preview-cell {
  aspect-ratio: 1;
  border: 1px solid rgba(66,245,255,.16);
  background: rgba(66,245,255,.035);
}
.preview-wall { background: rgba(255,230,109,.28); border-color: rgba(255,230,109,.42); }
.preview-M { background: rgba(66,245,255,.72); }
.preview-H { clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); background: rgba(124,255,107,.72); }
.preview-C { background: rgba(255,230,109,.78); }
.preview-T { background: rgba(255,63,164,.72); }
.preview-P { background: rgba(255,106,0,.75); }
.preview-B { background: rgba(66,120,255,.75); }
.preview-O { background: rgba(255,136,68,.75); }
.preview-strip {
  display: flex;
  justify-content: space-between;
  margin-top: .55rem;
  color: var(--cab-yellow);
  font: 700 .62rem/1 "IBM Plex Mono", monospace;
  letter-spacing: .12em;
}

.sector-index {
  padding: 2rem .75rem .75rem;
  --tile-accent: var(--cab-cyan);
}
.sector-index-row {
  width: 100%;
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  gap: .4rem;
  padding: .28rem .2rem;
  border: 0;
  background: transparent;
  color: var(--tile-accent);
  text-align: left;
  font: 700 .73rem/1.1 "IBM Plex Mono", monospace;
  letter-spacing: .12em;
}
.sector-index-row b {
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sector-index-row.is-selected {
  color: var(--cab-green);
  text-shadow: 0 0 8px rgba(124,255,107,.6);
}

#selectScreen {
  display: flex !important;
  flex-direction: column;
  padding: max(.8rem, env(safe-area-inset-top)) .78rem max(.85rem, env(safe-area-inset-bottom)) !important;
}
.select-header {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 3rem;
  border-color: rgba(66,245,255,.8) !important;
  background: rgba(5,15,15,.82) !important;
  box-shadow: 0 0 16px rgba(66,245,255,.16) !important;
}
.select-header .game-title {
  color: var(--cab-cyan) !important;
  font-family: "IBM Plex Mono", monospace !important;
  letter-spacing: .1em !important;
}
.level-grid {
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .62rem !important;
}
.lvl-card {
  min-height: 8rem !important;
  padding: 1.55rem .65rem .65rem !important;
  background: rgba(5,15,15,.82) !important;
  border-color: rgba(66,245,255,.72) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 0 14px rgba(66,245,255,.13) !important;
}
.card-num {
  color: rgba(66,245,255,.16) !important;
  font-size: 3rem !important;
}
.card-name {
  color: var(--cab-text) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: .82rem !important;
}
.card-state {
  color: var(--cab-yellow) !important;
}

#gameScreen {
  padding: max(.6rem, env(safe-area-inset-top)) .65rem max(.65rem, env(safe-area-inset-bottom)) !important;
  justify-content: flex-start !important;
}
.game-stage {
  width: 100% !important;
  max-width: 100% !important;
  gap: .48rem !important;
  margin: 0 !important;
}
#gameScreen #hudLayer {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: .35rem !important;
}
#gameScreen .g-header,
#gameScreen .scoreboard {
  min-height: 2.25rem !important;
  padding: .4rem .55rem !important;
  border: 1px solid rgba(66,245,255,.65) !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)) !important;
  background: rgba(5,15,15,.76) !important;
  box-shadow: 0 0 12px rgba(66,245,255,.13) !important;
}
#gameScreen .g-header {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  gap: .5rem !important;
}
#gameScreen .g-lvl-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--cab-cyan) !important;
  font: 700 .72rem/1 "IBM Plex Mono", monospace !important;
  letter-spacing: .08em;
}
#gameScreen .scoreboard {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  color: var(--cab-yellow) !important;
}
#gameScreen .scoreboard * {
  color: var(--cab-yellow) !important;
  text-shadow: 0 0 8px rgba(255,230,109,.35);
}
#gameScreen .scoreboard .sc-item,
#gameScreen .scoreboard .sc-item strong,
#gameScreen .scoreboard .sc-stars {
  color: var(--cab-yellow) !important;
  text-shadow: 0 0 8px rgba(255,230,109,.35) !important;
}
#gameScreen .sc-item,
#gameScreen .sc-stars {
  font: 700 .66rem/1 "IBM Plex Mono", monospace !important;
  letter-spacing: .08em;
}
#gameScreen #gridWrap {
  width: 100% !important;
  max-width: 100% !important;
  padding: .3rem !important;
  border-color: rgba(66,245,255,.68) !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)) !important;
}
#gameScreen #hudLayerBottom {
  width: 100% !important;
  display: grid !important;
  gap: .38rem !important;
}
#eatRow {
  min-height: 1.15rem !important;
  padding: .2rem .3rem !important;
  border: 1px solid rgba(255,230,109,.48) !important;
  background: rgba(5,15,15,.68) !important;
}
#statusEl,
.kb-hint {
  min-height: 1rem;
  color: var(--cab-muted) !important;
  font: 600 .62rem/1.25 "IBM Plex Mono", monospace !important;
  letter-spacing: .08em;
}
#gameScreen .controls {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: .45rem !important;
}
#gameScreen .controls button {
  min-height: 2.35rem !important;
  font-size: .65rem !important;
}

@media (orientation: landscape) and (max-height: 520px) {
  #portraitGate {
    display: grid;
  }
  #appShell {
    visibility: hidden;
    pointer-events: none;
  }
}

@media (orientation: landscape) and (pointer: coarse) {
  #portraitGate {
    display: grid;
  }
  #appShell {
    visibility: hidden;
    pointer-events: none;
  }
}

@media (min-width: 700px) {
  body {
    align-items: flex-start;
    padding: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SPEC OVERRIDES — derived from space_mouse_ui_specifics_1_2_3.md
   Restraint-first redesign: one framing device per component,
   semantic colors (yellow=action, cyan=structure, lime=current, magenta=special),
   thin borders, no nested frames.
   ═════════════════════════════════════════════════════════════════ */

:root {
  --c-bg:        #05090B;
  --c-deep:      #081518;
  --c-panel:     rgba(8, 20, 24, 0.88);
  --c-cyan:      #63E8FF;
  --c-cyan-mute: rgba(99, 232, 255, 0.45);
  --c-cyan-grid: rgba(99, 232, 255, 0.18);
  --c-yellow:    #F4D85E;
  --c-yellow-mute: rgba(244, 216, 94, 0.55);
  --c-lime:      #98F26A;
  --c-magenta:   #E95AA6;
  --c-offwhite:  #EAF4EF;
  --c-disabled:  #46545A;
  --c-shadow:    rgba(0, 0, 0, 0.5);
}

/* ── Global tone ──────────────────────────── */
body {
  background: radial-gradient(ellipse at 50% 30%, #0a1820 0%, var(--c-bg) 70%) !important;
}

/* ── 1A: HOME — shrink logo, tighten spacing ── */
#homeScreen {
  padding: clamp(.65rem, 2.5vh, 1.4rem) 1rem 1rem !important;
  gap: .65rem !important;
}
/* Hide removed sections if they appear elsewhere */
.field-preview, .sector-index { display: none !important; }
#homeScreen .title-wrap::before { display: none !important; }
/* Vector logo width — controls height via aspect-ratio 1.98:1.
   Target: ~22% screen-height logo zone on 390px portrait.
   min(88vw, 480px): at 390px → 343px → h≈173px ≈ 19% of 932px */
#homeScreen .vector-logo {
  width: min(88vw, 480px) !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}
#homeScreen .game-title {
  font-size: clamp(1.85rem, 5.8vw, 4.2rem) !important;
  line-height: .92 !important;
  letter-spacing: .04em !important;
  color: var(--c-cyan) !important;
  text-shadow: none !important;
}

/* Strip all decorative pseudo-elements from home action buttons */
#homeScreen .home-actions .btn-play::before,
#homeScreen .home-actions .btn-play::after,
#homeScreen .home-actions .btn-settings::before,
#homeScreen .home-actions .btn-settings::after { display: none !important; }

/* ── 1B: PLAY dominant, OPTIONS subordinate ── */
#homeScreen .home-actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: .5rem !important;
  grid-template-columns: none !important;
  width: 100% !important;
}
#homeScreen .home-actions .btn-play {
  width: 84% !important;
  min-height: 52px !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  background: var(--c-yellow) !important;
  color: #1a1408 !important;
  border: 1px solid var(--c-yellow) !important;
  box-shadow: none !important;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)) !important;
  text-shadow: none !important;
  animation: none !important;
  letter-spacing: .2em !important;
}
#homeScreen .home-actions .btn-play:hover {
  filter: brightness(1.08);
}
#homeScreen .home-actions .btn-settings {
  width: 64% !important;
  min-height: 38px !important;
  font-size: .72rem !important;
  background: var(--c-panel) !important;
  border: 1px solid var(--c-cyan-mute) !important;
  color: var(--c-cyan) !important;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)) !important;
  box-shadow: none !important;
  animation: none !important;
  letter-spacing: .18em !important;
  text-shadow: none !important;
}
#homeScreen .home-actions .btn-settings:hover {
  border-color: var(--c-cyan) !important;
  background: rgba(99, 232, 255, .06) !important;
}

/* ── 1C: Campaign strip — thin status bar ── */
#homeScreen .campaign-shell {
  display: flex !important;
  flex-direction: column !important;
  gap: .5rem !important;
  grid-template-columns: none !important;
  width: 100% !important;
}
#homeScreen #chapterList {
  display: flex !important;
  flex-direction: column !important;
  gap: .5rem !important;
  grid-template-columns: none !important;
  width: 100% !important;
}
.campaign-rail {
  display: flex !important;
  writing-mode: horizontal-tb !important;
  text-orientation: initial !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: .5rem .9rem !important;
  min-height: 0 !important;
  height: clamp(32px, 4.2vh, 44px) !important;
  border: 1px solid var(--c-cyan-mute) !important;
  background: var(--c-panel) !important;
  color: var(--c-lime) !important;
  font: 600 .62rem/1 "IBM Plex Mono", monospace !important;
  letter-spacing: .22em !important;
  margin-bottom: 0 !important;
  clip-path: none !important;
  box-shadow: none !important;
}
.campaign-rail > span:last-child { color: var(--c-cyan) !important; }

/* ── 1D: Sector map — simpler frame, semantic node colors ── */
.sector-map-panel,
.sector-detail,
.field-preview,
.sector-index {
  border: 1px solid var(--c-cyan-mute) !important;
  background: var(--c-panel) !important;
  box-shadow: none !important;
}
/* sector-map-panel keeps ::before (shows "CAMPAIGN MAP" label); hide ::after (glow) */
.sector-map-panel::after,
.sector-detail::before,
.sector-detail::after,
.field-preview::before,
.field-preview::after,
.sector-index::before,
.sector-index::after { display: none !important; }
/* CAMPAIGN MAP label — styled slightly brighter */
.sector-map-panel::before {
  color: var(--c-cyan) !important;
  font: 700 .58rem/1 "IBM Plex Mono", monospace !important;
  letter-spacing: .22em !important;
  opacity: 1 !important;
  top: .55rem !important;
  left: .7rem !important;
}
.sector-map-panel { padding: 1.6rem .5rem .6rem !important; }

/* Sector map field height — scaled to viewport */
.sector-map-field { height: clamp(200px, 34vh, 285px) !important; }

/* sector node colors — STATE-DRIVEN, not chapter-driven.
   No border/background on the node itself; the ::before hex handles all visuals.
   We only override color (which feeds into ::before via currentColor) and layout. */
.sector-node {
  color: var(--c-cyan) !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .06rem !important;
}
.sector-node span {
  color: var(--c-cyan) !important;
  font: 700 .88rem/1 "Chakra Petch", monospace !important;
  letter-spacing: .04em !important;
  text-shadow: none !important;
  position: static !important;
}
.sector-node i {
  color: rgba(99, 232, 255, .75) !important;
  font: 600 .5rem/1 "IBM Plex Mono", monospace !important;
  font-style: normal !important;
  opacity: 1 !important;
  position: static !important;
  bottom: auto !important;
  letter-spacing: .04em !important;
}
.sector-node.is-complete {
  color: var(--c-yellow) !important;
}
.sector-node.is-complete span { color: var(--c-yellow) !important; }
.sector-node.is-complete i { color: rgba(244, 216, 94, .8) !important; }
.sector-node.is-selected {
  color: var(--c-lime) !important;
}
.sector-node.is-selected span { color: var(--c-lime) !important; }
.sector-node.is-selected i { color: rgba(152, 242, 106, .8) !important; }
.sector-links line {
  stroke: var(--c-cyan-mute) !important;
  stroke-width: .35 !important;
  opacity: .7 !important;
}
.sector-links line.is-complete {
  stroke: var(--c-yellow-mute) !important;
  opacity: .85 !important;
}

/* ── 1E: Selected sector panel — compact spec layout ── */
.sector-detail {
  padding: .7rem .9rem .8rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .3rem !important;
}
.sector-detail__kicker {
  font: 600 .58rem/1 "IBM Plex Mono", monospace !important;
  letter-spacing: .26em !important;
  color: var(--c-lime) !important;
  text-transform: uppercase !important;
  margin-bottom: 0 !important;
}
.sector-detail h2 {
  color: var(--c-offwhite) !important;
  font: 700 .92rem/1.05 "Chakra Petch", "IBM Plex Mono", monospace !important;
  letter-spacing: .08em !important;
  margin-bottom: 0 !important;
}
.sector-detail .sector-stat {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font: 600 .62rem/1 "IBM Plex Mono", monospace !important;
  letter-spacing: .12em !important;
  padding: .2rem 0 !important;
  border-top: 1px solid var(--c-cyan-grid) !important;
  margin-top: .15rem !important;
}
.sector-detail .sector-stat span { color: var(--c-cyan) !important; }
.sector-detail .sector-stat b { color: var(--c-yellow) !important; font-weight: 700 !important; }
.sector-detail .sector-launch {
  margin-top: .4rem !important;
  background: var(--c-yellow) !important;
  color: #1a1408 !important;
  border: 1px solid var(--c-yellow) !important;
  font: 700 .7rem/1 "IBM Plex Mono", monospace !important;
  padding: .5rem 1rem !important;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)) !important;
  letter-spacing: .14em !important;
  width: 100% !important;
}
.sector-detail .sector-launch:hover {
  filter: brightness(1.08);
}

/* Sector index rows — slim, no heavy fills */
.sector-index { padding: .5rem !important; }
.sector-index-row {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: rgba(234, 244, 239, .7) !important;
  padding: .42rem .65rem !important;
  font: 600 .7rem/1 "IBM Plex Mono", monospace !important;
  letter-spacing: .14em !important;
}
.sector-index-row span { color: var(--c-cyan) !important; }
.sector-index-row b { color: var(--c-offwhite) !important; font-weight: 600 !important; }
.sector-index-row.is-selected {
  border-color: var(--c-lime) !important;
  background: rgba(152, 242, 106, .05) !important;
}
.sector-index-row.is-selected span { color: var(--c-lime) !important; }
.sector-index-row:hover {
  border-color: var(--c-cyan-mute) !important;
  background: rgba(99, 232, 255, .04) !important;
}

/* Field preview — thin, secondary */
.field-preview { padding: .55rem !important; }
.field-preview .preview-strip {
  font: 600 .58rem/1 "IBM Plex Mono", monospace !important;
  letter-spacing: .2em !important;
  color: var(--c-cyan) !important;
}

/* ── 2A: STAGE SELECT — slim header ── */
#selectScreen { padding: 1.2rem 1rem 1rem !important; }
#selectScreen .select-header {
  border: none !important;
  background: transparent !important;
  padding: 0 0 .55rem !important;
  margin-bottom: .55rem !important;
  border-bottom: 1px solid var(--c-cyan-grid) !important;
  display: flex !important;
  align-items: center !important;
  gap: .75rem !important;
}
#selectScreen .select-header::before,
#selectScreen .select-header::after { display: none !important; }
#selectScreen .select-back {
  background: var(--c-panel) !important;
  border: 1px solid var(--c-cyan-mute) !important;
  color: var(--c-cyan) !important;
  padding: .35rem .6rem !important;
  min-width: 0 !important;
  font: 700 .65rem/1 "IBM Plex Mono", monospace !important;
  letter-spacing: .16em !important;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)) !important;
}
#selectScreen .title-wrap::before { display: none !important; }
#selectScreen .game-title {
  font-size: clamp(.95rem, 3.5vw, 1.2rem) !important;
  color: var(--c-offwhite) !important;
  letter-spacing: .14em !important;
  text-align: left !important;
  text-shadow: none !important;
}
/* Sector kicker shown next to title via app.js (we'll add a .select-kicker) */
.select-kicker {
  display: inline-block;
  color: var(--c-lime);
  font: 700 .68rem/1 "IBM Plex Mono", monospace;
  letter-spacing: .2em;
  margin-right: .6rem;
}

/* ── 2B: STAGE LIST — replace card grid with rows ── */
.level-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: .55rem !important;
  grid-template-columns: none !important;
  padding: 0 .25rem !important;
}
/* Hide legacy card markup */
.lvl-card.legacy-card { display: none !important; }
/* New stage row */
.stage-row {
  display: grid !important;
  grid-template-columns: 28px 44px 1fr auto auto !important;
  align-items: center !important;
  gap: .65rem !important;
  padding: .65rem .8rem !important;
  background: var(--c-panel) !important;
  border: 1px solid var(--c-cyan-mute) !important;
  color: var(--c-offwhite) !important;
  cursor: pointer;
  min-height: 64px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: background .12s ease, border-color .12s ease;
}
.stage-row:hover { background: rgba(99, 232, 255, .05) !important; }
.stage-row__marker {
  color: var(--c-lime);
  font: 700 .9rem/1 "Chakra Petch", monospace;
  text-align: center;
  opacity: 0;
}
.stage-row__node {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(99, 232, 255, .08);
  border: 1.5px solid var(--c-cyan);
  color: var(--c-cyan);
  font: 700 .82rem/1 "Chakra Petch", monospace;
  letter-spacing: .04em;
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
}
.stage-row__title {
  font: 600 .82rem/1.1 "Chakra Petch", "IBM Plex Mono", monospace;
  letter-spacing: .06em;
  color: var(--c-offwhite);
  text-transform: uppercase;
}
.stage-row__par {
  font: 600 .66rem/1 "IBM Plex Mono", monospace;
  letter-spacing: .16em;
  color: var(--c-cyan);
  text-align: right;
  min-width: 3.2rem;
}
.stage-row__result {
  font: 700 .76rem/1 "IBM Plex Mono", monospace;
  letter-spacing: .12em;
  color: rgba(234, 244, 239, .35);
  text-align: right;
  min-width: 3.4rem;
}
/* States */
.stage-row.is-current {
  border-color: var(--c-lime) !important;
  background: rgba(152, 242, 106, .04) !important;
}
.stage-row.is-current .stage-row__marker { opacity: 1; }
.stage-row.is-current .stage-row__node {
  border-color: var(--c-lime);
  color: var(--c-lime);
  background: rgba(152, 242, 106, .12);
}
.stage-row.is-complete .stage-row__node {
  border-color: var(--c-yellow);
  color: var(--c-yellow);
  background: rgba(244, 216, 94, .08);
}
.stage-row.is-complete .stage-row__result { color: var(--c-yellow); }
.stage-row.is-locked {
  border-color: var(--c-disabled) !important;
  opacity: .55;
  pointer-events: none;
}
.stage-row.is-locked .stage-row__node {
  border-color: var(--c-disabled);
  color: var(--c-disabled);
  background: transparent;
}
.stage-row.is-locked .stage-row__result { color: var(--c-disabled); }
.stage-row__result.is-next { color: var(--c-lime) !important; }
.stage-row__result.is-new { color: var(--c-magenta) !important; }

/* Stage list footer count */
.stage-footer {
  margin-top: .65rem !important;
  padding: .45rem .8rem !important;
  border: 1px solid var(--c-cyan-grid) !important;
  background: var(--c-panel) !important;
  color: var(--c-cyan) !important;
  font: 600 .62rem/1 "IBM Plex Mono", monospace !important;
  letter-spacing: .2em !important;
  text-align: center !important;
}

/* ── 3A: GAMEPLAY — compress HUD ── */
#gameScreen .g-header,
#gameScreen .scoreboard {
  min-height: 0 !important;
  padding: .35rem .6rem !important;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)) !important;
  border-color: var(--c-cyan-mute) !important;
  background: var(--c-panel) !important;
  box-shadow: none !important;
}
#gameScreen .g-header::before,
#gameScreen .g-header::after,
#gameScreen .scoreboard::before,
#gameScreen .scoreboard::after { display: none !important; }
#gameScreen .g-header {
  display: grid !important;
  grid-template-columns: 36px 1fr !important;
  gap: .5rem !important;
  align-items: center !important;
}
#gameScreen .back-btn {
  width: 32px; height: 32px;
  min-width: 0 !important;
  border: 1px solid var(--c-cyan-mute) !important;
  background: var(--c-panel) !important;
  color: var(--c-cyan) !important;
  padding: 0 !important;
  font: 700 .8rem/1 "IBM Plex Mono", monospace !important;
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
}
#gameScreen .g-lvl-name {
  color: var(--c-offwhite) !important;
  font: 700 .8rem/1.05 "Chakra Petch", monospace !important;
  letter-spacing: .12em !important;
  text-align: left !important;
  text-transform: uppercase;
}
#gameScreen .g-lvl-name .g-lvl-stage {
  color: var(--c-yellow);
  margin-right: .35rem;
}
#gameScreen .scoreboard {
  margin-top: .35rem !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  align-items: center !important;
}
#gameScreen .scoreboard,
#gameScreen .scoreboard * {
  color: var(--c-cyan) !important;
  text-shadow: none !important;
  font: 600 .66rem/1 "IBM Plex Mono", monospace !important;
  letter-spacing: .14em !important;
}
#gameScreen .scoreboard .sc-item strong {
  color: var(--c-yellow) !important;
  font-weight: 700 !important;
}
#gameScreen .scoreboard .sc-stars {
  color: var(--c-yellow) !important;
  text-align: right;
}
#gameScreen #hudLayer {
  gap: 0 !important;
  margin-bottom: .35rem !important;
}

/* Board — slightly more room, simpler frame */
#gameScreen #gridWrap {
  border-color: var(--c-cyan-mute) !important;
  background: var(--c-deep) !important;
  box-shadow: 0 0 0 1px rgba(99, 232, 255, .08) inset !important;
}
/* Kill the legacy corner-bracket glyphs (┌ ┐ └ ┘) that floated as decoration */
#gameScreen #gridWrap::before,
#gameScreen #gridWrap::after,
#gameScreen #gridWrap > .corner-tl,
#gameScreen #gridWrap > .corner-tr,
#gameScreen #gridWrap > .corner-bl,
#gameScreen #gridWrap > .corner-br { display: none !important; content: none !important; }

/* Objective strip */
.objective-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .35rem .7rem;
  margin-top: .35rem;
  border: 1px solid var(--c-cyan-grid);
  background: var(--c-panel);
  color: var(--c-cyan);
  font: 600 .62rem/1 "IBM Plex Mono", monospace;
  letter-spacing: .26em;
  text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
.objective-strip::before { content: '◆'; opacity: .6; font-size: .55rem; }

/* ── 3B: GAMEPLAY — control button hierarchy ── */
#gameScreen #hudLayerBottom { gap: .35rem !important; }
#gameScreen .controls {
  display: grid !important;
  grid-template-columns: 1fr 1.3fr 1fr !important;
  gap: .45rem !important;
  margin-top: .35rem !important;
}
#gameScreen .controls button {
  min-height: 44px !important;
  font: 700 .72rem/1 "IBM Plex Mono", monospace !important;
  letter-spacing: .18em !important;
  padding: 0 .5rem !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
#gameScreen #undoBtn {
  background: var(--c-panel) !important;
  border: 1px solid var(--c-cyan-mute) !important;
  color: var(--c-cyan) !important;
  text-shadow: none !important;
}
#gameScreen #resetBtn {
  background: var(--c-yellow) !important;
  border: 1px solid var(--c-yellow) !important;
  color: #1a1408 !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}
#gameScreen #resetBtn:hover { filter: brightness(1.08); }
#gameScreen #hintBtn {
  background: rgba(99, 232, 255, .12) !important;
  border: 1px solid var(--c-cyan) !important;
  color: var(--c-cyan) !important;
  text-shadow: none !important;
}
#gameScreen #hintBtn:hover {
  background: rgba(99, 232, 255, .2) !important;
}

/* Footer hint — readable */
#gameScreen .kb-hint {
  color: rgba(99, 232, 255, .65) !important;
  font: 600 .58rem/1.2 "IBM Plex Mono", monospace !important;
  letter-spacing: .18em !important;
  opacity: 1 !important;
  text-align: center !important;
  padding-top: .3rem !important;
}

/* eatRow + objective strip occupy the SAME slot — only one shows at a time.
   Style them identically so the layout never shifts when toggling. */
#gameScreen #eatRow,
#gameScreen .objective-strip {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .55rem !important;
  min-height: 30px !important;
  padding: .35rem .8rem !important;
  margin-top: .35rem !important;
  border: 1px solid var(--c-cyan-grid) !important;
  background: var(--c-panel) !important;
  color: var(--c-cyan) !important;
  font: 600 .62rem/1 "IBM Plex Mono", monospace !important;
  letter-spacing: .26em !important;
  text-transform: uppercase !important;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)) !important;
}
#gameScreen #eatRow:empty { display: none !important; }
#gameScreen #eatRow .eslot {
  width: 18px !important;
  height: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--c-yellow-mute) !important;
  background: transparent !important;
  color: var(--c-yellow) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px)) !important;
}
#gameScreen #eatRow .eslot.on {
  background: var(--c-yellow) !important;
  color: #1a1408 !important;
  border-color: var(--c-yellow) !important;
}
/* Flash punctuating the last cheese collection — bright pop then settle. */
#gameScreen #eatRow .eslot.flash {
  animation: eslotFlash .52s ease-out;
}
@keyframes eslotFlash {
  0%   { transform: scale(1);   background: var(--c-yellow); box-shadow: 0 0 0 0 transparent; }
  18%  { transform: scale(1.85); background: #ffffff;        box-shadow: 0 0 22px 8px rgba(244, 216, 94, .85); color:#fff !important; }
  55%  { transform: scale(1.25); background: #ffe89c;        box-shadow: 0 0 14px 4px rgba(244, 216, 94, .55); }
  100% { transform: scale(1);   background: var(--c-yellow); box-shadow: 0 0 0 0 transparent; }
}
/* Wipe-in transition for the objective strip when it replaces the eat row.
   Uses a mask-image gradient that animates a sharp edge from left to right. */
#gameScreen .objective-strip.wipe-in {
  animation: objectiveWipeIn .55s cubic-bezier(.20,.75,.30,1);
}
@keyframes objectiveWipeIn {
  0%   { -webkit-mask-image: linear-gradient(to right, #000 0%,   transparent 0%);
                 mask-image: linear-gradient(to right, #000 0%,   transparent 0%); }
  100% { -webkit-mask-image: linear-gradient(to right, #000 100%, transparent 100%);
                 mask-image: linear-gradient(to right, #000 100%, transparent 100%); }
}

/* statusEl tone alignment */
#statusEl { color: rgba(234, 244, 239, .55) !important; }

/* Hide the legacy vector flight deck lines on home for cleaner look */
#homeScreen .home-vector-lines { opacity: .35 !important; }

/* Reduce fx-grid intensity to spec subtle grid */
#fxLayer .fx-grid { opacity: .5 !important; }
/* Kill the cyan grid background entirely on the main menu (three.js scene
   already provides its own backdrop). */
#appShell[data-screen="home"] #fxLayer .fx-grid { display: none !important; }
#appShell[data-screen="home"] #fxLayer .fx-stars { display: none !important; }

/* ═══ SPEC OVERRIDES END ═══ */

/* ──────────────────────────────────────────────────────────────
   PORTRAIT-MOBILE CABINET FRAME
   Lock the entire app to a portrait phone aspect (430 × 932 max)
   and centre it both horizontally and vertically on the page so
   it reads as a single arcade cabinet on any viewport.
   ─────────────────────────────────────────────────────────── */
html, body {
  height: 100%;
  margin: 0;
}
body {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
  min-height: 100dvh !important;
  padding: 0 !important;
}
#appShell {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: min(100vw, 430px) !important;
  height: min(100dvh, 932px) !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  margin: 0 auto !important;
  flex: 0 0 auto !important;
  border-radius: 14px;
  /* Keep the box-shadow / inner glow from earlier rules */
}
/* Three.js menu canvas should fill the cabinet, not the whole page */
#threeMenuContainer { inset: 0 !important; }

/* The inner layers used to be position:fixed (so they spanned the entire
   viewport). Switch them to position:absolute so they're constrained by
   #appShell — keeping screens, FX, and modals inside the portrait cabinet. */
#screenLayer, #fxLayer, #modalLayer {
  position: absolute !important;
  inset: 0 !important;
}
/* Modals themselves were also position:fixed (full-viewport). Lock them to
   their absolute-positioned #modalLayer parent so the dark wash + content
   stays inside the cabinet outline, matching the aspect ratio. */
#winOverlay,
#genOverlay,
#shareToast {
  position: absolute !important;
  inset: 0 !important;
}
#shareToast {
  /* Toast wasn't fullscreen — preserve its bottom-centred chip layout. */
  inset: auto auto 6% 50% !important;
  transform: translateX(-50%);
}

/* Kill the cyan scanline pattern (both the appShell background gradient and
   the ::before CRT overlay). Keep the radial color washes + base gradient. */
#appShell {
  background:
    radial-gradient(circle at 18% 16%, rgba(255,230,109,.12), transparent 28%),
    radial-gradient(circle at 85% 8%, rgba(255,63,164,.10), transparent 30%),
    linear-gradient(180deg, rgba(7,21,20,.98), rgba(3,7,7,.98)) !important;
}
#appShell::before { display: none !important; }

/* Each screen also paints its OWN scanline + vertical grid. Strip those too
   so only the cabinet's gradient + radial washes remain. */
#homeScreen,
#selectScreen,
#settingsScreen,
#gameScreen {
  background:
    radial-gradient(circle at 50% 8%, rgba(66,245,255,.10), transparent 34%) !important;
  background-size: auto !important;
}

/* ──────────────────────────────────────────────────────────────
   SETTINGS / SECONDARY-MENU VECTOR LOOK
   Match the three.js menu aesthetic: thin cyan chamfered frames,
   monospace caps, additive glow, generous touch targets.
   ────────────────────────────────────────────────────────────*/
#settingsScreen .settings-list {
  max-width: none !important;
  gap: .55rem !important;
  padding: .25rem !important;
}
#settingsScreen .settings-row,
#settingsScreen .settings-palette,
#settingsScreen .btn-settings {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .65rem !important;
  width: 100% !important;
  min-height: 52px !important;
  padding: .85rem 1.05rem !important;
  border: 1.5px solid var(--c-cyan-mute) !important;
  background: rgba(8, 20, 24, 0.55) !important;
  color: var(--c-cyan) !important;
  font: 700 .78rem/1 "IBM Plex Mono", monospace !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 8px rgba(99, 232, 255, .35) !important;
  box-shadow:
    inset 0 0 0 1px rgba(99, 232, 255, .08),
    0 0 18px rgba(99, 232, 255, .12) !important;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)) !important;
  cursor: pointer !important;
  outline: none !important;
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
}
#settingsScreen .settings-row::before,
#settingsScreen .settings-palette::before,
#settingsScreen .btn-settings::before { display: none !important; }
#settingsScreen .settings-row::after,
#settingsScreen .settings-palette::after,
#settingsScreen .btn-settings::after { display: none !important; }
#settingsScreen .settings-row:hover,
#settingsScreen .settings-palette:hover,
#settingsScreen .btn-settings:hover {
  background: rgba(99, 232, 255, .07) !important;
  border-color: var(--c-cyan) !important;
}
#settingsScreen .settings-row:focus,
#settingsScreen .settings-row:focus-within,
#settingsScreen .settings-palette:focus,
#settingsScreen .btn-settings:focus,
.settings-row.kb-focus,
.settings-palette.kb-focus,
.btn-settings.kb-focus {
  background: rgba(99, 232, 255, .12) !important;
  border-color: var(--c-lime) !important;
  color: var(--c-lime) !important;
  box-shadow:
    inset 0 0 0 1px rgba(152, 242, 106, .35),
    0 0 22px rgba(152, 242, 106, .35) !important;
}
#settingsScreen .settings-row span {
  color: inherit !important;
  font: inherit !important;
}
#settingsScreen .settings-palette-title {
  color: inherit !important;
  font: inherit !important;
  letter-spacing: .18em !important;
  margin-right: auto !important;
}
#settingsScreen .palette-picker {
  display: flex !important;
  gap: .45rem !important;
  flex-wrap: wrap !important;
}
/* Custom vector-style checkbox indicator. Hide the native checkbox and use a
   small framed square that flips to filled when checked. */
#settingsScreen .settings-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  border: 1.5px solid currentColor !important;
  background: transparent !important;
  cursor: pointer;
  flex: 0 0 auto;
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px));
  transition: background .12s ease;
}
#settingsScreen .settings-row input[type="checkbox"]:checked {
  background: var(--c-cyan) !important;
  box-shadow: 0 0 10px rgba(99, 232, 255, .55) !important;
}
#settingsScreen .settings-row.kb-focus input[type="checkbox"]:checked {
  background: var(--c-lime) !important;
  box-shadow: 0 0 10px rgba(152, 242, 106, .65) !important;
}
#settingsScreen .btn-settings {
  justify-content: center !important;
  color: var(--c-yellow) !important;
  border-color: var(--c-yellow-mute) !important;
  text-shadow: 0 0 8px rgba(244, 216, 94, .4) !important;
  box-shadow:
    inset 0 0 0 1px rgba(244, 216, 94, .12),
    0 0 18px rgba(244, 216, 94, .15) !important;
}
#settingsScreen .btn-settings:hover {
  background: rgba(244, 216, 94, .08) !important;
  border-color: var(--c-yellow) !important;
}
#settingsScreen .select-header {
  border-bottom: 1px solid var(--c-cyan-mute) !important;
}
#settingsScreen .select-back {
  border: 1.5px solid var(--c-cyan-mute) !important;
  background: rgba(8, 20, 24, 0.55) !important;
  color: var(--c-cyan) !important;
  font: 700 .72rem/1 "IBM Plex Mono", monospace !important;
  letter-spacing: .16em !important;
  padding: .55rem .95rem !important;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)) !important;
  cursor: pointer !important;
  outline: none !important;
}
#settingsScreen .select-back:hover,
#settingsScreen .select-back:focus,
.select-back.kb-focus {
  background: rgba(99, 232, 255, .10) !important;
  border-color: var(--c-cyan) !important;
}


/* ──────────────────────────────────────────────────────────────
   WIN MODAL — vector buttons
   Match the rest of the menu: chamfered borders, additive glow,
   bracketed monospace caps, dark interior. The order of buttons
   inside .win-actions is now [M]ENU · [R]EPLAY · [N]EXT.
   ────────────────────────────────────────────────────────────*/
#winOverlay .win-actions {
  gap: .7rem !important;
  margin-top: 1rem !important;
}
.vector-btn {
  font-family: "IBM Plex Mono", monospace !important;
  font-weight: 700 !important;
  font-size: .82rem !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: .55rem 1.05rem !important;
  background: rgba(8, 19, 22, .92) !important;
  border: 1px solid currentColor !important;
  border-radius: 0 !important;
  /* Chamfered corners — matches the three.js panels in the menu. */
  clip-path: polygon(
    8px 0, calc(100% - 8px) 0, 100% 8px,
    100% calc(100% - 8px), calc(100% - 8px) 100%,
    8px 100%, 0 calc(100% - 8px), 0 8px) !important;
  cursor: pointer !important;
  outline: none !important;
  transition: background .12s ease, box-shadow .12s ease,
              transform .08s ease, color .12s ease !important;
}
/* Colour roles */
.vector-btn.vec-menu   { color: #1A7F8A !important; }   /* Muted cyan — secondary */
.vector-btn.vec-replay { color: #9CFF4A !important; }   /* Acid lime — neutral action */
.vector-btn.vec-next   { color: #FFE84A !important;     /* Hot yellow — primary CTA */
                          background: rgba(58, 50, 23, .85) !important;
                          box-shadow: 0 0 14px rgba(255, 232, 74, .25),
                                      inset 0 0 12px rgba(255, 232, 74, .10) !important; }
.vector-btn:hover,
.vector-btn:focus {
  background: rgba(15, 36, 42, .92) !important;
  box-shadow: 0 0 14px currentColor,
              inset 0 0 12px rgba(255, 255, 255, .04) !important;
}
.vector-btn.vec-next:hover,
.vector-btn.vec-next:focus {
  background: rgba(80, 68, 24, .92) !important;
  box-shadow: 0 0 22px rgba(255, 232, 74, .55),
              inset 0 0 14px rgba(255, 232, 74, .18) !important;
}
.vector-btn:active { transform: translateY(1px) !important; }


/* ──────────────────────────────────────────────────────────────
   SHARED VECTOR PANEL
   Cyan chamfered frame used by win modal, tutorial card, and the
   out-of-resource modal. Same look as the three.js menu panels.
   ────────────────────────────────────────────────────────────*/
.vec-panel {
  background: rgba(8, 19, 22, .92) !important;
  border: 1px solid #44F6FF !important;
  box-shadow:
    0 0 20px rgba(68, 246, 255, .22),
    inset 0 0 18px rgba(68, 246, 255, .06) !important;
  clip-path: polygon(
    14px 0, calc(100% - 14px) 0, 100% 14px,
    100% calc(100% - 14px), calc(100% - 14px) 100%,
    14px 100%, 0 calc(100% - 14px), 0 14px) !important;
}

/* ──────────────────────────────────────────────────────────────
   TUTORIAL OVERLAY
   ────────────────────────────────────────────────────────────*/
#tutOverlay {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none;
  opacity: 0; transition: opacity .25s ease;
  z-index: 250;
  padding: 0 1rem 2rem;
}
#tutOverlay.show { opacity: 1; pointer-events: all; }
.tut-card {
  width: min(360px, 92%);
  padding: 1rem 1.1rem 1rem;
  color: #EAF4EF;
  font: 600 .8rem/1.45 "IBM Plex Mono", monospace;
  letter-spacing: .03em;
  position: relative;
  /* Inherit so the card stops capturing taps when its #tutOverlay
     parent loses the .show class (which sets pointer-events:none). */
  pointer-events: inherit;
}
.tut-kicker {
  color: #9CFF4A;
  font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.tut-title {
  color: #44F6FF;
  font-size: 1.45rem; font-weight: 800;
  letter-spacing: .08em;
  margin-bottom: .55rem;
  text-shadow: 0 0 14px rgba(68, 246, 255, .55);
}
.tut-body {
  color: #EAF4EF;
  font-size: .82rem; line-height: 1.5;
  letter-spacing: .04em;
  margin-bottom: .85rem;
}
.tut-actions {
  display: flex; gap: .55rem;
  justify-content: flex-end;
}

/* Pulsing reticle anchored to a board cell. The two rings counter-pulse
   so the indicator feels alive without being hectic. */
#tutReticle {
  position: fixed;            /* page-level since cellToScreen returns viewport coords */
  left: 0; top: 0;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 240;               /* under #tutOverlay (250), over the board */
  opacity: 0;
  transition: opacity .25s ease;
}
#tutReticle.show { opacity: 1; }
.tut-ring {
  position: absolute; left: 50%; top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.tut-ring-outer {
  width: 72px; height: 72px;
  border: 2px solid #FFE84A;
  box-shadow:
    0 0 24px rgba(255, 232, 74, .65),
    inset 0 0 10px rgba(255, 232, 74, .15);
  animation: tut-pulse-outer 1.6s ease-in-out infinite;
}
.tut-ring-inner {
  width: 44px; height: 44px;
  border: 2px solid #9CFF4A;
  box-shadow:
    0 0 18px rgba(156, 255, 74, .55),
    inset 0 0 8px rgba(156, 255, 74, .12);
  animation: tut-pulse-inner 1.6s ease-in-out infinite;
}
@keyframes tut-pulse-outer {
  0%   { transform: translate(-50%, -50%) scale(.86); opacity: 1;  }
  60%  { transform: translate(-50%, -50%) scale(1.22); opacity: .35; }
  100% { transform: translate(-50%, -50%) scale(.86); opacity: 1;  }
}
@keyframes tut-pulse-inner {
  0%   { transform: translate(-50%, -50%) scale(1.10); opacity: .55; }
  60%  { transform: translate(-50%, -50%) scale(.78);  opacity: 1;   }
  100% { transform: translate(-50%, -50%) scale(1.10); opacity: .55; }
}

/* ──────────────────────────────────────────────────────────────
   OUT-OF-RESOURCE MODAL  (rewarded ad / IAP gate)
   ────────────────────────────────────────────────────────────*/
#oorOverlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2, 5, 7, .82);
  pointer-events: none;
  opacity: 0; transition: opacity .25s ease;
  z-index: 260;
  padding: 0 1rem;
}
#oorOverlay.show { opacity: 1; pointer-events: all; }
.oor-card {
  width: min(420px, 92%);
  padding: 1.1rem 1.1rem 1rem;
  color: #EAF4EF;
  font: 600 .8rem/1.45 "IBM Plex Mono", monospace;
  text-align: center;
}
.oor-kicker {
  color: #FFE84A;
  font-size: .82rem; font-weight: 800;
  letter-spacing: .22em;
  margin-bottom: .65rem;
  text-shadow: 0 0 12px rgba(255, 232, 74, .45);
}
.oor-body {
  color: #EAF4EF;
  font-size: .78rem; line-height: 1.55;
  letter-spacing: .04em;
  margin-bottom: 1rem;
}
.oor-actions {
  display: flex; gap: .5rem;
  justify-content: center; flex-wrap: wrap;
}
#oorBuy {
  min-width: 18rem;
}

/* ──────────────────────────────────────────────────────────────
   HUD INVENTORY BADGES
   ────────────────────────────────────────────────────────────*/
#invBadges {
  position: absolute;
  top: .6rem; right: .6rem;
  display: flex; gap: .35rem;
  z-index: 30;
  pointer-events: none;
  font: 700 .7rem/1 "IBM Plex Mono", monospace;
  letter-spacing: .08em;
}
.inv-badge {
  background: rgba(8, 19, 22, .82);
  border: 1px solid #1A7F8A;
  color: #44F6FF;
  padding: .28rem .5rem;
  clip-path: polygon(
    6px 0, calc(100% - 6px) 0, 100% 6px,
    100% calc(100% - 6px), calc(100% - 6px) 100%,
    6px 100%, 0 calc(100% - 6px), 0 6px);
  display: flex; align-items: center; gap: .25rem;
}
.inv-badge.empty { color: #E95AA6; border-color: #6A1C56; }
.inv-badge.unlimited {
  color: #FFE84A; border-color: #FFE84A;
  box-shadow: 0 0 12px rgba(255,232,74,.35);
}

/* ──────────────────────────────────────────────────────────────
   GAME SCREEN — vector pass (Phase 7)
   Re-skins the existing HUD elements so the in-game UI matches
   the menu's vector-arcade language. No markup changes — class
   selectors target the existing IDs / classes with !important so
   we don't have to scrub the legacy panel CSS.
   ────────────────────────────────────────────────────────────*/

/* Header — back chip + stage name + tier badge */
#gameScreen .g-header {
  background: rgba(8, 19, 22, .92) !important;
  border: 1px solid #44F6FF !important;
  box-shadow:
    0 0 16px rgba(68, 246, 255, .22),
    inset 0 0 14px rgba(68, 246, 255, .06) !important;
  clip-path: polygon(
    12px 0, calc(100% - 12px) 0, 100% 12px,
    100% calc(100% - 12px), calc(100% - 12px) 100%,
    12px 100%, 0 calc(100% - 12px), 0 12px) !important;
  padding: .55rem .8rem !important;
}
#gameScreen .g-header::before,
#gameScreen .g-header::after { display: none !important; }
#gameScreen .back-btn {
  background: transparent !important;
  border: 1px solid #44F6FF !important;
  color: #44F6FF !important;
  font: 700 .82rem/1 "IBM Plex Mono", monospace !important;
  letter-spacing: .12em !important;
  padding: .35rem .65rem !important;
  border-radius: 0 !important;
  clip-path: polygon(
    6px 0, calc(100% - 6px) 0, 100% 6px,
    100% calc(100% - 6px), calc(100% - 6px) 100%,
    6px 100%, 0 calc(100% - 6px), 0 6px) !important;
  cursor: pointer !important;
  transition: box-shadow .12s ease, background .12s ease !important;
}
#gameScreen .back-btn:hover,
#gameScreen .back-btn:focus {
  background: rgba(68, 246, 255, .10) !important;
  box-shadow: 0 0 12px rgba(68, 246, 255, .45) !important;
}
#gameScreen .g-lvl-name {
  font: 700 .88rem/1.2 "IBM Plex Mono", monospace !important;
  letter-spacing: .14em !important;
  color: #EAF4EF !important;
  text-shadow: 0 0 12px rgba(68, 246, 255, .45) !important;
  text-transform: uppercase !important;
}
#gameScreen .g-tier-badge {
  font: 700 .65rem/1 "IBM Plex Mono", monospace !important;
  letter-spacing: .18em !important;
  padding: .25rem .55rem !important;
  background: rgba(8, 19, 22, .9) !important;
  border: 1px solid currentColor !important;
  border-radius: 0 !important;
  clip-path: polygon(
    5px 0, calc(100% - 5px) 0, 100% 5px,
    100% calc(100% - 5px), calc(100% - 5px) 100%,
    5px 100%, 0 calc(100% - 5px), 0 5px) !important;
}

/* Scoreboard — three bracketed cells in one row */
#gameScreen .scoreboard {
  background: rgba(8, 19, 22, .92) !important;
  border: 1px solid #1A7F8A !important;
  box-shadow:
    0 0 14px rgba(68, 246, 255, .14),
    inset 0 0 12px rgba(68, 246, 255, .05) !important;
  clip-path: polygon(
    10px 0, calc(100% - 10px) 0, 100% 10px,
    100% calc(100% - 10px), calc(100% - 10px) 100%,
    10px 100%, 0 calc(100% - 10px), 0 10px) !important;
  padding: .42rem .75rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .6rem !important;
}
#gameScreen .scoreboard::before,
#gameScreen .scoreboard::after { display: none !important; }
#gameScreen .sc-item {
  font: 600 .72rem/1 "IBM Plex Mono", monospace !important;
  letter-spacing: .16em !important;
  color: #1A7F8A !important;
  text-transform: uppercase !important;
}
#gameScreen .sc-item strong {
  color: #44F6FF !important;
  font-weight: 800 !important;
  margin-left: .35rem !important;
  text-shadow: 0 0 8px rgba(68, 246, 255, .45) !important;
}
#gameScreen .sc-stars {
  font: 700 .85rem/1 "IBM Plex Mono", monospace !important;
  color: #FFE84A !important;
  letter-spacing: .14em !important;
  text-shadow: 0 0 10px rgba(255, 232, 74, .55) !important;
}

/* Board frame */
#gameScreen #gridWrap {
  border: 1px solid #1A7F8A !important;
  box-shadow:
    0 0 18px rgba(68, 246, 255, .18),
    inset 0 0 14px rgba(68, 246, 255, .06) !important;
  background: rgba(3, 7, 7, .65) !important;
  clip-path: polygon(
    14px 0, calc(100% - 14px) 0, 100% 14px,
    100% calc(100% - 14px), calc(100% - 14px) 100%,
    14px 100%, 0 calc(100% - 14px), 0 14px) !important;
}
#gameScreen #gridWrap::before,
#gameScreen #gridWrap::after { display: none !important; }

/* Objective strip + cheese pip row */
#gameScreen .objective-strip {
  background: rgba(8, 19, 22, .85) !important;
  border: 1px solid #1A7F8A !important;
  color: #44F6FF !important;
  font: 700 .72rem/1 "IBM Plex Mono", monospace !important;
  letter-spacing: .22em !important;
  padding: .42rem .75rem !important;
  clip-path: polygon(
    8px 0, calc(100% - 8px) 0, 100% 8px,
    100% calc(100% - 8px), calc(100% - 8px) 100%,
    8px 100%, 0 calc(100% - 8px), 0 8px) !important;
  text-align: center !important;
  text-shadow: 0 0 10px rgba(68, 246, 255, .45) !important;
}
#gameScreen #eatRow {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: .35rem !important;
  margin-top: .35rem !important;
}

/* Status line */
#gameScreen #statusEl {
  color: #1A7F8A !important;
  font: 600 .72rem/1.2 "IBM Plex Mono", monospace !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  min-height: 1em !important;
}

/* Control buttons row */
#gameScreen .controls {
  display: flex !important;
  gap: .5rem !important;
  justify-content: center !important;
  margin-top: .35rem !important;
}
#gameScreen .controls button {
  font: 700 .78rem/1 "IBM Plex Mono", monospace !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: .5rem .85rem !important;
  background: rgba(8, 19, 22, .9) !important;
  border: 1px solid currentColor !important;
  border-radius: 0 !important;
  clip-path: polygon(
    7px 0, calc(100% - 7px) 0, 100% 7px,
    100% calc(100% - 7px), calc(100% - 7px) 100%,
    7px 100%, 0 calc(100% - 7px), 0 7px) !important;
  cursor: pointer !important;
  transition: background .12s ease, box-shadow .12s ease !important;
}
/* Per-button role colours: U + H = lime (helpful), R = magenta (danger). */
#gameScreen #undoBtn { color: #9CFF4A !important; }
#gameScreen #hintBtn { color: #9CFF4A !important; }
#gameScreen #resetBtn { color: #E95AA6 !important; }
#gameScreen .controls button:hover,
#gameScreen .controls button:focus {
  background: rgba(15, 36, 42, .9) !important;
  box-shadow: 0 0 14px currentColor,
              inset 0 0 10px rgba(255, 255, 255, .04) !important;
}
#gameScreen .controls button:active { transform: translateY(1px) !important; }

/* Keyboard hint chip — softer, doesn't fight the control row */
#gameScreen .kb-hint {
  font: 500 .58rem/1.2 "IBM Plex Mono", monospace !important;
  letter-spacing: .22em !important;
  color: #1A7F8A !important;
  opacity: .7 !important;
  text-align: center !important;
  margin-top: .35rem !important;
}

/* ──────────────────────────────────────────────────────────────
   WIN MODAL — vectorise the heading + detail to match
   ────────────────────────────────────────────────────────────*/
#winOverlay .win-stars {
  color: #FFE84A !important;
  text-shadow: 0 0 16px rgba(255, 232, 74, .55) !important;
  letter-spacing: .22em !important;
}
#winOverlay .win-title {
  color: #44F6FF !important;
  text-shadow: 0 0 22px rgba(68, 246, 255, .55) !important;
  font: 800 1.6rem/1 "IBM Plex Mono", monospace !important;
  letter-spacing: .14em !important;
}
#winOverlay .win-detail {
  color: #1A7F8A !important;
  font: 600 .76rem/1 "IBM Plex Mono", monospace !important;
  letter-spacing: .14em !important;
}
#winOverlay .win-tier-badge {
  border: 1px solid currentColor !important;
  background: rgba(8, 19, 22, .9) !important;
  border-radius: 0 !important;
  clip-path: polygon(
    5px 0, calc(100% - 5px) 0, 100% 5px,
    100% calc(100% - 5px), calc(100% - 5px) 100%,
    5px 100%, 0 calc(100% - 5px), 0 5px) !important;
}
#winOverlay::after {
  color: #9CFF4A !important;
  text-shadow: 0 0 12px rgba(156, 255, 74, .35) !important;
  letter-spacing: .42em !important;
}

/* ──────────────────────────────────────────────────────────────
   THREE.JS WIN PANEL container
   #winOverlay is now empty visually — all content lives in the
   three.js canvas mounted into #winThreeContainer. We zero out
   the legacy ::before / ::after decorations + remove the dark
   wash so the canvas is the only thing the player sees.
   ────────────────────────────────────────────────────────────*/
#winOverlay {
  background: rgba(2, 5, 7, .82) !important;
}
#winOverlay::before,
#winOverlay::after { content: none !important; display: none !important; }
#winThreeContainer {
  position: absolute;
  inset: 0;
  display: block;
  /* Inherit pointer-events from #winOverlay so this container is
     only clickable when the overlay is showing (the .show class flips
     #winOverlay from pointer-events:none → all). Without inherit, the
     hardcoded `auto` made the hidden overlay swallow every click on
     the page. */
  pointer-events: inherit;
}
#winThreeContainer canvas {
  width: 100% !important;
  height: 100% !important;
  pointer-events: inherit;
}

/* ──────────────────────────────────────────────────────────────
   GAME HUD (three.js) — container + canvas
   The vector HUD covers the whole game-stage. Its canvas has
   pointer-events: auto so it can both capture HUD button taps
   and forward unhandled clicks down to the board input layer.
   ────────────────────────────────────────────────────────────*/
#gameHudContainer {
  position: absolute;
  inset: 0;
  z-index: 40;
  /* Inherit pointer-events from the .screen wrapper. When the game
     screen is inactive (.screen[data-active=false] → pointer-events:none)
     this container — and the canvas inside it — will pass clicks
     through, so the menu screen receives them. */
  pointer-events: inherit;
}
#gameHudContainer canvas {
  width: 100% !important;
  height: 100% !important;
  /* Inherit so the HUD canvas only captures pointer events while its
     parent screen is active (#gameScreen[data-active=true]). When the
     game screen is hidden, .screen[data-active=false] sets pointer-
     events:none and we want that to propagate down — hard-coded `auto`
     here would let the hidden HUD swallow clicks on the menu. */
  pointer-events: inherit;
  display: block;
  /* iOS: explicit touch-action so taps reach pointerdown handlers. */
  touch-action: none;
}

/* ──────────────────────────────────────────────────────────────
   Legacy HUD chrome — every selector below targets DOM that the
   three.js HUD has replaced. The stub nodes still exist in the
   markup (for old getElementById callers we haven't scrubbed) but
   their VISUAL contribution is zero.
   ────────────────────────────────────────────────────────────*/
#gameScreen #hudLayer,
#gameScreen #hudLayerBottom { display: none !important; }
/* The hidden stub block at the bottom of #gameScreen is already
   display:none inline — these rules cover the visible variants
   that could leak through earlier CSS. */
#gameScreen .g-header,
#gameScreen .scoreboard,
#gameScreen .objective-strip,
#gameScreen #statusEl,
#gameScreen #eatRow,
#gameScreen .controls,
#gameScreen .kb-hint,
#gameScreen #invBadges,
#gameScreen .g-lvl-name,
#gameScreen .g-tier-badge { display: none !important; }

/* Game stage uses a flex column with explicit top/bottom padding
   that reserves space for the three.js HUD's top + bottom bands.
   The HUD canvas (position:absolute; inset:0) covers EVERYTHING
   including the padding; the board (#gridWrap, flex:1) is
   constrained to the content area BETWEEN the paddings, so it can
   never bleed into the HUD's text regions. */
#gameScreen .game-stage {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  position: relative !important;
  flex: 1 1 auto !important;   /* fill all available height in the game screen */
  /* Top pad: top HUD (inventory + header + scoreboard).
     Bottom pad: bottom HUD (controls + info row).
     gridWrap fills the area between — the board itself zooms to
     fill that area via v3d's camera.zoom auto-fit (see v3d.onResize),
     so there's no transparent canvas underneath the board. */
  padding: 120px 0 112px 0 !important;
  box-sizing: border-box !important;
}
#gameScreen #gridWrap {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  min-height: 0 !important;
}
/* Cabinet stays at its normal portrait dimensions — the empty-space
   fix lives inside v3d's camera, not in the cabinet sizing. */

/* Centre the cabinet vertically in the viewport so when the game
   screen's shorter cabinet is shown, the empty viewport space splits
   above + below instead of all dumping at the bottom. */
body { align-items: center !important; }

/* iOS home-screen PWAs can expose the bottom safe/system area outside
   `100dvh`. Keep that region painted and size the cabinet against the
   large viewport so the app does not leave a white strip below it. */
html,
body {
  background-color: #020505 !important;
}
@supports (height: 100lvh) {
  body {
    min-height: 100lvh !important;
  }
  #appShell {
    height: min(100lvh, 932px) !important;
    max-height: 100lvh !important;
  }
}
@supports (-webkit-touch-callout: none) {
  html,
  body {
    min-height: -webkit-fill-available !important;
    background-color: #020505 !important;
  }
  body::after {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: max(env(safe-area-inset-bottom), 0px);
    background: #020505;
    pointer-events: none;
    z-index: 0;
  }
}

/* ──────────────────────────────────────────────────────────────
   GAME SCREEN — kill the static CSS starfield. The board scene
   v3d already renders its own moving star/burst particles, and the
   three.js HUD is the only ambient layer that should bleed through.
   The .fx-stars layer is a static radial-gradient pattern in the
   appShell-level #fxLayer; we hide it (and its grid + sweep
   siblings) whenever the player is on the game screen.
   ────────────────────────────────────────────────────────────*/
#appShell[data-screen="game"] #fxLayer,
#appShell[data-screen="game"] .fx-stars,
#appShell[data-screen="game"] .fx-grid,
#appShell[data-screen="game"] .fx-sweep {
  display: none !important;
}