/* RTB Hopper - live display */
:root{color-scheme:light dark;--ink:#111111;--panel:#1b1b1b;--panel2:#242424;--line:#3f4248;--line2:#2b2d31;--muted:#9ca3af;--soft:#e5e7eb;--cream:#ffffff;--amber:#d61f26;--amber2:#f04b51;--red:#d61f26;--green:#2d9cdb;--shadow:0 24px 70px rgba(0,0,0,.28);--sans:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html{background:#f7f7f5;scroll-behavior:smooth}
body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden;background:radial-gradient(circle at 88% 5%,rgba(214,31,38,.08),transparent 24%),radial-gradient(circle at 4% 100%,rgba(45,156,219,.07),transparent 26%),#f7f7f5;color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.45}
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.32;background-image:repeating-linear-gradient(105deg,transparent 0 46px,rgba(17,17,17,.018) 47px 48px),repeating-linear-gradient(8deg,transparent 0 70px,rgba(17,17,17,.012) 71px 72px)}
button,input{font:inherit}
button{-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible{outline:3px solid rgba(45,156,219,.42);outline-offset:3px}
[hidden]{display:none!important}
.shell{width:min(1780px,100%);min-height:100vh;margin:0 auto;padding:clamp(16px,2.2vw,36px);display:grid;grid-template-rows:auto auto 1fr;gap:clamp(14px,1.7vw,26px)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:20px;min-width:0}
.brand-logo{display:block;width:clamp(102px,10vw,148px);height:auto;flex:0 0 auto}
.brand-copy{min-width:0;border-left:1px solid #d8d8d5;padding-left:20px}
.brand-copy small{display:block;margin-bottom:2px;color:#60636a;font-size:.72rem;font-weight:850;letter-spacing:.17em;text-transform:uppercase}
.brand-copy strong{display:block;overflow:hidden;color:#111111;font-size:clamp(1.05rem,2vw,1.55rem);letter-spacing:.035em;text-overflow:ellipsis;white-space:nowrap}
.utility{display:flex;align-items:center;gap:9px}
.ghost-button{min-height:44px;border:1px solid #d8d8d5;border-radius:999px;background:rgba(255,255,255,.84);color:#111111;cursor:pointer;font-weight:800;text-decoration:none;padding:10px 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.ghost-button svg{width:18px;height:18px}
.ghost-button:hover{border-color:#111111;background:#ffffff}
.tabs{display:grid;grid-template-columns:repeat(var(--tabs,4),minmax(0,1fr));gap:8px;padding:7px;border:1px solid #e8e8e5;border-radius:17px;background:rgba(255,255,255,.9);box-shadow:0 14px 40px rgba(17,17,17,.08)}
.tab{position:relative;min-height:48px;border:0;border-radius:11px;background:transparent;color:#666a72;cursor:pointer;font-size:.94rem;font-weight:900;letter-spacing:.02em}
.tab:not(:disabled):hover{color:#111111;background:#f1f1ef}
.tab:disabled{cursor:not-allowed;opacity:.4}
.tab.active{background:var(--amber);color:#ffffff;box-shadow:0 8px 26px rgba(214,31,38,.2)}
.tab.done:not(.active):after{content:"";position:absolute;top:10px;right:12px;width:7px;height:7px;border-radius:50%;background:var(--green)}
.stage{position:relative;isolation:isolate;overflow:hidden;min-width:0;min-height:0;border:1px solid var(--line);border-radius:22px;background:linear-gradient(150deg,rgba(30,30,30,.98),rgba(13,13,13,.99));color:var(--cream);box-shadow:var(--shadow)}
.stage:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('../img/rtb-logo-white.png') no-repeat 98% 108%/min(39vw,620px) auto;opacity:.025;transform:rotate(-2deg)}
.stage-inner{min-width:0;min-height:100%;padding:clamp(22px,3vw,46px);display:grid;align-content:start}
.event-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.kicker{margin:0 0 7px;color:var(--amber2);font-size:.8rem;font-weight:950;letter-spacing:.18em;text-transform:uppercase}
.event-title{margin:0;font-size:clamp(2.5rem,5.2vw,5.4rem);font-weight:950;letter-spacing:-.07em;line-height:.9;text-transform:uppercase}
.event-sub{margin:12px 0 0;color:var(--soft);font-size:clamp(.96rem,1.2vw,1.12rem);font-weight:650}
.meta{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}
.pill{border:1px solid var(--line);border-radius:999px;padding:8px 11px;background:#121319;color:#c9ccd2;font-size:.82rem;font-weight:800;white-space:nowrap}
.draw-grid{align-self:center;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,20px);margin:clamp(28px,4vw,56px) 0}
.draw-card{position:relative;overflow:hidden;min-width:0;min-height:clamp(128px,15vh,180px);border:1px solid #363b47;border-radius:15px;background:linear-gradient(160deg,#242424,#171717);padding:17px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 18px 40px rgba(0,0,0,.22);transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.draw-card:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 25%,rgba(255,255,255,.065),transparent 75%);transform:translateX(-130%)}
.draw-card.active{border-color:var(--amber);transform:translateY(-3px);box-shadow:0 0 0 1px rgba(214,31,38,.24),0 20px 60px rgba(214,31,38,.12)}
.draw-card.active:after{animation:sweep .75s linear infinite}
.draw-card.revealed{border-color:#555c69}
.draw-card.just-revealed{animation:lock-in .55s cubic-bezier(.2,.8,.2,1)}
.card-number{color:#6e7480;font-size:.74rem;font-weight:950;letter-spacing:.14em}
.card-label{margin-bottom:6px;color:var(--muted);font-size:.76rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.card-value{max-width:19ch;overflow-wrap:anywhere;color:var(--cream);font-size:clamp(1.15rem,2vw,1.82rem);font-weight:950;letter-spacing:-.035em;line-height:1.05;text-transform:uppercase}
.draw-card.pending .card-value{color:#5e6470}
.draw-card.active .card-value{color:var(--amber2)}
.card-levels{display:grid;gap:4px;margin-top:11px;padding-top:10px;border-top:1px solid #34373e;color:var(--soft);font-size:clamp(.78rem,.92vw,.95rem);font-weight:720;line-height:1.22}
.card-levels span{display:flex;align-items:baseline;gap:8px}
.card-levels b{flex:0 0 9.6em;color:var(--amber2);font-size:.74em;font-weight:950;letter-spacing:.1em;text-transform:uppercase}
.actions{display:flex;align-items:center;gap:15px}
.draw-button{position:relative;flex:1;min-height:66px;overflow:hidden;border:0;border-radius:15px;background:var(--amber);color:#ffffff;cursor:pointer;font-size:clamp(1rem,1.75vw,1.32rem);font-weight:950;letter-spacing:.055em;text-transform:uppercase;box-shadow:0 10px 34px rgba(214,31,38,.21)}
.draw-button:before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.35),transparent 65%);transform:translateX(-110%)}
.draw-button:hover:before{animation:sweep .8s ease}
.draw-button:active{transform:translateY(1px)}
.draw-button:disabled{background:#4e525c;color:#989da6;cursor:default;box-shadow:none}
.draw-button:disabled:before{display:none}
.action-note{max-width:30ch;margin:0;color:var(--muted);font-size:.84rem}
.live-note{margin:0;color:var(--soft);font-size:.95rem;font-weight:720}
.live-note:before{content:"";display:inline-block;width:8px;height:8px;margin-right:9px;border-radius:50%;background:var(--amber);vertical-align:middle;animation:live-pulse 1.6s ease-in-out infinite}
.key{display:inline-block;margin-top:5px;border:1px solid #3b404c;border-bottom-width:2px;border-radius:5px;padding:2px 7px;color:#c9ccd2;font-size:.72rem;font-weight:850}
.hopper-overlay{position:absolute;inset:0;z-index:30;overflow:hidden;display:grid;place-items:center;padding:28px;background:radial-gradient(circle at center,rgba(214,31,38,.22),transparent 34%),rgba(5,5,5,.94);backdrop-filter:blur(11px);animation:hopper-in .24s ease both}
.hopper-overlay:after{content:"";position:absolute;left:-10%;width:120%;height:2px;background:linear-gradient(90deg,transparent,rgba(240,75,81,.9),transparent);box-shadow:0 0 28px rgba(214,31,38,.8);animation:hopper-scan .72s ease-in-out infinite alternate}
.hopper-orbit{position:absolute;width:min(58vw,620px);aspect-ratio:1;border:2px solid rgba(214,31,38,.45);border-left-color:transparent;border-radius:50%;animation:hopper-ring .9s linear infinite}
.hopper-orbit:before,.hopper-orbit:after{content:"";position:absolute;border-radius:50%}
.hopper-orbit:before{inset:7%;border:1px solid rgba(45,156,219,.42);border-right-color:transparent;animation:hopper-ring-reverse 1.25s linear infinite}
.hopper-orbit:after{inset:20%;border:1px solid rgba(255,255,255,.18);box-shadow:0 0 80px rgba(214,31,38,.22)}
.hopper-core{position:relative;z-index:2;width:min(1120px,92%);text-align:center}
.hopper-kicker{margin:0 0 10px;color:#f04b51;font-size:clamp(.76rem,1.35vw,1rem);font-weight:950;letter-spacing:.28em;text-transform:uppercase}
.hopper-value{margin:0;overflow-wrap:anywhere;color:#ffffff;font-size:clamp(2.5rem,7.5vw,8rem);font-weight:950;letter-spacing:-.065em;line-height:.87;text-transform:uppercase;text-shadow:0 0 38px rgba(214,31,38,.3);animation:hopper-word .14s ease both}
.hopper-overlay.locking{background:radial-gradient(circle at center,rgba(214,31,38,.5),transparent 38%),rgba(5,5,5,.96)}
.hopper-overlay.locking .hopper-kicker{color:#ffffff}
.hopper-overlay.locking .hopper-value{animation:hopper-lock .68s cubic-bezier(.16,.84,.32,1) both;text-shadow:0 0 22px rgba(214,31,38,.8),0 0 70px rgba(214,31,38,.55)}
.hopper-overlay.locking .hopper-orbit{border-color:#d61f26;animation:hopper-ring-lock .68s cubic-bezier(.2,.8,.2,1) both}
.stage.hopper-impact{animation:stage-impact .48s cubic-bezier(.2,.8,.2,1)}
.result-panel{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);gap:clamp(18px,2.5vw,36px);margin-top:clamp(24px,3vw,42px);padding-top:clamp(22px,2.5vw,34px);border-top:1px solid var(--line);animation:rise .5s ease both}
.result-eyebrow{margin:0 0 5px;color:var(--amber2);font-size:.76rem;font-weight:950;letter-spacing:.17em;text-transform:uppercase}
.result-title{margin:0 0 22px;font-size:clamp(2rem,4vw,4rem);font-weight:950;letter-spacing:-.055em;line-height:.95;text-transform:uppercase}
.workout-list{margin:0;padding:0;list-style:none;counter-reset:work;display:grid;gap:9px}
.workout-list li{display:flex;align-items:baseline;gap:12px;font-size:clamp(1.02rem,1.7vw,1.35rem);font-weight:800}
.workout-list li:before{counter-increment:work;content:counter(work,decimal-leading-zero);min-width:25px;color:#6f7581;font-size:.72rem;font-weight:900;letter-spacing:.08em}
.level-line{display:flex;flex-wrap:wrap;gap:2px 18px;margin-top:4px;color:var(--soft);font-size:clamp(.8rem,.95vw,1rem);font-weight:700}
.level-line b{margin-right:6px;color:var(--amber2);font-size:.72em;font-weight:950;letter-spacing:.12em;text-transform:uppercase}
.team-rule{margin:20px 0 0;border-left:3px solid var(--amber);padding:3px 0 3px 14px;color:var(--soft);font-size:1rem;font-weight:720}
.result-side{display:grid;align-content:start;gap:12px}
.info-card{border:1px solid var(--line);border-radius:13px;background:rgba(13,14,18,.68);padding:15px}
.info-card h3{margin:0 0 7px;color:var(--muted);font-size:.72rem;font-weight:950;letter-spacing:.13em;text-transform:uppercase}
.info-card p{margin:0;color:var(--cream);font-size:.94rem;font-weight:690}
/* The shared toast (toast.css) sits bottom-right here, clear of the header buttons. */
body .admin-toast-stack{top:auto;right:20px;bottom:calc(20px + env(safe-area-inset-bottom))}
.confetti-piece{position:fixed;z-index:60;top:-20px;width:9px;height:18px;border-radius:2px;pointer-events:none;animation:confetti-fall var(--fall,2.7s) cubic-bezier(.2,.7,.2,1) forwards}
@keyframes live-pulse{50%{opacity:.25}}
@keyframes sweep{to{transform:translateX(130%)}}
@keyframes lock-in{0%{transform:scale(.96);filter:brightness(1.8)}70%{transform:scale(1.025)}100%{transform:scale(1);filter:brightness(1)}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes confetti-fall{to{transform:translate3d(var(--drift,0),110vh,0) rotate(var(--spin,720deg));opacity:.15}}
@keyframes hopper-in{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}
@keyframes hopper-ring{to{transform:rotate(360deg)}}
@keyframes hopper-ring-reverse{to{transform:rotate(-360deg)}}
@keyframes hopper-scan{from{top:18%}to{top:82%}}
@keyframes hopper-word{from{opacity:.25;transform:scale(.94);filter:blur(4px)}to{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes hopper-lock{0%{opacity:.25;transform:scale(1.28);filter:blur(8px)}45%{opacity:1;transform:scale(.94);filter:blur(0)}70%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes hopper-ring-lock{0%{transform:rotate(0) scale(1)}55%{transform:rotate(220deg) scale(.78);opacity:1}100%{transform:rotate(260deg) scale(1.35);opacity:0}}
@keyframes stage-impact{0%{transform:scale(1)}32%{transform:scale(.992)}68%{transform:scale(1.006)}100%{transform:scale(1)}}
@media(min-width:1180px) and (min-height:820px){.stage:not(.complete) .stage-inner{align-content:space-between}
.stage.complete .draw-grid{grid-template-columns:repeat(auto-fit,minmax(155px,1fr));margin:24px 0 0}
.stage.complete .draw-card{min-height:108px;padding:13px}
.stage.complete .card-value{font-size:clamp(1rem,1.32vw,1.35rem)}
.stage.complete .card-levels{margin-top:7px;padding-top:7px;font-size:.78rem}}
@media(max-width:820px){.shell{padding:14px;gap:13px}
.topbar{align-items:flex-start}
.brand-copy small{display:none}
.utility .ghost-button span{display:none}
.utility .ghost-button{width:46px;padding:0}
.tabs{grid-template-columns:repeat(var(--tabs,4),minmax(72px,1fr));overflow-x:auto}
.tab{font-size:.84rem}
.event-head{align-items:flex-start;flex-direction:column}
.meta{justify-content:flex-start}
.draw-grid{grid-template-columns:1fr 1fr}
.actions{align-items:stretch;flex-direction:column}
.action-note{max-width:none;text-align:center}
.result-panel{grid-template-columns:1fr}}
@media(max-width:520px){.brand{gap:10px}
.brand-logo{width:84px}
.brand-copy{padding-left:10px}
.brand-copy strong{font-size:.88rem}
.utility{gap:6px}
.utility .ghost-button{width:42px;min-height:42px}
.stage-inner{padding:19px}
.event-title{font-size:clamp(2.25rem,13vw,3.6rem)}
.draw-grid{grid-template-columns:1fr;margin:24px 0}
.draw-card{min-height:116px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body.tv-mode .shell{width:100%;padding:20px 28px}body.tv-mode .utility{opacity:.24;transition:opacity .2s ease}body.tv-mode .utility:hover{opacity:1}body.tv-mode .event-title{font-size:clamp(3.2rem,5.6vw,6.4rem)}body.tv-mode .key{display:none}body.tv-mode.draw-complete .topbar{display:none}body.tv-mode.draw-complete .shell{grid-template-rows:auto 1fr;gap:12px}body.tv-mode.draw-complete .stage-inner{padding:24px 34px}body.tv-mode.draw-complete .event-title{font-size:clamp(2.8rem,4.2vw,4.7rem)}body.tv-mode.draw-complete .result-panel{margin-top:18px;padding-top:18px}body.tv-mode.draw-complete .result-title{font-size:clamp(2.4rem,3.5vw,3.8rem);margin-bottom:14px}