/* Districtree Games (2026.11.14.1). Plain boards, one design, small motion only. */
.games{ --g-r: 12px; }
.g-cards{ list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(16rem, 1fr)); }
.g-card{ display:flex; gap:14px; align-items:flex-start; padding:14px; border:1px solid var(--line); border-radius:var(--g-r); background:var(--surface); color:var(--ink); text-decoration:none; height:100%; box-sizing:border-box; }
.g-card:hover, .g-card:focus-visible{ border-color:var(--accent); box-shadow:0 2px 0 var(--accent-soft); }
.g-art{ flex:0 0 52px; height:52px; display:grid; place-items:center; font-size:30px; line-height:1; background:var(--surface-2); border-radius:10px; }
.g-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.g-name{ font:700 1.08rem/1.2 var(--display); }
.g-age{ align-self:flex-start; font-size:.74rem; font-weight:700; color:var(--accent); background:var(--accent-soft); border-radius:999px; padding:1px 8px; }
.g-about{ font-size:.9rem; color:var(--muted); line-height:1.35; }

/* the stage */
.g-stage{ max-width:720px; margin:0 auto; }
.g-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 8px; }
.g-title{ margin:0; font:700 1.5rem/1.2 var(--display); }
.g-setup{ display:flex; flex-direction:column; gap:14px; padding:16px; border:1px solid var(--line); border-radius:var(--g-r); background:var(--surface); }
.g-field{ display:flex; flex-direction:column; gap:6px; }
.g-label{ margin:0; font-size:.82rem; font-weight:700; color:var(--muted); }
.g-seg{ display:flex; flex-wrap:wrap; gap:6px; }
.g-seg button{ font:inherit; font-size:.95rem; padding:9px 14px; min-height:44px; border-radius:999px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); cursor:pointer; }
.g-seg button[aria-checked="true"]{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700; }
.g-start{ align-self:flex-start; font-size:1.05rem; padding:10px 28px; }
.sl-row .g-label{ color:var(--who); }
.g-banner{ margin:10px 0; padding:10px 14px; border-radius:10px; border-left:5px solid var(--who, var(--accent)); background:var(--surface); font-weight:700; font-size:1.05rem; }
.g-banner[hidden]{ display:none; }
.g-play{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.g-tools{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:14px 0 6px; }
.g-score{ margin:0; font-weight:700; font-variant-numeric:tabular-nums; }

/* Memory Match */
.mm-grid{ display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:8px; width:min(100%, calc(var(--cols) * 104px)); }
.mm-card{ aspect-ratio:3/4; border:0; border-radius:10px; background:var(--accent); cursor:pointer; position:relative; padding:0; }
.mm-card::after{ content:"?"; color:#fff; font:700 1.6rem var(--display); opacity:.5; }
.mm-face{ display:none; font-size:clamp(28px, 9vw, 44px); line-height:1; }
.mm-card.up, .mm-card.done{ background:#fff; box-shadow:inset 0 0 0 2px var(--line); animation:mm-flip .18s ease-out; }
@keyframes mm-flip{ from{ transform:scaleX(.05); } to{ transform:none; } }
.mm-card.up::after, .mm-card.done::after{ content:none; }
.mm-card.up .mm-face, .mm-card.done .mm-face{ display:inline; }
.mm-card.done{ box-shadow:inset 0 0 0 3px var(--who); cursor:default; }

/* Tic-Tac-Toe */
.tt-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; width:min(100%, 330px); background:var(--line); padding:6px; border-radius:12px; }
.tt-cell{ aspect-ratio:1; border:0; border-radius:8px; background:var(--surface); color:var(--ink); font:700 clamp(40px, 16vw, 72px)/1 var(--display); cursor:pointer; }
.tt-cell.win{ background:#FFF4CC; }

/* Snakes and Ladders */
.sl-start{ display:flex; gap:8px; align-items:center; min-height:30px; }
.sl-wrap{ position:relative; width:min(100%, 520px); }
.sl-grid{ display:grid; grid-template-columns:repeat(10, 1fr); border:2px solid var(--ink); border-radius:6px; overflow:hidden; }
.sl-cell{ aspect-ratio:1; background:#FFF8E6; position:relative; display:flex; flex-wrap:wrap; align-content:flex-end; justify-content:center; gap:1px; padding:1px; box-sizing:border-box; }
.sl-cell.alt{ background:#E9F3FF; }
.sl-num{ position:absolute; top:1px; left:2px; font-size:clamp(7px, 1.8vw, 11px); color:#6B7785; font-weight:700; }
.sl-cell[data-n="100"]{ background:#FFE9A8; }
.sl-art{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.sl-ladder line{ stroke:#8A5A2B; stroke-width:.9; stroke-linecap:round; }
.sl-ladder .rung{ stroke-width:.6; }
.sl-snake path{ fill:none; stroke:#2E9B57; stroke-width:2.2; stroke-linecap:round; opacity:.9; }
.sl-snake circle{ fill:#2E9B57; }
.sl-snake .eye{ fill:#fff; }
.sl-token{ width:clamp(10px, 3.4vw, 18px); height:clamp(10px, 3.4vw, 18px); border-radius:50%; background:var(--who); border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.35); z-index:2; }
.sl-start .sl-token{ width:22px; height:22px; }
.sl-bar{ display:flex; align-items:center; gap:14px; }
.sl-roll{ font-size:1.2rem; padding:12px 34px; min-height:52px; background:var(--who, var(--accent)); border-color:var(--who, var(--accent)); color:#fff; }
.sl-roll:disabled{ opacity:.5; }
.sl-die{ font-size:1.6rem; font-weight:700; min-width:3.5em; }
.sl-note{ margin:0; }

/* Connect Four */
.c4-board{ display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; padding:8px; border-radius:14px; background:#1F5FAE; width:min(100%, 460px); }
.c4-col{ display:grid; grid-template-rows:repeat(6, 1fr); gap:4px; border:0; padding:2px; background:transparent; border-radius:8px; cursor:pointer; }
.c4-col:hover, .c4-col:focus-visible{ background:rgba(255,255,255,.12); }
.c4-hole{ aspect-ratio:1; border-radius:50%; background:#fff; position:relative; overflow:visible; }
.c4-disc{ position:absolute; inset:0; border-radius:50%; background:var(--who); box-shadow:inset 0 -3px 0 rgba(0,0,0,.18); animation:c4-drop calc(.08s * var(--rows) + .08s) ease-in; }
.c4-hole.win .c4-disc{ box-shadow:0 0 0 3px #fff, 0 0 0 6px #111; }
@keyframes c4-drop{ from{ transform:translateY(calc(-110% * var(--rows))); } to{ transform:none; } }

/* Hangman with balloons */
.hm-pick{ display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center; }
.hm-secret{ font:700 1.3rem ui-monospace, Consolas, monospace; padding:10px 12px; border:1px solid var(--line); border-radius:10px; width:min(100%, 280px); text-align:center; }
.hm-sky{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; min-height:86px; align-items:flex-end; }
.hm-balloon{ width:34px; height:42px; border-radius:50% 50% 48% 48%; background:var(--who); position:relative; margin-bottom:28px; box-shadow:inset -5px -6px 0 rgba(0,0,0,.12); transition:transform .25s ease, opacity .25s ease; }
.hm-balloon::after{ content:""; position:absolute; left:50%; top:100%; width:1px; height:28px; background:#7A8794; }
.hm-balloon.pop{ transform:scale(1.5); opacity:0; }
.hm-word{ margin:6px 0; font:700 clamp(1.4rem, 7vw, 2.3rem)/1.2 ui-monospace, Consolas, monospace; letter-spacing:.08em; text-align:center; word-break:break-all; }
.hm-keys{ display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; width:min(100%, 440px); }
.hm-key{ min-height:46px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); font:700 1.05rem var(--body); cursor:pointer; }
.hm-key.yes{ background:#DDF3E4; border-color:#2E9B57; color:#1E6B3C; }
.hm-key.no{ background:var(--surface-2); color:var(--muted); text-decoration:line-through; }

/* Dots and Boxes */
.db-board{ width:min(100%, 440px); height:auto; touch-action:manipulation; }
.db-dot{ fill:var(--ink); }
.db-line{ stroke:var(--line); stroke-width:.5; stroke-dasharray:1 1; stroke-linecap:round; }
.db-line.on{ stroke-width:1.2; stroke-dasharray:none; }
.db-hit{ stroke:transparent; stroke-width:4.5; cursor:pointer; }
.db-hit:hover{ stroke:rgba(43,95,128,.15); }
.db-hit:focus{ outline:none; }
.db-hit:focus-visible{ stroke:rgba(43,95,128,.3); }
.db-box{ fill:transparent; }
.db-box.won{ opacity:.35; }

/* Battleship */
.bs-boards{ display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; }
.bs-side{ width:min(100%, 440px); }
.bs-side.small-side{ width:min(70%, 280px); }
.bs-grid{ display:grid; grid-template-columns:repeat(var(--n), 1fr); gap:2px; padding:3px; background:#1C4E80; border-radius:8px; }
.bs-cell{ aspect-ratio:1; border:0; padding:0; background:#3D7CC9; border-radius:2px; position:relative; }
.bs-theirs .bs-cell{ cursor:crosshair; }
.bs-theirs.idle .bs-cell{ cursor:default; opacity:.8; }
.bs-cell.ship{ background:#8A96A3; }
.bs-cell.miss::after{ content:""; position:absolute; inset:36%; border-radius:50%; background:#fff; opacity:.85; }
.bs-cell.hit{ background:#D64545; }
.bs-cell.hit::after{ content:"\00d7"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-weight:700; font-size:clamp(9px, 3vw, 16px); }
.bs-cell.sunk{ background:#7A1F1F; }
.bs-log{ margin:0; min-height:1.4em; font-weight:700; text-align:center; }
.bs-setup{ display:flex; gap:8px; }
.bs-pass{ position:fixed; inset:0; z-index:1000; background:#000; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:24px; user-select:none; touch-action:manipulation; cursor:pointer; }
.bs-pass[hidden]{ display:none; }
.bs-pass-h{ margin:0; font:700 1.8rem/1.2 var(--display); }
.bs-pass-s{ margin:0; font-size:1.1rem; opacity:.85; }

/* Chess */
.ch-bar{ display:flex; justify-content:space-between; align-items:center; width:min(100%, 480px); font-weight:700; }
.ch-clock{ font:700 1.15rem ui-monospace, Consolas, monospace; padding:3px 10px; border-radius:8px; background:var(--surface-2); color:var(--muted); font-variant-numeric:tabular-nums; }
.ch-clock.on{ background:var(--ink); color:var(--surface); }
.ch-clock.low.on{ background:#D64545; color:#fff; }
.ch-board{ display:grid; grid-template-columns:repeat(8, 1fr); width:min(100%, 480px); border:3px solid #5C4632; border-radius:4px; }
.ch-sq{ aspect-ratio:1; border:0; padding:0; color:#1B1B1B; background:#F0D9B5; font-size:clamp(24px, 8.6vw, 46px); line-height:1; display:grid; place-items:center; cursor:pointer; position:relative; font-family:"Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", serif; }
.ch-sq.dark{ background:#B58863; }
.ch-sq.pw{ color:#fff; text-shadow:0 0 1px #000, 0 0 1px #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.ch-sq.pb{ color:#1B1B1B; text-shadow:0 0 1px rgba(255,255,255,.4); }
.ch-sq.last{ box-shadow:inset 0 0 0 100px rgba(255,214,0,.32); }
.ch-sq.sel{ box-shadow:inset 0 0 0 4px #2E6FD8; }
.ch-sq.to::after{ content:""; position:absolute; width:28%; height:28%; border-radius:50%; background:rgba(0,0,0,.25); }
.ch-sq.cap{ box-shadow:inset 0 0 0 4px rgba(214,69,69,.85); }
.ch-sq.check{ box-shadow:inset 0 0 0 100px rgba(214,69,69,.55); }
.ch-promo{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:center; padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.ch-promo[hidden]{ display:none; }
.ch-presets .g-seg button{ font-size:.86rem; }

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tt-cell.win{ background:#4A3F12; }
  :root:not([data-theme="light"]) .mm-card.up, :root:not([data-theme="light"]) .mm-card.done{ background:#2A3540; }
}
:root[data-theme="dark"] .tt-cell.win{ background:#4A3F12; }
:root[data-theme="dark"] .mm-card.up, :root[data-theme="dark"] .mm-card.done{ background:#2A3540; }
@media (prefers-reduced-motion: reduce){
  .hm-balloon{ transition:none; }
  .mm-card.up, .mm-card.done{ animation:none; }
  .c4-disc{ animation:none; }
}