:root {
  --rv-bg: #07000e;
  --rv-panel: #020006;
  --rv-cyan: #00f7ff;
  --rv-pink: #ff4fb8;
  --rv-lime: #65ff00;
  --rv-yellow: #fff200;
  --rv-purple: #6e24ff;
  --rv-white: #f5f5ff;
  --rv-red: #ff3131;
  --rv-shadow: rgba(0, 247, 255, .45);
  --rv-font: "Courier New", Courier, monospace;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at 50% 0%, rgba(112, 20, 150, .5), transparent 35%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, #1a0323 0%, #07000e 100%);
  color: var(--rv-white);
  font-family: var(--rv-font);
}

body.rv-page { overflow-x: hidden; }
button, input { font-family: inherit; }

.rv-shell {
  width: min(1180px, calc(100% - 24px));
  margin: 0 auto;
  padding: 18px 0 32px;
}

.rv-panel {
  background: rgba(0, 0, 0, .88);
  border: 3px solid var(--rv-cyan);
  box-shadow: 0 0 0 2px #111 inset, 0 0 24px rgba(0, 247, 255, .18);
}

.rv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  margin-bottom: 18px;
}

.rv-kicker {
  margin: 0 0 2px;
  color: var(--rv-cyan);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
}

.rv-header h1 {
  margin: 0;
}


.rv-space-logo {
  display: block;
  position: relative;
  margin: 0;
  line-height: 0;
  filter:
    drop-shadow(0 0 8px rgba(255, 242, 0, .75))
    drop-shadow(0 0 18px rgba(0, 247, 255, .28));
}

.rv-logo-img {
  display: block;
  width: min(660px, 100%);
  height: auto;
  image-rendering: auto;
}

.rv-space-logo::before {
  color: var(--rv-cyan);
  transform: translate(-4px, -2px);
  clip-path: polygon(0 0, 100% 0, 100% 42%, 0 32%);
}

.rv-space-logo::after {
  color: var(--rv-pink);
  transform: translate(5px, 5px);
  clip-path: polygon(0 48%, 100% 38%, 100% 100%, 0 100%);
}

.rv-subtitle {
  margin: 8px 0 0;
  color: var(--rv-lime);
  font-size: .9rem;
}

.rv-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.rv-nav a,
.rv-btn,
.rv-pad {
  color: #000;
  background: var(--rv-yellow);
  border: 3px solid #fff;
  border-right-color: #777;
  border-bottom-color: #777;
  box-shadow: 4px 4px 0 #000;
  padding: 10px 13px;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

.rv-nav a:hover,
.rv-btn:hover,
.rv-pad:hover {
  transform: translate(1px, 1px);
  box-shadow: 3px 3px 0 #000;
}

.rv-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
  align-items: start;
}

.rv-gamebox {
  padding: 16px;
  border-color: var(--rv-pink);
  box-shadow: 0 0 0 2px #111 inset, 0 0 30px rgba(255, 79, 184, .2);
}

.rv-topbar,
.rv-subhud {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.rv-topbar { grid-template-columns: repeat(4, 1fr); }
.rv-subhud { grid-template-columns: 1.4fr 1.1fr .8fr 1.3fr; }

.rv-topbar div,
.rv-subhud div {
  min-width: 0;
  padding: 8px;
  border: 2px solid var(--rv-purple);
  background: #16003d;
  text-align: center;
}

.rv-subhud div:nth-child(1) { border-color: var(--rv-lime); }
.rv-subhud div:nth-child(3) { border-color: var(--rv-yellow); }
.rv-subhud div:nth-child(4) { border-color: var(--rv-pink); }

.rv-topbar span,
.rv-subhud span {
  display: block;
  color: var(--rv-cyan);
  font-size: .72rem;
  font-weight: 900;
}

.rv-topbar strong,
.rv-subhud strong {
  display: block;
  color: #fff;
  font-size: clamp(.86rem, 2vw, 1.35rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rv-cabinet {
  position: relative;
  background: #000;
  border: 4px solid var(--rv-cyan);
  box-shadow: 0 0 20px var(--rv-shadow), inset 0 0 40px rgba(101, 255, 0, .08);
  overflow: hidden;
  touch-action: none;
}

.rv-cabinet.rv-shake { animation: rvShake .16s linear 2; }
.rv-cabinet.rv-flash { animation: rvFlash .18s linear 2; }

#rvCanvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(70vh, 620px);
  image-rendering: pixelated;
  background: #000;
}

.rv-scanlines {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
  opacity: .45;
}

.rv-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: radial-gradient(circle, rgba(0,0,0,.45), rgba(0,0,0,.92));
  text-align: center;
}

.rv-overlay.is-hidden { display: none; }

.rv-overlay-card {
  width: min(480px, 100%);
  padding: 18px;
  border: 3px solid var(--rv-pink);
  background: #030008;
  box-shadow: 0 0 20px rgba(255, 79, 184, .35);
}

.rv-boot {
  margin: 0 0 8px;
  color: var(--rv-lime);
  font-size: .8rem;
}

.rv-overlay h2 {
  margin: 0 0 10px;
  color: var(--rv-yellow);
  font-size: clamp(2rem, 8vw, 4rem);
  text-shadow: 3px 3px 0 #000, 5px 5px 0 var(--rv-pink);
}

.rv-overlay p { color: #fff; }

.rv-name-label {
  display: block;
  margin-top: 14px;
  color: var(--rv-cyan);
  font-weight: 900;
}

.rv-name-input {
  width: min(300px, 100%);
  margin-top: 6px;
  padding: 10px;
  border: 3px solid var(--rv-lime);
  background: #000;
  color: var(--rv-lime);
  font-size: 1.1rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.rv-overlay-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

.rv-btn-primary { background: var(--rv-lime); }
.rv-btn-danger { background: var(--rv-pink); color: #fff; }
.rv-help, .rv-note { font-size: .78rem; color: #ddd; }

.rv-mobile-controls {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 12px;
  margin-top: 14px;
}

.rv-pad {
  min-height: 58px;
  font-size: 1.2rem;
  user-select: none;
  -webkit-user-select: none;
}

.rv-fire { background: linear-gradient(90deg, var(--rv-yellow), var(--rv-pink), var(--rv-cyan)); }

.rv-sidebar { display: grid; gap: 18px; }
.rv-sidebar .rv-panel { padding: 14px; }

.rv-sidebar h2 {
  margin: 0 0 10px;
  color: var(--rv-yellow);
  text-shadow: 2px 2px 0 #000, 3px 3px 0 var(--rv-pink);
  font-size: 1.25rem;
}

.rv-status p {
  min-height: 66px;
  margin: 0 0 12px;
  color: var(--rv-lime);
}

.rv-meter {
  height: 20px;
  border: 2px solid var(--rv-cyan);
  background: #050013;
  overflow: hidden;
}

.rv-meter i {
  display: block;
  height: 100%;
  width: 18%;
  background: repeating-linear-gradient(90deg, var(--rv-lime) 0 14px, var(--rv-yellow) 14px 28px, var(--rv-pink) 28px 42px);
  transition: width .2s linear;
}

.rv-toplist ol { margin: 0; padding-left: 28px; }
.rv-toplist li { margin: 6px 0; color: var(--rv-lime); }
.rv-controls-help p { color: #eee; font-size: .9rem; }

.rv-toplist h3 {
  margin: 16px 0 8px;
  color: var(--rv-cyan);
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.rv-toplist li b { color: #fff; }
.rv-toplist li small { color: var(--rv-cyan); font-size: .72rem; }
.rv-mini-list { opacity: .82; font-size: .86rem; }
.rv-server-error { color: var(--rv-pink); }
.rv-server-ok { color: var(--rv-lime); }

@keyframes rvFlash {
  0%, 100% { filter: none; }
  50% { filter: brightness(1.8) saturate(1.6); }
}

@keyframes rvShake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(3px, -2px); }
  50% { transform: translate(-3px, 2px); }
  75% { transform: translate(2px, 3px); }
}

@media (max-width: 980px) {
  .rv-header { align-items: flex-start; flex-direction: column; }
  .rv-nav { justify-content: flex-start; }
  .rv-layout { grid-template-columns: 1fr; }
  .rv-sidebar { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .rv-subhud { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .rv-logo-img { width: min(100%, 560px); }
  .rv-shell { width: min(100% - 12px, 1180px); padding-top: 8px; }
  .rv-gamebox { padding: 10px; }
  .rv-topbar { grid-template-columns: repeat(2, 1fr); }
  .rv-overlay-card { padding: 14px; }
  .rv-pad { min-height: 66px; }
}


/* Phase 4 clean high-score panel */
.rv-toplist h2 {
  color: var(--rv-yellow);
  text-shadow: 0 0 10px rgba(255,242,0,.45), 2px 2px 0 #000, 4px 4px 0 var(--rv-pink);
}

.rv-toplist ol:empty::before {
  content: "NO HIGH SCORE ROIS YET";
  display: block;
  color: var(--rv-lime);
  font-size: .88rem;
  padding: 4px 0;
}