/* ============================================================
   Scroggy Mines — screenprinted wizard arcade
   Design system: DESIGN.md (ScroggyGames)
   ============================================================ */

:root{
  --accent:#d5ed58;
  --accent-deep:#a8c22f;
  --ink:#171817;
  --surface:#232522;
  --paper:#f0f0e6;
  --muted:#bdbfb2;
  --line:#41443b;
  --danger:#e2503f;
  --gold:#e8b33c;

  --display:"Henny Penny", Georgia, serif;
  --body:"Plus Jakarta Sans", system-ui, sans-serif;

  --r-control:4px;
  --r-panel:8px;
  --r-card:10px;

  --s-compact:12px;
  --s-standard:24px;
  --s-generous:40px;

  --wrap:1240px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
}

[data-theme="cosmic"]{ --bg-hue:188deg; --accent:#c3a7ff; --accent-deep:#8d68e0; --surface:#241f30; --ink:#141021; --line:#463c60; }
[data-theme="inferno"]{ --bg-hue:-50deg; --accent:#ff8a3d; --accent-deep:#d1621d; --surface:#2b1f1a; --ink:#190f0a; --line:#5a3a28; }
[data-theme="ocean"]{   --bg-hue:108deg; --accent:#5fe0e0; --accent-deep:#2fa9ae; --surface:#182a2d; --ink:#0c181a; --line:#2e5155; }

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  min-height:100dvh;
  font-family:var(--body);
  font-weight:300;
  line-height:1.8;
  color:var(--paper);
  background:var(--ink);
  overflow-x:hidden;
}

/* The night sky art is printed in cool indigo, so each theme rotates its hue.
   The glow sits in a separate layer so the filter never touches it. */
.backdrop{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.backdrop-img{
  position:absolute; inset:0;
  background:url("../img/bg-nightsky.webp") center/cover no-repeat;
  filter:hue-rotate(var(--bg-hue,0deg));
}
.backdrop-mute{
  position:absolute; inset:0;
  background:color-mix(in srgb, var(--ink) 46%, transparent);
}
.backdrop-glow{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 60%),
    radial-gradient(90% 70% at 50% 110%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 55%);
}

/* halftone print grain over everything */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.09; mix-blend-mode:overlay;
  background-image:
    radial-gradient(circle at 1px 1px, #fff 1px, transparent 0),
    radial-gradient(circle at 3px 3px, #000 1px, transparent 0);
  background-size:4px 4px, 4px 4px;
}

/* The cavern ceiling is the brightest part of the art and was swallowing the
   title and the header controls. Scrim sits above the art, below the header. */
.top-scrim{
  position:fixed; top:0; left:0; right:0; z-index:1; pointer-events:none;
  height:clamp(190px, 30vh, 360px);
  background:linear-gradient(
    to bottom,
    var(--ink) 0%,
    color-mix(in srgb, var(--ink) 88%, transparent) 28%,
    color-mix(in srgb, var(--ink) 55%, transparent) 58%,
    transparent 100%);
}

.wrap{ width:min(100% - 104px, var(--wrap)); margin-inline:auto; position:relative; z-index:2; }

/* ---------- ambient star field ---------- */
.star-field{ position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.lair-star{
  position:absolute; left:var(--x); top:var(--y);
  width:var(--sz); height:var(--sz);
  background:var(--paper); opacity:.18;
  clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);
  animation:star-twinkle var(--dur) ease-in-out var(--delay) infinite;
  animation-play-state:paused;
}
.lair-star:nth-child(3n){ background:var(--accent); }
.lair-star:nth-child(4n){ clip-path:none; border-radius:50%; }
.motion-on .lair-star{ animation-play-state:running; }

@keyframes star-twinkle{
  0%,100%{ opacity:.10; transform:scale(.55) rotate(0deg); }
  45%    { opacity:.8;  transform:scale(1.2) rotate(40deg); }
  65%    { opacity:.3;  transform:scale(.8) rotate(60deg); }
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  z-index:3;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s-standard); padding:var(--s-generous) 0 var(--s-standard);
  flex-wrap:wrap;
}

.title-block h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(45px,4.65vw,67px); line-height:1.17; letter-spacing:-.035em;
  margin:0; color:var(--paper);
  text-shadow:3px 3px 0 color-mix(in srgb, var(--accent) 55%, transparent);
}
.tagline{ margin:10px 0 0; font-size:14px; color:var(--muted); letter-spacing:.02em; }
.tagline em{ color:var(--accent); font-style:normal; font-weight:700; }

.header-tools{ display:flex; align-items:center; gap:var(--s-compact); position:relative; z-index:60; }

.balance-chip{
  display:flex; flex-direction:column; align-items:flex-end; line-height:1.2;
  padding:9px 16px; border:1px solid var(--line); border-radius:var(--r-panel);
  background:color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter:blur(6px);
}
.balance-label{ font-size:10px; text-transform:uppercase; letter-spacing:.16em; color:var(--muted); }
.balance-value{ font-size:22px; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; }
.balance-value.bump{ animation:pop .45s var(--ease-back); }
@keyframes pop{ 0%{ transform:scale(1);} 40%{ transform:scale(1.22);} 100%{ transform:scale(1);} }

.ghost-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--body); font-weight:700; font-size:12px;
  padding:12px 16px; border-radius:var(--r-control);
  border:1px solid var(--line); color:var(--paper);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(6px);
  cursor:pointer; transition:border-color .2s, color .2s, background .2s;
}
.ghost-btn:hover{ border-color:var(--accent); color:var(--accent); }
.theme-swatch{ width:12px; height:12px; border-radius:3px; background:var(--accent); }

.theme-panel{
  position:absolute; top:calc(100% + 10px); right:0; z-index:61;
  display:grid; gap:4px; min-width:180px; padding:10px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-panel);
  box-shadow:0 12px 30px #0005;
}
.theme-panel[hidden]{ display:none; }
.theme-panel button{
  font-family:var(--body); font-size:13px; font-weight:300; text-align:left;
  padding:8px 10px; border:0; border-radius:var(--r-control);
  background:transparent; color:var(--paper); cursor:pointer;
}
.theme-panel button:hover{ background:color-mix(in srgb, var(--accent) 18%, transparent); }
.theme-panel button[aria-pressed="true"]{ font-weight:700; color:var(--accent); }
.theme-panel hr{ border:0; border-top:1px solid var(--line); margin:6px 0; }
.switch-row{ display:flex; align-items:center; gap:8px; font-size:13px; padding:4px 10px; cursor:pointer; }
.reset-link{ font-size:12px !important; color:var(--muted) !important; }

/* ============================================================
   LAYOUT
   ============================================================ */
.game-shell{
  display:grid; grid-template-columns:330px minmax(0,1fr); gap:var(--s-standard);
  align-items:start; padding-bottom:var(--s-generous);
  max-width:1010px; margin-inline:auto;
}

.panel{
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  border:1px solid var(--line); border-radius:var(--r-panel);
  backdrop-filter:blur(10px);
}

/* ---------- controls ---------- */
.controls{
  padding:var(--s-standard); display:grid; grid-template-columns:minmax(0,1fr);
  gap:18px; position:sticky; top:20px; min-width:0;
}
.field,.input-row,.mine-presets,.readout{ min-width:0; }

.field label{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.16em;
  color:var(--muted); margin-bottom:8px;
}
.field-hint{ font-weight:300; letter-spacing:.04em; text-transform:none; font-size:11px; }

.input-row{ display:flex; gap:6px; align-items:center; }

input[type="number"]{
  flex:1; min-width:0; font-family:var(--body); font-weight:700; font-size:18px;
  padding:11px 12px; color:var(--paper); background:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-control);
  font-variant-numeric:tabular-nums;
}
input[type="number"]:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }

.chip{
  font-family:var(--body); font-weight:700; font-size:12px;
  padding:10px 11px; min-width:38px; cursor:pointer;
  color:var(--paper); background:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-control);
  transition:background .18s, color .18s, transform .18s var(--ease-back);
}
.chip:hover{ background:var(--accent); color:var(--ink); transform:translateY(-2px); }
.chip[aria-pressed="true"]{ background:var(--accent); color:var(--ink); }

.mine-presets{ display:flex; gap:6px; margin-top:8px; }
.mine-presets .chip{ flex:1; }

input[type="range"]{
  flex:1; -webkit-appearance:none; appearance:none; height:6px; border-radius:99px;
  background:linear-gradient(90deg, var(--accent) var(--fill,12%), var(--line) var(--fill,12%));
  cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--paper); border:3px solid var(--ink); cursor:grab;
  box-shadow:0 0 0 2px var(--accent);
  transition:transform .18s var(--ease-back);
}
input[type="range"]::-webkit-slider-thumb:hover{ transform:scale(1.2); }
input[type="range"]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; background:var(--paper);
  border:3px solid var(--ink); box-shadow:0 0 0 2px var(--accent); cursor:grab;
}

.mines-out{
  font-weight:700; font-size:18px; min-width:34px; text-align:center;
  color:var(--accent); font-variant-numeric:tabular-nums;
}

.readout{
  display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:0;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-control);
  overflow:hidden;
}
.readout > div{ background:var(--ink); padding:11px 13px; }
.readout dt{ font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); }
.readout dd{ margin:2px 0 0; font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; }
#multiValue{ color:var(--accent); }
#profitValue.up{ color:var(--accent); }
#profitValue.down{ color:var(--danger); }
.readout dd.tick{ animation:tick .3s var(--ease-back); }
@keyframes tick{ 0%{ transform:translateY(6px) scale(.9); opacity:.4; } 100%{ transform:none; opacity:1; } }

.button{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--body); font-weight:700; font-size:15px;
  padding:15px 24px; border:0; border-radius:var(--r-control); cursor:pointer;
  background:var(--accent); color:var(--ink);
  transition:background .2s, color .2s, transform .2s var(--ease-out), box-shadow .2s;
}
.button svg{ width:18px; height:18px; transition:transform .2s var(--ease-out); }
.button:hover:not(:disabled){ background:var(--paper); transform:translateY(-3px); box-shadow:0 8px 0 -2px color-mix(in srgb, var(--accent) 60%, transparent); }
.button:hover:not(:disabled) svg{ transform:translateX(4px); }
.button:active:not(:disabled){ transform:translateY(0); }
.button:focus-visible{ outline:3px solid var(--paper); outline-offset:2px; }
.button:disabled{ opacity:.32; cursor:not-allowed; }

.button.cashout{ background:var(--gold); }
.button.cashout:not(:disabled){ animation:cash-pulse 1.6s ease-in-out infinite; }
.motion-off .button.cashout{ animation:none; }
@keyframes cash-pulse{
  0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--gold) 55%, transparent); }
  50%    { box-shadow:0 0 0 12px transparent; }
}
.button.cashout b{ font-variant-numeric:tabular-nums; }

.free-note{ margin:0; font-size:11px; line-height:1.7; color:var(--muted); }

/* ---------- board ---------- */
.board-panel{ padding:var(--s-standard); position:relative; overflow:hidden; }

.board-head{
  max-width:600px; margin-inline:auto;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  margin-bottom:16px; font-size:12px; letter-spacing:.04em;
}
.streak-flag{ color:var(--muted); }
.streak-flag.hot{ color:var(--accent); font-weight:700; }
.risk-flag{
  font-weight:700; font-size:10px; text-transform:uppercase; letter-spacing:.16em;
  padding:5px 11px; border-radius:99px; border:1px solid currentColor; color:var(--accent);
  white-space:nowrap; flex:none;
}
.risk-flag[data-risk="spicy"]{ color:var(--gold); }
.risk-flag[data-risk="reckless"]{ color:var(--danger); }

.board{
  display:grid; grid-template-columns:repeat(5,1fr); gap:10px;
  perspective:1100px;
  max-width:600px; margin-inline:auto;
}

.tile{
  position:relative; aspect-ratio:1; border:0; padding:0; cursor:pointer;
  background:transparent; transform-style:preserve-3d;
  transition:transform .5s var(--ease-out);
  border-radius:var(--r-card);
}
.tile:disabled{ cursor:default; }
.tile:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:var(--r-card); }

.tile-face{
  position:absolute; inset:0; display:grid; place-items:center;
  border-radius:var(--r-card); backface-visibility:hidden;
  border:1px solid var(--line);
}
.tile-front{
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--paper) 10%, transparent), transparent 55%),
    url("../img/tex-stone.webp") center/140% no-repeat,
    var(--surface);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.35);
}
/* each tile samples a different patch of the slab so no two look alike */
.tile:nth-child(5n+1) .tile-front{ background-position:0 0, 12% 78%, 0 0; }
.tile:nth-child(5n+2) .tile-front{ background-position:0 0, 64% 20%, 0 0; }
.tile:nth-child(5n+3) .tile-front{ background-position:0 0, 88% 61%, 0 0; }
.tile:nth-child(5n+4) .tile-front{ background-position:0 0, 31% 44%, 0 0; }
.tile:nth-child(5n)   .tile-front{ background-position:0 0, 72% 90%, 0 0; }
.tile-front::after{
  content:""; width:34%; height:34%; opacity:.16; background:var(--paper);
  clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);
  transition:opacity .25s, transform .35s var(--ease-back);
}
.tile-back{ transform:rotateY(180deg); background:var(--ink); }

/* idle shimmer wave before the round starts */
.board.idle .tile-front::after{ animation:shimmer 3.4s ease-in-out calc(var(--i) * .07s) infinite; }
.motion-off .board.idle .tile-front::after{ animation:none; }
@keyframes shimmer{
  0%,100%{ opacity:.10; transform:scale(.9) rotate(0deg); }
  50%    { opacity:.42; transform:scale(1.1) rotate(45deg); }
}

.board.live .tile:not(:disabled):hover{ transform:translateY(-5px) scale(1.03); }
.board.live .tile:not(:disabled):hover .tile-front{ border-color:var(--accent); }
.board.live .tile:not(:disabled):hover .tile-front::after{ opacity:.6; transform:scale(1.25) rotate(45deg); }
.board.live .tile:not(:disabled):active{ transform:translateY(-1px) scale(.98); }

.tile.flipped{ transform:rotateY(180deg); }
.tile.flipped:hover{ transform:rotateY(180deg); }

.tile-icon{ width:58%; height:58%; display:block; object-fit:contain; }

/* gem */
.tile.gem .tile-back{
  border-color:var(--accent);
  background-color:var(--accent);
  background-image:url("../img/tex-geode.webp");
  background-size:190%;
  background-position:center;
  background-blend-mode:luminosity;
}
.tile.gem .tile-back::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(circle at 50% 55%, transparent 22%, color-mix(in srgb, var(--ink) 82%, transparent) 78%);
}
.tile.gem .tile-icon{ color:var(--accent); filter:drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 70%, transparent)); }
.tile.gem.fresh .tile-icon{ animation:gem-in .55s var(--ease-back); }
@keyframes gem-in{
  0%  { transform:scale(0) rotate(-140deg); opacity:0; }
  60% { transform:scale(1.35) rotate(12deg); opacity:1; }
  100%{ transform:scale(1) rotate(0deg); }
}

/* scrogsplosion */
.tile.bomb .tile-back{ border-color:var(--danger); background:color-mix(in srgb, var(--danger) 22%, var(--ink)); }
.tile.bomb .tile-icon{ width:114%; height:114%; }
.tile.bomb.hit .tile-back{ background:var(--danger); }
.tile.bomb.hit .tile-icon{ animation:boom .5s var(--ease-back); }
@keyframes boom{
  0%  { transform:scale(.2); }
  45% { transform:scale(1.6) rotate(14deg); }
  100%{ transform:scale(1); }
}

/* tiles the board reveals once the round is over — must stay readable,
   the whole point is showing the player where the bombs actually were */
/* NB: opacity on .tile would flatten transform-style:preserve-3d and break the
   flip, showing the front face through. Fade the back face instead. */
.tile.ghost .tile-back{ opacity:.68; }
.tile.ghost .tile-back{ background-color:color-mix(in srgb, var(--surface) 60%, var(--ink)); }
.tile.ghost.gem .tile-back{
  /* keep a tinted backdrop — luminosity blending over near-black renders black */
  background-color:color-mix(in srgb, var(--accent) 72%, var(--ink));
  background-image:url("../img/tex-geode.webp");
  background-blend-mode:luminosity;
  border-color:color-mix(in srgb, var(--accent) 40%, transparent);
}
.tile.ghost.gem .tile-back::before{
  background:radial-gradient(circle at 50% 55%, transparent 15%, color-mix(in srgb, var(--ink) 60%, transparent) 85%);
}
.tile.ghost.gem .tile-icon{ filter:none; opacity:.85; }
.tile.ghost.bomb .tile-back{
  background-color:color-mix(in srgb, var(--danger) 30%, var(--ink));
  border-color:color-mix(in srgb, var(--danger) 60%, transparent);
}
.tile.ghost.bomb .tile-icon{ opacity:.95; }

/* leftovers the player never opened after cashing out */
.tile.dimmed .tile-back{ opacity:.45; }

.board-flash{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  border-radius:var(--r-panel);
}
.board-flash.bust{ animation:flash-bust .6s ease-out; }
.board-flash.win{ animation:flash-win .7s ease-out; }
@keyframes flash-bust{ 0%{ opacity:.75; background:var(--danger);} 100%{ opacity:0; } }
@keyframes flash-win{ 0%{ opacity:.5; background:var(--accent);} 100%{ opacity:0; } }

.shake{ animation:shake .5s cubic-bezier(.36,.07,.19,.97); }
.motion-off .shake{ animation:none; }
@keyframes shake{
  10%,90%{ transform:translate(-2px,1px) rotate(-.3deg); }
  20%,80%{ transform:translate(5px,-2px) rotate(.4deg); }
  30%,50%,70%{ transform:translate(-8px,2px) rotate(-.6deg); }
  40%,60%{ transform:translate(8px,-1px) rotate(.6deg); }
}

.board-foot{ margin-top:18px; max-width:600px; margin-inline:auto; }
.history{ display:flex; gap:6px; flex-wrap:wrap; min-height:28px; align-items:center; }
.hist-pill{
  font-size:11px; font-weight:700; padding:5px 10px; border-radius:99px;
  border:1px solid var(--line); font-variant-numeric:tabular-nums;
  animation:hist-in .35s var(--ease-back);
}
.hist-pill.win{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 55%, transparent); }
.hist-pill.loss{ color:var(--danger); border-color:color-mix(in srgb, var(--danger) 55%, transparent); }
@keyframes hist-in{ 0%{ transform:translateX(-14px) scale(.7); opacity:0; } 100%{ transform:none; opacity:1; } }

/* ============================================================
   NAME GATE — you sign in before you dig
   ============================================================ */
.gate{
  position:fixed; inset:0; z-index:80;
  display:grid; place-items:center; padding:24px;
  background:color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter:blur(8px);
  animation:gate-fade .35s ease;
}
.gate[hidden]{ display:none; }
@keyframes gate-fade{ from{ opacity:0; } to{ opacity:1; } }

.gate-card{
  display:flex; align-items:flex-end; gap:var(--s-standard);
  max-width:720px; width:100%;
  animation:gate-rise .5s var(--ease-back);
}
@keyframes gate-rise{
  from{ transform:translateY(26px) scale(.96); opacity:0; }
  to{ transform:none; opacity:1; }
}

.gate-art{
  width:190px; flex:none; align-self:flex-end;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.6));
}
.motion-on .gate-art{ animation:cast-bob 4s ease-in-out infinite; }

.gate-copy{
  flex:1; min-width:0;
  padding:var(--s-standard);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-panel);
  box-shadow:0 18px 44px #0007;
}
.gate-eyebrow{
  margin:0; font-size:10px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent);
}
.gate-copy h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(28px,4vw,42px); line-height:1.15; letter-spacing:-.02em;
  margin:6px 0 0; color:var(--paper);
}
.gate-lede{ margin:8px 0 18px; font-size:13px; color:var(--muted); }
.gate-copy .input-row{ gap:8px; }
.gate-copy input{
  flex:1; min-width:0; font-family:var(--body); font-weight:700; font-size:17px;
  padding:13px 14px; color:var(--paper); background:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-control);
}
.gate-copy input:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.gate-copy .button{ flex:none; }
.gate-note{ margin:14px 0 0; font-size:11px; line-height:1.6; color:var(--muted); }

@media (max-width:700px){
  .gate-card{ flex-direction:column; align-items:center; gap:0; }
  /* the base rule pins him to the end of the row; in a column that reads as right */
  .gate-art{ width:120px; margin-bottom:-10px; align-self:center; }
  .gate-copy{ width:100%; }
  .gate-copy .input-row{ flex-wrap:wrap; }
  .gate-copy .button{ width:100%; justify-content:center; }
}

/* ============================================================
   LEADERBOARD
   ============================================================ */
.leaderboard{
  max-width:1010px; margin-inline:auto;
  padding:var(--s-standard) var(--s-standard) var(--s-generous);
  margin-bottom:var(--s-generous);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  border:1px solid var(--line); border-radius:var(--r-panel);
  backdrop-filter:blur(10px);
}

.lb-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--s-standard); flex-wrap:wrap; margin-bottom:18px;
}
.lb-head h2{
  font-family:var(--display); font-weight:400; font-size:clamp(26px,3vw,36px);
  line-height:1.15; letter-spacing:-.02em; margin:0; color:var(--paper);
  text-shadow:2px 2px 0 color-mix(in srgb, var(--accent) 50%, transparent);
}
.lb-head p{ margin:6px 0 0; font-size:12px; color:var(--muted); }

.lb-claim{
  margin-bottom:18px; padding:14px 16px;
  border:1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius:var(--r-control);
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  animation:claim-in .45s var(--ease-back);
}
.lb-claim[hidden]{ display:none; }
.lb-claim p{ margin:0 0 10px; font-size:13px; font-weight:700; color:var(--accent); }
.lb-claim .input-row{ max-width:420px; }
.lb-claim input{
  flex:1; min-width:0; font-family:var(--body); font-weight:700; font-size:15px;
  padding:11px 12px; color:var(--paper); background:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-control);
}
.lb-claim input:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.lb-claim .button{ padding:11px 18px; font-size:14px; flex:none; }
@keyframes claim-in{ 0%{ transform:translateY(-10px); opacity:0; } 100%{ transform:none; opacity:1; } }

/* most obsessed player — the session-length crown */
.obsessed{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 10px;
  padding:10px 14px; margin:0 0 14px;
  border:1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  border-radius:var(--r-control);
  background:color-mix(in srgb, var(--danger) 14%, var(--ink));
}
.obsessed[hidden]{ display:none; }
.obsessed-star{ width:13px; height:13px; color:var(--danger); align-self:center; flex:none; }
.obsessed-label{
  font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--danger);
}
.obsessed-who{ font-weight:700; color:var(--paper); }
.obsessed-meta{ font-size:12px; font-weight:300; color:var(--muted); }
.obsessed.mine{
  border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  background:color-mix(in srgb, var(--accent) 12%, var(--ink));
}
.obsessed.mine .obsessed-star,
.obsessed.mine .obsessed-label{ color:var(--accent); }

.lb-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-control); overflow:hidden;
}
.lb-list:empty{ display:none; }

.lb-row{
  display:grid; grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center; gap:12px;
  padding:11px 14px; background:var(--ink);
  font-size:13px; line-height:1.4;
}
.lb-rank{
  font-family:var(--display); font-size:16px; color:var(--muted);
  text-align:center; font-variant-numeric:tabular-nums;
}
.lb-row:nth-child(1) .lb-rank,
.lb-row:nth-child(2) .lb-rank,
.lb-row:nth-child(3) .lb-rank{ color:var(--accent); }

.lb-name{
  font-weight:700; color:var(--paper);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lb-meta{ display:block; font-weight:300; font-size:11px; color:var(--muted); }
.lb-multi{
  font-weight:700; font-size:16px; color:var(--accent);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

.lb-row.mine{ background:color-mix(in srgb, var(--accent) 12%, var(--ink)); }
.lb-row.fresh{ animation:lb-pop .7s var(--ease-back); }
@keyframes lb-pop{
  0%  { background:var(--accent); transform:scale(1.02); }
  100%{ transform:none; }
}

.lb-note{ margin:14px 0 0; font-size:11px; color:var(--muted); }

@media (max-width:760px){
  .lb-list{ grid-template-columns:minmax(0,1fr); }
  /* clear the fixed brand badge so it never sits on the last rows */
  .leaderboard{ padding-bottom:84px; }
}

/* ============================================================
   CHARACTER STAGE
   ============================================================ */
.stage{
  position:fixed; left:0; right:0; bottom:0; height:0; z-index:30;
  pointer-events:none;
}

.cast-member{
  position:absolute; left:20px; bottom:0;
  display:flex; align-items:flex-end; gap:14px;
  transform:translateX(-120%) translateY(20px);
  opacity:0;
  transition:transform .7s var(--ease-back), opacity .4s ease;
}
.cast-member.on{ transform:none; opacity:1; }
.cast-member.leaving{ transform:translateX(-120%) translateY(20px); opacity:0; }

.cast-art{
  width:var(--art-w,180px); height:auto; display:block;
  max-width:none;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.55));
  transform-origin:bottom center;
}
.motion-on .cast-member.on .cast-art{ animation:cast-bob 4s ease-in-out infinite; }
@keyframes cast-bob{
  0%,100%{ transform:translateY(0) rotate(-1deg); }
  50%    { transform:translateY(-10px) rotate(1.5deg); }
}
.cast-member.on .cast-art.enter{ animation:cast-land .6s var(--ease-back); }
@keyframes cast-land{
  0%  { transform:translateY(40px) scale(.85) rotate(-9deg); }
  55% { transform:translateY(-10px) scale(1.06) rotate(3deg); }
  100%{ transform:none; }
}

.bubble{
  position:relative; max-width:300px; margin-bottom:34px;
  padding:14px 18px; border-radius:var(--r-card);
  background:var(--paper); color:var(--ink);
  border:2px solid var(--ink);
  box-shadow:5px 5px 0 var(--char-color, var(--accent));
  font-size:13px; line-height:1.55; font-weight:300;
  pointer-events:auto;
}
.bubble strong{ font-weight:700; }
.bubble .who{
  display:block; font-family:var(--display); font-size:15px; line-height:1.1;
  margin-bottom:5px; color:var(--char-color, var(--accent-deep));
  -webkit-text-stroke:.4px var(--ink);
}
.bubble::before{
  content:""; position:absolute; left:-11px; bottom:22px;
  width:0; height:0; border:11px solid transparent;
  border-right-color:var(--ink); border-left:0;
}
.bubble::after{
  content:""; position:absolute; left:-7px; bottom:23px;
  width:0; height:0; border:10px solid transparent;
  border-right-color:var(--paper); border-left:0;
}
.cast-member.on .bubble{ animation:bubble-in .45s var(--ease-back) .18s backwards; }
@keyframes bubble-in{
  0%  { transform:scale(.55) translateX(-20px); opacity:0; }
  100%{ transform:none; opacity:1; }
}
.bubble.taunt{ box-shadow:5px 5px 0 var(--danger); }

.bubble-action{
  display:inline-flex; align-items:center; gap:8px; margin-top:10px;
  font-family:var(--body); font-weight:700; font-size:13px;
  padding:9px 16px; border:2px solid var(--ink); border-radius:var(--r-control);
  background:var(--accent); color:var(--ink); cursor:pointer;
  transition:transform .18s var(--ease-back), background .18s;
}
.bubble-action:hover{ background:var(--gold); transform:translateY(-2px); }
.bubble-action:focus-visible{ outline:3px solid var(--ink); outline-offset:2px; }
.bubble.hype{ box-shadow:5px 5px 0 var(--gold); }

/* ============================================================
   PARTICLES
   ============================================================ */
.burst-layer{ position:fixed; inset:0; pointer-events:none; z-index:35; overflow:hidden; }
.spark{
  position:absolute; width:10px; height:10px; will-change:transform,opacity;
  background:var(--accent);
  clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);
  animation:spark-fly var(--dur,900ms) cubic-bezier(.2,.6,.3,1) forwards;
}
.spark.round{ clip-path:none; border-radius:50%; }
@keyframes spark-fly{
  0%  { transform:translate(0,0) scale(var(--s0,1)) rotate(0deg); opacity:1; }
  100%{ transform:translate(var(--dx),var(--dy)) scale(.15) rotate(var(--rot,320deg)); opacity:0; }
}

.floater{
  position:absolute; font-family:var(--display); font-size:30px; color:var(--accent);
  text-shadow:2px 2px 0 var(--ink); pointer-events:none; white-space:nowrap;
  animation:float-up 1.15s var(--ease-out) forwards;
}
.floater.bad{ color:var(--danger); }
@keyframes float-up{
  0%  { transform:translate(-50%,0) scale(.5); opacity:0; }
  25% { transform:translate(-50%,-22px) scale(1.15); opacity:1; }
  100%{ transform:translate(-50%,-84px) scale(1); opacity:0; }
}

/* ============================================================
   BRAND BADGE — bottom right, links home
   ============================================================ */
.brand-badge{
  position:fixed; right:20px; bottom:20px; z-index:50;
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 16px; border-radius:99px; text-decoration:none;
  font-family:var(--display); font-size:17px; white-space:nowrap;
  color:var(--paper); background:color-mix(in srgb, var(--surface) 92%, transparent);
  border:1px solid var(--line); backdrop-filter:blur(8px);
  box-shadow:0 12px 30px #0005;
  transition:border-color .25s, transform .25s var(--ease-out);
}
.brand-badge:hover{ border-color:var(--accent); transform:translateY(-3px); }
.brand-badge > svg{
  width:22px; height:22px; color:var(--accent);
  transition:rotate .6s var(--ease-out), scale .3s;
}
.brand-badge:is(:hover,:focus-visible) > svg{ rotate:180deg; scale:1.2; }
.brand-badge:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }
.brand-dot{ color:var(--accent); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .wrap{ width:calc(100% - 64px); }
  .game-shell{ grid-template-columns:300px minmax(0,1fr); }
  .cast-art{ width:min(var(--art-w,180px), 13vw); }
}

@media (max-width:900px){
  .game-shell{ grid-template-columns:1fr; }
  /* board first — the controls column is tall enough to push it off-screen */
  .board-panel{ order:-1; }
  .controls{ position:static; }
  .cast-member{ left:12px; }
  .cast-art{ width:min(var(--art-w,180px), 17vw); }
  .bubble{ max-width:min(58vw,280px); margin-bottom:24px; font-size:12px; }
}

@media (max-width:600px){
  .wrap{ width:calc(100% - 40px); }
  .site-header{ padding:var(--s-standard) 0 var(--s-compact); align-items:flex-start; }
  .title-block h1{ font-size:clamp(36px,9.4vw,55px); line-height:1.2; }
  .board{ gap:7px; }
  .board-head{ font-size:11px; }
  .risk-flag{ letter-spacing:.1em; padding:4px 9px; }
  .readout{ grid-template-columns:1fr 1fr; }
  .brand-badge{ right:12px; bottom:12px; font-size:14px; padding:9px 13px; }
  .brand-badge > svg{ width:18px; height:18px; }
  /* keep the cast clear of the controls and of the brand badge */
  .cast-member{ left:8px; }
  .cast-art{ width:min(var(--art-w,180px), 23vw); }
  .bubble{
    max-width:calc(100vw - 23vw - 46px);
    margin-bottom:58px; padding:10px 12px; font-size:11.5px; line-height:1.5;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; }
  .lair-star{ opacity:.4; }
}
.motion-off *,.motion-off *::before,.motion-off *::after{
  animation-play-state:paused !important;
}
.motion-off .tile,.motion-off .cast-member{ transition-duration:.15s !important; }