:root { --level: 0; /* live audio amplitude 0..1, set from JS */ --glow: #96aaff; /* orb colour */ --ink: #e9e7ff; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { background: radial-gradient(125% 110% at 50% 6%, #2a1d6e 0%, #0d0b22 58%, #07061a 100%); color: var(--ink); font-family: "Inter", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; touch-action: manipulation; overflow: hidden; transition: background 0.6s ease; /* Theme the orb to the current game's colour. These MUST live on (not :root) so their var(--glow) resolves to the per-mode --glow set on body[data-mode=…]; declared on :root they'd bake the root default and the orb would never match the game. Surface = mostly --glow with a small glossy highlight (not a near-white ball); halo / shadow / sheen follow the colour. The per-speaker hue shifts (.orb-core filters) and the desaturated thinking state still ride on top, unchanged. */ --orb-surface: radial-gradient(circle at 34% 28%, #ffffff 0%, color-mix(in srgb, var(--glow) 32%, #ffffff) 13%, color-mix(in srgb, var(--glow) 75%, #ffffff) 34%, var(--glow) 62%, color-mix(in srgb, var(--glow) 80%, #000) 100%); --orb-glow-bg: radial-gradient(circle, color-mix(in srgb, var(--glow) 60%, transparent), color-mix(in srgb, var(--glow) 24%, transparent) 45%, transparent 70%); --orb-shadow: inset 0 0 46px rgba(255, 255, 255, 0.5), inset -16px -20px 56px color-mix(in srgb, var(--glow) 55%, #000), 0 0 calc(46px + var(--level) * 80px) color-mix(in srgb, var(--glow) 65%, transparent), 0 0 calc(110px + var(--level) * 130px) color-mix(in srgb, var(--glow) 42%, transparent); --orb-sheen-2: radial-gradient(circle at 30% 75%, color-mix(in srgb, var(--glow) 70%, #fff), transparent 55%); } /* Per-mode background tint (drives the orb --glow on every screen) */ body[data-mode="duel"] { background: radial-gradient(125% 110% at 50% 6%, #5e1d3a 0%, #160b1f 58%, #07061a 100%); --glow: #ff7aa8; } body[data-mode="taboo"] { background: radial-gradient(125% 110% at 50% 6%, #1d4f5e 0%, #0b161f 58%, #07061a 100%); --glow: #4fd6ff; } body[data-mode="heist"] { background: radial-gradient(125% 110% at 50% 6%, #5e481d 0%, #1f1809 58%, #07061a 100%); --glow: #ffc24b; /* gold — a vault heist; distinct from the green CTA */ } /* ── Layout: sidebar + content ──────────────────────────── */ .layout { position: relative; z-index: 5; display: flex; height: 100dvh; } .sidebar { flex: 0 0 340px; display: flex; flex-direction: column; gap: 6px; padding: clamp(20px, 3vw, 30px) 18px calc(env(safe-area-inset-bottom) + 22px); background: rgba(8, 6, 22, 0.55); border-right: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); z-index: 30; } .content { position: relative; flex: 1 1 auto; min-width: 0; height: 100%; overflow: hidden; } /* ── Brand (top of sidebar) ─────────────────────────────── */ .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; opacity: 0.95; padding: 4px 8px 0; margin-bottom: 22px; } .brand__logo { width: 78px; --fill-0: #cfc9ff; } .brand__logo svg { display: block; width: 100%; height: auto; } .brand__tag { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #9b94d6; } /* ── Sidebar nav (game list) ────────────────────────────── */ .sidebar__label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #6f68a8; padding: 0 10px; margin-bottom: 6px; } .nav { display: flex; flex-direction: column; gap: 6px; } /* Mobile-only chrome — the top bar, the pinned CTA box, and the share bottom-sheet. All hidden on desktop; shown in the phone media query. */ .mobilebar { display: none; } .mobile-cta { display: none; } .share-btn { display: none; } #mobileShareSheet { display: none; } .share-backdrop { display: none; } .nav__item { appearance: none; cursor: pointer; font-family: inherit; text-align: left; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 13px; color: var(--ink); background: transparent; border: 1px solid transparent; transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease; } .nav__item:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); } .nav__item:active { transform: scale(0.99); } .nav__item.is-active { background: color-mix(in srgb, var(--glow) 16%, transparent); border-color: color-mix(in srgb, var(--glow) 42%, transparent); } .nav__item.is-active .nav__name { color: color-mix(in srgb, var(--glow) 65%, #fff); } /* Per-game accent — independent of the body's data-mode (the menu shows all three games at once). */ .nav__item[data-mode="duel"] { --accent: #ff7aa8; } .nav__item[data-mode="taboo"] { --accent: #4fd6ff; } .nav__item[data-mode="heist"] { --accent: #ffc24b; } .nav__icon { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; color: var(--accent); } .nav__icon svg { width: 22px; height: 22px; } .nav__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .nav__name { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; } .nav__hook { display: none; } /* desktop sidebar shows name only */ .nav__play { display: none; } /* the Play pill is a mobile-card affordance */ /* ── Sauna pitch + CTA card (bottom of sidebar) ─────────── */ .pitch { margin-top: 12px; /* sits just under the share card at the bottom */ display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); } .pitch__copy { font-size: 12.5px; line-height: 1.5; color: #b9b2e8; } .pitch__copy strong { color: #e9e7ff; font-weight: 700; } .pitch__note { font-size: 12.5px; line-height: 1.4; color: #e9e7ff; font-weight: 500; } .cta { display: block; text-align: center; text-decoration: none; font-size: 14px; font-weight: 700; color: #06281a; padding: 12px 16px; border-radius: 12px; background: linear-gradient(180deg, #6dffa6, #3ddc84); box-shadow: 0 6px 20px rgba(61, 220, 132, 0.35); transition: transform 0.15s ease, box-shadow 0.15s ease; } .cta:hover { transform: translateY(-1px); box-shadow: 0 8px 26px rgba(61, 220, 132, 0.5); } /* ── Mode picker ────────────────────────────────────────── */ .picker { position: relative; z-index: 5; height: 100%; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: env(safe-area-inset-top) 24px calc(env(safe-area-inset-bottom) + 32px); text-align: center; } .picker[hidden] { display: none; } .picker__title { font-size: clamp(30px, 6.5vw, 62px); font-weight: 900; letter-spacing: -0.025em; line-height: 1.02; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); } .picker__title em { font-style: normal; background: linear-gradient(90deg, #ff7aa8, #b18bff, #4fd6ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .picker__sub { font-size: clamp(14px, 2.2vw, 19px); color: #b9b2e8; margin-bottom: clamp(20px, 4vw, 40px); } .cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; width: 100%; max-width: 920px; } .card { flex: 1 1 240px; max-width: 290px; appearance: none; cursor: pointer; font-family: inherit; text-align: left; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 24px; border-radius: 22px; color: var(--ink); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(10px); transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4); } .card:active { transform: translateY(-1px) scale(0.99); } .card__emoji { font-size: 40px; line-height: 1; } .card__name { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; } .card__hook { font-size: 14px; line-height: 1.45; color: #b9b2e8; } /* ── Stage ──────────────────────────────────────────────── */ .stage { position: relative; z-index: 5; height: 100%; display: flex; flex-direction: column; padding: env(safe-area-inset-top) 24px calc(env(safe-area-inset-bottom) + 18px); } .stage[hidden] { display: none; } /* The orb + objective group centers in the available space; the share sheet sits at the bottom. */ .stage__main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(12px, 2.5vh, 26px); } /* ── HUD — the objective, just below the orb ─────────────── */ .hud { z-index: 15; width: min(90%, 620px); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; pointer-events: none; } .hud__goal { margin: 0; font-size: clamp(18px, 2.5vw, 28px); font-weight: 600; letter-spacing: -0.005em; line-height: 1.2; color: #ece9ff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); text-wrap: balance; } .hud__goal:empty { display: none; } .hud__stat { font-size: clamp(16px, 2.1vw, 22px); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; color: color-mix(in srgb, var(--glow) 78%, #fff); } .hud__stat:empty { display: none; } .hud__stat--urgent { color: #ff5d7a; animation: pulseStat 1s ease-in-out infinite; } @keyframes pulseStat { 50% { transform: scale(1.12); } } .hud__stat--win { color: #6dffa6; } /* Reroll the duel scenario (idle only) */ .hud__reroll { pointer-events: auto; appearance: none; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 7px; margin-top: clamp(6px, 1.5vh, 16px); font-size: 13px; font-weight: 600; color: #cfc9ff; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease; } .hud__reroll[hidden] { display: none; } .hud__reroll:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.28); transform: translateY(-1px); } .hud__reroll:active { transform: scale(0.97); } .hud__reroll-icon { font-size: 15px; line-height: 1; } .hud__reroll.is-spin .hud__reroll-icon { animation: rerollSpin 0.5s ease; } @keyframes rerollSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } } /* ── Share card (sidebar, above the Sauna card; from voicetest) ── */ .share-card { margin-top: auto; /* anchors the share + pitch group to the bottom */ display: flex; flex-direction: column; gap: 16px; padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); } .share-card__title, .sharesheet__title, .pitch__title { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #8a83c4; text-align: center; width: 100%; } /* Two rows of three, centered. */ .sharesheet__targets { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; gap: 14px 8px; } .target { flex: 0 0 auto; cursor: pointer; background: none; border: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: inherit; } .target__icon { width: 36px; height: 36px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); transition: transform 0.14s ease, box-shadow 0.14s ease; } .target__icon svg { width: 16px; height: 16px; } #shareX .target__icon { color: #07060f; } /* white circle, dark glyph on the dark bg */ .target:hover .target__icon { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); } .target__label { font-size: 10.5px; color: #9b94d6; font-weight: 500; } /* ── Orb (centerpiece) ──────────────────────────────────── The orb itself (geometry, morph/float/drift/halo, audio-reactivity, label, hover) lives in the shared component at /orb.css (packages/orb/orb.css). This app uses the library defaults verbatim — they were tuned from this look — so it only sets the per-mode tint (--glow, above) and the state choreography below. */ /* Orb states */ /* First click → drop to a small, desaturated "thinking" orb until the agent's first word. Snap fast (override the slow open-swell transition) so it reacts the instant you tap, and shrink hard so the pause clearly reads as thinking. */ body[data-state="connecting"] .orb-core, body[data-state="call"]:not(.is-open) .orb-core { --birth: 0.42; filter: saturate(0.3) brightness(1.04); transition: transform 0.28s ease-out, filter 0.28s ease-out; } body.is-open .orb-core { --birth: 1; } body[data-speaker="user"] .orb-core { filter: hue-rotate(-40deg) saturate(1.1); } body.is-open[data-speaker="listening"] .orb-core { --birth: 0.64; } body.is-open[data-speaker="thinking"] .orb-core { --birth: 0.52; filter: saturate(0.42) brightness(1.03); } body.is-paused .orb { filter: saturate(0.45) brightness(0.95); } body.is-paused .orb-label { display: block; opacity: 1; animation: none; } body[data-state="error"] .orb { filter: grayscale(0.5) brightness(0.95); } @media (max-height: 680px) { .orb-float { width: 220px; height: 220px; } .orb { width: 150px; height: 150px; } .orb-glow { width: 220px; height: 220px; } } /* ── FX layer (confetti on win) ─────────────────────────── */ .fx { position: fixed; inset: 0; z-index: 45; overflow: hidden; pointer-events: none; } .fx .conf { position: absolute; top: -8vh; width: 10px; height: 16px; border-radius: 2px; will-change: transform; animation: fall linear forwards; } @keyframes fall { to { transform: translateY(125vh) rotate(var(--spin, 220deg)); } } /* ── Result overlay ─────────────────────────────────────── */ .overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; background: rgba(5, 3, 16, 0.72); backdrop-filter: blur(10px); animation: fadeIn 0.3s ease; } .overlay[hidden] { display: none; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .overlay__card { width: min(92vw, 420px); text-align: center; padding: 36px 28px 30px; border-radius: 26px; background: rgba(20, 15, 46, 0.9); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); animation: popIn 0.4s cubic-bezier(0.2, 0.9, 0.25, 1.4); } @keyframes popIn { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } } .overlay[data-result="win"] .overlay__card { border-color: rgba(61, 255, 139, 0.4); } .overlay[data-result="lose"] .overlay__card { border-color: rgba(255, 93, 122, 0.4); } .overlay__emoji { font-size: 64px; line-height: 1; margin-bottom: 6px; } .overlay__title { font-size: clamp(28px, 7vw, 40px); font-weight: 900; letter-spacing: -0.02em; margin-bottom: 10px; } .overlay[data-result="win"] .overlay__title { color: #6dffa6; } .overlay[data-result="lose"] .overlay__title { color: #ff7a93; } .overlay__stat { font-size: 16px; line-height: 1.5; color: #d6d1f5; margin-bottom: 26px; } .overlay__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .btn { appearance: none; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 700; padding: 12px 22px; border-radius: 999px; border: 1px solid transparent; transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: scale(0.97); } .btn--primary { color: #fff; background: linear-gradient(180deg, #8b8bf0, #6a5be0); box-shadow: 0 6px 20px rgba(106, 91, 224, 0.5); } .btn--share { color: #fff; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); } .btn--share:hover { background: rgba(255, 255, 255, 0.18); } /* ── Mobile: two screens (menu ⇄ game), shared top bar + CTA box ───────── */ @media (max-width: 820px) { /* The layout is a vertical stack: top bar, the active screen (menu OR game), then the pinned Sauna CTA box. The menu screen and the game screen are toggled via body[data-screen]. */ .layout { flex-direction: column; height: 100dvh; } /* Top bar — brand on the left, a "Games" back button on the right that returns to the menu (shown only on the game screen). */ .mobilebar { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; gap: 10px; padding: calc(env(safe-area-inset-top) + 10px) calc(env(safe-area-inset-right) + 14px) 10px calc(env(safe-area-inset-left) + 14px); background: rgba(8, 6, 22, 0.55); border-bottom: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); z-index: 30; } .mobilebar .brand { margin-bottom: 0; padding: 0 2px; } .mobilebar .brand__logo { width: 58px; } .mobilebar .brand__tag { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #9b94d6; } .mobilebar__back { appearance: none; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: #cfc9ff; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; padding: 8px 14px 8px 10px; transition: background 0.15s ease; } .mobilebar__back:active { background: rgba(255, 255, 255, 0.14); } .mobilebar__back svg { width: 16px; height: 16px; } body[data-screen="menu"] .mobilebar__back { visibility: hidden; } /* The desktop sidebar becomes the MENU screen body: just the game list. Its brand/share/pitch are handled by the top bar + pinned CTA box. */ .sidebar { flex: 1 1 auto; min-height: 0; border-right: none; background: transparent; backdrop-filter: none; padding: clamp(18px, 4vh, 32px) 18px; overflow-y: auto; justify-content: center; gap: 10px; } .sidebar > .brand, .sidebar > .share-card, .sidebar > .pitch { display: none; } .sidebar__label { text-align: center; font-size: 11.5px; margin-bottom: 10px; opacity: 0.85; } /* The game list becomes tappable cards (mobile-gaming style): a tinted icon chip + title + hook on the top row, then a full-width "Play Now" button on its own row below — so the titles never get squeezed by the button. */ .nav { gap: 14px; width: min(94%, 440px); margin: 0 auto; } .nav__item, .nav__item.is-active { background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 13%, rgba(255, 255, 255, 0.02)), rgba(255, 255, 255, 0.02)); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); } .nav__item { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon text" "play play"; align-items: center; gap: 16px 15px; padding: 18px; border-radius: 20px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22); } .nav__item:active { transform: scale(0.985); } .nav__item.is-active .nav__name { color: #fff; } .nav__icon { grid-area: icon; width: 52px; height: 52px; border-radius: 15px; background: color-mix(in srgb, var(--accent) 20%, rgba(255, 255, 255, 0.04)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 36%, transparent); } .nav__icon svg { width: 28px; height: 28px; } .nav__text { grid-area: text; gap: 3px; } .nav__name { font-size: 18px; line-height: 1.15; } .nav__hook { display: block; font-size: 13px; font-weight: 500; line-height: 1.35; color: #b9b2e8; } .nav__play { grid-area: play; display: inline-flex; align-items: center; justify-content: center; gap: 2px; width: 100%; background: var(--accent); color: #11071f; font-weight: 800; font-size: 14.5px; letter-spacing: -0.01em; padding: 12px; border-radius: 13px; box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 32%, transparent); } .nav__play svg { width: 16px; height: 16px; } /* The game screen (orb stage). */ .content { flex: 1 1 auto; min-height: 0; height: auto; } .hud { gap: 6px; width: 92%; } /* Toggle the two screens. */ body[data-screen="menu"] .content { display: none; } body[data-screen="stage"] .sidebar { display: none; } /* Pinned Sauna CTA box — full pitch + Try Sauna + share button, on BOTH screens (matches voicetest's bottom card). */ .mobile-cta { display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; padding: 14px calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + 14px) calc(env(safe-area-inset-left) + 16px); background: rgba(8, 6, 22, 0.55); border-top: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); z-index: 30; } .mobile-cta__copy { font-size: 12.5px; line-height: 1.5; color: #b9b2e8; } .mobile-cta__copy strong { color: #e9e7ff; font-weight: 700; } .cta-row { display: flex; gap: 10px; align-items: stretch; } .cta-row .cta { flex: 1 1 auto; } .share-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 50px; border-radius: 12px; cursor: pointer; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); color: var(--ink); } .share-btn svg { width: 20px; height: 20px; } /* Share bottom-sheet — pops up from the bottom over a backdrop. */ #mobileShareSheet { display: flex; flex-direction: column; gap: 16px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; transform: translateY(110%); transition: transform 0.28s ease; padding: 18px 18px calc(env(safe-area-inset-bottom) + 20px); background: #140f2e; border-top: 1px solid rgba(255, 255, 255, 0.12); border-radius: 18px 18px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5); } body.share-open #mobileShareSheet { transform: translateY(0); } #mobileShareSheet .sharesheet__targets { gap: 16px 8px; } .share-backdrop { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(5, 3, 16, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } body.share-open .share-backdrop { opacity: 1; pointer-events: auto; } body.share-open { overflow: hidden; } .card { flex-basis: 100%; max-width: 380px; } }