html[data-social-game="geogrid"] { --accent:#1f6f8b; --accent-strong:#124a5e; --accent-soft:#e2f0f4; --page-a:#edf4f6; --page-b:#f4f1ea; --glow-a:rgba(31,111,139,.13); --glow-b:rgba(239,138,91,.1);
  --gg-one:#1f8a9b; --gg-one-soft:#d8eff2; --gg-one-ink:#0d4954; --gg-two:#e0754a; --gg-two-soft:#fbe4d8; --gg-two-ink:#7a3317; --gg-win:#f2b931; }
html[data-social-game="geogrid"][data-theme="dark"] { --accent:#8fd3ea; --accent-strong:#bfe7f4; --accent-soft:#16323d; --accent-contrast:#0b1d24; --page-a:#0f1b22; --page-b:#191c1d;
  --gg-one:#4fbccb; --gg-one-soft:#17373d; --gg-one-ink:#c6eef3; --gg-two:#f2946b; --gg-two-soft:#3d2219; --gg-two-ink:#ffd9c6; --gg-win:#f5c84c; }

.geogrid-visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.geogrid-table { --geogrid-gap:8px; --geogrid-clue:minmax(92px,1.05fr); }

/* Scoreboard */
.geogrid-scorebar { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:10px; align-items:stretch; }
.geogrid-player { --seat:var(--gg-one); --seat-soft:var(--gg-one-soft); display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; min-width:0; padding:10px 14px; border:1px solid var(--line); border-radius:14px; background:var(--panel-solid); transition:border-color .2s, box-shadow .2s, background .2s; }
.geogrid-player.is-seat-two { --seat:var(--gg-two); --seat-soft:var(--gg-two-soft); }
.geogrid-player.is-seat-two { grid-template-columns:auto minmax(0,1fr) auto; }
.geogrid-player.is-current { border-color:var(--seat); box-shadow:inset 0 0 0 1px var(--seat), 0 6px 18px -12px var(--seat); background:linear-gradient(135deg,var(--seat-soft),var(--panel-solid) 70%); }
.geogrid-player.is-winner { border-color:var(--gg-win); box-shadow:inset 0 0 0 1px var(--gg-win); }
.geogrid-player-mark { width:14px; height:14px; border-radius:4px; background:var(--seat); box-shadow:0 0 0 3px var(--seat-soft); }
.geogrid-player-copy { display:flex; flex-direction:column; min-width:0; }
.geogrid-player-copy strong { font-size:14px; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.geogrid-player-copy small { min-height:17px; font-size:12px; color:var(--muted); }
.geogrid-player-score { font-size:26px; line-height:1; font-variant-numeric:tabular-nums; color:var(--seat); }
.geogrid-turn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-width:132px; padding:6px 10px; text-align:center; font-weight:700; font-size:14px; }
.geogrid-clock { --geogrid-clock:1; position:relative; display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  background:conic-gradient(var(--accent) calc(var(--geogrid-clock) * 360deg), var(--line) 0); transition:background .25s linear; }
.geogrid-clock::before { content:""; position:absolute; inset:4px; border-radius:50%; background:var(--panel-solid); }
.geogrid-clock strong { position:relative; font-size:13px; font-variant-numeric:tabular-nums; }
.geogrid-clock.is-urgent { background:conic-gradient(#d4473b calc(var(--geogrid-clock) * 360deg), var(--line) 0); }
.geogrid-clock.is-urgent strong { color:#c23a30; }

/* Board */
.geogrid-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr); gap:16px; align-items:start; }
.geogrid-board-wrap { min-width:0; }
.geogrid-board { display:grid; gap:var(--geogrid-gap); padding:12px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(150deg,var(--panel-solid),var(--accent-soft)); }
.geogrid-row { display:grid; grid-template-columns:var(--geogrid-clue) repeat(var(--geogrid-size),minmax(0,1fr)); gap:var(--geogrid-gap); }
.geogrid-corner { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px; min-height:72px; border-radius:12px; color:var(--muted); font-size:12px; text-align:center; }
.geogrid-corner span { font-weight:700; color:var(--accent-strong); font-size:13px; }
.geogrid-clue { position:relative; display:flex; align-items:center; justify-content:center; min-width:0; min-height:72px; padding:8px 10px; border-radius:12px; background:#123c4c; color:#f2fbf8; text-align:center; font-size:13px; font-weight:650; line-height:1.25; box-shadow:0 3px 0 rgba(18,60,76,.25); transition:transform .15s, box-shadow .15s, background .15s; }
html[data-theme="dark"] .geogrid-clue { background:#1d4d5e; box-shadow:0 3px 0 rgba(0,0,0,.35); }
.geogrid-clue.is-active { box-shadow:0 0 0 3px var(--accent), 0 3px 0 rgba(18,60,76,.25); transform:translateY(-1px); }
.geogrid-clue-text { overflow-wrap:anywhere; hyphens:auto; }
.geogrid-clue-info { position:absolute; top:4px; right:4px; display:grid; place-items:center; width:18px; height:18px; padding:0; border:1px solid currentColor; border-radius:50%; background:transparent; color:inherit; font:italic 700 10px/1 Georgia,serif; opacity:.7; cursor:pointer; }
.geogrid-clue-info:hover, .geogrid-clue-info:focus-visible { opacity:1; }
.geogrid-cell { appearance:none; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-width:0; aspect-ratio:1; padding:6px; border:1px solid var(--line); border-radius:12px; background:var(--panel-solid); color:var(--ink); font:inherit; text-align:center; transition:transform .15s, border-color .15s, background .2s, box-shadow .15s; }
button.geogrid-cell { cursor:pointer; }
button.geogrid-cell.is-open:hover { border-color:var(--accent); transform:translateY(-1px); box-shadow:0 6px 14px -10px var(--accent); }
.geogrid-cell.is-open { border-style:dashed; }
.geogrid-cell.is-selected { border:2px solid var(--accent); border-style:solid; background:var(--accent-soft); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent); }
.geogrid-cell.is-dead { opacity:.5; }
.geogrid-cell.is-claimed { border-style:solid; }
.geogrid-cell.is-seat-one { background:linear-gradient(160deg,color-mix(in srgb,var(--gg-one) 30%,var(--panel-solid)),var(--gg-one-soft)); border-color:var(--gg-one); color:var(--gg-one-ink); box-shadow:inset 0 -3px 0 var(--gg-one); }
.geogrid-cell.is-seat-two { background:linear-gradient(160deg,color-mix(in srgb,var(--gg-two) 30%,var(--panel-solid)),var(--gg-two-soft)); border-color:var(--gg-two); color:var(--gg-two-ink); box-shadow:inset 0 -3px 0 var(--gg-two); }
.geogrid-cell.is-new { animation:geogrid-claim .35s ease-out; }
.geogrid-cell.is-claimed.is-win { box-shadow:0 0 0 3px var(--gg-win), 0 8px 18px -10px var(--gg-win); }
.geogrid-cell.is-revealed { outline:3px solid var(--accent); outline-offset:2px; }
.geogrid-cell-plus { font-size:26px; line-height:1; color:var(--accent); opacity:.65; }
.geogrid-cell-hint { font-size:11px; color:var(--muted); }
.geogrid-cell-empty { font-size:12px; color:var(--muted); }
.geogrid-cell-name { font-size:13px; font-weight:700; line-height:1.2; overflow-wrap:anywhere; max-width:100%; }
.geogrid-flag { display:block; object-fit:cover; border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.14); flex-shrink:0; }
.geogrid-flag--small { width:24px; height:18px; }
.geogrid-flag--large { width:min(48px,60%); height:auto; aspect-ratio:4/3; }
.geogrid-state-code { display:grid; place-items:center; flex-shrink:0; border-radius:6px; background:var(--accent); color:var(--accent-contrast,#fff); font-weight:800; letter-spacing:.04em; }
html[data-theme="dark"] .geogrid-state-code { color:#0b1d24; }
.geogrid-state-code--small { width:30px; height:20px; font-size:11px; }
.geogrid-state-code--large { width:min(48px,60%); aspect-ratio:4/3; font-size:15px; }
.geogrid-cell.is-seat-one .geogrid-state-code { background:var(--gg-one); }
.geogrid-cell.is-seat-two .geogrid-state-code { background:var(--gg-two); }
.geogrid-hint { margin:10px 4px 0; font-size:13px; color:var(--muted); line-height:1.5; }
@keyframes geogrid-claim { from { transform:scale(.92); opacity:.4; } to { transform:none; opacity:1; } }

/* Answer panel and log */
.geogrid-side { display:grid; gap:12px; min-width:0; }
.geogrid-composer, .geogrid-reveal { padding:16px; }
.geogrid-composer header h2, .geogrid-reveal header h2 { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:4px 0 12px; font-size:17px; line-height:1.3; }
.geogrid-composer header h2 i, .geogrid-reveal header h2 i { font-style:normal; color:var(--muted); }
.geogrid-reveal header p { margin:-6px 0 12px; font-size:13px; color:var(--muted); }
.geogrid-search { display:grid; gap:8px; }
.geogrid-search .text-input { width:100%; font-size:16px; }
.geogrid-options { list-style:none; margin:0; padding:0; display:grid; gap:2px; max-height:288px; overflow:auto; }
.geogrid-options:empty { display:none; }
.geogrid-options li { display:flex; align-items:center; gap:10px; min-height:40px; padding:6px 10px; border-radius:9px; cursor:pointer; }
.geogrid-options li.is-active { background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent); }
.geogrid-options li.is-used { cursor:not-allowed; opacity:.55; }
.geogrid-options li small { margin-left:auto; font-size:11px; color:var(--muted); }
.geogrid-no-match:empty { display:none; }
.geogrid-no-match, .geogrid-notice { margin:0; font-size:13px; color:var(--muted); }
.geogrid-notice { color:#b4372e; font-weight:600; }
html[data-theme="dark"] .geogrid-notice { color:#ff9b8f; }
.geogrid-composer-actions { display:flex; gap:8px; margin-top:4px; }
.geogrid-composer-actions .button.primary { flex:1; }
.geogrid-answer-list { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.geogrid-answer-list li { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border:1px solid var(--line); border-radius:999px; font-size:13px; }
.geogrid-answer-list li.is-played { border-color:var(--accent); background:var(--accent-soft); font-weight:700; }
.geogrid-accepted { margin:10px 0 0; font-size:12px; color:var(--muted); line-height:1.5; }
.geogrid-log summary { padding:12px 16px; cursor:pointer; font-weight:700; }
.geogrid-log ol { list-style:none; margin:0; padding:0 16px 14px; display:grid; gap:6px; max-height:260px; overflow:auto; }
.geogrid-log li { position:relative; padding-left:14px; font-size:13px; line-height:1.45; }
.geogrid-log li::before { content:""; position:absolute; left:0; top:6px; width:7px; height:7px; border-radius:2px; background:var(--muted); }
.geogrid-log li.is-seat-one::before { background:var(--gg-one); }
.geogrid-log li.is-seat-two::before { background:var(--gg-two); }
.geogrid-log li span { display:block; font-size:11px; color:var(--muted); }
.geogrid-log li.is-miss strong { text-decoration:line-through; text-decoration-thickness:1px; }
.geogrid-log li.is-empty { padding-left:0; color:var(--muted); }
.geogrid-log li.is-empty::before { display:none; }
.geogrid-sources { margin-top:14px; font-size:13px; line-height:1.55; color:var(--muted); }
.geogrid-sources h2 { font-size:14px; margin:0 0 4px; color:var(--ink); }

@media (max-width: 920px) {
  /* The board stays first; the answer box sits directly beneath it. */
  .geogrid-layout { grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 560px) {
  .geogrid-table { --geogrid-gap:5px; --geogrid-clue:minmax(70px,1fr); }
  .geogrid-board { padding:7px; border-radius:14px; }
  .geogrid-clue { min-height:58px; padding:6px 5px; font-size:11px; border-radius:9px; }
  .geogrid-clue-info { width:15px; height:15px; top:2px; right:2px; font-size:9px; }
  .geogrid-corner { min-height:58px; font-size:10px; }
  .geogrid-cell { padding:3px; gap:3px; border-radius:9px; }
  .geogrid-cell-name { font-size:10px; }
  .geogrid-cell-hint { font-size:9px; }
  .geogrid-scorebar { grid-template-columns:1fr 1fr; }
  .geogrid-turn { grid-column:1 / -1; grid-row:1; flex-direction:row; min-width:0; }
  .geogrid-clock { width:38px; height:38px; }
  .geogrid-player { padding:8px 10px; gap:8px; }
  .geogrid-player-score { font-size:21px; }
}
@media (prefers-reduced-motion: reduce) {
  .geogrid-cell, .geogrid-clue, .geogrid-player, .geogrid-clock { transition:none; }
  .geogrid-cell.is-new { animation:none; }
}