:root {
  --bg: #08475f;
  --wood: #efe3c2;
  --wood-edge: #b39b6a;
  --gap: #04364a;
  --red: #d0342c;
  --red-hi: #f0685f;
  --black: #1c1c1c;
  --black-hi: #4a4a4a;
  --hole: #cdbf9c;
  --legal: #6fd08c;
  --text: #eaf4f8;
  --muted: #8fb6c6;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: radial-gradient(circle at 50% 20%, #0a5f86, #052e40 80%);
  color: var(--text);
  font-family: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  user-select: none;
}
#app {
  height: 100%; display: flex; flex-direction: column;
  position: relative;   /* positioning context for #rulesBtnGame */
  padding: env(safe-area-inset-top) 12px env(safe-area-inset-bottom);
}

/* ---- header ---- */
header {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 8px; padding: 14px 4px 10px;
}
.score { display: flex; align-items: center; gap: 7px; }
#scoreBlack { justify-content: flex-end; }
.dot { width: 20px; height: 20px; border-radius: 50%; flex: none; }
.dot.red { background: radial-gradient(circle at 32% 28%, var(--red-hi), var(--red) 60%, #7d1a15); }
.dot.black { background: radial-gradient(circle at 32% 28%, var(--black-hi), var(--black) 60%, #000); }
.pts { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.left { font-size: 12px; color: var(--muted); }
.left::before { content: "×"; margin-right: 1px; }
.turnbox { text-align: center; }
.turnlabel { font-size: 15px; font-weight: 600; }
.sub { font-size: 11px; color: var(--muted); margin-top: 2px; height: 14px; }
.score.active .pts { color: #fff; }
.score:not(.active) { opacity: .5; }

/* ---- board ---- */
main { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
#boardWrap { width: 100%; max-width: min(94vw, 78vh); aspect-ratio: 1; }
#board {
  width: 100%; height: 100%;
  display: grid; gap: 0;
  background: var(--gap);
  padding: 6px; border-radius: 12px;
}
.cell {
  position: relative; background: var(--wood);
  display: flex; align-items: center; justify-content: center;
}
.cell.void { background: transparent; }
/* Panel separation: cells on a panel boundary get an outer margin, so the
   dark background shows through as a visible seam between panels while
   cells inside the same panel stay tight together. Note this makes an
   individual .cell's own box non-square — sizing for holes/marbles/rings
   must NOT be derived from a single cell's rect (see sizeHoles() in
   main.js), or it comes out oval on edge cells. */
.cell.eT { margin-top: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.cell.eB { margin-bottom: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
.cell.eL { margin-left: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.cell.eR { margin-right: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
.cell:not(.void) {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}

.hole {
  /* Fallback only — JS (sizeHoles in main.js) sets explicit px width/height
     right after layout, using one board-wide diameter so every cell's hole
     matches regardless of panel-edge margins. */
  width: 72%; aspect-ratio: 1; border-radius: 50%;
  background: var(--hole);
  box-shadow: inset 0 2px 3px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
}
.marble {
  width: 100%; height: 100%; border-radius: 50%;
  box-shadow: 0 2px 3px rgba(0,0,0,.45);
}
/* The drop animation is deliberately NOT on .marble itself. refresh() used
   to rebuild every marble node on every action, so putting the animation
   here made all of them re-pop on any tap/cancel — very noisy. refresh()
   now reconciles in place and adds .drop only to the one marble that just
   appeared; main.js strips the class on animationend. */
.marble.drop { animation: drop .18s cubic-bezier(.3,1.6,.5,1); }
.marble.red { background: radial-gradient(circle at 32% 28%, var(--red-hi), var(--red) 55%, #6d1712); }
.marble.black { background: radial-gradient(circle at 32% 28%, var(--black-hi), var(--black) 55%, #000); }
.marble.ghost { opacity: .45; }
@keyframes drop { from { transform: scale(.3); } to { transform: scale(1); } }

.cell.legal .hole {
  background: var(--legal);
  box-shadow: inset 0 2px 3px rgba(0,0,0,.25), 0 0 8px rgba(111,208,140,.55);
  cursor: pointer;
}

/* Blocked-panel markers: outline the panel(s) the two most recent moves
   were played in — those are exactly the panels off-limits for the next
   move (see blockedPanels() in game.js), so this shows the opponent where
   they CANNOT play. Coloured by whoever played there. Applied per-cell but
   only on the sides that are the panel's true outer boundary (same eT/eB/
   eL/eR flags used for the panel-seam gaps), so a multi-cell panel gets a
   single outline around its whole shape rather than a grid of individual
   cell borders. */
.cell.prev-red.eT { border-top: 4px solid var(--red-hi); }
.cell.prev-red.eB { border-bottom: 4px solid var(--red-hi); }
.cell.prev-red.eL { border-left: 4px solid var(--red-hi); }
.cell.prev-red.eR { border-right: 4px solid var(--red-hi); }
/* White rather than grey: grey read as almost nothing against the light
   --wood panel fill. White contrasts hard against the wood and can't be
   confused with the red outline, even though black's marbles are dark. The
   dark inset shadow keeps the white edge legible over pale wood. */
.cell.prev-black.eT { border-top: 4px solid #fff; }
.cell.prev-black.eB { border-bottom: 4px solid #fff; }
.cell.prev-black.eL { border-left: 4px solid #fff; }
.cell.prev-black.eR { border-right: 4px solid #fff; }

/* ---- footer ---- */
footer { display: flex; gap: 8px; padding: 12px 4px calc(12px + env(safe-area-inset-bottom)); }
button {
  flex: 1; padding: 14px 10px; border-radius: 12px; border: 0;
  font-size: 15px; font-weight: 650; font-family: inherit; cursor: pointer;
  transition: transform .08s, opacity .15s;
}
button:active { transform: scale(.97); }
button:disabled { opacity: .3; cursor: default; }
.primary { background: #ffd84d; color: #2a2000; }
.ghost { background: rgba(255,255,255,.13); color: var(--text); }

/* ---- overlay ---- */
#overlay {
  position: fixed; inset: 0; background: rgba(2,20,30,.82);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  backdrop-filter: blur(4px);
}
#overlay.hidden { display: none; }
.panelcard {
  background: #0b4d69; border-radius: 18px; padding: 24px;
  width: 100%; max-width: 360px; text-align: center;
}
.panelcard h2 { margin: 0 0 14px; font-size: 22px; }
.row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 15px; }
.row.tot { border-top: 1px solid rgba(255,255,255,.2); margin-top: 8px; padding-top: 10px; font-weight: 700; font-size: 18px; }
.win { margin: 14px 0 18px; font-size: 19px; font-weight: 700; color: #ffd84d; }

/* ---- lobby ---- */
#lobby {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start; gap: 14px; padding: 24px;
  overflow-y: auto;
}
#lobby.hidden, #app.hidden, #toast.hidden { display: none; }
#lobby h1 {
  font-size: 42px; letter-spacing: 8px; margin: 0 0 18px;
  color: #ffd84d; text-shadow: 0 3px 0 rgba(0,0,0,.3);
}
#lobbyMain, #waiting, #joining {
  display: flex; flex-direction: column; gap: 10px;
  width: 100%; max-width: 300px; align-items: stretch; text-align: center;
}
#lobbyMain.hidden, #waiting.hidden, #joining.hidden { display: none; }
button.big { padding: 17px; font-size: 17px; }
.muted { color: var(--muted); font-size: 13px; }
#codeDisplay {
  font-size: 46px; font-weight: 800; letter-spacing: 10px;
  color: #ffd84d; margin: 4px 0 10px; text-indent: 10px;
}
#codeInput {
  font-size: 34px; text-align: center; letter-spacing: 10px; text-indent: 10px;
  padding: 12px; border-radius: 12px; border: 0; width: 100%;
  font-family: inherit; font-weight: 700; text-transform: uppercase;
  background: rgba(255,255,255,.12); color: var(--text);
}
#codeInput::placeholder { color: rgba(255,255,255,.25); }
.err { color: #ff8b7d; font-size: 13px; min-height: 18px; }
.levelrow {
  position: absolute; bottom: calc(24px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted);
}
#levelSel {
  background: rgba(255,255,255,.12); color: var(--text); border: 0;
  padding: 8px 10px; border-radius: 9px; font-family: inherit; font-size: 13px;
}

/* ---- toast ---- */
#toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(90px + env(safe-area-inset-bottom));
  background: rgba(0,0,0,.8); color: #fff; padding: 10px 18px;
  border-radius: 20px; font-size: 14px; z-index: 50;
}

/* ---- view-board floating button (shown while overlay is hidden after
   the game ended, so the results panel can be brought back) ---- */
.floatbtn {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom));
  background: #ffd84d; color: #2a2000; border: 0;
  padding: 12px 22px; border-radius: 24px; font-size: 14px; font-weight: 700;
  font-family: inherit; box-shadow: 0 4px 14px rgba(0,0,0,.4); z-index: 40;
}
.floatbtn.hidden { display: none; }

/* board dims out when it isn't your turn */
#board.notmine { opacity: .82; }
.you { font-size: 10px; color: #ffd84d; letter-spacing: 1px; }
.panelcard button + button { margin-top: 8px; }

/* ---- lobby options ---- */
#options {
  display: flex; flex-direction: column; gap: 8px;
  width: 100%; max-width: 300px; align-items: stretch;
  margin-top: 6px; padding-bottom: env(safe-area-inset-bottom);
}
.optrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; font-size: 13px; color: var(--muted);
}
#levelSel, #firstSel {
  background: rgba(255,255,255,.12); color: var(--text); border: 0;
  padding: 8px 10px; border-radius: 9px; font-family: inherit; font-size: 13px;
}
#levelSel option, #firstSel option {
  background: var(--bg); color: var(--text);
}
.boardpick { display: flex; align-items: center; gap: 6px; }
#boardNum {
  width: 56px; text-align: center; color: var(--text); font-size: 14px;
  font-variant-numeric: tabular-nums; background: rgba(255,255,255,.12);
  border: 0; border-radius: 8px; padding: 7px 4px; font-family: inherit;
  -moz-appearance: textfield;
}
#boardNum::-webkit-outer-spin-button, #boardNum::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
button.tiny {
  flex: none; width: 30px; height: 30px; padding: 0; border-radius: 8px;
  background: rgba(255,255,255,.12); color: var(--text); font-size: 17px; line-height: 1;
}
.randombtn {
  padding: 9px; font-size: 13px; font-weight: 600;
}
.randombtn.active { background: #ffd84d; color: #2a2000; }
#preview {
  width: 108px; height: 108px; align-self: center; margin-top: 2px;
  display: grid; gap: 0; padding: 3px;
  background: var(--gap); border-radius: 7px;
}
#preview .pcell { background: var(--wood); border-radius: 1px; }
#preview .pcell.eT { margin-top: 2px; }
#preview .pcell.eB { margin-bottom: 2px; }
#preview .pcell.eL { margin-left: 2px; }
#preview .pcell.eR { margin-right: 2px; }
#preview.rand { display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 11px; background: rgba(255,255,255,.07); }


/* ---- lobby sliders (marble count, CPU strength) ---- */
.slider {
  -webkit-appearance: none; appearance: none;
  width: 120px; height: 4px; border-radius: 3px; padding: 0;
  background: rgba(255,255,255,.22); flex: none; cursor: pointer;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%; border: 0;
  background: #ffd84d; cursor: pointer;
}
.slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; border: 0;
  background: #ffd84d; cursor: pointer;
}
.slidernum {
  min-width: 24px; text-align: right; color: var(--text);
  font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 650;
}
#difficultyRow.hidden { display: none; }

/* ---- end-game box score mini board ----
   One shared board showing who took each panel: red / black / grey for
   unclaimed (tied or empty). Reuses the same eT/eB/eL/eR seam classes as
   the real board and the lobby preview, so panel shapes read identically. */
.miniboard {
  width: 168px; aspect-ratio: 1; margin: 0 auto 14px;
  display: grid; gap: 0; padding: 4px;
  background: var(--gap); border-radius: 9px;
}
.mcell { border-radius: 2px; }
.mcell.void { background: transparent; }
.mcell.own-red { background: var(--red); }
.mcell.own-black { background: #2a2a2a; }
.mcell.own-none { background: #7d8b93; }
.mcell.eT { margin-top: 3px; }
.mcell.eB { margin-bottom: 3px; }
.mcell.eL { margin-left: 3px; }
.mcell.eR { margin-right: 3px; }
.boxlegend {
  display: flex; justify-content: center; gap: 12px;
  font-size: 12px; color: var(--muted); margin: -6px 0 12px;
}
.boxlegend span { display: flex; align-items: center; gap: 5px; }
.swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.swatch.r { background: var(--red); }
.swatch.b { background: #2a2a2a; }
.swatch.n { background: #7d8b93; }

/* ---- bot thinking indicator ---- */
#subLabel.thinking { color: #ffd84d; }

/* ---- results: single final score line ---- */
.finalscore {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums;
  margin: 4px 0 2px;
}
.fs-red { color: var(--red-hi); }
.fs-black { color: #dfe8ec; }
.fs-dash { color: var(--muted); font-weight: 500; }

/* ---- rules modal ----
   Own overlay rather than reusing #overlay: the results card lives there
   and the rules need to open on top of a live game without interfering.
   Scrolls internally — the content is taller than a phone viewport. */
#rules {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(2,20,30,.82);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  backdrop-filter: blur(4px);
}
#rules.hidden { display: none; }
.rulescard {
  text-align: left; max-width: 380px;
  max-height: min(84vh, 640px); overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.rulescard h2 { text-align: center; }
.rulesec { margin-bottom: 15px; }
.rulesec h3 {
  margin: 0 0 5px; font-size: 13px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: #ffd84d;
}
.rulesec p { margin: 0 0 7px; font-size: 14px; line-height: 1.5; }
.rulesec p.muted { font-size: 13px; }
.rulesec b { font-weight: 700; color: #fff; }
#rulesClose { margin-top: 4px; }

/* In-game "?" — floated over the app rather than added to <header>, whose
   1fr/auto/1fr grid would be thrown off by a fourth child. */
#rulesBtnGame {
  position: absolute; top: calc(env(safe-area-inset-top) + 8px); right: 10px;
  flex: none; width: 28px; height: 28px; padding: 0; border-radius: 50%;
  background: rgba(255,255,255,.13); color: var(--muted);
  font-size: 15px; font-weight: 700; line-height: 1; z-index: 30;
}