/* L2 Card Game — interfaz v2. Cargar después de los estilos existentes. */
:root {
  --bg:#090e14; --bg2:#101821; --bg3:#17222e; --bg4:#203041;
  --gold:#dbba79; --gold2:#f2d9a2; --gold3:#ad8648; --gold-dim:#706044;
  --text:#e0e7ed; --text-dim:#9cabbc; --text-bright:#f6f3ec;
  --font-body: 'Segoe UI', Arial, sans-serif;
}
body { font-family:var(--font-body); background:#090e14; }
button, input, select { font-family:var(--font-body); }
button, [role="button"] { -webkit-tap-highlight-color:transparent; }
:where(button,input,select,[role="button"],a):focus-visible { outline:3px solid #80cbea; outline-offset:4px; }
#header { background:rgba(10,16,23,.97); border-bottom:1px solid #293441; gap:14px; }
#header .header-logo { font-size:17px; letter-spacing:2px; text-shadow:none; }
#header .hq-btn { border-radius:8px; background:#131e28; border-color:#2b3745; min-height:44px; }
#header .hq-label { font:600 11px var(--font-body); letter-spacing:.2px; color:#c8d2df; }
#header .hq-btn:hover { background:#243345; border-color:#8b7755; transform:translateY(-2px); }
#header .header-profile { background:#15202b; border-color:#33404d; border-radius:10px; }
#nav { padding:10px 24px; gap:8px; background:#0d141d; border-bottom:1px solid #273340; }
#nav .nav-tab { min-height:46px; padding:12px 22px; border:1px solid transparent; border-radius:7px; font:600 14px var(--font-body); letter-spacing:.3px; color:#a9b7c8; }
#nav .nav-tab.active { background:#26303a; border-color:#7c6949; color:#f2d9a2; }
#nav .nav-tab::after { display:none; }
#nav .nav-tab:hover { background:#1a2531; color:#fff; }
#main .tab-content { max-width:1320px; margin-inline:auto; }
#main .btn { border-radius:7px; min-height:40px; font-family:var(--font-body); letter-spacing:.4px; }
#main .btn.primary { background:linear-gradient(180deg,#efd29a,#bc9455); color:#21190e; border-color:#e7c78b; text-shadow:none; }
.profile-hero { margin:0; border-radius:16px; border:1px solid #34414c; min-height:630px; }
.profile-hero .pf-bg { filter:brightness(.42) saturate(.7); background-position:center; }
.profile-hero .pf-vignette { background:linear-gradient(90deg,rgba(9,14,20,.32),rgba(9,14,20,.94) 66%); }
.profile-hero .pf-content { display:grid; grid-template-columns:minmax(300px,1fr) minmax(300px,1fr); grid-template-rows:auto auto auto auto 1fr; align-items:center; column-gap:48px; row-gap:14px; padding:38px 48px; }
.profile-hero .pf-header { grid-column:1; grid-row:1; }
.profile-hero .pf-name { font-size:30px; letter-spacing:2px; color:#f2e8d3; text-shadow:0 2px 10px #000; overflow-wrap:anywhere; }
.profile-hero .pf-sub { font:13px var(--font-body); letter-spacing:.4px; flex-wrap:wrap; }
.profile-hero .pf-avatar-stage { grid-column:1; grid-row:2 / 5; justify-self:center; margin:0; max-width:100%; }
.profile-hero .pf-level-section { grid-column:1; grid-row:5; justify-self:center; width:min(100%,360px); margin:0; }
.profile-hero .pf-xp-text { font:12px var(--font-body); color:#bdc8d4; }
.profile-hero .pf-xp-fill { background:linear-gradient(90deg,#5396a9,#a2e6db); box-shadow:0 0 12px #72c9ce44; }
.profile-hero .pf-mini-cards { grid-column:2; grid-row:3; width:100%; margin:0; animation:none; }
.profile-hero .pf-mini-card { background:#15212bdd; border:1px solid #384858; border-radius:9px; color:var(--text); }
.profile-hero .pf-mini-lbl { font:12px var(--font-body); letter-spacing:0; color:#adbdcc; }
.profile-hero .pf-mini-val { font-family:var(--font-body); }
.profile-hero .pf-cta-btn { grid-column:2; grid-row:4; width:100%; margin:0; padding:13px 18px; font:600 13px var(--font-body); letter-spacing:1px; background:#17232f; border:1px solid #465565; color:#dde5ed; border-radius:8px; box-shadow:none; animation:none; }
.profile-hero .pf-vip-card { grid-column:2; grid-row:5; align-self:start; width:100%; min-width:0; margin:0; padding:12px 16px; border:1px solid #34414d; border-radius:8px; background:#111b24; box-shadow:none; }
.profile-hero .pf-vip-card-title { font:600 12px var(--font-body); letter-spacing:1px; }
.profile-hero .pf-vip-card-sub { font:12px var(--font-body); color:#aabbc9; }
.profile-hero .pf-vip-card-cta { font:600 11px var(--font-body); letter-spacing:0; }
.profile-hero .pf-vip-card-icon { font-size:23px!important; filter:none; }
.pf-play-panel { grid-column:2; grid-row:1 / 3; align-self:center; }
.pf-play-eyebrow { color:#c4a875; font:600 11px var(--font-body); letter-spacing:3px; margin-bottom:10px; }
.pf-play-panel h2 { font:600 clamp(26px,3vw,40px) var(--font-title); line-height:1.18; color:#f4efe6; margin:0 0 12px; }
.pf-play-panel p { color:#b9c7d4; font:15px/1.6 var(--font-body); max-width:390px; margin-bottom:22px; }
.pf-play-button { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:56px; padding:16px 22px; background:linear-gradient(135deg,#f2d69c,#b98e4c); color:#201b11; font:750 15px var(--font-body); letter-spacing:1px; border:1px solid #f5dda8; border-radius:8px; cursor:pointer; box-shadow:0 6px 22px #0006; transition:transform .18s,filter .18s; }
.pf-play-button:hover { filter:brightness(1.1); transform:translateY(-2px); }
.pf-play-button:active { transform:translateY(1px); }
.pf-play-secondary { display:flex; gap:10px; margin-top:10px; }
.pf-play-secondary button { flex:1; min-height:42px; border:1px solid #435363; border-radius:7px; color:#d7e2ec; background:#17222ddd; font:600 13px var(--font-body); cursor:pointer; }
.pf-play-secondary button:hover { background:#2b3a49; }
#pve-main-menu { padding:22px 8px; }
.pve-menu-header { text-align:left; margin-bottom:26px; }
.pve-menu-title { color:#f2e8d3; font-size:30px; letter-spacing:1px; text-shadow:none; }
.pve-menu-sub { font:15px var(--font-body); letter-spacing:0; margin-top:8px; }
.pve-mode-grid { max-width:none; gap:22px; }
.pve-mode-grid .pve-mode-card { min-height:440px; padding:26px; border:1px solid #5b655f!important; border-radius:14px; background:linear-gradient(180deg,#0c141a00 8%,#0b131ad9 48%,#0b131a 85%),url('../img/bg/talking.jpg') center/cover!important; text-align:left; color:var(--text); }
.pve-mode-grid .pve-mode-raid { background:linear-gradient(180deg,#160d0a00 8%,#190f14d9 48%,#170e13 85%),url('../img/mobs/boss_doscardedguardian.jpg') center 28%/cover!important; border-color:#704c47!important; }
.pve-mode-grid .pve-mode-aventura { background:linear-gradient(180deg,#07121100 8%,#091c1cd9 48%,#0a181c 85%),url('../img/bg/elvenrions.jpg') center/cover!important; border-color:#3e6869!important; }
.pve-mode-grid .pve-mode-card:hover { transform:translateY(-5px); box-shadow:0 18px 36px #0006; border-color:#e4c88e!important; }
.pve-mode-icon { margin-top:130px; font-size:25px; }
.pve-mode-name { font:600 24px var(--font-title); letter-spacing:0; color:#f5eee1; }
.pve-mode-desc { font:14px/1.65 var(--font-body); color:#bdc9d3; }
.pve-mode-progress { font:600 12px var(--font-body); letter-spacing:.3px; padding:8px 10px; background:#ffffff0b; }
.pve-mode-btn { border-top:1px solid #ffffff20; padding-top:16px; font:700 14px var(--font-body); letter-spacing:.4px; }
.pve-mode-badge { top:20px; right:18px; clip-path:none; padding:6px 10px; border-radius:4px; font:600 10px var(--font-body); background:#672d26; }
.deck-builder-v2 { border-radius:12px; border-color:#43505f; background:#121c26; }
.dbv2-deck-header { padding:16px; }
.dbv2-deck-title { color:#e8d5ad; letter-spacing:1px; }
.auth-panel { border-radius:18px; border-color:#6c5a3c; background:linear-gradient(150deg,#17232bf5,#0c121bf7); box-shadow:0 25px 100px #0009; }
.auth-panel .auth-sub { color:#becbd7; letter-spacing:2px; }
.auth-panel .auth-input { font:15px var(--font-body); border-radius:7px; background:#0b131d; border-color:#435160; min-height:46px; }
.auth-panel .auth-label { color:#c0ccda; font:600 12px var(--font-body); letter-spacing:1px; }
.auth-panel .auth-tab { font:600 14px var(--font-body); }
@media(max-width:900px) {
 .profile-hero .pf-content { padding:26px 22px; column-gap:20px; grid-template-columns:minmax(260px,1fr) minmax(260px,1fr); }
 #nav { padding:8px 12px; }
 #nav .nav-tab { padding:10px 14px; }
 .pve-mode-grid { gap:12px; }
 .pve-mode-grid .pve-mode-card { padding:20px; }
}
@media(max-width:700px) {
 .profile-hero { min-height:0; margin:0; border-radius:12px; }
 .profile-hero .pf-vignette { background:linear-gradient(180deg,#0a121850,#0a1218 75%); }
 .profile-hero .pf-content { display:flex; padding:24px 16px; gap:20px; }
 .profile-hero .pf-header { order:0; }
 .profile-hero .pf-avatar-stage { order:1; }
 .profile-hero .pf-level-section { order:2; }
 .pf-play-panel { order:3; width:100%; }
 .pf-play-panel h2 { font-size:27px; }
 .pf-play-panel p { margin-bottom:16px; font-size:14px; }
 .profile-hero .pf-mini-cards { order:4; }
 .profile-hero .pf-cta-btn { order:5; }
 .profile-hero .pf-vip-card { order:6; }
 .pve-mode-grid { grid-template-columns:1fr; }
 .pve-mode-grid .pve-mode-card { min-height:300px; }
 .pve-mode-icon { margin-top:35px; }
 .pve-menu-title { font-size:26px; }
 #nav .nav-tab { font-size:12px; padding:10px 12px; flex-shrink:0; }
 #nav { overflow-x:auto; }
}
@media(prefers-reduced-motion:reduce) {
 *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
 .pf-stat { opacity:1!important; transform:none!important; }
}
.pf-mini-card > span { display:block; }