:root {
  color-scheme: dark;
}

body {
  background: #030711;
}

.sm-game.is-modernized {
  --wood-dark: #050b16;
  --wood-mid: #14243c;
  --brass: #b8c5d4;
  --brass-light: #f4f8ff;
  max-width: none;
  padding: 8px clamp(8px, 1.4vw, 20px) 12px;
  background-image:
    linear-gradient(180deg, #0207149c, #040a18d6),
    var(--bg-image);
  background-position: center;
  background-size: cover;
}

.is-modernized .sm-shell {
  gap: 6px;
  width: 100%;
  max-width: min(1440px, calc((100vh - 385px) * 5 / 3));
  margin: 0 auto;
}

.is-modernized .sm-logo {
  position: relative;
  align-self: center;
  min-width: min(440px, 72vw);
  padding: 8px 50px 9px;
  border: 2px solid var(--brass);
  border-radius: 12px 12px 32px 32px;
  background:
    linear-gradient(90deg, #050b17ed, #183459ed 48%, #050b17ed),
    repeating-linear-gradient(135deg, #111820 0 3px, #05090e 3px 7px);
  box-shadow: inset 0 0 0 3px #060b12, 0 5px 16px #000b, 0 0 20px #ef303d62;
  color: var(--brass-light);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.15rem, 2.5vw, 2rem);
  letter-spacing: .12em;
  line-height: 1;
  text-shadow: 0 2px 0 #230726, 0 0 12px #f0b94d70;
  z-index: 8;
}

.is-modernized .sm-logo::before,
.is-modernized .sm-logo::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(28px, 7vw, 96px);
  height: 10px;
  border-block: 2px solid #936623;
  background: repeating-linear-gradient(90deg, #3d2410 0 5px, #805324 5px 8px);
  transform: translateY(-50%);
}

.is-modernized .sm-logo::before { right: 100%; }
.is-modernized .sm-logo::after { left: 100%; }

.sm-logo-skull {
  display: inline-block;
  margin-right: .55em;
  color: #f1d99d;
  font-family: system-ui, sans-serif;
  font-size: .8em;
  filter: drop-shadow(0 0 5px #e9c35d);
}

.is-modernized .sm-stage {
  isolation: isolate;
  flex: 0 0 auto;
  aspect-ratio: 5 / 3;
  min-height: 250px;
  border: 11px solid transparent;
  border-radius: 18px;
  background:
    linear-gradient(#050b16, #050b16) padding-box,
    linear-gradient(135deg, #fff4bd, #7b5520 18%, #e6c66f 48%, #741f2d 82%, #fff4bd) border-box;
  box-shadow:
    inset 0 0 0 3px #0b1c23,
    inset 0 0 28px #000,
    0 0 0 5px #2c1708,
    0 10px 26px #000b,
    0 0 28px #d6ad4f55;
}

.is-modernized .sm-stage::before,
.is-modernized .sm-stage::after {
  content: "◆";
  position: absolute;
  top: 50%;
  z-index: 7;
  color: var(--brass-light);
  font-size: 18px;
  text-shadow: 0 0 9px #e0bc64;
  transform: translateY(-50%);
  pointer-events: none;
}

.is-modernized .sm-stage::before { left: 1px; }
.is-modernized .sm-stage::after { right: 1px; }

.is-modernized .sm-frame {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, #0e1b2c, #030711 52%, #101d30);
}

.is-modernized .reel-window {
  border-right: 2px solid #ad7b2d66;
  background: #240712;
  box-shadow: inset 0 0 30px #000b;
}

.is-modernized .reel-cell {
  padding: 0;
  overflow: hidden;
}

.is-modernized .reel-cell img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  filter: drop-shadow(0 7px 8px #000b);
  transform: scale(1);
}

/* Low-value ranks need slightly more breathing room than object symbols. */
.is-modernized .reel-cell[data-symbol="A"] img,
.is-modernized .reel-cell[data-symbol="K"] img,
.is-modernized .reel-cell[data-symbol="Q"] img,
.is-modernized .reel-cell[data-symbol="J"] img {
  transform: scale(.92);
  filter: brightness(.72) saturate(.72) drop-shadow(0 7px 8px #000b);
}

.is-modernized .reel-cell[data-symbol="WILD"] img,
.is-modernized .reel-cell[data-symbol="BONUS"] img {
  filter: drop-shadow(0 0 9px #5de4ef8c) drop-shadow(0 7px 8px #000b);
}

.is-modernized .sm-lines {
  z-index: 6;
}

.sm-payline-guide {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sm-payline-guide polyline {
  stroke-width: .46;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: .58;
  filter: drop-shadow(0 0 1px currentColor);
}

.sm-line-label circle {
  fill: #061018;
  stroke: var(--line-color);
  stroke-width: .55;
}

.sm-line-label text {
  fill: #fff;
  font: 700 2.6px/1 system-ui, sans-serif;
  text-anchor: middle;
}

.is-modernized .sm-status {
  order: 2;
  margin: 1px 0 0;
  color: #f3cf73;
  font-family: Georgia, serif;
  letter-spacing: .08em;
  text-shadow: 0 1px 3px #000;
}

.sm-feature-status {
  order: 3;
  align-self: center;
  min-width: min(430px, 90vw);
  margin-top: -4px;
  padding: 4px 18px;
  border: 1px solid #b7812e;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, #263c5ae8, #07101fed);
  color: #eed59a;
  font: 700 clamp(.62rem, 1.4vw, .82rem)/1.2 Georgia, serif;
  letter-spacing: .08em;
  text-align: center;
  box-shadow: 0 4px 10px #0008;
}

.is-modernized .sm-hud {
  order: 4;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 5px;
  border: 2px solid #6d4318;
  background:
    linear-gradient(90deg, #07101fed, #1a3659ed 50%, #07101fed),
    repeating-linear-gradient(135deg, #17202b 0 3px, #070b11 3px 7px);
  box-shadow: inset 0 0 0 2px #120904, 0 5px 14px #0007;
}

.is-modernized .sm-hud > div {
  padding: 5px 8px;
  border: 1px solid #bd8c3b;
  border-radius: 8px;
  background: linear-gradient(180deg, #09232d, #03131a);
  box-shadow: inset 0 0 12px #000a;
}

.is-modernized .sm-hud > div:nth-child(1) { order: 1; }
.is-modernized .sm-hud > div:nth-child(2) { order: 3; }
.is-modernized .sm-hud > div:nth-child(3) { display: none; }
.is-modernized .sm-hud > div:nth-child(4) { order: 2; }

.is-modernized .sm-hud span {
  color: #d7bd80;
  font-family: Georgia, serif;
}

.is-modernized .sm-hud strong {
  color: #fff8e7;
  text-shadow: 0 0 8px #60e5ed44;
}

.is-modernized .sm-hud > div:nth-child(4) strong {
  color: #ffd56a;
  font-size: clamp(1.3rem, 3vw, 2rem);
  text-shadow: 0 0 10px #ffb52f8c;
}

.is-modernized .sm-controls {
  order: 5;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
}

.is-modernized .sm-row {
  order: 6;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.is-modernized .sm-btn {
  min-height: 42px;
  border: 1px solid #ad803d;
  border-radius: 8px;
  background: linear-gradient(180deg, #243f65, #102540 58%, #07101d);
  color: #f8e8bd;
  font-family: Georgia, serif;
  letter-spacing: .035em;
  box-shadow: inset 0 1px #8de7ec2e, 0 3px 7px #0008;
}

.is-modernized .sm-btn:hover {
  border-color: #f0c967;
  background: linear-gradient(180deg, #7b2632, #3c1119);
}

.is-modernized .sm-spin {
  width: 88px;
  height: 88px;
  border: 3px solid #d9b252;
  outline: 4px solid #56300d;
  background: radial-gradient(circle at 37% 28%, #fff4bd, #efbc52 38%, #b4711e 66%, #6a390d);
  color: #241202;
  font-family: Georgia, serif;
  font-size: 1.08rem;
  text-shadow: 0 1px #fff4ba;
  box-shadow: inset 0 0 0 3px #f7db8b, 0 5px #5d330c, 0 9px 20px #000c, 0 0 24px #8d263780;
}

.is-modernized .sm-spin:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: inset 0 0 0 3px #fff0b6, 0 5px #5d330c, 0 9px 20px #000c, 0 0 34px #ff5bd0d0;
}

.is-modernized .sm-paytable {
  border: 3px solid #bd8b37;
  background: linear-gradient(180deg, #4a1720, #120509);
  box-shadow: 0 20px 70px #000e;
}

.is-modernized .sm-paytable .sm-paytable-symbol {
  display: block;
  width: 58px;
  height: 58px;
  margin: 0 auto;
  border: 1px solid #8192a8;
  border-radius: 0;
  object-fit: cover;
  box-shadow: 0 2px 7px #000a;
}

.is-modernized .sm-paytable th:first-child,
.is-modernized .sm-paytable td:first-child {
  width: 76px;
  text-align: center;
}

@media (max-width: 700px) {
  .sm-game.is-modernized { padding: 5px; }
  .is-modernized .sm-logo { min-width: 68vw; padding: 7px 18px; }
  .is-modernized .sm-logo::before,
  .is-modernized .sm-logo::after { display: none; }
  .is-modernized .sm-stage {
    flex: 0 0 auto;
    min-height: 0;
    aspect-ratio: 5 / 3;
    border-width: 7px;
  }
  .sm-feature-status { min-width: 84vw; }
  .is-modernized .sm-row { grid-template-columns: repeat(2, 1fr); }
  .is-modernized .sm-btn { min-height: 38px; font-size: .72rem; }
  .is-modernized .sm-spin { width: 74px; height: 74px; }
  .sm-payline-guide polyline { stroke-width: .7; }
  .is-modernized .sm-paytable .sm-paytable-symbol { width: 46px; height: 46px; }
  .is-modernized .sm-paytable th:first-child,
  .is-modernized .sm-paytable td:first-child { width: 58px; }
}