/* OLSC draw app — layout and motion on top of the design system (system.css). */

/* ---------------------------------------------------------------- shared */
[hidden]{display:none!important}
.pin-gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px)}
.pin-card{width:min(380px,100%);align-items:stretch;text-align:center}
.pin-card .logo-h{margin:0 auto 4px;color:var(--brand)}
.pin-card p{margin:0}
.pin-input{font:900 36px/1 var(--display);letter-spacing:.3em;text-align:center;height:64px;border-radius:14px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.pin-input:focus{outline:2px solid color-mix(in srgb,var(--brand) 45%,transparent);border-color:var(--brand)}
.toasts{position:fixed;left:50%;bottom:24px;z-index:120;display:flex;flex-direction:column;gap:8px;transform:translateX(-50%);width:min(560px,calc(100% - 32px))}
.toast{padding:14px 18px;border-radius:14px;background:var(--ink);color:var(--bg);font-weight:600;box-shadow:0 18px 40px -18px color-mix(in srgb,var(--ink) 60%,transparent);animation:toast-in .3s ease-out;transition:opacity .5s,transform .5s}
.toast-error{background:var(--brand);color:var(--on-brand)}
.toast-ok{background:var(--win);color:var(--bg)}
.toast.out{opacity:0;transform:translateY(10px)}
@keyframes toast-in{from{transform:translateY(12px);opacity:0}}
.conn{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--win);flex:none}
.conn[data-conn="off"]{background:var(--brand);animation:pulse 1s infinite}
.cap-photo .fig-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cap-photo.has-media::after{display:none}
.cap-photo.has-media .cap-letter{left:auto;right:12px;bottom:12px;transform:none;display:grid;place-items:center;min-width:40px;height:40px;padding:0 8px;border-radius:12px;font-size:22px;background:var(--brand);text-shadow:none}

/* ---------------------------------------------------------------- stage: 1920×1080 broadcast frame */
.stage-body{margin:0;height:100vh;overflow:hidden;background:var(--night);cursor:none}
.stage-body:hover{cursor:default}
.stage-frame{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform:translate(-50%,-50%) scale(var(--s,1));transform-origin:50% 50%;overflow:hidden;display:grid;grid-template-rows:100px 584px 1fr;padding:0 40px 24px;color:var(--night-ink);background:var(--night)}
.stage-bg{position:absolute;inset:0;z-index:0}
.st-top,.st-main,.st-board{position:relative;z-index:1}
.st-top{display:flex;align-items:center;gap:28px;border-bottom:1px solid color-mix(in srgb,var(--night-ink) 12%,transparent)}
.st-top .logo-h{width:186px;color:var(--brand)}
.st-title b{display:block;font:900 32px/1 var(--display);letter-spacing:-.02em}
.st-title span{display:block;margin-top:6px;font-size:16px;color:var(--night-muted)}
.st-phase{margin-left:auto;height:42px;padding:0 18px;gap:10px;font-size:17px}
.st-progress{width:300px}
.st-progress .dp-top{font-size:15px}
.st-progress .dp-top b{font-size:28px}
.st-progress .seats{margin:8px 0 0}
.st-clock{min-width:96px;text-align:right;font:900 30px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--night-muted)}
.st-main{display:grid;grid-template-columns:350px minmax(0,1fr) 400px;gap:28px;padding:22px 0;min-height:0}
.st-left,.st-center,.st-right{min-height:0}

.st-cap{display:flex;flex-direction:column;height:100%;border-radius:var(--r-lg);overflow:hidden;background:color-mix(in srgb,var(--night-ink) 5%,transparent);border:1px solid color-mix(in srgb,var(--night-ink) 12%,transparent)}
.st-cap .cap-photo{flex:1;aspect-ratio:auto;min-height:0}
.st-cap .cap-letter{font-size:64px}
.st-cap.idle .cap-photo{display:grid;place-items:center}
.st-cap.idle .logo-s{width:110px;color:color-mix(in srgb,var(--night-ink) 26%,transparent)}
.st-cap-body{padding:16px 20px 20px}
.st-cap-body small{font:800 13px/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--night-accent)}
.st-cap-body b{display:block;margin:6px 0 6px;font:900 34px/1.05 var(--display);letter-spacing:-.02em}
.st-cap-body span{font-size:16px;color:var(--night-muted)}
.st-cap.enter{animation:cap-in .8s cubic-bezier(.2,1.2,.4,1)}
@keyframes cap-in{from{transform:translateX(-60px) scale(.96);opacity:0}}

.st-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center}
.st-h{font:900 64px/1 var(--display);letter-spacing:-.03em;margin:10px 0 0}
.st-sub{font-size:20px;color:var(--night-muted);margin:12px 0 0}
.st-pots{display:grid;grid-template-columns:1fr 1fr;gap:64px;width:100%;max-width:720px}
.st-pots .bowl{max-width:300px}
.st-pots .ball{width:58px;height:58px;margin:-29px 0 0 -29px;font-size:17px}
.st-pots .pot-label b{font-size:24px}
.st-pots .pot-label small{font-size:16px}
.pot.empty .bowl{opacity:.55}
.pot.shake .bowl{animation:shake .16s linear infinite}
.pot.shake .ball{animation-duration:.45s}
@keyframes shake{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-4px,1px) rotate(-1.6deg)}75%{transform:translate(4px,-1px) rotate(1.6deg)}}
.st-hint{font-size:22px;color:var(--night-muted)}
.st-hint b{color:var(--night-ink)}
.st-hint .t-chip{width:28px;height:28px;font-size:15px;vertical-align:-2px}
.st-rule{display:flex;align-items:center;gap:12px;font-size:17px;color:var(--night-muted)}
.ball.fly{position:absolute;z-index:45;width:56px;height:56px;margin:0;animation:none;font-size:0}

.st-checkin{width:100%}
.st-caps{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px;margin-top:30px}
.st-capmini{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:var(--r-md);background:color-mix(in srgb,var(--night-ink) 5%,transparent);border:1px solid color-mix(in srgb,var(--night-ink) 12%,transparent);opacity:.42;transition:opacity .5s,transform .5s,border-color .5s}
.st-capmini.in{opacity:1;border-color:var(--brand);transform:translateY(-8px)}
.st-capmini .cap-photo{border-radius:10px}
.st-capmini .cap-letter{font-size:30px}
.st-capmini b{font:800 16px/1.2 var(--display)}
.st-capmini span{font-size:13px;font-weight:700;color:var(--night-muted)}
.st-capmini.in span{color:var(--win)}

.st-envelopes{display:flex;gap:22px;justify-content:center;margin-top:30px}
.envelope{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:240px;height:150px;border-radius:16px;background:var(--on-brand);color:var(--brand-deep);box-shadow:0 20px 40px -18px color-mix(in srgb,var(--night) 80%,transparent);animation:float 4s ease-in-out infinite}
.envelope:nth-child(2){animation-delay:-1.3s}.envelope:nth-child(3){animation-delay:-2.6s}
.envelope .logo-s{width:28px;color:var(--brand)}
.envelope b{font:900 20px/1.2 var(--display);padding:0 14px}

.st-wheel{display:grid;grid-template-columns:540px minmax(0,1fr);gap:56px;align-items:center;width:100%;text-align:left}
.st-wheel-box{width:520px}
.st-wheel-box .wheel{border-width:12px}
.st-wheel-box .wheel i{height:36px;margin-top:-18px;padding:0 14px 0 68px;line-height:36px}
.st-wheel-box .wheel i.win{color:var(--on-brand);text-shadow:0 0 18px var(--on-brand),0 0 6px var(--on-brand)}
.st-wheel-box .wheel-hub{width:116px;height:116px;margin:-58px 0 0 -58px}
.st-wheel-box .wheel-hub .logo-s{width:42px}
.st-wheel-box .wheel-pin{top:-22px;width:44px;height:54px;margin-left:-22px;background:var(--night-ink)}
.st-wheel-box.landed .wheel-pin{animation:pin-bounce .5s ease-out}
@keyframes pin-bounce{40%{transform:translateY(8px)}}
.st-wheel-info .st-h{font-size:58px}
.st-turn{margin-top:26px;padding:20px 24px;border-radius:var(--r-lg);background:color-mix(in srgb,var(--brand) 16%,transparent);border:1px solid color-mix(in srgb,var(--brand) 45%,transparent)}
.st-turn small{font:800 13px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--night-accent)}
.st-turn b{display:block;margin:8px 0 6px;font:900 40px/1 var(--display)}
.st-turn span{font-size:18px;color:var(--night-muted)}
.st-turn.wait{background:color-mix(in srgb,var(--night-ink) 5%,transparent);border-color:color-mix(in srgb,var(--night-ink) 12%,transparent)}
.st-turn.enter{animation:dest-in .7s cubic-bezier(.2,1.2,.4,1)}
.st-wheel-order{display:flex;gap:12px;margin-top:22px}
.st-wheel-order>span{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--night-ink) 15%,transparent);font:800 17px/1 var(--display);color:var(--night-muted)}
.st-wheel-order>span.on{border-color:var(--brand);color:var(--night-ink);background:color-mix(in srgb,var(--brand) 14%,transparent)}
.st-wheel-order>span.done{opacity:.45}

.st-done{position:relative;display:flex;flex-direction:column;align-items:center;isolation:isolate}
.st-done .logo-s{width:120px;color:var(--brand);animation:float 4s ease-in-out infinite}
.st-done .confetti{position:absolute;inset:-160px -380px;z-index:-1}
.st-done .st-h{font-size:88px}

.st-right{display:flex;flex-direction:column;gap:14px;overflow:hidden}
.st-right .h3{display:flex;align-items:center;gap:10px;font-size:22px}
.st-feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.st-feed li{padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--night-ink) 6%,transparent);font-size:16px;line-height:1.4}
.st-feed li time{display:block;font-size:12px;font-weight:700;color:var(--night-muted);margin-bottom:3px}
.st-feed li.hi{background:color-mix(in srgb,var(--brand) 20%,transparent);box-shadow:inset 4px 0 0 var(--brand)}
.st-feed li.empty{color:var(--night-muted)}

.st-board{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;align-content:start;padding-top:2px}
.st-board .tcard{padding:10px;gap:4px;background:color-mix(in srgb,var(--night-ink) 5%,transparent);border-color:color-mix(in srgb,var(--night-ink) 12%,transparent)}
.st-board .tcard.now{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 30%,transparent)}
.st-board .tcard-head{padding-bottom:6px;border-color:color-mix(in srgb,var(--night-ink) 12%,transparent)}
.st-board .tcard-head b{font-size:15px}
.st-board .tcard-head small{color:var(--night-muted)}
.st-board .t-letter{width:30px;height:30px}
.st-board .slot{min-height:27px;padding:2px 7px;gap:7px;font-size:14px;background:color-mix(in srgb,var(--night-ink) 7%,transparent);color:var(--night-ink)}
.st-board .slot small{display:none}
.st-board .slot .pos{min-width:24px;height:18px;font-size:9.5px}
.st-board .slot.auto{background:color-mix(in srgb,var(--brand) 18%,transparent)}
.st-board .slot.empty{min-height:27px;border-color:color-mix(in srgb,var(--night-ink) 14%,transparent);color:color-mix(in srgb,var(--night-ink) 35%,transparent);font-size:12px}
.st-board .slot.more{display:none}
.st-board .balance{padding-top:6px;border-color:color-mix(in srgb,var(--night-ink) 12%,transparent);color:var(--night-muted)}
.st-board .balance b{font-size:14px;color:var(--night-ink)}
.st-board .balance .full,.st-board .balance .full b{color:var(--night-accent)}
.st-board .slot.new{animation:slot-in 2.6s ease-out}
@keyframes slot-in{0%{background:var(--brand);transform:scale(1.06)}30%{background:color-mix(in srgb,var(--brand) 60%,transparent);transform:scale(1)}}

.reveal-layer{position:absolute;inset:0;z-index:40;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .4s}
.reveal-layer.on{opacity:1}
.rv-backdrop{position:absolute;inset:0;background:radial-gradient(55% 60% at 50% 45%,color-mix(in srgb,var(--brand-deep) 60%,transparent),transparent 75%),color-mix(in srgb,var(--night) 90%,transparent);backdrop-filter:blur(3px)}
.rv-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px;isolation:isolate}
.rv-card .confetti{position:absolute;inset:-260px -520px;z-index:-1}
.rv-card .confetti i,.st-done .confetti i{top:var(--y,-16px);width:var(--w,10px);height:calc(var(--w,10px) * 1.8)}
.rv-card .confetti i{animation-iteration-count:1;animation-fill-mode:both}
.rv-capsule{transform:scale(2.1);margin:34px 0 18px}
.rv-slip{flex:none;min-width:820px;padding:28px 56px 32px;text-align:center;transform:rotate(-1.5deg)}
.rv-slip small{font-size:17px}
.rv-slip .reveal-name{font-size:104px;margin:16px 0 18px}
.rv-slip .reveal-to{justify-content:center;gap:12px;font-size:26px}
.rv-slip .reveal-to .pos{min-width:46px;height:34px;font-size:16px;border-radius:10px}
.slip .pos-m{background:var(--brand-deep);color:var(--on-brand)}
.reveal-name.land{animation:land .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes land{from{transform:scale(1.18)}}
.rv-dest{display:flex;align-items:center;gap:22px;padding:14px 34px 14px 14px;border-radius:999px;background:color-mix(in srgb,var(--night) 70%,transparent);border:1px solid color-mix(in srgb,var(--night-ink) 18%,transparent);animation:dest-in .7s .9s both cubic-bezier(.2,1.2,.4,1)}
.rv-returning .rv-dest,.rv-spin .rv-dest{animation-delay:.15s}
.rv-dest .cap-photo{width:92px;height:92px;aspect-ratio:auto;border-radius:50%}
.rv-dest .cap-letter{font-size:28px;bottom:50%;transform:translate(-50%,50%)}
.rv-dest .cap-photo.has-media .cap-letter{display:none}
.rv-dest small{display:block;font:800 13px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--night-accent)}
.rv-dest b{display:block;margin:6px 0 4px;font:900 44px/1.05 var(--display)}
.rv-dest span{font-size:19px;color:var(--night-muted)}
@keyframes dest-in{from{transform:translateY(34px) scale(.92);opacity:0}}
.rv-transfer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;max-width:900px;padding:18px 28px;border-radius:var(--r-lg);border:2px dashed color-mix(in srgb,var(--night-ink) 40%,transparent);background:color-mix(in srgb,var(--night) 60%,transparent);font-size:24px;animation:dest-in .6s both}
.rv-transfer .pos{vertical-align:2px}
.rv-transfer small{flex-basis:100%;text-align:center;font-size:17px;color:var(--night-muted)}

.pause-layer{position:absolute;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:color-mix(in srgb,var(--night) 90%,transparent);backdrop-filter:blur(6px)}
.pause-layer .logo-s{width:100px;color:var(--brand)}
.pause-layer b{font:900 110px/1 var(--display);letter-spacing:-.03em}
.pause-layer span{font-size:26px;color:var(--night-muted)}
.sound-gate{position:absolute;right:40px;bottom:20px;z-index:70;display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border-radius:999px;border:1px solid color-mix(in srgb,var(--night-ink) 25%,transparent);background:color-mix(in srgb,var(--night) 85%,transparent);color:var(--night-ink);font:700 15px/1 var(--body);cursor:pointer}
.sound-gate svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.stage-frame>.conn{position:absolute;left:14px;bottom:10px;z-index:70;width:8px;height:8px}

/* ---------------------------------------------------------------- host console */
.host-body{min-height:100vh}
.admin-bar .wrap{gap:16px}
.admin-bar .live-note{margin-left:auto}
.host-main{padding-bottom:48px}
.host-top{padding-block:28px 18px}
.host-top .h2{font-size:40px;margin-top:10px}
.host-progress{width:240px;margin-right:8px}
.host-progress .dp-top{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:600;color:var(--muted)}
.host-progress .dp-top b{font:900 24px/1 var(--display);color:var(--ink)}
.host-progress .seats{margin:8px 0 0;background:var(--surface-2)}
.host-phases{flex-direction:row;flex-wrap:wrap;margin-bottom:22px}
.host-phases li{flex:1 1 160px;min-height:46px}
.rehearsal-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;padding:14px 18px;border-radius:var(--r-md);background:color-mix(in srgb,var(--gold) 16%,var(--surface));border:1px solid color-mix(in srgb,var(--gold) 50%,transparent);font-weight:600}
.action-panel .draw-btn{display:flex;align-items:center;justify-content:center;gap:14px}
.action-panel .draw-btn:disabled{opacity:.6;cursor:wait}
.draw-btn kbd{font:700 12px/1 var(--body);padding:5px 8px;border-radius:7px;background:color-mix(in srgb,var(--on-brand) 22%,transparent);color:var(--on-brand);border:0}
kbd{font:700 12px/1 var(--body);padding:3px 7px;border-radius:6px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink)}
.act-status{font-size:15px;line-height:1.6}
.act-turn{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:16px}
.act-turn small{flex-basis:100%;color:var(--muted);font-size:13px}
.act-turn .chip{cursor:pointer;border:1px solid var(--brand);background:color-mix(in srgb,var(--brand) 10%,var(--bg))}
.act-pot{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:center;padding:16px 20px;border-radius:var(--r-md)}
.act-pot .bowl{max-width:120px}
.act-pot .ball{width:24px;height:24px;margin:-12px 0 0 -12px;font-size:0}
.act-pot b{display:block;font:800 18px/1.3 var(--display)}
.act-pot span{display:block;margin-top:4px;color:var(--night-muted)}
.act-pot span b{display:inline;font:inherit;font-weight:800;color:var(--night-ink)}
.cap-pick{border-width:1px;transition:transform .15s,border-color .2s}
.cap-pick:hover{transform:translateY(-2px);border-color:var(--brand)}
.cap-pick .key{position:absolute;top:8px;left:8px;display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--surface-2);font:800 11px/1 var(--body);color:var(--muted)}
.cap-pick .av-in img,.cap-pick .av-in video{width:100%;height:100%;object-fit:cover}
.cap-pick.away{opacity:.55;border-style:dashed}
.cap-pick.drawn{background:var(--surface);color:var(--muted)}
.cap-pick.cand{border-color:var(--brand);border-style:dashed;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)}
.cap-pick .leave{font-size:11px;font-weight:600;color:var(--brand-ink);text-decoration:underline;cursor:pointer}
.preview-frame{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--night);border:1px solid var(--line)}
.preview-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.host-log{max-height:360px;overflow:auto}
.host-log li{grid-template-columns:72px 1fr auto}
.host-log li.undone span:not(.seq){text-decoration:line-through;color:var(--muted)}
.host-log li.is-undo span{color:var(--brand-ink);font-weight:600}
.host-log .seq{font-size:12px;color:var(--muted)}
.host-keys{margin-top:8px;font-size:13px}
.undo-dialog{max-width:520px;width:calc(100% - 32px);padding:0;border:1px solid var(--line);color:var(--ink)}
.undo-dialog form{display:flex;flex-direction:column;gap:14px;padding:24px}
.undo-dialog::backdrop{background:color-mix(in srgb,var(--ink) 45%,transparent);backdrop-filter:blur(3px)}
.undo-dialog .reasons .chip{cursor:pointer;border:1px solid var(--line)}
@media (max-width:1100px){.host-grid{grid-template-columns:1fr}.admin-bar .btn{padding:0 14px}}
@media (max-width:640px){.host-top .h2{font-size:28px}.cap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-title small,#openStage{display:none}}
.undo-dialog:not([open]){display:none}

/* ---------------------------------------------------------------- results */
.results-hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.results-grid .tcard{padding:18px;gap:6px;border-radius:var(--r-lg)}
.results-grid .tcard-head b{font-size:16px}
.results-grid .slot{font-size:13px}
.results-grid .slot.empty,.results-grid .slot.more{display:none}
.roster.sponsor-card{min-height:240px}
@media print{
  .site-header,.no-print,.floodlight,.pitch-lines{display:none!important}
  body::before{display:none}
  .page-hero{padding-block:16px}
  .results-grid{grid-template-columns:repeat(4,1fr);gap:10px}
  .results-grid .tcard{break-inside:avoid}
  @page{size:A4 landscape;margin:10mm}
}

/* ---------------------------------------------------------------- setup */
.setup-main{display:flex;flex-direction:column;gap:22px;padding-bottom:64px}
.setup-teams{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:14px}
.setup-team{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:14px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--bg)}
.setup-fig{position:relative;width:96px;height:120px;border-radius:12px;overflow:hidden;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--brand) 35%,transparent),transparent 70%),var(--surface-2)}
.setup-fig img,.setup-fig video{width:100%;height:100%;object-fit:cover}
.setup-fig .sil{color:color-mix(in srgb,var(--ink) 30%,transparent);animation:none}
.setup-fig b{position:absolute;left:6px;top:6px;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--brand);color:var(--on-brand);font:900 13px/1 var(--display)}
.setup-fields{display:flex;flex-direction:column;gap:10px;min-width:0}
.setup-cap{display:flex;align-items:center;gap:8px}
.setup-fields .field-row{grid-template-columns:1fr 1fr;gap:10px}
.setup-fields .field input,.setup-fields .field select{min-height:42px;font-size:14px}
.file-btn{cursor:pointer}
.setup-rules{display:flex;flex-direction:column;gap:16px}
.limits-set{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;border:1px solid var(--line);border-radius:var(--r-md);padding:14px}
.limits-set legend{padding:0 6px;font-weight:700;font-size:13px}
.setup-check ul{margin:0;padding:14px 18px 14px 34px;border-radius:var(--r-md);background:var(--bg);border:1px solid var(--line);line-height:1.9;font-size:14px}
.setup-check li.warn{color:var(--gold)}
.setup-check li.bad{color:var(--brand-ink);font-weight:700}
.reset-row{align-items:end;margin-top:6px}
.reset-row .field{min-width:260px}
.btn.danger{border-color:color-mix(in srgb,var(--brand) 60%,var(--line));color:var(--brand-ink)}
.setup-pin{margin:0;font-size:14px}
@media (max-width:640px){.setup-teams{grid-template-columns:1fr}.setup-fields .field-row{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- hub */
.hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.hub-card{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);transition:transform .2s,border-color .2s}
.hub-card:hover{transform:translateY(-3px);border-color:var(--brand)}
.hub-card b{font:900 24px/1.1 var(--display)}
.hub-card span:last-child{font-size:14px;color:var(--muted)}
.hub-card.primary{background:color-mix(in srgb,var(--brand) 8%,var(--surface));border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}

/* ---------------------------------------------------------------- live: the same show, laid out for phones and laptops */
.live-header .wrap{gap:12px}
.live-header .live-note{margin-left:auto}
.sound-toggle{min-height:38px;padding:0 14px;font-size:13px;gap:6px}
.sound-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sound-toggle[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.live-show{padding-block:28px 36px}
.ls-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:18px}
.ls-title{font:900 clamp(40px,8vw,84px)/.95 var(--display);letter-spacing:-.035em;margin:14px 0 0}
.ls-info{margin:10px 0 0;color:var(--night-muted);font-size:clamp(14px,2.4vw,17px)}
.ls-progress{flex:0 1 360px;min-width:240px}
.ls-stage{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:24px;margin-top:24px;align-items:center}
.ls-left .st-cap{height:auto}
.ls-left .st-cap .cap-photo{flex:none;aspect-ratio:4/5}
.ls-left .st-cap-body b{font-size:clamp(22px,3vw,30px)}
.ls-center{min-height:400px;padding:12px 0}
.live-body .st-h{font-size:clamp(28px,5.5vw,52px)}
.live-body .st-sub{font-size:clamp(14px,2.4vw,18px)}
.live-body .st-pots{gap:clamp(16px,4vw,48px);max-width:620px}
.live-body .st-pots .bowl{max-width:min(40vw,260px)}
.live-body .st-pots .ball{--b:clamp(28px,6.5vw,50px);width:var(--b);height:var(--b);margin:calc(var(--b) / -2) 0 0 calc(var(--b) / -2);font-size:clamp(10px,2.2vw,15px)}
.live-body .st-pots .pot-label b{font-size:clamp(16px,3vw,22px)}
.live-body .st-pots .pot-label small{font-size:13px}
.live-body .st-hint{font-size:clamp(14px,2.6vw,20px)}
.live-body .st-rule{flex-wrap:wrap;justify-content:center;font-size:14px}
.live-body .st-caps{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.live-body .st-capmini b{font-size:13px}
.live-body .st-envelopes{flex-wrap:wrap;gap:12px}
.live-body .envelope{width:min(42vw,220px);height:110px}
.live-body .envelope b{font-size:16px}
.live-body .st-wheel{grid-template-columns:1fr;gap:20px;justify-items:center;text-align:center}
.live-body .st-wheel-box{width:min(86vw,52vh,440px)}
.live-body .st-wheel-box .wheel{border-width:8px}
.live-body .st-wheel-box .wheel i{height:30px;margin-top:-15px;line-height:30px;padding:0 8px 0 54px}
.live-body .st-wheel-box .wheel-hub{width:84px;height:84px;margin:-42px 0 0 -42px}
.live-body .st-wheel-box .wheel-hub .logo-s{width:30px}
.live-body .st-wheel-box .wheel-pin{top:-16px;width:32px;height:40px;margin-left:-16px}
.live-body .st-wheel-info .st-h{font-size:clamp(28px,6vw,48px)}
.live-body .st-wheel-order{justify-content:center;flex-wrap:wrap}
.live-body .st-turn{margin-top:16px}
.live-body .st-turn b{font-size:clamp(24px,5vw,36px)}
.live-body .st-done .st-h{font-size:clamp(34px,8vw,72px)}
.live-body .st-done .confetti{inset:-60px -20px}
.ls-board{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.ls-board .tcard{background:var(--surface);border-color:var(--line)}
.ls-feed-title{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ls-feed{max-width:760px}
.live-body .ls-feed li{background:var(--surface);border:1px solid var(--line);font-size:15px}
.live-body .ls-feed li time{color:var(--muted)}
.live-body .ls-feed li.hi{background:color-mix(in srgb,var(--brand) 9%,var(--surface));border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
.ls-feed-sec{padding-block:8px 72px}
.ls-board-sec{padding-block:48px 32px}
.ls-reveal{position:fixed;inset:0;z-index:90}
.ls-reveal .rv-card{gap:16px;padding:0 14px;width:100%;max-width:900px}
.ls-reveal .rv-capsule{transform:scale(1.3);margin:10px 0 6px}
.ls-reveal .rv-slip{min-width:0;width:min(92vw,820px);padding:18px 22px 22px}
.ls-reveal .rv-slip small{font-size:12px}
.ls-reveal .rv-slip .reveal-name{font-size:clamp(34px,10vw,88px);margin:10px 0 12px}
.ls-reveal .rv-slip .reveal-to{font-size:clamp(16px,3.6vw,24px)}
.ls-reveal .rv-dest{padding:10px 22px 10px 10px;gap:14px}
.ls-reveal .rv-dest .cap-photo{width:64px;height:64px}
.ls-reveal .rv-dest b{font-size:clamp(22px,5vw,40px)}
.ls-reveal .rv-dest span{font-size:14px}
.ls-reveal .rv-transfer{width:min(92vw,820px);padding:12px 16px;font-size:clamp(15px,3.4vw,22px)}
.ls-reveal .rv-transfer small{font-size:13px}
.ls-reveal .confetti{inset:-120px -40px}
.ball.fly-fixed{position:fixed;z-index:95;width:44px;height:44px}
.ls-pause{position:fixed;inset:0;z-index:92}
.ls-pause b{font-size:clamp(48px,12vw,110px)}
.ls-pause span{font-size:clamp(16px,3vw,24px)}
@media (max-width:760px){
  .ls-stage{grid-template-columns:1fr;gap:16px}
  .ls-left .st-cap{flex-direction:row}
  .ls-left .st-cap .cap-photo{width:108px;aspect-ratio:auto;min-height:128px}
  .ls-left .st-cap .cap-letter{font-size:30px}
  .ls-left .st-cap-body{justify-content:center;padding:12px 16px}
  .ls-left .st-cap-body span{font-size:13px}
  .ls-center{min-height:0}
  .ls-board{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ls-board .slot.empty{display:none}
  .ls-board .slot.more{display:flex;justify-content:center;min-height:27px;border:1px dashed color-mix(in srgb,var(--night-ink) 14%,transparent);background:transparent;color:var(--night-muted);font-size:12px;font-weight:500}
}
.ls-reveal .rv-dest .cap-photo{min-height:0;flex:none}
.live-body .st-capmini .cap-photo{width:auto;min-height:0;aspect-ratio:4/5}
@media (min-width:1100px){
  .live-body .st-wheel{grid-template-columns:auto minmax(0,1fr);justify-items:start;text-align:left;gap:40px}
  .live-body .st-wheel-order{justify-content:flex-start}
  .ls-stage{grid-template-columns:260px minmax(0,1fr)}
}
.live-show .pitch-lines{display:none}
.stage-bg .pitch-lines{display:none}

/* ---------------------------------------------------------------- updates and screens */
.stale-bar{position:fixed;left:50%;top:88px;z-index:130;display:flex;align-items:center;gap:14px;width:max-content;max-width:calc(100% - 32px);padding:8px 8px 8px 18px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:14px;font-weight:600;box-shadow:0 18px 40px -18px color-mix(in srgb,var(--ink) 60%,transparent);transform:translateX(-50%);animation:toast-in .3s ease-out}
.stale-bar .btn{height:36px;padding:0 16px;flex:none}
.stage-note{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--gold) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);font-size:14px;line-height:1.6}
.dot-off{display:inline-block;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--muted)}
.sound-toggle.nudge{border-color:var(--brand);animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 45%,transparent)}50%{box-shadow:0 0 0 8px transparent}}
@media (prefers-reduced-motion:reduce){.sound-toggle.nudge{animation:none}}
/* the console's title gives way to the controls on narrow windows (split screen, small laptops) */
.admin-title{flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap}
.admin-title small{overflow:hidden;text-overflow:ellipsis}
@media (max-width:1180px){.admin-title small{display:none}}
@media (max-width:900px){.admin-title{display:none}}
/* captain posters: keep the crest at the top in the big card (it crops a little top and bottom otherwise) */
.st-cap .cap-photo .fig-media{object-position:50% 0}
.cap-pick .av-in img.poster{object-position:50% 38%}
.st-capmini .cap-photo.has-media .cap-letter{min-width:26px;height:26px;padding:0 6px;right:6px;bottom:6px;border-radius:8px;font-size:15px}
@media (max-width:760px){.ls-left .cap-photo.has-media .cap-letter{min-width:26px;height:26px;padding:0 6px;right:6px;bottom:6px;border-radius:8px;font-size:15px}}