/* JACKERDY! — game-show board styling. System fonts only (no external font files). */
:root{
  --board:#060ce9;          /* classic board blue */
  --board-hi:#1d25ff;
  --board-lo:#0409a8;
  --used:#0409b4;
  --gold:#f3b53b;           /* dollar values */
  --ink:#fff;
  --muted:#aab0e6;
  --line:#000;
  --page:#00001e;           /* off-board background */
  --surface:#07097a;
  --surface-2:#0a0f9a;
  --edge:#2a30c8;
  --good:#1c9b4b;
  --bad:#c8102e;
  --display:Impact,'Haettenschweiler','Arial Narrow Bold','Franklin Gothic Heavy',sans-serif;
  --clue:'ITC Korinna','Korinna',Georgia,'Times New Roman',serif;
  --ui:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --hand:'Marker Felt','Segoe Print','Bradley Hand','Comic Sans MS',cursive;
}
*{box-sizing:border-box}
html{color-scheme:dark;background:var(--page)}
body{margin:0;color:var(--ink);font-family:var(--ui);background:var(--page);min-height:100dvh}
button,input,textarea,select{font:inherit}
h1,h2,h3,p{margin:0}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}

/* Buttons: flat, square, uppercase — scoreboard hardware, not app chrome. */
button,a.button{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid var(--edge);border-radius:2px;background:var(--surface);color:var(--ink);padding:12px 18px;min-height:50px;font-family:var(--ui);font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;touch-action:manipulation;text-decoration:none}
button:hover,a.button:hover{background:var(--surface-2);border-color:#4a52ff;text-decoration:none}
button:active{translate:0 1px}
button:disabled{opacity:.35;cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
button.primary,a.button.primary{background:var(--gold);border-color:var(--gold);color:#000}
button.primary:hover,a.button.primary:hover{background:#ffc651;border-color:#ffc651}
button.good{background:var(--good);border-color:var(--good)}
button.bad{background:var(--bad);border-color:var(--bad)}
button.big{min-height:64px;font-size:18px;width:100%}
input,textarea,select{background:#000026;border:2px solid var(--edge);border-radius:2px;padding:13px 14px;color:#fff;width:100%;font-size:18px}
input:focus,textarea:focus{outline:none;border-color:var(--gold)}
label{display:block;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:16px 0 8px}

.logo{font-family:var(--display);font-weight:400;line-height:.9;letter-spacing:.01em;color:#fff;text-shadow:.04em .05em 0 var(--board-lo),.08em .1em 0 #000}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.gold{color:var(--gold)}
.muted{color:var(--muted)}
.small,small{font-size:14px;line-height:1.5;color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.pill.ok{color:#7ee2a2}
.pill.warn{color:var(--gold)}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.spread{justify-content:space-between}
.stack{display:grid;gap:12px}
.panel{background:var(--surface);border:2px solid #000;outline:2px solid var(--edge);outline-offset:-4px;padding:24px}
details{border-top:2px solid #000;box-shadow:0 -2px 0 var(--surface) inset;margin-top:0}
details:first-of-type{margin-top:24px}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:18px 0;font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';font-size:22px;color:var(--gold);line-height:1}
details[open]>summary::after{content:'–'}
details[open]{padding-bottom:22px}

.qr{background:#fff;padding:6px;width:130px;height:130px;flex-shrink:0}
.qr svg{display:block;width:100%;height:100%}
.join-code{font-family:var(--display);font-size:36px;letter-spacing:.08em;line-height:1}
.connection{position:fixed;top:0;left:0;right:0;padding:10px;text-align:center;background:var(--bad);font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;z-index:100}
.connection:empty{display:none}
#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#fff;color:#000;padding:14px 22px;border-radius:2px;z-index:200;max-width:90%;box-shadow:0 6px 30px #0009;font-weight:700}
#toast:empty{display:none}

/* ---------- The board (shared by TV and host) ---------- */
.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:1.15fr repeat(5,1fr);gap:var(--gap,.5vw);height:100%;min-height:0;background:var(--line);padding:var(--gap,.5vw)}
.category,.tile{background:var(--board);box-shadow:inset 0 0 1.4vw #0006;min-width:0;min-height:0}
.category{display:flex;align-items:center;justify-content:center;text-align:center;padding:.4em;font-family:var(--display);font-size:clamp(16px,2.1vw,44px);line-height:1.02;letter-spacing:.02em;text-transform:uppercase;color:#fff;text-shadow:.07em .07em 0 #000;overflow-wrap:anywhere;margin-bottom:calc(var(--gap,.5vw) * 1.2)}
.tile{display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:clamp(28px,4.6vw,96px);color:var(--gold);letter-spacing:.01em;text-shadow:.06em .06em 0 #000;border:0;border-radius:0;padding:0}
.tile.used{color:transparent;text-shadow:none}
.tv .tile:not(.used){animation:tile-in .35s both;animation-delay:calc(var(--i) * 22ms)}
@keyframes tile-in{from{opacity:0}to{opacity:1}}

/* ---------- Theater display ---------- */
.tv{height:100dvh;min-height:600px;display:grid;grid-template-rows:minmax(0,1fr) var(--podium-h,clamp(140px,21vh,230px));gap:1.1vw;padding:1.1vw;background:#000;overflow:hidden}
.tv.controls-idle{cursor:none}
.stage{position:relative;min-height:0;overflow:hidden;background:var(--line)}

.clue-stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4vw 7vw;text-align:center;background:var(--board);box-shadow:inset 0 0 6vw #0007;animation:clue-in .45s cubic-bezier(.2,.8,.2,1) both;transform-origin:var(--ox,50%) var(--oy,50%)}
@keyframes clue-in{from{transform:scale(.2)}to{transform:scale(1)}}
.clue-meta{position:absolute;top:2.2vw;left:0;right:0;font-family:var(--display);font-size:clamp(18px,1.7vw,34px);letter-spacing:.06em;text-transform:uppercase;color:#fff;opacity:.85;text-shadow:.07em .07em 0 #000}
.clue-meta b{color:var(--gold);font-weight:400;margin-left:.6em}
.clue-text{font-family:var(--clue);font-weight:700;text-transform:uppercase;font-size:clamp(30px,3.7vw,78px);line-height:1.22;letter-spacing:.01em;color:#fff;text-shadow:.05em .05em 0 #000;max-width:1500px;overflow-wrap:anywhere}
.clue-text.long{font-size:clamp(24px,2.9vw,58px)}
.answer-reveal{font-family:var(--clue);font-weight:700;text-transform:uppercase;font-size:clamp(24px,2.6vw,54px);color:var(--gold);text-shadow:.05em .05em 0 #000;margin-top:2.4vw;max-width:100%;overflow-wrap:anywhere}
.clue-status{position:absolute;left:0;right:0;bottom:2.2vw;display:flex;flex-direction:column;align-items:center;gap:1vw}
.clue-status:empty{display:none}
.buzz-name{font-family:var(--hand);font-size:clamp(28px,3vw,64px);line-height:1.1;color:#fff;background:#000c;padding:.15em .8em;border:3px solid #fff;overflow-wrap:anywhere;max-width:80%}
.stage-note{font-family:var(--display);font-size:clamp(20px,1.8vw,38px);letter-spacing:.08em;color:#fff;text-shadow:.07em .07em 0 #000}
/* Buzzers open: the board's side lights come on. */
.clue-stage.open::before,.clue-stage.open::after{content:'';position:absolute;top:0;bottom:0;width:.7vw;background:#fff;box-shadow:0 0 2vw #fff,0 0 4vw #9fb4ff}
.clue-stage.open::before{left:0}
.clue-stage.open::after{right:0}
/* Answer timer: nine lights that go out from the edges in. */
.lights{display:flex;gap:.45vw}
.lights i{width:3.2vw;max-width:64px;height:1.1vw;max-height:22px;background:#3a0008;border:2px solid #000}
.lights i.on{background:#ff2b3d;box-shadow:0 0 1vw #ff2b3d}
.lights.out i{background:#3a0008;box-shadow:none}

.finished{background:var(--board)}
.finished .eyebrow{font-family:var(--display);font-size:clamp(20px,2vw,40px);letter-spacing:.1em;color:#fff;margin-bottom:1vw}
.finished .winner-title{font-family:var(--display);font-size:clamp(50px,7vw,150px);line-height:.95;color:var(--gold);text-shadow:.05em .05em 0 #000;overflow-wrap:anywhere}
.finished .winner-score{font-family:var(--display);font-size:clamp(28px,3vw,60px);color:#fff;margin-top:1vw;text-shadow:.06em .06em 0 #000}
.finished .snapshots{display:flex;gap:1vw;margin-top:2.5vw;height:34%}
.finished .snapshots img{height:100%;aspect-ratio:3/4;object-fit:cover;border:.4vw solid #fff;box-shadow:.4vw .4vw 0 #000}

/* Podiums: one per team, sized to fit however many teams there are. */
.podium-bar{display:grid;grid-template-columns:minmax(0,1fr) clamp(110px,9.5vw,190px);grid-template-rows:minmax(0,1fr);gap:1.1vw;min-height:0}
.podiums{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:.8vw;min-height:0;height:100%}
.podiums.empty{display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:clamp(20px,1.8vw,36px);letter-spacing:.08em;color:#5d63c9;border:2px dashed #20259a}
.podium{container-type:size;display:grid;grid-template-rows:1fr 1.05fr;min-width:0;min-height:0;background:#1c1c24;padding:.35vw;gap:.35vw;border:2px solid #34343e}
.podium-score{display:flex;align-items:center;justify-content:center;background:var(--board-lo);box-shadow:inset 0 0 1.2vw #000a;font-family:var(--display);font-size:min(34cqh,25cqi);letter-spacing:.02em;color:#fff;text-shadow:.05em .05em 0 #000;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
.podium-score.neg{color:#ff5a6a}
.podium-name{display:flex;align-items:center;justify-content:center;text-align:center;background:#02034a;font-family:var(--hand);font-size:min(19cqh,15cqi);line-height:1.05;color:#fff;padding:0 .4em;overflow:hidden;overflow-wrap:anywhere}
.podium-name span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.podium.buzzed{border-color:#fff;box-shadow:0 0 0 2px #fff,0 0 2vw #fff8}
.podium.buzzed .podium-name{background:#fff;color:#000}
.podium.locked{opacity:.4}
.tv-join{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4vw;min-height:0;overflow:hidden;background:#1c1c24;border:2px solid #34343e;padding:.5vw .8vw;text-align:center}
.tv-join .qr{flex:1;min-height:0;width:auto;height:auto;aspect-ratio:1;padding:.3vw}
.tv-join .join-code{font-size:clamp(18px,1.5vw,32px);margin:0}
.tv-tag{font-size:clamp(9px,.65vw,13px);letter-spacing:.16em;font-weight:700;color:var(--gold)}
.tv-tag:empty,.tv-signal:empty{display:none}
.tv-signal{font-size:clamp(9px,.65vw,13px);letter-spacing:.14em;font-weight:700;color:#ff5a6a}

/* Title card: one click here unlocks sound + fullscreen. */
.title-card{position:fixed;inset:0;z-index:50;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:5vw;padding:6vw 7vw;width:100%;height:100%;border:0;border-radius:0;background:var(--board);box-shadow:inset 0 0 12vw #000a;text-transform:none;letter-spacing:0;font-weight:400;text-align:left;cursor:pointer}
.title-card:hover{background:var(--board)}
.title-card[hidden]{display:none}
.title-card .logo{font-size:clamp(70px,10vw,210px)}
.title-card .title-sub{font-family:var(--display);font-size:clamp(20px,2vw,42px);letter-spacing:.06em;text-transform:uppercase;color:var(--gold);text-shadow:.06em .06em 0 #000;margin-top:1.6vw}
.title-card .title-cta{display:inline-block;margin-top:4vw;font-size:clamp(14px,1.1vw,22px);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#000;background:#fff;padding:.9em 1.4em}
.title-card .title-hint{margin-top:1.4vw;font-size:clamp(11px,.8vw,15px);letter-spacing:.14em;text-transform:uppercase;color:#c9ccff}
.title-card .title-photo{justify-self:center;height:min(78vh,56vw);aspect-ratio:3/4;object-fit:cover;border:.6vw solid #fff;box-shadow:1vw 1vw 0 #000}

/* Sound settings (press D) */
#display-controls{width:min(440px,calc(100vw - 32px));padding:26px;border:2px solid #000;outline:2px solid var(--edge);outline-offset:-6px;border-radius:0;background:var(--surface);color:#fff;box-shadow:0 20px 80px #000c}
#display-controls::backdrop{background:#000a}
#display-controls .display-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}
#display-controls h2{font-family:var(--display);font-weight:400;font-size:28px;letter-spacing:.04em;text-transform:uppercase}
#display-controls #close-display{min-height:40px;min-width:40px;padding:0;font-size:22px;border:0;background:transparent}
#display-controls #audio-state{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--gold);margin:16px 0 18px}
#display-controls #audio-state.audio-ready{color:#7ee2a2}
#display-controls .display-audio{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:18px;margin-bottom:14px}
#display-controls label{margin:0 0 8px}
#display-controls input[type=range]{padding:0;border:0;background:none;accent-color:var(--gold)}
#display-controls .display-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#display-controls .display-hint{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center;margin-top:18px}

/* ---------- Setup & links ---------- */
.setup{max-width:1040px;margin:auto;padding:56px 24px}
.setup>header{text-align:center;margin-bottom:40px}
.setup .logo{font-size:clamp(72px,12vw,150px)}
.setup .eyebrow{margin-bottom:12px}
.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.setup h2{font-family:var(--display);font-weight:400;font-size:34px;letter-spacing:.03em;text-transform:uppercase;margin:0 0 18px}
.setup .help{font-size:15px;color:var(--muted);line-height:1.5;margin:0 0 16px}
.setup textarea{font:13px/1.5 ui-monospace,Menlo,monospace;height:280px}
.setup .row{margin-top:14px}
.setup form button{width:100%;margin-top:14px}
.setup details{margin-top:22px}
.setup details .small{margin-bottom:6px}
.links{max-width:720px}
.links .logo{font-size:clamp(60px,10vw,96px)}
.links>header .row{justify-content:center;margin-top:18px;gap:18px}
.link-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;background:var(--surface);border:2px solid #000;outline:2px solid var(--edge);outline-offset:-4px}
.link-card h3{font-family:var(--display);font-weight:400;font-size:24px;letter-spacing:.03em;text-transform:uppercase}
.link-card span{display:block;font-size:14px;color:var(--muted);margin-top:4px}
.link-card .row{margin-top:12px}
.link-card .qr{width:118px;height:118px}
.link-actions{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.private-note{font-size:14px;color:var(--muted);line-height:1.5;border-left:3px solid var(--gold);padding:4px 0 4px 14px}

/* ---------- Host console (phone) ---------- */
.host{max-width:760px;margin:auto;padding:20px 16px calc(36px + env(safe-area-inset-bottom))}
.host-header{display:flex;justify-content:space-between;align-items:center;gap:10px}
.host .logo{font-size:42px}
.host-header .eyebrow{margin-top:6px}
.host #room-links{min-height:42px;padding:8px 14px;font-size:13px}
.health{display:flex;gap:18px;flex-wrap:wrap;margin:16px 0}
.control-label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:4px 0 8px}
.host-board{height:min(420px,95vw)}
.host-board .board{--gap:3px}
.host-board .category{font-size:clamp(10px,2.6vw,17px);padding:3px;box-shadow:none;margin-bottom:2px}
.host-board .tile{font-size:clamp(20px,5.4vw,34px);box-shadow:none;cursor:pointer}
.host-board .tile:hover:not(:disabled){background:var(--board-hi)}
.host-board .tile:disabled{opacity:1}
.host-tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.host-tools button{flex:1}
.host-clue{padding:0;background:none;border:0;outline:0}
.host-clue .clue-card{background:var(--board);padding:22px 20px;border:3px solid #000}
.host-clue .clue-card .eyebrow{font-family:var(--display);font-size:16px;letter-spacing:.05em;color:#fff;text-shadow:.07em .07em 0 #000}
.host-clue .clue-card .eyebrow b{color:var(--gold);font-weight:400;margin-left:.5em}
.host-clue .question{font-family:var(--clue);font-weight:700;text-transform:uppercase;font-size:22px;line-height:1.3;margin-top:12px;text-shadow:.05em .05em 0 #000}
.host-clue .answer{margin-top:10px;background:#000;border:2px solid #1f7a45;padding:14px 16px;font-size:20px;font-weight:700;color:#9ff0c0;line-height:1.35}
.host-clue .answer .eyebrow{color:#62c48d;margin-bottom:6px}
.host-state{display:flex;justify-content:center;align-items:center;gap:14px;padding:16px 0;font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.host-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.host-actions .wide{grid-column:1/-1}
.host-actions button{min-height:64px;font-size:17px}
.host .locked-out{margin-top:12px}
.undo-row{margin-top:14px}
.score-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin-top:14px}
.score-strip span{display:flex;justify-content:space-between;gap:8px;background:var(--surface);padding:10px 12px;font-size:15px;min-width:0}
.score-strip span em{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.score-strip b{white-space:nowrap;flex-shrink:0;font-family:var(--display);font-weight:400;font-size:18px;color:var(--gold);letter-spacing:.02em}
.score-strip b.neg{color:#ff5a6a}
.host .rehearsal{margin-top:16px;padding:14px;border:2px dashed #3a40c8}
.host .rehearsal .row{margin-top:10px}
.host .rehearsal button{min-height:44px;font-size:13px;padding:8px 12px}
.host .team-edit{padding:10px 0;border-bottom:1px solid #1d2290}
.host .team-line{display:grid;grid-template-columns:minmax(0,1fr) 110px auto;gap:6px;align-items:center}
.host .team-line input{font-size:16px;padding:10px}
.host .team-line button{min-height:46px;padding:8px 12px;font-size:13px}
.host [data-remove-team]{margin-top:6px;min-height:36px;padding:4px 10px;font-size:11px;background:transparent;border-color:transparent;color:#ff8a96}
.host .soundboard{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.host .soundboard button{font-size:12px;padding:10px 6px;min-height:48px}
.host textarea{min-height:230px;font:13px/1.5 ui-monospace,Menlo,monospace}
.host .options{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.host .options label:has(input[type=checkbox]){display:flex;align-items:center;gap:10px;color:#fff;font-size:14px;letter-spacing:.04em;text-transform:none;margin:0}
.host input[type=checkbox]{width:22px;height:22px;accent-color:var(--gold)}
.host details .row{margin-top:12px}
.timer{font-family:var(--display);font-variant-numeric:tabular-nums;color:var(--gold);font-size:28px;letter-spacing:.02em}
.finished-panel h2{font-family:var(--display);font-weight:400;font-size:40px;color:var(--gold);margin:12px 0}

/* ---------- Team buzzer (phone) ---------- */
.player{max-width:520px;margin:auto;min-height:100dvh;padding:calc(18px + env(safe-area-inset-top)) 20px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:18px;text-align:center}
.player-header{display:flex;justify-content:space-between;align-items:center;gap:10px}
.player-header .logo{font-size:34px}
.player .logo{font-size:48px}
.player-podium{background:#1c1c24;border:2px solid #34343e;padding:6px;display:grid;gap:6px}
.player-podium .podium-score{font-size:56px;padding:10px 0}
.player-podium .podium-name{font-size:26px;padding:10px;min-height:56px}
.buzzer-wrap{flex:1;display:flex;align-items:center;justify-content:center;min-height:240px}
.buzzer{width:min(78vw,340px);aspect-ratio:1;border-radius:50%;border:6px solid #000;outline:4px solid #34343e;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;background:#16172a;color:#7c80a8;font-family:var(--display);font-weight:400;font-size:44px;line-height:1;letter-spacing:.03em;text-transform:uppercase;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;opacity:1!important}
.buzzer:hover{background:#16172a}
.buzzer.open{background:var(--gold);color:#000;outline-color:#fff;font-size:92px;box-shadow:0 0 0 10px #f3b53b33,0 10px 0 #8a5d0c}
.buzzer.open:hover{background:#ffc651}
.buzzer.yours{background:#fff;color:#000;outline-color:#fff;font-size:52px}
.buzzer .sub{font-family:var(--ui);font-size:13px;font-weight:700;letter-spacing:.14em;margin-top:14px;max-width:230px;overflow-wrap:anywhere}
.buzzer .sub:empty{display:none}
.player-state{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);min-height:44px;display:flex;align-items:center;justify-content:center;gap:12px;overflow-wrap:anywhere}
.player .room-foot{font-size:11px;letter-spacing:.16em;color:#5d63c9}
.player .champion{font-family:var(--display);font-size:52px;color:var(--gold);line-height:1;overflow-wrap:anywhere}
.join-form{text-align:left;margin-top:28px}
.join-form h1{font-family:var(--display);font-weight:400;font-size:40px;letter-spacing:.03em;text-transform:uppercase;margin-top:10px}
.join-form input{font-size:22px;padding:18px}
.join-form button{width:100%;margin-top:18px}
.join-photo{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 35%;border:4px solid #fff;margin-top:24px}

@media(max-width:750px){
  .setup{padding:36px 16px}
  .setup-grid{grid-template-columns:1fr}
  .setup .panel{padding:20px}
  .link-card{flex-wrap:wrap}
  .host .logo{font-size:34px}
  .host .team-line{grid-template-columns:minmax(0,1fr) 84px auto}
  .host .soundboard{grid-template-columns:repeat(2,1fr)}
  .tv{min-width:900px}
  .title-card{grid-template-columns:1fr}
  .title-card .title-photo{display:none}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}