:root {
  --bg: #050d09;
  --bg2: #0a1711;
  --panel: #0c1a13;
  --line: #1b3326;
  --ink: #e4f5e9;
  --dim: #8fae99;
  --faint: #56715f;
  --leaf: #5dff9b;
  --leaf2: #b6ffcf;
  --gold: #ffd36a;
  --red: #ff6b6b;
  --soil: #1a120b;
  --head: 48px;
  --cabar: 60px;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Space Grotesk', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 var(--sans); -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; padding-bottom: calc(var(--cabar) + env(safe-area-inset-bottom)); }
a { color: var(--leaf); }
button { font: inherit; color: inherit; }

/* header */
#top { position: sticky; top: 0; z-index: 20; height: var(--head); display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px; background: rgba(5, 13, 9, .92); border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); }
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--ink); min-width: 0; }
.mark { font: 700 22px/1 var(--sans); letter-spacing: .04em; color: var(--leaf); text-shadow: 0 0 14px rgba(93, 255, 155, .45); }
.tag { color: var(--dim); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; }
.icon svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon svg path:first-child { fill: var(--ink); stroke: none; }
#mute .off { display: none; }
#mute.off .on { display: none; }
#mute.off .off { display: inline; }

/* stage */
#app { display: block; }
#stage { position: relative; height: calc(100svh - var(--head) - var(--cabar) - env(safe-area-inset-bottom)); min-height: 520px; max-height: 900px; overflow: hidden;
  background: radial-gradient(120% 70% at 50% 38%, #0f2a1c 0%, #07130d 55%, var(--bg) 100%); }
#tree { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#hud { position: absolute; left: 0; right: 0; top: 0; padding: 10px 10px 0; pointer-events: none; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font: 500 12px/1 var(--mono); color: var(--dim); background: rgba(10, 23, 17, .78); border: 1px solid var(--line); border-radius: 999px; padding: 6px 9px; }
.chip b { color: var(--ink); font-weight: 700; }
#spot { margin-top: 8px; display: block; width: fit-content; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 500 13px/1.3 var(--mono); color: var(--leaf2); background: rgba(10, 23, 17, .82); border: 1px solid #275a3c; border-radius: 10px; padding: 7px 10px; }
#spot[hidden] { display: none; }
#spot .dot { display: inline-block; vertical-align: 1px; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 10px var(--leaf); }

#toasts { position: absolute; right: 8px; top: 84px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; max-width: 62%; }
.toast { font: 500 12px/1.2 var(--mono); color: var(--ink); background: rgba(8, 22, 15, .88); border: 1px solid #23503a; border-radius: 8px; padding: 6px 9px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; animation: tin .35s ease-out both; }
.toast i { font-style: normal; color: var(--leaf); }
.toast.gold { border-color: #6b5420; }
.toast.gold i { color: var(--gold); }
.toast.red i { color: var(--red); }
@keyframes tin { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

#banner { position: absolute; left: 50%; top: 61%; transform: translate(-50%, -50%); width: min(92%, 560px); text-align: center; pointer-events: none;
  background: rgba(5, 14, 9, .9); border: 1px solid #2e7a4f; border-radius: 16px; padding: 16px 18px; box-shadow: 0 0 60px rgba(93, 255, 155, .18); }
#banner.gold { border-color: #a57f22; box-shadow: 0 0 60px rgba(255, 211, 106, .2); }
#banner .kicker { font: 700 12px/1 var(--mono); letter-spacing: .14em; color: var(--leaf); text-transform: uppercase; }
#banner.gold .kicker { color: var(--gold); }
#banner .title { font: 700 26px/1.15 var(--sans); margin: 8px 0 6px; overflow-wrap: anywhere; }
#banner .sub { color: var(--dim); font-size: 14px; }

#soil-label { position: absolute; left: 10px; bottom: 10px; pointer-events: none; font: 700 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #8a6a45; }
#preview-tag { position: absolute; right: 10px; bottom: 10px; font: 500 11px/1 var(--mono); color: var(--gold); background: rgba(26, 18, 11, .85); border: 1px solid #5a4420; border-radius: 6px; padding: 6px 8px; }

/* side panels */
#side { padding: 12px 12px 24px; display: grid; gap: 12px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.panel h2 { margin: 0 0 6px; font: 700 16px/1.2 var(--sans); display: flex; align-items: baseline; gap: 8px; }
.panel h2 small { font: 500 11px/1 var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
.hint { margin: 0 0 8px; color: var(--dim); font-size: 13px; }
#live-dot.on { color: var(--leaf); }
#live-dot.off { color: var(--gold); }

#league { list-style: none; margin: 0; padding: 0; }
#league li { display: grid; grid-template-columns: 22px 34px 1fr auto; align-items: center; gap: 8px; min-height: 48px; border-top: 1px solid var(--line); padding: 4px 0; }
#league li:first-child { border-top: 0; }
#league .rk { font: 700 13px/1 var(--mono); color: var(--faint); text-align: right; }
#league img, #league .ph { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #10261a; border: 1px solid #23503a; }
#league .ph { display: grid; place-items: center; font: 700 12px/1 var(--sans); color: var(--leaf); }
#league .nm { min-width: 0; }
#league .nm b { display: block; font: 700 14px/1.2 var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#league .nm span { font: 500 12px/1.2 var(--mono); color: var(--dim); }
#league .fl { font: 700 14px/1 var(--mono); color: var(--leaf); text-align: right; }
#league .fl small { display: block; font: 500 11px/1.3 var(--mono); color: var(--faint); }
#league li.home .nm b { color: var(--gold); }

#feed { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; }
#feed li { font: 500 13px/1.35 var(--mono); padding: 7px 0; border-top: 1px solid var(--line); color: var(--dim); overflow-wrap: anywhere; }
#feed li:first-child { border-top: 0; }
#feed li b { color: var(--ink); }
#feed li .g { color: var(--leaf); }
#feed li .y { color: var(--gold); }
#feed li .r { color: var(--red); }
#feed li time { color: var(--faint); margin-right: 6px; }

#how ul { margin: 6px 0 8px; padding-left: 18px; color: var(--dim); font-size: 14px; }
#how li { margin: 6px 0; }
#how b { color: var(--ink); }
.fine { margin: 0; color: var(--faint); font-size: 12px; }

/* CA bar */
#cabar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; height: calc(var(--cabar) + env(safe-area-inset-bottom)); padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 8px; background: rgba(6, 15, 10, .96); border-top: 1px solid var(--line); }
.ca { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; background: #08140e; }
.ca .lbl { font: 700 11px/1 var(--mono); color: var(--faint); }
.ca code { font: 500 13px/1 var(--mono); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn { height: 44px; min-width: 44px; padding: 0 14px; border-radius: 10px; border: 0; background: var(--leaf); color: #04140a; font: 700 14px/44px var(--sans);
  text-decoration: none; text-align: center; cursor: pointer; white-space: nowrap; }
.btn.ghost { background: #12291c; color: var(--ink); border: 1px solid #23503a; line-height: 42px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

@media (max-width: 420px) {
  .chip { font-size: 11px; padding: 5px 7px; }
  .chips { gap: 4px; flex-wrap: nowrap; }
  #spot { font-size: 12px; margin-top: 6px; }
  .toast { font-size: 11px; }
}

/* desktop */
@media (min-width: 900px) {
  #app { display: grid; grid-template-columns: 1fr 380px; }
  #stage { height: calc(100vh - var(--head) - var(--cabar)); max-height: none; }
  #side { height: calc(100vh - var(--head) - var(--cabar)); overflow-y: auto; border-left: 1px solid var(--line); }
  #feed { max-height: none; }
  #banner .title { font-size: 34px; }
  .chip { font-size: 13px; }
  #toasts { top: 96px; max-width: 40%; }
}

/* livestream: the show plus the league and feed, CA always on screen */
body.stream { padding-bottom: 0; }
body.stream #top, body.stream #how { display: none; }
body.stream #app { display: grid; grid-template-columns: 1fr 360px; }
body.stream #stage { height: calc(100vh - var(--cabar)); max-height: none; }
body.stream #side { height: calc(100vh - var(--cabar)); overflow: hidden; border-left: 1px solid var(--line); align-content: start; }
body.stream #feed { max-height: none; }
@media (max-width: 899px) { body.stream #app { display: block; } body.stream #side { display: none; } }

/* OG card: 1200x630 capture of the live tree with the name on it */
body.og { padding-bottom: 0; }
body.og #top, body.og #side, body.og #cabar, body.og #hud, body.og #toasts, body.og #banner, body.og #soil-label { display: none !important; }
body.og #app { display: block; }
body.og #stage { height: 100vh; max-height: none; min-height: 0; }
body.og #preview-tag { display: none; }
#ogtitle { position: absolute; left: 44px; top: 40px; pointer-events: none; }
#ogtitle .big { font: 700 120px/0.9 var(--sans); color: var(--leaf); letter-spacing: .02em; text-shadow: 0 0 40px rgba(93, 255, 155, .45); }
#ogtitle .line { margin-top: 14px; font: 700 30px/1.2 var(--sans); color: var(--ink); max-width: 330px; }
#ogtitle .url { margin-top: 14px; font: 700 20px/1 var(--mono); color: var(--gold); }
body.stream #cabar .btn { display: none; }
body.stream .ca code { font-size: 18px; }

@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }