/* game-code.css — Colour code (prefix gc-). SPEC §18g.
   Shared classes (.panel .btn .seg .sub .pf .num) come from app.css; .gm-seg from games.css. Everything here is gc-.
   Sprites are 12×12 logical pixels shown at integer scales only (36 px = ×3, 24 px = ×2) so they stay crisp. */

.gc-game{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:100%;min-width:0}
.gc-top{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;width:100%}
.gc-seg button{min-height:40px}
.gc-help{margin:0;text-align:center;max-width:540px;font-size:13px;line-height:1.35}
.gc-hidden{display:none !important}

/* ---------- board ---------- */
.gc-board{display:flex;flex-direction:column;gap:6px;padding:12px 16px;max-width:100%}
.gc-row{display:flex;align-items:center;gap:10px}
.gc-slots{display:flex;gap:4px}
.gc-slot{width:44px;height:44px;display:grid;place-items:center;flex:none;padding:0;margin:0;
  background:var(--panel2);border:2px solid var(--edge);box-shadow:inset 2px 2px 0 var(--line);font:inherit}
.gc-slot canvas{width:36px;height:36px;display:block}
.gc-slot.gc-empty{background:transparent;border:2px dashed var(--line);box-shadow:none}
.gc-cur .gc-slot.gc-next{border-color:var(--gold)}
button.gc-slot{cursor:pointer}
button.gc-slot:hover:not(:disabled){filter:brightness(1.05)}
button.gc-slot:disabled{cursor:default}
button.gc-slot.gc-empty:disabled{opacity:1}
.gc-future{opacity:.45}

/* feedback squares: logical 6-px squares with 2-px gaps, ×3 on desktop, ×2 on phones */
.gc-fb{display:block;flex:none;image-rendering:pixelated;image-rendering:crisp-edges}
.gc-fb[data-pegs="4"]{width:90px;height:18px}
.gc-fb[data-pegs="5"]{width:114px;height:18px}
.gc-fb-blank{visibility:hidden}

/* ---------- palette ---------- */
.gc-palette{display:flex;justify-content:center;gap:6px;width:100%;max-width:100%}
.gc-key{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:56px;min-width:0;flex:0 1 56px;padding:4px 6px;cursor:pointer;
  background:var(--panel);border:3px solid var(--edge);box-shadow:inset 0 -4px 0 var(--line),3px 3px 0 var(--shadow)}
.gc-key canvas{width:36px;height:36px;display:block}
.gc-knum{font-family:Silkscreen,monospace;font-size:10px;color:var(--muted);line-height:1}
.gc-key:hover:not(:disabled){filter:brightness(1.05)}
.gc-key:active:not(:disabled){transform:translate(2px,2px);box-shadow:inset 0 -4px 0 var(--line),1px 1px 0 var(--shadow)}
.gc-key:disabled{opacity:.55;cursor:default;transform:none}

/* ---------- check + hint ---------- */
.gc-actions{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.gc-check{min-height:44px}
.gc-hint{font-size:12px;max-width:320px}

/* ---------- answer reveal ---------- */
.gc-answer{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:10px 16px}
.gc-answer-label{font-size:20px;color:var(--ink)}

/* ---------- motion ---------- */
@keyframes gc-pop{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
.gc-new .gc-fb{animation:gc-pop .25s ease-out}
@media (prefers-reduced-motion:reduce){
  .gc-new .gc-fb{animation:none}
  .gc-key:active:not(:disabled){transform:none}
}

/* ---------- phones ---------- */
@media (max-width:860px){
  .gc-key{min-height:52px;flex:1 1 0;max-width:64px}
  .gc-hint{display:none}
}
@media (max-width:420px){
  .gc-future{display:none} /* the status line counts the turns left; the palette stays right under the current row */
  /* hard mode must fit a 343-px stage: 5×44 + 4×3 + 6 + 76 = 314, plus 12 padding and 6 border = 332 */
  .gc-board{padding:6px;gap:4px}
  .gc-row{gap:6px}
  .gc-slots{gap:3px}
  .gc-fb[data-pegs="4"]{width:60px;height:12px}
  .gc-fb[data-pegs="5"]{width:76px;height:12px}
  .gc-palette{gap:4px}
  .gc-key{min-height:48px;padding:3px 2px;max-width:none}
  .gc-key canvas{width:24px;height:24px}
  .gc-knum{display:none}
}