:root {
  color-scheme: dark;
  --ink: #f6fbff;
  --muted: #9cb6c8;
  --deep: #06141f;
  --panel: rgba(10, 34, 48, .88);
  --line: rgba(129, 229, 217, .22);
  --mint: #31e6c1;
  --gold: #ffcf4a;
  --pink: #ff6b8a;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: Inter, ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 8%, rgba(49, 230, 193, .16), transparent 32rem),
    radial-gradient(circle at 92% 85%, rgba(117, 167, 255, .14), transparent 30rem),
    linear-gradient(145deg, #071824, #031018 65%, #071a25);
  overscroll-behavior: none;
}
button, input, a { font: inherit; }
button, .button { touch-action: manipulation; }
.topbar {
  min-height: 72px; padding: max(12px, env(safe-area-inset-top)) clamp(16px, 4vw, 54px) 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid var(--line); background: rgba(3, 16, 24, .76); backdrop-filter: blur(16px);
}
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; }
.brand > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: #06221d; background: var(--mint); font-weight: 1000; font-size: 24px; transform: rotate(-4deg); }
.brand strong { line-height: 1.05; }
.brand small { display: block; color: var(--muted); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-top: 4px; }
.topbar-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.sound-button { min-height:34px; padding:6px 11px; border:1px solid rgba(255,207,74,.32); border-radius:999px; color:#ffe9a2; background:rgba(255,207,74,.08); font-size:12px; font-weight:850; cursor:pointer; }
.sound-button.is-active { color:#092019; border-color:var(--mint); background:var(--mint); }
.sound-button:focus-visible { outline:3px solid rgba(255,207,74,.55); outline-offset:2px; }
.connection-pill { color: var(--muted); font-size: 13px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; }
.connection-pill.online { color: var(--mint); }
.connection-pill.online.quality-fair { color: #ffe09a; border-color: rgba(255,207,74,.34); }
.connection-pill.online.quality-poor { color: #ffb1bd; border-color: rgba(255,107,138,.4); }
.connection-pill.problem { color: #ff9ba9; border-color: rgba(255,107,138,.4); }
.shell { width: min(1180px, 100%); margin: 0 auto; padding: clamp(30px, 6vw, 80px) clamp(16px, 4vw, 40px) max(30px, env(safe-area-inset-bottom)); }
.landing-view { margin-top:-28px; }
.hero { max-width: 850px; margin:0 auto 34px; text-align:center; }
.eyebrow { margin: 0 0 9px; color: var(--mint); font-size: 12px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.hero h1 { margin: 0; font-size: clamp(52px, 8vw, 86px); line-height: .88; letter-spacing: -.065em; }
.hero h1 em { color: var(--gold); font-style: normal; }
.hero > p:last-child { max-width: 680px; margin:22px auto 0; color: var(--muted); font-size: clamp(17px, 2vw, 21px); line-height: 1.55; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.resume-party-card { margin:0 0 20px; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:24px; border:1px solid rgba(255,207,74,.42); border-radius:20px; background:linear-gradient(135deg,rgba(64,38,94,.94),rgba(9,63,70,.94)); box-shadow:0 18px 48px rgba(0,0,0,.2); }
.resume-party-card h2 { margin:0 0 5px; font-size:clamp(23px,3vw,32px); letter-spacing:-.03em; }
.resume-party-card h2 b { color:var(--gold); letter-spacing:.12em; }
.resume-party-card p:not(.eyebrow) { margin:0; color:var(--muted); line-height:1.45; }
.resume-party-actions { min-width:210px; display:grid; gap:4px; }
.resume-party-actions .button { width:100%; }
.watch-button { width:100%; color:var(--ink); background:rgba(117,167,255,.18); border:1px solid rgba(117,167,255,.55); }
.card { min-width: 0; padding: clamp(24px, 4vw, 42px); border: 1px solid var(--line); border-radius: 28px; background: var(--panel); box-shadow: 0 24px 80px rgba(0,0,0,.25); }
.card h2 { margin: 0 0 12px; font-size: clamp(32px, 5vw, 52px); letter-spacing: -.045em; }
.card > p:not(.eyebrow) { color: var(--muted); line-height: 1.55; }
label { display: block; margin: 16px 0 7px; color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
input, select { width: 100%; min-height: 54px; border: 1px solid rgba(156,182,200,.34); border-radius: 13px; padding: 10px 14px; color: var(--ink); background: #102b3a; outline: none; }
input:focus { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(49,230,193,.14); }
.avatar-picker { min-width:0; margin:16px 0 0; padding:0; border:0; }
.avatar-picker legend { margin:0 0 8px; padding:0; color:var(--muted); font-size:13px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.avatar-options { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:7px; }
.avatar-option { position:relative; min-width:0; }
.avatar-option input { position:absolute; width:1px; height:1px; min-height:0; margin:0; opacity:0; pointer-events:none; }
.avatar-option span { min-height:42px; display:grid; place-items:center; border:2px solid rgba(156,182,200,.25); border-radius:12px; background:#102b3a; font-size:23px; cursor:pointer; }
.avatar-option input:checked + span { border-color:var(--gold); background:rgba(255,207,74,.16); box-shadow:0 0 0 3px rgba(255,207,74,.1); }
.avatar-option input:focus-visible + span { outline:3px solid var(--mint); outline-offset:2px; }
.code-input { font-size: 30px; font-weight: 1000; letter-spacing: .24em; text-transform: uppercase; text-align: center; }
.button { min-height: 52px; border: 0; border-radius: 14px; padding: 13px 18px; display: inline-grid; place-items: center; text-decoration: none; font-weight: 950; cursor: pointer; }
.primary { color: #071b18; background: var(--mint); }
.crowd-primary { color:#fff; background:linear-gradient(135deg,#d94f7d,#6b67d8); }
.secondary { width: 100%; margin-top: 20px; color: #171302; background: var(--gold); }
.error { min-height: 22px; margin: 12px 0 0; color: #ff98a8; }
.controller-view { min-height: calc(100dvh - 110px); display: flex; flex-direction: column; gap: 18px; max-width: 640px; margin: 0 auto; }
.controller-game { min-height:0; flex:1; display:flex; flex-direction:column; gap:18px; }
.controller-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.player-badge, .room-chip { min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid var(--line); }
.player-badge span { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--mint); box-shadow:0 0 14px currentColor; font-size:20px; line-height:1; }
.room-chip { color: var(--muted); }
.room-chip b { color: var(--gold); letter-spacing: .14em; }
.controller-status { text-align: center; padding: 18px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); }
.race-feedback { margin:-8px 0; padding:13px 18px; border-radius:16px; text-align:center; font-size:clamp(18px,6vw,28px); font-weight:1000; letter-spacing:-.02em; background:rgba(49,230,193,.18); border:1px solid rgba(49,230,193,.55); animation:feedback-pop .34s ease-out; }
.race-feedback.impact { color:#fff; background:rgba(255,107,138,.28); border-color:rgba(255,107,138,.7); }
@keyframes feedback-pop { from { transform:scale(.88); opacity:.2; } to { transform:scale(1); opacity:1; } }
.choice-panel { padding:14px; border:1px solid var(--line); border-radius:18px; background:var(--panel); }
.choice-buttons { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.choice-buttons button { min-height:42px; padding:7px; border:1px solid rgba(255,255,255,.15); border-radius:11px; color:var(--ink); background:rgba(255,255,255,.06); font-weight:850; }
.choice-buttons button.selected { color:#071b18; background:var(--mint); border-color:var(--mint); }
.vote-buttons button { color:#fff4c4; border-color:rgba(255,207,74,.35); }
.garage-panel { margin-top:10px; color:var(--muted); }
.garage-panel summary { cursor:pointer; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.garage-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:9px; }
.garage-grid label { margin:0; font-size:9px; }
.garage-grid select { width:100%; min-height:36px; margin-top:4px; border:1px solid rgba(255,255,255,.14); border-radius:8px; padding:4px; color:var(--ink); background:#102f3e; }
.gadget-use { min-height:48px; border:1px solid rgba(194,140,255,.5); border-radius:14px; color:#f0deff; background:linear-gradient(180deg,rgba(194,140,255,.28),rgba(76,42,113,.35)); font-weight:1000; letter-spacing:.08em; }
.gadget-use:disabled { opacity:.38; }
.emote-bar { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
.emote-bar button { min-height:42px; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:rgba(255,255,255,.05); font-size:21px; }
.crowd-controller { justify-content:center; }
.crowd-status { background:linear-gradient(145deg,rgba(68,32,93,.92),rgba(15,48,75,.92)); }
.crowd-prompt { padding:clamp(18px,5vw,30px); border:1px solid rgba(194,140,255,.42); border-radius:24px; background:rgba(15,27,48,.94); text-align:center; }
.crowd-prompt h2 { min-height:2.5em; margin:6px 0 20px; font-size:clamp(22px,7vw,34px); line-height:1.16; }
.crowd-choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.crowd-choice { min-height:clamp(145px,38vw,220px); padding:16px 10px; border:2px solid transparent; border-radius:22px; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; box-shadow:inset 0 -8px 0 rgba(0,0,0,.18); }
.crowd-choice.left { background:linear-gradient(160deg,#e75988,#983e78); }
.crowd-choice.right { background:linear-gradient(160deg,#4f9bea,#5150aa); }
.crowd-choice span { font-size:11px; font-weight:1000; letter-spacing:.18em; opacity:.8; }
.crowd-choice strong { font-size:clamp(18px,5.2vw,28px); line-height:1.08; }
.crowd-choice.selected { border-color:#fff6a8; transform:translateY(3px); box-shadow:0 0 0 4px rgba(255,207,74,.18),inset 0 -3px 0 rgba(0,0,0,.18); }
.crowd-choice:disabled { opacity:.48; }
.crowd-choice.selected:disabled { opacity:1; }
.crowd-choice-status { min-height:22px; margin:15px 0 0; color:var(--muted); font-size:13px; }
.duel-panel { margin-top:14px; padding:12px; display:grid; grid-template-columns:minmax(0,1fr) minmax(130px,.44fr); gap:10px; align-items:stretch; border:1px solid rgba(255,227,110,.3); border-radius:17px; background:rgba(255,227,110,.06); text-align:left; }
.duel-label { margin:0 0 7px; color:#d9d0e7; font-size:12px; font-weight:800; }
.duel-label b { color:#ffe36e; }
.duel-predict-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.duel-predict-grid button { min-width:0; min-height:66px; padding:7px; border:1px solid rgba(255,255,255,.17); border-radius:12px; color:#fff; background:rgba(255,255,255,.07); }
.duel-predict-grid span { display:block; color:#bdb1d2; font-size:9px; font-weight:950; letter-spacing:.06em; }
.duel-predict-grid strong { display:-webkit-box; margin-top:4px; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-height:1.08; font-size:10px; }
.duel-predict-grid button.selected { border-color:#ffe36e; background:rgba(255,227,110,.18); box-shadow:0 0 0 2px rgba(255,227,110,.1); }
.hot-take { min-height:58px; padding:9px; border:1px solid rgba(255,107,138,.48); border-radius:13px; color:#fff; background:linear-gradient(150deg,rgba(255,107,138,.25),rgba(133,75,185,.28)); }
.hot-take b,.hot-take span { display:block; }
.hot-take b { color:#ffb2c5; font-size:13px; }
.hot-take span { margin-top:5px; color:#cabed9; font-size:9px; line-height:1.25; }
.hot-take.selected { border-color:#ffe36e; background:linear-gradient(150deg,rgba(255,107,138,.52),rgba(133,75,185,.55)); box-shadow:0 0 18px rgba(255,107,138,.18); }
.hot-take:disabled,.duel-predict-grid button:disabled { opacity:.42; }
.hot-take.used { opacity:.68; filter:saturate(.5); }
.crowd-emotes { margin-top:auto; }
.controller-status h1 { margin: 5px 0 18px; font-size: clamp(25px, 8vw, 42px); }
.controller-metrics { display: flex; justify-content: center; gap: clamp(16px, 8vw, 42px); }
.controller-metrics span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.controller-metrics b { display: block; margin-top: 3px; color: var(--ink); font-size: 24px; }
.tilt-panel { text-align: center; }
.tilt-meter { height: 18px; margin: 0 18px 12px; border-radius: 99px; background: linear-gradient(90deg, var(--pink), #1d3442 47%, #1d3442 53%, var(--mint)); position: relative; }
.tilt-meter::after { content: ""; position: absolute; left: 50%; top: -4px; width: 2px; height: 26px; background: white; opacity: .6; }
.tilt-meter span { position: absolute; left: 50%; top: -5px; width: 28px; height: 28px; border-radius: 50%; background: white; box-shadow: 0 4px 14px rgba(0,0,0,.45); transform: translateX(-50%); transition: left 70ms linear; }
.tilt-button { width: 100%; color: var(--ink); background: rgba(49,230,193,.12); border: 1px solid rgba(49,230,193,.42); }
#tiltHelp { margin: 8px 10px 0; min-height: 36px; color: var(--muted); font-size: 12px; }
.drive-controls { margin-top: auto; display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 10px; }
.drive-button { min-width: 0; min-height: clamp(112px, 28vw, 160px); border: 1px solid rgba(255,255,255,.16); border-radius: 24px; color: var(--ink); background: linear-gradient(180deg, rgba(30,66,82,.98), rgba(10,31,43,.98)); font-size: 42px; font-weight: 1000; box-shadow: inset 0 -8px 0 rgba(0,0,0,.22); touch-action: none; user-select: none; }
.drive-button small { display: block; margin-top: 9px; color: var(--muted); font-size: 11px; letter-spacing: .14em; }
.drive-button.boost { color: #171302; background: linear-gradient(180deg, #ffe278, #f4af28); }
.drive-button:active, .drive-button.pressed { transform: translateY(4px); box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); }
.drive-button:disabled { opacity: .38; }
.text-button { min-height: 44px; border: 0; color: var(--muted); background: transparent; text-decoration: underline; cursor: pointer; }
.host-recovery-notice { margin:6px 0 0; padding:9px 10px; color:#bfffe8; border:1px solid rgba(49,230,193,.28); border-radius:10px; background:rgba(49,230,193,.09); font-size:11px; line-height:1.4; text-align:center; }
.invite-button { color:#071b18; border:1px solid rgba(49,230,193,.65); background:linear-gradient(135deg,#70f0d4,#54cfea); }
.invite-button:disabled { color:var(--muted); border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.06); cursor:not-allowed; opacity:.7; }
.share-status { min-height:18px; margin:3px 0 0; color:#bfffe8; font-size:11px; line-height:1.35; text-align:center; }
.party-actions { align-items:stretch; }
.start-party-card,.join-card { display:flex; flex-direction:column; }
.start-party-card { border-color:rgba(255,207,74,.5); background:linear-gradient(145deg,rgba(58,33,92,.96),rgba(9,52,65,.96)); }
.join-card { border-color:rgba(49,230,193,.4); background:linear-gradient(145deg,rgba(8,48,58,.97),rgba(10,31,50,.97)); }
.party-room-preview { min-height:170px; margin:18px 0; padding:22px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; border:1px solid rgba(255,255,255,.14); border-radius:22px; background:radial-gradient(circle at 50% 20%,rgba(255,207,74,.18),transparent 55%),rgba(4,14,30,.46); }
.preview-screen { width:min(270px,86%); aspect-ratio:16/7; display:grid; place-items:center; align-content:center; gap:4px; border:3px solid rgba(255,255,255,.8); border-radius:13px; background:linear-gradient(145deg,#35235e,#0c6a6d); box-shadow:0 12px 30px rgba(0,0,0,.35),0 0 28px rgba(49,230,193,.13); }
.preview-screen small { color:#d5e5ed; font-size:10px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.preview-screen strong { color:var(--gold); font-size:clamp(25px,4vw,38px); letter-spacing:.13em; }
.preview-players { display:flex; justify-content:center; }
.preview-players span { width:42px; height:42px; margin-left:-5px; display:grid; place-items:center; border:2px solid #071824; border-radius:50%; background:#173c4e; font-size:23px; box-shadow:0 8px 16px rgba(0,0,0,.28); }
.preview-players span:first-child { margin-left:0; }
.party-promises { margin:0 0 24px; padding:0; display:grid; gap:10px; list-style:none; color:#d8e5ed; font-weight:750; }
.party-promises span { margin-right:7px; color:var(--mint); }
.start-party-card .button { width:100%; margin-top:12px; }
.party-primary { color:#171302; background:linear-gradient(135deg,#ffe36e,#ffad3d); box-shadow:0 12px 32px rgba(255,181,55,.22); }
.watch-card { margin-top:20px; padding:22px clamp(22px,4vw,34px); display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,440px); gap:28px; align-items:center; border:1px solid rgba(117,167,255,.25); border-radius:22px; background:rgba(8,27,43,.72); }
.watch-card h2 { margin:0 0 7px; font-size:clamp(22px,3vw,30px); letter-spacing:-.03em; }
.watch-card p:not(.eyebrow) { margin:0; color:var(--muted); line-height:1.45; }
.watch-card form { display:grid; grid-template-columns:minmax(120px,1fr) minmax(170px,auto); gap:9px; align-items:end; }
.watch-card label { grid-column:1 / -1; margin:0; }
.watch-card .code-input { min-width:0; }
.watch-card .error { grid-column:1 / -1; margin:0; min-height:0; }
.session-view { width:min(1600px,100%); margin:0 auto; }
.session-head { display:flex; justify-content:space-between; align-items:end; gap:18px; margin-bottom:14px; }
.session-head .eyebrow { margin:0 0 4px; }
.session-code { font-size:16px; font-weight:850; color:var(--muted); }
.session-code b { margin-left:8px; color:var(--gold); font-size:34px; letter-spacing:.18em; }
.session-stats { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.session-stats span { padding:8px 12px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:rgba(255,255,255,.05); font-weight:800; }
.session-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:16px; align-items:start; }
.party-stage-wrap { position:relative; overflow:hidden; aspect-ratio:16/9; border:1px solid rgba(255,255,255,.16); border-radius:24px; background:#10172f; box-shadow:0 24px 60px rgba(0,0,0,.35); }
.party-stage-wrap canvas,.party-stage-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.party-stage-wrap canvas { display:block; }
.session-sidebar { min-height:100%; padding:16px; border:1px solid var(--line); border-radius:22px; background:var(--panel); }
.session-sidebar > p { margin:7px 0 13px; color:var(--muted); text-align:center; font-size:12px; }
.session-qr { width:150px; min-height:150px; margin:0 auto; padding:7px; border-radius:14px; background:#fff; }
.session-qr svg { display:block; width:100%; height:auto; }
.party-roster,.phone-standings { margin:12px 0; padding:0; list-style:none; display:grid; gap:6px; }
.party-roster li,.phone-standings li { min-height:42px; display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:8px; padding:6px 9px; border-radius:11px; background:rgba(255,255,255,.055); }
.party-teams-panel,.party-highlights-panel { margin-top:12px; padding:11px; border:1px solid rgba(255,207,74,.24); border-radius:15px; background:rgba(255,255,255,.035); }
.party-teams,.party-highlights { display:grid; gap:6px; margin-top:8px; }
.party-team-row { display:grid; grid-template-columns:10px minmax(0,1fr) auto; align-items:center; gap:7px; padding:7px 8px; border-radius:9px; background:rgba(255,255,255,.05); font-size:11px; }
.party-team-row i { width:10px; height:10px; border-radius:50%; background:var(--team); box-shadow:0 0 8px var(--team); }
.party-team-row b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.party-team-row span { color:var(--gold); font-weight:900; }
.party-highlights { margin-bottom:9px; padding-left:19px; color:var(--muted); font-size:11px; line-height:1.4; }
.party-highlights li + li { margin-top:5px; }
.party-highlights b { color:var(--ink); }
.party-highlights .highlight-award { color:var(--gold); font-weight:900; }
.party-roster li.host-manageable { grid-template-columns:30px minmax(0,1fr) auto auto; }
.party-roster i,.phone-standings i { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--player); box-shadow:0 0 10px var(--player); font-size:17px; font-style:normal; }
.party-roster b,.phone-standings b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.party-roster span,.phone-standings span { color:var(--gold); font-weight:900; }
.host-controls { display:grid; gap:8px; margin-top:12px; }
.party-setup-controls { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:11px; border:1px solid rgba(117,167,255,.28); border-radius:15px; background:rgba(12,22,49,.48); }
.party-setup-controls > label { margin:0; color:var(--muted); font-size:10px; }
.party-setup-controls > label:nth-of-type(3),.party-setup-controls details,.party-setup-controls .room-safety-heading,.party-setup-controls .party-catchup { grid-column:1 / -1; }
.party-setup-controls #partyShuffleTeamsButton { grid-column:1 / -1; min-height:34px; padding:6px; font-size:11px; }
.party-setup-controls select { min-height:36px; margin-top:4px; padding:6px 8px; color:var(--ink); border:1px solid rgba(255,255,255,.18); border-radius:9px; background:#172039; font-size:11px; text-transform:none; letter-spacing:0; }
.party-setup-controls details { padding-top:3px; }
.party-setup-controls summary { color:#cfe0ff; font-size:11px; font-weight:850; cursor:pointer; }
.party-toggle-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; padding-top:9px; }
.party-toggle-grid label { display:flex; align-items:center; gap:6px; margin:0; color:var(--muted); font-size:10px; letter-spacing:0; text-transform:none; }
.party-toggle-grid input { width:16px; height:16px; margin:0; accent-color:var(--mint); }
.party-catchup { display:flex; align-items:center; gap:7px; padding-top:3px; text-transform:none; letter-spacing:0; }
.party-catchup input { width:16px; height:16px; margin:0; accent-color:var(--mint); }
.party-activity-pool { display:grid; gap:5px; max-height:190px; margin-top:8px; overflow:auto; }
.party-activity-pool label { display:flex; align-items:center; gap:6px; margin:0; padding:5px 7px; border-radius:8px; color:var(--muted); background:rgba(255,255,255,.045); font-size:10px; text-transform:none; letter-spacing:0; }
.party-activity-pool input { flex:0 0 auto; width:15px; height:15px; margin:0; accent-color:var(--mint); }
.party-host-choice { padding:11px; border:1px solid rgba(255,207,74,.35); border-radius:15px; background:rgba(255,207,74,.07); }
.party-host-choice .eyebrow { margin:0 0 7px; }
.party-host-choice > div { display:grid; gap:6px; }
.party-host-choice button { min-height:38px; padding:7px; color:var(--ink); border:1px solid rgba(255,207,74,.35); border-radius:9px; background:rgba(255,255,255,.07); font-size:11px; font-weight:850; }
.party-setup-controls[aria-disabled="true"] { opacity:.62; }
.party-high-contrast { --ink:#fff; --muted:#e6f2ff; --line:rgba(255,255,255,.62); }
.party-high-contrast .session-sidebar,.party-high-contrast .party-stage-wrap { border-width:2px; }
.party-reduced-motion * { scroll-behavior:auto !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
@media (min-width:761px) { .party-stage-wrap { position:sticky; top:78px; } }
.room-safety-controls { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:11px; border:1px solid rgba(255,255,255,.12); border-radius:15px; background:rgba(3,8,18,.34); }
.room-safety-heading { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.room-safety-heading .eyebrow { margin:0; }
.room-safety-heading span { padding:3px 8px; border-radius:999px; color:#b7f6df; background:rgba(59,210,151,.14); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.room-safety-heading span.locked { color:#ffe2a8; background:rgba(255,184,77,.16); }
.room-safety-controls .button { min-height:40px; padding:8px; font-size:12px; }
.room-safety-controls #partyFriendlyNamesButton { grid-column:1 / -1; }
.room-safety-controls .button.is-active { border-color:rgba(255,184,77,.58); background:rgba(255,184,77,.15); }
.player-limit-label { grid-column:1 / -1; display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; margin:0; color:var(--muted); font-size:12px; font-weight:800; }
.player-limit-label select { min-width:116px; min-height:38px; padding:7px 30px 7px 9px; color:var(--ink); border:1px solid rgba(255,255,255,.18); border-radius:9px; background:#172039; }
.room-control-help { grid-column:1 / -1; margin:0; color:var(--muted); font-size:10px; line-height:1.35; }
.roster-remove { min-height:28px; padding:4px 7px; color:#ffdce3; border:1px solid rgba(255,107,138,.35); border-radius:8px; background:rgba(255,107,138,.12); font:inherit; font-size:10px; font-weight:900; cursor:pointer; }
.removed-notice { margin:auto; padding:28px; text-align:center; border:1px solid rgba(255,107,138,.35); border-radius:24px; background:var(--panel); box-shadow:var(--shadow); }
.removed-notice > span { display:block; font-size:56px; }
.removed-notice h1 { margin:8px 0; font-family:"Fredoka One",system-ui,sans-serif; }
.removed-notice p { max-width:430px; color:var(--muted); line-height:1.55; }
.removed-notice .button { display:inline-flex; margin-top:8px; text-decoration:none; }
.quiet-button { color:var(--ink); border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.07); }
.danger-button { color:#ffdce3; border:1px solid rgba(255,107,138,.4); background:rgba(255,107,138,.15); }
.party-status { background:linear-gradient(145deg,rgba(67,34,102,.95),rgba(10,64,75,.95)); border-color:rgba(255,207,74,.35); }
.party-vote-panel { padding:15px; border:1px solid rgba(255,207,74,.3); border-radius:20px; background:var(--panel); }
.party-lobby-guide { padding:16px; border:1px solid rgba(49,230,193,.32); border-radius:20px; background:var(--panel); }
.party-lobby-guide ol { margin:8px 0 14px; padding-left:20px; color:var(--muted); font-size:13px; line-height:1.45; }
.party-lobby-guide li + li { margin-top:5px; }
.party-lobby-guide .button { width:100%; }
.party-lobby-guide .button + .button { margin-top:8px; }
.party-lobby-guide .button[aria-pressed="true"] { color:#07131d; background:var(--mint); }
.form-help { margin:7px 0 0; color:var(--muted); font-size:11px; line-height:1.35; }
.audience-badge { margin:0; padding:7px 10px; border:1px solid rgba(141,216,255,.35); border-radius:999px; color:#bfeaff; background:rgba(81,166,220,.12); font-size:11px; font-weight:800; text-align:center; }
.audience-panel { padding:15px; border:1px solid rgba(141,216,255,.35); border-radius:20px; background:rgba(20,66,92,.5); }
.audience-panel p:not(.eyebrow) { margin:0 0 10px; color:var(--muted); font-size:13px; line-height:1.4; }
.audience-reactions { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.audience-reactions button { min-height:54px; border:1px solid rgba(141,216,255,.35); border-radius:14px; color:#fff; background:rgba(255,255,255,.08); font-size:25px; cursor:pointer; }
.audience-reactions button:active { transform:translateY(2px); background:rgba(141,216,255,.2); }
.party-encore-panel { padding:18px; border:1px solid rgba(255,207,74,.34); border-radius:20px; background:linear-gradient(145deg,rgba(67,34,102,.72),rgba(10,64,75,.72)); text-align:center; }
.party-encore-panel h2 { margin:0 0 7px; color:var(--gold); font-size:26px; }
.party-encore-panel p:last-child { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.party-vote-buttons { display:grid; gap:10px; }
.party-vote-buttons button { min-height:88px; padding:13px; border:2px solid rgba(255,255,255,.14); border-radius:17px; color:#fff; background:linear-gradient(145deg,rgba(40,73,96,.92),rgba(37,30,74,.92)); text-align:left; }
.party-vote-buttons button strong,.party-vote-buttons button span,.party-vote-buttons button small { display:block; }
.party-vote-buttons button strong { color:var(--gold); font-size:18px; }
.party-vote-buttons button span { margin-top:4px; color:#d8e5ed; font-size:13px; }
.party-vote-buttons button small { margin-top:8px; color:var(--muted); font-size:11px; }
.party-vote-buttons button.selected { border-color:var(--gold); transform:translateY(2px); box-shadow:0 0 0 4px rgba(255,207,74,.12); }
.party-vote-buttons button:disabled { opacity:.65; }
[hidden] { display: none !important; }
@media (max-width: 760px) {
  .topbar { min-height: 62px; padding-left: 14px; padding-right: 14px; }
  .topbar-actions { gap:5px; }
  .sound-button { min-width:42px; max-width:104px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .connection-pill { max-width: 84px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .shell { padding-top: 25px; }
  .landing-view { margin-top:0; }
  .cards { grid-template-columns: 1fr; }
  .resume-party-card { align-items:stretch; flex-direction:column; gap:14px; }
  .resume-party-actions { min-width:0; }
  .avatar-options { grid-template-columns:repeat(8,minmax(34px,1fr)); gap:5px; }
  .hero { margin-bottom:30px; }
  .hero h1 { font-size:clamp(46px,15vw,68px); }
  .party-room-preview { min-height:150px; }
  .watch-card { display:block; }
  .watch-card form { margin-top:18px; }
  .controller-view { min-height: calc(100dvh - 88px); }
  .garage-grid { grid-template-columns:1fr; }
  .session-layout { grid-template-columns:1fr; }
  .session-sidebar { display:grid; grid-template-columns:120px 1fr; gap:10px; }
  .session-qr { width:120px; min-height:120px; grid-row:1 / span 3; }
  .session-sidebar > p { text-align:left; }
  .party-roster,.host-controls { margin:0; }
}
@media (orientation: landscape) and (max-height: 600px) {
  .topbar { min-height: 54px; }
  .shell { padding: 8px 14px; }
  .controller-view { min-height: 0; height: calc(100dvh - 70px); }
  .controller-game { display:grid; grid-template-columns:.8fr 1.2fr; min-height:0; }
  .controller-status { grid-column:1; grid-row:1; }
  .controller-status h1 { margin-bottom: 10px; font-size: clamp(22px, 5vw, 34px); }
  .tilt-panel { display: none; }
  .choice-panel { display:none; }
  .drive-controls { grid-column: 2; grid-row: 1; margin: 0; min-height: 0; }
  .drive-button { min-height: 0; height: 100%; border-radius: 18px; }
  .text-button { display: none; }
  .gadget-use { position:fixed; left:14px; bottom:12px; width:calc(34% - 20px); z-index:3; }
  .emote-bar { display:none; }
  .crowd-controller { grid-template-columns:.72fr 1.28fr; }
  .party-controller { grid-template-columns:.72fr 1.28fr; }
  .party-controller .party-vote-panel { grid-column:2; grid-row:1; padding:8px; }
  .party-controller .party-vote-buttons { grid-template-columns:repeat(3,1fr); gap:6px; }
  .party-controller .party-vote-buttons button { min-height:0; height:calc(100dvh - 105px); padding:8px; }
  .party-controller .party-vote-buttons button strong { font-size:13px; }
  .party-controller .party-vote-buttons button span { font-size:10px; }
  .party-controller .phone-standings { display:none; }
  .crowd-prompt { grid-column:2; grid-row:1; padding:10px; }
  .crowd-prompt h2 { min-height:0; margin:2px 0 8px; font-size:19px; }
  .crowd-choice { min-height:112px; height:clamp(112px,calc(100dvh - 250px),170px); border-radius:16px; }
  .crowd-choice strong { font-size:18px; }
  .crowd-prompt.duel-active h2 { font-size:17px; margin-bottom:5px; }
  .crowd-prompt.duel-active .crowd-choice { min-height:76px; height:76px; padding:5px; gap:3px; }
  .crowd-prompt.duel-active .crowd-choice span { font-size:9px; }
  .crowd-prompt.duel-active .crowd-choice strong { font-size:14px; }
  .duel-panel { margin-top:6px; padding:6px; grid-template-columns:minmax(0,1fr) 125px; gap:6px; border-radius:12px; }
  .duel-label { margin-bottom:3px; font-size:9px; }
  .duel-predict-grid button { min-height:46px; padding:4px; border-radius:8px; }
  .duel-predict-grid span { font-size:7px; }
  .duel-predict-grid strong { margin-top:2px; -webkit-line-clamp:2; font-size:9px; }
  .hot-take { min-height:46px; padding:5px; }
  .hot-take b { font-size:10px; }
  .hot-take span { margin-top:2px; font-size:7px; }
  .duel-active + .crowd-choice-status,.duel-active .crowd-choice-status { display:none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
/* Sketch Clash is a phone-first controller. Its canvas alone disables touch scrolling. */
#stickController{max-width:560px;margin:auto;padding:12px 4px;color:#f8f3e8} .stick-heading,.stick-stats{display:flex;justify-content:space-between;gap:12px}.stick-heading{font-size:13px;font-weight:900;color:#ffd560}#stickIdentity{border-left:8px solid;padding-left:12px;margin:16px 0 8px;font-size:30px}#stickMessage{min-height:24px;font-size:16px;padding:5px 8px;margin-left:-8px;border-radius:8px;transition:background-color .12s,color .12s}#stickMessage[data-feedback="hit"],#stickMessage[data-feedback="knockout"]{color:#102419;background:#75efad}#stickMessage[data-feedback="damage"]{color:#fff;background:#a83449}#stickMessage[data-feedback="block"]{color:#102331;background:#79d9ed}.stick-stats{background:#202b3a;padding:14px;border-radius:14px;font-size:12px}.stick-stats b{font-size:27px;display:block}#stickController button{touch-action:none;min-height:60px;font-size:20px;font-weight:900;border:2px solid #65718a;border-radius:16px;background:#263348;color:#fff}.stick-tilt{width:100%;margin-top:14px}#stickTiltHelp,.stick-tip{font-size:13px;line-height:1.5;color:#ced4e1;margin:8px 0}.stick-meter{height:12px;background:#101722;border-radius:10px;position:relative;margin:15px 8px}.stick-meter i{position:absolute;width:20px;height:20px;top:-4px;left:50%;transform:translateX(-50%);background:#ffd560;border-radius:50%}.stick-movement{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}#stickController .stick-punch{width:100%;height:104px;font-size:34px;background:#ffd560;color:#182231;border-color:#ffd560}#stickController small{display:block;font-size:12px;font-weight:600;padding-top:4px}#stickController button:disabled{opacity:.5}.stick-tip{text-align:center}
#sketchController { display:grid; gap:12px; padding-bottom:max(18px,env(safe-area-inset-bottom)); }
.sketch-status { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#sketchTimer { padding:8px 12px; border-radius:999px; color:#19122b; background:#ffe36e; font-size:1.05rem; font-variant-numeric:tabular-nums; }
#sketchRule { margin:0; color:var(--muted); font-size:.9rem; }
#sketchChoices { display:grid; gap:10px; }
#sketchChoices button { width:100%; min-height:58px; font-size:1.05rem; }
.sketch-canvas-wrap { padding:5px; border-radius:22px; background:linear-gradient(135deg,#ffe36e,#ff6b9f 45%,#31e6c1); box-shadow:0 14px 36px rgba(0,0,0,.3); }
#sketchCanvas { display:block; width:100%; aspect-ratio:3/2; background:#fff; border-radius:17px; touch-action:none; }
.sketch-tools { display:grid; gap:10px; padding:12px; border:1px solid rgba(255,255,255,.13); border-radius:18px; background:rgba(11,12,34,.52); }
.sketch-tools fieldset { min-width:0; margin:0; padding:8px 10px 10px; border:1px solid rgba(255,255,255,.12); border-radius:13px; }
.sketch-tools legend { padding:0 6px; color:#d9d4ee; font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }
.sketch-tools input[type="range"] { width:100%; accent-color:#ff6b9f; }
.sketch-palette { display:grid; grid-template-columns:repeat(9,1fr); gap:7px; }
.sketch-palette .swatch,.custom-swatch { position:relative; display:grid; place-items:center; width:100%; min-width:0; aspect-ratio:1; min-height:36px; margin:0; padding:0; border:3px solid rgba(255,255,255,.28); border-radius:50%; background:var(--swatch); }
.sketch-palette .swatch.selected { border-color:#fff; box-shadow:0 0 0 3px #ff6b9f; transform:scale(.92); }
.custom-swatch { overflow:hidden; background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red); }
.custom-swatch input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.custom-swatch span { color:#fff; font-size:1.25rem; font-weight:950; text-shadow:0 1px 3px #000; pointer-events:none; }
.sketch-tool-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.sketch-tool-actions button { min-width:0; min-height:46px; padding:7px 4px; font-size:.8rem; }
.sketch-tool-actions button.selected { color:#19122b; background:#ffe36e; box-shadow:0 0 0 2px rgba(255,227,110,.28); }
#sketchGuessForm { display:flex; gap:8px; align-items:end; }
#sketchGuessForm label { flex:1; display:grid; gap:5px; }
#sketchGuess { min-height:44px; width:100%; }
#sketchResult { min-height:1.5em; margin:0; color:#ffe36e; font-weight:800; }