:root{--bg:#06080f;--surface:#0d1220;--surface2:#141926;--border:#1e2d45;--gold:#e8b84b;--purple:#a78bfa;--green:#4ade80;--red:#f87171;--text:#e2e8f0;--muted:#475569;
--heroism:#f59e0b;--villainy:#a78bfa;--aggression:#f87171;--command:#4ade80;--cunning:#facc15;--vigilance:#60a5fa}
*{margin:0;padding:0;box-sizing:border-box}
body{isolation:isolate;overflow-x:hidden;background:var(--bg) url('hyperspace-bg.svg') center center / cover no-repeat fixed;color:var(--text);font-family:'Rajdhani',sans-serif;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:1.2rem 0 4rem}
header{text-align:center;margin-bottom:1.2rem}
h1{font-family:'Orbitron',monospace;font-size:clamp(1rem,4vw,1.7rem);font-weight:900;letter-spacing:.2em;color:var(--gold);text-shadow:0 0 24px rgba(232,184,75,.35);margin-bottom:.2rem}
.sub{font-size:.7rem;letter-spacing:.3em;color:var(--muted);text-transform:uppercase}
nav{display:flex;gap:1rem;margin-bottom:1.2rem;flex-wrap:wrap;justify-content:center}
.nav-btn{background:transparent;border:1px solid var(--border);border-radius:8px;padding:.4rem 1rem;color:var(--muted);font-family:'Rajdhani',sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.1em;cursor:pointer;text-decoration:none;text-transform:uppercase;transition:all .2s}
.nav-btn:hover{border-color:var(--gold);color:var(--gold)}
.set-label{font-family:'Orbitron',monospace;font-size:.6rem;letter-spacing:.2em;color:var(--gold);background:rgba(232,184,75,.1);border:1px solid rgba(232,184,75,.3);border-radius:6px;padding:.2rem .6rem}
.set-filter{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;width:100%;max-width:860px;padding:0 1rem;margin-bottom:1rem}
.set-chip{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:.25rem .75rem;font-family:'Orbitron',monospace;font-size:.52rem;font-weight:700;letter-spacing:.1em;cursor:pointer;transition:all .2s;color:var(--muted);text-transform:uppercase}
.set-chip:hover{border-color:var(--gold);color:var(--gold)}
.set-chip.active{color:#06080f;font-weight:700}
.progress-row{display:flex;align-items:center;gap:.6rem;width:100%;max-width:860px;padding:0 1rem;margin-bottom:0}
.prog-lbl{font-size:.68rem;color:var(--muted);white-space:nowrap;letter-spacing:.08em}

.progress-fill{height:100%;background:linear-gradient(to right,var(--gold),#f59e0b);border-radius:2px;transition:width .5s ease}
.streak-badge{font-family:'Orbitron',monospace;font-size:.56rem;padding:.2rem .55rem;border-radius:20px;background:rgba(232,184,75,.1);border:1px solid rgba(232,184,75,.3);color:var(--gold);white-space:nowrap}
.arena{display:grid;grid-template-columns:1fr auto 1fr;gap:.75rem;width:100%;max-width:880px;padding:0 1rem;box-sizing:border-box;align-items:start}
.card{background:var(--surface);border:1px solid var(--border);border-radius:18px;overflow:hidden;cursor:pointer;user-select:none;transition:transform .2s,border-color .2s,box-shadow .2s;position:relative}
.card:hover{transform:translateY(-4px);border-color:#2a3f60;box-shadow:0 8px 32px rgba(0,0,0,.4)}
.card.champion{border-color:rgba(232,184,75,.45)}
.card.challenger{border-color:rgba(167,139,250,.35)}
.card.win-flash{animation:winFlash .7s ease}
.card.lose-exit{animation:loseExit .6s ease forwards}
.card.enter-new{animation:enterNew .5s ease}
@keyframes winFlash{0%,100%{box-shadow:none}40%{box-shadow:0 0 48px rgba(74,222,128,.7)}}
@keyframes loseExit{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.9) translateX(20px)}}
@keyframes enterNew{0%{opacity:0;transform:scale(.92) translateX(-20px)}100%{opacity:1;transform:scale(1)}}
.card-img-wrap{width:100%;height:360px;position:relative;overflow:hidden;background:var(--surface2);perspective:1000px;display:flex;align-items:center;justify-content:center}
.card-face.gloss-active::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 25%,rgba(255,215,0,.18) 45%,rgba(255,255,255,.25) 50%,rgba(255,215,0,.12) 55%,transparent 75%);opacity:1;transform:translateX(120%);pointer-events:none;z-index:5;transition:transform .55s ease,opacity .1s;animation:none}
.card-face::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 25%,rgba(255,215,0,.18) 45%,rgba(255,255,255,.25) 50%,rgba(255,215,0,.12) 55%,transparent 75%);opacity:0;transform:translateX(-120%);pointer-events:none;z-index:5;transition:none}
.card-flipper{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .6s ease}
.card-flipper.flipped{transform:rotateY(180deg)}
.card-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;align-items:center;justify-content:center}
.card-face img{max-width:90%;max-height:90%;width:auto;height:auto;object-fit:contain;display:block}
.card-face.back{transform:rotateY(180deg)}
.card-face.back img{max-width:90%;max-height:90%;width:auto;height:auto;object-fit:contain;display:block}
.placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:4rem;color:var(--muted);background:var(--surface2)}
.flip-btn{position:absolute;bottom:8px;right:8px;z-index:10;background:rgba(6,8,15,.75);border:1px solid rgba(232,184,75,.4);border-radius:6px;padding:.25rem .5rem;font-size:.55rem;font-weight:700;letter-spacing:.1em;color:var(--gold);cursor:pointer;text-transform:uppercase;backdrop-filter:blur(4px);transition:all .2s}
.flip-label{font-size:.52rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);text-align:center;width:100%;display:block;padding:.3rem 0 .1rem;transition:opacity .3s}
.aspect-icons{display:flex;justify-content:center;align-items:center;gap:.4rem;padding:.5rem 0 .3rem;width:100%}
.aspect-icons img{width:50px;height:50px;object-fit:contain;filter:drop-shadow(0 1px 4px rgba(0,0,0,.5))}
.flip-btn:hover{background:rgba(232,184,75,.15)}
.role-tag{position:absolute;top:8px;left:8px;z-index:2;font-size:.48rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.12rem .45rem;border-radius:4px;backdrop-filter:blur(4px)}
.card.champion .role-tag{background:rgba(232,184,75,.2);color:var(--gold);border:1px solid rgba(232,184,75,.4)}
.card.challenger .role-tag{background:rgba(167,139,250,.2);color:var(--purple);border:1px solid rgba(167,139,250,.4)}
.crown{position:absolute;top:7px;right:8px;z-index:2;font-size:1rem;display:none;filter:drop-shadow(0 1px 4px rgba(0,0,0,.6))}
.card.champion .crown{display:block}
.card-info{padding:.65rem .85rem .75rem}
.card-name{font-family:'Orbitron',monospace;font-size:clamp(.58rem,1.3vw,.78rem);font-weight:700;letter-spacing:.04em;line-height:1.25;color:var(--text)}
.card-sub{font-size:.62rem;color:var(--muted);margin-top:.08rem;margin-bottom:.4rem;line-height:1.2}
.credits-wrap{display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem}
.credits-val{font-family:'Orbitron',monospace;font-size:.62rem;font-weight:700;color:var(--gold);background:rgba(232,184,75,.08);border:1px solid rgba(232,184,75,.25);border-radius:6px;padding:.15rem .45rem;letter-spacing:.05em}
.credits-change{font-family:'Orbitron',monospace;font-size:.65rem;font-weight:700;opacity:0;transition:opacity .3s;border-radius:4px;padding:.1rem .35rem}
.credits-change.win{color:var(--green);opacity:1}
.credits-change.loss{color:var(--red);opacity:1}
.aspects{display:flex;flex-wrap:wrap;gap:.22rem;margin-bottom:.45rem}
.asp{font-size:.48rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.1rem .38rem;border-radius:20px;border:1px solid}
.asp-Heroism{color:var(--heroism);border-color:var(--heroism);background:rgba(245,158,11,.1)}
.asp-Villainy{color:var(--villainy);border-color:var(--villainy);background:rgba(167,139,250,.1)}
.asp-Aggression{color:var(--aggression);border-color:var(--aggression);background:rgba(248,113,113,.1)}
.asp-Command{color:var(--command);border-color:var(--command);background:rgba(74,222,128,.1)}
.asp-Cunning{color:var(--cunning);border-color:var(--cunning);background:rgba(250,204,21,.1)}
.asp-Vigilance{color:var(--vigilance);border-color:var(--vigilance);background:rgba(96,165,250,.1)}
.stats-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.28rem}
.stat{background:var(--surface2);border-radius:7px;padding:.3rem .2rem;text-align:center;border:1px solid var(--border)}
.stat-lbl{font-size:.45rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;display:block}
.stat-val{font-family:'Orbitron',monospace;font-size:.95rem;font-weight:700;color:var(--gold);display:block;line-height:1.1}
.vs-divider{display:flex;align-items:center;justify-content:center;margin-top:250px}
.vs-line{width:1px;height:32px;background:linear-gradient(to bottom,transparent,var(--border),transparent)}
.vs-text{font-family:'Orbitron',monospace;font-size:1.95rem;font-weight:900;color:var(--gold);text-shadow:0 0 20px rgba(232,184,75,.5);white-space:nowrap}
.result-row{text-align:center;margin:0;height:0;overflow:visible;width:100%;max-width:860px;padding:0 1rem}
.result-msg{font-family:'Orbitron',monospace;font-size:clamp(.72rem,2vw,.95rem);font-weight:700;letter-spacing:.1em;color:var(--green);text-shadow:0 0 14px rgba(74,222,128,.35);opacity:0;transform:translateY(6px);transition:all .35s}
.result-msg.show{opacity:1;transform:translateY(0)}
.result-sub{font-size:.72rem;color:var(--muted);margin-top:.18rem}
.instruction{font-size:.78rem;color:var(--muted);text-align:center;letter-spacing:.04em;height:80px;display:flex;align-items:center;justify-content:center;width:100%;max-width:880px;margin:0}
.instruction strong{color:#94a3b8}

.spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#final-screen{display:none;flex-direction:column;align-items:center;gap:.8rem;text-align:center;width:100%;max-width:480px;padding:2rem 1.5rem;background:var(--surface);border:1px solid rgba(232,184,75,.4);border-radius:20px;animation:fadeIn .6s ease;position:relative;overflow:hidden}
#final-screen.show{display:flex}
@keyframes fadeIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.final-title{font-family:'Orbitron',monospace;font-size:.75rem;letter-spacing:.3em;color:var(--gold);text-transform:uppercase;font-weight:700}
.final-name{font-family:'Orbitron',monospace;font-size:clamp(.9rem,3vw,1.3rem);font-weight:900;color:var(--gold);text-shadow:0 0 18px rgba(232,184,75,.4)}
.final-sub{font-size:.78rem;color:var(--muted)}


/* Konfetti */
.confetti-wrap{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:10}
.confetto{position:absolute;width:8px;height:8px;border-radius:2px;opacity:0;animation:confFall linear forwards}
@keyframes confFall{
  0%{transform:translateY(-20px) rotate(0deg);opacity:1}
  100%{transform:translateY(600px) rotate(720deg);opacity:0}
}
.final-credits{font-family:'Orbitron',monospace;font-size:1.4rem;font-weight:700;color:var(--gold)}
.final-credits-lbl{font-size:.58rem;letter-spacing:.15em;color:var(--muted);text-transform:uppercase}
.final-stats{display:flex;gap:2rem}
.final-stat{display:flex;flex-direction:column;align-items:center;gap:.12rem}
.final-stat-lbl{font-size:.56rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.final-stat-val{font-family:'Orbitron',monospace;font-size:1.4rem;font-weight:700;color:var(--green)}
.btn-row{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center}
.action-btn{background:transparent;border:1px solid var(--border);border-radius:8px;padding:.5rem 1.2rem;color:var(--muted);font-family:'Rajdhani',sans-serif;font-size:.82rem;font-weight:600;letter-spacing:.1em;cursor:pointer;transition:all .2s;text-transform:uppercase;text-decoration:none;display:inline-block}
.action-btn:hover{border-color:var(--gold);color:var(--gold)}
.action-btn.primary{border-color:var(--gold);color:var(--gold)}
@media(max-width:720px){
  .card-img-wrap{height:260px}
  .arena{grid-template-columns:1fr;gap:.8rem;padding:0 1rem}
  .vs-divider{display:flex;align-items:center;justify-content:center;margin-top:250px}
  .vs-divider::before,.vs-divider::after{content:'';flex:1;height:1px;background:var(--border)}
  .aspect-icons img{width:38px;height:38px}
  .card-img-wrap{width:100%;height:360px;position:relative;overflow:hidden;background:var(--surface2);perspective:1000px;display:flex;align-items:center;justify-content:center}
}
  .vs-divider{display:flex;align-items:center;justify-content:center;margin-top:250px}
  .vs-divider::before,.vs-divider::after{content:'';flex:1;height:1px;background:var(--border)}
  .vs-text{font-family:'Orbitron',monospace;font-size:1.95rem;font-weight:900;color:var(--gold);text-shadow:0 0 20px rgba(232,184,75,.5);white-space:nowrap}
  .aspect-icons img{width:38px;height:38px}
  .card-img-wrap{width:100%;height:360px;position:relative;overflow:hidden;background:var(--surface2);perspective:1000px;display:flex;align-items:center;justify-content:center}
}
  .aspect-icons img{width:40px;height:40px}
}

/* ── Topnav ───────────────────────────────────────────────────────────── */
.topnav{display:flex;gap:1rem;justify-content:center;margin-bottom:1.2rem;flex-wrap:wrap;width:100%;padding:0 1rem}
.topnav a{background:transparent;border:1px solid var(--border);border-radius:8px;padding:.4rem 1rem;color:var(--muted);font-family:'Rajdhani',sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.1em;text-decoration:none;text-transform:uppercase;transition:all .2s}
.topnav a:hover,.topnav a.nav-rank:hover{border-color:var(--gold);color:var(--gold)}

/* ── Loading ──────────────────────────────────────────────────────────── */
.loading-screen{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:3rem;color:var(--muted);font-size:.82rem;letter-spacing:.1em}

/* ── Set-Filter Chips ─────────────────────────────────────────────────── */
.chips{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center}

/* ── Progress ─────────────────────────────────────────────────────────── */
.progress-bar{flex:1;height:4px;background:var(--border);border-radius:2px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(to right,var(--gold),#f59e0b);border-radius:2px;transition:width .5s ease}
.prog-label{font-size:.68rem;color:var(--muted);white-space:nowrap;letter-spacing:.08em}

/* ── Stats Row ────────────────────────────────────────────────────────── */


/* ── Credits ──────────────────────────────────────────────────────────── */
.credits-wrap{display:flex;align-items:center;gap:.4rem;margin-top:.3rem}
.credits-label{font-size:.55rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.credits-val{font-family:'Orbitron',monospace;font-size:.82rem;font-weight:700;color:var(--gold)}

/* ── Flip Label ───────────────────────────────────────────────────────── */
.flip-label{position:absolute;bottom:34px;right:8px;z-index:10;font-size:.45rem;font-weight:700;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}

/* ── VS Divider ───────────────────────────────────────────────────────── */
.vs-divider{display:flex;align-items:center;justify-content:center;margin-top:250px}

/* ── Final Screen Fixes ───────────────────────────────────────────────── */
.final-card{width:100%;height:300px;border-radius:12px;overflow:hidden;border:2px solid rgba(232,184,75,.35);box-shadow:0 0 32px rgba(232,184,75,.2);background:var(--surface2);display:flex;align-items:center;justify-content:center}
.final-img{max-width:90%;max-height:90%;width:auto;height:auto;object-fit:contain;display:block}
.final-crown{font-size:2rem;filter:drop-shadow(0 2px 8px rgba(232,184,75,.5))}
.btn-restart{background:transparent;border:1px solid var(--gold);border-radius:8px;padding:.5rem 1.5rem;color:var(--gold);font-family:'Rajdhani',sans-serif;font-size:.88rem;font-weight:700;letter-spacing:.12em;cursor:pointer;transition:all .2s;text-transform:uppercase}
.btn-restart:hover{background:rgba(232,184,75,.1)}

/* ── Responsive ───────────────────────────────────────────────────────── */

/* ── Funnel-Lock Overlay ──────────────────────────────────────────────── */
.funnel-overlay{display:none;position:fixed;inset:0;z-index:200;background:rgba(6,8,15,.85);backdrop-filter:blur(6px);align-items:center;justify-content:center}
.funnel-overlay.show{display:flex}
.funnel-box{background:var(--surface);border:1px solid rgba(232,184,75,.4);border-radius:16px;padding:2rem;max-width:360px;width:90%;text-align:center}
.funnel-title{font-family:'Orbitron',monospace;font-size:.9rem;letter-spacing:.15em;color:var(--gold);margin-bottom:.6rem;font-weight:700}
.funnel-msg{font-size:.8rem;color:var(--muted);margin-bottom:1.5rem;line-height:1.6}
.funnel-actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.funnel-actions button{background:transparent;border:1px solid var(--border);border-radius:8px;padding:.45rem 1.1rem;color:var(--muted);font-family:'Rajdhani',sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.1em;cursor:pointer;transition:all .2s;text-transform:uppercase}
.funnel-actions button:hover{border-color:var(--gold);color:var(--gold)}
.funnel-actions .funnel-abort{border-color:rgba(248,113,113,.4);color:#f87171}
.funnel-actions .funnel-abort:hover{border-color:#f87171;background:rgba(248,113,113,.1)}

/* ── Legal Footer ─────────────────────────────────────────────────────── */
.legal-footer{
  width:100%;max-width:1000px;margin:3rem auto 0;
  padding:1.5rem 1.5rem;
  border-top:1px solid var(--border);
  text-align:center;
}
.legal-footer p{
  font-size:.68rem;line-height:1.7;color:var(--muted);
  letter-spacing:.02em;margin-bottom:.5rem;
}
.legal-footer p:last-child{margin-bottom:0}
.legal-footer a{color:var(--gold);text-decoration:none;opacity:.8}
.legal-footer a:hover{opacity:1}
.legal-footer strong{color:var(--text);font-weight:600}