@import "https://fonts.googleapis.com/css2?family=Bungee:wght@400&family=Nunito:wght@400;600;700;800&display=swap";:root{--text-main:#f7f3ea;--text-muted:#d4d0c6;--accent:#ffcf5a;--accent-soft:#ffd986;--border:#ffffff38;--border-soft:#ffffff2b;--shadow:0 18px 36px #00000038}*{box-sizing:border-box}body{color:var(--text-main);background:radial-gradient(60% 80% at 0 0,#e04a2d8c,#0000),radial-gradient(80% 80% at 100% 0,#4358d973,#0000),linear-gradient(145deg,#1e2832 0%,#2f1f2a 50%,#13252c 100%);min-height:100vh;margin:0;font-family:Nunito,Trebuchet MS,sans-serif}#root{width:min(1220px,100%);min-height:100vh;margin:0 auto;padding:22px}h1,h2,h3{letter-spacing:.03em;margin:0;font-family:Bungee,Impact,sans-serif}.app-shell{flex-direction:column;gap:20px;display:flex}.top-bar{text-align:center;animation:.4s ease-out fade-in}.top-bar h1{letter-spacing:.04em;margin:0;font-size:clamp(2.2rem,4vw,3.4rem)}.top-bar p{color:var(--text-muted);margin-top:6px}.lobby-card,.card,.board-panel{border:1px solid var(--border);box-shadow:var(--shadow);background:linear-gradient(#ffffff14,#ffffff08);border-radius:18px}.lobby-card{text-align:center;max-width:700px;margin:0 auto;padding:24px}.lobby-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}input,button{font:inherit}input{border:1px solid var(--border-soft);color:var(--text-main);background:#ffffff14;border-radius:12px;padding:10px 12px}.lobby-actions{justify-content:center;gap:10px;margin-top:16px;display:flex}.cta,.alt{cursor:pointer;border:none;border-radius:12px;padding:10px 14px;font-weight:700}.cta{background:var(--accent);color:#101217}.cta:disabled{opacity:.6;cursor:not-allowed}.alt{color:var(--text-main);border:1px solid var(--border-soft);background:#ffffff1a}.error-text{color:#ffc2ad;margin-top:10px}.game-layout{grid-template-columns:2.1fr 1fr;gap:16px;display:grid}.board-panel{padding:14px}.board-header{justify-content:space-between;align-items:center;gap:10px;display:flex}.room-code{color:var(--accent);margin:0;font-weight:800}.timer-pill{border:1px solid var(--border-soft);background:#00000040;border-radius:999px;padding:8px 12px;font-weight:700}.word-strip{border:1px solid var(--border-soft);background:#0003;border-radius:12px;justify-content:space-between;margin:12px 0;padding:10px 12px;display:flex}.game-canvas{touch-action:none;border:1px solid var(--border-soft);cursor:not-allowed;border-radius:14px;width:100%}.game-canvas.live{cursor:crosshair}.game-canvas.live.tool-pencil{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg transform='rotate(35 14 14)'%3E%3Crect x='12' y='4' width='4' height='14' rx='1' fill='%23f8f9ff'/%3E%3Cpolygon points='12,18 16,18 14,24' fill='%23ffcf5a'/%3E%3Crect x='12' y='2' width='4' height='2' fill='%23ff8f70'/%3E%3C/g%3E%3C/svg%3E") 24 24,crosshair}.game-canvas.live.tool-eraser{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='5' y='5' width='14' height='14' rx='1' fill='%23ffffff' stroke='%234a4a4a' stroke-width='1.5'/%3E%3C/svg%3E") 12 12,crosshair}.board-actions{flex-wrap:wrap;gap:10px;margin-top:12px;display:flex}.tool-actions{gap:8px;display:inline-flex}.tool-button{min-width:84px}.tool-button.active-tool{border-color:var(--accent);box-shadow:inset 0 0 0 1px #ffcf5a59}.helper-text{color:var(--text-muted);margin:10px 0 0;font-size:.95rem}.side-panel{gap:12px;display:grid}.card{padding:14px}.card h3{margin-top:0}.player-list,.leaderboard{gap:6px;margin:0;padding:0;list-style:none;display:grid}.player-list li,.leaderboard li{border:1px solid var(--border-soft);background:#00000029;border-radius:10px;justify-content:space-between;padding:8px 10px;display:flex}.player-label{align-items:center;gap:8px;display:flex}.player-badges{gap:6px;display:inline-flex}.role-badge{letter-spacing:.03em;text-transform:uppercase;border:1px solid #0000;border-radius:999px;padding:2px 7px;font-size:.72rem}.role-badge.you{color:#101217;background:var(--accent)}.role-badge.drawer{color:#ffe7b0;background:#ffa63538;border-color:#ffa6358c}.role-badge.guesser{color:#d9e4ff;background:#5f88ff33;border-color:#5f88ff80}.chat-log{border:1px solid var(--border-soft);background:#0000002e;border-radius:10px;height:220px;padding:8px;overflow-y:auto}.chat-log p{margin:6px 0}.chat-log .system,.system{color:var(--accent-soft)}.chat-form{grid-template-columns:1fr auto;gap:8px;margin-top:8px;display:grid}.credits-fab{color:#14161f;z-index:40;background:linear-gradient(160deg,#ffcf5a,#ffa24b);border:1px solid #ffffff59;border-radius:999px;width:52px;height:52px;font-size:1.4rem;font-weight:900;position:fixed;bottom:18px;right:18px;box-shadow:0 12px 26px #00000059}.credits-overlay{z-index:50;background:#07090e9e;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.credits-modal{border:1px solid var(--border);text-align:center;background:linear-gradient(#222836f2,#151923f2);border-radius:16px;width:min(420px,100%);padding:18px;box-shadow:0 18px 36px #0006}.credits-modal h3{margin-bottom:8px}.credits-modal p{color:var(--text-muted);margin:0 0 14px;line-height:1.45}@keyframes fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@media (width<=1024px){.lobby-grid,.game-layout{grid-template-columns:1fr}.board-header,.word-strip{flex-direction:column;align-items:flex-start}}