/* ============================================================
   naiklevel.xyz - tema pixel / RPG
   ============================================================ */
:root{
  --bg:#0b0d18; --bg2:#111535; --panel:#161b3c; --panel2:#1d2352;
  --ink:#e9ecff; --muted:#98a1d4; --line:#303a78;
  --blue:#5b9cf5; --blue-d:#2f6bd4; --gold:#ffcf4a; --red:#ff4d5e;
  --mint:#7ef0d0; --purple:#a97bff;
  --px:4px; --shadow:rgba(0,0,0,.55);
  --fd:"Press Start 2P", ui-monospace, "Courier New", monospace;
  --fl:"Silkscreen", ui-monospace, "Courier New", monospace;
  --fb:ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--fb); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{display:block; max-width:100%}
a{color:var(--blue); text-decoration:none}
:focus-visible{outline:var(--px) solid var(--gold); outline-offset:var(--px)}

/* ---------- latar ---------- */
.sky{position:fixed; inset:0; z-index:-2;
  background:radial-gradient(120% 80% at 50% -10%, #23286b 0%, #12163a 45%, var(--bg) 100%)}
.stars,.stars2{position:fixed; top:0; left:0; width:2px; height:2px; z-index:-1}
.stars2{animation:twinkle 4s steps(2,end) infinite}
@keyframes twinkle{0%,100%{opacity:.2}50%{opacity:1}}
body::after{ /* garis pindai CRT */
  content:""; position:fixed; inset:0; z-index:90; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.20) 0 1px, transparent 1px 3px);
  opacity:.45;
}

/* ---------- utilitas pixel ---------- */
.px{image-rendering:pixelated; shape-rendering:crispEdges}
.pxb{ --bd:var(--line);
  box-shadow:
    0 calc(var(--px) * -1) 0 var(--bd), 0 var(--px) 0 var(--bd),
    calc(var(--px) * -1) 0 0 var(--bd), var(--px) 0 0 var(--bd),
    calc(var(--px) * 2) calc(var(--px) * 2) 0 var(--shadow);
}
.wrap{width:min(1180px,calc(100% - 40px)); margin-inline:auto}

h1,h2,h3,.btn,.nav a,.tag{font-family:var(--fd); font-weight:400; letter-spacing:.02em; line-height:1.5}
h2{font-size:clamp(19px,3.1vw,30px); margin:0 0 14px; color:var(--ink)}
h3{font-size:15px; margin:0 0 10px}
p{margin:0 0 14px; color:#c3caf0}
.sec{padding:clamp(70px,10vw,120px) 0}
.sec-head{max-width:640px; margin-bottom:clamp(34px,5vw,56px)}
.sec-head p{color:var(--muted); margin:0}
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-family:var(--fl);
  font-size:15px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:14px}
.eyebrow::before{content:""; width:22px; height:var(--px); background:var(--gold)}

/* ---------- tombol ---------- */
.btn{
  --bd:#0a0c18; display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  padding:16px 22px; font-size:12px; border:0; background:var(--blue); color:#08101f;
  box-shadow:0 calc(var(--px) * -1) 0 var(--bd), 0 var(--px) 0 var(--bd),
             calc(var(--px) * -1) 0 0 var(--bd), var(--px) 0 0 var(--bd),
             var(--px) var(--px) 0 var(--blue-d), calc(var(--px) * 2) calc(var(--px) * 2) 0 var(--shadow);
  transition:transform .08s steps(2,end), box-shadow .08s steps(2,end);
}
.btn:hover{transform:translate(var(--px),var(--px));
  box-shadow:0 calc(var(--px) * -1) 0 var(--bd), 0 var(--px) 0 var(--bd),
             calc(var(--px) * -1) 0 0 var(--bd), var(--px) 0 0 var(--bd)}
.btn.gold{background:var(--gold);
  box-shadow:0 calc(var(--px) * -1) 0 var(--bd), 0 var(--px) 0 var(--bd),
             calc(var(--px) * -1) 0 0 var(--bd), var(--px) 0 0 var(--bd),
             var(--px) var(--px) 0 #c99a12, calc(var(--px) * 2) calc(var(--px) * 2) 0 var(--shadow)}
.btn.ghost{background:transparent; color:var(--ink); --bd:var(--line);
  box-shadow:0 calc(var(--px) * -1) 0 var(--bd), 0 var(--px) 0 var(--bd),
             calc(var(--px) * -1) 0 0 var(--bd), var(--px) 0 0 var(--bd)}
.btn.ghost:hover{color:var(--gold); --bd:var(--gold)}

/* ---------- navigasi ---------- */
.nav{position:sticky; top:0; z-index:80; background:rgba(11,13,24,.86);
  backdrop-filter:blur(6px); border-bottom:var(--px) solid var(--line)}
.nav .wrap{display:flex; align-items:center; gap:18px; height:70px}
.brand{display:flex; align-items:center; gap:12px; font-family:var(--fd); font-size:13px; color:var(--ink)}
.brand svg{width:26px; height:29px}
.brand b{color:var(--gold); font-weight:400}
.nav ul{display:flex; gap:26px; list-style:none; margin:0 0 0 auto; padding:0}
.nav a{font-size:11px; color:var(--muted); padding-bottom:3px}
.nav a:hover{color:var(--gold); box-shadow:0 var(--px) 0 var(--gold)}
.nav .btn{padding:12px 16px; font-size:10px}
@media(max-width:880px){ .nav ul{display:none} .nav .btn{margin-left:auto} }

/* ---------- hero ---------- */
.hero{position:relative; padding:clamp(56px,8vw,96px) 0 clamp(70px,9vw,110px)}
.hero .wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,5vw,64px); align-items:center}
@media(max-width:900px){ .hero .wrap{grid-template-columns:1fr} }
.tag{display:inline-flex; align-items:center; gap:10px; font-size:10px; color:var(--mint);
  background:var(--panel); padding:11px 15px; margin-bottom:22px; --bd:var(--line);
  box-shadow:0 calc(var(--px) * -1) 0 var(--bd), 0 var(--px) 0 var(--bd),
             calc(var(--px) * -1) 0 0 var(--bd), var(--px) 0 0 var(--bd)}
.blink{width:9px; height:9px; background:var(--mint); animation:blink 1s steps(1,end) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.hero h1{
  font-size:clamp(34px,7.4vw,68px); margin:0 0 20px; line-height:1.18; color:#fff;
  text-shadow:var(--px) var(--px) 0 var(--blue-d), calc(var(--px) * 2) calc(var(--px) * 2) 0 #0a0c18;
}
.hero h1 span{color:var(--gold);
  text-shadow:var(--px) var(--px) 0 #b8860b, calc(var(--px) * 2) calc(var(--px) * 2) 0 #0a0c18}
.lead{font-size:clamp(16px,1.6vw,19px); color:#c8cff2; max-width:36em}
.cta{display:flex; flex-wrap:wrap; gap:16px; margin-top:30px}

/* panggung ksatria */
.stage{position:relative; display:grid; place-items:center; min-height:340px}
.stage .knight{width:min(230px,62vw); animation:bob 1.6s steps(2,end) infinite; position:relative; z-index:2}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.plate{position:absolute; bottom:34px; width:min(280px,72vw); height:26px; background:var(--panel2);
  --bd:var(--line); box-shadow:0 calc(var(--px) * -1) 0 var(--bd), 0 var(--px) 0 var(--bd),
  calc(var(--px) * -1) 0 0 var(--bd), var(--px) 0 0 var(--bd)}
.plate::before{content:""; position:absolute; inset:var(--px) var(--px) auto; height:var(--px); background:#2b3470}
.float{position:absolute}
.float.a{width:46px; top:6%; left:2%; animation:drift 3.4s steps(3,end) infinite}
.float.b{width:52px; top:24%; right:0; animation:drift 4.2s steps(3,end) infinite .5s}
.float.c{width:44px; bottom:20%; left:6%; animation:drift 3.8s steps(3,end) infinite 1s}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* bilah XP */
.xp{margin-top:38px; max-width:520px}
.xp-top{display:flex; justify-content:space-between; margin-bottom:9px}
.xp-top span,.xp-top b{font-family:var(--fl); font-size:15px; letter-spacing:.1em; font-weight:400}
.xp-top span{color:var(--muted)} .xp-top b{color:var(--gold)}
.bar{height:22px; background:#0a0c1c; --bd:var(--line); padding:var(--px);
  box-shadow:0 calc(var(--px) * -1) 0 var(--bd), 0 var(--px) 0 var(--bd),
             calc(var(--px) * -1) 0 0 var(--bd), var(--px) 0 0 var(--bd)}
.fill{height:100%; width:0; background:repeating-linear-gradient(90deg,var(--mint) 0 8px,#4fd6b4 8px 16px);
  animation:fillbar 2.4s steps(24,end) forwards .3s}
@keyframes fillbar{to{width:72%}}

/* ---------- panel status ---------- */
.status{background:var(--panel); padding:clamp(24px,3.4vw,38px)}
.status .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:26px 34px}
.stat b{display:flex; justify-content:space-between; font-family:var(--fl); font-size:16px;
  letter-spacing:.1em; margin-bottom:8px; font-weight:400; color:var(--ink)}
.stat .bar{height:16px}
.stat .fill{animation:none; background:currentColor}
.stat small{display:block; margin-top:8px; color:var(--muted); font-size:14px; line-height:1.5}

/* ---------- kartu kelas ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:clamp(22px,3vw,30px)}
.card{background:var(--panel); padding:30px 26px 26px; --bd:var(--line);
  transition:transform .1s steps(2,end), box-shadow .1s steps(2,end)}
.card:hover{transform:translate(calc(var(--px) * -1),calc(var(--px) * -1)); --bd:var(--gold);
  box-shadow:0 calc(var(--px) * -1) 0 var(--bd), 0 var(--px) 0 var(--bd),
             calc(var(--px) * -1) 0 0 var(--bd), var(--px) 0 0 var(--bd),
             calc(var(--px) * 3) calc(var(--px) * 3) 0 var(--shadow)}
.card .ico{width:54px; margin-bottom:20px}
.card h3{color:var(--gold)}
.card p{font-size:15.5px; color:var(--muted); margin-bottom:18px}
.skills{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.skills li{font-family:var(--fl); font-size:14px; letter-spacing:.06em; color:var(--mint);
  background:#0e1230; padding:5px 10px; box-shadow:0 0 0 2px #2a3269}

/* ---------- skill tree ---------- */
.tree{display:grid; justify-items:center}
.node{background:var(--panel); padding:16px 20px; text-align:center; --bd:var(--line); max-width:300px}
.node b{display:block; font-family:var(--fd); font-size:12px; color:var(--gold); margin-bottom:6px}
.node span{font-size:14.5px; color:var(--muted); line-height:1.5}
.node.root{--bd:var(--gold)}
.node.root b{color:var(--mint)}
.link{width:var(--px); height:34px; background:var(--line)}
.branch{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,28px); width:100%}
.branch > div{display:grid; justify-items:center}
.rail{height:var(--px); background:var(--line); width:66.66%; margin-inline:auto}
@media(max-width:820px){ .branch{grid-template-columns:1fr} .rail{display:none} }

/* ---------- peta level ---------- */
.map{display:grid; gap:var(--px)}
.tier{display:grid; grid-template-columns:150px 1fr; gap:clamp(16px,3vw,34px); align-items:center;
  background:var(--panel); padding:22px 26px; --bd:var(--line);
  box-shadow:0 calc(var(--px) * -1) 0 var(--bd), 0 var(--px) 0 var(--bd),
             calc(var(--px) * -1) 0 0 var(--bd), var(--px) 0 0 var(--bd)}
.tier:hover{--bd:var(--blue)}
.tier .lv{font-family:var(--fd); font-size:13px; color:var(--blue)}
.tier h3{margin:0 0 4px; color:var(--ink)}
.tier p{margin:0; font-size:15.5px; color:var(--muted)}
.tier.legend{--bd:var(--gold)}
.tier.legend .lv,.tier.legend h3{color:var(--gold)}
@media(max-width:640px){ .tier{grid-template-columns:1fr; gap:10px} }

/* ---------- ajakan penutup ---------- */
.final{text-align:center; background:var(--panel); padding:clamp(44px,6vw,72px) 26px; --bd:var(--gold)}
.final h2{color:var(--gold)}
.final p{max-width:44ch; margin-inline:auto; color:var(--muted)}
.final .cta{justify-content:center}
.final .ico{width:60px; margin:0 auto 22px}

/* ---------- kaki ---------- */
footer{border-top:var(--px) solid var(--line); padding:34px 0; margin-top:clamp(60px,8vw,96px)}
footer .wrap{display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between}
footer p{margin:0; color:var(--muted); font-size:14.5px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
                       transition-duration:.001ms !important; scroll-behavior:auto !important}
  .fill{width:72%}
}

/* starfield (dibangkitkan) */
.stars{box-shadow:24vw 39vh 0 #ffffff, 17vw 59vh 0 #ffffff, 96vw 74vh 0 #5d6aa8, 61vw 18vh 0 #5d6aa8, 88vw 2vh 0 #5d6aa8, 80vw 4vh 0 #ffffff, 69vw 20vh 0 #5d6aa8, 76vw 31vh 0 #5d6aa8, 25vw 75vh 0 #ffffff, 10vw 39vh 0 #5d6aa8, 53vw 53vh 0 #aab6f0, 84vw 44vh 0 #5d6aa8, 64vw 9vh 0 #5d6aa8, 54vw 19vh 0 #aab6f0, 3vw 8vh 0 #5d6aa8, 42vw 6vh 0 #aab6f0, 37vw 29vh 0 #aab6f0, 57vw 5vh 0 #5d6aa8, 2vw 80vh 0 #5d6aa8, 57vw 80vh 0 #ffffff, 7vw 88vh 0 #5d6aa8, 14vw 58vh 0 #ffffff, 46vw 45vh 0 #5d6aa8, 76vw 40vh 0 #5d6aa8, 65vw 64vh 0 #aab6f0, 92vw 90vh 0 #5d6aa8, 89vw 54vh 0 #5d6aa8, 17vw 17vh 0 #5d6aa8, 68vw 37vh 0 #5d6aa8, 32vw 44vh 0 #5d6aa8, 93vw 66vh 0 #ffffff, 1vw 42vh 0 #5d6aa8, 61vw 25vh 0 #5d6aa8, 39vw 41vh 0 #ffffff, 41vw 31vh 0 #aab6f0, 66vw 38vh 0 #aab6f0, 5vw 56vh 0 #5d6aa8, 33vw 81vh 0 #5d6aa8, 53vw 77vh 0 #aab6f0, 57vw 68vh 0 #aab6f0, 86vw 47vh 0 #ffffff, 19vw 11vh 0 #5d6aa8, 0vw 42vh 0 #5d6aa8, 32vw 28vh 0 #5d6aa8, 51vw 2vh 0 #aab6f0, 82vw 30vh 0 #aab6f0, 94vw 23vh 0 #5d6aa8, 21vw 2vh 0 #5d6aa8, 36vw 42vh 0 #aab6f0, 22vw 25vh 0 #5d6aa8, 48vw 37vh 0 #ffffff, 13vw 97vh 0 #aab6f0, 26vw 9vh 0 #aab6f0, 93vw 47vh 0 #5d6aa8, 0vw 95vh 0 #5d6aa8, 59vw 10vh 0 #5d6aa8, 99vw 17vh 0 #5d6aa8, 35vw 24vh 0 #5d6aa8, 82vw 91vh 0 #5d6aa8, 27vw 40vh 0 #aab6f0, 16vw 40vh 0 #5d6aa8, 7vw 8vh 0 #5d6aa8, 96vw 69vh 0 #5d6aa8, 80vw 96vh 0 #ffffff, 49vw 98vh 0 #5d6aa8, 4vw 64vh 0 #aab6f0, 37vw 43vh 0 #5d6aa8, 62vw 91vh 0 #5d6aa8, 15vw 28vh 0 #5d6aa8, 60vw 53vh 0 #5d6aa8, 56vw 51vh 0 #aab6f0, 36vw 12vh 0 #aab6f0, 13vw 5vh 0 #aab6f0, 50vw 85vh 0 #aab6f0, 43vw 73vh 0 #5d6aa8, 70vw 42vh 0 #5d6aa8, 69vw 72vh 0 #5d6aa8, 32vw 95vh 0 #5d6aa8, 15vw 97vh 0 #aab6f0, 76vw 4vh 0 #ffffff, 28vw 10vh 0 #aab6f0, 27vw 48vh 0 #aab6f0, 30vw 30vh 0 #ffffff, 52vw 55vh 0 #aab6f0, 88vw 89vh 0 #5d6aa8, 98vw 41vh 0 #5d6aa8, 41vw 83vh 0 #5d6aa8, 2vw 42vh 0 #5d6aa8, 32vw 24vh 0 #5d6aa8, 89vw 19vh 0 #aab6f0}
.stars2{box-shadow:51vw 26vh 0 #ffcf4a, 90vw 16vh 0 #ffffff, 88vw 89vh 0 #ffcf4a, 33vw 88vh 0 #ffcf4a, 96vw 44vh 0 #7ef0d0, 7vw 21vh 0 #ffffff, 40vw 97vh 0 #ffcf4a, 76vw 53vh 0 #7ef0d0, 50vw 97vh 0 #ffcf4a, 75vw 81vh 0 #ffffff, 5vw 5vh 0 #ffcf4a, 23vw 56vh 0 #ffffff, 87vw 60vh 0 #ffcf4a, 82vw 56vh 0 #ffcf4a, 80vw 66vh 0 #ffcf4a, 6vw 1vh 0 #ffcf4a, 55vw 96vh 0 #ffcf4a, 46vw 8vh 0 #ffcf4a, 30vw 6vh 0 #ffcf4a, 44vw 59vh 0 #ffffff, 92vw 52vh 0 #ffcf4a, 57vw 74vh 0 #7ef0d0, 27vw 8vh 0 #ffffff, 41vw 14vh 0 #7ef0d0, 8vw 89vh 0 #ffffff, 76vw 93vh 0 #ffcf4a, 74vw 19vh 0 #7ef0d0, 72vw 22vh 0 #7ef0d0, 26vw 89vh 0 #ffcf4a, 65vw 28vh 0 #ffffff, 85vw 92vh 0 #ffcf4a, 94vw 5vh 0 #ffcf4a, 47vw 76vh 0 #ffcf4a, 0vw 57vh 0 #ffcf4a, 53vw 27vh 0 #7ef0d0, 92vw 86vh 0 #7ef0d0, 86vw 48vh 0 #ffcf4a, 36vw 28vh 0 #7ef0d0, 4vw 75vh 0 #ffffff, 77vw 6vh 0 #ffcf4a, 59vw 44vh 0 #ffcf4a, 96vw 34vh 0 #ffffff, 76vw 80vh 0 #ffcf4a, 21vw 64vh 0 #ffcf4a}