/*
 * Kaamko games (docs/49_GAMES.md). Loaded by GameLayout, /games and
 * /games/licenses after the Kaamko stylesheets.
 *
 * Every colour is a site token or a palette value from site-20260716b.css,
 * re-pointed under [data-theme="dark"], so light, dark and plain mode are
 * decided here. Canvas games read their colours from the --gb-* properties.
 *
 * ⚠️ The [hidden] trap (docs, memory "CSS hidden-attribute trap"): any element
 * a script hides with the `hidden` attribute and that also has an author
 * `display` rule needs an explicit `[hidden] { display: none }` here.
 */

/* ── shared furniture ─────────────────────────────────────────────── */
.game-page .game-head h1 { margin-bottom: .35rem; }
.game-head__ne { font-weight: 500; opacity: .75; }

.game-panel {
  padding: clamp(.75rem, 2.5vw, 1.5rem);
  margin-bottom: var(--ice-space-6, 1.5rem);
}

.game-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: .6rem .9rem;
  margin-bottom: 1rem;
}

.game-stat {
  display: grid;
  min-width: 4.5rem;
  padding: .35rem .7rem;
  border: 1px solid var(--ice-color-border);
  border-radius: 6px;
  background: var(--ice-color-surface-muted);
  color: var(--ice-color-on-surface);
  line-height: 1.15;
}
.game-stat > span:first-child { font-size: .75rem; color: var(--ice-color-text-muted, currentColor); }
.game-stat b { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.game-stat__of { font-size: .75rem; }

.game-btn {
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--ice-color-border-strong, var(--ice-color-border));
  border-radius: 6px;
  background: var(--ice-color-surface);
  color: var(--ice-color-on-surface);
  font: 600 .95rem/1 var(--ice-font-primary, inherit);
  cursor: pointer;
}
.game-btn:hover:not(:disabled) { border-color: var(--ice-color-action); }
.game-btn:disabled { opacity: .5; cursor: default; }
.game-btn[aria-pressed='true'],
.game-btn--primary {
  border-color: var(--ice-color-action);
  background: var(--ice-color-action);
  color: var(--ice-color-on-action, #fff);
}

.game-select { display: grid; gap: .2rem; font-size: .75rem; color: var(--ice-color-on-surface); }
.game-select select {
  min-height: 44px;
  padding: 0 .6rem;
  border: 1px solid var(--ice-color-border-strong, var(--ice-color-border));
  border-radius: 6px;
  background-color: var(--ice-color-surface);
  color: var(--ice-color-on-surface);
  font-size: .95rem;
}

.game-status { min-height: 1.5em; margin: .75rem 0 0; font-weight: 600; }

.game-controls { margin: 0 0 var(--ice-space-6, 1.5rem); }
.game-controls h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
.game-controls dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
.game-controls dt { font-weight: 700; }
.game-controls dd { margin: 0; }
.game-controls__note { font-size: .9rem; color: var(--ice-color-text-muted, currentColor); margin-top: .6rem; }

.game-credit { font-size: .9rem; margin: 1.5rem 0; color: var(--ice-color-text-muted, currentColor); }
.game-more ul { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding: 0; list-style: none; }
.game-more h2 { font-size: 1.15rem; }

.game-licence { margin: 2rem 0; }
.game-licence__text {
  max-width: 100%;
  overflow-x: auto;
  padding: 1rem;
  border: 1px solid var(--ice-color-border);
  border-radius: 6px;
  background: var(--ice-color-surface-muted);
  color: var(--ice-color-on-surface);
  font-size: .8rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.game-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .75rem;
  padding: 1rem;
  background: color-mix(in srgb, var(--ice-color-surface) 86%, transparent);
  color: var(--ice-color-on-surface);
  text-align: center;
  font-weight: 600;
}
.game-overlay[hidden] { display: none; }

/* ── 2048 ─────────────────────────────────────────────────────────── */
.g2048 {
  --g-gap: clamp(6px, 2vw, 12px);
  --g-empty: var(--ice-color-surface-muted);
  --g-board: var(--ice-palette-line-200);
  max-width: 480px;
  margin-inline: auto;
}
[data-theme='dark'] .g2048 { --g-board: var(--ice-palette-graphite-950); --g-empty: var(--ice-palette-graphite-750); }

.g2048 .game-bar { justify-content: space-between; }
.g2048 .score-container { position: relative; }
.g2048 .score-addition {
  position: absolute;
  right: 0;
  top: -1.1rem;
  font-size: .85rem;
  color: var(--ice-color-text-action, var(--ice-color-action));
  animation: g2048-rise .6s ease-out forwards;
}
@keyframes g2048-rise { to { transform: translateY(-14px); opacity: 0; } }

.g2048__board {
  position: relative;
  aspect-ratio: 1;
  padding: var(--g-gap);
  border-radius: 10px;
  background: var(--g-board);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.g2048 .grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--g-gap);
  height: 100%;
}
.g2048 .grid-cell { border-radius: 6px; background: var(--g-empty); }
.g2048 .tile-container { position: absolute; inset: var(--g-gap); }

.g2048 .tile {
  --x: 0; --y: 0;
  position: absolute;
  top: 0; left: 0;
  width: calc((100% - 3 * var(--g-gap)) / 4);
  height: calc((100% - 3 * var(--g-gap)) / 4);
  transform: translate(calc(var(--x) * (100% + var(--g-gap))), calc(var(--y) * (100% + var(--g-gap))));
  transition: transform 100ms ease-in-out;
  z-index: 2;
}
.g2048 .tile-inner {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: var(--t-bg, var(--ice-palette-warm-100));
  color: var(--t-fg, var(--ice-palette-ink-900));
  font: 700 clamp(1.3rem, 7vw, 2.4rem)/1 var(--ice-font-display, var(--ice-font-primary, inherit));
  font-variant-numeric: tabular-nums;
}
.g2048 .tile-128 .tile-inner, .g2048 .tile-256 .tile-inner, .g2048 .tile-512 .tile-inner { font-size: clamp(1.1rem, 6vw, 2rem); }
.g2048 .tile-1024 .tile-inner, .g2048 .tile-2048 .tile-inner, .g2048 .tile-super .tile-inner { font-size: clamp(.9rem, 4.6vw, 1.6rem); }

.g2048 .tile-position-1-1 { --x: 0; --y: 0; } .g2048 .tile-position-2-1 { --x: 1; --y: 0; }
.g2048 .tile-position-3-1 { --x: 2; --y: 0; } .g2048 .tile-position-4-1 { --x: 3; --y: 0; }
.g2048 .tile-position-1-2 { --x: 0; --y: 1; } .g2048 .tile-position-2-2 { --x: 1; --y: 1; }
.g2048 .tile-position-3-2 { --x: 2; --y: 1; } .g2048 .tile-position-4-2 { --x: 3; --y: 1; }
.g2048 .tile-position-1-3 { --x: 0; --y: 2; } .g2048 .tile-position-2-3 { --x: 1; --y: 2; }
.g2048 .tile-position-3-3 { --x: 2; --y: 2; } .g2048 .tile-position-4-3 { --x: 3; --y: 2; }
.g2048 .tile-position-1-4 { --x: 0; --y: 3; } .g2048 .tile-position-2-4 { --x: 1; --y: 3; }
.g2048 .tile-position-3-4 { --x: 2; --y: 3; } .g2048 .tile-position-4-4 { --x: 3; --y: 3; }

/* Brand ramp: warm paper, terracotta, crimson, then navy for the big tiles. */
.g2048 .tile-2    { --t-bg: var(--ice-palette-warm-100); }
.g2048 .tile-4    { --t-bg: var(--ice-palette-navy-100); }
.g2048 .tile-8    { --t-bg: var(--ice-palette-terracotta-300); }
.g2048 .tile-16   { --t-bg: var(--ice-palette-terracotta-400); }
.g2048 .tile-32   { --t-bg: var(--ice-palette-terracotta-600); --t-fg: #fff; }
.g2048 .tile-64   { --t-bg: var(--ice-palette-terracotta-800); --t-fg: #fff; }
.g2048 .tile-128  { --t-bg: var(--ice-palette-crimson-400); --t-fg: #fff; }
.g2048 .tile-256  { --t-bg: var(--ice-palette-crimson-600); --t-fg: #fff; }
.g2048 .tile-512  { --t-bg: var(--ice-palette-crimson-700); --t-fg: #fff; }
.g2048 .tile-1024 { --t-bg: var(--ice-palette-navy-700); --t-fg: #fff; }
.g2048 .tile-2048 { --t-bg: var(--ice-palette-navy-900); --t-fg: var(--ice-palette-terracotta-300); }
.g2048 .tile-super { --t-bg: var(--ice-palette-night-950); --t-fg: #fff; }
[data-theme='dark'] .g2048 .tile-2048 .tile-inner { box-shadow: inset 0 0 0 2px var(--ice-palette-terracotta-400); }

.g2048 .tile-new .tile-inner { animation: g2048-appear 200ms ease 100ms backwards; }
.g2048 .tile-merged .tile-inner { z-index: 3; animation: g2048-pop 200ms ease 100ms backwards; }
@keyframes g2048-appear { from { opacity: 0; transform: scale(0); } }
@keyframes g2048-pop { 0% { transform: scale(0); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }

.g2048 .game-message {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: none;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ice-color-surface) 80%, transparent);
  color: var(--ice-color-on-surface);
  text-align: center;
}
.g2048 .game-message p { margin: 0; font-size: clamp(1.6rem, 7vw, 2.6rem); font-weight: 800; }
.g2048 .game-message .lower { display: flex; gap: .6rem; }
.g2048 .game-message.game-won,
.g2048 .game-message.game-over { display: grid; }
.g2048 .game-message .keep-playing-button { display: none; }
.g2048 .game-message.game-won .keep-playing-button { display: inline-block; }

/* ── Falling Blocks ───────────────────────────────────────────────── */
.gblocks {
  --gb-bg: var(--ice-palette-warm-50);
  --gb-grid: var(--ice-palette-line-200);
  --gb-line: rgba(0, 0, 0, .25);
  --gb-i: var(--ice-palette-navy-700);
  --gb-j: var(--ice-palette-slate-600);
  --gb-l: var(--ice-palette-terracotta-600);
  --gb-o: var(--ice-palette-terracotta-300);
  --gb-s: var(--ice-palette-forest-700);
  --gb-t: var(--ice-palette-crimson-400);
  --gb-z: var(--ice-palette-crimson-700);
  --court-h: min(600px, 68vh, calc((100vw - 11rem) * 2));
  display: grid;
  grid-template-columns: auto minmax(7rem, 11rem);
  grid-template-areas: 'court side' 'pad pad';
  justify-content: center;
  gap: 1rem;
}
[data-theme='dark'] .gblocks {
  --gb-bg: var(--ice-palette-graphite-950);
  --gb-grid: var(--ice-palette-graphite-800);
  --gb-line: rgba(255, 255, 255, .22);
  --gb-i: var(--ice-palette-navy-100);
  --gb-j: var(--ice-palette-graphite-300);
  --gb-s: var(--ice-palette-forest-300);
  --gb-z: var(--ice-palette-crimson-300);
}
.gblocks__court-wrap { grid-area: court; position: relative; }
.gblocks__court {
  display: block;
  height: var(--court-h);
  width: calc(var(--court-h) / 2);
  border: 2px solid var(--ice-color-border-strong, var(--ice-color-border));
  border-radius: 4px;
  touch-action: none;
}
.gblocks__side { grid-area: side; display: grid; align-content: start; gap: .6rem; }
.gblocks__next { display: grid; gap: .25rem; font-size: .75rem; }
.gblocks__next canvas {
  width: 100%;
  max-width: 7rem;
  aspect-ratio: 1;
  border: 1px solid var(--ice-color-border);
  border-radius: 4px;
}
.gblocks__pad { grid-area: pad; display: grid; grid-template-columns: repeat(4, 1fr) 1.4fr; gap: .5rem; }
.game-pad {
  min-height: 56px;
  border: 1px solid var(--ice-color-border-strong, var(--ice-color-border));
  border-radius: 8px;
  background: var(--ice-color-surface-muted);
  color: var(--ice-color-on-surface);
  font: 700 1.4rem/1 var(--ice-font-primary, inherit);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}
.game-pad--wide { font-size: 1rem; }
.game-pad:active { background: var(--ice-color-border); }
/* A fine pointer and a keyboard do not need the pad, but it stays usable. */
@media (hover: hover) and (pointer: fine) {
  .gblocks__pad { max-width: 28rem; justify-self: center; width: 100%; }
  .game-pad { min-height: 44px; }
}

/* ── Minesweeper ──────────────────────────────────────────────────── */
.gmines {
  --m-cell: clamp(28px, 8.4vw, 36px);
  --m-closed: var(--ice-palette-navy-100);
  --m-open: var(--ice-color-surface);
  --m-n1: var(--ice-palette-navy-700);
  --m-n2: var(--ice-palette-forest-700);
  --m-n3: var(--ice-palette-crimson-600);
  --m-n4: var(--ice-palette-navy-900);
  --m-n5: var(--ice-palette-terracotta-800);
  --m-n6: var(--ice-palette-ink-900);
}
[data-theme='dark'] .gmines {
  --m-closed: var(--ice-palette-graphite-700);
  --m-open: var(--ice-palette-graphite-900);
  --m-n1: var(--ice-palette-navy-100);
  --m-n2: var(--ice-palette-forest-300);
  --m-n3: var(--ice-palette-crimson-300);
  --m-n4: var(--ice-palette-graphite-100);
  --m-n5: var(--ice-palette-terracotta-300);
  --m-n6: var(--ice-palette-graphite-200);
}
.gmines__scroll { overflow-x: auto; padding-bottom: .25rem; }
.gmines__board {
  display: grid;
  gap: 2px;
  width: max-content;
  margin-inline: auto;
  padding: 4px;
  border-radius: 6px;
  background: var(--ice-color-border);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.gmines__row { display: grid; grid-template-columns: repeat(var(--cols), var(--m-cell)); gap: 2px; }
.gmines__cell {
  width: var(--m-cell);
  height: var(--m-cell);
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: var(--m-closed);
  color: var(--ice-color-on-surface);
  font: 800 calc(var(--m-cell) * .5)/1 var(--ice-font-primary, inherit);
  cursor: pointer;
  touch-action: manipulation;
}
.gmines__cell:focus-visible { outline: 3px solid var(--ice-color-action); outline-offset: -3px; }
.gmines__cell.is-open { background: var(--m-open); cursor: default; }
.gmines__cell.is-flag { color: var(--ice-color-action); }
.gmines__cell.is-mine { color: var(--ice-color-on-surface); }
.gmines__cell.is-hit { background: var(--ice-color-action); color: #fff; }
.gmines__cell.is-wrong { text-decoration: line-through; opacity: .6; }
.gmines__cell.n1 { color: var(--m-n1); } .gmines__cell.n2 { color: var(--m-n2); }
.gmines__cell.n3 { color: var(--m-n3); } .gmines__cell.n4 { color: var(--m-n4); }
.gmines__cell.n5 { color: var(--m-n5); } .gmines__cell.n6,
.gmines__cell.n7, .gmines__cell.n8 { color: var(--m-n6); }
.gmines.is-flagmode .gmines__board { outline: 2px solid var(--ice-color-action); outline-offset: 2px; }

/* ── Bagh-Chal ────────────────────────────────────────────────────── */
.gbagh {
  --b-bg: var(--ice-palette-warm-100);
  --b-line: var(--ice-palette-navy-800);
  --b-tiger: var(--ice-palette-terracotta-600);
  --b-stripe: var(--ice-palette-ink-900);
  --b-goat: #fff;
  --b-goat-line: var(--ice-palette-ink-900);
  --b-mark: var(--ice-color-action);
  max-width: 560px;
  margin-inline: auto;
}
[data-theme='dark'] .gbagh {
  --b-bg: var(--ice-palette-graphite-800);
  --b-line: var(--ice-palette-graphite-300);
  --b-goat: var(--ice-palette-graphite-100);
  --b-mark: var(--ice-palette-crimson-300);
}
.gbagh__board { display: block; width: 100%; height: auto; margin-top: .75rem; touch-action: manipulation; }
.gbagh__bg { fill: var(--b-bg); stroke: var(--b-line); stroke-width: 2; }
.gbagh__lines line { stroke: var(--b-line); stroke-width: 3; stroke-linecap: round; }
.bc-pt { cursor: pointer; outline: none; }
.bc-pt__hit { fill: transparent; }
.bc-pt__dot { fill: var(--b-line); }
.bc-pt__ring { fill: none; stroke: transparent; stroke-width: 5; }
.bc-pt__tiger, .bc-pt__goat { display: none; }
.bc-pt.has-tiger .bc-pt__tiger, .bc-pt.has-goat .bc-pt__goat { display: inline; }
.bc-pt.has-tiger .bc-pt__dot, .bc-pt.has-goat .bc-pt__dot { display: none; }
.bc-pt.is-target .bc-pt__ring { stroke: var(--b-mark); stroke-dasharray: 8 7; }
.bc-pt.is-selected .bc-pt__ring { stroke: var(--b-mark); }
.bc-pt.is-movable:hover .bc-pt__ring,
.bc-pt.is-place:hover .bc-pt__ring { stroke: var(--b-mark); stroke-opacity: .5; }
.bc-pt:focus-visible .bc-pt__ring { stroke: var(--ice-color-on-surface); stroke-width: 4; }

.bc-tiger__body { fill: var(--b-tiger); stroke: var(--b-stripe); stroke-width: 3; }
.bc-tiger__ear { fill: var(--b-tiger); stroke: var(--b-stripe); stroke-width: 3; stroke-linejoin: round; }
.bc-tiger__stripe { fill: none; stroke: var(--b-stripe); stroke-width: 4; stroke-linecap: round; }
.bc-tiger__eye { fill: var(--b-stripe); }
.bc-goat__body { fill: var(--b-goat); stroke: var(--b-goat-line); stroke-width: 3; }
.bc-goat__horn { fill: none; stroke: var(--b-goat-line); stroke-width: 4; stroke-linecap: round; }
.bc-goat__eye { fill: var(--b-goat-line); }
.bc-goat__nose { fill: none; stroke: var(--b-goat-line); stroke-width: 2.5; stroke-linecap: round; }
.gbagh__record { font-size: .9rem; color: var(--ice-color-text-muted, currentColor); }

/* ── small screens ────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .game-stat { min-width: 0; padding: .3rem .55rem; }
  .game-stat b { font-size: 1.05rem; }
  .gblocks { grid-template-columns: auto minmax(5.5rem, 1fr); gap: .6rem; }
  .gblocks .game-btn { padding: 0 .5rem; }
}

/* ── reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .g2048 .tile { transition: none; }
  .g2048 .tile-new .tile-inner,
  .g2048 .tile-merged .tile-inner,
  .g2048 .score-addition { animation: none; }
  .g2048 .score-addition { display: none; }
}

/* ── plain mode ───────────────────────────────────────────────────── */
html.kaamko-plain .game-stat { background: transparent; }
html.kaamko-plain .game-panel { padding-inline: 0; }

/* ── /games hub cards: the title is the link, the card is the target ── */
.game-card { position: relative; }
.game-card__link { color: inherit; text-decoration: none; }
.game-card__link::after { content: ''; position: absolute; inset: 0; }
.game-card:hover .game-card__link,
.game-card__link:focus-visible { text-decoration: underline; }