*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #1a2e1a;
  --surface: #243524;
  --board:   #388e3c;
  --accent:  #7dc87d;
  --btn:     #4caf50;
  --text:    #eee;
  --muted:   #888;
  --cpu-col: #f0b429;
  --you-col: #5bc8f5;
}

body { font-family: 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }
body.center-page { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:24px 16px; }
body.room-body   { display:flex; flex-direction:column; align-items:center; padding:20px 12px; }

.hidden { display: none !important; }

/* ── Buttons ── */
button, .btn-primary, .btn-secondary {
  border:none; border-radius:8px; cursor:pointer; font-size:1rem;
  padding:10px 20px; transition:opacity .15s, transform .1s;
  text-decoration:none; display:inline-block;
}
button:hover { opacity:.85; }
button:active { transform:scale(.97); }
.btn-primary  { background:var(--btn); color:#fff; font-weight:bold; }
.btn-secondary { background:#2e5c2e; color:#ccc; }
.btn-large { padding:13px 40px; font-size:1.05rem; width:100%; }
.btn-icon  { background:none; border:1px solid #4a7a4a; border-radius:6px; padding:4px 8px; font-size:.9rem; color:var(--muted); }
.btn-icon:hover { border-color:var(--accent); color:var(--text); }

/* Role buttons (promote / demote) */
.btn-role { font-size:.78rem; padding:4px 10px; border-radius:6px; }
.promote-btn { background:#2a4a2a; color:var(--you-col); border:1px solid var(--you-col); }
.promote-btn:hover { background:var(--you-col); color:#000; }
.demote-btn  { background:#2a2a1a; color:var(--muted); border:1px solid #555; }
.demote-btn:hover { background:#444; color:var(--text); }

/* Spectator toggle */
.btn-spec-toggle { font-size:.82rem; padding:5px 12px; border-radius:6px; }
.btn-spec-toggle.on  { background:#1a3a2a; color:var(--accent); border:1px solid var(--accent); }
.btn-spec-toggle.off { background:#3a1a1a; color:#f87; border:1px solid #f87; }

/* ── Inputs ── */
input[type=text], select {
  background:var(--bg); border:1px solid #4a7a4a; border-radius:8px;
  color:var(--text); font-size:1rem; padding:9px 13px; outline:none;
}
input[type=text]:focus, select:focus { border-color:var(--accent); }

/* ── Misc ── */
.error  { color:#f87; font-size:.9rem; }
.muted  { color:var(--muted); font-size:.9rem; }
.start-hint { color:#f0b429; font-size:.85rem; text-align:center; margin-top:6px; }
.back-link { color:var(--accent); text-decoration:none; font-size:.9rem; }
.back-link:hover { text-decoration:underline; }
.section-label { font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }

/* ── Modals ── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.65); display:flex; align-items:center; justify-content:center; z-index:100; }
.modal { background:var(--surface); border-radius:16px; padding:28px 32px; display:flex; flex-direction:column; gap:14px; width:min(400px,92vw); }
.modal h2, .modal h3 { color:var(--accent); }
.modal label { display:flex; flex-direction:column; gap:6px; font-size:.9rem; color:var(--muted); }
.modal label input[type=text] { width:100%; }
.checkbox-label { flex-direction:row !important; align-items:center; gap:10px !important; color:var(--text) !important; cursor:pointer; }
.modal-btns { display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }

/* ══════════════════════════════
   INDEX
═══════════════════════════════ */
.site-title { font-size:2.4rem; color:var(--accent); letter-spacing:2px; }
.site-sub   { color:var(--muted); }
.game-grid  { display:flex; gap:20px; flex-wrap:wrap; justify-content:center; }
.game-search { width:min(900px,100%); display:flex; flex-direction:column; gap:10px; align-items:center; }
#gameSearch { width:min(360px,100%); background:var(--bg); border:1px solid #4a7a4a; border-radius:8px; color:var(--text); font-size:1rem; padding:9px 13px; outline:none; }
#gameSearch:focus { border-color:var(--accent); }
.genre-filters { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.genre-chip { background:#1e301e; color:var(--muted); border:1px solid #2e4e2e; border-radius:16px; padding:5px 14px; font-size:.85rem; cursor:pointer; transition:all .12s; }
.genre-chip:hover { color:var(--text); border-color:var(--accent); }
.genre-chip.active { background:var(--btn); color:#fff; border-color:var(--btn); }
#gameSections { width:min(900px,100%); display:flex; flex-direction:column; gap:28px; }
.genre-section { display:flex; flex-direction:column; gap:14px; }
.genre-title { font-size:1.15rem; color:var(--accent); border-bottom:1px solid #2e4e2e; padding-bottom:6px; display:flex; align-items:center; gap:8px; }
.genre-count { font-size:.8rem; color:var(--muted); background:#1e301e; border-radius:10px; padding:1px 8px; font-weight:normal; }
.game-card {
  background:var(--surface); border-radius:16px; padding:32px 28px;
  width:160px; text-align:center; text-decoration:none; color:var(--text);
  display:flex; flex-direction:column; gap:8px; transition:transform .15s, box-shadow .15s;
}
.game-card:not(.disabled):hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,.4); }
.game-card.disabled { opacity:.4; cursor:default; }
.game-icon { font-size:2.8rem; }
.game-name { font-weight:bold; font-size:1.1rem; }
.game-desc { font-size:.8rem; color:var(--muted); }

/* ══════════════════════════════
   LOBBY
═══════════════════════════════ */
.lobby-wrap { width:min(560px,100%); display:flex; flex-direction:column; gap:14px; }
.lobby-header { display:flex; align-items:center; gap:16px; }
.lobby-header h2 { font-size:1.4rem; color:var(--accent); }
.lobby-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.code-join { display:flex; gap:8px; }
.code-join input { width:140px; letter-spacing:3px; text-transform:uppercase; }
.room-list { display:flex; flex-direction:column; gap:8px; min-height:48px; }
.room-empty { color:var(--muted); font-size:.9rem; padding:16px 0; text-align:center; }
.room-row {
  background:var(--surface); border-radius:10px;
  padding:12px 16px; display:flex; align-items:center; gap:10px;
}
.room-row-info { flex:1; display:flex; flex-direction:column; gap:3px; }
.room-row-name { font-weight:bold; }
.room-row-code { font-size:.78rem; color:var(--muted); letter-spacing:1px; }
.badge-watch { font-size:.75rem; background:#3a2a1a; color:var(--cpu-col); border:1px solid var(--cpu-col); border-radius:6px; padding:2px 8px; white-space:nowrap; }

/* ══════════════════════════════
   ROOM PAGE
═══════════════════════════════ */
#errorView { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:60vh; }

#roomContainer { display:flex; gap:16px; width:min(820px,100%); align-items:flex-start; }
#mainContent   { flex:1; min-width:0; display:flex; flex-direction:column; gap:12px; }

/* Waiting view */
#waitingView { display:flex; flex-direction:column; gap:10px; }

.room-page-header { display:flex; flex-direction:column; gap:6px; }
.header-row { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.header-row h2 { font-size:1.25rem; color:var(--accent); }
.room-code-inline { display:flex; align-items:center; gap:8px; font-size:1rem; font-weight:bold; letter-spacing:3px; color:var(--accent); }
.spectator-badge { font-size:.82rem; color:var(--muted); background:#1e301e; border-radius:6px; padding:3px 10px; align-self:flex-start; }

/* Slot panel */
.slots-panel { display:flex; flex-direction:column; gap:6px; }
.slot-panel-row {
  background:var(--surface); border-radius:10px; padding:11px 14px;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px;
}
.slot-left  { display:flex; align-items:center; gap:8px; }
.slot-color-name { font-size:.82rem; color:var(--muted); min-width:18px; }
.slot-center { display:flex; align-items:center; gap:8px; }
.slot-right  { display:flex; align-items:center; }

.badge-human   { background:var(--you-col); color:#000; border-radius:6px; padding:3px 9px; font-size:.8rem; font-weight:bold; }
.badge-cpu     { background:var(--cpu-col); color:#000; border-radius:6px; padding:3px 9px; font-size:.8rem; font-weight:bold; }
.badge-waiting { background:#2a3f2a; color:var(--muted); border-radius:6px; padding:3px 9px; font-size:.8rem; }

.slot-controls { display:flex; align-items:center; gap:5px; }
.type-toggle { display:flex; gap:3px; }
.type-btn { padding:4px 9px; font-size:.78rem; border-radius:6px; background:#2a3f2a; color:var(--muted); }
.type-btn.active { background:var(--btn); color:#fff; }
.diff-sel { font-size:.78rem; padding:4px 6px; min-width:54px; }

/* Spectators section */
#spectatorsSection { background:var(--surface); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.spectator-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.spec-name { font-size:.88rem; color:var(--muted); }

/* ── Game view ── */
#gameView { display:flex; flex-direction:column; align-items:center; gap:10px; }

#slotsBar { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; width:100%; }
.slot-chip {
  display:flex; align-items:center; gap:6px; background:var(--surface);
  border-radius:10px; padding:6px 12px; flex:1; min-width:90px;
  border:2px solid transparent; transition:border-color .2s;
}
.slot-chip.active { border-color:var(--accent); }
.chip-name { font-size:.85rem; font-weight:bold; }
.chip-badge { font-size:.7rem; font-weight:bold; border-radius:5px; padding:2px 6px; margin-left:auto; }
.chip-badge.cpu { background:var(--cpu-col); color:#000; }
.chip-badge.you { background:var(--you-col); color:#000; }
.chip-badge.disc-badge { background:#c0392b; color:#fff; }
.slot-chip.disconnected { opacity:.55; }
.slot-chip.disconnected .chip-name { text-decoration:line-through; }

#topBar {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; background:var(--surface); border-radius:10px; padding:10px 16px;
}
.score-box { display:flex; align-items:center; gap:7px; font-size:1.5rem; font-weight:bold; min-width:52px; }
#statusMsg { font-size:.9rem; color:var(--muted); text-align:center; flex:1; }

#board {
  display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); grid-template-rows:repeat(8,minmax(0,1fr));
  gap:2px; background:#2d5a2d; border:3px solid #2d5a2d;
  border-radius:6px; padding:2px; width:min(460px,100%); aspect-ratio:1;
}
.cell { background:var(--board); border-radius:3px; display:flex; align-items:center; justify-content:center; transition:background .1s; position:relative; overflow:hidden; min-width:0; min-height:0; }
.cell.valid { cursor:pointer; }
.cell.valid::after { content:''; width:28%; height:28%; border-radius:50%; background:rgba(255,255,255,.22); }
.cell.valid:hover { background:#2e7d32; }
.cell.last-move   { background:#43a047; }

/* ── Seven Bridge / Rummy ── */
body.sevenbridge-mode .score-box, body.rummy-mode .score-box { display:none; }
body.sevenbridge-mode #statusMsg, body.rummy-mode #statusMsg { flex:1; text-align:center; }
body.sevenbridge-mode #board.sb-board, body.rummy-mode #board.sb-board { aspect-ratio:auto; }
body.sevenbridge-mode .slot-chip .disc.small,
body.sevenbridge-mode .slot-panel-row .disc.small,
body.rummy-mode .slot-chip .disc.small,
body.rummy-mode .slot-panel-row .disc.small { display:none; }

#board.sb-board {
  display:flex; flex-direction:column; gap:12px; align-items:stretch;
  background:radial-gradient(ellipse at center, #1a4a4a 0%, #0a2424 100%);
  border:4px solid #051818; border-radius:10px;
  padding:14px; width:min(760px,100%); aspect-ratio:auto;
}
.sb-head { color:#fff; text-align:center; font-size:.9rem; }
.sb-status { padding:4px 12px; background:rgba(0,0,0,.35); border-radius:6px; display:inline-block; }
.sb-info { color:#9cf; font-size:.8rem; margin-top:2px; }
.sb-last { color:#fc6; font-size:.8rem; margin-top:4px; }
.sb-others { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.sb-other { background:rgba(0,0,0,.3); padding:6px 12px; border-radius:8px; color:#fff; font-size:.82rem; text-align:center; border:2px solid transparent; }
.sb-other.sb-turn { border-color:var(--accent); }
.sb-other.sb-fin { opacity:.6; }
.sb-oname { font-weight:bold; }
.sb-ocount { color:#fc6; }
.sb-center { display:flex; gap:18px; justify-content:center; align-items:flex-start; flex-wrap:wrap; }
.sb-pile { display:flex; flex-direction:column; align-items:center; gap:4px; color:#fff; }
.sb-pile-label { font-size:.78rem; color:#9cf; }
.sb-draw-actions { display:flex; flex-direction:column; gap:6px; justify-content:center; }
.sb-melds { background:rgba(0,0,0,.25); border-radius:8px; padding:8px; }
.sb-melds-label { font-size:.8rem; color:#9cf; margin-bottom:4px; text-align:center; }
.sb-melds-row { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.sb-meld { display:flex; gap:1px; background:rgba(255,255,255,.08); padding:3px; border-radius:5px; border:2px solid transparent; }
.sb-meld-target { border-color:var(--accent); cursor:pointer; box-shadow:0 0 8px rgba(125,200,125,.6); }
.sb-mcard { display:inline-flex; align-items:center; justify-content:center; background:#fff; border-radius:3px; padding:3px 5px; font-size:.85rem; font-weight:bold; }
.sb-mcard.sb-red { color:#c12; } .sb-mcard.sb-black { color:#222; }
.sb-hand { display:flex; gap:3px; flex-wrap:wrap; justify-content:center; background:rgba(255,255,255,.05); padding:10px; border-radius:8px; }
.sb-hand .df-card { cursor:pointer; transition:transform .1s; }
.sb-hand .df-card:hover { transform:translateY(-4px); }
.sb-hand .df-card.sb-sel { transform:translateY(-8px); outline:2px solid var(--accent); outline-offset:-2px; box-shadow:0 4px 8px rgba(0,0,0,.5); }
.sb-actions { display:flex; gap:10px; justify-content:center; }
.sb-actions button:disabled { opacity:.5; cursor:default; }

/* ── War (戦争) ── */
body.war-mode .score-box { display:none; }
body.war-mode #statusMsg { flex:1; text-align:center; }
body.war-mode #board.wr-board { aspect-ratio:auto; }
body.war-mode .slot-chip .disc.small,
body.war-mode .slot-panel-row .disc.small { display:none; }

#board.wr-board {
  display:flex; flex-direction:column; gap:14px; align-items:center;
  background:radial-gradient(ellipse at center, #4a2a2a 0%, #241010 100%);
  border:4px solid #180808; border-radius:12px;
  padding:16px; width:min(600px,100%); aspect-ratio:auto;
}
.wr-head { color:#fff; text-align:center; }
.wr-status { padding:4px 14px; background:rgba(0,0,0,.4); border-radius:6px; display:inline-block; }
.wr-players { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; width:100%; }
.wr-player {
  flex:1; min-width:120px; max-width:200px;
  background:rgba(0,0,0,.3); border-radius:10px; padding:12px;
  text-align:center; color:#fff; border:2px solid transparent;
}
.wr-player.wr-me { background:rgba(125,200,125,.12); }
.wr-player.wr-fighting { border-color:#f0b429; box-shadow:0 0 12px rgba(240,180,40,.5); }
.wr-player.wr-out { opacity:.4; }
.wr-pname { font-weight:bold; font-size:.9rem; }
.wr-pcount { color:#fc6; font-size:.85rem; margin:4px 0; }
.wr-laid { display:flex; gap:3px; justify-content:center; flex-wrap:wrap; min-height:46px; align-items:center; }
.wr-card { font-size:1.4rem !important; padding:8px 7px !important; min-width:38px; }
.wr-card.wr-facedown { background:linear-gradient(135deg,#6a3a3a,#3a1a1a) !important; color:#a55 !important; }
.wr-actions { display:flex; justify-content:center; }

/* ── Minesweeper ── */
body.minesweeper-mode .score-box { display:none; }
body.minesweeper-mode #statusMsg { flex:1; text-align:center; }
body.minesweeper-mode #board.ms-board { aspect-ratio:auto; }
body.minesweeper-mode .slot-chip .disc.small,
body.minesweeper-mode .slot-panel-row .disc.small { display:none; }

#board.ms-board {
  display:flex; flex-direction:column; gap:10px; align-items:center;
  background:#2a3a4a; border:3px solid #1a2632; border-radius:10px;
  padding:14px; width:auto; max-width:100%; aspect-ratio:auto;
}
.ms-head { color:#fff; font-size:.9rem; }
.ms-status { padding:4px 14px; background:rgba(0,0,0,.35); border-radius:6px; }
.ms-scores { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.ms-score { display:flex; gap:8px; align-items:center; background:rgba(0,0,0,.3); padding:4px 12px; border-radius:6px; color:#fff; font-size:.85rem; border:2px solid transparent; }
.ms-score.ms-turn { border-color:var(--accent); }
.ms-score.ms-me { background:rgba(125,200,125,.12); }
.ms-score.ms-out { opacity:.5; }
.ms-pts { color:#fc6; font-weight:bold; }
.ms-grid { display:grid; gap:2px; background:#1a2632; padding:3px; border-radius:4px; }
.ms-cell {
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  font-weight:bold; font-size:1rem; border-radius:2px; user-select:none;
}
.ms-cell.ms-hidden { background:linear-gradient(135deg,#5a7a9a,#3a5a7a); cursor:pointer; box-shadow:inset 1px 1px 0 rgba(255,255,255,.2); }
.ms-cell.ms-hidden:hover { background:linear-gradient(135deg,#6a8aaa,#4a6a8a); }
.ms-cell.ms-open { background:#c8d4e0; color:#222; }
.ms-cell.ms-mine { background:#e44; }
.ms-ctrl { display:flex; gap:8px; }
@media (max-width:560px){ .ms-cell { width:24px; height:24px; font-size:.85rem; } }

/* ── Gin Rummy ── */
body.gin-mode .score-box { display:none; }
body.gin-mode #statusMsg { flex:1; text-align:center; }
body.gin-mode #board.gin-board { aspect-ratio:auto; }
body.gin-mode .slot-chip .disc.small,
body.gin-mode .slot-panel-row .disc.small { display:none; }

#board.gin-board {
  display:flex; flex-direction:column; gap:12px; align-items:stretch;
  background:radial-gradient(ellipse at center, #1a3a4a 0%, #0a1a24 100%);
  border:4px solid #05121a; border-radius:12px;
  padding:14px; width:min(620px,100%); aspect-ratio:auto;
}
.gin-head { color:#fff; text-align:center; }
.gin-status { padding:4px 14px; background:rgba(0,0,0,.4); border-radius:6px; display:inline-block; font-weight:bold; }
.gin-phase { color:#9cf; font-size:.82rem; margin-top:4px; }
.gin-result { text-align:center; color:#fd6; font-size:.85rem; background:rgba(0,0,0,.3); padding:6px 12px; border-radius:6px; }
.gin-opp { text-align:center; color:#fff; }
.gin-opp-label { font-size:.8rem; color:#9cf; margin-bottom:4px; }
.gin-cards, .gin-hand { display:flex; gap:2px; justify-content:center; flex-wrap:wrap; }
.gin-card { font-size:.95rem !important; padding:5px 4px !important; min-width:28px; }
.gin-down { background:linear-gradient(135deg,#2a4a6a,#1a2a4a)!important; color:#456!important; }
.gin-center { display:flex; gap:24px; justify-content:center; align-items:flex-start; }
.gin-pile { display:flex; flex-direction:column; align-items:center; gap:4px; color:#fff; padding:6px; border-radius:8px; }
.gin-pile-label { font-size:.78rem; color:#9cf; }
.gin-pile.gin-clickable { cursor:pointer; background:rgba(125,200,125,.12); outline:2px solid var(--accent); }
.gin-dw { text-align:center; color:#fd6; font-size:.85rem; }
.gin-hand { margin-top:4px; }
.gin-hcard { cursor:default; }
.gin-hcard.gin-melded { box-shadow:0 0 0 2px #5cb85c inset; }
.gin-hcard.gin-sel { transform:translateY(-8px); outline:2px solid var(--accent); outline-offset:-2px; }
body.gin-mode .gin-hand .gin-hcard { cursor:pointer; transition:transform .1s; }
.gin-actions { display:flex; gap:8px; justify-content:center; }
.gin-actions button:disabled { opacity:.5; cursor:default; }

/* ── Baccarat ── */
body.baccarat-mode .score-box { display:none; }
body.baccarat-mode #statusMsg { flex:1; text-align:center; }
body.baccarat-mode #board.bc-board { aspect-ratio:auto; }
body.baccarat-mode .slot-chip .disc.small,
body.baccarat-mode .slot-panel-row .disc.small { display:none; }

#board.bc-board {
  display:flex; flex-direction:column; gap:14px; align-items:stretch;
  background:radial-gradient(ellipse at center, #2a1a4a 0%, #140a24 100%);
  border:4px solid #0a0518; border-radius:14px;
  padding:16px; width:min(680px,100%); aspect-ratio:auto;
}
.bc-head { color:#fff; text-align:center; }
.bc-status { padding:4px 14px; background:rgba(0,0,0,.4); border-radius:6px; display:inline-block; }
.bc-hands { display:flex; gap:12px; align-items:center; justify-content:center; }
.bc-hand { flex:1; max-width:240px; background:rgba(0,0,0,.3); border-radius:10px; padding:10px; text-align:center; color:#fff; border:2px solid transparent; }
.bc-hand.bc-player { box-shadow:inset 0 0 0 1px #5af; }
.bc-hand.bc-banker { box-shadow:inset 0 0 0 1px #f55; }
.bc-hand.bc-won { border-color:#fd6; box-shadow:0 0 14px rgba(255,210,80,.6); }
.bc-hand-label { font-weight:bold; font-size:.9rem; margin-bottom:6px; }
.bc-cards { display:flex; gap:4px; justify-content:center; min-height:40px; }
.bc-card { font-size:1.2rem !important; padding:7px 6px !important; min-width:34px; }
.bc-total { font-size:1.8rem; font-weight:bold; color:#fd6; margin-top:4px; }
.bc-vs { color:#888; font-weight:bold; }
.bc-result { text-align:center; color:#fd6; font-weight:bold; }
.bc-players { display:flex; flex-direction:column; gap:4px; background:rgba(0,0,0,.25); border-radius:8px; padding:8px; }
.bc-player-row { display:flex; gap:10px; align-items:center; color:#fff; font-size:.85rem; padding:3px 8px; border-radius:6px; border:2px solid transparent; }
.bc-player-row.bc-me { background:rgba(125,200,125,.12); }
.bc-player-row.bc-turn { border-color:var(--accent); }
.bc-player-row.bc-fin { opacity:.45; }
.bc-pn { font-weight:bold; flex:1; }
.bc-pc { color:#fc6; }
.bc-betinfo { color:#5af; }
.bc-win { color:#5cb85c; } .bc-lose { color:#f66; }
.bc-betbox { display:flex; flex-direction:column; gap:10px; align-items:center; background:rgba(0,0,0,.3); padding:12px; border-radius:10px; }
.bc-sides { display:flex; gap:8px; }
.bc-side-btn { background:#1e1230; color:#fff; border:2px solid #4a3a6a; border-radius:8px; padding:8px 16px; cursor:pointer; font-size:.9rem; line-height:1.3; }
.bc-side-btn small { color:#aaa; font-size:.7rem; }
.bc-side-btn.sel { border-color:var(--accent); background:#2e1e44; }
.bc-amt { color:#fff; font-size:.88rem; }
.bc-amt input { width:80px; margin:0 4px; padding:5px 8px; }

/* ── Seven-Card Stud ── */
body.stud-mode .score-box { display:none; }
body.stud-mode #statusMsg { flex:1; text-align:center; }
body.stud-mode #board.st-board { aspect-ratio:auto; }
body.stud-mode .slot-chip .disc.small,
body.stud-mode .slot-panel-row .disc.small { display:none; }

#board.st-board {
  display:flex; flex-direction:column; gap:12px; align-items:stretch;
  background:radial-gradient(ellipse at center, #1a5a3a 0%, #0a2a1a 100%);
  border:4px solid #052015; border-radius:14px;
  padding:16px; width:min(820px,100%); aspect-ratio:auto;
}
.st-head { color:#fff; text-align:center; font-size:.92rem; }
.st-status { padding:4px 12px; background:rgba(0,0,0,.4); border-radius:6px; display:inline-block; }
.st-last { margin-top:4px; color:#fc6; font-size:.82rem; }
.st-showdown { background:rgba(0,0,0,.4); border-radius:8px; padding:10px; color:#fff; font-size:.85rem; }
.st-sd-row { padding:2px 0; }
.st-sd-row.st-won { color:#fd6; font-weight:bold; }
.st-players { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:8px; }
.st-player {
  background:rgba(0,0,0,.3); padding:8px 10px; border-radius:8px;
  color:#fff; border:2px solid transparent;
}
.st-player.st-me { background:rgba(125,200,125,.12); }
.st-player.st-turn { border-color:var(--accent); box-shadow:0 0 10px rgba(125,200,125,.5); }
.st-player.st-folded { opacity:.45; }
.st-player.st-out { opacity:.3; }
.st-pname { font-weight:bold; font-size:.85rem; }
.st-pchips { color:#fc6; font-size:.82rem; margin:2px 0; }
.st-bet { color:#5af; margin-left:4px; }
.st-cards { display:flex; gap:2px; flex-wrap:wrap; margin-top:4px; }
.st-card { font-size:.95rem !important; padding:5px 5px !important; min-width:30px; }
.st-card.st-down { background:linear-gradient(135deg,#2a4a6a,#1a2a4a) !important; color:#456 !important; }
.st-card.st-hole { box-shadow:0 0 0 1px #5af inset; }
.st-actions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }

/* Hold'em community cards */
.hd-community { text-align:center; }
.hd-comm-label { color:#9cf; font-size:.8rem; margin-bottom:4px; }
.hd-comm-row { display:flex; gap:4px; justify-content:center; }
.hd-comm-row .st-card { font-size:1.3rem !important; padding:8px 7px !important; min-width:38px; }
.hd-comm-empty { background:rgba(255,255,255,.08) !important; color:#456 !important; border:1px dashed #2a4a3a !important; }

/* ── Doubt (ダウト) ── */
body.doubt-mode .score-box { display:none; }
body.doubt-mode #statusMsg { flex:1; text-align:center; }
body.doubt-mode #board.dt-board { aspect-ratio:auto; }
body.doubt-mode .slot-chip .disc.small,
body.doubt-mode .slot-panel-row .disc.small { display:none; }

#board.dt-board {
  display:flex; flex-direction:column; gap:12px; align-items:stretch;
  background:radial-gradient(ellipse at center, #4a2a3a 0%, #2a121e 100%);
  border:4px solid #1a0810; border-radius:10px;
  padding:14px; width:min(720px,100%); aspect-ratio:auto;
}
.dt-head { color:#fff; text-align:center; font-size:.9rem; }
.dt-status { padding:4px 12px; background:rgba(0,0,0,.35); border-radius:6px; display:inline-block; }
.dt-pile { margin-top:4px; color:#fc6; font-size:.85rem; }
.dt-result { margin-top:6px; color:#fc6; font-size:.82rem; background:rgba(0,0,0,.3); padding:4px 10px; border-radius:6px; }
.dt-others { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.dt-other {
  background:rgba(0,0,0,.3); padding:8px 14px; border-radius:8px;
  color:#fff; font-size:.85rem; text-align:center; border:2px solid transparent;
}
.dt-other.dt-turn { border-color:var(--accent); box-shadow:0 0 8px rgba(125,200,125,.5); }
.dt-other.dt-fin { opacity:.6; }
.dt-oname { font-weight:bold; }
.dt-ocount { color:#fc6; }
.dt-doubt-actions, .dt-play-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; flex-direction:column; align-items:center; }
.dt-hand {
  display:flex; gap:3px; flex-wrap:wrap; justify-content:center;
  background:rgba(255,255,255,.05); padding:10px; border-radius:8px;
}
.dt-hand .df-card { cursor:pointer; transition:transform .1s; }
.dt-hand .df-card:hover { transform:translateY(-4px); }
.dt-hand .df-card.dt-sel { transform:translateY(-8px); outline:2px solid var(--accent); outline-offset:-2px; box-shadow:0 4px 8px rgba(0,0,0,.5); }
.dt-play-actions button:disabled { opacity:.5; cursor:default; }

/* ── Bank (銀行) ── */
body.bank-mode .score-box { display:none; }
body.bank-mode #statusMsg { flex:1; text-align:center; }
body.bank-mode #board.bk-board { aspect-ratio:auto; }
body.bank-mode .slot-chip .disc.small,
body.bank-mode .slot-panel-row .disc.small { display:none; }

#board.bk-board {
  display:flex; flex-direction:column; gap:14px; align-items:center;
  background:radial-gradient(ellipse at center, #1a3a2a 0%, #0a2014 100%);
  border:4px solid #051a0a; border-radius:10px;
  padding:18px; width:min(560px,100%); aspect-ratio:auto;
}
.bk-head { color:#fff; font-size:.9rem; }
.bk-round { padding:4px 14px; background:rgba(0,0,0,.35); border-radius:6px; }
.bk-pot {
  background:rgba(0,0,0,.4); border:2px solid #f0b429; border-radius:12px;
  padding:14px 40px; text-align:center; color:#fff;
}
.bk-pot-label { font-size:.85rem; color:#fc6; }
.bk-pot-amount { font-size:3rem; font-weight:bold; color:#ffd700; line-height:1.1; }
.bk-pot-status { font-size:.8rem; color:#aaa; }
.bk-dice { display:flex; gap:12px; align-items:center; justify-content:center; }
.bk-dice.bk-bust { animation:bk-shake .4s; }
@keyframes bk-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.bk-die { font-size:3rem; color:#fff; line-height:1; }
.bk-roll-effect { font-size:1.1rem; font-weight:bold; color:#7dc87d; }
.bk-bankmsg { color:#fc6; font-size:1rem; font-weight:bold; }
.bk-scores { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.bk-score {
  background:rgba(0,0,0,.3); padding:8px 14px; border-radius:8px;
  color:#fff; text-align:center; border:2px solid transparent; font-size:.85rem;
}
.bk-score.bk-turn { border-color:var(--accent); box-shadow:0 0 8px rgba(125,200,125,.5); }
.bk-score.bk-me { background:rgba(125,200,125,.12); }
.bk-score.bk-banked { opacity:.6; }
.bk-pname { font-weight:bold; }
.bk-pscore { color:#fc6; }
.bk-actions { display:flex; gap:12px; }

/* ── American Page One ── */
body.pageone-mode .score-box { display:none; }
body.pageone-mode #statusMsg { flex:1; text-align:center; }
body.pageone-mode #board.po-board { aspect-ratio:auto; }
body.pageone-mode .slot-chip .disc.small,
body.pageone-mode .slot-panel-row .disc.small { display:none; }

#board.po-board {
  display:flex; flex-direction:column; gap:12px; align-items:stretch;
  background:radial-gradient(ellipse at center, #2a2a5a 0%, #12122a 100%);
  border:4px solid #08081a; border-radius:10px;
  padding:14px; width:min(720px,100%); aspect-ratio:auto;
}
.po-head { color:#fff; text-align:center; font-size:.9rem; }
.po-status { padding:4px 12px; background:rgba(0,0,0,.35); border-radius:6px; display:inline-block; }
.po-last { margin-top:6px; color:#fc6; font-size:.82rem; }
.po-others { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.po-other {
  background:rgba(0,0,0,.3); padding:8px 14px; border-radius:8px;
  color:#fff; font-size:.85rem; text-align:center; border:2px solid transparent;
}
.po-other.po-turn { border-color:var(--accent); box-shadow:0 0 8px rgba(125,200,125,.5); }
.po-other.po-fin { opacity:.5; }
.po-oname { font-weight:bold; }
.po-ocount { color:#fc6; }
.po-pageone { color:#f44; font-weight:bold; animation:mj-pulse 1s infinite; }
.po-center { display:flex; gap:20px; justify-content:center; align-items:center; }
.po-pile { display:flex; flex-direction:column; align-items:center; gap:4px; color:#fff; }
.po-pile-label { font-size:.78rem; color:#9cf; }
.po-card-back {
  font-size:2.5rem; color:#4a5a9a;
  background:linear-gradient(135deg, #3a3a7a, #1a1a4a);
  border:1px solid #08081a; border-radius:6px; padding:0 6px;
}
.po-discard { font-size:1.6rem !important; padding:10px 12px !important; min-width:48px; }
.po-hand {
  display:flex; gap:3px; flex-wrap:wrap; justify-content:center;
  background:rgba(255,255,255,.05); padding:10px; border-radius:8px;
}
.po-hand .df-card.po-playable { cursor:pointer; transition:transform .1s; }
.po-hand .df-card.po-playable:hover { transform:translateY(-4px); outline:2px solid var(--accent); outline-offset:-2px; }
.po-hand .df-card.po-disabled { opacity:.45; cursor:not-allowed; }
.po-special { display:block; font-size:.5rem; color:#48f; font-weight:bold; line-height:1; }
.po-actions { display:flex; justify-content:center; gap:10px; }
.po-hand .df-card.dobon-match { box-shadow:0 0 8px rgba(90,200,255,.9); outline:2px solid #5ac8f5; outline-offset:-2px; }

/* ── Whist ── */
body.whist-mode .score-box { display:none; }
body.whist-mode #statusMsg { flex:1; text-align:center; }
body.whist-mode #board.wh-board { aspect-ratio:auto; }
body.whist-mode .slot-chip .disc.small,
body.whist-mode .slot-panel-row .disc.small { display:none; }

#board.wh-board {
  display:flex; flex-direction:column; gap:12px; align-items:stretch;
  background:radial-gradient(ellipse at center, #1a3a4a 0%, #0a1a2a 100%);
  border:4px solid #05101a; border-radius:10px;
  padding:14px; width:min(720px,100%); aspect-ratio:auto;
}
.wh-head { color:#fff; text-align:center; font-size:.9rem; }
.wh-status { padding:4px 12px; background:rgba(0,0,0,.35); border-radius:6px; display:inline-block; }
.wh-last { margin-top:6px; color:#fc6; font-size:.82rem; }
.wh-scores { display:flex; gap:10px; justify-content:center; }
.wh-team {
  flex:1; max-width:260px; background:rgba(0,0,0,.3); padding:8px 14px; border-radius:8px;
  color:#fff; text-align:center; border:2px solid transparent;
}
.wh-team.wh-myteam { border-color:var(--accent); background:rgba(125,200,125,.12); }
.wh-tname { font-weight:bold; color:#9cf; }
.wh-tmembers { font-size:.78rem; color:#ccc; }
.wh-tscore { color:#fc6; font-size:.85rem; margin-top:2px; }
.wh-trick { background:rgba(0,0,0,.3); padding:10px; border-radius:8px; color:#fff; text-align:center; min-height:60px; }
.wh-trick-label { font-size:.85rem; color:#fc6; margin-bottom:6px; }
.wh-trick-cards { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.wh-played { display:flex; flex-direction:column; align-items:center; gap:4px; }
.wh-played-name { font-size:.78rem; color:#ccc; }
.wh-hand {
  display:flex; gap:3px; flex-wrap:wrap; justify-content:center;
  background:rgba(255,255,255,.05); padding:10px; border-radius:8px;
}
.wh-hand .df-card.wh-playable { cursor:pointer; transition:transform .1s; }
.wh-hand .df-card.wh-playable:hover { transform:translateY(-4px); outline:2px solid var(--accent); outline-offset:-2px; }
.wh-hand .df-card.wh-disabled { opacity:.4; cursor:not-allowed; }
.wh-hand .df-card.wh-trump { box-shadow:0 0 6px rgba(240,180,40,.6); }

/* ── Hearts ── */
body.hearts-mode .score-box { display:none; }
body.hearts-mode #statusMsg { flex:1; text-align:center; }
body.hearts-mode #board.ht-board { aspect-ratio:auto; }
body.hearts-mode .slot-chip .disc.small,
body.hearts-mode .slot-panel-row .disc.small { display:none; }

#board.ht-board {
  display:flex; flex-direction:column; gap:12px; align-items:stretch;
  background:radial-gradient(ellipse at center, #5a1a2a 0%, #2a0a14 100%);
  border:4px solid #1a0008; border-radius:10px;
  padding:14px; width:min(720px,100%); aspect-ratio:auto;
}
.ht-head { color:#fff; text-align:center; font-size:.9rem; }
.ht-status { padding:4px 12px; background:rgba(0,0,0,.35); border-radius:6px; display:inline-block; }
.ht-last { margin-top:6px; color:#fc6; font-size:.82rem; }
.ht-scores { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
.ht-score {
  background:rgba(0,0,0,.3); padding:6px 12px; border-radius:6px;
  color:#fff; font-size:.85rem; text-align:center; border:2px solid transparent;
}
.ht-score.ht-turn { border-color:var(--accent); box-shadow:0 0 8px rgba(125,200,125,.5); }
.ht-score.ht-me { background:rgba(125,200,125,.12); }
.ht-pname { font-weight:bold; }
.ht-pp { color:#fc6; }
.ht-round { color:#f88; font-size:.78rem; }
.ht-trick {
  background:rgba(0,0,0,.3); padding:10px; border-radius:8px;
  color:#fff; text-align:center; min-height:60px;
}
.ht-trick-label { font-size:.85rem; color:#fc6; margin-bottom:6px; }
.ht-trick-cards { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.ht-played { display:flex; flex-direction:column; align-items:center; gap:4px; }
.ht-played-name { font-size:.78rem; color:#ccc; }
.ht-hand {
  display:flex; gap:3px; flex-wrap:wrap; justify-content:center;
  background:rgba(255,255,255,.05); padding:10px; border-radius:8px;
}
.ht-hand .df-card.ht-playable { cursor:pointer; transition:transform .1s; }
.ht-hand .df-card.ht-playable:hover { transform:translateY(-4px); outline:2px solid var(--accent); outline-offset:-2px; }
.ht-hand .df-card.ht-disabled { opacity:.4; cursor:not-allowed; }
.ht-hand .df-card.ht-pointcard { box-shadow:0 0 6px rgba(200,40,40,.6); }
.ht-pts { display:block; font-size:.55rem; color:#c12; font-weight:bold; line-height:1; }

/* ── Go Fish ── */
body.gofish-mode .score-box { display:none; }
body.gofish-mode #statusMsg { flex:1; text-align:center; }
body.gofish-mode #board.gf-board { aspect-ratio:auto; }
body.gofish-mode .slot-chip .disc.small,
body.gofish-mode .slot-panel-row .disc.small { display:none; }

#board.gf-board {
  display:flex; flex-direction:column; gap:12px; align-items:stretch;
  background:radial-gradient(ellipse at center, #1a4a6a 0%, #0a2a4a 100%);
  border:4px solid #051a3a; border-radius:10px;
  padding:14px; width:min(720px,100%); aspect-ratio:auto;
}
.gf-head { color:#fff; text-align:center; font-size:.9rem; }
.gf-status { padding:4px 12px; background:rgba(0,0,0,.3); border-radius:6px; display:inline-block; }
.gf-last { margin-top:6px; color:#fc6; font-size:.82rem; }
.gf-others { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.gf-other {
  background:rgba(0,0,0,.3); padding:8px 14px; border-radius:8px;
  color:#fff; font-size:.85rem; text-align:center; border:2px solid transparent;
}
.gf-other.gf-turn { border-color:var(--accent); }
.gf-other.gf-target { box-shadow:0 0 12px rgba(240,180,40,.6); border-color:#f0b429; }
.gf-other.gf-clickable { cursor:pointer; }
.gf-other.gf-clickable:hover { background:rgba(255,255,255,.1); }
.gf-oname { font-weight:bold; }
.gf-ostat { color:#fc6; font-size:.78rem; }
.gf-books { color:#fff; font-size:.85rem; text-align:center; }
.gf-books-label { color:#9cf; }
.gf-book { display:inline-block; background:#5cb85c; color:#000; border-radius:4px; padding:1px 8px; margin:0 2px; font-weight:bold; }
.gf-hand {
  display:flex; gap:3px; flex-wrap:wrap; justify-content:center;
  background:rgba(255,255,255,.05); padding:10px; border-radius:8px;
}
.gf-hand .df-card { cursor:pointer; transition:transform .1s; }
.gf-hand .df-card:hover { transform:translateY(-4px); }
.gf-hand .df-card.gf-rank-sel { transform:translateY(-8px); outline:2px solid var(--accent); outline-offset:-2px; box-shadow:0 4px 8px rgba(0,0,0,.5); }
.gf-actions { display:flex; justify-content:center; }
.gf-actions button:disabled { opacity:.5; cursor:default; }

/* ── Napoleon ── */
body.napoleon-mode .score-box { display:none; }
body.napoleon-mode #statusMsg { flex:1; text-align:center; }
body.napoleon-mode #board.np-board { aspect-ratio:auto; }
body.napoleon-mode .slot-chip .disc.small,
body.napoleon-mode .slot-panel-row .disc.small { display:none; }

#board.np-board {
  display:flex; flex-direction:column; gap:12px; align-items:stretch;
  background:radial-gradient(ellipse at center, #4a3a2a 0%, #2a1a0a 100%);
  border:4px solid #1a0a00; border-radius:10px;
  padding:14px; width:min(720px,100%); aspect-ratio:auto;
}
.np-head { color:#fff; text-align:center; font-size:.92rem; }
.np-status { padding:4px 12px; background:rgba(0,0,0,.4); border-radius:6px; display:inline-block; }
.np-scores { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.np-score {
  background:rgba(0,0,0,.3); padding:6px 12px; border-radius:6px;
  color:#fff; font-size:.85rem; text-align:center;
  border:2px solid transparent;
}
.np-score.np-turn { border-color:var(--accent); box-shadow:0 0 8px rgba(125,200,125,.5); }
.np-score.np-me { background:rgba(125,200,125,.15); }
.np-pname { font-weight:bold; }
.np-pp { color:#fc6; }

.np-setup {
  background:rgba(0,0,0,.35); padding:14px; border-radius:8px;
  color:#fff; display:flex; flex-direction:column; gap:8px; align-items:center;
}
.np-setup-label { font-size:.88rem; }
.np-suit-picker { display:flex; gap:8px; }
.np-suit-btn {
  font-size:2rem; padding:6px 14px; background:#fff; color:#000; border:2px solid #555;
  border-radius:6px; cursor:pointer;
}
.np-suit-btn.np-selected { border-color:var(--accent); box-shadow:0 0 6px var(--accent); }
#npPartnerInput { background:#fff; color:#000; padding:8px 12px; border-radius:6px; font-size:1rem; width:140px; text-align:center; }

.np-trick {
  background:rgba(0,0,0,.3); padding:10px; border-radius:8px;
  color:#fff; text-align:center;
}
.np-trick-label { font-size:.85rem; color:#fc6; margin-bottom:6px; }
.np-trick-cards { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.np-played { display:flex; flex-direction:column; align-items:center; gap:4px; }
.np-played-name { font-size:.78rem; color:#ccc; }
.np-last { margin-top:6px; color:#fc6; font-size:.82rem; }

.np-hand {
  display:flex; gap:3px; flex-wrap:wrap; justify-content:center;
  background:rgba(255,255,255,.05); padding:10px; border-radius:8px;
}
.np-hand .df-card.np-playable { cursor:pointer; transition:transform .1s; }
.np-hand .df-card.np-playable:hover { transform:translateY(-4px); outline:2px solid var(--accent); outline-offset:-2px; }
.np-hand .df-card.np-disabled { opacity:.4; cursor:not-allowed; }
.np-hand .df-card.np-trump { box-shadow:0 0 6px rgba(240,180,40,.6); }
.np-special {
  display:block; font-size:.55rem; color:#c12; font-weight:bold;
  margin-top:1px; line-height:1;
}
#npBidCount { background:#fff; color:#000; padding:6px 8px; border-radius:6px; width:80px; text-align:center; font-size:1rem; }

.np-widow-cards {
  display:flex; gap:4px; flex-wrap:wrap; justify-content:center;
  background:rgba(0,0,0,.3); padding:8px; border-radius:6px;
}
.np-widow-cards .df-card { cursor:pointer; transition:transform .1s; }
.np-widow-cards .df-card:hover { transform:translateY(-3px); }
.np-widow-cards .np-from-widow { box-shadow:0 0 6px rgba(240,180,40,.7); }
.np-widow-cards .np-discard-sel { background:#ffcccc !important; outline:2px solid #c12; outline-offset:-2px; }
.np-cfg-pc { padding:4px 10px; background:#2e5c2e; color:#fff; border-radius:6px; }
.np-cfg-pc.cfg-on { background:var(--btn); }

/* ── Memory ── */
body.memory-mode .score-box { display:none; }
body.memory-mode #statusMsg { flex:1; text-align:center; }
body.memory-mode #board.mem-board { aspect-ratio:auto; }
body.memory-mode .slot-chip .disc.small,
body.memory-mode .slot-panel-row .disc.small { display:none; }

#board.mem-board {
  display:flex; flex-direction:column; gap:12px; align-items:stretch;
  background:#3a2a4a; border:3px solid #1a0a2a; border-radius:10px;
  padding:14px; width:min(720px,100%); aspect-ratio:auto;
}
.mem-head { color:#fff; text-align:center; font-size:.9rem; }
.mem-status { padding:4px 12px; background:rgba(0,0,0,.3); border-radius:6px; display:inline-block; }
.mem-scores {
  display:flex; gap:6px; flex-wrap:wrap; justify-content:center;
}
.mem-score {
  background:rgba(0,0,0,.3); padding:6px 12px; border-radius:6px;
  color:#fff; font-size:.85rem; text-align:center;
  border:2px solid transparent;
}
.mem-score.mem-turn { border-color:var(--accent); box-shadow:0 0 8px rgba(125,200,125,.5); }
.mem-score.mem-me { background:rgba(125,200,125,.15); }
.mem-pname { font-weight:bold; }
.mem-pp { color:#fc6; }
.mem-grid {
  display:grid; gap:4px;
  justify-content:center;
  padding:8px;
  background:rgba(0,0,0,.25); border-radius:6px;
}
.mem-cell {
  aspect-ratio:0.7;
  display:flex; align-items:center; justify-content:center;
  border-radius:5px;
  font-size:clamp(.7rem, 1.5vw, 1.2rem); font-weight:bold;
  user-select:none;
  transition:transform .15s;
  min-width:34px;
}
.mem-cell.mem-back {
  background:linear-gradient(135deg, #5a3a8a, #2a1a4a);
  color:#fff; border:1px solid #1a0a3a;
  box-shadow:0 2px 4px rgba(0,0,0,.3);
}
.mem-cell.mem-clickable { cursor:pointer; }
.mem-cell.mem-clickable:hover { transform:translateY(-4px); background:linear-gradient(135deg, #7a5aaa, #4a2a6a); }
.mem-cell.mem-faceup { box-shadow:0 2px 4px rgba(0,0,0,.4); }
.mem-cell.mem-removed { background:transparent; border:1px dashed #555; }
.mem-cell.mem-matched { box-shadow:0 0 8px rgba(125,200,125,.7); outline:2px solid #5cb85c; outline-offset:-2px; }
.mem-cell.mem-miss { outline:2px solid #c12; outline-offset:-2px; }

/* ── Blackjack ── */
body.blackjack-mode .score-box { display:none; }
body.blackjack-mode #statusMsg { flex:1; text-align:center; }
body.blackjack-mode #board.bj-board { aspect-ratio:auto; }
body.blackjack-mode .slot-chip .disc.small,
body.blackjack-mode .slot-panel-row .disc.small { display:none; }

#board.bj-board {
  display:flex; flex-direction:column; gap:12px; align-items:stretch;
  background:radial-gradient(ellipse at center, #2a4a3a 0%, #1a2a1a 100%);
  border:4px solid #0a1a0a; border-radius:14px;
  padding:16px; width:min(800px,100%); aspect-ratio:auto;
}
.bj-head { color:#fff; text-align:center; font-size:.95rem; }
.bj-status { padding:4px 12px; background:rgba(0,0,0,.4); border-radius:6px; display:inline-block; }
.bj-dealer {
  background:rgba(0,0,0,.4); padding:10px; border-radius:8px;
  color:#fff; text-align:center;
}
.bj-dealer-label { font-size:.95rem; color:#fc6; margin-bottom:6px; }
.bj-cards { display:flex; gap:4px; justify-content:center; flex-wrap:wrap; }
.bj-cards .df-card { font-size:1.1rem; padding:6px 8px; min-width:38px; }
.bj-cards .bj-hidden { background:#2a4a6a !important; color:#fff !important; }
.bj-players {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:8px;
}
.bj-player {
  background:rgba(0,0,0,.35); padding:10px; border-radius:8px;
  color:#fff; text-align:center; border:2px solid transparent;
}
.bj-player.bj-me { background:rgba(125,200,125,.15); }
.bj-player.bj-turn { border-color:var(--accent); box-shadow:0 0 12px rgba(125,200,125,.5); }
.bj-player.bj-fin { opacity:.45; }
.bj-pname { font-weight:bold; font-size:.88rem; }
.bj-pchips { color:#fc6; font-size:.85rem; margin:2px 0; }
.bj-bet-amt { color:#5af; margin-left:4px; }
.bj-pval { color:#fff; font-size:.9rem; min-height:1.2em; }
.bj-badge { display:inline-block; padding:1px 8px; border-radius:4px; font-size:.75rem; margin-top:3px; font-weight:bold; }
.bj-r-win { background:#5cb85c; color:#000; }
.bj-r-lose { background:#c12; color:#fff; }
.bj-r-push { background:#888; color:#fff; }
.bj-r-bj { background:#f0b429; color:#000; }
.bj-actions { display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; }
.bj-bet-input { color:#fff; font-size:.88rem; }
.bj-bet-input input { width:80px; margin:0 4px; padding:4px 8px; }

/* ── Indian Poker ── */
body.indianpoker-mode .score-box { display:none; }
body.indianpoker-mode #statusMsg { flex:1; text-align:center; }
body.indianpoker-mode #board.ip-board { aspect-ratio:auto; }
body.indianpoker-mode .slot-chip .disc.small,
body.indianpoker-mode .slot-panel-row .disc.small { display:none; }

#board.ip-board {
  display:flex; flex-direction:column; gap:12px; align-items:stretch;
  background:radial-gradient(ellipse at center, #2a4a3a 0%, #1a3a2a 100%);
  border:4px solid #0a1a0a; border-radius:10px;
  padding:14px; width:min(760px,100%); aspect-ratio:auto;
}
.ip-head { color:#fff; text-align:center; font-size:.95rem; }
.ip-status { padding:4px 12px; background:rgba(0,0,0,.4); border-radius:6px; display:inline-block; }
.ip-last { margin-top:6px; color:#fc6; font-size:.85rem; padding:4px 12px; background:rgba(0,0,0,.3); border-radius:6px; display:inline-block; }
.ip-others {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:8px;
}
.ip-player {
  background:rgba(0,0,0,.35); padding:10px; border-radius:8px;
  color:#fff; text-align:center; border:2px solid transparent;
  transition:border-color .15s;
}
.ip-player.ip-me { background:rgba(125,200,125,.15); }
.ip-player.ip-turn { border-color:var(--accent); box-shadow:0 0 12px rgba(125,200,125,.6); }
.ip-player.ip-fin { opacity:.45; }
.ip-name { font-weight:bold; font-size:.88rem; }
.ip-chips { color:#fc6; font-size:.95rem; margin-top:2px; }
.ip-bet { color:#fff; font-size:.78rem; margin-top:4px; min-height:1em; }
.ip-card-box { display:flex; flex-direction:column; align-items:center; gap:2px; margin-top:6px; }
.ip-card-hidden { background:#2a4a6a !important; color:#fff !important; }
.ip-card-empty { background:#1a2a1a !important; color:#666 !important; border-color:#333 !important; }
.ip-card-label { color:var(--muted); font-size:.7rem; }
.ip-actions { display:flex; gap:10px; justify-content:center; }
.ip-actions button:disabled { opacity:.4; cursor:default; }

/* ── Babanuki (Old Maid) ── */
body.babanuki-mode .score-box { display:none; }
body.babanuki-mode #statusMsg { flex:1; text-align:center; }
body.babanuki-mode #board.bn-board { aspect-ratio:auto; }
body.babanuki-mode .slot-chip .disc.small,
body.babanuki-mode .slot-panel-row .disc.small { display:none; }

#board.bn-board {
  display:flex; flex-direction:column; gap:10px; align-items:stretch;
  background:#2a3a5a; border:3px solid #0a1a3a; border-radius:10px;
  padding:14px; width:min(720px,100%); aspect-ratio:auto;
}
.bn-head { color:#fff; text-align:center; font-size:.9rem; }
.bn-status { padding:4px 12px; background:rgba(0,0,0,.3); border-radius:6px; display:inline-block; }
.bn-last { margin-top:4px; color:#fc6; font-size:.82rem; }
.bn-others {
  display:flex; gap:8px; justify-content:space-around; flex-wrap:wrap;
}
.bn-other {
  flex:1; min-width:120px;
  background:rgba(0,0,0,.3); padding:8px; border-radius:8px;
  color:#fff; font-size:.85rem; text-align:center;
  border:2px solid transparent;
}
.bn-other.bn-turn { border-color:var(--accent); }
.bn-other.bn-fin { opacity:.5; }
.bn-other.bn-target { box-shadow:0 0 12px rgba(240,180,40,.6); border-color:#f0b429; }
.bn-other-name { font-weight:bold; margin-bottom:4px; }
.bn-other-cards { color:#fc6; font-size:.78rem; margin-top:4px; }
.bn-cards-back { display:flex; gap:1px; flex-wrap:wrap; justify-content:center; }
.bn-card-back {
  display:inline-block; padding:0 2px; font-size:1.5rem; color:#5a7a9a;
  background:linear-gradient(135deg, #2a4a6a, #1a2a4a);
  border:1px solid #000; border-radius:3px;
  user-select:none;
}
.bn-card.bn-clickable { cursor:pointer; transition:transform .1s; }
.bn-card.bn-clickable:hover { transform:translateY(-4px); background:linear-gradient(135deg, #4a6a8a, #2a4a6a); }
.bn-hand {
  display:flex; gap:3px; flex-wrap:wrap; justify-content:center;
  background:rgba(255,255,255,.05); padding:10px; border-radius:8px;
  min-height:70px;
}
.bn-joker { background:linear-gradient(135deg, #fff8e8, #f0d9a8); color:#c12; font-weight:bold; box-shadow:0 0 8px rgba(255,200,50,.5); }

/* ── Mastermind ── */
body.mastermind-mode .score-box { display:none; }
body.mastermind-mode #statusMsg { flex:1; text-align:center; }
body.mastermind-mode #board.mm-board { aspect-ratio:auto; }
body.mastermind-mode .slot-chip .disc.small,
body.mastermind-mode .slot-panel-row .disc.small { display:none; }

#board.mm-board {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background:#3a2a4a; border:3px solid #1a0a2a; border-radius:10px;
  padding:14px; width:min(480px,100%); aspect-ratio:auto;
}
.mm-header { color:#fff; font-size:1rem; padding:6px 14px; background:rgba(0,0,0,.3); border-radius:6px; }
.mm-code-box, .mm-code-hidden {
  background:#2a1a3a; padding:8px 14px; border-radius:6px;
  display:flex; gap:10px; align-items:center; color:#fff;
}
.mm-code-row { display:flex; gap:4px; }
.mm-code-label { font-size:.85rem; color:#fc6; }
.mm-history {
  display:flex; flex-direction:column; gap:3px;
  background:rgba(255,255,255,.06); padding:8px; border-radius:6px;
  width:100%;
}
.mm-row {
  display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:8px;
  padding:3px 6px; background:rgba(0,0,0,.2); border-radius:4px;
}
.mm-row-num { color:#aaa; font-size:.85rem; text-align:center; }
.mm-peg-row { display:flex; gap:3px; }
.mm-peg {
  width:22px; height:22px; border-radius:50%;
  border:1px solid #000; box-shadow:inset -2px -3px 4px rgba(0,0,0,.3);
}
.mm-peg-empty { background:#222; border:1px dashed #555; box-shadow:none; }
.mm-peg-slot { cursor:pointer; }
.mm-peg-swatch { width:28px; height:28px; cursor:pointer; transition:transform .1s; }
.mm-peg-swatch:hover { transform:scale(1.15); }
.mm-fb {
  display:grid; grid-template-columns:repeat(2, auto); gap:2px;
}
.mm-fb-peg {
  width:10px; height:10px; border-radius:50%;
}
.mm-fb-black { background:#000; border:1px solid #444; }
.mm-fb-white { background:#fff; border:1px solid #888; }
.mm-input {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:rgba(255,255,255,.08); padding:10px; border-radius:6px;
  width:100%;
}
.mm-palette { display:flex; gap:6px; }
.mm-input button:disabled { opacity:.4; cursor:default; }

/* ── Sevens ── */
body.sevens-mode .score-box { display:none; }
body.sevens-mode #statusMsg { flex:1; text-align:center; }
body.sevens-mode #board.sv-board { aspect-ratio:auto; }
body.sevens-mode .slot-chip .disc.small,
body.sevens-mode .slot-panel-row .disc.small { display:none; }

#board.sv-board {
  display:flex; flex-direction:column; gap:10px; align-items:stretch;
  background:#1a4a2a; border:4px solid #0a2a0a; border-radius:10px;
  padding:14px; width:min(720px,100%); aspect-ratio:auto;
}
.sv-head { color:#fff; text-align:center; font-size:.9rem; }
.sv-status { padding:4px 12px; background:rgba(0,0,0,.3); border-radius:6px; display:inline-block; }
.sv-others { display:flex; gap:8px; justify-content:space-around; }
.sv-other {
  flex:1; background:rgba(0,0,0,.3); padding:8px 12px; border-radius:8px;
  color:#fff; font-size:.85rem; text-align:center;
  border:2px solid transparent;
}
.sv-other.sv-turn { border-color:var(--accent); box-shadow:0 0 8px rgba(125,200,125,.5); }
.sv-other.sv-fin { opacity:.5; }
.sv-other-name { font-weight:bold; }
.sv-other-cards { color:#fc6; font-size:.8rem; }
.sv-table {
  background:rgba(255,255,255,.95); border-radius:8px; padding:8px;
  display:flex; flex-direction:column; gap:4px;
}
.sv-row { display:flex; align-items:center; gap:2px; }
.sv-suit-label { width:24px; font-weight:bold; font-size:1.1rem; text-align:center; }
.sv-suit-red { color:#c12; }
.sv-suit-black { color:#000; }
.sv-cell {
  flex:1; display:flex; align-items:center; justify-content:center;
  font-size:.85rem; font-weight:bold; padding:6px 0;
  border-radius:3px;
}
.sv-cell.sv-empty { background:#f0f0f0; color:#ccc; border:1px dashed #ddd; }
.sv-cell.sv-placed { background:#fff; border:1px solid #888; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.sv-cell.sv-cell-red { color:#c12; }
.sv-cell.sv-cell-black { color:#222; }
.sv-cell.sv-last { background:#ffe480; box-shadow:0 0 0 2px #f0b429; }
.sv-hand {
  display:flex; gap:3px; flex-wrap:wrap; justify-content:center;
  background:rgba(255,255,255,.05); padding:10px; border-radius:8px;
  min-height:70px;
}
.sv-hand .df-card { cursor:default; opacity:.4; }
.sv-hand .df-card.sv-playable { opacity:1; cursor:pointer; transition:transform .1s; }
.sv-hand .df-card.sv-playable:hover { transform:translateY(-4px); outline:2px solid var(--accent); outline-offset:-2px; }
.sv-actions { display:flex; gap:10px; justify-content:center; }

/* Daifugo config UI */
.df-cfg-row {
  display:flex; gap:10px; align-items:center;
  padding:4px 8px; border-radius:6px;
  font-size:.88rem;
}
.df-cfg-row.editable { cursor:pointer; }
.df-cfg-row.editable:hover { background:rgba(255,255,255,.05); }
.df-cfg-row input[type=checkbox] { width:16px; height:16px; }
.df-cfg-label { font-weight:bold; min-width:8em; }
.df-cfg-desc { color:var(--muted); font-size:.8rem; }

/* ── Daifugo (President) ── */
body.daifugo-mode .score-box { display:none; }
body.daifugo-mode #statusMsg { flex:1; text-align:center; }
body.daifugo-mode #board.df-board { aspect-ratio:auto; }
body.daifugo-mode .slot-chip .disc.small,
body.daifugo-mode .slot-panel-row .disc.small { display:none; }

#board.df-board {
  display:flex; flex-direction:column; gap:10px; align-items:stretch;
  background:#1a4a2a; border:4px solid #0a2a0a; border-radius:10px;
  padding:14px; width:min(640px,100%); aspect-ratio:auto;
}
.df-header { color:#fff; text-align:center; font-size:.9rem; }
.df-status { padding:4px 12px; background:rgba(0,0,0,.3); border-radius:6px; display:inline-block; }
.df-flags { display:flex; gap:8px; justify-content:center; margin-top:4px; flex-wrap:wrap; }
.df-flag { padding:2px 8px; border-radius:4px; font-size:.78rem; font-weight:bold; }
.df-flag-rev { background:#c12; color:#fff; }
.df-flag-bind { background:#f0b429; color:#000; }
.df-flag-stairs { background:#5cb85c; color:#000; }
.df-flag-back { background:#9b59b6; color:#fff; }
.df-flag-skip { background:#5bc8f5; color:#000; }
.df-others { display:flex; gap:8px; justify-content:space-around; }
.df-other {
  flex:1; background:rgba(0,0,0,.3); padding:8px 12px; border-radius:8px;
  color:#fff; font-size:.85rem; text-align:center;
  border:2px solid transparent;
}
.df-other.df-turn { border-color:var(--accent); box-shadow:0 0 8px rgba(125,200,125,.5); }
.df-other.df-fin { opacity:.5; }
.df-other-name { font-weight:bold; }
.df-other-cards { color:#fc6; }
.df-pile {
  background:rgba(0,0,0,.4); border-radius:8px; padding:10px;
  display:flex; flex-direction:column; gap:6px; align-items:center;
  min-height:80px;
}
.df-pile-label { color:#fff; font-size:.85rem; }
.df-pile-cards { display:flex; gap:4px; flex-wrap:wrap; justify-content:center; }
.df-hand {
  display:flex; gap:3px; flex-wrap:wrap; justify-content:center;
  background:rgba(255,255,255,.05); padding:10px; border-radius:8px;
  min-height:70px;
}
.df-card {
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; color:#000; border:1px solid #333; border-radius:5px;
  font-weight:bold; font-size:1rem; padding:8px 8px; min-width:36px;
  user-select:none; cursor:default;
  box-shadow:0 2px 3px rgba(0,0,0,.3);
}
.df-hand .df-card { cursor:pointer; transition:transform .1s; }
.df-hand .df-card:hover { transform:translateY(-4px); }
.df-card.df-card-red { color:#c12; }
.df-card.df-card-black { color:#222; }
.df-card.df-selected { transform:translateY(-8px); box-shadow:0 4px 8px rgba(0,0,0,.5); outline:2px solid var(--accent); outline-offset:-2px; }
.df-actions { display:flex; gap:10px; justify-content:center; }
.df-actions button:disabled { opacity:.4; cursor:default; }

/* ── Fox and Geese ── */
body.foxgeese-mode .score-box { display:none; }
body.foxgeese-mode #statusMsg { flex:1; text-align:center; }
body.foxgeese-mode #board.fg-board { aspect-ratio:auto; }
body.foxgeese-mode .slot-chip .disc.small,
body.foxgeese-mode .slot-panel-row .disc.small { display:none; }

#board.fg-board {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background:#3a5a2a; border:4px solid #1a3a0a; border-radius:8px;
  padding:14px; width:min(460px,100%); aspect-ratio:auto;
}
.fg-head {
  display:flex; gap:14px; justify-content:space-between; width:100%; align-items:center;
  color:#fff; font-size:.9rem; background:rgba(0,0,0,.3); padding:6px 14px; border-radius:6px;
}
.fg-status { color:#f0b429; font-weight:bold; }
.fg-grid {
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); grid-template-rows:repeat(7,minmax(0,1fr));
  gap:2px; width:min(380px,100%); aspect-ratio:1;
}
.fg-cell {
  background:#b88c4a; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(.9rem, 4cqi, 1.6rem);
  user-select:none; min-width:0; min-height:0;
  position:relative;
}
.fg-cell.fg-invalid { background:transparent; pointer-events:none; }
.fg-cell.fg-clickable { cursor:pointer; }
.fg-cell.fg-clickable:hover { background:#d8ac5a; outline:2px solid var(--accent); outline-offset:-2px; }
.fg-cell.fg-selected { background:#7dc87d; outline:2px solid var(--accent); outline-offset:-2px; }
.fg-cell.fg-dest { background:#5cb85c; cursor:pointer; }
.fg-cell.fg-dest::after {
  content:''; position:absolute; width:30%; height:30%; border-radius:50%;
  background:rgba(255,255,255,.55);
}
.fg-cell.fg-dest-jump { background:#d9534f; cursor:pointer; }
.fg-cell.fg-dest-jump::after {
  content:'!'; position:absolute; color:#fff; font-weight:bold;
}
.fg-cell.fg-last { outline:2px dashed rgba(255,200,40,.7); outline-offset:-2px; }
.fg-cell.fg-captured-recently { background:rgba(200,50,50,.4); }
.fg-piece { line-height:1; }

/* ── Nine Men's Morris ── */
body.morris-mode .score-box { display:none; }
body.morris-mode #statusMsg { flex:1; text-align:center; }
body.morris-mode #board.morris-board { aspect-ratio:auto; }
body.morris-mode .slot-chip .disc.small,
body.morris-mode .slot-panel-row .disc.small { display:none; }

#board.morris-board {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background:#a87838; border:4px solid #5a3a1a; border-radius:8px;
  padding:14px; width:min(460px,100%); aspect-ratio:auto;
}
.morris-head {
  display:flex; gap:14px; align-items:center; justify-content:space-between; width:100%;
  font-size:.85rem; color:#fff; background:rgba(0,0,0,.3); padding:6px 14px; border-radius:6px;
}
.morris-phase { color:#fc6; font-weight:bold; }
.morris-svg { width:100%; height:auto; max-width:380px; background:#d8a868; border-radius:4px; }
.morris-line { stroke:#2a1a08; stroke-width:2; }
.morris-spot { fill:#2a1a08; }
.morris-stone { stroke:#000; stroke-width:1.5; }
.morris-stone-white { fill:#f5f5f5; }
.morris-stone-black { fill:#1a1a1a; }
.morris-last { fill:none; stroke:#fc0; stroke-width:2; stroke-dasharray:4,2; }
.morris-selected { fill:none; stroke:var(--accent); stroke-width:3; }
.morris-hit { fill:transparent; }
.morris-hit.morris-clickable { cursor:pointer; }
.morris-hit.morris-can-place:hover { fill:rgba(125,200,125,.5); }
.morris-hit.morris-can-remove:hover { fill:rgba(255,60,60,.5); }
.morris-hit.morris-can-dest:hover { fill:rgba(125,200,250,.5); }

/* ── Backgammon ── */
body.backgammon-mode .score-box { display:none; }
body.backgammon-mode #statusMsg { flex:1; text-align:center; }
body.backgammon-mode #board.backgammon-board { aspect-ratio:auto; }
body.backgammon-mode .slot-chip .disc.small,
body.backgammon-mode .slot-panel-row .disc.small { display:none; }

#board.backgammon-board {
  display:flex; flex-direction:column; gap:6px; align-items:center;
  background:#6b3a1a; border:4px solid #2a0a00; border-radius:8px;
  padding:10px; width:min(720px,100%); aspect-ratio:auto;
}
.bg-head {
  display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:center;
  color:#fff; font-size:.85rem;
  background:rgba(0,0,0,.35); padding:6px 14px; border-radius:6px;
}
.bg-die { display:inline-block; background:#fff; color:#000; border:1px solid #000; border-radius:4px; padding:0 6px; font-weight:bold; margin:0 2px; }
.bg-row { display:flex; width:100%; gap:2px; align-items:stretch; }
.bg-half { flex:6; display:flex; gap:2px; }
.bg-point {
  flex:1; min-width:0; min-height:160px;
  display:flex; flex-direction:column; align-items:center;
  padding:4px 0;
  position:relative;
}
.bg-point.bg-light { background:#e8c888; clip-path:polygon(0 0, 100% 0, 50% 100%); }
.bg-point.bg-dark  { background:#a87838; clip-path:polygon(0 0, 100% 0, 50% 100%); }
.bg-row-bot .bg-point.bg-light { clip-path:polygon(50% 0, 0 100%, 100% 100%); }
.bg-row-bot .bg-point.bg-dark  { clip-path:polygon(50% 0, 0 100%, 100% 100%); }
.bg-point.bg-clickable { cursor:pointer; }
.bg-point.bg-clickable:hover::before { content:''; position:absolute; inset:0; background:rgba(125,200,125,.3); }
.bg-point.bg-selected::before { content:''; position:absolute; inset:0; background:rgba(125,200,125,.5); }
.bg-point.bg-dest { cursor:pointer; }
.bg-point.bg-dest::before { content:''; position:absolute; inset:0; background:rgba(125,250,125,.4); }
.bg-point.bg-last::after { content:''; position:absolute; inset:0; outline:2px dashed rgba(255,200,40,.7); outline-offset:-2px; }
.bg-stack { display:flex; flex-direction:column; gap:1px; align-items:center; padding-top:2px; position:relative; z-index:1; }
.bg-row-bot .bg-stack { flex-direction:column-reverse; justify-content:flex-end; }
.bg-checker { width:20px; height:20px; border-radius:50%; border:1px solid #000; }
.bg-checker-white { background:radial-gradient(circle at 30% 30%, #fff, #ccc); }
.bg-checker-black { background:radial-gradient(circle at 30% 30%, #555, #000); }
.bg-count { background:#000; color:#fff; border-radius:50%; padding:0 4px; font-size:.7rem; }
.bg-bar {
  flex:0 0 36px; background:#5a2a0a; border:2px solid #2a0a00;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:4px 0;
}
.bg-bar-mirror { background:transparent; border:none; }
.bg-bar-label { color:#fff; font-size:.7rem; font-weight:bold; writing-mode:vertical-rl; }
.bg-bar-half { display:flex; flex-direction:column; gap:2px; align-items:center; flex:1; padding:4px 0; }
.bg-checker-bar { box-shadow:0 0 4px rgba(255,255,0,.5); }
.bg-bar-half.bg-clickable { cursor:pointer; background:rgba(125,200,125,.2); }
.bg-bar-half.bg-selected { background:rgba(125,200,125,.5); }
.bg-off {
  flex:0 0 60px; background:rgba(0,0,0,.4); border:2px solid #2a0a00;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; padding:8px 4px; cursor:default;
}
.bg-off-label { font-size:.85rem; font-weight:bold; }
.bg-off-count { font-size:1.5rem; }
.bg-off.bg-dest { background:rgba(125,250,125,.5); cursor:pointer; }
.bg-actions { display:flex; gap:10px; margin-top:6px; }

/* ── Shogi ── */
body.shogi-mode .score-box { display:none; }
body.shogi-mode #statusMsg { flex:1; text-align:center; }
body.shogi-mode #board.shogi-board { aspect-ratio:auto; }
body.shogi-mode .slot-chip .disc.small,
body.shogi-mode .slot-panel-row .disc.small { display:none; }

#board.shogi-board {
  display:flex; flex-direction:column; gap:8px; align-items:center;
  background:#3a2a18; border:3px solid #1a0a00; border-radius:6px;
  padding:10px; width:min(540px,100%); aspect-ratio:auto;
}
.sh-hand {
  display:flex; gap:4px; flex-wrap:wrap; align-items:center;
  background:#5a3a1a; border-radius:6px; padding:6px 10px;
  width:100%; box-sizing:border-box; color:#fff;
}
.sh-hand-label { font-size:.8rem; color:#fc6; margin-right:6px; }
.sh-hand-piece {
  display:inline-block; padding:3px 6px; border-radius:4px;
  background:#d8b878; color:#2a1a08; font-weight:bold; font-size:1.1rem;
  border:1px solid #5a3a1a; user-select:none;
}
.sh-hand-piece sup { font-size:.65rem; margin-left:1px; }
.sh-hand-piece.sh-clickable { cursor:pointer; }
.sh-hand-piece.sh-clickable:hover { background:#e8c888; }
.sh-hand-piece.sh-selected { background:#7dc87d; box-shadow:0 0 6px var(--accent); }
.sh-grid {
  display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); grid-template-rows:repeat(9,minmax(0,1fr));
  gap:1px; background:#5a3a1a;
  width:min(440px,100%); aspect-ratio:1; padding:2px; border-radius:3px;
}
.sh-cell {
  background:#e8c888; display:flex; align-items:center; justify-content:center;
  font-size:clamp(.7rem, 3cqi, 1.4rem); color:#2a1a08; user-select:none;
  min-width:0; min-height:0; position:relative;
}
.sh-cell.sh-last { box-shadow:inset 0 0 0 2px rgba(240,180,40,.7); }
.sh-cell.sh-selected { background:#7dc87d; }
.sh-cell.sh-dest { background:#a8d8a8; }
.sh-cell.sh-dest::after {
  content:''; position:absolute; width:25%; height:25%; border-radius:50%;
  background:rgba(0,150,0,.5);
}
.sh-cell.sh-clickable { cursor:pointer; }
.sh-piece { font-weight:bold; line-height:1; }
.sh-piece.sh-mine { color:#000; }
.sh-piece.sh-opp { color:#000; transform:rotate(180deg); }
.sh-piece.sh-promoted { color:#c12; }

/* ── Go (Igo) ── */
body.go-mode .score-box .disc.black { /* keep default look */ }
body.go-mode #board.go-board { aspect-ratio:auto; }

#board.go-board {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background:#d8b878; border:4px solid #5a3a1a; border-radius:6px;
  padding:12px; width:min(440px,100%); aspect-ratio:auto;
}
.go-head {
  display:flex; gap:14px; align-items:center; font-size:.85rem; color:#2a1a08;
  background:rgba(255,255,255,.4); padding:4px 14px; border-radius:6px;
}
.go-cap { font-weight:bold; }
.go-pass-info { color:#c33; }
.go-komi { color:#666; }
.go-svg { width:100%; height:auto; max-width:400px; }
.go-line { stroke:#2a1a08; stroke-width:1; }
.go-hoshi { fill:#2a1a08; }
.go-stone { stroke:#000; stroke-width:.5; }
.go-stone-black { fill:radial-gradient(circle, #555, #000); fill:#1a1a1a; }
.go-stone-white { fill:radial-gradient(circle, #fff, #ccc); fill:#f5f5f5; }
.go-lastmark { pointer-events:none; }
.go-lastmark.on-black { fill:#fff; }
.go-lastmark.on-white { fill:#000; }
.go-hit { fill:transparent; cursor:pointer; }
.go-hit:hover.go-hit-black { fill:rgba(0,0,0,.35); }
.go-hit:hover.go-hit-white { fill:rgba(255,255,255,.55); }
.go-pass-btn { padding:6px 18px; }

/* ── Hex ── */
body.hex-mode .score-box { display:none; }
body.hex-mode #statusMsg { flex:1; text-align:center; }
body.hex-mode #board.hex-board { aspect-ratio:auto; }
body.hex-mode .slot-chip .disc.small,
body.hex-mode .slot-panel-row .disc.small { display:none; }

#board.hex-board {
  display:flex; align-items:center; justify-content:center;
  background:#2a3a3a; border:3px solid #1a2a2a; border-radius:10px;
  padding:10px; width:min(640px,100%); aspect-ratio:auto;
}
.hex-svg { width:100%; height:auto; }
.hex-cell { fill:#d8c89a; stroke:#5a4a2a; stroke-width:1.5; transition: fill .1s; }
.hex-cell.hex-clickable { cursor:pointer; }
.hex-cell.hex-clickable:hover { fill:#e8d8b0; }
.hex-stone { stroke:#000; stroke-width:1; }
.hex-stone-red  { fill:radial-gradient(circle, #f55, #911); fill:#e33; }
.hex-stone-blue { fill:#48d; }
.hex-stone-win { stroke:#fc0; stroke-width:3; filter:drop-shadow(0 0 6px rgba(255,200,0,.8)); }
.hex-last { fill:none; stroke:#fc0; stroke-width:2; stroke-dasharray:3,2; }
.hex-edge { stroke-width:6; stroke-linecap:round; }
.hex-edge-red  { stroke:#e33; }
.hex-edge-blue { stroke:#48d; }

/* ── Diamond (Chinese Checkers) ── */
body.diamond-mode #board.diamond-board { aspect-ratio:auto; }
body.diamond-mode .slot-chip .disc.small,
body.diamond-mode .slot-panel-row .disc.small { display:none; }
#board.diamond-board {
  display:flex; align-items:center; justify-content:center;
  background:#23303a; border:3px solid #16202a; border-radius:12px;
  padding:10px; width:min(560px,100%); aspect-ratio:auto;
}
.diamond-svg { width:100%; height:auto; }
.dm-hole { fill:#3a4a56; stroke:#1c2730; stroke-width:1; }
.dm-goal-R { fill:#5a3338; }
.dm-goal-G { fill:#2f4a33; }
.dm-goal-Y { fill:#544f2e; }
.dm-dest { fill:none; stroke:#6fe06f; stroke-width:2.5; filter:drop-shadow(0 0 4px rgba(110,224,110,.7)); }
.dm-peg { stroke:rgba(0,0,0,.45); stroke-width:1.5; }
.dm-peg.dm-selected { stroke:#fff; stroke-width:3; filter:drop-shadow(0 0 6px rgba(255,255,255,.9)); }
.dm-peg.dm-last { stroke:#ffd84d; stroke-width:2.5; }

/* ── Bagh-Chal (Tigers & Goats) ── */
body.baghchal-mode #board.baghchal-board { aspect-ratio:auto; }
body.baghchal-mode .slot-chip .disc.small,
body.baghchal-mode .slot-panel-row .disc.small { display:none; }
#board.baghchal-board {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:#3a2e1e; border:3px solid #241a10; border-radius:12px;
  padding:12px; width:min(520px,100%); aspect-ratio:auto;
}
.bc-header { color:#f0d8a8; font-size:.9rem; font-weight:bold; text-align:center; }
.bc-svg { width:100%; height:auto; }
.bc-line { stroke:#caa86a; stroke-width:2; }
.bc-node { fill:#caa86a; stroke:#7a5e2e; stroke-width:1; }
.bc-piece { stroke:rgba(0,0,0,.5); stroke-width:1.5; }
.bc-tiger { fill:#e87a2a; }
.bc-goat  { fill:#f2f0e6; }
.bc-emoji { font-size:24px; pointer-events:none; user-select:none; }
.bc-piece.bc-selected { stroke:#fff; stroke-width:3.5; filter:drop-shadow(0 0 6px rgba(255,255,255,.9)); }
.bc-piece.bc-last { stroke:#ffd84d; stroke-width:3; }
.bc-dest { fill:none; stroke:#6fe06f; stroke-width:3; filter:drop-shadow(0 0 4px rgba(110,224,110,.7)); }
.bc-dest.bc-capture { stroke:#ff5a5a; filter:drop-shadow(0 0 5px rgba(255,90,90,.8)); }

/* ── Oware (Mancala) ── */
body.oware-mode #board.ow-board { aspect-ratio:auto; }
#board.ow-board {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background:#6e4a28; border:3px solid #3e2a16; border-radius:16px;
  padding:16px; width:min(560px,100%); aspect-ratio:auto;
}
.ow-header { color:#f0d8b0; font-size:1rem; font-weight:bold; text-align:center; }
.ow-row { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; width:100%; }
.ow-pit {
  aspect-ratio:1; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 40% 35%,#caa46a,#7a5226); box-shadow:inset 0 4px 8px rgba(0,0,0,.4);
}
.ow-opp { background:radial-gradient(circle at 40% 35%,#b89060,#6a4620); }
.ow-pit.ow-playable { box-shadow:inset 0 4px 8px rgba(0,0,0,.4),0 0 0 3px #6fe06f; }
.ow-pit.ow-lastpit { box-shadow:inset 0 4px 8px rgba(0,0,0,.4),0 0 0 3px #ffd84d; }
.ow-pit.ow-landpit { box-shadow:inset 0 4px 8px rgba(0,0,0,.4),0 0 0 3px #ff8a4d; }
.ow-count { font-size:1.5rem; font-weight:bold; color:#2a1c0e; text-shadow:0 1px 1px rgba(255,255,255,.3); }
.ow-hint { color:#e8d0a8; font-size:.85rem; text-align:center; }

/* ── Dama (Turkish draughts) ── */
body.dama-mode #board.dm2-board { aspect-ratio:auto; }
#board.dm2-board { display:flex; align-items:center; justify-content:center; width:min(480px,100%); aspect-ratio:1; }
.dm2-grid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); grid-template-rows:repeat(8,minmax(0,1fr)); width:100%; aspect-ratio:1; border:3px solid #5a3a1a; border-radius:4px; overflow:hidden; }
.dm2-cell { display:flex; align-items:center; justify-content:center; position:relative; }
.dm2-light { background:#e8cfa0; }
.dm2-dark { background:#b07a44; }
.dm2-cell.dm2-lastcell { box-shadow:inset 0 0 0 3px #ffd84d; }
.dm2-cell.dm2-dest::after { content:''; width:30%; height:30%; border-radius:50%; background:rgba(76,175,80,.6); }
.dm2-cell.dm2-cap { box-shadow:inset 0 0 0 3px #ff5a5a; cursor:pointer; }
.dm2-piece { width:76%; height:76%; border-radius:50%; box-shadow:0 2px 3px rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; font-size:min(4vw,20px); color:#ffd84d; }
.dm2-red { background:radial-gradient(circle at 35% 30%,#ff6a5a,#a01f12); }
.dm2-black { background:radial-gradient(circle at 35% 30%,#555,#111); }
.dm2-piece.dm2-king { box-shadow:0 2px 3px rgba(0,0,0,.45),0 0 0 3px #ffd84d inset; }
.dm2-piece.dm2-selected { outline:3px solid #4caf50; outline-offset:1px; box-shadow:0 0 8px rgba(76,175,80,.9); }

/* ── Seega ── */
body.seega-mode #board.sg-board { aspect-ratio:auto; }
#board.sg-board {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:#b88a52; border:3px solid #5e421f; border-radius:10px;
  padding:12px; width:min(420px,100%); aspect-ratio:auto;
}
.sg-header { color:#3a2410; font-size:.9rem; font-weight:bold; text-align:center; }
.sg-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:repeat(5,minmax(0,1fr)); gap:2px; width:100%; aspect-ratio:1; background:#5e421f; }
.sg-cell { background:#d9b783; display:flex; align-items:center; justify-content:center; position:relative; }
.sg-cell.sg-center { background:#caa24a; box-shadow:inset 0 0 0 2px #8a6a2a; }
.sg-cell.sg-lastcell { box-shadow:inset 0 0 0 2px #e0a020; }
.sg-cell.sg-dest::after { content:''; width:30%; height:30%; border-radius:50%; background:rgba(76,175,80,.65); }
.sg-cell.sg-dest { cursor:pointer; }
.sg-piece { width:78%; height:78%; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.5); }
.sg-black { background:radial-gradient(circle at 35% 30%,#555,#111); }
.sg-white { background:radial-gradient(circle at 35% 30%,#fff,#cbb); }
.sg-piece.sg-selected { outline:3px solid #4caf50; outline-offset:1px; box-shadow:0 0 8px rgba(76,175,80,.9); }

/* ── Hasami Shogi ── */
body.hasami-mode #board.hs-board { aspect-ratio:auto; }
#board.hs-board {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:#caa46a; border:3px solid #6a4a24; border-radius:10px;
  padding:10px; width:min(500px,100%); aspect-ratio:auto;
}
.hs-header { color:#3a2410; font-size:.9rem; font-weight:bold; text-align:center; }
.hs-grid { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); grid-template-rows:repeat(9,minmax(0,1fr)); gap:1px; width:100%; aspect-ratio:1; background:#6a4a24; }
.hs-cell { background:#dcc086; display:flex; align-items:center; justify-content:center; position:relative; }
.hs-cell.hs-lastcell { box-shadow:inset 0 0 0 2px #e0a020; }
.hs-cell.hs-dest::after { content:''; width:30%; height:30%; border-radius:50%; background:rgba(76,175,80,.65); }
.hs-cell.hs-dest { cursor:pointer; }
.hs-piece { width:80%; height:80%; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.5); }
.hs-black { background:radial-gradient(circle at 35% 30%,#555,#111); }
.hs-white { background:radial-gradient(circle at 35% 30%,#fff,#cbb); }
.hs-piece.hs-selected { outline:3px solid #4caf50; outline-offset:1px; box-shadow:0 0 8px rgba(76,175,80,.9); }

/* ── Tapatan ── */
body.tapatan-mode #board.tp-board { aspect-ratio:auto; }
#board.tp-board {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background:#2a3a4a; border:3px solid #16222e; border-radius:14px;
  padding:14px; width:min(380px,100%); aspect-ratio:auto;
}
.tp-header { color:#cfe4f4; font-size:.9rem; font-weight:bold; text-align:center; }
.tp-svg { width:100%; height:auto; }
.tp-line { stroke:#7fa8c8; stroke-width:3; }
.tp-node { fill:#3f5a72; stroke:#23394a; stroke-width:2; }
.tp-dest { fill:#2f6e3a; stroke:#6fe06f; stroke-width:3; }
.tp-piece { stroke:rgba(0,0,0,.5); stroke-width:1.5; }
.tp-black { fill:#1c1c1c; }
.tp-white { fill:#f0ece0; }
.tp-piece.tp-selected { stroke:#6fe06f; stroke-width:3.5; filter:drop-shadow(0 0 6px rgba(110,224,110,.9)); }
.tp-piece.tp-last { stroke:#ffd84d; stroke-width:3; }

/* ── Xiangqi (Chinese chess) ── */
body.xiangqi-mode #board.xq-board { aspect-ratio:auto; }
#board.xq-board {
  display:flex; align-items:center; justify-content:center;
  background:#e8c98a; border:3px solid #7a5a2a; border-radius:8px;
  padding:8px; width:min(520px,100%); aspect-ratio:auto;
}
.xq-svg { width:100%; height:auto; }
.xq-line { stroke:#5a3a1a; stroke-width:1.5; }
.xq-river { fill:#7a5a2a; font-size:22px; letter-spacing:2px; font-weight:bold; opacity:.65; }
.xq-piece { fill:#f3e6c8; stroke:#3a2a14; stroke-width:1.5; }
.xq-red { stroke:#b02a1a; }
.xq-black { stroke:#222; }
.xq-char { font-size:30px; font-weight:bold; pointer-events:none; user-select:none; }
.xq-char-red { fill:#b02a1a; }
.xq-char-black { fill:#1a1a1a; }
.xq-piece.xq-selected { stroke:#3a9a3a; stroke-width:3.5; filter:drop-shadow(0 0 6px rgba(76,175,80,.9)); }
.xq-dest { fill:none; stroke:#3a9a3a; stroke-width:3; filter:drop-shadow(0 0 4px rgba(76,175,80,.7)); }
.xq-dest.xq-cap { stroke:#d03a2a; }
.xq-lastmk { fill:none; stroke:#e0a020; stroke-width:2; stroke-dasharray:3,2; }

/* ── Fanorona ── */
body.fanorona-mode #board.fano-board { aspect-ratio:auto; }
#board.fano-board {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background:#5a3a26; border:3px solid #341f12; border-radius:12px;
  padding:12px; width:min(620px,100%); aspect-ratio:auto;
}
.fano-svg { width:100%; height:auto; }
.fano-line { stroke:#e0c090; stroke-width:2; }
.fano-node { fill:#e0c090; stroke:#8a5a2a; stroke-width:1; }
.fano-piece { stroke:rgba(0,0,0,.5); stroke-width:1.5; }
.fano-white { fill:#f2ede0; }
.fano-black { fill:#22201e; }
.fano-piece.fano-selected { stroke:#6fe06f; stroke-width:3.5; filter:drop-shadow(0 0 6px rgba(110,224,110,.9)); }
.fano-piece.fano-last { stroke:#ffd84d; stroke-width:3; }
.fano-dest { fill:none; stroke:#6fe06f; stroke-width:3; filter:drop-shadow(0 0 4px rgba(110,224,110,.7)); }
.fano-dest.fano-cap { stroke:#ff5a5a; filter:drop-shadow(0 0 5px rgba(255,90,90,.8)); }
.fano-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; }
.fano-ctrl-label { color:#f0d8b8; font-size:.9rem; font-weight:bold; }
.fano-ctrl-btn { padding:6px 14px; font-size:.9rem; }

/* ── Jungle (Dou Shou Qi) ── */
body.jungle-mode #board.jg-board { aspect-ratio:auto; }
#board.jg-board {
  display:flex; align-items:center; justify-content:center;
  background:#2e4a2e; border:3px solid #18301f; border-radius:12px;
  padding:10px; width:min(440px,100%); aspect-ratio:auto;
}
.jg-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); grid-template-rows:repeat(9,minmax(0,1fr)); gap:2px; width:100%; aspect-ratio:7/9; }
.jg-cell { background:#cdb98a; border-radius:3px; position:relative; display:flex; align-items:center; justify-content:center; }
.jg-water { background:#4a90c2; }
.jg-den-a { background:#caa24a; }
.jg-den-b { background:#caa24a; }
.jg-trap { background:#b06a4a; }
.jg-den-mark { position:absolute; font-size:min(4vw,20px); opacity:.5; }
.jg-cell.jg-lastcell { box-shadow:inset 0 0 0 2px #ffd84d; }
.jg-cell.jg-dest::after { content:''; position:absolute; width:34%; height:34%; border-radius:50%; background:rgba(76,175,80,.7); }
.jg-cell.jg-capture { box-shadow:inset 0 0 0 3px #ff5a5a; cursor:pointer; }
.jg-piece {
  width:88%; height:88%; border-radius:50%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; line-height:1; box-shadow:0 1px 2px rgba(0,0,0,.5); position:relative;
}
.jg-a { background:radial-gradient(circle at 35% 30%,#6cb6ff,#1c5a9e); }
.jg-b { background:radial-gradient(circle at 35% 30%,#ff8a7a,#b02a1a); }
.jg-animal { font-size:min(5vw,22px); }
.jg-rank { position:absolute; bottom:1px; right:3px; font-size:min(2.4vw,11px); font-weight:bold; color:#fff; text-shadow:0 0 2px #000; }
.jg-piece.jg-selected { outline:3px solid #6fe06f; outline-offset:1px; box-shadow:0 0 8px rgba(110,224,110,.9); }

/* ── Mū Tōrere ── */
body.mutorere-mode #board.mt-board { aspect-ratio:auto; }
#board.mt-board {
  display:flex; align-items:center; justify-content:center;
  background:#2a3a4a; border:3px solid #16222e; border-radius:14px;
  padding:14px; width:min(420px,100%); aspect-ratio:auto;
}
.mt-svg { width:100%; height:auto; }
.mt-line { stroke:#7fa8c8; stroke-width:3; }
.mt-node { fill:#3f5a72; stroke:#23394a; stroke-width:2; }
.mt-node.mt-dest { fill:#2f6e3a; stroke:#6fe06f; stroke-width:3; }
.mt-piece { stroke:rgba(0,0,0,.5); stroke-width:1.5; }
.mt-black { fill:radial-gradient(circle at 35% 30%,#555,#111); fill:#1c1c1c; }
.mt-white { fill:#f0ece0; }
.mt-piece.mt-selected { stroke:#6fe06f; stroke-width:3.5; filter:drop-shadow(0 0 6px rgba(110,224,110,.9)); }
.mt-piece.mt-last { stroke:#ffd84d; stroke-width:3; }

/* ── Tablut (Tafl) ── */
body.tablut-mode #board.tab-board { aspect-ratio:auto; }
#board.tab-board {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:#3a2e22; border:3px solid #221a12; border-radius:12px;
  padding:12px; width:min(540px,100%); aspect-ratio:auto;
}
.tab-header { color:#f0d8b0; font-size:.9rem; font-weight:bold; text-align:center; }
.tab-grid { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); grid-template-rows:repeat(9,minmax(0,1fr)); gap:2px; width:100%; aspect-ratio:1; }
.tab-cell { background:#c9a878; border-radius:3px; display:flex; align-items:center; justify-content:center; position:relative; }
.tab-cell.tab-edge { background:#b8945f; }
.tab-cell.tab-throne { background:#8a6a3a; box-shadow:inset 0 0 0 2px #5a4424; }
.tab-cell.tab-lastcell { box-shadow:inset 0 0 0 2px #ffd84d; }
.tab-cell.tab-dest { box-shadow:inset 0 0 0 3px #4caf50; cursor:pointer; }
.tab-cell.tab-dest::after { content:''; width:30%; height:30%; border-radius:50%; background:rgba(76,175,80,.55); }
.tab-piece { width:78%; height:78%; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; }
.tab-atk  { background:radial-gradient(circle at 35% 30%,#666,#1a1a1a); }
.tab-def  { background:radial-gradient(circle at 35% 30%,#fff,#cdbfa0); }
.tab-king { background:radial-gradient(circle at 35% 30%,#ffe08a,#caa23a); font-size:min(3.2vw,18px); }
.tab-piece.tab-selected { outline:3px solid #6fe06f; outline-offset:1px; box-shadow:0 0 8px rgba(110,224,110,.9); }

/* ── Alquerque ── */
body.alquerque-mode #board.alq-board { aspect-ratio:auto; }
#board.alq-board {
  display:flex; align-items:center; justify-content:center;
  background:#4a3c2a; border:3px solid #2a2014; border-radius:12px;
  padding:12px; width:min(480px,100%); aspect-ratio:auto;
}
.alq-svg { width:100%; height:auto; }
.alq-line { stroke:#d8b878; stroke-width:2; }
.alq-node { fill:#d8b878; stroke:#8a6a3a; stroke-width:1; }
.alq-piece { stroke:rgba(0,0,0,.5); stroke-width:1.5; }
.alq-white { fill:radial-gradient(circle at 35% 30%,#fff,#bbb); fill:#f0ece0; }
.alq-black { fill:#2a2a2a; }
.alq-piece.alq-selected { stroke:#6fe06f; stroke-width:3.5; filter:drop-shadow(0 0 6px rgba(110,224,110,.9)); }
.alq-piece.alq-last { stroke:#ffd84d; stroke-width:3; }
.alq-dest { fill:none; stroke:#6fe06f; stroke-width:3; filter:drop-shadow(0 0 4px rgba(110,224,110,.7)); }
.alq-dest.alq-capture { stroke:#ff5a5a; filter:drop-shadow(0 0 5px rgba(255,90,90,.8)); }

/* ── Kōnane (Hawaiian checkers) ── */
body.konane-mode #board.konane-board { aspect-ratio:auto; }
#board.konane-board {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:#2c5040; border:3px solid #18301f; border-radius:12px;
  padding:12px; width:min(480px,100%); aspect-ratio:auto;
}
.kn-header { color:#d8f0d8; font-size:.9rem; font-weight:bold; text-align:center; }
.kn-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:repeat(6,minmax(0,1fr)); gap:3px; width:100%; aspect-ratio:1; }
.kn-cell { background:#3f6e54; border-radius:6px; display:flex; align-items:center; justify-content:center; position:relative; }
.kn-cell.kn-dest { box-shadow:inset 0 0 0 3px #6fe06f; }
.kn-stone { width:74%; height:74%; border-radius:50%; box-shadow:0 2px 3px rgba(0,0,0,.4); }
.kn-black { background:radial-gradient(circle at 35% 30%,#555,#111); }
.kn-white { background:radial-gradient(circle at 35% 30%,#fff,#bbb); }
.kn-stone.kn-selected { outline:3px solid #fff; outline-offset:1px; box-shadow:0 0 8px rgba(255,255,255,.9); }
.kn-stone.kn-last { outline:3px solid #ffd84d; outline-offset:1px; }
.kn-stone.kn-removable { outline:3px solid #6fe06f; outline-offset:1px; cursor:pointer; animation:knpulse 1s ease-in-out infinite; }
@keyframes knpulse { 0%,100%{filter:brightness(1);} 50%{filter:brightness(1.4);} }

/* ── Checkers ── */
body.checkers-mode .score-box .disc.black { background:radial-gradient(circle at 35% 35%,#f55,#a11); }
body.checkers-mode .score-box .disc.white { background:radial-gradient(circle at 35% 35%,#5af,#15a); }

#board.checkers-board {
  display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); grid-template-rows:repeat(8,minmax(0,1fr));
  gap:0; background:transparent;
  border:3px solid #5a3a1a; border-radius:4px;
  padding:0; width:min(480px,100%); aspect-ratio:1;
}
.ck-cell {
  background:transparent; border-radius:0;
  display:flex; align-items:center; justify-content:center;
  position:relative; min-width:0; min-height:0;
}
.ck-cell.ck-light { background:#f0d9b5; }
.ck-cell.ck-dark  { background:#b58863; }
.ck-cell.ck-last { box-shadow:inset 0 0 0 3px rgba(240,180,40,.6); }
.ck-cell.ck-selected { box-shadow:inset 0 0 0 3px var(--accent); }
.ck-cell.ck-clickable { cursor:pointer; }
.ck-cell.ck-dest::after {
  content:''; position:absolute; width:30%; height:30%;
  border-radius:50%; background:rgba(125,200,125,.55);
  pointer-events:none;
}
.ck-cell.ck-dest:hover { background:#a87b57; cursor:pointer; }
.ck-piece {
  width:78%; height:78%; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 4px rgba(0,0,0,.4), inset 0 -2px 4px rgba(0,0,0,.3);
  user-select:none;
}
.ck-piece.ck-red  { background:radial-gradient(circle at 35% 35%, #f55, #911); border:2px solid #500; }
.ck-piece.ck-blue { background:radial-gradient(circle at 35% 35%, #5af, #115); border:2px solid #003; }
.ck-piece.ck-king { color:#ffd700; font-size:clamp(1rem, 3.5cqi, 1.8rem); text-shadow:0 0 4px rgba(0,0,0,.6); }

/* ── Ultimate Tic-Tac-Toe ── */
body.uttt-mode .score-box { display:none; }
body.uttt-mode #statusMsg { flex:1; text-align:center; }
body.uttt-mode .slot-chip .disc.small,
body.uttt-mode .slot-panel-row .disc.small { display:none; }

#board.uttt-board {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr));
  gap:6px;
  background:#1a3a1a; border:4px solid #0a1f0a; border-radius:8px;
  padding:6px; width:min(540px,100%); aspect-ratio:1;
}
.uttt-big {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr));
  gap:1px;
  background:#3a4f3a; border-radius:3px;
  position:relative; transition:background .15s;
  overflow:hidden;
}
.uttt-big.uttt-forced {
  background:#f0b429;
  box-shadow:0 0 12px rgba(240,180,40,.7), inset 0 0 0 2px #f0b429;
}
.uttt-big.uttt-free {
  background:#4a8a4a;
  box-shadow:inset 0 0 0 2px #6cca6c;
}
.uttt-big.uttt-won-x { background:rgba(193,32,32,.5); }
.uttt-big.uttt-won-o { background:rgba(32,80,193,.5); }
.uttt-big.uttt-draw  { background:rgba(80,80,80,.4); }
.uttt-cell {
  background:#243524;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(0.8rem, 3.5cqi, 1.6rem); font-weight:bold;
  color:#fff; line-height:1; min-width:0; min-height:0;
}
.uttt-cell.uttt-x { color:#f55; }
.uttt-cell.uttt-o { color:#5af; }
.uttt-cell.uttt-valid { cursor:pointer; }
.uttt-cell.uttt-valid:hover { background:#3a5a3a; }
.uttt-cell.uttt-last { background:#3a5a2a !important; }
.uttt-overlay {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(2rem, 12cqi, 5rem); font-weight:bold;
  color:#fff; opacity:.55; pointer-events:none;
  text-shadow:0 0 20px rgba(0,0,0,.5);
}

/* ── Mancala ── */
body.mancala-mode .score-box { display:none; }
body.mancala-mode #statusMsg { flex:1; text-align:center; }
body.mancala-mode #board.mancala-board { aspect-ratio:auto; }
body.mancala-mode .slot-chip .disc.small,
body.mancala-mode .slot-panel-row .disc.small { display:none; }

#board.mancala-board {
  display:flex; align-items:stretch; gap:10px;
  background:linear-gradient(180deg, #a07a4a, #7a5a2a);
  border:4px solid #5a4020; border-radius:80px;
  padding:18px 24px; width:min(720px,100%); aspect-ratio:auto;
  box-shadow: inset 0 0 30px rgba(0,0,0,.4);
}
.mc-store {
  flex:0 0 auto; width:70px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at center, #6b4f27 0%, #3a2810 100%);
  border-radius:35px; color:#fff;
  border:2px solid #2a1a08;
  box-shadow: inset 0 4px 8px rgba(0,0,0,.5);
}
.mc-store-num { font-size:1.8rem; font-weight:bold; }
.mc-store-label { font-size:.75rem; color:#fc6; }
.mc-middle {
  flex:1; display:flex; flex-direction:column; gap:10px;
}
.mc-row { display:flex; gap:8px; }
.mc-pit {
  flex:1; aspect-ratio:1; min-width:0;
  background:radial-gradient(ellipse at center, #6b4f27 0%, #3a2810 100%);
  border:2px solid #2a1a08; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:bold;
  box-shadow: inset 0 3px 6px rgba(0,0,0,.5);
  position:relative;
}
.mc-pit .mc-num { font-size:1.4rem; }
.mc-pit.mc-clickable { cursor:pointer; transition: background .15s; }
.mc-pit.mc-clickable:hover { background:radial-gradient(ellipse at center, #8c6f47 0%, #5a3820 100%); transform:scale(1.05); }
.mc-pit.mc-last { box-shadow: inset 0 3px 6px rgba(0,0,0,.5), 0 0 12px rgba(255,200,0,.6); }
.mc-pit-opp { opacity:.85; }

/* ── Dots and Boxes ── */
body.dots-mode .score-box { display:none; }
body.dots-mode #statusMsg { flex:1; text-align:center; }
body.dots-mode #board.dots-board { aspect-ratio:auto; }
body.dots-mode .slot-chip .disc.small,
body.dots-mode .slot-panel-row .disc.small { display:none; }

#board.dots-board {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background:#f5f0e0; border:3px solid #5a4a2a; border-radius:10px;
  padding:14px; width:min(420px,100%); aspect-ratio:auto;
}
.dots-head {
  display:flex; gap:14px; font-weight:bold; align-items:center;
  background:#fff; padding:6px 18px; border-radius:6px; color:#222;
}
.dots-score-r { color:#c12; }
.dots-score-b { color:#15a; }
.dots-vs { color:#888; }
.dots-svg { width:100%; height:auto; max-width:380px; }
.dots-dot { fill:#222; }
.dots-line.dots-empty { stroke:rgba(0,0,0,.05); stroke-width:3; stroke-linecap:round; }
.dots-line.dots-empty.dots-hover { stroke:rgba(125,200,125,.7); stroke-width:5; }
.dots-line.dots-drawn { stroke-width:5; stroke-linecap:round; }
.dots-line.dots-drawn-red  { stroke:#c12; }
.dots-line.dots-drawn-blue { stroke:#15a; }
.dots-line.dots-last { filter:drop-shadow(0 0 4px rgba(255,200,0,.9)); }
.dots-hit { stroke:transparent; stroke-width:14; cursor:pointer; }
.dots-box-red  { fill:rgba(200,40,40,.22); }
.dots-box-blue { fill:rgba(40,80,180,.22); }
.dots-mark { fill:#444; font-size:18px; font-family:sans-serif; user-select:none; font-weight:bold; }

/* ── Connect 4 board ── */
body.connect4-mode .score-box .disc.black { background:radial-gradient(circle at 35% 35%,#f55,#a11); }
body.connect4-mode .score-box .disc.white { background:radial-gradient(circle at 35% 35%,#fd6,#c91); }
#board.connect4-board {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  grid-template-rows:repeat(6,minmax(0,1fr));
  gap:6px; padding:10px;
  background:#1e4a8e;
  border:4px solid #143568;
  border-radius:10px;
  width:min(560px,100%);
  aspect-ratio:7/6;
}
.c4-cell {
  background:#0a1f3a !important; border-radius:50%; position:relative;
  display:flex; align-items:center; justify-content:center;
  transition:background .1s;
}
.c4-cell.c4-clickable { cursor:pointer; }
.c4-cell.c4-col-hover { background:#1a3f5a !important; }
.c4-cell.last-move { box-shadow:0 0 0 3px rgba(255,200,0,.5) inset; }
.c4-slot { width:80%; height:80%; border-radius:50%; }
.c4-slot.c4-red    { background:radial-gradient(circle at 35% 35%,#f44,#911); box-shadow:inset -2px -3px 6px rgba(0,0,0,.4); }
.c4-slot.c4-yellow { background:radial-gradient(circle at 35% 35%,#fd5,#c80); box-shadow:inset -2px -3px 6px rgba(0,0,0,.4); }

/* ── Gomoku board ── */
#board.gomoku-board {
  display:grid;
  grid-template-columns:repeat(15,minmax(0,1fr));
  grid-template-rows:repeat(15,minmax(0,1fr));
  gap:0;
  background:#d8a868;
  border:3px solid #5a3a1a;
  border-radius:4px;
  padding:0;
  width:min(540px,100%);
  aspect-ratio:1;
}
.gomoku-cell {
  background:transparent !important;
  border:1px solid #8a6a3a;
  border-radius:0;
  position:relative;
}
.gomoku-cell .disc {
  width:90%; height:90%;
}
.gomoku-cell.valid:hover { background:rgba(125,200,125,.2) !important; cursor:pointer; }
.gomoku-cell.valid::after { content:''; width:30%; height:30%; border-radius:50%; background:rgba(255,255,255,.18); position:absolute; top:35%; left:35%; }
.gomoku-cell.last-move { background:rgba(255,200,0,.25) !important; }

/* ── Chess board ── */
#board.chess-board { gap:0; background:transparent; border:2px solid #555; border-radius:2px; padding:0; }
.chess-cell { border-radius:0; transition:none; }
.chess-light { background:#f0d9b5; }
.chess-dark  { background:#b58863; }
.chess-cell.chess-last { outline:3px solid rgba(20,85,30,.5); outline-offset:-3px; }
.chess-cell.chess-sel  { background:#7fc97f !important; }
.chess-cell:hover.chess-light { background:#e8d0a8; }
.chess-cell:hover.chess-dark  { background:#a87b57; }
.chess-piece { font-size:clamp(24px,6vw,42px); line-height:1; user-select:none; position:relative; z-index:1; }
.chess-w { filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.chess-b { filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.chess-dot  { position:absolute; width:30%; height:30%; border-radius:50%; background:rgba(0,0,0,.25); pointer-events:none; }
.chess-ring { position:absolute; inset:4%; border-radius:50%; border:4px solid rgba(0,0,0,.28); pointer-events:none; }

/* ══════════════════════════════
   MAHJONG
═══════════════════════════════ */
body.mahjong-mode .score-box { display:none; }
body.mahjong-mode #statusMsg { flex:1; text-align:center; }
body.mahjong-mode #board.mahjong-board { aspect-ratio:auto; }
body.mahjong-mode .slot-chip .disc.small,
body.mahjong-mode .slot-panel-row .disc.small,
body.battleship-mode .slot-chip .disc.small,
body.battleship-mode .slot-panel-row .disc.small { display:none; }
body.battleship-mode .score-box { display:none; }
body.battleship-mode #statusMsg { flex:1; text-align:center; }
body.battleship-mode #board.battleship-board { aspect-ratio:auto; }
body.subs-mode .score-box { display:none; }
body.subs-mode #statusMsg { flex:1; text-align:center; }
body.subs-mode #board.subs-board { aspect-ratio:auto; }
body.subs-mode .slot-chip .disc.small,
body.subs-mode .slot-panel-row .disc.small { display:none; }

#board.mahjong-board {
  display:grid;
  grid-template-areas:
    ".   top    ."
    "lft cnt    rgt"
    ".   bot    .";
  grid-template-columns: minmax(80px, 1fr) minmax(280px, 2fr) minmax(80px, 1fr);
  grid-template-rows: auto 1fr auto;
  gap:10px; padding:14px;
  background:#0e3010;
  border:6px solid #1a3a1a;
  border-radius:14px;
  width:min(900px,100%);
  aspect-ratio:auto;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.4);
  container-type: inline-size;
  container-name: mj;
}

.mj-pos { display:flex; gap:6px; padding:6px; border-radius:8px; transition:border-color .2s; border:2px solid transparent; }
.mj-pos-bottom { grid-area:bot; flex-direction:column-reverse; align-items:center; }
.mj-pos-top    { grid-area:top; flex-direction:column;        align-items:center; }
.mj-pos-left   { grid-area:lft; flex-direction:row;           align-items:flex-start; }
.mj-pos-right  { grid-area:rgt; flex-direction:row-reverse;   align-items:flex-start; }
.mj-pos.mj-turn { border-color:var(--accent); box-shadow:0 0 12px rgba(125,200,125,.3); }
.mj-pos.mj-mine { background:rgba(255,255,255,.04); }

.mj-label { display:flex; gap:8px; align-items:center; font-size:.85rem; padding:2px 4px; }
.mj-label .mj-wind { background:var(--accent); color:#000; font-weight:bold; padding:1px 8px; border-radius:4px; font-size:.95rem; }
.mj-label .mj-name { color:#ddd; }
.mj-label .mj-active { color:#f0b429; }

.mj-handrow { display:flex; gap:8px; align-items:flex-end; flex-wrap:nowrap; }
.mj-pos-left .mj-handrow, .mj-pos-right .mj-handrow { flex-direction:column; align-items:stretch; gap:6px; }
.mj-hand { display:flex; gap:1px; flex-wrap:nowrap; }
.mj-pos-left .mj-hand, .mj-pos-right .mj-hand { flex-direction:column; }

.mj-river {
  display:grid; grid-template-columns:repeat(6,auto); gap:1px;
  background:rgba(0,0,0,.2); padding:3px; border-radius:4px; min-height:1px;
}
.mj-pos-left .mj-river, .mj-pos-right .mj-river { grid-template-columns:repeat(3,auto); }
.mj-pos-left .mj-tile, .mj-pos-right .mj-tile { font-size:clamp(0.65rem, 1.6cqi, 1.1rem); padding:0.1em 0.05em; min-width:1em; }
.mj-pos-left .mj-tile.mj-tile-small, .mj-pos-right .mj-tile.mj-tile-small { font-size:clamp(0.55rem, 1.3cqi, 0.9rem); }
.mj-pos-left .mj-handrow, .mj-pos-right .mj-handrow { width:100%; }
.mj-pos-left .mj-hand, .mj-pos-right .mj-hand { max-width:100%; }

/* Tile look — sized via container query (cqi = % of board width) */
.mj-tile {
  font-size:clamp(0.7rem, 2.2cqi, 1.5rem);
  line-height:1; padding:0.15em 0.1em; min-width:1.3em;
  text-align:center; display:inline-block; user-select:none;
  background:linear-gradient(180deg, #fff8e8 0%, #f0d9a8 100%);
  color:#000; border:1px solid #5a4a2a; border-radius:3px;
  box-shadow:1px 2px 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,.5);
}
.mj-pos-bottom .mj-tile { font-size:clamp(1.1rem, 3.6cqi, 2.4rem); padding:0.2em 0.13em; box-shadow:1px 3px 0 rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,.5); }
.mj-tile-small { font-size:clamp(0.6rem, 1.5cqi, 1rem); padding:0.1em 0.05em; box-shadow:1px 1px 0 rgba(0,0,0,0.3); }
.mj-pos-bottom .mj-tile.mj-tile-small { font-size:clamp(0.7rem, 1.7cqi, 1.1rem); }
.mj-tile-honor { color:#000; }
.mj-tile-red { color:#c12; }
.mj-tile-green { color:#2a7; }
.mj-tile.mj-back {
  background:linear-gradient(135deg, #4a7a3a, #1a3a1a);
  color:transparent; border-color:#0a1f0a;
  box-shadow:1px 2px 0 rgba(0,0,0,0.4);
  position:relative;
}
.mj-tile.mj-back::after {
  content:''; position:absolute; inset:3px;
  border:1px solid rgba(255,255,255,.15); border-radius:2px;
}
.mj-tile.mj-drawn { margin-left:8px; box-shadow:1px 3px 0 rgba(0,0,0,0.5), 0 0 0 2px var(--accent); }
.mj-tile.mj-clickable { cursor:pointer; }
.mj-tile.mj-clickable:hover { transform:translateY(-4px); transition:transform .1s; }

.mj-melds { display:flex; gap:4px; flex-wrap:wrap; align-items:flex-end; }
.mj-meld { display:inline-flex; background:rgba(0,0,0,.3); border-radius:3px; padding:1px; gap:0; }

/* Center info */
.mj-center { grid-area:cnt; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:10px; background:rgba(0,0,0,.25); border-radius:8px; }
.mj-info { display:flex; flex-direction:column; align-items:center; gap:4px; color:#ddd; }
.mj-wall { font-size:1.1rem; color:var(--accent); font-weight:bold; }
.mj-phase { color:#f0b429; font-weight:bold; font-size:.95rem; animation:mj-pulse 1s infinite; }
@keyframes mj-pulse { 50% { opacity: .5; } }
.mj-last { font-size:.85rem; color:var(--muted); }
.mj-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.mj-action-btn { font-size:.95rem; padding:8px 16px; }

@media (max-width:700px) {
  #board.mahjong-board { grid-template-columns: 60px 1fr 60px; padding:8px; gap:6px; }
}

/* ══════════════════════════════
   BATTLESHIP
═══════════════════════════════ */
#board.battleship-board {
  display:flex; flex-direction:column; gap:12px; align-items:center;
  background:#0a1f3a; border:3px solid #1a3a5a; border-radius:10px;
  padding:14px; width:min(720px,100%); aspect-ratio:auto;
}
.bs-header { color:var(--text); font-size:.95rem; text-align:center; }
.bs-actions { display:flex; gap:10px; }
.bs-grids { display:flex; gap:18px; flex-wrap:wrap; justify-content:center; }
.bs-grid-wrap { display:flex; flex-direction:column; gap:6px; align-items:center; }
.bs-grid-title { font-size:.85rem; color:var(--accent); font-weight:bold; }
.bs-grid {
  display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); grid-template-rows:repeat(10,minmax(0,1fr));
  gap:1px; background:#1a3a5a; padding:2px; border-radius:4px;
  width:min(300px,40vw); aspect-ratio:1;
}
.bs-cell {
  background:#2a5a7a; display:flex; align-items:center; justify-content:center;
  font-size:clamp(.7rem, 2.5cqi, 1rem); color:#fff; user-select:none;
  border-radius:1px; min-width:0; min-height:0;
}
.bs-cell.bs-ship { background:#888; }
.bs-cell.bs-hit  { background:#c12; color:#fff; font-weight:bold; }
.bs-cell.bs-miss { background:#3a6a8a; color:#aaf; }
.bs-cell.bs-near { background:#c87a2a; color:#fff; font-weight:bold; }
.bs-cell.bs-clickable { cursor:crosshair; }
.bs-cell.bs-clickable:hover { background:#3a7a9a; }
.bs-cell.bs-preview { background:#5bc8f5 !important; outline:1px solid var(--accent); outline-offset:-1px; }
.bs-cell.bs-preview-bad { background:#d44 !important; }
.bs-sunk { font-size:.85rem; color:var(--cpu-col); }

.bs-setup { display:flex; flex-direction:column; gap:8px; align-items:center; padding:6px 12px; background:rgba(0,0,0,.25); border-radius:8px; }
.bs-ships { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.bs-ship-item {
  display:flex; align-items:center; gap:6px; padding:5px 10px; border-radius:6px;
  background:#1a3a5a; color:var(--text); border:2px solid #2a5a7a; font-size:.85rem;
  cursor:pointer; transition:all .15s;
}
.bs-ship-item:hover:not(:disabled) { background:#2a5a7a; border-color:var(--accent); }
.bs-ship-item.selected { background:var(--accent); color:#000; border-color:var(--accent); }
.bs-ship-item.placed { opacity:.4; cursor:default; text-decoration:line-through; }
.bs-ship-item:disabled { cursor:default; }
.bs-ship-name { font-weight:bold; }
.bs-ship-size { letter-spacing:1px; font-family:monospace; }
.bs-ship-rem { font-size:.8rem; opacity:.85; }

/* Subs (5x5 mobile battle) */
#board.subs-board {
  display:flex; flex-direction:column; gap:12px; align-items:center;
  background:#0a1f3a; border:3px solid #1a3a5a; border-radius:10px;
  padding:14px; width:min(540px,100%); aspect-ratio:auto;
}
.subs-grids .bs-grid { width:min(220px, 36vw); }
.subs-grid .bs-cell { font-size:clamp(.9rem, 4cqi, 1.4rem); }
.bs-cell.subs-selected { outline:3px solid var(--accent); outline-offset:-3px; background:#3a7a9a; }
.bs-cell.subs-move-dest { background:#1a5a3a; cursor:pointer; }
.bs-cell.subs-move-dest::after { content:'⤳'; color:var(--accent); font-size:1.2rem; }
.bs-cell.subs-move-dest:hover { background:#2a7a4a; }

/* Battleship room config */
#gameConfigArea { background:var(--surface); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.cfg-title { font-size:.8rem; color:var(--accent); text-transform:uppercase; letter-spacing:1px; }
.cfg-rows { display:flex; flex-direction:column; gap:6px; }
.cfg-row { display:grid; grid-template-columns:80px 1fr auto; align-items:center; gap:10px; }
.cfg-name { font-weight:bold; font-size:.9rem; }
.cfg-size { font-family:monospace; letter-spacing:1px; color:var(--muted); }
.cfg-counter { display:flex; align-items:center; gap:8px; }
.cfg-counter button { width:28px; height:28px; padding:0; font-size:1rem; border-radius:6px; background:#2e5c2e; color:#fff; }
.cfg-counter button:disabled { opacity:.4; cursor:default; }
.cfg-counter button:hover:not(:disabled) { background:var(--btn); }
.cfg-count { min-width:1.5em; text-align:center; font-weight:bold; font-size:1rem; }
.cfg-total { font-size:.78rem; color:var(--muted); text-align:right; }

/* ── Promotion picker ── */
.promo-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:200; }
.promo-box { background:var(--surface); border-radius:14px; padding:20px 24px; display:flex; flex-direction:column; gap:12px; }
.promo-title { color:var(--accent); font-weight:bold; text-align:center; }
.promo-btn { background:#1e301e; border:1px solid #4a7a4a; border-radius:8px; color:var(--text); font-size:2.4rem; width:60px; height:60px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.promo-btn:hover { background:#2a4a2a; border-color:var(--accent); }

.disc { width:78%; height:78%; border-radius:50%; }
.disc.small { width:20px; height:20px; flex-shrink:0; }
.disc.black { background:radial-gradient(circle at 35% 35%,#555,#111); }
.disc.white { background:radial-gradient(circle at 35% 35%,#fff,#ccc); box-shadow:0 1px 4px rgba(0,0,0,.4); }
.disc.flip  { animation:flip .28s ease-in-out; }
@keyframes flip { 0%{transform:scaleX(1)} 50%{transform:scaleX(0)} 100%{transform:scaleX(1)} }

/* ══════════════════════════════
   CHAT
═══════════════════════════════ */
#chatPanel {
  width:230px; flex-shrink:0; background:var(--surface);
  border-radius:14px; display:flex; flex-direction:column;
  height:520px; overflow:hidden;
}
.chat-header { padding:10px 13px; font-size:.85rem; font-weight:bold; color:var(--accent); border-bottom:1px solid #2e4e2e; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.spec-count { font-size:.78rem; color:var(--muted); font-weight:normal; }

#chatMessages { flex:1; overflow-y:auto; padding:8px 10px; display:flex; flex-direction:column; gap:5px; scrollbar-width:thin; scrollbar-color:#2e5c2e transparent; }
#chatMessages::-webkit-scrollbar { width:4px; }
#chatMessages::-webkit-scrollbar-thumb { background:#2e5c2e; border-radius:4px; }

.chat-msg { display:flex; flex-direction:column; gap:2px; }
.chat-name { font-size:.7rem; font-weight:bold; color:var(--accent); }
.msg-spectator .chat-name { color:var(--muted); }
.chat-text { font-size:.86rem; color:var(--text); background:#1e301e; border-radius:6px; padding:4px 8px; word-break:break-word; }
.msg-spectator .chat-text { background:#1a281a; color:#bbb; }
.chat-system { font-size:.76rem; color:var(--muted); text-align:center; padding:2px 0; font-style:italic; }

.chat-input-row { display:flex; gap:6px; padding:8px 10px; border-top:1px solid #2e4e2e; flex-shrink:0; }
.chat-input-row input  { flex:1; font-size:.86rem; padding:6px 9px; min-width:0; }
.chat-input-row button { padding:6px 11px; font-size:.9rem; }

@media (max-width:640px) {
  #roomContainer { flex-direction:column; }
  #chatPanel { width:100%; height:220px; }
}

/* ── Feedback floating button ── */
.lang-switch {
  position: fixed; top: 12px; left: 12px; z-index: 500;
  background: var(--surface); color: var(--accent);
  border: 1px solid var(--accent); border-radius: 20px;
  padding: 6px 14px; font-size: .85rem; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.3); transition: background .15s, transform .1s;
}
.lang-switch:hover { background: var(--accent); color: #000; }
.lang-switch:active { transform: scale(.96); }

.fb-fab {
  position: fixed; top: 12px; right: 12px; z-index: 500;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); color: var(--accent);
  border: 1px solid var(--accent); border-radius: 20px;
  padding: 6px 14px; font-size: .85rem; text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.3); transition: background .15s, transform .1s;
}
.fb-fab:hover { background: var(--accent); color: #000; }
.fb-fab:active { transform: scale(.96); }
.fb-fab .fb-fab-text { white-space: nowrap; }
@media (max-width: 640px) {
  .fb-fab .fb-fab-text { display: none; }
  .fb-fab { padding: 8px; border-radius: 50%; }
}

/* ── Feedback page ── */
.fb-card {
  background: var(--surface); border-radius: 14px; padding: 24px;
  width: min(560px, 100%); display: flex; flex-direction: column; gap: 16px;
}
.fb-field { display: flex; flex-direction: column; gap: 6px; }
.fb-label { font-size: .9rem; color: var(--muted); }
.fb-req { color: #f87; font-size: .75rem; margin-left: 4px; }
.fb-types { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-type-btn {
  background: #1e301e; color: var(--text); border: 1px solid #4a7a4a;
  border-radius: 8px; padding: 8px 14px; cursor: pointer; font-size: .9rem;
}
.fb-type-btn.selected { background: var(--btn); color: #fff; border-color: var(--btn); }
.fb-card textarea, .fb-card input[type=text], .fb-card select {
  background: var(--bg); border: 1px solid #4a7a4a; border-radius: 8px;
  color: var(--text); font-size: 1rem; padding: 10px 13px; outline: none;
  width: 100%; font-family: inherit; resize: vertical;
}
.fb-card textarea:focus, .fb-card input:focus, .fb-card select:focus { border-color: var(--accent); }
.fb-counter { font-size: .75rem; color: var(--muted); text-align: right; }
.fb-result { text-align: center; font-size: .95rem; min-height: 1.2em; }
.fb-result.fb-ok { color: var(--accent); }
.fb-result.fb-err { color: #f87; }

/* Experimental tag */
.experimental-tag {
  display: inline-block;
  background: #c87a2a;
  color: #fff;
  font-size: .7rem;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: middle;
}

/* ══════════════════════════════
   RULES PANEL
═══════════════════════════════ */
.rules-panel {
  margin: 12px 0; padding: 0;
  background: rgba(255,255,255,.03);
  border: 1px solid #2e4e2e; border-radius: 8px;
  font-size: .85rem;
  width: min(720px, 100%); align-self: center;
}
.rules-title {
  padding: 8px 14px;
  color: var(--accent); font-weight: bold;
  border-bottom: 1px solid #2e4e2e;
}
.rules-body { padding: 10px 18px 14px; color: #ccc; line-height: 1.5; }
.rules-overview { margin-bottom: 8px; color: #ddd; }
.rules-section { margin-top: 6px; }
.rules-h { color: var(--accent); font-size: .78rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; }
.rules-section ul { padding-left: 18px; margin: 2px 0; }
.rules-section li { margin: 2px 0; }
.rules-section p { margin: 2px 0; }
.rules-dl { margin: 4px 0; padding: 0; }
.rules-dl dt { color: #ddd; font-weight: bold; margin-top: 6px; }
.rules-dl dd { margin: 0 0 0 14px; color: #bbb; font-size: .85rem; }

/* ══════════════════════════════
   FOOTER
═══════════════════════════════ */
.site-footer {
  width: 100%; margin-top: 40px;
  border-top: 1px solid #2e4e2e;
  background: var(--surface);
  padding: 28px 24px 16px;
}
.footer-inner {
  display: flex; gap: 40px; flex-wrap: wrap; justify-content: center;
  max-width: 820px; margin: 0 auto 20px;
}
.footer-col {
  display: flex; flex-direction: column; gap: 6px; min-width: 120px;
}
.footer-heading {
  font-size: .8rem; font-weight: bold; color: var(--accent);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px;
}
.footer-sub { font-size: .8rem; color: var(--muted); }
.footer-col a { font-size: .85rem; color: var(--muted); text-decoration: none; display:block; padding:2px 0; }
.footer-col a:hover { color: var(--text); }
#footerGames { display:flex; flex-direction:column; gap:6px; }
.footer-genre { display:flex; gap:6px; align-items:flex-start; }
.footer-genre-label {
  font-size:.72rem; color:var(--accent); min-width:3em; padding-top:2px;
  flex-shrink:0;
}
.footer-genre-games { display:flex; flex-wrap:wrap; gap:3px; }
.footer-genre-games a {
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; font-size:1rem; padding:0;
  background:#1e301e; border-radius:5px; text-decoration:none;
  transition:background .12s, transform .1s;
}
.footer-genre-games a:hover { background:#2e5c2e; transform:translateY(-2px); }
.footer-disabled { font-size: .85rem; color: #4a5a4a; }
.footer-copy {
  text-align: center; font-size: .75rem; color: #4a5a4a;
}
.footer-col-rooms { min-width: 160px; }
.footer-no-rooms { font-size: .82rem; color: #4a5a4a; }
.footer-room {
  display: flex; flex-direction: column; gap: 2px;
  text-decoration: none; padding: 6px 8px; border-radius: 6px;
  background: #1e301e; margin-bottom: 4px; transition: background .15s;
}
.footer-room:hover { background: #2a4a2a; }
.footer-room-name { font-size: .85rem; color: var(--text); }
.footer-room-meta { font-size: .75rem; color: var(--muted); }

/* Game over panel */
.game-over-panel {
  display:flex; flex-direction:column; gap:14px; align-items:center;
  padding:18px 24px; margin-top:12px;
  background:rgba(0,0,0,.55); border:2px solid var(--accent); border-radius:12px;
  animation:goFade .3s ease-out;
}
@keyframes goFade { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
.go-message { font-size:1.15rem; color:var(--accent); font-weight:bold; text-align:center; }
.go-btn { font-size:1rem; padding:10px 28px; }

/* Toast */
.toast { position:fixed; top:20px; left:50%; transform:translateX(-50%); background:#333; color:#fff; padding:10px 22px; border-radius:8px; font-size:1rem; z-index:999; animation:toastFade 2.5s forwards; }
@keyframes toastFade { 0%,70%{opacity:1} 100%{opacity:0} }