:root{--color-bg: #0d0b12;--color-surface: #141020;--color-surface-2: #1b1628;--color-surface-offset: #221e30;--color-divider: #2e2a40;--color-border: #3a3555;--color-text: #f0eeff;--color-text-muted: #8b82a8;--color-text-faint: #4a4566;--color-text-inverse: #0d0b12;--color-primary: #7c3aed;--color-primary-hover: #9d5ff5;--color-primary-active: #6023d4;--color-primary-highlight: #2a1a4a;--color-error: #e05c7a;--color-success: #5cc98f;--color-warning: #e0a050;--radius-card: 16px;--radius-pill: 9999px;--radius-md: 8px;--radius-sm: 4px;--shadow-sm: 0 1px 3px oklch(.1 .05 280 / .4);--shadow-md: 0 4px 16px oklch(.1 .05 280 / .5);--shadow-lg: 0 8px 32px oklch(.1 .08 280 / .6);--shadow-glow: 0 0 24px oklch(.55 .25 280 / .35);--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--text-xs: clamp(.75rem, .7rem + .25vw, .875rem);--text-sm: clamp(.875rem, .8rem + .35vw, 1rem);--text-base:clamp(1rem, .95rem + .25vw, 1.125rem);--text-lg: clamp(1.125rem, 1rem + .75vw, 1.5rem);--text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);--font-display: "Clash Display", "Inter", sans-serif;--font-body: "Satoshi", "Inter", sans-serif;--transition-interactive: .18s cubic-bezier(.16, 1, .3, 1);--content-narrow: 640px;--content-default: 960px;--content-wide: 1200px;--game-btn-clearance: 80px}@media (prefers-color-scheme: light){:root{--color-bg: #f5f3ff;--color-surface: #ffffff;--color-surface-2: #faf9ff;--color-surface-offset: #ece8ff;--color-divider: #ddd8f5;--color-border: #c9c2e8;--color-text: #1a1530;--color-text-muted: #5a5278;--color-text-faint: #a09bba;--color-text-inverse: #f0eeff;--color-primary: #6d28d9;--color-primary-hover: #7c3aed;--color-primary-active: #5b21b6;--color-primary-highlight: #ede9fe;--color-error: #be185d;--color-success: #15803d;--color-warning: #b45309;--shadow-sm: 0 1px 3px oklch(.3 .05 280 / .1);--shadow-md: 0 4px 16px oklch(.3 .05 280 / .12);--shadow-lg: 0 8px 32px oklch(.3 .05 280 / .15);--shadow-glow: 0 0 20px oklch(.5 .2 280 / .2)}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scroll-behavior:smooth;hanging-punctuation:first last}body{min-height:100dvh;line-height:1.6;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background-color:var(--color-bg)}img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}ul[role=list],ol[role=list]{list-style:none}input,button,textarea,select{font:inherit;color:inherit}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);text-wrap:balance;line-height:1.15}p,li,figcaption{text-wrap:pretty;max-width:72ch}::selection{background:oklch(from var(--color-primary) l c h / .3);color:var(--color-text)}:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}button{cursor:pointer;background:none;border:none}table{border-collapse:collapse;width:100%}a,button,[role=button],[role=link],input,textarea,select{transition:color var(--transition-interactive),background var(--transition-interactive),border-color var(--transition-interactive),box-shadow var(--transition-interactive)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:var(--space-2) var(--space-6);border-radius:var(--radius-pill);font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;text-decoration:none;white-space:nowrap;cursor:pointer;border:1px solid transparent}.btn--primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.btn--primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}.btn--primary:active{background:var(--color-primary-active);border-color:var(--color-primary-active);box-shadow:var(--shadow-glow)}.btn--ghost{background:transparent;color:var(--color-text-muted);border-color:var(--color-border)}.btn--ghost:hover{color:var(--color-text);border-color:var(--color-text-muted)}.btn--ghost:active{color:var(--color-text);background:var(--color-surface-offset)}.btn--disabled{opacity:.4}.page-layout{display:flex;flex-direction:column;min-height:100dvh;padding:max(var(--space-6),env(safe-area-inset-top)) max(var(--space-4),env(safe-area-inset-right)) max(var(--space-6),env(safe-area-inset-bottom)) max(var(--space-4),env(safe-area-inset-left))}.page-layout--centered{align-items:center;justify-content:center;text-align:center}.page-layout--game{height:100dvh;overflow:hidden;padding-bottom:calc(var(--game-btn-clearance) + max(var(--space-6),env(safe-area-inset-bottom)))}.lobby-title{font-size:var(--text-xl);color:var(--color-primary);margin-bottom:var(--space-2)}.lobby-tagline{font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-8)}.end-heading{font-size:var(--text-xl);margin-bottom:var(--space-6)}.player-list{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;margin-bottom:var(--space-8)}.player-pill{font-family:var(--font-body);font-size:var(--text-xs);font-weight:500;padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);background:var(--color-primary-highlight);color:var(--color-primary-hover);border:1px solid oklch(from var(--color-primary) l c h / .25)}@media (prefers-color-scheme: light){.player-pill{color:var(--color-primary-active)}}.end-actions{display:flex;flex-direction:column;gap:var(--space-3);width:100%;max-width:320px}.end-actions .btn{width:100%}.qr-trigger{display:inline-flex;align-items:center;gap:var(--space-2);margin-top:var(--space-6);padding:var(--space-2) var(--space-4);min-height:44px;border-radius:var(--radius-pill);border:1px solid var(--color-border);background:transparent;color:var(--color-text-faint);font-family:var(--font-body);font-size:var(--text-xs);font-weight:500;letter-spacing:.02em;cursor:pointer;transition:color var(--transition-interactive),border-color var(--transition-interactive),background var(--transition-interactive)}.qr-trigger:hover{color:var(--color-text-muted);border-color:var(--color-text-faint)}.qr-trigger:active{background:var(--color-surface-offset);color:var(--color-text)}.qr-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:var(--space-4);background:#01010bbf;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:backdrop-in .2s cubic-bezier(.16,1,.3,1) both}@keyframes backdrop-in{0%{opacity:0}to{opacity:1}}.qr-modal{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-3);width:100%;max-width:340px;padding:var(--space-8) var(--space-6);background:var(--color-surface-2);border-radius:var(--radius-card);border:1px solid oklch(from var(--color-primary) l c h / .3);box-shadow:var(--shadow-lg),0 0 48px #614afc40,inset 0 1px oklch(from var(--color-primary) l c h / .1);animation:modal-in .22s cubic-bezier(.16,1,.3,1) both}@keyframes modal-in{0%{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@media (prefers-reduced-motion: reduce){.qr-modal-backdrop,.qr-modal{animation:none}}.qr-modal__close{position:absolute;top:var(--space-3);right:var(--space-3);display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:var(--radius-md);color:var(--color-text-faint);background:transparent;border:none;cursor:pointer;transition:color var(--transition-interactive),background var(--transition-interactive)}.qr-modal__close:hover{color:var(--color-text-muted);background:var(--color-surface-offset)}.qr-modal__close:active{color:var(--color-text)}.qr-modal__eyebrow{font-family:var(--font-body);font-size:var(--text-xs);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--color-primary-hover);max-width:unset}.qr-modal__title{font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-text);margin-bottom:var(--space-2)}.qr-modal__code{border-radius:var(--radius-md);padding:var(--space-3);background:#fff;box-shadow:0 0 0 1px oklch(from var(--color-primary) l c h / .2),0 4px 24px #614afc4d;line-height:0}.qr-modal__url{font-family:var(--font-body);font-size:var(--text-xs);color:var(--color-text-muted);letter-spacing:.01em;margin-top:var(--space-1);max-width:unset}.setup-content{width:100%;max-width:480px;margin-inline:auto;display:flex;flex-direction:column;flex:1}.setup-heading{font-size:var(--text-xl);margin-bottom:var(--space-6)}.setup-player-list{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-4);width:100%}.setup-player-row{display:flex;align-items:center;gap:var(--space-2);width:100%;background:var(--color-surface);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);border:1px solid var(--color-border)}.setup-player-input{flex:1;background:transparent;border:none;outline:none;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);min-height:48px;padding:0 var(--space-2)}.setup-player-input::placeholder{color:var(--color-text-faint)}.setup-player-row:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 2px oklch(from var(--color-primary) l c h / .25);outline:none}.setup-player-input:focus-visible{outline:none}.setup-remove-btn{flex-shrink:0;min-height:44px;min-width:44px;padding:0;color:var(--color-text-faint);border-radius:var(--radius-sm)}.setup-remove-btn:hover{color:var(--color-error);background:oklch(from var(--color-error) l c h / .1)}.setup-add-btn{width:100%;margin-bottom:var(--space-6)}.setup-error{font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-error);opacity:.85;margin-bottom:var(--space-4)}.setup-start-btn{width:100%;margin-top:auto;padding-top:var(--space-6)}.setup-start-btn .btn{width:100%}.setup-pack-fieldset{border:none;padding:0;margin-bottom:var(--space-6);width:100%}.setup-pack-legend{font-family:var(--font-body);font-size:var(--text-xs);font-weight:500;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-2)}.setup-pack-dropdown{position:relative;width:100%}.setup-pack-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;padding:var(--space-3) var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);cursor:pointer;transition:border-color var(--transition-interactive),box-shadow var(--transition-interactive)}.setup-pack-trigger:hover{border-color:var(--color-text-muted)}.setup-pack-trigger:focus-visible{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px oklch(from var(--color-primary) l c h / .25)}.setup-pack-dropdown--open .setup-pack-trigger{border-color:var(--color-primary);box-shadow:0 0 0 2px oklch(from var(--color-primary) l c h / .2)}.setup-pack-trigger__label{color:inherit}.setup-pack-dropdown:not(.setup-pack-dropdown--has-value) .setup-pack-trigger__label{color:var(--color-text-faint)}.setup-pack-trigger__chevron{flex-shrink:0;color:var(--color-text-muted);transition:transform var(--transition-interactive)}.setup-pack-dropdown--open .setup-pack-trigger__chevron{transform:rotate(180deg)}.setup-pack-panel{display:none;position:absolute;top:calc(100% + var(--space-1));left:0;right:0;z-index:10;list-style:none;padding:var(--space-1) 0;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);box-shadow:var(--shadow-lg),inset 0 0 0 1px oklch(from var(--color-primary) l c h / .08);max-height:280px;overflow-y:auto}.setup-pack-dropdown--open .setup-pack-panel{display:block;animation:pack-panel-in .14s cubic-bezier(.16,1,.3,1) both}@keyframes pack-panel-in{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media (prefers-reduced-motion: reduce){.setup-pack-dropdown--open .setup-pack-panel{animation:none}}.setup-pack-item__label{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);cursor:pointer;font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-text);transition:background var(--transition-interactive)}.setup-pack-item__label:hover{background:var(--color-surface-offset)}.setup-pack-item--selected .setup-pack-item__label{color:var(--color-primary-hover);background:var(--color-primary-highlight)}.setup-pack-item--selected .setup-pack-item__label:hover{background:color-mix(in oklch,var(--color-primary-highlight) 80%,var(--color-surface-offset))}.setup-pack-item__name{flex:1}.setup-pack-item__check{flex-shrink:0;color:var(--color-primary-hover)}.game-question-card{background:var(--color-surface-2);border:1px solid oklch(from var(--color-primary) l c h / .35);border-radius:var(--radius-card);padding:var(--space-8);box-shadow:var(--shadow-md),var(--shadow-glow);max-width:480px;width:100%;margin-bottom:var(--space-4)}.game-question-text{font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-text);line-height:1.3;text-align:center}.game-next-btn{position:fixed;bottom:0;left:0;right:0;padding:var(--space-4) max(var(--space-4),env(safe-area-inset-right)) max(var(--space-6),env(safe-area-inset-bottom)) max(var(--space-4),env(safe-area-inset-left));background:linear-gradient(to top,var(--color-bg) 60%,transparent)}.game-next-btn .btn{width:100%;max-width:480px;margin-inline:auto}.current-player-chip{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-body);font-size:var(--text-lg);font-weight:700;padding:var(--space-3) var(--space-8);border-radius:var(--radius-pill);background:var(--color-primary-highlight);color:var(--color-primary-hover);border:1px solid oklch(from var(--color-primary) l c h / .45);box-shadow:0 0 20px oklch(from var(--color-primary) l c h / .3);margin-bottom:var(--space-4);max-width:480px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (prefers-color-scheme: light){.current-player-chip{color:var(--color-primary-active)}}.progress-bar{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);width:100%;max-width:480px;margin-bottom:var(--space-8)}.progress-bar__track{width:100%;height:4px;border-radius:var(--radius-pill);background:var(--color-surface-offset);overflow:hidden}.progress-bar__fill{height:100%;border-radius:var(--radius-pill);background:var(--color-primary);transition:width .3s cubic-bezier(.16,1,.3,1)}@media (prefers-reduced-motion: reduce){.progress-bar__fill{transition:none}}.progress-bar__label{font-family:var(--font-body);font-size:var(--text-xs);color:var(--color-text-muted);font-variant-numeric:tabular-nums}.flip-card{height:80vh;width:100%;display:flex;align-items:center;justify-content:center;padding:2rem;box-sizing:border-box;font-size:clamp(1.25rem,3vh,2rem);text-align:center;will-change:transform}@keyframes flip-out{0%{transform:perspective(600px) rotateY(0)}to{transform:perspective(600px) rotateY(-90deg)}}@keyframes flip-in{0%{transform:perspective(600px) rotateY(90deg)}to{transform:perspective(600px) rotateY(0)}}.flip-card--out{animation:flip-out 225ms ease-in forwards}.flip-card--in{animation:flip-in 225ms ease-out forwards}.flip-card--idle{transform:perspective(600px) rotateY(0)}@media (prefers-reduced-motion: reduce){.flip-card--out,.flip-card--in{animation:none!important;transform:none!important}}.install-btn-wrapper{display:none}@media (pointer: coarse){.install-btn-wrapper{display:block;position:fixed;top:1rem;right:1rem;z-index:100}}