:root{--primary-gold: #f4c430;--gold-glow: rgba(244, 196, 48, .4);--hp-red: #e63946;--sp-blue: #3a86ff;--exp-yellow: #ffbe0b;--bg-dark: #0f141c;--panel-bg: rgba(18, 24, 34, .88);--panel-border: #2d3848;--text-main: #f1faee;--text-muted: #94a3b8;--font-retro: "Press Start 2P", monospace;--font-body: "JetBrains Mono", monospace;--font-title: "Cinzel", serif}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}html,body{width:100vw;height:100dvh;overflow:hidden;background-color:var(--bg-dark);color:var(--text-main);font-family:var(--font-body);position:fixed;touch-action:none}#game-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}#game-canvas{width:100%;height:100%;display:block}#combat-text-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:20;overflow:hidden}.floating-text{position:absolute;font-family:var(--font-retro);font-size:13px;font-weight:700;text-shadow:2px 2px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000;pointer-events:none;transform:translate(-50%,-50%);animation:floatUp .85s cubic-bezier(.18,.89,.32,1.28) forwards;will-change:transform,opacity}.floating-text.damage{color:#ffde59}.floating-text.crit{color:#ff2a2a;font-size:16px;animation:floatUpCrit 1.1s cubic-bezier(.18,.89,.32,1.28) forwards}.floating-text.miss{color:#fff;font-style:italic}.floating-text.heal{color:#4ade80}.floating-text.exp{color:#38bdf8;font-size:10px}@keyframes floatUp{0%{opacity:0;transform:translate(-50%) scale(.6)}20%{opacity:1;transform:translate(-50%,-18px) scale(1.15)}to{opacity:0;transform:translate(-50%,-48px) scale(1)}}@keyframes floatUpCrit{0%{opacity:0;transform:translate(-50%,5px) scale(.4)}15%{opacity:1;transform:translate(-50%,-24px) scale(1.4)}35%{transform:translate(-50%,-26px) scale(1.25)}to{opacity:0;transform:translate(-50%,-64px) scale(1)}}#hud-root{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:30;display:flex;flex-direction:column;justify-content:space-between;padding:env(safe-area-inset-top,12px) env(safe-area-inset-right,12px) env(safe-area-inset-bottom,12px) env(safe-area-inset-left,12px)}.interactive{pointer-events:auto}.top-header{display:flex;justify-content:space-between;align-items:flex-start;width:100%}.character-card{background:var(--panel-bg);border:2px solid var(--panel-border);box-shadow:0 4px 12px #0009;border-radius:8px;padding:8px 12px;display:flex;gap:10px;align-items:center;backdrop-filter:blur(8px)}.portrait-frame{width:44px;height:44px;border-radius:6px;border:2px solid var(--primary-gold);background:#1e293b;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.portrait-avatar{width:38px;height:38px;image-rendering:pixelated}.character-details{display:flex;flex-direction:column;gap:4px;min-width:130px}.char-title-row{display:flex;justify-content:space-between;align-items:baseline}.char-name{font-weight:700;font-size:13px;color:#fff}.char-levels{font-size:10px;color:var(--primary-gold);font-family:var(--font-retro)}.bar-wrap{width:100%;height:8px;background:#111827;border-radius:4px;overflow:hidden;position:relative;border:1px solid #374151}.bar-fill{height:100%;transition:width .25s ease-out}.bar-fill.hp{background:linear-gradient(90deg,#b91c1c,#ef4444)}.bar-fill.sp{background:linear-gradient(90deg,#1d4ed8,#3b82f6)}.bar-fill.exp{background:linear-gradient(90deg,#b45309,#f59e0b)}.bar-text{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:600;color:#fff;text-shadow:1px 1px 1px #000}.zone-badge-container{display:flex;flex-direction:column;align-items:flex-end;gap:6px}.zone-badge{background:var(--panel-bg);border:1px solid var(--panel-border);padding:6px 12px;border-radius:6px;backdrop-filter:blur(8px);text-align:right;border-left:3px solid var(--primary-gold)}.zone-title{font-family:var(--font-title);font-size:12px;font-weight:700;color:var(--primary-gold)}.zone-sub{font-size:9px;color:var(--text-muted)}.quick-tools{display:flex;gap:6px}.tool-btn{background:var(--panel-bg);border:1px solid var(--panel-border);color:var(--text-main);padding:6px 10px;border-radius:6px;font-size:11px;cursor:pointer;display:flex;align-items:center;gap:4px;backdrop-filter:blur(8px);transition:all .15s ease}.tool-btn:hover,.tool-btn:active{background:#1e293b;border-color:var(--primary-gold);color:var(--primary-gold)}.target-frame{position:absolute;top:80px;left:50%;transform:translate(-50%);background:var(--panel-bg);border:2px solid #ef4444;border-radius:8px;padding:6px 14px;min-width:200px;display:none;flex-direction:column;gap:4px;box-shadow:0 4px 14px #ef44444d;backdrop-filter:blur(8px)}.target-frame.active{display:flex}.target-header{display:flex;justify-content:space-between;font-size:11px;font-weight:700}.bottom-region{display:flex;justify-content:space-between;align-items:flex-end;width:100%}#joystick-zone{width:140px;height:140px;position:relative;pointer-events:auto}.joystick-base{width:110px;height:110px;border-radius:50%;background:#1e293b73;border:2px dashed rgba(244,196,48,.4);position:absolute;bottom:10px;left:10px;display:flex;align-items:center;justify-content:center}.joystick-stick{width:48px;height:48px;border-radius:50%;background:radial-gradient(circle,#f4c430,#b45309);box-shadow:0 2px 8px #0009;position:absolute;transform:translate(0);transition:transform .05s linear}.desktop-hotbar{display:flex;gap:6px;background:var(--panel-bg);padding:6px 10px;border-radius:8px;border:1px solid var(--panel-border);box-shadow:0 4px 12px #00000080;backdrop-filter:blur(8px)}.hotkey-slot{width:42px;height:42px;background:#1e293b;border:1px solid #334155;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:9px;position:relative;cursor:pointer;transition:border-color .15s}.hotkey-slot:hover{border-color:var(--primary-gold)}.hotkey-badge{position:absolute;top:2px;left:4px;font-size:7px;color:var(--text-muted);font-family:var(--font-retro)}.hotkey-icon{font-size:16px}.mobile-action-cluster{display:flex;gap:12px;align-items:flex-end;pointer-events:auto}.action-btn-main{width:72px;height:72px;border-radius:50%;background:radial-gradient(circle,#ef4444,#991b1b);border:3px solid #fecaca;box-shadow:0 4px 12px #ef444480;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:11px;cursor:pointer;transition:transform .1s}.action-btn-main:active{transform:scale(.92)}.action-btn-sub{width:48px;height:48px;border-radius:50%;background:var(--panel-bg);border:2px solid var(--primary-gold);color:var(--primary-gold);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:9px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px #00000080;backdrop-filter:blur(8px)}.action-btn-sub:active{transform:scale(.92);background:#1e293b}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:50;display:none;align-items:center;justify-content:center;pointer-events:auto;backdrop-filter:blur(4px)}.modal-overlay.active{display:flex}.stat-window{background:#131b26;border:2px solid var(--primary-gold);border-radius:10px;width:90%;max-width:420px;box-shadow:0 10px 30px #000c,0 0 20px var(--gold-glow);overflow:hidden;animation:modalPop .2s cubic-bezier(.18,.89,.32,1.28)}@keyframes modalPop{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.stat-header{background:#1e293b;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #334155}.stat-header h3{font-family:var(--font-title);font-size:14px;color:var(--primary-gold)}.close-btn{background:transparent;border:none;color:#94a3b8;font-size:18px;cursor:pointer}.stat-body{padding:16px;display:flex;flex-direction:column;gap:12px}.stat-points-badge{background:#0f172a;border:1px dashed var(--primary-gold);padding:8px 12px;border-radius:6px;display:flex;justify-content:space-between;font-size:12px}.stat-points-val{color:var(--primary-gold);font-weight:700;font-family:var(--font-retro)}.stat-row{display:flex;justify-content:space-between;align-items:center;background:#1a2230;padding:6px 10px;border-radius:6px}.stat-label-col{display:flex;flex-direction:column}.stat-abbr{font-weight:700;font-size:13px;color:#f1faee}.stat-desc{font-size:9px;color:var(--text-muted)}.stat-val-col{display:flex;align-items:center;gap:10px}.stat-number{font-family:var(--font-retro);font-size:12px;color:#38bdf8;width:32px;text-align:right}.stat-add-btn{width:28px;height:28px;border-radius:4px;background:#2563eb;border:1px solid #60a5fa;color:#fff;font-weight:700;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center}.stat-add-btn:disabled{background:#334155;border-color:#475569;color:#64748b;cursor:not-allowed}.derived-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;font-size:10px;background:#0f172a;padding:10px;border-radius:6px;margin-top:6px}.derived-item{display:flex;justify-content:space-between;color:var(--text-muted)}.derived-item span{color:#f1faee;font-weight:600}.chat-dock{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:6px;padding:6px 10px;max-width:280px;font-size:10px;display:flex;flex-direction:column;gap:4px;backdrop-filter:blur(8px)}.chat-message{line-height:1.3}.chat-system{color:var(--primary-gold)}.chat-combat{color:#fca5a5}.cozy-rest-indicator{position:absolute;top:70px;right:20px;background:#ea580cd9;border:1px solid #fdba74;padding:6px 12px;border-radius:20px;font-size:10px;font-weight:700;display:none;align-items:center;gap:6px;color:#fff;box-shadow:0 0 12px #ea580c99;animation:pulse 1.5s infinite}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@media(min-width:769px){#joystick-zone,.mobile-action-cluster{display:none}.chat-dock{max-width:360px}}@media(max-width:768px){.desktop-hotbar,.chat-dock{display:none}.character-card{padding:6px 8px;gap:6px}.portrait-frame{width:36px;height:36px}.character-details{min-width:100px}}