:root {
  --app-bg-image: url("./assetu/fon.jpg");
  --panel: rgba(42, 18, 10, 0.78);
  --line: rgba(255, 203, 110, 0.46);
  --text: #f7e7bf;
  --accent: #f2ba59;
  --primary: #a2772f;
  --safe-bottom: max(12px, env(safe-area-inset-bottom));
  --btn-height-desktop: 56px;
  --btn-font-desktop: 14px;
  --btn-height-mobile: 46px;
  --btn-font-mobile: 12px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background:
    radial-gradient(circle at 50% 0%, rgba(240, 180, 76, 0.15), rgba(28, 10, 8, 0.72) 56%),
    linear-gradient(180deg, rgba(58, 20, 10, 0.28), rgba(16, 8, 6, 0.62)),
    var(--app-bg-image) center / cover no-repeat fixed;
  color: var(--text);
  font-family: "Palatino Linotype", "Book Antiqua", "Trebuchet MS", serif;
  overflow: hidden;
  display: grid;
  place-items: center;
}

#app {
  width: min(94vw, 760px);
  height: min(96vh, 980px);
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 10px;
  padding: 10px 10px 0;
  border: 1px solid rgba(255, 206, 120, 0.4);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(98, 42, 12, 0.38), rgba(49, 18, 8, 0.46));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 226, 160, 0.22);
  backdrop-filter: blur(5px);
  position: relative;
  overflow: hidden;
}

#app::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 20px;
  pointer-events: none;
  background:
    linear-gradient(45deg, rgba(255, 205, 118, 0.08) 25%, transparent 25%) 0 0 / 18px 18px,
    linear-gradient(-45deg, rgba(255, 205, 118, 0.06) 25%, transparent 25%) 0 0 / 18px 18px;
  mix-blend-mode: screen;
  opacity: 0.4;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(42, 18, 10, 0.62);
  backdrop-filter: blur(3px);
  box-shadow: inset 0 1px 0 rgba(255, 226, 154, 0.32), 0 8px 22px rgba(0, 0, 0, 0.33);
  position: relative;
}

.panel::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 4px;
  border-radius: 3px;
  opacity: 0.45;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 209, 120, 0.35) 0 8px,
      transparent 8px 14px
    );
  pointer-events: none;
}

.top-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 8px;
}

.stat {
  background: linear-gradient(180deg, rgba(120, 66, 24, 0.55), rgba(56, 26, 10, 0.78));
  border-radius: 10px;
  padding: 6px 10px;
  text-align: center;
  min-height: 48px;
}

.stat span {
  display: block;
  font-size: 12px;
  opacity: 0.8;
}

.stat strong {
  font-size: clamp(15px, 2vw, 28px);
  line-height: 1;
  white-space: nowrap;
}

.badge {
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #2c1406;
  background: linear-gradient(135deg, #ffd37b, var(--accent));
  border-radius: 10px;
  min-height: 48px;
}

.center-stage {
  min-height: 0;
  display: grid;
  place-items: center;
}

.stage-theme {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(250px, 1fr) auto;
  gap: 10px;
  min-height: 0;
}

.game-title-wrap {
  display: grid;
  place-items: center;
}

.game-title {
  margin: 0;
  width: 100%;
  text-align: center;
  padding: 6px 14px;
  font-size: clamp(24px, 5vw, 72px);
  font-weight: 900;
  letter-spacing: 1px;
  color: #ffdd9a;
  text-transform: uppercase;
  border: 1px solid rgba(255, 210, 120, 0.58);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(81, 26, 10, 0.82), rgba(44, 14, 8, 0.84));
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.75), 0 0 18px rgba(255, 195, 93, 0.35);
  font-family: "Palatino Linotype", "Book Antiqua", serif;
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
  line-height: 0.95;
}

.game-subtitle {
  margin: 4px 0 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2.2px;
  color: rgba(255, 230, 174, 0.85);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jackpot-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 209, 122, 0.5);
  background: linear-gradient(180deg, rgba(96, 34, 10, 0.84), rgba(58, 20, 7, 0.9));
}

.jackpot {
  text-align: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 237, 165, 0.45);
  padding: 8px 4px;
  font-weight: 800;
  letter-spacing: 0.8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff0cd;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

.mini {
  background: linear-gradient(180deg, #759c2f, #4e661e);
}

.minor {
  background: linear-gradient(180deg, #2c72bf, #1a4574);
}

.major {
  background: linear-gradient(180deg, #b149d5, #6d2388);
}

.grand {
  background: linear-gradient(180deg, #c43838, #7a1717);
}

#game-shell {
  width: 100%;
  height: 100%;
  position: relative;
  border: 2px solid rgba(255, 210, 120, 0.65);
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% -8%, rgba(246, 202, 122, 0.25), transparent 40%),
    linear-gradient(90deg, rgba(40, 8, 8, 0.82), rgba(107, 54, 20, 0.55) 50%, rgba(40, 8, 8, 0.82));
  box-shadow: inset 0 0 0 2px rgba(98, 49, 14, 0.75), 0 12px 28px rgba(0, 0, 0, 0.35);
  min-height: 0;
}

#game-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% -20%, rgba(255, 222, 144, 0.35), transparent 60%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.22), transparent 15%, transparent 85%, rgba(0, 0, 0, 0.22));
}

.turbo-hint {
  text-align: center;
  font-weight: 900;
  font-size: clamp(14px, 3.2vw, 34px);
  letter-spacing: 1px;
  color: #ffe7b0;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 24px;
}

.win-fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

#sun-burst {
  background: radial-gradient(circle at 50% 45%, rgba(255, 230, 150, 0.45), transparent 56%);
  transform: scale(0.7);
}

#win-aura {
  background:
    radial-gradient(circle at 50% 55%, rgba(255, 212, 122, 0.34), transparent 52%),
    conic-gradient(
      from 0deg at 50% 55%,
      rgba(255, 200, 110, 0.2),
      transparent 14%,
      rgba(255, 200, 110, 0.15) 28%,
      transparent 42%,
      rgba(255, 200, 110, 0.18) 56%,
      transparent 70%,
      rgba(255, 200, 110, 0.14) 84%,
      transparent
    );
}

#glyph-rain {
  overflow: hidden;
}

.glyph {
  position: absolute;
  top: -10%;
  color: rgba(255, 228, 154, 0.72);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.6px;
  text-shadow: 0 0 12px rgba(255, 218, 126, 0.55);
  animation: glyph-fall linear forwards;
}

#game-shell.win-small #sun-burst {
  opacity: 0.5;
  animation: sun-pulse 0.9s ease-out;
}

#game-shell.win-small #win-aura {
  opacity: 0.7;
  animation: aura-spin 1.1s linear;
}

#game-shell.win-big #sun-burst,
#game-shell.win-epic #sun-burst {
  opacity: 0.72;
  animation: sun-pulse 1.4s ease-out;
}

#game-shell.win-big #win-aura,
#game-shell.win-epic #win-aura {
  opacity: 0.9;
  animation: aura-spin 1.6s linear;
}

#game-shell.win-big #glyph-rain,
#game-shell.win-epic #glyph-rain {
  opacity: 1;
}

#reel-canvas,
#reel-canvas canvas {
  width: 100%;
  height: 100%;
}

.overlay-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.9);
  font-weight: 800;
  letter-spacing: 1px;
}

#win-overlay {
  top: 12px;
  font-size: clamp(16px, 2.8vw, 34px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 92%;
}

#combo-counter {
  top: 56px;
  color: #ffe066;
  font-size: clamp(14px, 2.1vw, 24px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 92%;
}

#particle-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bottom-panel {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  background: linear-gradient(180deg, rgba(85, 33, 11, 0.66), rgba(40, 15, 8, 0.76));
  align-items: center;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 0;
  background: transparent;
  color: #f7f1d2;
  border-radius: 10px;
  height: var(--btn-height-desktop);
  min-height: var(--btn-height-desktop);
  font-size: var(--btn-font-desktop);
  touch-action: manipulation;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 800;
  border: 1px solid rgba(255, 211, 122, 0.6);
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 234, 168, 0.28);
  isolation: isolate;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% -50%, rgba(255, 244, 200, 0.25), transparent 70%),
    repeating-linear-gradient(
      90deg,
      rgba(138, 88, 34, 0.9) 0 10px,
      rgba(111, 67, 24, 0.9) 10px 20px
    );
  box-shadow: inset 0 2px 0 rgba(255, 229, 159, 0.35), inset 0 -2px 0 rgba(20, 8, 4, 0.5);
}

.btn::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 240, 196, 0.2), rgba(0, 0, 0, 0)),
    linear-gradient(180deg, #2f63c5, #17336b);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn > .btn-text::before,
.btn > .btn-text::after {
  content: "𓂀";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  opacity: 0.55;
  color: #ffdba0;
  pointer-events: none;
}

.btn > .btn-text::before {
  left: 8px;
}

.btn > .btn-text::after {
  right: 8px;
}

.btn-icon {
  display: none;
}

.btn-text {
  width: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  line-height: 1.05;
  font-size: 12px;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7), 0 0 12px rgba(255, 220, 146, 0.2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 12px;
  position: relative;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
}

#autoplay .btn-text {
  font-size: 10px;
}

.btn:active {
  transform: translateY(1px) scale(0.99);
  filter: brightness(0.92);
}

.btn:hover {
  filter: brightness(1.08);
}

.btn-primary {
  color: #ffe7a8;
}

#bet-down::after,
#bet-up::after {
  background: linear-gradient(180deg, #2e66d1, #1c3f86);
}

#autoplay::after {
  background: linear-gradient(180deg, #2da34d, #1f6a35);
}

#spin::after {
  background:
    linear-gradient(180deg, rgba(255, 221, 152, 0.2), rgba(0, 0, 0, 0)),
    linear-gradient(180deg, #cf2c1f, #7a1310);
}

#spin .btn-text {
  color: #ffe4a3;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75), 0 0 14px rgba(255, 160, 120, 0.3);
  letter-spacing: 1.1px;
}

#sound::after {
  background: linear-gradient(180deg, #7d6349, #503d2e);
}

.btn:disabled {
  opacity: 0.55;
  filter: saturate(0.65);
}

.floating-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, 380px);
  padding: 18px;
  background: rgba(7, 12, 24, 0.94);
  border: 1px solid var(--line);
  border-radius: 16px;
  text-align: center;
  z-index: 10;
}

.floating-panel h2 {
  margin: 0 0 8px;
}

.big-win {
  box-shadow: 0 0 32px rgba(255, 206, 86, 0.5);
}

.hidden {
  display: none;
}

#pause-menu label {
  display: block;
  margin: 8px 0;
}

#disclaimer-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: center;
  font-size: 10px;
  padding: 7px 10px calc(7px + var(--safe-bottom));
  border-top: 1px solid rgba(255, 209, 126, 0.34);
  background: rgba(26, 12, 7, 0.7);
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  text-align: center;
}

@keyframes sun-pulse {
  0% {
    transform: scale(0.65);
    opacity: 0.1;
  }
  40% {
    transform: scale(1);
    opacity: 0.85;
  }
  100% {
    transform: scale(1.25);
    opacity: 0;
  }
}

@keyframes aura-spin {
  0% {
    transform: rotate(0deg) scale(0.84);
    opacity: 0.1;
  }
  100% {
    transform: rotate(180deg) scale(1.12);
    opacity: 0;
  }
}

@keyframes glyph-fall {
  0% {
    transform: translateY(-8%) rotate(0deg);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    transform: translateY(115%) rotate(24deg);
    opacity: 0;
  }
}

@media (max-width: 900px) {
  html,
  body {
    height: auto;
    min-height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
  }

  #app {
    width: 100vw;
    height: auto;
    min-height: 100dvh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    gap: 6px;
    padding: 6px 6px 0;
    overflow: visible;
  }

  .top-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 6px;
  }

  .jackpot-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 5px;
  }

  .bottom-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 5px;
  }

  .btn {
    height: var(--btn-height-mobile);
    min-height: var(--btn-height-mobile);
    font-size: var(--btn-font-mobile);
  }

  .btn-text {
    font-size: 11px;
    padding: 0 8px;
    letter-spacing: 0.1px;
  }

  #autoplay .btn-text {
    font-size: 10px;
    white-space: normal;
    line-height: 1;
  }

  .btn > .btn-text::before,
  .btn > .btn-text::after {
    display: none;
  }

  .game-title {
    font-size: clamp(18px, 7vw, 30px);
    padding: 4px 10px;
    line-height: 0.95;
  }

  .game-subtitle {
    font-size: 10px;
    letter-spacing: 1.3px;
  }

  .turbo-hint {
    display: none;
  }

  #disclaimer-banner {
    font-size: 9px;
    gap: 4px 8px;
    padding: 5px 6px calc(5px + var(--safe-bottom));
  }
}

@media (max-width: 520px) {
  .bottom-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .btn {
    height: 44px;
    min-height: 44px;
  }

  .btn-text {
    font-size: 10px;
  }
}