:root{--bg-deep: #0a0a1a;--amber: #F4A261;--blue: #4CC9F0;--violet: #7B2D8B;--forest: #2D6A4F;--trunk: #8B5E3C;--glass-bg: rgba(10, 10, 26, .72);--glass-border: rgba(76, 201, 240, .35);--text: #f3f3f5;--text-dim: #b8b8c8;--shadow: 0 10px 30px rgba(0, 0, 0, .45);--radius: 14px;--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:var(--bg-deep);color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;touch-action:none}#fox-canvas{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none}.hidden{display:none!important}.loading-screen{position:fixed;inset:0;background:radial-gradient(circle at 50% 50%,#1a1a2e 0%,var(--bg-deep) 100%);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;z-index:1000;transition:opacity .6s ease}.loading-screen.fade-out{opacity:0;pointer-events:none}.loading-fox{font-size:4rem;animation:bob 1.4s ease-in-out infinite}.loading-text{font-size:1.05rem;color:var(--text-dim);letter-spacing:.04em}.loading-bar{width:220px;height:6px;background:#ffffff14;border-radius:3px;overflow:hidden}.loading-bar-fill{width:0%;height:100%;background:linear-gradient(90deg,var(--amber),var(--blue));transition:width .25s ease}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.onboarding{position:fixed;top:22%;left:50%;transform:translate(-50%);font-size:1.6rem;color:var(--text);text-shadow:0 2px 18px rgba(0,0,0,.7);pointer-events:none;z-index:50;text-align:center;max-width:90vw}.controls-hint{position:fixed;bottom:1.2rem;left:50%;transform:translate(-50%);display:flex;flex-wrap:wrap;gap:1rem;padding:.6rem 1.1rem;background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:var(--radius);font-size:.85rem;color:var(--text-dim);z-index:30;transition:opacity .6s ease}.controls-hint kbd{background:#ffffff14;border:1px solid rgba(255,255,255,.15);padding:2px 6px;border-radius:4px;font-family:inherit;color:var(--text)}.minimap{position:fixed;top:1rem;right:1rem;width:180px;height:180px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:50%;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--shadow);z-index:25;overflow:hidden}.minimap svg{width:100%;height:100%;display:block}.hud{position:fixed;bottom:1rem;left:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:25;pointer-events:none;max-width:320px}.hud-biome{padding:.5rem .9rem;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-weight:600;font-size:.95rem;color:var(--amber)}.hud-skills{display:flex;flex-wrap:wrap;gap:.3rem}.hud-skill{padding:.2rem .55rem;background:#4cc9f026;border:1px solid var(--blue);border-radius:999px;font-size:.78rem;color:var(--blue);animation:skillPop .45s ease}@keyframes skillPop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15);opacity:1}to{transform:scale(1)}}.progress{position:fixed;top:1rem;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:.3rem;z-index:25;padding:.4rem .9rem;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:.8rem;color:var(--text-dim)}.progress-bar{width:160px;height:4px;background:#ffffff14;border-radius:2px;overflow:hidden}.progress-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--amber),var(--blue));transition:width .6s ease}.settings{position:fixed;top:1rem;left:1rem;z-index:30}.settings-toggle{width:42px;height:42px;border-radius:50%;background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text);font-size:1.1rem;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.settings-toggle:hover{background:#4cc9f02e}.settings-panel{margin-top:.5rem;padding:.8rem;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:.5rem;font-size:.85rem;min-width:160px}.settings-panel select{background:#0006;color:var(--text);border:1px solid var(--glass-border);padding:2px;border-radius:6px}.info-card{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(560px,92vw);max-height:80vh;overflow-y:auto;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius);padding:1.5rem 1.7rem;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow);z-index:100}.info-card h2{margin:0 0 .4rem;color:var(--amber)}.info-card h3{margin:1rem 0 .4rem;color:var(--blue);font-size:1rem}.info-card p,.info-card li{font-size:.92rem;line-height:1.55;color:var(--text)}.info-card a{color:var(--blue);text-decoration:none;border-bottom:1px dashed var(--blue)}.info-card a:hover{color:var(--amber);border-color:var(--amber)}.info-card-close{position:absolute;top:.6rem;right:.6rem;background:transparent;border:none;color:var(--text-dim);font-size:1.1rem;cursor:pointer;width:32px;height:32px;border-radius:50%}.info-card-close:hover{background:#ffffff0f;color:var(--text)}.info-card .meta{color:var(--text-dim);font-size:.82rem;margin-bottom:.8rem}.scoreboard{position:fixed;top:5rem;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:1rem;padding:.6rem 1.4rem;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow);font-weight:700;font-size:1.05rem;z-index:28}.scoreboard .team.home{color:var(--amber)}.scoreboard .team.away{color:var(--blue)}.scoreboard #handball-score{font-size:1.4rem;color:var(--text);padding:0 .5rem}.toast{position:fixed;bottom:2rem;left:50%;transform:translate(-50%);padding:.8rem 1.4rem;background:var(--glass-bg);border:1px solid var(--amber);border-radius:var(--radius);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--amber);font-weight:600;z-index:200;animation:toastIn .4s ease}@keyframes toastIn{0%{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%)}}.npc-toast{position:fixed;bottom:7rem;left:50%;transform:translate(-50%);min-width:320px;max-width:min(560px,86vw);padding:.9rem 2.4rem .9rem 1rem;display:flex;align-items:center;gap:.85rem;background:linear-gradient(180deg,#fff8e1,#fdebc3);border:3px solid #4a3520;border-radius:22px;color:#2b1f12;font-family:var(--font-ui);box-shadow:0 12px 30px #00000059,inset 0 -3px #0000000d;z-index:220;pointer-events:auto}.npc-toast-avatar{flex:0 0 auto;width:52px;height:52px;display:grid;place-items:center;font-size:2rem;background:#ffd97a;border:3px solid #4a3520;border-radius:50%;box-shadow:inset 0 -3px #0000001a;animation:npcBob 1.6s ease-in-out infinite}.npc-toast-body{flex:1 1 auto;min-width:0}@keyframes npcBob{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.npc-toast:after{content:"";position:absolute;bottom:-14px;left:50%;transform:translate(-50%);width:22px;height:22px;background:#fdebc3;border-right:3px solid #4a3520;border-bottom:3px solid #4a3520;rotate:45deg}.npc-toast-name{font-weight:800;font-size:.95rem;letter-spacing:.02em;color:#c8722f;margin-bottom:.25rem}.npc-toast-text{font-size:1rem;line-height:1.4}.npc-toast-close{position:absolute;top:.35rem;right:.5rem;background:transparent;border:0;font-size:1.4rem;line-height:1;color:#4a3520;cursor:pointer;padding:.2rem .5rem;border-radius:8px}.npc-toast-close:hover{background:#4a35201f}.joystick{position:fixed;bottom:2rem;left:2rem;width:110px;height:110px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:50%;z-index:30;touch-action:none}.joystick-knob{position:absolute;top:50%;left:50%;width:46px;height:46px;transform:translate(-50%,-50%);background:var(--amber);border-radius:50%;pointer-events:none}.mobile-interact{position:fixed;bottom:2rem;right:2rem;width:64px;height:64px;background:var(--amber);border:none;border-radius:50%;color:var(--bg-deep);font-weight:800;font-size:1.2rem;z-index:30;box-shadow:var(--shadow)}@media (max-width: 768px){.joystick,.mobile-interact{display:block}.controls-hint{display:none}.minimap{width:110px;height:110px}.hud{max-width:60vw}.info-card{padding:1.1rem 1.2rem}}@media (max-width: 380px){.progress{font-size:.7rem}.progress-bar{width:110px}}.demo-banner{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;gap:.6rem;padding:.45rem .9rem;background:linear-gradient(90deg,#f4a261,#e8873a);color:#1a1a1a;font-size:.85rem;font-weight:600;letter-spacing:.01em;box-shadow:0 2px 8px #00000040;pointer-events:auto}.demo-banner.hidden{display:none}.demo-banner-tag{background:#1a1a1a;color:#f4a261;padding:.15rem .5rem;border-radius:999px;font-size:.7rem;letter-spacing:.08em}.demo-banner-text{flex:1}.demo-banner-close{background:transparent;border:1px solid rgba(0,0,0,.35);color:inherit;width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:.85rem;line-height:1;display:grid;place-items:center}.demo-banner-close:hover{background:#0000001a}@media (max-width: 600px){.demo-banner{font-size:.72rem;padding:.4rem .6rem}.demo-banner-text{font-size:.72rem}}.speech-bubble-layer{position:fixed;inset:0;pointer-events:none;z-index:30;overflow:hidden}.speech-bubble{position:absolute;top:0;left:0;min-width:120px;max-width:240px;padding:8px 12px 10px;background:#fffffff7;color:#1a1f2e;border-radius:14px;box-shadow:0 6px 18px #00000047,0 1px #fff9 inset;font-family:var(--font-ui);font-size:.86rem;line-height:1.32;pointer-events:none;will-change:transform,opacity;transition:opacity .15s ease-out}.speech-bubble.hidden{display:none}.speech-bubble-name{font-weight:700;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:#4cc9f0;margin-bottom:2px}.speech-bubble-text{color:#1a1f2e}.speech-bubble-tail{position:absolute;left:50%;bottom:-7px;transform:translate(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid rgba(255,255,255,.97);filter:drop-shadow(0 2px 1px rgba(0,0,0,.15))}@media (max-width: 600px){.speech-bubble{max-width:180px;font-size:.78rem;padding:6px 10px 8px}}