Infernal-Pinball/public/style.css

:root {
  --bg: #07060d;
  --panel: #12101f;
  --panel-edge: #2a2446;
  --text: #d9d4f2;
  --muted: #8d86b3;
  --dmd: #ff9d2e;
  --dmd-dim: rgba(255, 157, 46, 0.12);
  --accent: #ff3fa4;
  --accent-2: #34e7ff;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background:
    radial-gradient(ellipse at 30% 0%, #1d1440 0%, transparent 60%),
    radial-gradient(ellipse at 90% 100%, #0f2a44 0%, transparent 55%),
    var(--bg);
  color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}

.cabinet {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  height: 100%;
  padding: 12px;
}

/* A slight downward camera angle onto the table, like looking at a cabinet from in front of it: the
   canvas still renders the flat, straight-down game exactly as the physics sees it — this tilts that
   finished picture in 3D space, so no game or input coordinate changes with it.
   .playfield is sized (by main.js) to the box the tilted table should visually occupy; .playfield-tilt
   is positioned absolutely within it and holds a canvas rendered taller than that box on purpose — the
   tilt's own perspective foreshortening compresses it back down to fit, bottom edge anchored in place. */
.playfield {
  flex: none;
  position: relative;
  perspective: 1900px;
  perspective-origin: 50% 15%;
}

.playfield-tilt {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) rotateX(28deg);
  transform-origin: 50% 100%;
  line-height: 0;
  border-radius: 14px;
  box-shadow:
    0 0 0 2px #2b2150,
    0 0 50px rgba(120, 70, 255, 0.4),
    0 45px 70px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

canvas {
  display: block;
}

.backbox {
  flex: none;
  width: 300px;
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.marquee {
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 6px var(--accent), 0 0 22px var(--accent);
}

.marquee span {
  color: var(--accent-2);
  text-shadow: 0 0 6px var(--accent-2), 0 0 22px var(--accent-2);
}

.dmd {
  background-color: #120a02;
  background-image: radial-gradient(circle, rgba(255, 157, 46, 0.09) 1px, transparent 1.3px);
  background-size: 4px 4px;
  border: 2px solid #3b2508;
  border-radius: 8px;
  padding: 12px 14px;
  text-align: center;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--dmd);
  text-shadow: 0 0 4px var(--dmd), 0 0 12px rgba(255, 140, 20, 0.6);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.8);
}

.dmd-score {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.dmd-message {
  font-size: 18px;
  font-weight: 700;
  min-height: 1.4em;
  letter-spacing: 0.1em;
}

.dmd-sub {
  font-size: 12px;
  min-height: 1.4em;
  letter-spacing: 0.12em;
  opacity: 0.85;
}

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
}

.stats div {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  padding: 6px 10px;
}

.stats dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.stats dd {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  padding: 10px 12px;
}

.panel h2 {
  margin: 0 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
  font-size: 13px;
}

.keys li {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.keys li span {
  flex: none;
  min-width: 70px;
}

.rules li {
  color: var(--text);
}

.rules b {
  color: var(--accent-2);
  font-weight: 600;
}

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 1px 5px;
  border: 1px solid #4a4270;
  border-bottom-width: 3px;
  border-radius: 5px;
  background: #1c1833;
  font: 600 12px/1.3 ui-monospace, Menlo, Consolas, monospace;
  text-align: center;
  color: #fff;
}

@media (max-width: 760px) {
  body {
    overflow: auto;
  }

  .cabinet {
    flex-direction: column;
    height: auto;
  }

  .backbox {
    width: min(100%, 420px);
    max-height: none;
  }
}