:root {
  --bg: #0b0d1f;
  --bg2: #12142c;
  --card: rgba(22, 24, 52, 0.72);
  --card-border: rgba(140, 130, 255, 0.18);
  --text: #eceaf7;
  --dim: #9a97b8;
  --accent: #b39cff;
  --accent2: #ffb454;
  --fire: #ff7a3d;
  --green: #57e3a1;
  --red: #ff5f7a;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 16px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--sans);
  color: var(--text);
  background: radial-gradient(1200px 700px at 20% -10%, #2a1f5c 0%, transparent 60%),
              radial-gradient(900px 600px at 100% 100%, #3a1d3a 0%, transparent 55%),
              linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  overflow-x: hidden;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: var(--mono); }
.dim { color: var(--dim); }
.small { font-size: 12px; }
.hidden { display: none !important; }

/* starfield */
.sky { position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .5;
  background-image:
    radial-gradient(1px 1px at 12% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 71%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 76% 44%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 82%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 90%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 5% 60%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 62%, #fff 50%, transparent 51%);
}

/* ---------- header ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; }
.brand-mark { font-size: 22px; }
.top-center { display: flex; align-items: center; gap: 14px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.countdown b { color: var(--accent2); font-size: 16px; }
.countdown.tonight b { color: var(--fire); }
.sep { opacity: .4; }
.top-right { display: flex; gap: 8px; }

/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 18px; padding: 0 24px 24px; align-items: start; }
.layout.theater { grid-template-columns: minmax(0, 1fr); }
.layout.theater .sidebar { display: none; }
.layout.no-sidebar { grid-template-columns: minmax(0, 1fr); }
.layout.no-sidebar .sidebar { display: none; }
.stage { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sidebar { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.card {
  background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius);
  backdrop-filter: blur(10px); padding: 14px 16px;
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.card-head.as-button { width: 100%; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; text-align: left; margin-bottom: 0; }
.card-head.as-button[aria-expanded="true"] { margin-bottom: 10px; }
.card-head.as-button .chev { transition: transform .2s; color: var(--dim); }
.card-head.as-button[aria-expanded="false"] .chev { transform: rotate(-90deg); }
.head-actions { display: flex; align-items: center; gap: 8px; }
.label { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #cfcbea; display: flex; align-items: center; gap: 6px; }
.label.small { font-size: 11px; margin-bottom: 4px; }
.label a { color: inherit; }
.pill { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--card-border); color: var(--dim); }
.pill.live { color: var(--green); border-color: rgba(87,227,161,.4); }
.pill.live::before { content: "● "; }
.pill.err { color: var(--red); border-color: rgba(255,95,122,.4); }
.pill.link { color: var(--accent); }
.pill:empty { display: none; }

/* ---------- buttons ---------- */
.btn {
  font: inherit; font-weight: 600; font-size: 13px; color: var(--text);
  background: rgba(140,130,255,.14); border: 1px solid var(--card-border); border-radius: 10px;
  padding: 8px 12px; cursor: pointer; transition: background .15s, transform .05s;
}
.btn:hover { background: rgba(140,130,255,.26); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; }
.btn.accent { background: linear-gradient(135deg, #7a5cff, #b39cff); color: #0b0d1f; border-color: transparent; }
.btn.accent:hover { filter: brightness(1.1); }
.btn.big { font-size: 18px; padding: 14px 24px; border-radius: 14px; }
.btn.small { padding: 6px 9px; font-size: 12px; }
.btn.wide { display: block; text-align: center; }
.btn.round { width: 48px; height: 48px; border-radius: 50%; font-size: 18px; padding: 0; flex: none; }
.btn.on { border-color: var(--green); }
.btn:disabled { opacity: .5; cursor: default; }
.chip { font: inherit; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); background: transparent; border: 1px solid var(--card-border); border-radius: 999px; padding: 3px 9px; cursor: pointer; }
.chip:hover, .chip.active { color: var(--text); border-color: var(--accent); }
.check { font-size: 12px; color: var(--dim); display: inline-flex; gap: 4px; align-items: center; }

/* ---------- webcast ---------- */
.webcast-card { padding-bottom: 10px; }
.video-wrap { border-radius: 12px; overflow: hidden; background: #000; }
.video-box { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.video-box iframe, .video-box #yt { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-box:fullscreen { aspect-ratio: auto; }
.shield { position: absolute; inset: 0; z-index: 2; cursor: default; background: transparent; }
.freeze { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; background: #000; object-fit: contain; }
.freeze-badge { position: absolute; top: 10px; left: 10px; z-index: 3; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(14,14,36,.75); border: 1px solid var(--card-border); border-radius: 999px; padding: 4px 10px; pointer-events: none; }
.start-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: radial-gradient(ellipse at center, rgba(20,18,50,.55), rgba(5,5,15,.85)); z-index: 3; text-align: center; padding: 20px;
}
.start-overlay p { max-width: 420px; margin: 0; }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 4; transition: opacity .35s; }
.flash.on { opacity: .85; transition: none; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.toolbar-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.shot-note { font-size: 12px; margin-top: 6px; min-height: 16px; }
.webcast-card #webcast-title { text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 12px; }

/* ---------- info strip ---------- */
.info-summary { flex: 1; text-align: left; margin-left: 12px; font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info-body { display: none; grid-template-columns: 1.3fr 1fr 1fr; gap: 20px; }
.info-card.open .info-body { display: grid; }
.info-col h3 { margin: 4px 0 8px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.notice-body p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.wx { border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; background: rgba(255,180,84,.08); border: 1px solid rgba(255,180,84,.18); font-size: 13px; line-height: 1.45; }
.wx.night { background: rgba(140,130,255,.1); border-color: rgba(140,130,255,.2); }
.wx b { font-size: 20px; font-family: var(--mono); }
.wx .dim { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2px; }
.tweet { padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); margin-bottom: 6px; font-size: 13px; }
.tweet .dim { font-family: var(--mono); font-size: 11px; }

/* ---------- BMIR ---------- */
.bmir-row { display: flex; align-items: center; gap: 14px; }
.bmir-np { min-width: 0; }
.bmir-now { font-size: 22px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; }

/* ---------- mixer ---------- */
.presets { display: flex; gap: 6px; }
.fader { display: grid; grid-template-columns: 34px 62px 1fr 34px; align-items: center; gap: 8px; margin: 8px 0; }
.fader-name { font-size: 13px; font-weight: 600; }
.fader-val { text-align: right; font-size: 12px; color: var(--dim); }
.mute { font: inherit; background: transparent; border: 1px solid var(--card-border); border-radius: 8px; height: 30px; cursor: pointer; }
.mute.muted { background: rgba(255,95,122,.2); border-color: var(--red); text-decoration: line-through; }
.xfade { display: grid; grid-template-columns: 50px 1fr 62px; align-items: center; gap: 8px; margin-top: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.xf-r { text-align: right; }

.range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: rgba(255,255,255,.12); outline: none; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 2px solid #0b0d1f; cursor: pointer; box-shadow: 0 0 0 2px rgba(179,156,255,.35); }
.range.bmir::-webkit-slider-thumb { background: var(--accent2); box-shadow: 0 0 0 2px rgba(255,180,84,.35); }
.range.xf { background: linear-gradient(90deg, rgba(255,180,84,.5), rgba(179,156,255,.5)); }
.range.xf::-webkit-slider-thumb { background: #fff; }
.range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 2px solid #0b0d1f; cursor: pointer; }
.range.bmir::-moz-range-thumb { background: var(--accent2); }

/* ---------- slack ---------- */
.slack-card { display: flex; flex-direction: column; }
.slack-card #slack-status.live { color: var(--green); }
.slack-body { display: block; }
.slack-card.collapsed .slack-body { display: none; }
.slack-messages { max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; scroll-behavior: smooth; }
.msg { font-size: 13px; line-height: 1.4; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.04); }
.msg.new { animation: pop .4s ease; border-color: rgba(87,227,161,.45); }
@keyframes pop { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
.msg-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.msg-name { font-weight: 700; color: var(--accent2); }
.msg-time { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.msg-text { word-break: break-word; white-space: pre-wrap; }
.msg-text code { font-family: var(--mono); font-size: 12px; background: rgba(255,255,255,.08); padding: 1px 4px; border-radius: 4px; }
.msg-text .mention { color: var(--accent); font-weight: 600; }
.msg-meta { margin-top: 4px; display: flex; gap: 8px; font-size: 11px; color: var(--dim); }
.msg-file { color: var(--dim); font-style: italic; }
.slack-setup { font-size: 13px; line-height: 1.5; }
.slack-setup code { font-family: var(--mono); background: rgba(255,255,255,.08); padding: 1px 5px; border-radius: 4px; }
.slack-empty { color: var(--dim); font-size: 13px; padding: 10px; text-align: center; }

/* ---------- instagram ---------- */
.ig-body { display: none; }
.ig-card.open .ig-body { display: block; }
#ig-frame { width: 100%; height: 520px; border: 0; border-radius: 10px; background: #fff; }

/* ---------- support ---------- */
.support-card p { margin: 6px 0 10px; font-size: 13px; color: var(--dim); }
.support-links { display: flex; gap: 12px; margin-top: 10px; font-size: 12px; flex-wrap: wrap; }

/* ---------- mini mixer (theater) ---------- */
.mini-mixer {
  position: fixed; right: 20px; bottom: 20px; z-index: 20;
  display: grid; grid-template-columns: auto 120px auto 120px auto; align-items: center; gap: 8px;
  background: rgba(14,14,36,.9); border: 1px solid var(--card-border); border-radius: 999px; padding: 8px 14px; backdrop-filter: blur(10px);
}

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: rgba(14,14,36,.95); border: 1px solid var(--card-border); border-radius: 12px; padding: 10px 16px; font-size: 13px; z-index: 30; max-width: 80vw; }
.toast.err { border-color: var(--red); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .info-body { grid-template-columns: 1fr; }
  .top-center { display: none; }
}

/* ---------- phones ---------- */
@media (max-width: 700px) {
  .top { flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
  .brand { font-size: 15px; }
  .brand-mark { font-size: 18px; }
  .top-right { margin-left: auto; gap: 6px; }
  .top-right .btn { padding: 6px 8px; font-size: 12px; }
  #btn-theater, #btn-sidebar { display: none; }  /* nothing to hide on a one-column phone */
  .top-center { display: flex; width: 100%; order: 3; justify-content: space-between; font-size: 11px; letter-spacing: .08em; }
  .top-center .sep, #clock { display: none; }     /* phones have a clock */
  .layout { padding: 0 10px 12px; gap: 10px; }
  /* Flatten the two columns so cards can be re-ordered: what matters most first. */
  .stage, .sidebar { display: contents; }
  .webcast-card { order: 1; } .slack-card { order: 2; } .temple-card { order: 3; } .bmir-card { order: 4; } .mixer-card { order: 5; }
  .info-card { order: 6; } .map-card { order: 7; } .zoom-card { order: 8; } .ig-card { order: 9; } .support-card { order: 10; }
  .shots-card { order: 11; } .react-card { order: 12; }
  .card { padding: 12px; }
  .video-wrap { margin: 0 -12px; border-radius: 0; }      /* edge to edge video */
  .toolbar .btn { padding: 7px 9px; font-size: 12px; }
  #btn-shot { flex: 1; }
  .react-bar .label { display: none; }
  .react-buttons { flex-wrap: wrap; }
  .react-btn { font-size: 22px; padding: 4px 6px; }
  .react-tally { display: none; }
  .bmir-now { font-size: 18px; }
  .slack-messages { max-height: 50vh; }
  .card-head .label { font-size: 11px; }
  .floater { font-size: 28px; }
  .mini-mixer { display: none !important; }
  .toast { max-width: 92vw; font-size: 12px; }
}

/* ---------- screenshot gallery ---------- */
.shots-card.collapsed .shots-body { display: none; }
.shots-card .head-actions .chip { pointer-events: auto; }
.shots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.shots-grid:empty + #shots-empty { display: block; }
.shots-grid:not(:empty) + #shots-empty { display: none; }
.shot { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--card-border); background: #000; }
.shot img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; cursor: zoom-in; }
.shot-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; background: rgba(14,14,36,.9); font-family: var(--mono); font-size: 10.5px; color: var(--dim); }
.shot-bar .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot-bar .acts { display: flex; gap: 4px; flex: none; }
.shot-bar button { font: inherit; font-size: 11px; color: var(--text); background: rgba(255,255,255,.08); border: 1px solid var(--card-border); border-radius: 6px; padding: 2px 7px; cursor: pointer; }
.shot-bar button:hover { background: rgba(255,255,255,.16); }
.shot-bar button.del:hover { background: rgba(255,95,122,.3); border-color: var(--red); }
.shot.new { animation: pop .4s ease; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 40; display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.lightbox img { max-width: 96vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }

/* ---------- zoom ---------- */
.zoom-card.collapsed .zoom-body { display: none; }
.zoom-meta { margin-bottom: 8px; }
.zoom-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.zoom-actions .btn { text-decoration: none; }
.zoom-note { margin: 10px 0 0; line-height: 1.45; }

/* ---------- FX: flames (BMIR) ---------- */
.bmir-card { position: relative; overflow: hidden; --fx: 0; }
.bmir-card > *:not(.flames) { position: relative; z-index: 1; }
.flames { position: absolute; left: 0; right: 0; bottom: -8px; height: 78px; pointer-events: none; opacity: var(--fx); transition: opacity .25s;
  mix-blend-mode: screen; filter: blur(.5px); }
.flames i { position: absolute; bottom: 0; width: 56px; height: calc(28px + 50px * var(--fx)); border-radius: 50% 50% 20% 20% / 70% 70% 30% 30%;
  background: radial-gradient(ellipse at 50% 100%, #fff3b0 0%, #ffb454 22%, #ff6a2a 48%, rgba(255,60,20,.55) 70%, transparent 82%);
  transform-origin: 50% 100%; animation: flicker 1.1s ease-in-out infinite alternate; transition: height .15s; }
.flames i:nth-child(1) { left: 2%;  animation-duration: .9s;  animation-delay: -.2s; }
.flames i:nth-child(2) { left: 14%; animation-duration: 1.3s; animation-delay: -.7s; height: calc(22px + 58px * var(--fx)); }
.flames i:nth-child(3) { left: 27%; animation-duration: 1s;   animation-delay: -.4s; }
.flames i:nth-child(4) { left: 40%; animation-duration: 1.2s; animation-delay: -.9s; height: calc(26px + 64px * var(--fx)); }
.flames i:nth-child(5) { left: 53%; animation-duration: .95s; animation-delay: -.1s; }
.flames i:nth-child(6) { left: 66%; animation-duration: 1.25s; animation-delay: -.6s; height: calc(24px + 58px * var(--fx)); }
.flames i:nth-child(7) { left: 79%; animation-duration: 1.05s; animation-delay: -.3s; }
.flames i:nth-child(8) { left: 90%; animation-duration: 1.15s; animation-delay: -.8s; }
@keyframes flicker {
  0%   { transform: scaleX(1) scaleY(1) skewX(0deg); opacity: .85; }
  50%  { transform: scaleX(.9) scaleY(1.12) skewX(3deg); opacity: 1; }
  100% { transform: scaleX(1.08) scaleY(.94) skewX(-4deg); opacity: .8; }
}
.bmir-card.fx-on { border-color: rgba(255,180,84, calc(.18 + .6 * var(--fx))); box-shadow: 0 0 calc(40px * var(--fx)) rgba(255,122,61, calc(.45 * var(--fx))); }
.mini-mixer .range.bmir { box-shadow: 0 0 calc(14px * var(--fx-b, 0)) rgba(255,180,84, var(--fx-b, 0)); }
.mini-mixer .range.webcast { box-shadow: 0 0 calc(14px * var(--fx-w, 0)) rgba(179,156,255, var(--fx-w, 0)); }

/* ---------- FX: electric glow (webcast) ---------- */
.webcast-card { position: relative; --fx: 0; }
.webcast-card.fx-on { border-color: rgba(179,156,255, calc(.18 + .7 * var(--fx))); box-shadow: 0 0 calc(50px * var(--fx)) rgba(122,92,255, calc(.55 * var(--fx))), inset 0 0 calc(30px * var(--fx)) rgba(122,92,255, calc(.15 * var(--fx))); }
.webcast-card.fx-on::before { content: ""; position: absolute; inset: -1px; border-radius: var(--radius); padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--fx-angle, 0deg), transparent 0 20%, rgba(214,200,255, var(--fx)) 25%, transparent 30%, transparent 60%, rgba(179,156,255, calc(.8 * var(--fx))) 68%, transparent 74%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 3.5s linear infinite; }
@keyframes spin { to { --fx-angle: 360deg; } }
@property --fx-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.webcast-card.fx-on.bolt::before { filter: brightness(1.8); }

/* ---------- reactions ---------- */
.react-bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--card-border); flex-wrap: wrap; }
.react-bar .label { margin: 0; }
.react-buttons { display: flex; gap: 4px; }
.react-btn { font-size: 20px; line-height: 1; background: rgba(255,255,255,.05); border: 1px solid transparent; border-radius: 10px; padding: 5px 8px; cursor: pointer; transition: transform .1s, background .15s; }
.react-btn:hover { background: rgba(255,255,255,.14); border-color: var(--card-border); transform: scale(1.15); }
.react-btn:active { transform: scale(.9); }
.react-tally { font-size: 11px; color: var(--dim); margin-left: auto; letter-spacing: .04em; }
body.no-react .react-bar, body.no-react .floaters { display: none !important; }
.floaters { position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; overflow: hidden; z-index: 5; border-radius: var(--radius); }
.floater { position: absolute; bottom: 90px; font-size: 34px; line-height: 1; animation: floatUp 2.8s ease-out forwards; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); will-change: transform, opacity; }
.floater small { display: block; font-size: 10px; font-family: var(--mono); color: #fff; text-align: center; opacity: .8; }
@keyframes floatUp {
  0%   { transform: translate(0, 0) scale(.6); opacity: 0; }
  10%  { transform: translate(var(--dx1), -40px) scale(1.15); opacity: 1; }
  60%  { transform: translate(var(--dx2), -260px) scale(1); opacity: .95; }
  100% { transform: translate(var(--dx1), -440px) scale(.8); opacity: 0; }
}
.react-card.collapsed .react-body { display: none; }
.react-log { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.react-row { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; font-size: 13px; padding: 4px 8px; border-radius: 8px; background: rgba(255,255,255,.04); }
.react-row.new { animation: pop .4s ease; }
.react-row .e { font-size: 18px; text-align: center; }
.react-row .n { color: var(--accent2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.react-row .t { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.react-hint { margin: 8px 0 0; }

/* ---------- map ---------- */
.map-body { display: none; }
.map-card.open .map-body { display: block; }
#map-frame { width: 100%; height: 460px; border: 0; border-radius: 10px; background: #111; }

/* ---------- eco / cheaper FX ---------- */
body.eco .card { backdrop-filter: none; }
body.eco .sky { display: none; }
body.eco .mini-mixer { backdrop-filter: none; }
.bmir-card.fx-on, .webcast-card.fx-on { backdrop-filter: none; } /* glass blur + animated glow is the expensive combo */

/* ---------- mixer accordion ---------- */
.mixer-card.collapsed .mixer-body { display: none; }
.mixer-card .presets { display: flex; align-items: center; gap: 6px; }
.mixer-card.collapsed .presets .chip { display: none; }

/* ---------- slack images + composer ---------- */
.slack-img { display: block; max-width: 100%; max-height: 260px; border-radius: 8px; margin-top: 6px; cursor: zoom-in; border: 1px solid var(--card-border); }
.msg-reply { font: inherit; font-size: 11px; color: var(--dim); background: transparent; border: 0; cursor: pointer; padding: 0 4px; }
.msg-reply:hover { color: var(--accent); }
.slack-compose { display: flex; gap: 6px; margin-top: 8px; }
.slack-compose input { flex: 1; min-width: 0; font: inherit; font-size: 13px; color: var(--text); background: rgba(255,255,255,.06); border: 1px solid var(--card-border); border-radius: 10px; padding: 8px 10px; }
.slack-compose input:focus { outline: none; border-color: var(--accent); }
.slack-reply { font-size: 12px; color: var(--dim); margin-top: 8px; display: flex; align-items: center; gap: 6px; }

/* ---------- temple ---------- */
.temple-card { position: relative; overflow: hidden; }
.temple-card.collapsed .temple-body { display: none; }
.temple-intro { margin: 0 0 8px; line-height: 1.45; }
.temple-form { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.temple-form textarea { font: inherit; font-size: 13px; color: var(--text); background: rgba(255,255,255,.06); border: 1px solid var(--card-border); border-radius: 10px; padding: 8px 10px; resize: vertical; }
.temple-form textarea:focus { outline: none; border-color: var(--accent2); }
.temple-form button { align-self: flex-end; }
.temple-list { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; }
.temple-msg { position: relative; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.05); font-size: 13px; line-height: 1.45; overflow: hidden; }
.temple-msg .who { font-family: var(--mono); font-size: 11px; color: var(--accent2); margin-bottom: 2px; }
.temple-msg.new { animation: pop .4s ease; }
.temple-msg.burning { animation: burnaway 7s ease-in forwards; pointer-events: none; }
.temple-msg.burning::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -20px; height: 140%;
  background: radial-gradient(ellipse at 50% 100%, #fff3b0 0%, #ffb454 18%, #ff6a2a 38%, rgba(255,60,20,.5) 58%, transparent 72%);
  mix-blend-mode: screen; animation: burnflame 7s ease-in forwards; }
@keyframes burnflame {
  0%   { transform: translateY(70%) scaleX(.6); opacity: 0; }
  20%  { transform: translateY(20%) scaleX(1); opacity: 1; }
  70%  { transform: translateY(-10%) scaleX(1.1); opacity: .9; }
  100% { transform: translateY(-60%) scaleX(1.3); opacity: 0; }
}
@keyframes burnaway {
  0%   { color: var(--text); filter: none; }
  25%  { color: #ffd28a; border-color: rgba(255,140,60,.6); }
  55%  { color: #ff7a3d; filter: contrast(1.2) brightness(1.1); transform: scale(1.01); }
  80%  { color: #4a2a1a; opacity: .5; filter: blur(1px); transform: scale(.98) translateY(-6px); }
  100% { color: transparent; opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; border-width: 0; transform: translateY(-20px); filter: blur(3px); }
}
.temple-after { text-align: center; padding: 18px 0 8px; font-size: 15px; color: var(--accent2); }
.temple-admin { margin-top: 8px; text-align: right; }
.temple-status.live { color: var(--fire); border-color: rgba(255,122,61,.5); }
.embers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ember { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #ffb454; box-shadow: 0 0 6px 2px rgba(255,122,61,.7); animation: emberUp 2.6s ease-out forwards; }
@keyframes emberUp {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), -220px) scale(.3); opacity: 0; }
}

/* ======================= TEMPLE MODE ======================= */
body.temple {
  --accent: #e2c17a;      /* candle gold replaces electric purple */
  --accent2: #f0d6a0;
  --card: rgba(18, 16, 40, 0.78);
  --card-border: rgba(226, 193, 122, 0.22);
  --dim: #a8a1b8;
  background: radial-gradient(1100px 700px at 30% -10%, #241b4a 0%, transparent 60%),
              radial-gradient(900px 600px at 100% 100%, #2c1a24 0%, transparent 55%),
              linear-gradient(180deg, #07081a 0%, #0e0d24 100%);
  transition: background 2s;
}
body.temple .btn.accent { background: linear-gradient(135deg, #b08d45, #e2c17a); }
body.temple .pill.live { color: #e2c17a; border-color: rgba(226,193,122,.4); }
body.temple .countdown b { color: #e2c17a; }
body.temple .label { color: #d9cfa8; }
body.temple .msg-name, body.temple .react-row .n, body.temple .temple-msg .who { color: #e2c17a; }
body.temple .flames, body.temple .webcast-card::before { display: none !important; }
body.temple .bmir-card, body.temple .webcast-card { box-shadow: none !important; }
/* drifting lantern-lights instead of the starfield */
body.temple .sky { opacity: 1; background: none; }
body.temple .sky::before, body.temple .sky::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 200%;
  background-image:
    radial-gradient(3px 3px at 8% 90%, rgba(255,214,140,.9) 40%, transparent 60%),
    radial-gradient(2px 2px at 22% 70%, rgba(255,214,140,.7) 40%, transparent 60%),
    radial-gradient(3px 3px at 37% 95%, rgba(255,190,110,.8) 40%, transparent 60%),
    radial-gradient(2px 2px at 53% 60%, rgba(255,214,140,.6) 40%, transparent 60%),
    radial-gradient(3px 3px at 68% 85%, rgba(255,214,140,.85) 40%, transparent 60%),
    radial-gradient(2px 2px at 84% 75%, rgba(255,190,110,.7) 40%, transparent 60%),
    radial-gradient(2px 2px at 94% 92%, rgba(255,214,140,.8) 40%, transparent 60%);
  background-size: 100% 50%; animation: lanterns 90s linear infinite; filter: blur(.3px);
}
body.temple .sky::after { animation-duration: 140s; animation-delay: -40s; opacity: .6; transform: scaleX(-1); }
@keyframes lanterns { from { transform: translateY(0); } to { transform: translateY(-50%); } }
body.eco.temple .sky { display: none; }

/* fold the quiet cards behind one line */
body.temple .mixer-card, body.temple .map-card, body.temple .zoom-card, body.temple .ig-card,
body.temple .support-card, body.temple .react-card, body.temple .shots-card, body.temple .info-card { display: none; }
body.temple.temple-expanded .mixer-card, body.temple.temple-expanded .map-card, body.temple.temple-expanded .zoom-card, body.temple.temple-expanded .ig-card,
body.temple.temple-expanded .support-card, body.temple.temple-expanded .react-card, body.temple.temple-expanded .shots-card, body.temple.temple-expanded .info-card { display: block; }
.temple-more { display: none; font: inherit; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); background: transparent; border: 1px dashed var(--card-border); border-radius: 12px; padding: 8px; cursor: pointer; }
body.temple .temple-more { display: block; order: 50; }
/* unfolded cards open BELOW the "more" line, not above it */
body.temple.temple-expanded .mixer-card, body.temple.temple-expanded .map-card, body.temple.temple-expanded .zoom-card, body.temple.temple-expanded .ig-card,
body.temple.temple-expanded .support-card, body.temple.temple-expanded .react-card, body.temple.temple-expanded .shots-card, body.temple.temple-expanded .info-card { order: 60; }
/* what matters first: temple, slack, radio */
body.temple .temple-card { order: -3; } body.temple .slack-card { order: -2; } body.temple .bmir-card { order: -1; }
.sidebar { position: relative; }
.sidebar-embers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }

/* temple card in temple mode */
body.temple .temple-card { border-color: rgba(226,193,122,.35); box-shadow: 0 0 40px rgba(226,193,122,.08), inset 0 0 40px rgba(226,193,122,.04); }
body.temple .temple-list { display: none; }
body.temple.temple-wall .temple-list { display: flex; }
body.temple .temple-reader { display: flex; }
body.temple.temple-wall .temple-reader { display: none; }
.temple-reader { display: none; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 190px; padding: 12px 8px 6px; cursor: pointer; gap: 8px; }
.reader-ded { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); min-height: 14px; }
.reader-text { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-size: 24px; line-height: 1.35; font-weight: 500; color: #f4efe2; max-width: 34ch; white-space: pre-wrap; }
.reader-who { font-size: 12px; color: var(--dim); }
.reader-nav { display: flex; gap: 6px; margin-top: 6px; }
.temple-reader .fade { opacity: 0; transition: opacity .9s; }
.temple-reader .fade.show { opacity: 1; }
body.temple .temple-form input { font: inherit; font-size: 13px; color: var(--text); background: rgba(255,255,255,.06); border: 1px solid var(--card-border); border-radius: 10px; padding: 8px 10px; }
.temple-form input { font: inherit; font-size: 13px; color: var(--text); background: rgba(255,255,255,.06); border: 1px solid var(--card-border); border-radius: 10px; padding: 8px 10px; }
.temple-form input:focus, .temple-form textarea:focus { outline: none; border-color: var(--accent); }
.temple-msg .ded { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
body.temple .temple-msg { font-family: "Cormorant Garamond", Georgia, serif; font-size: 16px; }

/* the burn becomes a release */
body.temple .temple-msg.burning { animation: release 8s ease-in-out forwards; }
body.temple .temple-msg.burning::after { animation: releaseglow 8s ease-in-out forwards; background: radial-gradient(ellipse at 50% 100%, #fff6d6 0%, #f0d6a0 25%, rgba(226,193,122,.5) 55%, transparent 75%); }
@keyframes releaseglow { 0% { opacity: 0; transform: translateY(60%); } 30% { opacity: .9; transform: translateY(10%); } 100% { opacity: 0; transform: translateY(-80%); } }
@keyframes release {
  0%   { color: #f4efe2; }
  30%  { color: #fff6d6; text-shadow: 0 0 18px rgba(255,230,170,.9); border-color: rgba(226,193,122,.6); }
  70%  { opacity: .6; transform: translateY(-16px); filter: blur(.5px); text-shadow: 0 0 30px rgba(255,230,170,.6); }
  100% { opacity: 0; transform: translateY(-50px); filter: blur(3px); max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; border-width: 0; }
}
body.temple .ember { background: #f0d6a0; box-shadow: 0 0 8px 2px rgba(240,214,160,.6); animation-duration: 4s; }
body.temple .temple-after { font-family: "Cormorant Garamond", Georgia, serif; font-size: 22px; padding: 26px 0 12px; }

/* offerings: slow lantern drift instead of popping */
body.temple .floater { font-size: 30px; animation: lanternUp 8s ease-out forwards; }
body.temple .floater small { color: #f0d6a0; }
@keyframes lanternUp {
  0%   { transform: translate(0, 0) scale(.7); opacity: 0; }
  12%  { transform: translate(var(--dx1), -30px) scale(1); opacity: .95; }
  55%  { transform: translate(var(--dx2), -230px) scale(1); opacity: .85; }
  100% { transform: translate(var(--dx1), -460px) scale(.9); opacity: 0; }
}
body.temple .react-tally { display: none; }
body.temple .react-bar .label { color: #d9cfa8; }

@media (max-width: 700px) {
  body.temple .webcast-card { order: 1; } body.temple .temple-card { order: 2; } body.temple .slack-card { order: 3; } body.temple .bmir-card { order: 4; }
  body.temple .temple-more { order: 20; }
  body.temple.temple-expanded .mixer-card, body.temple.temple-expanded .map-card, body.temple.temple-expanded .zoom-card, body.temple.temple-expanded .ig-card,
  body.temple.temple-expanded .support-card, body.temple.temple-expanded .react-card, body.temple.temple-expanded .shots-card, body.temple.temple-expanded .info-card { order: 60; }
}

/* ---------- burn-night show ---------- */
#burnfx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 15; }
.phase-pill { color: var(--fire); border-color: rgba(255,122,61,.5); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }
.show-menu-wrap { position: relative; }
.show-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 220px; display: flex; flex-direction: column; gap: 6px; padding: 10px; background: rgba(14,14,36,.97); border: 1px solid var(--card-border); border-radius: 12px; }
.show-menu .chip { text-align: left; padding: 7px 10px; font-size: 12px; text-transform: none; letter-spacing: 0; }
.show-menu .chip.active { border-color: var(--fire); color: var(--fire); }
.show-menu .chip.danger:hover { border-color: var(--red); color: var(--red); }
.react-row.system { background: rgba(255,122,61,.14); border: 1px solid rgba(255,122,61,.4); }
.react-row.system .n { color: var(--fire); }
.react-row .txt { color: var(--text); }
@media (max-width: 700px) { .show-menu { right: auto; left: 0; } }

/* ---------- admin-only controls ---------- */
body:not(.admin) .admin-only { display: none !important; }
#btn-admin.on { border-color: var(--green); }

/* ---------- devices that can't capture the screen (iOS) ---------- */
body.no-capture #btn-shot, body.no-capture #btn-freeze, body.no-capture #opt-clipboard, body.no-capture #btn-stop-capture,
body.no-capture #mini-shot, body.no-capture .shots-card, body.no-capture label.check { display: none !important; }
#no-capture { display: none; }
body.no-capture #no-capture { display: block; margin-top: 8px; }

/* ---------- wide and ultra-wide monitors ---------- */
@media (min-width: 1700px) {
  /* the video stops growing once it would exceed the screen height; the sidebar takes the rest */
  .layout { grid-template-columns: minmax(0, calc((100vh - 230px) * 16 / 9)) minmax(400px, 1fr); }
  .layout.theater, .layout.no-sidebar { grid-template-columns: minmax(0, 1fr); }
  .layout.theater .stage, .layout.no-sidebar .stage { max-width: calc((100vh - 170px) * 16 / 9); margin: 0 auto; width: 100%; }
  .slack-messages { max-height: 60vh; }
  .temple-list { max-height: 50vh; }
}
@media (min-width: 2200px) {
  .sidebar { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 14px; }
  .sidebar > .card, .sidebar > .temple-more { grid-column: 1; }
  .sidebar > .slack-card { grid-column: 2; grid-row: 1 / span 12; }
  .sidebar-embers { grid-column: 1 / -1; grid-row: 1 / -1; }
  .slack-messages { max-height: calc(100vh - 330px); }
  body.temple .sidebar > .temple-card { grid-column: 1; }
}

/* ---------- BMIR contact links ---------- */
.bmir-links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; }
.bmir-links a { color: var(--dim); }
.bmir-links a:hover { color: var(--accent2); text-decoration: none; }

/* ---------- webcast fundraiser banner ---------- */
.fund-banner { margin: 0 24px 14px; }
.fund-main { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,122,61,.18), rgba(179,156,255,.16)); border: 1px solid rgba(255,180,84,.45);
  box-shadow: 0 0 30px rgba(255,122,61,.15); }
.fund-heart { font-size: 22px; animation: heartbeat 1.6s ease-in-out infinite; }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.18); } 28% { transform: scale(1); } 42% { transform: scale(1.12); } }
.fund-text { flex: 1; min-width: 260px; font-size: 14px; line-height: 1.4; }
.fund-progress { display: flex; align-items: center; gap: 8px; min-width: 220px; font-size: 12px; }
.fund-bar { flex: 1; height: 8px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
#fund-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffb454, #ff7a3d); border-radius: 999px; transition: width 1s; }
.fund-min { font: inherit; color: var(--dim); background: transparent; border: 1px solid var(--card-border); border-radius: 8px; width: 28px; height: 28px; cursor: pointer; }
.fund-mini { display: none; font: inherit; font-size: 12px; color: var(--accent2); background: rgba(255,180,84,.1); border: 1px solid rgba(255,180,84,.35); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.fund-banner.min .fund-main { display: none; }
.fund-banner.min .fund-mini { display: inline-block; }
body.temple .fund-main { background: rgba(226,193,122,.1); border-color: rgba(226,193,122,.4); box-shadow: none; }
body.temple .fund-heart { animation: none; }
@media (max-width: 700px) { .fund-banner { margin: 0 10px 10px; } .fund-main { padding: 10px 12px; gap: 10px; } .fund-text { font-size: 13px; } }

.chip-row { display: flex; gap: 6px; }
.chip-row .chip { flex: 1; text-align: center; }
.show-menu { max-height: calc(100vh - 80px); overflow-y: auto; }

/* ---------- emoji effects layer (DOM, masked around the video with clip-path) ---------- */
#glyphfx { position: fixed; inset: 0; pointer-events: none; z-index: 16; overflow: hidden; }
#glyphfx span { position: absolute; left: 0; top: 0; line-height: 1; will-change: transform, opacity; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.show-menu .chip.active { border-color: var(--fire); color: var(--fire); background: rgba(255,122,61,.12); }

/* ---------- slim BMIR ---------- */
.bmir-card { padding: 10px 14px; }
.bmir-head { display: flex; align-items: center; gap: 12px; }
.bmir-card .btn.round { width: 40px; height: 40px; font-size: 16px; }
.bmir-np { min-width: 0; flex: 1; }
.bmir-np .label { margin-bottom: 1px; }
.bmir-now { font-size: 16px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chev-btn { font: inherit; color: var(--dim); background: transparent; border: 1px solid var(--card-border); border-radius: 8px; width: 28px; height: 28px; cursor: pointer; flex: none; transition: transform .2s; }
.chev-btn[aria-expanded="false"] { transform: rotate(-90deg); }
.bmir-body { margin-top: 10px; }
.bmir-card.collapsed .bmir-body { display: none; }
.bmir-links { margin-top: 6px; }
body.temple .bmir-card { padding: 8px 14px; }

/* ---------- YouTube chat ---------- */
.ytchat-card.collapsed .ytchat-body { display: none; }
#ytchat-frame { width: 100%; height: 480px; border: 0; border-radius: 10px; background: #0f0f0f; }
@media (min-width: 1700px) { #ytchat-frame { height: 60vh; } }
@media (max-width: 700px) { .ytchat-card { order: 2; } }
body.temple .ytchat-card { display: none; }
body.temple.temple-expanded .ytchat-card { display: block; }

/* ---------- footer + bug reports ---------- */
.site-foot { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; padding: 18px 24px 26px; font-size: 13px; color: var(--dim); }
.site-foot .sep { opacity: .5; }
.site-foot a { color: var(--dim); } .site-foot a:hover, .site-foot .linkish:hover { color: var(--accent2); text-decoration: none; }
.linkish { font: inherit; color: var(--dim); background: none; border: 0; padding: 0; cursor: pointer; }
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(5,5,15,.75); display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-card { width: min(92vw, 460px); background: rgba(18,18,44,.98); border: 1px solid var(--card-border); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.modal-card.wide { width: min(94vw, 760px); max-height: 86vh; }
.modal-card input, .modal-card textarea { font: inherit; font-size: 14px; color: var(--text); background: rgba(255,255,255,.06); border: 1px solid var(--card-border); border-radius: 10px; padding: 9px 11px; width: 100%; box-sizing: border-box; resize: vertical; }
.modal-card input:focus, .modal-card textarea:focus { outline: none; border-color: var(--accent); }
.modal-card p { margin: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.bugs-list { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.bug { padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.05); font-size: 13px; }
.bug .who { font-family: var(--mono); font-size: 11px; color: var(--accent2); margin-bottom: 4px; }
.bug .txt { white-space: pre-wrap; margin-bottom: 6px; }
.bug .meta { font-family: var(--mono); font-size: 10.5px; color: var(--dim); word-break: break-all; }
body.temple .site-foot { color: #a8a1b8; }

/* ---------- show desk drawer ---------- */
.show-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(94vw, 400px); z-index: 55; background: rgba(12,12,32,.98); border-left: 1px solid var(--card-border); box-shadow: -20px 0 60px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 10px; padding: 14px; overflow-y: auto; }
.show-drawer .drawer-head { display: flex; align-items: center; gap: 10px; }
.show-drawer .drawer-head .dim { flex: 1; }
.on-now { display: flex; flex-wrap: wrap; gap: 6px; min-height: 22px; }
.on-now .now { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--fire); border: 1px solid rgba(255,122,61,.5); border-radius: 999px; padding: 3px 6px 3px 9px; }
.on-now .now button { font: inherit; color: var(--dim); background: transparent; border: 0; cursor: pointer; padding: 0 2px; }
.on-now .now button:hover { color: var(--red); }
.on-now .none { font-size: 12px; color: var(--dim); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--card-border); padding-bottom: 8px; overflow-x: auto; }
.tab { font: inherit; font-size: 12px; font-weight: 600; color: var(--dim); background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 7px 9px; cursor: pointer; white-space: nowrap; }
.tab.active { color: var(--text); background: rgba(140,130,255,.16); border-color: var(--card-border); }
.tab-panel { display: flex; flex-direction: column; gap: 8px; }
.tab-panel .label.small { margin-top: 6px; }
.tab-panel .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tab-panel .grid .chip, .tab-panel .chip.wide { text-align: left; padding: 9px 10px; font-size: 12.5px; text-transform: none; letter-spacing: 0; }
.tab-panel .chip.wide { grid-column: 1 / -1; width: 100%; text-align: center; }
.seg { display: flex; border: 1px solid var(--card-border); border-radius: 10px; overflow: hidden; }
.seg .chip { flex: 1; border: 0; border-radius: 0; border-right: 1px solid var(--card-border); padding: 8px 6px; font-size: 12px; text-transform: none; letter-spacing: 0; }
.seg .chip:last-child { border-right: 0; }
.seg .chip.active { background: rgba(255,122,61,.18); color: var(--fire); }
.tab-panel .chip.active { border-color: var(--fire); color: var(--fire); background: rgba(255,122,61,.1); }
.tab-panel p { margin: 4px 0 0; }
@media (max-width: 700px) { .show-drawer { width: 100vw; } }

#glyphfx .txt { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; color: #f0d6a0; text-shadow: 0 0 14px rgba(240,214,160,.7), 0 1px 2px rgba(0,0,0,.6); white-space: nowrap; }

/* drawer: header, on-now and tabs must never shrink when the panels are tall (flex column would squash them) */
.show-drawer .drawer-head, .show-drawer .on-now, .show-drawer .tabs, .show-drawer .tab-panel { flex: none; }
.tabs { gap: 6px; padding-bottom: 10px; overflow: visible; flex-wrap: wrap; }
.tab { font-size: 13px; padding: 9px 12px; border-radius: 999px; border-color: var(--card-border); background: rgba(255,255,255,.04); }
.tab.active { color: #fff; background: rgba(255,122,61,.22); border-color: var(--fire); box-shadow: 0 0 14px rgba(255,122,61,.35); }

/* ---------- decompression (off-season) ---------- */
.decom-card h3 { margin: 4px 0 8px; font-size: 20px; font-weight: 800; line-height: 1.2; }
.decom-card p { margin: 0 0 10px; line-height: 1.5; font-size: 14px; }
.decom-card b { color: var(--accent2); }
.recap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.recap .stat { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.05); border-radius: 10px; padding: 8px 10px; }
.recap .stat b { display: block; font-size: 20px; font-family: var(--mono); color: var(--accent2); }
.recap .stat span { font-size: 11px; color: var(--dim); letter-spacing: .08em; text-transform: uppercase; }
.next-list { display: flex; flex-direction: column; gap: 6px; }
.next-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,.04); }
.next-row .when { font-family: var(--mono); font-size: 11px; color: var(--accent2); white-space: nowrap; }
body.decom .fund-banner, body.decom .temple-form, body.decom #temple-light, body.decom #temple-keepsake { display: none !important; }
body.decom .decom-card { order: -5; } body.decom .next-card { order: -4; }
@media (max-width: 700px) { body.decom .decom-card { order: 1; } body.decom .next-card { order: 3; } body.decom .webcast-card { order: 2; } }

/* ---------- facts + about ---------- */
.facts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.fact { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: baseline; padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,.04); font-size: 12.5px; line-height: 1.4; }
.fact b { color: var(--accent2); font-family: var(--mono); font-size: 12px; }
.fact span { color: var(--dim); }
.decom-card .btn.wide { margin-top: 8px; }
.modal-card.about { max-height: 88vh; }
.about-body { overflow-y: auto; font-size: 14px; line-height: 1.55; display: flex; flex-direction: column; gap: 10px; }
.about-body p { margin: 0; }
.about-list { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.about-list li { padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.04); }
@media (max-width: 700px) { .fact { grid-template-columns: 1fr; gap: 2px; } }