/* ============================================================================
   games.css — the three playfields. Loaded only on game pages.
   ========================================================================== */

/* ---------- STARLOCK ---------- */
#board.grid{
  --n:8;
  display:grid;grid-template-columns:repeat(var(--n),1fr);gap:0;
  width:min(100%,min(560px,72svh));margin-inline:auto;aspect-ratio:1;
  border-radius:var(--r-m);overflow:hidden;
  box-shadow:0 0 0 2px var(--line),var(--sh-2);
}
/* Region palette: hand-separated hues + alternating lightness, so neighbouring
   regions never read as the same colour. Shape (the black walls) carries the
   information anyway — colour is only an assist. */
#board.grid .cell{--gh:0;--gl:0.41}
#board.grid .cell[data-g="0"]{--gh:0;--gl:0.44}
#board.grid .cell[data-g="1"]{--gh:118;--gl:0.36}
#board.grid .cell[data-g="2"]{--gh:232;--gl:0.45}
#board.grid .cell[data-g="3"]{--gh:62;--gl:0.37}
#board.grid .cell[data-g="4"]{--gh:175;--gl:0.46}
#board.grid .cell[data-g="5"]{--gh:298;--gl:0.38}
#board.grid .cell[data-g="6"]{--gh:32;--gl:0.47}
#board.grid .cell[data-g="7"]{--gh:205;--gl:0.35}
#board.grid .cell[data-g="8"]{--gh:145;--gl:0.44}
#board.grid .cell[data-g="9"]{--gh:265;--gl:0.39}
#board.grid .cell{
  /* unitless — an OKLCH hue must not be added to an <angle> */
  position:relative;appearance:none;font:inherit;cursor:pointer;padding:0;
  display:grid;place-items:center;aspect-ratio:1;
  background:oklch(var(--gl) 0.085 calc(var(--hue) + var(--gh)));
  border:0;color:oklch(0.99 0 0);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;
  transition:background var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out);
}
#board.grid .cell:hover{background:oklch(calc(var(--gl) + .08) 0.1 calc(var(--hue) + var(--gh)))}
#board.grid .cell:active{transform:scale(.94)}
/* Region walls. One rule, four per-side widths set from JS, so the thin interior
   grid line always survives and every wall combination is handled. */
#board.grid .cell{--wt:0px;--wb:0px;--wl:0px;--wr:0px}
#board.grid .cell{
  box-shadow:
    inset 0 var(--wt) 0 var(--wall),
    inset 0 calc(var(--wb) * -1) 0 var(--wall),
    inset var(--wl) 0 0 var(--wall),
    inset calc(var(--wr) * -1) 0 0 var(--wall),
    inset 0 0 0 .5px rgb(0 0 0 / .28);
}
:root{--wall:oklch(0.10 0.005 260)}

#board.grid .glyph{font-size:clamp(1rem,4.4vw,1.9rem);line-height:1;pointer-events:none;
  filter:drop-shadow(0 1px 2px rgb(0 0 0/.5))}
#board.grid .cell[data-v="1"] .glyph{opacity:.5;font-size:clamp(.7rem,2.6vw,1.1rem)}
#board.grid .cell[data-v="2"] .glyph{color:oklch(0.98 0.13 95);text-shadow:0 0 14px oklch(0.9 0.18 95 / .85)}
@media(prefers-reduced-motion:no-preference){
  #board.grid .cell[data-v="2"] .glyph{animation:starIn 320ms var(--ease-pop)}
  @keyframes starIn{0%{transform:scale(.2) rotate(-70deg);opacity:0}60%{transform:scale(1.25) rotate(6deg)}100%{transform:scale(1) rotate(0)}}
}
/* conflicts are marked with a ring + a strike, never colour alone */
#board.grid .cell[data-bad="1"]{background:oklch(0.42 0.16 25)}
#board.grid .cell[data-bad="1"]::after{content:'';position:absolute;inset:8%;border:2px dashed oklch(0.98 0.05 25);border-radius:50%;opacity:.9}
.stage.won #board.grid .cell[data-v="2"]{background:oklch(calc(var(--gl) + .12) 0.13 calc(var(--hue) + var(--gh)))}

.legend{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:.9rem;font-size:.8rem;color:var(--muted)}
.legend b{color:var(--text);font-weight:600}

/* ---------- OUTRANK ---------- */
#prompt{text-align:center;font-size:clamp(1.05rem,2.8vw,1.45rem);font-weight:600;letter-spacing:-.02em;
  margin-bottom:1rem;text-wrap:balance;min-height:2.6em;display:grid;place-items:center}
#stage.duel-stage{display:grid;grid-template-columns:1fr auto 1fr;gap:.7rem;align-items:stretch}
@media(max-width:560px){#stage.duel-stage{grid-template-columns:1fr;grid-template-rows:1fr auto 1fr}}
.pick{
  position:relative;appearance:none;font:inherit;cursor:pointer;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;
  padding:1.4rem 1rem;min-height:clamp(150px,26svh,230px);
  border-radius:var(--r-l);color:var(--text);
  background:linear-gradient(160deg,color-mix(in oklch,var(--surface-2),transparent 12%),var(--surface));
  border:1px solid var(--line);border-bottom-width:3px;
  box-shadow:var(--edge),var(--sh-2);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:transform var(--t-base) var(--ease-out),border-color var(--t-base),box-shadow var(--t-base),background var(--t-base);
}
.pick:hover{transform:translateY(-3px);border-color:color-mix(in oklch,var(--accent),transparent 55%);box-shadow:var(--edge),var(--sh-3),var(--glow)}
.pick:active{transform:translateY(1px) scale(.99)}
.pick-name{font-size:clamp(1.02rem,2.5vw,1.3rem);font-weight:600;letter-spacing:-.02em;text-wrap:balance;line-height:1.2}
.pick-sub{font-size:.74rem;color:var(--muted);font-family:var(--mono);letter-spacing:.05em;text-transform:uppercase}
.pick-val{font-family:var(--mono);font-size:clamp(1.6rem,4.6vw,2.3rem);font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;color:var(--muted);margin-top:.25rem;line-height:1}
.pick-unit{font-size:.72rem;color:var(--muted);font-family:var(--mono)}
/* reveal: winner marked by an ARROW + label, not by colour alone */
.pick[data-state=high]{border-color:var(--good);background:linear-gradient(160deg,color-mix(in oklch,var(--good),transparent 84%),var(--surface))}
.pick[data-state=high] .pick-val{color:var(--good)}
.pick[data-state=high]::after{content:'▲ higher';position:absolute;top:.55rem;right:.7rem;font-family:var(--mono);font-size:.66rem;color:var(--good);letter-spacing:.08em}
.pick[data-state=low]{opacity:.72}
.pick[data-state=low]::after{content:'▽ lower';position:absolute;top:.55rem;right:.7rem;font-family:var(--mono);font-size:.66rem;color:var(--muted);letter-spacing:.08em}
.pick[data-chosen="1"]{outline:2px solid var(--accent);outline-offset:2px}
/* Outrank spends `outline` on the CHOSEN state, and that selector (0,2,0) beats
   the global :focus-visible (0,1,0) — so a keyboard player who tabbed onto the
   pick they had already chosen saw the chosen ring and no focus ring at all,
   with no way to tell "focused" from "picked". Restated here at equal weight,
   in --accent-hi at a wider offset, so the two states never read as one.
   Audited 2026-08-04: nothing in this file removes an outline. */
.pick[data-chosen="1"]:focus-visible,
.pick:focus-visible{outline:3px solid var(--accent-hi);outline-offset:5px}
.or{display:grid;place-items:center;font-family:var(--mono);font-size:.78rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);padding:0 .3rem}
#pips{display:flex;gap:.32rem;justify-content:center;margin-top:1rem}
.pip{width:22px;height:5px;border-radius:var(--r-pill);background:var(--line);display:block;transition:background var(--t-base)}
.pip[data-s=y]{background:var(--good)}
.pip[data-s=n]{background:var(--danger)}
.pip[data-s=now]{background:var(--accent);box-shadow:0 0 10px var(--accent)}

/* ---------- SUMMIT ---------- */
/* the layout spans exactly 10 card widths, so the card width is derived from the
   stage width and the peaks can never overflow on a narrow phone */
#board.table{--cw:min(8.4vw,62px);--ch:calc(var(--cw) * 1.42);display:block}
.peaks{position:relative;height:calc(var(--ch) * 2.55);width:calc(var(--cw) * 10);margin:0 auto;max-width:100%}
.card{
  position:absolute;width:var(--cw);height:var(--ch);border-radius:calc(var(--r-s) - 1px);
  appearance:none;font:inherit;padding:0;cursor:default;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05em;
  background:oklch(0.96 0.008 var(--hue));color:oklch(0.2 0.02 260);
  border:1px solid oklch(0.72 0.02 var(--hue));
  box-shadow:0 2px 5px rgb(0 0 0/.45),inset 0 1px 0 #fff;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;
  transition:transform var(--t-base) var(--ease-out),opacity var(--t-base),box-shadow var(--t-fast);
}
.peaks .card{left:calc(var(--x) * var(--cw) * .5);top:calc(var(--y) * var(--ch) * .42)}
.card[data-red="1"]{color:oklch(0.52 0.21 25)}
.card .rank{font-family:var(--mono);font-weight:700;font-size:calc(var(--cw) * .42);line-height:1}
.card .suit{font-size:calc(var(--cw) * .40);line-height:1}
.card[data-state=down],.card .back{
  background:repeating-linear-gradient(45deg,oklch(0.32 0.07 var(--hue)) 0 5px,oklch(0.26 0.06 var(--hue)) 5px 10px);
  border-color:oklch(0.42 0.05 var(--hue));
}
.card .back{position:absolute;inset:0;border-radius:inherit}
.card[data-state=gone]{opacity:0;transform:scale(.6) translateY(-14px);pointer-events:none}
.card[data-playable="1"]{cursor:pointer;box-shadow:0 3px 10px rgb(0 0 0/.5),inset 0 1px 0 #fff,0 0 0 2px var(--accent)}
.card[data-playable="1"]:hover{transform:translateY(-5px)}
.card[data-playable="1"]:active{transform:translateY(-1px) scale(.97)}
.tray{display:flex;gap:1.4rem;align-items:flex-end;justify-content:center;margin-top:1.1rem}
.tray .card{position:relative}
.stock{cursor:pointer}
.stock[data-empty="1"]{opacity:.28;cursor:default}
.waste-wrap{display:flex;flex-direction:column;align-items:center;gap:.35rem}
.tray-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.waste{box-shadow:0 3px 12px rgb(0 0 0/.5),inset 0 1px 0 #fff,0 0 0 2px color-mix(in oklch,var(--accent),transparent 55%)}

/* ---------- ARCADE (canvas games) ---------- */
.stage.arcade-stage{padding:0;overflow:hidden;position:relative;background:#05060a}
#gamecanvas{
  display:block;width:100%;
  height:min(70svh,620px);
  /* the canvas is the product — never let it be taller than the viewport allows */
  touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none;cursor:pointer;
  border-radius:calc(var(--r-xl) - 1px);
}
@media(max-width:620px){#gamecanvas{height:min(62svh,560px)}}
.stage.arcade-stage::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 60px rgb(0 0 0/.55),inset 0 0 0 1px rgb(255 255 255/.06);
}