:root {
  --zx-black: #000000;
  --zx-white: #ffffff;
  --zx-cyan: #00ffff;
  --zx-yellow: #ffff00;
  --zx-green: #00ff00;
  --zx-magenta: #ff00ff;
  --zx-red: #ff0000;
  --zx-blue: #2b6bff;
  --border: #c8c8c8;            /* классический серый бордюр Spectrum */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body {
  margin: 0; height: 100%;
  background: var(--border);
  color: var(--zx-white);
  font-family: "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  user-select: none; -webkit-user-select: none;
  overflow: hidden;
}

#frame {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: calc(8px + var(--safe-top)) 10px calc(8px + var(--safe-bottom));
  background: var(--border);
}

/* ---------- HUD ---------- */
#hud {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  background: var(--zx-black);
  color: var(--zx-yellow);
  padding: 8px 12px 6px;
  font-weight: 700;
  letter-spacing: 1px;
  border: 2px solid var(--zx-black);
  border-bottom: none;
}
.hud-cell { display: flex; flex-direction: column; line-height: 1.05; }
.hud-mid { align-items: center; color: var(--zx-cyan); }
.hud-lines { color: var(--zx-magenta); }
.hud-right { align-items: flex-end; color: var(--zx-green); }
.hud-label { font-size: 10px; letter-spacing: 2px; opacity: 0.85; }
#hud span:not(.hud-label) { font-size: 20px; font-variant-numeric: tabular-nums; }

#rainbow { display: flex; height: 6px; }
#rainbow i { flex: 1; }
#rainbow i:nth-child(1) { background: var(--zx-red); }
#rainbow i:nth-child(2) { background: var(--zx-yellow); }
#rainbow i:nth-child(3) { background: var(--zx-green); }
#rainbow i:nth-child(4) { background: var(--zx-cyan); }

/* ---------- stage / canvas ---------- */
#stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--zx-black);
  border: 2px solid var(--zx-black);
  border-top: none;
  min-height: 0;
  touch-action: manipulation;
}
#screen {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: var(--zx-black);
  touch-action: manipulation;
}

/* ---------- NEXT preview ---------- */
#next-box {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 5px 6px 6px;
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid var(--zx-cyan);
}
.next-label { font-size: 9px; letter-spacing: 2px; color: var(--zx-cyan); }
#next { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }

/* ---------- overlays ---------- */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.82);
  padding: 16px;
  z-index: 5;
}
.panel {
  width: 100%;
  max-width: 320px;
  text-align: center;
  border: 3px solid var(--zx-cyan);
  background: var(--zx-black);
  padding: 18px 16px 16px;
}
.panel h1 {
  margin: 0 0 10px;
  font-size: 30px;
  letter-spacing: 4px;
  color: var(--zx-yellow);
  text-shadow: 3px 3px 0 var(--zx-red);
}
#ov-sub { margin: 0 0 16px; font-size: 13px; color: var(--zx-cyan); line-height: 1.5; }

.ov-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 16px;
}
.ov-stats > div {
  border: 2px solid #222;
  padding: 8px 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.ov-stats .k { font-size: 10px; letter-spacing: 2px; color: #8a8a8a; }
.ov-stats b { font-size: 20px; color: var(--zx-green); }
#ov-score { color: var(--zx-green); }

.btn {
  display: block;
  width: 100%;
  margin: 8px 0 0;
  padding: 14px;
  font-family: inherit;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 2px;
  color: var(--zx-black);
  background: var(--zx-yellow);
  border: none;
  cursor: pointer;
}
.btn:active { transform: translateY(1px); }
.btn-ghost {
  background: var(--zx-black);
  color: var(--zx-cyan);
  border: 2px solid var(--zx-cyan);
}
.hint { margin: 14px 0 0; font-size: 11px; color: #7a7a7a; letter-spacing: 1px; line-height: 1.5; }

/* ---------- leaderboard ---------- */
.board-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  text-align: left;
  max-height: 46vh;
  overflow-y: auto;
}
.board-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px solid #1c1c1c;
  font-size: 14px;
}
.board-list .rank { color: var(--zx-yellow); width: 26px; font-weight: 700; }
.board-list .nm { flex: 1; color: var(--zx-white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-list .sc { color: var(--zx-green); font-variant-numeric: tabular-nums; }
.board-list li.me { background: #14241f; }
.board-list li.me .nm { color: var(--zx-cyan); }
.board-me { font-size: 12px; color: var(--zx-cyan); margin: 0 0 12px; min-height: 14px; }
.board-empty { color: #7a7a7a; font-size: 13px; padding: 16px 0; }

/* ---------- controls ---------- */
#controls {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  height: 58px;
}
.ctl {
  flex: 1;
  font-family: inherit;
  font-weight: 700;
  font-size: 22px;
  color: var(--zx-yellow);
  background: var(--zx-black);
  border: 2px solid #333;
  cursor: pointer;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ctl:active { background: #181818; transform: translateY(1px); }
.ctl-wide { flex: 1.6; font-size: 15px; letter-spacing: 2px; color: var(--zx-green); border-color: var(--zx-green); }

/* ---------- mute ---------- */
.mute {
  position: absolute;
  top: calc(2px + var(--safe-top));
  right: 14px;
  z-index: 6;
  width: 30px; height: 30px;
  border: 2px solid #333; background: rgba(0,0,0,0.5);
  color: var(--zx-yellow);
  font-size: 16px; cursor: pointer;
  opacity: 0.85;
}
.mute.off { color: #555; text-decoration: line-through; }