/* ═══════════════════════════════════════════
   TRIVIAL COFRADE - Estilos v2.0
   Arquitectura modular · Tema: Barroco Cofrade
   ═══════════════════════════════════════════ */

/* ── Variables ── */
:root {
    --morado-oscuro: #1a0a2e;
    --morado-profundo: #2d1650;
    --morado-medio: #4a1a6b;
    --morado-claro: #7b3fa0;
    --dorado: #d4a843;
    --dorado-claro: #f0d68a;
    --dorado-brillante: #ffd700;
    --burdeos: #6b1d3a;
    --burdeos-claro: #8b2252;
    --crema: #f5ecd7;
    --crema-oscuro: #e8d9b5;
    --negro: #0a0612;
    --blanco: #fefcf6;
    --verde: #2ecc71;
    --rojo: #c0392b;
    --azul: #3498db;
    --font-display: 'Cinzel Decorative', serif;
    --font-heading: 'Cinzel', serif;
    --font-body: 'Lora', serif;
    --shadow-md: 0 4px 20px rgba(26,10,46,.25);
    --shadow-lg: 0 8px 40px rgba(26,10,46,.35);
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
}

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: var(--font-body);
    background: var(--negro);
    color: var(--crema);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.6;
}
body::before {
    content: '';
    position: fixed; inset: 0;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(107,29,58,.4) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(74,26,107,.3) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(212,168,67,.08) 0%, transparent 40%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23d4a843' fill-opacity='.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

/* ── Particles ── */
.particles { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.particle {
    position: absolute; width: 4px; height: 4px;
    background: var(--dorado); border-radius: 50%; opacity: 0;
    animation: floatUp linear infinite;
    box-shadow: 0 0 6px var(--dorado), 0 0 12px rgba(212,168,67,.3);
}
@keyframes floatUp {
    0%   { transform: translateY(100vh) scale(0); opacity: 0; }
    10%  { opacity: .8; }
    90%  { opacity: .3; }
    100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}

/* ── App Layout ── */
.app { position: relative; z-index: 1; max-width: 920px; margin: 0 auto; padding: 20px; min-height: 100vh; }

/* ═══════════════════
   HEADER
   ═══════════════════ */
.hdr { text-align: center; padding: 35px 20px 25px; animation: fadeInD 1s ease-out; }
.hdr__ico { font-size: 3rem; display: block; animation: flicker 3s ease-in-out infinite; }
@keyframes flicker { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.85; transform:scale(1.05); } }
.hdr h1 {
    font-family: var(--font-display); font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 900;
    background: linear-gradient(135deg, var(--dorado-claro), var(--dorado), var(--dorado-claro));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    letter-spacing: 2px; line-height: 1.2; margin-bottom: 6px;
}
.hdr__sub {
    font-family: var(--font-heading); font-size: clamp(.8rem, 2.5vw, 1rem);
    color: var(--crema-oscuro); letter-spacing: 3px; text-transform: uppercase; opacity: .8;
}
.hdr__div { width: 120px; height: 2px; background: linear-gradient(90deg, transparent, var(--dorado), transparent); margin: 18px auto 0; }
.hdr__nav { display:flex; justify-content:center; gap:8px; margin-top:14px; flex-wrap:wrap; }
.hdr__nav-btn { display:inline-flex; align-items:center; gap:4px; padding:7px 14px; background:rgba(212,168,67,.08); border:1px solid rgba(212,168,67,.18); border-radius:25px; color:var(--crema-oscuro); font-family:var(--font-heading); font-size:.75rem; font-weight:500; letter-spacing:.5px; cursor:pointer; transition:all .3s; }
.hdr__nav-btn:hover { background:rgba(212,168,67,.18); color:var(--dorado-claro); border-color:var(--dorado); transform:translateY(-2px); }
.hdr__nav-btn--profile { background:rgba(212,168,67,.12); border-color:rgba(212,168,67,.3); color:var(--dorado-claro); font-weight:600; }

/* Logged-in panel */
.logged-card { border:1px solid rgba(212,168,67,.25); background:linear-gradient(135deg,rgba(45,22,80,.6),rgba(74,26,107,.3)); }
.logged-head { display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.logged-head__ico { font-size:2.5rem; }
.logged-head__greet { font-family:var(--font-display); font-size:clamp(1.1rem,3vw,1.5rem); font-weight:700; color:var(--dorado-claro); }
.logged-head__sub { font-size:.82rem; color:var(--crema-oscuro); margin-top:2px; }
.logged-actions { display:flex; flex-direction:column; gap:10px; }
.logged-prov-btn { background:linear-gradient(135deg,#1a6b3c,#2d8f4e) !important; border-color:#34a853 !important; }
.logged-prov-btn:hover { background:linear-gradient(135deg,#2d8f4e,#34a853) !important; }
.logged-links { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:6px; }
.logged-logout { opacity:.6; font-size:.75rem !important; }
.logged-logout:hover { opacity:1; }

/* ═══════════════════
   SCREENS
   ═══════════════════ */
.scr { display: none; animation: fadeIn .6s ease-out; }
.scr.active { display: block; }
@keyframes fadeIn { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeInD { from { opacity:0; transform:translateY(-30px); } to { opacity:1; transform:translateY(0); } }

/* ═══════════════════
   CARDS
   ═══════════════════ */
.card {
    background: linear-gradient(145deg, rgba(45,22,80,.9), rgba(26,10,46,.95));
    border: 1px solid rgba(212,168,67,.15); border-radius: var(--radius-lg);
    padding: 32px; margin-bottom: 22px;
    box-shadow: var(--shadow-md); backdrop-filter: blur(10px);
    position: relative; overflow: hidden;
}
.card::before { content:''; position:absolute; top:0; left:0; width:100%; height:3px; background:linear-gradient(90deg,var(--burdeos),var(--dorado),var(--burdeos)); }
.card__t { font-family:var(--font-heading); font-size:1.4rem; font-weight:600; color:var(--dorado-claro); margin-bottom:8px; letter-spacing:1px; }
.card__p { color:var(--crema-oscuro); font-size:.93rem; line-height:1.7; margin-bottom:18px; }

/* ═══════════════════
   FORM
   ═══════════════════ */
.fg { margin-bottom: 18px; }
.fg label { display:block; font-family:var(--font-heading); font-size:.8rem; font-weight:500; color:var(--dorado-claro); margin-bottom:5px; letter-spacing:1px; text-transform:uppercase; }
.fg input[type="text"],
.fg input[type="email"] {
    width:100%; padding:13px 16px; background:rgba(10,6,18,.6);
    border:1.5px solid rgba(212,168,67,.2); border-radius:var(--radius-sm);
    color:var(--crema); font-family:var(--font-body); font-size:1rem;
    transition:all .3s; outline:none;
}
.fg input:focus { border-color:var(--dorado); box-shadow:0 0 0 3px rgba(212,168,67,.15); }
.fg input::placeholder { color:rgba(245,236,215,.35); font-style:italic; }
.fr { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.chk { display:flex; align-items:flex-start; gap:11px; margin-bottom:14px; cursor:pointer; }
.chk input[type="checkbox"] {
    appearance:none; -webkit-appearance:none; width:22px; height:22px; min-width:22px;
    border:2px solid rgba(212,168,67,.3); border-radius:4px; background:rgba(10,6,18,.5);
    cursor:pointer; position:relative; top:2px; transition:all .3s;
}
.chk input:checked { background:var(--dorado); border-color:var(--dorado); }
.chk input:checked::after { content:'✓'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:var(--morado-oscuro); font-size:14px; font-weight:700; }
.chk span { font-size:.84rem; color:var(--crema-oscuro); line-height:1.5; }
.chk a { color:var(--dorado); text-decoration:underline; text-underline-offset:2px; }
.ferr { color:var(--rojo); font-size:.82rem; margin-top:4px; display:none; }
.ferr.on { display:block; }

/* ═══════════════════
   BUTTONS
   ═══════════════════ */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    padding:15px 34px; font-family:var(--font-heading); font-size:.95rem;
    font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
    border:none; border-radius:var(--radius-sm); cursor:pointer; transition:all .4s; text-decoration:none;
}
.btn--p { background:linear-gradient(135deg,var(--dorado),#c4962e); color:var(--morado-oscuro); box-shadow:0 4px 20px rgba(212,168,67,.4); }
.btn--p:hover { transform:translateY(-3px); box-shadow:0 8px 30px rgba(212,168,67,.5); }
.btn--s { background:transparent; color:var(--dorado); border:2px solid rgba(212,168,67,.4); }
.btn--s:hover { border-color:var(--dorado); background:rgba(212,168,67,.1); transform:translateY(-2px); }
.btn--f { width:100%; }
.btn--sm { padding:10px 20px; font-size:.83rem; }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none !important; }

/* ═══════════════════
   PHASES FLOW (welcome)
   ═══════════════════ */
.phases-flow { display:flex; flex-direction:column; gap:6px; margin-top:16px; }
.phase-step {
    display:flex; align-items:center; gap:16px; padding:16px 20px;
    background:rgba(45,22,80,.5); border:1px solid rgba(212,168,67,.1);
    border-radius:var(--radius-md); transition:all .3s;
}
.phase-step:hover { border-color:rgba(212,168,67,.25); background:rgba(74,26,107,.4); }
.phase-step--gold { border-color:rgba(212,168,67,.3); background:linear-gradient(135deg,rgba(212,168,67,.08),rgba(45,22,80,.5)); }
.phase-step__num {
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px; min-width:40px; border-radius:50%;
    background:rgba(212,168,67,.15); border:2px solid rgba(212,168,67,.3);
    font-family:var(--font-heading); font-weight:700; font-size:1rem; color:var(--dorado-claro);
}
.phase-step--gold .phase-step__num { background:linear-gradient(135deg,var(--dorado),#c4962e); color:var(--morado-oscuro); border-color:var(--dorado); }
.phase-step__body h3 { font-family:var(--font-heading); font-size:.95rem; font-weight:600; color:var(--dorado-claro); margin-bottom:3px; }
.phase-step__body p { font-size:.84rem; color:var(--crema-oscuro); line-height:1.5; }
.phase-arrow { text-align:center; color:var(--dorado); opacity:.4; font-size:.9rem; }

/* ═══════════════════
   FEATURES GRID
   ═══════════════════ */
.feats { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin:18px 0; }
.feat {
    display:flex; align-items:center; gap:9px; padding:11px 14px;
    background:rgba(74,26,107,.3); border:1px solid rgba(212,168,67,.1);
    border-radius:var(--radius-sm); font-size:.88rem; color:var(--crema); transition:all .3s;
}
.feat:hover { border-color:rgba(212,168,67,.3); background:rgba(74,26,107,.5); transform:translateY(-2px); }
.feat__ic { font-size:1.3rem; flex-shrink:0; }

/* ═══════════════════
   HUD (Game)
   ═══════════════════ */
.hud {
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
    margin-bottom:18px; padding:14px 18px;
    background:rgba(10,6,18,.5); border-radius:var(--radius-md); border:1px solid rgba(212,168,67,.1);
}
.hud__i { text-align:center; }
.hud__l { font-family:var(--font-heading); font-size:.63rem; text-transform:uppercase; letter-spacing:2px; color:var(--crema-oscuro); opacity:.7; }
.hud__v { font-family:var(--font-heading); font-size:1.25rem; font-weight:700; color:var(--dorado-claro); }
.hud__v--t { color:var(--dorado-brillante); min-width:40px; display:inline-block; }
.hud__v--t.warn { color:var(--rojo); animation:pulse .5s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.5; } }

/* Progress bar */
.pbar { width:100%; height:6px; background:rgba(10,6,18,.5); border-radius:3px; margin-bottom:22px; overflow:hidden; }
.pbar__f { height:100%; background:linear-gradient(90deg,var(--burdeos),var(--dorado)); border-radius:3px; transition:width .5s; }

/* ═══════════════════
   QUESTION
   ═══════════════════ */
.q__cat {
    display:inline-flex; align-items:center; gap:6px; padding:5px 14px;
    background:rgba(107,29,58,.4); border:1px solid rgba(107,29,58,.5); border-radius:20px;
    font-family:var(--font-heading); font-size:.72rem; font-weight:500;
    text-transform:uppercase; letter-spacing:2px; color:var(--dorado-claro); margin-bottom:18px;
}
.q__dif { display:inline-flex; padding:3px 10px; border-radius:10px; font-size:.63rem; font-weight:600; text-transform:uppercase; letter-spacing:1px; margin-left:8px; }
.dif--facil  { background:rgba(46,204,113,.2);  color:var(--verde); }
.dif--media  { background:rgba(241,196,15,.2);  color:#f1c40f; }
.dif--dificil{ background:rgba(192,57,43,.2);   color:#e74c3c; }
.q__txt { font-family:var(--font-heading); font-size:clamp(1.05rem,3vw,1.35rem); font-weight:500; color:var(--crema); line-height:1.5; margin-bottom:26px; }

/* Options */
.opts { display:grid; gap:11px; }
.opt {
    display:flex; align-items:center; gap:14px; width:100%; padding:16px 20px;
    background:rgba(45,22,80,.5); border:2px solid rgba(212,168,67,.12);
    border-radius:var(--radius-md); color:var(--crema); font-family:var(--font-body);
    font-size:.95rem; text-align:left; cursor:pointer; transition:all .3s;
}
.opt:hover:not(:disabled) { border-color:rgba(212,168,67,.4); background:rgba(74,26,107,.5); transform:translateX(5px); }
.opt__lt {
    display:flex; align-items:center; justify-content:center; width:34px; height:34px; min-width:34px;
    border-radius:50%; background:rgba(212,168,67,.15); border:1.5px solid rgba(212,168,67,.3);
    font-family:var(--font-heading); font-weight:700; font-size:.82rem; color:var(--dorado-claro); transition:all .3s;
}
.opt.ok { border-color:var(--verde); background:rgba(46,204,113,.15); animation:okPulse .5s; }
.opt.ok .opt__lt { background:var(--verde); border-color:var(--verde); color:#fff; }
.opt.ko { border-color:var(--rojo); background:rgba(192,57,43,.15); animation:shake .4s; }
.opt.ko .opt__lt { background:var(--rojo); border-color:var(--rojo); color:#fff; }
.opt:disabled { cursor:default; opacity:.6; }
.opt.ok:disabled, .opt.ko:disabled { opacity:1; }
@keyframes okPulse { 0%{transform:scale(1)} 50%{transform:scale(1.02)} 100%{transform:scale(1)} }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }

/* Explanation */
.expl { display:none; margin-top:18px; padding:18px; background:rgba(10,6,18,.5); border-left:4px solid var(--dorado); border-radius:0 var(--radius-sm) var(--radius-sm) 0; animation:fadeIn .4s; }
.expl.on { display:block; }
.expl__t { font-family:var(--font-heading); font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:2px; color:var(--dorado); margin-bottom:6px; }
.expl__p { font-size:.88rem; color:var(--crema-oscuro); line-height:1.6; }
.expl__c { margin-top:10px; padding-top:10px; border-top:1px solid rgba(212,168,67,.15); font-size:.84rem; font-style:italic; color:var(--dorado-claro); }
.expl__c::before { content:'💡 '; }
.nxt { text-align:center; margin-top:22px; display:none; }
.nxt.on { display:block; }

/* ═══════════════════
   RESULTS
   ═══════════════════ */
.res-h { text-align:center; padding:18px 0 26px; }
.res-h__em { font-size:4rem; display:block; margin-bottom:8px; animation:bounceIn .8s; }
@keyframes bounceIn { 0%{transform:scale(0)} 50%{transform:scale(1.2)} 100%{transform:scale(1)} }
.res-h__t { font-family:var(--font-display); font-size:clamp(1.5rem,4vw,2.3rem); font-weight:700; background:linear-gradient(135deg,var(--dorado-claro),var(--dorado)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:6px; }
.res-h__s { font-size:1rem; color:var(--crema-oscuro); }
.score-d { text-align:center; padding:28px; margin:18px 0; background:radial-gradient(ellipse at center,rgba(212,168,67,.1),transparent 70%); border:1px solid rgba(212,168,67,.2); border-radius:var(--radius-lg); }
.score-d__n { font-family:var(--font-display); font-size:clamp(2.8rem,8vw,4.8rem); font-weight:900; color:var(--dorado-brillante); line-height:1; text-shadow:0 0 40px rgba(212,168,67,.4); }
.score-d__l { font-family:var(--font-heading); font-size:.78rem; text-transform:uppercase; letter-spacing:3px; color:var(--dorado-claro); margin-top:4px; }
.stg { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:18px 0; }
.st { text-align:center; padding:16px 10px; background:rgba(45,22,80,.5); border:1px solid rgba(212,168,67,.1); border-radius:var(--radius-md); }
.st__v { font-family:var(--font-heading); font-size:1.5rem; font-weight:700; color:var(--dorado-claro); }
.st__l { font-size:.72rem; text-transform:uppercase; letter-spacing:1px; color:var(--crema-oscuro); opacity:.7; margin-top:3px; }

/* Unlock banner */
.unlock-banner {
    text-align:center; padding:40px 30px; margin:20px 0;
    background:linear-gradient(135deg,rgba(212,168,67,.08),rgba(107,29,58,.15));
    border:2px solid var(--dorado); border-radius:var(--radius-lg);
    position:relative; overflow:hidden; animation:glowPulse 2s ease-in-out infinite;
}
@keyframes glowPulse { 0%,100%{box-shadow:0 0 20px rgba(212,168,67,.2)} 50%{box-shadow:0 0 40px rgba(212,168,67,.4)} }
.unlock-banner__crown { font-size:5rem; display:block; margin-bottom:10px; animation:bounceIn .8s; }
.unlock-banner__badge { display:inline-block; padding:8px 22px; background:linear-gradient(135deg,var(--dorado),#c4962e); color:var(--morado-oscuro); font-family:var(--font-heading); font-weight:700; font-size:.85rem; letter-spacing:2px; text-transform:uppercase; border-radius:30px; margin-bottom:20px; }
.unlock-banner__title { font-family:var(--font-display); font-size:clamp(1.4rem,4vw,2rem); font-weight:900; background:linear-gradient(135deg,#ffd700,var(--dorado),#ffd700); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:10px; }
.unlock-banner__text { font-size:1rem; color:var(--crema); max-width:550px; margin:0 auto 20px; line-height:1.7; }

.retry-banner {
    text-align:center; padding:28px 24px; margin:20px 0;
    background:linear-gradient(135deg,rgba(52,152,219,.08),rgba(45,22,80,.2));
    border:2px solid rgba(52,152,219,.3); border-radius:var(--radius-lg);
}
.retry-banner__ico { font-size:3rem; display:block; margin-bottom:8px; }
.retry-banner__title { font-family:var(--font-heading); font-size:1.15rem; font-weight:700; color:#5dade2; margin-bottom:8px; }
.retry-banner__text { font-size:.9rem; color:var(--crema-oscuro); max-width:480px; margin:0 auto 16px; line-height:1.6; }

.login-divider { display:flex; align-items:center; gap:14px; margin:22px 0 16px; }
.login-divider::before, .login-divider::after { content:''; flex:1; height:1px; background:rgba(212,168,67,.15); }
.login-divider span { font-family:var(--font-heading); font-size:.78rem; color:var(--dorado); text-transform:uppercase; letter-spacing:1px; white-space:nowrap; }

.res-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:22px 0; }

/* ═══════════════════
   PROVINCE SELECTOR
   ═══════════════════ */
.prov-section-head { text-align:center; margin-bottom:25px; }
.prov-section-head__ico { font-size:3rem; display:block; margin-bottom:8px; }
.prov-section__title { font-family:var(--font-display); font-size:clamp(1.2rem,3vw,1.6rem); font-weight:700; color:var(--dorado-claro); margin-bottom:8px; }
.prov-section__sub { font-size:.9rem; color:var(--crema-oscuro); opacity:.8; max-width:500px; margin:0 auto; line-height:1.6; }

/* Province filters */
.prov-filters { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:20px; }
.prov-filter {
    padding:6px 16px; border-radius:20px; font-family:var(--font-heading); font-size:.72rem;
    font-weight:500; letter-spacing:1px; text-transform:uppercase;
    background:rgba(45,22,80,.4); border:1px solid rgba(212,168,67,.15);
    color:var(--crema-oscuro); cursor:pointer; transition:all .3s;
}
.prov-filter:hover, .prov-filter.active { background:rgba(212,168,67,.15); border-color:var(--dorado); color:var(--dorado-claro); }

/* Province grid */
.prov-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin-bottom:20px; }
.prov-card {
    position:relative; padding:24px 20px; text-align:center;
    background:linear-gradient(145deg,rgba(45,22,80,.7),rgba(26,10,46,.85));
    border:2px solid rgba(212,168,67,.12); border-radius:var(--radius-lg);
    cursor:pointer; transition:all .4s; overflow:hidden;
}
.prov-card:hover { border-color:var(--dorado); transform:translateY(-5px); box-shadow:0 12px 35px rgba(212,168,67,.2); }
.prov-card::after { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(135deg,transparent 40%,rgba(212,168,67,.05)); pointer-events:none; }
.prov-card.locked { opacity:.45; cursor:not-allowed; filter:grayscale(.4); }
.prov-card.locked:hover { transform:none; box-shadow:none; border-color:rgba(212,168,67,.12); }
.prov-card__emoji { font-size:2.8rem; display:block; margin-bottom:10px; }
.prov-card__name { font-family:var(--font-heading); font-size:1.15rem; font-weight:700; color:var(--dorado-claro); margin-bottom:4px; }
.prov-card__ccaa { font-family:var(--font-heading); font-size:.65rem; text-transform:uppercase; letter-spacing:2px; color:var(--crema-oscuro); opacity:.6; margin-bottom:10px; }
.prov-card__desc { font-size:.82rem; color:var(--crema-oscuro); line-height:1.5; position:relative; z-index:1; }
.prov-card__lock { position:absolute; top:12px; right:12px; font-size:1.3rem; opacity:.6; }
.prov-card__badge { display:inline-block; margin-top:12px; padding:4px 12px; border-radius:15px; font-family:var(--font-heading); font-size:.65rem; text-transform:uppercase; letter-spacing:1px; position:relative; z-index:1; }
.prov-card__badge--new { background:rgba(46,204,113,.15); color:var(--verde); border:1px solid rgba(46,204,113,.3); }
.prov-card__badge--played { background:rgba(52,152,219,.15); color:var(--azul); border:1px solid rgba(52,152,219,.3); }
.prov-card__qs { font-size:.7rem; color:var(--crema-oscuro); opacity:.5; margin-top:6px; position:relative; z-index:1; }
.prov-coming { text-align:center; font-size:.82rem; color:var(--crema-oscuro); opacity:.5; margin-top:5px; }

/* Province header in game */
.prov-hdr { display:flex; align-items:center; gap:14px; padding:14px 20px; background:linear-gradient(135deg,rgba(107,29,58,.3),rgba(45,22,80,.4)); border:1px solid rgba(212,168,67,.15); border-radius:var(--radius-md); margin-bottom:18px; }
.prov-hdr__emoji { font-size:2rem; }
.prov-hdr__info h3 { font-family:var(--font-heading); font-size:1rem; color:var(--dorado-claro); font-weight:600; }
.prov-hdr__info p { font-size:.78rem; color:var(--crema-oscuro); opacity:.7; }
.prov-hdr__fase { margin-left:auto; padding:5px 14px; background:linear-gradient(135deg,var(--burdeos),var(--burdeos-claro)); border-radius:20px; font-family:var(--font-heading); font-size:.65rem; color:var(--dorado-claro); letter-spacing:2px; text-transform:uppercase; font-weight:600; }

/* ═══════════════════
   RANKING
   ═══════════════════ */
.rtabs { display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.rtab { padding:7px 16px; background:rgba(45,22,80,.4); border:1px solid rgba(212,168,67,.15); border-radius:20px; color:var(--crema-oscuro); font-family:var(--font-heading); font-size:.78rem; font-weight:500; cursor:pointer; transition:all .3s; }
.rtab.active, .rtab:hover { background:rgba(212,168,67,.15); border-color:var(--dorado); color:var(--dorado-claro); }
.rk-stats { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:16px; padding:12px; background:rgba(10,6,18,.3); border-radius:var(--radius-sm); }
.rktable { width:100%; border-collapse:collapse; }
.rktable th { font-family:var(--font-heading); font-size:.68rem; text-transform:uppercase; letter-spacing:2px; color:var(--dorado); padding:10px 8px; text-align:left; border-bottom:1px solid rgba(212,168,67,.2); }
.rktable td { padding:12px 8px; font-size:.88rem; color:var(--crema); border-bottom:1px solid rgba(212,168,67,.06); transition:background .3s; }
.rktable tr:hover td { background:rgba(212,168,67,.05); }
.rk-pos { font-family:var(--font-heading); font-weight:700; color:var(--dorado-claro); }
.rk-1 { color:#ffd700; font-size:1.2rem; } .rk-2 { color:#c0c0c0; font-size:1.1rem; } .rk-3 { color:#cd7f32; font-size:1.05rem; }
.rk-sc { font-family:var(--font-heading); font-weight:600; color:var(--dorado-brillante); }
.rk-empty { text-align:center; padding:35px 20px; color:var(--crema-oscuro); opacity:.6; font-style:italic; }

/* Ranking mode tabs */
.rk-mode-tabs { display:flex; gap:0; margin-bottom:18px; border-radius:var(--radius-md); overflow:hidden; border:1px solid rgba(212,168,67,.2); }
.rk-mode { flex:1; padding:12px 18px; background:rgba(45,22,80,.3); color:var(--crema-oscuro); font-family:var(--font-heading); font-size:.88rem; font-weight:600; letter-spacing:.5px; cursor:pointer; transition:all .3s; border:none; }
.rk-mode:first-child { border-right:1px solid rgba(212,168,67,.15); }
.rk-mode.active { background:rgba(212,168,67,.15); color:var(--dorado-claro); }
.rk-mode:hover:not(.active) { background:rgba(212,168,67,.08); }

/* Provincial ranking selector */
.rk-prov-select { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.rk-prov-btn { padding:7px 14px; background:rgba(45,22,80,.4); border:1px solid rgba(212,168,67,.12); border-radius:20px; color:var(--crema-oscuro); font-size:.8rem; cursor:pointer; transition:all .3s; }
.rk-prov-btn.active, .rk-prov-btn:hover { background:rgba(212,168,67,.15); border-color:var(--dorado); color:var(--dorado-claro); }

/* Auto-refresh info */
.rk-refresh-info { text-align:center; font-size:.7rem; color:var(--crema-oscuro); opacity:.35; margin-top:10px; font-style:italic; }

/* ═══════════════════
   PROMO & AMAZON
   ═══════════════════ */
/* ═══════════════════
   PRODUCTS 3D
   ═══════════════════ */
.promo3d {
    background:linear-gradient(135deg,rgba(107,29,58,.35),rgba(45,22,80,.5));
    border:2px solid rgba(212,168,67,.2); border-radius:var(--radius-lg);
    padding:30px 24px; margin:28px 0; text-align:center; position:relative; overflow:hidden;
}
.promo3d::before { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:conic-gradient(from 0deg,transparent,rgba(212,168,67,.05),transparent,rgba(212,168,67,.03),transparent); animation:rotateSlow 20s linear infinite; }
@keyframes rotateSlow { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.promo3d__badge { position:relative; z-index:1; display:inline-block; padding:4px 14px; background:rgba(212,168,67,.15); border:1px solid rgba(212,168,67,.3); border-radius:20px; font-family:var(--font-heading); font-size:.65rem; text-transform:uppercase; letter-spacing:2px; color:var(--dorado); margin-bottom:12px; }
.promo3d__t { position:relative; z-index:1; font-family:var(--font-display); font-size:clamp(1.2rem,3vw,1.5rem); font-weight:700; color:var(--dorado-claro); margin-bottom:8px; }
.promo3d__p { position:relative; z-index:1; font-size:.9rem; color:var(--crema-oscuro); margin-bottom:20px; max-width:550px; margin-left:auto; margin-right:auto; line-height:1.6; }
.promo3d__gallery { position:relative; z-index:1; display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin-bottom:22px; }
.promo3d__item { background:rgba(10,6,18,.4); border:1px solid rgba(212,168,67,.12); border-radius:var(--radius-md); padding:12px 8px; transition:all .3s; }
.promo3d__item:hover { border-color:rgba(212,168,67,.3); transform:translateY(-3px); }
.promo3d__item p { font-family:var(--font-heading); font-size:.75rem; color:var(--crema-oscuro); margin-top:6px; }
.promo3d__item img { width:100%; height:120px; object-fit:cover; border-radius:8px; }
.promo3d__img-placeholder { width:100%; height:120px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(45,22,80,.4); border-radius:8px; font-size:2rem; color:var(--dorado); }
.promo3d__img-placeholder small { font-size:.65rem; color:var(--crema-oscuro); margin-top:4px; }
.promo3d .btn { position:relative; z-index:1; }
.promo3d__sub { position:relative; z-index:1; font-size:.72rem; color:var(--crema-oscuro); opacity:.5; margin-top:10px; }

/* ═══════════════════
   AMAZON AFFILIATES
   ═══════════════════ */
.amz { margin:28px 0; }
.amz__t { font-family:var(--font-heading); font-size:1.05rem; font-weight:600; color:var(--dorado-claro); margin-bottom:6px; text-align:center; }
.amz__sub { text-align:center; font-size:.82rem; color:var(--crema-oscuro); opacity:.6; margin-bottom:16px; }
.amz-g { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.amz-c { display:flex; align-items:center; gap:14px; padding:16px; background:rgba(45,22,80,.4); border:1px solid rgba(212,168,67,.1); border-radius:var(--radius-md); text-decoration:none; color:var(--crema); transition:all .3s; }
.amz-c:hover { border-color:rgba(212,168,67,.3); background:rgba(74,26,107,.4); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.amz-c__ic { font-size:1.8rem; flex-shrink:0; }
.amz-c h4 { font-family:var(--font-heading); font-size:.85rem; font-weight:600; color:var(--dorado-claro); margin-bottom:3px; }
.amz-c p { font-size:.78rem; color:var(--crema-oscuro); opacity:.8; }
.amz-c__ar { margin-left:auto; color:var(--dorado); opacity:.5; transition:all .3s; }
.amz-c:hover .amz-c__ar { opacity:1; transform:translateX(3px); }
.amz-disclaimer { text-align:center; font-size:.68rem; opacity:.35; margin-top:10px; font-style:italic; color:var(--crema-oscuro); }

/* ═══════════════════
   SHARE & FACTS
   ═══════════════════ */
.share { text-align:center; margin:22px 0; }
.share__t { font-family:var(--font-heading); font-size:.78rem; text-transform:uppercase; letter-spacing:2px; color:var(--crema-oscuro); margin-bottom:12px; }
.share-btns { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.sh { display:inline-flex; align-items:center; gap:7px; padding:9px 18px; border-radius:25px; font-family:var(--font-heading); font-size:.78rem; font-weight:500; text-decoration:none; color:#fff; transition:all .3s; border:none; cursor:pointer; }
.sh:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.sh--wa { background:#25d366; } .sh--tw { background:#1da1f2; } .sh--fb { background:#1877f2; }
.sh--cp { background:rgba(212,168,67,.3); color:var(--dorado-claro); border:1px solid rgba(212,168,67,.3); }

.fact { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; background:rgba(45,22,80,.35); border-left:3px solid var(--dorado); border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-size:.88rem; color:var(--crema-oscuro); line-height:1.6; transition:all .3s; margin-bottom:8px; }
.fact:hover { background:rgba(74,26,107,.35); transform:translateX(3px); }
.fact__ic { font-size:1.1rem; flex-shrink:0; margin-top:2px; }

/* ═══════════════════
   FOOTER
   ═══════════════════ */
.ftr { text-align:center; padding:28px 18px; margin-top:35px; border-top:1px solid rgba(212,168,67,.1); }
.ftr__lk { display:flex; justify-content:center; gap:18px; margin-bottom:12px; flex-wrap:wrap; }
.ftr__lk a { font-family:var(--font-heading); font-size:.72rem; text-transform:uppercase; letter-spacing:1px; color:var(--crema-oscuro); text-decoration:none; opacity:.6; transition:all .3s; }
.ftr__lk a:hover { color:var(--dorado); opacity:1; }
.ftr__c { font-size:.75rem; color:var(--crema-oscuro); opacity:.4; }
.ftr__af { font-size:.7rem; color:var(--crema-oscuro); opacity:.35; margin-top:6px; font-style:italic; }

/* ═══════════════════
   COOKIE & MODAL
   ═══════════════════ */
.cookie { position:fixed; bottom:0; left:0; width:100%; padding:18px; background:rgba(10,6,18,.97); border-top:1px solid rgba(212,168,67,.2); z-index:1000; display:none; backdrop-filter:blur(10px); }
.cookie.on { display:block; animation:slideUp .4s; }
@keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
.cookie__in { max-width:900px; margin:0 auto; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.cookie__tx { flex:1; font-size:.84rem; color:var(--crema-oscuro); min-width:240px; }
.cookie__tx a { color:var(--dorado); }
.cookie__bt { display:flex; gap:8px; }

.modal-ov { position:fixed; inset:0; background:rgba(10,6,18,.9); z-index:2000; display:none; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(5px); }
.modal-ov.on { display:flex; }
.modal { background:var(--morado-profundo); border:1px solid rgba(212,168,67,.2); border-radius:var(--radius-lg); padding:32px; max-width:640px; width:100%; max-height:80vh; overflow-y:auto; position:relative; }
.modal__x { position:absolute; top:12px; right:12px; background:none; border:none; color:var(--crema-oscuro); font-size:1.5rem; cursor:pointer; padding:5px; transition:color .3s; }
.modal__x:hover { color:var(--dorado); }
.modal h2 { font-family:var(--font-heading); font-size:1.2rem; color:var(--dorado-claro); margin-bottom:18px; }
.modal h3 { font-family:var(--font-heading); font-size:.95rem; color:var(--dorado); margin:16px 0 6px; }
.modal p, .modal li { font-size:.86rem; color:var(--crema-oscuro); line-height:1.7; }
.modal ul { padding-left:18px; margin:6px 0; }

/* ═══════════════════
   PERFIL
   ═══════════════════ */
.perfil-head { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.perfil-head__ico { font-size:2.8rem; }
.perfil-head__name { font-family:var(--font-display); font-size:clamp(1.2rem,3vw,1.6rem); font-weight:700; color:var(--dorado-claro); }
.perfil-head__since { font-size:.82rem; color:var(--crema-oscuro); opacity:.6; }
.perfil-head__badge { margin-left:auto; padding:6px 16px; background:linear-gradient(135deg,var(--dorado),#c4962e); color:var(--morado-oscuro); font-family:var(--font-heading); font-size:.7rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; border-radius:20px; }

.pf-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-top:14px; }
.pf-stat { text-align:center; padding:18px 10px; background:rgba(45,22,80,.5); border:1px solid rgba(212,168,67,.1); border-radius:var(--radius-md); transition:all .3s; }
.pf-stat:hover { border-color:rgba(212,168,67,.25); background:rgba(74,26,107,.4); }
.pf-stat__v { font-family:var(--font-heading); font-size:1.6rem; font-weight:700; color:var(--dorado-brillante); }
.pf-stat__l { font-size:.7rem; text-transform:uppercase; letter-spacing:1px; color:var(--crema-oscuro); opacity:.7; margin-top:4px; }

.pf-tabs { display:flex; gap:8px; margin-bottom:14px; }
.pf-tab { padding:7px 16px; background:rgba(45,22,80,.4); border:1px solid rgba(212,168,67,.15); border-radius:20px; color:var(--crema-oscuro); font-family:var(--font-heading); font-size:.78rem; font-weight:500; cursor:pointer; transition:all .3s; }
.pf-tab.active { background:rgba(212,168,67,.15); border-color:var(--dorado); color:var(--dorado-claro); }

.pf-rk-row { display:flex; align-items:center; gap:14px; padding:14px 16px; background:rgba(45,22,80,.3); border:1px solid rgba(212,168,67,.08); border-radius:var(--radius-md); margin-bottom:8px; transition:all .3s; }
.pf-rk-row:hover { background:rgba(74,26,107,.3); border-color:rgba(212,168,67,.2); }
.pf-rk-row__pos { font-family:var(--font-heading); font-size:1.1rem; font-weight:700; color:var(--dorado-claro); min-width:40px; text-align:center; }
.pf-rk-row__info { flex:1; }
.pf-rk-row__title { font-family:var(--font-heading); font-size:.88rem; font-weight:600; color:var(--crema); }
.pf-rk-row__sub { font-size:.75rem; color:var(--crema-oscuro); opacity:.6; }
.pf-rk-row__score { font-family:var(--font-heading); font-size:1.2rem; font-weight:700; color:var(--dorado-brillante); }

.pf-prov-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; margin-top:12px; }
.pf-prov-item { padding:16px; background:rgba(45,22,80,.4); border:1px solid rgba(212,168,67,.1); border-radius:var(--radius-md); text-align:center; transition:all .3s; }
.pf-prov-item:hover { border-color:rgba(212,168,67,.25); transform:translateY(-3px); }
.pf-prov-item__emoji { font-size:1.8rem; display:block; margin-bottom:5px; }
.pf-prov-item__name { font-family:var(--font-heading); font-size:.9rem; font-weight:600; color:var(--dorado-claro); }
.pf-prov-item__stats { font-size:.78rem; color:var(--crema-oscuro); margin-top:6px; line-height:1.6; }

.pf-hist { margin-top:8px; }
.pf-hist-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; background:rgba(10,6,18,.3); border-left:3px solid rgba(212,168,67,.3); border-radius:0 var(--radius-sm) var(--radius-sm) 0; margin-bottom:6px; font-size:.84rem; transition:all .3s; }
.pf-hist-row:hover { background:rgba(45,22,80,.3); transform:translateX(3px); }
.pf-hist-row__l { color:var(--crema-oscuro); }
.pf-hist-row__score { font-family:var(--font-heading); font-weight:600; color:var(--dorado-claro); }
.pf-hist-row__date { font-size:.72rem; color:var(--crema-oscuro); opacity:.5; }

/* ═══════════════════
   UTILITIES
   ═══════════════════ */
.toast-c { position:fixed; top:20px; right:20px; z-index:3000; display:flex; flex-direction:column; gap:8px; }
.toast { padding:12px 20px; border-radius:var(--radius-sm); font-size:.88rem; color:#fff; box-shadow:var(--shadow-lg); animation:tIn .4s ease, tOut .4s ease 3.6s; max-width:340px; }
.toast--ok { background:var(--verde); } .toast--err { background:var(--rojo); } .toast--info { background:var(--azul); }
@keyframes tIn { from{opacity:0;transform:translateX(50px)} to{opacity:1;transform:translateX(0)} }
@keyframes tOut { from{opacity:1} to{opacity:0} }
.spinner { display:inline-block; width:18px; height:18px; border:3px solid rgba(212,168,67,.3); border-top-color:var(--dorado); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ═══════════════════
   RESPONSIVE
   ═══════════════════ */
@media (max-width: 640px) {
    .app { padding: 10px; }
    .card { padding: 20px 16px; }
    .fr { grid-template-columns: 1fr; }
    .hud { justify-content: center; }
    .stg { gap: 6px; }
    .st { padding: 12px 6px; }
    .st__v { font-size: 1.2rem; }
    .amz-g { grid-template-columns: 1fr; }
    .prov-grid { grid-template-columns: 1fr; }
    .cookie__in { flex-direction: column; text-align: center; }
    .promo { padding: 20px 16px; }
    .rktable { font-size: .83rem; }
    .rktable th, .rktable td { padding: 8px 5px; }
    .phase-step { flex-direction: column; text-align: center; }
    .prov-hdr { flex-direction: column; text-align: center; }
    .prov-hdr__fase { margin-left: 0; }
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--morado-oscuro); }
::-webkit-scrollbar-thumb { background: rgba(212,168,67,.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(212,168,67,.5); }