:root {
  --bg: #080705;
  --panel: #16130f;
  --panel-deep: #090806;

  --brass: #c79a45;
  --bright-brass: #f2cd78;
  --aged-gold: #957039;
  --copper: #a9512d;
  --rust: #69301f;

  --emerald: #2d765f;
  --dark-emerald: #123b34;
  --electric-teal: #55d9c2;

  --cream: #f4e6c4;
  --text-main: #f8edcf;
  --text-muted: #b9aa8d;

  --border: #826536;
  --shadow: rgba(0, 0, 0, 0.9);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family:
    "Trebuchet MS",
    "Arial Narrow",
    system-ui,
    sans-serif;
}

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 8px;

  background:
    linear-gradient(
      90deg,
      rgba(199, 154, 69, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      rgba(199, 154, 69, 0.025) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 50% 0%,
      #26352f 0,
      #11120f 28%,
      #070604 72%,
      #020201 100%
    );

  background-size:
    26px 26px,
    26px 26px,
    auto;

  color: var(--text-main);
}

button {
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* Main brass-and-iron cabinet */
.game-shell {
  position: relative;
  width: min(100%, 520px);
  min-height: calc(100dvh - 16px);
  margin: 0 auto;
  padding: 13px;

  display: flex;
  flex-direction: column;
  gap: 9px;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.025),
      transparent 35%
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.012) 0,
      rgba(255, 255, 255, 0.012) 1px,
      transparent 1px,
      transparent 5px
    ),
    linear-gradient(
      145deg,
      #211d16 0%,
      #100e0b 48%,
      #070604 100%
    );

  border: 2px solid var(--aged-gold);
  border-radius: 7px;

  box-shadow:
    inset 0 0 0 3px #080705,
    inset 0 0 0 4px rgba(242, 205, 120, 0.28),
    inset 0 0 30px rgba(0, 0, 0, 0.75),
    0 20px 60px var(--shadow),
    0 0 22px rgba(199, 154, 69, 0.12);
}

/* Decorative inner cabinet frame */
.game-shell::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 0;
  pointer-events: none;

  border: 1px solid rgba(242, 205, 120, 0.24);
  border-radius: 3px;
}

/* Subtle futuristic energy glow */
.game-shell::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: -50px;
  height: 100px;
  z-index: 0;
  pointer-events: none;

  background: radial-gradient(
    ellipse,
    rgba(85, 217, 194, 0.15),
    transparent 70%
  );

  filter: blur(7px);
}

.game-shell > * {
  position: relative;
  z-index: 1;
}

/* Header */
.top-bar {
  min-height: 48px;
  padding: 6px 7px 6px 12px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  flex: 0 0 auto;

  background:
    linear-gradient(
      90deg,
      rgba(199, 154, 69, 0.12),
      transparent 45%,
      rgba(85, 217, 194, 0.05)
    ),
    #0c0b08;

  border: 1px solid var(--border);
  border-left: 4px solid var(--brass);
  border-radius: 3px;

  box-shadow:
    inset 0 0 12px rgba(0, 0, 0, 0.8),
    0 2px 8px rgba(0, 0, 0, 0.55);
}

.top-bar h1 {
  position: relative;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: clamp(1rem, 4vw, 1.45rem);
  font-weight: 900;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;

  color: var(--bright-brass);

  text-shadow:
    0 1px 0 #5a3c17,
    0 0 7px rgba(242, 205, 120, 0.25);
}

.top-bar h1::after {
  content: "◆";
  margin-left: 0.5em;
  vertical-align: 0.08em;

  color: var(--electric-teal);
  font-size: 0.55em;

  text-shadow: 0 0 8px rgba(85, 217, 194, 0.8);
}

/* Restart lever/button */
#restartBtn {
  min-height: 40px;
  padding: 7px 14px;

  border: 1px solid var(--bright-brass);
  border-bottom-color: #493319;
  border-radius: 3px;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.12),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      #9e4d2b,
      #552516
    );

  color: var(--cream);

  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;

  box-shadow:
    inset 0 0 0 2px rgba(20, 10, 5, 0.55),
    0 3px 0 #30150d,
    0 5px 10px rgba(0, 0, 0, 0.6);

  transition:
    transform 100ms ease,
    filter 100ms ease,
    box-shadow 100ms ease;
}

#restartBtn:hover {
  filter: brightness(1.15);
}

#restartBtn:active {
  transform: translateY(3px);

  box-shadow:
    inset 0 0 0 2px rgba(20, 10, 5, 0.7),
    0 0 0 #30150d,
    0 2px 5px rgba(0, 0, 0, 0.65);
}

/* Mechanical instrument display */
.hud {
  padding: 7px 10px;

  display: flex;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
  flex: 0 0 auto;

  color: var(--text-muted);

  font-family:
    "Courier New",
    monospace;

  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.014) 0,
      rgba(255, 255, 255, 0.014) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(180deg, #101914, #070b09);

  border: 1px solid #57472a;
  border-radius: 2px;

  box-shadow:
    inset 0 0 13px rgba(0, 0, 0, 0.9),
    inset 0 0 8px rgba(85, 217, 194, 0.04);
}

.hud div {
  padding: 3px 9px;

  border-left: 1px solid rgba(199, 154, 69, 0.26);
}

.hud div:first-child {
  border-left: none;
}

.hud span {
  color: var(--electric-teal);
  font-weight: 900;

  text-shadow:
    0 0 5px rgba(85, 217, 194, 0.75),
    0 0 12px rgba(85, 217, 194, 0.25);
}

/* Main playfield */
#game {
  display: block;

  width: min(
    100%,
    420px,
    calc((100dvh - 190px) / 2)
  );

  height: auto;
  aspect-ratio: 1 / 2;

  align-self: center;
  flex: 0 1 auto;

  border: 4px solid #16110a;
  border-radius: 2px;

  outline: 2px solid var(--aged-gold);
  outline-offset: 1px;

  background:
    linear-gradient(
      rgba(85, 217, 194, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(85, 217, 194, 0.035) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at center,
      #12231f 0,
      #07100e 45%,
      #020403 100%
    );

  background-size:
    21px 21px,
    21px 21px,
    auto;

  box-shadow:
    inset 0 0 28px rgba(0, 0, 0, 0.95),
    inset 0 0 12px rgba(85, 217, 194, 0.08),
    0 0 0 4px #090704,
    0 0 0 6px rgba(199, 154, 69, 0.55),
    0 8px 20px rgba(0, 0, 0, 0.8),
    0 0 18px rgba(85, 217, 194, 0.08);

  touch-action: none;
}

/* Brass console controls */
.touch-controls {
  width: min(100%, 420px);
  align-self: center;
  flex: 0 0 auto;

  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;

  padding: 6px;

  background:
    linear-gradient(
      180deg,
      rgba(199, 154, 69, 0.09),
      transparent
    ),
    #090806;

  border: 1px solid #59452a;
  border-radius: 3px;

  box-shadow:
    inset 0 0 13px rgba(0, 0, 0, 0.9),
    0 3px 8px rgba(0, 0, 0, 0.55);
}

.touch-controls button {
  position: relative;

  min-width: 0;
  min-height: 48px;
  padding: 6px 2px;

  border: 1px solid var(--aged-gold);
  border-bottom-color: #3e2d16;
  border-radius: 50%;

  background:
    radial-gradient(
      circle at 35% 25%,
      #6f6854 0,
      #2a2922 33%,
      #11100d 70%
    );

  color: var(--bright-brass);

  font-size: 1.05rem;
  font-weight: 900;

  text-shadow:
    0 1px 0 #000,
    0 0 5px rgba(242, 205, 120, 0.2);

  box-shadow:
    inset 0 0 0 2px rgba(5, 4, 2, 0.75),
    inset 1px 2px 3px rgba(255, 255, 255, 0.12),
    0 3px 0 #342816,
    0 5px 8px rgba(0, 0, 0, 0.65);

  transition:
    transform 80ms ease,
    color 80ms ease,
    box-shadow 80ms ease;
}

.touch-controls button::after {
  content: "";
  position: absolute;
  inset: 4px;
  pointer-events: none;

  border: 1px solid rgba(242, 205, 120, 0.18);
  border-radius: inherit;
}

.touch-controls button:active {
  transform: translateY(3px) scale(0.96);

  color: var(--electric-teal);

  background:
    radial-gradient(
      circle at center,
      #245e52,
      #112d28 45%,
      #080c0a 80%
    );

  box-shadow:
    inset 0 0 10px rgba(0, 0, 0, 0.9),
    0 0 0 #342816,
    0 0 12px rgba(85, 217, 194, 0.25);
}

/* Give the drop control a larger mechanical lever appearance */
.touch-controls .wide {
  grid-column: auto;
  border-radius: 4px;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.1),
      transparent 40%
    ),
    linear-gradient(
      135deg,
      #8f4528,
      #3d1c12
    );

  color: var(--cream);

  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;

  box-shadow:
    inset 0 0 0 2px rgba(24, 10, 5, 0.65),
    0 3px 0 #2b130c,
    0 5px 8px rgba(0, 0, 0, 0.65);
}

.touch-controls .wide:active {
  background:
    linear-gradient(
      135deg,
      var(--emerald),
      var(--dark-emerald)
    );

  color: #d8fff7;
}

/* Desktop keyboard instructions */
.controls {
  width: min(100%, 420px);
  align-self: center;
  padding: 9px 11px;

  color: var(--text-muted);

  font-family:
    "Courier New",
    monospace;

  font-size: 0.79rem;
  line-height: 1.45;

  background: rgba(7, 7, 5, 0.8);

  border: 1px solid rgba(149, 112, 57, 0.55);
  border-left: 3px solid var(--emerald);
  border-radius: 2px;
}

.controls h2 {
  margin-bottom: 4px;

  color: var(--bright-brass);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 0.88rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Keyboard focus visibility */
button:focus-visible {
  outline: 2px solid var(--electric-teal);
  outline-offset: 3px;

  box-shadow:
    0 0 0 2px #080705,
    0 0 12px rgba(85, 217, 194, 0.8);
}

/* Small-screen layout */
@media (max-width: 600px) {
  body {
    overflow: hidden;
  }

  .game-shell {
    min-height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    overflow: hidden;
  }

  .controls {
    display: none;
  }

  #game {
    width: min(
      100%,
      calc((100dvh - 165px) / 2)
    );
  }

  .touch-controls button {
    min-height: 46px;
  }
}

/* Short phone screens */
@media (max-height: 650px) {
  .game-shell {
    padding: 8px;
    gap: 5px;
  }

  .top-bar {
    min-height: 39px;
    padding: 4px 5px 4px 9px;
  }

  .top-bar h1 {
    font-size: 0.86rem;
  }

  #restartBtn {
    min-height: 32px;
    padding: 4px 9px;
    font-size: 0.67rem;
  }

  .hud {
    padding: 4px 7px;
    font-size: 0.69rem;
    gap: 4px;
  }

  .hud div {
    padding: 2px 5px;
  }

  #game {
    width: min(
      100%,
      calc((100dvh - 140px) / 2)
    );
  }

  .touch-controls {
    gap: 4px;
    padding: 4px;
  }

  .touch-controls button {
    min-height: 38px;
    border-radius: 50%;
    font-size: 0.95rem;
  }

  .touch-controls .wide {
    border-radius: 3px;
    font-size: 0.6rem;
  }
}