* {
  box-sizing: border-box;
}

:root {
  --bg: #06030a;
  --black: #070307;
  --panel: rgba(21, 10, 13, .88);
  --panel2: rgba(50, 25, 15, .95);
  --gold: #ffd56a;
  --gold2: #f39b26;
  --gold3: #7d3b07;
  --cyan: #24ddff;
  --red: #e03548;
  --text: #fff1cc;
  --muted: rgba(255, 238, 202, .62);
  --border: rgba(255, 210, 84, .32);
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

body {
  min-width: 1380px;
}

.stage-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 11%, rgba(255, 214, 102, .26), transparent 18%),
    radial-gradient(circle at 18% 30%, rgba(255, 80, 35, .12), transparent 28%),
    radial-gradient(circle at 84% 36%, rgba(30, 170, 255, .10), transparent 30%),
    linear-gradient(180deg, #1d0e17, #07030b 66%, #020104);
}

.stage-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 210, 90, .026) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg, rgba(255, 210, 90, .018) 0 1px, transparent 1px 46px);
  opacity: .95;
}

.stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,230,160,.65) 0 1px, transparent 1px),
    radial-gradient(circle, rgba(60,218,255,.45) 0 1px, transparent 1px);
  background-size: 69px 69px, 113px 113px;
  animation: starDrift 18s linear infinite;
  opacity: .28;
}

@keyframes starDrift {
  to { background-position: 240px 120px, -210px 160px; }
}

.sun-disc {
  position: absolute;
  left: 50%;
  top: 12%;
  width: 680px;
  height: 680px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 220, 100, 0) 0 6deg,
    rgba(255, 220, 100, .22) 8deg 10deg,
    rgba(255, 140, 30, .12) 11deg 13deg,
    rgba(255, 220, 100, 0) 14deg 24deg
  );
  mask-image: radial-gradient(circle, transparent 0 16%, black 17% 64%, transparent 66%);
  animation: sunSpin 30s linear infinite;
}

@keyframes sunSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.pyramid {
  position: absolute;
  bottom: -120px;
  width: 520px;
  height: 360px;
  opacity: .22;
  filter: blur(.5px);
  background: linear-gradient(135deg, transparent 0 50%, rgba(255, 186, 64, .44) 50.3% 100%);
}

.p1 { left: 4%; }
.p2 { left: 37%; width: 650px; height: 420px; opacity: .16; }
.p3 { right: 2%; transform: scaleX(-1); }

.scanline {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.035), transparent);
  height: 240px;
  animation: scan 6s linear infinite;
  opacity: .5;
}

@keyframes scan {
  from { transform: translateY(-260px); }
  to { transform: translateY(100vh); }
}

.app {
  position: relative;
  z-index: 2;
  width: min(1840px, calc(100vw - 34px));
  margin: 20px auto 34px;
}

.header {
  min-height: 116px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 18px 22px;
  border: 1px solid var(--border);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 213, 106, .13), transparent 44%),
    linear-gradient(180deg, rgba(55, 28, 17, .92), rgba(9, 5, 12, .92));
  box-shadow: 0 28px 90px rgba(0,0,0,.48);
}

.brand {
  display: flex;
  align-items: center;
  gap: 18px;
}

.logo {
  width: 104px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  color: #331500;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.55), transparent 21%),
    linear-gradient(180deg, #fff0a4, #ffbd33 48%, #aa560a);
  font-family: Georgia, serif;
  font-weight: 1000;
  font-size: 42px;
  letter-spacing: -.07em;
  box-shadow: 0 16px 50px rgba(255, 165, 35, .24), inset 0 0 0 2px rgba(255,255,255,.18);
}

h1 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 38px;
  letter-spacing: -.045em;
}

.brand p {
  margin: 5px 0 0;
  color: var(--muted);
  font-weight: 800;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 164px);
  gap: 12px;
}

.stat,
.bet-box {
  border: 1px solid rgba(255, 213, 106, .22);
  border-radius: 18px;
  background: rgba(0,0,0,.30);
  padding: 14px 16px;
}

.stat span,
.bet-box label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .10em;
}

.stat strong,
.bet-box strong {
  display: block;
  margin-top: 5px;
  color: var(--gold);
  font-size: 24px;
  letter-spacing: -.04em;
}

.layout {
  display: grid;
  grid-template-columns: 300px minmax(850px, 1fr) 300px;
  gap: 18px;
  margin-top: 18px;
  align-items: start;
}

.side {
  min-height: 870px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 213, 106, .09), transparent 32%),
    linear-gradient(180deg, rgba(29, 14, 17, .93), rgba(7, 4, 10, .95));
  box-shadow: 0 25px 86px rgba(0,0,0,.40);
}

.side-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.side-head span {
  color: var(--gold);
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: .12em;
}

.side-head b {
  color: var(--muted);
  font-size: 12px;
}

.character-list,
.history,
.paytable {
  display: grid;
  gap: 9px;
}

.character-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 8px;
  border: 1px solid rgba(255, 213, 106, .17);
  border-radius: 18px;
  background: rgba(0,0,0,.24);
}

.character-item img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 14px;
  border: 2px solid rgba(255, 213, 106, .42);
  background: rgba(0,0,0,.38);
}

.character-name {
  font-size: 14px;
  font-weight: 1000;
}

.character-role {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.badge {
  padding: 6px 8px;
  border-radius: 999px;
  color: #351600;
  background: linear-gradient(180deg, #fff1a8, #ffbc35);
  font-size: 10px;
  font-weight: 1000;
}

.machine-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  height: 82px;
  margin-bottom: 12px;
}

.wing {
  height: 34px;
  opacity: .92;
  background:
    linear-gradient(90deg, transparent, rgba(255,213,106,.38), transparent),
    repeating-linear-gradient(90deg, rgba(255,213,106,.22) 0 14px, transparent 14px 21px);
  clip-path: polygon(0 50%, 100% 0, 84% 50%, 100% 100%);
}

.wing-right {
  transform: scaleX(-1);
}

.machine-name {
  min-width: 308px;
  padding: 12px 24px;
  border: 1px solid rgba(255, 213, 106, .36);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(62, 31, 18, .98), rgba(9, 5, 12, .98));
  text-align: center;
  box-shadow: 0 18px 62px rgba(0,0,0,.34);
}

.machine-name span,
.machine-name em {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .14em;
  font-style: normal;
}

.machine-name strong {
  display: block;
  margin: 2px 0 4px;
  color: var(--gold);
  font-family: Georgia, serif;
  font-size: 32px;
  letter-spacing: -.04em;
}

.machine {
  position: relative;
  width: min(920px, 100%);
  margin: 0 auto;
  padding: 28px;
  border: 2px solid rgba(255, 213, 106, .40);
  border-radius: 40px;
  background:
    radial-gradient(circle at 50% 0, rgba(255,213,106,.26), transparent 35%),
    radial-gradient(circle at 50% 58%, rgba(36, 221, 255, .08), transparent 38%),
    linear-gradient(180deg, rgba(84, 39, 21, .98), rgba(9, 4, 11, .98));
  box-shadow:
    0 36px 120px rgba(0,0,0,.55),
    inset 0 0 0 6px rgba(255, 213, 106, .055);
  overflow: hidden;
}

.machine::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 213, 106, .12), transparent 55%),
    linear-gradient(115deg, rgba(255,255,255,.10), transparent 25% 72%, rgba(255,255,255,.06));
  pointer-events: none;
  z-index: 4;
  mix-blend-mode: screen;
}

.machine-ornaments {
  position: absolute;
  z-index: 5;
  color: rgba(255, 220, 116, .22);
  font-size: 42px;
  pointer-events: none;
  text-shadow: 0 0 18px rgba(255, 188, 54, .38);
}

.top-left { left: 24px; top: 20px; }
.top-right { right: 24px; top: 20px; }
.bottom-left { left: 24px; bottom: 20px; }
.bottom-right { right: 24px; bottom: 20px; }

.grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 20px;
  border-radius: 32px;
  border: 1px solid rgba(255, 213, 106, .28);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 213, 106, .11), transparent 55%),
    rgba(0,0,0,.46);
}

.symbol {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(38, 20, 17, .98), rgba(5, 3, 8, .98));
  border: 2px solid rgba(255, 213, 106, .34);
  box-shadow:
    inset 0 -22px 36px rgba(0,0,0,.40),
    0 12px 26px rgba(0,0,0,.30);
  aspect-ratio: 1 / 1;
}

.symbol img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.55));
}

.symbol.wild {
  border-color: rgba(255, 241, 156, .98);
  box-shadow: 0 0 32px rgba(255, 218, 92, .44), inset 0 0 26px rgba(255,255,255,.10);
}

.symbol.scatter {
  border-color: rgba(224, 53, 72, .98);
  box-shadow: 0 0 36px rgba(224, 53, 72, .42), inset 0 0 26px rgba(255,255,255,.10);
}

.symbol.win {
  z-index: 6;
  animation: winCard 700ms ease-in-out infinite alternate;
  border-color: rgba(255, 245, 180, 1);
  box-shadow:
    0 0 0 3px rgba(255, 213, 106, .20),
    0 0 44px rgba(255, 213, 106, .82),
    inset 0 0 28px rgba(255,255,255,.18);
}

@keyframes winCard {
  to { transform: scale(1.035); filter: brightness(1.18) saturate(1.13); }
}

.grid.spinning .symbol img {
  animation: spinBlur 85ms linear infinite;
}

@keyframes spinBlur {
  from { transform: translateY(-15px) scaleY(.92); filter: blur(2px) brightness(1.15); }
  to { transform: translateY(15px) scaleY(1.08); filter: blur(2px) brightness(1.04); }
}

.symbol.stop {
  animation: stopPop 420ms cubic-bezier(.16, 1.8, .2, 1) both;
}

@keyframes stopPop {
  0% { transform: translateY(-48px) scale(.90); opacity: .1; filter: blur(5px); }
  62% { transform: translateY(8px) scale(1.04); opacity: 1; filter: blur(0); }
  100% { transform: translateY(0) scale(1); }
}

.lines {
  position: absolute;
  z-index: 8;
  inset: 48px;
  pointer-events: none;
  overflow: visible;
}

.payline {
  fill: none;
  stroke: url(#lineGold);
  stroke-width: 18;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  filter: drop-shadow(0 0 10px #fff1a3) drop-shadow(0 0 22px #ff9d26);
  animation: lineDraw .72s cubic-bezier(.13,.93,.14,1) forwards, linePulse .55s ease-in-out .72s infinite alternate;
}

@keyframes lineDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes linePulse {
  to { stroke-width: 22; opacity: .86; }
}

.reel-flash {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 210, .20), transparent 45%);
}

.machine.spinning {
  animation: machinePulse 650ms ease-in-out infinite alternate;
}

@keyframes machinePulse {
  to {
    transform: translateY(-2px) scale(1.002);
    box-shadow:
      0 38px 124px rgba(0,0,0,.58),
      0 0 82px rgba(255, 178, 44, .18),
      inset 0 0 0 6px rgba(255, 213, 106, .07);
  }
}

.machine.spinning .reel-flash {
  animation: reelFlash 650ms ease-in-out infinite alternate;
}

@keyframes reelFlash {
  to { opacity: 1; }
}

.controls {
  width: min(920px, 100%);
  margin: 16px auto 0;
  display: grid;
  grid-template-columns: 190px 1fr 155px 190px;
  gap: 12px;
  height: 118px;
}

.bet-box {
  padding: 14px 16px;
}

select {
  width: 100%;
  margin-top: 9px;
  padding: 12px;
  border: 1px solid rgba(255, 213, 106, .26);
  border-radius: 12px;
  background: rgba(16, 8, 12, .98);
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
}

.spin,
.auto {
  border: 0;
  border-radius: 26px;
  cursor: pointer;
  color: #321400;
  background:
    radial-gradient(circle at 34% 12%, rgba(255,255,255,.50), transparent 21%),
    linear-gradient(180deg, #fff5b5, #ffc43f 46%, #e17b20);
  box-shadow: 0 18px 50px rgba(255, 156, 31, .22), inset 0 -9px 18px rgba(103, 43, 0, .22);
  font-weight: 1000;
  text-shadow: 0 1px 0 rgba(255,255,255,.42);
}

.spin {
  display: grid;
  place-items: center;
  align-content: center;
  position: relative;
  overflow: hidden;
}

.spin span {
  font-size: 38px;
  letter-spacing: -.05em;
}

.spin small {
  font-size: 12px;
  letter-spacing: .15em;
}

.spin::after {
  content: "";
  position: absolute;
  inset: -60% -35%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.48), transparent);
  transform: translateX(-130%) rotate(13deg);
  animation: shine 2.2s ease-in-out infinite;
}

@keyframes shine {
  0%, 35% { transform: translateX(-130%) rotate(13deg); }
  75%, 100% { transform: translateX(130%) rotate(13deg); }
}

.auto {
  font-size: 19px;
}

.spin:disabled,
.auto:disabled {
  opacity: .78;
  cursor: wait;
}

.winbar {
  width: min(920px, 100%);
  min-height: 90px;
  margin: 12px auto 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 213, 106, .24);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 213, 106, .13), transparent 44%),
    rgba(0,0,0,.32);
  color: var(--muted);
  font-size: 31px;
  font-weight: 1000;
  letter-spacing: .04em;
}

.winbar.win {
  color: var(--gold);
  animation: winbarPop 460ms ease both;
}

@keyframes winbarPop {
  0% { opacity: 0; transform: translateY(12px) scale(.97); }
  70% { opacity: 1; transform: translateY(-2px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}

.paytable div,
.history-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 213, 106, .15);
  border-radius: 14px;
  background: rgba(0,0,0,.24);
}

.paytable b {
  font-size: 13px;
}

.paytable span,
.history-item strong {
  color: var(--gold);
  font-size: 12px;
  font-weight: 1000;
}

.history-head {
  margin-top: 22px;
}

.history-item {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.history-item.win {
  color: var(--gold);
  border-color: rgba(255, 213, 106, .30);
}

.fx {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  overflow: hidden;
}

.win-banner {
  position: fixed;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  padding: 22px 36px;
  border-radius: 999px;
  color: #351600;
  background:
    radial-gradient(circle at 32% 14%, rgba(255,255,255,.50), transparent 22%),
    linear-gradient(180deg, #fff5b0, #ffc43e 48%, #d97818);
  box-shadow: 0 20px 84px rgba(255, 185, 44, .42), inset 0 0 0 2px rgba(255,255,255,.20);
  font-family: Georgia, serif;
  font-size: 46px;
  font-weight: 1000;
  letter-spacing: -.04em;
  animation: bannerPop 1.35s ease forwards;
}

@keyframes bannerPop {
  0% { opacity: 0; transform: translateX(-50%) translateY(24px) scale(.64); }
  18% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.08); }
  78% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-22px) scale(.92); }
}

.coin {
  position: fixed;
  left: 50%;
  top: 48%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 20%, #fff8bd 0 16%, transparent 17%),
    linear-gradient(135deg, #fff0a6, #ffc13b 50%, #9f5209);
  border: 1px solid rgba(255,255,255,.38);
  box-shadow: 0 0 18px rgba(255, 202, 70, .7);
  animation: coinFly 1.12s cubic-bezier(.1,.72,.25,1) forwards;
}

.coin::after {
  content: "𓋹";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #552400;
  font-size: 12px;
  font-weight: 1000;
}

@keyframes coinFly {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.2) rotate(0); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(var(--s)) rotate(var(--r)); }
}

body.shake .app {
  animation: screenShake .34s ease both;
}

@keyframes screenShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px) rotate(-.15deg); }
  40% { transform: translateX(5px) rotate(.15deg); }
  60% { transform: translateX(-3px) rotate(-.1deg); }
  80% { transform: translateX(3px) rotate(.1deg); }
}

.lightning {
  position: fixed;
  z-index: 60;
  width: 7px;
  height: 60vh;
  left: var(--x);
  top: -5vh;
  background: linear-gradient(180deg, transparent, #80f7ff, #fff, #2098ff, transparent);
  clip-path: polygon(42% 0, 100% 26%, 58% 26%, 100% 55%, 50% 48%, 72% 100%, 0 42%, 40% 43%, 0 14%);
  filter: drop-shadow(0 0 12px #6cecff) drop-shadow(0 0 28px #1a74ff);
  opacity: 0;
  animation: lightningStrike .64s ease forwards;
}

@keyframes lightningStrike {
  0%, 100% { opacity: 0; transform: scaleY(.7) rotate(var(--r)); }
  12%, 26%, 42% { opacity: 1; transform: scaleY(1.05) rotate(var(--r)); }
  20%, 34% { opacity: .18; }
}

body.fx-lightning .machine {
  animation: zeusMachine .55s ease 2;
}

@keyframes zeusMachine {
  0%, 100% { box-shadow: 0 36px 120px rgba(0,0,0,.55); }
  40% { box-shadow: 0 36px 140px rgba(0,0,0,.55), 0 0 100px rgba(38,160,255,.60); }
}

.slash {
  position: fixed;
  z-index: 62;
  left: 50%;
  top: 45%;
  width: 84vw;
  height: 10px;
  background: linear-gradient(90deg, transparent, #fff, #ffd56a, transparent);
  transform: translate(-50%, -50%) rotate(var(--a));
  filter: drop-shadow(0 0 12px #fff0b0) drop-shadow(0 0 30px #ffba2e);
  opacity: 0;
  animation: slashMove .62s ease forwards;
}

@keyframes slashMove {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); }
  20% { opacity: 1; }
  100% { opacity: 0; clip-path: inset(0 0 0 100%); }
}

.curse {
  position: fixed;
  z-index: 61;
  inset: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 24, 56, .36), transparent 30%),
    radial-gradient(circle at 50% 45%, rgba(12, 0, 0, .45), transparent 55%);
  animation: cursePulse .9s ease forwards;
}

@keyframes cursePulse {
  0%, 100% { opacity: 0; }
  28%, 68% { opacity: 1; }
}

.card-rain {
  position: fixed;
  z-index: 63;
  left: var(--x);
  top: -80px;
  width: 48px;
  height: 68px;
  border-radius: 6px;
  background: linear-gradient(180deg, #fff, #ead8b1);
  border: 2px solid #ffd56a;
  color: #111;
  font-size: 28px;
  font-weight: 1000;
  display: grid;
  place-items: center;
  box-shadow: 0 0 18px rgba(255,212,93,.45);
  animation: cardFall 1.25s ease-in forwards;
}

@keyframes cardFall {
  to { transform: translateY(110vh) rotate(var(--r)); opacity: 0; }
}

.star {
  position: fixed;
  z-index: 63;
  left: var(--x);
  top: var(--y);
  color: #fff3a6;
  font-size: var(--s);
  text-shadow: 0 0 12px #ffd56a, 0 0 24px #ff8d25;
  animation: starPop .9s ease forwards;
}

@keyframes starPop {
  0% { opacity: 0; transform: scale(.2) rotate(0); }
  30% { opacity: 1; transform: scale(1.25) rotate(90deg); }
  100% { opacity: 0; transform: scale(.4) rotate(240deg); }
}

.foam {
  position: fixed;
  z-index: 62;
  left: var(--x);
  bottom: -60px;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #fff, #f6dda1 55%, transparent 58%);
  opacity: .9;
  animation: foamUp 1.3s ease-out forwards;
}

@keyframes foamUp {
  to { transform: translateY(-70vh) translateX(var(--dx)); opacity: 0; }
}

.sunburst {
  position: fixed;
  z-index: 61;
  left: 50%;
  top: 43%;
  width: 52vmin;
  height: 52vmin;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,220,102,0) 0 6deg, rgba(255,220,102,.46) 8deg 11deg, rgba(255,110,30,.30) 12deg 15deg, rgba(255,220,102,0) 16deg 24deg);
  mask-image: radial-gradient(circle, transparent 0 16%, black 17% 66%, transparent 68%);
  animation: sunburst .95s ease forwards;
}

@keyframes sunburst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.35) rotate(0); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6) rotate(120deg); }
}

.shot {
  position: fixed;
  z-index: 64;
  left: 50%;
  top: 45%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff6b5;
  box-shadow: 0 0 30px #fff, 0 0 84px #ffb22f, 0 0 140px #ff7a18;
  animation: shotFlash .45s ease forwards;
}

@keyframes shotFlash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.1); }
  24% { opacity: 1; transform: translate(-50%, -50%) scale(5); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(9); }
}

@media (max-width: 1530px) {
  body { min-width: 1320px; }

  .layout {
    grid-template-columns: 260px minmax(800px, 1fr) 260px;
  }

  .side { padding: 12px; }

  .character-item {
    grid-template-columns: 56px 1fr auto;
  }

  .character-item img {
    width: 56px;
    height: 56px;
  }

  .machine {
    width: min(800px, 100%);
  }

  .controls,
  .winbar {
    width: min(800px, 100%);
  }
}


/* ---------- V4.2 SOUND + ANIMATION PATCH ---------- */

.sound-toggle {
  height: 52px;
  min-width: 122px;
  border: 1px solid rgba(255, 213, 106, .32);
  border-radius: 16px;
  background:
    radial-gradient(circle at 30% 15%, rgba(255,255,255,.35), transparent 24%),
    linear-gradient(180deg, #fff0a4, #ffbd33 52%, #a75a10);
  color: #321400;
  font-weight: 1000;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 16px 48px rgba(255, 171, 41, .18);
}

.sound-toggle.off {
  background: linear-gradient(180deg, rgba(42,28,25,.96), rgba(10,5,10,.96));
  color: rgba(255, 238, 202, .70);
}

.symbol {
  transform-style: preserve-3d;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.symbol:hover {
  transform: translateY(-3px) scale(1.015);
  filter: brightness(1.08);
}

.grid.spinning .symbol {
  animation: cardSlotShake 96ms linear infinite;
}

.grid.spinning .symbol:nth-child(3n+1) { animation-delay: 0ms; }
.grid.spinning .symbol:nth-child(3n+2) { animation-delay: 28ms; }
.grid.spinning .symbol:nth-child(3n+3) { animation-delay: 56ms; }

@keyframes cardSlotShake {
  0% { transform: translateY(-9px) rotateX(7deg); }
  50% { transform: translateY(8px) rotateX(-5deg); }
  100% { transform: translateY(-9px) rotateX(7deg); }
}

.symbol.anticipate {
  animation: anticipationPulse .38s ease-in-out infinite alternate;
  border-color: rgba(36, 221, 255, .95);
  box-shadow:
    0 0 0 3px rgba(36, 221, 255, .20),
    0 0 38px rgba(36, 221, 255, .62),
    inset 0 0 24px rgba(255,255,255,.12);
}

@keyframes anticipationPulse {
  to { transform: scale(1.035); filter: brightness(1.15) saturate(1.2); }
}

.machine.bigwin {
  animation: bigWinMachine 1.1s ease-in-out 2;
}

@keyframes bigWinMachine {
  0%, 100% {
    filter: brightness(1);
    box-shadow:
      0 36px 120px rgba(0,0,0,.55),
      inset 0 0 0 6px rgba(255, 213, 106, .055);
  }
  45% {
    filter: brightness(1.22) saturate(1.18);
    box-shadow:
      0 36px 140px rgba(0,0,0,.55),
      0 0 110px rgba(255, 207, 74, .65),
      inset 0 0 40px rgba(255, 236, 170, .24);
  }
}

.card-spotlight {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 0;
}

.card-spotlight.active {
  animation: spotlightFade 1.25s ease forwards;
}

.card-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 215, 98, .26), transparent 28%),
    rgba(0,0,0,.54);
}

.card-spotlight img {
  position: relative;
  width: min(460px, 34vw);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 34px;
  box-shadow:
    0 0 0 3px rgba(255, 213, 106, .36),
    0 26px 110px rgba(0,0,0,.72),
    0 0 88px rgba(255, 213, 106, .50);
  animation: spotlightCard .95s cubic-bezier(.15,1.4,.25,1) forwards;
}

@keyframes spotlightFade {
  0% { opacity: 0; }
  16%, 78% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes spotlightCard {
  0% { transform: scale(.42) rotate(-8deg); filter: brightness(.8); }
  52% { transform: scale(1.08) rotate(2deg); filter: brightness(1.24); }
  100% { transform: scale(1) rotate(0); filter: brightness(1.05); }
}

.hypno-ring {
  position: fixed;
  z-index: 59;
  left: 50%;
  top: 45%;
  width: 16vmin;
  height: 16vmin;
  border-radius: 50%;
  border: 3px solid rgba(255, 213, 106, .0);
  transform: translate(-50%, -50%);
  animation: hypnoRing 1.1s ease-out forwards;
}

@keyframes hypnoRing {
  0% {
    opacity: 0;
    width: 10vmin;
    height: 10vmin;
    border-color: rgba(255, 244, 188, .0);
    box-shadow: 0 0 0 rgba(255, 213, 106, 0);
  }
  20% {
    opacity: 1;
    border-color: rgba(255, 244, 188, .95);
    box-shadow: 0 0 40px rgba(255, 213, 106, .55);
  }
  100% {
    opacity: 0;
    width: 82vmin;
    height: 82vmin;
    border-color: rgba(255, 213, 106, .0);
    box-shadow: 0 0 90px rgba(255, 213, 106, 0);
  }
}

.jackpot-rain {
  position: fixed;
  z-index: 65;
  top: -70px;
  left: var(--x);
  color: var(--gold);
  font-size: var(--s);
  font-weight: 1000;
  text-shadow: 0 0 16px rgba(255,213,106,.9), 0 0 34px rgba(255,150,32,.7);
  animation: jackpotFall 1.45s ease-in forwards;
}

@keyframes jackpotFall {
  to {
    transform: translateY(115vh) rotate(var(--r));
    opacity: 0;
  }
}

.winbar.mega {
  color: #fff8c4;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 213, 106, .30), transparent 44%),
    rgba(68, 28, 8, .50);
  box-shadow: 0 0 60px rgba(255, 190, 54, .28);
}


/* ---------- TELEGRAM AUTH / SERVER BUILD PATCH ---------- */

.user-card {
  min-width: 176px;
  max-width: 220px;
  border: 1px solid rgba(255, 213, 106, .22);
  border-radius: 18px;
  background: rgba(0,0,0,.30);
  padding: 12px 14px;
}

.user-card span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .10em;
}

.user-card strong {
  display: block;
  margin-top: 3px;
  color: var(--gold);
  font-size: 15px;
  font-weight: 1000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-card small {
  display: block;
  margin-top: 2px;
  color: rgba(255, 238, 202, .52);
  font-size: 11px;
  font-weight: 800;
}

.reset-btn {
  border: 1px solid rgba(255, 213, 106, .26);
  border-radius: 26px;
  cursor: pointer;
  color: rgba(255, 238, 202, .82);
  background:
    linear-gradient(180deg, rgba(42,28,25,.96), rgba(10,5,10,.96));
  font-weight: 1000;
  letter-spacing: .06em;
}

.reset-btn:hover {
  color: var(--gold);
  box-shadow: 0 0 30px rgba(255, 213, 106, .18);
}

.connection-error {
  position: fixed;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 9999;
  padding: 16px 18px;
  border: 1px solid rgba(255, 213, 106, .38);
  border-radius: 18px;
  color: var(--text);
  background: rgba(30, 4, 5, .94);
  box-shadow: 0 20px 80px rgba(0,0,0,.44);
  font-size: 14px;
  font-weight: 800;
}

.connection-error b {
  color: var(--gold);
}

.auth-loading {
  opacity: .65;
  pointer-events: none;
}

@media (max-width: 1530px) {
  .controls {
    grid-template-columns: 170px 1fr 115px 95px 170px;
  }

  .user-card {
    min-width: 150px;
  }
}


/* ---------- KAG FINAL MULTIPLAYER TG PATCH ---------- */

.user-card {
  min-width: 176px;
  max-width: 230px;
  border: 1px solid rgba(255, 213, 106, .24);
  border-radius: 18px;
  background: rgba(0,0,0,.30);
  padding: 12px 14px;
  box-shadow: 0 14px 44px rgba(0,0,0,.22);
}

.user-card span {
  display: block;
  color: var(--muted, rgba(255,238,202,.62));
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .10em;
}

.user-card strong {
  display: block;
  margin-top: 3px;
  color: var(--gold, #ffd56a);
  font-size: 15px;
  font-weight: 1000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-card small {
  display: block;
  margin-top: 2px;
  color: rgba(255, 238, 202, .52);
  font-size: 11px;
  font-weight: 800;
}

.reset-btn {
  border: 1px solid rgba(255, 213, 106, .26);
  border-radius: 20px;
  cursor: pointer;
  color: rgba(255, 238, 202, .82);
  background: linear-gradient(180deg, rgba(42,28,25,.96), rgba(10,5,10,.96));
  font-weight: 1000;
  letter-spacing: .06em;
  padding: 0 16px;
}

.reset-btn:hover {
  color: var(--gold, #ffd56a);
  box-shadow: 0 0 30px rgba(255, 213, 106, .18);
}

.connection-error {
  position: fixed;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 9999;
  padding: 16px 18px;
  border: 1px solid rgba(255, 213, 106, .38);
  border-radius: 18px;
  color: var(--text, #fff1cc);
  background: rgba(30, 4, 5, .94);
  box-shadow: 0 20px 80px rgba(0,0,0,.44);
  font-size: 14px;
  font-weight: 800;
}

.connection-error b {
  color: var(--gold, #ffd56a);
}

.auth-loading {
  opacity: .65;
  pointer-events: none;
}

.leaderboard-head {
  margin-top: 22px;
}

.leaderboard-list {
  display: grid;
  gap: 8px;
}

.leaderboard-item {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  border: 1px solid rgba(255, 213, 106, .15);
  border-radius: 14px;
  background: rgba(0,0,0,.24);
  color: var(--muted, rgba(255,238,202,.62));
  font-size: 12px;
  font-weight: 850;
}

.leaderboard-item b {
  color: var(--gold, #ffd56a);
}

.leaderboard-item .player-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-spotlight {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 0;
}

.card-spotlight.active {
  animation: spotlightFade 1.25s ease forwards;
}

.card-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 48%, rgba(255, 215, 98, .26), transparent 28%), rgba(0,0,0,.54);
}

.card-spotlight img {
  position: relative;
  width: min(460px, 34vw);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 34px;
  box-shadow:
    0 0 0 3px rgba(255, 213, 106, .36),
    0 26px 110px rgba(0,0,0,.72),
    0 0 88px rgba(255, 213, 106, .50);
  animation: spotlightCard .95s cubic-bezier(.15,1.4,.25,1) forwards;
}

@keyframes spotlightFade {
  0% { opacity: 0; }
  16%, 78% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes spotlightCard {
  0% { transform: scale(.42) rotate(-8deg); filter: brightness(.8); }
  52% { transform: scale(1.08) rotate(2deg); filter: brightness(1.24); }
  100% { transform: scale(1) rotate(0); filter: brightness(1.05); }
}

@media (max-width: 1530px) {
  .user-card {
    min-width: 150px;
  }
}


/* ---------- V2 DESKTOP LOGIN ---------- */
.desktop-login.hidden{display:none}.desktop-login{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 50% 20%,rgba(255,213,106,.20),transparent 26%),rgba(4,2,6,.88);backdrop-filter:blur(12px)}.desktop-login-card{width:min(560px,100%);border:1px solid rgba(255,213,106,.34);border-radius:28px;padding:30px;background:linear-gradient(180deg,rgba(36,16,12,.96),rgba(8,4,9,.96));box-shadow:0 34px 130px rgba(0,0,0,.72),0 0 90px rgba(255,181,66,.16);color:var(--text,#fff1cc);text-align:center}.login-logo{width:82px;height:82px;margin:0 auto 14px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,213,106,.45);background:radial-gradient(circle,rgba(255,213,106,.28),rgba(0,0,0,.10) 55%),linear-gradient(180deg,rgba(96,50,18,.82),rgba(9,4,6,.92));color:var(--gold,#ffd56a);font-size:24px;font-weight:1000;letter-spacing:.08em}.desktop-login-card h2{margin:0 0 10px;color:var(--gold,#ffd56a);font-size:30px;line-height:1.05}.desktop-login-card p{margin:0 0 16px;color:rgba(255,238,202,.72);font-weight:800}.login-code-line{display:grid;grid-template-columns:1fr auto;gap:10px;margin:18px 0 10px}.login-code-line code{display:block;padding:15px 16px;border:1px solid rgba(255,213,106,.28);border-radius:16px;background:rgba(0,0,0,.36);color:#fff7c4;font-size:18px;font-weight:1000;letter-spacing:.04em;user-select:all}.login-code-line button,#refresh-login-code{border:1px solid rgba(255,213,106,.36);border-radius:16px;padding:0 16px;cursor:pointer;color:#1b0b05;background:linear-gradient(180deg,#fff2a8,#f0a33a);font-weight:1000}#login-status{display:block;min-height:20px;margin:8px 0 18px;color:rgba(255,238,202,.70);font-weight:850}#refresh-login-code{min-height:44px;padding:0 22px}.login-note{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,213,106,.16);color:rgba(255,238,202,.54);font-size:13px;line-height:1.45;font-weight:750}


/* ---------- KAG FINAL V3 CLEAN DESKTOP LOGIN ---------- */

.desktop-login.hidden {
  display: none !important;
}

.desktop-login {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 213, 106, .24), transparent 25%),
    radial-gradient(circle at 50% 80%, rgba(255, 88, 34, .15), transparent 34%),
    rgba(4, 2, 6, .90);
  backdrop-filter: blur(12px);
}

.desktop-login-card {
  width: min(590px, 100%);
  border: 1px solid rgba(255, 213, 106, .36);
  border-radius: 30px;
  padding: 30px;
  background:
    linear-gradient(180deg, rgba(38, 17, 12, .98), rgba(8, 4, 9, .98));
  box-shadow:
    0 34px 130px rgba(0,0,0,.74),
    0 0 90px rgba(255, 181, 66, .16);
  color: var(--text, #fff1cc);
  text-align: center;
}

.login-logo {
  width: 82px;
  height: 82px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 213, 106, .45);
  background:
    radial-gradient(circle, rgba(255, 213, 106, .30), rgba(0,0,0,.10) 55%),
    linear-gradient(180deg, rgba(96, 50, 18, .82), rgba(9, 4, 6, .92));
  color: var(--gold, #ffd56a);
  font-size: 24px;
  font-weight: 1000;
  letter-spacing: .08em;
}

.desktop-login-card h2 {
  margin: 0 0 10px;
  color: var(--gold, #ffd56a);
  font-size: 30px;
  line-height: 1.05;
}

.login-main-text {
  margin: 0 0 18px;
  color: rgba(255, 238, 202, .72);
  font-weight: 850;
}

.login-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin: 16px 0 18px;
}

.login-steps div {
  border: 1px solid rgba(255, 213, 106, .18);
  border-radius: 16px;
  background: rgba(0,0,0,.23);
  padding: 11px 9px;
}

.login-steps b {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-bottom: 6px;
  border-radius: 50%;
  color: #1b0b05;
  background: linear-gradient(180deg, #fff2a8, #f0a33a);
  font-size: 12px;
}

.login-steps span {
  display: block;
  color: rgba(255,238,202,.70);
  font-size: 12px;
  font-weight: 800;
}

.login-code-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin: 18px 0 10px;
}

.login-code-line code {
  display: block;
  padding: 15px 16px;
  border: 1px solid rgba(255, 213, 106, .30);
  border-radius: 16px;
  background: rgba(0,0,0,.40);
  color: #fff7c4;
  font-size: 19px;
  font-weight: 1000;
  letter-spacing: .04em;
  user-select: all;
}

.login-code-line button,
.login-actions button {
  border: 1px solid rgba(255, 213, 106, .36);
  border-radius: 16px;
  padding: 0 16px;
  min-height: 48px;
  cursor: pointer;
  color: #1b0b05;
  background: linear-gradient(180deg, #fff2a8, #f0a33a);
  font-weight: 1000;
}

#login-status {
  display: block;
  min-height: 21px;
  margin: 8px 0 16px;
  color: rgba(255, 238, 202, .72);
  font-weight: 850;
}

.login-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.login-note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 213, 106, .16);
  color: rgba(255, 238, 202, .54);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 750;
}

.connection-error {
  position: fixed;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 10001;
  padding: 16px 18px;
  border: 1px solid rgba(255, 213, 106, .38);
  border-radius: 18px;
  color: var(--text, #fff1cc);
  background: rgba(30, 4, 5, .94);
  box-shadow: 0 20px 80px rgba(0,0,0,.44);
  font-size: 14px;
  font-weight: 800;
}

.connection-error b {
  color: var(--gold, #ffd56a);
}

@media (max-width: 720px) {
  .login-steps {
    grid-template-columns: 1fr;
  }

  .login-code-line {
    grid-template-columns: 1fr;
  }

  .desktop-login-card {
    padding: 22px;
  }
}


/* ---------- KAG V4.1 SCATTER CLEAN ---------- */
/* Scatter wins are anywhere-pays. No payline should be drawn through them. */

.symbol.scatter.win,
.symbol.win.scatter {
  animation:
    scatterCardPulse 1.05s ease-in-out infinite alternate,
    scatterGoldGlow 1.4s ease-in-out infinite;
  box-shadow:
    0 0 0 2px rgba(255, 213, 106, .62),
    0 0 34px rgba(255, 213, 106, .48),
    0 0 72px rgba(255, 118, 24, .34);
  z-index: 6;
}

.symbol.scatter.win::after,
.symbol.win.scatter::after {
  content: "SCATTER";
  position: absolute;
  left: 50%;
  bottom: 9px;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff2a8, #f0a33a);
  color: #1b0b05;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .08em;
  box-shadow: 0 0 22px rgba(255, 213, 106, .40);
  pointer-events: none;
}

@keyframes scatterCardPulse {
  from { transform: scale(1); filter: brightness(1.08) saturate(1.08); }
  to { transform: scale(1.035); filter: brightness(1.28) saturate(1.22); }
}

@keyframes scatterGoldGlow {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(255, 213, 106, .50),
      0 0 34px rgba(255, 213, 106, .36),
      0 0 72px rgba(255, 118, 24, .24);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(255, 240, 160, .86),
      0 0 48px rgba(255, 213, 106, .66),
      0 0 96px rgba(255, 118, 24, .42);
  }
}


/* =========================================================
   KAG V4.5 TELEGRAM MINI APP MOBILE FINAL OVERRIDE
   Mobile-first patch. Desktop layout remains unchanged.
   ========================================================= */
@media (max-width: 820px) {
  :root {
    --mobile-pad: 10px;
    --mobile-card-radius: 18px;
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    background: #050208 !important;
    -webkit-text-size-adjust: 100%;
    touch-action: pan-y;
  }

  body {
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .stage-bg {
    position: fixed;
    inset: 0;
  }

  .sun-disc {
    top: 4%;
    width: 520px;
    height: 520px;
    opacity: .82;
  }

  .pyramid {
    bottom: -90px;
    opacity: .16;
  }

  .p1 { left: -110px; }
  .p2 { left: 18%; width: 480px; height: 330px; }
  .p3 { right: -120px; }

  .app {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 10px var(--mobile-pad) calc(22px + env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }

  .header {
    width: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "brand sound"
      "stats stats" !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 22px !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(255, 213, 106, .16), transparent 54%),
      linear-gradient(180deg, rgba(46, 22, 16, .92), rgba(8, 4, 10, .92)) !important;
    box-shadow: 0 18px 60px rgba(0,0,0,.46) !important;
    backdrop-filter: blur(12px);
  }

  .brand {
    grid-area: brand;
    min-width: 0;
    gap: 10px !important;
  }

  .logo {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    border-radius: 15px !important;
    font-size: 24px !important;
    letter-spacing: -.05em !important;
  }

  h1 {
    font-size: clamp(20px, 6vw, 28px) !important;
    line-height: .94 !important;
    max-width: 190px;
  }

  .brand p {
    margin-top: 4px !important;
    font-size: 11px !important;
    line-height: 1.12 !important;
    max-width: 210px;
  }

  .sound-toggle {
    grid-area: sound;
    align-self: start;
    min-width: 84px !important;
    height: 44px !important;
    padding: 0 12px !important;
    border-radius: 15px !important;
    font-size: 11px !important;
    white-space: nowrap;
  }

  .user-card {
    display: none !important;
  }

  .stats {
    grid-area: stats;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
  }

  .stat {
    min-width: 0 !important;
    padding: 9px 10px !important;
    border-radius: 14px !important;
    background: rgba(0,0,0,.32) !important;
  }

  .stat span {
    font-size: 9px !important;
    letter-spacing: .08em !important;
  }

  .stat strong {
    margin-top: 3px !important;
    font-size: clamp(16px, 4.7vw, 21px) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .layout {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 10px !important;
    overflow: visible !important;
  }

  .side,
  .side-left,
  .side-right {
    display: none !important;
  }

  .main-slot {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .machine-top {
    width: 100% !important;
    height: auto !important;
    margin: 0 0 8px !important;
    display: flex !important;
    justify-content: center !important;
  }

  .wing {
    display: none !important;
  }

  .machine-name {
    width: min(100%, 360px) !important;
    min-width: 0 !important;
    padding: 9px 14px !important;
    border-radius: 17px !important;
    background: linear-gradient(180deg, rgba(56, 28, 18, .98), rgba(9, 5, 12, .98)) !important;
  }

  .machine-name span,
  .machine-name em {
    font-size: 8px !important;
    letter-spacing: .14em !important;
  }

  .machine-name strong {
    font-size: 24px !important;
    line-height: 1.0 !important;
  }

  .machine {
    width: min(96vw, 430px) !important;
    max-width: calc(100vw - 16px) !important;
    padding: 10px !important;
    border-radius: 26px !important;
    border-width: 1px !important;
    box-shadow:
      0 24px 80px rgba(0,0,0,.58),
      inset 0 0 0 4px rgba(255, 213, 106, .045) !important;
  }

  .machine::before {
    inset: 8px !important;
    border-radius: 21px !important;
  }

  .machine-ornaments {
    display: none !important;
  }

  .grid {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    gap: 7px !important;
    padding: 7px !important;
    border-radius: 20px !important;
  }

  .symbol {
    border-radius: 14px !important;
    border-width: 1px !important;
    box-shadow:
      inset 0 -12px 20px rgba(0,0,0,.38),
      0 8px 18px rgba(0,0,0,.28) !important;
  }

  .symbol img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    padding: 0 !important;
  }

  .lines {
    inset: 20px !important;
  }

  .payline {
    stroke-width: 10 !important;
  }

  .controls {
    width: min(96vw, 430px) !important;
    max-width: calc(100vw - 16px) !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: 112px 1fr 82px !important;
    grid-template-areas:
      "bet spin auto"
      "win win win" !important;
    gap: 8px !important;
    margin: 10px auto 0 !important;
  }

  .controls .bet-box:first-child {
    grid-area: bet;
  }

  .controls .bet-box:last-child {
    display: none !important;
  }

  .spin {
    grid-area: spin;
    height: 74px !important;
    min-width: 0 !important;
    border-radius: 20px !important;
  }

  .spin span {
    font-size: 31px !important;
    line-height: 1 !important;
  }

  .spin small {
    font-size: 10px !important;
  }

  .auto {
    grid-area: auto;
    height: 74px !important;
    min-width: 0 !important;
    border-radius: 18px !important;
    font-size: 13px !important;
    padding: 0 8px !important;
  }

  .reset-btn {
    display: none !important;
  }

  .bet-box {
    height: 74px !important;
    min-width: 0 !important;
    padding: 9px 10px !important;
    border-radius: 16px !important;
  }

  .bet-box label {
    font-size: 8px !important;
    letter-spacing: .08em !important;
  }

  select {
    height: 40px !important;
    margin-top: 7px !important;
    padding: 8px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
  }

  .winbar {
    width: min(96vw, 430px) !important;
    max-width: calc(100vw - 16px) !important;
    min-height: 58px !important;
    margin: 9px auto 0 !important;
    padding: 12px !important;
    border-radius: 18px !important;
    font-size: clamp(20px, 6.6vw, 30px) !important;
    line-height: 1.05 !important;
    text-align: center !important;
  }

  .card-spotlight {
    display: none !important;
  }

  .desktop-login-card {
    width: min(92vw, 420px) !important;
    padding: 22px !important;
    border-radius: 24px !important;
  }
}

@media (max-width: 380px) {
  .app {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  .header {
    padding: 10px !important;
  }

  .logo {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    font-size: 22px !important;
  }

  h1 {
    font-size: 19px !important;
  }

  .brand p {
    font-size: 10px !important;
  }

  .sound-toggle {
    min-width: 76px !important;
    height: 40px !important;
    font-size: 10px !important;
  }

  .controls {
    grid-template-columns: 104px 1fr 72px !important;
  }

  .spin span {
    font-size: 28px !important;
  }
}