:root {
  --bg:#121213; --fg:#f2f2f2; --muted:#9a9a9a; --good:#538D4E; --okay:#B59F3B; --bad:#3A3A3C;
  /* Board squares — Carolina blue / white by default; overridden live by settings.js */
  --light:#FFFFFF; --dark:#4B9CD3; --accent:#538D4E;
  --hl-last:rgba(255, 200, 0, 0.42);
  --hl-sel:rgba(255, 170, 0, 0.50);
  --move-dot:rgba(20, 35, 55, 0.38);
  --move-ring:rgba(20, 35, 55, 0.42);
  --coord-on-light:var(--dark);
  --coord-on-dark:var(--light);
  /* Board footprint: use most of the viewport on desktop, stay usable on phones */
  --board-size:min(90vw, calc(100vh - 220px), 680px);
  --panel-size:min(92vw, 480px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
header { display:flex; align-items:center; justify-content:space-between; padding:8px 16px; border-bottom:1px solid #333; gap:8px; }
.header-actions { display:flex; align-items:center; gap:6px; }
h1 { margin:0; font-size:1.8rem; letter-spacing:.08em; }
button { font:inherit; color:var(--fg); background:#3a3a3c; border:0; border-radius:6px; padding:10px 14px; cursor:pointer; }
button:disabled { opacity:.4; cursor:default; }
button.primary { background:var(--accent); }
button.icon { width:40px; height:40px; padding:0; font-size:1.1rem; border-radius:50%; }
#tabs { display:flex; justify-content:center; gap:6px; margin:12px 0 4px; flex-wrap:wrap; }
#tabs a { color:var(--fg); text-decoration:none; padding:6px 12px; border-radius:6px; background:#2a2a2c; text-align:center; }
#tabs a small { display:block; font-size:.7rem; color:var(--muted); }
#tabs a.on { background:var(--accent); }
#tabs a.on small { color:#ddd; }
#info { text-align:center; color:var(--muted); margin:6px 12px 12px; font-size:.9rem; }
main { display:flex; gap:24px; justify-content:center; align-items:flex-start; padding:0 12px 24px; flex-wrap:wrap; }
.left { width:var(--board-size); max-width:100%; }
.right { width:var(--panel-size); max-width:100%; }
#boardWrap { position:relative; width:100%; }
#board {
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  grid-template-rows:repeat(8,minmax(0,1fr));
  width:100%;
  aspect-ratio:1;
  border-radius:4px;
  overflow:hidden;
  touch-action:none;
  user-select:none;
  box-shadow:0 4px 24px rgba(0,0,0,.35);
}
.sq { aspect-ratio:1; position:relative; min-width:0; min-height:0; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.sq.light { background:var(--light); } .sq.dark { background:var(--dark); }
.sq.last::before { content:""; position:absolute; inset:0; background:var(--hl-last); }
.sq.sel::before { content:""; position:absolute; inset:0; background:var(--hl-sel); }
.sq.check::before { content:""; position:absolute; inset:0; background:radial-gradient(circle, rgba(255,0,0,.8) 0%, rgba(255,0,0,0) 70%); }
/* Pieces fill nearly the whole square (larger board + slightly padded glyph) */
.sq img {
  width:92%;
  height:92%;
  object-fit:contain;
  display:block;
  position:relative;
  z-index:1;
  cursor:grab;
  pointer-events:none;
}
.sq.target::after { content:""; position:absolute; width:28%; height:28%; border-radius:50%; background:var(--move-dot); z-index:2; }
.sq.capture::after { content:""; position:absolute; inset:0; border-radius:50%; border:5px solid var(--move-ring); z-index:2; box-sizing:border-box; }
.coord { position:absolute; font-size:.7rem; font-weight:700; z-index:2; pointer-events:none; }
.coord.r { top:2px; left:3px; } .coord.f { bottom:1px; right:3px; }
.sq.light .coord { color:var(--coord-on-light); } .sq.dark .coord { color:var(--coord-on-dark); }
.ghost { position:fixed; pointer-events:none; z-index:100; }
#promo { position:absolute; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; gap:8px; z-index:10; }
#promo[hidden] { display:none; }
#promo button { width:18%; aspect-ratio:1; padding:4px; background:#ddd; }
#promo img { width:100%; }
.row { display:flex; gap:10px; margin-top:10px; } .row button { flex:1; }
.row[hidden] { display:none; }
#grid { display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); grid-template-rows:repeat(var(--n),minmax(0,1fr)); gap:5px; aspect-ratio:1; }
.tile { display:flex; min-width:0; min-height:0; align-items:center; justify-content:center; border:2px solid #3a3a3c; border-radius:3px;
  font-weight:700; font-size:clamp(.55rem, calc(var(--panel-size) / var(--n, 5) * .22), 1.3rem); overflow:hidden; white-space:nowrap; }
.tile.typed { border-color:#777; }
.tile.good { background:var(--good); border-color:var(--good); }
.tile.okay { background:var(--okay); border-color:var(--okay); }
.tile.bad { background:var(--bad); border-color:var(--bad); }
#solution { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-bottom:12px; }
#solution[hidden] { display:none; }
#solution span { padding:6px 10px; border-radius:4px; background:#2a2a2c; font-weight:700; }
#solution span.played { background:var(--good); }
#toast { position:fixed; top:70px; left:50%; transform:translateX(-50%); background:#fff; color:#000; padding:10px 16px; border-radius:6px; font-weight:600; z-index:200; }
#toast[hidden] { display:none; }
dialog { background:#1e1e20; color:var(--fg); border:1px solid #444; border-radius:10px; max-width:min(520px, 92vw); padding:20px 22px; position:relative; }
dialog::backdrop { background:rgba(0,0,0,.6); }
dialog .close { position:absolute; top:10px; right:10px; padding:4px 10px; background:transparent; }
dialog h3 { margin-top:0; }
dialog a { color:#8ab4f8; }
.example { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; --n:5; }
.example .tile { aspect-ratio:1.2; font-size:.8rem; }
.muted { color:var(--muted); font-size:.85rem; }
.nums { display:flex; justify-content:space-around; text-align:center; margin:12px 0; }
.nums b { display:block; font-size:1.6rem; }
.bar { display:flex; align-items:center; gap:6px; margin:3px 0; font-size:.85rem; }
.bar span { width:14px; } .bar div { background:var(--bad); padding:2px 6px; text-align:right; }
#statsBody .primary { width:100%; margin-top:14px; }
.result b { color:#cde; }

/* ---- Settings dialog ---- */
#settings .set-row { display:flex; gap:16px; flex-wrap:wrap; margin:12px 0; }
#settings .set-field { display:flex; flex-direction:column; gap:6px; flex:1; min-width:140px; }
#settings .set-field label { font-size:.85rem; color:var(--muted); }
#settings input[type="color"] {
  width:100%; height:44px; border:1px solid #444; border-radius:8px; padding:4px; background:#2a2a2c; cursor:pointer;
}
#setPresets { display:flex; flex-direction:column; gap:8px; margin:8px 0 14px; }
.set-preset {
  display:flex; align-items:center; gap:10px; text-align:left; width:100%;
  background:#2a2a2c; padding:10px 12px;
}
.set-preset .swatch {
  width:40px; height:28px; border-radius:4px; border:1px solid #555; flex-shrink:0;
}
#settings .set-actions { display:flex; gap:8px; margin-top:8px; }
#settings .set-actions button { flex:1; }

/* ---- Openings tab ---- */
.hidden { display: none !important; }
#openingsPanel { width: 100%; }
.op-lead { color: var(--muted); font-size: .9rem; margin: 0 0 12px; }
.op-progress { display: flex; justify-content: space-around; text-align: center; margin: 0 0 14px; gap: 8px; }
.op-progress b { display: block; font-size: 1.4rem; }
.op-progress span { color: var(--muted); font-size: .75rem; }
.op-h { margin: 14px 0 8px; font-size: 1rem; }
.op-grid { display: flex; flex-direction: column; gap: 8px; }
.op-card { text-align: left; background: #2a2a2c; padding: 12px 14px; border-radius: 8px; display: flex; flex-direction: column; gap: 4px; width: 100%; }
.op-card strong { font-size: .95rem; }
.op-card.pick { outline: 2px solid var(--accent); }
.op-meta { font-size: .75rem; color: var(--muted); }
.op-actions { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.op-actions button { flex: 1; min-width: 120px; }
.op-toolbar { display: flex; gap: 8px; margin-bottom: 8px; }
.op-toolbar button { flex: 0 1 auto; }
.op-idea { background: #2a2a2c; border-radius: 8px; padding: 12px 14px; margin: 8px 0; line-height: 1.45; font-size: .95rem; }
.op-phase { color: var(--muted); font-size: .85rem; }
.op-feedback { min-height: 1.4em; color: #cde; font-size: .9rem; }
@media (max-width: 560px) {
  .op-progress b { font-size: 1.15rem; }
  :root { --board-size: min(94vw, calc(100vh - 200px), 520px); }
  h1 { font-size: 1.4rem; }
}
.op-banner { background: #2d4a2d; border: 1px solid var(--accent); border-radius: 8px; padding: 10px 12px; margin: 0 0 12px; font-size: .9rem; line-height: 1.4; }

/* ---- Openings Test mode ---- */
.op-test-box { background:#1d2733; border:1px solid #2f4a63; border-radius:10px; padding:10px 12px; margin:8px 0 12px; }
.op-test-head { font-size:.95rem; }
.op-vars { display:flex; flex-direction:column; gap:6px; }
.op-var { display:flex; align-items:center; gap:10px; text-align:left; width:100%; background:#2a2a2c; padding:10px 12px; border-radius:8px; }
.op-var small { color:var(--muted); font-weight:400; }
.op-var-main { display:flex; flex-direction:column; gap:2px; }
.op-var-ico { width:1.4em; text-align:center; font-size:1.05rem; }
.op-var.solved .op-var-ico { color:var(--good); }
.op-var.retry .op-var-ico, .op-var.due .op-var-ico { color:var(--okay); }
.op-var.next { outline:2px solid var(--dark); }
.op-var.locked { opacity:.55; }
.op-toolbar select { flex:1; font:inherit; color:var(--fg); background:#2a2a2c; border:1px solid #444; border-radius:6px; padding:8px; }
#testBar { background:#1d2733; border:1px solid #2f4a63; border-radius:10px; padding:10px 12px; margin-bottom:12px; }
#testBar[hidden] { display:none; }
#testBar .tb-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:4px 0; }
#testBar .tb-row button { flex:1 1 auto; }
#testBar .tb-count { margin-left:auto; color:var(--muted); font-size:.85rem; }
#testBar .tb-title { font-weight:700; font-size:1.05rem; margin:6px 0 2px; }
#testBar .tb-title small { color:var(--muted); font-weight:400; }
#testBar .tb-line { font-size:.9rem; }
#testBar .tb-status { margin-top:6px; font-weight:600; color:#cde; }
#testBar .tb-note { margin-top:6px; font-size:.9rem; color:#ddd; }
#testBar .tb-unlock { margin-top:6px; color:#9fd59a; font-size:.9rem; }
#statsBody #statsHistory { width:100%; margin-top:10px; }

/* ---- Profile / history ---- */
#profileBtn.signed-in { background:var(--dark); color:#fff; font-weight:700; }
#profile { width:min(560px, 94vw); }
.pf-form { display:flex; flex-direction:column; gap:8px; }
.pf-form label { display:flex; flex-direction:column; gap:4px; font-size:.85rem; color:var(--muted); }
.pf-form input { font:inherit; color:var(--fg); background:#2a2a2c; border:1px solid #444; border-radius:6px; padding:8px 10px; }
.pf-actions { display:flex; gap:8px; margin:10px 0 4px; flex-wrap:wrap; }
.pf-actions > * { flex:1; }
.pf-import { display:flex; align-items:center; justify-content:center; background:#3a3a3c; border-radius:6px; padding:10px 14px; cursor:pointer; }
.pf-error { color:#ff8a80; min-height:1.2em; margin:0; font-size:.9rem; }
.pf-who { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pf-who button { margin-left:auto; }
.pf-guest { font-weight:700; }
.pf-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.pf-table th, .pf-table td { padding:4px 6px; border-bottom:1px solid #333; text-align:left; }
.pf-table th { color:var(--muted); font-weight:500; }
.pf-scroll { max-height:220px; overflow:auto; }
.nowrap { white-space:nowrap; }
#profile h4 { margin:16px 0 6px; }

/* v3.2 — computer plays the opponent */
.sq.suggest::after { content:""; position:absolute; inset:3px; border:4px solid rgba(20, 160, 80, .85); border-radius:6px; z-index:3; pointer-events:none; }
.tile.skip { background:transparent; border-color:#2a2a2c; border-style:dashed; color:transparent; }
#testBar .tb-moves { margin-top:6px; font-size:.95rem; line-height:1.6; }
#testBar .tb-moves .mvnum { color:var(--muted); margin-right:2px; }
#testBar .tb-moves .mv.pre { color:#aab; }
#testBar .tb-moves .mv.you { font-weight:700; color:#fff; }
#testBar .tb-moves .mv.cpu { color:#9cc9ee; font-style:italic; }
#testBar .tb-moves .mv.cpu::before { content:"🤖"; font-style:normal; font-size:.75em; margin-right:2px; }
#testBar .tb-msg { margin-top:6px; font-size:.92rem; color:#e8e8e8; }
#solution span.cpu { font-style:italic; opacity:.85; }
.op-cpu-note { font-size:.85rem; margin:4px 0; }