/* ============================================================================
   MIGHTY PLAY v2.0.0 — games.css
   Board-specific layout & presentation for each of the five games.
   ========================================================================= */

/* ═══════════════════════════════ TIC-TAC-TOE ═══════════════════════════ */
.ttt-board {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  gap: clamp(8px, 2vw, 14px);
  width: min(620px, calc(100vw - 32px), calc(100vh - var(--board-vh-budget)));
  aspect-ratio: 1;
}
.ttt-cell {
  background: var(--panel-2); border: 1.5px solid var(--line); border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  padding: 0; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.ttt-cell:hover:not(:disabled):not(.is-filled) { border-color: var(--line-strong); background: var(--panel-3); }
.ttt-cell:active:not(:disabled):not(.is-filled) { transform: scale(0.96); }
.ttt-cell:disabled { cursor: default; }
.ttt-cell svg { width: 62%; height: 62%; }
.ttt-cell.is-win { border-color: var(--pl); box-shadow: 0 0 0 2px rgba(127,227,255,0.4), 0 0 22px rgba(127,227,255,0.35); background: rgba(127,227,255,0.10); }
.ttt-mark-x { stroke: var(--p1); stroke-width: 8; fill: none; stroke-linecap: round; }
.ttt-mark-o { stroke: var(--p2); stroke-width: 8; fill: none; }
.ttt-mark-enter { animation: markIn var(--t) var(--ease-out); }
@keyframes markIn { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
html[data-motion="off"] .ttt-mark-enter { animation: none; }
.ttt-winline { position: absolute; background: var(--pl); border-radius: 4px; box-shadow: 0 0 14px rgba(127,227,255,0.8); transform-origin: 0 50%; pointer-events: none; }

/* ═══════════════════════════════ FOUR IN A ROW ═════════════════════════ */
.c4-wrap { position: relative; width: min(760px, calc(100vw - 32px), calc((100vh - var(--board-vh-budget)) * 1.09)); user-select: none; }
.c4-cols {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: clamp(5px, 1.1vw, 9px); padding: clamp(8px, 1.6vw, 14px);
  border: 1.5px solid transparent; box-sizing: border-box;
  position: absolute; inset: 0; z-index: 3;
}
.c4-colbtn { background: transparent; border: 0; cursor: pointer; min-height: 100%; }
.c4-colbtn:disabled { cursor: not-allowed; }
.c4-colbtn:hover:not(:disabled) .c4-hint { opacity: 1; }
.c4-board {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(6, 1fr);
  gap: clamp(5px, 1.1vw, 9px); padding: clamp(8px, 1.6vw, 14px);
  border-radius: var(--r-lg); background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1.5px solid var(--line); aspect-ratio: 7 / 6.4;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.35);
}
.c4-hole { position: relative; border-radius: 50%; background: var(--bg-2); box-shadow: inset 0 3px 8px rgba(0,0,0,0.55); overflow: visible; }
.c4-piece {
  position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 -4px 8px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.3);
}
.c4-piece--p1 { background: radial-gradient(circle at 35% 30%, var(--p1-hi), var(--p1) 60%, var(--pl-deep) 100%); }
.c4-piece--p2 { background: radial-gradient(circle at 35% 30%, var(--p2-hi), var(--p2) 60%, #5A3FB8 100%); }
.c4-piece__mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(0,0,0,0.3); font-weight: 900; font-size: 60%; }
.c4-hole.is-win .c4-piece { box-shadow: 0 0 0 3px rgba(255,255,255,0.55), 0 0 16px rgba(255,255,255,0.5); }
.c4-preview {
  position: absolute; top: -13%; left: 50%; width: 74%; aspect-ratio: 1; border-radius: 50%;
  transform: translateX(-50%); opacity: 0; transition: opacity var(--t-fast);
  pointer-events: none;
}
.c4-preview--p1 { background: radial-gradient(circle at 35% 30%, var(--p1-hi), var(--p1) 70%); }
.c4-preview--p2 { background: radial-gradient(circle at 35% 30%, var(--p2-hi), var(--p2) 70%); }
.c4-col-active .c4-preview { opacity: 0.85; }

/* Narrow phones (≤388px): 7 columns can't clear the 44px minimum tap size
   with the default frame/padding/gap, so the board bleeds edge-to-edge and
   internal chrome is trimmed to the minimum needed to keep every column
   ≥44px wide at a true 320px viewport, verified by measurement. */
@media (max-width: 388px) {
  .c4-wrap { width: calc(100% + 20px); margin-left: -10px; margin-right: -10px; }
  .c4-board, .c4-cols { padding: 0; gap: 1px; border-width: 1px; }
}
.c4-hint { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); width: 10px; height: 10px; border-radius: 50%; background: var(--dim); opacity: 0; transition: opacity var(--t-fast); }
.c4-piece.c4-drop { animation: c4fall 0.36s cubic-bezier(0.3,0.65,0.4,1); }
@keyframes c4fall { 0% { transform: translateY(-280%); } 68% { transform: translateY(10%); } 100% { transform: translateY(0); } }
html[data-motion="off"] .c4-piece.c4-drop { animation: none; }

/* ═══════════════════════════════ MEMORY MATCH ═══════════════════════════ */
.mem-board {
  display: grid; gap: clamp(8px, 1.8vw, 16px); width: min(680px, calc(100vw - 32px), calc((100vh - var(--board-vh-budget)) * 1.125));
  --mem-cols: 3;
  grid-template-columns: repeat(var(--mem-cols), 1fr);
}
.mem-board[data-size="standard"] { --mem-cols: 4; width: min(800px, calc(100vw - 32px), calc(100vh - var(--board-vh-budget))); }
.mem-card { aspect-ratio: 3 / 4; perspective: 900px; cursor: pointer; border: 0; background: none; padding: 0; }
.mem-card:disabled { cursor: default; }
.mem-card__inner {
  display: block; position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transition: transform 0.45s var(--ease-out);
  border-radius: var(--r-md);
}
.mem-card.is-flipped .mem-card__inner, .mem-card.is-matched .mem-card__inner { transform: rotateY(180deg); }
html[data-motion="off"] .mem-card__inner { transition: none; }
.mem-face {
  position: absolute; inset: 0; border-radius: var(--r-md); backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--line);
  overflow: hidden;
}
.mem-face--back { background: linear-gradient(155deg, #101735, #1B2350 55%, #101735); }
.mem-face--front { transform: rotateY(180deg); background: var(--panel-2); }
.mem-face--front svg { width: 56%; height: 56%; }
.mem-card.is-matched .mem-face--front { background: rgba(143,242,196,0.12); border-color: var(--mint); }
.mem-cardback-emblem { width: 52%; height: 52%; object-fit: contain; opacity: 0.92; filter: drop-shadow(0 0 10px rgba(127,227,255,0.25)); }
.mem-face--back::before {
  content: ''; position: absolute; inset: 6px; border: 1px solid rgba(127,227,255,0.22); border-radius: calc(var(--r-md) - 2px);
  pointer-events: none;
}
.mem-card.is-mismatch .mem-face--back { animation: memShake 0.4s; }
@keyframes memShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
html[data-motion="off"] .mem-card.is-mismatch .mem-face--back { animation: none; }

/* ═══════════════════════════════ SOLITAIRE ══════════════════════════════ */
.sol-wrap {
  --card-w: min(clamp(46px, 8.6vw, 108px), calc((100vh - var(--sol-vh-budget)) / 4.1));
  --card-h: calc(var(--card-w) * 1.42); width: 100%; max-width: 960px;
}
.sol-row { display: flex; gap: clamp(6px, 1.4vw, 14px); margin-bottom: clamp(10px, 2vw, 18px); }
.sol-row--top { justify-content: space-between; }
.sol-stockwaste { display: flex; gap: clamp(6px, 1.4vw, 14px); }
.sol-foundations { display: flex; gap: clamp(6px, 1.4vw, 14px); }
.sol-tableau { display: flex; gap: clamp(6px, 1.4vw, 14px); align-items: flex-start; }
.sol-col { position: relative; width: var(--card-w); min-height: var(--card-h); }

.pile {
  width: var(--card-w); height: var(--card-h); border-radius: calc(var(--r-sm) * (var(--card-w) / 60));
  border: 1.5px dashed var(--line); position: relative; flex: none;
  display: flex; align-items: center; justify-content: center; color: var(--dim);
}
.pile.is-legal { border-color: var(--mint); box-shadow: 0 0 0 2px rgba(143,242,196,0.3); }
/* Empty foundation slots get a violet-tinted treatment (border + faint
   fill) so they read as part of the Mighty Play identity instead of a
   generic flat gray placeholder — stock/waste keep the plain dashed look
   since they represent a face-down pile, not a violet "home" target. */
.pile--foundation { border-style: solid; border-color: var(--line-strong); background: var(--violet-soft); }
.pile--foundation.is-legal { border-color: var(--mint); background: rgba(143,242,196,0.1); }
.pile__label { font-size: calc(var(--card-w) * 0.16); text-align: center; padding: 4px; opacity: 0.6; }
.pile__suit { width: 46%; height: 46%; opacity: 0.35; }

.card {
  width: var(--card-w); height: var(--card-h); border-radius: calc(var(--r-sm) * (var(--card-w) / 60));
  position: absolute; left: 0; top: 0; background: #EFF3FF; color: #14213A;
  border: 1.5px solid rgba(0,0,0,0.15); box-shadow: 0 2px 5px rgba(0,0,0,0.35);
  display: flex; flex-direction: column; justify-content: space-between; padding: 6% 7%;
  cursor: pointer; transition: box-shadow var(--t-fast), transform var(--t-fast), outline-color var(--t-fast);
  font-weight: 800; user-select: none;
}
.card.is-red { color: #C23B4A; }
.card.is-black { color: #1B2138; }
/* Fixed-width corner box (not shrink-to-fit) so every rank — including the
   two-character "10" — sits in the exact same footprint, centered directly
   above its suit pip, with no shift or crowding between ranks. */
.card__corner {
  width: calc(var(--card-w) * 0.32);
  font-size: calc(var(--card-w) * 0.19); line-height: 1;
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--card-w) * 0.03);
  font-variant-numeric: tabular-nums;
}
.card__corner--br { align-self: flex-end; transform: rotate(180deg); }
.card__pip { font-size: calc(var(--card-w) * 0.15); line-height: 1; }
.card__center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(var(--card-w) * 0.42); opacity: 0.92; }
.card.is-facedown { background: linear-gradient(155deg, #101735, #1B2350 55%, #101735); border-color: rgba(127,227,255,0.18); cursor: default; }
.card.is-facedown .sol-cardback { position: absolute; inset: 8%; border-radius: calc(var(--r-sm) * (var(--card-w) / 60) - 2px); border: 1px solid rgba(127,227,255,0.22); display: flex; align-items: center; justify-content: center; }
.card.is-facedown .sol-cardback img { width: 62%; height: 62%; object-fit: contain; filter: drop-shadow(0 0 8px rgba(127,227,255,0.3)); }
.card.is-selected { outline: 3px solid var(--pl); outline-offset: 1px; box-shadow: 0 0 16px rgba(127,227,255,0.55); z-index: 50 !important; transform: translateY(-6px); }
.card.is-hint { outline: 3px solid var(--gold); outline-offset: 1px; box-shadow: 0 0 16px rgba(255,214,138,0.6); }
.card.is-auto { outline: 2px solid var(--mint); }
.card:disabled, .card.is-facedown { cursor: default; }
.card.is-moving { transition: left var(--t) var(--ease-out), top var(--t) var(--ease-out); }
html[data-motion="off"] .card.is-moving { transition: none; }

.sol-progress { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; font-size: 13px; color: var(--dim); }
.sol-progress b { color: var(--text); }
.sol-stockcount { position: absolute; bottom: -22px; left: 0; right: 0; text-align: center; font-size: 11.5px; color: var(--dim); }

/* ═══════════════════════════════ MANCALA ════════════════════════════════ */
/* Landscape / desktop / Tesla: the traditional two-row board, stores on
   each end. Named grid-areas (set inline by JS as style.gridArea) let this
   and the portrait layout below place the exact same elements completely
   differently — no JS involved in the responsive change at all. */
.manc-board {
  display: grid;
  grid-template-columns: minmax(64px, 0.9fr) repeat(6, 1fr) minmax(64px, 0.9fr);
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "s2 p2-6 p2-5 p2-4 p2-3 p2-2 p2-1 s1"
    "s2 p1-1 p1-2 p1-3 p1-4 p1-5 p1-6 s1";
  gap: clamp(8px, 1.6vw, 14px); place-items: stretch;
  width: min(880px, calc(100vw - 32px));
  padding: clamp(12px, 2.2vw, 20px);
  background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1.5px solid var(--line);
  border-radius: var(--r-xl); box-shadow: inset 0 2px 14px rgba(0,0,0,0.3);
}
.manc-divider { display: none; }
.manc-store {
  grid-area: s1; border-radius: var(--r-lg); background: var(--bg-2); border: 1.5px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 4px; position: relative; min-height: 44px;
}
.manc-store--p2 { grid-area: s2; }
.manc-store__label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--dim); }
.manc-store__count { font-size: clamp(20px, 3.4vw, 30px); font-weight: 800; font-variant-numeric: tabular-nums; }
.manc-store--p1 { box-shadow: inset 0 0 0 1.5px rgba(127,227,255,0.25); }
.manc-store--p2 { box-shadow: inset 0 0 0 1.5px rgba(179,156,255,0.25); }

.manc-pit {
  aspect-ratio: 1; min-width: 44px; min-height: 44px;
  border-radius: 50%; background: var(--bg-2); border: 1.5px solid var(--line);
  display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.manc-pit:disabled, .manc-pit.is-inert { cursor: default; }
.manc-pit.is-selectable:hover { border-color: var(--line-strong); background: var(--panel-3); }
.manc-pit.is-selectable:active { transform: scale(0.95); }
.manc-pit.is-empty-target { box-shadow: 0 0 0 2px rgba(143,242,196,0.35); }
.manc-pit__count {
  position: relative; z-index: 2;
  font-size: clamp(15px, 2.4vw, 21px); font-weight: 800;
  font-variant-numeric: tabular-nums; min-width: 1.4ch; text-align: center;
}
.manc-pit__count::before {
  content: ''; position: absolute; z-index: -1; inset: -22% -55%;
  border-radius: 50%; background: radial-gradient(circle, rgba(10,8,24,0.55) 0%, rgba(10,8,24,0) 72%);
}
/* Decorative stones form a restrained ring around the pit's inner rim so
   they never sit on top of the numeral, which is the authoritative count
   and always owns the dead center. Up to 12 dots (setPitDisplay caps the
   count) are placed at fixed 30°-apart slots via nth-child + a rotate/
   translate/counter-rotate trick, so the dots themselves stay upright. */
.manc-pit__stones { position: absolute; inset: 0; pointer-events: none; }
.manc-stone {
  position: absolute; top: 50%; left: 50%; width: 10%; aspect-ratio: 1; margin: -5% 0 0 -5%;
  border-radius: 50%; background: var(--gold); box-shadow: 0 0 3px rgba(255,214,138,0.5);
  opacity: 0.5; transform: rotate(var(--manc-stone-angle, 0deg)) translateY(-37%) rotate(calc(-1 * var(--manc-stone-angle, 0deg)));
}
.manc-stone:nth-child(1)  { --manc-stone-angle: 0deg; }
.manc-stone:nth-child(2)  { --manc-stone-angle: 30deg; }
.manc-stone:nth-child(3)  { --manc-stone-angle: 60deg; }
.manc-stone:nth-child(4)  { --manc-stone-angle: 90deg; }
.manc-stone:nth-child(5)  { --manc-stone-angle: 120deg; }
.manc-stone:nth-child(6)  { --manc-stone-angle: 150deg; }
.manc-stone:nth-child(7)  { --manc-stone-angle: 180deg; }
.manc-stone:nth-child(8)  { --manc-stone-angle: 210deg; }
.manc-stone:nth-child(9)  { --manc-stone-angle: 240deg; }
.manc-stone:nth-child(10) { --manc-stone-angle: 270deg; }
.manc-stone:nth-child(11) { --manc-stone-angle: 300deg; }
.manc-stone:nth-child(12) { --manc-stone-angle: 330deg; }
.manc-pit--p1 { grid-row: 2; } .manc-pit--p2 { grid-row: 1; }

/* Distribution animation: a stone landing gets a brief, non-resizing pulse
   (no transform/scale, so it stays comfortable under reduced motion too). */
.manc-pit.manc-just-landed { background: rgba(255,214,138,0.22); border-color: rgba(255,214,138,0.55); }
.manc-pit.manc-captured { background: rgba(255,156,138,0.22); border-color: var(--coral); box-shadow: 0 0 0 2px rgba(255,156,138,0.35); }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .manc-just-landed { transition: background var(--t-fast), border-color var(--t-fast); }
  html:not([data-motion="off"]) .manc-captured { transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); }
}

/* Phone portrait: stacked reflow so every pit clears the 44px touch-target
   minimum, which the old single 8-column layout could not guarantee. */
@media (max-width: 640px) and (orientation: portrait) {
  .manc-board {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas:
      "s2 s2 s2 s2 s2 s2"
      "p2-1 p2-2 p2-3 p2-4 p2-5 p2-6"
      "div div div div div div"
      "p1-1 p1-2 p1-3 p1-4 p1-5 p1-6"
      "s1 s1 s1 s1 s1 s1";
    width: min(520px, calc(100vw - 32px));
    gap: clamp(6px, 2vw, 10px);
  }
  .manc-store { flex-direction: row; justify-content: center; gap: 10px; padding: 10px; min-height: 0; }
  /* Equal round pits: the width comes from the column, the height from the
     aspect ratio (a stretched row height was widening the first column). */
  .manc-pit { min-width: 44px; min-height: 44px; width: 100%; height: auto; align-self: center; }
  .manc-divider {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    color: var(--dim); font-size: 11px; letter-spacing: 0.03em; padding: 2px 0;
  }
  .manc-divider__arrow { font-size: 15px; color: var(--violet-hi); }
}

/* Narrowest phones (≤355px): even the portrait reflow's 6-per-row pits hit
   their 44px floor before the board's own declared width, which forced the
   whole grid (and the spanning stores) wider than the viewport. Bleed the
   board edge-to-edge and trim its chrome so 6 x 44px pits actually fit. */
@media (max-width: 355px) and (orientation: portrait) {
  .manc-board {
    width: calc(100% + 20px); margin-left: -10px; margin-right: -10px;
    padding: 6px; gap: 5px; border-width: 1px;
  }
}

/* ═══════════════════════ Shared card-suit colour helpers ═══════════════ */
.suit-red { color: #C23B4A; fill: #C23B4A; }
.suit-black { color: #1B2138; fill: #1B2138; }