/* ═════════════════════════════════════════════════════════
   SHADOWBARK — page + game styling
   Site chrome (header, nav, footer, buttons, .wrap) comes from
   /css/site.css. Everything here is Shadowbark's own: the Duskwood
   palette, the stage, the HUD and the upgrade cards.
   ═════════════════════════════════════════════════════════ */

/* Every game on this site defines .sr-only in its OWN stylesheet —
   site.css does not carry it. Without this the aria-live status
   element renders as visible body text under the canvas. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.sb-page {
  --bark:#4DE2FF;        /* the Warden's cyan — this game's accent */
  --rot:#7CFF3D;         /* toxic green */
  --blood:#FF2D5C;
  --dusk:#2A1B3D;
  --loam:#0B1410;
}

/* ── hero ───────────────────────────────────────────────── */
.sb-hero { padding:26px 0 10px; }
.sb-hero-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,460px);
  gap:34px;
  align-items:start;
}
@media (max-width:900px){
  .sb-hero-grid { grid-template-columns:1fr; gap:22px; }
}
.sb-title {
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(38px,7vw,72px);
  line-height:.94;
  letter-spacing:-.02em;
  margin:6px 0 10px;
  color:var(--bark);
  text-shadow:0 0 40px rgba(77,226,255,.4);
}
.sb-sub {
  font-family:var(--display);
  font-size:clamp(15px,2vw,19px);
  color:var(--bark);
  margin:0 0 14px;
  line-height:1.35;
}
.sb-points { list-style:none; padding:0; margin:16px 0 0; display:grid; gap:9px; }
.sb-points li { color:var(--dim); font-size:15px; display:flex; gap:10px; align-items:flex-start; }
.sb-points b { color:var(--paper); }
.sb-hint { margin-top:16px; font-family:var(--mono); font-size:12px; color:var(--dim); }
.sb-hint .kbd {
  display:inline-block; padding:2px 7px; border:1px solid var(--line);
  border-radius:7px; background:rgba(242,241,255,.05); color:var(--paper);
}

/* ── stage ──────────────────────────────────────────────── */
.sb-stage { position:relative; }
.sb-shell {
  position:relative;
  border:2.5px solid rgba(77,226,255,.6);
  border-radius:var(--radius);
  overflow:hidden;
  background:#070B0A;
  box-shadow:0 0 0 8px rgba(77,226,255,.06),
             0 30px 90px rgba(77,226,255,.2),
             inset 0 0 90px rgba(20,60,40,.25);
}
/* The arena is a fixed 480×660 logical space; matching the aspect here
   means the canvas scales uniformly with no letterbox bars. */
#sb-canvas {
  display:block;
  width:100%;
  aspect-ratio:480 / 660;
  touch-action:none;               /* the whole surface is the stick */
  cursor:crosshair;
  background:#070B0A;
}

/* ── HUD ────────────────────────────────────────────────── */
.sb-hud {
  position:absolute; inset:0 0 auto 0;
  display:flex; align-items:center; gap:10px;
  padding:9px 11px;
  font-family:var(--mono); font-size:11px;
  color:var(--paper);
  pointer-events:none;
  background:linear-gradient(180deg,rgba(4,6,12,.72),rgba(4,6,12,0));
}
.sb-hearts { display:flex; gap:3px; font-size:15px; line-height:1; }
.sb-heart { color:var(--blood); text-shadow:0 0 10px rgba(255,45,92,.6); }
.sb-heart.off { color:rgba(242,241,255,.18); text-shadow:none; }
.sb-hud .sb-spacer { flex:1; }
.sb-chip {
  padding:3px 8px; border-radius:999px;
  background:rgba(0,0,0,.42); border:1px solid var(--line);
  white-space:nowrap;
}
#sb-score { font-weight:700; color:var(--bark); }

.sb-hud-foot {
  position:absolute; inset:auto 0 0 0;
  display:flex; align-items:center; gap:9px;
  padding:9px 11px;
  font-family:var(--mono); font-size:11px; color:var(--dim);
  background:linear-gradient(0deg,rgba(4,6,12,.78),rgba(4,6,12,0));
}
#sb-weapons { color:var(--paper); font-size:10.5px; }
#sb-weapons i { font-style:normal; color:var(--dim); }
#sb-active b { font-size:13px; }
.sb-empty { color:rgba(242,241,255,.3); }

/* dash meter doubles as the touch button */
.sb-dash {
  position:relative; pointer-events:auto;
  width:52px; height:26px; border-radius:999px;
  border:1px solid var(--line); background:rgba(0,0,0,.45);
  color:var(--dim); font:600 10px var(--mono);
  display:grid; place-items:center; overflow:hidden;
}
.sb-dash::before {
  content:''; position:absolute; inset:0; width:var(--fill,100%);
  background:linear-gradient(90deg,rgba(77,226,255,.35),rgba(77,226,255,.12));
  transition:width .08s linear;
}
.sb-dash span { position:relative; }
.sb-dash.ready { color:var(--bark); border-color:rgba(77,226,255,.5); }
.sb-use {
  pointer-events:auto;
  padding:5px 11px; border-radius:999px;
  border:1px solid rgba(255,197,63,.45); background:rgba(255,197,63,.12);
  color:#FFC53F; font:700 10px var(--mono); cursor:pointer;
}
.sb-use:hover { background:rgba(255,197,63,.2); }

/* Sound toggle. Deliberately quieter than USE — it is a setting, not a
   move, and it must not compete with the relic button during a fight. */
.sb-mute {
  pointer-events:auto;
  padding:5px 10px; border-radius:999px; line-height:1;
  border:1px solid rgba(242,241,255,.22); background:rgba(10,21,15,.55);
  color:var(--paper); font:700 12px var(--mono); cursor:pointer;
}
.sb-mute:hover { background:rgba(242,241,255,.14); border-color:rgba(242,241,255,.4); }
.sb-mute:focus-visible { outline:3px solid var(--paper); outline-offset:2px; }
.sb-mute[aria-pressed="true"] { color:var(--dim); border-style:dashed; }

/* ── centre announcements ───────────────────────────────── */
#sb-say {
  position:absolute; left:0; right:0; top:38%;
  text-align:center; pointer-events:none;
  font-family:var(--display); font-weight:800;
  font-size:clamp(20px,4.4vw,30px);
  letter-spacing:.06em;
  color:var(--paper);
  text-shadow:0 0 26px rgba(255,45,92,.5);
  opacity:0;
}
#sb-say.show { animation:sb-say 1.6s ease-out forwards; }
@keyframes sb-say {
  0%   { opacity:0; transform:scale(.86); }
  16%  { opacity:1; transform:scale(1); }
  74%  { opacity:1; }
  100% { opacity:0; transform:scale(1.04); }
}

/* ── overlays ───────────────────────────────────────────── */
.sb-overlay {
  position:absolute; inset:0; z-index:4;
  display:grid; place-items:center;
  padding:20px;
  background:rgba(5,7,14,.86);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.sb-overlay[hidden] { display:none; }
.sb-panel { width:100%; max-width:400px; text-align:center; }
.sb-panel h2 {
  font-family:var(--display); font-weight:800;
  font-size:clamp(22px,4.6vw,31px);
  margin:0 0 8px; line-height:1.06;
  color:var(--bark); text-shadow:0 0 28px rgba(77,226,255,.5);
}
.sb-panel p { color:var(--dim); font-size:14px; margin:0 0 16px; }

.sb-modes { display:grid; gap:9px; }
.sb-mode {
  display:block; width:100%; text-align:left;
  padding:13px 15px; border-radius:15px; cursor:pointer;
  border:1px solid var(--line); background:rgba(242,241,255,.04);
  color:var(--paper); font-family:inherit;
  transition:border-color .15s, background .15s, transform .1s;
}
.sb-mode:hover { border-color:rgba(77,226,255,.5); background:rgba(77,226,255,.08); transform:translateY(-1px); }
.sb-mode b { display:block; font-family:var(--display); font-size:15px; margin-bottom:3px; }
.sb-mode small { color:var(--dim); font-size:12px; line-height:1.4; display:block; }
.sb-mode.primary { border-color:rgba(77,226,255,.45); background:rgba(77,226,255,.1); }

.sb-weapon-pick { margin:14px 0 4px; text-align:left; }
.sb-weapon-pick > span {
  display:block; font-family:var(--mono); font-size:10.5px;
  color:var(--dim); text-transform:uppercase; letter-spacing:.09em; margin-bottom:7px;
}
.sb-weapon-row { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.sb-weapon-row label {
  display:block; padding:9px 8px; border-radius:12px; cursor:pointer;
  border:1px solid var(--line); background:rgba(242,241,255,.03);
  font-family:var(--mono); font-size:10.5px; color:var(--dim); text-align:center;
}
.sb-weapon-row input { position:absolute; opacity:0; pointer-events:none; }
.sb-weapon-row input:checked + label { border-color:var(--bark); color:var(--paper); background:rgba(77,226,255,.12); }
.sb-weapon-row input:focus-visible + label { outline:2px solid var(--bark); outline-offset:2px; }

/* upgrade cards */
#sb-upgrade-wave {
  font-family:var(--mono); font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--bark); margin-bottom:6px;
}
.sb-cards { display:grid; gap:9px; }
.sb-card {
  --card:#7CFFA8;
  display:block; width:100%; text-align:left; cursor:pointer;
  padding:12px 14px; border-radius:14px;
  border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(242,241,255,.05),rgba(242,241,255,.02));
  color:var(--paper); font-family:inherit;
  transition:border-color .15s, transform .1s, background .15s;
}
.sb-card:hover, .sb-card:focus-visible {
  border-color:var(--card);
  background:linear-gradient(135deg,rgba(242,241,255,.09),rgba(242,241,255,.03));
  transform:translateY(-1px);
  outline:none;
}
.sb-card-tag {
  display:inline-block; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--card); margin-bottom:5px;
}
.sb-card-name { display:block; font-family:var(--display); font-weight:700; font-size:15px; margin-bottom:4px; }
.sb-card-desc { display:block; font-size:12.5px; color:var(--dim); line-height:1.42; }
.sb-card-meta { display:block; margin-top:6px; font-family:var(--mono); font-size:10px; color:rgba(242,241,255,.34); }

/* results */
.sb-stats { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:0 0 15px; }
.sb-stats > div {
  padding:9px 11px; border-radius:11px;
  border:1px solid var(--line); background:rgba(242,241,255,.03);
  text-align:left;
}
.sb-stats dt { font-family:var(--mono); font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--dim); }
.sb-stats dd { margin:2px 0 0; font-family:var(--display); font-weight:700; font-size:16px; color:var(--paper); }
#sb-over-note { font-family:var(--mono); font-size:10.5px; color:var(--dim); margin:12px 0 0; }
.sb-over-btns { display:grid; grid-template-columns:1fr 1fr; gap:8px; }

#sb-unranked {
  margin-top:10px; padding:7px 10px; border-radius:9px;
  border:1px solid rgba(255,197,63,.35); background:rgba(255,197,63,.08);
  font-family:var(--mono); font-size:10.5px; color:#FFC53F;
}

/* ── leaderboard ─────────────────────────────────────────
   /js/board.js emits the .lb-* markup; these wrap it and style the
   post-run form. */
.sb-lb-note { font-size:13px; color:var(--dim); margin:14px 0 8px; line-height:1.5; }
.sb-lb-standing { font-size:14px; color:var(--bark); margin:14px 0 4px; font-weight:600; }
.sb-lb-err { font-size:12px; color:var(--blood); margin:6px 0 0; }
.sb-lb-fine { font-size:11.5px; color:rgba(242,241,255,.42); margin:8px 0 0; line-height:1.5; }
.sb-lb-fine a { color:var(--bark); }
.sb-lb-form { display:flex; gap:7px; align-items:stretch; }
.sb-lb-form input {
  flex:1; min-width:0;
  padding:8px 11px; border-radius:11px;
  border:1px solid var(--line); background:rgba(0,0,0,.35);
  color:var(--paper); font:14px var(--body);
}
.sb-lb-form input:focus-visible { outline:2px solid var(--bark); outline-offset:1px; }
.sb-lb-post { padding:8px 16px; }
#sb-lb-block:empty { display:none; }

/* The board section (#sb-lb-today) is rendered by BOARD.renderBoard, which
   emits UNPREFIXED .lb-* classes — the same markup every game's board uses.
   The .sb-lb-* rules above style Shadowbark's own post-run block only, so without
   these the ranked table fell back to browser defaults: a decimal-marker <ol>
   with four inline spans per row running together. Prefixing these would
   silently break it again. */
.lb-panel {
  background:rgba(242,241,255,.03); border:1px solid var(--line);
  border-radius:15px; padding:22px; max-width:680px;
}
.lb-msg { color:var(--dim); font-size:14.5px; margin:0; }
.lb-standing { font-size:13.5px; color:var(--paper); margin:0 0 6px; line-height:1.5; }
.lb-standing b { color:var(--bark); }
.lb-count { font-family:var(--mono); font-size:12px; color:var(--dim); margin:0 0 12px; }
.lb-list { list-style:none; margin:0; padding:0; }
.lb-row {
  display:flex; align-items:center; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--line); font-size:14px;
}
.lb-row:last-child { border-bottom:none; }
.lb-row.is-you { color:var(--bark); }
.lb-row.is-you .lb-name { font-weight:600; }
.lb-row.is-you .lb-rank { color:var(--bark); }
.lb-rank { font-family:var(--mono); font-size:12px; color:var(--dim); width:22px; flex-shrink:0; }
.lb-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-name em { font-style:normal; color:var(--dim); font-size:12px; }
.lb-wave { font-family:var(--mono); font-size:11.5px; color:var(--dim); white-space:nowrap; }
.lb-score { font-family:var(--display); font-weight:700; font-size:14px; min-width:66px; text-align:right; }
.lb-err { color:var(--blood); font-size:12px; margin:6px 0 0; }
.lb-remove {
  margin-top:14px; font-family:var(--mono); font-size:11.5px; color:var(--dim);
  background:none; border:1px solid var(--line); border-radius:999px;
  padding:6px 14px; cursor:pointer;
}
.lb-remove:hover:not(:disabled) { color:var(--paper); border-color:var(--dim); }
.lb-remove:disabled { opacity:.5; cursor:not-allowed; }

/* ── content sections ───────────────────────────────────── */
/* vertical only: this element also carries .wrap, and a shorthand
   here would zero out .wrap's 24px side padding and shift every
   section 24px left of the header and footer. */
.sb-sec { padding-top:44px; padding-bottom:6px; }
.sb-sec h2 {
  font-family:var(--display); font-weight:800;
  font-size:clamp(22px,3.4vw,31px); margin:0 0 6px; color:var(--paper);
}
.sb-sec .lede { color:var(--dim); font-size:15.5px; max-width:72ch; margin:0 0 20px; line-height:1.6; }

.sb-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.sb-cardlet {
  padding:15px 16px; border-radius:15px;
  border:1px solid var(--line); background:rgba(242,241,255,.03);
}
.sb-cardlet h3 { font-family:var(--display); font-size:15px; margin:0 0 6px; color:var(--paper); }
.sb-cardlet p { margin:0; color:var(--dim); font-size:13.5px; line-height:1.55; }
.sb-cardlet .ic { font-size:19px; display:block; margin-bottom:7px; }

/* bestiary */
.sb-table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:15px; }
table.sb-table { width:100%; border-collapse:collapse; font-size:13.5px; min-width:560px; }
table.sb-table th, table.sb-table td { padding:10px 13px; text-align:left; border-bottom:1px solid var(--line); }
table.sb-table th {
  font-family:var(--mono); font-size:10px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--dim); background:rgba(242,241,255,.03);
}
table.sb-table tr:last-child td { border-bottom:0; }
table.sb-table td:first-child { color:var(--paper); font-weight:600; white-space:nowrap; }
table.sb-table td { color:var(--dim); line-height:1.5; }
.sb-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; vertical-align:1px; }

/* faq */
.sb-faq { display:grid; gap:9px; }
.sb-faq details {
  border:1px solid var(--line); border-radius:13px;
  background:rgba(242,241,255,.03); overflow:hidden;
}
.sb-faq summary {
  padding:13px 15px; cursor:pointer; font-weight:600; color:var(--paper);
  font-size:14.5px; list-style:none; display:flex; justify-content:space-between; gap:12px;
}
.sb-faq summary::-webkit-details-marker { display:none; }
.sb-faq summary::after { content:'+'; color:var(--bark); font-family:var(--mono); flex:none; }
.sb-faq details[open] summary::after { content:'−'; }
.sb-faq p { margin:0; padding:0 15px 14px; color:var(--dim); font-size:13.5px; line-height:1.6; }

@media (prefers-reduced-motion:reduce){
  #sb-say.show { animation:none; opacity:1; }
  .sb-mode:hover, .sb-card:hover { transform:none; }
}