/* ============================================================
   TITAN PULSE — Hoja de estilos premium
   ============================================================ */
:root{
  --c-bg:#05060e;
  --c-cyan:#19e6ff;
  --c-magenta:#ff2d78;
  --c-amber:#ffb728;
  --c-violet:#7b4dff;
  --c-titan:#ff5a1f;
  --c-text:#eaf6ff;
  --c-dim:#8aa3c0;
  --glass:rgba(10,16,32,.72);
  --glass-border:rgba(110,200,255,.22);
  --font-display:'Orbitron',sans-serif;
  --font-ui:'Rajdhani',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--c-bg);font-family:var(--font-ui);color:var(--c-text)}
button{font-family:inherit;cursor:pointer}
kbd{font-family:var(--font-ui);font-weight:700;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);border-bottom-width:2px;border-radius:5px;padding:1px 7px;font-size:.8em;color:var(--c-cyan)}

/* ---------- Shell & canvas ---------- */
#game-shell{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% -10%,#101a36 0%,#05060e 65%)}
#game-canvas{width:100%;height:100%;max-width:100vw;max-height:100vh;object-fit:contain;display:block;image-rendering:auto}

.hidden{display:none!important}

/* ---------- Pantallas ---------- */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;z-index:20;text-align:center;padding:24px}
.screen-title{background:
  radial-gradient(ellipse at 50% 120%,rgba(123,77,255,.35) 0%,transparent 60%),
  radial-gradient(ellipse at 50% -20%,rgba(25,230,255,.18) 0%,transparent 55%),
  linear-gradient(180deg,#070a18 0%,#0b1026 55%,#13082a 100%)}
.title-bg-glow{position:absolute;inset:0;pointer-events:none;background:
  repeating-linear-gradient(0deg,transparent 0 46px,rgba(25,230,255,.04) 46px 47px),
  repeating-linear-gradient(90deg,transparent 0 46px,rgba(25,230,255,.04) 46px 47px);
  mask-image:radial-gradient(ellipse at 50% 60%,#000 30%,transparent 75%)}
.title-kicker{font-family:var(--font-display);font-size:clamp(.6rem,1.4vw,.85rem);letter-spacing:.55em;color:var(--c-dim);animation:fadeDown .8s ease both}
.game-logo{font-family:var(--font-display);font-weight:900;font-size:clamp(3rem,11vw,7.5rem);line-height:.95;letter-spacing:.02em;
  background:linear-gradient(180deg,#fff 0%,#9be9ff 38%,var(--c-cyan) 60%,#0b7fd4 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 28px rgba(25,230,255,.45)) drop-shadow(0 6px 0 rgba(6,40,80,.9));
  animation:logoPulse 3.2s ease-in-out infinite}
.game-logo span{background:linear-gradient(180deg,#ffe9b0 0%,var(--c-amber) 45%,var(--c-magenta) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 26px rgba(255,45,120,.5))}
@keyframes logoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
.title-sub{font-family:var(--font-display);font-size:clamp(.7rem,1.8vw,1.05rem);letter-spacing:.85em;color:var(--c-cyan);text-shadow:0 0 16px rgba(25,230,255,.6);margin-top:6px}
.title-hero-tag{font-weight:700;letter-spacing:.3em;font-size:clamp(.7rem,1.5vw,.95rem);color:var(--c-amber);
  border:1px solid rgba(255,183,40,.35);border-radius:999px;padding:8px 26px;background:rgba(255,183,40,.07);
  box-shadow:0 0 24px rgba(255,183,40,.15) inset}
.title-hero-tag i{margin-right:8px}
.title-footer{position:absolute;bottom:22px;font-size:.78rem;letter-spacing:.25em;color:var(--c-dim)}

/* Récords en el título */
.title-records{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:760px}
.title-records:empty{display:none}
.rec-card{display:flex;flex-direction:column;gap:2px;align-items:center;background:var(--glass);
  border:1px solid var(--glass-border);border-radius:10px;padding:8px 16px;min-width:120px;backdrop-filter:blur(4px)}
.rec-card .rec-name{font-family:var(--font-display);font-size:.6rem;letter-spacing:.2em;color:var(--c-dim)}
.rec-card .rec-vals{display:flex;gap:10px;align-items:center;font-weight:700}
.rec-card .rec-rank{font-family:var(--font-display);font-weight:900;color:var(--c-amber);font-size:1.1rem;text-shadow:0 0 10px rgba(255,183,40,.6)}
.rec-card .rec-time{color:var(--c-cyan);font-size:.95rem}
.rec-card .rec-cores{color:var(--c-violet);font-size:.85rem}
.rec-card.locked{opacity:.5}
.rec-card.locked .rec-rank{color:var(--c-dim);text-shadow:none}
.new-record{display:inline-block;font-family:var(--font-display);font-weight:900;font-size:.7rem;letter-spacing:.2em;
  color:#04121c;background:linear-gradient(135deg,#ffd14d,var(--c-amber));border-radius:6px;padding:2px 8px;margin-left:8px;
  animation:comboPop .3s ease}

.title-menu{display:flex;flex-direction:column;gap:14px;align-items:center}
.btn-primary,.btn-ghost{font-family:var(--font-display);font-weight:700;letter-spacing:.22em;font-size:clamp(.8rem,1.8vw,1rem);
  padding:16px 46px;border-radius:12px;transition:transform .15s,box-shadow .15s,background .15s;min-width:320px}
.btn-primary{border:none;color:#04121c;background:linear-gradient(135deg,#7df3ff 0%,var(--c-cyan) 45%,#0e9fe0 100%);
  box-shadow:0 0 26px rgba(25,230,255,.45),0 6px 0 #0a6da0}
.btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 0 40px rgba(25,230,255,.75),0 9px 0 #0a6da0}
.btn-primary:active{transform:translateY(2px);box-shadow:0 0 20px rgba(25,230,255,.4),0 2px 0 #0a6da0}
.btn-ghost{background:rgba(20,32,60,.55);color:var(--c-text);border:1px solid var(--glass-border)}
.btn-ghost:hover{background:rgba(35,55,95,.7);transform:translateY(-2px)}
.btn-primary i,.btn-ghost i{margin-right:10px}

/* ---------- Panel de controles ---------- */
.screen-panel{background:linear-gradient(180deg,rgba(6,9,22,.96),rgba(10,8,30,.97));overflow-y:auto;justify-content:flex-start;padding-top:48px}
.panel-title{font-family:var(--font-display);font-size:clamp(1.3rem,3.5vw,2.2rem);letter-spacing:.3em;
  color:var(--c-cyan);text-shadow:0 0 22px rgba(25,230,255,.55)}
.howto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;max-width:1100px;width:100%}
.howto-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:14px;padding:18px 16px;text-align:left;
  backdrop-filter:blur(6px);transition:transform .15s,border-color .15s}
.howto-card:hover{transform:translateY(-4px);border-color:var(--c-cyan)}
.howto-card i{font-size:1.5rem;color:var(--c-cyan);margin-bottom:8px}
.howto-card h3{font-family:var(--font-display);font-size:.85rem;letter-spacing:.12em;margin-bottom:6px}
.howto-card p{font-size:.92rem;color:var(--c-dim);line-height:1.45}
.howto-titan{border-color:rgba(255,90,31,.45)}
.howto-titan i{color:var(--c-titan)}

/* ---------- Overlays ---------- */
.screen-overlay{background:rgba(4,6,16,.82);backdrop-filter:blur(8px)}
.clear-kicker{font-family:var(--font-display);letter-spacing:.5em;color:var(--c-amber);font-size:clamp(.65rem,1.5vw,.9rem)}
.clear-title{font-family:var(--font-display);font-weight:900;font-size:clamp(2rem,6vw,4rem);
  background:linear-gradient(180deg,#fff,#9be9ff 50%,var(--c-cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 24px rgba(25,230,255,.5))}
.victory-title{background:linear-gradient(180deg,#fff6d8,#ffd14d 45%,var(--c-titan));-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 30px rgba(255,160,40,.6))}
.gameover-title{font-family:var(--font-display);font-weight:900;font-size:clamp(2rem,6vw,4rem);color:var(--c-magenta);
  text-shadow:0 0 30px rgba(255,45,120,.7)}
.gameover-sub{color:var(--c-dim);font-size:1.05rem;letter-spacing:.08em;max-width:520px}
.clear-stats{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.stat{background:var(--glass);border:1px solid var(--glass-border);border-radius:14px;padding:16px 26px;display:flex;flex-direction:column;gap:4px;min-width:130px}
.stat i{color:var(--c-cyan);font-size:1.2rem}
.stat span{font-family:var(--font-display);font-size:1.6rem;font-weight:700}
.stat label{font-size:.72rem;letter-spacing:.25em;color:var(--c-dim)}
.stat-rank span{color:var(--c-amber);text-shadow:0 0 18px rgba(255,183,40,.7)}

/* ---------- HUD ---------- */
.hud{position:absolute;inset:0;pointer-events:none;z-index:10;display:flex;flex-direction:column;justify-content:space-between;padding:18px 22px}
.hud-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.hud-vitals{display:flex;gap:12px;align-items:center}
.hud-portrait{width:58px;height:58px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#04121c;
  background:linear-gradient(135deg,#7df3ff,var(--c-cyan) 55%,#0e9fe0);box-shadow:0 0 18px rgba(25,230,255,.5);border:2px solid rgba(255,255,255,.5)}
.hud-portrait.titan-active{background:linear-gradient(135deg,#ffd14d,var(--c-titan));box-shadow:0 0 26px rgba(255,90,31,.8);animation:titanGlow .5s ease-in-out infinite alternate}
@keyframes titanGlow{from{transform:scale(1)}to{transform:scale(1.07)}}
.hud-bars{display:flex;flex-direction:column;gap:6px}
.bar-shell{position:relative;width:min(290px,32vw);height:18px;background:rgba(6,12,26,.8);border:1px solid var(--glass-border);border-radius:9px;overflow:hidden}
.bar-titan{width:min(210px,24vw);height:13px}
.bar-fill{height:100%;width:100%;border-radius:8px;transition:width .18s ease}
.bar-health .bar-fill{background:linear-gradient(90deg,#ff5a7e,var(--c-magenta));box-shadow:0 0 12px rgba(255,45,120,.6)}
.bar-energy .bar-fill{background:linear-gradient(90deg,#7df3ff,var(--c-cyan));box-shadow:0 0 12px rgba(25,230,255,.6)}
.bar-titan .bar-fill{background:linear-gradient(90deg,#ffd14d,var(--c-titan));box-shadow:0 0 12px rgba(255,90,31,.7);width:0}
.bar-titan.charged{animation:barReady .8s ease-in-out infinite alternate}
@keyframes barReady{from{box-shadow:0 0 4px rgba(255,160,40,.4)}to{box-shadow:0 0 16px rgba(255,160,40,.9)}}
.bar-label{position:absolute;inset:0;display:flex;align-items:center;padding-left:10px;font-size:.62rem;font-weight:700;letter-spacing:.3em;color:rgba(255,255,255,.85);text-shadow:0 1px 2px rgba(0,0,0,.8)}
.hud-center{font-family:var(--font-display);letter-spacing:.4em;font-size:clamp(.65rem,1.6vw,.95rem);color:var(--c-dim);padding-top:8px}
.hud-collect{display:flex;gap:10px}
.hud-chip{display:flex;align-items:center;gap:8px;background:var(--glass);border:1px solid var(--glass-border);border-radius:999px;
  padding:8px 16px;font-family:var(--font-display);font-weight:700;font-size:.95rem;backdrop-filter:blur(4px)}
.hud-chip i{color:var(--c-amber)}
.hud-cores i{color:var(--c-violet)}
.hud-bottom{display:flex;align-items:flex-end;justify-content:space-between}

/* Dock de poderes */
.power-dock{display:flex;gap:10px}
.power-slot{position:relative;width:54px;height:54px;border-radius:13px;background:var(--glass);border:1px solid var(--glass-border);
  display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:var(--c-cyan);backdrop-filter:blur(4px)}
.power-slot kbd{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-size:.55rem;padding:0 5px;white-space:nowrap}
.power-slot .cd-ring{position:absolute;inset:0;border-radius:13px;background:rgba(4,8,18,.78);transform-origin:bottom;transform:scaleY(0);pointer-events:none}
.power-slot.on-cd .cd-ring{transform:scaleY(var(--cd,0))}
.power-slot.active-power{border-color:var(--c-amber);box-shadow:0 0 18px rgba(255,183,40,.55);color:var(--c-amber)}
.power-titan{color:var(--c-titan)}
.power-titan.ready{border-color:var(--c-titan);box-shadow:0 0 20px rgba(255,90,31,.65);animation:barReady .7s ease-in-out infinite alternate}
.combo-meter{font-family:var(--font-display);font-weight:900;font-size:1.5rem;color:var(--c-amber);
  text-shadow:0 0 18px rgba(255,183,40,.8);animation:comboPop .25s ease}
@keyframes comboPop{from{transform:scale(1.6)}to{transform:scale(1)}}

/* Banner de poder */
.power-banner{position:absolute;top:24%;left:50%;transform:translateX(-50%);z-index:15;pointer-events:none;
  font-family:var(--font-display);font-weight:900;font-size:clamp(1.2rem,4vw,2.4rem);letter-spacing:.3em;color:#fff;
  text-shadow:0 0 26px var(--c-cyan),0 0 60px var(--c-cyan);animation:bannerIn 1.5s ease both}
.power-banner.titan-banner{text-shadow:0 0 26px var(--c-titan),0 0 60px var(--c-titan)}
@keyframes bannerIn{0%{opacity:0;transform:translateX(-50%) scale(1.7)}15%{opacity:1;transform:translateX(-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-22px)}}

/* ---------- Flash de daño ---------- */
.damage-flash{position:absolute;inset:0;z-index:14;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at center,transparent 40%,rgba(255,45,90,.55) 100%)}
.damage-flash.hit{animation:dmgFlash .4s ease-out}
@keyframes dmgFlash{0%{opacity:1}100%{opacity:0}}

/* ---------- Tutorial contextual ---------- */
.tutorial-tip{position:absolute;left:50%;bottom:120px;transform:translateX(-50%);z-index:13;pointer-events:none;
  background:var(--glass);border:1px solid var(--glass-border);border-radius:12px;padding:12px 22px;backdrop-filter:blur(6px);
  font-weight:600;letter-spacing:.05em;color:var(--c-text);max-width:80vw;text-align:center;
  box-shadow:0 0 26px rgba(25,230,255,.2);animation:tipIn .35s ease both}
.tutorial-tip kbd{margin:0 2px}
.tutorial-tip i{color:var(--c-cyan);margin-right:6px}
@keyframes tipIn{from{opacity:0;transform:translateX(-50%) translateY(14px)}to{opacity:1;transform:translateX(-50%)}}
.tutorial-tip.out{animation:tipOut .35s ease forwards}
@keyframes tipOut{to{opacity:0;transform:translateX(-50%) translateY(14px)}}

/* ---------- Fader ---------- */
.fader{position:absolute;inset:0;background:#000;z-index:40;pointer-events:none;opacity:0;transition:opacity .45s ease}
.fader.on{opacity:1;pointer-events:all}

/* ---------- Táctil ---------- */
.touch-controls{position:absolute;inset:auto 0 0 0;z-index:30;display:flex;justify-content:space-between;padding:0 14px 16px}
.touch-left,.touch-right{display:flex;gap:10px;align-items:flex-end}
.tbtn{width:64px;height:64px;border-radius:50%;border:1px solid var(--glass-border);background:rgba(14,24,46,.6);
  color:var(--c-cyan);font-size:1.5rem;backdrop-filter:blur(4px);touch-action:none;user-select:none;-webkit-user-select:none}
.tbtn:active{background:rgba(25,230,255,.3)}
.tbtn-sm{width:52px;height:52px;font-size:1.1rem}

@media (pointer:coarse){ .power-slot kbd{display:none} }
@media (max-width:760px){
  .hud{padding:10px 12px}
  .hud-center{display:none}
  .bar-shell{width:42vw}.bar-titan{width:32vw}
  .hud-portrait{width:44px;height:44px;font-size:1.1rem}
  .power-dock{gap:6px}.power-slot{width:42px;height:42px;font-size:1rem}
  .btn-primary,.btn-ghost{min-width:240px;padding:13px 30px}
}