/* Night Comet: a midnight-blue playfield, chrome rails, three candy-coloured pop bumpers, amber inserts and a steel
   ball. */
:root {
  --night: #070818;          /* the room behind the table */
  --field-a: #1d1f5c;        /* the playfield: the light middle */
  --field-b: #0b0c2e;        /* the playfield: the dark edges */
  --rail: #c9cfe0;           /* the chrome rails */
  --rail-dark: #4b5170;      /* the rails' shade */
  --apron: #141433;          /* the apron at the bottom */
  --apron-ink: #8f8bd6;      /* the words on the apron */
  --tail-a: #ff5fa2;         /* the comet's tail, near the head */
  --tail-b: #5f6bff;         /* the comet's tail, at the end */
  --head: #ffe9b0;           /* the comet's head */
  --orbit: #7b80ff;          /* the orbit rings */
  --bumper-1: #ff4f8b;       /* the first pop bumper */
  --bumper-2: #31d6c4;       /* the second pop bumper */
  --bumper-3: #ffb13b;       /* the third pop bumper */
  --skirt: #e9ecf6;          /* the bumpers' white skirt */
  --sling: #ff4f8b;          /* the slingshots */
  --rubber: #f5f3ff;         /* the rubber bands */
  --flipper: #f5f3ff;        /* the flippers */
  --flipper-rubber: #ff4f8b; /* the rubber edge of the flippers */
  --target: #ffb13b;         /* the drop targets */
  --insert-off: #2c2a63;     /* a letter insert when it is off */
  --insert-on: #ffb13b;      /* a letter insert when it is lit */
  --flash: #fffbe8;          /* the full flash of a bumper, a slingshot, an insert */
  --ramp: #8fe8ff;           /* the clear plastic of the ramp */
  --ink: #f2efff;            /* the words */
  --score: #ffb13b;          /* the score digits */
  --score-dim: #3b2f55;      /* the leading zeros of the score */
  --pop: #fffbe8;            /* the points that float up */
}

* {
  box-sizing: border-box;
}

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

body {
  background: var(--night);
  color: var(--ink);
  font-family: 'Unbounded Variable', 'Unbounded', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  gap: clamp(4px, 1.4vh, 12px);
  padding: clamp(10px, 2.4vh, 22px) 16px clamp(8px, 1.6vh, 16px);
  background:
    radial-gradient(60% 50% at 50% 70%, color-mix(in srgb, var(--field-a) 45%, transparent), transparent 70%),
    var(--night);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

/* ---- the backbox ---- */
.backbox {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  width: min(420px, 100%);
  padding: 10px 18px 8px;
  border-radius: 14px;
  background: linear-gradient(180deg, #17173f, #0d0d27);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rail) 30%, transparent), 0 10px 30px rgb(0 0 0 / 0.45);
  --kick: 0;
  --flash: 0;
}

.backbox::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--score);
  opacity: calc(var(--flash) * 0.35);
  pointer-events: none;
}

.backbox__title {
  margin: 0;
  font-size: clamp(10px, 1.5vh, 13px);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--tail-a);
}

.score {
  display: flex;
  align-items: flex-end;
  font-size: clamp(22px, 4.4vh, 38px);
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  transform: scale(calc(1 + var(--kick) * 0.06));
}

.digit {
  display: inline-block;
  height: 1.1em;
  overflow: hidden;
  color: var(--score-dim);
  transition: color 0.3s;
}

.digit.is-lit,
.digit__sep.is-lit {
  color: var(--score);
}

.digit__reel {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.digit__reel span {
  display: block;
  height: 1.1em;
  width: 0.78em;
  text-align: center;
}

.digit__sep {
  color: var(--score-dim);
  width: 0.3em;
  transition: color 0.3s;
}

.message {
  display: flex;
  justify-content: center;
  height: 1.3em;
  margin: 2px 0 0;
  overflow: hidden;
  font-size: clamp(10px, 1.5vh, 13px);
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--ink);
}

.message span {
  display: inline-block;
}

/* ---- the tilted table ---- */
.tilt {
  --tilt: 26deg;
  --tilt-extra: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  perspective: 1400px;
  perspective-origin: 50% 0%;
}

.tilt__plane {
  width: 100%;
  height: 100%;
  transform: rotateX(calc(var(--tilt) + var(--tilt-extra) * 1deg));
  transform-origin: 50% 100%;
}

.table {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.stop-pf-a { stop-color: var(--field-a); }
.stop-pf-b { stop-color: var(--field-b); }
.stop-tail-a { stop-color: var(--tail-a); }
.stop-tail-b { stop-color: var(--tail-b); stop-opacity: 0; }

.playfield {
  fill: url(#pf);
}

.comet__tail {
  fill: url(#tail);
  opacity: 0.55;
}

.comet__tail--thin {
  opacity: 0.3;
}

.comet__head {
  fill: var(--tail-a);
  opacity: 0.45;
}

.comet__core {
  fill: var(--head);
  opacity: 0.75;
}

.orbit {
  fill: none;
  stroke: var(--orbit);
  stroke-width: 1.5;
  opacity: 0.4;
}

.orbit--dash {
  stroke-dasharray: 2 7;
  stroke-linecap: round;
  opacity: 0.3;
}

.stars path {
  fill: var(--head);
  opacity: 0.55;
}

.label {
  fill: var(--orbit);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3em;
  opacity: 0.75;
}

.apron {
  fill: var(--apron);
}

.apron__name {
  fill: var(--apron-ink);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.rail {
  fill: none;
  stroke: var(--rail);
  stroke-width: 6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.rail--thin {
  stroke-width: 4;
}

.lockbar {
  fill: var(--rail-dark);
  stroke: var(--rail);
  stroke-width: 1.5;
}

.lane {
  fill: rgb(0 0 0 / 0.28);
}

.post {
  fill: var(--rubber);
  stroke: var(--rail-dark);
  stroke-width: 2;
}

.lip {
  stroke: var(--ramp);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.8;
}

.gate {
  stroke: var(--rail);
  stroke-width: 3;
  stroke-linecap: round;
}

.shadow {
  fill: #000;
  opacity: 0.35;
}

/* the slingshots */
.sling__body {
  fill: var(--sling);
  stroke: var(--rail-dark);
  stroke-width: 2;
  stroke-linejoin: round;
}

.sling__flash {
  fill: var(--flash);
  opacity: 0;
}

.sling__band {
  fill: none;
  stroke: var(--rubber);
  stroke-width: 5;
  stroke-linecap: round;
}

/* the drop targets and the letter inserts */
.target__slot {
  fill: rgb(0 0 0 / 0.55);
}

.target__face {
  fill: var(--target);
}

.target__front {
  fill: color-mix(in srgb, var(--target) 60%, #000);
}

.insert__letter {
  fill: var(--night);
  font-size: 9px;
  font-weight: 800;
}

/* the pop bumpers */
.bumper__skirt {
  fill: var(--skirt);
  stroke: var(--rail-dark);
  stroke-width: 2;
}

.bumper__top--0 { fill: var(--bumper-1); }
.bumper__top--1 { fill: var(--bumper-2); }
.bumper__top--2 { fill: var(--bumper-3); }

.bumper__ring {
  fill: none;
  stroke: var(--skirt);
  stroke-width: 2.5;
  opacity: 0.85;
}

.bumper__flash {
  fill: var(--flash);
  opacity: 0;
}

.bumper__shine {
  fill: #fff;
  opacity: 0.35;
}

/* the flippers */
.flipper {
  fill: var(--flipper);
  stroke: var(--flipper-rubber);
  stroke-width: 3;
  stroke-linejoin: round;
}

.flipper__shine {
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.6;
}

.flipper__pin {
  fill: var(--rail-dark);
}

/* the ramp */
.ramp__shadow {
  fill: none;
  stroke: #000;
  stroke-width: 26;
  stroke-linecap: round;
  opacity: 0.35;
  filter: url(#soft);
}

.ramp__rails {
  fill: none;
  stroke: var(--ramp);
  stroke-width: 28;
  stroke-linecap: butt;
}

.ramp__bed {
  fill: none;
  stroke: color-mix(in srgb, var(--field-b) 78%, var(--ramp));
  stroke-width: 21;
  stroke-opacity: 0.88;
  stroke-linecap: butt;
}

.ramp__line {
  fill: none;
  stroke: var(--flash);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 60 2000;
  opacity: 0;
}

.chevron {
  fill: var(--insert-on);
}

/* the plunger */
.plunger__spring {
  fill: none;
  stroke: var(--rail);
  stroke-width: 2;
}

.plunger__tip {
  fill: var(--sling);
}

/* the ball */
.ball {
  fill: url(#steel);
}

.ball__glint {
  fill: #fff;
  opacity: 0.9;
}

.ball__edge {
  fill: none;
  stroke: #fff;
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: 0.35;
}

.ball__shadow {
  fill: #000;
  filter: url(#soft);
}

/* the points that float up */
.pop {
  fill: var(--pop);
  stroke: var(--night);
  stroke-width: 3;
  paint-order: stroke;
  font-size: 13px;
  font-weight: 800;
  pointer-events: none;
}

.hint {
  margin: 0;
  font-size: clamp(10px, 1.5vh, 12px);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
  text-align: center;
}