/* ══════════════════════════════════════════════════════════════ */
/* VBC PROTOCOL — Combined Stylesheet                           */
/* Auto-extracted from monolith — DO NOT EDIT, edit source       */
/* ══════════════════════════════════════════════════════════════ */

/* ── head-main ── */
/*
 * ═══════════════════════════════════════════════════════════════
 *  VBC PROTOCOL · SAO HOLO FUSION
 *  En el universo SAO, las pantallas holográficas son proyecciones
 *  sensoriales enviadas directamente al cerebro por el NerveGear /
 *  AmuSphere. Los jugadores interactúan con su inventario, stats y
 *  habilidades como si flotaran en el aire real.
 *  Aquí fusionamos esa estética con el sistema VBC Protocol.
 * ═══════════════════════════════════════════════════════════════
 */

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
:root{
  --cyan:#00c8ff;--cyan2:rgba(0,200,255,0.15);--cyan3:rgba(0,200,255,0.05);
  --green:#00ffaa;--green2:rgba(0,255,170,0.15);
  --gold:#e2c36a;--gold2:rgba(226,195,106,0.15);
  --purple:#9955ff;--purple2:rgba(153,85,255,0.15);
  --violet:#b46fff;
  --red:#ff4444;--orange:#ff7722;
  --bg:#000810;--bg2:rgba(0,20,50,0.55);--bg3:rgba(0,0,0,0.4);
  --s2:#0a0a1c;
  --border:rgba(0,200,255,0.25);--border2:rgba(0,200,255,0.5);
  --text:#c8eeff;--text2:rgba(0,200,255,0.6);--text3:rgba(0,200,255,0.35);
  --muted:rgba(255,255,255,0.38);
  --mono:'Share Tech Mono',monospace;--sans:'Rajdhani',sans-serif;
}
html,body{width:100%;min-height:100vh;background:var(--bg);font-family:var(--sans);color:var(--text);overflow-x:hidden;}

/* Noise texture */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
}

#bgCanvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;}
.app{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;}

/* ══ TOP NAV ══ */
.topnav{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 20px;border-bottom:1px solid var(--border);
  background:rgba(0,5,14,0.92);backdrop-filter:blur(16px);
  position:sticky;top:0;z-index:100;
  box-shadow:0 0 24px rgba(0,200,255,0.08);
}
.nav-brand{display:flex;align-items:center;gap:10px;}
.core-dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green),0 0 24px rgba(0,255,170,0.3);animation:corePulse 2s ease-in-out infinite;flex-shrink:0;}
@keyframes corePulse{0%,100%{box-shadow:0 0 8px var(--green),0 0 16px rgba(0,255,170,0.2);}50%{box-shadow:0 0 16px var(--green),0 0 32px rgba(0,255,170,0.5);}}
.brand-txt{font-size:15px;font-weight:700;letter-spacing:.3em;color:#7be3ff;text-transform:uppercase;}
.brand-sub{font-family:var(--mono);font-size:8px;color:rgba(180,100,255,0.6);letter-spacing:.2em;display:block;}

.nav-tabs{display:flex;gap:4px;}
.nav-tab{
  padding:7px 13px;border:1px solid var(--border);border-radius:8px;
  background:var(--bg3);color:var(--text2);font-family:var(--sans);font-size:11px;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  transition:all .2s;white-space:nowrap;
}
.nav-tab:hover{border-color:var(--border2);color:var(--cyan);background:var(--cyan2);}
.nav-tab.active{border-color:var(--green);color:var(--green);background:var(--green2);}

.nav-right{display:flex;align-items:center;gap:10px;}

/* 💎 Diamond VBC badge — SAO currency style */
.vbc-badge{
  display:flex;align-items:center;gap:7px;padding:6px 12px;
  border:1px solid rgba(226,195,106,.45);border-radius:8px;
  background:linear-gradient(135deg,rgba(226,195,106,.12),rgba(153,85,255,.08));
  position:relative;overflow:hidden;cursor:pointer;
  transition:all .25s;
}
.vbc-badge::before{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(226,195,106,0.2),transparent);
  transition:left .5s;
}
.vbc-badge:hover::before{left:100%;}
.vbc-badge:hover{border-color:rgba(226,195,106,.8);box-shadow:0 0 16px rgba(226,195,106,.2);}
.diamond-icon{font-size:14px;animation:diamondSpin 4s ease-in-out infinite;}
@keyframes diamondSpin{
  0%,100%{transform:scale(1) rotate(0deg);filter:brightness(1);}
  25%{transform:scale(1.15) rotate(5deg);filter:brightness(1.4);}
  50%{transform:scale(1) rotate(0deg);filter:brightness(1);}
  75%{transform:scale(1.1) rotate(-5deg);filter:brightness(1.3);}
}
.vbc-bal{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--gold);}
.vbc-lbl{font-family:var(--mono);font-size:8px;color:rgba(226,195,106,.5);letter-spacing:.1em;}
.nav-time{font-family:var(--mono);font-size:10px;color:var(--text3);letter-spacing:.1em;}

/* ══ SAO HOLO OVERLAY TOGGLE ══ */
.sao-toggle{
  display:flex;align-items:center;gap:5px;padding:6px 11px;
  border:1px solid rgba(180,100,255,.4);border-radius:8px;
  background:rgba(80,0,160,0.15);color:var(--violet);
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.08em;
  cursor:pointer;transition:all .2s;
}
.sao-toggle:hover{border-color:rgba(180,100,255,.8);background:rgba(120,40,255,.25);box-shadow:0 0 14px rgba(140,60,255,.25);}
.sao-toggle.active{border-color:var(--violet);background:rgba(180,100,255,.2);}

/* ══ SCREENS ══ */
.screen{display:none;padding:20px;max-width:1100px;margin:0 auto;width:100%;}
.screen.active{display:block;}

/* ══ SECTION TITLE ══ */
.s-title{font-family:var(--mono);font-size:9px;letter-spacing:.25em;color:var(--text2);text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:10px;}
.s-title::before{content:'';display:block;width:20px;height:1px;background:rgba(0,200,255,.4);}
.s-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(0,200,255,.2),transparent);}

/* ══ PANEL ══ */
.panel{
  background:var(--bg2);border:1px solid var(--border);border-radius:12px;
  overflow:hidden;position:relative;backdrop-filter:blur(12px);
  box-shadow:0 0 0 1px rgba(0,200,255,.08),0 0 30px rgba(0,200,255,.06),inset 0 1px 0 rgba(255,255,255,.06);
}
.panel-h{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--border);background:rgba(0,60,120,.08);
}
.panel-title{font-size:13px;font-weight:700;letter-spacing:.15em;color:#7be3ff;text-transform:uppercase;}
.panel-sub{font-family:var(--mono);font-size:9px;color:var(--text3);letter-spacing:.1em;}
.panel-body{padding:16px;}
.corner-d{position:absolute;width:10px;height:10px;pointer-events:none;}
.corner-d.tl{top:6px;left:6px;border-top:1.5px solid var(--border2);border-left:1.5px solid var(--border2);}
.corner-d.tr{top:6px;right:6px;border-top:1.5px solid var(--border2);border-right:1.5px solid var(--border2);}
.corner-d.bl{bottom:6px;left:6px;border-bottom:1.5px solid var(--border2);border-left:1.5px solid var(--border2);}
.corner-d.br{bottom:6px;right:6px;border-bottom:1.5px solid var(--border2);border-right:1.5px solid var(--border2);}

/* ══ SCAN LINE ══ */
.scan{position:absolute;top:0;left:0;right:0;height:1.5px;background:linear-gradient(90deg,transparent 0%,rgba(0,200,255,.7) 50%,transparent 100%);animation:scanDown 4s linear infinite;pointer-events:none;z-index:10;}
@keyframes scanDown{0%{top:0;opacity:1;}90%{opacity:.4;}100%{top:100%;opacity:0;}}

/* ══ GRID ══ */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
@media(max-width:768px){.g2,.g3{grid-template-columns:1fr;}.g4{grid-template-columns:repeat(2,1fr);}.nav-tabs{gap:2px;}.nav-tab{padding:6px 9px;font-size:10px;}.sao-toggle{display:none;}}

/* ══ PROFILE SCREEN ══ */
.hero-row{display:flex;align-items:center;gap:20px;margin-bottom:20px;}
.avatar-wrap{position:relative;flex-shrink:0;}
.avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,rgba(0,200,255,.15),rgba(153,85,255,.15));border:2px solid rgba(0,200,255,.3);display:flex;align-items:center;justify-content:center;font-size:28px;}
.avatar-ring{position:absolute;inset:-4px;border-radius:50%;border:1.5px solid rgba(0,200,255,.3);animation:ringPulse 3s ease-in-out infinite;}
@keyframes ringPulse{0%,100%{transform:scale(1);opacity:.6;}50%{transform:scale(1.06);opacity:1;}}
.hero-info{flex:1;}
.hero-name{font-size:20px;font-weight:800;letter-spacing:-.01em;margin-bottom:4px;}
.hero-level{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.level-badge{font-family:var(--mono);font-size:10px;padding:3px 8px;border:1px solid rgba(0,200,255,.3);border-radius:4px;color:var(--cyan);}
.tier-badge{font-family:var(--mono);font-size:9px;padding:3px 8px;border-radius:4px;font-weight:700;letter-spacing:.05em;}
.tier-badge.galactico{background:rgba(255,215,0,.12);border:1px solid rgba(255,215,0,.3);color:var(--gold);}
.tier-badge.platino{background:rgba(180,100,255,.12);border:1px solid rgba(180,100,255,.3);color:var(--violet);}
.tier-badge.oro{background:rgba(226,195,106,.12);border:1px solid rgba(226,195,106,.3);color:var(--gold);}
.tier-badge.plata{background:rgba(180,180,200,.1);border:1px solid rgba(180,180,200,.25);color:#b8c8d8;}
.tier-badge.bronce{background:rgba(205,127,50,.1);border:1px solid rgba(205,127,50,.25);color:#cc8850;}
.hero-tagline{font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--text3);text-transform:uppercase;}

.stat-row{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.stat-item{}
.stat-hdr{display:flex;justify-content:space-between;margin-bottom:4px;}
.stat-name{font-family:var(--mono);font-size:9px;color:var(--text3);letter-spacing:.14em;}
.stat-val{font-family:var(--mono);font-size:10px;font-weight:600;}
.bar-bg{height:4px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;}
.bar-fill{height:100%;border-radius:3px;transition:width .8s ease;}
.bar-fill.str{background:linear-gradient(90deg,#ff4422,#ff8844);}
.bar-fill.xp{background:linear-gradient(90deg,var(--cyan),rgba(0,200,255,.5));}
.bar-fill.cond{background:linear-gradient(90deg,var(--purple),rgba(153,85,255,.5));}

.stat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.scard{background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:8px;padding:10px 12px;text-align:center;}
.scard-val{font-family:var(--mono);font-size:16px;font-weight:700;line-height:1;}
.scard-val.gold{color:var(--gold);}
.scard-val.cyan{color:var(--cyan);}
.scard-val.green{color:var(--green);}
.scard-lbl{font-family:var(--mono);font-size:7px;color:var(--text3);margin-top:4px;letter-spacing:.1em;}

/* Equipped skill slots */
.eq-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;}
.eq-slot{
  aspect-ratio:1;background:rgba(0,0,30,.5);border:1px solid rgba(0,200,255,.15);
  border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  cursor:pointer;transition:all .2s;position:relative;
}
.eq-slot:hover{border-color:rgba(0,200,255,.4);background:rgba(0,30,80,.4);}
.eq-slot.has-skill{border-color:rgba(0,255,170,.3);background:rgba(0,60,40,.25);}
.eq-lbl{font-family:var(--mono);font-size:7px;color:var(--text3);letter-spacing:.06em;}
.eq-dot{position:absolute;top:3px;right:3px;width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 5px var(--green);}

/* Log area */
.log-area{display:flex;flex-direction:column;gap:3px;}
.log-line{font-family:var(--mono);font-size:10px;color:rgba(0,200,255,.45);padding:2px 0;border-bottom:1px solid rgba(255,255,255,.03);animation:logIn .3s ease;}
@keyframes logIn{from{opacity:0;transform:translateX(-6px);}to{opacity:1;transform:none;}}
.log-line .ok{color:var(--green);}
.log-line .warn{color:var(--gold);}
.log-line .err{color:var(--red);}
.log-line .skill{color:var(--violet);}
.log-line .info{color:var(--cyan);}

/* Records panel */
.preview-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid rgba(0,200,255,.06);}
.preview-row:last-child{border-bottom:none;}
.preview-key{font-family:var(--mono);font-size:9px;color:var(--text3);letter-spacing:.1em;text-transform:uppercase;}
.preview-val{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--text);}

/* ══ LIFT SCREEN ══ */
.disc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px;}
.disc-btn{
  padding:12px 8px;background:var(--bg3);border:1px solid var(--border);
  border-radius:10px;text-align:center;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:4px;
}
.disc-btn:hover{border-color:var(--border2);background:var(--cyan2);}
.disc-btn.active{border-color:var(--green);background:var(--green2);}
.disc-icon{font-size:20px;}
.disc-name{font-size:11px;font-weight:700;color:var(--text);letter-spacing:.05em;}
.disc-rec{font-family:var(--mono);font-size:8px;color:var(--text3);}

.input-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;}
.input-group{display:flex;flex-direction:column;gap:5px;}
.input-label{font-family:var(--mono);font-size:8px;color:var(--text3);letter-spacing:.15em;text-transform:uppercase;}
.holo-input{
  background:rgba(0,0,0,.4);border:1px solid var(--border);border-radius:8px;
  padding:10px 14px;color:var(--text);font-family:var(--mono);font-size:15px;font-weight:700;
  outline:none;transition:border-color .2s;
}
.holo-input:focus{border-color:var(--cyan);box-shadow:0 0 12px rgba(0,200,255,.15);}
.input-hint{font-family:var(--mono);font-size:8px;color:var(--text3);}

.lift-btn{
  width:100%;padding:14px;background:linear-gradient(135deg,rgba(0,200,255,.2),rgba(0,255,170,.15));
  border:1px solid rgba(0,255,170,.5);border-radius:10px;color:var(--green);
  font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  cursor:pointer;transition:all .25s;position:relative;overflow:hidden;
}
.lift-btn::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(0,255,170,.15);border-radius:50%;transform:translate(-50%,-50%);transition:width .4s,height .4s;}
.lift-btn:hover::before{width:400px;height:400px;}
.lift-btn:hover{box-shadow:0 0 24px rgba(0,255,170,.25);transform:translateY(-1px);}

/* Preview card */
.preview-card{background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:10px;padding:14px;}

/* Lift history */
.tx-item{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04);}
.tx-item:last-child{border-bottom:none;}
.tx-left{display:flex;align-items:center;gap:10px;}
.tx-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;}
.tx-icon.earn{background:rgba(0,255,170,.1);border:1px solid rgba(0,255,170,.2);}
.tx-icon.spend{background:rgba(153,85,255,.1);border:1px solid rgba(153,85,255,.2);}
.tx-desc{font-size:12px;font-weight:600;color:var(--text);}
.tx-meta{font-family:var(--mono);font-size:9px;color:var(--text3);margin-top:2px;}
.tx-amount{font-family:var(--mono);font-size:12px;font-weight:700;}
.tx-amount.pos{color:var(--green);}
.tx-amount.neg{color:var(--violet);}

/* Bonus panel */
#bonusPanel{min-height:36px;}

/* ══ SKILLS SCREEN ══ */
.skills-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;}
.skill-card{
  background:var(--bg2);border:1px solid var(--border);border-radius:12px;
  padding:14px;display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden;
  transition:all .25s;
}
.skill-card:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,200,255,.1);}
.skill-card.owned{border-color:rgba(0,255,170,.3);background:rgba(0,60,40,.15);}
.skill-card.cant-afford{opacity:.5;}
.skill-rarity{font-family:var(--mono);font-size:7px;letter-spacing:.14em;padding:2px 7px;border-radius:3px;align-self:flex-start;}
.rarity-common{background:rgba(0,200,255,.12);border:1px solid rgba(0,200,255,.25);color:var(--cyan);}
.rarity-rare{background:rgba(0,200,100,.12);border:1px solid rgba(0,200,100,.25);color:var(--green);}
.rarity-epic{background:rgba(153,85,255,.15);border:1px solid rgba(153,85,255,.3);color:var(--violet);}
.rarity-legendary{background:rgba(255,215,0,.12);border:1px solid rgba(255,215,0,.3);color:var(--gold);}
.skill-emoji{font-size:22px;}
.skill-name{font-size:14px;font-weight:700;color:var(--text);}
.skill-desc{font-family:var(--mono);font-size:9px;color:var(--text3);line-height:1.5;}
.skill-cost{display:flex;align-items:center;justify-content:space-between;margin-top:auto;}
.cost-val{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--gold);}
.cost-lbl{font-family:var(--mono);font-size:8px;color:rgba(226,195,106,.5);}
.buy-btn{font-family:var(--mono);font-size:9px;padding:5px 12px;border-radius:6px;cursor:pointer;transition:all .2s;letter-spacing:.08em;font-weight:700;}
.buy-btn.active{background:var(--green2);border:1px solid rgba(0,255,170,.4);color:var(--green);}
.buy-btn.active:hover{background:rgba(0,255,170,.25);box-shadow:0 0 12px rgba(0,255,170,.2);}
.buy-btn.disabled{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:var(--text3);cursor:not-allowed;}
.buy-btn.owned{background:rgba(0,255,170,.08);border:1px solid rgba(0,255,170,.2);color:rgba(0,255,170,.6);cursor:default;}

/* ══ WALLET SCREEN ══ */
.wallet-hero{text-align:center;padding:24px 20px;}
.wh-bal{font-family:var(--mono);font-size:42px;font-weight:700;color:var(--gold);text-shadow:0 0 24px rgba(226,195,106,.3);line-height:1;}
.wh-lbl{font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:rgba(226,195,106,.5);text-transform:uppercase;margin-top:6px;}
.wh-sub{font-family:var(--mono);font-size:9px;color:var(--text3);margin-top:4px;}
.condor-card{background:linear-gradient(135deg,rgba(153,85,255,.1),rgba(0,0,30,.5));border:1px solid rgba(153,85,255,.25);border-radius:12px;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;}
.condor-val{font-family:var(--mono);font-size:26px;font-weight:700;color:var(--violet);}
.condor-lbl{font-family:var(--mono);font-size:8px;letter-spacing:.15em;color:rgba(153,85,255,.5);margin-top:3px;}
.tx-list{display:flex;flex-direction:column;}

/* ══ RANKING SCREEN ══ */
.lb-header{display:grid;grid-template-columns:40px 1fr 90px 60px 80px;gap:8px;padding:6px 10px;border-bottom:1px solid var(--border);margin-bottom:4px;}
.lb-hcol{font-family:var(--mono);font-size:8px;color:var(--text3);letter-spacing:.12em;text-align:center;}
.lb-hcol.left{text-align:left;}
.lb-row{display:grid;grid-template-columns:40px 1fr 90px 60px 80px;gap:8px;align-items:center;padding:9px 10px;border-radius:8px;transition:background .2s;}
.lb-row:hover{background:rgba(0,200,255,.04);}
.lb-row.me{background:rgba(0,200,255,.06);border:1px solid rgba(0,200,255,.18);}
.lb-rank{font-family:var(--mono);font-size:13px;font-weight:700;text-align:center;}
.r1{color:var(--gold);}
.r2{color:#c0c0c0;}
.r3{color:#cd7f32;}
.rn{color:var(--text3);}
.lb-name{font-size:13px;font-weight:600;}
.lb-tier-b{}
.lb-score{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--cyan);text-align:center;}
.lb-vbc{font-family:var(--mono);font-size:11px;color:var(--gold);text-align:right;}

/* ══ SAO HOLOGRAPHIC OVERLAY ══════════════════════════════════
   Inspirado en: ALfheim Online / SAO — pantallas flotantes del
   menú de jugador. En el universo SAO, estas proyecciones sensoriales
   aparecen al tocar el icono del menú en el brazo izquierdo.
   ══════════════════════════════════════════════════════════════ */
.sao-overlay{
  position:fixed;inset:0;z-index:400;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,2,8,.85);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;
  transition:opacity .35s ease;
}
.sao-overlay.open{opacity:1;pointer-events:all;}

/* Scanline overlay effect */
.sao-overlay::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0px,transparent 3px,rgba(0,200,255,.012) 4px);
  animation:scanlines 12s linear infinite;
}
@keyframes scanlines{from{background-position:0 0;}to{background-position:0 100%;};}

.sao-interface{
  display:flex;align-items:flex-start;gap:16px;
  animation:saoOpen .4s cubic-bezier(.2,0,.1,1) both;
  perspective:800px;
}
@keyframes saoOpen{
  from{opacity:0;transform:scale(.92) translateY(16px);}
  to{opacity:1;transform:scale(1) translateY(0);}
}

/* SAO Left menu panel */
.sao-menu-panel{
  width:210px;flex-shrink:0;
  background:rgba(5,5,30,0.82);
  border:1px solid rgba(140,60,255,.35);
  border-radius:12px;overflow:hidden;
  box-shadow:0 0 40px rgba(140,60,255,.15),inset 0 1px 0 rgba(255,255,255,.05);
  animation:menuFloat 5s ease-in-out infinite;
}
@keyframes menuFloat{0%,100%{transform:translateY(0) rotateX(2deg);}50%{transform:translateY(-5px) rotateX(-1deg);}}

.sao-menu-header{
  padding:12px 14px 10px;
  border-bottom:1px solid rgba(160,80,255,.2);
  background:rgba(80,0,160,.12);
}
.sao-player-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.sao-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,rgba(140,60,255,.3),rgba(0,200,255,.2));border:1.5px solid rgba(140,60,255,.4);display:flex;align-items:center;justify-content:center;font-size:16px;}
.sao-player-name{font-size:13px;font-weight:700;color:#c8a8ff;}
.sao-player-lvl{font-family:var(--mono);font-size:8px;color:rgba(180,130,255,.6);letter-spacing:.1em;}
.sao-menu-tag{font-family:var(--mono);font-size:7px;letter-spacing:.25em;color:rgba(180,100,255,.5);text-transform:uppercase;}

.sao-menu-items{padding:8px;}
.sao-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-radius:7px;cursor:pointer;transition:all .18s;
  border:1px solid transparent;margin-bottom:3px;position:relative;overflow:hidden;
}
.sao-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(160,80,255,.12);transition:width .3s;}
.sao-item:hover::before{width:100%;}
.sao-item:hover{border-color:rgba(160,100,255,.4);transform:translateX(3px);}
.sao-item.active{background:rgba(120,40,255,.2);border-color:rgba(160,100,255,.55);border-left:2px solid #b46fff;}
.sao-item-icon{font-size:15px;flex-shrink:0;position:relative;z-index:1;}
.sao-item-text{font-size:12px;font-weight:600;color:#c8a8ff;letter-spacing:.06em;position:relative;z-index:1;}
.sao-item-badge{
  margin-left:auto;font-family:var(--mono);font-size:8px;
  padding:2px 6px;border-radius:3px;
  background:rgba(160,80,255,.18);border:1px solid rgba(160,80,255,.25);
  color:rgba(180,130,255,.8);position:relative;z-index:1;
}

/* SAO stats / detail panel */
.sao-detail-panel{
  width:300px;display:flex;flex-direction:column;gap:10px;
  animation:detailFloat 5s ease-in-out infinite;
  animation-delay:.5s;
}
@keyframes detailFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}

.sao-stat-card{
  background:rgba(3,5,28,0.82);border:1px solid rgba(100,200,255,.2);
  border-radius:10px;padding:13px 15px;position:relative;overflow:hidden;
  cursor:pointer;transition:all .22s;
}
.sao-stat-card:hover{border-color:rgba(100,200,255,.5);box-shadow:0 0 20px rgba(0,150,255,.1);transform:translateY(-2px);}
.sao-stat-card::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(100,200,255,.35),transparent);}
.sao-stat-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.sao-stat-title{font-family:var(--mono);font-size:7px;letter-spacing:.2em;color:rgba(100,200,255,.5);text-transform:uppercase;}
.sao-stat-value{font-size:24px;font-weight:700;letter-spacing:-.02em;}
.sao-stat-value.hp{color:#ff6b6b;text-shadow:0 0 14px rgba(255,100,100,.35);}
.sao-stat-value.mp{color:#6b9fff;text-shadow:0 0 14px rgba(100,150,255,.35);}
.sao-stat-value.vbc{color:var(--gold);text-shadow:0 0 14px rgba(226,195,106,.3);}
.sao-bar-wrap{height:4px;background:rgba(255,255,255,.05);border-radius:3px;overflow:hidden;}
.sao-bar-fill{height:100%;border-radius:3px;transition:width 1s ease;}
.sao-bar-fill.hp{background:linear-gradient(90deg,#ff4444,#ff8888);}
.sao-bar-fill.mp{background:linear-gradient(90deg,#4466ff,#88aaff);}

/* Skills grid in SAO */
.sao-skills-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.sao-skill-slot{
  aspect-ratio:1;background:rgba(18,0,58,.5);border:1px solid rgba(120,60,255,.22);
  border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;cursor:pointer;transition:all .18s;position:relative;
}
.sao-skill-slot:hover{border-color:rgba(160,100,255,.65);transform:scale(1.08);box-shadow:0 0 14px rgba(140,60,255,.22);z-index:2;}
.sao-skill-slot.equipped{border-color:rgba(0,255,170,.35);background:rgba(0,60,40,.25);}
.sao-skill-icon{font-size:17px;}
.sao-skill-lvl{font-family:var(--mono);font-size:7px;color:rgba(160,120,255,.65);}
.sao-equipped-dot{position:absolute;top:2px;right:2px;width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 5px var(--green);}

.sao-section-lbl{font-family:var(--mono);font-size:7px;letter-spacing:.2em;color:rgba(140,80,255,.5);text-transform:uppercase;margin-bottom:6px;}

/* SAO Log */
.sao-log-line{font-family:var(--mono);font-size:9px;color:rgba(0,200,255,.4);padding:2px 0;border-bottom:1px solid rgba(255,255,255,.03);animation:logIn .35s ease;}
.sao-log-line .ok{color:var(--green);}
.sao-log-line .warn{color:var(--gold);}
.sao-log-line .err{color:var(--red);}

/* Hex background SVG */
.sao-hex-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.03;}

/* SAO close button */
.sao-close{
  position:absolute;top:16px;right:16px;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:var(--muted);font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;z-index:10;
}
.sao-close:hover{background:rgba(255,100,100,.15);border-color:rgba(255,100,100,.3);color:#ff6b6b;}

/* Ripple effect (SAO touch feedback) */
.sao-ripple-container{position:fixed;inset:0;pointer-events:none;z-index:500;overflow:hidden;}
.sao-ripple{
  position:absolute;border:1.5px solid rgba(160,100,255,.65);border-radius:50%;
  animation:saoRipple .65s ease-out forwards;pointer-events:none;
}
@keyframes saoRipple{
  0%{width:0;height:0;opacity:.9;transform:translate(-50%,-50%);}
  100%{width:90px;height:90px;opacity:0;transform:translate(-50%,-50%);}
}

/* SAO floating menu button (arm-tap trigger) */
.sao-fab{
  position:fixed;right:20px;bottom:90px;z-index:350;
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(135deg,rgba(80,0,160,.8),rgba(40,0,100,.9));
  border:1px solid rgba(180,100,255,.5);
  box-shadow:0 0 24px rgba(140,60,255,.35),inset 0 1px 0 rgba(255,255,255,.08);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:18px;color:#c8a8ff;
  transition:all .25s;animation:fabPulse 3s ease-in-out infinite;
}
@keyframes fabPulse{
  0%,100%{box-shadow:0 0 24px rgba(140,60,255,.35),inset 0 1px 0 rgba(255,255,255,.08);}
  50%{box-shadow:0 0 36px rgba(140,60,255,.55),0 0 60px rgba(140,60,255,.2),inset 0 1px 0 rgba(255,255,255,.08);}
}
.sao-fab:hover{transform:scale(1.1);border-color:rgba(200,140,255,.8);}
.sao-fab:active{transform:scale(.94);}

/* ══ RESULT OVERLAY ══ */
.result-overlay{
  position:fixed;inset:0;z-index:600;
  background:rgba(0,0,8,.88);backdrop-filter:blur(12px);
  display:none;align-items:center;justify-content:center;
}
.result-overlay.show{display:flex;}
.result-card{
  background:rgba(0,10,30,.9);border:1px solid rgba(0,200,255,.35);border-radius:16px;
  padding:30px;text-align:center;max-width:360px;width:90%;
  position:relative;overflow:hidden;
  box-shadow:0 0 60px rgba(0,200,255,.15);
  animation:resultIn .4s cubic-bezier(.2,0,.1,1);
}
@keyframes resultIn{from{transform:scale(.88);opacity:0;}to{transform:scale(1);opacity:1;}}
.result-card::after{content:'';position:absolute;top:0;left:0;right:0;height:1.5px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);}
.result-score{font-family:var(--mono);font-size:72px;font-weight:700;color:var(--cyan);text-shadow:0 0 30px rgba(0,200,255,.4);line-height:1;margin:12px 0 6px;}
.result-tier{font-size:16px;font-weight:700;margin-bottom:14px;letter-spacing:.12em;}
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0;}
.rg-item{background:rgba(0,0,0,.4);border:1px solid var(--border);border-radius:8px;padding:10px;}
.rg-val{font-family:var(--mono);font-size:15px;font-weight:700;}
.rg-val.cyan{color:var(--cyan);}
.rg-val.gold{color:var(--gold);}
.rg-val.green{color:var(--green);}
.rg-lbl{font-family:var(--mono);font-size:7px;color:var(--text3);margin-top:4px;letter-spacing:.08em;}
.result-close{
  width:100%;padding:13px;background:linear-gradient(135deg,rgba(0,200,255,.2),rgba(0,255,170,.15));
  border:1px solid rgba(0,255,170,.45);border-radius:9px;color:var(--green);
  font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.15em;
  cursor:pointer;text-transform:uppercase;transition:all .2s;
}
.result-close:hover{box-shadow:0 0 20px rgba(0,255,170,.25);}
.result-streak{display:inline-block;margin-bottom:4px;}

/* ══ Achievement popup (SAO-style logro) ══ */
.vbc-achievement-popup{
  position:fixed;bottom:7rem;left:50%;transform:translateX(-50%) translateY(20px);
  background:rgba(5,5,30,.95);border:1px solid rgba(180,100,255,.4);border-radius:10px;
  padding:12px 18px;display:flex;align-items:center;gap:12px;opacity:0;
  transition:opacity .3s,transform .3s;z-index:9000;min-width:260px;
  backdrop-filter:blur(8px);box-shadow:0 8px 32px rgba(140,60,255,.2);
}
.vbc-achievement-popup.show{opacity:1;transform:translateX(-50%) translateY(0);}
.vbc-ach-icon{font-size:26px;}
.vbc-ach-body{}
.vbc-ach-title{font-family:var(--mono);font-size:7px;color:rgba(180,100,255,.55);letter-spacing:.12em;text-transform:uppercase;}
.vbc-ach-name{font-size:13px;font-weight:700;color:#fff;margin-top:2px;}
.vbc-ach-pts{font-family:var(--mono);color:var(--gold);font-size:16px;font-weight:700;margin-left:auto;white-space:nowrap;}

/* ══ VBC Mission widget ══ */
.vbc-mission-wrap{padding:0 0 16px;}
.vbc-mission-widget{background:rgba(0,20,50,.4);border:1px solid var(--border);border-radius:8px;padding:10px 14px;transition:border-color .4s;}
.vbc-mission-widget.completed{border-color:var(--gold);}
.vmw-row{display:flex;align-items:center;gap:7px;margin-bottom:6px;}
.vmw-emoji{font-size:14px;}
.vmw-label{font-size:11px;color:var(--text);}
.vmw-bar-wrap{height:3px;background:var(--border);border-radius:2px;overflow:hidden;}
.vmw-bar{height:100%;background:var(--cyan);border-radius:2px;transition:width .45s ease;}

/* ══ TOAST ══ */
.toast-wrap{position:fixed;top:80px;right:16px;display:flex;flex-direction:column;gap:6px;z-index:9999;pointer-events:none;}
.toast{
  background:rgba(0,20,50,.92);border:1px solid var(--border);border-radius:8px;
  padding:9px 15px;font-family:var(--sans);font-size:13px;color:var(--text);
  animation:toastIn .25s ease;backdrop-filter:blur(8px);max-width:280px;
  box-shadow:0 4px 20px rgba(0,0,0,.4);
}
.toast.success{background:rgba(0,40,30,.92);border-color:rgba(0,255,170,.3);color:var(--green);}
.toast.warn{background:rgba(40,30,0,.92);border-color:rgba(226,195,106,.3);color:var(--gold);}
.toast.skill{background:rgba(30,0,50,.92);border-color:rgba(153,85,255,.3);color:#cc99ff;}
.toast.info{background:rgba(0,20,50,.92);border-color:rgba(0,200,255,.3);color:var(--cyan);}
@keyframes toastIn{from{opacity:0;transform:translateX(16px);}to{opacity:1;transform:none;}}
@keyframes toastOut{from{opacity:1;}to{opacity:0;transform:translateX(16px);}}

/* video upload section */
.video-upload-area{
  border:2px dashed rgba(0,200,255,.2);border-radius:12px;padding:24px;text-align:center;
  background:rgba(0,200,255,.03);cursor:pointer;transition:all .2s;margin-top:12px;
}
.video-upload-area:hover{border-color:rgba(0,200,255,.45);background:rgba(0,200,255,.06);}
.video-upload-area.drag-over{border-color:var(--green);background:rgba(0,255,170,.06);}
.upload-icon{font-size:28px;margin-bottom:8px;}
.upload-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px;}
.upload-sub{font-family:var(--mono);font-size:9px;color:var(--text3);}
.upload-pts-badge{display:inline-flex;align-items:center;gap:5px;margin-top:8px;padding:4px 10px;border-radius:5px;background:var(--green2);border:1px solid rgba(0,255,170,.3);font-family:var(--mono);font-size:9px;color:var(--green);}
#videoInput{display:none;}

.video-preview-item{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:rgba(0,255,170,.05);border:1px solid rgba(0,255,170,.15);border-radius:8px;margin-top:8px;}
.vp-name{font-size:11px;font-weight:600;color:var(--text);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vp-pts{font-family:var(--mono);font-size:11px;color:var(--green);font-weight:700;}

/* ══ LOGIN OVERLAY ═══════════════════════════════════════ */
#login-overlay {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0,200,255,.07) 0%, transparent 70%), #000810;
  padding: 2rem; text-align: center; gap: 2rem;
  transition: opacity .4s ease;
}
#login-overlay.gone {
  opacity: 0; pointer-events: none;
}
#login-full-loader {
  position: fixed; inset: 0; z-index: 99998;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .8rem;
  background: #000810;
  transition: opacity .4s ease;
}
#login-full-loader.gone { opacity:0; pointer-events:none; }
.login-spin {
  width:28px; height:28px; border-radius:50%;
  border:2px solid rgba(0,200,255,.15); border-top-color:#00c8ff;
  animation: loginSpin .8s linear infinite;
}
@keyframes loginSpin { to{transform:rotate(360deg)} }
.login-fl-sub {
  font-family: 'Share Tech Mono', monospace; font-size:.62rem;
  letter-spacing:.14em; color:rgba(255,255,255,.38); text-transform:uppercase;
}

/* Splash logo */
.splash-logo {
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
}
.splash-dot {
  width:14px; height:14px; border-radius:50%;
  background: #00c8ff;
  box-shadow: 0 0 20px #00c8ff, 0 0 40px rgba(0,200,255,.3);
  animation: splashPulseDot 2s ease-in-out infinite;
}
@keyframes splashPulseDot {
  0%,100%{transform:scale(1);box-shadow:0 0 20px #00c8ff,0 0 40px rgba(0,200,255,.3)}
  50%{transform:scale(1.15);box-shadow:0 0 30px #00c8ff,0 0 60px rgba(0,200,255,.4)}
}
.splash-brand {
  font-family: 'Rajdhani', sans-serif; font-size: 2.4rem; font-weight:800;
  letter-spacing:-.02em; line-height:1;
}
.splash-brand .vbc { color: #00c8ff; }
.splash-brand .protocol { color: #c8eeff; }

.splash-tag {
  font-family: 'Share Tech Mono', monospace; font-size:.65rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.38);
  display:flex; align-items:center; gap:.5rem;
}
.splash-tag::before,.splash-tag::after {
  content:''; width:24px; height:1px; background:rgba(0,200,255,.3);
}

.splash-claim {
  font-size:1.05rem; font-weight:500; color:rgba(255,255,255,.38); line-height:1.5;
  max-width:300px; font-family:'Rajdhani',sans-serif;
}
.splash-claim strong { color: #c8eeff; }

.splash-status {
  font-family:'Share Tech Mono',monospace; font-size:.72rem; letter-spacing:.08em;
  color:rgba(0,200,255,.7); min-height:1.2em; transition:.2s;
}

/* Botón Google */
.btn-google {
  display:flex; align-items:center; justify-content:center; gap:.75rem;
  width:100%; max-width:320px; padding:1rem 1.5rem;
  background: #fff; border:none; border-radius:12px;
  font-family:'Rajdhani',sans-serif; font-size:1rem; font-weight:700;
  color:#1f1f1f; cursor:pointer;
  box-shadow: 0 4px 24px rgba(0,0,0,.5);
  transition:.2s; -webkit-tap-highlight-color:transparent;
}
.btn-google:disabled { opacity:.5; cursor:default; }
.btn-google:not(:disabled):active { transform:scale(.97); }
.google-icon { width:22px; height:22px; flex-shrink:0; }

.splash-install-hint {
  font-family:'Share Tech Mono',monospace; font-size:.6rem; letter-spacing:.1em;
  color:rgba(0,200,255,.5); text-align:center; line-height:1.7;
}
.install-btn {
  display:none; align-items:center; gap:.5rem;
  font-family:'Share Tech Mono',monospace; font-size:.65rem; letter-spacing:.1em;
  text-transform:uppercase; color:#00c8ff;
  background:rgba(0,200,255,.06); border:1px solid rgba(0,200,255,.2);
  padding:.5rem 1.2rem; cursor:pointer; margin-top:.5rem; transition:.2s;
}
.install-btn:hover { background:rgba(0,200,255,.1); }
.install-btn.show { display:flex; }

/* Animaciones de entrada */
@keyframes splashSlideUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:none; }
}
.anim-in   { animation: splashSlideUp .45s cubic-bezier(.2,0,.1,1) both; }
.anim-in-2 { animation: splashSlideUp .45s .1s cubic-bezier(.2,0,.1,1) both; }
.anim-in-3 { animation: splashSlideUp .45s .2s cubic-bezier(.2,0,.1,1) both; }
.anim-in-4 { animation: splashSlideUp .45s .3s cubic-bezier(.2,0,.1,1) both; }


/* ══ SETUP OVERLAY ═══════════════════════════════════════════ */
#setup-overlay {
  position: fixed; inset: 0; z-index: 99997;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0,200,255,.06) 0%, transparent 70%), #000810;
  padding: 1.5rem; overflow-y: auto;
  transition: opacity .4s ease;
}
#setup-overlay.gone { opacity: 0; pointer-events: none; }

.setup-card {
  width: 100%; max-width: 400px;
  background: rgba(0,20,50,.7);
  border: 1px solid rgba(0,200,255,.18);
  border-radius: 16px;
  padding: 2rem 1.75rem;
  box-shadow: 0 0 40px rgba(0,200,255,.06), inset 0 1px 0 rgba(0,200,255,.1);
  position: relative;
}

.setup-step { display: none; flex-direction: column; gap: 1.2rem; }
.setup-step.active { display: flex; opacity: 1; transform: none; animation: splashSlideUp .35s cubic-bezier(.2,0,.1,1) forwards; }

/* Header */
.setup-sys-tag {
  font-family: 'Share Tech Mono', monospace; font-size: .6rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(0,200,255,.5);
  display: flex; align-items: center; gap: .5rem;
}
.setup-sys-tag::before { content: ''; width: 20px; height: 1px; background: rgba(0,200,255,.3); }

.setup-title {
  font-family: 'Rajdhani', sans-serif; font-size: 1.5rem;
  font-weight: 800; color: #c8eeff; letter-spacing: -.01em; line-height: 1.1;
}
.setup-sub {
  font-family: 'Share Tech Mono', monospace; font-size: .72rem;
  color: rgba(255,255,255,.38); line-height: 1.6;
}

/* Step dots */
.setup-dots {
  display: flex; gap: 6px; justify-content: center; margin-bottom: .5rem;
}
.setup-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(0,200,255,.2); transition: .3s;
}
.setup-dot.on { background: #00c8ff; box-shadow: 0 0 8px rgba(0,200,255,.6); }

/* Input */
.setup-input {
  width: 100%; box-sizing: border-box;
  background: rgba(0,200,255,.05);
  border: 1px solid rgba(0,200,255,.2);
  border-radius: 10px; padding: .85rem 1rem;
  font-family: 'Rajdhani', sans-serif; font-size: 1rem; font-weight: 600;
  color: #c8eeff; outline: none; transition: border-color .2s;
}
.setup-input:focus { border-color: rgba(0,200,255,.6); }
.setup-input::placeholder { color: rgba(0,200,255,.3); }

/* Discipline grid */
.disc-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.disc-opt {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: .9rem .5rem;
  background: rgba(0,200,255,.04);
  border: 1px solid rgba(0,200,255,.15);
  border-radius: 12px; cursor: pointer; transition: .2s;
  -webkit-tap-highlight-color: transparent;
}
.disc-opt:hover { border-color: rgba(0,200,255,.4); background: rgba(0,200,255,.08); }
.disc-opt.selected {
  border-color: #00c8ff;
  background: rgba(0,200,255,.12);
  box-shadow: 0 0 16px rgba(0,200,255,.15);
}
.disc-emoji { font-size: 1.8rem; }
.disc-label {
  font-family: 'Share Tech Mono', monospace; font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(0,200,255,.7);
  text-align: center;
}

/* Goal select */
.goal-opts {
  display: flex; flex-direction: column; gap: 8px;
}
.goal-opt {
  display: flex; align-items: center; gap: 12px;
  padding: .8rem 1rem;
  background: rgba(0,200,255,.04);
  border: 1px solid rgba(0,200,255,.15);
  border-radius: 10px; cursor: pointer; transition: .2s;
  -webkit-tap-highlight-color: transparent;
}
.goal-opt:hover { border-color: rgba(0,200,255,.35); }
.goal-opt.selected { border-color: #00c8ff; background: rgba(0,200,255,.1); }
.goal-icon { font-size: 1.3rem; }
.goal-text { font-family: 'Rajdhani', sans-serif; font-size: .9rem; font-weight: 600; color: #c8eeff; }

/* Progress bar on step 3 */
.setup-progress-wrap {
  width: 100%; background: rgba(0,200,255,.08);
  border-radius: 99px; height: 4px; overflow: hidden;
}
.setup-progress-bar {
  height: 100%; background: #00c8ff;
  border-radius: 99px; width: 0%;
  transition: width .05s linear;
  box-shadow: 0 0 8px rgba(0,200,255,.6);
}

/* CTA Button */
.setup-btn {
  width: 100%; padding: .95rem;
  background: rgba(0,200,255,.12);
  border: 1px solid rgba(0,200,255,.35);
  border-radius: 12px;
  font-family: 'Rajdhani', sans-serif; font-size: 1rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #00c8ff; cursor: pointer; transition: .2s;
  -webkit-tap-highlight-color: transparent;
}
.setup-btn:hover { background: rgba(0,200,255,.2); border-color: rgba(0,200,255,.6); }
.setup-btn:disabled { opacity: .4; cursor: default; }
.setup-btn.primary {
  background: #00c8ff; color: #000a15; border-color: #00c8ff;
  box-shadow: 0 4px 20px rgba(0,200,255,.3);
}
.setup-btn.primary:hover { background: #33d4ff; box-shadow: 0 4px 24px rgba(0,200,255,.45); }

/* Connecting screen */
.setup-connecting {
  display: flex; flex-direction: column; align-items: center; gap: 1.2rem;
  padding: 1rem 0;
}
.setup-spinner {
  width: 48px; height: 48px;
  border: 3px solid rgba(0,200,255,.15);
  border-top-color: #00c8ff;
  border-radius: 50%;
  animation: loginSpin 0.8s linear infinite;
}
.setup-conn-title {
  font-family: 'Rajdhani', sans-serif; font-size: 1.2rem; font-weight: 700; color: #c8eeff;
}
.setup-conn-log {
  font-family: 'Share Tech Mono', monospace; font-size: .65rem;
  color: rgba(0,200,255,.6); line-height: 2; text-align: center; min-height: 60px;
}


/* ════════════ RE:MONSTER EVOLUTION SYSTEM ════════════ */
.evo-avatar {
  position:relative; width:120px; height:120px; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.evo-avatar .evo-emoji {
  font-size:64px; filter:drop-shadow(0 0 18px var(--evo-glow,#00ffcc));
  animation: evo-float 3s ease-in-out infinite;
  transition: transform 0.3s;
  position:relative; z-index:2;
}
.evo-avatar:hover .evo-emoji { transform: scale(1.12); }
.evo-ring {
  position:absolute; inset:0; border-radius:50%;
  border: 2px solid var(--evo-glow,#00ffcc);
  box-shadow: 0 0 20px var(--evo-glow,#00ffcc), inset 0 0 20px rgba(0,255,204,0.1);
  animation: evo-pulse 2s ease-in-out infinite;
}
.evo-particles {
  position:absolute; inset:-10px; border-radius:50%;
  animation: evo-spin 6s linear infinite;
}
.evo-particle {
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:var(--evo-glow,#00ffcc);
  box-shadow: 0 0 6px var(--evo-glow,#00ffcc);
}
.evo-name-badge {
  text-align:center; font-family:var(--mono); font-size:10px; letter-spacing:2px;
  color:var(--evo-glow,#00ffcc); text-shadow: 0 0 10px var(--evo-glow,#00ffcc);
  margin-bottom:4px; text-transform:uppercase;
}
.evo-title {
  text-align:center; font-family:var(--mono); font-size:13px; font-weight:bold;
  color:#fff; letter-spacing:1px; margin-bottom:12px;
}
.evo-progress-wrap {
  margin: 0 auto 16px; max-width:220px;
}
.evo-progress-label {
  display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:9px; color:var(--text3); margin-bottom:4px;
}
.evo-progress-bar {
  height:4px; background:var(--border); border-radius:2px; overflow:hidden;
}
.evo-progress-fill {
  height:100%; border-radius:2px;
  background:var(--evo-glow,#00ffcc);
  box-shadow: 0 0 8px var(--evo-glow,#00ffcc);
  transition: width 1s ease;
}

/* Evolution overlay */
.evo-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.92); z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity 0.3s;
}
.evo-overlay.active { opacity:1; pointer-events:all; }
.evo-overlay-emoji { font-size:100px; animation: evo-evolve 1s ease-out; margin-bottom:24px; }
.evo-overlay-text {
  font-family:var(--mono); font-size:11px; letter-spacing:4px;
  color:var(--evo-glow,#00ffcc); margin-bottom:8px;
  text-shadow: 0 0 20px var(--evo-glow,#00ffcc);
  animation: evo-glitch 0.5s steps(2) 3;
}
.evo-overlay-title {
  font-family:var(--mono); font-size:28px; font-weight:bold;
  color:#fff; letter-spacing:3px; text-align:center;
  text-shadow: 0 0 30px var(--evo-glow,#00ffcc);
  margin-bottom:32px;
}
.evo-overlay-close {
  font-family:var(--mono); font-size:10px; letter-spacing:2px;
  color:var(--text3); border:1px solid var(--border); padding:8px 24px;
  background:transparent; cursor:pointer; transition:all 0.2s;
}
.evo-overlay-close:hover { color:#fff; border-color:#fff; }

/* Ranking mini avatar */
.lb-evo { font-size:16px; margin-right:4px; }

/* Animations */
@keyframes evo-float {
  0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)}
}
@keyframes evo-pulse {
  0%,100%{opacity:0.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.08)}
}
@keyframes evo-spin {
  from{transform:rotate(0deg)} to{transform:rotate(360deg)}
}
@keyframes evo-evolve {
  0%{transform:scale(0) rotate(-180deg);opacity:0}
  60%{transform:scale(1.3) rotate(10deg);opacity:1}
  100%{transform:scale(1) rotate(0deg);opacity:1}
}
@keyframes evo-glitch {
  0%{text-shadow:2px 0 #ff0044,−2px 0 #00ffcc}
  50%{text-shadow:−2px 0 #ff0044,2px 0 #00ffcc}
  100%{text-shadow:none}
}

/* ══ ESTIRPE CHARACTER FIGURES ════════════════════════════ */
.char-figure { display:inline-block; animation: charFloat 3s ease-in-out infinite; }
.char-figure svg { width:100%; height:100%; }
@keyframes charFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

.estirpe-pick-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:10px; margin:16px 0; width:100%;
}
.estirpe-pick-card {
  background:rgba(0,255,204,0.05); border:1.5px solid rgba(0,255,204,0.2);
  border-radius:12px; padding:12px 8px; cursor:pointer; text-align:center;
  transition:all .2s; display:flex; flex-direction:column; align-items:center; gap:6px;
}
.estirpe-pick-card:hover, .estirpe-pick-card.selected {
  border-color:var(--est-color, #00ffcc);
  background:rgba(var(--est-rgb, 0,255,204), 0.12);
  box-shadow:0 0 12px rgba(var(--est-rgb, 0,255,204),0.4);
  transform:translateY(-2px);
}
.estirpe-pick-card .est-icon { font-size:1.6rem; }
.estirpe-pick-card .est-name { font-size:0.85rem; font-weight:700; letter-spacing:1px; }
.estirpe-pick-card .est-element { font-size:0.65rem; opacity:0.7; }
.estirpe-pick-card .est-bonus { font-size:0.65rem; color:var(--gold); margin-top:2px; }

.profile-estirpe-banner {
  display:flex; align-items:center; gap:16px;
  background:rgba(0,0,0,0.4); border-radius:16px;
  padding:16px; margin:12px 0;
  border:1px solid rgba(255,255,255,0.08);
}
.profile-estirpe-info { flex:1; }
.profile-estirpe-name { font-size:1rem; font-weight:700; letter-spacing:1px; }
.profile-estirpe-form { font-size:0.7rem; opacity:0.7; margin-top:2px; }
.profile-estirpe-bonus { font-size:0.68rem; color:var(--gold); margin-top:4px; }

.evo-overlay-char { display:flex; justify-content:center; margin:16px 0; }

.rank-estirpe-dot { font-size:0.8rem; }

/* action char popup */
.action-char-popup {
  position:fixed; pointer-events:none; z-index:999;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  animation: charPopAnim 2s ease-out forwards;
}
.action-char-popup .ac-label {
  font-size:0.65rem; letter-spacing:1px; font-weight:700;
  color:var(--accent); text-shadow:0 0 8px var(--accent);
}
@keyframes charPopAnim {
  0% { opacity:0; transform:translateY(20px) scale(0.6); }
  20% { opacity:1; transform:translateY(0) scale(1.1); }
  70% { opacity:1; transform:translateY(-10px) scale(1); }
  100% { opacity:0; transform:translateY(-30px) scale(0.8); }
}

/* ═══ VBC REST TIMER ═══ */
#vbc-rest-float {
  position: fixed; bottom: 90px; right: 18px; z-index: 9999;
  background: rgba(10,10,20,0.96); border: 1.5px solid #0ff;
  border-radius: 16px; padding: 14px 18px; min-width: 170px;
  box-shadow: 0 0 24px #0ff4, 0 4px 32px #000a;
  font-family: 'Orbitron', monospace; color: #0ff;
  display: none; flex-direction: column; align-items: center; gap: 8px;
  backdrop-filter: blur(12px);
}
#vbc-rest-float.active { display: flex; }
#vbc-rest-clock {
  font-size: 2.4rem; font-weight: 900; letter-spacing: 3px;
  text-shadow: 0 0 16px #0ff;
}
#vbc-rest-label { font-size: 0.62rem; letter-spacing: 2px; opacity: 0.7; color: #aff; }
.vbc-rest-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.vbc-rest-preset {
  background: transparent; border: 1px solid #0ff5;
  color: #0ff; border-radius: 8px; padding: 4px 10px;
  font-size: 0.68rem; font-family: 'Orbitron', monospace;
  cursor: pointer; transition: all .2s;
}
.vbc-rest-preset:hover, .vbc-rest-preset.sel {
  background: #0ff2; border-color: #0ff; box-shadow: 0 0 8px #0ff5;
}
#vbc-rest-stop {
  background: transparent; border: 1px solid #f55;
  color: #f55; border-radius: 8px; padding: 4px 14px;
  font-size: 0.65rem; font-family: 'Orbitron', monospace; cursor: pointer;
}
#vbc-rest-stop:hover { background: #f552; }
/* Trigger button — aparece en registro de sets */
.vbc-timer-trigger {
  background: transparent; border: 1px solid #0ff6;
  color: #0ff; border-radius: 8px; padding: 5px 12px;
  font-size: 0.7rem; font-family: 'Orbitron', monospace; cursor: pointer;
  margin-top: 4px; transition: all .2s;
}
.vbc-timer-trigger:hover { background: #0ff1; box-shadow: 0 0 8px #0ff4; }


  /* World Map pulse */
  @keyframes worldPulse {
    0% { box-shadow: 0 0 0 0 rgba(255,68,68,0.6); }
    70% { box-shadow: 0 0 0 10px rgba(255,68,68,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,68,68,0); }
  }

  
/* ══ VBC HoloOS — Holographic Interface CSS ═══════════════════ */
#screen-holoos{position:relative;overflow:hidden;background:#000 !important;min-height:100vh;}
#holo-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.holo-overlay{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:20px;}

/* Orbe central */
.holo-orb-container{position:relative;width:200px;height:200px;cursor:pointer;margin:0 auto;}
.holo-orb{width:200px;height:200px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(0,255,255,.25),rgba(220,38,38,.15) 50%,transparent 70%);border:2px solid rgba(0,255,255,.3);display:flex;align-items:center;justify-content:center;transition:all .4s ease;box-shadow:0 0 40px rgba(0,255,255,.15),0 0 80px rgba(220,38,38,.08);animation:holo-pulse 3s ease-in-out infinite;}
.holo-orb:hover,.holo-orb.active{border-color:rgba(0,255,255,.7);box-shadow:0 0 60px rgba(0,255,255,.3),0 0 120px rgba(220,38,38,.15);}
.holo-orb-inner{text-align:center;user-select:none;}
.holo-orb-va{font-size:42px;font-weight:900;letter-spacing:2px;background:linear-gradient(135deg,#fff 0%,#00e5ff 40%,#ff2d2d 70%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 0 10px rgba(0,255,255,.4));}
.holo-orb-sub{font-size:9px;letter-spacing:6px;color:rgba(0,255,255,.5);margin-top:4px;}
.holo-orb-kanji{font-size:11px;color:rgba(255,255,255,.3);margin-top:2px;letter-spacing:3px;}

@keyframes holo-pulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.03);opacity:.92;}}

/* Anillos orbitales */
.holo-ring{position:absolute;border-radius:50%;border:1px solid rgba(0,255,255,.12);animation:holo-spin linear infinite;pointer-events:none;}
.holo-ring-1{width:260px;height:260px;top:50%;left:50%;transform:translate(-50%,-50%);animation-duration:20s;}
.holo-ring-2{width:320px;height:320px;top:50%;left:50%;transform:translate(-50%,-50%);animation-duration:35s;border-style:dashed;border-color:rgba(220,38,38,.08);}
.holo-ring-3{width:380px;height:380px;top:50%;left:50%;transform:translate(-50%,-50%);animation-duration:50s;border-color:rgba(0,255,255,.06);}
@keyframes holo-spin{from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}}

/* Menú radial */
.holo-radial{position:absolute;top:50%;left:50%;width:0;height:0;pointer-events:none;transition:opacity .3s;}
.holo-radial.open{pointer-events:auto;}
.holo-radial-btn{position:absolute;width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.7);border:1px solid rgba(0,255,255,.3);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transform:translate(-50%,-50%) scale(0);transition:all .35s cubic-bezier(.34,1.56,.64,1);opacity:0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.holo-radial.open .holo-radial-btn{transform:translate(-50%,-50%) scale(1);opacity:1;}
.holo-radial-btn:hover{border-color:#00e5ff;background:rgba(0,229,255,.12);box-shadow:0 0 20px rgba(0,255,255,.3);}
.holo-radial-btn .holo-r-icon{font-size:20px;line-height:1;}
.holo-radial-btn .holo-r-label{font-size:7px;letter-spacing:1px;color:rgba(255,255,255,.6);margin-top:3px;font-weight:700;}

/* Ventanas flotantes */
.holo-window{position:fixed;width:340px;max-width:92vw;background:rgba(5,5,15,.92);border:1px solid rgba(0,255,255,.2);border-radius:12px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 8px 40px rgba(0,0,0,.6),0 0 30px rgba(0,255,255,.08);z-index:9000;display:none;overflow:hidden;animation:holo-win-in .3s ease-out;}
.holo-window.visible{display:block;}
@keyframes holo-win-in{from{opacity:0;transform:scale(.9) translateY(20px);}to{opacity:1;transform:scale(1) translateY(0);}}
.holo-win-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:rgba(0,255,255,.05);border-bottom:1px solid rgba(0,255,255,.1);cursor:grab;user-select:none;}
.holo-win-header:active{cursor:grabbing;}
.holo-win-title{font-size:11px;font-weight:800;letter-spacing:3px;color:#00e5ff;}
.holo-win-close{width:24px;height:24px;border-radius:50%;background:rgba(255,45,45,.2);border:1px solid rgba(255,45,45,.3);color:#ff2d2d;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;font-weight:700;transition:all .2s;}
.holo-win-close:hover{background:rgba(255,45,45,.4);}
.holo-win-body{padding:14px;max-height:50vh;overflow-y:auto;font-size:12px;color:rgba(255,255,255,.8);line-height:1.6;}
.holo-win-body::-webkit-scrollbar{width:4px;}.holo-win-body::-webkit-scrollbar-thumb{background:rgba(0,255,255,.2);border-radius:2px;}

/* Voice indicator */
.holo-voice-bar{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(5,5,15,.9);border:1px solid rgba(0,255,255,.2);border-radius:24px;padding:8px 20px;display:flex;align-items:center;gap:10px;z-index:9500;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;pointer-events:none;transition:all .3s;}
.holo-voice-bar.active{opacity:1;pointer-events:auto;}
.holo-voice-dot{width:10px;height:10px;border-radius:50%;background:#00e5ff;animation:holo-voice-pulse 1s ease infinite;}
@keyframes holo-voice-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.7);}}
.holo-voice-text{font-size:11px;color:rgba(255,255,255,.7);letter-spacing:1px;font-weight:600;}
.holo-voice-wave{display:flex;gap:2px;align-items:center;height:16px;}
.holo-voice-wave span{width:3px;background:#00e5ff;border-radius:2px;animation:holo-wave .6s ease-in-out infinite;}
.holo-voice-wave span:nth-child(2){animation-delay:.1s;}
.holo-voice-wave span:nth-child(3){animation-delay:.2s;}
.holo-voice-wave span:nth-child(4){animation-delay:.3s;}
@keyframes holo-wave{0%,100%{height:4px;}50%{height:14px;}}

/* Status bar */
.holo-status{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap;justify-content:center;}
.holo-stat-chip{background:rgba(0,255,255,.06);border:1px solid rgba(0,255,255,.12);border-radius:20px;padding:6px 14px;font-size:10px;color:rgba(255,255,255,.5);letter-spacing:1px;display:flex;align-items:center;gap:6px;}
.holo-stat-chip .dot{width:6px;height:6px;border-radius:50%;}
.dot-green{background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,.5);}
.dot-red{background:#ef4444;box-shadow:0 0 6px rgba(239,68,68,.5);}
.dot-yellow{background:#eab308;box-shadow:0 0 6px rgba(234,179,8,.5);}

/* Diagnóstico */
.holo-diag{margin-top:24px;background:rgba(0,255,255,.04);border:1px solid rgba(0,255,255,.1);border-radius:12px;padding:14px;max-width:360px;width:100%;font-family:monospace;font-size:10px;color:rgba(0,229,255,.6);line-height:1.8;display:none;}
.holo-diag.visible{display:block;animation:holo-win-in .4s ease-out;}
.holo-diag-line{opacity:0;animation:holo-type .3s ease forwards;}
@keyframes holo-type{to{opacity:1;}}

/* Responsive */
@media(max-width:500px){
  .holo-orb-container{width:150px;height:150px;}
  .holo-orb{width:150px;height:150px;}
  .holo-orb-va{font-size:32px;}
  .holo-ring-1{width:200px;height:200px;}
  .holo-ring-2{width:250px;height:250px;}
  .holo-ring-3{width:300px;height:300px;}
  .holo-radial-btn{width:52px;height:52px;}
  .holo-radial-btn .holo-r-icon{font-size:16px;}
  .holo-window{width:95vw;}
}
/* ══ END HoloOS CSS ═══════════════════════════════════════════ */


/* ── head-extra ── */
/* ── VBC Enterprise: Connection Indicator ─────────────────── */
#vbc-conn-indicator {
  width: 8px; height: 8px; border-radius: 50%;
  background: #00ff88; position: fixed;
  top: 8px; right: 8px; z-index: 99999;
  box-shadow: 0 0 6px rgba(0,255,136,.5);
  transition: background .3s;
}
#vbc-conn-indicator[data-offline] { background: #ff4444; box-shadow: 0 0 6px rgba(255,68,68,.5); }

/* ── VBC Enterprise: Skeleton Screens ─────────────────────── */
.vbc-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.03) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.03) 75%);
  background-size: 200% 100%;
  animation: vbc-shimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes vbc-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── VBC Enterprise: Toast Enhancements ───────────────────── */
.toast-queue { display: flex; flex-direction: column; gap: 4px; }

/* ── VBC Enterprise: Optimistic Feedback ──────────────────── */
.vbc-saving { position: relative; }
.vbc-saving::after {
  content: ''; position: absolute; top: 2px; right: 2px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #ffa500;
  animation: vbc-pulse-save 1s ease-in-out infinite;
}
@keyframes vbc-pulse-save { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* ── VBC Enterprise: Smooth Page Transitions ──────────────── */
.vbc-screen-enter { animation: vbc-fade-in .2s ease-out; }
@keyframes vbc-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ── body-4135 ── */
@keyframes slideUp{from{opacity:0;transform:translateX(-50%) translateY(20px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}

/* ── body-4646 ── */
      @keyframes radar-pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.04);opacity:0.85} }
      @keyframes radar-slide-in { from{transform:translateY(-80px);opacity:0} to{transform:translateY(0);opacity:1} }
      @keyframes radar-ring { 0%{transform:scale(0.5);opacity:0.8} 100%{transform:scale(2.5);opacity:0} }
      .radar-alert-banner { position:fixed;top:0;left:0;right:0;z-index:8500;animation:radar-slide-in 0.4s ease; }

/* ── body-4735 ── */
        @keyframes radar-sweep {
          from { transform: rotate(0deg); }
          to   { transform: rotate(360deg); }
        }
        @keyframes blip-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(1.6)} }

/* ── body-4818 ── */
      @keyframes titan-shake { 0%,100%{transform:translate(0,0) rotate(0deg)} 10%{transform:translate(-8px,4px) rotate(-2deg)} 20%{transform:translate(8px,-4px) rotate(2deg)} 30%{transform:translate(-6px,6px) rotate(-1deg)} 40%{transform:translate(6px,-6px) rotate(1deg)} 50%{transform:translate(-4px,2px) rotate(-1deg)} 60%{transform:translate(4px,4px) rotate(1deg)} 70%{transform:translate(-2px,-2px) rotate(0deg)} 80%{transform:translate(2px,2px) rotate(1deg)} 90%{transform:translate(-2px,-4px) rotate(-1deg)} }
      @keyframes titan-rise { 0%{opacity:0;transform:scale(0.3) translateY(120px)} 60%{opacity:1;transform:scale(1.15) translateY(-10px)} 100%{transform:scale(1) translateY(0)} }
      @keyframes wire-left { 0%{stroke-dashoffset:200;opacity:0} 40%{opacity:1} 100%{stroke-dashoffset:0;opacity:1} }
      @keyframes wire-right { 0%{stroke-dashoffset:200;opacity:0} 40%{opacity:1} 100%{stroke-dashoffset:0;opacity:1} }
      @keyframes gear-spin { from{transform-origin:50% 50%;transform:rotate(0deg)} to{transform:rotate(360deg)} }
      @keyframes titan-text-in { 0%{opacity:0;letter-spacing:30px} 100%{opacity:1;letter-spacing:4px} }
      @keyframes titan-flash { 0%,100%{opacity:1} 50%{opacity:0.3} }
      @keyframes steam-up { 0%{transform:translateY(0) scaleX(1);opacity:0.7} 100%{transform:translateY(-60px) scaleX(0.3);opacity:0} }
      #titan-body { animation: titan-rise 1s cubic-bezier(.17,.67,.3,1.2) forwards; }
      #titan-scene { animation: titan-shake 0.4s ease 0.5s 4; }
      .titan-wire-l { stroke-dasharray:200; animation: wire-left 0.8s ease 1.2s forwards; }
      .titan-wire-r { stroke-dasharray:200; animation: wire-right 0.8s ease 1.4s forwards; }
      .gear-l { animation: gear-spin 0.6s linear 1.2s 3; }
      .gear-r { animation: gear-spin 0.6s linear reverse 1.4s 3; }
      #titan-label { animation: titan-text-in 0.8s ease 2s forwards; opacity:0; }
      #titan-sub { animation: titan-flash 1s ease 2.8s 3; }
      .steam { animation: steam-up 1s ease forwards; }