/* ===== Board games batch (gb) ===== */
.gb-opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin-bottom: 10px; }
.gb-opts .g-seg { margin-bottom: 0; }
.gb-opts .g-btn { padding: 7px 12px; min-height: 40px; }
.gb-turn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 10px; }
.gb-pl { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; min-width: 0; padding: 7px 10px; border: 2px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--ink); transition: border-color .2s, box-shadow .2s, background .2s; }
.gb-pl.on { border-color: var(--c, #b45309); background: color-mix(in srgb, var(--c, #b45309) 10%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, #b45309) 22%, transparent); }
.gb-pl.on .gb-nm::before { content: "▶ "; color: var(--c, #b45309); }
.gb-nm { grid-column: 2; font-weight: 700; font-size: .9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; }
.gb-sc { grid-column: 2; font-size: .78rem; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; line-height: 1.25; }
.gb-sc:empty { display: none; }
.gb-tok { grid-row: 1 / span 2; width: 30px; height: 30px; flex: none; display: grid; place-items: center; }
.gb-tok svg { width: 100%; height: 100%; }
.gb-msg { grid-column: 1 / -1; margin: 0; text-align: center; min-height: 1.5em; font-size: .92rem; color: var(--ink-2, var(--ink)); }
.gb-acts { display: flex; justify-content: center; margin-top: 12px; }
.gb-acts .g-btn { min-height: 42px; }
.gb-acts .g-btn:disabled { opacity: .45; cursor: default; }
.game-stage button:focus-visible { outline: 3px solid var(--ring, #2563eb); outline-offset: 2px; }
@keyframes gb-pulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(250, 204, 21, .9), 0 0 10px 2px rgba(250, 204, 21, .55); } 50% { box-shadow: 0 0 0 3px rgba(250, 204, 21, 1), 0 0 18px 5px rgba(250, 204, 21, .7); } }
@keyframes gb-pop { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; } 70% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); } }

/* ---- Pallanguzhi ---- */
.gbp-wrap { max-width: 540px; margin: 0 auto; }
.gbp-lab { margin: 4px 0; font-size: .8rem; color: var(--muted); text-align: center; }
.gbp-board { position: relative; padding: 10px 8px; border-radius: 26px; display: grid; gap: 12px;
  background: repeating-linear-gradient(92deg, rgba(0, 0, 0, .06) 0 3px, transparent 3px 11px), linear-gradient(180deg, #b7773c, #8a4f22 55%, #a0612d);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), inset 0 -4px 10px rgba(0, 0, 0, .35), 0 8px 18px rgba(60, 30, 5, .35); border: 3px solid #6b3a16; }
.gbp-board::after { content: ""; position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: rgba(60, 25, 5, .35); border-radius: 2px; }
.gbp-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.gbp-pit { position: relative; aspect-ratio: 1 / 1.08; min-width: 0; min-height: 42px; border: 0; padding: 0; cursor: pointer; border-radius: 46%;
  background: radial-gradient(ellipse at 50% 38%, #4a2709 0%, #623512 55%, #7a4519 100%); box-shadow: inset 0 5px 9px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .25); transition: filter .15s; }
.gbp-pit:disabled { cursor: default; }
.gbp-seeds { position: absolute; inset: 6% 6% 14%; }
.gbp-seed { position: absolute; width: 30%; aspect-ratio: 4 / 3; border-radius: 50%; background: radial-gradient(ellipse at 35% 30%, #fffdf5, #f1dfb8 55%, #c9a66b); box-shadow: 0 1px 1px rgba(0, 0, 0, .45); }
.gbp-seed::after { content: ""; position: absolute; left: 22%; right: 22%; top: 46%; height: 9%; border-radius: 2px; background: #8a6a3a; }
.gbp-seed.dk { background: radial-gradient(ellipse at 35% 30%, #c08457, #7b3f12 55%, #4a2108); }
.gbp-seed.dk::after { background: rgba(255, 230, 200, .35); }
.gbp-seed.gb-ic { position: relative; display: block; width: 24px; }
.gbp-n { position: absolute; left: 50%; bottom: -3px; transform: translateX(-50%); min-width: 20px; padding: 0 4px; border-radius: 9px; background: rgba(255, 248, 235, .92); color: #3b1d06; font-size: .72rem; line-height: 16px; font-weight: 800; }
.gbp-pit.gb-hl { animation: gb-pulse 1.6s ease-in-out infinite; }
.gbp-pit.gb-hl:hover { filter: brightness(1.18); }
.gbp-pit.gb-last { outline: 2px dashed rgba(255, 244, 214, .9); outline-offset: 2px; }
.gbp-pit.gbp-flash { filter: brightness(1.3); }
.gbp-pit.gbp-cap { box-shadow: inset 0 5px 9px rgba(0, 0, 0, .6), 0 0 0 3px #22c55e, 0 0 16px 4px rgba(34, 197, 94, .7); }
.gbp-hand { position: absolute; left: 0; top: 0; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; display: none; place-items: center; z-index: 3; pointer-events: none;
  background: rgba(255, 255, 255, .93); border: 2px solid #f59e0b; color: #7c2d12; font-weight: 800; font-size: .85rem; box-shadow: 0 4px 10px rgba(0, 0, 0, .35); transition: transform .14s ease-out; }
.gbp-hand.on { display: grid; }
.gbp-dir { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: rgba(255, 240, 210, .75); font-size: 1rem; line-height: 1; z-index: 1; }

/* ---- Aadu Puli ---- */
.gba-board { position: relative; width: 100%; max-width: 480px; margin: 0 auto; aspect-ratio: 100 / 111; border-radius: 18px; background: radial-gradient(circle at 50% 40%, #f6e7c8, #e8cf9e); box-shadow: inset 0 0 0 3px #b98a4a, 0 6px 16px rgba(80, 50, 10, .2); }
.gba-in { position: absolute; inset: 4% 4%; }
.gba-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gba-lines polyline { fill: none; stroke: #7c2d12; stroke-width: 2.4px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.gba-fill { fill: rgba(255, 255, 255, .28); }
.gba-fill2 { fill: rgba(180, 83, 9, .07); }
.gba-pt, .gba-pc { position: absolute; transform: translate(-50%, -50%); }
.gba-pieces { position: absolute; inset: 0; pointer-events: none; }
.gba-in > .gba-pt { width: clamp(34px, 10.5%, 48px); aspect-ratio: 1; border-radius: 50%; border: 0; padding: 0; background: transparent; cursor: pointer; z-index: 2; }
.gba-pt::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #7c2d12; }
.gba-pt:disabled { cursor: default; }
.gba-pt.gb-hl { background: rgba(250, 204, 21, .28); box-shadow: 0 0 0 2px rgba(202, 138, 4, .85), 0 0 8px 1px rgba(250, 204, 21, .6); }
.gba-pt.gba-can { box-shadow: 0 0 0 2px rgba(250, 204, 21, .7); }
.gba-pt.gba-sel { box-shadow: 0 0 0 3px #16a34a, 0 0 12px 3px rgba(22, 163, 74, .6); }
.gba-pt.gb-last::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px dashed #b91c1c; }
.gba-pt.gba-from::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 2px dotted rgba(185, 28, 28, .7); }
.gba-pc { width: 9.6%; aspect-ratio: 1; border-radius: 50%; transition: left .32s ease, top .32s ease, opacity .35s, transform .35s; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); z-index: 1; }
.gba-pc svg { width: 100%; height: 100%; display: block; }
.gba-t { width: 10.8%; }
.gba-new { animation: gb-pop .35s ease-out; }
.gba-gone { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(40deg); }
.gba-pieces .gba-pc { position: absolute; }
.gba-board .gba-pc { pointer-events: none; }
.gba-board { touch-action: manipulation; }
.gba-board .gba-pieces { z-index: 3; }

/* ---- Snakes & Ladders ---- */
.gbs-setup { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 10px; }
.gbs-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; }
.gbs-slot { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 6px; min-height: 42px; font-size: .8rem; min-width: 0; }
.gbs-slot > span:not(.gbs-tk) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .gbs-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gbs-slot.off { opacity: .6; border-style: dashed; }
.gbs-exact { min-height: 40px; font-size: .85rem; }
.gbs-exact.on { background: var(--surface); color: var(--ink); border-color: var(--c, #b45309); }
.gbs-exact.on i { color: var(--c, #b45309); }
.gbs-tk { width: 22px; height: 22px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: .72rem; font-weight: 800; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55), var(--tc) 55%); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.gbs-players { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 10px; }
.gbs-players .gb-pl { flex: 1 1 120px; max-width: 200px; padding: 5px 8px; }
.gbs-players .gb-pl .gb-nm { font-size: .82rem; }
.gb-pl > .gbs-tk { grid-row: 1 / span 2; }
.gbs-wrap { max-width: 540px; margin: 0 auto; }
.gbs-board { position: relative; width: 100%; aspect-ratio: 100 / 108; border-radius: 14px; overflow: hidden; background: #fef3c7; box-shadow: 0 0 0 3px #b45309, 0 8px 18px rgba(120, 53, 15, .25); }
.gbs-grid { position: absolute; left: 0; top: 0; width: 100%; height: 92.5926%; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr); }
.gbs-cell { position: relative; border: 1px solid rgba(146, 64, 14, .14); }
.gbs-c0 { background: #fffbeb; }
.gbs-c1 { background: #fde7c4; }
.gbs-cell span { position: absolute; left: 3px; top: 1px; font-size: clamp(8px, 2.3vw, 11.5px); font-weight: 700; color: #78350f; opacity: .85; }
.gbs-ten { background: #fed7aa; }
.gbs-home { background: radial-gradient(circle, #fde047, #f59e0b); }
.gbs-home em { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: clamp(14px, 4.5vw, 24px); }
.gbs-one { background: #bbf7d0; }
.gbs-cell.gb-hl { box-shadow: inset 0 0 0 3px #facc15, inset 0 0 12px rgba(250, 204, 21, .9); }
.gbs-cell.gb-last { box-shadow: inset 0 0 0 2px #b91c1c; }
.gbs-cell.gbs-from { box-shadow: inset 0 0 0 2px rgba(185, 28, 28, .45); }
.gbs-cell.gbs-from::after { content: ""; position: absolute; inset: 3px; border: 2px dashed rgba(185, 28, 28, .45); border-radius: 4px; }
.gbs-art { position: absolute; left: 0; top: 0; width: 100%; height: 92.5926%; pointer-events: none; }
.gbs-start { position: absolute; left: 0; right: 0; bottom: 0; height: 7.4074%; background: linear-gradient(90deg, #fed7aa, #fef3c7); border-top: 2px solid #b45309; }
.gbs-start span { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: .78rem; font-weight: 700; color: #92400e; }
.gbs-toks { position: absolute; inset: 0; pointer-events: none; }
.gbs-token { position: absolute; width: 6.2%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: clamp(9px, 2.4vw, 13px);
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .6), var(--tc) 55%); border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .45); transition: left .17s ease-out, top .17s ease-out; z-index: 2; }
.gbs-token.on { z-index: 3; box-shadow: 0 0 0 3px rgba(250, 204, 21, .95), 0 2px 6px rgba(0, 0, 0, .5); }
.gbs-token.gbs-slide { transition: left .7s cubic-bezier(.5, 0, .3, 1), top .7s cubic-bezier(.5, 0, .3, 1); }
.gbs-ctl { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
.gbs-ctl-r { display: grid; gap: 6px; justify-items: center; min-width: 0; flex: 1; max-width: 340px; }
.gbs-roll { min-height: 44px; }
.gbs-msg { min-height: 2.6em; }
.gbs-die { width: 62px; height: 62px; flex: none; border-radius: 14px; border: 2px solid #e5e7eb; background: linear-gradient(145deg, #fff, #f1f5f9); box-shadow: 0 4px 10px rgba(0, 0, 0, .18), inset 0 -3px 0 rgba(0, 0, 0, .06); padding: 9px; cursor: pointer; }
.gbs-die:disabled { cursor: default; }
.gbs-face { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: 100%; height: 100%; gap: 2px; }
.gbs-face i { border-radius: 50%; }
.gbs-face i.on { background: radial-gradient(circle at 35% 35%, #555, #111); }
.gbs-die[data-v="1"] .gbs-face i.on { background: radial-gradient(circle at 35% 35%, #f87171, #b91c1c); }
.gbs-rolling { animation: gbs-roll .35s linear infinite; }
@keyframes gbs-roll { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(.9); } 100% { transform: rotate(360deg) scale(1); } }

/* ---- Tic-tac-toe ---- */
.gbt-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(100%, 360px); margin: 0 auto; }
.gbt-cell { position: relative; aspect-ratio: 1; border: 0; border-radius: 14px; background: var(--surface-2); padding: 12%; cursor: pointer; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--border); min-width: 0; }
.gbt-cell:disabled { cursor: default; }
.gbt-cell svg { width: 100%; height: 100%; }
.gbt-x path { fill: none; stroke: #dc2626; stroke-width: 5.5; stroke-linecap: round; stroke-dasharray: 60; animation: gbt-draw .3s ease-out; }
.gbt-o circle { fill: none; stroke: #2563eb; stroke-width: 5.5; stroke-dasharray: 70; animation: gbt-draw .35s ease-out; }
@keyframes gbt-draw { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
.gbt-cell.gb-hl:hover { background: color-mix(in srgb, var(--c, #b45309) 14%, var(--surface-2)); }
.gbt-cell.gb-last::after { content: ""; position: absolute; right: 6px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--c, #b45309); }
.gbt-cell.gbt-winc { background: #bbf7d0; box-shadow: inset 0 0 0 2px #16a34a; }
.gbt-ult { width: min(100%, 520px); gap: 7px; }
.gbt-sub { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 4px; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 2px var(--border); transition: box-shadow .2s, background .2s; }
.gbt-ult .gbt-cell { border-radius: 6px; padding: 14%; min-height: 0; }
.gbt-ult .gbt-cell.gb-last::after { right: 2px; top: 2px; width: 6px; height: 6px; }
.gbt-ult .gbt-x path, .gbt-ult .gbt-o circle { stroke-width: 6.5; }
.gbt-sub.gbt-act { background: color-mix(in srgb, #facc15 18%, var(--surface)); box-shadow: 0 0 0 3px #eab308; }
.gbt-sub.gbt-act .gbt-cell:not([data-v="X"]):not([data-v="O"]) { background: color-mix(in srgb, #fef9c3 55%, var(--surface-2)); }
.gbt-big { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; border-radius: 10px; }
.gbt-sub.gbt-done .gbt-big { background: color-mix(in srgb, var(--surface) 72%, transparent); }
.gbt-big svg { width: 82%; height: 82%; }
.gbt-big .gbt-x path, .gbt-big .gbt-o circle { stroke-width: 4.5; }
.gbt-dr { font-size: 2.6rem; font-weight: 800; color: var(--muted); }
.gbt-sub.gbt-winc { box-shadow: 0 0 0 3px #16a34a; }
@media (max-width: 420px) {
  .gb-pl { padding: 6px 7px; gap: 5px; }
  .gb-nm { font-size: .82rem; }
  .gb-tok { width: 22px; height: 22px; }
  .gbp-row { gap: 4px; }
  .gbp-board { padding: 8px 5px; gap: 10px; border-radius: 20px; }
  .gbt-ult { gap: 5px; }
  .gbt-sub { padding: 3px; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { .gbp-pit.gb-hl { animation: none; box-shadow: 0 0 0 3px #facc15; } .gbs-token, .gba-pc, .gbp-hand { transition: none; } }
.gb-pl:has(.gb-sc:empty) .gb-tok { grid-row: auto; }