@import url('https://fonts.googleapis.com/css2?family=Neonderthaw&family=Outfit:wght@400;600;800&display=swap');

/* ============================================
   Guess The Citroën — Route 66 / neon rework
   More glow. Less blunt fat-heading nonsense.
   ============================================ */

:root {
  --bg-deep: #050409;
  --bg-panel: rgba(8, 7, 14, 0.76);
  --bg-panel-strong: rgba(8, 7, 14, 0.88);
  --border-soft: rgba(255, 220, 170, 0.18);

  --cream: #fff4dc;
  --yellow: #ffd36d;
  --orange: #ff944d;
  --pink: #ff4fa3;
  --pink-hot: #ff2f92;
  --cyan: #61ebff;
  --cyan-hot: #13dfff;
  --red: #ff5847;
}

html {
  min-height: 100%;
  background: var(--bg-deep);
}

body {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  color: var(--cream);
  background: transparent !important;
  font-family: "Outfit", Arial, sans-serif;
}

/* Background image */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;

  background:
    url("/guess-the-citroen/assets/route66-bg.png")
    center center / cover no-repeat;

  transform: scale(1.015);
  filter: saturate(1.08);
}

/* Black translucent filter, but less brutal so we can actually see the bloody background */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;

  background:
    radial-gradient(circle at 50% 14%, rgba(255, 126, 61, 0.18), transparent 40%),
    radial-gradient(circle at 15% 30%, rgba(255, 79, 163, 0.12), transparent 30%),
    radial-gradient(circle at 82% 20%, rgba(97, 235, 255, 0.10), transparent 28%),
    linear-gradient(to bottom, rgba(0,0,0,0.44), rgba(5,4,10,0.65));
}

/* Panels */
header,
main > section,
.card,
.panel,
.game,
.game-card,
.board,
.controls,
.rules,
.help,
.scoreboard,
.leaderboard,
details,
dialog,
.modal-content,
#reveal,
#msg {
  background:
    linear-gradient(
      145deg,
      rgba(20, 12, 24, 0.82),
      rgba(7, 6, 12, 0.74)
    );

  border: 1px solid var(--border-soft);
  border-radius: 22px;

  box-shadow:
    0 16px 46px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 0 18px rgba(255,79,163,0.10),
    0 0 28px rgba(97,235,255,0.06);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Main title */
h1,
.site-title,
.brand,
.logo,
header h1 {
  font-family: "Neonderthaw", cursive !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  line-height: 1.05;
  color: #ffe7f3;

  text-shadow:
    0 0 4px rgba(255,255,255,0.92),
    0 0 10px rgba(255,255,255,0.72),
    0 0 18px rgba(255,79,163,0.95),
    0 0 34px rgba(255,79,163,0.88),
    0 0 54px rgba(255,79,163,0.72),
    0 0 82px rgba(255,79,163,0.52);

  filter: saturate(1.05);
}

h2,
h3,
.modal h2,
.rules h2,
.leaderboard h2 {
  color: #fff7e5;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  text-shadow:
    0 0 4px rgba(255,255,255,0.55),
    0 0 10px rgba(255,211,109,0.58),
    0 0 22px rgba(255,148,77,0.40);
}

/* Main image frame */
.image-wrap {
  overflow: hidden;
  background: rgba(0, 0, 0, 0.90);
  border: 2px solid rgba(255, 211, 109, 0.30);
  border-radius: 24px;

  box-shadow:
    0 22px 56px rgba(0,0,0,0.70),
    0 0 18px rgba(255,79,163,0.22),
    0 0 36px rgba(97,235,255,0.12),
    inset 0 0 26px rgba(255,255,255,0.03);
}

.image-overlay {
  background:
    linear-gradient(
      to top,
      rgba(0,0,0,0.98),
      rgba(12,7,18,0.90)
    ) !important;

  border-top: 1px solid rgba(255,211,109,0.22);
  box-shadow:
    0 -8px 24px rgba(255,79,163,0.10);
}

.image-overlay .answer {
  font-family: "Outfit", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--cream);

  text-shadow:
    0 0 6px rgba(255,148,77,0.54),
    0 0 14px rgba(255,79,163,0.28);
}

/* Buttons - louder neon */
button,
.button,
.btn,
input[type="button"],
input[type="submit"] {
  color: #fffaf0;
  font-family: "Outfit", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  background:
    linear-gradient(
      180deg,
      #ff6b61 0%,
      #f2417b 52%,
      #a31e52 100%
    );

  border: 1px solid rgba(255, 222, 165, 0.55);
  border-radius: 14px;

  box-shadow:
    0 4px 0 rgba(90, 16, 36, 0.95),
    0 0 12px rgba(255,79,163,0.65),
    0 0 26px rgba(255,79,163,0.36),
    inset 0 0 10px rgba(255,255,255,0.18);

  transition:
    transform 0.15s ease,
    filter 0.15s ease,
    box-shadow 0.15s ease;
}

button:hover,
.button:hover,
.btn:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
  transform: translateY(-1px);
  filter: brightness(1.10);

  box-shadow:
    0 6px 0 rgba(90, 16, 36, 0.95),
    0 0 18px rgba(255,79,163,0.85),
    0 0 38px rgba(255,79,163,0.48),
    inset 0 0 12px rgba(255,255,255,0.22);
}

button:active,
.button:active,
.btn:active {
  transform: translateY(3px);
  box-shadow:
    0 2px 0 rgba(90, 16, 36, 0.95),
    0 0 14px rgba(255,79,163,0.72);
}

button.secondary,
button.hint,
.btn.secondary,
#btnHint,
#hintButton {
  background:
    linear-gradient(
      180deg,
      #33d8ff 0%,
      #13a9d9 50%,
      #0b5675 100%
    );

  box-shadow:
    0 4px 0 rgba(4, 45, 61, 0.95),
    0 0 12px rgba(97,235,255,0.70),
    0 0 28px rgba(97,235,255,0.34),
    inset 0 0 10px rgba(255,255,255,0.16);
}

/* Inputs */
input,
select,
textarea {
  color: var(--cream);
  background: rgba(4, 4, 8, 0.88);
  border: 1px solid rgba(255, 241, 210, 0.22);
  border-radius: 12px;

  box-shadow:
    inset 0 1px 8px rgba(0, 0, 0, 0.52),
    0 0 0 rgba(97,235,255,0);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--cyan-hot);

  box-shadow:
    0 0 0 3px rgba(97,235,255,0.14),
    0 0 14px rgba(97,235,255,0.28),
    inset 0 0 10px rgba(255,255,255,0.04);
}

input::placeholder,
textarea::placeholder {
  color: rgba(255, 241, 210, 0.56);
}

/* Locked guess chips */
.chip,
.chip-locked {
  background: rgba(255, 79, 163, 0.14);
  border: 1px solid rgba(255, 79, 163, 0.34);
  color: var(--cream);
  box-shadow:
    0 0 10px rgba(255,79,163,0.16);
}

/* Links */
a {
  color: #9ef5ff;
  text-underline-offset: 3px;
}

a:hover {
  color: #ffffff;
  text-shadow:
    0 0 8px rgba(97,235,255,0.85),
    0 0 18px rgba(97,235,255,0.48);
}

small,
.muted,
.subtitle,
.help-text {
  color: rgba(255, 241, 210, 0.74);
}

table {
  background: rgba(7,7,12,0.60);
}

th {
  color: #fff5d8;
  background: rgba(255,79,163,0.10);
  text-shadow:
    0 0 8px rgba(255,79,163,0.18);
}

td,
th {
  border-color: rgba(255, 241, 210, 0.10);
}

hr {
  height: 1px;
  border: 0;
  background:
    linear-gradient(
      to right,
      transparent,
      rgba(255,79,163,0.78),
      rgba(97,235,255,0.78),
      transparent
    );

  box-shadow:
    0 0 10px rgba(255,79,163,0.34);
}

@media (max-width: 700px) {
  header,
  main > section,
  .card,
  .panel,
  .game,
  details {
    border-radius: 16px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }

  .image-wrap {
    border-radius: 16px;
  }

  h1,
  .site-title,
  .brand,
  .logo,
  header h1 {
    font-size: clamp(2.2rem, 11vw, 4.1rem);
  }
}


/* GTC HISTORY SCROLL FIX */
#modalHistory {
  align-items: flex-start !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

#modalHistory .modal-inner {
  width: min(1100px, 94vw);
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#historyList {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 8px;
}

#historyList::-webkit-scrollbar {
  width: 12px;
}

#historyList::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.45);
  border-radius: 10px;
}

#historyList::-webkit-scrollbar-thumb {
  background: linear-gradient(
    to bottom,
    rgba(255, 79, 163, 0.9),
    rgba(97, 235, 255, 0.9)
  );
  border-radius: 10px;
  box-shadow:
    0 0 10px rgba(255, 79, 163, 0.7),
    0 0 18px rgba(97, 235, 255, 0.45);
}

@media (max-width: 700px) {
  #modalHistory {
    padding: 8px;
  }

  #modalHistory .modal-inner {
    width: 100%;
    max-height: calc(100dvh - 16px);
    margin: 8px auto;
    padding: 14px;
  }

  #historyList {
    grid-template-columns: 1fr;
  }
}


/* GTC NEON PULSE V2 */

@keyframes gtc-pink-text-pulse {
  0%, 100% {
    text-shadow:
      0 0 3px #fff,
      0 0 8px #fff,
      0 0 16px rgba(255, 79, 163, 0.9),
      0 0 30px rgba(255, 47, 146, 0.75),
      0 0 52px rgba(255, 47, 146, 0.55);
  }

  50% {
    text-shadow:
      0 0 5px #fff,
      0 0 14px #fff,
      0 0 26px rgba(255, 79, 163, 1),
      0 0 48px rgba(255, 47, 146, 0.95),
      0 0 82px rgba(255, 47, 146, 0.78);
  }
}

@keyframes gtc-blue-text-pulse {
  0%, 100% {
    text-shadow:
      0 0 3px #fff,
      0 0 8px rgba(185, 249, 255, 0.9),
      0 0 17px rgba(97, 235, 255, 0.78),
      0 0 32px rgba(19, 223, 255, 0.58);
  }

  50% {
    text-shadow:
      0 0 5px #fff,
      0 0 14px rgba(215, 253, 255, 1),
      0 0 28px rgba(97, 235, 255, 1),
      0 0 54px rgba(19, 223, 255, 0.88),
      0 0 78px rgba(19, 223, 255, 0.58);
  }
}

@keyframes gtc-pink-box-pulse {
  0%, 100% {
    box-shadow:
      0 4px 0 rgba(90, 16, 36, 0.95),
      0 0 10px rgba(255, 79, 163, 0.58),
      0 0 22px rgba(255, 79, 163, 0.28),
      inset 0 0 10px rgba(255, 255, 255, 0.16);
  }

  50% {
    box-shadow:
      0 4px 0 rgba(90, 16, 36, 0.95),
      0 0 18px rgba(255, 79, 163, 0.95),
      0 0 38px rgba(255, 47, 146, 0.62),
      inset 0 0 15px rgba(255, 255, 255, 0.25);
  }
}

@keyframes gtc-blue-box-pulse {
  0%, 100% {
    box-shadow:
      0 4px 0 rgba(4, 45, 61, 0.95),
      0 0 11px rgba(97, 235, 255, 0.62),
      0 0 24px rgba(19, 223, 255, 0.28);
  }

  50% {
    box-shadow:
      0 4px 0 rgba(4, 45, 61, 0.95),
      0 0 19px rgba(97, 235, 255, 1),
      0 0 42px rgba(19, 223, 255, 0.68);
  }
}

@keyframes gtc-frame-pulse {
  0%, 100% {
    border-color: rgba(255, 79, 163, 0.28);

    box-shadow:
      0 18px 50px rgba(0, 0, 0, 0.65),
      0 0 12px rgba(255, 79, 163, 0.18),
      0 0 24px rgba(97, 235, 255, 0.10);
  }

  50% {
    border-color: rgba(97, 235, 255, 0.52);

    box-shadow:
      0 18px 50px rgba(0, 0, 0, 0.65),
      0 0 22px rgba(255, 79, 163, 0.45),
      0 0 42px rgba(97, 235, 255, 0.30);
  }
}

/* Pink main neon sign */
h1,
.site-title,
.brand,
.logo,
header h1,
.topbar h1 {
  animation:
    gtc-pink-text-pulse 2.8s ease-in-out infinite;
}

/* Blue swirly section titles */
h2,
h3,
.modal h2,
.modal h3,
.rules h2,
.rules h3,
.leaderboard h2,
.leaderboard h3 {
  color: #dffcff !important;
  font-family: "Neonderthaw", cursive !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0.025em !important;
  line-height: 1.1;

  animation:
    gtc-blue-text-pulse 3.2s ease-in-out infinite;
}

/* Pulsing pink buttons */
button,
.button,
.btn,
input[type="button"],
input[type="submit"] {
  animation:
    gtc-pink-box-pulse 2.7s ease-in-out infinite;
}

/* Pulsing blue buttons */
button.secondary,
button.hint,
.btn.secondary,
#btnHint,
#hintButton {
  animation:
    gtc-blue-box-pulse 2.9s ease-in-out infinite;
}

/* Pulsing frames */
.image-wrap,
.modal-inner,
header,
main > section {
  animation:
    gtc-frame-pulse 4s ease-in-out infinite;
}

/* Cyan links/chips also breathe */
.image-overlay .links a,
.history-item,
.chip,
.chip-locked {
  animation:
    gtc-blue-text-pulse 3.6s ease-in-out infinite;
}

/* Do not make people ill if reduced motion is requested */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* GTC CHIP LOCK OVERLAY */

.chip-lock-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: grid;
  place-items: center;

  padding: 22px 82px 22px 16px;

  background:
    radial-gradient(
      circle at center,
      rgba(54, 5, 31, 0.15),
      rgba(0, 0, 0, 0.80)
    );

  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.chip-lock-overlay.show {
  opacity: 1;
}

.chip-lock-overlay.hide {
  opacity: 0;
}

.slot-machine {
  position: relative;

  width: min(780px, 84vw);
  padding: 22px 28px 28px;

  border: 8px solid #d7a63d;
  border-radius: 44px 44px 30px 30px;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.18),
      transparent 11%,
      transparent 88%,
      rgba(0,0,0,0.35)
    ),
    linear-gradient(
      180deg,
      #b41540,
      #690a27 52%,
      #280713
    );

  box-shadow:
    0 13px 0 #46111d,
    0 24px 62px rgba(0,0,0,0.87),
    0 0 19px rgba(255,204,84,0.92),
    0 0 50px rgba(255,55,139,0.60),
    inset 0 0 0 5px rgba(255,239,181,0.20),
    inset 0 -35px 57px rgba(0,0,0,0.39);

  opacity: 0;
  transform: scale(0.77) translateY(32px);
}

.slot-machine.machine-fired {
  animation:
    slot-machine-enter 0.28s ease forwards,
    slot-cabinet-thud 0.15s ease 1.72s 3;
}

.slot-neon-sign {
  margin: 6px 8px 18px;
  padding: 9px 12px 14px;

  border: 4px solid #f2c455;
  border-radius: 29px 29px 15px 15px;

  background:
    linear-gradient(
      180deg,
      #3a132a,
      #11070f
    );

  color: #dcfdff;
  font-family: "Neonderthaw", cursive;
  font-size: clamp(3rem, 8vw, 6.3rem);
  font-weight: 400;
  line-height: 0.92;
  text-align: center;

  text-shadow:
    0 0 5px #fff,
    0 0 12px #ddfdff,
    0 0 24px #61ebff,
    0 0 46px #13dfff,
    0 0 78px rgba(19,223,255,0.68);

  box-shadow:
    inset 0 0 15px rgba(255,255,255,0.08),
    0 0 14px rgba(255,205,90,0.75),
    0 0 35px rgba(19,223,255,0.43);

  animation:
    gtc-blue-text-pulse 1.05s ease-in-out infinite;
}

.slot-bulbs {
  display: flex;
  justify-content: space-around;
  gap: 5px;
  margin: 0 12px;
}

.slot-bulbs i {
  display: block;
  flex: 0 0 13px;

  width: 13px;
  height: 13px;

  border: 1px solid #fff6cd;
  border-radius: 50%;

  background: #ffd967;

  box-shadow:
    0 0 5px #fff,
    0 0 11px #ffd45d,
    0 0 20px rgba(255,122,55,0.95);

  animation:
    slot-bulb-chase 0.6s ease-in-out infinite alternate;
}

.slot-bulbs i:nth-child(2n) {
  animation-delay: 0.11s;
}

.slot-bulbs i:nth-child(3n) {
  animation-delay: 0.22s;
}

.slot-bulbs-bottom {
  margin-top: 18px;
}

.slot-reel-frame {
  position: relative;

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

  padding: 18px;

  border: 7px solid #b9882f;
  border-radius: 20px;

  background:
    linear-gradient(
      180deg,
      #211715,
      #080606
    );

  box-shadow:
    inset 0 10px 22px rgba(0,0,0,0.91),
    inset 0 -7px 11px rgba(255,255,255,0.07),
    0 0 24px rgba(255,194,66,0.46);
}

.slot-payline {
  position: absolute;
  z-index: 5;

  left: 10px;
  right: 10px;
  top: 50%;

  height: 3px;

  background: #df1b43;

  box-shadow:
    0 0 5px #fff,
    0 0 10px #ff436c,
    0 0 18px rgba(255,32,84,0.82);

  transform: translateY(-50%);
  pointer-events: none;
}

.slot-reel {
  position: relative;

  display: grid;
  place-items: center;

  height: 145px;
  overflow: hidden;

  border: 3px solid #74604a;
  border-radius: 11px;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.035) 0,
      rgba(0,0,0,0.035) 2px,
      transparent 2px,
      transparent 5px
    ),
    linear-gradient(
      90deg,
      #b9ae98,
      #fffdf3 17%,
      #fffef8 80%,
      #b8aa92
    );

  box-shadow:
    inset 0 17px 22px rgba(0,0,0,0.20),
    inset 0 -17px 22px rgba(0,0,0,0.22);
}

.slot-reel::before,
.slot-reel::after {
  content: "";

  position: absolute;
  z-index: 3;

  left: 0;
  right: 0;

  height: 29%;
  pointer-events: none;
}

.slot-reel::before {
  top: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.43),
      transparent
    );
}

.slot-reel::after {
  bottom: 0;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,0.43),
      transparent
    );
}

.slot-symbol {
  color: #a20d37;
  font-family:
    Impact,
    Haettenschweiler,
    "Arial Narrow Bold",
    Arial,
    sans-serif;

  font-size: clamp(2.8rem, 7vw, 5.5rem);
  font-weight: 900;
  line-height: 1;
  text-align: center;

  text-shadow:
    0 2px 0 #fff,
    0 5px 10px rgba(0,0,0,0.22);

  filter: blur(2px);
  transform: scaleY(1.18);
}

.slot-symbol.stopped {
  filter: blur(0);
  animation: slot-symbol-stop 0.20s ease;
}

.slot-fruit {
  display: block;
}

.slot-seven {
  display: block;

  color: #df164b;
  font-size: 1.25em;
  font-style: italic;

  text-shadow:
    2px 2px 0 #fff1a8,
    5px 5px 0 #8a0a2d;
}

.slot-bar {
  display: inline-block;

  padding: 0.18em 0.24em;

  border: 0.09em solid #efe5bf;
  border-radius: 0.08em;

  background: #171717;
  color: #f6e8bd;

  font-size: 0.58em;
  letter-spacing: 0.02em;

  box-shadow:
    0 0.08em 0 #7c6744,
    inset 0 0 0.10em rgba(255,255,255,0.20);
}

.slot-result {
  margin: 14px 0 8px;

  color: #ffe69a;
  font-family: "Outfit", Arial, sans-serif;
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  font-weight: 900;
  letter-spacing: 0.17em;
  text-align: center;

  text-shadow:
    0 0 8px rgba(255,211,95,0.72),
    0 0 20px rgba(255,121,47,0.48);
}

.slot-result.jackpot {
  color: #fff;
  font-size: clamp(1.5rem, 4vw, 2.2rem);

  text-shadow:
    0 0 5px #fff,
    0 0 13px #ffdf67,
    0 0 28px #ff587f,
    0 0 48px rgba(255,45,137,0.80);

  animation:
    gtc-pink-text-pulse 0.72s ease-in-out infinite;
}

.slot-lock-details {
  min-height: 26px;

  color: #ffd971;
  font-family: "Outfit", Arial, sans-serif;
  font-size: clamp(0.75rem, 2vw, 1rem);
  font-weight: 900;
  letter-spacing: 0.10em;
  text-align: center;
}

.slot-free-clue {
  margin: 13px auto 4px;
  padding: 12px 15px;

  border: 3px solid #59eaff;
  border-radius: 13px;

  background:
    linear-gradient(
      180deg,
      rgba(8,45,55,0.96),
      rgba(5,17,27,0.98)
    );

  box-shadow:
    0 0 14px rgba(97,235,255,0.78),
    0 0 31px rgba(19,223,255,0.40),
    inset 0 0 10px rgba(255,255,255,0.08);

  text-align: center;
}

.slot-free-clue strong {
  display: block;
  margin-bottom: 5px;

  color: #dffcff;
  font-family: "Neonderthaw", cursive;
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 400;

  text-shadow:
    0 0 5px #fff,
    0 0 12px #61ebff,
    0 0 25px #13dfff;
}

.slot-free-clue span {
  color: #fff8e6;
  font-weight: 800;
}

.slot-coin-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  width: 105px;
  margin: 13px auto 0;
  padding: 6px 9px;

  border: 2px solid #6b655d;
  border-radius: 6px;

  background:
    linear-gradient(
      145deg,
      #dedbd4,
      #68645e
    );

  box-shadow:
    inset 0 0 5px rgba(255,255,255,0.72),
    0 3px 6px rgba(0,0,0,0.56);
}

.slot-coin-plate i {
  width: 7px;
  height: 24px;

  border-radius: 4px;
  background: #111;
}

.slot-coin-plate span {
  color: #211a17;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.slot-lever {
  position: absolute;

  right: -75px;
  top: 43%;

  width: 82px;
  height: 180px;
}

.slot-lever-mount {
  position: absolute;

  right: 0;
  bottom: 7px;

  width: 50px;
  height: 79px;

  border: 4px solid #684a1d;
  border-radius: 12px 26px 26px 12px;

  background:
    linear-gradient(
      90deg,
      #684a1d,
      #f4ce6e 43%,
      #8b6525
    );

  box-shadow:
    0 6px 13px rgba(0,0,0,0.70),
    inset 0 0 8px rgba(255,255,255,0.31);
}

.slot-lever-bar {
  position: absolute;

  right: 20px;
  bottom: 64px;

  width: 13px;
  height: 108px;

  border: 2px solid #58431a;
  border-radius: 8px;

  background:
    linear-gradient(
      90deg,
      #836129,
      #fff1a9 45%,
      #8e6727
    );

  box-shadow:
    3px 4px 8px rgba(0,0,0,0.56);

  transform-origin: bottom center;
}

.slot-lever-ball {
  position: absolute;
  z-index: 3;

  right: 3px;
  top: -13px;

  width: 47px;
  height: 47px;

  border: 3px solid #6b0d25;
  border-radius: 50%;

  background:
    radial-gradient(
      circle at 34% 27%,
      #ff9db2,
      #df1c4d 40%,
      #69071e 79%
    );

  box-shadow:
    0 6px 11px rgba(0,0,0,0.64),
    0 0 13px rgba(255,64,130,0.72);

  transform-origin: 50% 145px;
}

.machine-fired .slot-lever-bar,
.machine-fired .slot-lever-ball {
  animation:
    slot-lever-pull 0.76s ease-in-out forwards;
}

@keyframes slot-machine-enter {
  from {
    opacity: 0;

    transform:
      scale(0.76)
      translateY(32px);
  }

  to {
    opacity: 1;

    transform:
      scale(1)
      translateY(0);
  }
}

@keyframes slot-cabinet-thud {
  0%, 100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(3px);
  }
}

@keyframes slot-symbol-stop {
  0% {
    transform:
      scaleY(1.18)
      translateY(-15px);
  }

  65% {
    transform:
      scaleY(1.18)
      translateY(7px);
  }

  100% {
    transform:
      scaleY(1.18)
      translateY(0);
  }
}

@keyframes slot-lever-pull {
  0%, 100% {
    transform: rotate(0deg);
  }

  42% {
    transform:
      rotate(39deg)
      translateY(12px);
  }

  72% {
    transform: rotate(-5deg);
  }
}

@keyframes slot-bulb-chase {
  from {
    opacity: 0.38;
    filter: brightness(0.72);
  }

  to {
    opacity: 1;
    filter: brightness(1.55);
  }
}

@media (max-width: 700px) {
  .chip-lock-overlay {
    padding: 13px 51px 13px 7px;
  }

  .slot-machine {
    width: 86vw;
    padding: 15px 12px 19px;

    border-width: 5px;
    border-radius: 29px 29px 21px 21px;
  }

  .slot-neon-sign {
    margin-bottom: 13px;
    padding: 7px 7px 10px;
  }

  .slot-reel-frame {
    gap: 6px;
    padding: 9px;
    border-width: 4px;
  }

  .slot-reel {
    height: 92px;
  }

  .slot-symbol {
    font-size: clamp(2rem, 11vw, 3.6rem);
  }

  .slot-bulbs i {
    flex-basis: 8px;
    width: 8px;
    height: 8px;
  }

  .slot-lever {
    right: -50px;

    transform: scale(0.72);
    transform-origin: left bottom;
  }
}