/* ---- DARK palette (default) ---- */
:root{
  --bg:#0f1320; --panel:#161b2c; --ink:#e7ecf5; --muted:#8b95ad;
  --line:#0a0d16; --accent:#5b8cff; --good:#36d399;
  --glow:#1b2236;                 /* radial highlight at top of page bg */
  --panel-border:#222a40;         /* panel / stat card borders */
  --btn-bg:#1c2440; --btn-bg-hover:#243056; --btn-border:#2a3350;
  --accent-ink:#08101f;           /* text on accent-colored buttons */
  --frame:#0a0d16;                /* big-triangle outline + outer hexagon */
  --win-overlay:rgba(8,11,20,.72);
  --panel-shadow:0 10px 40px rgba(0,0,0,.35);
  --card-shadow:0 20px 60px rgba(0,0,0,.5);
}
/* ---- LIGHT palette ---- */
:root[data-theme="light"]{
  --bg:#eef1f7; --panel:#ffffff; --ink:#1c2333; --muted:#5d6781;
  --line:#c4cbdc; --accent:#3a63d8; --good:#1ba974;
  --glow:#ffffff;
  --panel-border:#d4dae9;
  --btn-bg:#eef1f8; --btn-bg-hover:#e2e8f6; --btn-border:#c9d2e6;
  --accent-ink:#ffffff;
  --frame:#3a4256;
  --win-overlay:rgba(230,234,243,.72);
  --panel-shadow:0 10px 40px rgba(40,55,90,.14);
  --card-shadow:0 20px 60px rgba(40,55,90,.22);
}
/* ---- DARK palette, explicit (data-theme="dark" forces dark even if OS is light) ---- */
:root[data-theme="dark"]{
  --bg:#0f1320; --panel:#161b2c; --ink:#e7ecf5; --muted:#8b95ad;
  --line:#0a0d16; --accent:#5b8cff; --good:#36d399;
  --glow:#1b2236;
  --panel-border:#222a40;
  --btn-bg:#1c2440; --btn-bg-hover:#243056; --btn-border:#2a3350;
  --accent-ink:#08101f;
  --frame:#0a0d16;
  --win-overlay:rgba(8,11,20,.72);
  --panel-shadow:0 10px 40px rgba(0,0,0,.35);
  --card-shadow:0 20px 60px rgba(0,0,0,.5);
}
/* ---- SYSTEM mode: no data-theme set => follow OS. Dark is the :root default,
       so we only need to supply the LIGHT overrides when the OS prefers light. ---- */
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg:#eef1f7; --panel:#ffffff; --ink:#1c2333; --muted:#5d6781;
    --line:#c4cbdc; --accent:#3a63d8; --good:#1ba974;
    --glow:#ffffff;
    --panel-border:#d4dae9;
    --btn-bg:#eef1f8; --btn-bg-hover:#e2e8f6; --btn-border:#c9d2e6;
    --accent-ink:#ffffff;
    --frame:#3a4256;
    --win-overlay:rgba(230,234,243,.72);
    --panel-shadow:0 10px 40px rgba(40,55,90,.14);
    --card-shadow:0 20px 60px rgba(40,55,90,.22);
  }
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:radial-gradient(1200px 800px at 50% -10%, var(--glow) 0, var(--bg) 60%), var(--bg);
  color:var(--ink); font:15px/1.45 system-ui,Segoe UI,Roboto,sans-serif;
  display:flex; flex-direction:column; align-items:center; min-height:100%;
}
header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; width:100%; max-width:520px; gap:8px;
}
header h1{margin:0; font-size:26px; letter-spacing:.5px; text-align:center; flex:1}
header p{margin:4px 0 0; color:var(--muted); font-size:13px}
main{
  display:flex; flex-direction:column; gap:18px;
  padding:0 14px 14px; width:100%; max-width:520px;
}
#boardWrap{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:16px;
  padding:14px; box-shadow:var(--panel-shadow);
}
svg#board{display:block; width:100%; max-width:492px; height:auto; touch-action:none}
.tri{stroke:var(--line); stroke-width:.02; transition:fill .18s ease, opacity .12s ease}
.tri.dim{opacity:.22}
.frame{fill:none; stroke:var(--frame); stroke-width:.05; stroke-linejoin:round}
.frame.outer{stroke-width:.07}

#hud{display:flex; gap:14px; align-items:stretch; flex-wrap:wrap;
  justify-content:center; width:100%;}
.stats{display:flex; gap:10px; flex:1}
.stat{flex:1; background:var(--panel); border:1px solid var(--panel-border); border-radius:12px;
  padding:10px 12px; text-align:center}
.stat b{display:block; font-size:22px}
.stat span{color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.6px}
.stats button{flex:1; padding:10px}
.actions{display:flex; gap:10px; flex:1}
button{font:inherit; color:var(--ink); cursor:pointer; border-radius:10px;
  border:1px solid var(--btn-border); background:var(--btn-bg); transition:.12s}
button:hover{border-color:var(--accent); background:var(--btn-bg-hover)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.4; cursor:not-allowed}
button:disabled:hover{border-color:var(--btn-border); background:var(--btn-bg)}
button:disabled:active{transform:none}
.actions button{flex:1; padding:10px}
.actions button.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600}

/* ---- Difficulty selector ---- */
#difficulty{display:flex; flex-direction:column; gap:6px; align-items:center;
  width:100%;}
#difficulty label{color:var(--muted); font-size:11px; text-transform:uppercase;
  letter-spacing:.6px}
#difficulty select{
  font:inherit; color:var(--ink); cursor:pointer; width:100%;
  padding:9px 12px; border-radius:10px;
  border:1px solid var(--btn-border); background:var(--btn-bg); transition:.12s;
}
#difficulty select:hover{border-color:var(--accent); background:var(--btn-bg-hover)}
#difficulty select:focus{outline:none; border-color:var(--accent)}
#difficulty select option{background:var(--panel); color:var(--ink)}

.ctrl{cursor:pointer}
.ctrl path{fill:var(--muted); transition:fill .12s ease}
.ctrl:hover path{fill:var(--accent)}
.ctrl circle{fill:transparent}
@keyframes hintBlink{
  0%,100%{fill:var(--muted); opacity:1}
  50%{fill:var(--accent); opacity:.25}
}
.ctrl.hint-blink path{animation:hintBlink .35s ease-in-out 3}
.ind-arrow{fill:white; stroke:rgba(0,0,0,0.25); stroke-width:0.04; stroke-linejoin:round}

#win{position:fixed; inset:0; background:var(--win-overlay); display:none;
  place-items:center; backdrop-filter:blur(3px)}
#win.show{display:grid}
#win .card{background:var(--panel); border:1px solid var(--btn-border); border-radius:16px;
  padding:26px 30px; text-align:center; box-shadow:var(--card-shadow)}
#win h2{margin:0 0 6px; color:var(--good); font-size:24px}
#win p{margin:0 0 16px; color:var(--muted)}
footer{color:var(--muted); font-size:12px; padding:6px 0 22px; text-align:center; max-width:620px}

/* ---- Shareable fingerprint of the initial board ---- */
#share{display:flex; flex-direction:column; align-items:center; gap:6px;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--panel-border)}
#share .lbl{color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.6px}
#share .row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center}
#share a#shareLink{color:var(--accent); text-decoration:none; font-weight:600;
  word-break:break-all}
#share a#shareLink:hover{text-decoration:underline}
#copyBtn{font-size:12px; padding:4px 10px; border-radius:8px}
#copyBtn.copied{border-color:var(--good); color:var(--good)}

/* ---- Help panel ---- */
#helpPanel{
  width:100%;
  background:var(--panel); border:1px solid var(--panel-border); border-radius:16px;
  padding:18px 20px; box-shadow:var(--panel-shadow);
  display:none;
}
#helpPanel.open{display:block}
#helpPanel h2{margin:0 0 10px; font-size:16px; letter-spacing:.3px}
#helpPanel p{margin:0 0 10px; color:var(--muted); font-size:13px; line-height:1.55}
#helpPanel p:last-child{margin-bottom:0}
#helpPanel #letsPlayBtn{
  display:block; width:100%; margin-top:14px; padding:10px;
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink);
  font-weight:600; font-size:14px;
}
#helpPanel strong{color:var(--ink)}

/* ---- Help toggle button (inline in header) ---- */
#helpToggle{
  display:inline-flex; align-items:center; gap:5px; flex-shrink:0;
  padding:4px 10px 4px 7px;
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:10px;
  font:13px/1 system-ui,Segoe UI,Roboto,sans-serif;
  color:var(--muted); cursor:pointer; transition:.12s;
}
#helpToggle:hover{border-color:var(--accent); background:var(--btn-bg-hover); color:var(--ink)}
#helpToggle svg{width:15px; height:15px; display:block; fill:none;
  stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0}

/* ---- Theme control (segmented light / system / dark) ---- */
#themeCtl{
  display:inline-flex; gap:2px; padding:3px; flex-shrink:0;
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:10px;
}
#themeCtl button{
  display:grid; place-items:center; width:30px; height:28px; padding:0;
  border:1px solid transparent; background:transparent; border-radius:7px;
  color:var(--muted); line-height:0;
}
#themeCtl button:hover{background:var(--btn-bg-hover); border-color:transparent; color:var(--ink)}
#themeCtl button[aria-pressed="true"]{
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink);
}
#themeCtl button svg{width:16px; height:16px; display:block; fill:none;
  stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}