:root{
  --bg-void:#05060c;
  --bg-panel:#0d1128;
  --bg-panel-2:#131a3a;
  --neon-cyan:#00e5ff;
  --neon-magenta:#ff2fb0;
  --neon-gold:#ffd23f;
  --neon-green:#3dffa0;
  --neon-orange:#ff8a3d;
  --neon-red:#ff3860;
  --text-dim:#7d8bb0;
  --text-bright:#eaf0ff;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{
  margin:0; padding:0; width:100%; height:100%;
  background:var(--bg-void);
  color:var(--text-bright);
  font-family:'Courier New', ui-monospace, 'Consolas', monospace;
  overflow:hidden;
  user-select:none;
}
#app{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse at 50% 0%, #0c1440 0%, #05060c 60%),
    var(--bg-void);
}
/* arcade cabinet bezel frame -- signature element */
#bezel{
  position:absolute; inset:10px;
  pointer-events:none;
  border:1px solid rgba(0,229,255,0.18);
  box-shadow: inset 0 0 80px rgba(0,229,255,0.05), inset 0 0 2px rgba(0,229,255,0.25);
  z-index:50;
}
#bezel::before, #bezel::after,
#bezel .corner-br, #bezel .corner-bl{
  content:''; position:absolute; width:34px; height:34px;
  border-color:var(--neon-cyan);
  opacity:0.85;
}
#bezel::before{ /* top-left */
  top:-1px; left:-1px; border-top:3px solid; border-left:3px solid;
  filter:drop-shadow(0 0 6px var(--neon-cyan));
}
#bezel::after{ /* top-right */
  top:-1px; right:-1px; border-top:3px solid; border-right:3px solid;
  filter:drop-shadow(0 0 6px var(--neon-cyan));
}
#bezel .corner-bl{ bottom:-1px; left:-1px; border-bottom:3px solid; border-left:3px solid; filter:drop-shadow(0 0 6px var(--neon-magenta)); border-color:var(--neon-magenta);}
#bezel .corner-br{ bottom:-1px; right:-1px; border-bottom:3px solid; border-right:3px solid; filter:drop-shadow(0 0 6px var(--neon-magenta)); border-color:var(--neon-magenta);}

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

.glow-cyan{ text-shadow:0 0 6px var(--neon-cyan), 0 0 18px rgba(0,229,255,0.6), 0 0 34px rgba(0,229,255,0.3); }
.glow-magenta{ text-shadow:0 0 6px var(--neon-magenta), 0 0 18px rgba(255,47,176,0.6), 0 0 34px rgba(255,47,176,0.3); }
.glow-gold{ text-shadow:0 0 6px var(--neon-gold), 0 0 18px rgba(255,210,63,0.6), 0 0 34px rgba(255,210,63,0.3); }

.title-font{
  font-family:'Arial Black','Segoe UI', sans-serif;
  font-weight:900;
  letter-spacing:0.08em;
}

/* ---------- TITLE SCREEN ---------- */
#screen-title{ padding:24px; gap:clamp(10px,2vh,22px); }
#logo{
  font-size:clamp(30px, 6.2vw, 64px);
  text-align:center;
  color:var(--text-bright);
  letter-spacing:0.12em;
  line-height:1.05;
}
#logo .sub{
  display:block;
  font-size:0.28em;
  color:var(--neon-magenta);
  letter-spacing:0.5em;
  margin-top:6px;
}
#loadStatus, #chartMode{
  color:var(--text-dim);
  font-size:13px;
  letter-spacing:0.15em;
  min-height:18px;
  text-align:center;
}
#chartMode{ color:var(--neon-green); }
#loadStatus.err, #chartMode.err{ color:var(--neon-red); }

#diffRow{
  display:flex; gap:18px; flex-wrap:wrap; justify-content:center;
  margin-top:4px;
}
.diff-card{
  width:190px;
  background:linear-gradient(160deg, var(--bg-panel), var(--bg-panel-2));
  border:2px solid rgba(125,139,176,0.35);
  border-radius:10px;
  padding:16px 14px;
  cursor:pointer;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  text-align:center;
}
.diff-card:hover, .diff-card.selected{
  transform:translateY(-4px);
  border-color:var(--card-color, var(--neon-cyan));
  box-shadow:0 0 22px -2px var(--card-color, var(--neon-cyan));
}
.diff-card .dname{
  font-family:'Arial Black','Segoe UI',sans-serif;
  font-weight:900;
  font-size:22px;
  letter-spacing:0.08em;
  color:var(--card-color, var(--neon-cyan));
}
.diff-card .ddesc{
  color:var(--text-dim);
  font-size:11.5px;
  margin-top:8px;
  line-height:1.6;
  letter-spacing:0.03em;
}
.diff-card .dhs-label{
  margin-top:12px;
  font-size:10px;
  color:var(--text-dim);
  letter-spacing:0.2em;
}
.diff-card .dhs-value{
  font-size:20px;
  color:var(--text-bright);
  margin-top:2px;
  letter-spacing:0.05em;
}
.diff-card .dkey{
  margin-top:10px;
  font-size:10px;
  color:rgba(234,240,255,0.35);
}

#controlsRow{
  display:flex; gap:10px; margin-top:6px; flex-wrap:wrap; justify-content:center;
}
.keycap{
  width:56px; height:56px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px;
  background:var(--bg-panel);
  border:2px solid var(--kc-color, var(--neon-cyan));
  color:var(--kc-color, var(--neon-cyan));
  box-shadow:0 0 12px -3px var(--kc-color, var(--neon-cyan));
}
.keycap.wide{ width:100px; font-size:11px; }

#startHint{
  color:var(--text-dim);
  font-size:12px;
  letter-spacing:0.15em;
  margin-top:2px;
  text-align:center;
}
#startHint b{ color:var(--neon-gold); }

/* ---------- PLAY SCREEN ---------- */
#screen-play{ padding:0; }
#gameCanvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}
.hud{ position:absolute; z-index:20; pointer-events:none; }
#hudTopLeft{
  top:18px; left:24px;
  font-size:13px;
  color:var(--text-dim);
  letter-spacing:0.12em;
}
#hudTopLeft #diffTag{ color:var(--neon-cyan); font-weight:700; }
#progressWrap{
  margin-top:6px; width:220px; height:5px;
  background:rgba(125,139,176,0.25); border-radius:3px; overflow:hidden;
}
#progressBar{ height:100%; width:0%; background:linear-gradient(90deg,var(--neon-cyan),var(--neon-magenta)); }

#hudTopRight{
  top:16px; right:24px; text-align:right;
}
#scoreValue{
  font-size:clamp(22px,3.4vw,34px);
  font-weight:700;
  color:var(--text-bright);
  letter-spacing:0.05em;
}
#comboWrap{
  margin-top:2px; text-align:right; min-height:34px;
}
#comboValue{
  font-size:clamp(20px,3vw,30px);
  color:var(--neon-gold);
  font-weight:700;
  display:inline-block;
  text-shadow:0 0 8px rgba(255,210,63,0.7);
}
#comboLabel{ font-size:11px; color:var(--text-dim); letter-spacing:0.2em; margin-left:4px;}

#judgeText{
  position:absolute; left:50%; top:56%;
  transform:translate(-50%,-50%) scale(1);
  font-size:clamp(22px,3.6vw,38px);
  font-weight:900;
  font-family:'Arial Black','Segoe UI',sans-serif;
  letter-spacing:0.1em;
  opacity:0;
  z-index:21;
  pointer-events:none;
}
#judgeText.show{
  animation:judgePop .38s ease-out;
}
@keyframes judgePop{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(0.6); }
  18%{ opacity:1; transform:translate(-50%,-50%) scale(1.12); }
  40%{ transform:translate(-50%,-50%) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-58%) scale(1); }
}

#escHint{
  bottom:14px; left:50%; transform:translateX(-50%);
  font-size:11px; color:rgba(125,139,176,0.7); letter-spacing:0.15em;
}

/* ---------- RESULT SCREEN ---------- */
#screen-result{ gap:18px; padding:20px; }
#resultTitle{
  font-size:clamp(18px,2.6vw,26px);
  color:var(--text-dim);
  letter-spacing:0.4em;
}
#newRecord{
  font-size:clamp(16px,2.4vw,22px);
  color:var(--neon-gold);
  letter-spacing:0.2em;
  animation:blink 1s steps(2) infinite;
  min-height:1.4em;
}
@keyframes blink{ 50%{ opacity:0.25; } }
#resultBody{
  display:flex; align-items:center; gap:44px; flex-wrap:wrap; justify-content:center;
}
#rankLetter{
  font-family:'Arial Black','Segoe UI',sans-serif;
  font-weight:900;
  font-size:clamp(90px,14vw,160px);
  line-height:1;
}
#statsTable{
  font-size:15px;
  letter-spacing:0.06em;
  min-width:260px;
}
#statsTable div.row{
  display:flex; justify-content:space-between;
  padding:6px 4px;
  border-bottom:1px solid rgba(125,139,176,0.18);
  gap:24px;
}
#statsTable div.row span:first-child{ color:var(--text-dim); }
#statsTable div.row.total{ margin-top:6px; border-bottom:none; font-size:19px; color:var(--text-bright); }
.rate-perfect{ color:var(--neon-gold); }
.rate-great{ color:var(--neon-cyan); }
.rate-good{ color:var(--neon-green); }
.rate-miss{ color:var(--neon-red); }

#resultButtons{ display:flex; gap:16px; margin-top:6px; }
.arcade-btn{
  font-family:'Courier New',monospace;
  font-weight:700; font-size:14px; letter-spacing:0.12em;
  padding:14px 26px; border-radius:8px;
  background:var(--bg-panel);
  color:var(--text-bright);
  border:2px solid var(--neon-cyan);
  box-shadow:0 0 14px -4px var(--neon-cyan);
  cursor:pointer;
}
.arcade-btn:hover{ background:var(--bg-panel-2); }
.arcade-btn.magenta{ border-color:var(--neon-magenta); box-shadow:0 0 14px -4px var(--neon-magenta); }

::selection{ background:var(--neon-magenta); color:#fff; }