@font-face { font-family: "DotGothic16"; src: url("./assets/fonts/DotGothic16-Regular.ttf") format("truetype"); font-display: block; }
:root {
  --cyan: #6fe3ff;
  --blue: #2f8cff;
  --gold: #ffcf4a;
  --gold2: #ff9a1a;
  --ink: #e9f6ff;
  --panel: rgba(6, 20, 52, 0.62);
  --line: rgba(111, 227, 255, 0.55);
  --charge: 0;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #01040d; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
body { display: grid; place-items: center; font-family: "DotGothic16", monospace; -webkit-font-smoothing: none; font-smooth: never; color: var(--ink); }
#game {
  position: relative;
  width: min(100vw, calc(100dvh * 9 / 16));
  height: min(100dvh, calc(100vw * 16 / 9));
  overflow: hidden;
  background: #020818;
  container-type: size;
}
#c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; }
.brand { position: absolute; left: 3.5cqw; top: 2.4cqh; }
.logo { line-height: 0.9; letter-spacing: 0.02em; }
.logo span { display: block; font-size: 5.6cqw; letter-spacing: 0.06em; background: linear-gradient(#bff3ff, #3fb8ff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 6px rgba(80, 190, 255, 0.8)); }
.logo b { display: block; font-size: 7.6cqw; background: linear-gradient(#fff3b0, #ffc43a 55%, #d27a0c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #4a2600) drop-shadow(0 0 8px rgba(255, 170, 40, 0.55)); }
.stage-label { margin-top: 1.1cqh; font-size: 3.2cqw; font-weight: 400; letter-spacing: 0.08em; text-shadow: 0 0 6px rgba(0, 160, 255, 0.9); }
.track { position: relative; margin-top: 1cqh; width: 36cqw; height: 3cqw; display: flex; justify-content: space-between; align-items: center; }
.track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(160, 220, 255, 0.35); }
.track .fill { position: absolute; left: 0; top: 50%; height: 2px; width: 0; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.track b { position: relative; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; border: 2px solid rgba(190, 235, 255, 0.8); background: #041436; }
.track b.done { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.track b.now { background: #fff; box-shadow: 0 0 10px var(--cyan); }
.track b.flag::after { content: ""; position: absolute; left: 60%; bottom: 90%; width: 2px; height: 3.2cqw; background: #dff; }
.track b.flag::before { content: ""; position: absolute; left: calc(60% + 2px); bottom: calc(90% + 1.6cqw); border-left: 2.6cqw solid #dff; border-top: 0.8cqw solid transparent; border-bottom: 0.8cqw solid transparent; }
.weight-panel { position: absolute; right: 3.5cqw; top: 2.4cqh; padding: 1cqw 3cqw 1.2cqw; border: 1.5px solid var(--line); border-radius: 0; background: var(--panel); box-shadow: 0 0 14px rgba(40, 150, 255, 0.35) inset; text-align: center; min-width: 30cqw; }
.weight { font-size: 8.6cqw; font-weight: 400; line-height: 1; text-shadow: 0 0 10px rgba(120, 210, 255, 0.8); }
.weight small { font-size: 4.2cqw; margin-left: 0.8cqw; }
.weight.pop { animation: pop 0.45s ease-out; }
@keyframes pop { 30% { transform: scale(1.25); color: var(--gold); } }
.knock { font-size: 2.9cqw; font-weight: 400; letter-spacing: 0.04em; margin-top: 0.5cqh; opacity: 0.9; }
.score { position: absolute; right: 3.8cqw; top: calc(2.4cqh + 18cqw); font-size: 3.8cqw; font-weight: 400; letter-spacing: 0.06em; text-shadow: 0 0 6px #09f; }
.pause-btn { pointer-events: auto; position: absolute; right: 3.5cqw; top: calc(2.4cqh + 24cqw); width: 8cqw; height: 8cqw; border-radius: 50%; border: 1.5px solid var(--line); background: var(--panel); display: flex; justify-content: center; align-items: center; gap: 1.2cqw; }
.pause-btn i { width: 1.1cqw; height: 3.2cqw; background: #cfefff; border-radius: 1px; }
.boss-bar { position: absolute; left: 12cqw; right: 12cqw; top: 25cqh; text-align: center; }
.boss-name { font-weight: 400; font-size: 3.6cqw; letter-spacing: 0.14em; color: #ffb3a8; text-shadow: 0 0 8px #f20; }
.boss-bar .bar { margin-top: 0.6cqh; height: 2.2cqw; border: 1.5px solid #ff8070; border-radius: 0; background: rgba(40, 0, 0, 0.6); overflow: hidden; }
.boss-bar .bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff2a1a, #ffb040); box-shadow: 0 0 10px #f40; transition: width 0.15s; }
.hint { position: absolute; left: 0; right: 0; bottom: calc(3.5cqh + 27cqw); text-align: center; font-size: 3.3cqw; font-weight: 400; letter-spacing: 0.05em; line-height: 1.45; text-shadow: 0 0 6px #000, 0 0 10px #06f; transition: opacity 0.6s; }
.slots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 3cqh; display: flex; gap: 1.6cqw; }
.slot { position: relative; width: 12.5cqw; height: 12.5cqw; border-radius: 0; border: 1.5px solid rgba(110, 200, 255, 0.6); background: linear-gradient(160deg, rgba(20, 60, 140, 0.8), rgba(4, 14, 40, 0.85)); display: grid; place-items: center; box-shadow: 0 0 10px rgba(30, 120, 255, 0.35) inset; }
.slot img { width: 86%; image-rendering: pixelated; filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8)); }
.slot.empty { opacity: 0.35; }
.slot.empty img { filter: grayscale(1) brightness(0.6); }
.slot .tier { position: absolute; right: -0.8cqw; bottom: -0.8cqw; width: 4.6cqw; height: 4.6cqw; border-radius: 0; display: grid; place-items: center; font-weight: 400; font-size: 3.1cqw; background: #0b1b3a; border: 1.5px solid #bcd; }
.slot .count { position: absolute; left: 1cqw; top: 0.4cqw; font-size: 2.6cqw; font-weight: 400; opacity: 0.85; }
.slot.R .tier { color: #e4edf5; }
.slot.E { border-color: #4d9bff; box-shadow: 0 0 12px rgba(77, 155, 255, 0.7) inset, 0 0 8px rgba(77, 155, 255, 0.6); }
.slot.E .tier { color: #7fb8ff; border-color: #4d9bff; }
.slot.L { border-color: var(--gold); background: linear-gradient(160deg, rgba(120, 70, 10, 0.85), rgba(40, 14, 4, 0.9)); box-shadow: 0 0 14px rgba(255, 170, 30, 0.8) inset, 0 0 12px rgba(255, 150, 20, 0.7); }
.slot.L .tier { color: var(--gold); border-color: var(--gold); }
.slot.flash { animation: slotflash 0.6s ease-out; }
@keyframes slotflash { 30% { transform: scale(1.18); filter: brightness(1.8); } }

#stick-zone { pointer-events: auto; position: absolute; left: 0; bottom: 0; width: 55%; height: 42%; touch-action: none; }
#stick { position: absolute; left: 3cqw; bottom: 3cqh; width: 26cqw; height: 26cqw; border-radius: 50%; border: 2px solid rgba(160, 220, 255, 0.45); background: radial-gradient(circle, rgba(20, 60, 120, 0.35), rgba(5, 15, 40, 0.55)); box-shadow: 0 0 16px rgba(60, 160, 255, 0.35) inset; transition: opacity 0.2s; opacity: 0.8; }
#stick.active { opacity: 1; transition: none; }
#stick .arrows { position: absolute; inset: 0; background:
  linear-gradient(0deg, transparent 0 0) ; }
#stick .arrows::before, #stick .arrows::after { content: "▲"; position: absolute; left: 50%; transform: translateX(-50%); font-size: 3cqw; color: rgba(200, 235, 255, 0.55); top: 4%; }
#stick .arrows::after { content: "▼"; top: auto; bottom: 4%; }
#knob { position: absolute; left: 50%; top: 50%; width: 12cqw; height: 12cqw; margin: -6cqw 0 0 -6cqw; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffffff, #b7c6d8 60%, #6f8098); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 10px rgba(150, 210, 255, 0.5); }
.action-wrap { position: absolute; right: 3.5cqw; bottom: 3.5cqh; width: 24cqw; }
.charge-label { position: absolute; bottom: 100%; left: 0; right: 0; margin-bottom: 1.2cqw; text-align: center; font-size: 3cqw; font-weight: 400; letter-spacing: 0.06em; color: #eaf8ff; text-shadow: 0 0 6px #06f; }
.action { pointer-events: auto; touch-action: none; position: relative; width: 24cqw; height: 24cqw; border-radius: 50%; border: none; padding: 0;
  background:
    radial-gradient(circle, #0b2b5c 0 58%, transparent 59%),
    conic-gradient(var(--gold) calc(var(--charge) * 1turn), rgba(255, 207, 74, 0.18) 0);
  box-shadow: 0 0 0 1.2cqw #0a1e44, 0 0 0 1.5cqw rgba(120, 200, 255, 0.5), 0 0 22px rgba(40, 140, 255, 0.55); display: grid; place-items: center; }
.action.held { transform: scale(0.96); }
.action .bolt { width: 9.5cqw; height: 11cqw; margin-top: -3cqw; background: linear-gradient(#e8fbff, #6fd6ff); clip-path: polygon(55% 0, 12% 58%, 44% 58%, 32% 100%, 88% 38%, 55% 38%, 72% 0); filter: drop-shadow(0 0 6px #6ff); }
.action em { position: absolute; bottom: 21%; font-style: normal; font-weight: 400; font-size: 2.5cqw; letter-spacing: 0.04em; }
#floaters { position: absolute; inset: 0; overflow: hidden; }
.floater { position: absolute; transform: translate(-50%, -50%); font-weight: 400; font-size: 4.4cqw; white-space: nowrap; text-shadow: 0 0 6px #000, 0 0 10px currentColor; animation: floatup 1.1s ease-out forwards; }
.floater.big { font-size: 6cqw; }
@keyframes floatup { 0% { opacity: 0; margin-top: 0; } 15% { opacity: 1; } 100% { opacity: 0; margin-top: -9cqh; } }
.banner { position: absolute; left: 0; right: 0; top: 38%; text-align: center; font-weight: 400; font-size: 9cqw; letter-spacing: 0.04em; background: linear-gradient(#fff6c0, #ffbe2e 60%, #d06a00); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #3a1d00) drop-shadow(0 0 14px rgba(255, 170, 30, 0.7)); animation: bannerin 0.5s cubic-bezier(.2, 1.6, .5, 1); }
.banner small { display: block; font-size: 4.2cqw; margin-top: 1cqh; }
@keyframes bannerin { from { transform: scale(0.4); opacity: 0; } }

/* ---------- overlays ---------- */
.overlay { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, rgba(10, 40, 100, 0.55), rgba(0, 4, 16, 0.85)); z-index: 5; }
.overlay.hidden { display: none; }
.overlay .loading { font-weight: 400; letter-spacing: 0.2em; opacity: 0.8; }
.screen { width: 86%; text-align: center; }
.screen .logo { display: inline-block; margin-bottom: 3cqh; }
.screen .logo span { font-size: 10cqw; letter-spacing: 0.06em; }
.screen .logo b { font-size: 14cqw; }
.screen h2 { margin: 0 0 2cqh; font-size: 8cqw; font-weight: 400; letter-spacing: 0.04em; background: linear-gradient(#fff, #9fe0ff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px rgba(80, 180, 255, 0.8)); }
.screen h2.gold { background: linear-gradient(#fff6c0, #ffbe2e 60%, #d06a00); -webkit-background-clip: text; background-clip: text; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; margin: 2cqh 0 3cqh; }
.stats div { padding: 2cqw; border-radius: 0; border: 1.5px solid var(--line); background: var(--panel); }
.stats small { display: block; font-size: 2.6cqw; letter-spacing: 0.12em; opacity: 0.75; }
.stats b { font-size: 5.4cqw; }
.btn { display: block; width: 100%; margin: 1.6cqh 0; padding: 3.4cqw; border-radius: 0; border: 2px solid var(--gold); background: linear-gradient(#ffdd73, #ff9d1c); color: #2b1400; font-weight: 400; font-size: 5cqw; letter-spacing: 0.08em; box-shadow: 0 0 18px rgba(255, 170, 30, 0.6); cursor: pointer; }
.btn.alt { background: rgba(8, 30, 70, 0.8); color: var(--ink); border-color: var(--line); box-shadow: 0 0 12px rgba(40, 140, 255, 0.4); }
.btn.small { font-size: 3.6cqw; padding: 2.4cqw; }
.help { font-size: 3.1cqw; line-height: 1.6; opacity: 0.85; margin-top: 2cqh; }
.notice { font-size: 3cqw; color: #ffb3a8; margin-top: 1.5cqh; }
.newbest { color: var(--gold); font-weight: 400; font-size: 4.4cqw; letter-spacing: 0.1em; animation: pop 0.8s infinite; }

/* pixel-art frames */
.weight-panel, .slot, .stats div, .btn, .pause-btn, .boss-bar .bar { box-shadow: 0 0 0 2px #020818, 4px 4px 0 0 rgba(0, 0, 0, 0.55) !important; }
.btn { text-shadow: none; }
.slot.E { box-shadow: 0 0 0 2px #020818, 0 0 0 4px #4d9bff !important; }
.slot.L { box-shadow: 0 0 0 2px #020818, 0 0 0 4px #ffcf4a, 0 0 12px rgba(255, 150, 20, 0.8) !important; }
.logo span, .logo b { filter: drop-shadow(3px 3px 0 #020818) !important; }
.floater, .banner, .hint, .stage-label, .score, .weight, .knock { text-shadow: 2px 2px 0 #020818, -2px 0 0 #020818, 0 -2px 0 #020818, 2px 0 0 #020818 !important; }
.floater { color: inherit; }
.action, #stick, #knob { border-radius: 50% !important; }
.banner { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #ffd24a !important; filter: none !important; text-shadow: 3px 3px 0 #3a1d00, -2px 0 0 #020818, 0 -2px 0 #020818, 2px 0 0 #020818, 0 2px 0 #020818, 0 0 12px rgba(255, 170, 30, 0.7) !important; }
.banner small { color: #fff3c0; }

.combo { position: absolute; left: 3.5cqw; top: calc(2.4cqh + 30cqw); color: #ffd24a; font-size: 9cqw; line-height: 1; text-shadow: 2px 2px 0 #3a1d00, -2px 0 0 #020818, 0 -2px 0 #020818, 2px 0 0 #020818, 0 2px 0 #020818; }
.combo small { display: block; font-size: 3.2cqw; color: #fff3c0; letter-spacing: 0.08em; }
.combo.pop { animation: pop 0.25s ease-out; }
.slot.more { color: #cfe8ff; font-size: 4cqw; display: grid; place-items: center; }
.slots { gap: 1.2cqw; }
.slot { width: 11cqw; height: 11cqw; }
.slots { bottom: calc(3.5cqh + 25cqw) !important; }
.hint { bottom: calc(3.5cqh + 38cqw) !important; }

/* Extension pop-ups */
.xpop { position: absolute; transform: translate(-50%, -50%); width: 17cqw; height: 17cqw; display: grid; place-items: center; border: 2px solid #dfe8f0; background: rgba(4, 14, 40, 0.85); box-shadow: 0 0 0 2px #020818, 0 0 14px rgba(160, 200, 255, 0.5); animation: popin 1.4s ease-out forwards; pointer-events: none; }
.xpop img { width: 92%; image-rendering: pixelated; }
.xpop b { position: absolute; right: -1.2cqw; bottom: -1.2cqw; width: 5.4cqw; height: 5.4cqw; display: grid; place-items: center; background: #0b1b3a; border: 2px solid currentColor; font-weight: 400; font-size: 3.4cqw; }
.xpop small { position: absolute; left: 50%; bottom: -5cqw; transform: translateX(-50%); font-size: 3.2cqw; white-space: nowrap; color: #fff3c0; text-shadow: 2px 2px 0 #020818; }
.xpop.R { color: #e4edf5; }
.xpop.E { color: #7fb8ff; border-color: #4d9bff; box-shadow: 0 0 0 2px #020818, 0 0 18px rgba(77, 155, 255, 0.9); }
.xpop.L { color: #ffcf4a; border-color: #ffcf4a; background: rgba(60, 30, 4, 0.9); box-shadow: 0 0 0 2px #020818, 0 0 24px rgba(255, 170, 30, 1); }
.xpop.up { width: 22cqw; height: 22cqw; animation: popup 1.8s ease-out forwards; }
.xpop.up::after { content: ""; position: absolute; inset: -3cqw; border: 2px solid currentColor; animation: ringout 0.8s ease-out 2; }
@keyframes popin { 0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; } 15% { transform: translate(-50%, -80%) scale(1.25); opacity: 1; } 30% { transform: translate(-50%, -90%) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%, -190%) scale(0.8); opacity: 0; } }
@keyframes popup { 0% { transform: translate(-50%, -50%) scale(0.2) rotate(-20deg); opacity: 0; } 15% { transform: translate(-50%, -90%) scale(1.35) rotate(6deg); opacity: 1; } 30% { transform: translate(-50%, -100%) scale(1.1) rotate(0); } 85% { opacity: 1; } 100% { transform: translate(-50%, -190%) scale(0.9); opacity: 0; } }
@keyframes ringout { from { transform: scale(0.8); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

/* Sound toggles (top right, above overlays) */
.audio-btns { position: absolute; right: 3.5cqw; top: calc(2.4cqh + 33cqw); display: flex; flex-direction: column; gap: 1.6cqw; z-index: 8; }
.snd { pointer-events: auto; width: 8cqw; height: 8cqw; padding: 0; border: 1.5px solid var(--line); background: var(--panel); display: grid; place-items: center; position: relative; box-shadow: 0 0 0 2px #020818, 3px 3px 0 0 rgba(0,0,0,0.55); }
.snd em { position: absolute; bottom: -3.2cqw; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 2.2cqw; color: #cfefff; text-shadow: 1px 1px 0 #020818; }
.snd .ico { width: 4.4cqw; height: 4.4cqw; background: #cfefff; }
.snd .note { clip-path: polygon(40% 0, 100% 0, 100% 22%, 55% 22%, 55% 78%, 50% 90%, 38% 100%, 18% 100%, 5% 90%, 5% 75%, 18% 65%, 40% 65%); }
.snd .spk { clip-path: polygon(0 32%, 28% 32%, 60% 5%, 60% 95%, 28% 68%, 0 68%, 0 32%, 70% 30%, 78% 30%, 78% 70%, 70% 70%, 70% 30%, 86% 18%, 94% 18%, 94% 82%, 86% 82%, 86% 18%); }
.snd.off .ico { background: #5a6a80; }
.snd.off::after { content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 2px; background: #ff5a4a; transform: rotate(-35deg); }
/* Joystick: left/right arrows too */
#stick .arrows.lr { transform: rotate(90deg); }
.audio-btns { top: calc(2.4cqh + 24cqw); right: 13.5cqw; flex-direction: row; }

/* All owned extensions: up to 9 per row, wrapping upward into a second row */
.slots { left: 2cqw !important; right: 2cqw; transform: none !important; flex-wrap: wrap-reverse; justify-content: center; gap: 1.2cqw 1.2cqw !important; }
.slot { width: 9.4cqw !important; height: 9.4cqw !important; }
.slot .count { font-size: 2.2cqw; left: 0.6cqw; top: 0.2cqw; }
.slot .tier { width: 3.6cqw !important; height: 3.6cqw !important; font-size: 2.5cqw !important; right: -0.6cqw !important; bottom: -0.6cqw !important; }
.slots.two ~ .hint, .hint { bottom: calc(3.5cqh + 49cqw) !important; }
.slot { width: 8cqw !important; height: 8cqw !important; opacity: 0.92; }
.slot .count { font-size: 1.9cqw; }
.slots { gap: 0.9cqw !important; bottom: calc(3.5cqh + 26cqw) !important; }

/* First-launch tutorial coach */
.coach { position: absolute; left: 6cqw; right: 6cqw; top: calc(2.4cqh + 46cqw); padding: 2.2cqw 3cqw 2.6cqw; text-align: center; background: rgba(4, 14, 40, 0.86); border: 2px solid #7fd8ff; box-shadow: 0 0 0 2px #020818, 0 0 16px rgba(60, 160, 255, 0.45); pointer-events: none; }
.coach.hidden { display: none; }
.coach .step { font-size: 3cqw; letter-spacing: 0.2em; color: #7fd8ff; margin-bottom: 1cqw; }
.coach .msg { font-size: 4.6cqw; line-height: 1.4; color: #fff; text-shadow: 2px 2px 0 #020818; }
.coach .msg em { font-style: normal; color: #ffd24a; }
.coach .msg small { display: block; font-size: 3cqw; color: #bcd6f0; margin-top: 0.8cqw; }
.coach.good { border-color: #7dff9a; }
.coach.good .msg { color: #7dff9a; }
.coach.warn { border-color: #ff8070; animation: pop 0.3s ease-out; }
.coach.go .msg { color: #ffd24a; font-size: 6.4cqw; }
.coach.pop { animation: pop 0.3s ease-out; }
#game.teach-stick #stick, #game.teach-action #action { animation: teach 0.8s ease-in-out infinite; }
@keyframes teach { 50% { box-shadow: 0 0 0 1.4cqw rgba(255, 210, 74, 0.55), 0 0 26px rgba(255, 210, 74, 0.8); } }

/* Result actions remain reachable on short mobile viewports. */
#overlay { overflow-y: auto; padding-block: 16px; }
#overlay .screen { margin-block: auto; }