@import url('https://fonts.googleapis.com/css2?family=Bungee+Inline&family=Bungee&family=Share+Tech+Mono&family=Russo+One&display=swap');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css');

:root {
  --bg: #1a0e08;
  --panel: #201009;
  --deep: #0e0905;
  --brown: #6F5643;
  --rust: #CC6B49;
  --gold: #D2A24C;
  --cream: #ECE6C2;
  --teal: #73BDA8;
  --border: #5a3f2e;
  --gr: rgba(204,107,73,.55);
  --gg: rgba(210,162,76,.55);
  --gt: rgba(115,189,168,.55);
  --danger: #ff3c3c;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); }

body {
  font-family: 'Share Tech Mono', monospace;
  color: var(--cream);
  cursor: crosshair;
}

body::before {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.07) 2px, rgba(0,0,0,.07) 3px);
  pointer-events: none;
  z-index: 9000;
}
body::after {
  content: '';
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at 50% 40%, transparent 50%, rgba(0,0,0,.75) 100%);
  pointer-events: none;
  z-index: 8999;
}

#grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 8998;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--deep); }
::-webkit-scrollbar-thumb { background: var(--border); }

.screen {
  display: none;
  position: fixed; inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.screen.active { display: flex; }

.hex-clip { clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%); }
.hex-clip-sm { clip-path: polygon(7px 0%, 100% 0%, calc(100% - 7px) 100%, 0% 100%); }
.hex-clip-xs { clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%); }

.px-btn {
  font-family: 'Bungee', cursive;
  letter-spacing: 2px;
  background: var(--panel);
  border: 2px solid var(--border);
  color: var(--cream);
  cursor: pointer;
  transition: transform .12s, border-color .12s, color .12s, box-shadow .12s;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 22px;
  font-size: clamp(9px, 1.3vw, 12px);
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}
.px-btn i { font-size: 1.1em; }
.px-btn:hover { border-color: var(--rust); color: var(--rust); transform: translateX(3px); }
.px-btn.gold { border-color: var(--gold); color: var(--gold); animation: pulse-gold 2.2s ease-in-out infinite; }
.px-btn.teal { border-color: var(--teal); color: var(--teal); }
.px-btn.teal:hover { color: var(--teal); box-shadow: 0 0 18px var(--gt); }
.px-btn.danger { border-color: var(--danger); color: var(--danger); }
.px-btn.big { padding: 14px 32px; font-size: clamp(11px, 1.7vw, 15px); }
.px-btn.wide { width: 100%; justify-content: flex-start; }
@keyframes pulse-gold {
  0%, 100% { box-shadow: 0 0 14px var(--gg); }
  50% { box-shadow: 0 0 32px var(--gg), 0 0 55px rgba(210,162,76,.18); }
}

.screen-hdr {
  width: 100%; max-width: 960px;
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 2px solid var(--border);
  flex-shrink: 0;
}
.screen-hdr .title {
  font-family: 'Bungee Inline', cursive;
  font-size: clamp(15px, 2.4vw, 26px);
  color: var(--gold);
  text-shadow: 0 0 14px var(--gg);
  letter-spacing: 3px;
  display: flex; align-items: center; gap: 10px;
}

.rule-line {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--rust), var(--gold), var(--teal), transparent);
  box-shadow: 0 0 8px var(--gr);
}

.sec-label {
  font-size: 8px;
  color: var(--teal);
  letter-spacing: 3px;
  padding: 10px 0 5px;
  display: flex; align-items: center; gap: 6px;
  text-transform: uppercase;
}
.sec-label i { font-size: 13px; }

.chip {
  font-family: 'Bungee', cursive;
  font-size: 7px;
  padding: 5px 11px;
  border: 2px solid var(--border);
  background: transparent;
  color: var(--brown);
  cursor: pointer;
  letter-spacing: 1px;
  clip-path: polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%);
  transition: all .12s;
}
.chip:hover, .chip.on { border-color: var(--gold); color: var(--gold); }
.chip.on { box-shadow: 0 0 9px var(--gg); background: rgba(210,162,76,.09); }

#playerBadge {
  position: fixed; top: 14px; right: 20px;
  z-index: 800;
  display: flex; align-items: center; gap: 10px;
  background: rgba(10,5,2,.92);
  border: 2px solid var(--border);
  padding: 7px 14px 7px 10px;
  pointer-events: none;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}
.bdg-lv {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Russo One', sans-serif;
  font-size: 12px; color: var(--gold);
  text-shadow: 0 0 8px var(--gg);
  background: var(--deep); flex-shrink: 0;
}
.bdg-info { display: flex; flex-direction: column; gap: 2px; min-width: 110px; }
.bdg-name { font-size: 8px; color: var(--cream); letter-spacing: 1px; white-space: nowrap; }
.bdg-xp-wrap { height: 4px; background: var(--deep); border: 1px solid var(--border); }
.bdg-xp-fill { height: 100%; background: linear-gradient(90deg, var(--rust), var(--gold)); transition: width .4s; }
.bdg-xp-lbl { font-size: 7px; color: var(--brown); letter-spacing: 1px; }

#homeScreen {
  background:
    radial-gradient(ellipse 90% 65% at 50% 25%, rgba(204,107,73,.1) 0%, transparent 70%),
    var(--bg);
}
.home-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(111,86,67,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,86,67,.13) 1px, transparent 1px);
  background-size: 46px 46px;
  animation: grid-drift 22s linear infinite;
}
@keyframes grid-drift { from { background-position: 0 0; } to { background-position: 0 46px; } }

.deco {
  position: absolute; top: 0; bottom: 0; width: 52px;
  display: flex; flex-direction: column; justify-content: space-evenly; align-items: center;
  opacity: .28;
}
.deco.l { left: 0; } .deco.r { right: 0; }
.deco-bar {
  width: 3px;
  background: linear-gradient(180deg, var(--rust), var(--gold));
  animation: bar-beat 1.6s ease-in-out infinite alternate;
}
.deco-bar:nth-child(even) { animation-delay: .4s; }
@keyframes bar-beat { from { opacity: .25; height: 16px; } to { opacity: 1; height: 54px; } }

.deco-hex {
  position: absolute;
  opacity: .06;
  animation: hex-float 8s ease-in-out infinite alternate;
}
@keyframes hex-float {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(-20px) rotate(15deg); }
}

.logo-block { text-align: center; margin-bottom: 28px; }
.logo-main {
  font-family: 'Bungee Inline', cursive;
  font-size: clamp(32px, 7vw, 80px);
  color: var(--rust);
  text-shadow: 5px 5px 0 var(--brown), 0 0 40px var(--gr), 0 0 80px rgba(204,107,73,.2);
  letter-spacing: 6px;
  animation: logo-flicker 5s infinite;
}
@keyframes logo-flicker {
  0%, 88%, 92%, 100% { opacity: 1; }
  89% { opacity: .6; }
  91% { opacity: .4; }
}
.logo-sub {
  font-family: 'Russo One', sans-serif;
  font-size: clamp(8px, 1.6vw, 15px);
  color: var(--teal);
  letter-spacing: 13px;
  text-shadow: 0 0 14px var(--gt);
  margin-top: -2px;
}
.logo-rule {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--rust), var(--gold), var(--teal), transparent);
  margin: 12px auto 0;
  width: 76%;
  box-shadow: 0 0 12px var(--gr);
}

.home-nav { display: flex; flex-direction: column; gap: 11px; align-items: center; width: min(355px, 84vw); }
.home-nav .px-btn { font-size: clamp(10px, 1.5vw, 13px); padding: 13px 24px; }

.ver-tag { position: absolute; bottom: 18px; right: 22px; font-size: 8px; color: var(--brown); letter-spacing: 2px; }

.heat-strip {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--rust), var(--gold), var(--teal), var(--rust));
  background-size: 200% 100%;
  animation: heat-slide 3s linear infinite;
  opacity: .5;
}
@keyframes heat-slide { from { background-position: 0 0; } to { background-position: 200% 0; } }

#levelsScreen { background: var(--bg); padding: 18px; overflow: hidden; }
.levels-wrap { width: 100%; max-width: 960px; height: calc(100vh - 130px); display: flex; flex-direction: column; }
.levels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
  gap: 10px;
  overflow-y: auto;
  padding: 2px 2px 8px;
  flex: 1;
}

.lv-card {
  background: var(--panel);
  border: 2px solid var(--border);
  padding: 14px 12px;
  cursor: pointer;
  position: relative; overflow: hidden;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
  transition: all .13s;
  display: flex; flex-direction: column; gap: 4px;
}
.lv-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--rust); opacity: 0; transition: opacity .13s;
}
.lv-card:hover { border-color: var(--rust); transform: translateY(-2px); }
.lv-card:hover::before { opacity: 1; }
.lv-card.done { border-color: rgba(115,189,168,.5); }
.lv-card.done::before { opacity: 1; background: var(--teal); }
.lv-card.locked { opacity: .38; cursor: not-allowed; filter: grayscale(.7); }
.lv-card.locked:hover { transform: none; border-color: var(--border); }
.lv-card.locked:hover::before { opacity: 0; }

.lv-num { font-family: 'Russo One', sans-serif; font-size: 10px; color: var(--brown); letter-spacing: 2px; }
.lv-name { font-family: 'Bungee', cursive; font-size: clamp(9px, 1.3vw, 12px); color: var(--cream); letter-spacing: 1px; line-height: 1.3; }
.lv-meta { font-size: 7px; color: var(--brown); letter-spacing: 1px; margin-top: 2px; }
.lv-stars { display: flex; gap: 3px; margin-top: 3px; }
.lv-stars i { font-size: 11px; }
.lv-diff-tag {
  position: absolute; top: 9px; right: 9px;
  font-size: 7px; padding: 2px 7px;
  border: 1px solid;
  clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
}
.lv-req { font-size: 7px; color: var(--brown); margin-top: 3px; display: flex; align-items: center; gap: 4px; }
.lv-lock-ico { position: absolute; bottom: 9px; right: 10px; font-size: 17px; color: var(--brown); opacity: .45; }

.lv-type-icons { display: flex; gap: 4px; margin-top: 3px; }
.note-type-pip {
  width: 10px; height: 10px;
  border: 1px solid currentColor;
  display: inline-block;
  opacity: .7;
}
.pip-tap { border-radius: 0; transform: rotate(45deg); }
.pip-hold { border-radius: 2px; width: 18px; height: 7px; }
.pip-slide { border-radius: 50%; width: 14px; height: 7px; }
.pip-arc { border-radius: 50%; width: 10px; height: 10px; border-bottom-color: transparent; transform: rotate(-45deg); }

.levels-foot {
  display: flex; align-items: center; gap: 14px;
  padding-top: 12px; border-top: 2px solid var(--border); margin-top: 4px; flex-shrink: 0;
}
.prog-wrap { flex: 1; }
.prog-lbl { font-size: 7px; color: var(--brown); letter-spacing: 2px; margin-bottom: 4px; display: flex; align-items: center; gap: 5px; }
.prog-track { height: 8px; background: var(--deep); border: 1px solid var(--border); }
.prog-fill { height: 100%; background: linear-gradient(90deg, var(--rust), var(--gold)); transition: width .5s; }
.prog-pct { font-size: 9px; color: var(--gold); letter-spacing: 1px; margin-top: 3px; }

#musicScreen { background: var(--bg); padding: 18px; overflow: hidden; }
.music-layout {
  width: 100%; max-width: 960px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 16px;
  height: calc(100vh - 138px);
}
.track-list { display: flex; flex-direction: column; gap: 7px; overflow-y: auto; padding-right: 5px; }

.track-card {
  background: var(--panel); border: 2px solid var(--border);
  padding: 11px 13px; cursor: pointer;
  display: flex; align-items: center; gap: 11px;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
  transition: all .13s; position: relative; overflow: hidden;
}
.track-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--rust); opacity: 0; transition: opacity .13s;
}
.track-card:hover { border-color: var(--rust); transform: translateX(3px); }
.track-card:hover::before { opacity: 1; }
.track-card.sel { border-color: var(--gold); background: rgba(210,162,76,.07); }
.track-card.sel::before { opacity: 1; background: var(--gold); }

.track-icon-box {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid; flex-shrink: 0;
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
}
.track-icon-box i { font-size: 16px; }
.track-info { flex: 1; min-width: 0; }
.track-name { font-family: 'Bungee', cursive; font-size: clamp(8px, 1.2vw, 11px); color: var(--cream); letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-artist { font-size: 8px; color: var(--brown); margin-top: 2px; letter-spacing: 1px; }
.track-meta { text-align: right; flex-shrink: 0; }
.track-bpm { font-size: 8px; color: var(--teal); text-shadow: 0 0 7px var(--gt); }
.track-dbadge { font-size: 7px; padding: 2px 6px; border: 1px solid; clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%); margin-top: 3px; display: inline-block; }

.music-right { display: flex; flex-direction: column; gap: 10px; }
.np-box { background: var(--panel); border: 2px solid var(--border); padding: 14px; flex: 1; overflow: hidden; }
.np-lbl { font-size: 7px; color: var(--brown); letter-spacing: 3px; margin-bottom: 9px; display: flex; align-items: center; gap: 5px; }
.np-art {
  width: 100%; aspect-ratio: 1; max-height: 140px;
  display: flex; align-items: center; justify-content: center;
  background: var(--deep); border: 2px solid var(--border); margin-bottom: 10px;
  position: relative; overflow: hidden;
}
.np-ring { position: absolute; border-radius: 50%; border: 1px solid; animation: np-expand 2.2s ease-out infinite; opacity: 0; }
@keyframes np-expand { 0% { transform: scale(.15); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
.np-icon { position: relative; z-index: 2; font-size: 40px; color: var(--rust); }
.np-icon i { font-size: 40px; }
.np-title { font-family: 'Bungee', cursive; font-size: 11px; color: var(--gold); letter-spacing: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-artist { font-size: 8px; color: var(--brown); margin-top: 3px; letter-spacing: 1px; }

.diff-sec { margin-top: 9px; }
.diff-sec-lbl { font-size: 7px; color: var(--brown); letter-spacing: 2px; margin-bottom: 7px; display: flex; align-items: center; gap: 5px; }
.diff-row { display: flex; gap: 6px; flex-wrap: wrap; }

.upload-zone {
  border: 2px dashed var(--border); padding: 14px 11px;
  text-align: center; cursor: pointer; transition: all .13s; background: var(--deep);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.upload-zone:hover { border-color: var(--teal); box-shadow: 0 0 12px var(--gt); }
.upload-zone i { font-size: 22px; color: var(--teal); }
.upload-txt { font-size: 8px; color: var(--brown); letter-spacing: 2px; line-height: 1.9; }
#fileInput { display: none; }

.launch-btn {
  font-family: 'Bungee', cursive;
  font-size: clamp(11px, 1.6vw, 14px);
  letter-spacing: 4px;
  padding: 14px;
  background: linear-gradient(135deg, var(--rust), var(--gold));
  border: none; color: var(--deep);
  cursor: pointer;
  clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
  transition: all .13s;
  box-shadow: 0 4px 18px rgba(204,107,73,.38);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.launch-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(204,107,73,.58); }

#settingsScreen { background: var(--bg); padding: 18px; overflow: hidden; }
.settings-wrap { width: 100%; max-width: 600px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: calc(100vh - 138px); }
.set-row {
  background: var(--panel); border: 2px solid var(--border);
  padding: 11px 15px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.set-lbl { font-size: 9px; color: var(--cream); letter-spacing: 2px; display: flex; align-items: center; gap: 8px; }
.set-lbl i { font-size: 15px; color: var(--rust); }
.set-ctrl { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.tog {
  font-family: 'Bungee', cursive; font-size: 8px; padding: 5px 14px;
  border: 2px solid var(--teal); color: var(--teal); background: transparent;
  cursor: pointer;
  clip-path: polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%);
  letter-spacing: 1px; transition: all .12s;
}
.tog.off { border-color: var(--brown); color: var(--brown); }
.vol-sl { -webkit-appearance: none; width: 130px; height: 5px; background: var(--deep); border: 1px solid var(--border); outline: none; cursor: pointer; }
.vol-sl::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; background: var(--gold); cursor: pointer; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.spd-chip { font-family: 'Bungee', cursive; font-size: 7px; padding: 5px 10px; border: 2px solid var(--border); color: var(--brown); background: transparent; cursor: pointer; clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%); letter-spacing: 1px; transition: all .12s; }
.spd-chip.on, .spd-chip:hover { border-color: var(--gold); color: var(--gold); }

#howScreen { background: var(--bg); padding: 18px; overflow: hidden; }
.how-wrap { width: 100%; max-width: 720px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; max-height: calc(100vh - 128px); }
.how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.how-card { background: var(--panel); border: 2px solid var(--border); padding: 14px; }
.how-icon-wrap { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--rust); margin-bottom: 9px; }
.how-icon-wrap i { font-size: 16px; color: var(--rust); }
.how-title { font-family: 'Bungee', cursive; font-size: 10px; color: var(--rust); letter-spacing: 2px; margin-bottom: 6px; }
.how-desc { font-size: 8px; color: var(--cream); line-height: 1.9; letter-spacing: .8px; }
.how-note-types { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.note-type-row { display: flex; align-items: center; gap: 8px; font-size: 8px; color: var(--cream); letter-spacing: 1px; }
.nt-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.controls-box { background: var(--panel); border: 2px solid var(--border); padding: 13px 15px; }
.key-row { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 7px; }
.key-item { display: flex; align-items: center; gap: 6px; font-size: 8px; color: var(--cream); letter-spacing: 1px; }
.key-item i { font-size: 13px; color: var(--gold); }
.kbd { font-family: 'Share Tech Mono', monospace; font-size: 9px; padding: 2px 7px; border: 1px solid var(--border); color: var(--cream); background: var(--deep); }

#gameScreen { padding: 0; background: var(--bg); }
#gameCanvas { display: block; position: absolute; inset: 0; }

.g-hud {
  position: absolute; top: 0; left: 0; right: 0; height: 58px;
  display: flex; align-items: stretch;
  padding: 0 14px;
  background: linear-gradient(180deg, rgba(8,4,1,.97), transparent);
  pointer-events: none; z-index: 50; gap: 6px;
}
.hud-seg { display: flex; flex-direction: column; justify-content: center; padding: 0 11px; border-bottom: 2px solid; }
.hud-seg.sc { border-color: var(--gold); }
.hud-seg.cb { border-color: var(--rust); }
.hud-seg.ht { border-color: #ff6b2b; }
.hud-seg.ac { border-color: var(--teal); }
.hud-seg.lv { border-color: var(--brown); min-width: 86px; }
.hud-seg.hp { flex: 1; border-color: var(--border); padding: 6px 11px; justify-content: flex-end; }
.hud-lbl { font-size: 6px; color: var(--brown); letter-spacing: 3px; display: flex; align-items: center; gap: 3px; }
.hud-lbl i { font-size: 10px; }
.hud-val { font-family: 'Russo One', sans-serif; font-size: clamp(12px, 1.9vw, 17px); }
.hud-val.gd { color: var(--gold); text-shadow: 0 0 8px var(--gg); }
.hud-val.rt { color: var(--rust); text-shadow: 0 0 8px var(--gr); }
.hud-val.ht-col { color: #ff6b2b; text-shadow: 0 0 8px rgba(255,107,43,.6); }
.hud-val.tl { color: var(--teal); text-shadow: 0 0 8px var(--gt); }
.hud-val.cr { color: var(--cream); }

.hp-bar { height: 9px; background: var(--deep); border: 1px solid var(--border); margin-top: 3px; position: relative; overflow: hidden; }
#hpFill { height: 100%; background: linear-gradient(90deg, var(--rust), var(--gold), var(--teal)); transition: width .18s; position: relative; }
#hpFill::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 2px; background: #fff; opacity: .8; }

.heat-bar { height: 6px; background: var(--deep); border: 1px solid var(--border); margin-top: 2px; }
#heatFill { height: 100%; background: linear-gradient(90deg, #ff6b2b, #ffcc00); transition: width .18s; }

.xp-bar-hud { height: 4px; background: var(--deep); border: 1px solid rgba(111,86,67,.35); margin-top: 2px; }
#xpFill { height: 100%; background: linear-gradient(90deg, var(--brown), var(--gold)); transition: width .3s; }

.song-hud {
  position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%);
  font-family: 'Bungee', cursive; font-size: clamp(7px, 1vw, 9px);
  color: var(--brown); letter-spacing: 3px; pointer-events: none; z-index: 50; white-space: nowrap;
}
.pause-hud-btn {
  position: absolute; top: 10px; right: 16px;
  font-family: 'Bungee', cursive; font-size: 9px; letter-spacing: 2px;
  padding: 6px 12px; background: rgba(8,4,1,.85);
  border: 2px solid var(--border); color: var(--brown); cursor: pointer; z-index: 51;
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
  pointer-events: all; display: flex; align-items: center; gap: 5px; transition: all .12s;
}
.pause-hud-btn:hover { border-color: var(--rust); color: var(--rust); }

.judge-pop {
  position: absolute; pointer-events: none; z-index: 200;
  font-family: 'Bungee Inline', cursive; text-align: center;
  animation: judge-anim .75s forwards;
}
@keyframes judge-anim {
  0% { opacity: 1; transform: translateX(-50%) scale(1.6) translateY(0); }
  60% { opacity: 1; transform: translateX(-50%) scale(1) translateY(-24px); }
  100% { opacity: 0; transform: translateX(-50%) scale(.7) translateY(-52px); }
}

.fever-flash {
  position: absolute; inset: 0; pointer-events: none; z-index: 60;
  border: 3px solid #ffcc00;
  animation: fever-pulse 1s ease-in-out infinite alternate;
}
@keyframes fever-pulse { from { opacity: .2; } to { opacity: .7; } }

#pauseOverlay {
  display: none; position: absolute; inset: 0;
  background: rgba(8,4,1,.92);
  flex-direction: column; align-items: center; justify-content: center;
  gap: 13px; z-index: 500;
}
#pauseOverlay.show { display: flex; }
.pause-title {
  font-family: 'Bungee Inline', cursive;
  font-size: clamp(26px, 5vw, 52px);
  color: var(--rust);
  text-shadow: 5px 5px 0 var(--brown), 0 0 40px var(--gr);
  letter-spacing: 6px;
}

#lvlUpOverlay {
  display: none; position: fixed; inset: 0;
  background: rgba(8,4,1,.92);
  flex-direction: column; align-items: center; justify-content: center;
  z-index: 600; gap: 7px;
}
#lvlUpOverlay.show { display: flex; }
.lu-badge {
  font-family: 'Bungee Inline', cursive;
  font-size: clamp(13px, 2vw, 20px);
  color: var(--gold); letter-spacing: 4px;
  text-shadow: 0 0 28px var(--gg);
  display: flex; align-items: center; gap: 8px;
}
.lu-num {
  font-family: 'Bungee Inline', cursive;
  font-size: clamp(56px, 11vw, 106px);
  color: var(--gold); line-height: 1;
  text-shadow: 5px 5px 0 var(--brown), 0 0 60px var(--gg);
  animation: lu-slam .5s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes lu-slam {
  0% { transform: scale(0) rotate(-15deg); opacity: 0; }
  70% { transform: scale(1.2) rotate(4deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.lu-title { font-family: 'Bungee', cursive; font-size: clamp(11px, 1.8vw, 17px); color: var(--cream); letter-spacing: 3px; }
.lu-unlock { font-size: 9px; color: var(--teal); letter-spacing: 2px; margin-top: 4px; display: flex; align-items: center; gap: 6px; }

#resultScreen { background: var(--bg); }
.result-inner { width: min(510px, 90vw); text-align: center; }
.result-banner { font-family: 'Bungee Inline', cursive; font-size: clamp(14px, 3vw, 32px); letter-spacing: 4px; margin-bottom: 5px; }
.rank-huge {
  font-family: 'Bungee Inline', cursive;
  font-size: clamp(62px, 12vw, 112px); line-height: 1; margin: 6px 0;
  animation: rank-slam .42s cubic-bezier(.175,.885,.32,1.275) both;
}
@keyframes rank-slam {
  0% { transform: scale(0) rotate(-18deg); opacity: 0; }
  70% { transform: scale(1.15) rotate(4deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.result-xp { font-size: 10px; color: var(--gold); letter-spacing: 2px; margin-bottom: 5px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 12px 0; }
.r-cell { background: var(--panel); border: 2px solid var(--border); padding: 10px; text-align: left; }
.r-lbl { font-size: 6px; color: var(--brown); letter-spacing: 2px; margin-bottom: 3px; display: flex; align-items: center; gap: 4px; }
.r-lbl i { font-size: 11px; }
.r-val { font-family: 'Russo One', sans-serif; font-size: clamp(11px, 1.7vw, 16px); }
.btn-row { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }

.diff-easy   { color: #39ff14; }
.diff-normal { color: var(--gold); }
.diff-hard   { color: var(--rust); }
.diff-punk   { color: #ff3c3c; }