@import "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Syne:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;700;800&display=swap";
:root{--bg:#f5f0e8;--bg-subtle:#ebe5da;--bg-overlay:#1e1b188c;--surface:#fff;--surface-hover:#f9f6f0;--surface-raised:#fff;--ink:#1a1a1a;--ink-soft:#4a4a4a;--ink-faint:#7a7a7a;--ink-disabled:#b0b0b0;--line:#1a1a1a;--line-strong:#1a1a1a;--line-primary:#f25c54;--primary:#f25c54;--primary-hover:#e04a42;--primary-ink:#fff;--primary-soft:#f25c54;--secondary:#14857a;--secondary-hover:#0f6b62;--secondary-ink:#fff;--secondary-soft:#14857a;--accent:#8b5cf6;--accent-soft:#8b5cf6;--gold:#e5a100;--gold-soft:#e5a100;--success:#2e9e5b;--success-soft:#2e9e5b;--danger:#e0463b;--danger-soft:#e0463b;--info:#2f6fe0;--info-soft:#2f6fe0;--shadow-sm:none;--shadow-md:none;--shadow-lg:none;--shadow-xl:none;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-pill:999px;--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--dur-fast:.12s;--dur:.2s;--dur-slow:.35s;--font-display:"Syne", sans-serif;--font-body:"Manrope", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", "Fira Code", "SF Mono", ui-monospace, monospace;--container:1400px;--content:1100px;--gutter:12px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:var(--font-body);background-color:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;min-height:100dvh;line-height:1.55;overflow-x:hidden}h1,h2,h3,h4,h5,.logo{font-family:var(--font-display);text-transform:uppercase;letter-spacing:-.01em;font-weight:800;line-height:1.04}button{cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;font-family:inherit}a{color:inherit;-webkit-tap-highlight-color:transparent;text-decoration:none}input{-webkit-tap-highlight-color:transparent}::selection{background:var(--primary);color:var(--primary-ink)}:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:4px}*{scrollbar-width:thin;scrollbar-color:var(--ink-faint) transparent}::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:var(--ink-faint);border-radius:999px}::-webkit-scrollbar-thumb:hover{background:var(--ink-soft)}::-webkit-scrollbar-track{background:0 0}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}.brutal-card{background:var(--surface);border:2.5px solid var(--ink);border-radius:var(--radius-lg);transition:transform var(--dur-fast) var(--ease-spring);margin-bottom:1rem;padding:1.5rem}.brutal-card:hover{transform:translateY(-1px)}.btn{border-radius:var(--radius-pill);font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;background:var(--surface);color:var(--ink);border:2.5px solid var(--ink);transition:transform var(--dur-fast) var(--ease-spring), background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;gap:8px;padding:13px 24px;font-size:.9rem;font-weight:700;line-height:1;text-decoration:none;display:inline-flex}.btn:hover:not(:disabled){transform:translateY(-2px)}.btn:active:not(:disabled){transform:translateY(0)scale(.97)}.btn:disabled{background:var(--bg-subtle);color:var(--ink-disabled);cursor:not-allowed;border-color:var(--ink-disabled);transform:none}.btn-primary:not(:disabled){background:var(--primary);color:var(--primary-ink);border-color:var(--ink)}.btn-primary:hover:not(:disabled){background:var(--primary-hover)}.btn-secondary:not(:disabled){background:var(--secondary);color:var(--secondary-ink);border-color:var(--ink)}.btn-ghost{border-color:var(--ink);background:0 0}.btn-sm{padding:8px 16px;font-size:.78rem}.input{width:100%;font-family:var(--font-body);color:var(--ink);background:var(--surface);border:2.5px solid var(--ink);border-radius:var(--radius-md);transition:border-color var(--dur) var(--ease-out);outline:none;margin-bottom:.75rem;padding:14px 18px;font-size:1rem}.input::placeholder{color:var(--ink-faint)}.input:focus{border-color:var(--primary)}.status-badge{border-radius:var(--radius-pill);background:var(--surface);border:2px solid var(--ink);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;align-items:center;gap:6px;padding:.35rem .9rem;font-size:.78rem;font-weight:700;display:inline-flex}.word-hint-container{text-align:center;background:var(--surface);border:2.5px solid var(--ink);border-radius:var(--radius-lg);text-transform:uppercase;overflow-wrap:anywhere;word-break:break-word;margin-bottom:.5rem;padding:clamp(.4rem,1.2vw,.85rem) clamp(.6rem,2vw,1.25rem);font-size:clamp(1.15rem,3.6vw,2.2rem);font-weight:800;line-height:1.2}.scoreboard-overlay{background:var(--bg-overlay);-webkit-backdrop-filter:blur(4px);z-index:1000;width:100vw;height:100vh;animation:fadeIn .2s var(--ease-out);justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.scoreboard{animation:scaleIn .35s var(--ease-spring);max-height:92dvh;overflow-y:auto}.spinner{border:3px solid var(--ink);border-top-color:var(--primary);border-radius:50%;width:22px;height:22px;animation:.7s linear infinite spin}.spinner-inline{border:2px solid #fff6;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.7s linear infinite spin}.reconnect-dot{background:var(--danger);border-radius:50%;width:9px;height:9px;animation:1.1s ease-in-out infinite pulse}.landing{background:var(--bg);justify-content:center;align-items:center;min-height:100dvh;padding:1.5rem;display:flex;position:relative;overflow:hidden}.landing-bg{z-index:-1;background:var(--bg);position:fixed;inset:0}.landing-card{width:100%;max-width:480px;animation:scaleIn .4s var(--ease-spring);flex-direction:column;align-items:center;display:flex}.landing-logo{border-radius:var(--radius-xl);background:var(--ink);color:var(--bg);text-align:center;border:3px solid var(--ink);letter-spacing:-.02em;justify-content:center;align-items:center;max-width:100%;margin-bottom:1rem;padding:clamp(.6rem,2.5vw,1rem) clamp(1rem,4vw,2rem);font-size:clamp(2rem,8vw,3.4rem);line-height:1;display:flex}.landing-sub{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.18em;color:var(--ink-soft);text-align:center;margin-bottom:1.5rem;font-size:.8rem;font-weight:700}@media (max-width:640px){.landing{padding:1rem}.landing-logo{margin-inline:auto}}.messages-list{border:2px solid var(--ink);border-radius:var(--radius-md);background:var(--surface);flex:1;padding:1rem;overflow-y:auto}.message{border-bottom:1px solid var(--line);padding:.5rem 0;font-size:.9rem}.message.system{color:var(--ink-soft);font-size:.82rem;font-style:italic}.player-list-item{border:2px solid var(--ink);border-radius:var(--radius-md);background:var(--surface);justify-content:space-between;margin-bottom:.5rem;padding:.75rem;display:flex}.player-score{background:var(--gold);color:var(--ink);border-radius:var(--radius-pill);padding:2px 10px;font-weight:800}.logo-container{background:var(--ink);color:var(--bg);border-radius:var(--radius-lg);border:3px solid var(--ink);margin-bottom:2rem;padding:1rem 2rem;display:inline-block}.canvas-container{border-radius:var(--radius-xl);border:2.5px solid var(--ink);background:#fff;width:100%;height:100%;position:relative;overflow:hidden}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.92)translateY(8px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}@keyframes pop-in{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.app-container{width:100%;max-width:var(--container);padding:var(--gutter);flex-direction:column;margin:0 auto;display:flex}.game-layout{gap:var(--gutter);flex:1;grid-template-columns:280px minmax(0,1fr) 320px;min-height:0;display:grid}.game-shell{height:100dvh;max-height:100dvh;padding-top:max(var(--gutter), env(safe-area-inset-top));padding-bottom:max(var(--gutter), env(safe-area-inset-bottom));padding-left:max(var(--gutter), env(safe-area-inset-left));padding-right:max(var(--gutter), env(safe-area-inset-right));overflow:hidden}.game-sidebar-left,.game-sidebar-right,.game-main{min-height:0}.chat-section,.player-list{height:100%;min-height:0}.chat-messages{-webkit-overflow-scrolling:touch;min-height:0;overflow-y:auto}@media (max-width:1100px){.game-layout{grid-template-columns:240px 1fr}.game-sidebar-right{grid-area:2/span 2}}@media (max-width:768px){:root{--gutter:6px}.game-shell{height:100svh;max-height:100dvh;padding:max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));overflow:hidden}.game-layout{flex-direction:column;flex:1;gap:6px;min-height:0;display:flex;overflow:hidden}.game-main{flex-direction:column;flex:auto;order:1;display:flex;min-height:0!important;padding:6px!important}.game-sidebar-right{flex-shrink:0;order:2;height:clamp(120px,25dvh,200px);min-height:110px}.game-sidebar-left.desktop-only{display:none!important}.chat-section{height:100%;min-height:0}.brutal-card{border-radius:var(--radius-md);margin-bottom:.5rem;padding:.75rem}.input,input[type=text],input[type=password],input[type=number]{font-size:16px!important}}@media (max-width:480px){.app-container{padding:4px}.brutal-card{border-radius:var(--radius-sm);padding:.65rem}.game-sidebar-right{height:clamp(110px,23dvh,180px);min-height:100px}}.mobile-drawer-overlay{background:var(--bg-overlay);-webkit-backdrop-filter:blur(4px);z-index:999;animation:fadeIn .2s var(--ease-out);justify-content:center;align-items:flex-end;padding:0;display:flex;position:fixed;inset:0}.mobile-drawer-content{background:var(--surface);border:3px solid var(--ink);border-radius:var(--radius-xl) var(--radius-xl) 0 0;width:100%;max-width:540px;max-height:80dvh;animation:slideUp .3s var(--ease-spring);padding-bottom:max(1rem, env(safe-area-inset-bottom));border-bottom:none;flex-direction:column;display:flex;overflow:hidden}.status-bar{margin-bottom:var(--gutter);background:var(--surface);border:2.5px solid var(--ink);border-radius:var(--radius-lg);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:10px 16px;display:flex}@media (max-width:640px){.status-bar{border-radius:var(--radius-md);gap:6px;padding:8px 10px}.status-bar .status-badge{padding:4px 8px;font-size:.7rem}}.admin-controls .range-slider{appearance:none;background:var(--ink);width:100%;height:8px;transition:background var(--dur) var(--ease-out);border-radius:4px;outline:none}.admin-controls .range-slider::-webkit-slider-thumb{appearance:none;background:var(--primary);cursor:pointer;border:3px solid var(--ink);width:24px;height:24px;transition:transform var(--dur-fast) var(--ease-spring);border-radius:50%}.admin-controls .range-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.admin-controls .range-slider::-moz-range-thumb{background:var(--primary);cursor:pointer;border:3px solid var(--ink);border-radius:50%;width:24px;height:24px}.progress-track{background:var(--ink);border-radius:4px;height:8px;overflow:hidden}.progress-fill{background:var(--primary);height:100%;transition:width .5s var(--ease-out);border-radius:4px}.admin-shell{flex-direction:column;height:100dvh;max-height:100dvh;display:flex;overflow:hidden}@media (max-width:768px){.admin-shell{-webkit-overflow-scrolling:touch;min-height:100dvh;height:auto!important;max-height:none!important;overflow-y:auto!important}.admin-shell .game-layout{flex-direction:column;min-height:auto;display:flex;overflow:visible!important}.admin-shell .game-main{flex:none;height:400px;min-height:380px!important}.admin-shell .game-sidebar-right{min-height:240px;height:280px!important}}.lobby-root{background:var(--bg);-webkit-overflow-scrolling:touch;flex-direction:column;justify-content:flex-start;align-items:center;padding:clamp(.5rem,2vw,1.25rem);display:flex;position:absolute;inset:0;overflow-y:auto}.lobby-card{background:var(--surface);border-radius:var(--radius-xl);border:2.5px solid var(--ink);animation:scaleIn .35s var(--ease-spring);width:100%;max-width:520px;margin-block:auto}