/* TwizGame shared theme.
* Ported from twizGame/TwitchExtension/css/styles.css so every host, TV view,
* and player UI shares one design system. Edit tokens here, not per page. */
:root {
--bg-primary: #0a0a0a;
--bg-secondary: #1a1a1a;
--bg-hover: #2a2a2a;
--bg-input: #333333;
--text-primary: #efeff1;
--text-secondary: #adadb8;
--text-muted: #848494;
--accent: #FFD700;
--accent-hover: #FFED4E;
--primary: #FFA500;
--secondary: #333333;
--success: #00e676;
--danger: #ff4444;
--warning: #ffab00;
--gold: #ffd700;
--purple: #9966ff;
--border-radius: 6px;
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 12px;
--spacing-lg: 16px;
--spacing-xl: 24px;
/* Comic-book black stroke around big titles. The 8-direction shadow paints a
uniform 2px outline; the soft drop adds depth. Use --text-outline-md for
mid-size headings (16-24px) and --text-outline-lg for display text. */
--text-outline-lg:
-2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
-2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000,
0 4px 0 rgba(0, 0, 0, 0.45);
--text-outline-md:
-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
0 2px 0 rgba(0, 0, 0, 0.4);
}
/* Reset + base */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
* { touch-action: manipulation; }
html, body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
font-size: 15px;
line-height: 1.4;
color: var(--text-primary);
background: var(--bg-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
/* Page layout */
.page {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: var(--spacing-lg);
}
.page-center {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-lg);
}
/* ─── Phone shell ─────────────────────────────────────────────────────────
Locks player UIs to a vertical-phone container even on desktop. On a
real phone, viewport is narrow enough that the clamp bottoms out and the
shell fills the screen. On desktop, sits centered as a phone-shaped pane
so dev/testers see what mobile users see. Pattern lifted from the old
project's BrowserGameWindow .game-active sizing.
Use:
…game UI…
*/
.phone-page {
margin: 0;
min-height: 100vh;
background: var(--bg-primary);
display: flex;
align-items: stretch;
justify-content: center;
padding: 0;
}
.phone-shell {
position: relative;
width: 100%;
max-width: 460px;
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--bg-primary);
overflow: hidden;
}
/* Desktop: lift off the page edges, lock to phone proportions, draw a
frame + notch so dev/testers see what mobile users see. The 9/16
aspect-ratio works here because exactly one of width/height is auto. */
@media (min-width: 600px) {
.phone-page { align-items: center; padding: 24px; }
.phone-shell {
width: auto;
height: 90vh;
min-height: 640px;
max-height: 920px;
aspect-ratio: 9 / 16;
border: 2px solid var(--bg-hover);
border-radius: 32px;
box-shadow:
0 0 0 6px #000,
0 24px 64px rgba(0, 0, 0, 0.55),
0 4px 12px rgba(0, 0, 0, 0.4);
}
.phone-shell::before {
/* Tiny notch hint — pure decoration. */
content: "";
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 90px;
height: 18px;
background: #000;
border-radius: 12px;
z-index: 5;
}
}
/* Card */
.card {
background: var(--bg-secondary);
border-radius: var(--border-radius);
padding: var(--spacing-xl);
width: 100%;
max-width: 420px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.card h1 {
color: var(--accent);
font-size: 1.8rem;
font-weight: 800;
text-align: center;
margin-bottom: var(--spacing-lg);
text-shadow: var(--text-outline-md);
letter-spacing: 0.5px;
}
.card .subtitle {
color: var(--text-secondary);
text-align: center;
margin-bottom: var(--spacing-lg);
font-size: 14px;
}
/* Headings */
.h-display {
font-size: 2.5rem;
font-weight: 800;
color: var(--accent);
text-align: center;
text-shadow: var(--text-outline-lg);
letter-spacing: 0.5px;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-sm);
padding: var(--spacing-md) var(--spacing-lg);
border: none;
border-radius: var(--border-radius);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
min-height: 44px;
user-select: none;
text-decoration: none;
font-family: inherit;
}
.btn:active { transform: scale(0.97); }
.btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-full { width: 100%; }
.btn-lg { padding: var(--spacing-lg) var(--spacing-xl); font-size: 17px; min-height: 52px; font-weight: 700; }
.btn-sm { padding: var(--spacing-xs) var(--spacing-sm); font-size: 13px; min-height: 32px; font-weight: 700; }
.btn-primary { background: var(--primary); color: #000; }
.btn-primary:hover:not(:disabled) { background: #e69500; }
.btn-secondary { background: var(--secondary); color: var(--text-primary); }
.btn-secondary:hover:not(:disabled) { background: var(--bg-hover); }
.btn-accent { background: var(--accent); color: #000; }
.btn-accent:hover:not(:disabled) { background: var(--accent-hover); }
.btn-success { background: var(--success); color: #000; }
.btn-success:hover:not(:disabled) { background: #00c464; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #cc3333; }
/* Form fields */
.field { margin-bottom: var(--spacing-md); }
.field label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: var(--spacing-xs);
letter-spacing: 0.3px;
}
.input, input[type="text"], input[type="password"] {
width: 100%;
padding: var(--spacing-md);
background: var(--bg-input);
border: 1px solid var(--bg-hover);
border-radius: var(--border-radius);
color: var(--text-primary);
font-size: 14px;
outline: none;
font-family: inherit;
}
.input:focus, input[type="text"]:focus, input[type="password"]:focus {
border-color: var(--accent);
}
.input::placeholder, input::placeholder { color: var(--text-muted); }
input[type="color"] {
flex: 1;
height: 48px;
border: 1px solid var(--bg-hover);
border-radius: var(--border-radius);
background: var(--bg-input);
padding: 4px;
cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 4px; }
/* Text helpers */
.txt-heading { font-size: 19px; font-weight: 800; text-shadow: var(--text-outline-md); }
.txt-body { font-size: 15px; color: var(--text-primary); }
.txt-caption { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.txt-error { color: var(--danger); font-size: 14px; min-height: 1rem; text-align: center; font-weight: 600; }
.txt-success { color: var(--success); font-weight: 600; }
.txt-muted { color: var(--text-muted); }
.txt-accent { color: var(--accent); }
.txt-gold { color: var(--gold); }
/* Spinner (used during connect) */
.spinner {
width: 48px;
height: 48px;
border: 4px solid var(--bg-secondary);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin: 0 auto var(--spacing-lg);
}
@keyframes spin { to { transform: rotate(360deg); } }
/* QR display frame (white bg keeps the QR readable) */
.qr-frame {
background: #fff;
padding: var(--spacing-md);
border-radius: var(--border-radius);
display: inline-block;
}
.qr-frame img { display: block; width: 200px; height: 200px; }
/* Status pip */
.status-pip {
position: fixed;
bottom: 8px;
right: 8px;
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
opacity: 0.75;
}
/* Animations for newly added components */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.2s ease; }
/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
/* ============================================
SETTINGS GEAR + SLIDE-OUT PANEL
============================================ */
.settings-gear {
position: fixed;
top: var(--spacing-md);
left: var(--spacing-md);
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--bg-secondary);
border: 2px solid var(--accent);
color: var(--accent);
font-size: 22px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 1100;
transition: transform 0.15s ease, background 0.15s ease;
padding: 0;
}
.settings-gear:hover { background: var(--bg-hover); transform: rotate(30deg); }
.settings-gear:active { transform: rotate(30deg) scale(0.95); }
.settings-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.settings-backdrop.open {
opacity: 1;
pointer-events: auto;
}
.settings-panel {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 720px;
max-width: 90vw;
background: var(--bg-secondary);
border-right: 2px solid var(--accent);
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
z-index: 1050;
display: flex;
flex-direction: column;
transform: translateX(-100%);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.settings-panel.open { transform: translateX(0); }
.settings-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-md) var(--spacing-lg);
background: var(--bg-primary);
border-bottom: 1px solid var(--bg-hover);
flex-shrink: 0;
}
.settings-title { font-size: 18px; font-weight: 800; color: var(--accent); text-shadow: var(--text-outline-md); letter-spacing: 0.3px; }
.settings-close {
background: transparent;
border: none;
color: var(--text-secondary);
font-size: 26px;
line-height: 1;
cursor: pointer;
padding: 0 var(--spacing-xs);
}
.settings-close:hover { color: var(--text-primary); }
.settings-tabs {
display: flex;
background: var(--bg-primary);
border-bottom: 1px solid var(--bg-hover);
flex-shrink: 0;
}
.settings-tab {
flex: 1;
padding: var(--spacing-md);
background: transparent;
border: none;
color: var(--text-secondary);
font-size: 16px;
font-weight: 700;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.15s ease;
font-family: inherit;
letter-spacing: 0.2px;
}
.settings-tab:hover { background: var(--bg-hover); color: var(--text-primary); }
.settings-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.settings-content {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: var(--spacing-md);
/* Extra room at the bottom so the last setting isn't hidden under the
absolutely-positioned footer (Exit / Disconnect). Matches the footer's
content height (~36px button) + its top/bottom padding (~16px). */
padding-bottom: 64px;
/* IMPORTANT: keep this as block layout. Earlier this was `display: flex;
flex-direction: column` so the chat playground could `flex: 1` to fill
remaining space, but that caused flex-shrink to squash sibling children
(e.g. the SVG section's textareas + canvas) and killed scrolling. */
}
.settings-content > * + * { margin-top: var(--spacing-sm); }
.settings-content[hidden] { display: none; }
/* Scoped readability bump inside the settings panel — phones-on-LAN testers
sit a couch-distance from the TV, so the default control sizes used
elsewhere are too small here. Stays scoped so /join, /player, /tv lobby
buttons are unaffected. */
.settings-panel .btn-sm { font-size: 14px; min-height: 36px; padding: var(--spacing-xs) var(--spacing-md); }
.settings-panel .btn { font-size: 16px; }
/* Footer is decoupled from the panel's flex stack and pinned to the bottom
so .settings-content can grow + scroll freely without the footer eating
vertical space or moving with the content. The content area adds
padding-bottom so the last visible setting doesn't slide under it. */
.settings-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--spacing-sm) var(--spacing-md);
background: var(--bg-primary);
border-top: 1px solid var(--bg-hover);
display: flex;
gap: var(--spacing-sm);
z-index: 5;
}
.settings-footer .btn { flex: 1; }
.settings-footer .btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* Players tab */
.players-empty {
text-align: center;
color: var(--text-muted);
padding: var(--spacing-xl) var(--spacing-md);
font-size: 16px;
font-weight: 500;
line-height: 1.5;
}
.player-row {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-md);
background: var(--bg-hover);
border-radius: var(--border-radius);
transition: opacity 0.2s ease;
}
.player-row.disconnected { opacity: 0.4; }
.player-color-dot {
width: 18px;
height: 18px;
border-radius: 50%;
flex-shrink: 0;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.player-name {
flex: 1;
font-size: 17px;
color: var(--text-primary);
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.player-status {
font-size: 13px;
padding: 2px var(--spacing-sm);
border-radius: 10px;
background: var(--success);
color: #000;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
}
/* Player number discriminator — server-assigned slot number, shown next to
every name so two players with the same display name (e.g. two "Alice"s
sharing the default gold color) can be told apart. Styled like a small
accent badge so it pops, not faded. */
.player-tag {
display: inline-block;
font-size: 12px;
font-weight: 800;
color: #000;
background: var(--accent);
padding: 1px 6px;
border-radius: 8px;
margin-left: var(--spacing-xs);
font-family: monospace;
letter-spacing: 0.3px;
vertical-align: middle;
}
.player-row.disconnected .player-status {
background: var(--text-muted);
color: var(--bg-primary);
}
.player-row.host .player-name::after {
content: ' 👑';
filter: none;
}
/* ============================================
AI SETTINGS TAB (LLM config + testing chat)
============================================ */
/* Collapsible section wrapper inside the AI tab. Each groups a
related cluster of controls so the tab doesn't feel like a wall of inputs. */
.ai-section {
border: 1px solid var(--bg-hover);
border-radius: var(--border-radius);
background: var(--bg-secondary);
margin-bottom: var(--spacing-sm);
overflow: hidden;
}
.ai-section-summary {
list-style: none;
cursor: pointer;
padding: var(--spacing-sm) var(--spacing-md);
font-weight: 700;
font-size: 14px;
color: var(--text-primary);
letter-spacing: 0.3px;
user-select: none;
display: flex;
align-items: center;
gap: var(--spacing-sm);
background: var(--bg-hover);
}
.ai-section-summary::-webkit-details-marker { display: none; }
.ai-section-summary::before {
content: '▸';
display: inline-block;
transition: transform 0.15s ease;
color: var(--text-muted);
width: 0.9em;
}
.ai-section[open] > .ai-section-summary::before { transform: rotate(90deg); }
.ai-section > section { padding: var(--spacing-md); }
.ai-section:not([open]) > section { display: none; }
/* Remove the bottom border on the inner .ai-config since the section wrapper
already provides visual separation. */
.ai-section .ai-config { border-bottom: 0; padding-bottom: 0; }
.ai-config {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
padding-bottom: var(--spacing-md);
border-bottom: 1px solid var(--bg-hover);
}
.ai-config label {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
font-size: 14px;
font-weight: 600;
color: var(--text-secondary);
letter-spacing: 0.2px;
}
.ai-config-hint {
font-weight: 400;
color: var(--text-muted);
font-size: 12px;
}
.ai-config input[type="text"],
.ai-config input[type="password"],
.ai-config select {
background: var(--bg-hover);
color: var(--text-primary);
border: 1px solid var(--bg-hover);
border-radius: var(--border-radius);
padding: var(--spacing-sm) var(--spacing-sm);
font-family: inherit;
font-size: 15px;
width: 100%;
box-sizing: border-box;
}
.ai-config input[type="range"] { width: 100%; accent-color: var(--accent); }
.ai-config-checkbox {
flex-direction: row;
align-items: center;
gap: var(--spacing-sm);
cursor: pointer;
user-select: none;
}
.ai-config-checkbox input[type="checkbox"] {
width: auto;
margin: 0;
accent-color: var(--accent);
flex-shrink: 0;
}
.ai-config-checkbox > span { font-size: 14px; color: var(--text-secondary); font-weight: 600; }
.ai-config-checkbox input[type="checkbox"] { width: 18px; height: 18px; }
.ai-config-row { display: flex; gap: var(--spacing-xs); align-items: center; }
.ai-config-row select { flex: 1; }
.ai-config-actions { display: flex; justify-content: flex-end; }
.ai-status { font-size: 13px; color: var(--text-muted); min-height: 18px; }
.ai-status.error { color: var(--danger); }
.ai-status.success { color: var(--success); }
/* Capability probe results — one row per probe (basic / json / tools /
vision). Each row shows an icon, label, latency, and short summary. */
.ai-test-results {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
margin-top: var(--spacing-sm);
padding: var(--spacing-sm);
background: var(--bg-primary);
border: 1px solid var(--bg-hover);
border-radius: var(--border-radius);
}
.ai-test-row {
display: grid;
grid-template-columns: 20px auto 70px 1fr;
align-items: baseline;
gap: var(--spacing-sm);
font-size: 13px;
line-height: 1.35;
}
.ai-test-row.pending .ai-test-icon { color: var(--text-muted); animation: ai-streaming-dots 1.4s ease-in-out infinite; }
.ai-test-row.pass .ai-test-icon { color: var(--success); }
.ai-test-row.fail .ai-test-icon { color: var(--danger); }
.ai-test-icon { font-weight: 900; text-align: center; }
.ai-test-label { color: var(--text-primary); font-weight: 600; }
.ai-test-ms { color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; }
.ai-test-summary { color: var(--text-secondary); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-test-row.fail .ai-test-summary { color: var(--danger); }
.ai-chat {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
margin-top: var(--spacing-md);
flex: 1;
min-height: 0;
}
.ai-chat-log {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
flex: 1;
min-height: 120px;
max-height: 280px;
overflow-y: auto;
padding: var(--spacing-xs);
background: var(--bg-primary);
border-radius: var(--border-radius);
border: 1px solid var(--bg-hover);
}
.ai-chat-log .bubble {
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--border-radius);
font-size: 15px;
line-height: 1.45;
white-space: pre-wrap;
word-break: break-word;
}
.ai-chat-log .bubble.user { background: var(--bg-hover); color: var(--text-primary); align-self: flex-end; max-width: 85%; }
.ai-chat-log .bubble.assistant { background: var(--bg-secondary); border: 1px solid var(--bg-hover); color: var(--text-primary); align-self: flex-start; max-width: 95%; }
.ai-chat-log .bubble.error { background: rgba(255, 68, 68, 0.12); border: 1px solid var(--danger); color: var(--danger); align-self: flex-start; max-width: 95%; }
/* Streaming indicator — pulsing accent dot at the start of the assistant
bubble while a response is in flight. Three-dot "typing" placeholder
appears only when the bubble is still empty (waiting on first token). */
.ai-chat-log .bubble.streaming { position: relative; }
.ai-chat-log .bubble.streaming::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
margin-right: 8px;
vertical-align: middle;
animation: ai-streaming-pulse 0.9s ease-in-out infinite;
box-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
}
@keyframes ai-streaming-pulse {
0%, 100% { opacity: 0.25; transform: scale(0.9); }
50% { opacity: 1; transform: scale(1.15); }
}
/* When the bubble has produced nothing yet (no reasoning visible AND no
content text), show a three-dot typing placeholder inside the content
area so it's obvious the model is still warming up / processing the
prompt. As soon as the first chunk lands, the content fills with text
and this placeholder is naturally replaced. */
.ai-chat-log .bubble.streaming .bubble-content:empty::before {
content: '⋯';
display: inline-block;
letter-spacing: 4px;
color: var(--text-muted);
animation: ai-streaming-dots 1.4s ease-in-out infinite;
}
@keyframes ai-streaming-dots {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
/* Reasoning models (Qwen3 + vLLM, DeepSeek-R1, …) stream a "thinking" prelude
before the final answer. Render it faded + italic so the actual answer
stands out. .visible is added the moment the first reasoning chunk lands. */
.ai-chat-log .bubble .bubble-reasoning {
display: none;
font-style: italic;
color: var(--text-muted);
font-size: 13px;
line-height: 1.4;
border-left: 2px solid var(--bg-hover);
padding: 2px var(--spacing-xs);
margin-bottom: var(--spacing-xs);
max-height: 120px;
overflow-y: auto;
white-space: pre-wrap;
}
.ai-chat-log .bubble .bubble-reasoning.visible { display: block; }
.ai-chat-log .bubble .bubble-content { white-space: pre-wrap; }
.ai-chat-stats {
display: flex;
gap: var(--spacing-md);
flex-wrap: wrap;
font-size: 13px;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
letter-spacing: 0.2px;
}
.ai-chat-input { display: flex; gap: var(--spacing-xs); }
.ai-chat-input input {
flex: 1;
background: var(--bg-hover);
color: var(--text-primary);
border: 1px solid var(--bg-hover);
border-radius: var(--border-radius);
padding: var(--spacing-sm) var(--spacing-md);
font-family: inherit;
font-size: 15px;
}
.ai-chat-input input:focus { outline: none; border-color: var(--accent); }
/* SVG illustrator playground (inside the AI tab) — shares the .ai-config
label styling but adds textareas, a 16:9 canvas, and a knob row. */
.ai-svg {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.ai-svg-intro {
font-size: 12px;
color: var(--text-muted);
margin: 0;
line-height: 1.4;
}
.ai-svg-intro code {
background: var(--bg-hover);
padding: 1px 6px;
border-radius: 4px;
font-size: 11px;
}
.ai-svg label {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
font-size: 14px;
font-weight: 600;
color: var(--text-secondary);
}
.ai-svg textarea {
background: var(--bg-hover);
color: var(--text-primary);
border: 1px solid var(--bg-hover);
border-radius: var(--border-radius);
padding: var(--spacing-sm);
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 12.5px;
line-height: 1.4;
width: 100%;
box-sizing: border-box;
resize: vertical;
}
.ai-svg textarea:focus,
.ai-svg input[type="text"]:focus,
.ai-svg input[type="number"]:focus,
.ai-svg select:focus { outline: none; border-color: var(--accent); }
.ai-svg input[type="text"],
.ai-svg input[type="number"],
.ai-svg select {
background: var(--bg-hover);
color: var(--text-primary);
border: 1px solid var(--bg-hover);
border-radius: var(--border-radius);
padding: var(--spacing-sm);
font-family: inherit;
font-size: 14px;
width: 100%;
box-sizing: border-box;
}
.ai-svg-knobs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-sm);
}
.ai-svg-actions { justify-content: space-between; }
.ai-svg-test {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
margin-top: var(--spacing-sm);
padding-top: var(--spacing-sm);
border-top: 1px dashed var(--bg-hover);
}
/* The preview frame — fixed 16:9 ratio matching the SVG viewBox so the
model's coordinate space maps 1:1. Empty state shows a hint string. */
.ai-svg-canvas {
aspect-ratio: 16 / 9;
width: 100%;
background: #0b0b10;
border: 1px solid var(--bg-hover);
border-radius: var(--border-radius);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.ai-svg-canvas:empty::before {
content: 'Type a subject above and click Draw to test the prompt.';
color: var(--text-muted);
font-size: 12px;
padding: var(--spacing-md);
text-align: center;
}
.ai-svg-canvas svg {
width: 100%;
height: 100%;
display: block;
}
/* ============================================
QR DRAWER (right-side slide-out)
============================================ */
.qr-toggle {
position: fixed;
top: var(--spacing-md);
right: var(--spacing-md);
height: 44px;
min-width: 44px;
padding: 0 var(--spacing-md);
border-radius: 22px;
background: var(--bg-secondary);
border: 2px solid var(--accent);
color: var(--accent);
font-size: 15px;
font-weight: 800;
letter-spacing: 0.3px;
cursor: pointer;
z-index: 1100;
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
transition: background 0.15s ease, transform 0.15s ease;
font-family: inherit;
}
.qr-toggle:hover { background: var(--bg-hover); transform: translateY(-1px); }
.qr-toggle:active { transform: translateY(0) scale(0.97); }
.qr-toggle .qr-toggle-icon { font-size: 19px; line-height: 1; }
.qr-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 360px;
max-width: 90vw;
background: var(--bg-secondary);
border-left: 2px solid var(--accent);
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5);
z-index: 1050;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.qr-drawer.open { transform: translateX(0); }
.qr-drawer-content {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: var(--spacing-lg);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-md);
}
.qr-info {
width: 100%;
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
margin-top: var(--spacing-sm);
}
.qr-info-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-sm) var(--spacing-md);
background: var(--bg-hover);
border-radius: var(--border-radius);
gap: var(--spacing-sm);
}
.qr-info-label {
font-size: 13px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.6px;
font-weight: 700;
}
.qr-info-row code {
font-family: monospace;
font-size: 14px;
color: var(--accent);
word-break: break-all;
text-align: right;
font-weight: 700;
}
/* ============================================
GENERIC OVERLAY BACKDROP
Shared by settings-panel and qr-drawer.
============================================ */
.overlay-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.overlay-backdrop.open {
opacity: 1;
pointer-events: auto;
}
/* ============================================
TOAST NOTIFICATIONS
============================================ */
.toast-container {
position: fixed;
top: var(--spacing-md);
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
z-index: 1200;
pointer-events: none;
width: max-content;
max-width: 90vw;
}
.toast {
background: var(--bg-secondary);
color: var(--text-primary);
padding: var(--spacing-md) var(--spacing-lg);
border-radius: var(--border-radius);
font-size: 15px;
font-weight: 700;
letter-spacing: 0.2px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
border: 1px solid var(--bg-hover);
opacity: 0;
transform: translateY(-12px);
transition: opacity 0.25s ease, transform 0.25s ease;
pointer-events: auto;
text-align: center;
}
.toast.show {
opacity: 1;
transform: translateY(0);
}
.toast-success { background: var(--success); color: #000; border-color: transparent; }
.toast-error { background: var(--danger); color: #fff; border-color: transparent; }
.toast-info { background: var(--primary); color: #000; border-color: transparent; }
/* ============================================
AI ACTIVITY DRAWER (right-side slide-out)
============================================ */
/* Toggle button — sits to the LEFT of the QR toggle so it's right next to it
in the top-right corner. Uses muted styling so it doesn't compete visually
with the gold QR "Join" CTA (which is the primary action for players). */
.activity-toggle {
position: fixed;
top: var(--spacing-md);
right: calc(var(--spacing-md) + 110px); /* leave room for the QR toggle */
height: 44px;
min-width: 44px;
padding: 0 var(--spacing-md);
border-radius: 22px;
background: var(--bg-secondary);
border: 2px solid var(--text-secondary);
color: var(--text-secondary);
font-size: 14px;
font-weight: 800;
letter-spacing: 0.3px;
cursor: pointer;
z-index: 1100;
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease, border-color 0.15s ease;
font-family: inherit;
}
.activity-toggle:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--text-primary); transform: translateY(-1px); }
.activity-toggle:active { transform: translateY(0) scale(0.97); }
.activity-toggle .activity-toggle-icon { font-size: 18px; line-height: 1; }
/* Free-floating, draggable, resizable window. Default geometry is set
here in CSS; JS overrides via inline style once a saved position
exists. `display:none` keeps it fully out of layout when hidden;
.open flips it to flex so the header/list/footer stack works. */
.activity-panel {
position: fixed;
top: 80px;
left: calc(100vw - 540px); /* default: snug against the right edge */
width: 520px;
height: 600px;
min-width: 320px;
min-height: 200px;
background: var(--bg-secondary);
border: 2px solid var(--accent);
border-radius: var(--border-radius);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
z-index: 1050;
display: none;
flex-direction: column;
resize: both; /* native bottom-right corner resize */
overflow: hidden; /* clip rounded corners over inner content */
}
.activity-panel.open { display: flex; }
/* Header doubles as the drag handle. JS toggles .dragging while a drag
is in flight so we can disable text-select on the body during drag. */
.activity-panel .activity-drag-handle {
cursor: move;
user-select: none;
}
.activity-panel.dragging { box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7); }
body.activity-dragging { user-select: none; cursor: move; }
.activity-list {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: var(--spacing-md);
display: flex;
flex-direction: column; /* oldest at top, newest at bottom — chat style */
gap: var(--spacing-sm);
}
/* Anchor entries to the bottom while the list has free space, so a short
log doesn't float at the top with a gap below. The pseudo grows to
absorb the slack; when the list overflows it collapses to zero and
normal scrolling kicks in (no scroll-jam quirk like with
justify-content: flex-end). */
.activity-list::before {
content: '';
flex: 1 0 auto;
}
.activity-empty {
text-align: center;
color: var(--text-muted);
padding: var(--spacing-xl) var(--spacing-md);
font-size: 14px;
line-height: 1.5;
}
/* Each activity entry: header row with badges, then optional prompt/response
bodies. Color of the left border encodes the entry's type/outcome. */
.activity-entry {
background: var(--bg-primary);
border: 1px solid var(--bg-hover);
border-left: 4px solid var(--text-muted);
border-radius: var(--border-radius);
padding: var(--spacing-sm) var(--spacing-md);
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
font-size: 13px;
line-height: 1.4;
}
.activity-entry.kind-chat { border-left-color: var(--accent); }
.activity-entry.kind-probe.pass { border-left-color: var(--success); }
.activity-entry.kind-probe.fail { border-left-color: var(--danger); }
.activity-entry.status-error { border-left-color: var(--danger); }
/* Processing state — pulsing accent border + subtle shimmer in the
background so a still-in-flight entry is impossible to miss in a long
activity log. The bordered-left edge actually animates between accent
and a muted shade, giving a clear "heartbeat" without being noisy. */
.activity-entry.status-pending {
border-left-color: var(--accent);
animation: activity-pending-border 1.4s ease-in-out infinite;
background: linear-gradient(90deg, rgba(255,215,0,0.05), var(--bg-primary) 40%);
}
@keyframes activity-pending-border {
0%, 100% { border-left-color: var(--accent); box-shadow: inset 0 0 0 0 rgba(255,215,0,0); }
50% { border-left-color: var(--text-muted); box-shadow: inset 4px 0 12px -6px var(--accent); }
}
.activity-head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
font-size: 12px;
}
.activity-head .activity-time {
margin-left: auto;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
font-size: 11px;
}
/* Pill-shaped badges used in the entry header. Reusable per-type. */
.activity-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.4px;
text-transform: uppercase;
line-height: 1.4;
}
.activity-badge.kind-chat { background: var(--accent); color: #000; }
.activity-badge.kind-probe { background: var(--bg-hover); color: var(--text-primary); }
/* Pending pill — bright accent with an animated dot prefix so it reads
"actively working" not just "informational". Padding makes room for
the absolutely-positioned dot. */
.activity-badge.status-pending {
background: var(--accent);
color: #000;
position: relative;
padding-left: 20px;
animation: activity-pending-pill 1.4s ease-in-out infinite;
}
.activity-badge.status-pending::before {
content: '';
position: absolute;
left: 7px;
top: 50%;
width: 7px;
height: 7px;
border-radius: 50%;
background: #000;
transform: translateY(-50%);
animation: activity-pending-dot 0.9s ease-in-out infinite;
}
@keyframes activity-pending-pill {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
@keyframes activity-pending-dot {
0%, 100% { opacity: 0.35; transform: translateY(-50%) scale(0.75); }
50% { opacity: 1; transform: translateY(-50%) scale(1.15); }
}
.activity-badge.status-success,
.activity-badge.status-pass { background: var(--success); color: #000; }
.activity-badge.status-fail,
.activity-badge.status-error,
.activity-badge.status-aborted { background: var(--danger); color: #fff; }
.activity-badge.provider { background: transparent; color: var(--text-secondary); border: 1px solid var(--bg-hover); }
.activity-badge.model { background: transparent; color: var(--text-muted); border: 1px solid var(--bg-hover); text-transform: none; font-weight: 600; letter-spacing: 0.2px; }
.activity-stats {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-md);
font-size: 11px;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.activity-stats span { white-space: nowrap; }
/* Context-utilization color cues. Threshold pick is arbitrary but useful:
green = plenty of headroom; yellow = getting tight; red = close to cap. */
.activity-stats .ctx-low { color: var(--success); font-weight: 700; }
.activity-stats .ctx-mid { color: var(--accent); font-weight: 700; }
.activity-stats .ctx-high { color: var(--danger); font-weight: 800; }
.activity-body {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 2px;
}
.activity-row {
display: flex;
gap: var(--spacing-xs);
align-items: baseline;
}
.activity-row .activity-label {
flex-shrink: 0;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--text-muted);
min-width: 56px;
}
.activity-row .activity-text {
flex: 1;
font-size: 13px;
color: var(--text-primary);
white-space: pre-wrap;
word-break: break-word;
max-height: 4.5em; /* ~3 lines; click row to expand */
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
}
.activity-row.expanded .activity-text { max-height: none; }
.activity-row.error .activity-text { color: var(--danger); }
/* Inline disclosure row used by AI activity entries to hide the bot's
system prompt behind a click. Collapsed by default — the toggle line
draws a triangle via ::before so JS doesn't have to touch the glyph. */
.activity-row-disclosure {
display: block;
margin-top: 4px;
}
.activity-disclosure-toggle {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--text-muted);
cursor: pointer;
user-select: none;
}
.activity-disclosure-toggle::before {
content: '▸ ';
display: inline-block;
width: 1em;
}
.activity-row-disclosure.expanded .activity-disclosure-toggle::before {
content: '▾ ';
}
.activity-disclosure-body {
display: none;
margin-top: 4px;
padding: 8px 10px;
background: var(--surface-2, rgba(0, 0, 0, 0.15));
border-radius: 4px;
max-width: 100%;
overflow: hidden;
}
.activity-row-disclosure.expanded .activity-disclosure-body {
display: block;
}
.activity-disclosure-body pre {
margin: 0;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 12px;
line-height: 1.4;
color: var(--text-primary);
white-space: pre-wrap;
word-break: break-word;
}
/* ============================================
PLAYER FX (twiz-fx.js) — connect / disconnect feedback
============================================ */
/* Particle-burst layer: fixed, full-viewport, click-through. Particles
inside it are also pointer-events:none so they never block UI. */
.twiz-fx-layer {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
}
.twiz-fx-particle {
position: fixed;
width: 10px;
height: 10px;
border-radius: 50%;
pointer-events: none;
will-change: transform, opacity;
background: var(--p-color, var(--accent));
box-shadow: 0 0 8px var(--p-color, var(--accent));
animation: twiz-fx-burst var(--p-dur, 700ms) cubic-bezier(.2, .6, .3, 1) forwards;
}
@keyframes twiz-fx-burst {
0% { transform: translate(0, 0) scale(0.4); opacity: 0; }
20% { opacity: 1; }
100% { transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(0.9); opacity: 0; }
}
/* Leading color dot inside player toasts so the room can identify whose
event fired even if the name is small or far away. */
.toast-player-dot {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: var(--spacing-xs);
vertical-align: -1px;
border: 1px solid rgba(0, 0, 0, 0.25);
box-shadow: 0 0 6px currentColor;
}
/* Player-row entrance/exit/reconnect animations — applied transiently
by twiz-fx.js helpers (flashRow / flashRowThen). */
@keyframes player-row-join {
0% { opacity: 0; transform: translateX(-12px) scale(0.96); }
60% { opacity: 1; transform: translateX(0) scale(1.04); }
100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes player-row-leave {
to { opacity: 0; transform: translateX(8px) scale(0.95); }
}
@keyframes player-row-reconnect-glow {
0%, 100% { box-shadow: 0 0 0 0 transparent; }
50% { box-shadow: 0 0 14px 2px var(--p-color, var(--success)); }
}
.player-row.fx-joining { animation: player-row-join 0.45s cubic-bezier(.2, .6, .3, 1); }
.player-row.fx-leaving { animation: player-row-leave 0.35s ease forwards; }
.player-row.fx-reconnected { animation: player-row-reconnect-glow 0.9s ease; }
/* Subtler grayscale on disconnected rows so they read as "muted" rather
than just "faded". Stacks with the existing opacity rule above. */
.player-row.disconnected { filter: grayscale(0.6); }
/* Player-personalized toast: background + text color are set inline from
JS based on the player's color (and luminance for contrast). This class
only contributes the richer drop shadow + matching text-shadow. The
.text-light / .text-dark sub-class is also set by JS so the text-shadow
direction reads correctly against the chosen color. */
.toast.toast-player {
background: var(--bg-secondary); /* fallback if no inline color */
color: var(--text-primary);
border-color: transparent;
box-shadow:
0 8px 28px rgba(0, 0, 0, 0.55),
0 2px 8px rgba(0, 0, 0, 0.40),
inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}
/* Light text on a dark player color → use a dark drop shadow for depth. */
.toast.toast-player.text-light {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.40);
}
/* Dark text on a light player color → a faint light "outline" reads as a
subtle pop without muddying the text. */
.toast.toast-player.text-dark {
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.55), 0 2px 4px rgba(255, 255, 255, 0.30);
}
/* Slightly stronger dot border for legibility against the colored background. */
.toast.toast-player .toast-player-dot {
border-color: rgba(0, 0, 0, 0.35);
}
/* ============================================
LOBBY REDESIGN (2026-05-24) — Brand chassis
Used by /connect, /join, /player lobby, and as the framework wordmark
on any "TwizGame is talking" surface. Per-game theming (Task 7) layers
on top via --game-color CSS vars; this chassis is gold-only.
============================================ */
:root {
/* Active game's brand. Default to TwizGame-gold; setActiveHeroGame()
overwrites these when a game is the hero. */
--game-color: #FFD700;
--game-color-soft: rgba(255, 215, 0, 0.22);
--game-color-glow: rgba(255, 215, 0, 0.5);
}
.brand-card {
position: relative;
background: linear-gradient(180deg, rgba(20,20,20,.92) 0%, rgba(14,14,14,.96) 100%);
border: 1px solid rgba(255, 215, 0, 0.22);
border-radius: 18px;
padding: 28px 26px 24px;
box-shadow:
0 30px 80px rgba(0,0,0,.65),
0 0 0 1px rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.04);
width: 100%;
max-width: 440px;
backdrop-filter: blur(12px);
}
.brand-card::before {
/* Decorative top accent line — a thin gold marquee bar */
content: "";
position: absolute;
top: -1px;
left: 18%;
right: 18%;
height: 2px;
background: linear-gradient(90deg, transparent, #FFD700, transparent);
border-radius: 2px;
opacity: 0.7;
}
.wordmark {
text-align: center;
font-family: 'Bagel Fat One', cursive;
font-size: 56px;
line-height: 0.95;
letter-spacing: 1px;
color: #FFD700;
text-shadow:
-2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
-2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000,
0 6px 0 rgba(0,0,0,.5), 0 0 42px rgba(255,215,0,.22);
margin-bottom: 6px;
}
.tagline {
text-align: center;
font: 800 11.5px/1 'Manrope', sans-serif;
letter-spacing: 3.5px;
text-transform: uppercase;
color: #FFA500;
margin-bottom: 18px;
text-shadow: 0 1px 3px #000;
}
.subtitle-pill {
display: block;
margin: 0 auto 18px;
padding: 10px 18px;
background: rgba(0,0,0,.55);
border: 1px solid rgba(255,255,255,.08);
border-radius: 12px;
color: #dcdce0;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
text-align: center;
backdrop-filter: blur(4px);
max-width: 380px;
}
/* Form-field refresh — tracked-out gold uppercase labels, deeper input chrome */
.brand-card .field { margin-bottom: 12px; }
.brand-card .field label { display: block; font: 800 11px/1 'Manrope', sans-serif; letter-spacing: 1.8px; text-transform: uppercase; color: #FFD700; margin-bottom: 6px; text-shadow: 0 1px 2px #000; }
.brand-card .input { width: 100%; padding: 13px 14px; background: #0d0d0d; border: 1.5px solid #2a2a2a; border-radius: 10px; color: #efeff1; font: 600 15px/1.2 'Manrope', sans-serif; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.brand-card .input:focus { border-color: #FFD700; box-shadow: 0 0 0 3px rgba(255,215,0,.18); }
.brand-card .input::placeholder { color: #666; font-weight: 500; }
.brand-card .field-hint { margin-top: 5px; font-size: 11.5px; color: #7a7a7a; line-height: 1.4; }
.brand-card .field-hint b { color: #adadb8; font-weight: 700; }
/* Framework CTA — gold ▶ pill in Bagel Fat One. Different from .hero-cta
(which uses per-game font + per-game color). */
.cta {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 56px;
margin-top: 6px;
border-radius: 28px;
background: #FFD700;
color: #0a0a0a;
border: none;
font-family: 'Bagel Fat One', cursive;
font-size: 22px;
letter-spacing: 1.4px;
cursor: pointer;
box-shadow: 0 6px 20px rgba(255,215,0,.32), 0 2px 6px rgba(0,0,0,.6);
transition: transform .15s ease, box-shadow .15s ease;
}
.cta:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(255,215,0,.5), 0 4px 10px rgba(0,0,0,.7); }
.cta:active { transform: translateY(0) scale(.98); }
.cta:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: 0 2px 6px rgba(0,0,0,.6); }
/* Blurred backdrop layer (used on /connect + /join over the bluff lobby art) */
.brand-backdrop {
position: absolute;
inset: 0;
background-image: url('/tv-assets/bluff-dictionary/images/lobby_bg.webp');
background-size: cover;
background-position: center;
filter: blur(14px) brightness(.45) saturate(1.1);
transform: scale(1.1); /* hide the blurred edges */
z-index: 0;
}
.brand-backdrop::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at center, rgba(255,165,0,.12) 0%, transparent 55%),
linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.85));
}
/* ============================================
LOBBY REDESIGN (2026-05-24) — Hero + Strip
Used by the TV lobby (/tv with no active game) ONLY. Per-game theming
is applied at runtime by setActiveHeroGame() via the --game-color CSS
vars defined in the brand-chassis section above.
============================================ */
.hero-stack {
position: fixed;
inset: 0;
z-index: 0;
background: #0a0a0a;
}
.hero-layer {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity .5s ease;
}
.hero-layer.active { opacity: 1; }
.hero-vignette {
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(180deg,
rgba(0,0,0,.55) 0%,
rgba(0,0,0,.15) 28%,
rgba(0,0,0,.25) 55%,
rgba(0,0,0,.85) 85%,
rgba(0,0,0,.96) 100%);
}
.hero-content {
position: fixed;
left: 0; right: 0;
bottom: 200px;
z-index: 10;
text-align: center;
padding: 0 32px;
pointer-events: none;
}
.hero-content > * { pointer-events: auto; }
.hero-title {
font-size: 104px;
line-height: 1;
letter-spacing: 1px;
margin-bottom: 18px;
animation: lobby-fade-up .4s ease;
transition: color .35s ease;
/* font-family, color, text-shadow set inline by setActiveHeroGame() */
}
.hero-desc {
font-size: 22px;
font-weight: 600;
color: #f4f4f5;
line-height: 1.4;
max-width: 760px;
margin: 0 auto 18px;
display: inline-block;
padding: 14px 26px;
background: rgba(0,0,0,.6);
border: 1px solid rgba(255,255,255,.08);
border-radius: 14px;
backdrop-filter: blur(6px);
box-shadow: 0 8px 24px rgba(0,0,0,.45);
animation: lobby-fade-up .4s ease .05s backwards;
}
.hero-meta {
font-size: 13px;
font-weight: 800;
letter-spacing: 2.2px;
text-transform: uppercase;
margin-bottom: 22px;
text-shadow: 0 2px 6px rgba(0,0,0,.7);
color: var(--game-color);
animation: lobby-fade-up .4s ease .1s backwards;
transition: color .35s ease;
}
.hero-cta {
display: inline-flex;
align-items: center;
gap: 10px;
height: 60px;
padding: 0 36px;
border-radius: 30px;
background: var(--game-color);
color: #0a0a0a;
border: none;
font-size: 24px;
letter-spacing: 1.5px;
cursor: pointer;
box-shadow: 0 6px 24px var(--game-color-soft), 0 2px 8px rgba(0,0,0,.6);
transition: transform .15s ease, box-shadow .15s ease, background .35s ease;
animation: lobby-fade-up .4s ease .15s backwards;
font-weight: 900;
/* font-family set inline by setActiveHeroGame() to the game's theme.font */
}
.hero-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 32px var(--game-color-glow), 0 4px 12px rgba(0,0,0,.7); }
.hero-cta:active { transform: translateY(0) scale(.98); }
@keyframes lobby-fade-up {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* Bottom strip */
.strip-wrap {
position: fixed;
left: 0; right: 0;
bottom: 0;
z-index: 15;
padding: 18px 24px 22px;
background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.85) 60%, rgba(0,0,0,.95) 100%);
pointer-events: none;
}
.strip-label {
font: 800 11px/1 'Manrope', sans-serif;
letter-spacing: 2.5px;
text-transform: uppercase;
color: #adadb8;
margin-bottom: 12px;
text-align: center;
text-shadow: 0 1px 4px rgba(0,0,0,.7);
}
.strip-label .ready { color: var(--game-color); transition: color .35s ease; }
.strip {
display: flex;
gap: 14px;
justify-content: center;
align-items: center;
overflow-x: auto;
padding: 4px 8px 8px;
scroll-snap-type: x mandatory;
pointer-events: auto;
scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.thumb {
flex-shrink: 0;
width: 148px;
height: 84px;
border-radius: 10px;
border: 3px solid transparent;
background: #1a1a1a;
cursor: pointer;
position: relative;
overflow: hidden;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
scroll-snap-align: center;
}
.thumb:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.35); }
.thumb.active {
transform: scale(1.08);
border-color: var(--game-color);
box-shadow: 0 0 0 4px var(--game-color-soft), 0 8px 20px rgba(0,0,0,.6);
}
.thumb-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.thumb-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px 5px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.85)); color: #fff; font: 800 10.5px/1.1 'Manrope', sans-serif; letter-spacing: .4px; text-shadow: 0 1px 2px #000; text-align: center; text-transform: uppercase; }
.thumb-icon { position: absolute; top: 5px; left: 6px; font-size: 16px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.8)); }
.thumb.coming {
background: repeating-linear-gradient(45deg, #1a1a1a 0 8px, #222 8px 16px);
border: 3px dashed #333;
display: flex;
align-items: center;
justify-content: center;
cursor: default;
}
.thumb.coming:hover { transform: none; border-color: #333; }
.thumb.coming::after {
content: "?";
font-family: 'Bagel Fat One', cursive;
font-size: 32px;
color: #444;
text-shadow: 0 2px 0 #000;
}
.thumb.coming .thumb-label { background: transparent; color: #555; font-size: 9px; }
.strip-edge { flex-shrink: 0; width: 44px; display: flex; align-items: center; justify-content: center; color: #666; font-size: 22px; font-weight: 800; pointer-events: none; }
/* Floating-chrome refresh: existing .settings-gear / .qr-toggle / .activity-toggle
already provide TwizGame-gold pills with backdrop-blur. No changes needed here —
the existing styles in theme.css (around the SETTINGS GEAR section) read cleanly
over the new hero art because they already use rgba bg + blur. Verified in
hero-layout.html mockup. */