/* ============================================================
   AETHERMOOR — RPG de Fantasía Oscura
   © 2026 NoiDah Studios. Todos los derechos reservados.
   aethermoor.online
   ============================================================ */
/* ============================================================
   STYLE.CSS — Mobile-first + Desktop adaptive
   ============================================================ */
:root {
  --color-bg:#0d0d1a;--color-surface:#13131f;--color-surface-2:#1a1a2e;--color-surface-3:#1f1f35;
  --color-border:#2a2a45;--color-primary:#7c3aed;--color-primary-dark:#5b21b6;--color-accent:#f59e0b;
  --color-success:#10b981;--color-error:#ef4444;--color-warning:#f59e0b;--color-info:#3b82f6;
  --color-hp:#ef4444;--color-mp:#3b82f6;--color-xp:#a855f7;--color-gold:#f59e0b;
  --color-text:#e2e8f0;--color-text-muted:#94a3b8;--color-text-dim:#475569;
  --radius:10px;--radius-sm:6px;--shadow:0 4px 24px rgba(0,0,0,0.5);--shadow-glow:0 0 20px rgba(124,58,237,0.4);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%;height:100dvh;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
body{height:100%;height:100dvh;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;background:var(--color-bg);color:var(--color-text);overflow:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:none}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-primary);border-radius:2px}

/* ============================================================
   APP SHELL
   ============================================================ */
#app{position:relative;width:100%;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;padding-top:var(--safe-top)}

/* ============================================================
   HUD — Top bar
   ============================================================ */
#hud{display:none;align-items:center;padding:.4rem .75rem;background:var(--color-surface);border-bottom:1px solid var(--color-border);flex-shrink:0;z-index:10}
#hud.visible{display:flex}
.hud-left{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hud-left::-webkit-scrollbar{display:none}
.hud-right{display:flex;align-items:center;gap:.3rem;flex-shrink:0;margin-left:.5rem}
.hud-char-info{display:flex;align-items:center;gap:.3rem;min-width:80px}
.hud-class-icon{font-size:1rem}
.hud-char-name{font-weight:700;font-size:.8rem;color:var(--color-accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70px}
.hud-stat{display:flex;align-items:center;gap:.3rem}
.hud-stat label{font-size:.6rem;color:var(--color-text-muted);text-transform:uppercase;font-weight:600;min-width:18px}
.hud-bar{width:50px;height:7px;background:var(--color-surface-3);border-radius:4px;overflow:hidden}
.hud-bar-fill{height:100%;border-radius:4px;transition:width .4s ease}
.hud-bar-fill.hp{background:linear-gradient(90deg,#ef4444,#f87171)}
.hud-bar-fill.hp.low{background:linear-gradient(90deg,#dc2626,#ef4444);animation:pulse-red 1s infinite}
.hud-bar-fill.mp{background:linear-gradient(90deg,#3b82f6,#60a5fa)}
.hud-bar-fill.xp{background:linear-gradient(90deg,#a855f7,#c084fc)}
.hud-value{font-size:.65rem;color:var(--color-text-muted);white-space:nowrap}
.hud-level .hud-value,.hud-gold .hud-value{font-weight:700;color:var(--color-accent);font-size:.8rem}
.hud-mute-btn{background:none;border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.2rem .4rem;cursor:pointer;font-size:.9rem;color:var(--color-text);transition:all .2s;-webkit-tap-highlight-color:transparent}
.hud-mute-btn:active{background:var(--color-surface-3)}

/* ============================================================
   SCREENS — Base
   ============================================================ */
.screen{display:none;flex:1;overflow-y:auto;padding:.75rem;position:relative;min-height:0;-webkit-overflow-scrolling:touch;padding-bottom:calc(.75rem + var(--safe-bottom));contain:layout style}
.screen.active{display:flex;flex-direction:column}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}
@keyframes catExpand{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.screen-enter{animation:fadeIn .3s ease forwards}
.screen-exit{animation:fadeOut .2s ease forwards}

/* Screen backgrounds */
#screen-game_world{background:radial-gradient(ellipse at top,#0d1f0d 0%,var(--color-bg) 70%)}
#screen-battle{background:radial-gradient(ellipse at top,#1f0d0d 0%,var(--color-bg) 70%)}
#screen-map{background:radial-gradient(ellipse at top,#0d0d1f 0%,var(--color-bg) 70%)}
#screen-shop{background:radial-gradient(ellipse at top,#1f1a0d 0%,var(--color-bg) 70%)}
#screen-inventory{background:radial-gradient(ellipse at top,#0d1a1f 0%,var(--color-bg) 70%)}
#screen-quests{background:radial-gradient(ellipse at top,#1a0d1f 0%,var(--color-bg) 70%)}
#screen-skill_tree{background:radial-gradient(ellipse at top,#0d1a0d 0%,var(--color-bg) 70%)}
#screen-save{background:radial-gradient(ellipse at top,#1a1a0d 0%,var(--color-bg) 70%)}

/* ============================================================
   LOADING & MAIN MENU
   ============================================================ */
#screen-loading_screen.active{align-items:center;justify-content:center;flex-direction:column;gap:1.5rem;background:#000;overflow:hidden}
.loading-logo{font-size:2rem;font-weight:900;color:var(--color-accent);text-shadow:0 0 30px rgba(245,158,11,.5);letter-spacing:2px}
.loading-spinner{width:40px;height:40px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}
.loading-text{color:var(--color-text-muted);font-size:.85rem}
.loading-tip{max-width:300px;text-align:center;color:var(--color-text-dim);font-size:.72rem;padding:.6rem .8rem;background:rgba(124,58,237,.08);border-radius:var(--radius);border:1px solid rgba(124,58,237,.2);font-style:italic}
@keyframes spin{to{transform:rotate(360deg)}}
#screen-main_menu.active{align-items:center;justify-content:center;flex-direction:column;gap:1.25rem;background:radial-gradient(ellipse at center,#1a0d2e 0%,var(--color-bg) 70%);padding:2rem 1rem}
.main-menu-title{font-size:2.2rem;font-weight:900;color:var(--color-accent);text-shadow:0 0 40px rgba(245,158,11,.6);letter-spacing:2px;text-align:center}
.main-menu-subtitle{color:var(--color-text-muted);font-size:.9rem;letter-spacing:1px;text-align:center}
.main-menu-buttons{display:flex;flex-direction:column;gap:.6rem;width:100%;max-width:280px}
.main-menu-version{color:var(--color-text-dim);font-size:.7rem}

/* ============================================================
   CHARACTER CREATION
   ============================================================ */
#screen-character_creation{align-items:center}
.char-creation-layout{width:100%;max-width:600px;display:flex;flex-direction:column;gap:1rem;padding-bottom:2rem}
.class-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.class-card{background:var(--color-surface-2);border:2px solid var(--color-border);border-radius:var(--radius);padding:.75rem;cursor:pointer;transition:all .2s;text-align:center;-webkit-tap-highlight-color:transparent}
.class-card:active{transform:scale(.97)}
.class-card.selected{border-color:var(--color-accent);background:var(--color-surface-3);box-shadow:0 0 20px rgba(245,158,11,.3)}
.class-icon{font-size:1.8rem;display:block;margin-bottom:.4rem}
.class-name{font-weight:700;font-size:.9rem;color:var(--color-accent);margin-bottom:.2rem}
.class-desc{font-size:.7rem;color:var(--color-text-muted);margin-bottom:.5rem;line-height:1.3}
.class-stats-preview{display:flex;gap:.3rem;justify-content:center;flex-wrap:wrap}
.stat-preview-item{display:flex;flex-direction:column;align-items:center;background:var(--color-surface-3);border-radius:4px;padding:.15rem .35rem}
.stat-preview-label{font-size:.5rem;color:var(--color-text-dim);text-transform:uppercase}
.stat-preview-value{font-size:.75rem;font-weight:700;color:var(--color-text)}

/* Character customization */
.cc-steps{display:flex;gap:.4rem;margin-bottom:.75rem;flex-wrap:wrap}
.cc-step{padding:.25rem .5rem;font-size:.65rem;border-radius:var(--radius-sm);background:var(--color-surface-2);border:1px solid var(--color-border);color:var(--color-text-dim)}
.cc-step.active{background:var(--color-primary);border-color:var(--color-primary);color:white;font-weight:700}
.cc-step.done{background:rgba(16,185,129,.15);border-color:var(--color-success);color:var(--color-success)}
.cc-section{margin-bottom:.75rem}
.cc-swatches{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.35rem}
.cc-swatch{width:30px;height:30px;border-radius:50%;cursor:pointer;border:2px solid var(--color-border);transition:all .15s;-webkit-tap-highlight-color:transparent}
.cc-swatch.selected{border-color:var(--color-accent);box-shadow:0 0 8px rgba(245,158,11,.5);transform:scale(1.1)}
.cc-options{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.35rem}
.cc-option{padding:.25rem .5rem;font-size:.68rem;border-radius:var(--radius-sm);background:var(--color-surface-2);border:1px solid var(--color-border);cursor:pointer;transition:all .15s}
.cc-option.selected{border-color:var(--color-accent);background:var(--color-surface-3);color:var(--color-accent)}
.cc-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:.4rem;margin-top:.35rem}
.cc-card{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius);padding:.5rem;cursor:pointer;text-align:center;transition:all .15s}
.cc-card.selected{border-color:var(--color-accent);background:var(--color-surface-3)}
.cc-stat-row{display:flex;align-items:center;gap:.4rem;padding:.25rem 0}
.cc-stat-label{min-width:80px;font-size:.75rem}
.cc-stat-val{font-weight:700;font-size:.9rem;color:var(--color-accent);min-width:22px;text-align:center}
.cc-summary{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius);padding:.6rem;margin-top:.5rem}
.cc-summary-row{font-size:.72rem;color:var(--color-text-muted);padding:.15rem 0}

/* ============================================================
   GAME WORLD
   ============================================================ */
.game-world-layout{display:flex;flex-direction:column;gap:.75rem;max-width:600px;margin:0 auto;width:100%}
.zone-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;background:var(--color-surface-2);border-radius:var(--radius);padding:.75rem;border:1px solid var(--color-border)}
.zone-name{font-size:1rem;font-weight:700;color:var(--color-accent);margin-bottom:.2rem}
.zone-description{font-size:.72rem;color:var(--color-text-muted);line-height:1.3}
.char-stats-panel{display:flex;gap:.6rem;flex-wrap:wrap;padding:.4rem .75rem;background:var(--color-surface-3);border-radius:var(--radius-sm);border:1px solid var(--color-border);margin-top:.4rem}
.char-stat-item{font-size:.72rem;color:var(--color-text-muted)}
.quest-tracker{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius);padding:.6rem .75rem}
.quest-tracker-title{font-size:.7rem;font-weight:700;color:var(--color-accent);margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.5px}
.quest-tracker-item{font-size:.72rem;color:var(--color-text-muted);padding:.15rem 0}
.weather-badge{font-size:.65rem;padding:.1rem .35rem;background:var(--color-surface-3);border-radius:10px;color:var(--color-text-muted);margin-left:.4rem;vertical-align:middle}

/* Action grid — mobile optimized touch targets */
.action-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.action-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;padding:.6rem .4rem;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius);cursor:pointer;color:var(--color-text);transition:all .15s;min-height:62px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.action-btn:active{transform:scale(.95);background:var(--color-surface-3)}

/* Action categories — expandable groups */
.action-category{margin-bottom:.4rem}
.action-cat-header{display:flex;align-items:center;gap:.5rem;padding:.5rem .6rem;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:all .2s}
.action-cat-header:active{background:var(--color-surface-3)}
.action-cat-icon{font-size:1.1rem}
.action-cat-label{font-size:.78rem;font-weight:700;color:var(--color-text);flex:1}
.action-cat-badge{font-size:.6rem;color:var(--color-accent)}
.action-cat-arrow{font-size:.7rem;color:var(--color-text-dim);transition:transform .2s}
.action-cat-header.open .action-cat-arrow{transform:rotate(90deg)}
.action-cat-header.open{border-color:var(--color-primary);background:rgba(124,58,237,.06)}
.action-cat-body{display:none;padding:.4rem 0 0}
.action-cat-body.open{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;animation:catExpand .2s ease}
.action-btn-icon{font-size:1.3rem}
.action-btn-label{font-size:.65rem;font-weight:600;text-align:center;color:var(--color-text-muted);line-height:1.2}
.boss-btn{border-color:var(--color-error)!important;animation:pulse-boss 2s infinite}
.new-badge{display:inline-block;background:var(--color-error);color:white;font-size:.55rem;padding:.1rem .3rem;border-radius:10px;font-weight:700;vertical-align:middle;margin-left:.2rem}

/* Event log */
.event-log{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius);padding:.6rem;max-height:120px;overflow-y:auto}
.event-log-entry{font-size:.72rem;padding:.15rem 0;border-bottom:1px solid var(--color-border);color:var(--color-text-muted)}
.event-log-entry:last-child{border-bottom:none}
.event-log-entry.success{color:var(--color-success)}
.event-log-entry.error{color:var(--color-error)}
.event-log-entry.warning{color:var(--color-warning)}

/* ============================================================
   BATTLE
   ============================================================ */
.battle-layout{display:flex;flex-direction:column;gap:.75rem;max-width:600px;margin:0 auto;width:100%}
.battle-combatants{display:flex;align-items:stretch;gap:.5rem}
.combatant-card{flex:1;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius);padding:.75rem;display:flex;flex-direction:column;gap:.4rem;transition:all .3s;position:relative;overflow:visible}
.player-card{border-color:var(--color-info)}
.enemy-card{border-color:var(--color-error)}
.boss-card{border-color:var(--color-error);animation:pulse-boss 2s infinite;box-shadow:0 0 15px rgba(239,68,68,.3)}
.combatant-icon{font-size:2rem;text-align:center}
.combatant-name{font-weight:700;font-size:.8rem;text-align:center}
.vs-text{display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:900;color:var(--color-text-dim);min-width:24px}
.enemy-desc{font-size:.65rem;color:var(--color-warning);text-align:center}
.shield-display{font-size:.7rem;color:var(--color-info);text-align:center}
.element-badge{font-size:.68rem;text-align:center;font-weight:700;letter-spacing:.3px;margin-top:.1rem}
.turn-indicator{text-align:center;padding:.4rem .75rem;border-radius:var(--radius-sm);font-weight:700;font-size:.8rem;letter-spacing:.5px}
.turn-indicator.player-turn{background:rgba(16,185,129,.15);color:var(--color-success);border:1px solid var(--color-success)}
.turn-indicator.enemy-turn{background:rgba(239,68,68,.15);color:var(--color-error);border:1px solid var(--color-error)}
.battle-log{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius);padding:.6rem;max-height:110px;overflow-y:auto}
.battle-log-entry{font-size:.72rem;padding:.15rem 0;border-bottom:1px solid var(--color-border)}
.battle-log-entry:last-child{border-bottom:none}
.battle-log-entry.player-action{color:var(--color-success)}
.battle-log-entry.enemy-action{color:var(--color-error)}
.battle-log-entry.system{color:var(--color-text-muted)}
.battle-log-entry.success{color:var(--color-accent);font-weight:700}
.battle-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:.4rem}
.battle-action-btn{padding:.5rem .6rem;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;color:var(--color-text);font-size:.75rem;transition:all .15s;text-align:left;min-height:44px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.battle-action-btn:active:not(:disabled){background:var(--color-surface-3);transform:scale(.97)}
.battle-action-btn:disabled{opacity:.4;cursor:not-allowed}
.attack-btn{border-color:var(--color-error)!important}
.flee-btn{border-color:var(--color-text-dim)!important}
.skill-btn{border-color:var(--color-primary)!important}
.item-btn{border-color:var(--color-success)!important}
.summon-btn{border-color:var(--color-primary)!important;background:rgba(124,58,237,.05)}
.mp-cost{color:var(--color-mp);font-size:.65rem}
.companion-display{display:flex;align-items:center;gap:.4rem;padding:.35rem .6rem;background:rgba(124,58,237,.1);border:1px solid var(--color-primary);border-radius:var(--radius-sm);font-size:.75rem;color:var(--color-primary);justify-content:center}
.companion-icon{font-size:1rem}
.combo-indicator{display:flex;align-items:center;gap:.25rem;justify-content:center;padding:.25rem .6rem;background:rgba(245,158,11,.1);border:1px solid var(--color-accent);border-radius:var(--radius-sm);font-size:.85rem;color:var(--color-accent)}
.battle-result{text-align:center;padding:1.25rem;background:var(--color-surface-2);border-radius:var(--radius);border:1px solid var(--color-border)}
.result-victory{color:var(--color-success);font-size:1.3rem;font-weight:900;margin-bottom:.75rem;text-shadow:0 0 20px rgba(16,185,129,.5)}
.result-defeat{color:var(--color-error);font-size:1.3rem;font-weight:900;margin-bottom:.75rem}
.result-fled{color:var(--color-warning);font-size:1.3rem;font-weight:900;margin-bottom:.75rem}
.crit-text{color:var(--color-accent);font-weight:900;font-size:.8rem}
.stat-row{display:flex;align-items:center;gap:.4rem}
.stat-label{font-size:.65rem;font-weight:700;min-width:18px}
.hp-label{color:var(--color-hp)}.mp-label{color:var(--color-mp)}
.stat-value{font-size:.65rem;color:var(--color-text-muted);white-space:nowrap}
.progress-bar{height:8px;background:var(--color-surface-3);border-radius:4px;overflow:hidden}
.progress-fill{height:100%;border-radius:4px;transition:width .4s ease}
.progress-fill.hp{background:linear-gradient(90deg,#ef4444,#f87171)}
.progress-fill.hp.low-hp{background:linear-gradient(90deg,#dc2626,#ef4444);animation:pulse-red 1s infinite}
.progress-fill.mp{background:linear-gradient(90deg,#3b82f6,#60a5fa)}
.damage-float{position:absolute;top:0;right:0;font-size:1.1rem;font-weight:900;color:var(--color-error);pointer-events:none;z-index:100;animation:floatUp 1s ease forwards}
@keyframes floatUp{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-40px)}}

/* ============================================================
   MAP, INVENTORY, SHOP, QUESTS, SKILLS, SAVE
   ============================================================ */
.mini-map-indicator{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.4rem .75rem;font-size:.75rem;color:var(--color-accent);margin-bottom:.6rem}
.map-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.zone-card{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius);padding:.75rem;cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent}
.zone-card:active:not(.locked){transform:scale(.97)}
.zone-card.locked{opacity:.5;cursor:not-allowed}
.zone-card.current{border-color:var(--color-accent);background:var(--color-surface-3)}
.zone-icon{font-size:1.8rem;margin-bottom:.4rem}
.zone-card-name{font-weight:700;font-size:.85rem;margin-bottom:.2rem}
.zone-card-desc{font-size:.7rem;color:var(--color-text-muted);margin-bottom:.4rem;line-height:1.3}
.zone-level-req{font-size:.65rem;color:var(--color-text-dim)}
.equip-panel{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius);padding:.6rem;margin-bottom:.6rem}
.equip-panel-title{font-size:.7rem;font-weight:700;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.4rem}
.equip-slot{display:flex;align-items:center;gap:.4rem;padding:.3rem 0;border-bottom:1px solid var(--color-border)}
.equip-slot:last-child{border-bottom:none}
.equip-slot-label{font-size:.65rem;color:var(--color-text-dim);min-width:80px;text-transform:uppercase}
.equip-slot-item{flex:1;font-size:.75rem}
.equip-slot-empty{flex:1;font-size:.75rem;color:var(--color-text-dim)}
.inventory-tabs{display:flex;gap:.3rem;flex-wrap:wrap}
.inventory-tab{padding:.3rem .6rem;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;color:var(--color-text-muted);font-size:.72rem;transition:all .15s;-webkit-tap-highlight-color:transparent}
.inventory-tab.active{background:var(--color-primary);border-color:var(--color-primary);color:white}
.inventory-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.item-card{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius);padding:.6rem;cursor:pointer;transition:all .15s;position:relative;-webkit-tap-highlight-color:transparent}
.item-card:active{transform:scale(.97);background:var(--color-surface-3)}
.item-icon{font-size:1.3rem;margin-bottom:.2rem}
.item-name{font-weight:700;font-size:.78rem;margin-bottom:.15rem}
.item-desc{font-size:.68rem;color:var(--color-text-muted);margin-bottom:.2rem;line-height:1.3}
.item-stats{font-size:.65rem;color:var(--color-accent)}
.item-qty{font-size:.65rem;color:var(--color-text-dim);margin-top:.15rem}
.item-compare{font-size:.65rem;margin-top:.2rem;display:flex;gap:.25rem;flex-wrap:wrap}
.cmp-better{color:var(--color-success)}.cmp-worse{color:var(--color-error)}.cmp-same{color:var(--color-text-dim)}
.shop-gold-display{font-weight:700;color:var(--color-gold);font-size:.9rem}
.shop-section-title{font-size:.8rem;font-weight:700;margin-bottom:.6rem}
.buy-title{color:var(--color-accent)}.sell-title{color:var(--color-success)}
.shop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.shop-item{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius);padding:.6rem;cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent}
.shop-item:active{transform:scale(.97)}
.shop-item-price{font-size:.75rem;color:var(--color-gold);font-weight:700;margin-top:.3rem}
.sell-price{color:var(--color-success)!important}
.quest-section-title{font-size:.8rem;font-weight:700;margin-bottom:.6rem}
.active-title{color:var(--color-accent)}.available-title{color:var(--color-text-muted)}.completed-title{color:var(--color-success)}
.quest-list{display:flex;flex-direction:column;gap:.5rem}
.quest-card{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius);padding:.75rem}
.quest-card.completed{opacity:.6;border-color:var(--color-success)}
.quest-title{font-weight:700;font-size:.85rem;margin-bottom:.2rem}
.quest-desc{font-size:.72rem;color:var(--color-text-muted);margin-bottom:.4rem;line-height:1.3}
.quest-objectives{display:flex;flex-direction:column;gap:.15rem;margin-bottom:.4rem}
.quest-objective{font-size:.7rem;color:var(--color-text-muted)}
.quest-objective.done{color:var(--color-success)}
.quest-rewards{display:flex;gap:.4rem;flex-wrap:wrap}
.quest-reward{font-size:.68rem;padding:.1rem .35rem;border-radius:4px;background:var(--color-surface-3)}
.text-xp{color:var(--color-xp)}.text-gold{color:var(--color-gold)}.text-accent{color:var(--color-accent)}
.skill-points-display{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.4rem .75rem;font-size:.8rem;color:var(--color-accent);margin-bottom:.6rem}
.skill-tree-layout{display:flex;flex-direction:column;gap:.75rem}
.skill-branch{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius);padding:.75rem}
.skill-branch-title{font-weight:700;font-size:.8rem;color:var(--color-accent);margin-bottom:.6rem;text-transform:uppercase;letter-spacing:.5px}
.skill-nodes{display:flex;gap:.5rem;flex-wrap:wrap}
.skill-node{background:var(--color-surface-3);border:2px solid var(--color-border);border-radius:var(--radius);padding:.5rem;text-align:center;min-width:72px;transition:all .15s;-webkit-tap-highlight-color:transparent}
.skill-node.available{border-color:var(--color-primary);cursor:pointer}
.skill-node.available:active{transform:scale(.95)}
.skill-node.unlocked{border-color:var(--color-success);background:rgba(16,185,129,.1)}
.skill-node.locked{opacity:.4}
.skill-node-icon{font-size:1.2rem;margin-bottom:.15rem}
.skill-node-name{font-size:.65rem;font-weight:700;margin-bottom:.1rem}
.skill-node-cost{font-size:.6rem;color:var(--color-mp)}
.save-slots{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1rem}
.save-slot{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius);padding:.75rem}
.save-slot.empty{opacity:.6}
.save-slot-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.3rem}
.save-slot-title{font-weight:700;font-size:.85rem}
.save-slot-info{font-size:.72rem;color:var(--color-text-muted)}
.save-slot-actions{display:flex;gap:.4rem;margin-top:.6rem}
.stats-panel{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius);padding:.75rem}
.stats-panel-title{font-weight:700;font-size:.85rem;color:var(--color-accent);margin-bottom:.6rem}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:.3rem}
.stat-entry{display:flex;justify-content:space-between;font-size:.75rem;padding:.3rem .5rem;background:var(--color-surface-2);border-radius:var(--radius-sm)}
.stat-entry span:last-child{color:var(--color-accent);font-weight:700}
#screen-game_over.active{align-items:center;justify-content:center;flex-direction:column;gap:1.25rem;background:radial-gradient(ellipse at center,#1f0d0d 0%,var(--color-bg) 70%)}
.game-over-title{font-size:2rem;font-weight:900;color:var(--color-error);text-shadow:0 0 30px rgba(239,68,68,.5)}
.game-over-subtitle{color:var(--color-text-muted);font-size:.9rem}

/* ============================================================
   NARRATIVE, INTRO, VICTORY, PROFILE
   ============================================================ */
.narrative-layout{display:flex;flex-direction:column;gap:1rem;max-width:600px;margin:0 auto;width:100%}
.narrative-portrait{font-size:2.5rem;background:var(--color-surface-2);border:2px solid var(--color-border);border-radius:50%;width:60px;height:60px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.narrative-speaker{font-weight:700;color:var(--color-accent);margin-bottom:.4rem}
.narrative-text-box{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius);padding:.75rem}
.narrative-text{font-size:.85rem;line-height:1.5;color:var(--color-text)}
.narrative-choices{display:flex;flex-direction:column;gap:.4rem}
.narrative-choice{padding:.6rem .75rem;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;color:var(--color-text);font-size:.8rem;text-align:left;transition:all .15s;-webkit-tap-highlight-color:transparent}
.narrative-choice:active{background:var(--color-surface-3)}
#screen-intro.active{display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#0d0d2e 0%,#000 70%)}
.intro-layout{max-width:500px;width:100%;display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1rem}
.intro-text-container{max-height:55vh;overflow-y:auto;width:100%;padding:.75rem}
.intro-line{color:var(--color-text);font-size:.88rem;line-height:1.7;margin-bottom:.75rem;opacity:0;animation:introFadeIn 1.5s ease forwards}
@keyframes introFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.intro-skip{position:absolute;bottom:1.5rem;right:1.5rem}
#screen-victory.active{display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#1a0d2e 0%,#000 70%)}
.victory-layout{max-width:500px;width:100%;display:flex;flex-direction:column;align-items:center;gap:1.25rem;text-align:center;padding:1rem}
.victory-title{font-size:1.3rem;font-weight:900;color:var(--color-accent);text-shadow:0 0 30px rgba(245,158,11,.5)}
.victory-text{max-height:35vh;overflow-y:auto;width:100%}
.victory-line{color:var(--color-text);font-size:.82rem;line-height:1.6;margin-bottom:.6rem}
.victory-stats{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius);padding:.75rem;width:100%}
.victory-stat{font-size:.72rem;color:var(--color-text-muted);padding:.15rem 0}
.victory-credits{margin-top:.75rem}
.credits-title{font-size:1rem;font-weight:700;color:var(--color-accent)}
.credits-line{font-size:.8rem;color:var(--color-text-muted)}
.profile-layout{display:flex;flex-direction:column;gap:.75rem;max-width:600px;margin:0 auto;width:100%;padding-bottom:2rem}
.profile-header{display:flex;align-items:center;gap:.75rem;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius);padding:.75rem}
.profile-avatar{flex-shrink:0}
.profile-info{flex:1}
.profile-name{font-size:1rem;font-weight:700;color:var(--color-accent)}
.profile-class{font-size:.75rem;color:var(--color-text-muted)}
.profile-pet{font-size:.72rem;color:var(--color-primary);margin-top:.15rem}
.profile-karma{font-size:.7rem;margin-top:.15rem}
.profile-section{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius);padding:.6rem}
.profile-section-title{font-size:.75rem;font-weight:700;color:var(--color-accent);margin-bottom:.4rem}
.profile-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.25rem}
.profile-stat{font-size:.7rem;color:var(--color-text-muted)}
.profile-backstory{font-size:.72rem;color:var(--color-text-muted);line-height:1.3}
.profile-achievements{display:flex;gap:.3rem;flex-wrap:wrap}
.profile-ach{font-size:1rem;opacity:.3;cursor:default}
.profile-ach.unlocked{opacity:1}

/* ============================================================
   BUTTONS — Touch optimized
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.55rem 1rem;border-radius:var(--radius-sm);font-size:.82rem;font-weight:600;cursor:pointer;border:1px solid transparent;transition:all .15s;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;touch-action:manipulation;min-height:44px}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--color-primary);color:white;border-color:var(--color-primary)}
.btn-accent{background:var(--color-accent);color:#1a1a2e;border-color:var(--color-accent)}
.btn-outline{background:transparent;color:var(--color-text);border-color:var(--color-border)}
.btn-ghost{background:transparent;color:var(--color-text-muted);border-color:transparent}
.btn-ghost:active{background:var(--color-surface-2)}
.btn-danger{background:var(--color-error);color:white;border-color:var(--color-error)}
.btn-gold{background:var(--color-gold);color:#1a1a2e;border-color:var(--color-gold);font-weight:700}
.btn-lg{padding:.7rem 1.25rem;font-size:.95rem}
.btn-sm{padding:.25rem .6rem;font-size:.72rem;min-height:32px}
.btn-full{width:100%}
.form-group{display:flex;flex-direction:column;gap:.3rem}
.form-label{font-size:.75rem;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px}
.form-input{padding:.6rem .8rem;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);font-size:.85rem;transition:border-color .2s;outline:none;min-height:44px}
.form-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(124,58,237,.2)}
.form-error{font-size:.7rem;color:var(--color-error)}
.badge{display:inline-block;padding:.12rem .4rem;border-radius:10px;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.badge-primary{background:rgba(124,58,237,.2);color:var(--color-primary);border:1px solid var(--color-primary)}
.badge-accent{background:rgba(245,158,11,.2);color:var(--color-accent);border:1px solid var(--color-accent)}
.badge-success{background:rgba(16,185,129,.2);color:var(--color-success);border:1px solid var(--color-success)}
.badge-error{background:rgba(239,68,68,.2);color:var(--color-error);border:1px solid var(--color-error)}
.badge-muted{background:var(--color-surface-3);color:var(--color-text-muted);border:1px solid var(--color-border)}
.badge-gold{background:rgba(245,158,11,.2);color:var(--color-gold);border:1px solid var(--color-gold)}
.badge-danger{background:var(--color-error);color:#fff}
.screen-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem;flex-shrink:0}
.screen-title{font-size:1.1rem;font-weight:700;flex:1}
.back-btn{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.35rem .7rem;cursor:pointer;color:var(--color-text-muted);font-size:.75rem;transition:all .15s;white-space:nowrap;min-height:36px;-webkit-tap-highlight-color:transparent}
.back-btn:active{background:var(--color-surface-3)}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding:1.5rem;color:var(--color-text-dim);text-align:center}
.empty-state-icon{font-size:2rem}

/* ============================================================
   TOAST, MODAL, LEVEL UP
   ============================================================ */
#toast-container{position:fixed;bottom:calc(.75rem + var(--safe-bottom));left:.75rem;right:.75rem;display:flex;flex-direction:column;gap:.4rem;z-index:1000;pointer-events:none;align-items:center}

/* Scroll to top button */
.scroll-top-btn{position:fixed;bottom:calc(1rem + var(--safe-bottom));right:1rem;width:40px;height:40px;border-radius:50%;background:var(--color-primary);color:#fff;border:none;font-size:1rem;cursor:pointer;z-index:99;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;box-shadow:0 2px 12px rgba(124,58,237,.4);-webkit-tap-highlight-color:transparent;touch-action:manipulation;display:flex;align-items:center;justify-content:center}
.scroll-top-btn.visible{opacity:1;pointer-events:auto}
.scroll-top-btn:active{transform:scale(.9)}
.toast{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius);padding:.55rem .85rem;font-size:.78rem;box-shadow:var(--shadow);animation:slideUp .25s ease;max-width:320px;width:100%;pointer-events:auto}
.toast.removing{animation:slideDown .2s ease forwards}
.toast-success{border-color:var(--color-success);color:var(--color-success)}
.toast-error{border-color:var(--color-error);color:var(--color-error)}
.toast-warning{border-color:var(--color-warning);color:var(--color-warning)}
.toast-info{border-color:var(--color-info);color:var(--color-info)}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown{from{opacity:1}to{opacity:0;transform:translateY(20px)}}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;z-index:500;padding:1rem;animation:fadeIn .2s ease}
.modal{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius);padding:1.25rem;max-width:420px;width:100%;box-shadow:var(--shadow);max-height:85vh;overflow-y:auto;animation:fadeIn .3s ease}
.modal-title{font-size:1rem;font-weight:700;margin-bottom:.75rem;color:var(--color-accent)}
.modal-body{margin-bottom:.75rem;font-size:.82rem;line-height:1.5;color:var(--color-text-muted)}
.modal-actions{display:flex;flex-direction:column;gap:.4rem}
.level-up-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:600;padding:1rem;animation:fadeIn .3s ease}
.level-up-card{background:var(--color-surface-2);border:2px solid var(--color-gold);border-radius:var(--radius);padding:1.5rem;text-align:center;max-width:280px;width:100%}
.golden-glow{box-shadow:0 0 40px rgba(245,158,11,.5);animation:golden-pulse 1.5s ease infinite}
.level-up-title{font-size:1.3rem;font-weight:900;color:var(--color-gold);margin-bottom:.4rem}
.level-up-level{font-size:2rem;font-weight:900;color:var(--color-accent);margin-bottom:.75rem}
.level-up-gains{display:flex;gap:.75rem;justify-content:center;margin-bottom:1rem}
.level-up-gain{display:flex;flex-direction:column;align-items:center;gap:.15rem}
.level-up-gain-label{font-size:.65rem;color:var(--color-text-muted);text-transform:uppercase}
.level-up-gain-value{font-size:1rem;font-weight:700;color:var(--color-success)}

/* ============================================================
   PIXEL ART & SPRITES
   ============================================================ */
.pixel-sprite{image-rendering:pixelated;image-rendering:crisp-edges;display:block;margin:0 auto}
.zone-bg-canvas{width:100%;height:100px;border-radius:var(--radius);margin-bottom:.4rem;image-rendering:pixelated}
.battle-sprite{image-rendering:pixelated;image-rendering:crisp-edges}
.visual-map-canvas{width:100%;border-radius:var(--radius);image-rendering:pixelated;cursor:pointer}
@keyframes idleBreathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.combatant-icon img,.combatant-icon canvas{animation:idleBreathe 2.5s ease-in-out infinite}
.enemy-card .combatant-icon img,.enemy-card .combatant-icon canvas{animation-delay:.5s}
.sprite-idle{animation:spriteIdle 2s ease-in-out infinite}
@keyframes spriteIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.sprite-attack{animation:spriteAttack .3s ease-in-out}
@keyframes spriteAttack{0%{transform:translateX(0)}30%{transform:translateX(15px)}60%{transform:translateX(-5px)}100%{transform:translateX(0)}}
.sprite-hurt{animation:spriteHurt .4s ease-in-out}
@keyframes spriteHurt{0%{filter:brightness(1)}20%{filter:brightness(3) saturate(0)}40%{filter:brightness(0.5) sepia(1) hue-rotate(-50deg)}100%{filter:brightness(1)}}
.sprite-death{animation:spriteDeath .8s ease-in forwards}
@keyframes spriteDeath{0%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(0.9) rotate(5deg)}100%{opacity:0;transform:scale(0.5) rotate(15deg) translateY(20px)}}
.sprite-cast{animation:spriteCast .5s ease-in-out}
@keyframes spriteCast{0%{filter:brightness(1);transform:scale(1)}50%{filter:brightness(1.5) hue-rotate(60deg);transform:scale(1.1)}100%{filter:brightness(1);transform:scale(1)}}

/* ============================================================
   TUTORIAL, TABS, MINIMAP
   ============================================================ */
#tutorial-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:9999;display:flex;align-items:center;justify-content:center;padding:1rem}
.tutorial-box{background:var(--color-surface-2);border:2px solid var(--color-primary);border-radius:var(--radius);padding:1.25rem;max-width:340px;width:100%;text-align:center;animation:fadeIn .3s ease}
.tab-btn{padding:.35rem .7rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-2);color:var(--color-text-muted);font-size:.72rem;cursor:pointer;white-space:nowrap;transition:all .15s;-webkit-tap-highlight-color:transparent;min-height:32px}
.tab-btn.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.tab-btn:active:not(.active){background:var(--color-surface-3)}
.minimap-corner{position:fixed;bottom:4rem;right:.75rem;z-index:20;opacity:.8;transition:opacity .3s}

/* ============================================================
   LIGHT THEME
   ============================================================ */
[data-theme="light"]{--color-bg:#f0f0f5;--color-surface:#ffffff;--color-surface-2:#f5f5fa;--color-surface-3:#eaeaf0;--color-border:#d0d0e0;--color-primary:#7c3aed;--color-primary-dark:#5b21b6;--color-accent:#d97706;--color-success:#059669;--color-error:#dc2626;--color-warning:#d97706;--color-info:#2563eb;--color-hp:#dc2626;--color-mp:#2563eb;--color-xp:#7c3aed;--color-gold:#d97706;--color-text:#1e293b;--color-text-muted:#475569;--color-text-dim:#94a3b8;--shadow:0 4px 24px rgba(0,0,0,0.1);--shadow-glow:0 0 20px rgba(124,58,237,0.2)}
[data-theme="light"] #screen-loading_screen,[data-theme="light"] #screen-main_menu{background:radial-gradient(ellipse at center,#e8e0f0 0%,var(--color-bg) 70%)}
[data-theme="light"] #screen-game_world{background:radial-gradient(ellipse at top,#e0f0e0 0%,var(--color-bg) 70%)}
[data-theme="light"] #screen-battle{background:radial-gradient(ellipse at top,#f0e0e0 0%,var(--color-bg) 70%)}
[data-theme="light"] #screen-game_over{background:radial-gradient(ellipse at center,#f0e0e0 0%,var(--color-bg) 70%)}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes pulse-red{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes pulse-boss{0%,100%{box-shadow:0 0 10px rgba(239,68,68,.3)}50%{box-shadow:0 0 25px rgba(239,68,68,.7)}}
@keyframes golden-pulse{0%,100%{box-shadow:0 0 30px rgba(245,158,11,.4)}50%{box-shadow:0 0 60px rgba(245,158,11,.8)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.shake{animation:shake .4s ease}

/* ============================================================
   RESPONSIVE — Mobile first, then desktop enhancements
   ============================================================ */

/* Small phones (< 360px) */
@media (max-width: 359px) {
  .action-grid{grid-template-columns:repeat(2,1fr);gap:.4rem}
  .action-cat-body.open{grid-template-columns:repeat(2,1fr);gap:.4rem}
  .action-btn{min-height:54px;padding:.4rem .3rem}
  .action-btn-icon{font-size:1.1rem}
  .action-btn-label{font-size:.58rem}
  .class-grid{grid-template-columns:1fr}
  .inventory-grid,.shop-grid,.map-grid{grid-template-columns:1fr}
  .battle-combatants{flex-direction:column;gap:.4rem}
  .vs-text{display:none}
  .hud-bar{width:35px}
  .hud-char-name{max-width:50px;font-size:.7rem}
  .main-menu-title{font-size:1.6rem}
  .screen{padding:.5rem}
  .cc-cards{grid-template-columns:1fr}
  .profile-header{flex-direction:column;text-align:center}
  .profile-stats-grid{grid-template-columns:1fr}
}

/* Standard phones (360-480px) */
@media (max-width: 480px) {
  .battle-combatants{flex-direction:column;gap:.4rem}
  .vs-text{display:none}
  .battle-actions{grid-template-columns:1fr}
  .hud-bar{width:42px}
  .hud-char-name{max-width:60px}
  .main-menu-title{font-size:1.8rem}
  .profile-header{flex-direction:column;text-align:center}
  .profile-stats-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr}
}

/* Tablets (481-768px) */
@media (min-width: 481px) {
  .screen{padding:1rem}
  .hud-bar{width:55px}
  .action-grid{grid-template-columns:repeat(4,1fr)}
  .action-cat-body.open{grid-template-columns:repeat(4,1fr)}
  .action-btn{min-height:70px}
  .action-btn-icon{font-size:1.4rem}
  .action-btn-label{font-size:.7rem}
  .modal{border-radius:var(--radius);align-self:center}
  .modal-overlay{align-items:center;padding:1rem}
  #toast-container{left:auto;right:1rem;align-items:flex-end;bottom:1rem}
}

/* Desktop (769px+) */
@media (min-width: 769px) {
  .screen{padding:1.25rem}
  #hud{padding:.5rem 1.25rem}
  .hud-left{gap:.75rem}
  .hud-bar{width:65px;height:8px}
  .hud-char-name{max-width:120px;font-size:.9rem}
  .hud-value{font-size:.72rem}
  .action-grid{grid-template-columns:repeat(4,1fr);gap:.6rem}
  .action-cat-body.open{grid-template-columns:repeat(4,1fr);gap:.6rem}
  .action-btn{min-height:75px;padding:.75rem .5rem}
  .action-btn:hover{border-color:var(--color-primary);background:var(--color-surface-3);box-shadow:0 0 12px rgba(124,58,237,.3);transform:translateY(-2px)}
  .action-btn-icon{font-size:1.5rem}
  .action-btn-label{font-size:.75rem}
  .battle-action-btn:hover:not(:disabled){border-color:var(--color-primary);background:var(--color-surface-3);box-shadow:0 0 10px rgba(124,58,237,.3)}
  .class-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-glow);transform:translateY(-2px)}
  .zone-card:hover:not(.locked){border-color:var(--color-primary);box-shadow:var(--shadow-glow);transform:translateY(-2px)}
  .item-card:hover{border-color:var(--color-primary);box-shadow:0 0 10px rgba(124,58,237,.25);transform:translateY(-1px)}
  .shop-item:hover{border-color:var(--color-accent);box-shadow:0 0 10px rgba(245,158,11,.2);transform:translateY(-1px)}
  .btn:hover{transform:translateY(-1px)}
  .btn-primary:hover{background:var(--color-primary-dark);box-shadow:0 0 16px rgba(124,58,237,.5)}
  .btn-accent:hover{box-shadow:0 0 16px rgba(245,158,11,.4)}
  .btn-outline:hover{border-color:var(--color-primary);color:var(--color-primary)}
  .btn-danger:hover{box-shadow:0 0 12px rgba(239,68,68,.4)}
  .btn-gold:hover{box-shadow:0 0 16px rgba(245,158,11,.5)}
  .narrative-choice:hover{border-color:var(--color-primary);background:var(--color-surface-3)}
  .hud-mute-btn:hover{border-color:var(--color-primary)}
  .back-btn:hover{border-color:var(--color-primary);color:var(--color-text)}
  .tab-btn:hover:not(.active){background:var(--color-surface-3)}
  .boss-btn:hover{box-shadow:0 0 16px rgba(239,68,68,.5)!important}
  .attack-btn:hover:not(:disabled){box-shadow:0 0 12px rgba(239,68,68,.4)!important}
  .summon-btn:hover:not(:disabled){box-shadow:0 0 12px rgba(124,58,237,.4)!important}
  .inventory-tab:hover{border-color:var(--color-primary);color:var(--color-text)}
  .skill-node.available:hover{box-shadow:var(--shadow-glow);transform:translateY(-2px)}
  .main-menu-title{font-size:2.8rem}
  .loading-logo{font-size:2.5rem}
  .zone-bg-canvas{height:120px}
  .inventory-grid,.shop-grid{grid-template-columns:repeat(2,1fr)}
  .map-grid{grid-template-columns:repeat(2,1fr)}
}

/* Large desktop (1024px+) */
@media (min-width: 1024px) {
  .action-grid{grid-template-columns:repeat(5,1fr)}
  .action-cat-body.open{grid-template-columns:repeat(5,1fr)}
  .inventory-grid,.shop-grid{grid-template-columns:repeat(3,1fr)}
  .map-grid{grid-template-columns:repeat(3,1fr)}
  .stats-grid{grid-template-columns:1fr 1fr}
}

/* Permitir selección solo en inputs */
input,textarea{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}

/* ============================================================
   MENÚ PRINCIPAL ÉPICO
   ============================================================ */
#screen-main_menu.active{background:#000;overflow:hidden}
.menu-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.menu-particle{position:absolute;background:var(--color-primary);border-radius:50%;opacity:0;animation:particleFloat linear infinite}
@keyframes particleFloat{
  0%{opacity:0;transform:translateY(0) scale(0.5)}
  20%{opacity:.6}
  80%{opacity:.4}
  100%{opacity:0;transform:translateY(-100px) scale(1.2)}
}
.menu-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:1.5rem;padding:1.5rem}
.menu-logo-container{text-align:center;animation:menuFadeIn 1.2s ease forwards}
@keyframes menuFadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.menu-sword{font-size:3.5rem;margin-bottom:.5rem;animation:swordPulse 3s ease-in-out infinite;filter:drop-shadow(0 0 20px rgba(245,158,11,.6))}
@keyframes swordPulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 20px rgba(245,158,11,.4))}50%{transform:scale(1.08);filter:drop-shadow(0 0 35px rgba(245,158,11,.8))}}
.menu-title-main{
  font-size:2.8rem;font-weight:900;letter-spacing:6px;
  background:linear-gradient(135deg,#f59e0b 0%,#fbbf24 25%,#f59e0b 50%,#d97706 75%,#f59e0b 100%);
  background-size:200% 200%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:titleShine 4s ease infinite;
  text-shadow:none;
  filter:drop-shadow(0 2px 8px rgba(245,158,11,.4));
}
@keyframes titleShine{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.menu-title-line{width:120px;height:2px;background:linear-gradient(90deg,transparent,var(--color-primary),var(--color-accent),var(--color-primary),transparent);margin:.6rem auto;border-radius:1px;animation:lineGlow 3s ease infinite}
@keyframes lineGlow{0%,100%{opacity:.5;width:100px}50%{opacity:1;width:140px}}
.menu-title-sub{font-size:.9rem;color:var(--color-text-muted);letter-spacing:3px;text-transform:uppercase;font-weight:300;animation:menuFadeIn 1.5s ease forwards}
.menu-btn-glow{animation:btnGlow 2s ease infinite;box-shadow:0 0 20px rgba(245,158,11,.4)}
@keyframes btnGlow{0%,100%{box-shadow:0 0 15px rgba(245,158,11,.3)}50%{box-shadow:0 0 30px rgba(245,158,11,.6)}}
.menu-version{color:var(--color-text-dim);font-size:.65rem;text-align:center;margin-top:.75rem;letter-spacing:.5px}
@media(max-width:480px){
  .menu-sword{font-size:2.5rem}
  .menu-title-main{font-size:2rem;letter-spacing:4px}
  .menu-title-sub{font-size:.75rem;letter-spacing:2px}
}

/* ============================================================
   TEMA ÉPICO GLOBAL — Gradientes dorados, bordes brillantes
   ============================================================ */

/* Títulos de pantalla con gradiente dorado */
.screen-title{
  background:linear-gradient(135deg,#f59e0b,#fbbf24,#f59e0b);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  filter:drop-shadow(0 1px 3px rgba(245,158,11,.3));
}

/* Headers de pantalla con línea decorativa inferior */
.screen-header{
  border-bottom:1px solid var(--color-border);
  padding-bottom:.6rem;
  margin-bottom:.85rem;
  position:relative;
}
.screen-header::after{
  content:'';position:absolute;bottom:-1px;left:0;
  width:60px;height:2px;
  background:linear-gradient(90deg,var(--color-accent),var(--color-primary),transparent);
  border-radius:1px;
}

/* Zone name con brillo */
.zone-name{
  background:linear-gradient(135deg,#f59e0b,#fbbf24);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  filter:drop-shadow(0 1px 2px rgba(245,158,11,.3));
}

/* Botones de acción con borde sutil brillante al idle */
.action-btn{
  border-color:rgba(124,58,237,.2);
  background:linear-gradient(145deg,var(--color-surface-2),var(--color-surface));
}

/* Quest section titles con estilo */
.quest-title{
  color:var(--color-accent);
}

/* Combatant cards con borde más vivo */
.player-card{
  border-color:rgba(59,130,246,.4);
  background:linear-gradient(145deg,var(--color-surface-2),rgba(59,130,246,.05));
}
.enemy-card{
  border-color:rgba(239,68,68,.4);
  background:linear-gradient(145deg,var(--color-surface-2),rgba(239,68,68,.05));
}

/* Barras de HP/MP con brillo sutil */
.hud-bar{
  box-shadow:inset 0 1px 3px rgba(0,0,0,.3);
}
.hud-bar-fill{
  box-shadow:0 0 6px rgba(255,255,255,.1);
}

/* Badges más vivos */
.badge-primary{
  background:linear-gradient(135deg,rgba(124,58,237,.25),rgba(124,58,237,.1));
  border-color:rgba(124,58,237,.5);
}
.badge-accent{
  background:linear-gradient(135deg,rgba(245,158,11,.25),rgba(245,158,11,.1));
  border-color:rgba(245,158,11,.5);
}
.badge-success{
  background:linear-gradient(135deg,rgba(16,185,129,.25),rgba(16,185,129,.1));
  border-color:rgba(16,185,129,.5);
}

/* Botón primario con gradiente */
.btn-primary{
  background:linear-gradient(135deg,#7c3aed,#6d28d9);
  border-color:#7c3aed;
}
.btn-accent{
  background:linear-gradient(135deg,#f59e0b,#d97706);
  border-color:#f59e0b;
}
.btn-danger{
  background:linear-gradient(135deg,#ef4444,#dc2626);
  border-color:#ef4444;
}
.btn-gold{
  background:linear-gradient(135deg,#f59e0b,#fbbf24);
  border-color:#f59e0b;
}

/* Toast con borde más elegante */
.toast{
  backdrop-filter:blur(8px);
  background:rgba(26,26,46,.9);
}

/* Modal con fondo blur */
.modal-overlay{
  backdrop-filter:blur(4px);
  align-items:center;
  justify-content:center;
}
.modal{
  border-color:rgba(124,58,237,.3);
  box-shadow:0 8px 40px rgba(0,0,0,.6),0 0 20px rgba(124,58,237,.15);
  border-radius:var(--radius);
  max-height:85vh;
  overflow-y:auto;
}

/* Level up card más épica */
.level-up-card{
  background:linear-gradient(145deg,var(--color-surface-2),rgba(245,158,11,.05));
}

/* Game over más dramático */
.game-over-title{
  background:linear-gradient(135deg,#ef4444,#dc2626,#ef4444);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  filter:drop-shadow(0 2px 8px rgba(239,68,68,.5));
}

/* Victory title más brillante */
.victory-title{
  background:linear-gradient(135deg,#f59e0b,#fbbf24,#f59e0b);
  background-size:200% 200%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:titleShine 4s ease infinite;
  filter:drop-shadow(0 2px 8px rgba(245,158,11,.5));
}

/* Loading screen más atmosférica */
.loading-logo{
  background:linear-gradient(135deg,#f59e0b,#fbbf24,#f59e0b);
  background-size:200% 200%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:titleShine 3s ease infinite;
  filter:drop-shadow(0 2px 10px rgba(245,158,11,.5));
}
.loading-spinner{
  border-color:rgba(124,58,237,.2);
  border-top-color:#f59e0b;
}

/* Event log con borde lateral */
.event-log{
  border-left:3px solid var(--color-primary);
}

/* Scroll bars más elegantes */
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--color-primary),var(--color-accent));
}

/* Dificultad en menú principal — estilo coherente con fondo oscuro */
#screen-main_menu .tab-btn{
  background:rgba(255,255,255,.04);
  border-color:rgba(124,58,237,.25);
  color:var(--color-text-dim);
}
#screen-main_menu .tab-btn.active{
  background:rgba(124,58,237,.3);
  border-color:rgba(124,58,237,.6);
  color:#fff;
}
#screen-main_menu .tab-btn:active:not(.active){
  background:rgba(124,58,237,.15);
}
/* Loading tip coherente con fondo oscuro */
#screen-loading_screen .loading-tip{
  background:rgba(124,58,237,.06);
  border-color:rgba(124,58,237,.15);
}

/* ============================================================
   CINEMÁTICAS — Estilo película pixel art
   ============================================================ */
#cinematic-overlay{position:fixed;inset:0;background:#000;z-index:9998;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1rem}
.cinematic-bars{position:absolute;left:0;right:0;background:#000;z-index:1}
.cinematic-bar-top{top:0;height:10%;background:linear-gradient(180deg,#000 60%,transparent)}
.cinematic-bar-bottom{bottom:0;height:10%;background:linear-gradient(0deg,#000 60%,transparent)}
.cinematic-content{position:relative;z-index:2;max-width:480px;width:100%;display:flex;flex-direction:column;gap:.6rem;padding:0 .5rem}
.cinematic-title{text-align:center;font-size:1.2rem;font-weight:900;letter-spacing:3px;text-transform:uppercase;opacity:0;animation:cinematicFadeIn 1s ease forwards;background:linear-gradient(135deg,#f59e0b,#fbbf24,#f59e0b);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:cinematicFadeIn 1s ease forwards,titleShine 4s ease infinite;filter:drop-shadow(0 0 12px rgba(245,158,11,.5));margin-bottom:.5rem}
.cinematic-line{display:flex;align-items:flex-start;gap:.6rem;opacity:0;padding:.6rem .8rem;background:rgba(124,58,237,.06);border-left:3px solid rgba(124,58,237,.25);border-radius:0 var(--radius) var(--radius) 0}
.cinematic-line.visible{animation:cinematicLineIn .6s ease forwards}
.cinematic-speaker-icon{font-size:1.6rem;flex-shrink:0;color:var(--color-accent)}
.cinematic-speaker-name{font-size:.6rem;color:var(--color-accent);font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:.15rem}
.cinematic-text{font-size:.82rem;color:var(--color-text);line-height:1.5;font-style:italic}
.cinematic-btn{margin-top:1.25rem;align-self:center;opacity:0;min-width:200px}
.cinematic-btn.visible{animation:cinematicFadeIn .5s ease forwards}
.cinematic-divider{width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--color-primary),var(--color-accent),var(--color-primary),transparent);margin:.3rem auto;opacity:0}
.cinematic-divider.visible{animation:cinematicFadeIn .5s ease forwards}
@keyframes cinematicFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes cinematicLineIn{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}

/* ============================================================
   COMBATE — Mejoras visuales avanzadas
   ============================================================ */

/* Fondo de batalla con partículas sutiles */
#screen-battle{background:radial-gradient(ellipse at top,rgba(31,13,13,.6) 0%,#000 70%);position:relative}
#screen-battle::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 80%,rgba(124,58,237,.05) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(239,68,68,.05) 0%,transparent 50%);pointer-events:none;z-index:0}
#screen-battle .battle-layout{position:relative;z-index:1}

/* Idle float animation para combatientes */
.combatant-card{overflow:visible;position:relative}
.player-card .combatant-icon{animation:combatIdle 2.5s ease-in-out infinite}
.enemy-card .combatant-icon{animation:combatIdle 2.5s ease-in-out infinite;animation-delay:.5s}
@keyframes combatIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* Cards con glow sutil */
.player-card{background:linear-gradient(145deg,rgba(59,130,246,.06),rgba(124,58,237,.03));border-color:rgba(59,130,246,.3);box-shadow:0 0 15px rgba(59,130,246,.08)}
.enemy-card{background:linear-gradient(145deg,rgba(239,68,68,.06),rgba(124,58,237,.03));border-color:rgba(239,68,68,.3);box-shadow:0 0 15px rgba(239,68,68,.08)}
.boss-card{box-shadow:0 0 25px rgba(239,68,68,.2),0 0 50px rgba(239,68,68,.05)}

/* VS con energía visual */
.vs-text{position:relative;font-size:1.1rem;color:rgba(245,158,11,.6);text-shadow:0 0 10px rgba(245,158,11,.3)}
.vs-text::before{content:'';position:absolute;top:50%;left:50%;width:2px;height:120%;background:linear-gradient(180deg,transparent,rgba(245,158,11,.15),rgba(124,58,237,.15),transparent);transform:translate(-50%,-50%);pointer-events:none}

/* Barras de HP con transición suave y daño reciente */
.progress-fill{transition:width .6s cubic-bezier(.4,0,.2,1)}
.progress-fill.hp{position:relative;box-shadow:0 0 6px rgba(239,68,68,.3)}
.progress-fill.hp.low-hp{box-shadow:0 0 10px rgba(239,68,68,.5);animation:hpCriticalPulse 1s ease infinite}
@keyframes hpCriticalPulse{0%,100%{box-shadow:0 0 8px rgba(239,68,68,.3)}50%{box-shadow:0 0 16px rgba(239,68,68,.6)}}

/* Botones de combate mejorados */
.battle-action-btn{transition:all .15s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.battle-action-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.03),transparent);pointer-events:none}
.battle-action-btn:active:not(:disabled){transform:scale(.93);filter:brightness(1.1)}
.attack-btn{position:relative;animation:attackBtnPulse 2.5s ease infinite}
@keyframes attackBtnPulse{0%,100%{box-shadow:inset 0 0 0 rgba(239,68,68,0)}50%{box-shadow:inset 0 0 12px rgba(239,68,68,.1)}}
.skill-btn:active:not(:disabled){box-shadow:0 0 15px rgba(124,58,237,.4)}
.item-btn:active:not(:disabled){box-shadow:0 0 15px rgba(16,185,129,.4)}

/* Log de combate mejorado */
.battle-log{border-color:rgba(124,58,237,.12);background:rgba(13,13,26,.95)}
.battle-log-entry{border-bottom-color:rgba(124,58,237,.06);padding:.2rem .3rem}
.battle-log-entry.player-action{text-shadow:0 0 8px rgba(16,185,129,.2)}
.battle-log-entry.enemy-action{text-shadow:0 0 8px rgba(239,68,68,.2)}
.battle-log-entry.success{text-shadow:0 0 10px rgba(245,158,11,.3)}

/* Turn indicator mejorado */
.turn-indicator{font-size:.82rem;letter-spacing:1px}
.turn-indicator.player-turn{animation:turnGlowGreen 1.5s ease infinite;box-shadow:0 0 12px rgba(16,185,129,.1)}
.turn-indicator.enemy-turn{animation:turnGlowRed 1.5s ease infinite;box-shadow:0 0 12px rgba(239,68,68,.1)}
@keyframes turnGlowGreen{0%,100%{box-shadow:0 0 8px rgba(16,185,129,.1)}50%{box-shadow:0 0 16px rgba(16,185,129,.2)}}
@keyframes turnGlowRed{0%,100%{box-shadow:0 0 8px rgba(239,68,68,.1)}50%{box-shadow:0 0 16px rgba(239,68,68,.2)}}

/* Combo indicator con glow progresivo */
.combo-indicator{animation:comboGlow 1s ease infinite}
@keyframes comboGlow{0%,100%{box-shadow:0 0 8px rgba(245,158,11,.1)}50%{box-shadow:0 0 18px rgba(245,158,11,.25)}}

/* Companion display con brillo */
.companion-display{animation:companionFloat 3s ease-in-out infinite}
@keyframes companionFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

/* Streak indicator mejorado */
.battle-log div[style*="text-align:center"]{border:1px solid rgba(245,158,11,.15)}

/* Resultado de batalla mejorado */
.battle-result{background:rgba(13,13,26,.95);border-color:rgba(124,58,237,.2)}
.result-victory{animation:victoryPulse 1.5s ease infinite}
@keyframes victoryPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.result-defeat{animation:defeatShake .5s ease;filter:drop-shadow(0 0 15px rgba(239,68,68,.4))}
@keyframes defeatShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}

/* Damage float mejorado */
.damage-float{font-size:1.3rem;text-shadow:0 0 8px rgba(239,68,68,.5),2px 2px 0 #000;animation:damageFloatUp 1.2s cubic-bezier(.2,0,.3,1) forwards}
.damage-float.critical-float{font-size:1.6rem;text-shadow:0 0 12px rgba(245,158,11,.6),2px 2px 0 #000;animation:critDamageFloat 1.2s cubic-bezier(.2,0,.3,1) forwards}
@keyframes critDamageFloat{0%{opacity:1;transform:translateX(-50%) translateY(0) scale(1.3)}20%{transform:translateX(-50%) translateY(-10px) scale(1)}100%{opacity:0;transform:translateX(-50%) translateY(-60px) scale(.8)}}

/* Element effectiveness con glow */
.combatant-card div[style*="EFECTIVA"]{animation:effectiveGlow 1.5s ease infinite}
.combatant-card div[style*="DÉBIL"]{animation:weakGlow 1.5s ease infinite}
@keyframes effectiveGlow{0%,100%{text-shadow:0 0 4px rgba(16,185,129,.3)}50%{text-shadow:0 0 10px rgba(16,185,129,.5)}}
@keyframes weakGlow{0%,100%{text-shadow:0 0 4px rgba(239,68,68,.3)}50%{text-shadow:0 0 10px rgba(239,68,68,.5)}}

/* Shield display con brillo */
.shield-display{animation:shieldPulse 2s ease infinite}
@keyframes shieldPulse{0%,100%{text-shadow:0 0 4px rgba(59,130,246,.2)}50%{text-shadow:0 0 10px rgba(59,130,246,.4)}}

/* Screen shake para impactos (se aplica via JS) */
@keyframes screenShake{0%,100%{transform:translate(0)}10%{transform:translate(-2px,-1px)}30%{transform:translate(2px,1px)}50%{transform:translate(-1px,2px)}70%{transform:translate(1px,-1px)}90%{transform:translate(-1px,1px)}}
.screen-shake{animation:screenShake .3s ease}

/* Freeze frame para críticos */
@keyframes freezeFrame{0%{filter:brightness(1.8) contrast(1.2)}100%{filter:brightness(1) contrast(1)}}
.freeze-frame{animation:freezeFrame .15s ease}

/* ============================================================
   EFECTOS ESPECIALES GLOBALES — Botones, acciones, feedback
   ============================================================ */

/* Ripple effect en todos los botones */
.btn,.action-btn,.battle-action-btn,.back-btn,.tab-btn,.inventory-tab,.cc-swatch,.cc-option,.cc-card{
  position:relative;overflow:hidden
}
.btn::before,.action-btn::before,.battle-action-btn::before{
  content:'';position:absolute;top:50%;left:50%;width:0;height:0;
  background:rgba(255,255,255,.15);border-radius:50%;
  transform:translate(-50%,-50%);transition:width .4s ease,height .4s ease,opacity .4s ease;
  opacity:0;pointer-events:none
}
.btn:active::before,.action-btn:active::before,.battle-action-btn:active::before{
  width:200%;height:200%;opacity:1;transition:width 0s,height 0s,opacity 0s
}

/* Glow pulse en botones primarios */
.btn-primary{transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 0 0 rgba(124,58,237,0)}
.btn-primary:active{box-shadow:0 0 20px rgba(124,58,237,.4);transform:scale(.95)}
.btn-accent{transition:all .2s cubic-bezier(.4,0,.2,1)}
.btn-accent:active{box-shadow:0 0 20px rgba(245,158,11,.4);transform:scale(.95)}
.btn-danger:active{box-shadow:0 0 20px rgba(239,68,68,.4);transform:scale(.95)}
.btn-gold:active{box-shadow:0 0 20px rgba(245,158,11,.5);transform:scale(.95)}
.btn-outline:active{box-shadow:0 0 15px rgba(124,58,237,.2);transform:scale(.96);background:rgba(124,58,237,.08)}
.btn-ghost:active{transform:scale(.96);background:rgba(124,58,237,.06)}

/* Action buttons con efecto de presión + brillo */
.action-btn{transition:all .15s cubic-bezier(.4,0,.2,1)}
.action-btn:active{transform:scale(.9);box-shadow:0 0 15px rgba(124,58,237,.3);filter:brightness(1.15)}
.action-btn .action-btn-icon{transition:transform .15s}
.action-btn:active .action-btn-icon{transform:scale(1.15)}

/* Back button con efecto */
.back-btn{transition:all .15s}
.back-btn:active{transform:scale(.93);box-shadow:0 0 10px rgba(124,58,237,.2)}

/* Tab buttons con transición suave */
.tab-btn{transition:all .2s cubic-bezier(.4,0,.2,1)}
.tab-btn:active{transform:scale(.93)}
.tab-btn.active{box-shadow:0 0 10px rgba(124,58,237,.3)}

/* Inventory tabs */
.inventory-tab{transition:all .15s}
.inventory-tab:active{transform:scale(.93)}
.inventory-tab.active{box-shadow:0 0 8px rgba(124,58,237,.3)}

/* Item cards con efecto de selección */
.item-card{transition:all .15s cubic-bezier(.4,0,.2,1)}
.item-card:active{transform:scale(.96);box-shadow:0 0 12px rgba(124,58,237,.25);border-color:rgba(124,58,237,.4)}

/* Shop items */
.shop-item{transition:all .15s cubic-bezier(.4,0,.2,1)}
.shop-item:active{transform:scale(.96);box-shadow:0 0 12px rgba(245,158,11,.2);border-color:rgba(245,158,11,.4)}

/* Zone cards en mapa */
.zone-card:active:not(.locked),.map-grid div:active{transform:scale(.96);box-shadow:0 0 12px rgba(124,58,237,.2)}

/* Class cards en creación */
.class-card{transition:all .2s cubic-bezier(.4,0,.2,1)}
.class-card:active{transform:scale(.96)}
.class-card.selected{box-shadow:0 0 20px rgba(245,158,11,.3);transform:scale(1.01)}

/* CC swatches con pop */
.cc-swatch{transition:all .15s cubic-bezier(.4,0,.2,1)}
.cc-swatch:active{transform:scale(1.2)}
.cc-swatch.selected{transform:scale(1.15);box-shadow:0 0 12px rgba(245,158,11,.5)}

/* CC options con efecto */
.cc-option{transition:all .15s}
.cc-option:active{transform:scale(.94);box-shadow:0 0 8px rgba(124,58,237,.2)}
.cc-option.selected{box-shadow:0 0 10px rgba(245,158,11,.3)}

/* CC cards */
.cc-card{transition:all .15s}
.cc-card:active{transform:scale(.96)}
.cc-card.selected{box-shadow:0 0 12px rgba(245,158,11,.3)}

/* Skill nodes con efecto */
.skill-node{transition:all .15s cubic-bezier(.4,0,.2,1)}
.skill-node.available:active{transform:scale(.92);box-shadow:0 0 15px rgba(124,58,237,.4)}
.skill-node.unlocked{box-shadow:0 0 8px rgba(16,185,129,.2)}

/* Save slots */
.save-slot{transition:all .15s;cursor:pointer}
.save-slot:active{transform:scale(.98);box-shadow:0 0 10px rgba(124,58,237,.15)}

/* Quest cards */
.quest-card{transition:all .15s}

/* Toast notifications con entrada mejorada */
.toast{animation:toastSlideIn .35s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 20px rgba(0,0,0,.4),0 0 10px rgba(124,58,237,.1)}
@keyframes toastSlideIn{from{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}
.toast.removing{animation:toastSlideOut .25s ease forwards}
@keyframes toastSlideOut{to{opacity:0;transform:translateY(20px) scale(.9)}}

/* Modal entrada mejorada */
.modal{animation:modalPopIn .3s cubic-bezier(.4,0,.2,1)}
@keyframes modalPopIn{from{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* Level up card con entrada épica */
.level-up-card{animation:levelUpPop .5s cubic-bezier(.2,0,.2,1)}
@keyframes levelUpPop{0%{opacity:0;transform:scale(.5)}60%{transform:scale(1.05)}100%{opacity:1;transform:scale(1)}}

/* Badge con micro-animación al aparecer */
.new-badge{animation:badgePop .3s cubic-bezier(.4,0,.2,1)}
@keyframes badgePop{from{transform:scale(0)}to{transform:scale(1)}}

/* HUD bars con brillo al cambiar */
.hud-bar-fill{transition:width .5s cubic-bezier(.4,0,.2,1)}

/* Form inputs con efecto focus */
.form-input{transition:all .2s cubic-bezier(.4,0,.2,1)}
.form-input:focus{transform:scale(1.01);box-shadow:0 0 0 3px rgba(245,158,11,.15),0 0 15px rgba(124,58,237,.1)}

/* Scroll suave global */
.screen{scroll-behavior:smooth}

/* Hover glow para desktop */
@media(min-width:769px){
  .btn:hover{filter:brightness(1.05)}
  .btn-primary:hover{box-shadow:0 0 15px rgba(124,58,237,.3)}
  .btn-accent:hover{box-shadow:0 0 15px rgba(245,158,11,.3)}
  .action-btn:hover{box-shadow:0 0 12px rgba(124,58,237,.2);filter:brightness(1.08);transform:translateY(-2px)}
  .item-card:hover{box-shadow:0 0 12px rgba(124,58,237,.2);transform:translateY(-2px)}
  .shop-item:hover{box-shadow:0 0 12px rgba(245,158,11,.15);transform:translateY(-2px)}
  .class-card:hover{box-shadow:0 0 15px rgba(124,58,237,.25);transform:translateY(-3px)}
  .skill-node.available:hover{box-shadow:0 0 15px rgba(124,58,237,.3);transform:translateY(-2px)}
  .tab-btn:hover:not(.active){background:rgba(124,58,237,.1)}
  .back-btn:hover{box-shadow:0 0 8px rgba(124,58,237,.15)}
}

/* ============================================================
   STUDIO SPLASH — NoiDah Studios intro
   ============================================================ */
#screen-studio_splash.active{
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  background:#0A0A0A;overflow:hidden;gap:0
}
.studio-splash-content{
  display:flex;flex-direction:column;align-items:center;gap:.75rem;
  opacity:0;animation:studioFadeIn 2s cubic-bezier(.25,.46,.45,.94) .5s forwards
}
.studio-monogram{
  font-size:3.5rem;font-weight:900;letter-spacing:4px;
  background:linear-gradient(135deg,#00AEEF,#8A2BE2);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  filter:drop-shadow(0 0 25px rgba(0,174,239,.4)) drop-shadow(0 0 50px rgba(138,43,226,.2));
  opacity:0;transform:scale(.8);
  animation:studioMonoIn 1.8s cubic-bezier(.25,.46,.45,.94) .6s forwards,studioGlow 3s ease-in-out 2.4s infinite
}
.studio-line{
  width:0;height:2px;
  background:linear-gradient(90deg,transparent,#00AEEF,#8A2BE2,transparent);
  opacity:0;animation:studioLineExpand 1.2s cubic-bezier(.25,.46,.45,.94) 1.6s forwards
}
.studio-name{
  font-size:1.1rem;font-weight:300;letter-spacing:6px;text-transform:uppercase;
  color:#F0F0F5;opacity:0;transform:translateY(8px);
  animation:studioSlideUp 1.2s cubic-bezier(.25,.46,.45,.94) 2.2s forwards
}
.studio-tagline{
  font-size:.7rem;letter-spacing:2px;
  color:#B0B0C0;opacity:0;transform:translateY(8px);
  animation:studioSlideUp 1s cubic-bezier(.25,.46,.45,.94) 2.8s forwards
}
@keyframes studioFadeIn{from{opacity:0}to{opacity:1}}
@keyframes studioMonoIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
@keyframes studioLineExpand{from{width:0;opacity:0}to{width:80px;opacity:1}}
@keyframes studioSlideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes studioGlow{0%,100%{filter:drop-shadow(0 0 20px rgba(0,174,239,.3)) drop-shadow(0 0 40px rgba(138,43,226,.15))}50%{filter:drop-shadow(0 0 35px rgba(0,174,239,.5)) drop-shadow(0 0 60px rgba(138,43,226,.3))}}