:root{--bg: #1a2f1f;--card: #f7f1e3;--ink: #2a1f14;--muted: #6b5a48;--primary: #e07a3d;--primary-dark: #c45f24;--secondary: #4a8b6f;--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-top: env(safe-area-inset-top, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:radial-gradient(ellipse at top,#3d6b4f,#1a2f1f 70%);font-family:Avenir Next,Segoe UI,system-ui,-apple-system,sans-serif;color:var(--ink);overscroll-behavior:none}#app{width:100%;height:100%;position:relative}.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));overflow-y:auto}.hidden{display:none!important}.lobby-card{width:min(520px,100%);background:var(--card);border-radius:28px;padding:28px 24px 32px;box-shadow:0 24px 60px #00000059,0 0 0 1px #ffffff14}.logo{text-align:center;margin-bottom:22px}.logo-emoji{font-size:48px;display:block;filter:drop-shadow(0 6px 8px rgba(0,0,0,.2))}.logo h1{margin:8px 0 4px;font-size:2rem;letter-spacing:-.02em;color:var(--ink)}.tagline{margin:0;color:var(--muted);font-size:.95rem}.panel{margin-bottom:18px}.panel label{display:block;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:8px}input[type=text]{width:100%;border:2px solid #e0d4c0;background:#fffdf8;border-radius:14px;padding:14px 16px;font-size:1.1rem;color:var(--ink);outline:none;transition:border-color .15s}input[type=text]:focus{border-color:var(--primary)}.name-row{display:flex;gap:10px;align-items:stretch}.name-row input{flex:1;min-width:0}.dice-btn{flex-shrink:0;width:56px;border:2px solid #e0d4c0;background:#fffdf8;border-radius:14px;font-size:1.5rem;cursor:pointer;transition:transform .1s,border-color .12s}.dice-btn:active{transform:rotate(-18deg) scale(.92);border-color:var(--primary)}.character-picks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.board-picks{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.board-btn{border:3px solid transparent;background:#fffdf8;border-radius:14px;padding:10px 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:56px}.board-btn.selected{border-color:var(--secondary);box-shadow:0 6px 16px #4a8b6f40}.board-emoji{font-size:1.4rem}.board-name{font-size:.72rem;font-weight:700}.board-waiting{text-align:center;font-weight:700;color:var(--secondary);margin:0 0 8px}.char-btn{border:3px solid transparent;background:#fffdf8;border-radius:18px;padding:12px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;transition:transform .12s,border-color .12s,box-shadow .12s}.char-btn.selected{border-color:var(--primary);box-shadow:0 8px 20px #e07a3d40;transform:translateY(-2px)}.char-btn:active{transform:scale(.97)}.char-preview{width:64px;height:64px;border-radius:50%;margin-bottom:4px;box-shadow:inset 0 -8px 16px #0000001f,0 4px 10px #0000001a;overflow:hidden;display:flex;align-items:center;justify-content:center}.char-preview.has-thumb{background:radial-gradient(circle at 50% 30%,#fff8ec,#efe2c8 80%);box-shadow:inset 0 -6px 12px #00000014,0 4px 10px #0000001a}.char-img{width:100%;height:100%;object-fit:contain;pointer-events:none}.cammy-preview{background:radial-gradient(circle at 35% 30%,#e0c090,#c9a06a 70%)}.foxy-preview{background:radial-gradient(circle at 35% 30%,#f09050,#e07030 55%,#1a1412)}.doggie-preview{background:radial-gradient(circle at 35% 30%,#c4a070,#8a6e55 70%)}.luna-preview{background:radial-gradient(circle at 35% 30%,#fff0f6,#f0d0e0 70%)}.cubby-preview{background:radial-gradient(circle at 35% 30%,#d4a060,#a87840 70%)}.pip-preview{background:radial-gradient(circle at 35% 30%,#f5f5f8 30%,#3a4a5a 75%)}.char-name{font-weight:700;font-size:.9rem}.char-type{font-size:.75rem;color:var(--muted)}.char-perk{font-size:.62rem;line-height:1.25;color:var(--muted);text-align:center}.lobby-actions{margin-top:8px}.btn{border:none;border-radius:16px;padding:16px 20px;font-size:1.05rem;font-weight:700;cursor:pointer;width:100%;transition:transform .1s,filter .1s}.btn:active{transform:scale(.98)}.btn.primary{background:linear-gradient(180deg,#f08a4a,var(--primary-dark));color:#fff;box-shadow:0 8px #9a4a18,0 12px 24px #9a4a1859}.btn.secondary{background:linear-gradient(180deg,#5aa384,#3d7a5f);color:#fff;box-shadow:0 6px #2a5642;width:auto;min-width:100px;padding:14px 22px}.or-row{text-align:center;margin:16px 0 12px;color:var(--muted);font-size:.85rem;position:relative}.or-row:before,.or-row:after{content:"";position:absolute;top:50%;width:28%;height:1px;background:#d9cdb8}.or-row:before{left:0}.or-row:after{right:0}.code-slot-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:12px}.code-slots{display:flex;gap:8px}.code-slot{width:60px;height:60px;border-radius:16px;border:3px dashed #d9cdb8;background:#fffdf8;display:flex;align-items:center;justify-content:center;font-size:2rem}.code-slot.filled{border-style:solid;border-color:var(--secondary);animation:slot-pop .18s ease-out}@keyframes slot-pop{0%{transform:scale(.6)}70%{transform:scale(1.12)}to{transform:scale(1)}}.code-back{width:56px;height:60px;border-radius:16px;border:2px solid #e0d4c0;background:#fffdf8;font-size:1.5rem;color:var(--muted);cursor:pointer}.code-back:active{transform:scale(.94);border-color:var(--primary)}.emoji-keypad{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}.emoji-key{min-height:58px;border-radius:14px;border:2px solid #e8dcc8;background:#fffdf8;font-size:1.7rem;cursor:pointer;transition:transform .1s,border-color .1s}.emoji-key:active{transform:scale(.9);border-color:var(--primary)}.join-row{display:flex;gap:10px;align-items:center}#room-code{text-align:center;font-size:1.4rem;font-weight:800;letter-spacing:.25em;text-transform:uppercase;flex:1}.join-row .btn.secondary{flex:1}.code-toggle{flex-shrink:0;border:none;background:none;color:var(--muted);font-size:.8rem;font-weight:700;min-height:44px;padding:0 10px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}.error{color:#b33a2e;margin:12px 0 0;text-align:center;font-weight:600}.status{color:var(--secondary);margin:12px 0 0;text-align:center}.room-code-emoji{font-size:3rem;text-align:center;letter-spacing:.1em;margin:8px 0 2px}.room-code-display{font-size:1.15rem;font-weight:800;letter-spacing:.45em;text-align:center;color:var(--muted);margin:0 0 12px;padding-left:.45em}.hint{text-align:center;color:var(--muted);margin:0 0 18px}.player-list{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}.player-chip{display:flex;align-items:center;gap:12px;background:#fffdf8;border-radius:14px;padding:12px 14px;border:2px solid #e8dcc8}.player-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0}.tiny{text-align:center;color:var(--muted);font-size:.8rem;margin:12px 0 0}#hud{position:absolute;inset:0}#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.hud-top{position:absolute;top:calc(10px + var(--safe-top));left:calc(12px + var(--safe-left));right:calc(12px + var(--safe-right));display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;z-index:5}.hud-left-stack{display:flex;flex-direction:column;gap:6px;max-width:52%}.hud-code,.hud-board,.hud-day,.hud-music{background:#141e168c;backdrop-filter:blur(10px);color:#fff;padding:6px 12px;border-radius:999px;font-weight:700;font-size:.82rem;letter-spacing:.04em;width:fit-content}.hud-music{border:none;cursor:pointer;font-size:1.05rem;padding:6px 14px;pointer-events:auto}.hud-music.muted{opacity:.45;text-decoration:line-through}.stat-bar{display:flex;flex-direction:column;gap:4px}.bar-row{display:flex;align-items:center;gap:6px}.bar-label{color:#fff;font-size:.7rem;font-weight:800;width:18px;text-shadow:0 1px 2px #000}.health-track,.energy-track{width:130px;height:11px;background:#0006;border-radius:999px;overflow:hidden;border:1px solid rgba(255,255,255,.25)}.health-fill{height:100%;width:100%;background:linear-gradient(90deg,#3dcc6e,#7dff9a);transition:width .2s}.health-fill.low{background:linear-gradient(90deg,#cc3d3d,#ff7d7d)}.energy-fill{height:100%;width:100%;background:linear-gradient(90deg,#e8a020,#ffe066);transition:width .2s}.energy-fill.low{background:linear-gradient(90deg,#860,#ca4)}.build-bar{position:absolute;bottom:calc(8px + var(--safe-bottom));left:50%;transform:translate(-50%);display:flex;gap:6px;z-index:7;background:#141e168c;backdrop-filter:blur(10px);padding:6px 8px;border-radius:999px;pointer-events:auto}.build-toggle,.build-pick{width:42px;height:42px;border-radius:50%;border:2px solid rgba(255,255,255,.25);background:#ffffff1f;font-size:1.15rem;cursor:pointer}.build-toggle.on,.build-pick.active{border-color:#7dff9a;background:#7dff9a40;box-shadow:0 0 12px #7dff9a59}.downed-banner{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);background:#500a0ad9;color:#fff;padding:14px 20px;border-radius:16px;font-weight:800;font-size:1.15rem;z-index:12;text-align:center;max-width:85%}.stat-chips{display:flex;gap:6px}.chip{background:#141e168c;color:#fff;padding:4px 10px;border-radius:999px;font-size:.8rem;font-weight:700}.minimap{position:absolute;top:calc(10px + var(--safe-top));right:calc(12px + var(--safe-right));width:176px;height:176px;z-index:6;pointer-events:none;border-radius:16px;box-shadow:0 8px 24px #00000059}.recenter-btn{position:absolute;top:calc(10px + var(--safe-top) + 176px + 10px);right:calc(12px + var(--safe-right));width:48px;height:48px;border-radius:50%;border:2px solid rgba(255,255,255,.4);background:#141e168c;backdrop-filter:blur(10px);font-size:1.25rem;cursor:pointer;z-index:6;pointer-events:auto}.recenter-btn:active{transform:scale(.92);background:#e07a3d99}.interact-hint{position:absolute;bottom:calc(200px + var(--safe-bottom));left:50%;transform:translate(-50%);background:#141e16bf;color:#fff;padding:10px 16px;border-radius:12px;font-weight:700;z-index:6;pointer-events:none}.hp-mini{opacity:.75;font-size:.75rem}.hud-players{display:flex;flex-direction:column;gap:6px;align-items:flex-end}.hud-player{background:#141e168c;backdrop-filter:blur(10px);color:#fff;padding:6px 12px;border-radius:999px;font-size:.82rem;font-weight:600;display:flex;align-items:center;gap:8px}.hud-player .dot{width:10px;height:10px;border-radius:50%}.touch-controls{position:absolute;bottom:calc(24px + var(--safe-bottom));left:calc(20px + var(--safe-left));right:calc(20px + var(--safe-right));display:flex;justify-content:space-between;align-items:flex-end;z-index:5;pointer-events:none}.joystick{width:130px;height:130px;border-radius:50%;background:#ffffff2e;border:2px solid rgba(255,255,255,.35);position:relative;pointer-events:auto;touch-action:none}.joystick.floating{z-index:8;background:#ffffff3d;border-color:#ffffff80}.joystick-knob{width:58px;height:58px;border-radius:50%;background:#ffffffd9;box-shadow:0 4px 12px #00000040;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}.action-cluster{display:flex;flex-direction:column;gap:12px;align-items:flex-end;pointer-events:auto}.action-btn{width:72px;height:72px;border-radius:50%;border:3px solid rgba(255,255,255,.5);background:#1e2d238c;color:#fff;font-size:1.6rem;font-weight:800;cursor:pointer;backdrop-filter:blur(8px);box-shadow:0 6px 16px #00000040}.action-btn:active,.action-btn.active{transform:scale(.94);background:#e07a3dbf}.action-btn.jump{width:84px;height:84px;font-size:1.8rem}.action-btn.context{width:76px;height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border-color:#ffe282bf;background:#3c301499;box-shadow:0 6px 16px #00000040,0 0 14px #ffd56a4d}#context-icon{font-size:1.9rem;line-height:1}#context-label{font-size:.58rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;opacity:.9;max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.power-bar{position:absolute;top:calc(56px + var(--safe-top));left:50%;transform:translate(-50%);display:flex;gap:8px;z-index:5;background:#141e1673;backdrop-filter:blur(10px);padding:8px;border-radius:999px}.power-pick{width:48px;height:48px;border-radius:50%;border:2px solid rgba(255,255,255,.25);background:#ffffff1f;font-size:1.3rem;cursor:pointer}.power-pick.active{border-color:#ffd56a;background:#ffd56a4d;box-shadow:0 0 16px #ffd56a73}.toast{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);background:#141e16cc;color:#fff;padding:14px 22px;border-radius:16px;font-weight:700;z-index:10;pointer-events:none;text-align:center;max-width:80%}.reconnect-overlay{position:absolute;inset:0;z-index:40;background:#080e0ad1;backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center}.reconnect-card{text-align:center;color:#fff}.reconnect-title{font-size:1.8rem;font-weight:800;text-shadow:0 2px 8px rgba(0,0,0,.5);margin-bottom:18px}.reconnect-dots{display:flex;gap:10px;justify-content:center}.reconnect-dots span{width:14px;height:14px;border-radius:50%;background:#ffd56a;animation:dot-bounce 1s ease-in-out infinite}.reconnect-dots span:nth-child(2){animation-delay:.15s}.reconnect-dots span:nth-child(3){animation-delay:.3s}@keyframes dot-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-14px)}}.coach-overlay{position:absolute;inset:0;z-index:50;background:#00000059;pointer-events:auto;cursor:pointer}.coach-ring{position:absolute;border-radius:50%;border:5px solid #ffd56a;box-shadow:0 0 24px #ffd56acc,inset 0 0 18px #ffd56a66;animation:coach-pulse 1.1s ease-in-out infinite;pointer-events:none}@keyframes coach-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:.7}}.coach-label{position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none}.coach-emoji{font-size:3.4rem;line-height:1.1;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));animation:coach-bounce .9s ease-in-out infinite}@keyframes coach-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.coach-text{font-size:1.5rem;font-weight:900;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.7)}@media(min-width:900px){.lobby-card{padding:36px 40px}}