:root{
  --cyan:#3ff2ff;
  --cyan-dim:#0891a8;
  --magenta:#c04dff;
  --danger:#ff5f7e;
  --success:#4dffa0;
  --warn:#ffd23f;
  --bg:#04050a;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{
  min-height:100%;
  background:var(--bg);
  color:#e6f7ff;
  font-family:'Noto Sans KR',sans-serif;
  overflow-x:hidden;
}
::selection{background:var(--cyan);color:#000;}

/* ---------- Background layers ---------- */
#stars{
  position:fixed;
  inset:0;
  z-index:0;
  background:radial-gradient(ellipse at 50% 20%, #0c1830 0%, #04050a 65%);
}
.scanlines{
  position:fixed;
  inset:0;
  z-index:5;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.02) 0px,
    rgba(255,255,255,0.02) 1px,
    transparent 2px,
    transparent 3px
  );
  mix-blend-mode:overlay;
}
.vignette{
  position:fixed;
  inset:0;
  z-index:6;
  pointer-events:none;
  box-shadow:inset 0 0 18vw 2vw rgba(0,0,0,0.85);
}

/* ---------- Nav ---------- */
nav{
  position:relative;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 6vw;
}
.logo{
  font-family:'Orbitron',sans-serif;
  font-weight:900;
  font-size:20px;
  letter-spacing:.15em;
  color:#fff;
  text-decoration:none;
}
.logo span{color:var(--cyan);text-shadow:0 0 10px var(--cyan);}
.back-link{
  font-family:'Orbitron',sans-serif;
  font-size:12px;
  letter-spacing:.15em;
  color:#8fb6c9;
  text-decoration:none;
  transition:color .25s, text-shadow .25s;
}
.back-link:hover{color:var(--cyan);text-shadow:0 0 8px var(--cyan);}

/* ---------- Page frame ---------- */
.page-wrap{
  position:relative;
  z-index:10;
  max-width:640px;
  margin:0 auto;
  padding:20px 6vw 100px;
  text-align:center;
}
.page-tag{
  font-family:'Orbitron',sans-serif;
  font-size:12px;
  letter-spacing:.5em;
  color:var(--cyan);
  text-shadow:0 0 10px rgba(63,242,255,0.8);
  margin-bottom:18px;
}
.page-title{
  font-family:'Orbitron',sans-serif;
  font-weight:900;
  font-size:clamp(36px,8vw,64px);
  letter-spacing:.05em;
  background:linear-gradient(180deg,#ffffff 0%,#b9f3ff 55%,var(--cyan) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 22px rgba(63,242,255,0.35));
}
.page-title span{color:var(--magenta);-webkit-text-fill-color:var(--magenta);}
.page-desc{
  margin:20px auto 0;
  max-width:460px;
  font-size:14px;
  line-height:1.9;
  color:#9fc4d6;
  font-weight:300;
}
.page-desc b{color:var(--cyan);font-weight:600;}

/* ---------- Status bar (lives / score / try ...) ---------- */
.status-bar{
  display:flex;
  justify-content:center;
  gap:50px;
  flex-wrap:wrap;
  margin:38px 0 30px;
}
.status-item{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.status-label{
  font-family:'Orbitron',sans-serif;
  font-size:11px;
  letter-spacing:.3em;
  color:var(--cyan-dim);
}
.status-value{
  font-family:'Orbitron',sans-serif;
  font-size:30px;
  font-weight:700;
  color:var(--cyan);
  text-shadow:0 0 12px rgba(63,242,255,0.6);
  transition:color .3s, text-shadow .3s;
}
.status-value.warn{
  color:var(--danger);
  text-shadow:0 0 14px rgba(255,95,126,0.8);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:15px 32px;
  font-family:'Orbitron',sans-serif;
  font-size:12px;
  letter-spacing:.25em;
  border-radius:2px;
  cursor:pointer;
  text-decoration:none;
  border:none;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-solid{
  color:#04141a;
  background:var(--cyan);
  box-shadow:0 0 24px rgba(63,242,255,0.5);
}
.btn-solid:hover{
  transform:translateY(-2px);
  box-shadow:0 0 36px rgba(63,242,255,0.8);
}
.btn-outline{
  color:var(--cyan);
  background:transparent;
  border:1px solid var(--cyan);
}
.btn-outline:hover{
  background:var(--cyan);
  color:#04141a;
  box-shadow:0 0 24px rgba(63,242,255,0.6);
}
.btn-danger{
  color:var(--danger);
  border-color:var(--danger);
}
.btn-danger:hover{
  background:var(--danger);
  color:#1a0508;
  box-shadow:0 0 24px rgba(255,95,126,0.6);
}
.btn:disabled{
  opacity:.4;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}
.btn-row{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}

/* ---------- Messages ---------- */
.message{
  min-height:28px;
  margin-top:20px;
  font-family:'Orbitron',sans-serif;
  font-size:13px;
  letter-spacing:.1em;
}
.message.win{color:var(--success);text-shadow:0 0 10px rgba(77,255,160,0.7);}
.message.lose{color:var(--danger);text-shadow:0 0 10px rgba(255,95,126,0.7);}
.message.info{color:var(--cyan);}

.hidden{display:none !important;}

@keyframes shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-8px);}
  40%{transform:translateX(8px);}
  60%{transform:translateX(-6px);}
  80%{transform:translateX(6px);}
}
.shake{animation:shake .35s ease;}