/* ReadyPlayerJS room UI v2 (ARCADE, 2026-10-07), built to CINDER's mocks + tokens (rpjs-room-ui-tokens) on SQUALL's brand values.
   One accent (cyan) = LIVE / READY / FOCUS only, never a button fill or link. Square corners, hairlines, no pills, no glows. Tokens first. */
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jbmono-latin-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jbmono-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jbmono-latin-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
:root {
	--bg: #05060a; --surface: #0c0d13; --line: #292b34; --fg: #e7e9ee; --fg-2: #8b94a7; --fg-3: #5a6070; /* fg-3 = decoration only: 3.2:1 */
	--accent: #00e1ff; --warn: #ffb020;
	--t1: 12px; --t2: 14px; --t3: 18px; --t4: 32px; --t5: 56px;
	--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
	--r0: 0; --r1: 2px; --ease: cubic-bezier(.2, .7, .2, 1); --d1: 150ms; --d2: 250ms;
	--sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
	--gutter: 96px;
}
html, body { font-family: var(--sans); font-size: var(--t2); background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; }
.mono, .eyebrow, .flabel, #wordmark, #acct-nav a, p.platforms { font-family: var(--mono); font-size: var(--t1); letter-spacing: .14em; text-transform: uppercase; font-weight: 400; }

/* backdrop: the real room behind the entry, scrimmed so text always clears AA; gone once inside the room */
#backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: #050609 url("backdrop.jpg") center / cover no-repeat; opacity: 0; animation: bd-in 700ms var(--ease) 80ms forwards; }
#backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 6, 9, .94) 0%, rgba(5, 6, 9, .82) 34%, rgba(5, 6, 9, .35) 62%, rgba(5, 6, 9, .1) 100%), linear-gradient(180deg, rgba(5, 6, 9, .75) 0%, rgba(5, 6, 9, 0) 22%, rgba(5, 6, 9, 0) 70%, rgba(5, 6, 9, .85) 100%); }
@keyframes bd-in { to { opacity: 1; } }
body.inroom #backdrop, body.sheet #backdrop, body.trial #backdrop { display: none; }
#stage { z-index: 1; } /* the live 3D canvas sits above the backdrop once the room draws */

/* top: wordmark left, Plans / Sign in right (text links, no pills) */
#wordmark { position: fixed; top: var(--s5); left: var(--gutter); z-index: 12; color: var(--fg); display: flex; align-items: center; gap: var(--s3); }
#wordmark img { display: block; width: 24px; height: 24px; }
body.inroom #wordmark, body.sheet #wordmark, body.trial #wordmark { display: none; }
#acct-nav { top: var(--s5); right: var(--gutter); gap: var(--s5); }
#acct-nav a { border: 0; background: none; border-radius: 0; color: var(--fg); font-family: var(--sans); font-size: var(--t2); letter-spacing: 0; text-transform: none; padding: var(--s3) 0 2px; border-bottom: 1px solid transparent; transition: border-color var(--d1) var(--ease); }
#acct-nav a:hover { border-bottom-color: var(--line); }

/* ENTRY: a left-aligned column, no box */
#join.card { left: var(--gutter); top: 50%; bottom: auto; transform: translateY(-50%); width: min(640px, calc(100vw - 2 * var(--gutter))); background: none; border: 0; border-radius: var(--r0); padding: 0; backdrop-filter: none; box-shadow: none; }
#join .eyebrow { color: var(--fg-2); margin: 0 0 var(--s4); }
#join h1 { font: 300 var(--t5)/1.04 var(--mono); letter-spacing: -.04em; margin: 0 0 var(--s4); color: var(--fg); }
#join p:not(.err):not(.small):not(.platforms):not(.note) { font: 300 var(--t3)/1.5 var(--sans); color: var(--fg-2); max-width: 36ch; margin: 0 0 var(--s6); }
#join .flabel { display: block; color: var(--fg-2); margin: 0; }
#join input#name { display: block; width: min(440px, 100%); background: none; border: 0; border-bottom: 1px solid var(--fg-2); border-radius: var(--r0); padding: var(--s3) 0; margin: var(--s2) 0 var(--s5); font: 300 var(--t3)/1.4 var(--sans); color: var(--fg); transition: border-color var(--d1) var(--ease); }
#join input#name::placeholder { color: var(--fg-2); }
#join input#name:hover { border-bottom-color: var(--fg); }
#join input#name:focus, #join input#name:focus-visible { outline: none; border-bottom: 2px solid var(--fg); padding-bottom: calc(var(--s3) - 1px); }
#join input#name[aria-invalid="true"] { border-bottom-color: var(--warn); }
#join .agree { display: flex; gap: var(--s3); align-items: flex-start; margin: 0 0 var(--s6); max-width: 420px; font: 400 var(--t2)/1.5 var(--sans); color: var(--fg-2); cursor: pointer; }
#join .agree a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--fg-3); transition: border-color var(--d1) var(--ease); }
#join .agree a:hover { border-bottom-color: var(--fg); }
#join .agree input#adult { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 3px 0 0; flex: none; padding: 0; background: none; border: 1px solid var(--fg-2); border-radius: var(--r0); cursor: pointer; display: grid; place-content: center; transition: background var(--d1) var(--ease), border-color var(--d1) var(--ease); }
#join .agree input#adult::after { content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform var(--d1) var(--ease); background: var(--bg); clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 20%, 86% 6%, 38% 72%); }
#join .agree input#adult:checked { background: var(--fg); border-color: var(--fg); }
#join .agree input#adult:checked::after { transform: scale(1); }
#join .agree input#adult:hover { border-color: var(--fg); }
#join .actions { display: flex; gap: var(--s3); flex-wrap: wrap; }
#join .actions button { flex: 0 0 auto; width: auto; min-width: 200px; min-height: 52px; padding: var(--s4) var(--s5); border-radius: var(--r0); font: 500 var(--t2)/1 var(--sans); letter-spacing: .02em; text-align: center; cursor: pointer; transition: background var(--d1) var(--ease), color var(--d1) var(--ease), border-color var(--d1) var(--ease), opacity var(--d1) var(--ease); }
#join #join-btn { background: #fff; color: var(--bg); border: 1px solid #fff; }
#join #join-btn:hover:not(:disabled) { background: transparent; color: var(--fg); }
#join #join-vr { background: transparent; color: var(--fg); border: 1px solid var(--line); margin: 0; }
#join #join-vr:hover:not(:disabled) { border-color: var(--fg); }
#join .actions button:active:not(:disabled) { opacity: .8; }
#join .actions button:disabled { opacity: .4; cursor: default; }
#join .err { color: var(--warn); font: 400 var(--t2)/1.5 var(--sans); margin: var(--s4) 0 0; }
#join p.platforms { color: var(--fg-2); margin: var(--s7) 0 0; padding-top: var(--s4); border-top: 1px solid var(--line); max-width: 640px; line-height: 1.6; }
#join .small { font: 400 var(--t1)/1.4 var(--mono); letter-spacing: .08em; color: var(--fg-2); margin-top: var(--s6) !important; text-transform: uppercase; }
#join .note { font: 400 var(--t1)/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: var(--fg-2); margin: calc(-1 * var(--s3)) 0 var(--s5); max-width: 440px; }
#join p.platforms span { white-space: nowrap; }
#join p.platforms .dot { display: inline-block; width: 6px; height: 6px; background: var(--accent); margin-right: var(--s2); vertical-align: 1px; font-style: normal; }
#join #xr-note { color: var(--fg-2); font-size: var(--t2); }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
@media (max-width: 900px) { :root { --gutter: 40px; } #join h1 { font-size: var(--t4); } }
@media (max-width: 640px) {
	:root { --gutter: 24px; }
	#join h1 { font-size: var(--t4); }
	#wordmark { top: var(--s5); }
	#acct-nav { top: var(--s4); right: var(--gutter); left: auto; bottom: auto; transform: none; }
	#join.card { top: auto; bottom: calc(var(--s6) + env(safe-area-inset-bottom)); transform: none; right: var(--gutter); width: auto; }
	#join .actions button { flex: 1 1 100%; }
	#backdrop::after { background: linear-gradient(180deg, rgba(5, 6, 9, .82) 0%, rgba(5, 6, 9, .62) 28%, rgba(5, 6, 9, .9) 50%, rgba(5, 6, 9, .97) 100%); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } #backdrop { opacity: 1; } }

/* ===== IN-ROOM (CINDER mock): top status, dock, people panel, host menu. Real data only: title, LIVE only while connected, count from the room. ===== */
#hud-top, #status, #hint, #people, #bar { font-family: var(--sans); }
#hud-top { position: fixed; top: var(--s5); left: var(--s6); z-index: 11; display: none; gap: var(--s5); align-items: center; color: var(--fg); text-shadow: 0 1px 8px rgba(5, 6, 9, .9); }
body.inroom #hud-top { display: flex; }
#hud-top .hud-title, #hud-top .hud-live, #hud-top .hud-count { font: 400 var(--t1)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
#hud-top .hud-title { color: var(--fg-2); }
#hud-top .hud-live .dot { display: inline-block; width: 6px; height: 6px; background: var(--accent); margin-right: var(--s2); vertical-align: 1px; }
body.inroom::after { content: ""; position: fixed; left: 0; right: 0; top: 0; height: 96px; z-index: 5; pointer-events: none; background: linear-gradient(180deg, rgba(5, 6, 9, .75), rgba(5, 6, 9, 0)); }
body.inroom #status { top: auto; bottom: var(--s6); left: var(--s6); transform: none; background: none; border-radius: 0; padding: 0; font: 400 var(--t1)/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg); max-width: 34vw; text-shadow: 0 1px 8px rgba(5, 6, 9, .95); }
body.inroom #status.err { color: var(--warn); }
body.inroom #hint { top: auto; bottom: calc(var(--s6) + 24px); left: var(--s6); background: none; border-radius: 0; padding: 0; font: 400 var(--t1)/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); max-width: 28vw; text-shadow: 0 1px 8px rgba(5, 6, 9, .95); }
/* people panel: slim edge panel, hairline, square avatars, speaking = accent */
body.inroom #people { top: var(--s7); right: var(--s6); min-width: 280px; background: rgba(5, 6, 9, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: var(--r1); padding: 0; font-size: var(--t2); }
body.inroom #people b { display: block; padding: var(--s4) var(--s5); font: 400 var(--t1)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); border-bottom: 1px solid var(--line); }
body.inroom #people li { margin: 0; padding: var(--s3) var(--s5); border-bottom: 1px solid var(--line); }
body.inroom #people li:last-child { border-bottom: 0; }
body.inroom #people .who { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
body.inroom #people .av { flex: none; width: 36px; height: 36px; display: grid; place-content: center; border: 1px solid var(--line); font: 400 var(--t2)/1 var(--mono); color: var(--fg-2); }
body.inroom #people .av.me { border-color: var(--accent); color: var(--fg); }
body.inroom #people .av.talk { box-shadow: 0 0 0 2px var(--accent); }
body.inroom #people .nm { display: grid; min-width: 0; }
body.inroom #people .nm b { all: unset; display: block; font: 400 var(--t2)/1.3 var(--sans); color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0; border: 0; letter-spacing: 0; text-transform: none; }
body.inroom #people .nm small { font: 400 var(--t1)/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
body.inroom #people button { background: none; border: 1px solid var(--line); border-radius: var(--r0); color: var(--fg-2); padding: var(--s1) var(--s3); font: 400 var(--t1)/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: color var(--d1) var(--ease), border-color var(--d1) var(--ease); }
body.inroom #people button:hover { color: var(--fg); border-color: var(--fg); }
/* dock: four square buttons, hairline, mono caps, accent underline on live mic */
body.inroom #bar { left: 50%; right: auto; bottom: var(--s6); transform: translateX(-50%); padding: 0; gap: 0; flex-wrap: nowrap; background: rgba(5, 6, 9, .85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: var(--r1); }
body.inroom #bar > button, body.inroom #bar .hostwrap > button { display: grid; place-items: center; gap: var(--s2); width: 104px; padding: var(--s4) 0 var(--s3); background: none; border: 0; border-right: 1px solid var(--line); border-radius: var(--r0); color: var(--fg-2); cursor: pointer; transition: color var(--d1) var(--ease), background var(--d1) var(--ease); }
body.inroom #bar .hostwrap { position: relative; display: contents; }
body.inroom #bar > button:last-of-type, body.inroom #bar #leave { border-right: 0; }
body.inroom #bar button:hover:not(:disabled) { color: var(--fg); background: rgba(231, 233, 238, .06); }
body.inroom #bar button:active:not(:disabled) { background: rgba(231, 233, 238, .1); }
body.inroom #bar .ico { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: square; }
body.inroom #bar .lbl { font: 400 var(--t1)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
body.inroom #bar #mic { color: var(--fg); box-shadow: inset 0 -2px 0 var(--accent); }
body.inroom #bar #mic.on { color: var(--warn); box-shadow: none; }
body.inroom #bar #more, body.inroom #bar #vr { display: none; }
body.inroom #bar #vr:not(.hidden) { display: grid; }
/* contextual quote CTA above the dock */
body.inroom #bar #quote.ctx { position: absolute; bottom: calc(100% + var(--s3)); left: 50%; transform: translateX(-50%); width: auto; padding: var(--s3) var(--s5); display: block; background: rgba(5, 6, 9, .85); border: 1px solid var(--line); color: var(--fg); font: 500 var(--t2)/1.2 var(--sans); letter-spacing: 0; text-transform: none; white-space: nowrap; }
body.inroom #bar #quote.ctx:hover { border-color: var(--fg); }
/* host menu popover */
body.inroom .hostmenu { position: absolute; bottom: calc(100% + var(--s3)); right: 0; min-width: 220px; background: rgba(5, 6, 9, .92); backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: var(--r1); display: grid; z-index: 14; }
body.inroom .hostmenu.hidden { display: none; }
body.inroom .hostmenu button { all: unset; box-sizing: border-box; display: block; padding: var(--s3) var(--s5); font: 400 var(--t2)/1.4 var(--sans); color: var(--fg); cursor: pointer; border-bottom: 1px solid var(--line); }
body.inroom .hostmenu button:last-child { border-bottom: 0; }
body.inroom .hostmenu button:hover { background: rgba(231, 233, 238, .06); }
body.inroom .hostmenu button.hidden { display: none; }
body.inroom .hostmenu button:focus-visible { outline: 2px solid var(--fg); outline-offset: -2px; }
@media (max-width: 640px) {
	#hud-top { top: var(--s4); left: var(--s4); gap: var(--s3); flex-wrap: wrap; max-width: calc(100vw - 32px); }
	body.inroom #people { top: var(--s7); right: var(--s3); min-width: 0; }
	body.inroom #people li { display: flex; padding: var(--s3) var(--s4); }
	body.inroom #bar { bottom: calc(var(--s4) + env(safe-area-inset-bottom)); max-width: calc(100vw - 24px); }
	body.inroom #bar > button, body.inroom #bar .hostwrap > button { width: 72px; padding: var(--s3) 0 var(--s2); }
	body.inroom #status { bottom: calc(var(--s8) + var(--s8) + env(safe-area-inset-bottom)); left: var(--s4); max-width: 70vw; }
	body.inroom .hostmenu { right: auto; left: 50%; transform: translateX(-50%); }
}
@media (max-width: 640px) {
	/* the old phone rule hid every bar button but Invite/Quote behind a "more" toggle; the dock is four buttons, always shown */
	body.inroom #bar:not(.open) > button:not(#quote):not(#host-invite):not(#more), body.inroom #bar.open > button:not(#quote):not(#host-invite):not(#more):not(#vr) { display: grid; }
	body.inroom #bar:not(.open) > button#host-invite.hidden { display: none; }
	body.inroom #bar button.hidden { display: none !important; }
}

/* #1011 safety controls, restored (ARCADE 2026-10-08): Report on the way in + in the dock, host per-guest Mute / Remove / Ban, bans list.
   Same type scale, hairlines and tokens as the rest of this file; Ban uses the existing --warn, no new colours. */
#report-pre { position: fixed; left: var(--gutter); bottom: var(--s5); z-index: 12; font: 400 var(--t1)/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); text-decoration: none; border-bottom: 1px solid var(--fg-3); padding: var(--s1) 0 2px; transition: color var(--d1) var(--ease), border-color var(--d1) var(--ease); }
#report-pre:hover { color: var(--fg); border-bottom-color: var(--fg); }
body.inroom #report-pre, body.sheet #report-pre, body.trial #report-pre { display: none; }
body.inroom #bar > a#report { display: grid; place-items: center; gap: var(--s2); width: 104px; padding: var(--s4) 0 var(--s3); background: none; border: 0; border-radius: var(--r0); border-right: 1px solid var(--line); font-size: inherit; color: var(--fg-2); text-decoration: none; transition: color var(--d1) var(--ease), background var(--d1) var(--ease); }
body.inroom #bar > a#report:hover { color: var(--fg); background: rgba(231, 233, 238, .06); }
body.inroom #people { max-width: min(400px, calc(100vw - 24px)); box-sizing: border-box; }
body.inroom #people li { flex-wrap: wrap; }
body.inroom #people .acts { display: flex; gap: var(--s1); flex: none; }
body.inroom #people button.danger { color: var(--warn); border-color: var(--warn); }
body.inroom #people button.danger:hover { color: var(--fg); border-color: var(--fg); }
body.inroom #people li.asking .ban-ask { flex-basis: 100%; font: 400 var(--t2)/1.4 var(--sans); color: var(--warn); }
body.inroom #people li.asking .acts { margin-left: auto; }
body.inroom #bans h4 { margin: 0; padding: var(--s3) var(--s5); font: 400 var(--t1)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (max-width: 640px) {
	#report-pre { bottom: auto; top: calc(var(--s5) + var(--s7) - var(--s3)); }
	body.inroom #bar > a#report { width: 72px; padding: var(--s3) 0 var(--s2); }
	#people:not(.open) #bans { display: none; }
}

/* r3 (CINDER 2026-10-08): the hint line and toasts sat as grey mono on a bright floor. They now sit on the dock's dark bar. */
body.inroom #status, body.inroom #hint { background: rgba(5, 6, 9, .85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: var(--r1); padding: var(--s2) var(--s3); text-shadow: none; box-sizing: border-box; }
body.inroom #hint { bottom: calc(var(--s6) + var(--s7)); }

/* r3: the van onboarding card + the 18+ modal on the room tokens (cyan = live state only; white primary, hairline secondary) */
body #ob { background: rgba(5, 6, 9, .92); border: 1px solid var(--line); border-radius: var(--r1); padding: var(--s5); font-family: var(--sans); color: var(--fg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body #ob h2 { font: 300 24px/1.15 var(--mono); letter-spacing: -.02em; margin: 0 0 var(--s2); color: var(--fg); }
body #ob p { font: 300 var(--t2)/1.5 var(--sans); color: var(--fg-2); margin: 0 0 var(--s4); }
body #ob .row { gap: var(--s2); }
body #ob button:not(.sw) { font: 500 var(--t2)/1 var(--sans); letter-spacing: .02em; min-height: 48px; padding: var(--s3) var(--s5); border-radius: var(--r0); border: 1px solid var(--line); background: transparent; color: var(--fg); width: auto; cursor: pointer; transition: background var(--d1) var(--ease), color var(--d1) var(--ease), border-color var(--d1) var(--ease); }
body #ob button:not(.sw):hover:not(:disabled) { border-color: var(--fg); }
body #ob button.primary { background: #fff; color: var(--bg); border-color: #fff; flex: 1 1 auto; }
body #ob button.primary:hover:not(:disabled) { background: transparent; color: var(--fg); }
body #ob button:disabled { opacity: .4; cursor: default; }
body #ob button.skip { min-height: 0; border: 0; border-bottom: 1px solid var(--fg-3); padding: var(--s1) 0 2px; font: 400 var(--t1)/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); text-decoration: none; }
body #ob button.skip:hover { color: var(--fg); border-bottom-color: var(--fg); }
body #ob .dots span { border-radius: 0; background: var(--line); } body #ob .dots span.on { background: var(--fg); }
body #ob .opt { min-height: 40px; padding: var(--s2) var(--s3); } body #ob .opt[aria-pressed="true"] { background: #fff; color: var(--bg); border-color: #fff; }
body #ob .lbl { font: 400 var(--t1)/1.4 var(--mono); letter-spacing: .14em; color: var(--fg-2); }
body #ob label { color: var(--fg-2); font: 400 var(--t2)/1.5 var(--sans); }
body #ob .meter { border-radius: 0; background: var(--line); } /* the mic level bar stays accent: it is live state */
#adult-modal form { max-width: 440px; width: 100%; box-sizing: border-box; background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: var(--r1); padding: var(--s5); font: 400 var(--t2)/1.5 var(--sans); }
#adult-modal h2 { font: 300 24px/1.15 var(--mono); letter-spacing: -.02em; margin: 0 0 var(--s4); }
#adult-modal label { display: flex; gap: var(--s3); align-items: flex-start; cursor: pointer; color: var(--fg-2); }
#adult-modal input[type="checkbox"] { width: 16px; height: 16px; margin: 3px 0 0; flex: none; accent-color: #fff; padding: 0; }
#adult-modal a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--fg-3); }
#adult-modal a:hover { border-bottom-color: var(--fg); }
#adult-modal .acts { display: flex; gap: var(--s3); margin-top: var(--s5); flex-wrap: wrap; }
#adult-modal button { font: 500 var(--t2)/1 var(--sans); letter-spacing: .02em; min-height: 48px; padding: var(--s3) var(--s5); border-radius: var(--r0); border: 1px solid var(--line); background: transparent; color: var(--fg); cursor: pointer; }
#adult-modal button:hover:not(:disabled) { border-color: var(--fg); }
#adult-modal #adult-modal-go { flex: 1 1 auto; background: #fff; color: var(--bg); border-color: #fff; }
#adult-modal #adult-modal-go:disabled { opacity: .4; cursor: default; }
/* Jeff 2026-10-09: no van; the room is live behind the join card. Lift the backdrop's scrim (only the scrim, no picture) above the
   canvas so the card text clears AA over a bright room, and keep the walk hint for once you are inside. */
body.entry-live #backdrop { z-index: 2; background: none; opacity: 1; animation: none; }
body.entry-live:not(.inroom) #hint { display: none; }