:root{
 --bg1:#0b1220;
 --bg2:#101a2c;
 --panel:#1a2538;
 --panel2:#162033;
 --border:#2a3a55;
 --text:#e6ecf3;
 --muted:#9fb0c7;
 --accent:#4da3ff;
 --highlight:#ff4d4d;
 --glow-color:#ff4d4d;
}

body.light{
 --bg1:#ffffff;
 --bg2:#f4f4f4;
 --panel:#ffffff;
 --panel2:#f9f9f9;
 --border:#e0e0e0;
 --text:#111;
 --muted:#777;
 --accent:#d4af37;
 --highlight:#b68d00;
 --glow-color:#d4af37;
}

*{box-sizing:border-box}

body{
 margin:0;
 font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
 background:radial-gradient(circle at top,var(--bg2),var(--bg1));
 color:var(--text);
 transition:background .4s ease,color .3s ease;
}

/* NAV */
nav{
 height:64px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding:0 24px;
 background:var(--panel);
 border-bottom:1px solid var(--border);
}

.nav-left{display:flex;gap:20px;align-items:center}
nav h1{margin:0;font-size:18px}

nav button{
 background:none;
 border:none;
 color:var(--muted);
 font-weight:600;
 cursor:pointer;
 font-size:15px;
 transition:.2s;
}

nav button.active,
nav button:hover{
 color:var(--accent);
}

.themeBtn{
 padding:6px 12px;
 border-radius:6px;
 border:1px solid var(--border);
}

/* VIEW TRANSITIONS */
.view{
 display:none;
 opacity:0;
 transform:translateY(8px);
 transition:opacity .25s ease, transform .25s ease;
}

.view.active{
 display:block;
 opacity:1;
 transform:translateY(0);
}

/* SEARCH */
.search{
 max-width:1100px;
 margin:20px auto;
 padding:0 20px;
}

.search input{
 width:100%;
 padding:14px;
 border-radius:10px;
 border:1px solid var(--border);
 background:var(--panel2);
 color:var(--text);
 font-size:16px;
}

/* DEMON LIST */
#list{
 max-width:1100px;
 margin:auto;
 padding:0 20px 40px;
}

.card{
 display:grid;
 grid-template-columns:200px 1fr;
 gap:20px;
 padding:18px;
 background:var(--panel);
 border-radius:14px;
 border:1px solid var(--border);
 margin-bottom:18px;
 transition:.2s ease;
 cursor:pointer;
}

.card:hover{
 background:var(--panel2);
 transform:translateY(-3px);
}

.card.hardestCard{
 border:3px solid var(--highlight);
 box-shadow:0 0 14px 4px var(--glow-color);
}

body:not(.light) .card.hardestCard{
 box-shadow:0 0 22px 6px var(--glow-color);
}

.thumb{
 width:100%;
 height:110px;
 border-radius:10px;
 background:#1e2b44;
 display:flex;
 align-items:center;
 justify-content:center;
 color:#999;
 background-size:cover;
 background-position:center;
 cursor:pointer;
}

.rank{color:var(--accent);font-weight:700}

.publisher{
 font-weight:bold;
 color:var(--text);
 font-size:15px;
 margin-top:4px;
}

.points{
 color:var(--accent);
 margin-top:6px;
 font-size:14px;
}

/* STATS */
.stats{
 display:grid;
 grid-template-columns:300px 1fr;
 gap:20px;
 max-width:1100px;
 margin:20px auto;
 padding:0 20px;
}

.players{
 background:var(--panel);
 border:1px solid var(--border);
 border-radius:14px;
 padding:10px;
}

.player{
 display:flex;
 justify-content:space-between;
 padding:10px;
 border-radius:10px;
 cursor:pointer;
 transition:.2s;
}

.player:hover,
.player.active{
 background:var(--panel2);
}

.profile{
 background:var(--panel);
 border:1px solid var(--border);
 border-radius:14px;
 padding:20px;
}

.hardestProfileCard{
 margin-bottom:20px;
 padding:18px;
 border-radius:12px;
 border:3px solid var(--highlight);
 background:linear-gradient(135deg,var(--panel2),var(--panel));
 box-shadow:0 0 14px 4px var(--glow-color);
}

body:not(.light) .hardestProfileCard{
 box-shadow:0 0 22px 6px var(--glow-color);
}

.hardestTitle{
 font-size:13px;
 letter-spacing:1px;
 text-transform:uppercase;
 color:var(--highlight);
 margin-bottom:6px;
}

.hardestName{
 font-size:20px;
 font-weight:700;
}

.beatEntry{
 padding:8px 0;
 border-bottom:1px solid var(--border);
 font-size:14px;
 cursor:pointer;
 transition:.2s;
}

.beatEntry:hover{
 background:var(--panel2);
 padding-left:6px;
 border-radius:6px;
}

/* LEVEL PAGE */
.levelPage{
 max-width:1000px;
 margin:auto;
 padding:30px 20px;
}

.backBtn{
 background:none;
 border:1px solid var(--border);
 color:var(--muted);
 padding:8px 14px;
 border-radius:8px;
 cursor:pointer;
 margin-bottom:20px;
}

.videoWrapper{
 position:relative;
 padding-bottom:56.25%;
 height:0;
 overflow:hidden;
 border-radius:14px;
 margin-bottom:20px;
}

.videoWrapper iframe{
 position:absolute;
 width:100%;
 height:100%;
}

.victorCard{
 background:var(--panel2);
 padding:8px 12px;
 border-radius:8px;
 margin-bottom:6px;
 font-weight:bold;
 color:var(--text);
 cursor:pointer;
 transition:.2s;
}

.victorCard:hover{
 background:var(--accent);
 color:#fff;
}

footer{
 text-align:center;
 padding:30px;
 color:var(--muted);
 border-top:1px solid var(--border);
}