:root {
  --accent: #c74043;
  --accent-rgb: 199, 64, 67;
  --accent-soft: rgba(var(--accent-rgb), .18);
  --ink: #050506;
  --panel: rgba(10, 10, 12, .88);
  --line: rgba(255, 255, 255, .16);
  --text: #f2f1ef;
  --muted: #929096;
  --mx: 50vw;
  --my: 50vh;
}

body[data-theme="normal"] { --accent: #d14a45; --accent-rgb: 209, 74, 69; }
body[data-theme="hard"] { --accent: #a75af4; --accent-rgb: 167, 90, 244; }
body[data-theme="impossible"] { --accent: #b68cff; --accent-rgb: 182, 140, 255; }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--ink); color: var(--text); }
body {
  min-height: 100vh;
  overflow: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(var(--accent-rgb), .10), transparent 30rem),
    #050506;
}
button { font: inherit; }
button, canvas { -webkit-tap-highlight-color: transparent; }

.noise, .vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 100;
}
.noise {
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.vignette { box-shadow: inset 0 0 14vw 4vw #000; z-index: 99; }

#app, .screen { width: 100%; height: 100vh; }
.screen { position: absolute; inset: 0; display: none; }
.screen.is-active { display: flex; }

.menu-screen {
  overflow: auto;
  flex-direction: column;
  padding: clamp(20px, 3vw, 48px) clamp(18px, 4vw, 72px) 18px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 60px 60px,
    radial-gradient(circle at 50% -20%, rgba(var(--accent-rgb), .16), transparent 45%),
    #050506;
}
.brand { flex: 0 0 auto; text-align: center; margin-bottom: clamp(18px, 2.5vw, 34px); }
.eyebrow, .mini-label, .hud-kicker {
  margin: 0;
  letter-spacing: .28em;
  font-size: 10px;
  color: var(--muted);
  font-weight: 800;
}
.brand h1 {
  margin: 4px 0 2px;
  font-size: clamp(38px, 5.3vw, 82px);
  line-height: .95;
  font-weight: 950;
  letter-spacing: -.055em;
}
.brand h1 span { color: var(--accent); text-shadow: 0 0 24px var(--accent-soft); }
.tagline { margin: 10px 0 0; color: #a8a5aa; font-size: 13px; letter-spacing: .08em; }

.menu-layout {
  width: min(1540px, 100%);
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
  gap: clamp(18px, 2.4vw, 38px);
  align-items: center;
  flex: 1 1 auto;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.1vw, 18px);
  align-items: center;
  perspective: 1500px;
}
.difficulty-card {
  position: relative;
  border: 1px solid rgba(255,255,255,.12);
  padding: 0;
  background: #080809;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  cursor: pointer;
  opacity: .55;
  transform: translateY(14px) scale(.96);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s, border-color .25s, filter .25s;
  filter: grayscale(.45) brightness(.72);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.difficulty-card img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.difficulty-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.13) 47%, transparent 60%);
  transform: translateX(-120%); transition: transform .6s;
}
.difficulty-card:hover { opacity: .88; transform: translateY(0) scale(.985); filter: grayscale(.15) brightness(.92); }
.difficulty-card:hover::after { transform: translateX(120%); }
.difficulty-card.is-selected {
  opacity: 1;
  transform: translateY(-9px) scale(1.035);
  filter: none;
  border-color: rgba(var(--accent-rgb), .8);
  z-index: 3;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .24), 0 18px 55px rgba(0,0,0,.7), 0 0 32px rgba(var(--accent-rgb), .17);
}
.card-glow { position: absolute; inset: auto 10% 0; height: 5px; background: var(--accent); filter: blur(6px); opacity: 0; }
.difficulty-card.is-selected .card-glow { opacity: 1; }

.selection-panel {
  position: relative;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.5vw, 34px);
  background: linear-gradient(145deg, rgba(20,20,23,.94), rgba(5,5,6,.9));
  border: 1px solid var(--line);
  box-shadow: 0 24px 80px rgba(0,0,0,.46);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}
.selection-panel::before { content:""; position:absolute; inset:0; border-left:2px solid var(--accent); opacity:.7; pointer-events:none; }
.selection-heading { display: flex; align-items: center; gap: 18px; }
.selection-index { font: 900 clamp(48px, 5vw, 72px)/1 ui-monospace, monospace; color: rgba(var(--accent-rgb), .5); }
.selection-heading h2 { margin: 4px 0 0; font-size: 34px; letter-spacing: .06em; }
.selection-description { min-height: 76px; margin: 22px 0 16px; color: #bdbac0; line-height: 1.62; font-size: 14px; }
.mode-stats { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.mode-stats div { padding: 12px 13px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mode-stats dt { font-size: 9px; letter-spacing: .2em; color: var(--muted); font-weight: 800; }
.mode-stats dd { margin: 4px 0 0; color: var(--text); font: 800 13px/1.2 ui-monospace, monospace; }
.music-map { margin-top: 22px; }
.music-map > div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.08); padding: 8px 0; font-size: 11px; }
.music-map > div span { color: var(--accent); font-weight: 900; letter-spacing: .18em; }
.music-map > div strong { color: #b8b5bb; font-weight: 700; }
.music-credits {
  margin-top: 13px;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.2);
  font-size: 10px;
  line-height: 1.55;
  color: #858188;
}
.music-credits p { margin: 0; }
.music-credits p + p { margin-top: 4px; }
.music-credits .mini-label { margin-bottom: 6px; color: #aaa6ad; }
.music-credits a {
  color: var(--accent);
  font-weight: 900;
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--accent-rgb),.45);
}
.music-credits a:hover,
.music-credits a:focus-visible {
  color: #fff;
  border-bottom-color: #fff;
  outline: none;
}
.menu-actions { margin-top: auto; padding-top: 22px; display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.primary-button, .secondary-button, .icon-button {
  border: 1px solid var(--line); color: var(--text); background: rgba(255,255,255,.035); cursor: pointer;
  min-height: 48px; transition: .2s ease;
}
.primary-button { display: flex; justify-content: space-between; align-items: center; padding: 0 18px; background: var(--accent); border-color: var(--accent); color: #080809; font-weight: 950; letter-spacing: .1em; }
.primary-button:hover { filter: brightness(1.16); transform: translateY(-1px); box-shadow: 0 8px 26px rgba(var(--accent-rgb), .24); }
.primary-button i { font-style: normal; font-size: 20px; }
.secondary-button { padding: 0 18px; font-weight: 800; letter-spacing: .08em; }
.secondary-button:hover, .icon-button:hover { border-color: var(--accent); color: var(--accent); }
.icon-button { padding: 0 14px; display: flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .12em; font-weight: 900; }
.sound-bars { display: flex; gap: 2px; align-items: center; height: 18px; }
.sound-bars i { display:block; width:3px; height:6px; background:var(--accent); animation: sound 1s ease-in-out infinite alternate; }
.sound-bars i:nth-child(2) { height:14px; animation-delay:-.35s; }
.sound-bars i:nth-child(3) { height:10px; animation-delay:-.65s; }
.sound-bars i:nth-child(4) { height:16px; animation-delay:-.15s; }
.icon-button[aria-pressed="false"] .sound-bars i { animation: none; height: 3px; opacity: .45; }
@keyframes sound { to { transform: scaleY(.35); } }
.audio-notice { margin: 10px 0 0; min-height: 16px; color: #77747a; font-size: 10px; line-height: 1.4; }
.menu-footer { display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(12px,2vw,30px); padding-top:18px; color:#6f6c72; font:800 9px/1 ui-monospace,monospace; letter-spacing:.13em; }

.game-screen { background: #030304; overflow: hidden; }
#gameCanvas { position:absolute; inset:0; width:100%; height:100%; cursor: crosshair; image-rendering: pixelated; image-rendering: crisp-edges; }
.game-hud, .health-panel, .combo-panel, .boss-panel, .controls-hint { position:absolute; z-index:10; pointer-events:none; }
.top-hud { top: 18px; left: 50%; transform: translateX(-50%); width: min(680px, calc(100% - 32px)); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:10px 18px; background:rgba(5,5,6,.68); border:1px solid var(--line); backdrop-filter:blur(8px); }
.hud-block strong, .timer-wrap strong { display:block; margin-top:3px; font:900 18px/1 ui-monospace,monospace; letter-spacing:.08em; }
.timer-wrap { text-align:center; min-width:150px; border-left:1px solid var(--line); border-right:1px solid var(--line); padding:0 24px; }
.score-hud { text-align:right; }
.health-panel { left:22px; bottom:22px; width:min(380px,calc(100% - 44px)); padding:14px; background:rgba(5,5,6,.78); border:1px solid var(--line); backdrop-filter:blur(8px); }
.health-label { display:flex; justify-content:space-between; font:800 10px/1 ui-monospace,monospace; letter-spacing:.12em; }
.health-label strong { color:var(--accent); }
.bar { height:8px; margin-top:9px; background:rgba(255,255,255,.08); overflow:hidden; }
.bar i { display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--accent),#f0eeee); transform-origin:left; box-shadow:0 0 16px rgba(var(--accent-rgb),.55); }
.ability-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
.ability-row > div { display:grid; grid-template-columns:auto 1fr; gap:7px; align-items:center; color:#858289; font:800 8px/1 ui-monospace,monospace; }
.cooldown-bar { display:block; height:3px; background:rgba(255,255,255,.1); }
.cooldown-bar b { display:block; height:100%; width:100%; background:var(--accent); transform-origin:left; }
.combo-panel { right:24px; bottom:24px; text-align:right; opacity:.28; transition:.2s; }
.combo-panel.is-hot { opacity:1; text-shadow:0 0 22px rgba(var(--accent-rgb),.7); }
.combo-panel span { display:block; font-size:9px; letter-spacing:.3em; }
.combo-panel strong { display:block; font:950 clamp(34px,5vw,72px)/.9 ui-monospace,monospace; color:var(--accent); }
.controls-hint { right:20px; top:92px; color:#6e6b71; font:700 8px/1.8 ui-monospace,monospace; letter-spacing:.08em; }
.controls-hint span { color:#b8b5bb; margin-left:10px; }
.controls-hint span:first-child { margin-left:0; }
.boss-panel { top:91px; left:50%; transform:translateX(-50%); width:min(540px,calc(100% - 38px)); padding:10px 14px; background:rgba(5,5,6,.82); border:1px solid rgba(var(--accent-rgb),.5); }
.boss-panel > div:first-child { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; font:800 9px/1.25 ui-monospace,monospace; letter-spacing:.12em; color:var(--accent); }
.boss-panel #bossName { max-width:78%; text-align:right; white-space:normal; }
.boss-bar { margin-top:8px; height:5px; }
.phase-banner { position:absolute; z-index:20; left:50%; top:50%; transform:translate(-50%,-50%) scale(.85); text-align:center; opacity:0; pointer-events:none; }
.phase-banner small { display:block; color:var(--accent); letter-spacing:.5em; font-weight:900; }
.phase-banner strong { display:block; margin-top:6px; font-size:clamp(42px,8vw,112px); line-height:.9; letter-spacing:-.06em; text-shadow:0 0 34px rgba(var(--accent-rgb),.55); }
.phase-banner.show { animation: phase 2.1s ease both; }
@keyframes phase { 0%{opacity:0;transform:translate(-50%,-50%) scale(.72);filter:blur(8px)} 18%,72%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:none} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.08)} }
.overlay { position:absolute; z-index:50; inset:0; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.68); backdrop-filter:blur(10px); }
.overlay-card { width:min(520px,100%); padding:34px; background:linear-gradient(145deg,rgba(23,23,27,.98),rgba(5,5,6,.98)); border:1px solid var(--line); box-shadow:0 26px 100px #000; }
.overlay-card h2 { margin:8px 0 10px; font-size:clamp(38px,8vw,72px); letter-spacing:-.05em; }
.overlay-card p { color:#aaa7ad; line-height:1.6; }
.overlay-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:24px; }
.result-stats { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); margin:22px 0; }
.result-stats div { padding:14px 8px; text-align:center; border-right:1px solid var(--line); }
.result-stats div:last-child { border:0; }
.result-stats span { display:block; color:var(--muted); font-size:8px; letter-spacing:.2em; }
.result-stats strong { display:block; margin-top:7px; color:var(--accent); font:900 20px/1 ui-monospace,monospace; }

@media (max-width: 1050px) {
  body { overflow:auto; }
  .menu-screen { height:auto; min-height:100vh; overflow:visible; }
  .menu-layout { grid-template-columns:1fr; }
  .card-grid { max-width:900px; margin:auto; }
  .selection-panel { min-height:0; width:min(760px,100%); margin:auto; }
}
@media (max-width: 650px) {
  .menu-screen { padding:18px 12px 14px; }
  .card-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .difficulty-card.is-selected { transform:translateY(-3px) scale(1.015); }
  .selection-panel { padding:20px 17px; }
  .menu-footer { display:none; }
  .top-hud { top:8px; padding:8px 10px; }
  .hud-block strong,.timer-wrap strong { font-size:14px; }
  .timer-wrap { min-width:100px; padding:0 10px; }
  .health-panel { left:10px; bottom:10px; width:calc(100% - 20px); }
  .combo-panel { right:14px; bottom:106px; }
  .controls-hint { display:none; }
  .boss-panel { top:70px; }
}

/* Explicitly preserve the semantic hidden state even when overlay styles set display:grid. */
[hidden], .overlay[hidden], .boss-panel[hidden] { display: none !important; }

/* -------------------------------------------------------------------------
   v1.1 — Arcade Juice: profile, leaderboard, CRT and HUD feedback
   ------------------------------------------------------------------------- */
.crt-overlay {
  position: fixed;
  inset: 0;
  z-index: 104;
  pointer-events: none;
  opacity: .72;
  background:
    linear-gradient(rgba(18,16,20,0) 50%, rgba(0,0,0,.16) 50%) 0 0 / 100% 4px,
    linear-gradient(90deg, rgba(255,40,70,.018), rgba(80,255,170,.012), rgba(90,120,255,.018));
  box-shadow: inset 0 0 9vw 2vw rgba(0,0,0,.58);
  mix-blend-mode: screen;
}
.crt-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.018), transparent);
  animation: crt-roll 8s linear infinite;
}
.crt-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .15;
  background: radial-gradient(ellipse at center, transparent 56%, rgba(0,0,0,.72) 100%);
  animation: crt-flicker .18s steps(2,end) infinite;
}
body.crt-off .crt-overlay { display: none; }
@keyframes crt-roll { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
@keyframes crt-flicker { 0%,100% { opacity:.13; } 50% { opacity:.18; } }

.player-profile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  padding: 11px 12px;
  border: 1px solid rgba(var(--accent-rgb),.28);
  background: rgba(var(--accent-rgb),.055);
}
.player-profile strong {
  display: block;
  margin-top: 4px;
  color: var(--accent);
  font: 900 16px/1 ui-monospace,monospace;
  letter-spacing: .08em;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.text-button {
  border: 0;
  padding: 7px 0;
  color: #8d8990;
  background: transparent;
  cursor: pointer;
  font: 900 8px/1 ui-monospace,monospace;
  letter-spacing: .16em;
}
.text-button:hover { color: var(--accent); }

.leaderboard-panel {
  margin-top: 18px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(0,0,0,.2);
}
.leaderboard-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 11px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.leaderboard-heading small { color: var(--accent); font: 900 8px/1 ui-monospace,monospace; letter-spacing: .16em; }
#leaderboardList { list-style: none; padding: 0; margin: 0; }
#leaderboardList li {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-bottom: 1px solid rgba(255,255,255,.055);
  font: 800 9px/1 ui-monospace,monospace;
}
#leaderboardList li:last-child { border-bottom: 0; }
#leaderboardList li > span { color: #5f5c64; }
#leaderboardList li > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #bbb8be; }
#leaderboardList li > b { color: var(--accent); font-weight: 950; }
#leaderboardList li.is-current-player { background: rgba(var(--accent-rgb),.09); box-shadow: inset 2px 0 var(--accent); }
#leaderboardList li.is-current-player strong { color: #fff; }
#leaderboardList .leaderboard-empty { display:block; padding:11px; color:#68656b; text-align:center; }

.best-score-badge {
  position: absolute;
  z-index: 5;
  left: 7px;
  bottom: 7px;
  padding: 5px 6px;
  color: rgba(255,255,255,.76);
  background: rgba(0,0,0,.68);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(5px);
  font: 900 7px/1 ui-monospace,monospace;
  letter-spacing: .08em;
  pointer-events: none;
}
.difficulty-card.is-selected .best-score-badge { color: var(--accent); border-color: rgba(var(--accent-rgb),.5); }

.menu-actions { grid-template-columns: 1fr; }
.settings-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.settings-row .icon-button { justify-content: center; min-width: 0; padding: 0 8px; }
.sfx-icon, .crt-icon { color: var(--accent); font-size: 15px; line-height: 1; }
.icon-button[aria-pressed="false"] .sfx-icon,
.icon-button[aria-pressed="false"] .crt-icon { color: #5d5961; opacity:.55; }

.hud-player-name {
  display: block;
  margin-top: 4px;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--accent);
  font: 800 8px/1 ui-monospace,monospace;
  letter-spacing: .12em;
}
.combo-panel.combo-pulse { animation: combo-pulse .24s cubic-bezier(.18,.8,.25,1.45); }
.combo-panel.combo-drop { animation: combo-drop .3s ease; }
.score-pulse { animation: score-pulse .28s ease; }
@keyframes combo-pulse {
  0% { transform: scale(.82) rotate(-2deg); filter:brightness(2); }
  65% { transform: scale(1.22) rotate(1deg); }
  100% { transform: scale(1); }
}
@keyframes combo-drop {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-7px); color:#fff; }
  70% { transform: translateX(4px); opacity:.5; }
}
@keyframes score-pulse {
  0% { transform:scale(1); }
  45% { transform:scale(1.18); color:#fff; text-shadow:0 0 18px var(--accent); }
  100% { transform:scale(1); }
}

.result-player {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.1);
  font: 900 9px/1 ui-monospace,monospace;
  letter-spacing: .16em;
}
.result-player span { color: var(--muted); }
.result-player strong { color: var(--accent); overflow:hidden; text-overflow:ellipsis; }
.result-record {
  min-height: 22px;
  margin: 0 0 6px !important;
  color: #aaa7ad;
  font: 850 11px/1.5 ui-monospace,monospace;
  letter-spacing: .06em;
}
.result-record.is-record { color: #fff2a8 !important; text-shadow: 0 0 16px rgba(255,226,138,.45); }

.nickname-overlay {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 30%, rgba(var(--accent-rgb),.20), transparent 36rem),
    rgba(2,2,3,.94);
  backdrop-filter: blur(16px);
}
.nickname-card {
  width: min(580px,100%);
  padding: clamp(26px,5vw,54px);
  background: linear-gradient(145deg,rgba(23,23,27,.98),rgba(5,5,6,.99));
  border: 1px solid rgba(var(--accent-rgb),.55);
  box-shadow: 0 30px 130px #000, 0 0 70px rgba(var(--accent-rgb),.11);
  clip-path: polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px));
}
.nickname-card h2 { margin: 8px 0 12px; font-size: clamp(34px,7vw,68px); line-height:.92; letter-spacing:-.055em; }
.nickname-card > p:not(.mini-label):not(.nickname-error) { color:#a4a1a7; line-height:1.55; }
.nickname-card label { display:block; margin-top:28px; color:var(--accent); font:900 9px/1 ui-monospace,monospace; letter-spacing:.22em; }
.nickname-input-wrap { display:grid; grid-template-columns:1fr auto; align-items:center; margin-top:8px; border:1px solid var(--line); background:#050506; }
.nickname-input-wrap input {
  width:100%; min-width:0; border:0; outline:0; padding:16px 14px; color:#fff; background:transparent;
  font:900 clamp(18px,4vw,28px)/1 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase;
}
.nickname-input-wrap:focus-within { border-color:var(--accent); box-shadow:0 0 0 1px rgba(var(--accent-rgb),.24),0 0 24px rgba(var(--accent-rgb),.1); }
.nickname-input-wrap > span { padding:0 13px; color:#68656d; font:800 10px/1 ui-monospace,monospace; }
.nickname-error { min-height:20px; margin:7px 0 0 !important; color:#ff6976 !important; font-size:11px; }
.nickname-submit { width:100%; margin-top:16px; border:0; }

@media (prefers-reduced-motion: reduce) {
  .crt-overlay::before, .crt-overlay::after, .combo-panel.combo-pulse, .combo-panel.combo-drop, .score-pulse { animation: none !important; }
}

@media (max-width: 650px) {
  .settings-row { grid-template-columns:1fr; }
  .settings-row .icon-button { min-height:40px; }
  .leaderboard-panel { margin-top:14px; }
  .nickname-card { padding:26px 20px; }
}

.wave-panel {
  position: absolute;
  top: 94px;
  left: 50%;
  z-index: 21;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 160px;
  padding: 8px 16px;
  color: #fff;
  background: linear-gradient(180deg,rgba(7,7,9,.88),rgba(7,7,9,.56));
  border: 1px solid rgba(var(--accent-rgb),.38);
  box-shadow: 0 0 28px rgba(var(--accent-rgb),.08);
  pointer-events: none;
}
.wave-panel span { color: var(--accent); font: 900 9px/1 ui-monospace,monospace; letter-spacing:.2em; }
.wave-panel strong { font: 900 11px/1 ui-monospace,monospace; letter-spacing:.12em; }
.wave-panel.is-boss { border-color: rgba(255,255,255,.5); animation: wave-warning .65s ease infinite alternate; }
@keyframes wave-warning { to { box-shadow:0 0 34px rgba(var(--accent-rgb),.34); transform:translateX(-50%) scale(1.025); } }

.upgrade-overlay { z-index: 90; background: rgba(2,2,3,.88); backdrop-filter: blur(12px); }
.upgrade-card-shell {
  width: min(1280px,calc(100vw - 32px));
  padding: clamp(24px,4vw,46px);
  border: 1px solid rgba(var(--accent-rgb),.55);
  background: radial-gradient(circle at 50% 0,rgba(var(--accent-rgb),.16),transparent 38%),linear-gradient(145deg,#17171c,#050506 70%);
  box-shadow: 0 28px 120px #000,0 0 90px rgba(var(--accent-rgb),.12);
}
.upgrade-card-shell h2 { margin:7px 0 8px; font-size:clamp(34px,6vw,72px); line-height:.9; letter-spacing:-.05em; }
.upgrade-subtitle { margin:0 0 24px; color:#aaa7ad; }
.upgrade-choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; }
.upgrade-choice {
  min-height: 230px;
  padding: 22px;
  color:#fff;
  text-align:left;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(0,0,0,.3));
  border:1px solid rgba(255,255,255,.12);
  cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.upgrade-choice:hover,.upgrade-choice:focus-visible { transform:translateY(-6px); border-color:var(--accent); box-shadow:0 20px 50px rgba(0,0,0,.46),0 0 28px rgba(var(--accent-rgb),.15); background:linear-gradient(180deg,rgba(var(--accent-rgb),.12),rgba(0,0,0,.38)); outline:none; }
.upgrade-choice .upgrade-icon { display:block; color:var(--accent); font:900 38px/1 ui-monospace,monospace; text-shadow:0 0 18px rgba(var(--accent-rgb),.4); }
.upgrade-choice small { display:block; margin-top:18px; color:#77737b; font:900 8px/1 ui-monospace,monospace; letter-spacing:.18em; }
.upgrade-choice strong { display:block; margin-top:7px; font-size:clamp(20px,2.3vw,34px); line-height:.95; }
.upgrade-choice p { margin:14px 0 0; color:#b8b5bc; line-height:1.5; }
.upgrade-choice b { display:block; margin-top:16px; color:var(--accent); font:900 9px/1 ui-monospace,monospace; letter-spacing:.14em; }
#upgradeWaveInfo { display:block; margin-top:20px; color:#77737b; font:900 9px/1 ui-monospace,monospace; letter-spacing:.18em; }

.tutorial-overlay {
  position:absolute;
  left:50%;
  bottom:78px;
  z-index:70;
  transform:translateX(-50%);
  width:min(560px,calc(100vw - 28px));
  pointer-events:none;
}
.tutorial-card {
  padding:20px 22px;
  background:linear-gradient(135deg,rgba(8,8,10,.94),rgba(20,14,25,.9));
  border:1px solid rgba(var(--accent-rgb),.62);
  box-shadow:0 18px 55px rgba(0,0,0,.7),0 0 36px rgba(var(--accent-rgb),.13);
}
.tutorial-card h2 { margin:5px 0 8px; font-size:clamp(24px,4vw,44px); line-height:.95; }
.tutorial-card p:last-child { margin:0; color:#c3c0c7; line-height:1.45; }
.tutorial-progress { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; color:var(--accent); font:900 9px/1 ui-monospace,monospace; letter-spacing:.16em; }
.tutorial-progress button { pointer-events:auto; border:0; padding:6px 9px; color:#aaa7ad; background:rgba(255,255,255,.06); font:900 8px/1 ui-monospace,monospace; letter-spacing:.14em; cursor:pointer; }
.tutorial-progress button:hover { color:#fff; background:rgba(var(--accent-rgb),.18); }

.enemy-telegraphing { filter: brightness(1.8); }

@media (max-width: 760px) {
  .upgrade-choices { grid-template-columns:1fr; max-height:60vh; overflow:auto; }
  .upgrade-choice { min-height:150px; }
  .wave-panel { top:86px; min-width:132px; padding:7px 10px; }
  .tutorial-overlay { bottom:60px; }
}

/* v1.3 — online leaderboard status */
#leaderboardStatus[data-status="online"] { color:#78e8a0; text-shadow:0 0 12px rgba(120,232,160,.45); }
#leaderboardStatus[data-status="connecting"] { color:#f0c96e; animation: leaderboard-connecting .85s ease-in-out infinite alternate; }
#leaderboardStatus[data-status="offline"] { color:#827d87; }
@keyframes leaderboard-connecting { from { opacity:.45; } to { opacity:1; } }


/* v1.5 elite/miniboss/synergy UI */
.synergy-panel {
  position:absolute; left:24px; bottom:94px; z-index:10; pointer-events:none;
  max-width:min(460px,48vw); padding:9px 12px; border:1px solid rgba(255,255,255,.1);
  background:rgba(5,4,8,.62); backdrop-filter:blur(6px); opacity:.48; transition:.2s;
}
.synergy-panel.is-active { opacity:1; border-color:rgba(var(--accent-rgb),.45); box-shadow:0 0 22px rgba(var(--accent-rgb),.12); }
.synergy-panel span { display:block; color:#77737b; font:900 8px/1 ui-monospace,monospace; letter-spacing:.2em; }
.synergy-panel strong { display:block; margin-top:6px; color:var(--accent); font:900 10px/1.35 ui-monospace,monospace; letter-spacing:.1em; }
.synergy-preview { display:block; margin-top:12px; color:#fff2a8; font:900 8px/1.3 ui-monospace,monospace; letter-spacing:.13em; font-style:normal; text-shadow:0 0 12px rgba(255,242,168,.3); }
@media (max-width:760px) { .synergy-panel { left:12px; bottom:150px; max-width:65vw; } }

/* v1.6 — relics, events, codex, build identity */
.profile-actions { display:flex; gap:10px; align-items:center; }
.relic-panel {
  position:absolute; right:24px; bottom:94px; z-index:10; pointer-events:none;
  max-width:min(360px,42vw); padding:9px 12px; border:1px solid rgba(255,255,255,.1);
  background:rgba(5,4,8,.62); backdrop-filter:blur(6px); opacity:.5; transition:.2s;
}
.relic-panel.is-active { opacity:1; border-color:rgba(255,255,255,.28); box-shadow:0 0 22px rgba(var(--accent-rgb),.12); }
.relic-panel span { display:block; color:#77737b; font:900 8px/1 ui-monospace,monospace; letter-spacing:.2em; }
.relic-panel strong { display:block; margin-top:6px; color:#fff; font:900 15px/1.2 ui-monospace,monospace; letter-spacing:.16em; }

.event-overlay,.relic-overlay { z-index:94; background:rgba(2,2,3,.9); backdrop-filter:blur(14px); }
.event-card-shell,.relic-card-shell {
  width:min(1280px,calc(100vw - 32px)); padding:clamp(24px,4vw,46px);
  border:1px solid rgba(var(--accent-rgb),.55);
  background:radial-gradient(circle at 50% 0,rgba(var(--accent-rgb),.18),transparent 42%),linear-gradient(145deg,#17171c,#050506 72%);
  box-shadow:0 28px 120px #000,0 0 90px rgba(var(--accent-rgb),.12);
}
.event-card-shell h2,.relic-card-shell h2 { margin:7px 0 8px; font-size:clamp(34px,6vw,72px); line-height:.9; letter-spacing:-.05em; }
.event-description { max-width:760px; color:#c3c0c7; line-height:1.6; }
.event-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:28px 0 18px; }
.event-choice {
  min-height:170px; padding:24px; color:#fff; text-align:left; cursor:pointer;
  border:1px solid rgba(255,255,255,.13); background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.34));
  transition:.16s ease;
}
.event-choice:hover,.event-choice:focus-visible { transform:translateY(-5px); border-color:var(--accent); box-shadow:0 18px 55px rgba(0,0,0,.5),0 0 28px rgba(var(--accent-rgb),.16); outline:none; }
.event-choice strong { display:block; font-size:clamp(22px,3vw,38px); line-height:1; }
.event-choice p { margin:16px 0 0; color:#b8b5bc; line-height:1.55; }

.relic-choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; }
.relic-choice {
  min-height:250px; padding:22px; color:#fff; text-align:left; cursor:pointer;
  border:1px solid rgba(255,255,255,.13); background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(0,0,0,.34));
  transition:.16s ease; position:relative; overflow:hidden;
}
.relic-choice::after { content:""; position:absolute; inset:auto -20% -45% -20%; height:65%; background:radial-gradient(circle,rgba(var(--accent-rgb),.22),transparent 70%); pointer-events:none; }
.relic-choice:hover,.relic-choice:focus-visible { transform:translateY(-6px); border-color:var(--accent); box-shadow:0 20px 55px rgba(0,0,0,.5),0 0 30px rgba(var(--accent-rgb),.16); outline:none; }
.relic-choice.rarity-rare { border-color:rgba(182,140,255,.46); }
.relic-choice.rarity-cursed { border-color:rgba(255,90,114,.5); background:linear-gradient(180deg,rgba(120,14,34,.13),rgba(0,0,0,.4)); }
.relic-icon { display:block; font:900 42px/1 ui-monospace,monospace; color:var(--accent); text-shadow:0 0 22px rgba(var(--accent-rgb),.45); }
.relic-choice small { display:block; margin-top:18px; color:#77737b; font:900 8px/1 ui-monospace,monospace; letter-spacing:.18em; }
.relic-choice strong { display:block; margin-top:7px; font-size:clamp(20px,2.3vw,34px); line-height:.95; }
.relic-choice p { margin:14px 0 0; color:#b8b5bc; line-height:1.5; }
#relicWaveInfo { display:block; margin-top:20px; color:#77737b; font:900 9px/1 ui-monospace,monospace; letter-spacing:.18em; }

.build-summary { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 0; text-align:left; }
.build-summary > div { padding:12px 14px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.025); }
.build-summary span { color:#77737b; font:900 8px/1 ui-monospace,monospace; letter-spacing:.18em; }
.build-summary p { margin:8px 0 0; color:#fff; font:800 11px/1.45 ui-monospace,monospace; }

.codex-overlay { position:fixed; inset:0; z-index:130; display:grid; place-items:center; padding:18px; background:rgba(0,0,0,.88); backdrop-filter:blur(14px); }
.codex-card { width:min(1060px,100%); max-height:90vh; overflow:auto; padding:28px; border:1px solid rgba(var(--accent-rgb),.55); background:linear-gradient(145deg,#17171c,#050506 72%); box-shadow:0 30px 130px #000; }
.codex-header { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; }
.codex-header h2 { margin:4px 0 0; font-size:clamp(38px,7vw,78px); line-height:.85; }
.codex-tabs { display:flex; gap:8px; margin:22px 0; }
.codex-tab { padding:10px 16px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.035); color:#8d8991; font:900 9px/1 ui-monospace,monospace; letter-spacing:.16em; cursor:pointer; }
.codex-tab.is-active { color:#fff; border-color:var(--accent); background:rgba(var(--accent-rgb),.14); }
.codex-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.codex-entry { min-height:170px; padding:18px; border:1px solid rgba(255,255,255,.11); background:rgba(255,255,255,.025); }
.codex-entry.is-locked { filter:saturate(0); opacity:.36; }
.codex-entry .codex-icon { display:block; color:var(--accent); font:900 30px/1 ui-monospace,monospace; }
.codex-entry small { display:block; margin-top:14px; color:#77737b; font:900 8px/1 ui-monospace,monospace; letter-spacing:.16em; }
.codex-entry strong { display:block; margin-top:6px; font-size:20px; }
.codex-entry p { color:#aaa7ad; line-height:1.45; font-size:13px; }
.codex-progress { margin:18px 0 0; color:#77737b; font:900 9px/1 ui-monospace,monospace; letter-spacing:.16em; }

@media (max-width:760px) {
  .relic-panel { right:12px; bottom:104px; max-width:34vw; }
  .event-choices,.relic-choices,.codex-grid { grid-template-columns:1fr; }
  .event-card-shell,.relic-card-shell { max-height:88vh; overflow:auto; }
  .relic-choice { min-height:170px; }
  .build-summary { grid-template-columns:1fr; }
}

/* v1.6.1 — synchronized music/SFX volume controls */
.volume-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.08);
}
.volume-control {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 9px 10px 10px;
  color: #aaa7ad;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.065);
}
.volume-control > span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font: 900 8px/1 ui-monospace,monospace;
  letter-spacing: .14em;
}
.volume-control b { color: #b9b6bc; font-weight: 900; }
.volume-value { color: var(--accent); font: inherit; }
.volume-control input[type="range"] {
  width: 100%;
  height: 18px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background: transparent;
  accent-color: var(--accent);
}
.volume-control input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb),.7), rgba(255,255,255,.13));
  border: 1px solid rgba(255,255,255,.08);
}
.volume-control input[type="range"]::-webkit-slider-thumb {
  width: 13px;
  height: 13px;
  margin-top: -5px;
  appearance: none;
  -webkit-appearance: none;
  background: #f4f1f5;
  border: 2px solid var(--accent);
  border-radius: 0;
  box-shadow: 0 0 12px rgba(var(--accent-rgb),.55);
}
.volume-control input[type="range"]::-moz-range-track {
  height: 4px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb),.7), rgba(255,255,255,.13));
  border: 1px solid rgba(255,255,255,.08);
}
.volume-control input[type="range"]::-moz-range-thumb {
  width: 11px;
  height: 11px;
  background: #f4f1f5;
  border: 2px solid var(--accent);
  border-radius: 0;
  box-shadow: 0 0 12px rgba(var(--accent-rgb),.55);
}
.volume-control input[type="range"]:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}
.pause-volume-settings {
  margin-top: 18px;
  padding: 12px;
  background: rgba(var(--accent-rgb),.035);
  border-color: rgba(var(--accent-rgb),.24);
}
.pause-volume-settings .volume-control {
  padding: 12px;
  background: rgba(0,0,0,.26);
}

@media (max-width: 650px) {
  .volume-settings { grid-template-columns: 1fr; }
}


/* v1.7 character visual upgrade */
.hud-portrait-wrap { display:flex; align-items:center; }
.hud-portrait-frame { width:84px; height:84px; border-radius:22px; overflow:hidden; border:1px solid rgba(255,255,255,.18); background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.28)); box-shadow:0 10px 32px rgba(0,0,0,.28), 0 0 18px rgba(255,255,255,.08) inset; }
.hud-portrait-frame img { width:100%; height:100%; display:block; image-rendering: pixelated; }
.overlay-portrait-shell { display:flex; justify-content:center; margin:0 auto 10px; }
.overlay-portrait { width:112px; height:112px; display:block; image-rendering: pixelated; border-radius:22px; border:1px solid rgba(255,255,255,.16); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.28)); box-shadow:0 10px 22px rgba(0,0,0,.26); }
.result-portrait-shell { margin-bottom:14px; }
.tutorial-portrait-shell { margin-bottom:8px; }
@media (max-width: 1100px) { .hud-portrait-wrap { display:none; } }

.combo-rank-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  transition: all 0.22s ease;
  box-shadow: 0 0 10px transparent;
}
.combo-rank-panel span {
  font: 900 8px/1 ui-monospace,monospace;
  color: #77737b;
  letter-spacing: 0.15em;
}
.combo-rank-panel strong {
  font: 900 16px/1 ui-monospace,monospace;
  letter-spacing: 0.12em;
  text-shadow: 0 0 8px currentColor;
  transition: all 0.15s ease;
}
.combo-rank-panel.rank-d { border-color: rgba(119,115,123,0.3); background: rgba(119,115,123,0.05); }
.combo-rank-panel.rank-d strong { color: #77737b; text-shadow: 0 0 6px rgba(119,115,123,0.4); }

.combo-rank-panel.rank-c { border-color: rgba(126,232,255,0.3); background: rgba(126,232,255,0.05); box-shadow: 0 0 8px rgba(126,232,255,0.08); }
.combo-rank-panel.rank-c strong { color: #7ee8ff; text-shadow: 0 0 10px rgba(126,232,255,0.6); }

.combo-rank-panel.rank-b { border-color: rgba(255,207,118,0.35); background: rgba(255,207,118,0.06); box-shadow: 0 0 12px rgba(255,207,118,0.12); }
.combo-rank-panel.rank-b strong { color: #ffcf76; text-shadow: 0 0 12px rgba(255,207,118,0.7); }

.combo-rank-panel.rank-a { border-color: rgba(255,90,114,0.4); background: rgba(255,90,114,0.08); box-shadow: 0 0 16px rgba(255,90,114,0.18); }
.combo-rank-panel.rank-a strong { color: #ff5a72; text-shadow: 0 0 15px rgba(255,90,114,0.8); }

.combo-rank-panel.rank-s { 
  border-color: rgba(182,140,255,0.5); 
  background: rgba(182,140,255,0.1); 
  box-shadow: 0 0 22px rgba(182,140,255,0.28); 
  animation: rank-s-glow 0.8s ease infinite alternate;
}
.combo-rank-panel.rank-s strong { 
  color: #b68cff; 
  text-shadow: 0 0 18px rgba(182,140,255,1.0); 
}

@keyframes rank-s-glow {
  to {
    box-shadow: 0 0 28px rgba(182,140,255,0.4);
    border-color: rgba(182,140,255,0.8);
  }
}