/* Sartitrha games: shared styles. Colours come from the site theme (--c-*), so light/dark follow the site. */
.gm { --gm-gap: 10px; color: var(--c-text); }
.gm-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.gm-btn { height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.gm-btn:hover { border-color: var(--c-brand); color: var(--c-brand); }
.gm-btn.primary { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-brand-ink); }
.gm-btn.primary:hover { opacity: .9; color: var(--c-brand-ink); }
.gm-btn[aria-pressed="true"] { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-brand-ink); }
.gm-btn:disabled { opacity: .5; cursor: default; }
.gm-btn:focus-visible, .gm-cell:focus-visible { outline: 3px solid var(--c-focus, var(--c-brand)); outline-offset: 2px; }
.gm-sel { height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); font: inherit; font-size: 14px; }
.gm-status { min-height: 28px; margin: 6px 0 12px; font-weight: 800; font-size: 17px; }
.gm-status.win { color: #15803d; }
.gm-status.lose { color: #b91c1c; }
.gm-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 14px; color: var(--c-text-muted); margin-bottom: 10px; }
.gm-meta b { color: var(--c-text); font-variant-numeric: tabular-nums; }
.gm-ltr { direction: ltr; }
.gm-card { border: 1px solid var(--c-border); background: var(--c-surface); border-radius: 12px; padding: 14px; }
.gm-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(0 0 0 / .45); border-radius: inherit; z-index: 5; }
.gm-overlay > div { background: var(--c-surface); color: var(--c-text); border-radius: 12px; padding: 18px 22px; text-align: center; box-shadow: 0 10px 30px rgb(0 0 0 / .3); }

/* ── Chess ── */
.ch-wrap { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ch-wrap { grid-template-columns: minmax(0, 1fr) 190px; } }
.ch-board { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); width: 100%; max-width: 560px; aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 3px solid #7a5230; user-select: none; }
.ch-sq { position: relative; display: grid; place-items: center; border: 0; padding: 0; cursor: pointer; font-size: clamp(26px, 8.4vw, 52px); line-height: 1; font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", serif; }
.ch-sq.l { background: #f0d9b5; } .ch-sq.d { background: #b58863; }
.ch-sq.sel { box-shadow: inset 0 0 0 4px #2563eb; }
.ch-sq.last { background-image: linear-gradient(rgb(250 204 21 / .45), rgb(250 204 21 / .45)); }
.ch-sq.chk { background-image: radial-gradient(circle, rgb(239 68 68 / .85) 0, rgb(239 68 68 / .35) 55%, transparent 75%); }
.ch-sq .dot { position: absolute; width: 28%; height: 28%; border-radius: 50%; background: rgb(0 0 0 / .28); }
.ch-sq .ring { position: absolute; inset: 6%; border-radius: 50%; border: 5px solid rgb(0 0 0 / .28); }
.ch-pc { position: relative; z-index: 1; }
.ch-pc.w { color: #fff; text-shadow: 0 0 2px #000, 0 0 1px #000, 0 1px 2px rgb(0 0 0 / .6); }
.ch-pc.b { color: #111; text-shadow: 0 0 1px rgb(255 255 255 / .5); }
.ch-coord { position: absolute; font-size: 10px; font-weight: 700; opacity: .75; font-family: system-ui, sans-serif; }
.ch-coord.f { bottom: 2px; right: 4px; } .ch-coord.r { top: 2px; left: 4px; }
.ch-sq.l .ch-coord { color: #b58863; } .ch-sq.d .ch-coord { color: #f0d9b5; }
.ch-moves { max-height: 360px; overflow: auto; font-size: 14px; line-height: 1.9; font-variant-numeric: tabular-nums; }
.ch-moves ol { margin: 0; padding-inline-start: 26px; }
.ch-promo { display: flex; gap: 8px; } .ch-promo button { width: 56px; height: 56px; font-size: 40px; }

/* ── Backgammon ── */
.bg-board { position: relative; width: 100%; max-width: 760px; aspect-ratio: 15 / 11; background: #5b3a1e; border-radius: 10px; padding: 1.6%; display: grid; grid-template-columns: 1fr 6% 1fr 7%; gap: 1.2%; user-select: none; }
.bg-half { position: relative; background: #e8cfa3; border-radius: 6px; display: grid; grid-template-rows: 1fr 1fr; overflow: hidden; }
.bg-row { display: grid; grid-template-columns: repeat(6, 1fr); }
.bg-pt { position: relative; display: flex; flex-direction: column; align-items: center; border: 0; padding: 0; background: none; cursor: pointer; }
.bg-row.bot .bg-pt { flex-direction: column-reverse; }
.bg-pt::before { content: ""; position: absolute; left: 4%; right: 4%; top: 0; height: 88%; clip-path: polygon(0 0, 100% 0, 50% 100%); background: var(--tri); z-index: 0; }
.bg-row.bot .bg-pt::before { top: auto; bottom: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.bg-pt.odd { --tri: #a33a2a; } .bg-pt.even { --tri: #1f3b4d; }
.bg-pt.src::before { filter: brightness(1.35); }
.bg-pt.tgt::after { content: ""; position: absolute; inset: 0; background: rgb(250 204 21 / .35); z-index: 0; }
.bg-ck { position: relative; z-index: 1; width: 86%; aspect-ratio: 1; border-radius: 50%; margin: 1px 0; display: grid; place-items: center; font-size: 12px; font-weight: 800; font-family: system-ui, sans-serif; }
.bg-ck.w { background: radial-gradient(circle at 35% 30%, #fff, #e7e2d6); border: 2px solid #b9b1a0; color: #333; }
.bg-ck.b { background: radial-gradient(circle at 35% 30%, #5a5a5a, #111); border: 2px solid #000; color: #eee; }
.bg-bar { background: #4a2e16; border-radius: 6px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 6px 0; cursor: pointer; border: 0; }
.bg-bar.src { box-shadow: inset 0 0 0 3px #facc15; }
.bg-off { background: #4a2e16; border-radius: 6px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 6px 2px; color: #f5e9d3; font-size: 12px; font-weight: 800; border: 0; cursor: pointer; }
.bg-off.tgt { box-shadow: inset 0 0 0 3px #facc15; }
.bg-num { position: absolute; z-index: 2; font-size: 9px; color: rgb(0 0 0 / .45); font-family: system-ui, sans-serif; }
.bg-row.top .bg-num { bottom: 1px; } .bg-row.bot .bg-num { top: 1px; }
.bg-dice { display: flex; gap: 8px; align-items: center; }
.bg-die { width: 42px; height: 42px; border-radius: 9px; background: #fff; color: #111; border: 2px solid #333; display: grid; place-items: center; font-size: 22px; font-weight: 900; font-family: system-ui, sans-serif; }
.bg-die.used { opacity: .3; }
.bg-die.b { background: #222; color: #fff; border-color: #000; }

/* ── Dooz (tic-tac-toe) ── */
.dz-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(100%, 360px); aspect-ratio: 1; }
.dz-board .gm-cell { border-radius: 14px; border: 2px solid var(--c-border); background: var(--c-surface); font-size: clamp(44px, 14vw, 80px); font-weight: 900; cursor: pointer; display: grid; place-items: center; font-family: system-ui, sans-serif; color: var(--c-text); }
.dz-board .gm-cell.x { color: #2563eb; } .dz-board .gm-cell.o { color: #e11d48; }
.dz-board .gm-cell.win { background: color-mix(in srgb, var(--c-brand) 18%, var(--c-surface)); border-color: var(--c-brand); }

/* ── Sudoku ── */
.sd-grid { display: grid; grid-template-columns: repeat(9, 1fr); width: min(100%, 470px); aspect-ratio: 1; border: 3px solid var(--c-text); direction: ltr; user-select: none; }
.sd-grid .gm-cell { border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); font-size: clamp(16px, 5.2vw, 26px); font-family: system-ui, sans-serif; padding: 0; cursor: pointer; display: grid; place-items: center; }
.sd-grid .gm-cell.given { font-weight: 800; background: var(--c-surface-2); }
.sd-grid .gm-cell.user { color: #2563eb; font-weight: 700; }
.sd-grid .gm-cell.peer { background: color-mix(in srgb, var(--c-brand) 8%, var(--c-surface)); }
.sd-grid .gm-cell.same { background: color-mix(in srgb, var(--c-brand) 22%, var(--c-surface)); }
.sd-grid .gm-cell.cur { background: color-mix(in srgb, var(--c-brand) 35%, var(--c-surface)); }
.sd-grid .gm-cell.bad { color: #dc2626; }
.sd-grid .gm-cell.c3 { border-right: 3px solid var(--c-text); } .sd-grid .gm-cell.r3 { border-bottom: 3px solid var(--c-text); }
.sd-pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: min(100%, 470px); margin-top: 10px; direction: ltr; }
.sd-pad .gm-btn { height: 48px; font-size: 20px; }

/* ── Minesweeper ── */
.ms-grid { display: grid; gap: 2px; direction: ltr; user-select: none; touch-action: manipulation; width: 100%; }
.ms-grid .gm-cell { aspect-ratio: 1; border: 0; border-radius: 4px; background: color-mix(in srgb, var(--c-brand) 30%, var(--c-surface-2)); font-weight: 900; font-family: system-ui, sans-serif; font-size: clamp(11px, 3.4vw, 18px); padding: 0; cursor: pointer; display: grid; place-items: center; color: var(--c-text); }
.ms-grid .gm-cell.open { background: var(--c-surface-2); cursor: default; }
.ms-grid .gm-cell.boom { background: #ef4444; }
.ms-grid .n1 { color: #2563eb; } .ms-grid .n2 { color: #16a34a; } .ms-grid .n3 { color: #dc2626; } .ms-grid .n4 { color: #7c3aed; }
.ms-grid .n5 { color: #b45309; } .ms-grid .n6 { color: #0891b2; } .ms-grid .n7 { color: #111; } .ms-grid .n8 { color: #6b7280; }

/* ── Memory ── */
.mm-grid { display: grid; gap: 8px; width: 100%; max-width: 560px; }
.mm-card { aspect-ratio: 1; perspective: 600px; border: 0; padding: 0; background: none; cursor: pointer; }
.mm-in { display: block; position: relative; width: 100%; height: 100%; transition: transform .35s; transform-style: preserve-3d; }
.mm-card.up .mm-in, .mm-card.done .mm-in { transform: rotateY(180deg); }
.mm-f, .mm-b { position: absolute; inset: 0; border-radius: 12px; display: grid; place-items: center; backface-visibility: hidden; }
.mm-b { background: linear-gradient(135deg, var(--c-brand), color-mix(in srgb, var(--c-brand) 55%, #000)); color: var(--c-brand-ink); font-size: 22px; font-weight: 900; }
.mm-f { transform: rotateY(180deg); background: var(--c-surface); border: 2px solid var(--c-border); font-size: clamp(26px, 8vw, 44px); }
.mm-card.done .mm-f { border-color: #16a34a; background: color-mix(in srgb, #16a34a 12%, var(--c-surface)); }
@media (prefers-reduced-motion: reduce) { .mm-in { transition: none; } }