:root {
  color-scheme: dark;
  --ink: #f6ead2;
  --muted: #c3b99f;
  --panel: #202425;
  --panel-2: #15191a;
  --steel: #3c4445;
  --steel-light: #758080;
  --rust: #b85a32;
  --rust-dark: #70301c;
  --gold: #e9b949;
  --green: #4eb86a;
  --red: #cf4338;
  --bonus: #57c5bd;
  --shadow: rgba(0,0,0,.5);
  --cell-size: clamp(38px, 9.35vw, 72px);
  --cell-gap: clamp(3px, .7vw, 6px);
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background:
    radial-gradient(circle at 50% -10%, rgba(184,90,50,.2), transparent 38%),
    linear-gradient(#15191a,#0c0f10);
}

body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  font-family: "Trebuchet MS","Arial Narrow",Arial,sans-serif;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 1px,transparent 7px);
}

button { font: inherit; }
button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
a { color: #e8c56a; }

.game-shell {
  width: min(100%,920px);
  margin: 0 auto;
  padding: 16px;
}

.topbar,.brand-block,.top-actions,.factory-header,.machine-footer,.dialog-header {
  display: flex;
  align-items: center;
}

.topbar,.factory-header,.machine-footer,.dialog-header { justify-content: space-between; }
.topbar { gap: 16px; margin-bottom: 12px; }
.brand-block { gap: 12px; }
.top-actions { gap: 8px; }

.brand-mark {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border: 3px solid #111;
  border-radius: 14px;
  color: #24160e;
  background:
    radial-gradient(circle at 9px 9px,#ffe299 0 2px,#69431d 3px 5px,transparent 6px),
    radial-gradient(circle at calc(100% - 9px) 9px,#ffe299 0 2px,#69431d 3px 5px,transparent 6px),
    radial-gradient(circle at 9px calc(100% - 9px),#ffe299 0 2px,#69431d 3px 5px,transparent 6px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px),#ffe299 0 2px,#69431d 3px 5px,transparent 6px),
    linear-gradient(145deg,#f5ce68,#b87827);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.22),0 4px 0 #0a0c0d;
  transform: rotate(-2deg);
}

.brand-mark span { font-size: 22px; font-weight: 900; letter-spacing: -2px; }

.eyebrow,.subtitle,.status-label,.control-label,.message-kicker,.gauge-label {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.eyebrow { color: var(--gold); font-size: 10px; font-weight: 900; }

h1,h2,h3 {
  margin: 0;
  font-family: Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-weight: 400;
  letter-spacing: .035em;
  text-transform: uppercase;
}

h1 { font-size: clamp(29px,6vw,48px); line-height: .96; }
h2 { font-size: 29px; }
h3 { font-size: 21px; }
.subtitle { margin-top: 3px; color: var(--muted); font-size: 10px; }

.industrial-small-button,
.industrial-icon-button,
.industrial-main-button,
.stepper button {
  position: relative;
  overflow: hidden;
  border: 2px solid #0d0f10;
  color: var(--ink);
  background:
    linear-gradient(90deg,transparent 0 49%,rgba(255,255,255,.035) 50% 51%,transparent 52%),
    linear-gradient(#485051,#242a2b);
  box-shadow:
    inset 0 0 0 2px #697273,
    inset 0 8px 12px rgba(255,255,255,.06),
    0 4px 0 #080a0a;
  cursor: pointer;
}

.industrial-small-button::before,
.industrial-icon-button::before,
.stepper button::before {
  content:"";
  position:absolute;
  inset:5px;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.08);
  border-radius:6px;
}

.industrial-small-button {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 9px;
  font-weight: 900;
  letter-spacing: .07em;
}

.industrial-icon-button {
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  border-radius:9px;
  font-size:18px;
  font-weight:900;
}


.industrial-speed-button {
  position:relative;
  display:grid;
  grid-template-columns:auto auto;
  min-width:88px;
  min-height:42px;
  align-items:center;
  justify-content:center;
  gap:5px;
  overflow:hidden;
  padding:0 10px;
  border:2px solid #0d0f10;
  border-radius:9px;
  color:var(--ink);
  background:
    radial-gradient(circle at 7px 7px,#7c8586 0 2px,#111 3px 4px,transparent 5px),
    radial-gradient(circle at calc(100% - 7px) 7px,#7c8586 0 2px,#111 3px 4px,transparent 5px),
    linear-gradient(#485051,#242a2b);
  box-shadow:
    inset 0 0 0 2px #697273,
    inset 0 8px 12px rgba(255,255,255,.06),
    0 4px 0 #080a0a;
  cursor:pointer;
}

.industrial-speed-button::before {
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:6px;
  pointer-events:none;
}

.industrial-speed-button:hover {
  filter:brightness(1.1);
}

.industrial-speed-button:active {
  transform:translateY(2px);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.12),
    0 2px 0 #080a0a;
}

.industrial-speed-button[aria-pressed="true"] {
  color:#251707;
  background:
    repeating-linear-gradient(-45deg,rgba(0,0,0,.08) 0,rgba(0,0,0,.08) 5px,transparent 5px,transparent 10px),
    linear-gradient(#f1d477,#bd812e);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.25),
    0 4px 0 #4e3011,
    0 0 12px rgba(233,185,73,.38);
}

.speed-rabbit {
  position:relative;
  z-index:2;
  font-size:20px;
  line-height:1;
  transform:translateY(-1px);
}

.speed-label {
  position:relative;
  z-index:2;
  font-size:9px;
  font-weight:900;
  letter-spacing:.065em;
  line-height:1;
  text-transform:uppercase;
}

.industrial-speed-button[aria-pressed="true"] .speed-rabbit {
  animation:rabbit-ready .42s ease;
}

@keyframes rabbit-ready {
  0% { transform:translateX(-5px) translateY(-1px) scale(.88); }
  55% { transform:translateX(3px) translateY(-1px) scale(1.12); }
  100% { transform:translateX(0) translateY(-1px) scale(1); }
}

.status-strip {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.status-card {
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid #3b4243;
  border-radius: 8px;
  background: rgba(23,28,29,.9);
}

.status-card strong {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  font-size: clamp(15px,3.2vw,22px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-label { color: var(--muted); font-size: 9px; }
.win-status strong { color: var(--gold); }

.machine-frame {
  overflow: hidden;
  border: 4px solid #111;
  border-radius: 18px;
  background: #303637;
  box-shadow: inset 0 0 0 2px #657071,inset 0 0 0 7px #24292a,0 13px 30px var(--shadow);
  transition: border-color .45s ease,box-shadow .45s ease,filter .3s ease;
}

.factory-header {
  min-height: 138px;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 2px solid #0d0f10;
  background:
    repeating-linear-gradient(-45deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 5px,transparent 5px,transparent 10px),
    #252b2c;
}

.mode-heading { display:grid; min-width:0; gap:3px; }
.mode-heading > strong {
  font-family: Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-size: clamp(24px,4vw,38px);
  letter-spacing: .04em;
}
.mode-heading > span:last-child {
  max-width: 470px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.pressure-gauge {
  position: relative;
  flex: 0 0 145px;
  width: 145px;
  text-align: center;
}

.pressure-gauge svg { display:block; width:100%; }
.gauge-shell { fill:#171b1c; stroke:#707879; stroke-width:6; }
.gauge-track-circle,.gauge-progress-circle {
  fill:none;
  stroke-linecap:round;
  stroke-width:9;
  stroke-dasharray:75 25;
  transform:rotate(135deg);
  transform-origin:70px 66px;
}
.gauge-track-circle { stroke:#343a3b; }
.gauge-progress-circle {
  stroke:url(#pressureGradient);
  stroke-dasharray:0 100;
  transition:stroke-dasharray .48s cubic-bezier(.2,.75,.3,1);
}
.gauge-needle {
  stroke:#f5e7c5;
  stroke-width:3;
  stroke-linecap:round;
  transform:rotate(-135deg);
  transform-origin:70px 66px;
  transition:transform .48s cubic-bezier(.2,.75,.3,1);
  filter:drop-shadow(0 1px 2px #000);
}
.gauge-hub { fill:#b85a32; stroke:#251209; stroke-width:2; }
.gauge-zero,.gauge-half,.gauge-max {
  fill:#aeb5ad;
  font-size:9px;
  font-weight:900;
  text-anchor:middle;
}
.gauge-number {
  fill:#f4e7cb;
  font-size:14px;
  font-weight:900;
  text-anchor:middle;
}
.gauge-label {
  display:block;
  margin-top:-5px;
  color:var(--muted);
  font-size:9px;
  font-weight:900;
}

.alarm-beacon {
  display:flex;
  align-items:center;
  gap:9px;
  opacity:.3;
}
.alarm-beacon span {
  width:28px;
  height:34px;
  border:3px solid #27100b;
  border-radius:15px 15px 7px 7px;
  background:linear-gradient(#b62d25,#5a1511);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.09);
}

.machine-frame.anticipation-active {
  border-color:#b83229;
  box-shadow:
    inset 0 0 0 2px #7d8586,
    inset 0 0 0 7px #24292a,
    0 0 0 5px rgba(207,67,56,.28),
    0 0 38px rgba(207,67,56,.58);
  animation:warning-frame 1.05s steps(2,end) infinite;
}
.machine-frame.anticipation-active .alarm-beacon { opacity:1; }
.machine-frame.anticipation-active .alarm-beacon span:first-child { animation:beacon-left 1.05s steps(2,end) infinite; }
.machine-frame.anticipation-active .alarm-beacon span:last-child { animation:beacon-right 1.05s steps(2,end) infinite; }

@keyframes warning-frame {
  0%,49% { filter:none; }
  50%,100% { filter:brightness(1.14); }
}
@keyframes beacon-left {
  0%,49% { background:#ff4334; box-shadow:0 0 28px rgba(255,67,52,.95); }
  50%,100% { background:#5a1511; box-shadow:none; }
}
@keyframes beacon-right {
  0%,49% { background:#5a1511; box-shadow:none; }
  50%,100% { background:#ff4334; box-shadow:0 0 28px rgba(255,67,52,.95); }
}

.phase-banner {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:8px 14px;
  border-bottom:1px solid #0c0e0f;
  color:#281609;
  background:
    repeating-linear-gradient(-45deg,rgba(0,0,0,.08) 0,rgba(0,0,0,.08) 5px,transparent 5px,transparent 10px),
    linear-gradient(#e2b657,#aa6f27);
}
.phase-banner strong {
  font-size:12px;
  letter-spacing:.075em;
  text-transform:uppercase;
}
.phase-banner span { font-size:11px; font-weight:800; text-align:right; }

.board-wrap {
  display:grid;
  min-height:430px;
  place-items:center;
  padding:clamp(10px,2.5vw,20px);
  background:
    radial-gradient(circle at center,rgba(233,185,73,.08),transparent 60%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.017) 0,rgba(255,255,255,.017) 1px,transparent 1px,transparent 6px),
    #15191a;
  transition:background .6s ease;
}

.board {
  display:grid;
  grid-template-columns:repeat(6,var(--cell-size));
  grid-template-rows:repeat(8,var(--cell-size));
  gap:var(--cell-gap);
  user-select:none;
}

.board-cell {
  position:relative;
  display:grid;
  place-items:center;
  overflow:visible;
  border-radius:11px;
  isolation:isolate;
  background:
    radial-gradient(circle at center,rgba(233,185,73,.08),transparent 62%),
    #111516;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);
}

.multiplier-bed {
  position:absolute;
  z-index:0;
  inset:2px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:9px;
  pointer-events:none;
  transition:border-color .22s ease,box-shadow .22s ease,background .22s ease,opacity .22s ease;
}

.cell-multiplier {
  position:absolute;
  z-index:0;
  inset:0;
  display:grid;
  place-items:center;
  color:rgba(224,216,191,.20);
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-size:clamp(15px,3.45vw,29px);
  letter-spacing:.02em;
  text-shadow:0 2px 0 #000,0 0 8px rgba(255,255,255,.08);
  pointer-events:none;
  transition:color .25s ease,transform .25s ease,filter .25s ease,opacity .2s ease;
}

.multiplier-badge {
  position:absolute;
  z-index:6;
  top:-7px;
  left:50%;
  min-width:31px;
  padding:2px 6px 3px;
  border:2px solid rgba(255,255,255,.92);
  border-radius:999px;
  color:#fff;
  background:linear-gradient(rgba(36,40,41,.96),rgba(12,14,15,.96));
  box-shadow:0 0 7px rgba(255,255,255,.72),0 2px 3px rgba(0,0,0,.9),inset 0 1px rgba(255,255,255,.24);
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-size:clamp(8px,1.55vw,12px);
  letter-spacing:.035em;
  line-height:1;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transform:translateX(-50%) scale(.82);
  transition:opacity .2s ease,transform .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.board-cell:not([data-multiplier-level="1"]) .multiplier-bed {
  border:2px solid rgba(255,255,255,.95);
  background:linear-gradient(rgba(255,255,255,.035),rgba(255,255,255,.008));
  box-shadow:0 0 0 1px rgba(255,255,255,.18),0 0 10px rgba(255,255,255,.65),inset 0 0 10px rgba(255,255,255,.08);
}

.board-cell:not([data-multiplier-level="1"]) .multiplier-badge {
  opacity:1;
  transform:translateX(-50%) scale(1);
}

.board-cell:not([data-multiplier-level="1"]) .cell-multiplier {
  color:rgba(255,255,255,.70);
  filter:drop-shadow(0 0 5px rgba(255,255,255,.52)) drop-shadow(0 2px 1px rgba(0,0,0,.95));
}

.board-cell.vacant-multiplier:not([data-multiplier-level="1"]) .multiplier-bed {
  background:radial-gradient(circle at center,rgba(255,255,255,.16),transparent 64%),rgba(255,255,255,.025);
  box-shadow:0 0 0 2px rgba(255,255,255,.22),0 0 18px rgba(255,255,255,.88),inset 0 0 15px rgba(255,255,255,.14);
  animation:vacant-multiplier-breathe .52s ease-in-out infinite alternate;
}

.board-cell.vacant-multiplier:not([data-multiplier-level="1"]) .cell-multiplier {
  color:#fff;
  opacity:1;
  transform:scale(1.08);
  filter:drop-shadow(0 0 8px rgba(255,255,255,.94)) drop-shadow(0 2px 1px #000);
}

.board-cell.multiplier-upgraded .multiplier-badge {
  animation:multiplier-badge-punch .48s cubic-bezier(.2,.85,.2,1.2);
}

.board-cell.multiplier-upgraded .cell-multiplier {
  animation:multiplier-number-punch .48s cubic-bezier(.2,.85,.2,1.2);
}

.board-cell.multiplier-upgraded .multiplier-bed {
  animation:multiplier-outline-flash .48s ease;
}

@keyframes multiplier-badge-punch {
  0% { transform:translateX(-50%) scale(.65); filter:brightness(2.4) drop-shadow(0 0 12px #fff); }
  55% { transform:translateX(-50%) scale(1.32); }
  100% { transform:translateX(-50%) scale(1); }
}

@keyframes multiplier-number-punch {
  0% { transform:scale(.65); filter:brightness(2.4) drop-shadow(0 0 12px #fff); }
  55% { transform:scale(1.32); }
  100% { transform:scale(1); }
}

@keyframes multiplier-outline-flash {
  0% { border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.42),0 0 26px rgba(255,255,255,1),inset 0 0 16px rgba(255,255,255,.24); }
  100% { border-color:rgba(255,255,255,.95); }
}

@keyframes vacant-multiplier-breathe {
  from { filter:brightness(.95); transform:scale(.985); }
  to { filter:brightness(1.18); transform:scale(1); }
}

.symbol {
  position:relative;
  z-index:1;
  display:grid;
  width:100%;
  height:100%;
  min-width:0;
  place-items:center;
  overflow:hidden;
  border:2px solid rgba(0,0,0,.84);
  border-radius:11px;
  color:white;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.1),
    inset 0 -9px 12px rgba(0,0,0,.2),
    0 3px 0 #060708;
  transform:translateY(0) scale(1);
  will-change:transform,opacity,filter;
}

.symbol::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:9px;
  background:
    radial-gradient(circle at 45% 32%,rgba(255,255,255,.25),transparent 34%),
    linear-gradient(145deg,var(--symbol-top),var(--symbol-bottom));
  opacity:.68;
}
.symbol::after {
  content:"";
  position:absolute;
  right:5px;
  bottom:5px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:rgba(0,0,0,.3);
  box-shadow:inset 0 1px rgba(255,255,255,.18);
}

.symbol-icon {
  position:relative;
  z-index:2;
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-size:clamp(16px,4.3vw,34px);
  text-shadow:0 2px 0 rgba(0,0,0,.8),0 0 9px rgba(255,255,255,.2);
}
.symbol-name {
  position:absolute;
  z-index:2;
  right:5px;
  bottom:4px;
  left:5px;
  overflow:hidden;
  color:rgba(255,255,255,.9);
  font-size:clamp(5px,1.15vw,9px);
  font-weight:900;
  letter-spacing:.04em;
  text-align:center;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
  text-shadow:0 1px 2px #000;
}

.symbol.drop-staged {
  opacity:0;
  transform:translate3d(0,-120px,0) scale(.94);
}


.symbol.winning {
  z-index:4;
  filter:brightness(1.38) saturate(1.3);
  box-shadow:inset 0 0 0 3px #fff1a9,0 0 0 3px var(--gold),0 0 24px rgba(233,185,73,.88);
  animation:winning-pulse .5s ease-in-out infinite alternate;
}

@keyframes winning-pulse {
  from { transform:scale(1.03); }
  to { transform:scale(1.09); }
}

.symbol.removing { animation:acid-dissolve .21s cubic-bezier(.62,.02,.88,.32) forwards; }
.symbol.removing::before {
  border-color:rgba(211,255,111,.75);
  background:
    radial-gradient(circle at 18% 25%,rgba(223,255,137,.95) 0 5%,transparent 6%),
    radial-gradient(circle at 72% 32%,rgba(180,232,86,.9) 0 8%,transparent 9%),
    radial-gradient(circle at 40% 76%,rgba(233,255,164,.88) 0 6%,transparent 7%),
    radial-gradient(circle at 82% 78%,rgba(146,202,63,.9) 0 5%,transparent 6%);
}

@keyframes acid-dissolve {
  0% { opacity:1; filter:brightness(1.35) saturate(1.2); transform:scale(1.07); }
  48% { opacity:.75; filter:blur(1px) brightness(2.2) saturate(.45) hue-rotate(34deg); transform:scale(.9) rotate(-2deg); }
  100% { opacity:0; filter:blur(7px) brightness(2.5) saturate(.1) hue-rotate(65deg); transform:scale(.35) rotate(8deg); }
}

.symbol[data-symbol="wild"]::before { --symbol-top:#f2ce6c; --symbol-bottom:#9e5e13; opacity:.82; }
.symbol[data-symbol="scatter"]::before { --symbol-top:#e85f47; --symbol-bottom:#77251c; opacity:.84; }

.win-rail {
  position:relative;
  display:grid;
  min-height:112px;
  place-items:center;
  padding:8px 14px;
  overflow:hidden;
  border-top:2px solid #0d0f10;
  border-bottom:2px solid #0d0f10;
  background:
    repeating-linear-gradient(-45deg,rgba(255,255,255,.015) 0,rgba(255,255,255,.015) 5px,transparent 5px,transparent 10px),
    #111516;
  transition:background .22s ease;
}

.win-accumulator,
.win-panel {
  grid-area:1 / 1;
  width:min(100%,680px);
  min-height:88px;
  border:2px solid transparent;
  border-radius:11px;
  text-align:center;
}

.win-accumulator {
  display:grid;
  align-content:center;
  gap:2px;
  padding:8px 18px;
  opacity:.56;
  transition:opacity .2s ease,background .2s ease,border-color .2s ease;
}

.win-rail.accumulator-active .win-accumulator {
  border-color:#4c5354;
  opacity:1;
  background:
    linear-gradient(90deg,rgba(255,255,255,.025),transparent 20%,transparent 80%,rgba(255,255,255,.025)),
    #181d1e;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}

.win-context-label,
.win-accumulator-detail {
  display:block;
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.win-math {
  position:relative;
  display:flex;
  min-height:45px;
  align-items:center;
  justify-content:center;
  gap:18px;
}

#runningWinAmount {
  position:relative;
  z-index:2;
  display:block;
  min-width:170px;
  color:var(--gold);
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-size:clamp(29px,5.6vw,46px);
  line-height:1;
  letter-spacing:.025em;
  text-shadow:0 2px 0 #000,0 0 9px rgba(233,185,73,.25);
  transition:color .15s ease,filter .15s ease,transform .15s ease;
}

.pending-win-amount {
  position:absolute;
  z-index:5;
  left:calc(50% + 112px);
  top:50%;
  display:block;
  min-width:120px;
  color:#fff1a8;
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-size:clamp(21px,4vw,33px);
  letter-spacing:.02em;
  opacity:0;
  transform:translate3d(80px,-50%,0) scale(.78);
  filter:drop-shadow(0 0 7px rgba(255,225,101,.8));
  pointer-events:none;
}

.pending-win-amount.is-flashing {
  animation:addend-flash .24s steps(2,end) 2;
}

.pending-win-amount.is-slamming {
  animation:addend-smash .28s cubic-bezier(.55,.02,.72,.25) forwards;
}

#runningWinAmount.total-impact {
  animation:running-total-impact .34s cubic-bezier(.15,.84,.2,1.2);
}

#runningWinAmount.final-total-flash {
  animation:final-total-flash .78s steps(2,end) 3;
}

@keyframes addend-flash {
  0%,49% {
    opacity:1;
    color:#fff;
    transform:translate3d(80px,-50%,0) scale(1);
  }
  50%,100% {
    opacity:.38;
    color:#ffd15e;
    transform:translate3d(74px,-50%,0) scale(.96);
  }
}

@keyframes addend-smash {
  0% {
    opacity:1;
    transform:translate3d(80px,-50%,0) scale(1);
  }
  74% {
    opacity:1;
    transform:translate3d(-76px,-50%,0) scale(1.12);
    filter:brightness(1.9) drop-shadow(0 0 14px #fff);
  }
  100% {
    opacity:0;
    transform:translate3d(-108px,-50%,0) scale(.25);
  }
}

@keyframes running-total-impact {
  0% {
    color:#fff;
    filter:brightness(2.4) drop-shadow(0 0 16px #fff);
    transform:scale(.86);
  }
  48% { transform:scale(1.18); }
  100% {
    color:var(--gold);
    filter:none;
    transform:scale(1);
  }
}

@keyframes final-total-flash {
  0%,49% {
    color:#fff;
    filter:brightness(2.6) drop-shadow(0 0 18px #fff) drop-shadow(0 0 26px var(--gold));
    transform:scale(1.12);
  }
  50%,100% {
    color:var(--gold);
    filter:drop-shadow(0 0 7px rgba(233,185,73,.65));
    transform:scale(1);
  }
}

.win-panel {
  padding:10px 18px;
  opacity:0;
  transform:scale(.92);
}

.win-panel:not([hidden]) {
  display:grid;
  align-content:center;
}

.win-rail.announcement-active .win-accumulator {
  visibility:hidden;
  opacity:0;
}

.win-rail.announcement-active .win-panel {
  border-color:#6f4a20;
  color:#27170b;
  opacity:1;
  transform:scale(1);
  background:
    repeating-linear-gradient(-45deg,rgba(0,0,0,.09) 0,rgba(0,0,0,.09) 5px,transparent 5px,transparent 10px),
    linear-gradient(#f6d57e,#c8842e);
  animation:tier-impact .52s cubic-bezier(.17,.84,.24,1.15) both;
}

.win-panel strong,
.win-panel span {
  display:block;
}

.win-panel strong {
  margin:1px 0;
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-size:clamp(25px,5vw,42px);
  line-height:1;
}

.message-kicker { font-size:10px; font-weight:900; }
#messageDetail { font-size:12px; font-weight:800; }

.win-rail.win-tier-active {
  min-height:128px;
}

.win-rail.tier-good .win-panel { background:linear-gradient(#e4d686,#9d8b34); }
.win-rail.tier-big .win-panel { background:linear-gradient(#f2cc68,#b77826); }
.win-rail.tier-giant .win-panel { color:#0d2a29; background:linear-gradient(#8de2da,#35a69d); }
.win-rail.tier-epic .win-panel { color:#261031; background:linear-gradient(#d9a6ef,#8a4eb1); }
.win-rail.tier-industrial .win-panel { color:#2a0c08; background:linear-gradient(#ff8c61,#b62f25); }
.win-rail.tier-thermal .win-panel {
  color:#210807;
  background:
    repeating-linear-gradient(-45deg,rgba(40,0,0,.2) 0,rgba(40,0,0,.2) 7px,transparent 7px,transparent 14px),
    linear-gradient(#ffe16f,#ff5a35);
  box-shadow:0 0 28px rgba(255,83,45,.8),inset 0 0 0 2px rgba(255,255,255,.28);
}

@keyframes tier-impact {
  0% { opacity:0; transform:scale(.72) translateY(12px); filter:brightness(2.2); }
  50% { opacity:1; transform:scale(1.08); }
  100% { opacity:1; transform:scale(1); filter:none; }
}

.machine-footer {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(310px,390px);
  min-height:68px;
  height:68px;
  gap:12px;
  padding:10px 14px;
  overflow:hidden;
  border-top:2px solid #0d0f10;
  background:#252b2c;
}

.game-message {
  display:-webkit-box;
  min-width:0;
  max-height:36px;
  margin:0;
  overflow:hidden;
  font-size:13px;
  font-weight:700;
  line-height:18px;
  text-overflow:ellipsis;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.cluster-key {
  display:flex;
  min-width:0;
  max-height:38px;
  align-content:center;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:4px 12px;
  overflow:hidden;
  color:var(--muted);
  font-size:10px;
  line-height:15px;
}

.cluster-key b { color:var(--gold); }

.control-deck {
  display:grid;
  grid-template-columns:minmax(165px,1fr) minmax(145px,.82fr) minmax(185px,1.25fr) minmax(96px,.58fr);
  gap:10px;
  margin-top:13px;
}

.industrial-control,
.industrial-main-button {
  min-height:74px;
  border-radius:11px;
}

.industrial-control {
  position:relative;
  padding:9px 12px;
  border:2px solid #111;
  background:
    radial-gradient(circle at 9px 9px,#798181 0 2px,#111 3px 4px,transparent 5px),
    radial-gradient(circle at calc(100% - 9px) 9px,#798181 0 2px,#111 3px 4px,transparent 5px),
    linear-gradient(#353c3d,#1c2122);
  box-shadow:inset 0 0 0 2px #505859,0 4px 0 #080a0a;
}

.control-label { display:block; margin-bottom:6px; color:var(--muted); font-size:9px; }
.stepper { display:grid; grid-template-columns:42px 1fr 42px; align-items:center; gap:5px; }
.stepper button { height:36px; border-radius:7px; font-size:22px; font-weight:900; }
.stepper output { overflow:hidden; font-size:20px; font-weight:900; text-align:center; text-overflow:ellipsis; white-space:nowrap; }

.industrial-main-button {
  position:relative;
  border:3px solid #0b0d0d;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.17),
    inset 0 -12px 18px rgba(0,0,0,.18),
    0 5px 0 #080a0a;
  cursor:pointer;
}

.industrial-main-button::before {
  content:"";
  position:absolute;
  inset:7px;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.14);
  border-radius:6px;
}

.button-bolts::before,
.button-bolts::after {
  content:"";
  position:absolute;
  top:8px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#1c1e1e;
  box-shadow:inset 0 1px #858a89,0 1px 1px #000;
}
.button-bolts::before { left:9px; }
.button-bolts::after { right:9px; }

.spin-button {
  color:#28130a;
  background:
    repeating-linear-gradient(-45deg,rgba(0,0,0,.08) 0,rgba(0,0,0,.08) 6px,transparent 6px,transparent 12px),
    linear-gradient(#e27a4c,#993f25);
}
.bonus-button {
  color:#291a08;
  background:
    repeating-linear-gradient(45deg,rgba(0,0,0,.08) 0,rgba(0,0,0,.08) 6px,transparent 6px,transparent 12px),
    linear-gradient(#f0cf71,#ad7025);
}
.secondary-button {
  color:var(--ink);
  background:
    repeating-linear-gradient(-45deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 5px,transparent 5px,transparent 10px),
    linear-gradient(#4a5253,#252b2c);
  font-weight:900;
  letter-spacing:.06em;
}
.secondary-button[aria-pressed="true"],
.secondary-button.is-stop-pending {
  color:#2b1808;
  background:linear-gradient(#f0ca69,#ba7a28);
}

.industrial-main-button:hover:not(:disabled),
.industrial-small-button:hover:not(:disabled),
.industrial-icon-button:hover:not(:disabled),
.stepper button:hover:not(:disabled) { filter:brightness(1.1); }

.industrial-main-button:active:not(:disabled),
.industrial-small-button:active:not(:disabled),
.industrial-icon-button:active:not(:disabled),
.stepper button:active:not(:disabled) {
  transform:translateY(2px);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),0 2px 0 #080a0a;
}

.spin-main,.spin-sub,.bonus-main,.bonus-sub { display:block; position:relative; z-index:2; }
.spin-main { font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif; font-size:31px; letter-spacing:.06em; }
.bonus-main { font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif; font-size:22px; }
.spin-sub,.bonus-sub { font-size:9px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }

button:disabled { cursor:not-allowed; filter:grayscale(.5); opacity:.55; }


.auto-control-wrap {
  position:relative;
  min-width:0;
}

.auto-control-wrap > .secondary-button {
  width:100%;
  height:100%;
  min-height:74px;
}

.auto-menu {
  position:absolute;
  z-index:40;
  right:0;
  bottom:calc(100% + 11px);
  width:230px;
  padding:12px;
  border:3px solid #090b0b;
  border-radius:11px;
  color:var(--ink);
  background:
    radial-gradient(circle at 9px 9px,#777f80 0 2px,#111 3px 4px,transparent 5px),
    radial-gradient(circle at calc(100% - 9px) 9px,#777f80 0 2px,#111 3px 4px,transparent 5px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 5px,transparent 5px,transparent 10px),
    linear-gradient(#303738,#181d1e);
  box-shadow:
    inset 0 0 0 2px #5b6465,
    0 12px 28px rgba(0,0,0,.62);
  opacity:0;
  transform:translateY(18px) scale(.96);
  transform-origin:bottom right;
  transition:
    opacity .18s ease,
    transform .22s cubic-bezier(.18,.8,.25,1.08);
  pointer-events:none;
}

.auto-menu.is-open {
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

.auto-menu::after {
  content:"";
  position:absolute;
  right:28px;
  bottom:-10px;
  width:17px;
  height:17px;
  border-right:3px solid #090b0b;
  border-bottom:3px solid #090b0b;
  background:#1b2021;
  transform:rotate(45deg);
}

.auto-menu-title,
.auto-menu-note {
  display:block;
  text-align:center;
  text-transform:uppercase;
}

.auto-menu-title {
  margin-bottom:9px;
  color:var(--gold);
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
}

.auto-menu-note {
  margin-top:8px;
  color:var(--muted);
  font-size:8px;
  letter-spacing:.055em;
}

.auto-option-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
}

.auto-option-grid button {
  min-height:43px;
  border:2px solid #0c0e0e;
  border-radius:7px;
  color:var(--ink);
  background:
    linear-gradient(#485051,#242a2b);
  box-shadow:
    inset 0 0 0 1px #6c7475,
    0 3px 0 #080a0a;
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-size:18px;
  cursor:pointer;
}

.auto-option-grid button:hover,
.auto-option-grid button:focus-visible {
  color:#2a1808;
  background:linear-gradient(#f0ca69,#ba7a28);
}

.legal-note { margin-top:11px; color:#8f968f; font-size:10px; line-height:1.45; text-align:center; }

.machine-frame.bonus-mode {
  border-color:#2c817c;
  box-shadow:inset 0 0 0 2px #8be0d7,inset 0 0 0 7px #173d3a,0 0 35px rgba(87,197,189,.35);
}
.machine-frame.bonus-mode .factory-header {
  background:
    repeating-linear-gradient(-45deg,rgba(255,255,255,.035) 0,rgba(255,255,255,.035) 5px,transparent 5px,transparent 10px),
    #163b39;
}
.machine-frame.bonus-mode .phase-banner {
  color:#06211f;
  background:
    repeating-linear-gradient(-45deg,rgba(0,0,0,.07) 0,rgba(0,0,0,.07) 5px,transparent 5px,transparent 10px),
    linear-gradient(#7de0d5,#3da49c);
}
.machine-frame.bonus-mode .board-wrap {
  background:
    radial-gradient(circle at center,rgba(87,197,189,.19),transparent 58%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 6px,transparent 6px,transparent 12px),
    #0e2524;
}
.machine-frame.bonus-mode .cell-multiplier { color:rgba(122,231,220,.34); }
.machine-frame.bonus-mode .board-cell:not([data-multiplier-level="1"]) .cell-multiplier {
  color:#d8fffb;
  filter:drop-shadow(0 0 7px rgba(87,197,189,.95)) drop-shadow(0 2px 1px #000);
}
.machine-frame.bonus-mode .board-cell:not([data-multiplier-level="1"]) .multiplier-bed {
  border-color:#efffff;
  box-shadow:0 0 0 1px rgba(151,255,246,.34),0 0 12px rgba(87,197,189,.88),inset 0 0 12px rgba(87,197,189,.13);
}
.machine-frame.bonus-mode .board-cell:not([data-multiplier-level="1"]) .multiplier-badge {
  border-color:#eaffff;
  color:#eaffff;
  background:linear-gradient(rgba(20,82,78,.98),rgba(8,35,33,.98));
  box-shadow:0 0 8px rgba(87,197,189,.94),0 2px 3px rgba(0,0,0,.9),inset 0 1px rgba(255,255,255,.26);
}

.cutscene {
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:20px;
  background:#060808;
}
.cutscene[hidden] { display:none; }
.cutscene-doors { position:absolute; inset:0; display:flex; }
.cutscene-door {
  width:50%;
  height:100%;
  background:
    radial-gradient(circle at 18px 18px,#707777 0 3px,#111 4px 6px,transparent 7px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0,rgba(255,255,255,.045) 2px,transparent 2px,transparent 36px),
    repeating-linear-gradient(0deg,transparent 0,transparent 78px,#111 78px,#111 82px),
    #343a3b;
}
.cutscene-door-left { border-right:5px solid #111; animation:door-left 2.55s ease-in-out both; }
.cutscene-door-right { border-left:5px solid #111; animation:door-right 2.55s ease-in-out both; }

@keyframes door-left {
  0% { transform:translateX(-100%); }
  24%,70% { transform:translateX(0); }
  100% { transform:translateX(-100%); }
}
@keyframes door-right {
  0% { transform:translateX(100%); }
  24%,70% { transform:translateX(0); }
  100% { transform:translateX(100%); }
}

.cutscene-content {
  position:relative;
  z-index:2;
  width:min(100%,650px);
  color:#efe2c8;
  text-align:center;
  opacity:0;
  animation:cutscene-copy 2.55s ease both;
}
.cutscene-content > span { color:#ffb94e; font-size:13px; font-weight:900; letter-spacing:.18em; }
.cutscene-content > strong {
  display:block;
  margin:8px 0;
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-size:clamp(43px,10vw,82px);
  letter-spacing:.03em;
  text-transform:uppercase;
}
.cutscene-content p { margin:0 auto 14px; color:#d1c6b2; }
.cutscene-warning {
  display:inline-block;
  padding:8px 14px;
  border:2px solid #5aaea7;
  color:#9af1e7;
  font-size:11px;
  font-weight:900;
  letter-spacing:.1em;
}
@keyframes cutscene-copy {
  0%,18% { opacity:0; transform:scale(.9); }
  32%,70% { opacity:1; transform:scale(1); }
  90%,100% { opacity:0; transform:scale(1.04); }
}

.rules-dialog,.bonus-dialog {
  width:min(94vw,875px);
  max-height:88vh;
  overflow:auto;
  border:2px solid #596061;
  border-radius:14px;
  color:var(--ink);
  background:#181c1d;
  box-shadow:0 20px 80px rgba(0,0,0,.7);
}
.rules-dialog::backdrop,.bonus-dialog::backdrop { background:rgba(3,5,5,.8); backdrop-filter:blur(4px); }
.dialog-copy,.rules-section p { color:var(--muted); line-height:1.5; }
.rules-section { margin-top:18px; }
.rules-section h3 { margin-bottom:7px; }

.rules-metrics {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-top:16px;
}
.rules-metrics > div {
  padding:11px;
  border:1px solid #3e4647;
  border-radius:9px;
  background:#222728;
}
.rules-metrics span { display:block; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.rules-metrics strong { display:block; margin-top:3px; color:var(--gold); font-size:22px; }

.rules-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.rule-card { padding:12px; border:1px solid #3e4647; border-radius:9px; background:#222728; }
.rule-card strong,.rule-card span { display:block; }
.rule-card strong { color:var(--gold); margin-bottom:4px; }
.rule-card span,.small-copy { color:var(--muted); font-size:11px; line-height:1.45; }

.notification-table {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:7px;
}
.notification-table > div {
  padding:10px;
  border:1px solid #3e4647;
  border-radius:8px;
  background:#222728;
}
.notification-table span,.notification-table strong { display:block; }
.notification-table span { color:var(--muted); font-size:10px; }
.notification-table strong { margin-top:4px; color:var(--gold); font-size:12px; }

.odds-table { display:grid; border:1px solid #3f4748; border-radius:9px; overflow:hidden; }
.odds-row { display:grid; grid-template-columns:1.3fr .7fr 1fr; }
.odds-row > * { padding:9px; border-top:1px solid #343b3c; }
.odds-row > * + * { border-left:1px solid #343b3c; }
.odds-row:first-child > * { border-top:0; }
.odds-head { color:var(--gold); background:#242a2b; font-size:10px; font-weight:900; text-transform:uppercase; }

.paytable-list { display:grid; gap:8px; }
.pay-row {
  display:grid;
  grid-template-columns:minmax(145px,1fr) repeat(7,minmax(48px,.58fr));
  overflow:hidden;
  border:1px solid #3f4748;
  border-radius:9px;
  background:#222728;
}
.pay-symbol,.pay-cell { display:flex; align-items:center; padding:8px; }
.pay-symbol { gap:8px; font-weight:800; }
.pay-mini {
  display:grid;
  width:31px;
  height:31px;
  place-items:center;
  border:1px solid #0b0d0d;
  border-radius:7px;
  background:linear-gradient(145deg,var(--symbol-top),var(--symbol-bottom));
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
}
.pay-cell { justify-content:center; border-left:1px solid #343b3c; font-size:11px; text-align:center; }

.bonus-tier-list,.rules-bonus-list { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.bonus-tier {
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid #495253;
  border-radius:11px;
  background:#222728;
}
.bonus-tier.is-featured { border-color:#a8732b; box-shadow:inset 0 0 0 1px rgba(233,185,73,.2); }
.bonus-tier-head {
  padding:12px;
  border-bottom:1px solid #3b4344;
  background:
    repeating-linear-gradient(-45deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 5px,transparent 5px,transparent 10px),
    #2b3132;
}
.bonus-tier-kicker { display:block; margin-bottom:3px; color:var(--gold); font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.bonus-tier h3 { font-size:22px; }
.bonus-tier-body { display:flex; flex:1; flex-direction:column; gap:9px; padding:12px; }
.bonus-cost { color:var(--gold); font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif; font-size:27px; }
.bonus-cost small { color:var(--muted); font-family:"Trebuchet MS",Arial,sans-serif; font-size:9px; text-transform:uppercase; }
.bonus-features { display:grid; gap:6px; margin:0; padding:0; font-size:11px; list-style:none; }
.bonus-features li { padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,.06); }
.buy-tier-button {
  width:100%;
  margin-top:auto;
  padding:10px;
  border:2px solid #261607;
  border-radius:7px;
  color:#2b1808;
  background:
    repeating-linear-gradient(-45deg,rgba(0,0,0,.08) 0,rgba(0,0,0,.08) 5px,transparent 5px,transparent 10px),
    linear-gradient(#f1cf70,#b97828);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.14),0 3px 0 #2b1808;
  font-weight:900;
  cursor:pointer;
}
.bonus-disclaimer { margin:12px 0 0; color:#969d96; font-size:10px; line-height:1.45; }

.sound-credit-section ul { margin:8px 0 0; padding-left:20px; color:var(--muted); font-size:11px; line-height:1.55; }

@media (max-width:760px) {
  :root { --cell-size:calc((100vw - 66px)/6); }
  .game-shell { padding:10px; }
  .status-strip,.rules-metrics { grid-template-columns:repeat(2,1fr); }
  .factory-header { align-items:flex-start; }
  .mode-heading > span:last-child { display:none; }
  .alarm-beacon { display:none; }
  .board-wrap { min-height:auto; }
  .control-deck { grid-template-columns:1fr 1fr; }
  .spin-button { grid-column:1/-1; grid-row:1; }
  .secondary-button { grid-column:1/-1; }
  .machine-footer {
    grid-template-columns:1fr;
    min-height:104px;
    height:104px;
    align-content:center;
  }
  .cluster-key {
    min-height:30px;
    justify-content:flex-start;
  }
  .auto-control-wrap { grid-column:1/-1; }
  .bonus-tier-list,.rules-bonus-list { grid-template-columns:1fr; }
  .notification-table { grid-template-columns:1fr 1fr; }
  .paytable-list { overflow-x:auto; }
  .pay-row { min-width:650px; }
}

@media (max-width:500px) {
  .brand-mark { width:50px; height:50px; }
  .factory-header { min-height:116px; padding:7px 9px; }
  .pressure-gauge { flex-basis:112px; width:112px; }
  .phase-banner { flex-direction:column; gap:2px; }
  .phase-banner span { text-align:left; }
  .symbol-name { display:none; }
  .control-deck { grid-template-columns:1fr; }
  .spin-button,.bet-control,.bonus-button,.secondary-button,.auto-control-wrap { grid-column:1; }
  .auto-menu {
    right:50%;
    width:min(250px,calc(100vw - 36px));
    transform:translate(50%,18px) scale(.96);
    transform-origin:bottom center;
  }
  .auto-menu.is-open { transform:translate(50%,0) scale(1); }
  .auto-menu::after { right:calc(50% - 8px); }
  .rules-grid { grid-template-columns:1fr; }
  .odds-row { grid-template-columns:1.2fr .7fr; }
  .odds-row > *:last-child { grid-column:1/-1; border-left:0; }
  .notification-table { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .machine-frame.anticipation-active { animation:none; }
}


@media (max-width:540px) {
  .top-actions { gap:5px; }

  .industrial-speed-button {
    min-width:52px;
    width:52px;
    padding:0 5px;
    grid-template-columns:1fr;
    gap:0;
  }

  .speed-rabbit { font-size:19px; }
  .speed-label { font-size:7px; }

  .industrial-small-button {
    min-width:58px;
    padding:0 9px;
  }
}


/* =========================================================
   VERSION 11 — POLISHED INDUSTRIAL METAL VISUAL OVERHAUL
   ========================================================= */

:root {
  --polished-steel-1:#d7dddd;
  --polished-steel-2:#8f999a;
  --polished-steel-3:#4b5455;
  --polished-steel-4:#1e2425;
  --polished-dark:#101415;
  --chrome-highlight:rgba(255,255,255,.72);
  --chrome-soft:rgba(255,255,255,.18);
  --chrome-shadow:rgba(0,0,0,.72);
  --panel-gap:12px;
}

body {
  background:
    radial-gradient(circle at 50% -12%,rgba(255,255,255,.10),transparent 31%),
    radial-gradient(circle at 20% 8%,rgba(184,90,50,.15),transparent 25%),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.014) 0,
      rgba(255,255,255,.014) 1px,
      transparent 1px,
      transparent 9px
    ),
    linear-gradient(180deg,#1b2021 0%,#0c0f10 55%,#080a0b 100%);
}

.game-shell {
  width:min(100%,950px);
  padding:20px;
}

.topbar {
  min-height:80px;
  margin-bottom:14px;
  padding:4px 2px;
}

.brand-block {
  gap:15px;
}

.brand-mark {
  width:68px;
  height:68px;
  border:2px solid #070909;
  border-radius:16px;
  background:
    radial-gradient(circle at 10px 10px,#fff 0 1px,#9ba3a3 2px,#303536 4px,transparent 5px),
    radial-gradient(circle at calc(100% - 10px) 10px,#fff 0 1px,#9ba3a3 2px,#303536 4px,transparent 5px),
    radial-gradient(circle at 10px calc(100% - 10px),#fff 0 1px,#9ba3a3 2px,#303536 4px,transparent 5px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px),#fff 0 1px,#9ba3a3 2px,#303536 4px,transparent 5px),
    linear-gradient(145deg,#fff2b1 0%,#e2b550 29%,#9f651b 67%,#6b3b10 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.4),
    inset 0 8px 14px rgba(255,255,255,.28),
    inset 0 -10px 16px rgba(60,28,3,.28),
    0 6px 0 #060707,
    0 10px 24px rgba(0,0,0,.36);
}

.brand-mark::after {
  content:"";
  position:absolute;
  width:42px;
  height:12px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.52),transparent);
  transform:translateY(-19px) rotate(-10deg);
  pointer-events:none;
}

.brand-mark span {
  font-size:24px;
  text-shadow:0 1px 0 rgba(255,255,255,.42),0 2px 2px rgba(0,0,0,.38);
}

h1 {
  font-size:clamp(32px,6vw,51px);
  letter-spacing:.045em;
  text-shadow:
    0 1px 0 rgba(255,255,255,.24),
    0 3px 0 rgba(0,0,0,.55),
    0 7px 16px rgba(0,0,0,.30);
}

.subtitle {
  margin-top:6px;
  letter-spacing:.13em;
}

.top-actions {
  gap:9px;
}

.status-strip {
  gap:10px;
  margin-bottom:12px;
}

.status-card {
  position:relative;
  min-height:64px;
  padding:10px 14px;
  overflow:hidden;
  border:2px solid #0c0f0f;
  border-radius:11px;
  background:
    linear-gradient(115deg,rgba(255,255,255,.16),transparent 28%),
    linear-gradient(180deg,#475051 0%,#252b2c 48%,#171b1c 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.17),
    inset 0 9px 12px rgba(255,255,255,.06),
    inset 0 -10px 14px rgba(0,0,0,.27),
    0 4px 0 #070909,
    0 8px 17px rgba(0,0,0,.25);
}

.status-card::after {
  content:"";
  position:absolute;
  top:4px;
  left:12%;
  width:76%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.44),transparent);
}

.status-card strong {
  margin-top:4px;
  text-shadow:0 2px 2px rgba(0,0,0,.8);
}

.status-label {
  color:#d0d5ce;
}

.machine-frame {
  border:3px solid #070909;
  border-radius:22px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.13),transparent 13%,transparent 87%,rgba(255,255,255,.09)),
    linear-gradient(180deg,#566061,#343b3c 25%,#252a2b 75%,#141819);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.31),
    inset 0 0 0 7px #252b2c,
    inset 0 15px 22px rgba(255,255,255,.08),
    inset 0 -20px 26px rgba(0,0,0,.25),
    0 12px 0 #060707,
    0 19px 42px rgba(0,0,0,.50);
}

.machine-frame::before {
  content:"";
  display:block;
  height:3px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
}

.factory-header {
  min-height:146px;
  padding:13px 18px;
  border-bottom:3px solid #0a0c0d;
  background:
    linear-gradient(110deg,rgba(255,255,255,.11),transparent 23%),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.014) 0,rgba(255,255,255,.014) 5px,transparent 5px,transparent 10px),
    linear-gradient(180deg,#424a4b,#252b2c 62%,#1b2021);
  box-shadow:
    inset 0 1px rgba(255,255,255,.21),
    inset 0 -8px 13px rgba(0,0,0,.22);
}

.mode-heading {
  gap:5px;
  align-content:center;
}

.mode-heading > strong {
  letter-spacing:.055em;
  text-shadow:
    0 1px 0 rgba(255,255,255,.18),
    0 3px 0 rgba(0,0,0,.48);
}

.mode-heading > span:last-child {
  max-width:500px;
  color:#d0d5cc;
}

.pressure-gauge {
  flex-basis:154px;
  width:154px;
  padding:5px;
  border-radius:50%;
  background:
    radial-gradient(circle at 37% 25%,rgba(255,255,255,.34),transparent 18%),
    linear-gradient(145deg,#d7dddd,#687273 43%,#252b2c 72%,#0e1112);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.36),
    inset 0 -8px 14px rgba(0,0,0,.24),
    0 4px 0 #090b0b,
    0 8px 20px rgba(0,0,0,.35);
}

.pressure-gauge svg {
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.48));
}

.gauge-shell {
  fill:url(#pressureGaugeMetal);
  stroke:#1c2021;
  stroke-width:7;
}

.gauge-track-circle {
  stroke:#202627;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.2));
}

.gauge-progress-circle {
  filter:drop-shadow(0 0 4px rgba(255,255,255,.35));
}

.gauge-label {
  color:#edf0eb;
  text-shadow:0 2px 2px #000;
}

.phase-banner {
  min-height:38px;
  align-items:center;
  padding:9px 17px;
  border-top:1px solid rgba(255,255,255,.14);
  border-bottom:2px solid #0c0e0f;
  background:
    linear-gradient(105deg,rgba(255,255,255,.22),transparent 25%),
    repeating-linear-gradient(-45deg,rgba(0,0,0,.07) 0,rgba(0,0,0,.07) 5px,transparent 5px,transparent 10px),
    linear-gradient(180deg,#f1ce70,#b7792c);
  box-shadow:
    inset 0 1px rgba(255,255,255,.45),
    inset 0 -5px 8px rgba(78,36,5,.18);
}

.phase-banner strong,
.phase-banner span {
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}

.board-wrap {
  padding:22px;
  background:
    radial-gradient(circle at 50% 34%,rgba(255,255,255,.055),transparent 45%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0,rgba(255,255,255,.012) 1px,transparent 1px,transparent 8px),
    linear-gradient(180deg,#171c1d,#0f1314);
  box-shadow:
    inset 0 13px 20px rgba(0,0,0,.37),
    inset 0 -10px 16px rgba(255,255,255,.018);
}

.board {
  gap:clamp(5px,.85vw,8px);
  padding:10px;
  border:2px solid #060808;
  border-radius:17px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.08),transparent 23%),
    linear-gradient(180deg,#303738,#151a1b);
  box-shadow:
    inset 0 0 0 2px #596162,
    inset 0 11px 18px rgba(255,255,255,.05),
    inset 0 -12px 18px rgba(0,0,0,.35),
    0 8px 18px rgba(0,0,0,.38);
}

.board-cell {
  border-radius:13px;
  background:
    radial-gradient(circle at 40% 27%,rgba(255,255,255,.12),transparent 25%),
    linear-gradient(145deg,#313839,#181d1e 62%,#0f1213);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.11),
    inset 0 6px 10px rgba(255,255,255,.025),
    inset 0 -7px 10px rgba(0,0,0,.25),
    0 2px 0 #070909;
}

.board-cell::after {
  content:"";
  position:absolute;
  z-index:4;
  top:4px;
  left:12%;
  width:76%;
  height:1px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  pointer-events:none;
}

.multiplier-bed {
  inset:3px;
  border-radius:10px;
}

.symbol {
  border:2px solid #0b0d0e;
  border-radius:13px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.20),transparent 23%,transparent 71%,rgba(255,255,255,.05)),
    linear-gradient(145deg,#596263,#23292a 63%,#111516);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.24),
    inset 0 8px 12px rgba(255,255,255,.06),
    inset 0 -10px 14px rgba(0,0,0,.22),
    0 3px 0 #070909,
    0 5px 8px rgba(0,0,0,.22);
}

.symbol::before {
  inset:2px;
  border-radius:10px;
  opacity:.70;
  background:
    linear-gradient(135deg,rgba(255,255,255,.40),transparent 18%),
    radial-gradient(circle at 35% 25%,rgba(255,255,255,.22),transparent 30%),
    linear-gradient(145deg,var(--symbol-top),var(--symbol-bottom));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    inset 0 -10px 14px rgba(0,0,0,.16);
}

.symbol::after {
  right:7px;
  bottom:7px;
  width:8px;
  height:8px;
  border:1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(circle at 35% 30%,#cbd2d2 0 16%,#5b6263 18% 43%,#1a1e1f 46%);
  box-shadow:0 1px 2px rgba(0,0,0,.75);
}

.symbol-icon {
  font-size:clamp(17px,4.4vw,35px);
  text-shadow:
    0 1px 0 rgba(255,255,255,.26),
    0 3px 0 rgba(0,0,0,.62),
    0 0 9px rgba(255,255,255,.15);
}

.symbol-name {
  bottom:6px;
  color:#f4f1e5;
  text-shadow:
    0 1px 0 #000,
    0 2px 3px rgba(0,0,0,.8);
}

.board-cell:not([data-multiplier-level="1"]) .multiplier-bed {
  border:2px solid rgba(255,255,255,.98);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.28),
    0 0 13px rgba(255,255,255,.68),
    inset 0 0 9px rgba(255,255,255,.11);
}

.multiplier-badge {
  top:-8px;
  padding:3px 7px 4px;
  border-width:2px;
  background:
    linear-gradient(180deg,#7d8788,#262c2d 60%,#111516);
  box-shadow:
    inset 0 1px rgba(255,255,255,.35),
    0 0 8px rgba(255,255,255,.68),
    0 3px 4px rgba(0,0,0,.8);
}

.cell-multiplier {
  text-shadow:
    0 1px 0 rgba(255,255,255,.25),
    0 3px 0 #000,
    0 0 8px rgba(255,255,255,.12);
}

.win-rail {
  min-height:116px;
  padding:10px 16px;
  background:
    linear-gradient(110deg,rgba(255,255,255,.06),transparent 24%),
    linear-gradient(180deg,#242a2b,#111516);
  box-shadow:
    inset 0 1px rgba(255,255,255,.12),
    inset 0 -7px 12px rgba(0,0,0,.28);
}

.win-accumulator {
  border:2px solid #0d1010;
  border-radius:13px;
  background:
    linear-gradient(110deg,rgba(255,255,255,.09),transparent 23%),
    linear-gradient(180deg,#343b3c,#1a1f20);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset 0 8px 12px rgba(255,255,255,.035),
    0 4px 0 #090b0b;
}

#runningWinAmount {
  text-shadow:
    0 1px 0 rgba(255,255,255,.20),
    0 3px 0 #000,
    0 0 12px rgba(233,185,73,.27);
}

.machine-footer {
  padding:11px 17px;
  background:
    linear-gradient(110deg,rgba(255,255,255,.07),transparent 22%),
    linear-gradient(180deg,#32393a,#1c2122);
  box-shadow:
    inset 0 1px rgba(255,255,255,.12),
    inset 0 -7px 11px rgba(0,0,0,.22);
}

.game-message {
  display:flex;
  align-items:center;
}

.cluster-key {
  align-items:center;
}

.control-deck {
  gap:12px;
  margin-top:16px;
  align-items:stretch;
}

.industrial-control,
.industrial-main-button,
.auto-control-wrap > .secondary-button {
  min-height:78px;
}

.industrial-control {
  padding:11px 13px;
  border-radius:13px;
  background:
    radial-gradient(circle at 9px 9px,#e2e7e7 0 1px,#6f7778 2px,#1c2021 4px,transparent 5px),
    radial-gradient(circle at calc(100% - 9px) 9px,#e2e7e7 0 1px,#6f7778 2px,#1c2021 4px,transparent 5px),
    linear-gradient(110deg,rgba(255,255,255,.12),transparent 24%),
    linear-gradient(180deg,#4b5455,#242a2b 62%,#171b1c);
  box-shadow:
    inset 0 0 0 2px #6d7677,
    inset 0 8px 13px rgba(255,255,255,.05),
    0 5px 0 #070909,
    0 9px 16px rgba(0,0,0,.25);
}

.stepper {
  gap:7px;
}

.stepper button {
  border-radius:9px;
  background:
    linear-gradient(110deg,rgba(255,255,255,.16),transparent 30%),
    linear-gradient(180deg,#596263,#292f30);
}

.stepper output {
  display:flex;
  min-height:38px;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.09);
  border-radius:8px;
  background:rgba(0,0,0,.18);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.45);
}

.industrial-main-button {
  border-radius:13px;
  overflow:hidden;
}

.industrial-main-button::after {
  content:"";
  position:absolute;
  top:5px;
  left:13%;
  width:74%;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  pointer-events:none;
}

.spin-button {
  background:
    linear-gradient(110deg,rgba(255,255,255,.25),transparent 22%),
    repeating-linear-gradient(-45deg,rgba(0,0,0,.045) 0,rgba(0,0,0,.045) 7px,transparent 7px,transparent 14px),
    linear-gradient(180deg,#ef9064,#b54c2c 58%,#7c2d18);
}

.bonus-button {
  background:
    linear-gradient(110deg,rgba(255,255,255,.28),transparent 23%),
    repeating-linear-gradient(45deg,rgba(0,0,0,.045) 0,rgba(0,0,0,.045) 7px,transparent 7px,transparent 14px),
    linear-gradient(180deg,#f6db85,#c68b37 58%,#8d581d);
}

.secondary-button {
  background:
    linear-gradient(110deg,rgba(255,255,255,.15),transparent 23%),
    linear-gradient(180deg,#5b6465,#2c3233 62%,#1b2021);
}

.industrial-main-button:hover:not(:disabled) {
  filter:brightness(1.08) saturate(1.05);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.21),
    inset 0 -12px 18px rgba(0,0,0,.18),
    0 5px 0 #080a0a,
    0 10px 18px rgba(0,0,0,.26);
}

.industrial-small-button,
.industrial-icon-button,
.industrial-speed-button {
  border-radius:10px;
  background:
    linear-gradient(110deg,rgba(255,255,255,.17),transparent 28%),
    linear-gradient(180deg,#5a6364,#2b3132 62%,#191e1f);
}

.industrial-speed-button[aria-pressed="true"] {
  background:
    linear-gradient(110deg,rgba(255,255,255,.30),transparent 24%),
    linear-gradient(180deg,#f3dc8c,#c68a36 62%,#89531b);
}

.auto-menu {
  border-radius:13px;
  background:
    radial-gradient(circle at 9px 9px,#fff 0 1px,#737b7c 2px,#16191a 4px,transparent 5px),
    radial-gradient(circle at calc(100% - 9px) 9px,#fff 0 1px,#737b7c 2px,#16191a 4px,transparent 5px),
    linear-gradient(110deg,rgba(255,255,255,.12),transparent 25%),
    linear-gradient(180deg,#454d4e,#202627);
  box-shadow:
    inset 0 0 0 2px #727b7c,
    inset 0 10px 14px rgba(255,255,255,.05),
    0 14px 30px rgba(0,0,0,.65);
}

.auto-option-grid button {
  border-radius:8px;
  background:
    linear-gradient(110deg,rgba(255,255,255,.14),transparent 30%),
    linear-gradient(180deg,#5a6364,#292f30);
}

.rules-dialog,
.bonus-dialog {
  border:3px solid #090b0b;
  border-radius:17px;
  background:
    linear-gradient(110deg,rgba(255,255,255,.08),transparent 19%),
    linear-gradient(180deg,#32393a,#171c1d 32%,#101415);
  box-shadow:
    inset 0 0 0 2px #697273,
    inset 0 12px 18px rgba(255,255,255,.04),
    0 24px 90px rgba(0,0,0,.78);
}

.rules-section,
.dialog-copy {
  max-width:100%;
}

.rules-metrics {
  gap:10px;
}

.rules-metrics > div,
.rule-card,
.notification-table > div {
  border:2px solid #0d0f10;
  border-radius:10px;
  background:
    linear-gradient(110deg,rgba(255,255,255,.09),transparent 27%),
    linear-gradient(180deg,#353c3d,#202526);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 3px 0 #080a0a;
}

.pay-row,
.bonus-tier {
  border:2px solid #0b0d0e;
  border-radius:11px;
  background:
    linear-gradient(110deg,rgba(255,255,255,.07),transparent 24%),
    linear-gradient(180deg,#333a3b,#1e2324);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
}

.pay-mini {
  border:2px solid #0a0c0c;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 2px 0 #060707;
}

.buy-tier-button {
  min-height:43px;
  border-radius:9px;
  background:
    linear-gradient(110deg,rgba(255,255,255,.27),transparent 25%),
    linear-gradient(180deg,#f5d778,#b87729);
}

.machine-frame.bonus-mode {
  border-color:#0f4542;
  box-shadow:
    inset 0 0 0 2px #a0ebe4,
    inset 0 0 0 7px #174542,
    inset 0 14px 18px rgba(255,255,255,.05),
    0 12px 0 #06110f,
    0 19px 42px rgba(0,0,0,.50),
    0 0 35px rgba(87,197,189,.35);
}

.machine-frame.bonus-mode .factory-header {
  background:
    linear-gradient(110deg,rgba(255,255,255,.12),transparent 24%),
    linear-gradient(180deg,#24605c,#173d3a 62%,#102927);
}

.machine-frame.bonus-mode .board {
  box-shadow:
    inset 0 0 0 2px #4eaca4,
    inset 0 11px 18px rgba(255,255,255,.05),
    inset 0 -12px 18px rgba(0,0,0,.35),
    0 8px 18px rgba(0,0,0,.38);
}

@media (max-width:760px) {
  .game-shell {
    padding:11px;
  }

  .topbar {
    min-height:68px;
  }

  .brand-mark {
    width:56px;
    height:56px;
  }

  .factory-header {
    min-height:124px;
    padding:10px 12px;
  }

  .board-wrap {
    padding:11px;
  }

  .board {
    padding:6px;
    border-radius:12px;
  }

  .status-card {
    min-height:58px;
  }

  .control-deck {
    gap:10px;
  }
}

@media (max-width:500px) {
  .game-shell {
    padding:8px;
  }

  .topbar {
    gap:9px;
  }

  .brand-block {
    gap:9px;
  }

  .status-strip {
    gap:7px;
  }

  .factory-header {
    padding:7px 9px;
  }

  .board-wrap {
    padding:7px;
  }

  .board {
    gap:4px;
    padding:5px;
  }

  .machine-footer {
    padding:9px 11px;
  }

  .control-deck {
    margin-top:11px;
  }
}


/* =========================================================
   VERSION 12 — ANIMATED WIN WALLET
   ========================================================= */

.win-math {
  grid-template-columns:minmax(170px,auto) 78px;
  column-gap:13px;
}

.win-wallet {
  --wallet-scale: .74;
  position:relative;
  z-index:4;
  width:72px;
  height:55px;
  flex:0 0 72px;
  overflow:visible;
  transform:scale(var(--wallet-scale));
  transform-origin:center bottom;
  transition:
    transform .42s cubic-bezier(.18,.8,.23,1.12),
    filter .3s ease;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.54));
}

.wallet-shadow {
  position:absolute;
  z-index:0;
  right:5px;
  bottom:-4px;
  left:5px;
  height:10px;
  border-radius:50%;
  background:rgba(0,0,0,.5);
  filter:blur(4px);
  transition:transform .35s ease,opacity .35s ease;
}

.wallet-body {
  position:absolute;
  z-index:4;
  right:2px;
  bottom:2px;
  left:2px;
  height:39px;
  overflow:hidden;
  border:2px solid #070909;
  border-radius:7px 7px 11px 11px;
  background:
    radial-gradient(circle at 8px 8px,#f8f4d9 0 1px,#7a6542 2px,#21190f 4px,transparent 5px),
    radial-gradient(circle at calc(100% - 8px) calc(100% - 8px),#f8f4d9 0 1px,#7a6542 2px,#21190f 4px,transparent 5px),
    linear-gradient(112deg,rgba(255,255,255,.22),transparent 25%),
    linear-gradient(180deg,#946733 0%,#68451f 45%,#3a2511 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,237,191,.24),
    inset 0 7px 10px rgba(255,255,255,.08),
    inset 0 -9px 12px rgba(0,0,0,.25),
    0 3px 0 #080706;
  transition:
    height .35s cubic-bezier(.18,.8,.23,1.1),
    border-radius .35s ease,
    filter .3s ease;
}

.wallet-body::before {
  content:"";
  position:absolute;
  top:3px;
  right:8px;
  left:8px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(255,244,210,.55),transparent);
}

.wallet-body::after {
  content:"";
  position:absolute;
  top:11px;
  right:-6px;
  width:23px;
  height:17px;
  border:2px solid #100c07;
  border-radius:6px 0 0 6px;
  background:
    linear-gradient(110deg,rgba(255,255,255,.23),transparent 35%),
    linear-gradient(180deg,#825729,#4a3017);
  box-shadow:
    inset 0 0 0 1px rgba(255,237,191,.15),
    -2px 2px 3px rgba(0,0,0,.32);
}

.wallet-seam {
  position:absolute;
  right:6px;
  bottom:5px;
  left:6px;
  height:1px;
  border-top:1px dashed rgba(255,221,165,.5);
}

.wallet-clasp {
  position:absolute;
  z-index:2;
  top:15px;
  right:2px;
  width:8px;
  height:8px;
  border:1px solid #1b1108;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%,#f0dd9d 0 18%,#9a7434 20% 48%,#3d2912 51%);
  box-shadow:0 1px 2px rgba(0,0,0,.7);
}

.wallet-bill {
  position:absolute;
  z-index:2;
  left:50%;
  bottom:29px;
  display:grid;
  width:43px;
  height:23px;
  place-items:center;
  overflow:hidden;
  border:1px solid #172917;
  border-radius:3px;
  color:#143616;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.42),transparent 23%),
    repeating-linear-gradient(90deg,rgba(22,72,30,.09) 0,rgba(22,72,30,.09) 1px,transparent 1px,transparent 5px),
    linear-gradient(145deg,#d9efc1,#86b879);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.34),
    0 2px 3px rgba(0,0,0,.42);
  font-size:12px;
  font-weight:900;
  opacity:0;
  transform:translateX(-50%) translateY(16px) scale(.75);
  transform-origin:center bottom;
  transition:
    opacity .24s ease,
    transform .4s cubic-bezier(.18,.8,.23,1.12);
}

.wallet-bill::before,
.wallet-bill::after {
  content:"";
  position:absolute;
  width:5px;
  height:5px;
  border:1px solid rgba(18,68,26,.45);
  border-radius:50%;
}

.wallet-bill::before {
  left:3px;
  top:3px;
}

.wallet-bill::after {
  right:3px;
  bottom:3px;
}

.wallet-bill i {
  font-style:normal;
  text-shadow:0 1px rgba(255,255,255,.4);
}

.wallet-pressure-line {
  position:absolute;
  z-index:7;
  top:17px;
  right:5px;
  left:5px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#ffe48a,transparent);
  opacity:0;
  filter:drop-shadow(0 0 4px #ffe36c);
}

.win-wallet[data-wallet-level="0"] {
  --wallet-scale:.72;
  opacity:.60;
}

.win-wallet[data-wallet-level="1"] {
  --wallet-scale:.78;
}

.win-wallet[data-wallet-level="2"] {
  --wallet-scale:.84;
}

.win-wallet[data-wallet-level="3"] {
  --wallet-scale:.91;
}

.win-wallet[data-wallet-level="4"] {
  --wallet-scale:.99;
}

.win-wallet[data-wallet-level="5"] {
  --wallet-scale:1.07;
}

.win-wallet[data-wallet-level="6"] {
  --wallet-scale:1.15;
}

.win-wallet[data-wallet-level="7"] {
  --wallet-scale:1.22;
  filter:
    drop-shadow(0 4px 4px rgba(0,0,0,.55))
    drop-shadow(0 0 8px rgba(255,218,91,.26));
}

.win-wallet[data-wallet-level="1"] .wallet-bill-1,
.win-wallet[data-wallet-level="2"] .wallet-bill-1,
.win-wallet[data-wallet-level="2"] .wallet-bill-2,
.win-wallet[data-wallet-level="3"] .wallet-bill-1,
.win-wallet[data-wallet-level="3"] .wallet-bill-2,
.win-wallet[data-wallet-level="3"] .wallet-bill-3,
.win-wallet[data-wallet-level="4"] .wallet-bill-1,
.win-wallet[data-wallet-level="4"] .wallet-bill-2,
.win-wallet[data-wallet-level="4"] .wallet-bill-3,
.win-wallet[data-wallet-level="4"] .wallet-bill-4,
.win-wallet[data-wallet-level="5"] .wallet-bill-1,
.win-wallet[data-wallet-level="5"] .wallet-bill-2,
.win-wallet[data-wallet-level="5"] .wallet-bill-3,
.win-wallet[data-wallet-level="5"] .wallet-bill-4,
.win-wallet[data-wallet-level="5"] .wallet-bill-5,
.win-wallet[data-wallet-level="6"] .wallet-bill-1,
.win-wallet[data-wallet-level="6"] .wallet-bill-2,
.win-wallet[data-wallet-level="6"] .wallet-bill-3,
.win-wallet[data-wallet-level="6"] .wallet-bill-4,
.win-wallet[data-wallet-level="6"] .wallet-bill-5,
.win-wallet[data-wallet-level="6"] .wallet-bill-6,
.win-wallet[data-wallet-level="7"] .wallet-bill {
  opacity:1;
}

.win-wallet[data-wallet-level="1"] .wallet-bill-1 {
  transform:translateX(-50%) translateY(0) rotate(-2deg);
}

.win-wallet[data-wallet-level="2"] .wallet-bill-1 {
  transform:translateX(-61%) translateY(1px) rotate(-7deg);
}

.win-wallet[data-wallet-level="2"] .wallet-bill-2 {
  transform:translateX(-39%) translateY(-2px) rotate(5deg);
}

.win-wallet[data-wallet-level="3"] .wallet-bill-1 {
  transform:translateX(-69%) translateY(3px) rotate(-11deg);
}

.win-wallet[data-wallet-level="3"] .wallet-bill-2 {
  transform:translateX(-50%) translateY(-5px) rotate(0deg);
}

.win-wallet[data-wallet-level="3"] .wallet-bill-3 {
  transform:translateX(-31%) translateY(2px) rotate(10deg);
}

.win-wallet[data-wallet-level="4"] .wallet-bill-1 {
  transform:translateX(-76%) translateY(4px) rotate(-14deg);
}

.win-wallet[data-wallet-level="4"] .wallet-bill-2 {
  transform:translateX(-60%) translateY(-5px) rotate(-5deg);
}

.win-wallet[data-wallet-level="4"] .wallet-bill-3 {
  transform:translateX(-40%) translateY(-7px) rotate(5deg);
}

.win-wallet[data-wallet-level="4"] .wallet-bill-4 {
  transform:translateX(-24%) translateY(4px) rotate(14deg);
}

.win-wallet[data-wallet-level="5"] .wallet-bill-1 {
  transform:translateX(-82%) translateY(5px) rotate(-18deg);
}

.win-wallet[data-wallet-level="5"] .wallet-bill-2 {
  transform:translateX(-67%) translateY(-5px) rotate(-10deg);
}

.win-wallet[data-wallet-level="5"] .wallet-bill-3 {
  transform:translateX(-50%) translateY(-12px) rotate(0deg);
}

.win-wallet[data-wallet-level="5"] .wallet-bill-4 {
  transform:translateX(-33%) translateY(-5px) rotate(10deg);
}

.win-wallet[data-wallet-level="5"] .wallet-bill-5 {
  transform:translateX(-18%) translateY(5px) rotate(18deg);
}

.win-wallet[data-wallet-level="6"] .wallet-bill-1 {
  transform:translateX(-88%) translateY(7px) rotate(-21deg);
}

.win-wallet[data-wallet-level="6"] .wallet-bill-2 {
  transform:translateX(-73%) translateY(-4px) rotate(-13deg);
}

.win-wallet[data-wallet-level="6"] .wallet-bill-3 {
  transform:translateX(-58%) translateY(-13px) rotate(-5deg);
}

.win-wallet[data-wallet-level="6"] .wallet-bill-4 {
  transform:translateX(-42%) translateY(-14px) rotate(5deg);
}

.win-wallet[data-wallet-level="6"] .wallet-bill-5 {
  transform:translateX(-27%) translateY(-4px) rotate(13deg);
}

.win-wallet[data-wallet-level="6"] .wallet-bill-6 {
  transform:translateX(-12%) translateY(7px) rotate(21deg);
}

.win-wallet[data-wallet-level="7"] .wallet-bill-1 {
  transform:translateX(-94%) translateY(8px) rotate(-25deg);
}

.win-wallet[data-wallet-level="7"] .wallet-bill-2 {
  transform:translateX(-80%) translateY(-5px) rotate(-17deg);
}

.win-wallet[data-wallet-level="7"] .wallet-bill-3 {
  transform:translateX(-65%) translateY(-16px) rotate(-9deg);
}

.win-wallet[data-wallet-level="7"] .wallet-bill-4 {
  transform:translateX(-50%) translateY(-21px) rotate(0deg);
}

.win-wallet[data-wallet-level="7"] .wallet-bill-5 {
  transform:translateX(-35%) translateY(-16px) rotate(9deg);
}

.win-wallet[data-wallet-level="7"] .wallet-bill-6 {
  transform:translateX(-20%) translateY(-5px) rotate(17deg);
}

.win-wallet[data-wallet-level="7"] .wallet-bill-7 {
  transform:translateX(-6%) translateY(8px) rotate(25deg);
}

.win-wallet[data-wallet-level="5"] .wallet-body {
  height:41px;
}

.win-wallet[data-wallet-level="6"] .wallet-body {
  height:43px;
  border-radius:8px 8px 13px 13px;
}

.win-wallet[data-wallet-level="7"] .wallet-body {
  height:45px;
  border-radius:9px 9px 14px 14px;
  filter:brightness(1.08);
}

.win-wallet[data-wallet-level="7"] .wallet-pressure-line {
  opacity:1;
}

.win-wallet.wallet-pop {
  animation:wallet-pop .54s cubic-bezier(.18,.84,.22,1.18);
}

.win-wallet.wallet-pop .wallet-body {
  animation:wallet-body-fill .54s cubic-bezier(.18,.84,.22,1.18);
}

.win-wallet.wallet-near-burst.wallet-pop {
  animation:wallet-near-burst .7s cubic-bezier(.18,.84,.22,1.14);
}

@keyframes wallet-pop {
  0% {
    transform:scale(calc(var(--wallet-scale) * .78)) translateY(6px);
    filter:brightness(1.6) drop-shadow(0 0 11px #ffe57b);
  }
  48% {
    transform:scale(calc(var(--wallet-scale) * 1.16)) translateY(-3px);
  }
  100% {
    transform:scale(var(--wallet-scale)) translateY(0);
  }
}

@keyframes wallet-body-fill {
  0% { filter:brightness(1.7); }
  50% { filter:brightness(1.16); }
  100% { filter:none; }
}

@keyframes wallet-near-burst {
  0% {
    transform:scale(calc(var(--wallet-scale) * .77)) rotate(0deg);
    filter:brightness(1.8) drop-shadow(0 0 14px #ffe16b);
  }
  28% {
    transform:scale(calc(var(--wallet-scale) * 1.15)) rotate(-3deg);
  }
  52% {
    transform:scale(calc(var(--wallet-scale) * 1.19)) rotate(3deg);
  }
  75% {
    transform:scale(calc(var(--wallet-scale) * 1.12)) rotate(-1deg);
  }
  100% {
    transform:scale(var(--wallet-scale)) rotate(0deg);
  }
}

.win-wallet.wallet-final {
  animation:wallet-final-glow .9s steps(2,end) 2;
}

@keyframes wallet-final-glow {
  0%,49% {
    filter:
      brightness(1.45)
      drop-shadow(0 0 12px #fff0a0)
      drop-shadow(0 0 20px rgba(233,185,73,.74));
  }
  50%,100% {
    filter:drop-shadow(0 4px 4px rgba(0,0,0,.54));
  }
}

@media (max-width:560px) {
  .win-math {
    grid-template-columns:minmax(130px,auto) 61px;
    column-gap:6px;
  }

  .win-wallet {
    width:61px;
    height:50px;
    flex-basis:61px;
  }

  .wallet-bill {
    width:37px;
    height:20px;
    font-size:10px;
  }

  #runningWinAmount {
    min-width:130px;
  }
}


/* =========================================================
   VERSION 13 — HIGH-VISIBILITY MULTIPLIER CELLS
   ========================================================= */

/*
 * Upgraded multiplier positions receive a substantially heavier machined
 * frame. The frame remains completely still after it appears.
 */
.board-cell:not([data-multiplier-level="1"]) .multiplier-bed {
  inset:1px;
  border:3px solid rgba(255,255,255,1);
  border-radius:11px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.16),transparent 23%),
    linear-gradient(315deg,rgba(255,255,255,.08),transparent 28%),
    rgba(255,255,255,.025);
  box-shadow:
    0 0 0 2px rgba(10,12,12,.95),
    0 0 0 4px rgba(255,255,255,.36),
    0 0 16px rgba(255,255,255,.94),
    0 0 27px rgba(255,255,255,.42),
    inset 0 0 0 1px rgba(20,24,24,.84),
    inset 0 0 15px rgba(255,255,255,.18);
}

/* A second internal line makes the exact multiplier tile unmistakable. */
.board-cell:not([data-multiplier-level="1"])::before {
  content:"";
  position:absolute;
  z-index:5;
  inset:6px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:8px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.52),
    0 0 7px rgba(255,255,255,.46);
  pointer-events:none;
}

/*
 * The centered multiplier overlay is approximately twice the previous size.
 * It remains beneath the symbol but is readable through the translucent tile.
 */
.board-cell:not([data-multiplier-level="1"]) .cell-multiplier {
  z-index:2;
  color:rgba(255,255,255,.94);
  font-size:clamp(30px,6.9vw,58px);
  line-height:.88;
  letter-spacing:-.025em;
  opacity:1;
  text-shadow:
    0 2px 0 rgba(255,255,255,.24),
    0 5px 0 rgba(0,0,0,.92),
    0 0 8px rgba(255,255,255,.96),
    0 0 18px rgba(255,255,255,.62);
  filter:
    drop-shadow(0 0 5px rgba(255,255,255,.95))
    drop-shadow(0 4px 1px rgba(0,0,0,.92));
}

/* Let the enlarged number remain visible through a symbol occupying the cell. */
.board-cell:not([data-multiplier-level="1"]) .symbol::before {
  opacity:.52;
}

.board-cell:not([data-multiplier-level="1"]) .symbol {
  border-color:rgba(255,255,255,.72);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.32),
    inset 0 8px 12px rgba(255,255,255,.07),
    inset 0 -10px 14px rgba(0,0,0,.20),
    0 0 0 2px rgba(0,0,0,.72),
    0 0 12px rgba(255,255,255,.28);
}

/* Larger, more legible top-edge multiplier plate. */
.board-cell:not([data-multiplier-level="1"]) .multiplier-badge {
  z-index:8;
  top:-11px;
  min-width:43px;
  padding:4px 9px 5px;
  border:3px solid #fff;
  font-size:clamp(11px,2vw,15px);
  box-shadow:
    inset 0 1px rgba(255,255,255,.52),
    0 0 10px rgba(255,255,255,.95),
    0 3px 5px rgba(0,0,0,.92);
}

/* Bonus cells use the same strong geometry with a cyan-white edge. */
.machine-frame.bonus-mode
.board-cell:not([data-multiplier-level="1"])
.multiplier-bed {
  border-color:#efffff;
  box-shadow:
    0 0 0 2px rgba(4,24,23,.95),
    0 0 0 4px rgba(181,255,248,.46),
    0 0 17px rgba(112,255,242,.98),
    0 0 29px rgba(87,197,189,.52),
    inset 0 0 0 1px rgba(5,38,35,.88),
    inset 0 0 16px rgba(151,255,246,.20);
}

.machine-frame.bonus-mode
.board-cell:not([data-multiplier-level="1"])
.cell-multiplier {
  color:#efffff;
  text-shadow:
    0 2px 0 rgba(255,255,255,.28),
    0 5px 0 rgba(0,22,20,.94),
    0 0 9px rgba(193,255,249,1),
    0 0 20px rgba(87,197,189,.78);
  filter:
    drop-shadow(0 0 6px rgba(196,255,250,1))
    drop-shadow(0 4px 1px rgba(0,20,18,.94));
}

@media (max-width:560px) {
  .board-cell:not([data-multiplier-level="1"]) .cell-multiplier {
    font-size:clamp(25px,7.2vw,42px);
  }

  .board-cell:not([data-multiplier-level="1"]) .multiplier-badge {
    top:-8px;
    min-width:34px;
    padding:3px 6px 4px;
    border-width:2px;
    font-size:10px;
  }
}


/* =========================================================
   VERSION 14 — CLEARER SYMBOLS AND LEFT-SIDE WIN WALLET
   ========================================================= */

/* Keep the wallet firmly to the left of the win amount. */
.win-math {
  display:grid;
  grid-template-columns:78px minmax(170px,auto);
  align-items:center;
  justify-content:center;
  column-gap:13px;
  min-height:55px;
}

.win-wallet {
  grid-column:1;
  justify-self:end;
}

#runningWinAmount {
  grid-column:2;
  justify-self:start;
  min-width:170px;
  text-align:left;
}

.pending-win-amount {
  left:calc(50% + 128px);
}

/*
 * The large multiplier is now a subtle watermark. The frame and top badge
 * remain distinct, while the symbol artwork stays dominant and easy to read.
 */
.board-cell:not([data-multiplier-level="1"]) .cell-multiplier {
  color:rgba(255,255,255,.27);
  opacity:.46;
  text-shadow:
    0 3px 0 rgba(0,0,0,.54),
    0 0 5px rgba(255,255,255,.22);
  filter:
    drop-shadow(0 3px 1px rgba(0,0,0,.58));
}

/* Restore stronger symbol color and opacity over multiplier positions. */
.board-cell:not([data-multiplier-level="1"]) .symbol::before {
  opacity:.80;
}

.board-cell:not([data-multiplier-level="1"]) .symbol-icon {
  color:#fff;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.55));
}

.board-cell:not([data-multiplier-level="1"]) .symbol-name {
  color:#fff;
  text-shadow:
    0 1px 0 #000,
    0 2px 4px rgba(0,0,0,.94);
}

/* Empty upgraded cells can show the multiplier more clearly until refilled. */
.board-cell.vacant-multiplier:not([data-multiplier-level="1"]) .cell-multiplier {
  color:rgba(255,255,255,.70);
  opacity:.86;
  text-shadow:
    0 3px 0 rgba(0,0,0,.74),
    0 0 8px rgba(255,255,255,.52);
  filter:
    drop-shadow(0 3px 1px rgba(0,0,0,.74));
}

/* Bonus overlay remains cyan, but is equally transparent beneath symbols. */
.machine-frame.bonus-mode
.board-cell:not([data-multiplier-level="1"])
.cell-multiplier {
  color:rgba(226,255,252,.29);
  opacity:.48;
  text-shadow:
    0 3px 0 rgba(0,27,24,.62),
    0 0 6px rgba(119,238,227,.28);
  filter:
    drop-shadow(0 3px 1px rgba(0,25,22,.66));
}

.machine-frame.bonus-mode
.board-cell.vacant-multiplier:not([data-multiplier-level="1"])
.cell-multiplier {
  color:rgba(235,255,253,.76);
  opacity:.88;
  text-shadow:
    0 3px 0 rgba(0,25,22,.78),
    0 0 9px rgba(126,255,243,.62);
}

@media (max-width:560px) {
  .win-math {
    grid-template-columns:61px minmax(130px,auto);
    column-gap:7px;
  }

  #runningWinAmount {
    min-width:130px;
  }

  .pending-win-amount {
    left:calc(50% + 98px);
  }
}


/* =========================================================
   VERSION 16 — BOMBS, ALARM PACING AND WILD PURCHASES
   ========================================================= */

.control-deck {
  grid-template-columns:minmax(145px,.95fr) minmax(132px,.82fr) minmax(142px,.88fr) minmax(175px,1.18fr) minmax(92px,.56fr);
}

.wild-card-button {
  color:#172b15;
  background:
    linear-gradient(110deg,rgba(255,255,255,.30),transparent 23%),
    repeating-linear-gradient(-45deg,rgba(0,0,0,.05) 0,rgba(0,0,0,.05) 7px,transparent 7px,transparent 14px),
    linear-gradient(180deg,#bfe887,#6fa84d 58%,#3f702d);
}

.wild-card-button.is-armed {
  color:#10240d;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.34),
    0 5px 0 #173512,
    0 0 18px rgba(144,231,91,.68);
}

.wild-card-main,.wild-card-sub { display:block; position:relative; z-index:2; }
.wild-card-main { font-size:17px; font-weight:1000; letter-spacing:.04em; }
.wild-card-sub { margin-top:3px; font-size:9px; font-weight:900; }

.symbol.bomb-symbol {
  border-color:#e25a3f;
  background:
    linear-gradient(135deg,rgba(255,255,255,.20),transparent 24%),
    radial-gradient(circle at 48% 58%,#353b3c 0 24%,#131718 26% 53%,#050606 56%),
    linear-gradient(145deg,#6f2720,#211313);
  box-shadow:
    inset 0 0 0 1px rgba(255,224,198,.25),
    0 0 0 2px rgba(40,5,2,.8),
    0 0 13px rgba(255,77,43,.42);
}

.symbol.bomb-symbol::before {
  opacity:.9;
  background:
    radial-gradient(circle at 62% 22%,#ffe085 0 4%,#c85d25 5% 8%,transparent 9%),
    radial-gradient(circle at 48% 58%,#4d5556 0 22%,#171a1b 24% 54%,#050606 57%);
}

.symbol.bomb-symbol .symbol-icon {
  font-size:clamp(24px,5vw,42px);
  filter:drop-shadow(0 3px 2px #000);
}

.symbol.bomb-armed {
  animation:bomb-arm-pulse .42s steps(2,end) infinite;
}

.symbol.bomb-detonating {
  animation:bomb-detonate .52s cubic-bezier(.2,.8,.2,1) forwards;
}

.symbol.bomb-blasted {
  animation:bomb-blast-cell .5s cubic-bezier(.2,.7,.2,1) forwards;
}

@keyframes bomb-arm-pulse {
  0%,49% { filter:brightness(1) drop-shadow(0 0 4px #ff6b3e); }
  50%,100% { filter:brightness(1.65) drop-shadow(0 0 13px #ffcf66); }
}

@keyframes bomb-detonate {
  0% { transform:scale(1); filter:brightness(1); }
  45% { transform:scale(1.32); filter:brightness(3) drop-shadow(0 0 18px #fff); }
  100% { transform:scale(.15); opacity:0; filter:brightness(4); }
}

@keyframes bomb-blast-cell {
  0% { opacity:1; transform:scale(1); filter:brightness(1); }
  45% { opacity:1; transform:scale(1.08); filter:brightness(2.4) sepia(1); }
  100% { opacity:0; transform:scale(.35); filter:brightness(.3); }
}

.machine-frame.alarm-slow-active .board {
  box-shadow:
    inset 0 0 0 2px #9f2b20,
    inset 0 11px 18px rgba(255,255,255,.05),
    inset 0 -12px 18px rgba(0,0,0,.35),
    0 8px 18px rgba(0,0,0,.38),
    0 0 23px rgba(225,53,35,.42);
}

.bonus-wild-options {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:15px;
}

.bonus-wild-option {
  display:grid;
  min-height:142px;
  align-content:center;
  gap:6px;
  padding:13px;
  border:2px solid #0a0d0d;
  border-radius:12px;
  color:var(--ink);
  background:
    linear-gradient(112deg,rgba(255,255,255,.13),transparent 26%),
    linear-gradient(180deg,#46504b,#202724);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),0 4px 0 #070909;
  text-align:center;
  cursor:pointer;
}

.bonus-wild-option strong { color:#c8f392; font-size:25px; }
.bonus-wild-option span { color:var(--muted); font-size:11px; }
.bonus-wild-option b { color:var(--gold); font-size:18px; }
.bonus-wild-option:disabled { opacity:.42; cursor:not-allowed; }
.bonus-wild-option:not(:disabled):hover { filter:brightness(1.12); }

.alarm-reward-table { grid-template-columns:repeat(4,1fr); }

@media (max-width:900px) {
  .control-deck { grid-template-columns:repeat(2,1fr); }
  .spin-button { grid-column:1/-1; grid-row:1; }
  .auto-control-wrap { grid-column:1/-1; }
}

@media (max-width:560px) {
  .control-deck { grid-template-columns:1fr; }
  .wild-card-button { grid-column:1; }
  .bonus-wild-options,.alarm-reward-table { grid-template-columns:1fr; }
}


/* =========================================================
   VERSION 18 — FACTORY OVERTIME SPIN PROGRESS
   ========================================================= */

.bonus-spin-tracker {
  position:relative;
  display:none;
  min-width:190px;
  max-width:230px;
  align-self:center;
  padding:10px 14px 11px;
  overflow:visible;
  border:3px solid #071716;
  border-radius:14px;
  color:#efffff;
  text-align:center;
  background:
    radial-gradient(circle at 10px 10px,#fff 0 1px,#79c8c2 2px,#173e3b 4px,transparent 5px),
    radial-gradient(circle at calc(100% - 10px) 10px,#fff 0 1px,#79c8c2 2px,#173e3b 4px,transparent 5px),
    linear-gradient(112deg,rgba(255,255,255,.18),transparent 27%),
    linear-gradient(180deg,#286c67,#16433f 60%,#0d2927);
  box-shadow:
    inset 0 0 0 2px rgba(185,255,248,.38),
    inset 0 9px 14px rgba(255,255,255,.06),
    inset 0 -10px 15px rgba(0,0,0,.23),
    0 5px 0 #05100f,
    0 9px 18px rgba(0,0,0,.30),
    0 0 18px rgba(87,197,189,.25);
}

.machine-frame.bonus-mode .bonus-spin-tracker:not([hidden]) {
  display:grid;
  align-content:center;
  gap:2px;
}

.bonus-spin-tracker-label,
.bonus-spin-count-caption,
.bonus-spin-counter-detail {
  display:block;
  text-transform:uppercase;
}

.bonus-spin-tracker-label {
  color:#bff8f2;
  font-size:9px;
  font-weight:900;
  letter-spacing:.13em;
}

.bonus-spin-count-row {
  display:flex;
  min-height:45px;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  line-height:1;
}

.bonus-spin-count-row strong {
  min-width:47px;
  color:#fff;
  font-size:clamp(33px,5.2vw,46px);
  font-weight:900;
  text-shadow:
    0 1px 0 rgba(255,255,255,.28),
    0 4px 0 rgba(0,29,27,.92),
    0 0 10px rgba(170,255,247,.50);
}

.bonus-spin-divider {
  color:#7eddd5;
  font-size:28px;
  font-weight:900;
  transform:translateY(-1px);
}

.bonus-spin-count-caption {
  margin-top:-1px;
  color:#a9dcd7;
  font-size:7px;
  font-weight:900;
  letter-spacing:.075em;
}

.bonus-spin-progress-track {
  position:relative;
  height:7px;
  margin:5px 3px 3px;
  overflow:hidden;
  border:1px solid rgba(0,17,16,.95);
  border-radius:999px;
  background:#071817;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.65),
    0 1px 0 rgba(255,255,255,.14);
}

#bonusSpinProgressFill {
  display:block;
  width:0%;
  height:100%;
  border-radius:inherit;
  background:
    linear-gradient(90deg,#4abbb1,#b9fff8);
  box-shadow:
    0 0 8px rgba(159,255,247,.76);
  transition:width .42s cubic-bezier(.18,.8,.24,1);
}

.bonus-spin-counter-detail {
  min-height:13px;
  overflow:hidden;
  color:#d5f5f1;
  font-size:8px;
  font-weight:800;
  letter-spacing:.035em;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.bonus-spin-award-burst {
  position:absolute;
  z-index:10;
  top:-18px;
  right:-15px;
  display:grid;
  min-width:54px;
  min-height:37px;
  place-items:center;
  padding:3px 8px;
  border:3px solid #fff;
  border-radius:10px;
  color:#09201e;
  background:
    linear-gradient(145deg,#fff7a6,#f2bd3d);
  box-shadow:
    0 0 13px rgba(255,244,137,.95),
    0 5px 0 #6a4610,
    0 8px 13px rgba(0,0,0,.42);
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-size:23px;
  line-height:1;
  opacity:0;
  transform:scale(.45) rotate(-8deg);
  pointer-events:none;
}

.bonus-spin-tracker.spins-added {
  animation:bonus-counter-total-pulse .72s cubic-bezier(.17,.84,.23,1.15);
}

.bonus-spin-tracker.spins-added .bonus-spin-award-burst {
  animation:bonus-spin-award-burst .92s cubic-bezier(.17,.84,.23,1.13);
}

.bonus-spin-tracker.spins-added #bonusSpinsTotal {
  animation:bonus-total-number-flash .82s steps(2,end);
}

@keyframes bonus-counter-total-pulse {
  0% {
    filter:brightness(1);
    transform:scale(1);
  }
  36% {
    filter:brightness(1.45);
    transform:scale(1.07);
  }
  100% {
    filter:brightness(1);
    transform:scale(1);
  }
}

@keyframes bonus-spin-award-burst {
  0% {
    opacity:0;
    transform:scale(.45) rotate(-8deg) translateY(8px);
  }
  24% {
    opacity:1;
    transform:scale(1.18) rotate(3deg) translateY(0);
  }
  62% {
    opacity:1;
    transform:scale(1) rotate(0deg);
  }
  100% {
    opacity:0;
    transform:scale(.88) translateY(-13px);
  }
}

@keyframes bonus-total-number-flash {
  0%,49% {
    color:#fff6a0;
    filter:brightness(1.8) drop-shadow(0 0 10px #fff093);
    transform:scale(1.16);
  }
  50%,100% {
    color:#fff;
    filter:none;
    transform:scale(1);
  }
}

@media (max-width:820px) {
  .factory-header {
    flex-wrap:wrap;
  }

  .machine-frame.bonus-mode .bonus-spin-tracker:not([hidden]) {
    order:3;
    width:100%;
    max-width:none;
    min-width:0;
    grid-template-columns:auto auto auto;
    grid-template-areas:
      "label count detail"
      "track track track";
    align-items:center;
    column-gap:10px;
    padding:8px 12px;
  }

  .bonus-spin-tracker-label {
    grid-area:label;
    text-align:left;
  }

  .bonus-spin-count-row {
    grid-area:count;
    min-height:34px;
  }

  .bonus-spin-count-row strong {
    min-width:34px;
    font-size:30px;
  }

  .bonus-spin-count-caption {
    display:none;
  }

  .bonus-spin-counter-detail {
    grid-area:detail;
    text-align:right;
  }

  .bonus-spin-progress-track {
    grid-area:track;
    width:100%;
    margin:2px 0 0;
  }
}

@media (max-width:560px) {
  .machine-frame.bonus-mode .bonus-spin-tracker:not([hidden]) {
    grid-template-columns:1fr auto;
    grid-template-areas:
      "label count"
      "detail detail"
      "track track";
  }

  .bonus-spin-counter-detail {
    text-align:center;
  }

  .bonus-spin-award-burst {
    right:5px;
  }
}


/* =========================================================
   VERSION 20 — ORIGINAL ILLUSTRATED SYMBOL ART
   ========================================================= */

.topbar {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-right:10px;
  padding-left:10px;
  border:2px solid rgba(0,0,0,.62);
  border-radius:17px;
  background:
    linear-gradient(110deg,rgba(255,255,255,.10),transparent 27%),
    linear-gradient(180deg,rgba(44,51,52,.96),rgba(17,21,22,.96));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    inset 0 9px 13px rgba(255,255,255,.035),
    0 5px 0 rgba(0,0,0,.63);
}

.title-art-plate {
  position:absolute;
  z-index:-1;
  inset:0;
  background:
    linear-gradient(90deg,rgba(10,13,14,.66),rgba(10,13,14,.32) 43%,rgba(10,13,14,.56)),
    url("assets/art/backdrops/title-roster.webp") center / cover no-repeat;
  opacity:.82;
  pointer-events:none;
}

.brand-block,
.top-actions {
  position:relative;
  z-index:2;
}

.factory-header {
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.factory-header > * {
  position:relative;
  z-index:2;
}

.machine-frame.bonus-mode .factory-header::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  background:
    linear-gradient(90deg,rgba(5,32,29,.82),rgba(5,32,29,.48),rgba(5,32,29,.78)),
    url("assets/art/backdrops/bonus-backdrop.webp") center / cover no-repeat;
  opacity:.60;
  pointer-events:none;
}

.symbol.has-art {
  background:
    linear-gradient(135deg,rgba(255,255,255,.12),transparent 22%,transparent 74%,rgba(255,255,255,.04)),
    rgba(12,16,17,.40);
}

.symbol.has-art::before {
  z-index:3;
  inset:1px;
  border-radius:10px;
  opacity:1;
  background:
    linear-gradient(132deg,rgba(255,255,255,.25),transparent 18%),
    linear-gradient(0deg,rgba(0,0,0,.76) 0%,rgba(0,0,0,.23) 26%,transparent 52%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 -10px 13px rgba(0,0,0,.18);
  pointer-events:none;
}

.symbol.has-art::after {
  z-index:7;
}

.symbol-art {
  position:absolute;
  z-index:2;
  inset:2px;
  width:calc(100% - 4px);
  height:calc(100% - 4px);
  border-radius:9px;
  object-fit:cover;
  object-position:center;
  filter:
    contrast(1.06)
    saturate(1.06)
    drop-shadow(0 2px 2px rgba(0,0,0,.48));
  transform:translateZ(0);
  user-select:none;
  pointer-events:none;
}

.symbol.has-art .symbol-icon {
  opacity:0;
}

.symbol.has-art .symbol-name {
  z-index:8;
  right:3px;
  bottom:3px;
  left:3px;
  padding:3px 4px 2px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:5px;
  color:#fff;
  background:
    linear-gradient(180deg,rgba(8,11,12,.22),rgba(8,11,12,.84));
  box-shadow:
    inset 0 1px rgba(255,255,255,.055),
    0 1px 2px rgba(0,0,0,.45);
  font-size:clamp(5px,1.05vw,8px);
  text-shadow:
    0 1px 0 #000,
    0 2px 3px rgba(0,0,0,.96);
}

.board-cell:not([data-multiplier-level="1"]) .symbol.has-art {
  background:rgba(8,11,12,.30);
}

.board-cell:not([data-multiplier-level="1"]) .symbol.has-art .symbol-art {
  opacity:.90;
}

.board-cell:not([data-multiplier-level="1"]) .symbol.has-art::before {
  background:
    linear-gradient(132deg,rgba(255,255,255,.20),transparent 18%),
    linear-gradient(0deg,rgba(0,0,0,.70) 0%,rgba(0,0,0,.20) 28%,transparent 52%),
    rgba(255,255,255,.025);
}

/* The Factory Alarm remains unmistakably red even with the full illustration. */
.symbol[data-symbol="scatter"].has-art {
  border-color:#ff876d;
  box-shadow:
    inset 0 0 0 1px rgba(255,226,218,.25),
    0 0 0 2px rgba(60,5,2,.78),
    0 0 14px rgba(255,77,52,.42);
}

/* Replace the old emoji-centered bomb treatment with the supplied bomb art. */
.symbol.bomb-symbol.has-art {
  border-color:#f5cd58;
  background:rgba(13,15,13,.50);
  box-shadow:
    inset 0 0 0 1px rgba(255,244,181,.28),
    0 0 0 2px rgba(38,29,3,.84),
    0 0 15px rgba(255,211,74,.48);
}

.symbol.bomb-symbol.has-art::before {
  z-index:3;
  opacity:1;
  background:
    radial-gradient(circle at 22% 17%,rgba(255,228,104,.34),transparent 24%),
    linear-gradient(132deg,rgba(255,255,255,.22),transparent 18%),
    linear-gradient(0deg,rgba(0,0,0,.76) 0%,rgba(0,0,0,.17) 28%,transparent 54%);
}

.symbol.bomb-symbol.has-art .symbol-art {
  opacity:1;
  filter:
    contrast(1.10)
    saturate(1.10)
    drop-shadow(0 0 6px rgba(255,214,79,.25));
}

.pay-mini.has-art {
  overflow:hidden;
  padding:0;
  background:#14191a;
}

.pay-mini-art {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.artwork-roster-section {
  overflow:hidden;
}

.art-roster-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}

.art-roster-card {
  display:grid;
  min-width:0;
  grid-template-rows:auto 1fr;
  overflow:hidden;
  border:2px solid #0a0c0d;
  border-radius:11px;
  background:
    linear-gradient(110deg,rgba(255,255,255,.08),transparent 26%),
    linear-gradient(180deg,#343b3c,#1a1f20);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 3px 0 #080a0a;
}

.art-roster-card img {
  display:block;
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  background:#111516;
}

.art-roster-card div {
  display:grid;
  gap:2px;
  align-content:start;
  padding:7px 8px 8px;
}

.art-roster-card strong {
  color:#f1d077;
  font-size:10px;
  letter-spacing:.025em;
  text-transform:uppercase;
}

.art-roster-card span {
  color:#bdc4bd;
  font-size:8px;
  line-height:1.25;
}

@media (max-width:760px) {
  .title-art-plate {
    background-position:38% center;
    opacity:.52;
  }

  .art-roster-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:520px) {
  .title-art-plate {
    display:none;
  }

  .topbar {
    padding-right:7px;
    padding-left:7px;
  }

  .symbol.has-art .symbol-name {
    padding:2px 2px 1px;
    font-size:5px;
    letter-spacing:.015em;
  }

  .symbol-art {
    inset:1px;
    width:calc(100% - 2px);
    height:calc(100% - 2px);
  }

  .art-roster-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* =========================================================
   VERSION 21 — LARGE RESPONSIVE BOARD AND DISTINCT WILD
   ========================================================= */

:root {
  /*
   * Previous desktop maximum was 72px. The new maximum is 108px,
   * which is exactly 50% larger.
   */
  --cell-size:clamp(57px,min(7.4vw,10.6vh),108px);
  --cell-gap:clamp(4px,.55vw,8px);
}

.game-shell {
  width:min(98vw,1540px);
  max-width:none;
}

.board-wrap {
  min-height:0;
  overflow:auto;
  padding:clamp(12px,2vw,26px);
}

.board {
  width:max-content;
  max-width:none;
  gap:var(--cell-gap);
  padding:clamp(7px,.65vw,12px);
}

.symbol.has-art .symbol-name {
  right:4px;
  bottom:4px;
  left:4px;
  padding:4px 4px 3px;
  font-size:clamp(7px,.78vw,11px);
  letter-spacing:.015em;
}

/* New airborne Repair Drone art uses a cool mechanical treatment. */
.symbol[data-symbol="drone"].has-art {
  border-color:#a4d8da;
  box-shadow:
    inset 0 0 0 1px rgba(225,255,255,.25),
    0 0 0 2px rgba(7,31,33,.86),
    0 0 12px rgba(126,208,213,.28);
}

/* The Wild is always unmistakably gold. */
.symbol[data-symbol="wild"].has-art {
  border:3px solid #ffe58b;
  background:
    radial-gradient(circle at 50% 34%,rgba(255,233,125,.20),transparent 45%),
    linear-gradient(145deg,#9b6411,#2a1702);
  box-shadow:
    inset 0 0 0 2px rgba(255,249,210,.38),
    inset 0 -11px 15px rgba(55,26,0,.24),
    0 0 0 3px rgba(98,58,5,.92),
    0 0 17px rgba(255,205,56,.72),
    0 4px 0 #080500;
}

.symbol[data-symbol="wild"].has-art::before {
  background:
    linear-gradient(132deg,rgba(255,255,255,.40),transparent 18%),
    linear-gradient(0deg,rgba(45,22,0,.72) 0%,rgba(45,22,0,.10) 32%,transparent 56%);
}

.symbol[data-symbol="wild"].has-art .symbol-art {
  filter:
    contrast(1.11)
    saturate(1.22)
    brightness(1.06)
    drop-shadow(0 0 7px rgba(255,213,71,.52));
}

.symbol[data-symbol="wild"].has-art .symbol-name {
  color:#291600;
  border-color:rgba(255,246,194,.62);
  background:
    linear-gradient(180deg,rgba(255,239,154,.94),rgba(215,151,35,.96));
  box-shadow:
    inset 0 1px rgba(255,255,255,.52),
    0 2px 3px rgba(0,0,0,.58);
  text-shadow:0 1px rgba(255,255,255,.38);
}

.symbol[data-symbol="wild"].winning {
  box-shadow:
    inset 0 0 0 3px #fff8c9,
    0 0 0 4px #ffca36,
    0 0 30px rgba(255,202,54,.95);
}

/* Keep labels visible and contained on ordinary phones. */
@media (max-width:760px) {
  :root {
    --cell-size:calc((100vw - 66px)/6);
    --cell-gap:3px;
  }

  .game-shell {
    width:100%;
    padding:8px;
  }

  .board-wrap {
    overflow:hidden;
    padding:7px;
  }

  .board {
    gap:3px;
    padding:5px;
  }

  .symbol.has-art .symbol-name {
    display:block;
    right:2px;
    bottom:2px;
    left:2px;
    padding:2px 2px 1px;
    font-size:clamp(4.5px,1.38vw,7px);
    letter-spacing:0;
  }
}

@media (max-width:360px) {
  :root {
    --cell-size:calc((100vw - 58px)/6);
    --cell-gap:2px;
  }

  .board {
    gap:2px;
    padding:4px;
  }

  .symbol.has-art .symbol-name {
    display:none;
  }
}

/* Larger wide-monitor presentation without stretching the artwork. */
@media (min-width:1280px) and (min-height:820px) {
  .topbar,
  .status-strip,
  .machine-frame,
  .control-deck {
    width:100%;
  }

  .board-wrap {
    min-height:calc(8 * var(--cell-size) + 7 * var(--cell-gap) + 48px);
  }
}


/* =========================================================
   VERSION 22 — DESKTOP CONTROL CONSOLE, FULLSCREEN AND COLOR CODING
   ========================================================= */

:root {
  --console-width:clamp(330px,25vw,410px);
  --dynamic-cell-size:var(--cell-size);
}

body {
  position:relative;
  isolation:isolate;
}

body::before {
  content:"";
  position:fixed;
  z-index:-2;
  inset:0;
  background:
    linear-gradient(90deg,rgba(7,10,11,.94),rgba(7,10,11,.72),rgba(7,10,11,.90)),
    url("assets/art/backdrops/mag-charge-background.webp") 8% 58% / min(64vw,900px) auto no-repeat;
  opacity:.50;
  pointer-events:none;
}

.game-shell {
  position:relative;
  z-index:1;
  width:min(99vw,1760px);
}

.brand-mark {
  overflow:hidden;
  padding:0;
  background:
    radial-gradient(circle at 50% 42%,rgba(255,189,64,.30),transparent 56%),
    linear-gradient(145deg,#53462d,#171b1c);
}

.brand-mark img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:13px;
  filter:
    contrast(1.10)
    saturate(1.14)
    drop-shadow(0 2px 2px rgba(0,0,0,.55));
}

.play-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--console-width);
  gap:15px;
  align-items:start;
  min-width:0;
}

.play-layout > * {
  min-width:0;
}

.machine-frame {
  width:100%;
}

.factory-header {
  justify-content:flex-start;
}

.mode-heading {
  max-width:760px;
}

.control-console {
  position:sticky;
  top:10px;
  display:grid;
  gap:11px;
  min-width:0;
  padding:12px;
  border:3px solid #070909;
  border-radius:19px;
  background:
    linear-gradient(112deg,rgba(255,255,255,.12),transparent 26%),
    linear-gradient(180deg,#485152,#252b2c 35%,#15191a);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.20),
    inset 0 12px 18px rgba(255,255,255,.045),
    inset 0 -16px 22px rgba(0,0,0,.25),
    0 9px 0 #060707,
    0 15px 30px rgba(0,0,0,.42);
}

.console-heading {
  display:grid;
  gap:2px;
  padding:4px 5px 2px;
  text-align:center;
  text-transform:uppercase;
}

.console-heading span {
  color:#aeb7b0;
  font-size:8px;
  font-weight:900;
  letter-spacing:.14em;
}

.console-heading strong {
  color:#f0cb6d;
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-size:21px;
  letter-spacing:.055em;
  text-shadow:0 2px 0 #000;
}

.control-console .pressure-gauge {
  justify-self:center;
  margin:0;
}

.control-console .status-strip {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:0;
}

.control-console .status-card {
  min-height:58px;
  padding:9px 10px;
}

.control-console .win-rail {
  min-height:116px;
  border:2px solid #080a0a;
  border-radius:13px;
}

.control-console .win-accumulator,
.control-console .win-panel {
  width:100%;
}

.control-console .control-deck {
  display:grid;
  grid-template-columns:1fr;
  gap:9px;
  margin:0;
}

.control-console .industrial-control,
.control-console .industrial-main-button,
.control-console .auto-control-wrap > .secondary-button {
  min-height:70px;
}

.control-console .auto-control-wrap {
  width:100%;
}

.control-console .auto-menu {
  right:0;
  bottom:calc(100% + 10px);
}

.board-wrap {
  position:relative;
  isolation:isolate;
}

.board-wrap::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  background:
    linear-gradient(rgba(7,11,12,.66),rgba(7,11,12,.72)),
    url("assets/art/backdrops/mag-charge-background.webp") center / min(76%,820px) auto no-repeat;
  opacity:.26;
  pointer-events:none;
}

.board-wrap > .board {
  position:relative;
  z-index:1;
}

/* Distinct symbol-family colors. */
.symbol.has-art {
  --family:#9fa8aa;
  border:3px solid var(--family);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.20),
    inset 0 -10px 14px rgba(0,0,0,.20),
    0 0 0 2px rgba(0,0,0,.82),
    0 0 12px color-mix(in srgb,var(--family) 54%,transparent),
    0 3px 0 #070909;
}

.symbol.has-art .symbol-name {
  border-color:color-mix(in srgb,var(--family) 76%,white 24%);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--family) 70%,#1a1d1e 30%),
      color-mix(in srgb,var(--family) 38%,#080b0c 62%)
    );
}

.symbol[data-symbol="mara"] { --family:#e15d9d; }
.symbol[data-symbol="brutus"] { --family:#c58a51; }
.symbol[data-symbol="quill"] { --family:#f09b32; }
.symbol[data-symbol="nix"] { --family:#72b84f; }
.symbol[data-symbol="charge"] { --family:#de5d60; }
.symbol[data-symbol="cylinder"] { --family:#9175ca; }
.symbol[data-symbol="drone"] { --family:#68c6ce; }
.symbol[data-symbol="crate"] { --family:#9aaa4e; }
.symbol[data-symbol="wild"] { --family:#ffd34a; }
.symbol[data-symbol="scatter"] { --family:#ff313c; }
.symbol[data-symbol="bomb"] { --family:#f0c53a; }

.symbol[data-symbol="scatter"].has-art {
  border-width:4px;
  border-color:#ff3642;
  background:
    radial-gradient(circle at 50% 42%,rgba(255,30,42,.30),transparent 58%),
    linear-gradient(145deg,#83121a,#1d0305);
  box-shadow:
    inset 0 0 0 2px rgba(255,210,210,.26),
    0 0 0 3px rgba(79,0,6,.92),
    0 0 20px rgba(255,32,43,.82),
    0 4px 0 #080001;
}

.symbol[data-symbol="scatter"].has-art .symbol-art {
  filter:
    contrast(1.14)
    saturate(1.25)
    drop-shadow(0 0 7px rgba(255,35,43,.70));
}

.symbol[data-symbol="scatter"].has-art .symbol-name {
  color:#fff;
  border-color:#ff9ca1;
  background:linear-gradient(#d72c36,#5a050a);
}

.industrial-fullscreen-button {
  position:relative;
  display:grid;
  min-width:58px;
  min-height:42px;
  place-items:center;
  grid-template-columns:1fr;
  gap:0;
  padding:4px 7px;
  border:2px solid #0d0f10;
  border-radius:10px;
  color:#f0f2ed;
  background:
    linear-gradient(110deg,rgba(255,255,255,.17),transparent 28%),
    linear-gradient(180deg,#5a6364,#2b3132 62%,#191e1f);
  box-shadow:
    inset 0 0 0 2px #687172,
    0 4px 0 #080a0a;
  cursor:pointer;
}

.industrial-fullscreen-button span:first-child {
  font-size:20px;
  line-height:1;
}

.industrial-fullscreen-button span:last-child {
  font-size:7px;
  font-weight:900;
  letter-spacing:.08em;
}

.industrial-fullscreen-button[aria-pressed="true"] {
  color:#211500;
  background:linear-gradient(#f3d77a,#b87828);
}

/* Detached console adopts bonus colors. */
body.bonus-active .control-console {
  border-color:#0c4642;
  box-shadow:
    inset 0 0 0 2px rgba(167,255,247,.42),
    inset 0 12px 18px rgba(255,255,255,.04),
    0 9px 0 #04110f,
    0 0 26px rgba(87,197,189,.32);
}

/* Fullscreen fits header, complete board and console without page scrolling. */
html:fullscreen,
html:-webkit-full-screen {
  background:#080b0c;
}

html:fullscreen body,
html:-webkit-full-screen body {
  overflow:hidden;
}

html:fullscreen .game-shell,
html:-webkit-full-screen .game-shell {
  display:flex;
  width:100vw;
  height:100vh;
  max-width:none;
  flex-direction:column;
  gap:8px;
  overflow:hidden;
  padding:8px 10px;
}

html:fullscreen .topbar,
html:-webkit-full-screen .topbar {
  flex:0 0 auto;
  min-height:64px;
  margin:0;
}

html:fullscreen .play-layout,
html:-webkit-full-screen .play-layout {
  flex:1 1 auto;
  min-height:0;
  grid-template-columns:minmax(0,1fr) minmax(315px,24vw);
  gap:10px;
  align-items:stretch;
}

html:fullscreen .machine-frame,
html:-webkit-full-screen .machine-frame {
  display:grid;
  min-height:0;
  height:100%;
  grid-template-rows:auto auto minmax(0,1fr) auto;
}

html:fullscreen .factory-header,
html:-webkit-full-screen .factory-header {
  min-height:96px;
  padding:8px 12px;
}

html:fullscreen .board-wrap,
html:-webkit-full-screen .board-wrap {
  display:grid;
  min-height:0;
  place-items:center;
  overflow:hidden;
  padding:7px;
}

html:fullscreen .board,
html:-webkit-full-screen .board {
  --cell-size:var(--dynamic-cell-size);
  align-self:center;
}

html:fullscreen .control-console,
html:-webkit-full-screen .control-console {
  position:static;
  min-height:0;
  height:100%;
  align-content:start;
  gap:7px;
  overflow:hidden;
  padding:8px;
}

html:fullscreen .control-console .pressure-gauge,
html:-webkit-full-screen .control-console .pressure-gauge {
  width:126px;
  flex-basis:126px;
}

html:fullscreen .control-console .status-card,
html:-webkit-full-screen .control-console .status-card {
  min-height:48px;
  padding:6px 8px;
}

html:fullscreen .control-console .win-rail,
html:-webkit-full-screen .control-console .win-rail {
  min-height:100px;
  padding:6px;
}

html:fullscreen .control-console .industrial-control,
html:fullscreen .control-console .industrial-main-button,
html:fullscreen .control-console .auto-control-wrap > .secondary-button,
html:-webkit-full-screen .control-console .industrial-control,
html:-webkit-full-screen .control-console .industrial-main-button,
html:-webkit-full-screen .control-console .auto-control-wrap > .secondary-button {
  min-height:58px;
}

html:fullscreen .legal-note,
html:-webkit-full-screen .legal-note {
  flex:0 0 auto;
  margin:0;
  padding:2px;
  font-size:8px;
}

@media (max-width:979px) {
  .play-layout {
    grid-template-columns:1fr;
  }

  .control-console {
    position:static;
    order:2;
  }

  .control-console .control-deck {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .control-console .bet-control,
  .control-console .auto-control-wrap {
    grid-column:auto;
  }
}

@media (max-width:620px) {
  .control-console {
    padding:8px;
  }

  .control-console .control-deck {
    grid-template-columns:1fr;
  }

  .control-console .status-strip {
    grid-template-columns:repeat(2,1fr);
  }

  .console-heading {
    display:none;
  }

  .industrial-fullscreen-button {
    min-width:48px;
    width:48px;
  }
}


/* =========================================================
   VERSION 23 — RIGHT-SIDE SPEED, SOUND MIXER AND BALANCE FOOTER
   ========================================================= */

.top-actions .industrial-speed-button,
.top-actions #soundButton {
  display:none;
}

.console-utility-row {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8px;
}

.console-utility-row .industrial-speed-button,
.console-utility-row #soundButton {
  width:100%;
  min-width:0;
  min-height:48px;
}

.console-utility-row #soundButton {
  display:grid;
  place-items:center;
  border-radius:10px;
  background:
    linear-gradient(110deg,rgba(255,255,255,.17),transparent 28%),
    linear-gradient(180deg,#5a6364,#2b3132 62%,#191e1f);
  box-shadow:
    inset 0 0 0 2px #697273,
    0 4px 0 #080a0a;
}

.console-utility-row #soundButton[aria-expanded="true"] {
  color:#211500;
  background:
    linear-gradient(110deg,rgba(255,255,255,.28),transparent 25%),
    linear-gradient(180deg,#f1d476,#b87929);
}

.sound-mixer {
  position:absolute;
  z-index:80;
  top:calc(100% + 10px);
  right:0;
  left:0;
  display:grid;
  gap:11px;
  padding:13px;
  border:3px solid #080a0a;
  border-radius:13px;
  color:#eef1eb;
  background:
    radial-gradient(circle at 10px 10px,#fff 0 1px,#747d7e 2px,#171b1c 4px,transparent 5px),
    radial-gradient(circle at calc(100% - 10px) 10px,#fff 0 1px,#747d7e 2px,#171b1c 4px,transparent 5px),
    linear-gradient(110deg,rgba(255,255,255,.12),transparent 25%),
    linear-gradient(180deg,#454d4e,#1d2223);
  box-shadow:
    inset 0 0 0 2px #717a7b,
    inset 0 10px 15px rgba(255,255,255,.045),
    0 15px 30px rgba(0,0,0,.70);
  opacity:0;
  transform:translateY(-8px) scale(.97);
  transform-origin:top center;
  transition:
    opacity .17s ease,
    transform .19s cubic-bezier(.18,.8,.25,1.08);
  pointer-events:none;
}

.sound-mixer[hidden] {
  display:none;
}

.sound-mixer.is-open {
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

.sound-mixer-heading {
  display:grid;
  gap:2px;
  text-align:center;
  text-transform:uppercase;
}

.sound-mixer-heading strong {
  color:#f0cd70;
  font-size:12px;
  letter-spacing:.09em;
}

.sound-mixer-heading span {
  color:#aeb7b0;
  font-size:8px;
  letter-spacing:.04em;
}

.sound-channel-control {
  display:grid;
  gap:6px;
}

.sound-channel-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#e9ece5;
  font-size:9px;
  letter-spacing:.08em;
}

.sound-channel-heading output {
  min-width:42px;
  color:#f1d071;
  font-weight:900;
  text-align:right;
}

.sound-channel-control input[type="range"] {
  width:100%;
  height:8px;
  margin:0;
  accent-color:#d7a743;
  cursor:pointer;
}

.mute-all-button {
  min-height:38px;
  border:2px solid #090b0b;
  border-radius:8px;
  color:#f3f4ee;
  background:
    linear-gradient(110deg,rgba(255,255,255,.13),transparent 28%),
    linear-gradient(180deg,#596263,#292f30);
  box-shadow:
    inset 0 0 0 1px #778081,
    0 3px 0 #080a0a;
  font-size:10px;
  font-weight:900;
  letter-spacing:.07em;
  cursor:pointer;
}

.mute-all-button[aria-pressed="true"] {
  color:#250e08;
  background:linear-gradient(#ef8b68,#ad442c);
}

.control-console .status-strip.balance-only {
  display:block;
  order:99;
  margin:2px 0 0;
}

.control-console .status-strip.balance-only .status-card {
  display:grid;
  min-height:62px;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:12px;
  padding:10px 13px;
  border-color:#0b0d0e;
  background:
    linear-gradient(110deg,rgba(255,255,255,.12),transparent 26%),
    linear-gradient(180deg,#41494a,#202526);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.13),
    inset 0 8px 12px rgba(255,255,255,.035),
    0 4px 0 #080a0a;
}

.control-console .status-strip.balance-only .status-label {
  color:#c6cec7;
  font-size:9px;
  letter-spacing:.09em;
}

.control-console .status-strip.balance-only strong {
  margin:0;
  color:#f0cd70;
  font-size:clamp(21px,2.1vw,28px);
  text-align:right;
  text-shadow:
    0 1px 0 rgba(255,255,255,.18),
    0 3px 0 #000;
}

html:fullscreen .sound-mixer,
html:-webkit-full-screen .sound-mixer {
  top:auto;
  bottom:calc(100% + 8px);
  transform-origin:bottom center;
}

html:fullscreen .control-console .status-strip.balance-only .status-card,
html:-webkit-full-screen .control-console .status-strip.balance-only .status-card {
  min-height:48px;
  padding:7px 10px;
}

@media (max-width:979px) {
  .console-utility-row {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .sound-mixer {
    right:0;
    left:auto;
    width:min(310px,calc(100vw - 32px));
  }
}

@media (max-width:620px) {
  .sound-mixer {
    right:50%;
    width:min(310px,calc(100vw - 24px));
    transform:translate(50%,-8px) scale(.97);
  }

  .sound-mixer.is-open {
    transform:translate(50%,0) scale(1);
  }

  .control-console .status-strip.balance-only .status-card {
    min-height:54px;
  }
}


/* =========================================================
   VERSION 24 — BOARD-ONLY MACHINE FRAME
   ========================================================= */

/*
 * The former factory header, yellow phase banner and machine footer no
 * longer exist inside the machine frame. The frame is now exclusively
 * the playable board tray.
 */
.machine-frame {
  display:block;
  overflow:hidden;
  min-height:0;
}

.machine-frame::before {
  display:none;
}

.machine-frame > .board-wrap {
  min-height:0;
  height:auto;
  border-radius:18px;
}

.board-wrap {
  padding:clamp(8px,1.25vw,18px);
}

.board {
  margin:auto;
}

/* Current state is condensed into the right-side console. */
.console-information-stack {
  display:grid;
  gap:8px;
  min-width:0;
}

.console-mode-panel,
.console-phase-panel {
  position:relative;
  min-width:0;
  overflow:hidden;
  border:2px solid #090b0b;
  border-radius:11px;
  background:
    linear-gradient(110deg,rgba(255,255,255,.10),transparent 27%),
    linear-gradient(180deg,#3d4546,#1d2223);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.11),
    inset 0 7px 11px rgba(255,255,255,.025),
    0 3px 0 #070909;
}

.console-mode-panel {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  padding:9px 11px;
}

.console-mode-panel .mode-heading {
  display:grid;
  min-width:0;
  gap:1px;
}

.console-mode-panel .mode-heading .eyebrow {
  color:#d8b95f;
  font-size:7px;
  letter-spacing:.12em;
}

.console-mode-panel .mode-heading > strong {
  overflow:hidden;
  color:#f2eee0;
  font-size:19px;
  line-height:1;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.console-mode-panel .mode-heading > span:last-child {
  overflow:hidden;
  max-width:none;
  color:#abb4ae;
  font-size:8px;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.console-mode-panel .alarm-beacon {
  position:static;
  flex:0 0 auto;
  margin:0;
}

.console-phase-panel {
  display:grid;
  min-height:0;
  gap:2px;
  padding:8px 10px;
  border-color:#251603;
  color:#211300;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(65,34,2,.065) 0,
      rgba(65,34,2,.065) 5px,
      transparent 5px,
      transparent 10px
    ),
    linear-gradient(180deg,#efcf75,#bb7d2c);
}

.console-phase-panel strong {
  overflow:hidden;
  font-size:10px;
  letter-spacing:.035em;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.console-phase-panel span {
  overflow:hidden;
  color:#3c260b;
  font-size:8px;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Feature progress is now a normal-width console panel. */
.control-console .bonus-spin-tracker {
  width:100%;
  max-width:none;
  min-width:0;
  box-sizing:border-box;
}

body.bonus-active .console-mode-panel {
  border-color:#0b4541;
  background:
    linear-gradient(110deg,rgba(255,255,255,.11),transparent 27%),
    linear-gradient(180deg,#24635e,#123936);
  box-shadow:
    inset 0 0 0 1px rgba(176,255,248,.22),
    0 0 12px rgba(87,197,189,.25),
    0 3px 0 #04110f;
}

body.bonus-active .console-phase-panel {
  border-color:#0b4541;
  color:#eafffc;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,.035) 0,
      rgba(255,255,255,.035) 5px,
      transparent 5px,
      transparent 10px
    ),
    linear-gradient(180deg,#26716b,#12413d);
}

body.bonus-active .console-phase-panel span {
  color:#c4f1ec;
}

/* The old visible footer status is retained only as an accessible live region. */
.screen-reader-status {
  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;
}

/* More room for the board in ordinary desktop layout. */
@media (min-width:980px) {
  .play-layout {
    align-items:stretch;
  }

  .machine-frame {
    display:grid;
    height:100%;
    min-height:calc(
      8 * var(--cell-size) +
      7 * var(--cell-gap) +
      24px
    );
  }

  .machine-frame > .board-wrap {
    display:grid;
    height:100%;
    place-items:center;
  }
}

/* Fullscreen is now a single board row plus the side console. */
html:fullscreen .machine-frame,
html:-webkit-full-screen .machine-frame {
  display:grid;
  height:100%;
  min-height:0;
  grid-template-rows:minmax(0,1fr);
}

html:fullscreen .board-wrap,
html:-webkit-full-screen .board-wrap {
  height:100%;
  min-height:0;
  padding:5px;
}

html:fullscreen .control-console,
html:-webkit-full-screen .control-console {
  align-content:start;
}

html:fullscreen .console-heading,
html:-webkit-full-screen .console-heading {
  display:none;
}

html:fullscreen .console-information-stack,
html:-webkit-full-screen .console-information-stack {
  gap:5px;
}

html:fullscreen .console-mode-panel,
html:-webkit-full-screen .console-mode-panel {
  padding:6px 8px;
}

html:fullscreen .console-mode-panel .mode-heading > span:last-child,
html:-webkit-full-screen .console-mode-panel .mode-heading > span:last-child {
  display:none;
}

html:fullscreen .console-phase-panel,
html:-webkit-full-screen .console-phase-panel {
  padding:6px 8px;
}

html:fullscreen .console-phase-panel span,
html:-webkit-full-screen .console-phase-panel span {
  display:none;
}

html:fullscreen .control-console .bonus-spin-tracker,
html:-webkit-full-screen .control-console .bonus-spin-tracker {
  padding:6px 9px;
}

/* On narrow screens, all non-board information remains below the board. */
@media (max-width:979px) {
  .machine-frame {
    min-height:0;
  }

  .console-mode-panel .mode-heading > span:last-child,
  .console-phase-panel span {
    white-space:normal;
  }
}

@media (max-width:520px) {
  .console-mode-panel {
    grid-template-columns:minmax(0,1fr) auto;
    padding:7px 8px;
  }

  .console-mode-panel .mode-heading > strong {
    font-size:16px;
  }

  .console-phase-panel {
    padding:7px 8px;
  }
}


/* =========================================================
   VERSION 25 — VIEWPORT-FILLING BOARD AND BOMB SPOTLIGHT
   ========================================================= */

/*
 * On any wide desktop—not just browser fullscreen—the board uses the
 * dynamically calculated cell size and the play row fills the remaining
 * viewport height.
 */
@media (min-width:980px) {
  .game-shell {
    display:flex;
    min-height:100vh;
    flex-direction:column;
  }

  .topbar {
    flex:0 0 auto;
  }

  .play-layout {
    flex:0 0 var(--desktop-play-height,auto);
    height:var(--desktop-play-height,auto);
    min-height:430px;
    align-items:stretch;
  }

  .machine-frame {
    height:100%;
    min-height:0;
  }

  .machine-frame > .board-wrap {
    height:100%;
    min-height:0;
  }

  .board {
    --cell-size:var(--dynamic-cell-size,var(--cell-size));
  }

  .control-console {
    height:100%;
    max-height:100%;
    overflow-x:hidden;
    overflow-y:auto;
    scrollbar-width:thin;
  }

  .legal-note {
    flex:0 0 auto;
  }
}

/* Half-second visual lock when a newly dropped bomb lands. */
.machine-frame.bomb-focus-active .symbol:not(.bomb-drop-focus) {
  filter:brightness(.50) saturate(.72);
  transition:filter .18s ease;
}

.symbol.bomb-drop-focus {
  z-index:20;
  animation:bomb-drop-focus .50s cubic-bezier(.16,.78,.22,1) both;
  box-shadow:
    inset 0 0 0 3px #fff6c5,
    0 0 0 4px #ffca3a,
    0 0 30px rgba(255,197,41,.98),
    0 0 55px rgba(255,75,29,.72);
}

@keyframes bomb-drop-focus {
  0% {
    transform:scale(1);
    filter:brightness(1);
  }
  34% {
    transform:scale(1.17);
    filter:
      brightness(1.75)
      saturate(1.30);
  }
  68% {
    transform:scale(1.08);
    filter:
      brightness(1.32)
      saturate(1.18);
  }
  100% {
    transform:scale(1);
    filter:brightness(1);
  }
}

/* Deliberate arming and explosion animations for the rare bomb feature. */
.symbol.bomb-armed {
  animation:bomb-arm-pulse .68s steps(2,end) infinite;
}

.symbol.bomb-detonating {
  animation:bomb-detonate-slow 1.24s cubic-bezier(.16,.72,.2,1) forwards;
}

.symbol.bomb-blasted {
  animation:bomb-blast-cell-slow 1.12s cubic-bezier(.15,.66,.2,1) forwards;
}

@keyframes bomb-detonate-slow {
  0% {
    transform:scale(1);
    opacity:1;
    filter:brightness(1);
  }
  28% {
    transform:scale(1.07);
    opacity:1;
    filter:
      brightness(1.45)
      drop-shadow(0 0 10px #ff932f);
  }
  52% {
    transform:scale(1.22);
    opacity:1;
    filter:
      brightness(2.15)
      drop-shadow(0 0 20px #ffd96c);
  }
  74% {
    transform:scale(1.46);
    opacity:1;
    filter:
      brightness(3.5)
      drop-shadow(0 0 32px #fff);
  }
  100% {
    transform:scale(.10);
    opacity:0;
    filter:brightness(5);
  }
}

@keyframes bomb-blast-cell-slow {
  0% {
    opacity:1;
    transform:scale(1);
    filter:brightness(1);
  }
  24% {
    opacity:1;
    transform:scale(1.04);
    filter:
      brightness(1.55)
      sepia(.45);
  }
  54% {
    opacity:1;
    transform:scale(1.13);
    filter:
      brightness(2.65)
      sepia(1)
      saturate(1.45);
  }
  78% {
    opacity:.72;
    transform:scale(.88);
    filter:
      brightness(1.25)
      sepia(1);
  }
  100% {
    opacity:0;
    transform:scale(.28);
    filter:brightness(.22);
  }
}


/* =========================================================
   VERSION 26 — LIGHTNING WINS, BONUS SIDE-SPILL AND MASSIVE EARTH
   ========================================================= */

.board-win-flash {
  position:absolute;
  z-index:65;
  inset:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:inherit;
  opacity:0;
  pointer-events:none;
  isolation:isolate;
}

.board-win-flash::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(255,255,255,.34),
      transparent 38%
    );
  opacity:0;
}

.board-win-flash-copy {
  position:relative;
  z-index:4;
  display:grid;
  gap:2px;
  place-items:center;
  text-align:center;
  transform:scale(.68);
  opacity:0;
}

.board-win-flash-copy strong {
  color:#fff;
  font-family:
    Impact,
    Haettenschweiler,
    "Arial Narrow Bold",
    sans-serif;
  font-size:clamp(48px,9vw,128px);
  font-weight:900;
  letter-spacing:.015em;
  line-height:.88;
  text-shadow:
    0 2px 0 rgba(255,255,255,.95),
    0 5px 0 rgba(19,26,29,.88),
    0 0 8px #fff,
    0 0 18px #fff,
    0 0 35px rgba(220,242,255,.98);
  filter:
    drop-shadow(0 0 9px #fff)
    drop-shadow(0 0 22px rgba(215,242,255,.92));
}

.board-win-flash-copy span {
  color:#fff;
  font-size:clamp(9px,1.6vw,17px);
  font-weight:900;
  letter-spacing:.16em;
  text-shadow:
    0 2px 0 #10171a,
    0 0 9px #fff;
}

.board-win-lightning {
  position:absolute;
  z-index:3;
  width:11px;
  height:62%;
  background:#fff;
  box-shadow:
    0 0 8px #fff,
    0 0 17px #fff,
    0 0 29px rgba(198,232,255,.96);
  opacity:0;
  clip-path:polygon(
    45% 0,
    100% 0,
    63% 39%,
    100% 39%,
    22% 100%,
    43% 55%,
    0 55%
  );
}

.board-win-lightning.bolt-one {
  left:22%;
  top:-8%;
  transform:rotate(-17deg);
}

.board-win-lightning.bolt-two {
  right:21%;
  top:-5%;
  transform:rotate(19deg);
}

.board-win-lightning.bolt-three {
  left:35%;
  bottom:-24%;
  height:48%;
  transform:rotate(15deg);
}

.board-win-lightning.bolt-four {
  right:34%;
  bottom:-25%;
  height:47%;
  transform:rotate(-14deg);
}

.board-win-flash.is-active {
  animation:
    board-win-overlay-flash .69s ease-out both;
}

.board-win-flash.is-active::before {
  animation:
    board-win-radial-flash .69s ease-out both;
}

.board-win-flash.is-active .board-win-flash-copy {
  animation:
    board-win-copy-flash .69s
    cubic-bezier(.12,.75,.18,1.08)
    both;
}

.board-win-flash.is-active .board-win-lightning {
  animation:
    board-win-bolt-flash .69s
    steps(2,end)
    both;
}

.board-win-flash.is-final .board-win-flash-copy strong {
  font-size:clamp(54px,10vw,145px);
}

.board-win-flash.is-massive .board-win-flash-copy strong {
  font-size:clamp(62px,11.8vw,174px);
  text-shadow:
    0 2px 0 #fff,
    0 6px 0 #101719,
    0 0 12px #fff,
    0 0 30px #fff,
    0 0 58px rgba(210,240,255,1);
}

.board-win-flash.is-massive,
.board-win-flash.is-massive::before,
.board-win-flash.is-massive .board-win-flash-copy,
.board-win-flash.is-massive .board-win-lightning {
  animation-duration:1.10s;
}

@keyframes board-win-overlay-flash {
  0% { opacity:0; }
  7% { opacity:1; }
  68% { opacity:1; }
  100% { opacity:0; }
}

@keyframes board-win-radial-flash {
  0% { opacity:0; transform:scale(.68); }
  13% { opacity:1; transform:scale(1.08); }
  58% { opacity:.38; }
  100% { opacity:0; transform:scale(1.18); }
}

@keyframes board-win-copy-flash {
  0% {
    opacity:0;
    transform:scale(.55);
    filter:brightness(3);
  }
  13% {
    opacity:1;
    transform:scale(1.14);
    filter:brightness(1.7);
  }
  30% {
    transform:scale(.98);
    filter:brightness(1);
  }
  70% {
    opacity:1;
    transform:scale(1);
  }
  100% {
    opacity:0;
    transform:scale(1.04);
  }
}

@keyframes board-win-bolt-flash {
  0%,8% { opacity:0; }
  9%,20% { opacity:1; }
  21%,31% { opacity:.18; }
  32%,45% { opacity:1; }
  46%,100% { opacity:0; }
}

/* Page-wide split-second flash for a finalized result of at least 25× stake. */
.massive-earth-screen-flash {
  position:fixed;
  z-index:9999;
  inset:0;
  background:#fff;
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
}

.massive-earth-screen-flash.is-active {
  animation:
    massive-earth-white-flash .22s
    steps(2,end)
    both;
}

@keyframes massive-earth-white-flash {
  0% { opacity:0; }
  12% { opacity:1; }
  43% { opacity:.96; }
  44% { opacity:.20; }
  68% { opacity:.78; }
  100% { opacity:0; }
}

/* One-second board shake while the boosted Massive Earth effect plays. */
.machine-frame.massive-earth-active {
  animation:
    massive-earth-board-shake 1s
    cubic-bezier(.18,.72,.22,1)
    both;
  transform-origin:center;
  will-change:transform,filter;
}

@keyframes massive-earth-board-shake {
  0% {
    transform:translate3d(0,0,0) rotate(0);
    filter:brightness(1);
  }
  5% {
    transform:translate3d(-7px,3px,0) rotate(-.25deg);
    filter:brightness(1.38);
  }
  11% {
    transform:translate3d(8px,-4px,0) rotate(.28deg);
  }
  18% {
    transform:translate3d(-9px,-2px,0) rotate(-.32deg);
  }
  26% {
    transform:translate3d(8px,4px,0) rotate(.26deg);
  }
  35% {
    transform:translate3d(-7px,2px,0) rotate(-.22deg);
  }
  46% {
    transform:translate3d(6px,-3px,0) rotate(.18deg);
    filter:brightness(1.12);
  }
  58% {
    transform:translate3d(-5px,2px,0) rotate(-.14deg);
  }
  70% {
    transform:translate3d(4px,-1px,0) rotate(.10deg);
  }
  82% {
    transform:translate3d(-2px,1px,0) rotate(-.06deg);
  }
  100% {
    transform:translate3d(0,0,0) rotate(0);
    filter:brightness(1);
  }
}

@media (prefers-reduced-motion:reduce) {
  .board-win-flash.is-active,
  .board-win-flash.is-active::before,
  .board-win-flash.is-active .board-win-flash-copy,
  .board-win-flash.is-active .board-win-lightning,
  .massive-earth-screen-flash.is-active,
  .machine-frame.massive-earth-active {
    animation-duration:.18s;
  }
}


/* =========================================================
   VERSION 27 — RANDOM MULTIPLIERS, READABLE LIGHTNING,
   BONUS DUMP AND BONUS WILD LOCK
   ========================================================= */

/* Base-game Random Rivet multiplier positions use a distinct violet edge. */
.board-cell.random-seeded-multiplier:not([data-multiplier-level="1"])
.multiplier-bed {
  border-color:#f4dcff;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.14),
      transparent 23%
    ),
    radial-gradient(
      circle at 50% 44%,
      rgba(192,87,255,.22),
      transparent 58%
    );
  box-shadow:
    0 0 0 2px rgba(21,4,27,.96),
    0 0 0 4px rgba(217,151,255,.55),
    0 0 17px rgba(208,112,255,.96),
    0 0 31px rgba(136,44,210,.54),
    inset 0 0 0 1px rgba(31,7,38,.90),
    inset 0 0 16px rgba(225,172,255,.23);
}

.board-cell.random-seeded-multiplier
.multiplier-badge {
  color:#16051d;
  border-color:#fff;
  background:
    linear-gradient(
      180deg,
      #f3d7ff,
      #be73e4 58%,
      #673085
    );
  box-shadow:
    inset 0 1px rgba(255,255,255,.70),
    0 0 11px rgba(230,172,255,.98),
    0 3px 5px rgba(0,0,0,.92);
}

.board-cell.random-seeded-multiplier
.cell-multiplier {
  color:rgba(245,221,255,.31);
  text-shadow:
    0 3px 0 rgba(13,2,17,.70),
    0 0 5px rgba(220,154,255,.32);
  filter:
    drop-shadow(
      0 3px 1px
      rgba(8,0,12,.72)
    );
}

/* One-time assignment reveal; it never becomes a continuous animation. */
.board-cell.random-multiplier-reveal {
  z-index:18;
  animation:
    random-multiplier-cell-reveal
    .52s
    cubic-bezier(.16,.82,.22,1.12)
    both;
}

.board-cell.random-multiplier-reveal
.multiplier-bed {
  animation:
    random-multiplier-outline-reveal
    .52s
    steps(2,end)
    both;
}

@keyframes random-multiplier-cell-reveal {
  0% {
    transform:scale(.82);
    filter:brightness(2.1);
  }
  43% {
    transform:scale(1.14);
    filter:brightness(1.55);
  }
  100% {
    transform:scale(1);
    filter:none;
  }
}

@keyframes random-multiplier-outline-reveal {
  0%,49% {
    opacity:.35;
  }
  50%,100% {
    opacity:1;
  }
}

/*
 * Lightning bolt locations and dimensions are set inline for every flash.
 * These declarations neutralize the former fixed bolt geometry.
 */
.board-win-lightning {
  right:auto !important;
  bottom:auto !important;
  transform-origin:center top;
}

/* Reduce white bloom and surround the number with a strong black edge. */
.board-win-flash-copy strong,
.board-win-flash.is-massive
.board-win-flash-copy strong {
  -webkit-text-stroke:
    2px
    rgba(0,0,0,.94);
  paint-order:stroke fill;
  text-shadow:
    -3px -3px 0 rgba(0,0,0,.96),
    3px -3px 0 rgba(0,0,0,.96),
    -3px 3px 0 rgba(0,0,0,.96),
    3px 3px 0 rgba(0,0,0,.96),
    0 5px 0 rgba(0,0,0,.94),
    0 0 4px rgba(255,255,255,.78),
    0 0 9px rgba(224,243,255,.48);
  filter:
    drop-shadow(
      0 5px 3px
      rgba(0,0,0,.94)
    );
}

/* The bonus dump enters from above-left and settles diagonally. */
body.bonus-active .board {
  box-shadow:
    inset 0 0 0 2px #4eaca4,
    inset 0 11px 18px rgba(255,255,255,.05),
    inset 0 -12px 18px rgba(0,0,0,.35),
    0 8px 18px rgba(0,0,0,.38),
    -10px 7px 22px rgba(69,204,192,.18);
}

/* Wild Card remains visible but clearly unusable throughout bonus play. */
#wildCardButton.is-locked {
  color:#7f8882;
  border-color:#15191a;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(0,0,0,.11) 0,
      rgba(0,0,0,.11) 6px,
      transparent 6px,
      transparent 12px
    ),
    linear-gradient(
      180deg,
      #343a3b,
      #191d1e
    );
  box-shadow:
    inset 0 0 0 2px #4d5556,
    0 4px 0 #070909;
  filter:saturate(.25);
  opacity:.68;
  cursor:not-allowed;
}

#bonusWildDialog[data-disabled="true"] {
  display:none !important;
}


/* =========================================================
   VERSION 28 — MATCH LIFT/DISSOLVE AND TEMPORARY ALARM BELL
   ========================================================= */

/* All matched symbols lift as a synchronized group before dissolving. */
.symbol.match-lifting {
  z-index:24;
  animation:
    matched-piece-lift
    .26s
    cubic-bezier(.12,.76,.18,1)
    forwards;
  transform-origin:center bottom;
  will-change:transform,filter;
}

.symbol.match-lifting::after {
  opacity:1;
  border-color:rgba(255,248,193,.92);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.42),
    0 0 12px rgba(255,227,115,.65);
}

@keyframes matched-piece-lift {
  0% {
    transform:
      translate3d(0,0,0)
      scale(1.04);
    filter:
      brightness(1.38)
      saturate(1.24);
  }
  58% {
    transform:
      translate3d(0,-17%,0)
      scale(1.08);
    filter:
      brightness(1.56)
      saturate(1.28);
  }
  100% {
    transform:
      translate3d(0,-24%,0)
      scale(1.08);
    filter:
      brightness(1.50)
      saturate(1.18)
      drop-shadow(
        0 10px 7px
        rgba(0,0,0,.72)
      );
  }
}

/* Dissolve begins from the elevated position on both game modes. */
.symbol.removing {
  z-index:24;
  animation:
    elevated-acid-dissolve
    .52s
    cubic-bezier(.55,.02,.86,.32)
    forwards;
  transform-origin:center;
  will-change:
    transform,
    filter,
    opacity;
}

.symbol.removing::before {
  border-color:rgba(217,255,125,.86);
  background:
    radial-gradient(
      circle at 18% 25%,
      rgba(233,255,151,.98) 0 5%,
      transparent 6%
    ),
    radial-gradient(
      circle at 72% 32%,
      rgba(178,238,83,.95) 0 8%,
      transparent 9%
    ),
    radial-gradient(
      circle at 40% 76%,
      rgba(240,255,175,.94) 0 6%,
      transparent 7%
    ),
    radial-gradient(
      circle at 82% 78%,
      rgba(140,213,55,.94) 0 5%,
      transparent 6%
    );
  opacity:1;
}

.symbol.removing .symbol-art {
  animation:
    symbol-art-fragment-dissolve
    .52s
    cubic-bezier(.55,.02,.86,.32)
    forwards;
}

@keyframes elevated-acid-dissolve {
  0% {
    opacity:1;
    transform:
      translate3d(0,-24%,0)
      scale(1.08);
    filter:
      brightness(1.50)
      saturate(1.18)
      drop-shadow(
        0 10px 7px
        rgba(0,0,0,.72)
      );
  }
  32% {
    opacity:.96;
    transform:
      translate3d(0,-29%,0)
      scale(1.02)
      rotate(-1deg);
    filter:
      blur(.45px)
      brightness(1.92)
      saturate(.82)
      hue-rotate(18deg);
  }
  68% {
    opacity:.62;
    transform:
      translate3d(0,-35%,0)
      scale(.79)
      rotate(3deg);
    filter:
      blur(2.8px)
      brightness(2.38)
      saturate(.35)
      hue-rotate(48deg);
  }
  100% {
    opacity:0;
    transform:
      translate3d(0,-42%,0)
      scale(.22)
      rotate(8deg);
    filter:
      blur(8px)
      brightness(2.8)
      saturate(.08)
      hue-rotate(70deg);
  }
}

@keyframes symbol-art-fragment-dissolve {
  0% {
    clip-path:inset(0 0 0 0);
  }
  38% {
    clip-path:
      polygon(
        0 0,
        100% 0,
        100% 69%,
        86% 72%,
        80% 65%,
        68% 76%,
        58% 68%,
        48% 82%,
        36% 70%,
        25% 78%,
        14% 69%,
        0 76%
      );
  }
  72% {
    clip-path:
      polygon(
        0 0,
        100% 0,
        100% 34%,
        88% 43%,
        76% 29%,
        64% 46%,
        51% 31%,
        39% 48%,
        25% 32%,
        12% 44%,
        0 35%
      );
  }
  100% {
    clip-path:inset(0 0 100% 0);
  }
}

@media (prefers-reduced-motion:reduce) {
  .symbol.match-lifting {
    animation-duration:.12s;
  }

  .symbol.removing,
  .symbol.removing .symbol-art {
    animation-duration:.22s;
  }
}