/* Quiet transitions; a single central eye line. Durations in one place. */
.host-intro{--hi-transition:240ms;--hi-ease:cubic-bezier(.2,.7,.2,1);display:grid!important;grid-template-rows:auto minmax(0,1fr) 70px auto;gap:16px;padding:28px 5% 24px!important;height:100%;width:100%;box-sizing:border-box;background:radial-gradient(ellipse at 50% 40%,#241816 0,#0b0a0c 70%);overflow:hidden;color:var(--bone,#f4ecdf)}
.hi-head,.hi-foot,.hi-controls{display:flex;align-items:center;gap:18px}.hi-head{justify-content:space-between}.hi-head>span,.hi-kicker{font-size:calc((12px) * var(--text-scale,1));letter-spacing:.22em;color:#c5b5a0}.host-intro button{font:inherit;font-size:calc((13px) * var(--text-scale,1));padding:10px 14px;color:#f4ecdf;border:1px solid #66564b;border-radius:3px;background:#171312;cursor:pointer}.host-intro button:hover,.host-intro button:focus-visible{border-color:#f7e029;outline:2px solid #f7e029;outline-offset:3px}.hi-screen{min-height:0;display:grid;place-items:center;animation:hi-enter var(--hi-transition) var(--hi-ease)}
.hi-title{text-align:center}.hi-title h1{font-size:clamp(70px,10cqw,140px);line-height:.91;margin:26px 0 0}.hi-title em{font-style:normal;color:#dc3225}.hi-title h1 em{font-family:var(--font-slaughter,'Metal Mania'),serif}.hi-demo{width:min(100%,980px);text-align:center}.hi-demo h2{font-size:clamp(25px,3.4cqw,42px);margin:20px 0 8px;line-height:1.08}.hi-quote{font-size:clamp(23px,3.1cqw,42px);line-height:1.3;max-width:900px;margin:26px auto}.hi-slot{color:#f7e029;border-bottom:2px solid #b79843;padding:0 6px}.hi-slot.filled{background:#f7e029;color:#18130b;border-radius:3px}.hi-hand{display:flex;gap:20px;justify-content:center;margin:25px auto 0;opacity:0;transform:translateY(16px);transition:opacity var(--hi-transition),transform var(--hi-transition)}.hi-hand.shown{opacity:1;transform:none}.hi-card{width:210px;min-height:150px;padding:17px 18px;text-align:left;display:flex;flex-direction:column;justify-content:space-between;background:#e9deca;color:#211714;border:3px solid #b5a386;border-radius:5px;transition:transform var(--hi-transition),border-color var(--hi-transition),opacity var(--hi-transition)}.hi-card small{font:calc(10px * var(--text-scale,1)) monospace;letter-spacing:.18em}.hi-card b{font-family:'Archivo Black',sans-serif;font-size:calc((22px) * var(--text-scale,1));line-height:1.14}.hi-card.selected{border-color:#f7e029;transform:translateY(-10px);box-shadow:0 0 0 2px #f7e029}.hi-caption{font-size:calc((clamp(17px,1.9cqw,25px)) * var(--text-scale,1));line-height:1.4;text-align:center;max-width:940px;justify-self:center;align-self:center;min-height:2.8em;display:grid;place-items:center}.hi-foot{width:100%}.hi-controls{gap:8px;flex-shrink:0}.hi-progress{height:3px;background:#49372d;flex:1}.hi-progress i{height:100%;display:block;background:#f7e029}.hi-status{min-width:30px;font-size:calc((11px) * var(--text-scale,1));color:#bfae99}.hi-note{font-size:calc((16px) * var(--text-scale,1));color:#c5b5a0;margin-top:22px}.hi-ranks,.hi-cut-pair,.hi-acts,.hi-lives{display:flex;justify-content:center;gap:24px;margin:32px 0}.hi-rank{width:170px;border:1px solid #6a5444;padding:20px;display:grid;gap:9px;opacity:.4;transition:opacity var(--hi-transition),border-color var(--hi-transition)}.hi-rank.lit{opacity:1;border-color:#f7e029}.hi-rank span{font-size:calc((25px) * var(--text-scale,1))}.hi-rank strong{font:70px/1 'Anton',sans-serif;color:#f7e029}.hi-rank small{letter-spacing:.2em}.hi-cut-card{display:grid;gap:15px;min-width:240px;border:2px solid #664738;padding:22px;opacity:.35;transition:opacity var(--hi-transition)}.hi-cut-card.marked{opacity:1;border-color:#dd493d}.hi-cut-card span{font-size:55px}.hi-cut-card strong{font:calc(35px * var(--text-scale,1)) 'Anton',sans-serif;color:#ef6757}.hi-cut-card.safe.marked{border-color:#f7e029}.hi-cut-card.safe strong{color:#f7e029}.hi-lives span{font-size:80px;color:#f7e029;transition:opacity var(--hi-transition)}.hi-lives .spent{opacity:.16}.hi-director{display:inline-block;min-width:320px;background:#ba2922;color:#fff4de;padding:30px 40px;border:2px solid #e5775e;margin-top:25px;transform:rotate(-2deg)}.hi-director small{letter-spacing:.2em}.hi-director p{font-size:calc((20px) * var(--text-scale,1))}.hi-acts span{display:grid;gap:15px;border:1px solid #806b55;padding:20px;min-width:130px}.hi-acts b{font:45px 'Anton',sans-serif}.hi-acts .lit{background:#f7e029;color:#241b0c}
@keyframes hi-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.reduce-motion .host-intro *{animation:none!important;transition:none!important;transform:none!important}
@media(prefers-reduced-motion:reduce){.host-intro *{animation:none!important;transition:none!important;transform:none!important}}
@media(max-width:700px){.host-intro{padding:16px!important;gap:10px;grid-template-rows:auto minmax(0,1fr) 78px auto}.hi-head>span{font-size:calc((9px) * var(--text-scale,1))}.hi-card{width:30%;min-height:115px;padding:10px}.hi-card b{font-size:calc((16px) * var(--text-scale,1))}.hi-hand{gap:10px}.hi-cut-card{min-width:0;flex:1;padding:15px}.hi-rank{width:auto;padding:15px}.hi-acts{gap:8px}.hi-acts span{min-width:0;padding:12px}.hi-foot{flex-wrap:wrap}.hi-controls{gap:5px}.hi-controls button{font-size:calc((11px) * var(--text-scale,1));padding:8px}.hi-note{font-size:calc((13px) * var(--text-scale,1))}.hi-title h1{font-size:75px}.hi-caption{font-size:calc((18px) * var(--text-scale,1))}}
/* The tutorial is an automatic performance of the production interface. */
.hi-screen{width:100%;height:100%}.hi-game-demo{position:relative;isolation:isolate;width:100%;height:100%;min-height:0;display:flex;padding-top:18px;box-sizing:border-box}.hi-game-surface{width:100%;height:100%;display:flex;min-height:0;pointer-events:none}.hi-autoplay{position:absolute;top:0;right:16px;font-size:calc((9px) * var(--text-scale,1));letter-spacing:.15em;color:#9b8e7e}.hi-game-surface .round-compose,.hi-game-surface .round-ballot{padding:0 4px;gap:8px;width:100%;height:100%;box-sizing:border-box}.hi-game-surface .compose-prompt{flex:0 0 105px;max-height:105px}.hi-game-surface .compose-prompt .prompt-quote{font-size:calc((23px) * var(--text-scale,1))}.hi-game-surface .compose-hand{gap:8px}.hi-game-surface .compose-hand .vhs .answer-text{font-size:calc((18px) * var(--text-scale,1))}.hi-game-surface .compose-hand .vhs .sleeve{padding:7px 10px}.hi-game-surface .compose-hand .vhs .foot,.hi-game-surface .compose-hand .vhs .barcode,.hi-game-surface .compose-hand .vhs .ref{display:none}.hi-game-surface .round-action-bar{min-height:38px;padding:5px 0}.hi-game-surface .round-action-bar .btn{padding:8px 14px;font-size:calc((15px) * var(--text-scale,1));min-width:170px}.hi-game-surface .round-heading .phase-title{font-size:calc((25px) * var(--text-scale,1))}.hi-game-surface .ballot-instruction{font-size:calc((12px) * var(--text-scale,1))}.hi-game-surface .ballot-workspace{gap:15px}.hi-game-surface .take-spotlight{padding:12px;gap:8px}.hi-game-surface .take-reading{padding:12px}.hi-game-surface .take-reading .combo{font-size:calc((25px) * var(--text-scale,1))}.hi-game-surface .take-choice{padding:8px;gap:5px}.hi-game-surface .take-choice-text{font-size:calc((16px) * var(--text-scale,1))}.hi-game-surface .cut-explanation{font-size:calc((11px) * var(--text-scale,1))}.hi-game-surface .ballot-summary{gap:14px;font-size:calc((12px) * var(--text-scale,1))}.hi-game-surface .take-controls .btn{font-size:calc((13px) * var(--text-scale,1));padding:8px}.hi-game-surface button{font-family:inherit;border-radius:3px}.hi-game-surface .btn.gold{background:var(--chroma-c);color:var(--ink);border-color:var(--chroma-c)}.hi-demo-picked .compose-prompt{outline:1px solid var(--chroma-c);outline-offset:2px}.hi-demo-picked .round-action-bar .btn{box-shadow:0 0 0 2px var(--chroma-c)}.hi-demo-reveals .take-controls,.hi-demo-reveals .ballot-summary,.hi-demo-reveals .ballot-instruction,.hi-demo-reveals .round-action-bar{opacity:.25}.hi-demo-ranks .ballot-summary{border-bottom:2px solid var(--chroma-c);padding-bottom:5px}.hi-demo-cut .cut-selected{outline:2px solid #e55c4d;outline-offset:2px}.hi-demo-self .take-controls .btn:first-child{outline:2px solid #e55c4d;outline-offset:2px}.hi-nice-try{position:absolute;z-index:2;left:22%;bottom:95px;padding:8px 20px;border:3px solid #ef5444;color:#ef5444;background:#19100ee8;font-size:calc((32px) * var(--text-scale,1));transform:rotate(-8deg);animation:hi-enter 180ms var(--hi-ease);pointer-events:none}.hi-real-prompt{width:100%}.hi-real-prompt .prompt-card{margin:20px auto 0}.hi-real-prompt .prompt-quote{font-size:calc((40px) * var(--text-scale,1))}.hi-real-cut .hi-demo-score{margin:35px auto;display:flex;justify-content:center}.hi-real-cut .player-tile{width:min(100%,320px);flex:0 1 320px;grid-template-columns:64px minmax(0,1fr) auto;grid-template-rows:32px 32px}.hi-real-cut .player-tile .pt-avatar{width:64px!important;height:64px!important}.hi-real-cut .player-tile .nm{display:flex;align-items:center;padding:0 10px;font-size:calc(16px * var(--text-scale,1))}.hi-real-cut .player-tile .sc{margin-right:10px;font-size:calc(24px * var(--text-scale,1))}.hi-real-cut .player-tile .take-meter{margin:0 10px;gap:6px}.hi-real-cut .take-meter .tk{width:20px;height:20px;flex:0 0 20px;aspect-ratio:1}.hi-real-cut .take-meter .tk::after{inset:5px}.hi-real-cut .cut-banner{margin:20px auto;padding:20px;max-width:700px}.hi-real-cut .ballot-summary{justify-content:center;font-size:calc((18px) * var(--text-scale,1))}.hi-real-cut .hi-note{margin-top:20px}.hi-head{width:100%}

.hi-director{position:relative}.hi-studio-note{position:absolute;right:-70px;top:75px;background:#e5d49e;color:#332514;padding:18px 24px;line-height:1.7;transform:rotate(9deg);box-shadow:3px 5px 0 #0005;font-size:calc((13px) * var(--text-scale,1));animation:hi-enter 220ms var(--hi-ease)}.hi-revenge-stamp{min-height:24px;margin-top:18px;color:var(--chroma-c);font-size:calc((13px) * var(--text-scale,1));letter-spacing:.16em}

/* Reuse the live Director bump, contained above the tutorial captions/controls.
   Negative delays sample its existing animations from narration time. */
.hi-director-demo{position:relative;isolation:isolate;width:100%;height:100%;min-height:0;overflow:hidden;border-radius:5px}
.hi-director-surface{position:absolute;inset:0;pointer-events:none}
.hi-director-demo .event-veil{position:absolute;inset:0;padding:12px;z-index:0}
.hi-director-demo .event-veil,.hi-director-demo .event-veil *{animation-play-state:paused;animation-delay:calc(-1 * var(--hi-event-time))}
.hi-director-demo .evt-alert{padding:14px;width:100%}
.hi-director-demo .alert-title{font-size:clamp(45px,9cqw,104px)}
.hi-director-demo .alert-bars{margin:12px auto}
.hi-director-demo .clap{width:min(650px,86%)}
.hi-director-demo .clap-body{padding:20px 26px}
.hi-director-demo .clap-name{font-size:clamp(32px,4.5cqw,54px)}
.hi-director-demo .hi-studio-note{z-index:1;right:6%;top:auto;bottom:12px;margin:0;animation:none}
