:root {
  --accent: #c6ff3d;
  --fx1: #ffd23f;
  --fx2: #ff4d1f;
  --ink: #ffffff;
  --bg: #05060f;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; background: #000; overflow: hidden;
  overscroll-behavior: none; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  font-family: system-ui, -apple-system, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
}
#frame {
  position: fixed; inset: 0; margin: auto; overflow: hidden; background: var(--bg);
  width: 100vw; height: 100vh; height: 100dvh;
}
@media (min-aspect-ratio: 10/16) {
  #frame { width: calc(100dvh * 9 / 16); height: 100dvh; }
}
#game, #hud { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#hud { touch-action: none; }
#vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.45) 100%);
}
#letterbox i {
  position: absolute; left: 0; right: 0; height: 0; background: #000; transition: height .35s ease;
  pointer-events: none; z-index: 3;
}
#letterbox i:first-child { top: 0; }
#letterbox i:last-child { bottom: 0; }
#letterbox.on i { height: 9%; }

#ui { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.ui-btn { pointer-events: auto; font: inherit; cursor: pointer; }

#topbar {
  position: absolute; top: calc(var(--safe-top) + 10px); left: 12px; right: 12px;
  display: flex; align-items: center; gap: 10px;
}
.stat {
  display: flex; flex-direction: column; align-items: flex-start; min-width: 54px;
  padding: 6px 10px; border-radius: 12px; background: rgba(5,8,22,0.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.08);
}
.stat b { font-size: 20px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.stat span { font-size: 9px; letter-spacing: .14em; opacity: .65; margin-top: 3px; font-weight: 700; }
#btnHome {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(5,8,22,0.55); color: #fff; font-size: 20px; line-height: 1;
}
#btnHome[hidden], #objective[hidden], #wind[hidden] { display: none; }
#objective {
  flex: 1; min-width: 0; padding: 6px 12px; border-radius: 12px; background: rgba(5,8,22,0.6);
  border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
#objective b { font-size: 12px; font-weight: 900; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#objective span { font-size: 12px; font-weight: 700; opacity: .85; margin-top: 2px; color: var(--accent); }
#wind {
  position: absolute; top: calc(var(--safe-top) + 62px); left: 50%; transform: translateX(-50%);
  font-size: 12px; font-weight: 900; letter-spacing: .1em; padding: 5px 10px; border-radius: 999px;
  background: rgba(53,224,255,.16); border: 1px solid rgba(53,224,255,.45); color: #bff6ff;
}
#note {
  position: absolute; left: 50%; bottom: calc(var(--safe-bottom) + 108px); transform: translateX(-50%);
  max-width: 86%; text-align: center; font-size: 13px; font-weight: 800; padding: 8px 14px; border-radius: 12px;
  background: rgba(8,11,28,.92); border: 1px solid rgba(255,255,255,.14); opacity: 0; transition: opacity .25s;
  pointer-events: none; z-index: 6;
}
#note.show { opacity: 1; }
.chip.locked { opacity: .5; }
.chip.locked::after { content: 'LOCKED'; font-size: 8px; letter-spacing: .12em; margin-left: 4px; opacity: .8; }

.overlay {
  position: absolute; inset: 0; z-index: 8; pointer-events: auto;
  background: linear-gradient(180deg, rgba(3,4,12,.82) 0%, rgba(3,4,12,.72) 50%, rgba(3,4,12,.9) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px;
}
.overlay[hidden] { display: none; }
.brand { font-size: clamp(46px, 15vw, 80px); font-weight: 900; font-style: italic; letter-spacing: .01em; line-height: .9; text-align: center;
  background: linear-gradient(180deg, #fff 0%, #dfffa0 55%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(198,255,61,.35)); margin-bottom: 34px; }
.brand small { display: block; font-size: 13px; font-style: normal; letter-spacing: .3em; color: rgba(255,255,255,.6); -webkit-text-fill-color: rgba(255,255,255,.6); margin-top: 10px; }
.ui-btn.big {
  width: 100%; max-width: 360px; height: 72px; border-radius: 18px; border: 0; margin: 7px 0;
  background: var(--accent); color: #0a0f00; font-weight: 900; font-size: 22px; font-style: italic; letter-spacing: .04em;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ui-btn.big span { font-size: 11px; font-style: normal; font-weight: 800; letter-spacing: .1em; opacity: .7; margin-top: 3px; }
.ui-btn.big.alt { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.18); }
.menu-foot { display: flex; gap: 18px; margin-top: 22px; font-weight: 800; opacity: .8; }

#map { justify-content: flex-start; padding-top: calc(var(--safe-top) + 16px); }
.map-head { width: 100%; display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.map-head .ui-btn.icon { width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: #fff; font-size: 20px; }
.map-title { flex: 1; }
.map-title b { display: block; font-size: 28px; font-weight: 900; font-style: italic; letter-spacing: .03em; }
.map-title small { font-size: 11px; letter-spacing: .14em; opacity: .6; font-weight: 800; }
#mapStars { font-weight: 900; color: #ffd23f; }
#stageGrid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow-y: auto; padding-bottom: 20px; }
.stage-tile {
  text-align: left; height: 86px; border-radius: 16px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06); color: #fff; display: flex; flex-direction: column; justify-content: space-between;
}
.stage-tile .st-n { font-size: 11px; font-weight: 900; letter-spacing: .14em; opacity: .6; }
.stage-tile .st-name { font-size: 14px; font-weight: 900; line-height: 1.1; }
.stage-tile .st-stars { font-size: 15px; color: #ffd23f; letter-spacing: .1em; }
.stage-tile.boss { border-color: rgba(255,77,31,.6); background: rgba(255,77,31,.1); }
.stage-tile.locked { opacity: .38; }
.stage-tile.next { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }

.card .card-box {
  width: 100%; max-width: 360px; padding: 24px 20px; border-radius: 22px; text-align: center;
  background: rgba(10,14,34,.96); border: 1px solid rgba(255,255,255,.12);
}
.sc-num { font-size: 12px; font-weight: 900; letter-spacing: .2em; color: var(--accent); }
.sc-name { font-size: 30px; font-weight: 900; font-style: italic; margin: 6px 0 10px; line-height: 1.05; }
.sc-text { font-size: 16px; font-weight: 800; }
.sc-meta { font-size: 12px; font-weight: 700; opacity: .6; margin-top: 8px; letter-spacing: .04em; }
.sc-reward { font-size: 13px; font-weight: 900; color: #ffd23f; margin: 12px 0 4px; min-height: 16px; }
.sr-title { font-size: 34px; font-weight: 900; font-style: italic; }
.sr-stars { font-size: 44px; color: #ffd23f; letter-spacing: .12em; margin: 6px 0; }
.sr-line { font-size: 14px; font-weight: 800; opacity: .8; }
.sr-reward { font-size: 14px; font-weight: 900; color: var(--accent); margin: 10px 0 6px; min-height: 18px; }
.ui-btn.wide {
  display: block; width: 100%; height: 50px; margin-top: 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08); color: #fff; font-weight: 900; font-size: 16px;
}
.ui-btn.wide[hidden] { display: none; }
.ui-btn.ghost { background: transparent; border-color: transparent; opacity: .75; }
.ui-btn.small { font-size: 12px; height: 34px; margin-top: 8px; width: 100%; border-radius: 10px; color: #ff9b8a; }

#gear {
  margin-left: auto; width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(5,8,22,0.55); color: #fff; font-size: 20px; line-height: 1;
}

#hint {
  position: absolute; left: 0; right: 0; top: 54%; text-align: center; transition: opacity .3s;
  text-shadow: 0 2px 10px rgba(0,0,0,.7);
}
#hint b { display: block; font-size: 17px; font-weight: 800; }
#hint small { display: block; font-size: 13px; opacity: .8; margin-top: 4px; }
#hint.off { opacity: 0; }

#toast {
  position: absolute; left: 0; right: 0; top: 60%; text-align: center;
  font-size: 30px; font-weight: 900; font-style: italic; letter-spacing: .04em;
  opacity: 0; transform: scale(.6);
  text-shadow: 0 0 18px rgba(0,0,0,.6);
}
#toast.show { animation: pop 0.9s cubic-bezier(.2,.9,.2,1) forwards; }
#toast.perfect { color: var(--accent); text-shadow: 0 0 22px rgba(198,255,61,.75); font-size: 38px; }
#toast.good { color: #fff; }
#toast.miss { color: #ff8a7a; }

#banner {
  position: absolute; left: -10%; right: -10%; top: 16%; text-align: center; opacity: 0;
  transform: skewY(-6deg);
}
#banner span {
  display: inline-block; font-size: clamp(34px, 11.5vw, 66px); font-weight: 900; font-style: italic;
  letter-spacing: .02em; line-height: 1;
  background: linear-gradient(180deg, #ffffff 0%, var(--fx1) 45%, var(--fx2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px var(--fx2));
  padding: 0 12px;
}
#banner.show { animation: banner 1.6s cubic-bezier(.15,.9,.2,1) forwards; }

#result {
  position: absolute; left: 0; right: 0; top: 34%; text-align: center; opacity: 0;
  font-size: clamp(44px, 15vw, 84px); font-weight: 900; font-style: italic; letter-spacing: .02em;
  text-shadow: 0 6px 30px rgba(0,0,0,.6);
}
#result.show { animation: resultPop 1.5s cubic-bezier(.2,.9,.2,1) forwards; }
#result.goal { color: #fff; text-shadow: 0 0 30px rgba(198,255,61,.8), 0 6px 30px rgba(0,0,0,.6); }
#result.fail { color: #dfe6ff; font-size: clamp(34px, 11vw, 60px); }
#result.long { font-size: clamp(22px, 7.2vw, 38px); }

#replayTag, #recTag {
  position: absolute; top: calc(var(--safe-top) + 12%); left: 16px; font-weight: 900; letter-spacing: .2em;
  font-size: 13px; padding: 5px 10px; border-radius: 8px; z-index: 5;
}
#replayTag { background: rgba(255,255,255,.9); color: #000; }
#recTag { left: auto; right: 16px; background: #ff2d55; color: #fff; animation: blink 1s infinite; }
#skipTag {
  position: absolute; left: 50%; bottom: calc(var(--safe-bottom) + 12%); transform: translateX(-50%); z-index: 5;
  font-size: 13px; font-weight: 800; letter-spacing: .08em; padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
#skipTag[hidden] { display: none; }

#loadout {
  position: absolute; left: 10px; right: 10px; bottom: calc(var(--safe-bottom) + 10px);
  display: grid; grid-template-columns: auto 1fr; gap: 6px 8px; align-items: center;
  transition: opacity .25s, transform .25s;
}
#loadout.off { opacity: 0; transform: translateY(20px); pointer-events: none; }
#loadout.off .chip { pointer-events: none; }
.row-label { font-size: 9px; font-weight: 800; letter-spacing: .16em; opacity: .55; writing-mode: horizontal-tb; }
.row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.chip {
  height: 36px; border-radius: 11px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(5,8,22,.62); color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .06em;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 6px;
}
.chip.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, 0 0 16px rgba(198,255,61,.25); }
.chip.fx i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.chip[data-fx="blaze"] i { background: radial-gradient(circle, #fff3b0, #ff7a1a 60%, #c41d00); }
.chip[data-fx="thunder"] i { background: radial-gradient(circle, #ffffff, #7fe9ff 55%, #1f7dff); }
.chip[data-fx="cosmic"] i { background: radial-gradient(circle, #ffffff, #9fe8ff 40%, #a64dff 80%); }

.bar {
  position: absolute; left: 12px; right: 12px; bottom: calc(var(--safe-bottom) + 18px);
  display: flex; gap: 8px; z-index: 6;
}
.bar[hidden] { display: none; }
.bar .ui-btn, #settings .ui-btn.primary {
  flex: 1; height: 48px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,14,34,.8); color: #fff; font-weight: 800; font-size: 15px;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ui-btn.primary { background: var(--accent) !important; color: #0a0f00 !important; border-color: transparent !important; }

#settings {
  position: absolute; left: 14px; right: 14px; top: 22%; padding: 18px; border-radius: 18px; z-index: 8;
  background: rgba(8,11,28,.94); border: 1px solid rgba(255,255,255,.1); pointer-events: auto;
}
#settings[hidden] { display: none; }
.set-title { font-weight: 900; font-size: 18px; margin-bottom: 12px; }
.set-row { display: flex; align-items: center; justify-content: space-between; margin: 10px 0; font-weight: 700; }
.seg { display: flex; background: rgba(255,255,255,.07); border-radius: 10px; padding: 3px; }
.seg button { border: 0; background: transparent; color: #fff; font-weight: 800; padding: 8px 12px; border-radius: 8px; font-size: 13px; }
.seg button.sel { background: #fff; color: #000; }
#setClose { width: 100%; margin-top: 14px; }
.set-foot { text-align: center; font-size: 11px; opacity: .45; margin-top: 10px; }

#loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--bg); font-weight: 800; letter-spacing: .1em; z-index: 9; transition: opacity .4s;
}
#loading.off { opacity: 0; pointer-events: none; }
#fps { position: absolute; right: 8px; bottom: 120px; font: 11px monospace; opacity: .7; z-index: 9; }

#flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 7; mix-blend-mode: screen; }

@keyframes pop {
  0% { opacity: 0; transform: scale(.6); }
  18% { opacity: 1; transform: scale(1.12); }
  30% { transform: scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.05) translateY(-10px); }
}
@keyframes banner {
  0% { opacity: 0; transform: skewY(-6deg) translateX(40%) scale(1.4); }
  14% { opacity: 1; transform: skewY(-6deg) translateX(0) scale(1); }
  78% { opacity: 1; transform: skewY(-6deg) translateX(-3%) scale(1); }
  100% { opacity: 0; transform: skewY(-6deg) translateX(-40%) scale(.95); }
}
@keyframes resultPop {
  0% { opacity: 0; transform: scale(1.8); }
  14% { opacity: 1; transform: scale(.94); }
  24% { transform: scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.04); }
}
@keyframes blink { 50% { opacity: .45; } }