.lobby-page,.online-lobby-page{width:100%;height:100vh;height:100dvh;display:flex;align-items:center;justify-content:center;background:var(--color-bg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;padding-left:var(--safe-left);padding-right:var(--safe-right)}.lobby-container{display:flex;flex-direction:column;align-items:center;gap:var(--space-6);width:100%;max-width:420px;padding:var(--space-8) var(--space-8);padding-top:calc(var(--safe-top) + var(--space-8));padding-bottom:calc(var(--safe-bottom) + var(--space-8));max-height:100%;overflow-y:auto}.lobby-title{font-size:var(--font-size-2xl);font-weight:700;color:var(--color-brand);letter-spacing:1px;margin:0;text-align:center}.lobby-subtitle{font-size:var(--font-size-sm);color:var(--color-text-muted);margin:-12px 0 8px;text-align:center}.mode-selector{display:flex;gap:var(--space-3);width:100%}.mode-card{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);padding:var(--space-4) var(--space-2);background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;transition:all .15s;color:#ccc;font-family:inherit;min-height:76px}.mode-card:hover{border-color:#555;background:var(--color-surface-hover)}.mode-card-label{font-size:var(--font-size-md);font-weight:600}.mode-card-desc{font-size:var(--font-size-xs);color:var(--color-text-muted);text-align:center}.mode-card-wide{width:100%;flex-direction:row;justify-content:space-between;min-height:unset;padding:var(--space-4) var(--space-5);margin-top:calc(var(--space-3) - var(--space-6))}@media (max-width: 480px){.mode-selector{flex-direction:column;gap:var(--space-2)}.mode-card{flex-direction:row;justify-content:space-between;min-height:unset;padding:var(--space-4) var(--space-5)}.mode-card-label{text-align:left}.mode-card-desc{text-align:right}}.lobby-difficulty-picker{width:100%;display:flex;flex-direction:column;gap:var(--space-2)}.lobby-difficulty-header{display:flex;justify-content:space-between;align-items:center}.lobby-difficulty-label{font-size:var(--font-size-sm);color:var(--color-text-muted);font-weight:500}.lobby-difficulty-value{font-size:var(--font-size-sm);color:var(--color-brand);font-weight:600}.lobby-difficulty-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;background:var(--color-border);border-radius:3px;outline:none;cursor:pointer}.lobby-difficulty-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;background:var(--color-brand);border-radius:50%;border:2px solid #000;cursor:pointer;transition:transform .1s}.lobby-difficulty-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.lobby-difficulty-slider::-moz-range-thumb{width:20px;height:20px;background:var(--color-brand);border-radius:50%;border:2px solid #000;cursor:pointer}.lobby-difficulty-ticks{display:flex;justify-content:space-between;align-items:center;gap:var(--space-1)}.lobby-difficulty-tick{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;padding:var(--space-1) 2px;background:transparent;border:none;font-family:inherit;font-size:var(--font-size-xs);color:var(--color-text-dim);cursor:pointer;transition:color .15s;-webkit-user-select:none;user-select:none;min-height:32px}.lobby-difficulty-tick:hover{color:var(--color-text-muted)}.lobby-difficulty-tick.active{color:var(--color-brand);font-weight:600}.lobby-difficulty-tick-dot{display:none;width:6px;height:6px;border-radius:50%;background:currentColor}@media (max-width: 420px){.lobby-difficulty-tick:not(:first-child):not(:last-child) .lobby-difficulty-tick-label{display:none}.lobby-difficulty-tick:not(:first-child):not(:last-child) .lobby-difficulty-tick-dot{display:block}}.lobby-starter-picker{width:100%;display:flex;flex-direction:column;gap:var(--space-2)}.lobby-starter-options{display:flex;gap:var(--space-2);width:100%}.lobby-starter-option{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;padding:var(--space-3) var(--space-2);background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-muted);font-family:inherit;font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all .15s;min-height:44px}.lobby-starter-option:hover{border-color:#555;background:var(--color-surface-hover)}.lobby-starter-option.active{border-color:var(--color-brand);color:var(--color-brand);font-weight:600;background:#1a1800}.player-name-input{width:100%;display:flex;flex-direction:column;gap:var(--space-2)}.player-name-label{font-size:var(--font-size-sm);color:var(--color-text-muted);font-weight:500}.player-name-field{padding:10px 14px;font-size:16px;background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);color:var(--color-text);outline:none;transition:border-color .15s}.player-name-field:focus{border-color:var(--color-brand)}.player-name-field::placeholder{color:#555}.lobby-start-btn{width:100%;padding:var(--space-4);font-size:var(--font-size-lg);font-weight:600;background:var(--color-brand);color:#000;border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all .15s;margin-top:var(--space-2)}.lobby-start-btn:hover{background:var(--color-brand-hover);transform:translateY(-1px)}.lobby-start-btn:active{transform:translateY(0)}.online-lobby-container{display:flex;flex-direction:column;align-items:center;gap:var(--space-5);width:100%;max-width:380px;padding:var(--space-8);padding-top:calc(var(--safe-top) + var(--space-8));padding-bottom:calc(var(--safe-bottom) + var(--space-8));max-height:100%;overflow-y:auto}.online-lobby-title{font-size:var(--font-size-xl);font-weight:600;color:var(--color-text);margin:0}.online-lobby-divider{width:100%;text-align:center;color:var(--color-text-dim);font-size:var(--font-size-sm);position:relative}.online-lobby-divider:before,.online-lobby-divider:after{content:"";position:absolute;top:50%;width:40%;height:1px;background:var(--color-border)}.online-lobby-divider:before{left:0}.online-lobby-divider:after{right:0}.room-creator{width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}.room-code-display{-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:clamp(1.75rem,1.4rem + 3vw,2.25rem);font-weight:700;letter-spacing:8px;color:var(--color-brand);padding:var(--space-4) var(--space-6);background:#1a1800;border:2px solid #f9d71c33;border-radius:var(--radius-xl);cursor:pointer;transition:all .15s;-webkit-user-select:all;user-select:all;font-family:inherit}.room-code-display:hover{background:#2a2800}.room-code-hint{font-size:var(--font-size-xs);color:var(--color-text-dim)}.room-share-btn{padding:var(--space-3) var(--space-6);font-size:var(--font-size-md);font-weight:600;background:var(--color-brand);color:#000;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all .15s}.room-share-btn:hover{background:var(--color-brand-hover);transform:translateY(-1px)}.room-share-btn:active{transform:translateY(0)}.room-waiting{font-size:var(--font-size-sm);color:var(--color-text-muted)}.room-waiting-dots:after{content:"";animation:dots 1.5s steps(3,end) infinite}@keyframes dots{0%{content:""}33%{content:"."}66%{content:".."}to{content:"..."}}.online-lobby-create-btn{width:100%;padding:var(--space-3);font-size:var(--font-size-lg);font-weight:600;background:var(--color-brand);color:#000;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all .15s}.online-lobby-create-btn:hover{background:var(--color-brand-hover)}.online-lobby-back-btn,.home-settings-btn{padding:var(--space-2) var(--space-5);font-size:var(--font-size-sm);background:transparent;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);color:var(--color-text-muted);cursor:pointer;transition:all .15s;font-family:inherit}.online-lobby-back-btn:hover,.home-settings-btn:hover{border-color:#666;color:#fff}.online-lobby-error{color:var(--color-danger);font-size:var(--font-size-sm);text-align:center}.online-lobby-status{color:var(--color-text-muted);font-size:var(--font-size-md);text-align:center}.mode-card{font-family:inherit}.settings-title{font-size:clamp(1.5rem,1.3rem + 1vw,1.75rem);font-weight:700;color:var(--color-brand);margin:0}.room-browser{width:100%;display:flex;flex-direction:column;gap:var(--space-2)}.room-browser-empty{color:var(--color-text-dim);font-size:var(--font-size-sm);text-align:center;padding:var(--space-3)}.room-browser-item{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all .15s;font-family:inherit;color:inherit;width:100%}.room-browser-item:hover{border-color:var(--color-brand);background:#1a1800}.room-browser-code{font-size:var(--font-size-md);font-weight:700;letter-spacing:3px;color:var(--color-brand)}.room-browser-creator{font-size:var(--font-size-sm);color:var(--color-text-muted)}.room-browser-refresh{align-self:center;padding:6px var(--space-4);font-size:var(--font-size-xs);background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-dim);cursor:pointer;transition:all .15s;font-family:inherit}.room-browser-refresh:hover{border-color:#555;color:#aaa}:root{--color-brand: #f9d71c;--color-brand-hover: #ffe44d;--color-bg: #000000;--color-surface: #1a1a1a;--color-surface-hover: #242424;--color-border: #333333;--color-border-strong: #4a4a4a;--color-text: #ffffff;--color-text-muted: #9aa0a6;--color-text-dim: #6f7479;--color-danger: #ff6b6b;--color-focus: var(--color-brand);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-7: 32px;--space-8: 40px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 10px;--radius-xl: 12px;--font-size-xs: clamp(.75rem, .72rem + .15vw, .8125rem);--font-size-sm: clamp(.8125rem, .78rem + .2vw, .875rem);--font-size-md: clamp(.9375rem, .9rem + .2vw, 1rem);--font-size-lg: clamp(1rem, .95rem + .3vw, 1.125rem);--font-size-xl: clamp(1.25rem, 1.1rem + .9vw, 1.5rem);--font-size-2xl: clamp(1.75rem, 1.35rem + 2.4vw, 2.625rem);--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px)}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--color-bg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}#root{width:100%;height:100vh;height:100dvh}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;border-radius:var(--radius-sm)}body>canvas{background:transparent!important;position:fixed!important;z-index:3000!important;pointer-events:none!important}@keyframes screen-fade-in{0%{opacity:0}to{opacity:1}}.screen-enter{animation:screen-fade-in .25s ease-out}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.App{user-select:none;-webkit-user-select:none}.back-to-lobby-btn{position:fixed;top:calc(var(--safe-top) + 20px);left:calc(var(--safe-left) + 20px);z-index:1000;padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm);font-weight:500;background:#1e1e1ed9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);color:#aaa;cursor:pointer;transition:all .15s;-webkit-user-select:none;user-select:none}@media (prefers-reduced-motion: reduce){.back-to-lobby-btn{transition:none}}.back-to-lobby-btn:hover{border-color:#888;color:#fff;background:#323232e6}.stack-spread{position:fixed;right:calc(var(--safe-right) + 14px);top:50%;transform:translateY(-50%);z-index:1000;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-2);background:#1e1e1ed9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);-webkit-user-select:none;user-select:none}.stack-spread-end{display:flex;align-items:center;justify-content:center;width:26px;height:24px;padding:0;font-size:11px;line-height:1;color:#ddd;background:transparent;border:0;border-radius:var(--radius-sm, 4px);cursor:pointer;transition:color .12s ease,background-color .12s ease}.stack-spread-end:hover:not(:disabled){color:gold;background:#ffffff14}.stack-spread-end:disabled{color:#666;cursor:default}.stack-spread-end:focus-visible{outline:2px solid #ffd700;outline-offset:2px}.stack-spread-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.stack-spread-slider{width:132px;height:22px;margin:55px -55px;transform:rotate(-90deg);accent-color:#ffd700;cursor:pointer;touch-action:none}.stack-spread-slider:focus-visible{outline:2px solid #ffd700;outline-offset:4px}@media (max-width: 480px){.stack-spread-slider{width:104px;margin:41px -41px}}.loading-screen{display:flex;justify-content:center;align-items:center;height:100vh;height:100dvh;color:#fff}.overlay-banner{position:absolute;left:50%;transform:translate(-50%);background:#ffffffe6;border-radius:var(--radius-md);box-shadow:0 2px 4px #0003;font-family:Arial,sans-serif;color:#333;-webkit-user-select:none;user-select:none;pointer-events:none}.turn-indicator{top:calc(var(--safe-top) + 20px);padding:10px 20px;font-size:18px;font-weight:700;z-index:1000;text-transform:capitalize;min-width:180px;border-bottom:3px solid var(--turn-color, var(--color-brand))}.turn-indicator-progress-track{margin-top:6px;height:4px;border-radius:2px;background:#ffffff26;overflow:hidden}.turn-indicator-progress-fill{height:100%;background:#06d6a0;border-radius:2px;transition:width .1s linear}.winning-overlay-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#00000080;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:2000}.winning-announcement{top:calc(var(--safe-top) + 20px);padding:15px 30px;font-size:24px;font-weight:700;z-index:3000;text-transform:capitalize;border-bottom:4px solid var(--winner-color, var(--color-brand))}.winning-actions{position:fixed;bottom:calc(var(--safe-bottom) + 40px);left:50%;transform:translate(-50%);display:flex;gap:12px;z-index:3000}.winning-btn{padding:12px 30px;border-radius:var(--radius-md);box-shadow:0 4px 8px #0000004d;font-family:Arial,sans-serif;font-size:16px;font-weight:700;color:#fff;text-transform:uppercase;-webkit-user-select:none;user-select:none;cursor:pointer;border:none;transition:all .2s ease}.winning-btn:disabled{cursor:default;opacity:.7}.winning-btn-primary{background-color:#4caf50}.winning-btn-primary:hover:not(:disabled),.winning-btn-primary:focus-visible:not(:disabled){background-color:#45a049;transform:translateY(-2px)}.winning-btn-secondary{background-color:#555;font-size:14px;padding:12px 20px}.winning-btn-secondary:hover,.winning-btn-secondary:focus-visible{background-color:#666;transform:translateY(-2px)}