:root {
  color-scheme: dark;
  --bg: #100d1c;
  --panel: #19152a;
  --panel-2: #211b36;
  --ink: #f6f3ff;
  --muted: #aba5bc;
  --line: rgba(255, 255, 255, .11);
  --purple: #9686ff;
  --purple-2: #6955e8;
  --mint: #5fd0a9;
  --yellow: #f5c95e;
  --pink: #dd67b6;
  --danger: #ff7f91;
  --shadow: 0 28px 70px rgba(4, 2, 12, .42);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--bg); }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 13% 3%, rgba(105, 85, 232, .23), transparent 30rem),
    radial-gradient(circle at 91% 90%, rgba(221, 103, 182, .11), transparent 34rem),
    var(--bg);
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  opacity: .16;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

.site-header {
  width: min(1380px, calc(100% - 48px));
  min-height: 82px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: var(--ink);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 760;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.brand b { color: var(--purple); font-weight: 760; }

.brand-mark {
  position: relative;
  width: 34px;
  height: 24px;
  display: inline-block;
  border-radius: 7px;
  background: #d9d5e6;
  box-shadow: 0 0 0 3px rgba(150, 134, 255, .12);
}

.brand-mark::before,
.brand-mark::after {
  position: absolute;
  content: "";
  background: #343044;
}

.brand-mark::before { width: 10px; height: 3px; left: 5px; top: 10px; }
.brand-mark::after { width: 3px; height: 10px; left: 8px; top: 7px; }
.brand-mark i { position: absolute; width: 5px; height: 5px; border-radius: 50%; }
.brand-mark i:nth-child(1) { right: 7px; top: 5px; background: var(--mint); }
.brand-mark i:nth-child(2) { right: 3px; top: 10px; background: var(--yellow); }
.brand-mark i:nth-child(3) { right: 11px; top: 10px; background: var(--pink); }
.brand-mark i:nth-child(4) { right: 7px; top: 15px; background: var(--purple); }
.brand-mark.large { transform: scale(1.6); margin-bottom: 28px; }

.header-badges { display: flex; gap: 9px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid rgba(95, 208, 169, .22);
  border-radius: 999px;
  background: rgba(95, 208, 169, .07);
  color: #c4f4e3;
  font-size: .76rem;
  font-weight: 680;
}
.chip-muted { color: #c9c4d7; border-color: var(--line); background: rgba(255,255,255,.035); }
.chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(95,208,169,.1); }

.page-shell { width: min(1260px, calc(100% - 48px)); margin: 72px auto 90px; }
.host-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(380px, .72fr); gap: 82px; align-items: center; }
.host-grid:has(.session-card:not([hidden])) { display: block; width: min(1180px, calc(100% - 48px)); margin-top: 30px; }
.host-grid:has(.session-card:not([hidden])) > .hero-panel,
.host-grid:has(.session-card:not([hidden])) > .setup-card { display: none; }

.eyebrow, .kicker {
  margin: 0 0 16px;
  color: var(--mint);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hero-panel h1 {
  max-width: 780px;
  margin: 0;
  font-size: clamp(3.2rem, 6vw, 6.2rem);
  line-height: .94;
  letter-spacing: -.065em;
}
.hero-panel h1 span { color: var(--purple); }
.lede { max-width: 650px; margin: 30px 0 0; color: #c5c0d2; font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.72; }

.trust-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 660px; margin-top: 42px; }
.trust-row div { min-height: 72px; padding: 15px 14px; border-top: 1px solid var(--line); }
.trust-row strong { display: block; margin-bottom: 7px; color: var(--purple); font: 700 .7rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.trust-row span { color: #d7d2e0; font-size: .82rem; font-weight: 650; }

.privacy-note {
  max-width: 650px;
  margin-top: 30px;
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid rgba(95,208,169,.18);
  border-radius: 14px;
  background: rgba(95,208,169,.055);
  color: #beb9c9;
  font-size: .81rem;
  line-height: 1.55;
}
.privacy-note strong { color: #e8fff7; }
.privacy-note svg, .stream-notice svg { width: 21px; min-width: 21px; height: 21px; fill: var(--mint); }

.setup-card, .session-card, .controller-column {
  border: 1px solid var(--line);
  border-radius: 23px;
  background: linear-gradient(145deg, rgba(34, 28, 56, .96), rgba(22, 18, 39, .96));
  box-shadow: var(--shadow);
}
.setup-card { padding: clamp(25px, 3.4vw, 42px); }
.card-heading, .session-topbar, .section-heading, .controller-heading, .stream-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.card-heading { margin-bottom: 26px; }
.kicker { margin-bottom: 7px; color: #9188ad; font-size: .65rem; }
.kicker span { color: var(--purple); }
.card-heading h2, .session-topbar h2, .controller-heading h2, .stream-heading h1 { margin: 0; font-size: 1.45rem; letter-spacing: -.025em; }
.step-badge { padding: 7px 10px; border-radius: 8px; background: rgba(150,134,255,.1); color: #c3b9ff; font: 700 .67rem ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }

.file-drop {
  min-height: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 25px;
  cursor: pointer;
  border: 1px dashed rgba(185, 176, 230, .37);
  border-radius: 16px;
  background: rgba(9, 7, 19, .25);
  text-align: center;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.file-drop:hover, .file-drop.dragging { border-color: var(--purple); background: rgba(150,134,255,.07); transform: translateY(-2px); }
.file-drop.has-file { border-style: solid; border-color: rgba(95,208,169,.45); background: rgba(95,208,169,.055); }
.file-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-primary { display: block; max-width: 100%; margin-top: 16px; color: #ece9f4; font-weight: 740; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-secondary { margin-top: 7px; color: #8f899f; font-size: .76rem; }

.cartridge { position: relative; display: block; width: 52px; height: 44px; border-radius: 5px 5px 10px 10px; background: #bbb6c8; box-shadow: inset 0 -6px rgba(55,48,73,.18); }
.cartridge::before { position: absolute; inset: 7px 9px 10px; content: ""; border-radius: 3px; background: var(--purple-2); box-shadow: inset 0 0 0 3px rgba(255,255,255,.1); }
.cartridge::after { position: absolute; left: 13px; right: 13px; bottom: 4px; height: 3px; content: ""; background: #474052; }
.cartridge span { position: absolute; z-index: 1; width: 5px; height: 5px; top: 15px; left: 23px; background: var(--yellow); box-shadow: -7px 0 var(--pink), 7px 0 var(--mint); }

.legal-check { display: flex; align-items: center; gap: 11px; margin: 20px 2px; cursor: pointer; color: #c6c1d0; font-size: .82rem; }
.legal-check input { width: 17px; height: 17px; margin: 0; accent-color: var(--purple); }

.primary-button {
  width: 100%; min-height: 52px; padding: 0 19px; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border: 0; border-radius: 12px; cursor: pointer; text-decoration: none; color: white; background: linear-gradient(135deg, #806cf5, #664cd9); font-size: .87rem; font-weight: 780;
  box-shadow: 0 14px 30px rgba(80,57,199,.27); transition: transform .15s ease, filter .15s ease, opacity .15s ease;
}
.primary-button:not(:disabled):hover { transform: translateY(-2px); filter: brightness(1.08); }
.primary-button:disabled { opacity: .36; cursor: not-allowed; box-shadow: none; }
.primary-button svg { width: 19px; height: 19px; fill: currentColor; }
.primary-button.loading span::after { content: "…"; }
.form-hint { margin: 15px 0 0; color: #817b90; font-size: .73rem; line-height: 1.45; text-align: center; }
.inline-error { margin-top: 16px; padding: 12px 14px; border: 1px solid rgba(255,127,145,.28); border-radius: 10px; color: #ffd1d7; background: rgba(255,127,145,.08); font-size: .78rem; line-height: 1.45; }

.session-card { padding: clamp(22px, 3.5vw, 40px); }
.session-topbar { margin-bottom: 20px; }
.status-pill { display: inline-flex; align-items: center; gap: 9px; min-height: 34px; padding: 0 13px; border-radius: 999px; background: rgba(245,201,94,.09); color: #ffe8a7; font-size: .74rem; }
.status-pill span { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px rgba(245,201,94,.1); }
.status-pill[data-state="connected"] { color: #c6f7e6; background: rgba(95,208,169,.09); }
.status-pill[data-state="connected"] span { background: var(--mint); box-shadow: 0 0 0 4px rgba(95,208,169,.1); }
.status-pill[data-state="error"] { color: #ffd1d7; background: rgba(255,127,145,.09); }
.status-pill[data-state="error"] span { background: var(--danger); box-shadow: 0 0 0 4px rgba(255,127,145,.1); }

.emulator-shell, .video-shell { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 15px; background: #07060d; }
.emulator-shell { min-height: min(64vh, 680px); }
.emulator-shell #game { width: 100%; height: min(64vh, 680px); }
.emulator-shell #game .ejs_parent { min-height: 100%; }
.emulator-shell #game canvas { max-width: 100%; }
.stage-message, .video-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; color: #d7d2df; background: radial-gradient(circle, #171326, #08070e 70%); text-align: center; pointer-events: none; }
.stage-message strong, .video-placeholder strong { font-size: .92rem; }
.stage-message small, .video-placeholder small { color: #817b8e; font-size: .72rem; }
.pixel-spinner { width: 22px; height: 22px; margin-bottom: 8px; background: var(--purple); box-shadow: 26px 0 var(--mint), 26px 26px var(--yellow), 0 26px var(--pink); animation: pixels 1.2s steps(4) infinite; transform-origin: 24px 24px; }
@keyframes pixels { to { transform: rotate(360deg); } }

.session-controls { display: grid; grid-template-columns: 1fr 210px; gap: 18px; margin-top: 24px; }
.invite-block label, .quality-block label { display: block; margin: 0 0 8px 2px; color: #d9d5e2; font-size: .77rem; font-weight: 700; }
.copy-field { display: flex; }
.copy-field input, .quality-block select { height: 45px; border: 1px solid var(--line); outline: none; color: #d8d3e2; background: #100d1c; font-size: .76rem; }
.copy-field input { width: 100%; min-width: 0; padding: 0 13px; border-radius: 10px 0 0 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.copy-field button { min-width: 112px; padding: 0 14px; border: 1px solid var(--purple-2); border-radius: 0 10px 10px 0; cursor: pointer; color: #eeeaff; background: rgba(105,85,232,.23); font-size: .75rem; font-weight: 760; }
.copy-field button:hover { background: rgba(105,85,232,.36); }
.invite-block small { display: block; margin: 7px 2px 0; color: #7f798e; font-size: .67rem; }
.quality-block select { width: 100%; padding: 0 11px; border-radius: 10px; }

.players-section { margin-top: 30px; }
.section-heading { margin-bottom: 12px; }
.section-heading h3 { margin: 0; font-size: .92rem; }
.section-heading > span { color: #8d879d; font-size: .69rem; }
.player-seats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; padding: 0; margin: 0; list-style: none; }
.player-seats li { min-width: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); color: #767080; }
.player-seats li[data-connected="true"] { border-color: rgba(95,208,169,.24); color: var(--ink); background: rgba(95,208,169,.05); }
.player-number { grid-row: 1 / 3; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; color: #aaa3ba; background: rgba(255,255,255,.065); font: 800 .65rem ui-monospace, SFMono-Regular, Menlo, monospace; }
li[data-connected="true"] .player-number { color: #c6f7e6; background: rgba(95,208,169,.14); }
.player-seats b { display: block; overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.player-seats small { display: block; margin-top: 3px; color: #746e81; font-size: .63rem; }
.player-seats i { grid-column: 2; color: #817a8e; font-size: .62rem; font-style: normal; }
.player-seats li[data-connected="true"] i { color: var(--mint); }
.session-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.session-footer p { margin: 0; color: #8e889c; font-size: .72rem; }
.session-footer strong { color: #beb8ca; }
.text-button { padding: 7px 0; border: 0; cursor: pointer; color: #a99dfb; background: none; font-size: .72rem; font-weight: 700; }
.text-button:hover { color: #d0c9ff; }

.site-footer { width: min(1260px, calc(100% - 48px)); margin: 0 auto; padding: 22px 0 30px; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(255,255,255,.06); color: #645f70; font-size: .67rem; }

/* Guest layout */
.compact-header { min-height: 68px; }
.join-shell { width: min(1500px, calc(100% - 36px)); height: calc(100vh - 84px); min-height: 680px; margin: 8px auto; display: grid; grid-template-columns: minmax(0, 1fr) 410px; gap: 18px; }
.stream-column { min-width: 0; display: flex; flex-direction: column; }
.stream-heading { min-height: 57px; }
.stream-heading h1 { font-size: 1.15rem; }
.icon-button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: rgba(255,255,255,.035); }
.icon-button:hover { background: rgba(255,255,255,.07); }
.icon-button svg { width: 19px; height: 19px; fill: #c2bdcd; }
.video-shell { flex: 1; min-height: 0; display: grid; place-items: center; }
.video-shell video { width: 100%; height: 100%; object-fit: contain; background: #050409; }
.video-shell:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.signal-rings { position: relative; width: 55px; height: 48px; margin-bottom: 7px; }
.signal-rings i { position: absolute; left: 50%; bottom: 0; border: 3px solid var(--purple); border-bottom: 0; border-radius: 70px 70px 0 0; transform: translateX(-50%); opacity: .25; animation: signal 1.5s ease-in-out infinite; }
.signal-rings i:nth-child(1) { width: 12px; height: 9px; animation-delay: -.5s; }
.signal-rings i:nth-child(2) { width: 34px; height: 26px; animation-delay: -.25s; }
.signal-rings i:nth-child(3) { width: 55px; height: 44px; }
@keyframes signal { 50% { opacity: 1; } }
.play-overlay { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 13px 18px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; cursor: pointer; color: #fff; background: rgba(105,85,232,.86); box-shadow: 0 16px 35px rgba(0,0,0,.3); font-size: .78rem; font-weight: 740; }
.play-overlay svg { width: 17px; height: 17px; fill: currentColor; }
.stream-notice { min-height: 40px; display: flex; align-items: center; gap: 9px; color: #827c8f; font-size: .68rem; }
.stream-notice svg { width: 16px; min-width: 16px; height: 16px; }

.controller-column { min-height: 0; padding: 24px; overflow: auto; box-shadow: 0 16px 45px rgba(4,2,12,.3); }
.controller-heading h2 { font-size: 1.18rem; }
.gamepad-indicator { display: inline-flex; align-items: center; gap: 6px; color: #777182; font-size: .64rem; }
.gamepad-indicator i { width: 7px; height: 7px; border-radius: 50%; background: #716b7c; }
.gamepad-indicator.connected { color: #b7eedb; }
.gamepad-indicator.connected i { background: var(--mint); box-shadow: 0 0 0 3px rgba(95,208,169,.1); }

.snes-controller { position: relative; z-index: 0; margin: 27px auto 22px; user-select: none; touch-action: none; }
.snes-controller[data-enabled="false"] { opacity: .42; filter: saturate(.45); }
.controller-body { position: relative; z-index: 1; height: 190px; border-radius: 42px 42px 76px 76px; background: linear-gradient(160deg, #d8d5e1, #aaa5b5); box-shadow: inset 0 -8px 12px rgba(56,48,69,.19), 0 20px 35px rgba(0,0,0,.2); }
.controller-body::after { position: absolute; inset: 18px 22px 34px; content: ""; border-radius: 28px 28px 60px 60px; border: 2px solid rgba(64,56,76,.16); pointer-events: none; }
.shoulders { position: absolute; z-index: 0; top: -11px; left: 18px; right: 18px; display: flex; justify-content: space-between; }
.shoulders button { width: 100px; height: 35px; border: 0; border-radius: 16px 16px 6px 6px; color: #46404e; background: #8c8796; box-shadow: inset 0 5px rgba(255,255,255,.1); font-weight: 800; }
.snes-controller button { cursor: pointer; touch-action: none; }
.snes-controller button.pressed { filter: brightness(.72); transform: translateY(2px) scale(.98); }

.dpad { position: absolute; z-index: 1; left: 38px; top: 53px; width: 100px; height: 100px; }
.dpad button, .dpad i { position: absolute; width: 34px; height: 34px; border: 0; background: #3d3946; }
.dpad button::after { position: absolute; inset: 11px; content: ""; border-style: solid; }
.dpad-up { left: 33px; top: 0; border-radius: 5px 5px 0 0; }
.dpad-up::after { border-width: 0 6px 7px; border-color: transparent transparent #27242d; }
.dpad-down { left: 33px; bottom: 0; border-radius: 0 0 5px 5px; }
.dpad-down::after { border-width: 7px 6px 0; border-color: #27242d transparent transparent; }
.dpad-left { left: 0; top: 33px; border-radius: 5px 0 0 5px; }
.dpad-left::after { border-width: 6px 7px 6px 0; border-color: transparent #27242d transparent transparent; }
.dpad-right { right: 0; top: 33px; border-radius: 0 5px 5px 0; }
.dpad-right::after { border-width: 6px 0 6px 7px; border-color: transparent transparent transparent #27242d; }
.dpad i { left: 33px; top: 33px; }
.dpad i::after { position: absolute; inset: 9px; border-radius: 50%; content: ""; box-shadow: inset 0 2px 5px rgba(0,0,0,.5); }

.face-buttons { position: absolute; z-index: 1; right: 31px; top: 42px; width: 122px; height: 117px; transform: rotate(-13deg); }
.face-buttons button { position: absolute; width: 44px; height: 44px; border: 4px solid rgba(62,54,72,.16); border-radius: 50%; color: #2d2835; background: #eeeaf3; box-shadow: 0 3px 0 rgba(51,44,60,.2); font-weight: 900; transform: rotate(13deg); }
.face-buttons button.pressed { transform: rotate(13deg) translateY(2px) scale(.97); }
.face-x { top: 0; left: 39px; color: #3f8f79 !important; }
.face-a { top: 38px; right: 0; color: #a87c16 !important; }
.face-y { top: 38px; left: 0; color: #a83d83 !important; }
.face-b { bottom: 0; left: 39px; color: #6654bb !important; }

.system-buttons { position: absolute; z-index: 1; left: 50%; bottom: 28px; display: flex; gap: 12px; transform: translateX(-50%) rotate(-11deg); }
.system-buttons button { display: flex; flex-direction: column; align-items: center; gap: 5px; border: 0; color: #5c5665; background: transparent; font-size: .51rem; font-weight: 800; text-transform: uppercase; }
.system-buttons button i { width: 31px; height: 10px; display: block; border-radius: 99px; background: #615b69; box-shadow: inset 0 2px 3px rgba(0,0,0,.4); }

.control-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 10px; background: #100d1c; }
.control-tabs button { min-height: 34px; border: 0; border-radius: 7px; cursor: pointer; color: #7f798c; background: transparent; font-size: .7rem; font-weight: 700; }
.control-tabs button.active { color: #e4deff; background: rgba(150,134,255,.13); }
.mapping-panel { min-height: 102px; padding: 15px 4px 5px; color: #8b8597; font-size: .65rem; }
.mapping-panel > div { min-height: 26px; display: flex; align-items: center; gap: 5px; }
.mapping-panel kbd { min-width: 23px; padding: 4px 5px; border: 1px solid rgba(255,255,255,.11); border-radius: 5px; color: #d7d2e0; background: rgba(255,255,255,.05); box-shadow: 0 2px 0 rgba(0,0,0,.24); font: 700 .62rem ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }
.mapping-panel p { margin: 5px 0; line-height: 1.55; }

.mini-roster { margin-top: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.mini-roster ol { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 0; margin: 0; list-style: none; }
.mini-roster li { display: grid; grid-template-columns: auto 1fr; gap: 2px 7px; align-items: center; padding: 9px; border: 1px solid var(--line); border-radius: 8px; color: #6f697a; font-size: .64rem; }
.mini-roster li[data-connected="true"] { color: #d9d5e2; border-color: rgba(95,208,169,.2); background: rgba(95,208,169,.04); }
.mini-roster li[data-self="true"] { border-color: rgba(150,134,255,.38); box-shadow: inset 0 0 0 1px rgba(150,134,255,.1); }
.mini-roster li span { grid-row: 1 / 3; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 6px; background: rgba(255,255,255,.05); font: 700 .57rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.mini-roster li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-roster li i { color: #7b7586; font-size: .56rem; font-style: normal; }
.mini-roster li[data-connected="true"] i { color: var(--mint); }

.missing-invite { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 25px; background: radial-gradient(circle at 50% 25%, #251d46, var(--bg) 60%); text-align: center; }
.missing-invite > div { width: min(500px, 100%); }
.missing-invite h1 { margin: 0; font-size: clamp(2rem, 6vw, 3.6rem); letter-spacing: -.055em; }
.missing-invite p:not(.eyebrow) { margin: 22px auto 28px; color: #aaa4b8; line-height: 1.65; }
.missing-invite .primary-button { width: auto; min-width: 190px; }

@media (max-width: 1050px) {
  .host-grid { grid-template-columns: 1fr; gap: 48px; max-width: 760px; margin-top: 35px; }
  .hero-panel h1 { font-size: clamp(3.2rem, 10vw, 5.4rem); }
  .setup-card { max-width: 620px; }
  .player-seats { grid-template-columns: 1fr 1fr; }
  .join-shell { height: auto; min-height: calc(100vh - 80px); grid-template-columns: 1fr; }
  .video-shell { min-height: min(64vw, 680px); }
  .controller-column { width: min(560px, 100%); margin: 0 auto 22px; }
}

@media (max-width: 650px) {
  .site-header, .page-shell, .site-footer { width: min(100% - 28px, 1260px); }
  .site-header { min-height: 68px; }
  .header-badges .chip-muted { display: none; }
  .chip { padding: 0 9px; font-size: .65rem; }
  .page-shell { margin-top: 35px; }
  .hero-panel h1 { font-size: clamp(2.8rem, 14vw, 4.4rem); }
  .lede { margin-top: 22px; font-size: .95rem; }
  .trust-row { grid-template-columns: 1fr; gap: 0; margin-top: 30px; }
  .trust-row div { min-height: auto; display: grid; grid-template-columns: 35px 1fr; align-items: center; }
  .trust-row strong { margin: 0; }
  .setup-card, .session-card { border-radius: 17px; }
  .file-drop { min-height: 175px; }
  .session-topbar { align-items: flex-start; }
  .status-pill { padding: 0 10px; font-size: .65rem; }
  .emulator-shell, .emulator-shell #game { min-height: 55vw; height: 55vw; }
  .session-controls { grid-template-columns: 1fr; }
  .player-seats { grid-template-columns: 1fr; }
  .session-footer, .site-footer { align-items: flex-start; flex-direction: column; }
  .copy-field { flex-direction: column; gap: 6px; }
  .copy-field input, .copy-field button { width: 100%; border-radius: 9px; }
  .copy-field button { min-height: 42px; }

  .compact-header .brand > span:last-child { display: none; }
  .join-shell { width: 100%; margin: 0; gap: 0; }
  .stream-column { padding: 0 12px; }
  .stream-heading { min-height: 52px; }
  .video-shell { min-height: 56vw; border-radius: 10px; }
  .stream-notice { min-height: 46px; }
  .controller-column { padding: 20px 14px calc(25px + env(safe-area-inset-bottom)); border: 0; border-radius: 20px 20px 0 0; }
  .controller-body { height: 177px; }
  .dpad { left: 25px; transform: scale(.88); transform-origin: left center; }
  .face-buttons { right: 18px; transform: rotate(-13deg) scale(.88); transform-origin: right center; }
  .shoulders button { width: 90px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}