:root{
  --bg:#050816;
  --panel:rgba(9,14,31,.86);
  --panel-2:rgba(12,18,40,.92);
  --line:rgba(114,191,255,.22);
  --text:#f2f7ff;
  --muted:#a7b8d4;
  --cyan:#5ce6ff;
  --pink:#ff4ec8;
  --red:#ff6070;
  --yellow:#ffd766;
  --orange:#ff9f5a;
  --green:#71ffb6;
  --shadow:0 22px 60px rgba(0,0,0,.38);
  --radius:28px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;overflow-x:hidden}
body{
  font-family:Oxanium,system-ui,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 15% 10%,rgba(92,230,255,.15),transparent 24%),
    radial-gradient(circle at 85% 0%,rgba(255,78,200,.18),transparent 24%),
    linear-gradient(180deg,#081020 0%,#040712 52%,#02040a 100%);
}
a,button{font:inherit}
button{border:0;cursor:pointer}
.hidden{display:none!important}
.site-shell{min-height:100dvh;display:grid;grid-template-rows:auto 1fr}
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1rem 1.2rem;background:rgba(3,7,17,.76);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.06)
}
.brand-wrap{display:grid;gap:.35rem}
.brand-kicker,.eyebrow,.callout-kicker,.mini-label,.hud-label,.stat-tag{
  font-size:.76rem;letter-spacing:.19em;text-transform:uppercase;color:var(--cyan);font-weight:800
}
.brand{font-family:Orbitron,Oxanium,sans-serif;color:#fff;text-decoration:none;font-size:clamp(1.3rem,2vw,2.1rem);font-weight:900;letter-spacing:.05em}
.brand span{color:var(--pink)}
.site-nav{display:flex;flex-wrap:wrap;gap:.65rem;justify-content:flex-end}
.nav-btn,.ghost-btn,.mode-btn,.cta{
  padding:.85rem 1.05rem;border-radius:999px;color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 24px rgba(0,0,0,.18);
  transition:transform .2s ease, border-color .2s ease, background .2s ease
}
.nav-btn:hover,.ghost-btn:hover,.mode-btn:hover,.cta:hover{transform:translateY(-2px);border-color:rgba(92,230,255,.45)}
.nav-btn.active,.mode-btn.active,.cta-primary{
  background:linear-gradient(135deg,var(--cyan),#cbfeff);color:#06121c;border-color:transparent;font-weight:800
}
.with-badge{position:relative;padding-right:3.6rem}
.badge{position:absolute;right:.6rem;top:50%;transform:translateY(-50%);background:var(--red);color:#fff;padding:.18rem .5rem;border-radius:999px;font-size:.72rem;font-weight:900;box-shadow:0 0 0 4px rgba(255,96,112,.12)}
.screen-stack{padding:1rem 1rem 1.2rem}
.screen{display:none;animation:fadeIn .35s ease}
.screen.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hero{position:relative;min-height:calc(100dvh - 112px);display:grid;place-items:center;border-radius:34px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.hero-video,.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(3,8,18,.85),rgba(4,8,20,.26) 45%,rgba(3,8,18,.78))}
.hero-content{position:relative;z-index:2;max-width:980px;padding:clamp(1.5rem,5vw,4rem);display:grid;gap:1.25rem}
.hero h1{margin:0;font-family:Orbitron,Oxanium,sans-serif;font-size:clamp(2.8rem,7vw,6rem);line-height:.92;letter-spacing:.02em;text-shadow:0 0 40px rgba(92,230,255,.22)}
.hero h1 span{color:var(--cyan)}
.hero-copy,.section-copy{max-width:780px;font-size:clamp(1rem,1.8vw,1.18rem);line-height:1.7;color:var(--muted)}
.hero-cta-row{display:flex;flex-wrap:wrap;gap:.9rem}
.hero-mini-grid,.card-grid,.level-grid,.controls-panel,.instructions-grid,.result-stats,.score-layout{display:grid;gap:1rem}
.hero-mini-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:1rem}
.mini-card,.panel,.control-card,.score-callout,.modal-card,.hud-block,.player-meter,.level-card,.char-card{
  background:linear-gradient(180deg,rgba(12,18,40,.92),rgba(7,11,24,.84));
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)
}
.mini-card{padding:1rem 1.1rem}
.mini-value{font-size:1.25rem;font-weight:800;margin-top:.25rem}
.panel{padding:1.15rem}
.wide-panel{display:grid;gap:1rem}
.split-panel{display:grid;grid-template-columns:1.05fr .95fr;gap:1rem;align-items:stretch}
.panel-content{padding:1rem;display:grid;align-content:start}
.panel-media{min-height:460px;border-radius:24px;border:1px solid var(--line);overflow:hidden;box-shadow:var(--shadow)}
.bg-preview{background-position:center;background-size:cover}
.panel-header{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.panel-header h2,.panel-content h2{margin:.3rem 0 0;font-size:clamp(1.8rem,4vw,3rem);font-family:Orbitron,Oxanium,sans-serif}
.card-art-frame{border-radius:26px;border:1px solid var(--line);overflow:hidden;max-height:420px;background:#000}
.tall-frame{max-height:640px}
.full-art{width:100%;height:100%;display:block;object-fit:cover}
.card-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.char-card{padding:1.15rem;display:grid;gap:.8rem;position:relative;text-align:left;min-height:320px}
.char-card.selected,.level-card.selected{outline:2px solid var(--cyan);box-shadow:0 0 0 3px rgba(92,230,255,.16),var(--shadow)}
.char-title{display:flex;justify-content:space-between;gap:1rem;align-items:start}
.char-title strong{font-size:1.25rem}
.stat-tag{color:#06121c;background:var(--cyan);padding:.22rem .6rem;border-radius:999px;letter-spacing:.1em}
.stat-bars{display:grid;gap:.65rem;margin-top:.3rem}
.bar{display:grid;gap:.2rem}
.bar-head{display:flex;justify-content:space-between;color:var(--muted);font-size:.88rem}
.bar-track{height:11px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.bar-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--pink),var(--cyan))}
.level-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.level-card{min-height:250px;background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:flex-end;padding:1rem;position:relative;overflow:hidden;text-align:left}
.level-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,9,20,.15),rgba(4,8,18,.92));z-index:0}
.level-card > *{position:relative;z-index:1}
.level-num{font-family:Orbitron,Oxanium,sans-serif;color:var(--cyan);font-size:1.4rem;margin-bottom:auto}
.level-tag{display:inline-flex;align-self:flex-start;padding:.25rem .6rem;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);color:var(--cyan);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.mode-select-row{display:flex;gap:.75rem;flex-wrap:wrap;margin:1rem 0}
.controls-panel{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:.25rem}
.control-card{padding:1rem;border-radius:22px;background:rgba(255,255,255,.05)}
.control-card h4{margin:.1rem 0 .55rem;font-size:1.02rem}
.control-card ul{margin:0;padding-left:1rem;color:var(--muted);line-height:1.68}
.instructions-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:1rem}
.instruction-card{padding:1rem 1.05rem}
.instruction-card h3{margin:.2rem 0 .6rem}
.instruction-card ul{margin:0;padding-left:1rem;color:var(--muted);line-height:1.68}
.score-layout{grid-template-columns:1.5fr .7fr}
.score-board{border-radius:24px;overflow:auto;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.score-table{width:100%;border-collapse:collapse;min-width:740px}
.score-table th,.score-table td{padding:1rem;border-bottom:1px solid rgba(255,255,255,.06);text-align:left}
.score-table th{font-family:Orbitron,Oxanium,sans-serif;letter-spacing:.08em;color:var(--cyan);font-size:.85rem;background:rgba(255,255,255,.03)}
.score-table td{color:var(--muted)}
.score-table tr:nth-child(1) td{color:#fff;font-weight:800}
.score-table tr:nth-child(2) td{color:#eef4ff}
.score-status{padding:.65rem .9rem;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--muted)}
.score-aside{display:grid;gap:1rem;align-content:start}
.score-callout{padding:1.15rem;border-radius:24px}
.score-callout.dark{background:linear-gradient(180deg,rgba(92,230,255,.08),rgba(255,78,200,.08))}
.callout-title{font-size:1.18rem;font-weight:800;margin:.35rem 0 .55rem}
.game-screen{padding:0!important}
.game-wrap{position:relative;height:calc(100dvh - 94px);min-height:720px;background:#050814;border-top:1px solid rgba(255,255,255,.05)}
#gameCanvas{width:100%;height:100%;display:block;background:#000}
.hud{position:absolute;top:0;left:0;right:0;padding:1rem;pointer-events:none;z-index:2}
.hud-top{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.8rem}
.hud-block,.player-meter{background:rgba(5,10,24,.62);border:1px solid rgba(92,230,255,.22);border-radius:18px;padding:.8rem 1rem;backdrop-filter:blur(12px)}
.hud-value{font-size:1.1rem;font-weight:800;margin-top:.25rem}
.player-meters{margin-top:.8rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem}
.meter-title{display:flex;justify-content:space-between;margin-bottom:.55rem;font-weight:800}
.meter-line{height:10px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;margin-top:.35rem}
.meter-line>span{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--pink))}
.mobile-controls{position:absolute;left:0;right:0;bottom:0;display:none;grid-template-columns:repeat(3,1fr);gap:.55rem;padding:.75rem;z-index:3}
.touch-btn{height:58px;border-radius:18px;border:1px solid rgba(92,230,255,.34);background:rgba(5,9,21,.72);color:#fff;font-weight:800;backdrop-filter:blur(10px);box-shadow:0 12px 28px rgba(0,0,0,.25)}
.modal{position:absolute;inset:0;display:grid;place-items:center;background:rgba(2,4,9,.58);backdrop-filter:blur(10px);padding:1rem;z-index:5}
.modal-card{max-width:620px;width:min(92vw,620px);padding:1.4rem}
.modal-card.large{max-width:900px;width:min(94vw,900px)}
.result-backdrop{background-image:linear-gradient(180deg,rgba(4,10,22,.85),rgba(4,8,18,.92)),url('../assets/level-complete.jpg');background-size:cover;background-position:center}
.modal-card h3{margin:.35rem 0 1rem;font-size:clamp(1.6rem,3vw,2.7rem);font-family:Orbitron,Oxanium,sans-serif}
.result-stats{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin:1rem 0}
.result-stat{padding:1rem;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.result-stat .value{font-size:1.55rem;font-weight:800;margin-top:.4rem}
.score-form{display:grid;gap:1rem;margin:1rem 0;padding:1rem;border-radius:22px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.score-form input{margin-top:.45rem;width:100%;padding:.95rem 1rem;border-radius:16px;border:1px solid var(--line);background:rgba(0,0,0,.28);color:var(--text)}
@media (max-width:1180px){.card-grid,.level-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-mini-grid,.hud-top,.score-layout,.split-panel{grid-template-columns:1fr}.panel-media{min-height:320px}}
@media (max-width:760px){.topbar{flex-direction:column;align-items:flex-start}.site-nav{width:100%}.nav-btn{flex:1 1 auto}.screen-stack{padding:.8rem}.hero{min-height:700px}.hero h1{font-size:2.5rem}.card-grid,.level-grid{grid-template-columns:1fr}.mobile-controls{display:grid}.hud-top{grid-template-columns:repeat(2,minmax(0,1fr))}.player-meters{grid-template-columns:1fr}.score-table{min-width:640px}}