#difficulty-box {
  text-align: center;
  padding: 20px 25px;
}

#diff-title {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--accent);
  letter-spacing: 4px;
  text-shadow: 0 0 18px rgba(0, 255, 65, 0.5), 0 0 40px rgba(0, 255, 65, 0.2);
  margin-bottom: 25px;
}

#diff-options {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-bottom: 20px;
}

.diff-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 16px;
  border: 2px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.15) 100%);
  min-width: 85px;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
}

.diff-option:hover {
  border-color: rgba(255,255,255,0.25);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
}

.diff-color {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: bold;
  color: #000;
}

.diff-color-b { background: var(--blue); box-shadow: 0 0 22px rgba(56,136,255,0.4), 0 0 50px rgba(56,136,255,0.15); }
.diff-color-g { background: var(--green); box-shadow: 0 0 22px rgba(56,255,92,0.4), 0 0 50px rgba(56,255,92,0.15); }
.diff-color-r { background: var(--red); box-shadow: 0 0 22px rgba(255,56,56,0.4), 0 0 50px rgba(255,56,56,0.15); }

.diff-label {
  font-size: 0.85rem;
  font-weight: bold;
  letter-spacing: 2px;
}
.diff-label-b { color: var(--blue); }
.diff-label-g { color: var(--green); }
.diff-label-r { color: var(--red); }

.diff-key {
  font-size: 0.55rem;
  color: var(--text);
  letter-spacing: 1px;
  opacity: 0.7;
  margin: 2px 0;
  font-weight: bold;
}

.diff-desc {
  font-size: 0.5rem;
  color: var(--text-dim);
  line-height: 1.5;
  letter-spacing: 0.5px;
}

#diff-hint {
  font-size: 0.7rem;
  color: var(--accent);
  letter-spacing: 2px;
}

/* ── Critical overlay ────────────────────────────────────── */
#critical-overlay {
  background: rgba(0, 0, 0, 0.85);
}

#critical-box {
  text-align: center;
  padding: 20px 30px;
  border: 3px solid var(--red);
  border-radius: var(--radius-md);
  background: rgba(20, 0, 0, 0.92);
  max-width: 340px;
  animation: critBorderPulse 0.5s ease-in-out infinite;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6), 0 0 40px rgba(255,56,56,0.15);
}

#critical-box.crit-r { border-color: var(--red); background: rgba(30,0,0,0.92); }
#critical-box.crit-g { border-color: var(--green); background: rgba(0,30,0,0.92); }
#critical-box.crit-b { border-color: var(--blue); background: rgba(0,0,30,0.92); }
#critical-box.crit-multi {
  border-color: #ff3838;
  background: rgba(30,5,10,0.94);
  animation: critMultiPulse 0.5s ease-in-out infinite;
}
@keyframes critMultiPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255,56,56,0.3), 0 0 40px rgba(56,136,255,0.15); }
  50%      { box-shadow: 0 0 50px rgba(255,56,56,0.5), 0 0 30px rgba(56,255,92,0.2); }
}

@keyframes critBorderPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255,56,56,0.3); }
  50%      { box-shadow: 0 0 50px rgba(255,56,56,0.6); }
}

#critical-icon {
  font-size: 2.5rem;
  animation: critFlash 0.3s ease-in-out infinite;
}

@keyframes critFlash {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

#critical-title {
  font-size: 1.1rem;
  font-weight: bold;
  letter-spacing: 3px;
  margin: 5px 0;
}

#critical-sector {
  font-size: 0.85rem;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

#critical-instruction {
  font-size: 0.9rem;
  font-weight: bold;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.critical-track {
  height: 14px;
  margin: 8px 0;
  border-radius: 5px;
}

.critical-fill {
  border-radius: 4px;
  will-change: transform;
}

.critical-fill.fill-r { background: var(--red); box-shadow: var(--glow-r); }
.critical-fill.fill-g { background: var(--green); box-shadow: var(--glow-g); }
.critical-fill.fill-b { background: var(--blue); box-shadow: var(--glow-b); }

#critical-counter {
  font-size: 1rem;
  font-weight: bold;
  margin: 4px 0;
}

#critical-timer {
  font-size: 0.75rem;
  color: var(--text-dim);
}

/* ── Pause overlay ───────────────────────────────────────── */
#pause-overlay {
  background: rgba(0, 0, 0, 0.8);
  z-index: 52;
}

#pause-box {
  text-align: center;
  padding: 30px 40px;
}

#pause-icon {
  font-size: 3rem;
  color: var(--accent);
  margin-bottom: 10px;
  text-shadow: 0 0 20px rgba(0, 255, 65, 0.4);
}

#pause-title {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--accent);
  letter-spacing: 4px;
  text-shadow: 0 0 15px rgba(0, 255, 65, 0.3);
  margin-bottom: 12px;
}

#pause-sub {
  font-size: 0.65rem;
  color: var(--text-dim);
  letter-spacing: 1px;
}

/* ── Game over overlay ───────────────────────────────────── */
#gameover-overlay {
  background: rgba(8, 0, 0, 0.92);
  overflow-y: auto;
  align-items: flex-start;
  padding: 12px 0;
}

#gameover-box {
  text-align: center;
  padding: 16px 22px;
  max-width: 380px;
  width: 90%;
  position: relative;
  margin: auto;
}

#go-title {
  position: relative;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--red);
  letter-spacing: 5px;
  text-shadow: 0 0 25px rgba(255,0,0,0.6), 0 0 60px rgba(255,0,0,0.2);
  margin-bottom: 10px;
  animation: goTitleFlicker 4s ease-in-out infinite;
}

/* CRT glitch: two colour-split layers phasing in and out */
#go-title::before,
#go-title::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  will-change: transform, opacity;
}

#go-title::before {
  color: #ff0040;
  text-shadow: 0 0 8px rgba(255,0,64,0.6);
  animation: goGlitch1 3s step-end infinite;
}

#go-title::after {
  color: #00ffff;
  text-shadow: 0 0 8px rgba(0,255,255,0.4);
  animation: goGlitch2 3s step-end infinite reverse;
}

/* Main title flicker — brief CRT phase-outs */
@keyframes goTitleFlicker {
  0%, 100% { opacity: 1; }
  7%       { opacity: 1; }
  8%       { opacity: 0.2; }
  9%       { opacity: 1; }
  45%      { opacity: 1; }
  46%      { opacity: 0.6; }
  47%      { opacity: 0.1; }
  48%      { opacity: 0.7; }
  49%      { opacity: 1; }
  73%      { opacity: 1; }
  74%      { opacity: 0.05; }
  76%      { opacity: 0.9; }
  77%      { opacity: 0.3; }
  78%      { opacity: 1; }
}

/* Layer 1: red/magenta shift — simplified for performance */
@keyframes goGlitch1 {
  0%, 100% { transform: translate(0, 0); opacity: 0; }
  5%    { transform: translate(-4px, 0); opacity: 0.35; }
  10%   { transform: translate(0, 0); opacity: 0; }
  36%   { transform: translate(-5px, -1px); opacity: 0.45; }
  40%   { transform: translate(0, 0); opacity: 0; }
  56%   { transform: translate(-6px, 0); opacity: 0.4; }
  60%   { transform: translate(0, 0); opacity: 0; }
  79%   { transform: translate(-4px, 1px); opacity: 0.45; }
  83%   { transform: translate(0, 0); opacity: 0; }
}

/* Layer 2: cyan shift — simplified for performance */
@keyframes goGlitch2 {
  0%, 100% { transform: translate(0, 0); opacity: 0; }
  8%    { transform: translate(4px, -1px); opacity: 0.3; }
  11%   { transform: translate(0, 0); opacity: 0; }
  26%   { transform: translate(5px, 1px); opacity: 0.35; }
  30%   { transform: translate(0, 0); opacity: 0; }
  49%   { transform: translate(5px, 0); opacity: 0.4; }
  53%   { transform: translate(0, 0); opacity: 0; }
  71%   { transform: translate(5px, -1px); opacity: 0.45; }
  75%   { transform: translate(0, 0); opacity: 0; }
  91%   { transform: translate(4px, 0); opacity: 0.35; }
  93%   { transform: translate(0, 0); opacity: 0; }
}

#go-score, #go-high, #go-time, #go-level, #go-tier, #go-diff, #go-combo {
  font-size: 0.78rem;
  margin: 3px 0;
  letter-spacing: 0.5px;
}

#go-score { color: var(--yellow); font-size: 1.05rem; font-weight: bold; text-shadow: 0 0 10px rgba(255,204,0,0.3); }
#go-high  { color: var(--orange); }
#go-high.new-high { color: var(--green); text-shadow: 0 0 10px rgba(56,255,92,0.4); font-weight: bold; }
#go-time  { color: var(--text); }
#go-level { color: var(--text); }
#go-tier  { font-weight: bold; }
#go-diff  { font-size: 0.65rem; color: var(--text-dim); }
#go-combo { color: var(--orange); font-weight: bold; margin-bottom: 6px; }

#go-stats {
  font-size: 0.5rem;
  font-family: 'Courier New', monospace;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 8px;
  letter-spacing: 0;
  padding: 4px 8px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 4px;
  text-align: left;
  white-space: nowrap;
  overflow-x: hidden;
}

/* ── Victory overlay ─────────────────────────────────────── */
#victory-overlay {
  background: rgba(0, 8, 0, 0.94);
  overflow-y: auto;
  align-items: flex-start;
  padding: 12px 0;
}

#victory-box {
  text-align: center;
  padding: 16px 22px;
  max-width: 380px;
  width: 90%;
  position: relative;
  margin: auto;
}

#vic-title {
  position: relative;
  font-size: 1.4rem;
  font-weight: bold;
  color: #38ff5c;
  letter-spacing: 4px;
  text-shadow: 0 0 25px rgba(56,255,92,0.6), 0 0 60px rgba(56,255,92,0.2);
  margin-bottom: 4px;
  animation: vicTitlePulse 2s ease-in-out infinite;
}

/* CRT glitch on victory title — gold/green split */
#vic-title::before,
#vic-title::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
}
#vic-title::before {
  color: #ffcc00;
  text-shadow: 0 0 8px rgba(255,204,0,0.5);
  animation: goGlitch1 3s step-end infinite;
}
#vic-title::after {
  color: #00ffcc;
  text-shadow: 0 0 8px rgba(0,255,204,0.4);
  animation: goGlitch2 3s step-end infinite reverse;
}

@keyframes vicTitlePulse {
  0%, 100% { text-shadow: 0 0 25px rgba(56,255,92,0.6), 0 0 60px rgba(56,255,92,0.2); }
  50%      { text-shadow: 0 0 40px rgba(56,255,92,0.8), 0 0 80px rgba(56,255,92,0.35), 0 0 120px rgba(56,255,92,0.1); }
}

#vic-subtitle {
  font-size: 0.6rem;
  color: #ff00ff;
  letter-spacing: 3px;
  text-shadow: 0 0 12px rgba(255,0,255,0.4);
  margin-bottom: 10px;
  animation: vicSubPulse 1.5s ease-in-out infinite;
}

@keyframes vicSubPulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

#vic-score, #vic-high, #vic-time, #vic-level, #vic-diff, #vic-combo {
  font-size: 0.78rem;
  margin: 3px 0;
  letter-spacing: 0.5px;
}

#vic-score { color: #ffcc00; font-size: 1.05rem; font-weight: bold; text-shadow: 0 0 15px rgba(255,204,0,0.4); }
#vic-high  { color: var(--orange); }
#vic-high.new-high { color: #38ff5c; text-shadow: 0 0 12px rgba(56,255,92,0.5); font-weight: bold; }
#vic-time  { color: #38ff5c; }
#vic-level { font-weight: bold; }
#vic-diff  { font-size: 0.65rem; color: var(--text-dim); }
#vic-combo { color: var(--orange); font-weight: bold; margin-bottom: 6px; }

#vic-grade {
  font-size: 1.8rem;
  font-weight: bold;
  letter-spacing: 3px;
  margin: 4px 0 2px;
  text-shadow: 0 0 25px currentColor;
  animation: vicGradeGlow 1.2s ease-in-out infinite;
}

@keyframes vicGradeGlow {
  0%, 100% { text-shadow: 0 0 20px currentColor; transform: scale(1); }
  50%      { text-shadow: 0 0 40px currentColor, 0 0 70px currentColor; transform: scale(1.05); }
}

#vic-stats {
  font-size: 0.5rem;
  font-family: 'Courier New', monospace;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 8px;
  letter-spacing: 0;
  padding: 4px 8px;
  background: rgba(0,255,65,0.05);
  border: 1px solid rgba(56,255,92,0.15);
  border-radius: 4px;
  text-align: left;
  white-space: nowrap;
  overflow-x: hidden;
}

#vic-prompt {
  font-size: 0.65rem;
  color: #38ff5c;
  letter-spacing: 2px;
  margin-top: 6px;
}
#vic-prompt.reboot-wait {
  color: var(--text-dim);
  opacity: 0.5;
  animation: rebootPulse 0.6s ease-in-out infinite;
}

/* ── Standby overlay ─────────────────────────────────────── */
#standby-overlay {
  background: var(--bg);
  z-index: 60;
  transition: background 1.5s ease;
}

/* Attract / idle demo — make overlay semi-transparent so gameplay shows behind */
#standby-overlay.demo-active {
  background: rgba(12, 22, 40, 0.82);
}

#standby-box {
  text-align: center;
  padding: 20px;
  position: relative;
  z-index: 1;
}

#standby-logo {
  font-size: 0.75rem;
  color: var(--accent);
  text-shadow: 0 0 18px rgba(0,255,65,0.5), 0 0 50px rgba(0,255,65,0.2);
  line-height: 1.3;
  margin-bottom: 8px;
  animation: standbyGlow 3s ease-in-out infinite;
}

@keyframes standbyGlow {
  0%, 100% { text-shadow: 0 0 18px rgba(0,255,65,0.5), 0 0 50px rgba(0,255,65,0.2); filter: brightness(1); }
  50%      { text-shadow: 0 0 30px rgba(0,255,65,0.8), 0 0 60px rgba(0,255,65,0.3), 0 0 100px rgba(0,255,65,0.1); filter: brightness(1.15); }
}

#standby-sub {
  font-size: 0.6rem;
  color: var(--text-dim);
  letter-spacing: 2px;
  margin-bottom: 18px;
}

#standby-desc {
  font-size: 0.6rem;
  color: var(--text);
  line-height: 2;
  margin-bottom: 10px;
}
.c-r { color: var(--red); font-weight: bold; }
.c-g { color: var(--green); font-weight: bold; }
.c-b { color: var(--blue); font-weight: bold; }
.desc-sep { color: var(--text-dim); margin: 0 3px; }

#standby-features {
  font-size: 0.5rem;
  color: var(--text-dim);
  letter-spacing: 1px;
  margin-bottom: 12px;
}

#standby-tips {
  font-size: 0.48rem;
  color: var(--accent);
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  min-height: 1.4em;
  opacity: 0.7;
  transition: opacity 0.4s;
}
#standby-tips.fade { opacity: 0; }

/* ── Cause of death (game over) ──────────────────────────── */
#go-cause {
  font-size: 0.65rem;
  font-weight: bold;
  letter-spacing: 1.5px;
  margin: 4px 0 6px;
  padding: 3px 8px;
  border: 1px solid rgba(255, 56, 56, 0.3);
  border-radius: 4px;
  background: rgba(255, 56, 56, 0.08);
}

/* ── Performance grade ───────────────────────────────────── */
#go-grade {
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: 3px;
  margin: 2px 0 2px;
  text-shadow: 0 0 20px currentColor;
  animation: gradePulse 1.5s ease-in-out infinite;
}
@keyframes gradePulse {
  0%, 100% { opacity: 1; text-shadow: 0 0 15px currentColor; }
  50%      { opacity: 0.8; text-shadow: 0 0 30px currentColor; }
}

/* ── Game over prompt states ─────────────────────────────── */
#go-prompt {
  font-size: 0.65rem;
  color: var(--accent);
  letter-spacing: 2px;
  margin-top: 6px;
}
#go-prompt.reboot-wait {
  color: var(--text-dim);
  opacity: 0.5;
  animation: rebootPulse 0.6s ease-in-out infinite;
}
@keyframes rebootPulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.2; }
}

/* ── Sector damage numbers ───────────────────────────────── */
.sector-damage-num {
  position: absolute;
  top: 10%;
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--red);
  text-shadow: 0 0 12px rgba(255, 56, 56, 0.7), 0 0 25px rgba(255, 56, 56, 0.3);
  pointer-events: none;
  z-index: 5;
  animation: dmgFloat 0.8s ease-out forwards;
}
@keyframes dmgFloat {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-30px); }
}