:root{--bg:#0b0f16;--panel:#151b25;--panel2:#1b2330;--line:#2b3545;--text:#f5f7fa;--muted:#9ba7b7;--ember:#e45f45;--azure:#4b86e8;--neutral:#c7b98d;--doom:#05070a}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -10%,#1a2230 0,#0b0f16 48%);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}button,input{font:inherit}.hidden{display:none!important}.page{max-width:1200px;margin:auto;padding:20px}.brand{display:flex;gap:15px;align-items:center;margin:42px auto 24px;max-width:640px}.logo{width:58px;height:58px;border-radius:18px;background:white;color:#0b0f16;display:grid;place-items:center;font-weight:1000}.brand h1{margin:0}.brand p{margin:3px 0;color:var(--muted)}.joinCard{max-width:540px;margin:auto;background:var(--panel);padding:20px;border:1px solid var(--line);border-radius:20px}.joinRow{display:grid;grid-template-columns:1fr auto;gap:9px;margin-top:9px}input,button{border:1px solid var(--line);border-radius:12px;padding:13px 14px}input{width:100%;background:#0d1219;color:white;outline:none}button{background:#f2f4f7;color:#10151d;font-weight:900;cursor:pointer}.secondary{background:#242d3a;color:white}.full{width:100%;margin-top:9px}.error{color:#ff8f86;min-height:20px;margin-top:9px;font-weight:700}.top{display:flex;justify-content:space-between;align-items:center;gap:12px}.eyebrow{font-size:11px;letter-spacing:.17em;color:var(--muted)}.roomCode{font-size:25px}.topActions{display:flex;gap:8px}.mini{padding:9px 11px}.qrPanel{margin:16px 0;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:18px;display:flex;align-items:center;gap:20px}.qrPanel img{width:180px;background:white;border-radius:14px;padding:6px}.qrPanel p{color:var(--muted);word-break:break-all}.playerBar{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}.playerChip{background:#1a2230;border:1px solid var(--line);border-radius:999px;padding:7px 10px;font-size:13px}.playerChip.off{opacity:.45}.hostPanel{background:#121821;border:1px solid var(--line);border-radius:16px;padding:13px;margin:10px 0}.hostHead{display:flex;justify-content:space-between;color:var(--muted);margin-bottom:8px}.hostPlayer{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:7px;border-top:1px solid #242e3d}.hostPlayer:first-child{border-top:0}.hero{text-align:center;padding:20px 0}.hero p,.center p{color:var(--muted)}.games{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.gameCard{text-align:left;background:var(--panel);color:white;border:1px solid var(--line);padding:19px;display:flex;gap:14px}.gameCard:hover{transform:translateY(-2px);border-color:#56677f}.icon{width:52px;height:52px;min-width:52px;border-radius:15px;background:#273243;display:grid;place-items:center;font-weight:1000}.gameCard h3{margin:0 0 5px}.gameCard p{margin:0 0 9px;color:var(--muted)}.gameCard span{font-size:12px;color:#cbd2dc}.gameHeader{display:flex;justify-content:space-between;align-items:center;margin:18px 0}.teams{display:grid;grid-template-columns:1fr 1fr;gap:15px}.team{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:17px}.team h3{font-size:25px}.emberBox{box-shadow:inset 0 3px 0 var(--ember)}.azureBox{box-shadow:inset 0 3px 0 var(--azure)}.teamPlayer{display:flex;justify-content:space-between;background:#0d1219;border-radius:10px;padding:9px;margin:6px 0}.seatRow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.seat.ember{background:var(--ember);color:white}.seat.azure{background:var(--azure);color:white}.seat.ghost{background:#26303e}.center{text-align:center;margin-top:14px}.status{display:flex;justify-content:space-between;font-size:20px;font-weight:900}.banner{background:var(--panel);border:1px solid var(--line);border-radius:15px;text-align:center;padding:14px;margin:12px 0;font-size:20px;font-weight:900}.clueForm{display:grid;grid-template-columns:1fr 80px auto;gap:8px}.info{text-align:center;color:#cbd3de;margin:10px 0;min-height:22px}.wordGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.word{min-height:100px;border-radius:14px;background:#e7dfca;color:#171713;display:flex;align-items:center;justify-content:center;text-align:center;padding:7px;font-weight:1000;position:relative;border:3px solid transparent}.word.voteable:hover{border-color:white}.word.myvote{border-color:white;box-shadow:0 0 0 3px #fff3}.word.key.ember{background:#ffd7cf;border-color:var(--ember)}.word.key.azure{background:#dce9ff;border-color:var(--azure)}.word.key.neutral{background:#e8dfc5;border-color:#a99b72}.word.key.doom{background:#4b515a;color:white;border-color:#050608}.word.revealed.ember{background:var(--ember);color:white}.word.revealed.azure{background:var(--azure);color:white}.word.revealed.neutral{background:var(--neutral)}.word.revealed.doom{background:#050608;color:white}.badge{position:absolute;top:5px;right:5px;background:#111824;color:white;border-radius:999px;padding:3px 7px;font-size:11px}.controls{display:flex;justify-content:center;gap:8px}.roundLine{text-align:center;color:var(--muted);font-weight:800;margin:8px}.prompt{text-align:center;font-size:32px;margin:18px 0}.choiceGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:800px;margin:auto}.choice{min-height:100px;background:var(--panel);color:white;font-size:20px;border:2px solid var(--line)}.choice.selected{border-color:white}.choice.winner{outline:4px solid #fff5}.count{display:block;color:var(--muted);font-size:13px;margin-top:5px}.scoreboard{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:16px}.score{background:#1b2330;border-radius:999px;padding:7px 10px}.sketchLayout{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:14px}canvas{width:100%;aspect-ratio:3/2;background:white;border-radius:15px;touch-action:none;display:block}.drawControls{display:flex;align-items:center;gap:12px;margin-top:8px}.guessPane{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:12px}.secret{font-size:28px;font-weight:1000;text-align:center;padding:10px;background:#252f3e;border-radius:12px}.guessFeed{height:310px;overflow:auto;margin:10px 0}.guessMsg{padding:7px 8px;border-bottom:1px solid #283243}.guessForm{display:grid;grid-template-columns:1fr auto;gap:7px}.hostOnly{}.gameHeader #gameTitle{font-weight:1000}.offLabel{color:#8893a2}.kbtn{background:#6e2c31;color:white;padding:7px 9px}.hselect{background:#202938;color:white;padding:7px 9px;border-radius:9px;border:1px solid var(--line)}
@media(max-width:760px){.page{padding:12px}.brand{margin-top:18px}.games,.teams,.sketchLayout{grid-template-columns:1fr}.wordGrid{gap:5px}.word{min-height:68px;border-radius:9px;font-size:11px;padding:4px}.qrPanel{flex-direction:column;text-align:center}.qrPanel img{width:200px}.choiceGrid{grid-template-columns:1fr}.choice{min-height:72px}.clueForm{grid-template-columns:1fr 65px}.clueForm button{grid-column:1/-1}.status{font-size:15px}.prompt{font-size:24px}.hostPlayer{grid-template-columns:1fr auto}.hostPlayer .hselect{display:none}.guessFeed{height:190px}}

.joinDivider{display:flex;align-items:center;gap:12px;margin:18px 0 12px;color:#8791a5;font-size:12px;font-weight:800;letter-spacing:.14em}.joinDivider:before,.joinDivider:after{content:"";height:1px;background:#273041;flex:1}

/* v0.3.5 party-screen personality */
.qrPanel{position:relative;overflow:hidden}
.qrPanel:before{content:"";position:absolute;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.035);right:-25px;top:-30px}
.qrPanel:after{content:"★  PARTY TIME  ★";position:absolute;right:18px;bottom:10px;font-weight:900;letter-spacing:.12em;font-size:11px;opacity:.18;transform:rotate(-5deg)}
.qrWiggle{background:#fff;padding:8px;border-radius:18px;transform:rotate(-2deg);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.qrWiggle img{display:block}
.joinBurst{font-size:28px;line-height:1;margin-bottom:4px}
.joinUrl{font-size:12px;opacity:.62;word-break:break-all}
.goofyIcon{font-size:36px!important;position:relative;overflow:visible!important;display:flex!important;align-items:center;justify-content:center}
.goofyIcon span{position:absolute;font-size:20px;right:-8px;top:-8px;transform:rotate(12deg)}
.gameCard:hover .goofyIcon{animation:partyWobble .45s ease}
@keyframes partyWobble{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-7deg) scale(1.05)}75%{transform:rotate(7deg) scale(1.05)}}
@media (min-width:900px){
  #gameSelect{position:relative}
  .qrPanel{max-width:520px;margin:10px auto 28px}
}

/* v0.3.7 host-display + phone-control split */
.selectedGame{display:flex;flex-direction:column;gap:2px}
.selectedGame span{font-size:10px;letter-spacing:.18em;font-weight:900;opacity:.48}
.selectedGame strong{font-size:24px}
.clientPicker{max-width:640px;margin:0 auto}
.clientPicker>h3,.rolePicker>h3{text-align:center;margin:10px 0 14px}
.pickTiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pickTile{min-height:128px;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:2px solid transparent}
.pickTile strong{font-size:22px}
.pickTile small{opacity:.62;font-size:13px}
.pickEmoji{font-size:38px}
.pickTile.ember{background:rgba(255,91,61,.11);border-color:rgba(255,91,61,.25)}
.pickTile.azure{background:rgba(65,153,255,.11);border-color:rgba(65,153,255,.25)}
.pickTile.selected{outline:3px solid rgba(255,255,255,.8);transform:translateY(-2px)}
.rolePicker{margin-top:22px}
.seatStatus{text-align:center;margin:16px 0 0;font-weight:800;opacity:.72}
.teamEmoji{font-size:34px;margin-bottom:4px}
@media(max-width:600px){
  .pickTiles{grid-template-columns:1fr 1fr}
  .pickTile{min-height:112px;padding:14px 8px}
  .pickTile strong{font-size:18px}
  .pickEmoji{font-size:32px}
}

/* v0.3.8 TV-first game presentation */
.hostGameLobby{display:grid;grid-template-columns:minmax(300px,1fr) minmax(320px,1fr);gap:24px;align-items:start}
.hostChoiceGuide{padding:20px;border:1px solid #293449;border-radius:24px;background:rgba(255,255,255,.025)}
.hostGuideTitle{font-size:12px;font-weight:900;letter-spacing:.16em;opacity:.55;margin:4px 0 12px}
.hostGuideTitle:not(:first-child){margin-top:24px}
.hostPreviewTiles{pointer-events:none}
.previewTile{min-height:105px}
.hostRosterTeams{grid-template-columns:1fr 1fr}
.tvInstructions{max-width:720px;margin-left:auto;margin-right:auto;font-size:18px;line-height:1.5;opacity:.75}
.choice.tvChoice{cursor:default}
.choice.tvChoice:hover{transform:none}
@media(max-width:900px){
  .hostGameLobby{grid-template-columns:1fr}
}

/* v0.3.9 authoritative TV state */
.playerBar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.connectedLabel{font-size:11px;font-weight:900;letter-spacing:.12em;opacity:.6;margin-right:4px}
.waitingChip{opacity:.45;font-size:13px}

/* v0.4.0 host-controlled stability reset */
.hostPlayer{display:grid;grid-template-columns:minmax(130px,1fr) 150px 160px auto;gap:10px;align-items:center}
.hostPlayerName{font-weight:800}
.phoneWaitingCard{text-align:center;padding:28px 18px;border:1px solid #293449;border-radius:24px;background:rgba(255,255,255,.025)}
.phoneWaitingCard p{opacity:.65}
@media(max-width:700px){
  .hostPlayer{grid-template-columns:1fr auto}
  .hostPlayer .hselect{grid-column:1/-1;width:100%}
}

.buildBadge{
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid #2d3a51;
  background:rgba(255,255,255,.04);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  opacity:.8;
}

.compactWait{
  margin-top:14px;
  padding:16px;
}
.teamPick.selected{
  outline:3px solid currentColor;
  transform:translateY(-2px) scale(1.01);
}

.simpleHostPlayer{
  grid-template-columns:1fr auto;
}
.rolePick small{
  display:block;
  margin-top:5px;
  opacity:.6;
  font-size:11px;
}
.rolePick.selected{
  outline:3px solid currentColor;
  transform:translateY(-2px) scale(1.01);
}

.voteStatus{
  margin:10px 0 14px;
  padding:10px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  font-weight:800;
  text-align:center;
}

.spectatorPanel{
  max-width:560px;
  margin:28px auto;
  padding:28px;
  text-align:center;
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  background:rgba(255,255,255,.05);
}
.spectatorPanel h2{margin:8px 0}
.spectatorRoom{
  margin-top:18px;
  font-size:18px;
  letter-spacing:.12em;
  font-weight:900;
}
.spectatorChip{opacity:.72}
.spectatorLabel{
  display:inline-block;
  margin-left:8px;
  padding:3px 7px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  background:rgba(255,255,255,.09);
  opacity:.75;
}

/* v0.4.7 — TV fills the display; phones are controllers, not mini TVs */
#hub.hostView{
  max-width:none;
  width:100%;
  padding:14px 24px 22px;
}
#hub.hostView #gameArea{
  width:100%;
}
#hub.hostView .wordGrid{
  width:100%;
}
#hub.hostView .sketchLayout{
  grid-template-columns:minmax(0,3fr) minmax(280px,1fr);
}
#hub.hostView canvas{
  max-height:calc(100vh - 235px);
  object-fit:contain;
}
#hub.clientView{
  max-width:560px;
  padding:10px 12px;
}
#hub.clientView .top{
  min-height:42px;
}
#hub.clientView .top .eyebrow,
#hub.clientView .topActions,
#hub.clientView #playerBar,
#hub.clientView .gameHeader,
#hub.clientView .tvInstructions,
#hub.clientView .scoreboard,
#hub.clientView .guessPane .guessFeed{
  display:none!important;
}
#hub.clientView .roomCode{
  font-size:13px;
  opacity:.5;
}
#hub.clientView #gameArea{
  margin-top:4px;
}
#hub.clientView .banner{
  margin:6px 0 10px;
  padding:10px;
  font-size:16px;
}
#hub.clientView .guessPane{
  border:0;
  background:transparent;
  padding:0;
}
#hub.clientView .sketchLayout{
  display:block;
}
#hub.clientView canvas{
  display:none;
}
#hub.clientView .drawControls + *{
  margin-top:6px;
}
#hub.clientView .drawControls{
  margin-top:6px;
}
#hub.clientView .secret{
  font-size:24px;
}
#hub.clientView .clientPicker{
  margin-top:4px;
}
#hub.clientView .phoneWaitingCard{
  padding:18px 12px;
}
#hub.clientView .pickTile{
  min-height:96px;
}
.sketchModePicker{
  max-width:760px;
  margin:18px auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.sketchMode{
  min-height:110px;
  background:var(--panel);
  color:white;
  border:2px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:6px;
  text-align:left;
}
.sketchMode strong{font-size:20px}
.sketchMode span{font-size:13px;color:var(--muted)}
.sketchMode.selected{
  border-color:white;
  box-shadow:0 0 0 3px rgba(255,255,255,.08);
}
.sketchTopLine{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  min-height:42px;
}
.sketchTimer{
  min-width:68px;
  text-align:center;
  font-size:28px;
  font-weight:1000;
  background:#f2f4f7;
  color:#10151d;
  border-radius:14px;
  padding:5px 12px;
}
@media(max-width:760px){
  .sketchModePicker{grid-template-columns:1fr}
  #hub.hostView{padding:10px}
}

/* v0.4.9 — restore the artist drawing pad without bringing filler back */
#hub.clientView.artistView{
  max-width:760px;
}
#hub.clientView.artistView .sketchLayout{
  display:block;
}
#hub.clientView.artistView canvas{
  display:block!important;
  width:100%;
  height:auto;
  max-height:none;
  aspect-ratio:3 / 2;
  touch-action:none;
  background:white;
  border-radius:16px;
}
#hub.clientView.artistView .drawControls{
  display:flex!important;
  margin-top:10px;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
#hub.clientView.artistView .secret{
  display:block!important;
  margin:8px 0;
  text-align:center;
  font-size:24px;
  font-weight:1000;
}
#hub.clientView.artistView .guessPane{
  display:block;
}
#hub.clientView.artistView #guessForm,
#hub.clientView.artistView #guessFeed,
#hub.clientView.artistView #sketchScores{
  display:none!important;
}

/* The TV/shared display always keeps the canvas visible and large. */
#hub.hostView #canvas{
  display:block!important;
  width:100%;
  height:auto;
  background:white;
  border-radius:16px;
}

/* v0.5.0 — Veilwords democratic Skip + player list under the board */
.veilSkipWrap{
  display:flex;
  justify-content:center;
  margin:14px 0 4px;
}
.veilSkipChoice{
  position:relative;
  min-width:280px;
  max-width:460px;
  padding:14px 20px;
  border:2px solid var(--line);
  border-radius:16px;
  background:#202936;
  color:white;
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:10px;
  align-items:center;
  text-align:left;
}
.veilSkipChoice .skipIcon{
  grid-row:1 / span 2;
  font-size:28px;
}
.veilSkipChoice strong{font-size:17px}
.veilSkipChoice small{color:var(--muted)}
.veilSkipChoice.selected{
  border-color:white;
  box-shadow:0 0 0 3px rgba(255,255,255,.10);
}
.veilSkipChoice:disabled{cursor:default}
.veilHostPlayersBelow{
  margin:18px 0 8px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel);
}
.veilPlayerListTitle{
  font-size:12px;
  font-weight:1000;
  letter-spacing:.14em;
  color:var(--muted);
  margin-bottom:8px;
}
.veilPlayerRow{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:7px 4px;
  border-top:1px solid rgba(255,255,255,.06);
}
.veilPlayerRow:first-of-type{border-top:0}
.veilPlayerRow span{color:var(--muted)}
#hub.hostView.veilActiveView > #playerBar{
  display:none;
}
#hub.clientView .veilSkipChoice{
  width:100%;
  min-width:0;
}

/* v0.5.2 — select first, then explicitly lock the Veilwords guess */
.veilLockWrap{
  max-width:560px;
  margin:12px auto 6px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.04);
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
}
.veilPendingChoice{
  font-weight:900;
  min-width:0;
}
.veilLockIn{
  min-width:150px;
  font-weight:1000;
}
.veilLockIn:disabled{
  opacity:.45;
  cursor:not-allowed;
}
#hub.clientView .veilLockWrap{
  grid-template-columns:1fr;
}
#hub.clientView .veilLockIn{
  width:100%;
  min-height:54px;
}

/* v0.6.0 — additional PartyHub games */
.games{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.rankChoices{display:grid;gap:9px;max-width:650px;margin:12px auto}
.rankRow{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;padding:13px 15px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.rankNum{font-size:24px;font-weight:1000;text-align:center}
.rankResult{max-width:650px;margin:auto}
.bombUsed{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:16px auto;max-width:1000px}
#fibInput,#bombInput{max-width:650px;margin:16px auto}
#hub.clientView #fibScores,#hub.clientView #rankScores,#hub.clientView #bombPlayers{display:none}
#hub.clientView #fibHostStatus,#hub.clientView #rankStatus,#hub.clientView #bombTurn{font-size:16px}

/* v0.6.1 — grouped Veilwords rosters */
.veilGroupedPlayers{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.veilTeamGroup{
  min-width:0;
  padding:10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}
.veilTeamGroupTitle{
  font-size:15px;
  font-weight:1000;
  letter-spacing:.08em;
  margin:0 2px 8px;
}
.veilTeamGroup.emberGroup{
  box-shadow:inset 0 3px 0 var(--ember);
}
.veilTeamGroup.azureGroup{
  box-shadow:inset 0 3px 0 var(--azure);
}
.teamPlayer.cluegiverRow,
.veilPlayerRow.cluegiverRow{
  font-weight:900;
  border-color:rgba(255,255,255,.18);
}
@media(max-width:700px){
  .veilGroupedPlayers{grid-template-columns:1fr}
}

/* v0.6.2 — Red left, unchosen center, Blue right */
.veilLobbyColumns{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(220px,.72fr) minmax(0,1fr)!important;
  gap:16px!important;
  align-items:start;
}
.redLobbyTeam{grid-column:1}
.unchosenLobbyTeam{grid-column:2}
.blueLobbyTeam{grid-column:3}
.unchosenBox{
  box-shadow:inset 0 3px 0 #7f8a9b;
  background:rgba(255,255,255,.025);
}
.unchosenBox .teamPlayer{
  opacity:.82;
}
.veilGroupedPlayers.veilSides{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.veilGroupedPlayers.veilSides .emberGroup{grid-column:1}
.veilGroupedPlayers.veilSides .azureGroup{grid-column:2}
.veilUnassignedBelow{
  max-width:520px;
  margin:14px auto 0;
}
@media(max-width:800px){
  .veilLobbyColumns{
    grid-template-columns:1fr!important;
  }
  .redLobbyTeam,.unchosenLobbyTeam,.blueLobbyTeam{
    grid-column:1;
  }
  .redLobbyTeam{order:1}
  .unchosenLobbyTeam{order:2}
  .blueLobbyTeam{order:3}
}


/* ============================================================
   v0.7.0 TV readability overhaul
   Large-screen host UI inspired by the approved PartyHub mockup.
   Phone/controller styling remains compact.
   ============================================================ */

:root{
  --tv-bg:#071525;
  --tv-panel:#0c2035;
  --tv-panel2:#102942;
  --tv-border:#315878;
  --tv-blue:#2b91ff;
  --tv-bright:#f8fbff;
  --tv-muted:#b6c8da;
  --tv-green:#63dd83;
  --tv-gold:#ffc83d;
}

/* Let a TV actually use the screen instead of being trapped in a 1200px column. */
#hub.hostView.page{
  max-width:none;
  width:100%;
  min-height:100vh;
  padding:clamp(22px,2vw,42px) clamp(26px,2.6vw,58px) 48px;
  background:
    radial-gradient(circle at 45% -20%,rgba(43,145,255,.20),transparent 42%),
    linear-gradient(180deg,#0b1d34 0%,var(--tv-bg) 100%);
}

/* Strong, readable TV typography. */
#hub.hostView{
  font-size:clamp(18px,1.15vw,25px);
}
#hub.hostView .eyebrow{
  font-size:clamp(14px,.9vw,19px);
  font-weight:900;
  color:var(--tv-muted);
}
#hub.hostView .roomCode{
  margin-top:5px;
  font-size:clamp(30px,2.25vw,48px);
  font-weight:900;
}
#hub.hostView .top{
  min-height:76px;
  padding-bottom:18px;
  border-bottom:2px solid rgba(89,143,188,.34);
}
#hub.hostView .topActions{
  align-items:center;
}
#hub.hostView .buildBadge{
  font-size:clamp(12px,.72vw,16px);
  padding:9px 14px;
  opacity:.72;
}
#hub.hostView .mini{
  min-height:44px;
  padding:10px 16px;
}

/* Bigger panels with clear edges. */
#hub.hostView .hostPanel,
#hub.hostView .qrPanel,
#hub.hostView .team,
#hub.hostView .banner,
#hub.hostView .guessPane,
#hub.hostView .hostChoiceGuide{
  background:linear-gradient(180deg,rgba(16,41,66,.94),rgba(9,29,49,.96));
  border:2px solid var(--tv-border);
  box-shadow:0 12px 34px rgba(0,0,0,.16);
}
#hub.hostView .hostPanel{
  padding:18px 22px;
  border-radius:20px;
  margin:18px 0 22px;
}
#hub.hostView .hostHead{
  font-size:clamp(17px,1vw,22px);
  color:var(--tv-muted);
  margin-bottom:12px;
}
#hub.hostView .hostHead strong{
  color:var(--tv-bright);
  font-size:1.25em;
}
#hub.hostView .simpleHostPlayer{
  min-height:58px;
  padding:8px 4px;
  border-top:1px solid rgba(102,151,191,.28);
}
#hub.hostView .hostPlayerName{
  font-size:clamp(18px,1.2vw,26px);
  font-weight:850;
}
#hub.hostView .kbtn{
  min-width:82px;
  background:#ef4b4b;
  color:white;
  border-color:#ff6969;
  font-size:clamp(15px,.9vw,19px);
  padding:10px 16px;
}

/* Player chips must be readable from across a room. */
#hub.hostView .playerBar{
  gap:10px;
  margin:18px 0;
}
#hub.hostView .connectedLabel{
  font-size:clamp(14px,.85vw,18px);
}
#hub.hostView .playerChip{
  font-size:clamp(16px,1vw,21px);
  padding:9px 15px;
  background:#102841;
  border-color:#315878;
}

/* Game picker: larger cards and fewer tiny lines. */
#hub.hostView .hero h2{
  font-size:clamp(32px,2.4vw,52px);
  margin-bottom:8px;
}
#hub.hostView .hero p,
#hub.hostView .tvInstructions{
  font-size:clamp(18px,1.15vw,25px);
  color:var(--tv-muted);
}
#hub.hostView .games{
  grid-template-columns:repeat(3,minmax(300px,1fr));
  gap:18px;
}
#hub.hostView .gameCard{
  min-height:150px;
  padding:24px;
  border:2px solid var(--tv-border);
  border-radius:22px;
  background:linear-gradient(180deg,#102942,#0b2138);
}
#hub.hostView .gameCard h3{
  font-size:clamp(23px,1.55vw,32px);
}
#hub.hostView .gameCard p{
  font-size:clamp(16px,1vw,21px);
  line-height:1.35;
}
#hub.hostView .gameCard span{
  font-size:clamp(14px,.85vw,18px);
}
#hub.hostView .icon{
  width:68px;
  height:68px;
  min-width:68px;
}

/* Game title / navigation bar. */
#hub.hostView .gameHeader{
  margin:20px 0 14px;
}
#hub.hostView .selectedGame span{
  font-size:clamp(12px,.8vw,16px);
}
#hub.hostView .selectedGame strong{
  font-size:clamp(25px,1.8vw,38px);
}

/* Core game text is intentionally much bigger than before. */
#hub.hostView .roundLine{
  font-size:clamp(18px,1.15vw,25px);
  letter-spacing:.08em;
  margin:16px 0 8px;
}
#hub.hostView .prompt{
  font-size:clamp(38px,3vw,66px);
  line-height:1.1;
  max-width:1500px;
  margin:24px auto;
}
#hub.hostView .banner{
  font-size:clamp(22px,1.55vw,34px);
  min-height:70px;
  display:grid;
  place-items:center;
  padding:16px 24px;
  border-radius:18px;
}
#hub.hostView .choiceGrid{
  max-width:1450px;
  gap:18px;
}
#hub.hostView .choice{
  min-height:132px;
  padding:20px 24px;
  border:2px solid var(--tv-border);
  border-radius:20px;
  background:linear-gradient(180deg,#112d49,#0c233b);
  font-size:clamp(22px,1.55vw,34px);
  line-height:1.2;
}
#hub.hostView .choice.winner{
  outline:5px solid var(--tv-green);
  border-color:var(--tv-green);
}
#hub.hostView .count{
  font-size:clamp(15px,.95vw,20px);
  margin-top:10px;
}

/* Scoreboard is now a true results display, not a row of tiny pills. */
#hub.hostView .scoreboard{
  width:100%;
  max-width:1500px;
  margin:28px auto 16px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:14px;
}
#hub.hostView .score{
  min-height:78px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  padding:14px 18px;
  border-radius:16px;
  background:linear-gradient(180deg,#102942,#0b2138);
  border:2px solid #2c6eaa;
  font-size:clamp(20px,1.35vw,29px);
}
#hub.hostView .score:first-child{
  border-color:var(--tv-gold);
  box-shadow:0 0 0 1px rgba(255,200,61,.15);
}
#hub.hostView .scoreRank{
  color:#52a9ff;
  font-weight:1000;
}
#hub.hostView .score:first-child .scoreRank,
#hub.hostView .score:first-child strong{
  color:var(--tv-gold);
}
#hub.hostView .scoreName{
  font-weight:850;
  overflow:hidden;
  text-overflow:ellipsis;
}
#hub.hostView .score strong{
  font-size:1.45em;
}

/* Final result views should visually dominate the screen. */
#hub.hostView.finishedView #gameArea{
  max-width:1600px;
  margin:0 auto;
}
#hub.hostView.finishedView .prompt{
  font-size:clamp(46px,3.5vw,76px);
  margin-top:24px;
}
#hub.hostView.finishedView .banner{
  max-width:1200px;
  margin:18px auto;
  color:var(--tv-green);
  font-size:clamp(24px,1.7vw,38px);
}
#hub.hostView.finishedView .center button{
  min-width:300px;
  min-height:64px;
  font-size:clamp(20px,1.35vw,29px);
  padding:14px 28px;
  background:#2188f5;
  color:white;
  border:2px solid #65b5ff;
  border-radius:16px;
}

/* In finished game views, player management is useful but should not eat half
   the screen. Keep it compact and readable above the results. */
#hub.hostView.finishedView .hostPanel{
  max-width:1500px;
  margin:18px auto 10px;
}
#hub.hostView.finishedView .simpleHostPlayer{
  display:grid;
  grid-template-columns:1fr auto;
}

/* Veilwords stays large enough to read individual words from the couch. */
#hub.hostView .wordGrid{
  gap:12px;
}
#hub.hostView .word{
  min-height:clamp(92px,8vh,132px);
  font-size:clamp(18px,1.35vw,30px);
  border-radius:16px;
}
#hub.hostView .status{
  font-size:clamp(22px,1.5vw,32px);
}
#hub.hostView .veilTeamGroupTitle{
  font-size:clamp(18px,1.15vw,24px);
}
#hub.hostView .veilPlayerRow,
#hub.hostView .teamPlayer{
  min-height:48px;
  font-size:clamp(16px,1vw,21px);
  align-items:center;
}

/* Sketch / Hot Take / Bomb also inherit TV-readable controls. */
#hub.hostView .rankRow{
  min-height:70px;
  font-size:clamp(18px,1.2vw,26px);
}
#hub.hostView .bombUsed{
  max-width:1450px;
}
#hub.hostView .sketchTimer{
  font-size:clamp(34px,2.5vw,58px);
  font-weight:1000;
}
#hub.hostView .guessFeed{
  font-size:clamp(16px,1vw,21px);
}

/* QR lobby visibility also gets larger. */
#hub.hostView .qrPanel{
  max-width:760px;
  padding:22px 28px;
  margin:20px auto 30px;
}
#hub.hostView .qrPanel img{
  width:220px;
}
#hub.hostView .qrPanel h2{
  font-size:clamp(28px,1.9vw,40px);
}

/* Keep phones as controllers rather than forcing TV-sized typography there. */
#hub.clientView.page{
  max-width:560px;
}

/* 1080p living-room screens: avoid tiny UI even when browser scaling is 100%. */
@media(min-width:1200px){
  #hub.hostView .page{max-width:none}
}

/* If the TV/browser is narrow, collapse gracefully instead of shrinking text. */
@media(max-width:1100px){
  #hub.hostView .games{grid-template-columns:repeat(2,1fr)}
  #hub.hostView .choiceGrid{grid-template-columns:1fr}
}


/* v0.7.1 — Veilwords TV lobby simplified to teams only */
#hub.hostView .hostGameLobby.veilTeamsOnly{
  display:block;
  width:100%;
  max-width:1500px;
  margin:0 auto;
}
#hub.hostView .veilTeamsOnly .veilLobbyColumns{
  width:100%;
  display:grid!important;
  grid-template-columns:1fr .82fr 1fr!important;
  gap:18px!important;
  align-items:stretch;
}
#hub.hostView .veilLobbyTeam{
  min-height:250px;
  padding:0 0 16px;
  overflow:hidden;
}
#hub.hostView .veilTeamHeader{
  min-height:72px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
#hub.hostView .veilTeamHeader h3{
  margin:0;
  font-size:clamp(24px,1.65vw,34px);
}
#hub.hostView .veilTeamHeader .teamEmoji{
  font-size:30px;
  margin:0;
}
#hub.hostView .redLobbyTeam .veilTeamHeader{
  background:linear-gradient(90deg,rgba(228,95,69,.28),rgba(228,95,69,.05));
}
#hub.hostView .blueLobbyTeam .veilTeamHeader{
  background:linear-gradient(90deg,rgba(75,134,232,.28),rgba(75,134,232,.05));
}
#hub.hostView .unchosenLobbyTeam .veilTeamHeader{
  background:linear-gradient(90deg,rgba(150,165,184,.22),rgba(150,165,184,.04));
}
#hub.hostView .veilRosterRow{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto;
  gap:16px;
  align-items:center;
  min-height:58px;
  margin:9px 12px!important;
  padding:10px 14px!important;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(4,16,28,.46)!important;
}
#hub.hostView .veilRosterName{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:clamp(18px,1.18vw,25px);
  font-weight:900;
}
#hub.hostView .veilRosterRole{
  color:var(--tv-muted);
  font-size:clamp(15px,.95vw,20px);
  font-weight:800;
  text-align:right;
}
#hub.hostView .cluegiverRow{
  order:-1;
  border-color:rgba(255,255,255,.30)!important;
  background:rgba(255,255,255,.075)!important;
}
#hub.hostView .cluegiverRow .veilRosterRole{
  color:#fff;
  font-weight:1000;
}
#hub.hostView .veilLobbyTeam .info{
  min-height:120px;
  display:grid;
  place-items:center;
  color:var(--tv-muted);
  font-size:clamp(16px,1vw,21px);
}

/* Phones keep their team/role pickers; this simplification is TV-only. */
@media(max-width:800px){
  #hub.hostView .veilTeamsOnly .veilLobbyColumns{
    grid-template-columns:1fr!important;
  }
}


/* v0.7.2 — remote read-only host display cloning */
.cloneHint{
  margin:9px 4px 0;
  color:var(--muted);
  font-size:12px;
  text-align:center;
}
#hub.cloneView .hostOnly,
#hub.cloneView .kbtn{
  display:none!important;
}
#hub.cloneView .gameCard{
  cursor:default;
  pointer-events:none;
}
#hub.cloneView .gameCard:hover{
  transform:none;
}
#hub.cloneView .hostHead span{
  display:none;
}
#hub.cloneView .hostHead:after{
  content:"Read-only remote display";
  color:var(--tv-muted);
  font-size:.9em;
}
#hub.cloneView:before{
  content:"REMOTE DISPLAY";
  position:fixed;
  right:18px;
  bottom:16px;
  z-index:50;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(82,169,255,.45);
  background:rgba(7,21,37,.82);
  color:#8fc8ff;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.12em;
  pointer-events:none;
}


/* v0.8.0 — Party Prix 3D */
.raceHud{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:10px 0 14px;
  font-weight:1000;
}
.racePhase{font-size:clamp(22px,1.5vw,34px)}
.raceLeader{font-size:clamp(18px,1.1vw,24px);color:var(--tv-muted)}
.raceTvView{
  position:relative;
  width:100%;
  max-width:1600px;
  margin:0 auto;
  border:2px solid var(--tv-border);
  border-radius:22px;
  overflow:hidden;
  background:#7eb6e6;
  box-shadow:0 18px 45px rgba(0,0,0,.24);
}
#raceCanvas{
  width:100%;
  aspect-ratio:16/9;
  display:block;
  background:linear-gradient(#7eb6e6 0 48%,#4e9650 48%);
}
.raceCountdown{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:clamp(90px,12vw,220px);
  font-weight:1000;
  color:white;
  text-shadow:0 8px 30px rgba(0,0,0,.55);
  pointer-events:none;
}
.raceStandings{
  position:absolute;
  left:18px;
  top:18px;
  width:min(330px,30vw);
  display:grid;
  gap:6px;
}
.raceStanding{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:8px 11px;
  border-radius:10px;
  background:rgba(4,15,28,.72);
  border:1px solid rgba(255,255,255,.17);
  color:white;
  backdrop-filter:blur(4px);
  font-size:clamp(13px,.85vw,18px);
}
.racePhoneControls{
  max-width:560px;
  margin:0 auto;
}
.racePhoneStatus{
  min-height:66px;
  display:grid;
  place-items:center;
  margin:12px 0;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel);
  font-size:22px;
  font-weight:1000;
}
.raceControlGrid{
  display:grid;
  grid-template-columns:1fr 1.15fr 1fr;
  grid-template-rows:150px 90px;
  gap:12px;
}
.raceControlGrid button{
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  font-size:20px;
  border-radius:22px;
}
.raceSteerBtn{
  background:#22334b;
  color:white;
}
.raceGasBtn{
  background:#33c86b;
  color:#07120b;
  font-size:28px!important;
}
.raceBrakeBtn{
  grid-column:1/-1;
  background:#e44f4f;
  color:white;
}
#hub.clientView #racePlay{
  padding-top:4px;
}
@media(max-width:700px){
  .raceControlGrid{
    grid-template-rows:135px 80px;
  }
}


/* v0.8.1 — Party Prix courses + landscape phone controller */
.raceCoursePicker{
  max-width:1500px;
  margin:18px auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
}
.raceCourseChoice{
  min-height:96px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;
  background:#102942;
  color:white;
  border:2px solid var(--tv-border);
}
.raceCourseChoice strong{
  font-size:20px;
}
.raceCourseChoice small{
  color:var(--tv-muted);
}
.raceCourseChoice.selected{
  border-color:#64b8ff;
  box-shadow:0 0 0 3px rgba(43,145,255,.18);
  background:#153a5e;
}

/* Phone race controls are a purpose-built landscape dashboard. */
#hub.clientView.raceControllerView.page{
  max-width:none;
  width:100%;
  height:100dvh;
  min-height:0;
  padding:0!important;
  overflow:hidden;
  background:#071525;
}
#hub.clientView.raceControllerView .top,
#hub.clientView.raceControllerView #playerBar,
#hub.clientView.raceControllerView .gameHeader,
#hub.clientView.raceControllerView #gameErr{
  display:none!important;
}
#hub.clientView.raceControllerView #gameArea,
#hub.clientView.raceControllerView #race,
#hub.clientView.raceControllerView #racePlay,
#hub.clientView.raceControllerView .racePhoneControls{
  width:100%;
  height:100%;
  margin:0;
  max-width:none;
}
#hub.clientView.raceControllerView .raceHud{
  display:none;
}
#hub.clientView.raceControllerView .racePhoneControls{
  display:grid;
  grid-template-rows:58px 1fr;
  gap:8px;
  padding:10px;
}
#hub.clientView.raceControllerView .racePhoneStatus{
  margin:0;
  min-height:0;
  border-radius:12px;
  font-size:clamp(16px,2.8vw,24px);
}
#hub.clientView.raceControllerView .raceControlGrid{
  display:grid;
  grid-template-columns:1.05fr 1.05fr .8fr 1.45fr;
  grid-template-rows:1fr;
  gap:10px;
  min-height:0;
}
#hub.clientView.raceControllerView .raceControlGrid button{
  min-height:0;
  height:100%;
  border-radius:18px;
  font-size:clamp(18px,3vw,30px);
  touch-action:none;
}
#hub.clientView.raceControllerView .raceLeftBtn{grid-column:1}
#hub.clientView.raceControllerView .raceRightBtn{grid-column:2}
#hub.clientView.raceControllerView .raceBrakeBtn{
  grid-column:3;
  background:#e44f4f;
}
#hub.clientView.raceControllerView .raceGasBtn{
  grid-column:4;
  background:#33c86b;
  font-size:clamp(28px,5vw,46px)!important;
}

/* When the phone is physically portrait, rotate the controller itself so the
   user can simply turn the phone sideways without browser chrome/layout fights. */
@media(orientation:portrait){
  #hub.clientView.raceControllerView{
    position:fixed;
    left:0;
    top:0;
    width:100vh!important;
    height:100vw!important;
    transform-origin:top left;
    transform:rotate(90deg) translateY(-100%);
    overflow:hidden;
  }
}

/* Compact the course picker if the host is not on a wide TV. */
@media(max-width:900px){
  .raceCoursePicker{grid-template-columns:1fr}
}

/* v0.8.3 — Roblox-style Word Bomb */
#hub.hostView #bombCategory{
  font-size:clamp(72px,8vw,150px);
  letter-spacing:.12em;
  text-transform:uppercase;
}
#hub.hostView #bombTimer{font-size:clamp(34px,3.2vw,64px)}
.currentBombPlayer{
  border-color:#ffbe45!important;
  box-shadow:0 0 0 3px rgba(255,190,69,.16);
}
#bombInput input{text-transform:lowercase}


/* v0.9.0 — Party Prix arcade circuit overhaul */
#raceTvView{
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 20px 55px rgba(0,0,0,.38),0 0 0 2px rgba(107,190,255,.18);
}
#raceCanvas{
  background:linear-gradient(#72b9eb,#a8ddff);
}
.raceStanding{
  backdrop-filter:blur(6px);
  background:rgba(5,17,30,.78)!important;
}
#hub.clientView.raceControllerView .racePhoneStatus{
  font-weight:900;
  letter-spacing:.025em;
  background:#0b1e31;
  border:2px solid #254b68;
}
#hub.clientView.raceControllerView .raceSteerBtn{
  background:linear-gradient(180deg,#3579c7,#1c4d88);
  border:2px solid #79baff;
}
#hub.clientView.raceControllerView .raceGasBtn{
  background:linear-gradient(180deg,#43dd7b,#17994c)!important;
  border:2px solid #83ffab;
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.18);
}
#hub.clientView.raceControllerView .raceBrakeBtn{
  background:linear-gradient(180deg,#f36a63,#b83232)!important;
  border:2px solid #ff9c96;
}
.raceCourseChoice.selected{
  transform:translateY(-2px);
}


/* v0.9.3 Party Prix cleanup */
#hub.clientView.raceControllerView #racePhoneStatus{
  font-size:clamp(18px,4.2vw,30px);
  text-align:center;
}
#hub.clientView.raceControllerView #racePhoneStatus:not(:empty){
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
}


/* v0.10.0 Party Prix powerups */
#hub.clientView.raceControllerView .raceControlGrid{
  grid-template-columns:1fr 1fr .82fr 1.3fr 1.05fr;
}
#hub.clientView.raceControllerView #raceLeft{grid-column:1}
#hub.clientView.raceControllerView #raceRight{grid-column:2}
#hub.clientView.raceControllerView #raceBrake{grid-column:3}
#hub.clientView.raceControllerView #raceGas{grid-column:4}
#hub.clientView.raceControllerView #racePower{grid-column:5}
.racePowerBtn{
  min-height:100%;
  border-radius:18px;
  border:2px solid #ffe36b;
  background:linear-gradient(180deg,#8b65ff,#5630c6);
  color:white;
  font-weight:900;
  font-size:clamp(12px,2vw,22px);
  padding:8px;
}
.racePowerBtn:disabled{
  opacity:.42;
  filter:saturate(.45);
}

/* v0.11.0 mini arcade */
.miniTapButton{
  width:min(520px,90vw);
  min-height:190px;
  margin:18px auto;
  border-radius:32px;
  font-size:clamp(34px,8vw,86px);
  font-weight:1000;
  background:#4a5060;
  color:white;
  border:4px solid #737b8e;
}
.miniTapButton.go{
  background:#21b85b;
  border-color:#78ff9d;
  transform:scale(1.03);
}
#miniArcade .prompt{max-width:1400px;margin-left:auto;margin-right:auto}
#miniArcade .majorityGrid{max-width:1400px;margin-left:auto;margin-right:auto}
#miniArcade .scoreboard{max-width:1400px;margin-left:auto;margin-right:auto}


/* v0.12.0 — host screen density + Party Prix presentation */
#hub.hostView.page{
  width:100%;
  max-width:none!important;
  padding:10px 18px 16px;
}
#hub.hostView .top{
  min-height:54px;
}
#hub.hostView .roomCode{
  font-size:clamp(28px,2vw,42px);
}
#hub.hostView .playerBar{
  margin:6px 0;
  min-height:0;
}
#hub.hostView .playerChip{
  padding:5px 9px;
}
#hub.hostView .hostPanel{
  margin:6px 0;
  padding:7px 10px;
}
#hub.hostView .hostHead{
  margin-bottom:2px;
}
#hub.hostView .hostPlayer{
  padding:4px 6px;
  min-height:32px;
}
#hub.hostView #gameSelect .hero{
  padding:6px 0 10px;
}
#hub.hostView #gameSelect .hero h2{
  margin:4px 0;
  font-size:clamp(26px,1.8vw,38px);
}
#hub.hostView #gameSelect .hero p{
  margin:3px 0;
}
#hub.hostView #gameSelect .games{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:9px;
  width:100%;
}
#hub.hostView #gameSelect .gameCard{
  min-height:118px;
  padding:13px;
  gap:10px;
  border-radius:16px;
}
#hub.hostView #gameSelect .gameCard h3{
  font-size:clamp(17px,1.05vw,23px);
  line-height:1.05;
  margin-bottom:4px;
}
#hub.hostView #gameSelect .gameCard p{
  font-size:clamp(12px,.72vw,15px);
  line-height:1.25;
  margin-bottom:6px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
#hub.hostView #gameSelect .gameCard span{
  font-size:clamp(10px,.62vw,13px);
}
#hub.hostView #gameSelect .icon{
  width:48px;
  height:48px;
  min-width:48px;
  font-size:29px!important;
}
#hub.hostView #gameSelect .goofyIcon span{
  font-size:16px;
}
#hub.hostView #qrPanel,
#hub.hostView .qrPanel{
  max-width:none;
  margin:7px 0;
  padding:8px 12px;
  min-height:158px;
}
#hub.hostView .qrPanel img{
  width:150px!important;
}
#hub.hostView .qrPanel h2{
  font-size:20px!important;
  margin:0 0 2px;
}
#hub.hostView .qrPanel p{
  margin:2px 0;
  font-size:11px;
}

/* Party Prix should dominate the TV rather than sit in a smaller card. */
#hub.hostView #racePlay{
  width:100%;
}
#hub.hostView .raceHud{
  max-width:none;
  margin:2px 0 7px;
}
#hub.hostView .raceTvView{
  width:100%;
  max-width:none;
  border-radius:14px;
  border-width:1px;
  box-shadow:0 18px 60px rgba(0,0,0,.36);
}
#hub.hostView #raceCanvas{
  width:100%;
  height:min(76vh,calc(100vh - 205px));
  min-height:560px;
  aspect-ratio:auto;
  object-fit:cover;
}
#hub.hostView #race .gameHeader{
  margin:5px 0;
}
#hub.hostView #race .raceStandings{
  width:min(380px,25vw);
}
#hub.hostView #race .raceStanding{
  padding:7px 10px;
  background:linear-gradient(90deg,rgba(6,15,24,.9),rgba(6,15,24,.68));
  border:1px solid rgba(255,255,255,.16);
}

/* On a normal 1080p host, favor fitting the entire picker without page scroll. */
@media(min-width:1450px) and (min-height:850px){
  #hub.hostView #gameSelect .games{
    grid-template-columns:repeat(5,1fr);
  }
}
@media(max-width:1449px){
  #hub.hostView #gameSelect .games{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:1050px){
  #hub.hostView #gameSelect .games{grid-template-columns:repeat(3,1fr)}
}


/* v0.12.1 — race framing + no-scroll host race layout */
#hub.hostView.raceHostView{
  height:100dvh;
  max-height:100dvh;
  overflow:hidden!important;
  padding:8px 12px 10px!important;
}
#hub.hostView.raceHostView .top{
  min-height:48px;
}
#hub.hostView.raceHostView .playerBar{
  margin:3px 0;
}
#hub.hostView.raceHostView .hostPanel{
  display:none!important;
}
#hub.hostView.raceHostView #gameArea{
  height:calc(100dvh - 88px);
  display:flex;
  flex-direction:column;
  min-height:0;
}
#hub.hostView.raceHostView .gameHeader{
  flex:0 0 auto;
  margin:2px 0 4px!important;
  min-height:34px;
}
#hub.hostView.raceHostView #race{
  flex:1 1 auto;
  min-height:0;
}
#hub.hostView.raceHostView #racePlay{
  height:100%;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  min-height:0;
}
#hub.hostView.raceHostView .raceHud{
  margin:0 0 4px!important;
  min-height:28px;
}
#hub.hostView.raceHostView .raceTvView{
  height:100%;
  min-height:0;
  max-height:none;
  margin:0;
}
#hub.hostView.raceHostView #raceCanvas{
  width:100%;
  height:100%!important;
  min-height:0!important;
  aspect-ratio:auto!important;
}
#hub.hostView.raceHostView .raceHostOverlay{
  position:absolute;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  z-index:12;
  pointer-events:none;
}
#hub.hostView.raceHostView .raceHostOverlay button{
  pointer-events:auto;
  min-width:220px;
  padding:11px 18px;
  color:#fff;
  background:rgba(18,35,53,.92);
  border:1px solid rgba(255,255,255,.30);
  box-shadow:0 8px 28px rgba(0,0,0,.38);
  backdrop-filter:blur(8px);
}
#hub.hostView.raceHostView .raceStandings{
  top:12px;
  left:12px;
}
#hub.hostView.raceHostView .raceCountdown{
  z-index:10;
}

/* Keep all critical host controls visible even on shorter 1080p browser windows. */
@media(min-width:1000px) and (max-height:900px){
  #hub.hostView.raceHostView{
    padding-top:5px!important;
  }
  #hub.hostView.raceHostView .top{
    min-height:42px;
  }
  #hub.hostView.raceHostView .roomCode{
    font-size:26px;
  }
  #hub.hostView.raceHostView .topActions .mini{
    padding:7px 9px;
  }
  #hub.hostView.raceHostView #gameArea{
    height:calc(100dvh - 72px);
  }
}


/* v0.12.2 — race start-light sequence */
#hub.hostView .raceCountdown{
  font-size:clamp(58px,8vw,150px);
  letter-spacing:.08em;
  text-transform:uppercase;
}
#hub.hostView .raceCountdown[data-stage="red"]{
  color:#ff3d3d;
  text-shadow:0 0 18px rgba(255,45,45,.8),0 7px 30px rgba(0,0,0,.65);
}
#hub.hostView .raceCountdown[data-stage="yellow"]{
  color:#ffd83d;
  text-shadow:0 0 18px rgba(255,216,61,.8),0 7px 30px rgba(0,0,0,.65);
}
#hub.hostView .raceCountdown[data-stage="green"]{
  color:#41f47b;
  text-shadow:0 0 18px rgba(65,244,123,.8),0 7px 30px rgba(0,0,0,.65);
}


/* v0.12.4 — guaranteed visible-car chase presentation */
#hub.hostView.raceHostView .raceTvView{
  isolation:isolate;
}
#hub.hostView.raceHostView #raceCanvas{
  position:absolute;
  inset:0;
}
#hub.hostView.raceHostView .raceStandings,
#hub.hostView.raceHostView .raceCountdown,
#hub.hostView.raceHostView .raceHostOverlay{
  z-index:5;
}

/* v0.12.8 emergency race-render indicator */
.raceRenderError{
  color:#ff6262!important;
  text-shadow:0 0 12px rgba(255,70,70,.65);
}

/* v0.13.1 diagnostic */
#downloadRaceLog{
  border-color:rgba(72,220,255,.55);
}


/* v0.14.0 Party Prix championship */
#hub.hostView.raceHostView .raceStanding{
  font-size:clamp(12px,.9vw,17px);
}


/* v0.14.3 — Party Prix uses the entire display surface during a race. */
#hub.hostView.raceHostView{
  position:relative;
  width:100vw!important;
  height:100dvh!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
#hub.hostView.raceHostView .top{
  position:fixed!important;
  inset:0 0 auto 0!important;
  z-index:40!important;
  height:58px!important;
  min-height:58px!important;
  margin:0!important;
  padding:7px 14px!important;
  display:flex!important;
  justify-content:center!important;
  align-items:flex-start!important;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(3,8,14,.72),rgba(3,8,14,0))!important;
  border:0!important;
}
#hub.hostView.raceHostView .top > div:first-child{
  display:flex!important;
  justify-content:center!important;
  width:100%!important;
}
#hub.hostView.raceHostView .top .eyebrow,
#hub.hostView.raceHostView .topActions{
  display:none!important;
}
#hub.hostView.raceHostView .roomCode{
  font-size:clamp(22px,2.1vw,34px)!important;
  line-height:1!important;
  padding:7px 15px!important;
  border-radius:12px!important;
  background:rgba(5,12,20,.58)!important;
  backdrop-filter:blur(6px);
  pointer-events:auto;
}
#hub.hostView.raceHostView #playerBar,
#hub.hostView.raceHostView .hostPanel,
#hub.hostView.raceHostView #qrPanel,
#hub.hostView.raceHostView .selectedGame,
#hub.hostView.raceHostView .raceHud{
  display:none!important;
}
#hub.hostView.raceHostView #gameArea{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
}
#hub.hostView.raceHostView .gameHeader{
  position:static!important;
  min-height:0!important;
  height:0!important;
  margin:0!important;
  padding:0!important;
}
#hub.hostView.raceHostView #backHub{
  display:block!important;
  position:fixed!important;
  top:10px!important;
  left:12px!important;
  z-index:50!important;
  min-width:120px!important;
  padding:9px 13px!important;
  pointer-events:auto!important;
  background:rgba(7,16,25,.78)!important;
  backdrop-filter:blur(7px);
}
#hub.hostView.raceHostView #race,
#hub.hostView.raceHostView #racePlay,
#hub.hostView.raceHostView .raceTvView{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
}
#hub.hostView.raceHostView #racePlay{
  display:block!important;
}
#hub.hostView.raceHostView #raceCanvas{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  max-height:none!important;
  margin:0!important;
  border-radius:0!important;
  aspect-ratio:auto!important;
}
#hub.hostView.raceHostView .raceHostOverlay{
  position:fixed!important;
  left:50%!important;
  bottom:14px!important;
  transform:translateX(-50%)!important;
  z-index:50!important;
  pointer-events:none!important;
}
#hub.hostView.raceHostView .raceHostOverlay button{
  display:block!important;
  min-width:220px!important;
  padding:11px 20px!important;
  pointer-events:auto!important;
  background:rgba(7,16,25,.82)!important;
  backdrop-filter:blur(7px);
}
#hub.hostView.raceHostView .raceStandings{
  top:68px!important;
  left:12px!important;
  z-index:20!important;
}
/* Remote display clones get the same edge-to-edge race picture and room code,
   while host-only navigation stays hidden by the existing clone permissions. */
#hub.cloneView.raceHostView #backHub,
#hub.cloneView.raceHostView .raceHostOverlay{
  display:none!important;
}

/* v0.15.0 — Party Prix race-director overlays */
.raceEventFeed{position:absolute;right:14px;top:70px;z-index:24;display:flex;flex-direction:column;gap:6px;align-items:flex-end;pointer-events:none;max-width:min(38vw,520px)}
.raceEventItem{padding:7px 11px;border-radius:10px;background:rgba(4,10,17,.68);border:1px solid rgba(255,255,255,.16);font-weight:750;font-size:clamp(12px,.9vw,17px);box-shadow:0 5px 18px rgba(0,0,0,.25);animation:raceFeedIn .22s ease-out}
@keyframes raceFeedIn{from{transform:translateX(18px);opacity:0}to{transform:none;opacity:1}}
.raceDirectorBanner,.raceRivalBanner,.raceRecordBanner{position:absolute;left:50%;transform:translateX(-50%);z-index:28;pointer-events:none;text-align:center;border-radius:14px;padding:9px 16px;background:rgba(3,8,14,.78);border:1px solid rgba(255,255,255,.22);box-shadow:0 8px 26px rgba(0,0,0,.4);font-weight:900;letter-spacing:.035em;text-transform:uppercase}
.raceDirectorBanner{top:78px;font-size:clamp(18px,1.7vw,34px)}
.raceRivalBanner{top:126px;font-size:clamp(12px,1vw,20px);color:#ffd866}
.raceRecordBanner{top:164px;font-size:clamp(12px,1vw,19px);color:#78f2ff}
.racePositionPop{position:absolute;z-index:30;pointer-events:none;font-weight:1000;font-size:clamp(20px,2vw,38px);text-shadow:0 3px 12px #000;transform:translate(-50%,-50%);white-space:nowrap;transition:opacity .15s}
.raceSpectatorControls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.raceSpectatorControls button{min-height:52px}
#hub.hostView.raceHostView .raceEventFeed{top:66px}
#hub.hostView.raceHostView .raceDirectorBanner{top:66px}
#hub.hostView.raceHostView .raceRivalBanner{top:112px}
#hub.hostView.raceHostView .raceRecordBanner{top:148px}

.raceFinalLeaderboard{position:absolute;z-index:45;left:50%;top:50%;transform:translate(-50%,-50%);width:min(620px,72vw);max-height:76vh;overflow:hidden;padding:24px 28px;border-radius:22px;background:rgba(4,8,14,.94);border:2px solid rgba(255,255,255,.26);box-shadow:0 22px 70px rgba(0,0,0,.62);backdrop-filter:blur(10px)}
.raceFinalTitle{text-align:center;font-size:clamp(26px,3vw,46px);font-weight:1000;letter-spacing:.06em}.raceFinalWinner{text-align:center;margin:5px 0 18px;font-size:clamp(20px,2vw,32px);font-weight:900;color:#ffd76a}.raceFinalRow{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:9px 12px;margin:6px 0;border-radius:11px;background:rgba(255,255,255,.07);font-size:clamp(15px,1.35vw,23px)}.raceFinalRow span{font-weight:900}.raceFinalReturn{text-align:center;margin-top:16px;opacity:.82;font-weight:800}.raceFinalLeaderboard.hidden{display:none!important}


/* ===== Skyhook Sprint ===== */
.swingCoursePicker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:1050px;margin:20px auto}.swingCourseChoice{display:flex;flex-direction:column;gap:5px;text-align:left;padding:16px;border-radius:18px}.swingCourseChoice.selected{outline:4px solid rgba(255,216,90,.9);transform:translateY(-2px)}.swingCourseChoice small{opacity:.72}.swingHud{display:flex;justify-content:space-between;align-items:center;font-size:clamp(18px,2vw,30px);padding:8px 14px}.swingHud strong{color:#ffd85a}.swingPlay{position:relative}.swingPlay canvas,#swingCanvas{display:block;width:100%;height:min(76vh,860px);border-radius:20px;background:#111;box-shadow:0 18px 70px rgba(0,0,0,.35)}.swingStandings{position:absolute;left:18px;top:72px;display:flex;flex-direction:column;gap:7px;pointer-events:none}.swingStanding{display:flex;gap:14px;justify-content:space-between;min-width:220px;padding:7px 11px;border-radius:10px;background:rgba(10,12,28,.72);backdrop-filter:blur(6px);font-size:14px}.swingPhone{min-height:72vh;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:18px}.swingPhoneStatus{text-align:center;font-size:clamp(22px,6vw,34px);font-weight:900}.swingGrabButton{width:100%;min-height:48vh;border-radius:34px;font-size:clamp(28px,8vw,56px);font-weight:1000;touch-action:none;user-select:none;background:linear-gradient(180deg,#ffd85a,#ff9d24);color:#17100a;box-shadow:0 14px 0 #9d5412,0 22px 40px rgba(0,0,0,.35)}.swingGrabButton:active,.swingGrabButton.hooked{transform:translateY(9px);box-shadow:0 5px 0 #9d5412,0 10px 20px rgba(0,0,0,.3);background:linear-gradient(180deg,#69f1c6,#35b99d)}.swingHint{text-align:center;opacity:.7;font-weight:700}.clientView.swingControllerView .top,.clientView.swingControllerView #playerBar,.clientView.swingControllerView .gameHeader,.clientView.swingControllerView #gameErr{display:none!important}.clientView.swingControllerView #gameArea,.clientView.swingControllerView #swing,.clientView.swingControllerView #swingPlay{display:block!important;padding:0!important;margin:0!important}.clientView.swingControllerView.page{padding:0}.clientView.swingControllerView #swingStandings,.clientView.swingControllerView #swingHud{display:none}.hostView #swingPlay{width:100%}@media(max-width:800px){.swingCoursePicker{grid-template-columns:1fr}.swingStanding{min-width:160px}}

/* v0.17.3 — every active TV game gets the whole usable display instead of a centered mini-window. */
#hub.hostView.playingView,#hub.cloneView.playingView{max-width:none!important;width:100vw!important;min-height:100vh!important;margin:0!important;padding:8px 12px 12px!important;display:flex;flex-direction:column;overflow:hidden}
#hub.hostView.playingView .top,#hub.cloneView.playingView .top{flex:0 0 auto;min-height:42px;margin:0}
#hub.hostView.playingView #playerBar,#hub.cloneView.playingView #playerBar{flex:0 0 auto;margin:5px 0;max-height:42px;overflow:hidden}
#hub.hostView.playingView #gameArea,#hub.cloneView.playingView #gameArea{flex:1 1 auto;min-height:0;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;overflow:hidden}
#hub.hostView.playingView #gameArea>section,#hub.cloneView.playingView #gameArea>section{width:100%!important;max-width:none!important;margin:0!important}
#hub.hostView.playingView .choiceGrid,#hub.cloneView.playingView .choiceGrid{max-width:none!important;width:min(96vw,1600px)}
#hub.hostView.playingView .prompt,#hub.cloneView.playingView .prompt{font-size:clamp(30px,4.2vw,72px)}
#hub.hostView.playingView .wordGrid,#hub.cloneView.playingView .wordGrid{height:calc(100vh - 190px);grid-auto-rows:1fr}
#hub.hostView.playingView .word,#hub.cloneView.playingView .word{min-height:0;font-size:clamp(16px,1.75vw,30px)}
#hub.hostView.playingView .sketchLayout,#hub.cloneView.playingView .sketchLayout{height:calc(100vh - 155px)}
#hub.hostView.playingView .sketchLayout canvas,#hub.cloneView.playingView .sketchLayout canvas{height:100%;max-height:none;aspect-ratio:auto}

/* Skyhook uses an edge-to-edge 60 Hz TV surface. */
#hub.hostView.swingHostView,#hub.cloneView.swingHostView{padding:0!important}
#hub.hostView.swingHostView .top,#hub.cloneView.swingHostView .top{position:absolute;z-index:20;left:12px;right:12px;top:8px;background:rgba(5,8,18,.60);padding:7px 12px;border-radius:12px;backdrop-filter:blur(8px)}
#hub.hostView.swingHostView #playerBar,#hub.cloneView.swingHostView #playerBar{display:none!important}
#hub.hostView.swingHostView #gameArea,#hub.cloneView.swingHostView #gameArea,#hub.hostView.swingHostView #swing,#hub.cloneView.swingHostView #swing,#hub.hostView.swingHostView #swingPlay,#hub.cloneView.swingHostView #swingPlay{width:100vw!important;height:100vh!important;max-width:none!important;margin:0!important;padding:0!important}
#hub.hostView.swingHostView .gameHeader,#hub.cloneView.swingHostView .gameHeader{display:none!important}
#hub.hostView.swingHostView #swingCanvas,#hub.cloneView.swingHostView #swingCanvas{width:100vw!important;height:100vh!important;max-height:none!important;border-radius:0!important;box-shadow:none!important}
#hub.hostView.swingHostView .swingHud,#hub.cloneView.swingHostView .swingHud{position:absolute;z-index:18;top:58px;left:14px;right:14px;background:rgba(7,9,22,.60);border-radius:12px;padding:8px 14px;backdrop-filter:blur(7px)}
#hub.hostView.swingHostView .swingStandings,#hub.cloneView.swingHostView .swingStandings{top:112px;z-index:19}
.swingStanding.out{opacity:.45;text-decoration:line-through}


/* v0.17.5 — cleaner persistent game navigation + centered Skyhook room code. */
.persistentBackGames{
  position:fixed;
  left:14px;
  top:12px;
  z-index:1000;
  margin:0;
  box-shadow:0 5px 18px rgba(0,0,0,.28);
}
/* Skyhook's header should not reserve/paint a full-width empty strip. */
#hub.hostView.swingHostView .top,#hub.cloneView.swingHostView .top{
  position:absolute!important;
  z-index:20!important;
  left:0!important;
  right:0!important;
  top:8px!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  border-radius:0!important;
  backdrop-filter:none!important;
  pointer-events:none;
  display:flex!important;
  justify-content:center!important;
}
#hub.hostView.swingHostView .top>div:first-child,#hub.cloneView.swingHostView .top>div:first-child{
  width:auto!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
}
#hub.hostView.swingHostView .top .eyebrow,#hub.cloneView.swingHostView .top .eyebrow,
#hub.hostView.swingHostView .topActions,#hub.cloneView.swingHostView .topActions{
  display:none!important;
}
#hub.hostView.swingHostView .roomCode,#hub.cloneView.swingHostView .roomCode{
  font-size:clamp(28px,2vw,42px)!important;
  line-height:1!important;
  margin:0!important;
  padding:7px 15px!important;
  border-radius:12px!important;
  background:rgba(5,8,18,.56)!important;
  backdrop-filter:blur(6px);
  pointer-events:auto;
}
/* Keep the HUD clear of the centered code and the always-available Games button. */
#hub.hostView.swingHostView .swingHud,#hub.cloneView.swingHostView .swingHud{top:58px!important;}

/* v0.17.10 — larger join QR for TV-distance scanning. */
#hub.hostView #qrPanel,#hub.hostView .qrPanel{min-height:168px!important;padding:10px 16px!important;}
#hub.hostView #qrPanel img,#hub.hostView .qrPanel img{width:156px!important;height:156px!important;object-fit:contain;}


/* v0.17.10 — Party Prix performance/clarity: remove transient race-director chatter. */
#hub.raceHostView .raceEventFeed,
#hub.raceHostView .raceDirectorBanner,
#hub.raceHostView .raceRivalBanner,
#hub.raceHostView .raceRecordBanner{display:none!important}


/* v0.17.14 — larger Party Prix leaderboard + replay placement polish. */
#hub.hostView.raceHostView .raceStandings{
  min-width:min(430px,35vw)!important;
  max-width:min(520px,41vw)!important;
  gap:8px!important;
}
#hub.hostView.raceHostView .raceStanding{
  padding:10px 14px!important;
  border-radius:12px!important;
  font-size:clamp(16px,1.28vw,24px)!important;
  line-height:1.15!important;
  background:rgba(5,10,18,.78)!important;
  backdrop-filter:blur(7px);
}
#hub.hostView.raceHostView .raceStanding strong{font-size:1.06em;text-shadow:0 2px 6px rgba(0,0,0,.85)}
#hub.hostView.raceHostView .raceStanding span{font-size:.88em}
.raceFinalLeaderboard{width:min(760px,78vw)!important;padding:28px 32px!important}
.raceFinalRow{font-size:clamp(17px,1.55vw,27px)!important;padding:11px 14px!important}
.racePositionPop{display:none!important}


/* v0.17.16 — normalized TV scoreboards, end leaderboard, and reliable mobile taps. */
button,.choice,.pickTile,.majorityChoice,.swingGrab,.raceControlGrid button{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#hub.hostView .scoreboard,#hub.cloneView .scoreboard{
  width:min(1120px,92vw);margin:18px auto!important;gap:10px!important;justify-content:center!important;
}
#hub.hostView .score,#hub.cloneView .score{
  min-width:150px;padding:11px 16px!important;border-radius:14px!important;font-size:clamp(16px,1.25vw,23px)!important;
  background:rgba(10,16,25,.84)!important;border:1px solid rgba(255,255,255,.09);text-align:center;
}
#hub.hostView.raceHostView .raceStandings,#hub.cloneView.raceHostView .raceStandings{min-width:min(455px,37vw)!important;max-width:min(550px,43vw)!important}
#hub.hostView.raceHostView .raceStanding,#hub.cloneView.raceHostView .raceStanding{font-size:clamp(17px,1.35vw,25px)!important;padding:11px 15px!important}
.universalEndLeaderboard{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:120;
  width:min(820px,82vw);max-height:78vh;overflow:hidden;padding:30px 34px;border-radius:24px;
  background:rgba(5,9,16,.94);border:2px solid rgba(255,255,255,.16);box-shadow:0 24px 90px rgba(0,0,0,.65);backdrop-filter:blur(14px);
}
.universalEndTitle{text-align:center;font-weight:1000;letter-spacing:.08em;font-size:clamp(23px,2.2vw,38px)}
.universalEndWinner{text-align:center;font-weight:1000;font-size:clamp(30px,3.1vw,54px);margin:8px 0 20px}
.universalEndRow{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:12px 16px;margin:7px 0;border-radius:13px;background:rgba(255,255,255,.065);font-size:clamp(18px,1.55vw,28px)}
.universalEndRow strong{font-size:1.06em}.universalEndRow span{font-weight:900;color:#d8e0eb}
#hub.hostView.swingHostView .swingStandings,#hub.cloneView.swingHostView .swingStandings{width:min(455px,37vw)!important;gap:9px!important}
#hub.hostView.swingHostView .swingStanding,#hub.cloneView.swingHostView .swingStanding{min-width:0!important;width:100%!important;padding:11px 15px!important;border-radius:12px!important;font-size:clamp(17px,1.35vw,25px)!important;background:rgba(5,10,18,.80)!important}


/* v0.17.19 — Party Prix lap counter and race HUD cleanup. */
.raceTopLapCounter{font-weight:1000;letter-spacing:.08em;font-size:clamp(16px,1.15vw,22px);margin-top:3px;text-align:center;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.85)}
#hub:not(.raceHostView) .raceTopLapCounter{display:none!important}
#hub.raceHostView .roomIdentity{text-align:center}
#hub.raceHostView .raceFinalLeaderboard{z-index:90}