:root{
  --ink:#080b14;
  --ink-2:#0e1424;
  --cyan:#4fc8ff;
  --cyan-deep:#1b6fa8;
  --amber:#ffc42e;
  --danger:#ff4d4d;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html, body{
  width:100%; height:100%;
  background:
    radial-gradient(ellipse at 50% 0%, #17253f 0%, var(--ink) 55%, #04060c 100%);
  overflow:hidden;
  font-family:'Noto Sans KR', system-ui, sans-serif;
  color:#e8f1ff;
  -webkit-font-smoothing:antialiased;
}

#stage-frame{
  position:relative;
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}

#game canvas{
  display:block;
  box-shadow:0 0 0 1px rgba(79,200,255,.18), 0 30px 90px rgba(0,0,0,.65);
}

/* ---------- 부팅 베일 ---------- */
#boot-veil{
  position:absolute; inset:0; z-index:50;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px;
  background:var(--ink);
  transition:opacity .5s ease;
}
#boot-veil.hide{ opacity:0; pointer-events:none; }

.bv-logo{
  font-family:'Black Han Sans', sans-serif;
  font-size:clamp(34px, 6vw, 78px);
  letter-spacing:.12em;
  color:#fff;
  text-shadow:0 0 26px rgba(79,200,255,.75);
}
.bv-sub{
  font-size:clamp(11px, 1.4vw, 16px);
  letter-spacing:.55em;
  color:var(--cyan);
  opacity:.85;
}
.bv-bar{
  margin-top:22px; width:min(320px, 52vw); height:3px;
  background:rgba(255,255,255,.10); overflow:hidden; border-radius:3px;
}
.bv-bar i{
  display:block; height:100%; width:40%;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
  animation:sweep 1.15s linear infinite;
}
@keyframes sweep{ from{ transform:translateX(-110%);} to{ transform:translateX(320%);} }


/* ================= 모바일 대응 ================= */

html.is-touch, html.is-touch body{
  overscroll-behavior:none;
  touch-action:none;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
}

#game canvas{ touch-action:none; }

/* 세로 모드 안내 — 터치 기기 + 세로일 때만 노출 */
#rotate-veil{
  position:absolute; inset:0; z-index:60;
  display:none;
  flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:32px; text-align:center;
  background:var(--ink);
}
html.is-touch #rotate-veil{ display:none; }
@media (orientation:portrait){
  html.is-touch #rotate-veil{ display:flex; }
}

.rv-icon{
  font-size:64px; color:var(--cyan);
  animation:spin 2.4s ease-in-out infinite;
}
@keyframes spin{
  0%,100%{ transform:rotate(0deg); }
  50%{ transform:rotate(90deg); }
}
.rv-title{
  font-family:'Black Han Sans', sans-serif;
  font-size:28px; color:#fff; letter-spacing:.04em;
}
.rv-sub{ font-size:14px; color:#7f93b0; line-height:1.6; max-width:320px; }

/* 노치 대응 */
@supports (padding: env(safe-area-inset-left)){
  #stage-frame{
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
}