:root {
  --theme-accent: #67dded;
  --theme-accent-soft: #c9f7ff;
  --theme-hot: #e2b85c;
  --machine-bg: url("assets/mill-river-base.webp");
  --machine-storm-bg: url("assets/mill-river-storm.webp");
  --ink: #071017;
  --ink-soft: #0c1b25;
  --walnut-1: #4a2414;
  --walnut-2: #241108;
  --walnut-3: #100805;
  --brass-1: #fff0ad;
  --brass-2: #e5b84f;
  --brass-3: #9a5b17;
  --copper: #c87035;
  --water-1: #62dcf1;
  --water-2: #087d9b;
  --water-3: #043b52;
  --cream: #fff3d0;
  --muted: #b9ad91;
  --danger: #ff665e;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shadow-deep: 0 28px 80px rgba(0, 0, 0, .68);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
  background: #02070a;
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  color: var(--cream);
  background: #02070a;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
a {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
.orders-card:focus-visible {
  outline: 3px solid var(--theme-accent-soft);
  outline-offset: 3px;
}

button:disabled {
  cursor: not-allowed;
}

svg {
  display: block;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.environment {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: #04101a;
  pointer-events: none;
}

.environment__image {
  position: absolute;
  inset: -3%;
  background-position: center;
  background-size: cover;
  transform: scale(1.025);
  transition: opacity 1.25s ease, filter 1.25s ease, transform 8s ease;
}

.environment__image--calm {
  opacity: 1;
  background-image: var(--machine-bg);
  filter: brightness(.76) saturate(.95);
}

.environment__image--storm {
  opacity: 0;
  background-image: var(--machine-storm-bg);
  filter: brightness(.62) saturate(1.18);
}

.environment__video {
  position: absolute;
  z-index: 1;
  inset: -3%;
  width: 106%;
  height: 106%;
  opacity: .82;
  object-fit: cover;
  filter: brightness(.73) saturate(.98);
  transform: scale(1.025);
  transition: opacity 1.25s ease, filter 1.25s ease, transform 8s ease;
}

.environment__image--storm,
.environment__rain,
.environment__vignette,
.environment__mist {
  z-index: 2;
}

.environment__vignette,
.environment__mist {
  z-index: 3;
}

body.ambient-video-active .environment__image--calm {
  opacity: .14;
}

body.bonus-active .environment__video {
  opacity: 0;
  transform: scale(1.08);
}

body.bonus-active .environment__image--calm {
  opacity: 0;
  transform: scale(1.08);
}

body.bonus-active .environment__image--storm {
  opacity: 1;
  transform: scale(1.055);
}

.environment__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 43%, transparent 15%, rgba(0, 6, 11, .22) 58%, rgba(0, 3, 7, .88) 116%),
    linear-gradient(180deg, rgba(0, 5, 10, .48), transparent 26%, transparent 67%, rgba(0, 4, 8, .82));
}

.environment__rain {
  position: absolute;
  inset: -25%;
  opacity: 0;
  background: repeating-linear-gradient(108deg, transparent 0 12px, rgba(174, 225, 240, .16) 13px, transparent 14px 27px);
  transform: translate3d(8%, -12%, 0);
  transition: opacity .8s ease;
  animation: rainSweep .55s linear infinite;
}

body.bonus-active .environment__rain {
  opacity: .48;
}

.environment__mist {
  position: absolute;
  right: -25%;
  bottom: 3%;
  width: 92%;
  height: 23%;
  opacity: .21;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(113, 191, 214, .62), transparent 67%);
  filter: blur(28px);
  animation: mistDrift 16s ease-in-out infinite alternate;
}

.environment__mist--two {
  right: auto;
  left: -25%;
  bottom: 15%;
  animation-delay: -8s;
  animation-duration: 21s;
}

@keyframes rainSweep {
  to { transform: translate3d(5%, 3%, 0); }
}

@keyframes mistDrift {
  to { transform: translate3d(-16%, -8%, 0) scale(1.13); }
}

.game-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding:
    max(6px, var(--safe-top))
    max(8px, var(--safe-right))
    max(5px, var(--safe-bottom))
    max(8px, var(--safe-left));
}

.utility-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: min(1540px, 100%);
  min-height: 48px;
  margin: 0 auto 6px;
}

.utility-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  gap: 7px;
  border: 1px solid rgba(230, 188, 89, .38);
  border-radius: 12px;
  color: #f8e8bb;
  background:
    linear-gradient(180deg, rgba(53, 38, 25, .86), rgba(12, 13, 14, .88)),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 7px 20px rgba(0, 0, 0, .28);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
}

.utility-button:hover {
  border-color: rgba(255, 224, 137, .72);
  background: linear-gradient(180deg, rgba(78, 52, 31, .95), rgba(17, 16, 15, .92));
}

.utility-button:active {
  transform: translateY(2px);
}

.utility-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.utility-button--icon {
  width: 44px;
  padding: 0;
}

.utility-brand {
  min-width: 0;
  text-align: center;
  text-shadow: 0 2px 12px #000;
}

.utility-brand__eyebrow {
  display: block;
  color: #9cc5d0;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .24em;
  line-height: 1;
  text-transform: uppercase;
}

.utility-brand__name {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #f7df9b;
  font-family: var(--serif);
  font-size: clamp(15px, 3.8vw, 21px);
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.utility-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.machine-button {
  min-width: 44px;
  border-color: color-mix(in srgb, var(--theme-accent) 45%, transparent);
}

.machine-button svg {
  color: var(--theme-accent-soft);
}

.session-chip {
  display: none;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(134, 214, 234, .22);
  border-radius: 999px;
  color: #cbe8ed;
  background: rgba(3, 13, 20, .7);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 800;
}

.session-chip__lamp {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #70d7bc;
  box-shadow: 0 0 10px #70d7bc;
}

.game-layout {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  gap: 7px;
  width: min(1540px, 100%);
  margin: auto;
  transition: filter .3s ease, opacity .3s ease;
}

.machine-zone {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

.side-rail {
  order: 2;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

.side-rail--report {
  display: none;
}

.side-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(220, 176, 77, .38);
  border-radius: 14px;
  padding: 11px 12px;
  color: #e9ddbd;
  background:
    linear-gradient(135deg, rgba(52, 31, 18, .95), rgba(10, 17, 20, .94)),
    repeating-linear-gradient(96deg, transparent 0 11px, rgba(255, 255, 255, .02) 12px 13px);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, .42), 0 12px 30px rgba(0, 0, 0, .35);
}

.side-card::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255, 234, 177, .08);
  border-radius: 10px;
  pointer-events: none;
}

.side-card__head,
.restoration__label,
.order__copy,
.momentum__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
}

.side-card__kicker,
.modal-kicker,
.bonus-header__kicker {
  color: #78ccde;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.side-card__stamp {
  padding: 3px 6px;
  border: 1px solid rgba(226, 182, 77, .38);
  border-radius: 4px;
  color: #dfbe6d;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: rotate(1deg);
}

.side-card h2 {
  margin: 4px 0 8px;
  color: #f5e3ae;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.1;
}

.order-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.order {
  min-width: 0;
}

.order__copy {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
}

.order__copy span {
  display: block;
  overflow: hidden;
  color: #c9bea3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order__copy strong {
  display: block;
  margin-top: 1px;
  color: #f7d778;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.micro-track,
.restoration__track {
  position: relative;
  overflow: hidden;
  height: 5px;
  border: 1px solid rgba(171, 212, 221, .14);
  border-radius: 999px;
  background: rgba(0, 0, 0, .48);
}

.micro-track span,
.restoration__track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #14758e, #74ddeb);
  box-shadow: 0 0 10px rgba(78, 210, 233, .55);
  transition: width .5s ease;
}

.restoration {
  margin-top: 9px;
  padding-top: 7px;
  border-top: 1px solid rgba(227, 190, 100, .17);
}

.restoration__label {
  margin-bottom: 4px;
  color: #c7b990;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.restoration__label strong {
  color: #f8d576;
}

.restoration__track {
  height: 7px;
}

.restoration__track i {
  position: absolute;
  top: -2px;
  left: 12%;
  width: 2px;
  height: 11px;
  background: #fff5c5;
  box-shadow: 0 0 7px #fff5c5;
  transition: left .5s ease;
}

.cabinet {
  position: relative;
  border: 1px solid #8b591f;
  border-radius: 18px 18px 14px 14px;
  padding: 7px;
  background:
    radial-gradient(circle at 15% 12%, rgba(255, 204, 110, .14), transparent 22%),
    repeating-linear-gradient(98deg, rgba(91, 43, 21, .32) 0 4px, rgba(26, 12, 7, .18) 5px 11px),
    linear-gradient(130deg, #4c2817, #211109 43%, #552b16 74%, #160b07);
  box-shadow:
    inset 0 0 0 3px #160b07,
    inset 0 0 0 5px rgba(199, 129, 42, .45),
    inset 0 22px 45px rgba(255, 196, 86, .06),
    var(--shadow-deep);
}

.cabinet::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 5% -6px -5px;
  border-radius: 18px;
  background: #080504;
  filter: blur(3px);
}

.cabinet__hardware {
  position: absolute;
  z-index: 7;
  top: 32%;
  bottom: 8%;
  width: 8px;
  border: 1px solid #87521e;
  background: linear-gradient(90deg, #4a2a0e, #e0ad4b 45%, #57320f);
  box-shadow: inset 0 0 3px #000, 0 0 10px rgba(0, 0, 0, .7);
  pointer-events: none;
}

.cabinet__hardware--left {
  left: 1px;
  border-radius: 7px 0 0 7px;
}

.cabinet__hardware--right {
  right: 1px;
  border-radius: 0 7px 7px 0;
}

.marquee {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 55px;
  overflow: hidden;
  border: 1px solid rgba(236, 190, 84, .35);
  border-radius: 12px 12px 7px 7px;
  background:
    radial-gradient(ellipse at center, rgba(7, 54, 76, .75), rgba(3, 15, 23, .94) 64%),
    linear-gradient(180deg, #133347, #061017);
  box-shadow: inset 0 0 25px rgba(27, 156, 192, .18), inset 0 -10px 18px rgba(0, 0, 0, .45);
}

.marquee::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 15%, rgba(255, 255, 255, .12) 34%, transparent 53%);
  transform: translateX(-110%);
  animation: glassSweep 8s ease-in-out infinite;
  pointer-events: none;
}

.marquee img {
  position: relative;
  z-index: 1;
  width: min(70%, 300px);
  max-height: 68px;
  object-fit: contain;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .85)) drop-shadow(0 0 12px rgba(45, 176, 218, .3));
}

.marquee__type-title {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 8px 28px 6px;
  text-align: center;
  text-transform: uppercase;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .85)) drop-shadow(0 0 14px color-mix(in srgb, var(--theme-accent) 42%, transparent));
}

.marquee__type-title span {
  color: var(--theme-accent-soft);
  font-family: var(--serif);
  font-size: clamp(16px, 3.6vw, 29px);
  font-weight: 900;
  letter-spacing: .14em;
  line-height: .9;
}

.marquee__type-title strong {
  color: var(--theme-hot);
  font-family: var(--serif);
  font-size: clamp(23px, 5vw, 42px);
  font-style: italic;
  letter-spacing: .06em;
  line-height: 1;
  text-shadow: 0 1px 0 #fff4ba, 0 3px 0 rgba(50, 19, 5, .85);
}

.marquee p {
  display: none;
}

.marquee__bulbs {
  position: absolute;
  inset: 3px;
  border: 2px dotted rgba(255, 210, 104, .55);
  border-radius: 8px;
  filter: drop-shadow(0 0 4px rgba(255, 195, 61, .45));
}

@keyframes glassSweep {
  0%, 68% { transform: translateX(-110%); }
  82%, 100% { transform: translateX(110%); }
}

.progressives {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  margin: 5px 2px;
}

.progressive {
  position: relative;
  min-width: 0;
  padding: 5px 3px 6px;
  overflow: hidden;
  border: 1px solid rgba(211, 168, 70, .33);
  border-radius: 6px;
  text-align: center;
  background: linear-gradient(180deg, rgba(12, 29, 37, .96), rgba(4, 10, 13, .98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.progressive::after {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 1px solid currentColor;
  opacity: .24;
  pointer-events: none;
}

.progressive span {
  display: block;
  overflow: hidden;
  color: #8ca4a7;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.progressive strong {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #eec271;
  font-family: var(--serif);
  font-size: clamp(11px, 3vw, 19px);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  line-height: 1;
  text-overflow: ellipsis;
}

.progressive--silver strong { color: #d6eef1; }
.progressive--gold strong { color: #ffe086; }
.progressive--crown strong { color: #7be4f2; text-shadow: 0 0 9px rgba(69, 214, 238, .52); }

.reel-deck {
  position: relative;
  padding: 4px 4px 0;
  border: 1px solid #9e6a26;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(232, 182, 73, .58), rgba(68, 36, 13, .96) 4%, #160d08 96%, #8a531b);
  box-shadow: inset 0 0 0 2px #211208, inset 0 0 18px rgba(0, 0, 0, .8);
}

.reel-deck__toplight {
  position: absolute;
  z-index: 4;
  top: 2px;
  left: 14%;
  width: 72%;
  height: 2px;
  border-radius: 50%;
  background: #fce59e;
  box-shadow: 0 1px 10px rgba(248, 205, 102, .66);
}

.reel-window {
  position: relative;
  aspect-ratio: 5 / 3.65;
  min-height: 205px;
  overflow: hidden;
  border: 1px solid #0a0705;
  border-radius: 7px;
  background: #03090c;
  box-shadow:
    inset 0 0 0 2px rgba(229, 187, 87, .32),
    inset 0 17px 24px rgba(0, 0, 0, .85),
    inset 0 -18px 28px rgba(0, 0, 0, .84);
  isolation: isolate;
}

.reel-grid {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.reel {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid rgba(208, 175, 105, .26);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .36), transparent 11%, transparent 89%, rgba(0, 0, 0, .36)),
    linear-gradient(180deg, #102633, #071219);
}

.reel:last-child {
  border-right: 0;
}

.reel::before,
.reel::after {
  content: "";
  position: absolute;
  z-index: 4;
  right: 0;
  left: 0;
  height: 14%;
  pointer-events: none;
}

.reel::before {
  top: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .86), transparent);
}

.reel::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, .86), transparent);
}

.reel-track {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  will-change: transform;
}

.reel.is-spinning .reel-track {
  filter: blur(1.5px) saturate(.92);
}

.symbol-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(var(--reel-cell-height, 56px));
  padding: 3%;
  overflow: hidden;
  border-bottom: 1px solid rgba(135, 186, 197, .12);
  background:
    radial-gradient(circle at 50% 43%, rgba(66, 135, 153, .14), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(0, 0, 0, .13));
}

.symbol-cell::before {
  content: "";
  position: absolute;
  inset: 4%;
  border: 1px solid rgba(190, 223, 228, .055);
  border-radius: 14%;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .2);
}

.symbol-cell > img,
.symbol-cell > svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 90%;
  height: 90%;
  overflow: visible;
  object-fit: contain;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .82));
  transition: transform .22s ease, filter .22s ease;
}

.symbol-cell[data-symbol="catfish"] > img {
  width: 94%;
  height: 94%;
}

.symbol-cell[data-symbol="wheel"] > img {
  width: 93%;
  height: 93%;
}

.symbol-cell[data-symbol="strongbox"] > img {
  width: 88%;
  height: 88%;
}

.symbol-cell[data-symbol="mill"] > img {
  width: 96%;
  height: 96%;
}

.symbol-svg .symbol-metal {
  fill: #c88a32;
  stroke: #4d290c;
  stroke-width: 2;
  stroke-linejoin: round;
}

.symbol-svg .symbol-water {
  fill: #087e9b;
  stroke: #8ceeff;
  stroke-width: 1.4;
}

.symbol-svg .symbol-dark {
  fill: #0d1b22;
  stroke: #d8a84d;
  stroke-width: 2;
}

.symbol-svg .symbol-wood {
  fill: #5d2f17;
  stroke: #d6a54c;
  stroke-width: 2;
}

.symbol-svg .symbol-line {
  fill: none;
  stroke: #ffdf7e;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.symbol-svg .symbol-rank {
  fill: #36bfd6;
  stroke: #e7bd60;
  stroke-width: 1.2;
  paint-order: stroke fill;
  font-family: Georgia, serif;
  font-size: 66px;
  font-weight: 900;
  text-anchor: middle;
}

.symbol-cell.is-winning {
  z-index: 5;
  animation: winningCell .75s ease-in-out infinite alternate;
}

.symbol-cell.is-winning::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 3px;
  border: 2px solid #ffe794;
  border-radius: 12%;
  box-shadow: inset 0 0 14px rgba(255, 217, 105, .58), 0 0 18px rgba(255, 215, 91, .7);
}

.symbol-cell.is-winning > img,
.symbol-cell.is-winning > svg {
  transform: scale(1.07);
  filter: drop-shadow(0 0 11px rgba(255, 218, 105, .82)) drop-shadow(0 4px 4px rgba(0, 0, 0, .8));
}

@keyframes winningCell {
  to { background-color: rgba(255, 215, 91, .17); }
}

.line-layer,
.effects-canvas,
.reel-glass {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.line-layer {
  z-index: 6;
  overflow: visible;
}

.line-layer path {
  fill: none;
  stroke: #fff1a8;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px #eaaa31) drop-shadow(0 0 9px #22b5d1);
  animation: lineTrace 1.25s ease-in-out infinite alternate;
}

@keyframes lineTrace {
  to { opacity: .45; stroke-width: 5; }
}

.effects-canvas {
  z-index: 8;
}

.reel-glass {
  z-index: 9;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, .1), transparent 13%, transparent 76%, rgba(255, 255, 255, .035)),
    linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 25%, transparent 74%, rgba(1, 8, 11, .24));
  box-shadow: inset 0 0 22px rgba(6, 42, 54, .35);
}

.anticipation-lamps {
  position: absolute;
  z-index: 10;
  top: 7px;
  right: 7px;
  display: flex;
  gap: 3px;
  opacity: 0;
  transition: opacity .2s ease;
}

.anticipation-lamps i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffdf72;
  box-shadow: 0 0 7px #ffbf37;
}

.reel-window.is-anticipating {
  animation: anticipationFrame .45s ease-in-out infinite alternate;
}

.reel-window.is-anticipating .anticipation-lamps {
  opacity: 1;
}

.reel-window.is-anticipating .anticipation-lamps i {
  animation: lampRun .7s linear infinite;
}

.reel-window.is-anticipating .anticipation-lamps i:nth-child(2) { animation-delay: -.1s; }
.reel-window.is-anticipating .anticipation-lamps i:nth-child(3) { animation-delay: -.2s; }
.reel-window.is-anticipating .anticipation-lamps i:nth-child(4) { animation-delay: -.3s; }
.reel-window.is-anticipating .anticipation-lamps i:nth-child(5) { animation-delay: -.4s; }
.reel-window.is-anticipating .anticipation-lamps i:nth-child(6) { animation-delay: -.5s; }
.reel-window.is-anticipating .anticipation-lamps i:nth-child(7) { animation-delay: -.6s; }

@keyframes anticipationFrame {
  to { box-shadow: inset 0 0 0 2px #83eaff, inset 0 0 32px rgba(50, 203, 233, .55), 0 0 22px rgba(46, 186, 216, .44); }
}

@keyframes lampRun {
  0%, 22% { opacity: 1; transform: scale(1.3); }
  23%, 100% { opacity: .15; transform: scale(.75); }
}

.status-ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 27px;
  padding: 4px 10px;
  color: #b9d8dd;
  text-align: center;
  font-size: clamp(10px, 2.2vw, 12px);
  font-weight: 750;
  letter-spacing: .05em;
}

.status-ribbon__lamp {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #63ddbf;
  box-shadow: 0 0 8px #63ddbf;
}

.status-ribbon.is-hot .status-ribbon__lamp {
  background: #6bdff4;
  box-shadow: 0 0 9px #6bdff4;
  animation: statusPulse .55s ease-in-out infinite alternate;
}

@keyframes statusPulse { to { opacity: .3; } }

.console {
  position: relative;
  overflow: hidden;
  border: 1px solid #87531e;
  border-radius: 13px 13px 20px 20px;
  padding: 7px;
  background:
    radial-gradient(circle at 50% 0, rgba(218, 152, 58, .12), transparent 45%),
    repeating-linear-gradient(95deg, rgba(92, 45, 21, .28) 0 5px, rgba(25, 12, 8, .16) 6px 13px),
    linear-gradient(145deg, #452313, #170d08 58%, #2b140b);
  box-shadow:
    inset 0 0 0 3px #120907,
    inset 0 0 0 5px rgba(187, 117, 35, .36),
    0 16px 38px rgba(0, 0, 0, .52);
}

.console-telemetry {
  --river-flow: 0%;
  display: none;
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
  padding: 13px 12px 12px;
  border: 1px solid rgba(113, 220, 238, .26);
  border-radius: 12px;
  text-align: center;
  background:
    linear-gradient(145deg, rgba(4, 24, 31, .94), rgba(2, 10, 14, .95)),
    url("assets/symbol-wheel-wild.webp") 50% 35% / 116px no-repeat;
  box-shadow: inset 0 0 28px rgba(45, 188, 214, .1), 0 10px 25px rgba(0, 0, 0, .3);
}

.console-telemetry::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .1;
  background: url("assets/symbol-wheel-wild.webp") 50% 42% / 130px no-repeat;
  filter: saturate(.6);
  pointer-events: none;
}

.console-telemetry > span {
  position: relative;
  display: block;
  color: #7bd9e8;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.console-telemetry > strong {
  position: relative;
  display: block;
  margin-top: 4px;
  color: #f4daa0;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.05;
}

.console-telemetry > p {
  position: relative;
  margin: 6px 0 10px;
  color: #b2c6c4;
  font-size: 11px;
  line-height: 1.35;
}

.console-telemetry__dial {
  position: relative;
  height: 9px;
  overflow: hidden;
  border: 1px solid rgba(226, 188, 99, .25);
  border-radius: 999px;
  background: #02080b;
}

.console-telemetry__dial i {
  position: absolute;
  inset: 2px auto 2px 2px;
  width: var(--river-flow);
  max-width: calc(100% - 4px);
  border-radius: inherit;
  background: linear-gradient(90deg, #0c6980, #53d8e8 68%, #ffe387);
  box-shadow: 0 0 10px rgba(81, 221, 239, .62);
  transition: width .6s cubic-bezier(.2, .8, .2, 1);
}

.console-telemetry__dial b {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 19%, rgba(255, 255, 255, .14) 20%);
}

.readouts {
  display: grid;
  grid-template-columns: 1fr .9fr 1fr;
  gap: 4px;
}

.readout {
  min-width: 0;
  padding: 5px 5px 6px;
  overflow: hidden;
  border: 1px solid rgba(216, 174, 78, .28);
  border-radius: 7px;
  text-align: center;
  background: linear-gradient(180deg, #07151c, #02080b);
  box-shadow: inset 0 0 11px rgba(62, 166, 187, .12);
}

.readout span {
  display: block;
  color: #879da1;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.readout strong {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #f5ce70;
  font-family: var(--serif);
  font-size: clamp(14px, 4vw, 21px);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-overflow: ellipsis;
}

.readout--win strong {
  color: #7de5f3;
  text-shadow: 0 0 8px rgba(66, 205, 230, .35);
}

.momentum {
  margin: 6px 2px 7px;
}

.momentum__label {
  margin-bottom: 3px;
  color: #9caeb0;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.momentum__label strong {
  color: #75d9e9;
}

.momentum__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  height: 9px;
  padding: 2px;
  overflow: hidden;
  border: 1px solid rgba(199, 164, 81, .31);
  border-radius: 999px;
  background: #03080b;
}

.momentum__track span {
  position: absolute;
  z-index: 0;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: 0;
  max-width: calc(100% - 4px);
  border-radius: inherit;
  background: linear-gradient(90deg, #0a637c, #45ccdf 60%, #ffe174);
  box-shadow: 0 0 11px rgba(58, 211, 232, .6);
  transition: width .6s cubic-bezier(.2, .8, .2, 1);
}

.momentum__track i {
  position: relative;
  z-index: 1;
  border-right: 1px solid rgba(255, 255, 255, .18);
}

.momentum__track i:last-child {
  border-right: 0;
}

.control-bank {
  display: grid;
  grid-template-columns: minmax(112px, 1fr) minmax(116px, 1.08fr) minmax(52px, .52fr);
  align-items: stretch;
  gap: 6px;
}

.bet-control {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 2px;
  min-height: 58px;
  padding: 4px;
  border: 1px solid rgba(217, 174, 74, .28);
  border-radius: 12px;
  background: rgba(4, 10, 13, .68);
}

.bet-control > div {
  min-width: 0;
  text-align: center;
}

.bet-control span {
  display: block;
  color: #9ba7a4;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.bet-control strong {
  display: block;
  overflow: hidden;
  color: #f6d375;
  font-family: var(--serif);
  font-size: 15px;
  text-overflow: ellipsis;
}

.metal-button {
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #6f4317;
  border-radius: 50%;
  color: #1b0f08;
  background:
    radial-gradient(circle at 37% 27%, #fff1b0, #d19a35 42%, #744312 74%, #edc45d);
  box-shadow: inset 0 0 0 3px rgba(75, 40, 11, .38), 0 4px 0 #3a210d, 0 7px 12px rgba(0, 0, 0, .5);
  cursor: pointer;
}

.metal-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.metal-button:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: inset 0 0 0 3px rgba(75, 40, 11, .38), 0 1px 0 #3a210d;
}

.metal-button:disabled {
  opacity: .36;
  filter: grayscale(.5);
}

.spin-button {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 116px;
  min-height: 62px;
  padding: 4px 6px 8px;
  border: 0;
  border-radius: 15px;
  color: #07151b;
  background: linear-gradient(180deg, #e0b44d, #6f3e12);
  box-shadow: 0 5px 0 #301a09, 0 9px 20px rgba(0, 0, 0, .62);
  cursor: pointer;
  isolation: isolate;
}

.spin-button::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;
  border-radius: 11px;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, .56), transparent 22%),
    linear-gradient(180deg, #91ecf5, #31b8cc 48%, #08748f);
  box-shadow: inset 0 0 0 2px rgba(224, 255, 255, .48), inset 0 -7px 11px rgba(1, 50, 66, .44), 0 0 15px rgba(40, 199, 224, .38);
}

.spin-button__rim {
  position: absolute;
  inset: 1px;
  border: 1px solid rgba(255, 239, 172, .55);
  border-radius: inherit;
  pointer-events: none;
}

.spin-button__cap {
  position: relative;
  display: block;
  line-height: 1;
}

.spin-button__label {
  display: block;
  font-family: var(--serif);
  font-size: clamp(19px, 5vw, 27px);
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-shadow: 0 1px rgba(255, 255, 255, .38);
}

.spin-button__sub {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.spin-button:hover:not(:disabled)::before {
  filter: brightness(1.12);
  box-shadow: inset 0 0 0 2px rgba(224, 255, 255, .62), inset 0 -7px 11px rgba(1, 50, 66, .35), 0 0 24px rgba(59, 220, 244, .65);
}

.spin-button:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #301a09, 0 4px 10px rgba(0, 0, 0, .55);
}

.spin-button:disabled {
  opacity: .62;
  filter: saturate(.5);
}

.spin-button.is-ready {
  animation: spinReady 2.4s ease-in-out infinite;
}

@keyframes spinReady {
  50% { filter: drop-shadow(0 0 9px rgba(65, 215, 239, .46)); }
}

.max-bet-button {
  min-width: 52px;
  min-height: 58px;
  padding: 3px;
  border: 1px solid #8f5b1e;
  border-radius: 11px;
  color: #e7ce8d;
  background:
    linear-gradient(180deg, rgba(71, 44, 24, .95), rgba(20, 13, 9, .98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 0 #170c06;
  cursor: pointer;
}

.max-bet-button span,
.max-bet-button strong {
  display: block;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.max-bet-button strong {
  margin-top: 2px;
  color: #73d8e8;
  font-size: 12px;
}

.max-bet-button:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #170c06;
}

.key-hint {
  margin: 7px 0 0;
  color: #8e846e;
  text-align: center;
  font-size: 10px;
  letter-spacing: .05em;
}

.river-card p {
  color: #adbea9;
  font-size: 11px;
  line-height: 1.5;
}

.river-dial {
  position: relative;
  height: 80px;
  margin: 14px 5px 10px;
  overflow: hidden;
  border: 1px solid rgba(220, 177, 75, .28);
  border-bottom: 0;
  border-radius: 100px 100px 0 0;
  background: radial-gradient(circle at 50% 100%, #0d6e86, #07171d 60%);
}

.river-dial::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: calc(50% - 9px);
  width: 18px;
  height: 18px;
  border: 3px solid #e7bb56;
  border-radius: 50%;
  background: #2b190a;
}

.river-dial span {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 2px;
  height: 58px;
  border-radius: 2px;
  background: #ffe292;
  box-shadow: 0 0 8px #ffe292;
  transform: rotate(-62deg);
  transform-origin: 50% 100%;
  transition: transform .65s cubic-bezier(.2, .8, .2, 1);
}

.river-dial i {
  position: absolute;
  bottom: 6px;
  color: #799da5;
  font-size: 7px;
  font-style: normal;
  text-transform: uppercase;
}

.river-dial i:nth-of-type(1) { left: 6px; }
.river-dial i:nth-of-type(2) { left: calc(50% - 15px); bottom: 63px; }
.river-dial i:nth-of-type(3) { right: 6px; }

.ledger-button,
.secondary-action {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(221, 178, 76, .36);
  border-radius: 10px;
  color: #ecd697;
  background: rgba(25, 20, 15, .8);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.disclosure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 24px;
  margin-top: 3px;
  color: rgba(221, 214, 192, .62);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 5px #000;
}

.disclosure strong {
  color: rgba(255, 220, 130, .82);
}

.disclosure i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(100, 206, 225, .72);
}

.win-presentation {
  position: fixed;
  z-index: 30;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: min(640px, 96vw);
  min-height: 210px;
  padding: 24px;
  opacity: 0;
  text-align: center;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.72);
  transition: opacity .28s ease, transform .38s cubic-bezier(.18, .9, .24, 1.28);
  isolation: isolate;
}

.win-presentation::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 2% -7%;
  border: 1px solid rgba(248, 207, 105, .42);
  border-radius: 42% 42% 34% 34%;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(12, 74, 89, .94), rgba(3, 16, 22, .92) 58%, rgba(22, 10, 5, .82));
  box-shadow:
    inset 0 0 0 4px rgba(91, 47, 16, .55),
    inset 0 0 45px rgba(63, 211, 236, .18),
    0 0 80px rgba(0, 0, 0, .72);
}

.win-presentation::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 6% -4%;
  border: 2px solid rgba(255, 222, 137, .52);
  border-radius: 40% 40% 31% 31%;
  background:
    linear-gradient(108deg, transparent 22%, rgba(160, 239, 249, .16) 43%, rgba(255, 229, 151, .32) 50%, transparent 65%)
    -180% 0 / 240% 100% no-repeat;
  box-shadow:
    inset 0 0 0 2px rgba(32, 137, 155, .24),
    0 0 18px rgba(255, 213, 112, .25),
    0 0 38px rgba(61, 211, 235, .2);
  animation: plaqueSweep 2.1s ease-in-out infinite;
}

@keyframes plaqueSweep {
  55%, 100% { background-position: 180% 0; }
}

.win-presentation.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.win-presentation.is-banked {
  transform: translate(-50%, -50%) scale(.9);
}

.win-presentation.is-banked .win-presentation__rays {
  opacity: .22;
}

.win-presentation.is-banked::after {
  opacity: .34;
}

.win-presentation.is-banked strong {
  font-size: clamp(34px, 8vw, 70px);
}

body.win-active .game-layout,
body.win-active .utility-bar,
body.win-active .disclosure {
  opacity: .78;
  filter: brightness(.68) saturate(.72);
}

body.win-active .spin-button:disabled {
  opacity: 1;
  filter: saturate(.9) brightness(.84);
}

body.win-active .spin-button:disabled::before {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, .46), transparent 22%),
    linear-gradient(180deg, #f4d274, #b17122 58%, #60330d);
}

.win-presentation__rays {
  position: absolute;
  z-index: -1;
  inset: -30%;
  opacity: .62;
  background: repeating-conic-gradient(from 0deg, rgba(75, 221, 243, .28) 0 5deg, transparent 6deg 13deg);
  mask-image: radial-gradient(circle, #000, transparent 68%);
  animation: rayTurn 11s linear infinite;
}

@keyframes rayTurn { to { transform: rotate(360deg); } }

.win-presentation__eyebrow {
  align-self: end;
  color: #baf2f8;
  font-size: clamp(9px, 2vw, 13px);
  font-weight: 900;
  letter-spacing: .29em;
  text-shadow: 0 2px 12px #000;
  text-transform: uppercase;
}

.win-presentation strong {
  color: #ffe895;
  font-family: var(--serif);
  font-size: clamp(42px, 11vw, 94px);
  font-weight: 900;
  letter-spacing: .04em;
  line-height: .96;
  text-shadow: 0 0 9px #d98c1e, 0 0 32px rgba(60, 211, 237, .72), 0 6px 4px #351603;
  text-transform: uppercase;
}

.win-presentation__amount {
  align-self: start;
  margin-top: 8px;
  color: #fff4cc;
  font-family: var(--serif);
  font-size: clamp(24px, 6vw, 48px);
  font-weight: 900;
  text-shadow: 0 3px 12px #000;
}

.toast-stack {
  position: fixed;
  z-index: 50;
  right: max(12px, var(--safe-right));
  bottom: max(42px, calc(var(--safe-bottom) + 32px));
  display: grid;
  gap: 8px;
  width: min(330px, calc(100vw - 24px));
  pointer-events: none;
}

.game-toast {
  padding: 11px 13px;
  border: 1px solid rgba(233, 188, 84, .52);
  border-radius: 12px;
  color: #e8e2cc;
  background: linear-gradient(135deg, rgba(44, 28, 18, .97), rgba(5, 20, 27, .97));
  box-shadow: 0 15px 40px rgba(0, 0, 0, .55);
  font-size: 11px;
  line-height: 1.4;
  animation: toastIn .35s cubic-bezier(.2, .9, .25, 1.2) both;
}

.game-toast strong {
  display: block;
  color: #7fe0ef;
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.game-toast.is-leaving {
  animation: toastOut .3s ease both;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(15px) scale(.95); }
}

@keyframes toastOut {
  to { opacity: 0; transform: translateX(22px); }
}

.modal-layer {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  padding:
    max(16px, var(--safe-top))
    max(12px, var(--safe-right))
    max(16px, var(--safe-bottom))
    max(12px, var(--safe-left));
  background: rgba(1, 7, 11, .82);
  backdrop-filter: blur(12px) saturate(.8);
  animation: modalFade .22s ease both;
}

@keyframes modalFade {
  from { opacity: 0; }
}

.modal-panel {
  position: relative;
  width: min(520px, 100%);
  max-height: min(820px, calc(100svh - 32px));
  overflow: auto;
  border: 1px solid rgba(231, 185, 79, .54);
  border-radius: 20px;
  padding: 24px 18px 18px;
  color: #ddd6c0;
  background:
    radial-gradient(circle at 70% 0, rgba(25, 156, 184, .16), transparent 33%),
    repeating-linear-gradient(96deg, rgba(81, 39, 18, .26) 0 5px, transparent 6px 14px),
    linear-gradient(145deg, #3c2113, #101619 58%, #070d10);
  box-shadow: inset 0 0 0 4px rgba(18, 8, 4, .65), inset 0 0 0 6px rgba(192, 121, 33, .18), 0 30px 100px rgba(0, 0, 0, .82);
  animation: panelIn .3s cubic-bezier(.2, .9, .25, 1.12) both;
  scrollbar-color: #55cfe2 rgba(1, 10, 14, .72);
  scrollbar-width: thin;
}

.modal-panel::-webkit-scrollbar {
  width: 10px;
}

.modal-panel::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(1, 10, 14, .72);
}

.modal-panel::-webkit-scrollbar-thumb {
  border: 2px solid rgba(1, 10, 14, .72);
  border-radius: 999px;
  background: linear-gradient(180deg, #7be5f1, #157f99);
}

.modal-panel::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(245, 219, 148, .09);
  border-radius: 14px;
  pointer-events: none;
}

@keyframes panelIn {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
}

.modal-panel--compact {
  width: min(440px, 100%);
}

.modal-panel--wide {
  width: min(840px, 100%);
}

.modal-panel--collection {
  width: min(1040px, 100%);
  background:
    radial-gradient(circle at 50% -15%, color-mix(in srgb, var(--theme-accent) 23%, transparent), transparent 45%),
    linear-gradient(145deg, #321d12, #10191d 54%, #070d10);
}

.machine-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.machine-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 216px;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(235, 197, 111, .38);
  border-radius: 16px;
  color: #fff4cf;
  background: #071116;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), 0 12px 28px rgba(0, 0, 0, .38);
  text-align: left;
  cursor: pointer;
  isolation: isolate;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.machine-card:hover {
  border-color: var(--theme-hot);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .52), 0 0 24px color-mix(in srgb, var(--theme-accent) 20%, transparent);
  transform: translateY(-3px);
}

.machine-card.is-active {
  border-color: var(--theme-accent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--theme-accent) 38%, transparent), 0 0 28px color-mix(in srgb, var(--theme-accent) 22%, transparent);
}

.machine-card__art {
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image: var(--card-image);
  background-position: center;
  background-size: cover;
  filter: brightness(.73) saturate(1.08);
  transform: scale(1.02);
  transition: filter .25s ease, transform .5s ease;
}

.machine-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, transparent 24%, rgba(2, 7, 10, .42) 52%, rgba(2, 7, 10, .98) 100%);
}

.machine-card:hover .machine-card__art {
  filter: brightness(.88) saturate(1.15);
  transform: scale(1.055);
}

.machine-card__copy {
  align-self: end;
  display: grid;
  gap: 4px;
  padding: 72px 16px 40px;
}

.machine-card__copy strong {
  font-family: var(--serif);
  font-size: clamp(20px, 3vw, 29px);
  line-height: 1;
  text-shadow: 0 2px 10px #000;
}

.machine-card__copy small {
  color: #c9d8d7;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .04em;
}

.machine-card > i {
  position: absolute;
  right: 16px;
  bottom: 12px;
  color: var(--theme-accent-soft);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.modal-close {
  position: sticky;
  z-index: 4;
  top: 0;
  float: right;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -10px -5px 0 8px;
  padding: 0;
  border: 1px solid rgba(227, 188, 97, .35);
  border-radius: 50%;
  color: #e9d7a8;
  background: rgba(7, 12, 14, .85);
  cursor: pointer;
}

.modal-close svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.modal-panel h2 {
  margin: 5px 0 7px;
  color: #f5d986;
  font-family: var(--serif);
  font-size: clamp(25px, 6vw, 36px);
  line-height: 1;
}

.modal-panel > p {
  margin: 0 0 17px;
  color: #b8c4be;
  font-size: 12px;
  line-height: 1.55;
}

.range-row,
.switch-row,
.select-row {
  position: relative;
  display: block;
  min-height: 56px;
  margin-top: 8px;
  padding: 11px 12px;
  border: 1px solid rgba(214, 174, 79, .2);
  border-radius: 12px;
  background: rgba(3, 12, 16, .52);
}

.range-row > span,
.switch-row > span,
.select-row > span {
  display: block;
  padding-right: 60px;
  color: #eadcb6;
  font-size: 12px;
}

.range-row output {
  float: right;
  color: #71d8e8;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

.range-row input[type="range"] {
  width: 100%;
  min-height: 28px;
  margin: 5px 0 0;
  accent-color: #42c8de;
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.switch-row strong,
.select-row strong {
  display: block;
  font-size: 12px;
}

.switch-row small,
.select-row small {
  display: block;
  margin-top: 3px;
  color: #859a9d;
  font-size: 9px;
  line-height: 1.35;
}

.switch-row input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.switch-row > i {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 28px;
  border: 1px solid rgba(227, 191, 105, .34);
  border-radius: 999px;
  background: #101416;
  transition: background .2s ease;
}

.switch-row > i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #9c998c;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
  transition: transform .2s ease, background .2s ease;
}

.switch-row input:checked + i {
  background: #0a7289;
}

.switch-row input:checked + i::after {
  background: #99eff8;
  transform: translateX(20px);
}

.switch-row input:focus-visible + i {
  outline: 3px solid #8eeaff;
  outline-offset: 3px;
}

.select-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.select-row select {
  min-width: 128px;
  min-height: 44px;
  border: 1px solid rgba(227, 189, 92, .38);
  border-radius: 9px;
  padding: 0 8px;
  color: #e9ddb9;
  background: #07151a;
}

.secondary-action {
  margin-top: 14px;
}

.paytable-legend {
  margin: -8px 0 14px;
  padding: 8px 10px;
  border-left: 3px solid #53cfe2;
  color: #b8cecc;
  background: rgba(3, 26, 34, .58);
  font-size: 12px;
  line-height: 1.4;
}

.paytable-legend strong {
  color: #f2d68c;
}

.paytable-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  clear: both;
}

.pay-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 70px;
  padding: 7px 9px;
  border: 1px solid rgba(215, 176, 83, .22);
  border-radius: 11px;
  background: rgba(2, 12, 17, .58);
}

.pay-card > img,
.pay-svg {
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .7));
}

.pay-card > div {
  min-width: 0;
}

.pay-card strong {
  display: block;
  color: #f0d798;
  font-size: 13px;
}

.pay-card span {
  display: block;
  margin-top: 2px;
  color: #8fa4a5;
  font-size: 12px;
  line-height: 1.35;
}

.pay-card > b {
  grid-column: 2;
  color: #70d9e9;
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
}

.svg-brass {
  fill: #bc8131;
  stroke: #f2cb70;
  stroke-width: 3;
  stroke-linejoin: round;
}

.svg-glow {
  fill: none;
  stroke: #ffe38b;
  stroke-width: 4;
  stroke-linecap: round;
}

.svg-water {
  fill: #0d88a2;
  stroke: #79e8f6;
  stroke-width: 2;
}

.svg-sack {
  fill: #78502a;
  stroke: #e0b25b;
  stroke-width: 3;
  stroke-linejoin: round;
}

.rank-fan {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
}

.rank-fan i {
  margin-left: -7px;
  color: #68dcec;
  font-family: var(--serif);
  font-size: 24px;
  font-style: normal;
  font-weight: 900;
  text-shadow: 1px 1px #b97520;
  transform: rotate(-8deg);
}

.rank-fan i:first-child {
  margin-left: 0;
}

.rules-note {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(96, 214, 233, .24);
  border-radius: 12px;
  background: rgba(4, 31, 40, .55);
}

.rules-note strong {
  color: #75dfef;
  font-family: var(--serif);
  font-size: 17px;
}

.rules-note span {
  color: #a9bcba;
  font-size: 10px;
  line-height: 1.5;
}

.modal-layer--bonus {
  z-index: 90;
  padding: 0;
  overflow: hidden;
  background: #02090e;
  backdrop-filter: none;
}

.bonus-stage {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto minmax(190px, 1fr) auto;
  width: 100%;
  height: 100vh;
  height: 100svh;
  max-height: none;
  padding:
    max(16px, var(--safe-top))
    max(12px, var(--safe-right))
    max(12px, var(--safe-bottom))
    max(12px, var(--safe-left));
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0, 7, 12, .76), rgba(0, 12, 18, .16) 32%, rgba(1, 12, 17, .4)),
    var(--machine-storm-bg) center / cover no-repeat;
  isolation: isolate;
}

.bonus-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 50% 38%, transparent 12%, rgba(0, 7, 12, .22) 58%, rgba(0, 4, 8, .8)),
    linear-gradient(90deg, rgba(0, 7, 12, .7), transparent 24%, transparent 76%, rgba(0, 7, 12, .7));
}

body[data-machine="orloj"] .bonus-stage::after,
body[data-machine="seasons"] .bonus-stage::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

body[data-machine="orloj"] .bonus-stage::after {
  opacity: .24;
  background:
    repeating-conic-gradient(from 8deg at 50% 56%, transparent 0 13deg, rgba(126, 231, 255, .16) 14deg 15deg, transparent 16deg 29deg),
    radial-gradient(circle at 50% 56%, transparent 0 25%, rgba(215, 166, 75, .24) 25.3% 25.8%, transparent 26.2% 38%, rgba(126, 231, 255, .15) 38.4% 39%, transparent 39.5%);
  mix-blend-mode: screen;
}

body[data-machine="seasons"] .bonus-stage::after {
  opacity: .34;
  background:
    radial-gradient(circle at 18% 22%, transparent 0 7%, rgba(239, 197, 107, .45) 7.4% 7.8%, transparent 8.2%),
    radial-gradient(circle at 80% 18%, transparent 0 9%, rgba(120, 242, 220, .4) 9.4% 9.8%, transparent 10.2%),
    radial-gradient(circle at 68% 68%, transparent 0 6%, rgba(210, 164, 255, .4) 6.4% 6.8%, transparent 7.2%);
  mix-blend-mode: screen;
}

body[data-machine="orloj"] .levee,
body[data-machine="orloj"] .physical-water,
body[data-machine="seasons"] .levee,
body[data-machine="seasons"] .physical-water {
  display: none;
}

.bonus-stage__lightning {
  position: absolute;
  z-index: 6;
  inset: 0;
  opacity: 0;
  background: rgba(178, 239, 255, .26);
  pointer-events: none;
}

.bonus-effects-canvas {
  position: absolute;
  z-index: 10;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.bonus-stage.is-lightning .bonus-stage__lightning {
  animation: lightningFlash .55s ease-out;
}

@keyframes lightningFlash {
  0% { opacity: 0; }
  9% { opacity: .38; }
  16% { opacity: .06; }
  23% { opacity: .24; }
  100% { opacity: 0; }
}

.bonus-header {
  position: relative;
  z-index: 7;
  text-align: center;
  text-shadow: 0 3px 14px #000;
}

.bonus-header h2 {
  margin: 2px 0;
  color: #9feeff;
  font-family: var(--serif);
  font-size: clamp(31px, 8vw, 72px);
  font-weight: 900;
  letter-spacing: .07em;
  line-height: .95;
  text-transform: uppercase;
  text-shadow: 0 0 16px rgba(85, 221, 245, .66), 0 4px 3px #092531;
}

.bonus-header p {
  margin: 4px 0 0;
  color: #d7e7e7;
  font-size: clamp(10px, 2.6vw, 14px);
}

.bonus-hud {
  position: relative;
  z-index: 7;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  width: min(680px, 100%);
  margin: 10px auto 0;
}

.bonus-hud > div {
  min-width: 0;
  padding: 7px;
  overflow: hidden;
  border: 1px solid rgba(231, 190, 91, .39);
  border-radius: 9px;
  text-align: center;
  background: rgba(2, 12, 17, .79);
  box-shadow: inset 0 0 14px rgba(33, 153, 178, .13);
}

.bonus-hud span {
  display: block;
  overflow: hidden;
  color: #8ca8aa;
  font-size: clamp(9px, 1.7vw, 11px);
  font-weight: 900;
  letter-spacing: .1em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.bonus-hud strong {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #f5d277;
  font-family: var(--serif);
  font-size: clamp(14px, 4vw, 23px);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
}

.bonus-pips {
  position: relative;
  z-index: 7;
  display: flex;
  justify-content: center;
  gap: 5px;
  min-height: 13px;
  margin-top: 7px;
}

.bonus-pips i {
  width: clamp(20px, 7vw, 46px);
  height: 7px;
  border: 1px solid rgba(223, 192, 112, .31);
  border-radius: 999px;
  background: rgba(1, 9, 13, .72);
}

.bonus-pips i.is-used {
  background: #0c7189;
  box-shadow: 0 0 8px rgba(73, 218, 239, .55);
}

.strongbox-field {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, 3vw, 28px);
  width: min(920px, 100%);
  min-height: 190px;
  margin: 0 auto;
  padding: 5px 0 70px;
}

.strongbox-choice {
  position: relative;
  flex: 0 1 260px;
  width: min(28vw, 260px);
  min-width: 94px;
  min-height: 150px;
  padding: 4px 2px 7px;
  border: 0;
  border-radius: 20px;
  color: #f6d57d;
  background: transparent;
  filter: drop-shadow(0 14px 10px rgba(0, 0, 0, .66));
  cursor: pointer;
  transition: transform .24s cubic-bezier(.2, .8, .2, 1), filter .2s ease;
  animation: strongboxFloat 2.8s ease-in-out infinite alternate;
}

.strongbox-choice:nth-child(2) { animation-delay: -.9s; }
.strongbox-choice:nth-child(3) { animation-delay: -1.8s; }

.strongbox-choice img {
  position: relative;
  z-index: 2;
  display: block;
  width: min(100%, 210px);
  aspect-ratio: 1;
  margin: 0 auto -8px;
  object-fit: contain;
}

.strongbox-choice strong {
  position: relative;
  z-index: 4;
  display: block;
  font-family: var(--serif);
  font-size: clamp(12px, 2.4vw, 16px);
  letter-spacing: .08em;
  text-shadow: 0 2px 6px #000;
  text-transform: uppercase;
}

.strongbox-choice__glow {
  position: absolute;
  z-index: 0;
  top: 28%;
  left: 50%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(53, 214, 240, .32);
  box-shadow: 0 0 34px rgba(59, 218, 242, .62);
  filter: blur(10px);
  transform: translate(-50%, -50%);
}

.strongbox-choice:hover:not(:disabled),
.strongbox-choice:focus-visible:not(:disabled) {
  filter: drop-shadow(0 16px 13px rgba(0, 0, 0, .7)) drop-shadow(0 0 18px rgba(80, 226, 246, .64));
  transform: translateY(-7px) scale(1.045);
}

html[data-pulse-game] .strongbox-choice:focus-visible {
  outline: none;
}

.strongbox-choice:focus-visible img {
  filter:
    drop-shadow(0 0 2px #e9fcff)
    drop-shadow(0 0 9px #75e9f6)
    drop-shadow(0 0 20px rgba(54, 202, 229, .66));
}

.strongbox-choice:active:not(:disabled) {
  transform: translateY(1px) scale(.96);
}

.strongbox-choice:disabled {
  opacity: .68;
  filter: grayscale(.28) brightness(.78) drop-shadow(0 8px 8px rgba(0, 0, 0, .55));
}

.strongbox-choice.is-chosen {
  opacity: 1;
  animation: boxOpen .6s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes strongboxFloat {
  to { transform: translateY(-8px) rotate(.7deg); }
}

@keyframes boxOpen {
  45% { transform: scale(.85) rotate(-3deg); filter: brightness(1.2); }
  70% { transform: scale(1.12) rotate(2deg); filter: brightness(2); }
  100% { transform: scale(1); }
}

.bonus-reveal {
  position: absolute;
  z-index: 11;
  top: 48%;
  left: 50%;
  display: grid;
  min-width: min(410px, 88vw);
  padding: 17px 22px;
  opacity: 0;
  border: 1px solid rgba(240, 205, 115, .6);
  border-radius: 18px;
  text-align: center;
  background: rgba(2, 13, 18, .88);
  box-shadow: 0 0 0 4px rgba(4, 18, 24, .58), 0 20px 60px rgba(0, 0, 0, .74), inset 0 0 28px rgba(61, 204, 228, .16);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.72);
  transition: opacity .25s ease, transform .35s cubic-bezier(.2, .9, .24, 1.25);
}

.bonus-reveal.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.bonus-reveal > span {
  color: #8acbd4;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.bonus-reveal strong {
  color: #f8df92;
  font-family: var(--serif);
  font-size: clamp(24px, 7vw, 44px);
  text-transform: uppercase;
}

.bonus-reveal b {
  color: #72e4f3;
  font-family: var(--serif);
  font-size: clamp(20px, 6vw, 38px);
}

.levee {
  position: absolute;
  z-index: 5;
  right: max(10px, 6vw);
  bottom: 100px;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 1px;
  filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .75));
}

.sandbag-row {
  display: flex;
  gap: 1px;
  transition: opacity .45s ease, filter .45s ease, transform .45s ease;
}

.sandbag-row i {
  position: relative;
  width: clamp(19px, 4vw, 38px);
  height: clamp(11px, 2.3vw, 21px);
  border: 1px solid #3e2a13;
  border-radius: 42% 54% 45% 51%;
  background:
    linear-gradient(90deg, transparent 48%, rgba(54, 35, 13, .48) 49% 52%, transparent 53%),
    repeating-linear-gradient(15deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #b69a61, #71552d);
  box-shadow:
    inset 0 1px rgba(255, 240, 181, .28),
    inset 0 -4px 5px rgba(55, 37, 16, .48),
    0 1px 0 rgba(236, 194, 103, .18);
  transform: translateY(1px) rotate(-2deg) scale(.97, 1.02);
}

.sandbag-row:nth-child(even) i {
  transform: translateY(-1px) rotate(1.8deg) scale(1.03, .96);
}

.sandbag-row i:nth-child(2n) {
  transform: translateY(2px) rotate(2.8deg) scale(.92, 1.06);
}

.sandbag-row i:nth-child(3n) {
  transform: translateY(-2px) rotate(-3.4deg) scale(1.07, .93);
}

.sandbag-row:nth-child(3n) i:nth-child(2n) {
  transform: translateY(1px) rotate(4deg) scale(1.02, .96);
}

.sandbag-row i::before {
  content: "";
  position: absolute;
  inset: auto 2px 1px;
  height: 46%;
  border-radius: 0 0 50% 50%;
  opacity: .18;
  background: linear-gradient(180deg, transparent, rgba(8, 52, 61, .74));
  transition: opacity .45s ease;
}

.sandbag-row i::after {
  content: "";
  position: absolute;
  inset: 3px 5px;
  border-top: 1px dashed rgba(66, 42, 14, .68);
  border-bottom: 1px dashed rgba(66, 42, 14, .5);
  border-radius: inherit;
}

.sandbag-row.is-submerged {
  opacity: .46;
  filter: saturate(.48) brightness(.58);
  transform: translateX(8px) rotate(2deg);
}

.sandbag-row.is-submerged i::before {
  opacity: .92;
}

.physical-water {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  height: 8%;
  pointer-events: none;
  overflow: visible;
  transition: height .85s cubic-bezier(.2, .85, .25, 1);
}

.physical-water__body {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 18% 7%, rgba(195, 249, 255, .22), transparent 26%),
    radial-gradient(ellipse at 72% 15%, rgba(96, 215, 235, .18), transparent 31%),
    linear-gradient(180deg, rgba(9, 111, 140, .58), rgba(2, 43, 61, .76));
  box-shadow:
    inset 0 16px 32px rgba(128, 233, 247, .12),
    0 -9px 34px rgba(57, 200, 225, .28);
  backdrop-filter: blur(1.2px) saturate(1.14);
}

.physical-water__body::before,
.physical-water__body::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.physical-water__body::before {
  opacity: .52;
  background:
    repeating-radial-gradient(ellipse at 18% 0, transparent 0 36px, rgba(181, 242, 249, .13) 38px 40px, transparent 43px 72px),
    linear-gradient(105deg, transparent 0 28%, rgba(190, 245, 252, .13) 31%, transparent 35% 68%, rgba(101, 211, 230, .1) 71%, transparent 76%);
  mix-blend-mode: screen;
  animation: waterParallax 5.8s ease-in-out infinite alternate;
}

.physical-water__body::after {
  opacity: .36;
  background:
    repeating-linear-gradient(174deg, transparent 0 16px, rgba(178, 235, 244, .1) 18px, transparent 21px 38px),
    radial-gradient(ellipse at 50% 110%, rgba(0, 20, 31, .42), transparent 65%);
  animation: waterSheen 7.2s linear infinite;
}

.physical-water__crest {
  position: absolute;
  z-index: 2;
  top: -19px;
  left: -3%;
  width: 106%;
  height: 25px;
  opacity: .72;
  background:
    linear-gradient(180deg, rgba(214, 252, 255, .82), rgba(76, 193, 216, .5) 42%, rgba(14, 91, 119, .18));
  clip-path: polygon(
    0 62%, 3% 39%, 7% 58%, 11% 25%, 15% 48%, 20% 34%,
    25% 63%, 30% 30%, 35% 51%, 40% 23%, 46% 56%, 52% 36%,
    58% 61%, 64% 27%, 70% 48%, 76% 31%, 82% 59%, 88% 26%,
    94% 50%, 100% 35%, 100% 100%, 0 100%
  );
  filter: drop-shadow(0 3px 6px rgba(121, 225, 240, .36));
  animation: waterRun 4.4s ease-in-out infinite alternate;
}

@keyframes waterRun {
  to { transform: translate3d(-1.5%, 3px, 0) scaleY(.9); }
}

@keyframes waterParallax {
  to { transform: translate3d(-3%, 2%, 0) scale(1.04); }
}

@keyframes waterSheen {
  to { transform: translate3d(4%, -18px, 0); }
}

.bonus-actions {
  position: relative;
  z-index: 9;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 310px);
  align-items: center;
  gap: 10px;
  width: min(900px, 100%);
  margin: 0 auto;
  padding: 8px;
  border: 1px solid rgba(225, 184, 85, .35);
  border-radius: 15px;
  background: rgba(2, 11, 15, .86);
  box-shadow: 0 14px 35px rgba(0, 0, 0, .48);
}

.bonus-actions p {
  margin: 0;
  color: #a7bcba;
  font-size: clamp(11px, 2vw, 14px);
  line-height: 1.45;
}

.bonus-actions.is-complete {
  opacity: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  transform: translateY(8px);
}

.bonus-actions.is-complete p {
  color: #f4d991;
  font-family: var(--serif);
  font-size: clamp(14px, 2.6vw, 19px);
  font-weight: 900;
  text-align: center;
}

.bonus-actions.is-complete .bank-button {
  display: none;
}

.bonus-actions.is-resolving {
  grid-template-columns: 1fr;
  border-color: rgba(112, 224, 239, .46);
  background: rgba(3, 24, 31, .94);
}

.bonus-actions.is-resolving p {
  color: #cff7fb;
  font-size: clamp(12px, 2vw, 15px);
  font-weight: 900;
  letter-spacing: .04em;
  text-align: center;
}

.bonus-actions.is-resolving .bank-button {
  display: none;
}

.bank-button {
  min-height: 58px;
  padding: 7px 14px;
  border: 1px solid #f2cf74;
  border-radius: 11px;
  color: #102026;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .48), transparent 38%),
    linear-gradient(180deg, #86e5ef, #2cb5ca 56%, #0b7189);
  box-shadow: inset 0 0 0 3px rgba(2, 76, 93, .32), 0 5px 0 #053a49, 0 8px 20px rgba(0, 0, 0, .48);
  cursor: pointer;
}

.bank-button span,
.bank-button strong {
  display: block;
}

.bank-button span {
  font-family: var(--serif);
  font-size: clamp(15px, 3vw, 20px);
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.bank-button strong {
  margin-top: 2px;
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.bank-button:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: inset 0 0 0 3px rgba(2, 76, 93, .32), 0 1px 0 #053a49;
}

.bank-button:disabled {
  opacity: .72;
  filter: grayscale(.3) brightness(.8);
}

.bonus-stage.is-flooding {
  animation: cabinetFlood .12s linear 9;
}

.bonus-stage.is-flooding .physical-water {
  height: 100% !important;
  transition-duration: 1.25s;
}

@keyframes cabinetFlood {
  25% { transform: translate(-3px, 1px); }
  75% { transform: translate(3px, -1px); }
}

.noscript-card {
  position: fixed;
  z-index: 200;
  inset: 20px;
  display: grid;
  place-items: center;
  border: 1px solid #d9ae50;
  border-radius: 18px;
  padding: 24px;
  color: #f4dda2;
  background: #10191d;
  text-align: center;
}

body.motion-reduced *,
body.motion-reduced *::before,
body.motion-reduced *::after {
  scroll-behavior: auto !important;
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}

body.motion-reduced .environment__video {
  display: none !important;
}

body.screen-shake .game-shell.is-shaking {
  animation: shellShake .36s linear;
}

@keyframes shellShake {
  15% { transform: translate3d(-4px, 1px, 0); }
  35% { transform: translate3d(4px, -2px, 0); }
  55% { transform: translate3d(-3px, 2px, 0); }
  75% { transform: translate3d(2px, -1px, 0); }
}

@media (max-width: 679px) {
  .machine-button {
    width: 44px;
    padding: 0;
  }

  .machine-button span {
    display: none;
  }
}

@media (min-width: 680px) {
  .session-chip {
    display: inline-flex;
  }

  .utility-brand__eyebrow {
    font-size: 9px;
  }

  .cabinet,
  .console {
    padding: 10px;
  }

  .marquee {
    min-height: 78px;
  }

  .marquee img {
    width: min(62%, 390px);
    max-height: 88px;
  }

  .reel-window {
    min-height: 315px;
  }

  .status-ribbon {
    min-height: 31px;
  }

  .paytable-grid {
    grid-template-columns: 1fr 1fr;
  }

  .pay-card--ranks,
  .pay-card--hero:first-child {
    grid-column: span 2;
  }
}

@media (min-width: 680px) and (max-width: 979px) and (max-aspect-ratio: 4 / 5) {
  .machine-zone,
  .side-rail {
    max-width: 650px;
  }

  .marquee {
    min-height: 64px;
  }

  .marquee img {
    max-height: 72px;
  }

  .reel-window {
    min-height: 0;
  }

  .console {
    padding: 8px;
  }
}

@media (min-width: 980px) and (min-aspect-ratio: 6 / 5) {
  body {
    overflow: hidden;
  }

  .game-shell {
    height: 100vh;
    height: 100svh;
    min-height: 0;
    padding-top: max(8px, var(--safe-top));
  }

  .utility-bar {
    min-height: 52px;
    margin-bottom: 8px;
  }

  .game-layout {
    display: grid;
    grid-template-columns: minmax(170px, 220px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(8px, 1.2vw, 20px);
  }

  .machine-zone {
    order: initial;
    display: grid;
    grid-template-columns: minmax(560px, 1fr) minmax(215px, 275px);
    align-items: stretch;
    gap: clamp(8px, 1vw, 14px);
    max-width: 1120px;
  }

  .side-rail {
    order: initial;
    align-self: center;
    max-width: none;
  }

  .side-rail--report {
    display: none;
  }

  .side-card {
    padding: 15px 14px;
  }

  .orders-card .order-list {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .orders-card .order__copy {
    display: flex;
    margin-bottom: 5px;
    font-size: 10px;
  }

  .orders-card .order__copy strong {
    margin-top: 0;
  }

  .orders-card h2 {
    margin: 7px 0 15px;
    font-size: 18px;
  }

  .orders-card .restoration {
    margin-top: 15px;
    padding-top: 12px;
  }

  .cabinet {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .marquee {
    min-height: clamp(84px, 11vh, 122px);
  }

  .marquee img {
    width: min(66%, 480px);
    max-height: 118px;
  }

  .marquee__type-title {
    transform: translateY(-7px);
  }

  .marquee p {
    position: absolute;
    right: 18px;
    bottom: 7px;
    left: 18px;
    display: block;
    margin: 0;
    color: rgba(171, 205, 211, .65);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
    text-align: center;
    text-transform: uppercase;
  }

  .progressives {
    gap: 5px;
    margin: 7px 3px;
  }

  .progressive {
    padding: 7px 4px 8px;
  }

  .reel-deck {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
  }

  .reel-window {
    flex: 1;
    min-height: min(52vh, 560px);
    max-height: 580px;
    aspect-ratio: auto;
  }

  .console {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    width: 100%;
    min-width: 0;
    padding: 13px 11px;
  }

  .console-telemetry {
    display: block;
  }

  .readouts {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .readout {
    padding: 9px 7px;
  }

  .readout span {
    font-size: 10px;
  }

  .readout strong {
    font-size: clamp(20px, 1.8vw, 29px);
  }

  .momentum {
    margin: 13px 4px 15px;
  }

  .momentum__label {
    font-size: 10px;
  }

  .momentum__track {
    height: 12px;
  }

  .control-bank {
    grid-template-columns: 1fr 58px;
    grid-template-areas:
      "bet bet"
      "spin max";
    gap: 10px;
  }

  .bet-control {
    grid-area: bet;
    min-height: 64px;
  }

  .spin-button {
    grid-area: spin;
    min-height: 86px;
  }

  .max-bet-button {
    grid-area: max;
    min-height: 82px;
  }

  .key-hint {
    margin-top: 13px;
    font-size: 10px;
  }
}

@media (min-width: 980px) and (max-width: 1199px) and (min-aspect-ratio: 6 / 5) {
  .game-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 78px minmax(0, 1fr);
    gap: 6px;
    height: calc(100svh - 86px);
    min-height: 0;
  }

  .side-rail--orders {
    grid-row: 1;
    width: 100%;
    max-width: none;
  }

  .orders-card {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 175px;
    grid-template-rows: auto 1fr;
    gap: 2px 12px;
    height: 78px;
    padding: 8px 11px;
  }

  .orders-card .side-card__head {
    grid-column: 1;
    grid-row: 1;
  }

  .orders-card h2 {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    margin: 1px 0 0;
    font-size: 15px;
  }

  .orders-card .order-list {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .orders-card .order__copy {
    display: flex;
    margin-bottom: 4px;
    font-size: 10px;
  }

  .orders-card .restoration {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    margin: 0;
    padding: 0 0 0 12px;
    border-top: 0;
    border-left: 1px solid rgba(227, 190, 100, .17);
  }

  .machine-zone {
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr) 210px;
    gap: 6px;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: none;
  }

  .cabinet,
  .console {
    min-height: 0;
  }

  .marquee {
    min-height: 72px;
  }

  .reel-window {
    min-height: 0;
    max-height: none;
  }

  .console {
    padding-right: 8px;
    padding-left: 8px;
  }

  .console-telemetry {
    margin-bottom: 7px;
    padding: 8px;
  }

  .console-telemetry > p {
    display: none;
  }

  .console-telemetry > strong {
    font-size: 16px;
  }

  .readouts {
    gap: 4px;
  }

  .readout {
    padding: 5px;
  }

  .readout strong {
    font-size: 18px;
  }

  .momentum {
    margin: 7px 2px 9px;
  }

  .control-bank {
    grid-template-columns: minmax(0, 1fr) 50px;
    gap: 5px;
  }

  .spin-button {
    min-width: 0;
  }

  .max-bet-button {
    min-width: 50px;
  }

  .key-hint {
    margin-top: 7px;
  }
}

@media (min-width: 1440px) and (min-height: 850px) {
  .game-layout {
    grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
  }

  .machine-zone {
    grid-template-columns: minmax(720px, 1fr) 280px;
  }

  .side-card {
    padding: 18px 16px;
  }

  .side-card h2 {
    font-size: 21px;
  }

  .orders-card .order__copy,
  .restoration__label {
    font-size: 10px;
  }

  .micro-track {
    height: 7px;
  }

  .reel-window {
    min-height: 560px;
  }
}

@media (min-width: 1600px) and (min-height: 760px) and (min-aspect-ratio: 6 / 5) {
  .game-layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .side-rail--report {
    display: none;
  }
}

/* Short landscape receives its own cabinet/control split instead of an
   orientation blocker. This remains fully usable from 844x390 upward. */
@media (max-height: 650px) and (min-aspect-ratio: 4 / 3) {
  body {
    overflow: hidden;
  }

  .game-shell {
    padding-top: max(3px, var(--safe-top));
    padding-bottom: max(2px, var(--safe-bottom));
  }

  .utility-bar {
    min-height: 44px;
    margin-bottom: 3px;
  }

  .utility-button {
    min-height: 44px;
  }

  .utility-button--icon {
    width: 44px;
    min-width: 44px;
  }

  .session-chip {
    display: none;
  }

  .game-layout {
    display: block;
    width: min(1060px, 100%);
    margin: auto;
  }

  .machine-zone {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(190px, 25vw, 250px);
    gap: 6px;
    width: 100%;
    max-width: none;
  }

  .side-rail {
    display: none;
  }

  .cabinet,
  .console {
    min-height: 0;
    padding: 5px;
    border-radius: 10px;
  }

  .marquee {
    min-height: 35px;
    height: 35px;
  }

  .marquee img {
    width: min(45%, 200px);
    max-height: 40px;
  }

  .marquee__type-title {
    padding: 1px 14px 0;
    transform: none;
  }

  .marquee__type-title span {
    font-size: 13px;
    line-height: .82;
  }

  .marquee__type-title strong {
    font-size: 22px;
    line-height: .88;
  }

  .marquee p {
    display: none;
  }

  .progressives {
    margin: 3px 1px;
  }

  .progressive {
    padding: 3px 2px;
  }

  .progressive span {
    font-size: 10px;
  }

  .progressive strong {
    font-size: clamp(12px, 1.6vw, 14px);
  }

  .reel-deck {
    padding: 3px 3px 0;
  }

  .reel-window {
    height: calc(100svh - 165px);
    min-height: 205px;
    max-height: 300px;
    aspect-ratio: auto;
  }

  .status-ribbon {
    min-height: 22px;
    padding: 2px 7px;
    font-size: 10px;
  }

  .console {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .readouts {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .readout {
    padding: 3px;
  }

  .readout span {
    display: inline;
    font-size: 10px;
  }

  .readout strong {
    display: inline;
    margin-left: 4px;
    font-size: 14px;
  }

  .momentum {
    margin: 5px 2px;
  }

  .control-bank {
    grid-template-columns: 1fr 48px;
    grid-template-areas:
      "bet bet"
      "spin max";
    gap: 5px;
  }

  .bet-control {
    grid-area: bet;
    min-height: 50px;
  }

  .spin-button {
    grid-area: spin;
    min-height: 66px;
  }

  .max-bet-button {
    grid-area: max;
    min-height: 62px;
  }

  .key-hint {
    display: none;
  }

  .disclosure {
    min-height: 16px;
    margin-top: 1px;
    font-size: 10px;
  }

  .bonus-stage {
    grid-template-columns: minmax(210px, .72fr) minmax(390px, 1.4fr) minmax(200px, .72fr);
    grid-template-rows: auto auto 1fr;
    gap: 4px 12px;
    padding: max(5px, var(--safe-top)) max(8px, var(--safe-right)) max(5px, var(--safe-bottom)) max(8px, var(--safe-left));
  }

  .bonus-header {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    text-align: left;
  }

  .bonus-header h2 {
    font-size: clamp(28px, 5vw, 48px);
  }

  .bonus-header p {
    font-size: 11px;
  }

  .bonus-hud {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: 1fr;
    gap: 3px;
    margin-top: 2px;
  }

  .bonus-hud > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px;
  }

  .bonus-hud strong {
    font-size: 14px;
  }

  .bonus-pips {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    flex-wrap: wrap;
  }

  .strongbox-field {
    grid-column: 2;
    grid-row: 1 / span 3;
    min-height: 0;
    padding: 0 0 32px;
  }

  .strongbox-choice {
    min-width: 92px;
    min-height: 120px;
  }

  .strongbox-choice img {
    width: min(100%, 170px);
  }

  .bonus-actions {
    grid-column: 3;
    grid-row: 1 / span 3;
    align-self: center;
    grid-template-columns: 1fr;
    padding: 7px;
  }

  .bonus-actions p {
    font-size: 10px;
  }

  .levee {
    right: 29%;
    bottom: 20px;
  }

  .sandbag-row i {
    width: 24px;
    height: 13px;
  }
}

@media (max-height: 650px) and (max-width: 899px) and (min-aspect-ratio: 4 / 3) {
  .bonus-stage {
    grid-template-columns: minmax(190px, .78fr) minmax(0, 1.55fr);
    grid-template-rows: auto auto 1fr;
  }

  .bonus-pips {
    display: none;
  }

  .strongbox-field {
    grid-column: 2;
    grid-row: 1 / span 3;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 3px;
    width: 100%;
    padding: 0 0 34px;
  }

  .strongbox-choice {
    width: 100%;
    min-width: 0;
    min-height: 120px;
  }

  .strongbox-choice img {
    width: min(100%, 158px);
  }

  .strongbox-choice strong {
    font-size: 11px;
    letter-spacing: .02em;
    white-space: nowrap;
  }

  .bonus-actions {
    position: relative;
    right: auto;
    bottom: auto;
    grid-column: 1;
    grid-row: 3;
    align-self: end;
    display: grid;
    width: 100%;
    padding: 6px;
  }

  .bonus-actions p {
    display: block;
    font-size: 10px;
    line-height: 1.3;
    text-align: left;
  }

  .bank-button {
    min-height: 54px;
  }

  .levee {
    right: 4px;
    bottom: 4px;
    transform: scale(.72);
    transform-origin: 100% 100%;
  }
}

@media (max-width: 440px) {
  .game-shell {
    padding-right: max(5px, var(--safe-right));
    padding-left: max(5px, var(--safe-left));
  }

  .utility-bar {
    gap: 4px;
  }

  .arcade-back {
    width: 44px;
    padding: 0;
  }

  .arcade-back span {
    display: none;
  }

  .utility-actions {
    gap: 3px;
  }

  .machine-button {
    width: 44px;
    padding: 0;
  }

  .machine-button span {
    display: none;
  }

  .machine-picker {
    grid-template-columns: 1fr;
  }

  .machine-card {
    min-height: 172px;
  }

  .utility-button--icon {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .reel-window {
    min-height: 230px;
  }

  .symbol-cell {
    padding: 1%;
  }

  .control-bank {
    grid-template-columns: minmax(108px, 1fr) minmax(108px, 1.04fr) 50px;
    gap: 4px;
  }

  .bet-control {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    padding: 2px;
  }

  .metal-button {
    width: 42px;
    min-width: 42px;
    height: 44px;
  }

  .spin-button {
    min-width: 108px;
  }

  .max-bet-button {
    min-width: 50px;
  }

  .side-card {
    padding: 9px 10px;
  }

  .side-card h2 {
    display: none;
  }

  .order-list {
    margin-top: 5px;
  }

  .restoration {
    margin-top: 6px;
    padding-top: 5px;
  }

  .bonus-actions {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .bonus-actions p {
    text-align: center;
  }

  .strongbox-field {
    align-items: flex-start;
    padding-top: clamp(18px, 4vh, 32px);
    padding-bottom: 0;
  }

  .strongbox-choice {
    min-width: 92px;
  }

  .max-bet-button {
    min-width: 56px;
  }

  .control-bank {
    grid-template-columns: minmax(108px, 1fr) minmax(108px, 1.04fr) 56px;
  }

  #pulse-player-gate {
    place-items: center !important;
    padding:
      max(12px, var(--safe-top))
      max(12px, var(--safe-right))
      max(12px, var(--safe-bottom))
      max(12px, var(--safe-left)) !important;
    overflow-y: auto;
  }

  #pulse-player-gate > section {
    width: 100% !important;
    max-width: 406px;
    min-width: 0;
    padding: 19px !important;
    overflow-wrap: anywhere;
  }

  #pulse-player-gate h2 {
    font-size: 24px !important;
  }

  #pulse-player-gate form,
  #pulse-player-gate label,
  #pulse-player-gate input,
  #pulse-player-gate button {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-height: 520px) and (min-aspect-ratio: 4 / 3) {
  #pulse-player-gate {
    place-items: start center !important;
    padding:
      max(8px, var(--safe-top))
      max(8px, var(--safe-right))
      max(8px, var(--safe-bottom))
      max(8px, var(--safe-left)) !important;
    overflow-y: auto;
  }

  #pulse-player-gate > section {
    width: min(440px, 100%) !important;
    max-width: calc(100vw - 16px);
    min-width: 0;
    margin: auto;
    padding: 16px !important;
  }

  #pulse-player-gate > section > p:first-of-type {
    margin-bottom: 6px !important;
    font-size: 10px !important;
  }

  #pulse-player-gate h2 {
    margin-bottom: 6px !important;
    font-size: 21px !important;
  }

  #pulse-player-gate h2 + p {
    margin-bottom: 11px !important;
    font-size: 12px !important;
    line-height: 1.38 !important;
  }

  #pulse-player-gate form {
    gap: 7px !important;
  }

  #pulse-player-gate input,
  #pulse-player-gate button {
    padding: 10px 12px !important;
  }

  #pulse-player-gate form > p:last-child {
    margin-top: 1px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .environment__video {
    display: none !important;
  }
}