/* Slot kit styles. Every colour, font and image comes from tokens that the
   game's theme.json sets on :root at boot (see client/main.js applyTheme). */
:root {
  --accent: #ff2bd6;
  --accent-hot: #ff4fa3;
  --accent-2: #22e6ff;
  --accent-4: #3b6bff;
  --accent-3: #8a2bff;
  --highlight: #ffd23f;
  --ink: #0b0420;
  --font-display: system-ui, sans-serif;
  --font-body: system-ui, sans-serif;
  --bg-image: none;
  --frame-image: none;
  --frame-slice: 0;
  --panel: rgba(12, 6, 34, 0.78);
  --cell: 176px;
  --gap: 8px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--ink); color: #fff;
  font-family: var(--font-body), system-ui, sans-serif;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }

/* ---------- backdrop ---------- */
.bg {
  position: fixed; inset: -2%;
  background: var(--bg-image) center / cover no-repeat;
  animation: drift 40s ease-in-out infinite alternate;
}
.bg-tint {
  position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(8, 2, 28, 0.55) 100%);
  transition: background 1s;
}
body.free .bg { filter: hue-rotate(-35deg) saturate(1.25) brightness(0.9); }
body.free .bg-tint { background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--highlight) 6%, transparent) 20%, rgba(40, 0, 30, 0.6) 100%); }
@keyframes drift { from { transform: scale(1.02) translateX(-0.6%); } to { transform: scale(1.05) translateX(0.6%); } }

.rain {
  position: fixed; inset: 0; pointer-events: none; opacity: 0.18;
  background-image: repeating-linear-gradient(104deg, transparent 0 22px, rgba(160, 220, 255, 0.5) 22px 23px, transparent 23px 61px);
  background-size: 300px 300px;
  animation: rain 0.45s linear infinite;
  mix-blend-mode: screen;
}
@keyframes rain { to { background-position: -60px 300px; } }

/* ---------- stage (fixed design resolution, scaled to fit) ---------- */
.stage {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform-origin: 0 0;
}
.stage.portrait { width: 1080px; height: 1920px; }

.character {
  position: absolute; left: -10px; top: 150px; height: 930px;
  filter: drop-shadow(0 0 30px color-mix(in srgb, var(--accent) 35%, transparent));
  animation: breathe 5s ease-in-out infinite;
  transform-origin: 50% 100%;
}
@keyframes breathe { 50% { transform: translateY(-6px) scale(1.006); } }
.portrait .character { left: -90px; top: 990px; height: 620px; }

.logo {
  /* its own box, a safe margin below the screen's top: any logo is fitted inside it, never cropped or
     run off the screen (Gate B checks the logo inside the viewport at every size) */
  position: absolute; left: 50%; top: 8px; width: 520px; margin-left: -260px; aspect-ratio: 1400 / 600; height: auto; object-fit: contain;
  filter: drop-shadow(0 6px 24px color-mix(in srgb, var(--accent) 45%, transparent));
  animation: flicker 7s infinite; pointer-events: none; z-index: 5;
}
.portrait .logo { width: 620px; margin-left: -310px; top: 56px; }
@keyframes flicker { 0%, 92%, 96%, 100% { opacity: 1; } 93% { opacity: 0.75; } 95% { opacity: 0.9; } }

/* ---------- frame + reels ---------- */
/* The frame art is a 9-sliced Higgsfield render (assets/frame.png, 1600x904,
   window 178,138 -> 1422,757) so corners, chains and hazard plates keep their
   proportions whatever the window size. */
.frame {
  position: absolute; left: 492px; top: 228px; width: 936px; height: 552px; padding: 12px;
  background: linear-gradient(180deg, #120c30, #06031a);
  z-index: 3;
}
.portrait .frame { left: 72px; top: 372px; }
.frame-art {
  position: absolute; inset: -76px -98px -81px -98px; pointer-events: none; z-index: 5;
  border-style: solid; border-width: 76px 98px 81px 98px;
  border-image: var(--frame-image) var(--frame-slice) stretch;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 35%, transparent));
  transition: filter 0.8s;
}
.portrait .frame-art { inset: -62px -80px -66px -80px; border-width: 62px 80px 66px 80px; }
body.free .frame-art { filter: sepia(1) saturate(2.8) hue-rotate(-12deg) brightness(1.08) drop-shadow(0 0 22px color-mix(in srgb, var(--highlight) 55%, transparent)); }
.frame-art::after { /* light sweep along the frame */
  content: ''; position: absolute; inset: -76px -98px -81px -98px; pointer-events: none;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.22) 50%, transparent 60%) no-repeat;
  background-size: 300% 100%; mix-blend-mode: screen;
  -webkit-mask: var(--frame-image) center / 100% 100% no-repeat; mask: var(--frame-image) center / 100% 100% no-repeat;
  animation: sweep 6s ease-in-out infinite;
}
@keyframes sweep { 0%, 60% { background-position: 120% 0; } 100% { background-position: -20% 0; } }
.portrait .frame-art::after { inset: -62px -80px -66px -80px; }

.reels {
  position: relative; width: 912px; height: 528px;
  display: grid; grid-template-columns: repeat(5, var(--cell)); gap: var(--gap);
}
.reel {
  position: relative; height: 528px; overflow: hidden; border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.55)),
    linear-gradient(180deg, #0d0a26, #050314);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 35%, transparent), inset 0 0 18px color-mix(in srgb, var(--accent-3) 35%, transparent);
}
.reel::after { /* divider glow */
  content: ''; position: absolute; top: 0; bottom: 0; right: -5px; width: 2px;
  background: linear-gradient(180deg, transparent, var(--accent-2), transparent); opacity: 0.4;
}
.cell {
  position: absolute; left: 0; top: 0; width: var(--cell); height: var(--cell);
  display: grid; place-items: center; will-change: transform;
}
.cell img {
  width: 92%; height: 92%; object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.6));
  transition: filter 0.25s, opacity 0.25s;
}
.cell[data-sym="0"] img, .cell[data-sym="1"] img { width: 100%; height: 100%; }
.reel.blur .cell img { filter: blur(1.4px) brightness(1.15); transform: scaleY(1.08); }
.reel.anticipate {
  box-shadow: inset 0 0 0 2px var(--highlight), inset 0 0 40px color-mix(in srgb, var(--highlight) 70%, transparent), 0 0 40px color-mix(in srgb, var(--highlight) 60%, transparent);
  animation: pulse-reel 0.35s ease-in-out infinite alternate;
}
@keyframes pulse-reel { to { box-shadow: inset 0 0 0 3px #fff, inset 0 0 60px color-mix(in srgb, var(--highlight) 90%, transparent), 0 0 60px color-mix(in srgb, var(--accent) 80%, transparent); } }

.reels.dim .cell img { opacity: 0.32; filter: grayscale(0.4) brightness(0.6); }
.reels.dim .cell.hit img, .reels .cell.hit img { opacity: 1; filter: drop-shadow(0 0 14px #fff) drop-shadow(0 0 22px var(--accent)); }
.cell.hit img { animation: hit 0.6s ease-in-out infinite alternate; }
/* video win animation (black = transparent via screen blend) */
canvas.anim {
  position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%) scale(0.94);
  mix-blend-mode: screen; pointer-events: none; animation: anim-in 0.25s ease-out;
}
.cell[data-sym="0"] canvas.anim, .cell[data-sym="1"] canvas.anim, .sticky canvas.anim { transform: translate(-50%, -50%) scale(1.04); }
@keyframes anim-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.7); } }
.cell.animating img, .sticky.animating img { opacity: 0 !important; animation: none; }
@keyframes hit { from { transform: scale(1); } to { transform: scale(1.1); } }
.cell.hit::before {
  content: ''; position: absolute; inset: 6px; border-radius: 14px;
  border: 2px solid var(--line, var(--accent-2)); box-shadow: 0 0 14px var(--line, var(--accent-2)), inset 0 0 14px var(--line, var(--accent-2));
}
.cell.bonus-hit img { animation: bonus-shake 0.12s linear infinite alternate; filter: drop-shadow(0 0 20px var(--accent)) brightness(1.3); }
@keyframes bonus-shake { from { transform: rotate(-4deg) scale(1.12); } to { transform: rotate(4deg) scale(1.16); } }
.cell.landed-bonus img { animation: pop 0.45s ease-out; }
@keyframes pop { 40% { transform: scale(1.25); filter: brightness(1.8) drop-shadow(0 0 30px var(--accent)); } }

.sticky-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.sticky {
  position: absolute; width: var(--cell); height: var(--cell); display: grid; place-items: center;
  border-radius: 12px;
  /* opaque base: the reel symbol underneath must never show through */
  background: radial-gradient(circle, color-mix(in srgb, var(--highlight) 25%, transparent), color-mix(in srgb, var(--accent) 15%, transparent) 60%, transparent 72%), #0b0722;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--highlight) 80%, transparent), 0 0 18px color-mix(in srgb, var(--highlight) 50%, transparent);
}
.sticky img { width: 100%; height: 100%; animation: sticky-glow 1.2s ease-in-out infinite alternate; }
.sticky.new { animation: lock 0.6s cubic-bezier(.2, 1.6, .4, 1); }
.sticky .chain {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  font: 700 13px var(--font-display); letter-spacing: 2px; color: var(--highlight);
  text-shadow: 0 0 6px #000, 0 0 10px var(--accent);
}
@keyframes lock { from { transform: scale(1.8); opacity: 0; filter: brightness(3); } }
@keyframes sticky-glow { to { filter: drop-shadow(0 0 16px var(--highlight)) brightness(1.15); } }

.lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; }
.lines polyline {
  fill: none; stroke-width: 7; stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 2px #fff);
  stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: draw 0.45s ease-out forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.line-label {
  position: absolute; z-index: 4; transform: translate(-50%, -50%) scale(0.6); opacity: 0;
  padding: 6px 18px; border-radius: 999px; white-space: nowrap;
  font: 900 30px var(--font-display); color: #fff; background: rgba(8, 4, 26, 0.9);
  border: 2px solid currentColor; box-shadow: 0 0 18px currentColor;
  transition: transform 0.25s cubic-bezier(.2, 1.6, .4, 1), opacity 0.2s;
}
.line-label.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.line-label span { color: #fff; }

/* ---------- side panel ---------- */
.side-panel { position: absolute; left: 1556px; top: 300px; width: 340px; display: grid; gap: 22px; z-index: 2; }
.portrait .side-panel { left: 440px; top: 1040px; width: 610px; }
.promo {
  text-align: center; padding: 20px 18px; border-radius: 18px; background: var(--panel);
  border: 2px solid color-mix(in srgb, var(--accent-2) 60%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--accent-2) 35%, transparent), inset 0 0 20px color-mix(in srgb, var(--accent-3) 30%, transparent);
  backdrop-filter: blur(6px);
}
.promo-k { font: 700 22px var(--font-display); letter-spacing: 4px; color: var(--accent-2); text-shadow: 0 0 10px var(--accent-2); }
.promo-v {
  font: 900 72px/1 var(--font-display); color: #fff; margin: 6px 0;
  text-shadow: 0 0 10px var(--accent), 0 0 30px var(--accent), 0 0 60px var(--accent);
  animation: glow 2.4s ease-in-out infinite alternate;
}
@keyframes glow { to { text-shadow: 0 0 8px var(--accent), 0 0 20px var(--accent), 0 0 40px var(--accent-3); } }
.promo.small { display: flex; align-items: center; gap: 14px; text-align: left; font-size: 21px; font-weight: 600; line-height: 1.25; border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 30%, transparent); }
.promo.small img { width: 92px; flex: none; }
.hl { color: var(--accent-hot); text-shadow: 0 0 8px var(--accent); font-weight: 700; }
.fs-panel { display: none; text-align: center; padding: 22px; border-radius: 18px; background: var(--panel); border: 2px solid var(--highlight); box-shadow: 0 0 30px color-mix(in srgb, var(--highlight) 50%, transparent); }
body.free .promo { display: none; }
body.free .fs-panel { display: block; }
.fs-k { font: 700 22px var(--font-display); letter-spacing: 4px; color: var(--highlight); }
.fs-k.gap { margin-top: 18px; }
.fs-v { font: 900 110px/1.05 var(--font-display); text-shadow: 0 0 16px var(--highlight), 0 0 40px var(--accent); }
.fs-v.bump { animation: bump 0.5s; }
@keyframes bump { 40% { transform: scale(1.3); color: var(--highlight); } }
.fs-win { font: 900 46px var(--font-display); color: #fff; text-shadow: 0 0 12px var(--accent-2); }

/* ---------- message + HUD ---------- */
.message {
  position: absolute; left: 492px; width: 936px; top: 806px; z-index: 7; text-align: center; pointer-events: none;
  font: 700 22px var(--font-display); letter-spacing: 3px; color: var(--accent-2); text-shadow: 0 0 10px var(--accent-2); white-space: nowrap;
}
.message span {
  display: inline-block; padding: 6px 26px; border-radius: 10px; min-width: 360px;
  background: rgba(4, 2, 16, 0.92); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 50%, transparent), 0 0 14px color-mix(in srgb, var(--accent-2) 35%, transparent);
}
.message.win { color: var(--highlight); text-shadow: 0 0 12px var(--highlight), 0 0 24px var(--accent); }
.portrait .message { left: 72px; top: 932px; }

.hud {
  position: absolute; left: 0; right: 0; bottom: 0; height: 190px; z-index: 6;
  display: grid; grid-template-columns: 1fr 1fr 200px 1fr 1fr; align-items: center; padding: 0 60px; gap: 20px;
  background: linear-gradient(180deg, transparent, rgba(6, 2, 20, 0.85) 35%, rgba(6, 2, 20, 0.96));
  border-top: 1px solid color-mix(in srgb, var(--accent-2) 0%, transparent);
}
.hud::before {
  content: ''; position: absolute; left: 4%; right: 4%; top: 52px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), var(--accent), transparent); opacity: 0.7;
}
/* Portrait HUD: three rows (balance | spin | win, the bet row, the tools row) sized for
   phones. The stage is scaled to 1/3 at 360 px wide, so a tap target needs >= 132 design
   px and text >= 36 design px to meet Gate B (44 px targets, 12 px text). */
.portrait .hud {
  height: 640px; grid-template-columns: 1fr 230px 1fr; grid-template-rows: 216px 196px 140px; padding: 24px 40px 30px; gap: 16px 20px;
  grid-template-areas: "balance spin win" "bet bet bet" "tools tools tools"; align-items: center;
  background: linear-gradient(180deg, transparent, rgba(6, 2, 20, 0.88) 12%, rgba(6, 2, 20, 0.96));
}
.portrait .hud .balance { grid-area: balance; } .portrait .hud .win { grid-area: win; }
.portrait .hud .bet { grid-area: bet; } .portrait .hud .spin-wrap { grid-area: spin; } .portrait .hud .tools { grid-area: tools; }
.portrait .hud::before { top: 20px; }

.meter { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 30px; }
.portrait .meter { margin-top: 0; }
.meter .k { font: 700 18px var(--font-display); letter-spacing: 3px; color: var(--accent-2); opacity: 0.9; }
.meter .v { font: 700 38px var(--font-display); font-variant-numeric: tabular-nums; text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent); }
.meter.win .v { color: var(--highlight); text-shadow: 0 0 12px color-mix(in srgb, var(--highlight) 70%, transparent); }
.meter.win .v.pop { animation: bump 0.4s; }
.bet-row { display: flex; align-items: center; gap: 16px; }
.round-btn {
  width: 48px; height: 48px; border-radius: 50%; font: 700 30px/1 var(--font-display);
  border: 2px solid var(--accent-2); color: var(--accent-2); box-shadow: 0 0 10px color-mix(in srgb, var(--accent-2) 50%, transparent); background: rgba(10, 6, 30, 0.8);
}
.round-btn:active { transform: scale(0.92); }
.round-btn:disabled, .tool:disabled { opacity: 0.35; cursor: default; }

.spin-wrap { display: grid; place-items: center; }
.spin {
  position: relative; width: 170px; height: 170px; border-radius: 50%; margin-top: -40px;
  color: #fff;
  background: radial-gradient(circle at 50% 35%, #ff7be8, var(--accent) 45%, #8a0d74 100%);
  box-shadow: 0 0 0 6px #120a2c, 0 0 0 9px var(--accent-2), 0 0 30px 8px color-mix(in srgb, var(--accent) 80%, transparent), inset 0 -10px 20px rgba(0, 0, 0, 0.35), inset 0 6px 14px rgba(255, 255, 255, 0.4);
  transition: transform 0.12s, filter 0.2s;
}
.portrait .spin { margin-top: 0; width: 200px; height: 200px; }
.spin::before { /* glass highlight */
  content: ''; position: absolute; left: 18%; right: 18%; top: 7%; height: 38%; border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.spin::after { /* inner glow ring */
  content: ''; position: absolute; inset: 10px; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35), 0 0 0 1px rgba(138, 13, 116, 0.6);
}
.spin svg { position: relative; z-index: 1; width: 62%; height: 62%; filter: drop-shadow(0 3px 3px rgba(80, 0, 60, 0.6)); transition: transform 0.5s; }
.spin:hover svg { transform: rotate(180deg); }
.spin:active { transform: scale(0.94); }
.spin.busy svg { animation: spin-icon 0.6s linear infinite; }
.spin.busy { filter: saturate(0.6) brightness(0.85); }
.spin.auto { box-shadow: 0 0 0 6px #120a2c, 0 0 0 9px var(--highlight), 0 0 34px 10px color-mix(in srgb, var(--highlight) 70%, transparent), inset 0 -10px 20px rgba(0, 0, 0, 0.35); }
@keyframes spin-icon { to { transform: rotate(360deg); } }
.auto-count { position: absolute; inset: 0; display: grid; place-items: center; font: 900 40px var(--font-display); text-shadow: 0 0 8px #000; pointer-events: none; }
.spin.auto svg { opacity: 0.25; }

.tools { display: flex; gap: 12px; justify-content: center; margin-top: 30px; }
.portrait .tools { margin-top: 0; }
.tool {
  min-width: 82px; height: 52px; padding: 0 12px; border-radius: 12px;
  font: 700 15px var(--font-display); letter-spacing: 2px;
  border: 2px solid color-mix(in srgb, var(--accent-2) 60%, transparent); background: rgba(10, 6, 30, 0.8); color: var(--accent-2);
}
.tool.on { border-color: var(--accent); color: #fff; background: color-mix(in srgb, var(--accent) 30%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 70%, transparent); }
.tool.off { opacity: 0.5; text-decoration: line-through; }

.demo-tag { position: absolute; right: 24px; top: 16px; font: 600 16px var(--font-display); letter-spacing: 2px; color: rgba(255, 255, 255, 0.55); z-index: 6; }

/* ---------- overlays ---------- */
.overlay {
  position: absolute; inset: 0; z-index: 20; display: none; place-items: center; align-content: center; text-align: center;
  background: radial-gradient(circle, rgba(30, 0, 50, 0.55), rgba(5, 0, 18, 0.9));
  cursor: pointer;
}
.overlay.show { display: grid; animation: fade 0.3s; }
@keyframes fade { from { opacity: 0; } }
.rays {
  position: absolute; left: 50%; top: 50%; width: 2400px; height: 2400px; margin: -1200px 0 0 -1200px; pointer-events: none;
  background: repeating-conic-gradient(color-mix(in srgb, var(--accent) 18%, transparent) 0 6deg, transparent 6deg 15deg, color-mix(in srgb, var(--accent-2) 12%, transparent) 15deg 21deg, transparent 21deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 10%, transparent 55%); mask: radial-gradient(circle, #000 10%, transparent 55%);
  animation: rays 20s linear infinite;
}
@keyframes rays { to { transform: rotate(360deg); } }
.bigwin img { width: 1100px; max-width: 92%; position: relative; animation: slam 0.6s cubic-bezier(.2, 1.5, .4, 1); }
.portrait .bigwin img { width: 1000px; }
@keyframes slam { from { transform: scale(3); opacity: 0; } }
.tier { position: relative; font: 900 44px var(--font-display); letter-spacing: 14px; color: var(--accent-2); text-shadow: 0 0 12px var(--accent-2), 0 0 30px var(--accent-4); }
.tier.mega { color: var(--accent); text-shadow: 0 0 14px var(--accent), 0 0 34px var(--accent-3); }
.tier.epic { color: var(--highlight); text-shadow: 0 0 14px var(--highlight), 0 0 40px var(--accent); }
.big-amount { position: relative; font: 900 110px var(--font-display); font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0 16px var(--highlight), 0 0 40px var(--accent); margin-top: -20px; }
.hint { position: relative; margin-top: 24px; font: 700 22px var(--font-display); letter-spacing: 6px; color: rgba(255, 255, 255, 0.7); animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: 0.3; } }

.feature .feat-icon { width: 260px; position: relative; animation: slam 0.6s cubic-bezier(.2, 1.5, .4, 1); }
.feat-title { position: relative; font: 700 40px var(--font-display); letter-spacing: 10px; color: var(--accent-2); text-shadow: 0 0 12px var(--accent-2); }
.feat-big { position: relative; font: 900 120px/1.1 var(--font-display); color: #fff; text-shadow: 0 0 14px var(--accent), 0 0 40px var(--accent), 0 0 80px var(--accent-3); }
.portrait .feat-big { font-size: 96px; }
.feat-sub { position: relative; max-width: 820px; margin-top: 12px; font-size: 32px; font-weight: 600; }

.modal { cursor: default; place-items: center; grid-template-columns: 100%; }
.sheet {
  position: relative; width: 1240px; max-width: 94%; max-height: 92%; overflow: auto; padding: 36px 48px; text-align: left;
  background: rgba(10, 5, 30, 0.96); border: 2px solid var(--accent-2); border-radius: 20px; box-shadow: 0 0 40px color-mix(in srgb, var(--accent-2) 40%, transparent);
  font-size: 24px;
}
.sheet h2 { font: 900 44px var(--font-display); letter-spacing: 8px; margin: 0 0 6px; color: var(--accent); text-shadow: 0 0 12px var(--accent); text-align: center; }
.sheet h3 { font: 700 26px var(--font-display); letter-spacing: 5px; color: var(--accent-2); margin: 34px 0 14px; }
.pt-note { text-align: center; opacity: 0.8; margin: 0 0 18px; }
.close { position: sticky; float: right; top: 0; font-size: 48px; line-height: 1; color: var(--accent-2); }
.pt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pt-item { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid color-mix(in srgb, var(--accent-2) 25%, transparent); }
.pt-item img { width: 110px; }
.pt-item table { font: 600 22px var(--font-display); border-spacing: 10px 2px; }
.pt-item td:first-child { color: var(--accent-2); }
.pt-feature { display: flex; gap: 20px; align-items: center; margin-bottom: 12px; }
.pt-feature img { width: 120px; flex: none; }
.pt-feature p { margin: 0; line-height: 1.35; }
.pt-lines { display: grid; grid-template-columns: repeat(10, 1fr); gap: 12px; }
.pt-line { text-align: center; font: 600 16px var(--font-display); }
.pt-line .g { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin-top: 4px; }
.pt-line .g i { aspect-ratio: 1; background: rgba(255, 255, 255, 0.08); border-radius: 2px; }
.pt-line .g i.on { background: var(--c); box-shadow: 0 0 6px var(--c); }
.pt-rules { line-height: 1.5; padding-left: 26px; }
.portrait .pt-grid { grid-template-columns: repeat(2, 1fr); }
.portrait .pt-lines { grid-template-columns: repeat(5, 1fr); }

.toast {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) scale(0.8); opacity: 0; z-index: 30; pointer-events: none;
  padding: 18px 40px; border-radius: 16px; background: rgba(10, 5, 30, 0.95); border: 2px solid var(--accent); box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 60%, transparent);
  font: 700 34px var(--font-display); letter-spacing: 3px; text-align: center; transition: opacity 0.2s, transform 0.3s cubic-bezier(.2, 1.6, .4, 1);
}
.toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.toast button { display: block; margin: 14px auto 0; padding: 10px 24px; border-radius: 10px; border: 2px solid var(--accent-2); color: var(--accent-2); font: 700 20px var(--font-display); }

.particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 25; }

.stage.shake { animation: shake 0.4s; }
@keyframes shake { 20% { translate: -8px 4px; } 40% { translate: 7px -5px; } 60% { translate: -5px 3px; } 80% { translate: 3px -2px; } }

/* ---------- loader ---------- */
.loader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; align-content: center; gap: min(30px, 4vh); background: rgba(8, 2, 28, 0.92); transition: opacity 0.5s; }
.loader img { width: min(640px, 80vw); max-height: 42vh; height: auto; object-fit: contain; /* the splash fits a phone on its side: logo, bar and button inside the screen */ filter: drop-shadow(0 0 30px color-mix(in srgb, var(--accent) 50%, transparent)); }
.loader .bar { width: min(420px, 70vw); height: 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.loader .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 12px var(--accent); transition: width 0.2s; }
.loader .start { padding: 16px 48px; border-radius: 999px; font: 900 26px var(--font-display); letter-spacing: 6px; border: 2px solid var(--accent); box-shadow: 0 0 20px var(--accent); background: color-mix(in srgb, var(--accent) 20%, transparent); }
.loader .start:disabled { opacity: 0.4; box-shadow: none; }
.loader.hide { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .bg, .rain, .frame-art::after, .character, .rays { animation: none; }
}

/* Wild multiplier badges (games with features.wildMultipliers) */
.wmult {
  position: absolute; box-sizing: border-box; width: var(--cell, 176px); height: var(--cell, 176px);
  display: flex; align-items: flex-end; justify-content: flex-end; padding: 10px;
  pointer-events: none; z-index: 3; animation: wmult-pop 0.5s cubic-bezier(.2, 1.6, .4, 1);
}
.wmult span {
  font: 900 34px var(--font-display, sans-serif); color: #fff; line-height: 1;
  padding: 4px 10px; border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, var(--highlight, #ffe08a), var(--accent-4, #f5b942) 55%, var(--accent-3, #7a3cff));
  border: 2px solid rgba(255, 255, 255, 0.85);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
  box-shadow: 0 0 18px var(--accent-2, #ffd76a), 0 0 4px rgba(0, 0, 0, 0.8);
}
@keyframes wmult-pop { 0% { transform: scale(0.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ---------- portrait: phone legibility (Gate B mobile, rubric 1.4) ----------
   Every rule here is .portrait-scoped; the landscape stage is untouched. Sizes are
   design px on the 1080x1920 stage: targets >= 140, text >= 38. */
.portrait .demo-tag { top: 8px; right: 28px; font-size: 38px; letter-spacing: 1px; }
.portrait .message { left: 40px; width: 1000px; top: 930px; font-size: 38px; letter-spacing: 2px; white-space: normal; }
.portrait .message span { min-width: 520px; max-width: 100%; padding: 6px 28px; line-height: 1.2; }
.portrait .line-label { font-size: 40px; }
.portrait .sticky .chain { bottom: -6px; font-size: 37px; letter-spacing: 1px; padding: 0 10px; border-radius: 8px; background: rgba(8, 4, 26, 0.85); white-space: nowrap; }

.portrait .promo.small { display: none; }
.portrait .promo { padding: 14px 18px; }
.portrait .promo-k { font-size: 38px; letter-spacing: 3px; }
.portrait .promo-v { font-size: 76px; margin: 4px 0; }
/* free spins: the counter panel takes the full width so long labels (fi, bg, it) fit */
body.free .stage.portrait .side-panel { left: 40px; width: 1000px; }
body.free .stage.portrait .fs-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 24px; padding: 14px 22px;
  grid-template-areas: "label fwk" "v fw" "left fw";
}
.portrait .fs-panel > :nth-child(1) { grid-area: label; }
.portrait .fs-panel > :nth-child(2) { grid-area: v; }
.portrait .fs-panel > :nth-child(3) { grid-area: left; }
.portrait .fs-panel > :nth-child(4) { grid-area: fwk; }
.portrait .fs-panel > :nth-child(5) { grid-area: fw; }
.portrait .fs-k { font-size: 38px; letter-spacing: 0; white-space: normal; overflow-wrap: break-word; line-height: 1.15; }
.portrait .fs-k.gap { margin-top: 0; }
.portrait .fs-v { font-size: 88px; line-height: 1; }
.portrait .fs-win { font-size: 64px; }

.portrait .meter { gap: 4px; }
.portrait .meter .k { font-size: 38px; letter-spacing: 3px; }
.portrait .meter .v { font-size: 46px; }
.portrait .hud .bet { align-self: stretch; justify-content: center; }
.portrait .bet-row { gap: 36px; }
.portrait .bet-row .v { min-width: 280px; text-align: center; font-size: 52px; }
.portrait .round-btn { width: 140px; height: 140px; font-size: 72px; border-width: 3px; }
.portrait .tools { gap: 20px; align-self: stretch; }
.portrait .tool {
  flex: 1 1 0; min-width: 0; height: 140px; padding: 0 10px; border-radius: 20px; border-width: 3px;
  font-size: 38px; letter-spacing: 2px; line-height: 1.1;
}
.portrait .tool span { white-space: normal; }

.portrait .sheet { width: 1020px; max-width: none; max-height: 1800px; padding: 30px 40px 40px; font-size: 38px; }
.portrait .sheet h2 { font-size: 52px; letter-spacing: 6px; margin-top: 30px; }
.portrait .sheet h3 { font-size: 42px; letter-spacing: 4px; margin: 40px 0 18px; }
.portrait .close { width: 140px; height: 140px; margin: -20px -30px 0 0; font-size: 96px; }
.portrait .pt-grid { gap: 18px; }
.portrait .pt-item { gap: 10px; padding: 12px 10px; }
.portrait .pt-item img { width: 110px; flex: none; }
.portrait .pt-item table { font-size: 38px; border-spacing: 8px 4px; }
.portrait .pt-feature img { width: 130px; }
.portrait .pt-lines { gap: 18px; }
.portrait .pt-line { font-size: 38px; }
.portrait .pt-line .g { gap: 3px; margin-top: 6px; }
.portrait .pt-rules { padding-left: 44px; line-height: 1.4; }

.portrait .toast { width: max-content; max-width: 960px; font-size: 40px; padding: 24px 44px; }
.portrait .toast button { min-height: 140px; padding: 0 44px; margin-top: 20px; font-size: 38px; border-width: 3px; border-radius: 16px; }
.portrait .hint { font-size: 38px; letter-spacing: 4px; }
.portrait .feat-sub { font-size: 40px; max-width: 940px; }

/* ---------- RGS: the unified game menu (T10) shows bet, balance, win and sound ----------
   kits/shared/platform/menu.js sets html.asgf-menu; the layout keeps its place. */
html.asgf-menu .hud .balance, html.asgf-menu .hud .bet, html.asgf-menu .hud .spin-wrap, html.asgf-menu .hud .win, html.asgf-menu #soundBtn { visibility: hidden; }
/* Every control is on the panel (Henrik and Jonny, 8 Nov 2026: AUTO, TURBO and INFO slipped behind it): AUTO, TURBO and
   INFO are its action buttons (platform/panel-actions.js), so none of the kit's own HUD shows on the RGS. */
html.asgf-menu .stage .hud { display: none !important; }
/* The message line is empty between rounds (no "PRESS SPIN TO PLAY"): no empty plate either. */
.message span:empty { visibility: hidden; }
/* The start screen ends above the menu's panel, as fit() keeps the stage above it: in portrait the panel
   stacks into rows and takes about a third of a phone (live, 6 Nov 2026: PLAY sat behind it on an iPhone).
   Logo, bar and PLAY share what is left; on a short screen the logo gives way first. */
html.asgf-menu .loader { bottom: var(--asgf-menu-h, 0px); gap: min(30px, 3vh); padding: 8px 0; }
html.asgf-menu .loader img { max-height: max(48px, min(42vh, calc((100vh - var(--asgf-menu-h, 0px)) * 0.42))); }
html.asgf-menu .loader .start { padding: 12px 40px; }

/* ---------- autoplay panel (roadmap F27): client/main.js builds it inside the stage ---------- */
.auto-panel { position: absolute; inset: 0; z-index: 22; display: grid; place-items: center; background: rgba(5, 0, 18, 0.7); }
.auto-box { min-width: 420px; padding: 26px 32px; border-radius: 18px; background: rgba(10, 5, 30, 0.96); border: 2px solid var(--accent); box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 50%, transparent); display: grid; gap: 14px; font: 600 20px var(--font-display); }
.auto-box h3 { margin: 0; text-align: center; font-size: 28px; letter-spacing: 3px; color: var(--accent-2); }
.auto-label { margin: 0; opacity: 0.8; }
.auto-counts { display: flex; gap: 10px; }
.auto-counts button { flex: 1; height: 52px; border-radius: 12px; border: 2px solid color-mix(in srgb, var(--accent-2) 60%, transparent); color: var(--accent-2); font: 700 20px var(--font-display); }
.auto-counts button.on { border-color: var(--accent); color: #fff; background: color-mix(in srgb, var(--accent) 30%, transparent); }
.auto-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.auto-row select { min-width: 140px; height: 44px; border-radius: 10px; background: rgba(20, 10, 50, 0.9); color: #fff; border: 2px solid color-mix(in srgb, var(--accent-2) 60%, transparent); font: 600 18px var(--font-display); }
.auto-check { justify-content: flex-start; }
.auto-check input { width: 26px; height: 26px; accent-color: var(--accent); }
.auto-start { height: 60px; border-radius: 999px; border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 25%, transparent); font: 900 24px var(--font-display); letter-spacing: 4px; }
.portrait .auto-box { min-width: 820px; font-size: 36px; gap: 26px; padding: 44px; }
.portrait .auto-box h3 { font-size: 48px; }
.portrait .auto-counts button, .portrait .auto-row select { height: 110px; font-size: 38px; }
.portrait .auto-check input { width: 52px; height: 52px; }
.portrait .auto-start { height: 130px; font-size: 44px; }
/* autoplay: a run the market's limits do not allow yet cannot start (platform/rg-ui.js) */
.auto-start:disabled { opacity: 0.45; cursor: default; }
.auto-hint { font-size: 0.85em; color: var(--accent-2); }
.auto-hint[hidden] { display: none; }

/* ---------- RGS portrait: mobile first (audit, 7 Nov 2026) ----------
   The menu's panel holds balance, bet, win and PLAY, so the portrait HUD is only the row of tools at the stage's
   foot: no hidden meters keeping their place, no dark slab where they were. fit() makes the stage as tall as the
   phone leaves it (1460–1920 design px), so the reels take the width. Landscape is untouched. */
html.asgf-menu .stage.portrait .hud {
  height: 170px; grid-template-columns: 1fr; grid-template-rows: 140px; grid-template-areas: "tools";
  padding: 0 40px 30px; background: none;
}
html.asgf-menu .stage.portrait .hud::before { display: none; }
html.asgf-menu .stage.portrait .hud .balance, html.asgf-menu .stage.portrait .hud .bet,
html.asgf-menu .stage.portrait .hud .spin-wrap, html.asgf-menu .stage.portrait .hud .win,
html.asgf-menu .stage.portrait #soundBtn { display: none; }
html.asgf-menu .stage.portrait .tools { justify-content: center; }
/* RGS landscape: no HUD band either. fit() makes the stage 900 design px high; the tools stand in the right column
   under the promo, sized for a phone on its side (the stage is scaled to about 0.35 at 844×390: 132 design px is a
   46 px target, 36 design px is 12.6 px text). */
html.asgf-menu .stage:not(.portrait) .hud {
  left: 1556px; right: auto; width: 340px; top: 690px; bottom: auto; height: 150px; padding: 0;
  grid-template-columns: 1fr; grid-template-rows: 1fr; grid-template-areas: "tools"; background: none;
}
html.asgf-menu .stage:not(.portrait) .hud::before { display: none; }
html.asgf-menu .stage:not(.portrait) .hud .balance, html.asgf-menu .stage:not(.portrait) .hud .bet,
html.asgf-menu .stage:not(.portrait) .hud .spin-wrap, html.asgf-menu .stage:not(.portrait) .hud .win,
html.asgf-menu .stage:not(.portrait) #soundBtn { display: none; }
html.asgf-menu .stage:not(.portrait) .tools { grid-area: tools; margin-top: 0; gap: 16px; flex-wrap: wrap; justify-content: center; }
html.asgf-menu .stage:not(.portrait) .tool { min-width: 150px; height: 132px; font-size: 36px; letter-spacing: 3px; border-radius: 20px; }
/* RGS portrait on a short phone (a stage under 1560 design px, main.js): the reels and the tools keep their size, the
   character and the promo give way, and in free spins the counter takes the tools' band (they are disabled while the
   feature plays). */
/* RGS portrait, not compact: the HUD's band at the stage's foot is gone (every control is on the panel), so the
   character stands on the foot instead of leaving an empty band above the panel, and the promo (the free-spins counter
   in a feature) sits midway between the message and the foot. main.js sets --stage-h (1560–1920 design px here). */
html.asgf-menu .stage.portrait:not(.compact) .character { top: max(990px, calc(var(--stage-h, 1920px) - 640px)); }
html.asgf-menu .stage.portrait:not(.compact) .side-panel { top: calc((990px + var(--stage-h, 1920px)) / 2); transform: translateY(-50%); }
html.asgf-menu .stage.portrait.compact .character, html.asgf-menu .stage.portrait.compact .promo { display: none; }
html.asgf-menu .stage.portrait.compact .side-panel { top: auto; bottom: 30px; left: 40px; width: 1000px; }
html.asgf-menu body.free .stage.portrait.compact .hud { display: none; }
html.asgf-menu body.free .stage.portrait.compact .fs-panel {
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "v label fwk" "v left fw"; padding: 10px 22px;
}

/* RGS landscape on a phone on its side or a small tablet (main.js sets .phone when the scale is under 0.6; about 0.35
   at 844×390): the landscape stage was drawn for a desktop, so its 15-22 design px labels were 5-8 px there
   (mobile-first audit, 7 Nov 2026). The portrait sizes are used, made for a stage at about a third: text >= 36. */
html.asgf-menu .stage.phone .demo-tag { font-size: 36px; letter-spacing: 1px; }
html.asgf-menu .stage.phone .message { font-size: 38px; letter-spacing: 2px; white-space: normal; }
html.asgf-menu .stage.phone .message span { min-width: 520px; max-width: 100%; padding: 6px 28px; line-height: 1.2; }
html.asgf-menu .stage.phone .line-label { font-size: 40px; }
html.asgf-menu .stage.phone .sticky .chain { font-size: 37px; letter-spacing: 1px; padding: 0 10px; border-radius: 8px; background: rgba(8, 4, 26, 0.85); white-space: nowrap; }
html.asgf-menu .stage.phone .promo.small { display: none; }
html.asgf-menu .stage.phone .promo { padding: 14px 18px; }
html.asgf-menu .stage.phone .promo-k { font-size: 36px; letter-spacing: 2px; }
html.asgf-menu .stage.phone .promo-v { font-size: 76px; margin: 4px 0; }
html.asgf-menu .stage.phone .fs-k { font-size: 36px; letter-spacing: 0; white-space: normal; overflow-wrap: break-word; line-height: 1.15; }
html.asgf-menu .stage.phone .fs-v { font-size: 88px; line-height: 1; }
html.asgf-menu .stage.phone .fs-win { font-size: 60px; }
html.asgf-menu .stage.phone .hint { font-size: 38px; letter-spacing: 4px; }
html.asgf-menu .stage.phone .feat-sub { font-size: 40px; max-width: 1400px; }
html.asgf-menu .stage.phone .toast { width: max-content; max-width: 1500px; font-size: 40px; padding: 24px 44px; }
html.asgf-menu .stage.phone .toast button { min-height: 132px; padding: 0 44px; margin-top: 20px; font-size: 38px; border-width: 3px; border-radius: 16px; }
/* RGS portrait: the stage ends at the panel, so the rules sheet (INFO on the panel) keeps inside it and scrolls there */
html.asgf-menu .stage.portrait .sheet { max-height: 94%; }
html.asgf-menu .stage.phone .sheet { width: 1600px; max-width: none; max-height: 860px; padding: 30px 40px 40px; font-size: 38px; }
html.asgf-menu .stage.phone .sheet h2 { font-size: 52px; letter-spacing: 6px; }
html.asgf-menu .stage.phone .sheet h3 { font-size: 42px; letter-spacing: 4px; }
html.asgf-menu .stage.phone .close { width: 132px; height: 132px; font-size: 90px; }
html.asgf-menu .stage.phone .pt-item table, html.asgf-menu .stage.phone .pt-line { font-size: 38px; }