/* Stream View (S23), audience page (S22) and the shared viewer stage (ui/stage.js). Sizes are in --u (px per logical unit:
   1920x1080 = 2px; the audience page sets its own). This file is separate from app.css on purpose (art pass edits that one). */
body.sv-on #ui{display:none}
.sv-root{position:fixed;inset:0;z-index:20;background:#1c1030;display:grid;place-items:center;overflow:hidden;--u:1px;font-family:var(--body)}
.sv-frame{position:relative;background:radial-gradient(ellipse at 50% 20%,#4a2560 0%,#2a1740 55%,#1c1030 100%);color:var(--text);overflow:hidden;font-size:calc(var(--u)*12)}
.sv-frame>*{position:absolute}
.sv-head{left:calc(var(--u)*12);top:calc(var(--u)*8);width:calc(var(--u)*936);height:calc(var(--u)*44);display:flex;align-items:center;gap:calc(var(--u)*18)}
.sv-mark{font:700 calc(var(--u)*22) var(--display);letter-spacing:.06em;color:var(--candle);text-shadow:0 0 calc(var(--u)*10) rgba(255,217,138,.4)}
.sv-round{font:700 calc(var(--u)*15) var(--display);letter-spacing:.12em;flex:1}
.sv-clock{margin-right:calc(var(--u)*236)}.sv-clock .candle{display:flex;align-items:center;gap:calc(var(--u)*6);font:700 calc(var(--u)*20) var(--display)}
.sv-clock .candle svg{width:calc(var(--u)*22);height:calc(var(--u)*34)}
.sv-room{position:absolute;right:0;top:0;display:flex;align-items:flex-start;gap:calc(var(--u)*8);z-index:2}.sv-room .sv-roomtxt{align-items:flex-end;text-align:right;padding-top:calc(var(--u)*2)}
.sv-qr canvas{display:block;border-radius:2px;width:calc(var(--u)*88)!important;height:calc(var(--u)*88)!important}
.sv-roomtxt{display:flex;flex-direction:column;line-height:1.1}
.sv-code{font:700 calc(var(--u)*36) var(--display);letter-spacing:.14em;color:var(--parchment)}
.sv-roomtxt small{font-size:calc(var(--u)*9);color:var(--text-dim);max-width:calc(var(--u)*130)}
.sv-stage{left:calc(var(--u)*12);top:calc(var(--u)*60);width:calc(var(--u)*688);height:calc(var(--u)*420)}
.sv-side{left:calc(var(--u)*712);top:calc(var(--u)*60);width:calc(var(--u)*236);height:calc(var(--u)*420);display:flex;flex-direction:column;gap:calc(var(--u)*6);overflow:hidden;
  background:rgba(20,10,36,.45);border:1px solid rgba(232,194,106,.35);border-radius:3px;padding:calc(var(--u)*40) calc(var(--u)*8) calc(var(--u)*6)}
.sv-score{display:flex;justify-content:space-between;align-items:flex-end}
.sv-score small,.sv-side small{font-size:calc(var(--u)*8.5);letter-spacing:.14em;color:var(--text-dim);display:block}
.sv-pts{font:700 calc(var(--u)*30) var(--display);color:var(--candle)}
.sv-moons .moon{font-size:calc(var(--u)*16);color:rgba(255,246,230,.22)}.sv-moons .moon.lit{color:var(--moon);text-shadow:0 0 8px rgba(255,217,138,.8)}
.sv-tc{font:700 calc(var(--u)*12) var(--body)}.sv-tc .chat{color:var(--mint)}.dim{color:var(--text-dim);font-weight:400}
.sv-counts .row{display:flex;flex-wrap:wrap;gap:calc(var(--u)*5);font:700 calc(var(--u)*10) var(--display)}
.sv-top{display:grid;grid-template-columns:1fr auto;column-gap:calc(var(--u)*6);font-size:calc(var(--u)*10.5)}.sv-top small{grid-column:1/3}.sv-top .pt{color:var(--candle);font-weight:700}
.sv-votes .vk{font:700 calc(var(--u)*9.5) var(--display);margin-top:calc(var(--u)*3);color:var(--candle)}
.sv-votes .bar{position:relative;height:calc(var(--u)*15);margin-top:calc(var(--u)*2);background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;display:flex;align-items:center;font-size:calc(var(--u)*9.5);padding:0 calc(var(--u)*4);justify-content:space-between}
.sv-votes .bar i{position:absolute;left:0;top:0;bottom:0;background:rgba(127,227,208,.45)}.sv-votes .bar.win i{background:rgba(255,217,138,.7)}
.sv-votes .bar span,.sv-votes .bar b{position:relative}
.sv-feed{margin-top:auto;max-height:calc(var(--u)*46);overflow:hidden;font-size:calc(var(--u)*9.5);color:var(--text-dim);display:flex;flex-direction:column;gap:calc(var(--u)*1)}
.sv-ticker{left:calc(var(--u)*12);top:calc(var(--u)*488);width:calc(var(--u)*936);height:calc(var(--u)*44);display:flex;align-items:center;justify-content:center;
  font:700 calc(var(--u)*14) ui-monospace,Menlo,monospace;letter-spacing:.03em;color:var(--candle);background:rgba(20,10,36,.5);border-radius:3px}
.sv-stickers{inset:0;pointer-events:none}
.sv-sticker{position:absolute;padding:calc(var(--u)*4) calc(var(--u)*12);font:700 calc(var(--u)*22) var(--display);color:var(--ink);background:var(--parchment);border:2px solid var(--gold);border-radius:3px;
  transform:rotate(var(--rot,-4deg));box-shadow:var(--paper-shadow);animation:svpop .35s cubic-bezier(.2,1.6,.4,1)}
.sv-sticker.h{background:#d8cfe8}
@keyframes svpop{from{transform:scale(.3) rotate(var(--rot,0));opacity:0}}
.sv-msg{left:50%;top:50%;transform:translate(-50%,-50%);padding:calc(var(--u)*14) calc(var(--u)*28);background:var(--tent);border:2px solid var(--gold);font:700 calc(var(--u)*20) var(--display);border-radius:3px;z-index:3}
/* ---- stage ---- */
.sg-stage{position:relative;width:100%;height:100%;color:var(--text);--u:1px}
.sv-frame .sg-stage{--u:inherit}
.sg-wait{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*10);text-align:center}
.sg-wait h2{font-size:calc(var(--u)*26)}
.sg-sub{margin:0;color:var(--text-dim);font-size:calc(var(--u)*13)}
.sg-big{margin:0;font:700 calc(var(--u)*34) var(--display);color:var(--candle)}
.sg-roster{display:flex;flex-wrap:wrap;gap:calc(var(--u)*10);justify-content:center}
.sg-grid{display:grid;gap:10px;justify-content:center;align-content:start;padding-top:8px}
.sg-cell{position:relative;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*4)}
.sg-cell.pick{cursor:pointer}.sg-cell.sel .sg-cardwrap{outline:3px solid var(--candle);outline-offset:3px}
.sg-cell.unread{opacity:.45}.sg-cell.void .sg-cardwrap{opacity:.35;filter:grayscale(1)}
.sg-cardwrap{position:relative;line-height:0;border-radius:3px;box-shadow:0 8px 18px rgba(20,10,36,.45)}
.sg-num{position:absolute;left:-2px;top:-6px;z-index:2;font:700 calc(var(--u)*14) var(--display);font-style:normal;background:var(--gold);color:var(--ink);padding:0 calc(var(--u)*6);border-radius:2px}
.sg-tab{display:flex;align-items:center;gap:calc(var(--u)*5);font:700 calc(var(--u)*12) var(--body)}
.sg-cnt{white-space:nowrap}.sg-glyph{font-size:calc(var(--u)*16)}.sg-cnt{color:var(--mint);font-size:calc(var(--u)*10.5);font-weight:700}
.sg-seal{color:#ffd0d8;background:var(--rose);border-radius:50%;width:calc(var(--u)*17);height:calc(var(--u)*17);display:inline-grid;place-items:center;font-size:calc(var(--u)*10)}
.sg-vial{width:100%;height:calc(var(--u)*7);background:rgba(255,255,255,.12);border-radius:5px;overflow:hidden}
.sg-vial i{display:block;height:100%;transform-origin:left;background:linear-gradient(90deg,#7fe3d0,#6c3fb5);transition:transform .4s}.sg-vial.low i{background:var(--flame)}
.sg-gal{height:100%;display:flex;flex-direction:column;gap:8px}.sg-gal .sg-grid{flex:1}
.sg-board{flex:none}
.sg-tiles{display:flex;flex-wrap:wrap;gap:calc(var(--u)*5);justify-content:center}
.sg-tiles.col{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
.sg-tile{appearance:none;border:0;background:var(--parchment);color:var(--ink);border-radius:2px;display:flex;align-items:center;gap:calc(var(--u)*5);padding:calc(var(--u)*3) calc(var(--u)*8);font:600 calc(var(--u)*12) var(--body);box-shadow:var(--paper-shadow);min-height:calc(var(--u)*1px)}
.sg-tile b{font:700 calc(var(--u)*11) var(--display);color:var(--gold-deep);min-width:1ch}
.sg-tile.struck{opacity:.35;text-decoration:line-through}.sg-tile.torn{opacity:.4;text-decoration:line-through;transform:rotate(-2deg)}.sg-tile.real{outline:3px solid var(--ok)}
.sg-tiles.veiled{display:none}.sg-tiles.locked .sg-tile{filter:saturate(.3)}
.sg-banner{position:absolute;left:0;right:0;top:40%;text-align:center;padding:calc(var(--u)*10);background:rgba(20,10,36,.85);border:2px solid var(--gold);font:700 calc(var(--u)*18) var(--display)}
.sg-rev{height:100%;display:flex;gap:calc(var(--u)*14);align-items:center}
.sg-revside{flex:1;display:flex;flex-direction:column;gap:calc(var(--u)*10);align-items:flex-start;position:relative}
.sg-revside .sg-num{position:static;font-size:calc(var(--u)*26)}
.sg-out{min-height:calc(var(--u)*90)}
.sg-stamp{display:inline-flex;flex-direction:column;align-items:center;gap:calc(var(--u)*2);padding:calc(var(--u)*10) calc(var(--u)*22);border-radius:calc(var(--u)*50);transform:rotate(-5deg);animation:svstamp .3s cubic-bezier(.2,1.6,.4,1);box-shadow:0 6px 20px rgba(20,10,36,.6)}
.sg-stamp b{font:700 calc(var(--u)*16) var(--display);letter-spacing:.12em}.sg-stamp .sg-word{font:700 calc(var(--u)*28) var(--display);text-transform:uppercase}.sg-stamp small{font-size:calc(var(--u)*13);font-weight:700}
.sg-stamp.true{background:radial-gradient(circle at 35% 30%,#ffe9a8,#e8c26a 60%,#b8862e);color:#4a2a05}.sg-stamp.clouded{background:radial-gradient(circle at 40% 30%,#d9d3de,#9a90a3);color:#2a2230}.sg-stamp.void{background:#6b2f6f;color:#f4ead6}
@keyframes svstamp{from{transform:scale(2) rotate(-12deg);opacity:0}}
.sg-tc{font:700 calc(var(--u)*15) var(--display);letter-spacing:.08em;margin-top:calc(var(--u)*6)}.sg-tc .ok{color:var(--ok)}.sg-tc .no{color:var(--bad)}.sg-tc i{font-style:normal;opacity:.5}
.sg-strip{display:flex;flex-wrap:wrap;gap:calc(var(--u)*5)}.sg-strip.big{justify-content:center;gap:10px}
.sg-chip{padding:calc(var(--u)*2) calc(var(--u)*7);border:1px solid rgba(232,194,106,.5);border-radius:calc(var(--u)*10);font:700 calc(var(--u)*11) var(--display)}.sg-chip.cur{background:var(--gold);color:var(--ink)}
.sg-resw{height:100%;display:flex;flex-direction:column;gap:8px;align-items:center}
.sg-reshead{display:flex;gap:calc(var(--u)*14);align-items:baseline;font:700 calc(var(--u)*16) var(--display);flex-wrap:wrap}
.sg-rline{display:flex;gap:calc(var(--u)*6);align-items:baseline;font-size:calc(var(--u)*12)}.sg-rline b{text-transform:uppercase;letter-spacing:.04em}.sg-rline b.true{color:var(--candle)}.sg-rline b.clouded{color:var(--text-dim)}.sg-rline small{color:var(--mint)}
.sg-fin{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*8);text-align:center;overflow:hidden}
.sg-fin h2{font-size:calc(var(--u)*28)}.sg-moons .moon{font-size:calc(var(--u)*26);color:rgba(255,246,230,.22)}.sg-moons .moon.lit{color:var(--moon)}
.sg-top{margin:0;padding:0;list-style:none;display:flex;gap:calc(var(--u)*14);flex-wrap:wrap;justify-content:center;font-size:calc(var(--u)*13)}
.sg-live{height:100%;display:flex;gap:calc(var(--u)*14);align-items:flex-start}
.sg-liveleft{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*6)}
.sg-liveright{flex:1;display:flex;flex-direction:column;gap:calc(var(--u)*8);min-width:0}
.sg-liveright .candle{display:flex;align-items:center;gap:calc(var(--u)*6);font:700 calc(var(--u)*20) var(--display)}
.sg-veil{padding:calc(var(--u)*30) calc(var(--u)*8);text-align:center;background:repeating-linear-gradient(45deg,#4a2560,#4a2560 8px,#3b1d4e 8px,#3b1d4e 16px);border-radius:3px;color:var(--text-dim);font-size:calc(var(--u)*12)}
/* ---- audience page (S22) ---- */
body.au-on #ui{display:none}
.au-root{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 0%,#4a2560,#1c1030 70%);color:var(--text);padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);--u:.85px}
.au-card{margin:auto;width:min(92vw,420px)}
.au-top{flex:0 0 55%;display:flex;flex-direction:column;min-height:0;padding:8px 12px 0}
.au-bar{display:flex;gap:10px;align-items:baseline;font:700 14px var(--display);letter-spacing:.08em}.au-bar .au-code{font-size:20px;color:var(--candle)}.au-bar .au-round{flex:1;color:var(--text-dim)}.au-pts{color:var(--mint)}
.au-stagebox{flex:1;min-height:0;overflow:hidden}
.au-sheet{flex:1;min-height:0;display:flex;flex-direction:column;background:rgba(20,10,36,.7);border-top:2px solid var(--gold);padding:8px 12px 12px}
.au-tabs{display:flex;gap:6px}.au-tabs .btn{flex:1;min-height:44px}.au-tabs .btn.on{background-color:var(--marigold)}
.au-pane{flex:1;min-height:0;overflow:auto;padding-top:8px;-webkit-user-select:none;user-select:none}
.au-title{margin:0 0 6px;font:700 17px var(--display);color:var(--candle)}.au-sub{margin:8px 0 4px;font:700 14px var(--display);color:var(--text-dim)}
.au-locked{margin:0 0 8px;padding:6px 10px;border:2px solid var(--ok);border-radius:3px;font:700 16px var(--display);color:var(--ok)}
.au-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.au-tile{min-height:44px;display:flex;align-items:center;gap:8px;justify-content:flex-start;padding:0 10px;font-size:15px}.au-tile b{font:700 14px var(--display);color:var(--gold-deep);min-width:1.2ch}.au-tile.mine{background-color:var(--ok)}
.au-cands{display:flex;flex-direction:column;gap:6px}.au-cand{display:flex;justify-content:space-between;align-items:center}.au-cand.mine{background-color:var(--marigold)}.au-cand.win{outline:3px solid var(--ok)}
.au-lb{margin:0}.au-lb li{font-size:15px;margin-left:20px}.au-feed{margin:2px 0;font-size:13px;color:var(--text-dim)}
.au-rx{position:fixed;right:12px;bottom:calc(env(safe-area-inset-bottom) + 12px);display:flex;flex-direction:column;gap:10px;z-index:21}
.au-rx .btn{border-radius:50%;width:60px;height:60px;min-height:60px;padding:0;font-size:15px;box-shadow:0 4px 14px rgba(20,10,36,.6)}.au-rx .btn.cool{opacity:.45}
.au-msg{position:fixed;left:12px;right:12px;top:50%;transform:translateY(-50%);z-index:22;background:var(--tent);border:2px solid var(--gold);padding:16px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center;font:700 18px var(--display)}
.au-msg[hidden]{display:none}
.au-root .sg-stage{height:100%}