/* ============================================================
   PageNews — the arcade
   ------------------------------------------------------------
   Loaded only on /games/ and the game pages, so the news pages
   do not carry it. Every colour comes from the tokens already
   defined in site.css, which is what makes the games follow the
   light/dark toggle without knowing it exists.
   ============================================================ */

/* --- the catalogue ------------------------------------------ */
.game-jobs{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:16px;
  align-items:stretch;
  margin:20px 0 8px;
}
.game-job{--cat:var(--accent);display:flex;flex-direction:column}
.game-list{list-style:none;margin:0;padding:0;flex:1 1 auto}
.game-list li+li{border-top:1px solid var(--line-soft)}

.game-tile{display:flex;gap:12px;padding:14px 16px;align-items:flex-start}
.game-tile:hover{background:var(--surface-2)}
.game-tile-art{
  flex:0 0 auto;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  color:var(--accent);background:color-mix(in oklab,var(--accent) 12%,transparent);
}
.game-tile-body{display:grid;gap:4px;min-width:0}
.game-tile-title{font-size:calc(15px * var(--text-scale));font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.game-tile:hover .game-tile-title{color:var(--accent)}
.game-tile-blurb{font-size:calc(13px * var(--text-scale));line-height:1.5;color:var(--muted)}
.game-tile-foot{display:flex;align-items:center;gap:10px;margin-top:2px}
.game-genre{
  font-size:calc(10.5px * var(--text-scale));font-weight:750;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);
}
.game-play{margin-left:auto;font-size:calc(12px * var(--text-scale));font-weight:650;color:var(--accent)}

.game-list-wide{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.game-list-wide li+li{border-top:0}
.game-tile-small{padding:11px 14px;align-items:center}
.game-tile-small .game-tile-art{width:32px;height:32px;border-radius:9px}

/* --- a game page -------------------------------------------- */
.game-page{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:26px 28px 28px;margin-bottom:20px;
}
.game-head{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.game-head-art{
  flex:0 0 auto;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  color:var(--accent);background:color-mix(in oklab,var(--accent) 12%,transparent);
}
.game-head h1{margin:0;font-size:calc(27px * var(--text-scale));font-weight:780;letter-spacing:-.022em;line-height:1.15}
.game-head-meta{margin:3px 0 0;font-size:calc(12.5px * var(--text-scale));color:var(--muted);display:flex;gap:8px;align-items:center}

/* --- the stage ---------------------------------------------- */
.game-stage{display:grid;gap:10px}
.game-bar{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface-2);
}
.game-score{display:flex;align-items:baseline;gap:7px}
.game-score-label{
  font-size:calc(10.5px * var(--text-scale));font-weight:750;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);
}
.game-score-value{font-size:calc(19px * var(--text-scale));font-weight:780;color:var(--ink);font-variant-numeric:tabular-nums}
.game-status{margin:0 0 0 auto;font-size:calc(12.5px * var(--text-scale));color:var(--muted);text-align:right}

.game-field{
  position:relative;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface-2);overflow:hidden;min-height:220px;
  display:grid;place-items:center;
}
.game-canvas{display:block;width:100%;height:auto;max-width:100%;touch-action:none}

.game-overlay{
  position:absolute;inset:0;z-index:2;
  display:grid;place-content:center;justify-items:center;gap:10px;
  padding:26px;text-align:center;
  background:color-mix(in oklab,var(--surface) 88%,transparent);
  backdrop-filter:blur(2px);
}
.game-overlay[hidden]{display:none}
.game-overlay-title{margin:0;font-size:calc(21px * var(--text-scale));font-weight:780;letter-spacing:-.018em}
.game-overlay-text{margin:0;max-width:44ch;font-size:calc(13.5px * var(--text-scale));line-height:1.55;color:var(--muted)}
.game-overlay-btn{margin-top:4px}

/* Real, focusable, and invisible. display:none would stop a phone
   raising its keyboard, which is the only reason it exists. */
.game-hidden-input{
  position:absolute;opacity:0;pointer-events:none;
  width:1px;height:1px;bottom:0;left:0;border:0;
}

/* On-screen controls, added only where there is no keyboard. */
.game-pad{display:flex;gap:10px;justify-content:center}
.game-pad-btn{
  flex:1 1 0;max-width:120px;height:52px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink);
  font-size:19px;font-weight:700;touch-action:manipulation;user-select:none;
}
.game-pad-btn:active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* --- notes under the stage ---------------------------------- */
.game-notes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px 30px;
  margin-top:22px;padding-top:20px;border-top:1px solid var(--line-soft);
}
.game-notes h2{
  margin:0 0 8px;font-size:calc(12px * var(--text-scale));font-weight:750;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);
}
.game-notes p{margin:0;font-size:calc(13.5px * var(--text-scale));line-height:1.6;color:var(--body)}
.game-controls{margin:0;padding-left:18px;font-size:calc(13.5px * var(--text-scale));line-height:1.7;color:var(--body)}

/* ============================ Line Cook ============================ */
.game-cook{padding:18px;width:100%;max-width:430px}
.game-cook-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.game-cook-grid.is-locked{pointer-events:none;opacity:.72}
.game-cook-btn{
  display:grid;gap:5px;place-items:center;padding:14px 6px;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--body);transition:background .12s,border-color .12s,transform .12s;
}
.game-cook-btn:hover{border-color:var(--accent)}
.game-cook-btn.is-lit{background:var(--accent);border-color:var(--accent);color:var(--on-accent);transform:scale(1.04)}
.game-cook-glyph{font-size:26px;line-height:1}
.game-cook-name{font-size:calc(11.5px * var(--text-scale));font-weight:650}

/* ============================ Cold Case ============================ */
.game-case{padding:16px;width:100%;max-width:520px;display:grid;gap:12px}
.game-case-log{list-style:none;margin:0;padding:0;display:grid;gap:5px;max-height:210px;overflow-y:auto}
.game-case-log li{display:flex;align-items:center;gap:10px;font-size:calc(12.5px * var(--text-scale))}
.game-case-n{width:18px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.game-case-seq{display:flex;gap:5px}
.game-case-verdict{margin-left:auto;color:var(--muted)}
.game-case-verdict b{color:var(--ink)}
.game-chip{
  display:grid;place-items:center;width:28px;height:28px;border-radius:8px;
  font-size:calc(12.5px * var(--text-scale));font-weight:750;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
}
/* Six suspects, six hues from the section palette already in site.css, so
   the board needs no colours of its own. */
.game-chip[data-suspect="0"]{background:color-mix(in oklab,var(--c-world) 22%,var(--surface));border-color:var(--c-world)}
.game-chip[data-suspect="1"]{background:color-mix(in oklab,var(--c-economy) 22%,var(--surface));border-color:var(--c-economy)}
.game-chip[data-suspect="2"]{background:color-mix(in oklab,var(--c-sports) 22%,var(--surface));border-color:var(--c-sports)}
.game-chip[data-suspect="3"]{background:color-mix(in oklab,var(--c-politics) 22%,var(--surface));border-color:var(--c-politics)}
.game-chip[data-suspect="4"]{background:color-mix(in oklab,var(--c-health) 22%,var(--surface));border-color:var(--c-health)}
.game-chip[data-suspect="5"]{background:color-mix(in oklab,var(--c-science) 22%,var(--surface));border-color:var(--c-science)}
.game-chip-btn{width:40px;height:40px;font-size:calc(15px * var(--text-scale));cursor:pointer}
.game-chip-btn:hover{outline:2px solid var(--accent);outline-offset:1px}
.game-case-current{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--line-soft)}
.game-case-go{margin-left:auto}
.game-case-key{margin:0;font-size:calc(11.5px * var(--text-scale));color:var(--muted);line-height:1.6}

/* ============================ Exact Change ============================ */
.game-till{padding:16px;width:100%;max-width:480px;display:grid;gap:12px}
.game-till-slip{
  display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);
}
.game-till-slip span{display:grid;gap:2px}
.game-till-slip small{font-size:calc(10.5px * var(--text-scale));text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.game-till-slip b{font-size:calc(17px * var(--text-scale));font-weight:780;font-variant-numeric:tabular-nums}
.game-till-clock{
  margin-left:auto;font-size:calc(19px * var(--text-scale));font-weight:780;
  font-variant-numeric:tabular-nums;color:var(--muted);
}
.game-till-clock.is-low{color:var(--c-sports)}
.game-till-q{margin:0;font-size:calc(13px * var(--text-scale));color:var(--muted)}
.game-till-tray{display:flex;flex-wrap:wrap;gap:8px}
.game-coin{
  border-radius:999px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;
  font-size:calc(12.5px * var(--text-scale));padding:0 4px;
}
.game-coin[data-size="small"]{width:44px;height:44px}
.game-coin[data-size="mid"]{width:50px;height:50px}
.game-coin[data-size="big"]{width:56px;height:56px}
.game-coin:hover{border-color:var(--accent);color:var(--accent)}
.game-till-given{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:30px}
.game-till-given .game-chip{width:auto;padding:0 9px}
.game-till-undo{
  margin-left:auto;font-size:calc(12px * var(--text-scale));font-weight:650;
  color:var(--accent);background:none;border:0;
}

/* ============================ Rewire ============================ */
.game-wire{padding:16px;display:grid;place-items:center}
.game-wire-grid{
  display:grid;
  grid-template-columns:repeat(var(--wire-size),1fr);
  gap:3px;width:min(320px,78vw);
}
.game-wire-cell{
  aspect-ratio:1;display:grid;place-items:center;padding:0;
  border:1px solid var(--line);border-radius:6px;background:var(--surface);
  color:var(--muted);transition:color .12s,background .12s;
}
.game-wire-cell svg{width:100%;height:100%}
.game-wire-cell:hover{border-color:var(--accent)}
.game-wire-cell.is-live{color:var(--accent);background:color-mix(in oklab,var(--accent) 9%,var(--surface))}
.game-wire-cell.is-meter{border-color:var(--ink);border-width:2px}
.game-wire-cell.is-lamp{border-color:var(--c-economy);border-width:2px}
.game-wire-cell.is-lamp.is-live{background:color-mix(in oklab,var(--c-economy) 22%,var(--surface));color:var(--c-economy)}

@media (max-width:860px){
  .game-page{padding:18px 16px 22px}
  .game-head h1{font-size:calc(22px * var(--text-scale))}
  .game-bar{gap:14px}
  .game-status{width:100%;margin-left:0;text-align:left}
  .game-list-wide{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}