:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --green: #7dff4b;
  --green-deep: #1bc95a;
  --blue: #4bc8ff;
  --gold: #ffd45c;
  --panel: rgba(3, 18, 33, 0.94);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow: hidden;
  background: #04111f;
  color: white;
}

button, input { font: inherit; }
button { color: inherit; }
.fx-definitions { position: fixed; width: 0; height: 0; overflow: hidden; pointer-events: none; }

.game-shell {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100vw;
  height: 100vh;
  padding: 10px 18px 12px;
  overflow: hidden;
  background:
    linear-gradient(rgba(1, 12, 28, 0.08), rgba(1, 10, 20, 0.24)),
    url("./assets/ui/game-bg.png") center / cover no-repeat;
}

.topbar, .playfield, .hud { position: relative; z-index: 1; }

.topbar { display: flex; align-items: start; max-width: 1600px; width: 100%; height: clamp(58px, 10vh, 108px); margin: auto; pointer-events: none; }
.brand h1 { margin: 0; font-size: 0; line-height: 0; }
.brand img { display: block; width: clamp(122px, 17vw, 260px); max-height: clamp(58px, 10vh, 108px); object-fit: contain; object-position: left top; filter: drop-shadow(0 5px 14px #000c); }

.ways-panel { position: absolute; top: 7.7%; left: 27%; z-index: 3; display: flex; align-items: baseline; justify-content: center; gap: 10px; width: 43%; color: white; text-align: center; text-shadow: 0 2px 3px #000, 0 0 8px #52ff62; }
.ways-panel span, .meter span, .win-panel span, .feature-counter span { display: block; color: var(--gold); font-weight: 900; font-size: 11px; letter-spacing: 0.12em; }
.ways-panel strong { font-size: clamp(18px, min(3.2vh, 2.4vw), 34px); line-height: 1; }

.playfield { display: grid; grid-template-columns: minmax(90px, 0.48fr) minmax(540px, 4.2fr) minmax(90px, 0.48fr); align-items: center; gap: 4px; min-height: 0; height: 100%; max-width: 1700px; width: 100%; margin: 0 auto; }
.machine { position: relative; align-self: center; justify-self: center; display: grid; grid-template-rows: minmax(0, 1fr) 24px; width: min(100%, calc((100dvh - 146px) * 1.5)); aspect-ratio: 3 / 2; min-height: 0; padding: 15.1% 11.2% 10.7%; background: url("./assets/ui/playboard-frame-clean.png") center / 100% 100% no-repeat; filter: drop-shadow(0 10px 24px #000b); }
.ufo-meter { position: absolute; top: 7.5%; right: 6.1%; z-index: 3; display: flex; align-items: center; justify-content: center; gap: clamp(4px, 0.55vw, 9px); width: 26.7%; height: 8.8%; }
.ufo-meter > span { font-size: clamp(6px, min(1.15vh, 0.72vw), 11px); color: #a8ddec; font-weight: 800; letter-spacing: 0.08em; }
.letters { display: flex; gap: 6px; }
.letters b { display: grid; place-items: center; width: clamp(16px, min(3.3vh, 2vw), 30px); height: clamp(16px, min(3.3vh, 2vw), 30px); border: 1px solid #4d727d; border-radius: 5px; color: #73909c; background: #06111b; transition: 180ms ease; }
.letters b.collected { color: #06180c; border-color: #baff8d; background: var(--green); box-shadow: 0 0 12px var(--green); transform: translateY(-2px); }

.reels { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; width: 100%; height: 100%; min-height: 0; overflow: hidden; padding: 3px; border: 1px solid #789097; border-radius: 3px; background: linear-gradient(135deg, #82989e, #17242a 26%, #050b0f 55%, #60757c 82%, #17242a); box-shadow: inset 0 0 0 2px #071116, 0 0 12px #2bf36b33; }
.reel { display: grid; gap: 3px; min-height: 0; padding: 2px; background: linear-gradient(90deg, #8b9da2 0, #26363d 18%, #080f13 46%, #43565d 74%, #9aabb0 100%); box-shadow: inset 0 0 0 1px #060b0e; }
.cell { position: relative; display: grid; place-items: center; min-height: 0; border: 2px solid transparent; border-radius: 4px; background: linear-gradient(#0a2944, #061725) padding-box, linear-gradient(135deg, #b7c5c9 0%, #52666e 18%, #111b20 46%, #81959b 74%, #26363c 100%) border-box; box-shadow: inset 0 0 0 1px #071017, inset 0 0 16px #0008; font-weight: 1000; font-size: clamp(20px, 4vw, 44px); overflow: hidden; transition: 180ms ease; }
.symbol-art { position: absolute; inset: 9%; display: block; width: 82%; height: 82%; object-fit: contain; object-position: center; user-select: none; pointer-events: none; filter: drop-shadow(0 3px 5px #0009); }
.reel[data-rows="2"] .symbol-art,
.reel[data-rows="3"] .symbol-art,
.reel[data-rows="4"] .symbol-art { inset: 7%; width: 86%; height: 86%; }
.reel[data-rows="2"] .cell { font-size: clamp(48px, min(12vh, 9vw), 120px); }
.reel[data-rows="3"] .cell { font-size: clamp(40px, min(9vh, 8vw), 92px); }
.reel[data-rows="4"] .cell { font-size: clamp(34px, min(7vh, 7vw), 76px); }
.reel[data-rows="5"] .cell { font-size: clamp(28px, min(6vh, 6vw), 62px); }
.reel[data-rows="6"] .cell { font-size: clamp(24px, min(5vh, 5vw), 52px); }
.reel[data-rows="7"] .cell { font-size: clamp(20px, min(4.5vh, 4.5vw), 44px); }
.cell.letter { font-size: inherit; color: #91aec0; text-shadow: 0 0 6px #315f78; }
.cell.letter { border-color: #70ff9d; background: radial-gradient(circle, #126638, #071b2d 72%); box-shadow: inset 0 0 14px #35ff7955; }
.cell.letter::after { content: "COLLECT"; position: absolute; bottom: 2px; color: var(--gold); font-size: clamp(5px, 0.5vw, 8px); letter-spacing: 0.08em; }
.cell.wild,
.cell.circle-symbol { background: linear-gradient(#0a2944, #061725) padding-box, linear-gradient(135deg, #b7c5c9 0%, #52666e 18%, #111b20 46%, #81959b 74%, #26363c 100%) border-box; box-shadow: inset 0 0 0 1px #071017, inset 0 0 16px #0008; }
.cell.circle-symbol .symbol-art { inset: 4%; width: 92%; height: 92%; }
.cell.winning { border-color: var(--green); background: #164f36; box-shadow: inset 0 0 16px var(--green), 0 0 10px var(--green); }
.cell.abducting { isolation: isolate; z-index: 6; overflow: visible; }

.round-message { height: 28px; display: grid; place-items: center; color: #a7d4df; font-size: clamp(10px, 1.1vw, 15px); font-weight: 900; letter-spacing: 0.06em; }
.round-message.win { color: var(--gold); }

.character { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: end; min-width: 0; padding-bottom: 4vh; transition: 250ms ease; }
.portrait { display: grid; place-items: end center; font-size: clamp(70px, 11vw, 180px); line-height: 0.9; filter: drop-shadow(0 8px 15px #000); }
.portrait img { display: block; width: 100%; max-height: 68vh; object-fit: contain; object-position: center bottom; }
.alien .portrait { filter: drop-shadow(0 0 22px var(--green)); }
.character-label { margin-top: 12px; color: #9cd2df; font-size: 9px; font-weight: 900; letter-spacing: 0.14em; }
.speech { position: absolute; bottom: 65%; width: min(230px, 18vw); padding: 12px 14px; color: #0d1a25; border: 3px solid #0d1a25; border-radius: 18px; background: white; font-size: clamp(11px, 1.15vw, 18px); font-weight: 900; line-height: 1.1; text-align: center; box-shadow: 0 6px 20px #0008; animation: pop 220ms ease-out; }
.speech::after { content: ""; position: absolute; bottom: -14px; width: 18px; height: 18px; background: white; border-right: 3px solid #0d1a25; border-bottom: 3px solid #0d1a25; transform: rotate(45deg); }
.farmer .speech { left: 0; }
.farmer .speech::after { left: 22%; }
.alien .speech { right: 0; }
.alien .speech::after { right: 22%; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(0.9); } }

.hud { display: grid; grid-template-columns: auto 1fr 1.2fr 2fr auto auto auto; align-items: center; gap: 10px; max-width: 1450px; width: 100%; margin: 0 auto; padding: 7px 9px; border: 3px solid #596d72; border-radius: 18px; background: linear-gradient(#102733f5, #03101af5); box-shadow: inset 0 0 0 2px #0a151a, 0 -8px 25px #020b14aa; }
.menu-button { display: grid; place-items: center; min-width: 62px; height: 50px; padding: 3px 12px; border: 2px solid #6d858a; border-radius: 12px; background: linear-gradient(#173847, #071720); cursor: pointer; }
.menu-button span { color: var(--green); font-size: 20px; line-height: 1; }
.menu-button b { color: #b8d5db; font-size: 9px; letter-spacing: 0.12em; }
.meter, .win-panel, .feature-counter { text-align: center; }
.meter strong, .win-panel strong, .feature-counter strong { display: block; color: white; font-size: clamp(20px, 2.3vw, 34px); }
.win-panel strong { color: var(--gold); }
.win-panel small { display: block; min-height: 14px; color: var(--green); }
.bet-control { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; text-align: center; }
.bet-control button { width: 36px; height: 36px; border: 1px solid #497181; border-radius: 50%; background: #071621; font-size: 22px; cursor: pointer; }
.bet-control span { display: block; color: #94bdca; font-size: 10px; letter-spacing: 0.12em; }
.bet-control strong { font-size: 20px; }
.turbo { padding: 8px; color: #a7d4df; font-size: 11px; font-weight: 900; }
.spin { display: grid; grid-template-columns: auto auto; align-items: center; gap: 7px; min-width: 128px; height: 60px; padding: 0 22px; border: 3px solid #a5ff6d; border-radius: 30px; background: linear-gradient(#7dff4b, #11a83f); color: #062011; box-shadow: 0 0 22px #56ff6c99, inset 0 0 0 3px #0c782e; cursor: pointer; }
.spin span { font-size: 30px; }
.spin b { font-size: 17px; }
.spin:disabled { cursor: wait; opacity: 0.55; filter: saturate(0.4); }
.feature-counter { min-width: 84px; padding: 6px 10px; border-left: 1px solid #42616c; }
.feature-counter strong { color: var(--green); }

.menu-panel { position: fixed; left: 20px; bottom: 84px; z-index: 20; width: min(340px, calc(100vw - 40px)); padding: 15px; border: 3px solid #71868b; border-radius: 14px; background: linear-gradient(#102b37, #03101a); box-shadow: 0 14px 40px #000d, inset 0 0 0 1px #0c171c; }
.menu-panel header { display: flex; align-items: center; justify-content: space-between; color: var(--gold); letter-spacing: 0.1em; }
.menu-panel header button { width: 32px; height: 32px; border: 1px solid #759096; border-radius: 50%; background: #07151d; cursor: pointer; }
.menu-panel p { margin: 12px 0 0; color: #c1dce2; font-size: 12px; line-height: 1.45; }

@media (max-width: 900px) {
  .game-shell { padding: 8px; }
  .playfield { grid-template-columns: 1fr; }
  .character { display: none; }
  .machine { grid-column: 1; }
  .hud { grid-template-columns: auto 1fr 1fr 1.5fr auto; }
  .turbo, .feature-counter { display: none !important; }
  .menu-button { min-width: 50px; padding: 3px 8px; }
  .spin { min-width: 82px; padding: 0 12px; }
  .spin b { display: none; }
}

@media (max-height: 620px) {
  .topbar { height: 54px; }
  .ways-panel strong { font-size: 18px; }
  .machine { grid-template-rows: minmax(0, 1fr) 22px; }
  .hud { padding: 4px 8px; }
  .spin { height: 48px; }
}

/* The complete cabinet is one fixed 16:9 stage. Side areas are reserved for
   independent presentation elements; the reel window never changes geometry. */
body {
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  background: #01070c url("./assets/ui/game-bg-v2.png") center / cover no-repeat;
}
.game-shell {
  container-type: inline-size;
  isolation: isolate;
  display: block;
  width: min(100vw, calc(100vh * 1.786689));
  height: min(100vh, calc(100vw / 1.786689));
  aspect-ratio: 2094 / 1172;
  padding: 0;
  background: transparent;
}
.game-shell::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: url("./assets/ui/playboard-frame-v3.png") center 2.5% / 78% auto no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 10.7%, #000 14.2%, #000 85.8%, transparent 89.3%);
  mask-image: linear-gradient(90deg, transparent 10.7%, #000 14.2%, #000 85.8%, transparent 89.3%);
  pointer-events: none;
}
.stage-video {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}
.topbar, .playfield { z-index: 2; }
.topbar { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; margin: 0; }
.brand { position: absolute; top: 3.2%; left: 1.2%; width: 15%; }
.brand img { width: 100%; max-height: none; object-fit: contain; mix-blend-mode: screen; filter: drop-shadow(0 0 1.2cqw #000); }
.playfield { position: absolute; inset: 0; display: block; width: 100%; max-width: none; height: 100%; margin: 0; }
.character { display: none; }
.machine { position: absolute; inset: 0; display: block; width: 100%; height: 100%; aspect-ratio: auto; padding: 0; background: none; filter: none; }
.ways-panel {
  display: none;
}
.ways-panel span { font-size: clamp(5px, 0.54cqw, 11px); line-height: 1; }
.ways-panel strong { font-size: clamp(12px, 1.38cqw, 29px); line-height: 0.95; }
.ufo-meter {
  top: 4.5%;
  z-index: 12;
  right: auto;
  left: 35.9%;
  width: 28.2%;
  height: 11.8%;
  background: url("./assets/ui/ufo-status-panel.png") center / 122% auto no-repeat;
  filter: drop-shadow(0 0.28cqw 0.52cqw #000b);
}
.letters { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; width: 58%; height: 42%; gap: 0; }
.letters b {
  --letter-color: #68777d;
  --letter-glow: transparent;
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  color: var(--letter-color);
  background: transparent;
  box-shadow: none;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(14px, 1.55cqw, 31px);
  font-weight: 1000;
  line-height: 0.9;
  letter-spacing: 0.02em;
  opacity: 0.58;
  -webkit-text-stroke: max(1px, 0.045cqw) #1b272c;
  text-shadow: 0 1px 0 #bdc8ca40, 0 -1px 0 #02070a, 0 0 0.14cqw #000c;
  transform: scale(0.98);
  transition: color 180ms ease, opacity 180ms ease, text-shadow 180ms ease, transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
}
.letters b + b::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8%;
  width: max(1px, 0.07cqw);
  height: 84%;
  background: linear-gradient(#111b1f, #8d9a9e 22%, #35474d 50%, #75868b 76%, #0a1115);
  box-shadow: -0.04cqw 0 #05090b, 0.04cqw 0 #071014;
}
.letters b.collected {
  color: var(--letter-color);
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  -webkit-text-stroke-color: color-mix(in srgb, var(--letter-color) 72%, #071018);
  text-shadow:
    0 0 0.08cqw #fff,
    0 0 0.22cqw var(--letter-color),
    0 0 0.62cqw var(--letter-glow),
    0 1px 2px #000;
  transform: scale(1.08);
}
.letters b[data-letter="U"] { --letter-color: #74ff4e; --letter-glow: #34ec57; }
.letters b[data-letter="F"] { --letter-color: #45c9ff; --letter-glow: #087dff; }
.letters b[data-letter="O"] { --letter-color: #ce66ff; --letter-glow: #8f24ff; }
.letters b:not(.collected) { --letter-color: #68777d; --letter-glow: transparent; }
.board-win {
  position: fixed;
  z-index: 18;
  display: grid;
  justify-items: center;
  gap: .12em;
  width: max-content;
  max-width: 70vw;
  padding: .2em .65em;
  border: 0;
  background: transparent;
  text-align: center;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transform-origin: center;
}
.board-win[hidden] { display: none; }
.board-win span {
  color: #c0ff9a;
  font-size: .25em;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .15em;
  text-shadow: 0 1px 3px #001b0b, 0 0 8px #001b0b;
}
.board-win strong {
  color: #ffde79;
  font-size: 1em;
  font-weight: 1000;
  line-height: 1.1;
  white-space: nowrap;
  text-shadow: 0 2px 3px #261800, 0 0 10px #3b2100, 0 0 22px #e8b64366;
  font-variant-numeric: tabular-nums;
}
#spin { touch-action: none; user-select: none; -webkit-touch-callout: none; }
#spin.turbo-held { filter: drop-shadow(0 0 .8cqw #bcff52); }
.multiplier-hit { position: absolute; z-index: 20; left: 50%; top: 32%; display: grid; place-items: center; min-width: 11cqw; padding: .8cqw 1.8cqw 1.1cqw; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(ellipse, #123e23ed 10%, #06381bd9 42%, #39ff571f 63%, transparent 72%); pointer-events: none; text-align: center; }
.multiplier-hit::before { content: ""; position: absolute; inset: 12% -2%; border: max(1px, .15cqw) solid #b7ff7866; border-radius: 50%; box-shadow: 0 0 1.2cqw #59ff4580, inset 0 0 1.2cqw #59ff4560; transform: rotate(-12deg); }
.multiplier-hit[hidden] { display: none !important; }
.multiplier-hit strong { position: relative; font-size: clamp(30px, 5.5cqw, 112px); font-weight: 1000; line-height: 1; color: #fff6b6; -webkit-text-stroke: .08cqw #6a811b; text-shadow: 0 .22cqw 0 #263816, 0 0 .45cqw #abff48, 0 0 1.4cqw #4bff36; font-variant-numeric: tabular-nums; }
.multiplier-hit span { position: relative; margin-top: .25cqw; color: #c5ff98; font-size: clamp(8px, .85cqw, 18px); font-weight: 1000; letter-spacing: .16em; text-shadow: 0 1px 2px #001e0a; }
.reels { position: absolute; top: 11.7%; left: 20%; width: 60%; height: 63.6%; padding: 0.14cqw; gap: 0; }
.reel { position: relative; gap: 0.1cqw; padding: 0 0.28cqw 0 0; background: #071116; box-shadow: none; }
.reel:last-child { padding-right: 0; }
.reel:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  width: 0.22cqw;
  height: 100%;
  background: linear-gradient(90deg, #020608 0 10%, #24363d 22%, #94a6aa 39%, #1b2d35 55%, #2eaeb1 68%, #8cff63 76%, #142228 88%, #010507 100%);
  box-shadow: -0.05cqw 0 0 #020609, 0.05cqw 0 0 #020609, 0 0 0.18cqw #42ff9a88;
  pointer-events: none;
}
.cell,
.cell.wild,
.cell.circle-symbol {
  border: 1px solid #3c535c;
  border-radius: 0.12cqw;
  background: linear-gradient(#0a2944, #061725);
  box-shadow: inset 0 0 0 1px #071017, inset 0 0 0.7cqw #0008;
}
.reels.is-spinning {
  box-shadow: inset 0 0 0 1px #071116, inset 0 0 1.8cqw #42ff8c55, 0 0 1cqw #2bf36b44;
}
.reels.is-spinning::after {
  content: "";
  position: absolute;
  z-index: 8;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 3%, #b8ffe214 4%, transparent 7% 12%);
  mix-blend-mode: screen;
  animation: spin-scan 180ms linear infinite;
}
.reels.is-spinning .reel {
  animation: reel-vibration 100ms linear infinite;
  animation-delay: calc(var(--reel-index) * -17ms);
}
.reels.is-spinning .symbol-art {
  animation: symbol-spin-stream 170ms linear infinite;
  animation-delay: calc(var(--reel-index) * -29ms);
  filter: blur(0.13cqw) brightness(1.35) drop-shadow(0 0 0.35cqw #62ff9a);
}
.reels.phase-landing .reel {
  animation: reel-land 280ms cubic-bezier(0.16, 0.9, 0.3, 1.3) both;
  animation-delay: calc(var(--reel-index) * 25ms);
}
.reels.phase-landing .symbol-art {
  animation: symbol-focus 250ms ease-out both;
  animation-delay: calc(var(--reel-index) * 25ms);
}
.reels.phase-winning .cell.winning,
.reels.phase-abducting .cell.winning {
  border-color: #aaff67;
  background: radial-gradient(circle, #1f8246 0%, #0a2944 58%, #061725 100%);
  box-shadow: inset 0 0 1.25cqw #87ff5a99, 0 0 0.42cqw #74ff50, 0 0 0.9cqw #22e96b88;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.cell.winning .symbol-art {
  filter: brightness(1.6) saturate(1.4) drop-shadow(0 0 0.55cqw #a4ff62);
  transform-origin: center 86%;
  will-change: transform, opacity;
}
.reels.phase-winning .cell.winning .symbol-art {
  animation: winning-symbol-charge var(--charge-duration, 220ms) cubic-bezier(0.22, 1, 0.36, 1) both;
}
.cell.abducting::before {
  content: "";
  position: absolute;
  z-index: 9;
  inset: 1.3%;
  border: clamp(2px, 0.16cqw, 4px) solid #bfff62;
  border-radius: clamp(5px, 0.55cqw, 12px);
  box-shadow: inset 0 0 0.28cqw #f2ffc7, inset 0 0 0.86cqw #42ff6abb, 0 0 0.18cqw #fff, 0 0 0.9cqw #51ff5b;
  filter: url("#electric-wobble") brightness(1.8) drop-shadow(0 0 0.12cqw #f3ffc9) drop-shadow(0 0 0.36cqw #72ff54);
  pointer-events: none;
  clip-path: polygon(1.5% 0.8%, 18% 0, 34% 1.4%, 51% 0, 69% 1.2%, 84% 0, 98.5% 1%, 100% 17%, 98.6% 34%, 100% 51%, 98.4% 69%, 100% 84%, 98.5% 99%, 83% 100%, 66% 98.7%, 49% 100%, 31% 98.6%, 16% 100%, 1.5% 99%, 0 83%, 1.4% 67%, 0 49%, 1.5% 32%, 0 16%);
  animation: electric-cell-frame var(--abduction-duration, 840ms) linear both;
}
.cell.abducting::after {
  content: "";
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 54%;
  width: 76%;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #efff8666 0 8%, #91ff5a55 24%, #35ef6b22 52%, transparent 72%);
  box-shadow: none;
  transform: translate(-50%, -50%) scale(0);
  animation: abduction-dissolve-pulse var(--abduction-duration, 840ms) linear both;
}
.cell.abducting .symbol-art {
  z-index: 4;
  animation:
    symbol-abduct var(--abduction-duration, 840ms) cubic-bezier(0.4, 0, 0.72, 0.48) both,
    symbol-abduct-fade var(--abduction-duration, 840ms) linear both;
  transform-origin: center 86%;
}
.cell:not(.abducting) > .symbol-dissolve-pixels,
.cell:not(.abducting) > .abduction-effects { visibility: hidden; }
.symbol-dissolve-pixels {
  position: absolute;
  z-index: 6;
  inset: 7%;
  overflow: visible;
  pointer-events: none;
}
.reel[data-rows="2"] .symbol-dissolve-pixels,
.reel[data-rows="3"] .symbol-dissolve-pixels,
.reel[data-rows="4"] .symbol-dissolve-pixels { inset: 5%; }
.cell.circle-symbol .symbol-dissolve-pixels { inset: 3%; }
.symbol-dissolve-pixel {
  --pixel-start-x: 50%;
  --pixel-start-y: 50%;
  --pixel-x: 0cqw;
  --pixel-y: -5cqw;
  --pixel-delay: 0ms;
  --pixel-size: 2px;
  position: absolute;
  left: var(--pixel-start-x);
  top: var(--pixel-start-y);
  width: var(--pixel-size);
  height: var(--pixel-size);
  border-radius: 0;
  background: #dfff65;
  box-shadow: 0 0 0.16cqw #cfff63, 0 0 0.32cqw #39ef69;
  opacity: 0;
}
.cell.abducting .symbol-dissolve-pixel {
  animation:
    symbol-pixel-lift calc(var(--abduction-duration, 840ms) - var(--pixel-delay)) linear var(--pixel-delay) both,
    dissolve-speck-fade calc(var(--abduction-duration, 840ms) - var(--pixel-delay)) linear var(--pixel-delay) both;
}
.symbol-dissolve-pixel:nth-child(4n) { background: #faffbe; }
.symbol-dissolve-pixel:nth-child(4n + 1) { background: #63ff67; }
.symbol-dissolve-pixel:nth-child(7n) { background: #61eaff; box-shadow: 0 0 0.16cqw #65ecff, 0 0 0.3cqw #48ff7b; }
.symbol-dissolve-pixel:nth-child(11n) { background: #ffd952; }
.abduction-effects {
  position: absolute;
  z-index: 7;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}
.abduction-effects::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 89%;
  width: 78%;
  height: 28%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #f4ffb0 0 8%, #9aff67df 22%, #38e86370 48%, transparent 74%);
  transform: translate(-50%, -50%) scale(0);
}
.cell.abducting .abduction-effects::before { animation: abduction-flash var(--abduction-duration, 840ms) linear both; }
.abduction-effects::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 4%;
  right: 4%;
  bottom: -42%;
  height: 225%;
  background:
    linear-gradient(90deg, transparent 0 7%, #76ff5230 8% 11%, transparent 12% 22%, #d5ff7142 23% 26%, transparent 27% 39%, #5eff7450 40% 47%, transparent 48% 61%, #d0ff703d 62% 66%, transparent 67% 79%, #50ff6a38 80% 85%, transparent 86%),
    linear-gradient(0deg, #65ff7760 0%, #7fff5e3d 48%, #4cff7618 78%, transparent 100%);
  filter: blur(0.09cqw);
  mix-blend-mode: screen;
  border-radius: 0 0 50% 50% / 0 0 18% 18%;
  -webkit-mask-image: radial-gradient(ellipse 68% 108% at 50% -6%, #000 0 74%, #000c 82%, transparent 100%);
  mask-image: radial-gradient(ellipse 68% 108% at 50% -6%, #000 0 74%, #000c 82%, transparent 100%);
  transform-origin: bottom;
}
.cell.abducting .abduction-effects::after {
  animation:
    upward-light-streaks var(--abduction-duration, 840ms) linear both,
    upward-light-fade var(--abduction-duration, 840ms) linear both;
}
.abduction-particle {
  --particle-start-x: 50%;
  --particle-start-y: 50%;
  --particle-x: 0cqw;
  --particle-y: -4cqw;
  --particle-delay: 0ms;
  --particle-size: 4px;
  position: absolute;
  left: var(--particle-start-x);
  top: var(--particle-start-y);
  width: var(--particle-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #dfff67;
  box-shadow: 0 0 0.22cqw #d6ff67, 0 0 0.52cqw #22e66b;
  opacity: 0;
}
.cell.abducting .abduction-particle {
  animation:
    abduction-particle calc(var(--abduction-duration, 840ms) - var(--particle-delay)) linear var(--particle-delay) both,
    dissolve-speck-fade calc(var(--abduction-duration, 840ms) - var(--particle-delay)) linear var(--particle-delay) both;
}
.abduction-particle:nth-child(3n) { border-radius: 1px; background: #75ff45; }
.abduction-particle:nth-child(3n + 1) { background: #efff77; }
.cell.dropping .symbol-art {
  animation: symbol-drop 260ms cubic-bezier(0.12, 0.72, 0.2, 1.18) both;
  animation-delay: calc((var(--reel-index) * 13ms) + (var(--row-index) * 16ms));
}
@keyframes spin-scan {
  from { transform: translateY(-18%); }
  to { transform: translateY(18%); }
}
@keyframes reel-vibration {
  0%, 100% { transform: translateY(-0.28cqw); }
  50% { transform: translateY(0.28cqw); }
}
@keyframes symbol-spin-stream {
  0% { opacity: 0.42; transform: translateY(-24%) scaleY(1.12); }
  48% { opacity: 0.9; }
  100% { opacity: 0.42; transform: translateY(24%) scaleY(1.12); }
}
@keyframes reel-land {
  0% { transform: translateY(-7%); filter: blur(0.12cqw); }
  68% { transform: translateY(1.6%); filter: blur(0); }
  100% { transform: translateY(0); }
}
@keyframes symbol-focus {
  from { opacity: 0.45; filter: blur(0.18cqw) brightness(1.5); transform: scaleY(1.08); }
  to { opacity: 1; filter: drop-shadow(0 3px 5px #0009); transform: scaleY(1); }
}
@keyframes winning-symbol-charge {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}
@keyframes abduction-dissolve-pulse {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(0.9); }
  100% { opacity: 0; transform: translate(-50%, -72%) scale(1.8); }
}
@keyframes electric-cell-frame {
  0%, 100% { opacity: 0; }
  16%, 48% { opacity: 1; }
  72% { opacity: 0.75; }
}
@keyframes symbol-abduct {
  from { transform: var(--abduction-start, scale(1.06)); }
  to { transform: translateY(-185%) scaleX(0.12) scaleY(2.5); }
}
@keyframes symbol-abduct-fade {
  0%, 18% { opacity: 1; }
  48% { opacity: 0.68; }
  72% { opacity: 0.22; }
  100% { opacity: 0; }
}
@keyframes symbol-pixel-lift {
  from { transform: translate(-50%, -50%) scale(1.2); }
  to { transform: translate(calc(-50% + var(--pixel-x)), calc(-50% + var(--pixel-y))) scale(0.4); }
}
@keyframes dissolve-speck-fade {
  0%, 100% { opacity: 0; }
  12% { opacity: 1; }
  55% { opacity: 0.95; }
  82% { opacity: 0.4; }
}
@keyframes upward-light-streaks {
  from { transform: translateY(14%) scaleY(0.8); }
  to { transform: translateY(-24%) scaleY(1.28); }
}
@keyframes upward-light-fade {
  0%, 100% { opacity: 0; }
  20% { opacity: 0.9; }
  70% { opacity: 0.52; }
}
@keyframes abduction-flash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  22% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.4); }
}
@keyframes abduction-particle {
  from { transform: translate(-50%, -50%) rotate(0) scale(1.4); }
  to { transform: translate(calc(-50% + var(--particle-x)), calc(-50% + var(--particle-y))) rotate(180deg) scale(0.3); }
}
@keyframes symbol-drop {
  0% { opacity: 0; filter: blur(0.16cqw) brightness(1.6); transform: translateY(-72%) scaleY(1.12); }
  74% { opacity: 1; filter: blur(0); transform: translateY(5%) scaleY(0.96); }
  100% { opacity: 1; filter: drop-shadow(0 3px 5px #0009); transform: translateY(0) scaleY(1); }
}
.round-message { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* HUD slots reserve room for the longest supported bet and feature price. */
.hud {
  position: absolute; z-index: 4; bottom: calc(1.15% + 10px); left: 4%; display: grid;
  grid-template-columns: 5% 13% 17% 6% minmax(0, 1fr) 0 12% 6% 9%;
  grid-template-rows: minmax(0, 1fr);
  align-items: center; gap: .5cqw; width: 92%; max-width: none; height: 11.2%;
  margin: 0; padding: .4cqw; border: max(1px, .14cqw) solid #596d72; border-radius: 1.15cqw;
  background: linear-gradient(180deg, #123540f2, #061721f8 48%, #020b12fa);
  box-shadow: inset 0 0 0 max(1px, .08cqw) #071014, inset 0 0 1.1cqw #35ff5b12, 0 -.34cqw 1.2cqw #000a;
  font-variant-numeric: tabular-nums;
}
.hud:has(.feature-counter:not([hidden])) { grid-template-columns: 5% 12% 17% 6% minmax(0, 1fr) 7% 12% 6% 9%; }
.hud > * { min-width: 0; min-height: 0; max-width: 100%; }
.hud [hidden] { display: none !important; }
.hud button { margin: 0; line-height: 1; -webkit-tap-highlight-color: transparent; }
.hud [data-fit-amount] { display: block; width: 100%; min-width: 0; white-space: nowrap; font-size: calc(var(--amount-size) * var(--amount-scale, 1)); line-height: 1.12; }
.menu-button { grid-column: 1; width: 100%; min-width: 0; height: 100%; padding: .3cqw 0; border-radius: .72cqw; align-content: center; gap: .5cqw; }
.menu-button span { font-size: 1.3cqw; line-height: 1; }
.menu-button b, .meter span, .feature-counter span, .bet-control span, .buy-feature span { font-size: .8cqw; line-height: 1.15; letter-spacing: .06em; white-space: nowrap; }
.meter { grid-column: 2; display: grid; align-content: center; gap: .3cqw; padding: 0 .5cqw; height: 80%; border-right: max(1px, .06cqw) solid #46616a; }
.meter strong { --amount-size: 1.85cqw; }
.bet-section { grid-column: 3; display: grid; align-items: center; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: .45cqw; height: 100%; padding: 0 .25cqw; }
.bet-control { display: grid; grid-template-columns: 2.6cqw minmax(0, 1fr) 2.6cqw; align-items: center; gap: .3cqw; width: 100%; }
.bet-control > div { min-width: 0; display: grid; gap: .12cqw; text-align: center; }
.bet-control button { display: grid; place-items: center; justify-self: center; width: 2.5cqw; height: 2.5cqw; min-width: 0; min-height: 0; padding: 0; border: max(1px, .1cqw) solid #557e8d; border-radius: 50%; background: #071621; color: #c6eff3; }
.bet-control button svg { display: block; width: 54%; height: 54%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.bet-control button:disabled { opacity: .4; cursor: default; }
.bet-control strong { --amount-size: 1.75cqw; }
.max-bet { grid-column: 4; color: #9cff75; font-size: .8cqw; font-weight: 900; letter-spacing: .08em; }
.win-panel { grid-column: 5; align-self: stretch; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; gap: .18cqw; padding: .15cqw .55cqw; border-inline: max(1px, .06cqw) solid #46616a; }
.win-panel span { font-size: .8cqw; line-height: 1; color: var(--gold); letter-spacing: .1em; white-space: nowrap; }
.win-panel strong { --amount-size: 2.55cqw; }
.win-panel small { grid-column: 1; font-size: .65cqw; min-height: 0; line-height: 1.1; white-space: nowrap; }
.win-panel small:empty { display: none; }
.feature-counter { grid-column: 6; display: grid !important; align-content: center; gap: .3cqw; padding: 0 .25cqw; min-width: 0; height: 80%; border: 0; }
.feature-counter strong { font-size: 1.7cqw; line-height: 1.2; }
.buy-feature, .auto-play, .max-bet { display: grid; grid-template-rows: auto auto; align-content: center; justify-items: center; gap: .65cqw; width: 100%; min-width: 0; height: 100%; padding: .5cqw .55cqw; border: max(1px, .09cqw) solid #587681; border-radius: .7cqw; background: linear-gradient(180deg, #153541, #06141d 70%); box-shadow: inset 0 0 0 max(1px, .05cqw) #050a0d, inset 0 0 .5cqw #39ff5b12; cursor: pointer; }
.buy-feature { grid-column: 7; }
.max-bet { grid-template-rows: minmax(0, 1fr); place-items: center; gap: 0; }
.buy-feature span { color: #b8dce2; font-weight: 900; }
.buy-feature strong { --amount-size: 1.65cqw; color: var(--gold); }
.auto-play { grid-column: 8; color: #9cff75; }
.auto-play span { display: block; font-size: 2.2cqw; line-height: 1.2; font-weight: 900; }
.auto-play b { font-size: .8cqw; letter-spacing: .08em; line-height: 1; }
.auto-play.active { color: #e7ffcf; border-color: #9dff63; box-shadow: inset 0 0 0 max(1px, .05cqw) #050a0d, 0 0 .6cqw #63ff5477; }
.spin { grid-column: 9; z-index: 7; justify-self: center; place-items: center; min-width: 0; width: auto; max-width: none; height: 185%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: url("./assets/ui/spin-button.png") center / contain no-repeat; box-shadow: none; filter: drop-shadow(0 0 .72cqw #52ff59aa); translate: 14% -6px; transition: transform 150ms cubic-bezier(.23,1,.32,1), filter 150ms ease, opacity 150ms ease; touch-action: none; }
.spin.stop-mode { background-image: url("./assets/ui/stop-button.png"); }
.spin:hover:not(:disabled) { transform: scale(1.035); filter: drop-shadow(0 0 .8cqw #7dff62cc); }
.spin:active:not(:disabled) { transform: scale(.965); }
.spin span, .spin b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.max-bet:disabled, .buy-feature:disabled, .auto-play:disabled { cursor: default; opacity: .42; filter: saturate(.45); }
.hud button:focus-visible { outline: 2px solid #a3ff70; outline-offset: 2px; }
@media (max-width: 760px) and (orientation: portrait) {
  /* Remove containment so the fixed controls sit in the viewport, not the short board. */
  .game-shell { container-type: normal; margin-bottom: 220px; }
  .hud, .hud:has(.feature-counter:not([hidden])) { position: fixed; inset: auto 8px max(8px, env(safe-area-inset-bottom)); width: auto; height: 208px; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: 48px 64px 64px; gap: 7px; padding: 8px; border-radius: 14px; }
  .menu-button { grid-column: 1; grid-row: 1; border-radius: 9px; gap: 5px; }
  .menu-button span { font-size: 18px; }
  .menu-button b, .meter span, .feature-counter span, .bet-control span, .buy-feature span { font-size: 10px; letter-spacing: .04em; }
  .meter { grid-column: 2 / 4; grid-row: 1; gap: 3px; padding: 0 5px; height: 100%; }
  .meter strong { --amount-size: 21px; }
  .win-panel { grid-column: 4 / 7; grid-row: 1; gap: 2px; border-right: 0; padding: 0 5px; }
  .win-panel span { font-size: 10px; }
  .win-panel strong { --amount-size: 23px; }
  .win-panel small { font-size: 9px; }
  .bet-section { grid-column: 1 / 5; grid-row: 2; grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 0; }
  .bet-control { grid-template-columns: 32px minmax(0, 1fr) 32px; gap: 3px; }
  .bet-control button { width: 32px; height: 32px; }
  .bet-control strong { --amount-size: 20px; }
  .max-bet { grid-column: 5 / 7; grid-row: 2; width: 100%; height: 64px; padding: 6px; font-size: 11px; border-radius: 9px; }
  .buy-feature { grid-column: 1 / 3; grid-row: 3; gap: 7px; padding: 6px; border-radius: 9px; }
  .buy-feature strong { --amount-size: 22px; }
  .auto-play { grid-column: 3 / 5; grid-row: 3; gap: 5px; padding: 6px; border-radius: 9px; }
  .auto-play span { font-size: 28px; }
  .auto-play b { font-size: 11px; }
  .spin { grid-column: 5 / 7; grid-row: 3; width: 64px; height: 64px; }
  .feature-counter { grid-column: 1 / 7; grid-row: 4; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 8px; height: 100%; padding: 0; }
  .feature-counter strong { font-size: 23px; }
  .hud:has(.feature-counter:not([hidden])) { height: 247px; grid-template-rows: 48px 64px 64px 32px; }
  .game-shell:has(.feature-counter:not([hidden])) { margin-bottom: 259px; }
}
.buy-dialog {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, #143b3966, #01060bdd 68%);
  backdrop-filter: blur(0.18cqw);
}
.buy-dialog[hidden] { display: none; }
.buy-dialog-card {
  position: relative;
  display: grid;
  place-items: center;
  width: 29%;
  padding: 1.7cqw 2cqw 1.5cqw;
  border: max(2px, 0.16cqw) solid #7e9398;
  border-radius: 1cqw;
  background:
    radial-gradient(ellipse at 50% 115%, #3fff5b33, transparent 56%),
    linear-gradient(180deg, #123642f8, #04131cfb 72%);
  box-shadow: inset 0 0 0 max(1px, 0.08cqw) #061015, inset 0 0 1.4cqw #31ff5b20, 0 0.8cqw 2.4cqw #000d, 0 0 1cqw #4cff5a44;
  text-align: center;
}
.buy-dialog-close {
  position: absolute;
  top: 0.55cqw;
  right: 0.55cqw;
  width: 1.9cqw;
  min-width: 24px;
  aspect-ratio: 1;
  border: max(1px, 0.07cqw) solid #68818a;
  border-radius: 50%;
  background: #07151e;
  color: #b9d9df;
  font-size: clamp(14px, 1.2cqw, 25px);
  cursor: pointer;
}
.buy-kicker { color: #8dff69; font-size: clamp(9px, 0.82cqw, 17px); font-weight: 1000; letter-spacing: 0.18em; }
.buy-dialog h2 { margin: 0.35cqw 0 0; color: var(--gold); font-size: clamp(25px, 2.45cqw, 50px); line-height: 1; text-shadow: 0 2px 2px #000, 0 0 0.42cqw #ffb52b66; }
.buy-dialog p { margin: 0.75cqw 0; color: #b8d9df; font-size: clamp(9px, 0.82cqw, 17px); line-height: 1.35; }
.buy-dialog-card > strong { color: white; font-size: clamp(24px, 2.3cqw, 47px); line-height: 1; }
.buy-dialog-actions { display: grid; grid-template-columns: 1fr 1.45fr; gap: 0.55cqw; width: 100%; margin-top: 1.1cqw; }
.buy-dialog-actions button {
  min-height: 2.5cqw;
  border: max(1px, 0.08cqw) solid #617982;
  border-radius: 0.55cqw;
  background: linear-gradient(#173744, #07151e);
  color: #b9d8de;
  font-size: clamp(8px, 0.72cqw, 15px);
  font-weight: 1000;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.buy-dialog-actions #buy-dialog-confirm {
  border-color: #a1ff6e;
  background: linear-gradient(#73ff4a, #16a942);
  color: #041b0b;
  box-shadow: 0 0 0.62cqw #50ff6355, inset 0 0 0 max(1px, 0.08cqw) #148132;
}

.credit-dialog {
  position: absolute;
  z-index: 40;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  background: radial-gradient(circle, #173f3970, #01060be8 70%);
  backdrop-filter: blur(4px);
}
.credit-dialog[hidden] { display: none; }
.credit-dialog-card {
  width: clamp(270px, 34%, 520px);
  padding: clamp(14px, 1.6cqw, 30px);
  border: max(2px, .14cqw) solid #6d858b;
  border-radius: clamp(12px, .9cqw, 20px);
  background: radial-gradient(ellipse at 50% 115%, #44ff592b, transparent 58%), linear-gradient(180deg, #143845, #06151e 75%);
  box-shadow: inset 0 0 0 1px #061014, 0 12px 36px #000d, 0 0 24px #45ff5540;
  text-align: center;
}
.credit-kicker { color: #92ff71; font-size: clamp(9px, .72cqw, 14px); font-weight: 1000; letter-spacing: .16em; }
.credit-dialog h2 { margin: .35em 0 .25em; color: var(--gold); font-size: clamp(23px, 2.1cqw, 42px); line-height: 1; }
.credit-dialog p { margin: 0 auto 1em; color: #c3dce1; font-size: clamp(12px, .86cqw, 17px); line-height: 1.4; }
.credit-dialog-actions { display: grid; grid-template-columns: .7fr 1.4fr; gap: 8px; }
.credit-dialog-actions button { min-height: 42px; padding: 7px 10px; border: 1px solid #617982; border-radius: 8px; background: linear-gradient(#173744, #07151e); color: #c1dce2; font-size: clamp(10px, .76cqw, 15px); font-weight: 1000; letter-spacing: .05em; cursor: pointer; }
#credit-dialog-action { border-color: #9cff70; background: linear-gradient(#7cff4c, #18aa42); color: #05210d; box-shadow: 0 0 14px #4cff5d55; }

.rotate-notice { display: none; }

@media (orientation: landscape) and (max-height: 560px) {
  .hud, .hud:has(.feature-counter:not([hidden])) { bottom: calc(.7% + 10px); height: max(13.5%, 44px); padding: 3px; gap: 3px; border-width: 1px; border-radius: 9px; }
  .menu-button { gap: 2px; border-radius: 6px; }
  .menu-button span { font-size: clamp(13px, 4.4vh, 18px); }
  .menu-button b, .meter span, .feature-counter span, .bet-control span, .buy-feature span { font-size: clamp(7px, 2.25vh, 10px); letter-spacing: .04em; }
  .meter { gap: 1px; padding-inline: 3px; }
  .meter strong { --amount-size: clamp(14px, 4.4vh, 19px); }
  .bet-section { padding: 0; }
  .bet-control { grid-template-columns: clamp(24px, 8vh, 31px) minmax(0, 1fr) clamp(24px, 8vh, 31px); gap: 2px; }
  .bet-control button { width: clamp(24px, 8vh, 31px); height: clamp(24px, 8vh, 31px); }
  .bet-control strong { --amount-size: clamp(14px, 4.4vh, 19px); }
  .max-bet { font-size: clamp(7px, 2.25vh, 10px); border-radius: 6px; }
  .win-panel { gap: 0; padding-inline: 3px; }
  .win-panel span { font-size: clamp(7px, 2.25vh, 10px); }
  .win-panel strong { --amount-size: clamp(18px, 5.6vh, 25px); }
  .win-panel small { font-size: clamp(6px, 1.9vh, 9px); }
  .feature-counter { gap: 1px; padding: 0 2px; }
  .feature-counter strong { font-size: clamp(14px, 4.5vh, 20px); }
  .buy-feature, .auto-play, .max-bet { padding: 3px; gap: 2px; border-radius: 6px; }
  .buy-feature strong { --amount-size: clamp(11px, 3.5vh, 16px); }
  .auto-play span { font-size: clamp(18px, 5.7vh, 26px); }
  .auto-play b { font-size: clamp(7px, 2.25vh, 10px); }
  .credit-dialog-card { width: min(410px, 75%); padding: 12px 16px; }
  .credit-dialog h2 { font-size: clamp(21px, 7vh, 34px); }
  .credit-dialog p { margin-bottom: 8px; font-size: clamp(11px, 3.5vh, 15px); }
  .credit-dialog-actions button { min-height: 34px; }
}

/* Very short mobile browsers leave a narrow 16:9 stage after their address bar.
   Redistribute the controls so complete money values stay legible. */
@container (max-width: 600px) {
  .hud, .hud:has(.feature-counter:not([hidden])) {
    grid-template-columns: 6fr 14fr 22fr 9fr 14fr 15fr 8fr 12fr;
    gap: 1px;
    height: max(17%, 46px);
  }
  .menu-button { grid-column: 1; }
  .menu-button b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .meter { grid-column: 2; }
  .bet-section { grid-column: 3; }
  .bet-control { grid-template-columns: 22px minmax(0, 1fr) 22px; gap: 1px; }
  .bet-control button { width: 22px; height: 22px; }
  .max-bet { grid-column: 4; }
  .win-panel { grid-column: 5; }
  .buy-feature { grid-column: 6; }
  .auto-play { grid-column: 7; }
  .spin { grid-column: 8; }
  .hud:has(.feature-counter:not([hidden])) .buy-feature { display: none !important; }
  .hud:has(.feature-counter:not([hidden])) .feature-counter { grid-column: 6; }
  .hud:has(.feature-counter:not([hidden])) .auto-play { grid-column: 7; }
  .hud:has(.feature-counter:not([hidden])) .spin { grid-column: 8; }
}

@media (orientation: portrait) {
  body { min-width: 0; }
  .game-shell, #game-menu, body > .board-win { visibility: hidden !important; pointer-events: none !important; }
  .rotate-notice {
    position: fixed;
    z-index: 100001;
    inset: 0;
    display: flex;
    height: 100svh;
    height: var(--viewport-height, 100dvh);
    overflow: hidden;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: clamp(8px, 1.8dvh, 16px);
    padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    background: radial-gradient(circle at 50% 36%, #13612f99, transparent 33%), linear-gradient(#04172eaa, #020c18e8), url("./assets/ui/game-bg-v2.png") center / cover;
    color: white;
    text-align: center;
  }
  .rotate-notice::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #64ff7a13, transparent); backdrop-filter: blur(4px); }
  .rotate-notice > * { position: relative; z-index: 1; }
  .rotate-notice img { width: min(62vw, 280px); max-height: 24dvh; object-fit: contain; filter: drop-shadow(0 8px 12px #000b) drop-shadow(0 0 18px #38ff6255); }
  .rotate-device { position: relative; width: 58px; height: 94px; margin: 5px 0 12px; border: 4px solid #9cff70; border-radius: 13px; background: radial-gradient(circle at 50% 25%, #19643a, #04151f 70%); box-shadow: inset 0 0 0 2px #49656a, 0 0 24px #53ff6377; animation: alien-turn 2.2s cubic-bezier(.6,-.1,.35,1.12) infinite; }
  .rotate-device::before { content: ""; position: absolute; inset: 7px; border: 1px solid #6dff83; border-radius: 7px; opacity: .65; }
  .rotate-device span { position: absolute; left: 50%; bottom: 3px; width: 9px; height: 3px; border-radius: 3px; background: #9cff70; translate: -50% 0; }
  .rotate-notice h2 { margin: 0; color: #efffc7; font-size: clamp(28px, 8vw, 46px); line-height: 1; text-shadow: 0 3px 4px #001408, 0 0 18px #45ff61; }
  .rotate-notice p { margin: 0; color: #c9e3e7; font-size: clamp(14px, 4vw, 19px); }
  #enter-landscape { min-height: 44px; margin-top: 5px; padding: 10px 22px; border: 2px solid #baff8f; border-radius: 999px; background: linear-gradient(#75ff4d, #16a941); color: #041e0b; font-weight: 1000; letter-spacing: .07em; box-shadow: 0 0 20px #50ff6266; }
}
@keyframes alien-turn { 0%, 22%, 100% { transform: rotate(0); } 58%, 80% { transform: rotate(90deg); } }
@media (prefers-reduced-motion: reduce) { .rotate-device { animation: none; transform: rotate(90deg); } }
.menu-panel { position: absolute; left: 1.5%; bottom: 11.5%; width: 18%; padding: 0.8cqw; border-width: max(1px, 0.14cqw); border-radius: 0.7cqw; }
.menu-panel header { font-size: clamp(7px, 0.72cqw, 15px); }
.menu-panel header button { width: 1.7cqw; min-width: 18px; height: 1.7cqw; min-height: 18px; }
.menu-panel p, .menu-panel .turbo { font-size: clamp(6px, 0.62cqw, 13px); }
.menu-panel .turbo { display: block !important; padding: 0.65cqw 0 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  .stage-video { display: none; }
}