/* ═══════════════════════════════════════════════════
   ДИСПУТ ЯКУДЗА: АРБИТРАЖ ДЕЛЮКС — Ultimate CSS
   ═══════════════════════════════════════════════════ */

#slotsContainer, #slots {
  /* perspective: 1500px; */
  /* transform-style: preserve-3d; */
}

.sq-machine {
  --neon: #ff2a2a;
  --dark: #8b0000;
  --gold: #ffaa00;
  --blue: #00aaff;
  --violet: #aa00ff;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  display: flex;
  flex-direction: column;
  /* transform-style: preserve-3d; */
}

/* ── Blurred background ── */
.sq-bg {
  position: absolute;
  inset: -40px;
  background: url('assets/yakuza/bg.webp') center/cover no-repeat;
  filter: blur(16px) brightness(0.2) saturate(0.7);
  z-index: 0;
  transition: filter 0.5s ease;
}

/* Free spins burning background mode */
.sq-machine.free-spins-mode .sq-bg {
  filter: blur(8px) brightness(0.35) saturate(1.8) sepia(0.2);
  background-color: #300;
}

/* ── Side Characters Layout ── */
.sq-side-char {
  width: 25%;
  max-width: 420px;
  height: calc(100% - 300px);
  position: absolute;
  bottom: 15px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  z-index: 35;
  pointer-events: none;
}

.sq-side-char.left {
  left: 1%;
}

.sq-side-char.right {
  right: 1%;
}

.sq-char-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.95));
  animation: charBreathe 5s ease-in-out infinite;
  
  /* Fade out only the top edge slightly so the character looks solid on the floor */
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 94%, rgba(0,0,0,0) 100%);
  mask-image:         linear-gradient(to top, rgba(0,0,0,1) 94%, rgba(0,0,0,0) 100%);
}

.sq-side-char.right .sq-char-img {
  animation-delay: 2.5s;
}

@keyframes charBreathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-10px) scale(1.015); }
}

/* ── Neon Comic Speech Bubbles ── */
.sq-speech-bubble {
  position: absolute;
  /* The character box is now square and the figure fills it, so the bubble must
     sit ABOVE the box top (above the head) instead of overlapping the figure. */
  bottom: calc(100% + 23px);
  width: 260px;
  max-width: 165%;
  background: rgba(10, 2, 2, 0.96);
  border: 2px solid var(--neon);
  box-shadow: 0 0 16px rgba(255, 42, 42, 0.6), inset 0 0 8px rgba(255, 42, 42, 0.3);
  border-radius: 14px;
  padding: 9px 13px;
  box-sizing: border-box;
  text-align: center;
  z-index: 10;
  opacity: 0;
  transform: scale(0.7) translateY(20px);
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sq-side-char.right .sq-speech-bubble {
  border-color: #00ffcc;
  box-shadow: 0 0 20px rgba(0, 255, 204, 0.65), inset 0 0 10px rgba(0, 255, 204, 0.35);
}

.sq-speech-bubble.show {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.sq-speech-text {
  font-family: 'Share Tech Mono', monospace;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  line-height: 1.4;
  display: block;
}

/* Pointer tail for bubbles */
.sq-speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 12px 12px 0;
  border-style: solid;
  border-color: var(--neon) transparent;
  display: block;
  width: 0;
}

.sq-side-char.right .sq-speech-bubble::after {
  border-color: #00ffcc transparent;
}

.sq-speech-bubble::before {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px 8px 0;
  border-style: solid;
  border-color: rgba(8, 2, 2, 0.98) transparent;
  display: block;
  width: 0;
  z-index: 1;
}


/* ── Main Layout ── */
.sq-layout {
  /* Fixed-size DESIGN stage. JS (fitStage) sets width/height to the design size
     and scales the whole stage with transform:scale() to fit the viewport, so
     EVERY element (reel, tiles, characters, bubbles, panels, controls) keeps the
     exact same relative proportions at every resolution. */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  transform-origin: top left;
  will-change: transform;
}

/* ── Header: jackpot + title ── */
.sq-header {
  flex-shrink: 0;
  text-align: center;
  padding: 4px 0 3px;
  background: linear-gradient(to bottom, rgba(8,0,0,0.95), transparent);
  border-bottom: 1px solid rgba(200,0,0,0.3);
  position: relative;
  zoom: 0.85;   /* compact jackpot strip — keep the reels dominant */
}
.sq-jackpot-label {
  display: inline;
  font-family: 'Exo 2', sans-serif; font-size: 13px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .15em;
  color: var(--neon); text-shadow: 0 0 12px var(--neon);
}
.sq-jackpot-amount {
  font-family: 'Share Tech Mono', monospace; font-size: 30px; font-weight: 900;
  letter-spacing: 2px; color: #fff;
  text-shadow: 0 0 20px var(--neon), 0 0 40px rgba(255,0,0,0.4);
  margin-left: 10px;
}
.sq-title {
  font-family: 'Exo 2', sans-serif; font-size: 30px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .16em; line-height: 1; color: #fff;
  text-shadow: 0 0 12px var(--neon), 0 0 30px var(--neon), 0 0 60px var(--dark);
  margin-top: 2px;
}
.sq-subtitle {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,120,120,0.65);
}

/* ── Active Ways Display ── */
.sq-ways-counter {
  display: inline-block;
  margin: 6px auto 0;
  background: rgba(20,0,0,0.85);
  border: 1px solid var(--neon);
  border-radius: 6px;
  padding: 4px 12px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px; color: #fff;
  text-shadow: 0 0 8px var(--neon);
  box-shadow: 0 0 15px rgba(255,0,0,0.3);
}

/* ── Dispute Progress Bar ── */
.sq-dispute-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 24px 4px;
  zoom: 0.88;
  flex-shrink: 0;
  z-index: 10;
  background: rgba(15, 5, 5, 0.45);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 42, 42, 0.12);
}

.sq-dispute-label-left,
.sq-dispute-label-right {
  font-family: 'Rajdhani', 'Exo 2', sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.sq-dispute-label-left {
  color: #ff2a2a;
  text-shadow: 0 0 10px rgba(255,42,42,0.8), 0 0 20px rgba(255,42,42,0.4);
}

.sq-dispute-label-right {
  color: #00ffaa;
  text-shadow: 0 0 10px rgba(0,255,170,0.8), 0 0 20px rgba(0,255,170,0.4);
}

.sq-dispute-track {
  flex: 1;
  position: relative;
  height: 24px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: inset 0 0 12px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.5);
  padding: 2px;
  box-sizing: border-box;
}

.sq-dispute-segments {
  display: flex;
  width: 100%;
  height: 100%;
  gap: 4px;
  border-radius: 10px;
  overflow: hidden;
}

.sq-dispute-seg {
  flex: 1;
  display: grid;
  place-items: center;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  font-weight: 900;
  color: rgba(255,255,255,0.15);
  position: relative;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: default;
  border-radius: 4px;
}

.sq-dispute-seg span {
  position: relative;
  z-index: 2;
}

/* Gradient coloring: red → yellow → green */
.sq-dispute-seg[data-state="1"]  { background: rgba(230,20,20,0.06); }
.sq-dispute-seg[data-state="2"]  { background: rgba(210,40,20,0.06); }
.sq-dispute-seg[data-state="3"]  { background: rgba(190,70,20,0.06); }
.sq-dispute-seg[data-state="4"]  { background: rgba(170,100,20,0.06); }
.sq-dispute-seg[data-state="5"]  { background: rgba(140,140,40,0.06); }
.sq-dispute-seg[data-state="6"]  { background: rgba(100,170,40,0.06); }
.sq-dispute-seg[data-state="7"]  { background: rgba(60,190,60,0.06); }
.sq-dispute-seg[data-state="8"]  { background: rgba(40,210,100,0.06); }
.sq-dispute-seg[data-state="9"]  { background: rgba(20,230,130,0.06); }
.sq-dispute-seg[data-state="10"] { background: rgba(10,250,170,0.06); }

/* Active / lit segment */
.sq-dispute-seg.active {
  color: #fff;
  text-shadow: 0 0 6px currentColor;
  transform: scaleY(1.12);
}
.sq-dispute-seg.active[data-state="1"],
.sq-dispute-seg.active[data-state="2"] {
  background: #ff2a2a;
  box-shadow: inset 0 0 10px rgba(255,255,255,0.4), 0 0 15px rgba(255,42,42,0.8);
}
.sq-dispute-seg.active[data-state="3"],
.sq-dispute-seg.active[data-state="4"] {
  background: #ff8800;
  box-shadow: inset 0 0 10px rgba(255,255,255,0.4), 0 0 15px rgba(255,136,0,0.8);
}
.sq-dispute-seg.active[data-state="5"] {
  background: #e2e21e;
  box-shadow: inset 0 0 10px rgba(255,255,255,0.4), 0 0 15px rgba(226,226,30,0.8);
}
.sq-dispute-seg.active[data-state="6"],
.sq-dispute-seg.active[data-state="7"] {
  background: #4cd620;
  box-shadow: inset 0 0 10px rgba(255,255,255,0.4), 0 0 15px rgba(76,214,32,0.8);
}
.sq-dispute-seg.active[data-state="8"] {
  background: #00d2ff;
  box-shadow: inset 0 0 10px rgba(255,255,255,0.4), 0 0 20px rgba(0,210,255,0.9);
  animation: disputePulse8 1s ease infinite;
}
.sq-dispute-seg.active[data-state="9"],
.sq-dispute-seg.active[data-state="10"] {
  background: #00ffaa;
  box-shadow: inset 0 0 10px rgba(255,255,255,0.4), 0 0 20px rgba(0,255,170,0.9);
}

@keyframes disputePulse8 {
  0%, 100% { box-shadow: inset 0 0 10px rgba(255,255,255,0.4), 0 0 15px rgba(0,210,255,0.8); }
  50% { box-shadow: inset 0 0 15px rgba(255,255,255,0.5), 0 0 25px rgba(0,210,255,1); }
}

/* Sliding marker neon laser */
.sq-dispute-marker {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  transition: left 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 5;
}

.sq-dispute-marker-arrow {
  width: 14px;
  height: 14px;
  background: #ffffff;
  border: 3px solid #ffcc00;
  border-radius: 50%;
  box-shadow: 0 0 15px #ffcc00, 0 0 30px #ffaa00;
  position: absolute;
  top: -1px;
  left: 2px;
}

.sq-dispute-marker-arrow::after {
  content: '';
  position: absolute;
  top: 11px;
  left: 4px;
  width: 2px;
  height: 35px;
  background: linear-gradient(to bottom, #ffcc00 20%, rgba(255, 204, 0, 0));
  box-shadow: 0 0 6px #ffcc00;
}

/* ── Reels Area ── */
.sq-reels-area {
  flex: 1;
  min-height: 0;
  position: relative;
  padding: 4px 16px 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sq-reels-frame {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
  border-radius: 14px;
  border: 2px solid rgba(255, 42, 42, 0.25);
  background: rgba(8, 2, 2, 0.96);
  box-shadow: 
    0 0 45px rgba(255, 42, 42, 0.15), 
    inset 0 0 60px rgba(0, 0, 0, 0.98);
}

/* Tumble / Avalanche flex wrapper */
.sq-reels-grid {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  gap: 0;
}

.sq-reel {
  flex: 1;
  position: relative;
  background: #020202;
  overflow: hidden;
}

/* Chrome dividers between reels */
.sq-reel-divider {
  width: 12px;
  flex-shrink: 0;
  position: relative;
  z-index: 8;
  background: linear-gradient(to right, #111, #2d2d2d 30%, #666 50%, #2d2d2d 70%, #111);
  box-shadow: inset 1px 0 1px rgba(255,255,255,0.08), inset -1px 0 1px rgba(255,255,255,0.08);
}
.sq-reel-divider::before {
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, rgba(255,42,42,0.3) 30%, rgba(255,42,42,0.6) 50%, rgba(255,42,42,0.3) 70%, transparent);
}

/* 3D cylindrical drum shades */
.sq-reel-shade {
  position: absolute; inset: 0;
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.95)  0%,
    rgba(0,0,0,0.65) 12%,
    rgba(0,0,0,0.15) 26%,
    rgba(0,0,0,0)    40%,
    rgba(0,0,0,0)    60%,
    rgba(0,0,0,0.15) 74%,
    rgba(0,0,0,0.65) 88%,
    rgba(0,0,0,0.95) 100%
  );
}

/* Dynamic heights track container */
.sq-reel-track {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  flex-direction: column;
  will-change: transform;
}

/* ── Glassmorphic Symbol Cards ── */
.sq-cell {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 4px;
  position: relative;
  flex-shrink: 0;
  transition: padding 0.2s ease;
}

.sq-symbol-card {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: rgba(12, 12, 12, 0.75);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 
    inset 0 0 15px rgba(0,0,0,0.9),
    0 4px 12px rgba(0,0,0,0.95);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  
  /* Hardware acceleration to prevent flickering on movement */
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
}

/* Card glass reflections */
.sq-symbol-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

/* Tiers color coding & neon backlights */
.sq-symbol-card.tier-special {
  border-color: rgba(255, 170, 0, 0.35);
  background: radial-gradient(circle at center, rgba(255,170,0,0.12) 0%, rgba(6,6,6,0.95) 90%);
  box-shadow: 
    inset 0 0 15px rgba(255,170,0,0.08),
    0 4px 15px rgba(0,0,0,0.95);
  animation: specialPulse 3s ease-in-out infinite alternate;
}
@keyframes specialPulse {
  0% { border-color: rgba(255, 170, 0, 0.35); box-shadow: inset 0 0 15px rgba(255,170,0,0.08), 0 4px 15px rgba(0,0,0,0.95); }
  100% { border-color: rgba(255, 170, 0, 0.65); box-shadow: inset 0 0 25px rgba(255,170,0,0.22), 0 0 12px rgba(255,170,0,0.12), 0 4px 15px rgba(0,0,0,0.95); }
}

.sq-symbol-card.tier-high {
  border-color: rgba(255, 42, 42, 0.28);
  background: radial-gradient(circle at center, rgba(255,42,42,0.1) 0%, rgba(6,6,6,0.95) 90%);
  box-shadow: 
    inset 0 0 15px rgba(255,42,42,0.06),
    0 4px 15px rgba(0,0,0,0.95);
}

.sq-symbol-card.tier-medium {
  border-color: rgba(0, 170, 255, 0.25);
  background: radial-gradient(circle at center, rgba(0,170,255,0.08) 0%, rgba(6,6,6,0.95) 90%);
  box-shadow: 
    inset 0 0 15px rgba(0,170,255,0.06),
    0 4px 15px rgba(0,0,0,0.95);
}

.sq-symbol-card.tier-low {
  border-color: rgba(255,255,255,0.14);
  background: radial-gradient(circle at center, rgba(255,255,255,0.025) 0%, rgba(4,4,4,0.95) 90%);
  box-shadow: 
    inset 0 0 15px rgba(255,255,255,0.03),
    0 4px 15px rgba(0,0,0,0.95);
}

/* Placeholder glowing badges */
.sq-placeholder-badge {
  text-align: center;
  padding: 4px;
}
.sq-placeholder-title {
  font-family: 'Exo 2', sans-serif;
  font-size: 11px; font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 0.05em;
  opacity: 0.95;
  text-shadow: 0 0 8px rgba(255,255,255,0.6);
}
.sq-placeholder-id {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  color: #777;
  margin-top: 1px;
}
.tier-special .sq-placeholder-title { color: var(--gold); text-shadow: 0 0 10px var(--gold); }
.tier-high .sq-placeholder-title { color: var(--neon); text-shadow: 0 0 10px var(--neon); }
.tier-medium .sq-placeholder-title { color: var(--blue); text-shadow: 0 0 10px var(--blue); }

/* Images formatting */
.sq-symbol-card img {
  width: 92%;
  height: 92%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.85));
  transition: filter 0.25s ease;
  
  /* Prevent subpixel layout flickering during motion/transitions */
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
}

.sq-symbol-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 
    inset 0 0 15px rgba(255,255,255,0.05),
    0 6px 18px rgba(0,0,0,0.95);
}

.sq-symbol-card:hover img {
  transform: scale(1.08);
}

.sq-symbol-card.tier-special:hover img {
  filter: drop-shadow(0 0 12px rgba(255, 170, 0, 0.8)) drop-shadow(0 4px 8px rgba(0,0,0,0.9));
}
.sq-symbol-card.tier-high:hover img {
  filter: drop-shadow(0 0 12px rgba(255, 42, 42, 0.8)) drop-shadow(0 4px 8px rgba(0,0,0,0.9));
}
.sq-symbol-card.tier-medium:hover img {
  filter: drop-shadow(0 0 12px rgba(0, 170, 255, 0.8)) drop-shadow(0 4px 8px rgba(0,0,0,0.9));
}
.sq-symbol-card.tier-low:hover img {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.45)) drop-shadow(0 4px 8px rgba(0,0,0,0.9));
}

/* Win cell glow */
.sq-cell.win .sq-symbol-card {
  border-color: var(--neon);
  animation: cellGlow 0.4s ease infinite alternate;
}
@keyframes cellGlow {
  from { box-shadow: inset 0 0 15px rgba(255,0,0,0.4), 0 0 15px rgba(255,0,0,0.6); }
  to   { box-shadow: inset 0 0 35px rgba(255,0,0,1), 0 0 35px #ff2a2a, 0 0 70px rgba(255,0,0,0.3); }
}

/* Multiplier Wilds overlay badge */
.sq-wild-mult {
  position: absolute;
  top: 4px; right: 4px;
  background: var(--gold);
  color: #000;
  border-radius: 4px;
  padding: 1px 4px;
  font-family: 'Share Tech Mono', monospace;
  font-weight: 900; font-size: 11px;
  box-shadow: 0 0 8px var(--gold);
  z-index: 5;
}

/* Payline Canvas/SVG */
.sq-payline-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 20;
  overflow: visible;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.sq-payline-svg.show { opacity: 1; }

/* ── Win Banner ── */
.sq-win-banner {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 40; pointer-events: none;
  opacity: 0; transition: opacity 0.25s;
}
.sq-win-banner.show { opacity: 1; }
.sq-win-inner {
  text-align: center;
  background: linear-gradient(135deg, rgba(25,0,0,0.95), rgba(0,0,0,0.98));
  border: 2px solid var(--neon);
  border-radius: 18px;
  padding: 18px 50px;
  box-shadow: 0 0 80px rgba(255,0,0,0.6), inset 0 0 20px rgba(255,0,0,0.2);
}
.sq-win-label {
  font-family: 'Exo 2', sans-serif; font-size: 18px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .2em; color: rgba(255,180,180,0.95);
}
.sq-win-amount {
  font-family: 'Share Tech Mono', monospace; font-size: 70px; font-weight: 900;
  color: var(--neon); line-height: 1;
  text-shadow: 0 0 25px var(--neon), 0 0 50px rgba(255,0,0,0.4);
  animation: winPulse 0.4s ease infinite alternate;
}
@keyframes winPulse {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

/* ── Controls & Dash ── */
.sq-controls {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 8px 16px;
  background: linear-gradient(to bottom, rgba(8,0,0,0.98), #000);
  border-top: 2px solid rgba(120,0,0,0.5);
  box-shadow: 0 -5px 25px rgba(0,0,0,0.95);
  position: relative; z-index: 10;
}
.sq-machine.pc-3d-active .sq-symbol-card {
  /* 3D draws the symbol on the canvas BEHIND this DOM grid, so the background
     MUST stay transparent (else it covers the symbol). We keep only a crisp
     framed outline + edge vignette so every cell reads as a distinct tile with
     clear borders between cells — like the 2D reference. */
  background: transparent !important;
  border: 2px solid rgba(150, 165, 195, 0.5) !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.7),
    inset 0 0 16px rgba(0, 0, 0, 0.42),
    0 1px 7px rgba(0, 0, 0, 0.75) !important;
  pointer-events: none !important;
}
/* Per-mode accent on the tile outline so each mode has its own crisp framing. */
.sq-machine.pc-3d-active[data-mode="lines"]   .sq-symbol-card { border-color: rgba(255, 80, 80, 0.55) !important; }
.sq-machine.pc-3d-active[data-mode="gates"]   .sq-symbol-card { border-color: rgba(40, 175, 255, 0.55) !important; }
.sq-machine.pc-3d-active[data-mode="cluster"] .sq-symbol-card { border-color: rgba(255, 80, 195, 0.55) !important; }
/* Winning cells get a brighter neon frame over the 3D symbol. */
.sq-machine.pc-3d-active .sq-cell.win .sq-symbol-card {
  border-color: var(--neon, #ffd24a) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.6),
    inset 0 0 20px rgba(255, 210, 74, 0.25),
    0 0 16px var(--neon, #ffd24a) !important;
}
.sq-machine.pc-3d-active .sq-symbol-card img { opacity: 0 !important; }
/* lift the (transparent) DOM grid above the 3D canvas (z4) so multiplier badges
   render on top of the rendered symbols, but below the win-line canvas (z22) */
.sq-machine.pc-3d-active .sq-reels-grid { position: relative; z-index: 8 !important; }
.sq-machine.pc-3d-active .sq-wild-mult { opacity: 1 !important; z-index: 30 !important; }
.sq-machine.pc-3d-active .sq-reels-grid {
  background: transparent !important;
}
.sq-machine.pc-3d-active .sq-reel {
  background: transparent !important;
}

.sq-info-box {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:85px; padding:8px 12px;
  background: rgba(15, 5, 5, 0.72) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 42, 42, 0.15) !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.6), inset 0 0 10px rgba(255,42,42,0.05);
  border-radius: 10px;
}
.sq-info-label { font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,100,100,0.65); }
.sq-info-val { font-family:'Share Tech Mono',monospace; font-size:20px; color:#fff; font-weight:900; text-shadow: 0 0 8px rgba(255,255,255,0.25); }
.red-val { color:var(--neon); text-shadow:0 0 10px rgba(255,0,0,0.7); }

.sq-bet-ctrl { display:flex; align-items:center; gap:4px; }
.sq-bet-input {
  width:120px; text-align:center; font-family:'Share Tech Mono',monospace; font-size:18px; font-weight:bold;
  background:#020202; border:1px solid #300; border-radius:4px;
  color:#fff; padding:4px; outline:none;
}
.sq-bet-input:focus { border-color:var(--neon); box-shadow:0 0 8px rgba(255,0,0,0.4); }

.sq-btn {
  padding:8px 14px; border-radius:6px; font-size:11px; font-weight:900;
  text-transform:uppercase; letter-spacing:.04em; cursor:pointer;
  border:1px solid #3a0000; background:linear-gradient(180deg,#2d0000,#080000);
  color:#aaa; transition:all 0.12s;
  box-shadow:0 4px 0 #050000, 0 4px 8px rgba(0,0,0,0.8);
}
.sq-btn:hover { background:linear-gradient(180deg,#4d0000,#100000); color:#fff; border-color:var(--neon); }
.sq-btn:active { transform:translateY(4px); box-shadow:0 0 0 #000; }
.sq-btn-sm { padding:4px 8px; font-size:14px; }

/* ── SPIN BUTTON ── */
.sq-spin-btn {
  width: 88px; height: 88px; border-radius: 50%; cursor: pointer;
  border: none; outline: none;
  background: radial-gradient(circle at 30% 28%, #ff6666, #b80000 40%, #4a0000 100%);
  color: #fff; font-family: 'Exo 2', sans-serif; font-size: 14px; font-weight: 900; letter-spacing: .05em;
  box-shadow:
    0 7px 0 #120000,
    0 10px 20px rgba(0,0,0,0.95),
    inset 0 -4px 10px rgba(0,0,0,0.5),
    inset 0 4px 14px rgba(255,255,255,0.22);
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.15s ease;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.1;
  padding: 0;
}
.sq-spin-btn::before {
  content: '';
  position: absolute; top: 6px; left: 6px; right: 6px; height: 45%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.24), transparent);
  pointer-events: none;
}
.sq-spin-btn:hover {
  background: radial-gradient(circle at 30% 28%, #ff8888, #cc0000 40%, #5a0000 100%);
  box-shadow:
    0 8px 0 #120000,
    0 12px 24px rgba(255, 42, 42, 0.45),
    inset 0 -4px 10px rgba(0,0,0,0.5),
    inset 0 4px 14px rgba(255,255,255,0.3);
  transform: scale(1.05);
}
.sq-spin-btn:active {
  transform: translateY(6px) scale(0.98);
  box-shadow:
    0 4px 0 #120000,
    0 6px 12px rgba(0,0,0,0.9),
    inset 0 -2px 6px rgba(0,0,0,0.5);
}
.sq-spin-btn:disabled {
  opacity: 0.4; cursor: not-allowed; transform: none !important;
  background: #202020; color: #555; box-shadow: 0 10px 0 #111;
}

/* ── Buy Bonus / Feature Shop ── */
.sq-buy-btn {
  background: linear-gradient(180deg, #ffaa00, #b35900);
  border-color: #ffcc66;
  color: #000;
  font-weight: 900;
  box-shadow: 0 4px 0 #592d00, 0 4px 8px rgba(0,0,0,0.8);
}
.sq-buy-btn:hover {
  background: linear-gradient(180deg, #ffbb33, #d96d00);
  color: #000;
  border-color: #fff;
}
.sq-buy-btn:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 #000;
}

.sq-shop-modal {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.sq-shop-modal.show {
  opacity: 1; pointer-events: auto;
}
.sq-shop-content {
  background: linear-gradient(145deg, #160000, #050000);
  border: 2px solid var(--neon);
  border-radius: 16px;
  width: 90%; max-width: 650px;
  padding: 24px;
  box-shadow: 0 0 80px rgba(255,0,0,0.3);
  position: relative;
}
.sq-shop-title {
  font-family: 'Exo 2', sans-serif;
  font-size: 24px; font-weight: 900;
  text-align: center; text-transform: uppercase;
  color: #fff; text-shadow: 0 0 10px var(--neon);
  margin-bottom: 20px;
  letter-spacing: 0.1em;
}
.sq-shop-close {
  position: absolute; right: 16px; top: 16px;
  background: none; border: none; color: #777;
  font-size: 22px; cursor: pointer; transition: color 0.2s;
}
.sq-shop-close:hover { color: #fff; }
.sq-shop-options {
  display: flex; flex-direction: column; gap: 14px;
}
.sq-shop-card {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 14px 20px;
  transition: all 0.2s ease;
}
.sq-shop-card:hover {
  background: rgba(255,42,42,0.05);
  border-color: var(--neon);
  box-shadow: 0 0 15px rgba(255,0,0,0.15);
}
.sq-shop-info {
  display: flex; flex-direction: column; gap: 2px;
}
.sq-shop-opt-title {
  font-family: 'Exo 2', sans-serif;
  font-size: 16px; font-weight: 900;
  text-transform: uppercase; color: #fff;
  letter-spacing: 0.05em;
}
.sq-shop-opt-desc {
  font-size: 11px; color: #888;
}
.sq-shop-buy-btn {
  padding: 8px 18px; border-radius: 6px;
  font-family: 'Share Tech Mono', monospace;
  font-weight: 900; font-size: 16px;
  background: var(--gold); border: 1px solid #ffcc66;
  color: #000; cursor: pointer;
  box-shadow: 0 0 10px rgba(255,170,0,0.3);
  transition: all 0.15s ease;
}
.sq-shop-buy-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px var(--gold);
}

/* ── Free Spins Counter overlay ── */
.sq-fs-panel {
  position: absolute;
  top: 15px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, #ffaa00, #e67300);
  border-radius: 10px;
  padding: 8px 30px;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 0 35px var(--gold);
  z-index: 30;
  display: none;
}
.sq-fs-panel.show { display: flex; }
.sq-fs-label {
  font-family: 'Exo 2', sans-serif;
  font-size: 12px; font-weight: 900;
  text-transform: uppercase; color: #000;
  letter-spacing: 0.1em;
}
.sq-fs-val {
  font-family: 'Share Tech Mono', monospace;
  font-size: 26px; font-weight: 900; color: #000;
}

/* ── Quad-Grid Hold & Win layout ── */
.sq-reels-frame.hold-win-mode .sq-reels-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 15px;
  padding: 10px;
}

/* Dynamic mini-grid wrappers */
.sq-hw-grid-wrapper {
  border: 2px solid #222;
  background: rgba(5,5,5,0.98);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  height: 100%;
  opacity: 0.35;
  transition: opacity 0.5s ease, border-color 0.5s ease;
}
.sq-hw-grid-wrapper .sq-reel {
  height: 100%;
}
.sq-hw-grid-wrapper .sq-reel-track {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
.sq-hw-grid-wrapper .sq-cell {
  height: 33.33% !important;
}
.sq-hw-grid-wrapper.active {
  opacity: 1;
  border-color: var(--gold);
  box-shadow: 0 0 20px rgba(255,170,0,0.15);
}
.sq-hw-grid-wrapper::before {
  content: 'ЗАБЛОКИРОВАНО';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.7);
  font-family: 'Exo 2', sans-serif;
  font-weight: 900; font-size: 22px;
  color: #555;
  letter-spacing: 0.1em;
  z-index: 15;
  transition: opacity 0.3s ease;
}
.sq-hw-grid-wrapper.active::before {
  opacity: 0;
  pointer-events: none;
}

/* Screen flashing animations */
.sq-flash-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 90;
  opacity: 0;
}
.sq-flash-overlay.bullet {
  background: rgba(255, 255, 255, 0.95);
}
.sq-flash-overlay.katana {
  background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.9) 50%, transparent 60%);
}
.sq-flash-overlay.smoke {
  background: radial-gradient(circle, rgba(120,120,120,0.85) 0%, rgba(0,0,0,0.95) 100%);
}

.sq-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 50;
}

/* ── Responsive adjustments ──
   DISABLED: the whole game now lives in a FIXED 1580px design stage that is
   scaled with transform:scale() (see fitStage). Viewport media queries would
   fire on the real viewport width and distort the fixed design (changing chrome
   heights → reel size), so they are neutralised. Characters/spin/etc. are sized
   by JS in design space instead. */

/* ── 3D Status Indicator ── */
.sq-3d-status {
  position: absolute;
  left: 25px; top: 12px;
  background: rgba(15, 5, 5, 0.85);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  padding: 4px 10px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px; color: #888;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  transition: all 0.3s ease;
  z-index: 25;
}
.sq-3d-status.active {
  border-color: #00e5ff;
  color: #00e5ff;
  text-shadow: 0 0 8px rgba(0,229,255,0.6);
  box-shadow: 0 0 15px rgba(0,229,255,0.25);
}
.sq-3d-status.error {
  border-color: #e8304a;
  color: #e8304a;
  text-shadow: 0 0 8px rgba(232,48,74,0.6);
  box-shadow: 0 0 15px rgba(232,48,74,0.25);
}
/* (3D-status responsive hide removed — fixed design stage handles scaling.) */


/* ════════════════════════════════════════════════════════════
   MODE SWITCHER — top-center pill tabs, per-mode accent
   ════════════════════════════════════════════════════════════ */
.sq-machine { --sq-accent: #ff3b3b; --sq-accent2: #ffcf4d; }

.sq-mode-switch {
  position: relative;
  z-index: 30;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 6px;
  flex-wrap: nowrap;            /* always ONE elegant row — never stack */
  margin: 6px auto 2px;
  padding: 5px;
  width: max-content;
  max-width: 100%;
  background: linear-gradient(180deg, rgba(12,14,22,0.92), rgba(8,9,14,0.92));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
}

/* Compact look while docked in the portal top bar */
#topCenterSlot .sq-mode-switch {
  margin: 0;
  padding: 3px;
  gap: 5px;
  border-radius: 11px;
  box-shadow: none;
}
#topCenterSlot .sq-mode-tab { padding: 5px 12px; font-size: 11px; border-radius: 8px; }
#topCenterSlot .sq-mode-tab .sq-mode-ico { font-size: 15px;
}

/* Mini top bar: when the dock gets squeezed (narrow viewport / stacked top bar),
   the labelled tabs overflow and overlap the rest of the bar. Switch to an
   ICON-ONLY row that stays compact. Container query = reacts to the dock's real
   width, so it kicks in exactly when space runs out (in both row and stacked top
   bar layouts) instead of guessing a viewport breakpoint. */
#topCenterSlot { container-type: inline-size; }
@container (max-width: 320px) {
  #topCenterSlot .sq-mode-tab { padding: 5px 9px; gap: 0; }
  #topCenterSlot .sq-mode-tab .sq-mode-name { display: none; }
  #topCenterSlot .sq-mode-tab .sq-mode-ico { font-size: 17px; }
}

.sq-mode-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 11px;
  background: rgba(255,255,255,0.025);
  color: #c7ccd8;
  font-family: inherit;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s ease, background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sq-mode-tab .sq-mode-ico { font-size: 18px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.sq-mode-tab .sq-mode-name { white-space: nowrap; }

.sq-mode-tab:hover {
  transform: translateY(-2px);
  color: #fff;
  border-color: color-mix(in srgb, var(--m-accent) 55%, transparent);
  background: color-mix(in srgb, var(--m-accent) 14%, rgba(255,255,255,0.02));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--m-accent) 30%, transparent);
}

.sq-mode-tab.active {
  color: #fff;
  border-color: var(--m-accent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--m-accent) 38%, #14151c),
    color-mix(in srgb, var(--m-accent) 18%, #0c0d12));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--m-accent) 60%, transparent),
    0 8px 22px color-mix(in srgb, var(--m-accent) 45%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.18);
  text-shadow: 0 0 10px color-mix(in srgb, var(--m-accent2) 70%, transparent);
}
.sq-mode-tab.active .sq-mode-ico {
  filter: drop-shadow(0 0 8px var(--m-accent2));
  transform: scale(1.12);
}

/* (mode-switch responsive rules removed — fixed design stage handles scaling;
   the switcher always renders full-size at design width and scales uniformly.) */

/* ════════════════════════════════════════════════════════════
   MODE INFO RIBBON — per-mode plain-language explainer
   ════════════════════════════════════════════════════════════ */
.sq-mode-info {
  position: relative;
  z-index: 28;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  width: max-content;
  max-width: 96%;
  margin: 4px auto 2px;
  padding: 4px 12px;
  zoom: 0.82;   /* compact: the reels are the hero, not the explainer */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--sq-accent) 16%, rgba(10,11,16,0.92)),
    rgba(8,9,14,0.92));
  border: 1px solid color-mix(in srgb, var(--sq-accent) 45%, transparent);
  border-radius: 13px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 0 1px color-mix(in srgb, var(--sq-accent) 18%, transparent);
}
.sq-mi-main { display: flex; align-items: center; gap: 11px; }
.sq-mi-ico { font-size: 26px; filter: drop-shadow(0 0 8px var(--sq-accent2)); }
.sq-mi-how { color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .2px; }
.sq-mi-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.sq-mi-chip {
  font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  color: color-mix(in srgb, var(--sq-accent2) 80%, #fff);
  background: color-mix(in srgb, var(--sq-accent) 20%, rgba(255,255,255,0.03));
  border: 1px solid color-mix(in srgb, var(--sq-accent) 50%, transparent);
}
.sq-mi-stats { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sq-mi-stat {
  display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1;
  padding-left: 10px; border-left: 1px solid rgba(255,255,255,0.10);
}
.sq-mi-k { font-size: 9px; color: #9aa3b2; text-transform: uppercase; letter-spacing: .5px; }
.sq-mi-v { font-size: 13px; font-weight: 900; color: var(--sq-accent2); text-shadow: 0 0 8px color-mix(in srgb, var(--sq-accent2) 50%, transparent); }

.sq-mi-jackpots { display: flex; gap: 6px; }
.sq-mi-jp {
  font-size: 11px; font-weight: 800; color: #fff;
  padding: 4px 9px; border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,207,77,.22), rgba(0,0,0,.25));
  border: 1px solid rgba(255,207,77,.55);
}
.sq-mi-jp b { color: #ffcf4d; margin-right: 3px; }

.sq-mi-lines-btn {
  font-family: inherit; font-weight: 900; font-size: 11px; letter-spacing: .5px;
  padding: 7px 13px; border-radius: 9px; cursor: pointer; color: #0a0b10;
  background: linear-gradient(180deg, var(--sq-accent2), var(--sq-accent));
  border: 1px solid #fff3; box-shadow: 0 4px 14px color-mix(in srgb, var(--sq-accent) 45%, transparent);
  transition: transform .15s ease, filter .2s ease;
}
.sq-mi-lines-btn:hover { transform: translateY(-1px); filter: brightness(1.1); }
.sq-mi-lines-btn.on { color: #fff; background: rgba(255,255,255,0.06); border-color: var(--sq-accent); }

/* (mode-info responsive rule removed — fixed design stage handles scaling.) */

/* ════════════════════════════════════════════════════════════
   PRELOADER — covers the slot until every asset is ready
   ════════════════════════════════════════════════════════════ */
.sq-preloader {
  position: absolute;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: radial-gradient(ellipse at center, #14151c 0%, #06070b 75%);
  transition: opacity .5s ease, visibility .5s ease;
}
.sq-preloader.hide { opacity: 0; visibility: hidden; pointer-events: none; }

.sq-pre-logo {
  font-family: 'Anton', 'Oswald', sans-serif;
  font-size: clamp(34px, 6vw, 64px);
  font-weight: 900;
  letter-spacing: 4px;
  color: #fff;
  text-shadow: 0 0 18px #ff3b3b, 0 0 40px rgba(255,59,59,.5);
  animation: sqPrePulse 1.6s ease-in-out infinite;
}
@keyframes sqPrePulse { 0%,100%{transform:scale(1);opacity:.92} 50%{transform:scale(1.04);opacity:1} }

.sq-pre-sub { color: #c7ccd8; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; }

.sq-pre-bar {
  width: min(420px, 70%);
  height: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6);
}
.sq-pre-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff3b3b, #ffcf4d);
  box-shadow: 0 0 14px rgba(255,159,77,.7);
  transition: width .25s ease;
}
.sq-pre-pct { color: #ffcf4d; font-weight: 900; font-size: 20px; letter-spacing: 1px; }
.sq-pre-hint { color: #6b7385; font-size: 12px; letter-spacing: 1px; }

/* ── Lines-count selector (lines mode) ── */
.sq-lines-ctrl { display: flex; gap: 5px; margin-top: 4px; }
.sq-lines-opt {
  flex: 1; min-width: 30px;
  padding: 5px 0; border-radius: 7px; cursor: pointer;
  font-family: inherit; font-weight: 900; font-size: 13px;
  color: #c7ccd8; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  transition: all .15s ease;
}
.sq-lines-opt:hover { color:#fff; border-color: var(--sq-accent); }
.sq-lines-opt.active {
  color: #0a0b10;
  background: linear-gradient(180deg, var(--sq-accent2), var(--sq-accent));
  border-color: #fff3;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--sq-accent) 45%, transparent);
}

/* ════════════════════════════════════════════════════════════
   RISK / GAMBLE (double-up) game
   ════════════════════════════════════════════════════════════ */
.sq-risk-btn {
  background: linear-gradient(180deg, #ffcf4d, #f59e0b) !important;
  color: #1a0e00 !important;
  font-weight: 900 !important;
  border: 1px solid #fff4 !important;
  box-shadow: 0 0 18px rgba(245,158,11,.6) !important;
  animation: sqRiskPulse 1.1s ease-in-out infinite;
}
@keyframes sqRiskPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }

.sq-gamble-modal {
  position: absolute; inset: 0; z-index: 600;
  display: none; align-items: center; justify-content: center;
  background: rgba(2,3,6,0.82); backdrop-filter: blur(6px);
}
.sq-gamble-modal.show { display: flex; }
.sq-gamble-content {
  position: relative;
  isolation: isolate;
  width: min(420px, 92%);
  padding: 22px 24px 18px;
  border-radius: 18px;
  text-align: center;
  background: transparent;
  border: none;
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
  /* periodic "take me!" shimmy — mostly still, brief shake every ~3.4s */
  animation: sqGambleShake 3.4s ease-in-out infinite;
}
/* Live "connecting line" that traces the frame with a glowing energy sweep. */
.sq-gamble-content::before {
  content: ''; position: absolute; inset: -3px; border-radius: 21px; z-index: -2;
  background: conic-gradient(from 0deg,
      rgba(255,207,77,0) 0deg 215deg,
      rgba(255,207,77,.12) 255deg,
      #ffcf4d 300deg,
      #ff4d6d 328deg,
      #7afcff 348deg,
      rgba(122,252,255,0) 360deg);
  animation: sqGambleTrace 1.7s linear infinite;
  filter: drop-shadow(0 0 7px rgba(255,207,77,.8));
}
/* Dark inner fill leaves only a thin glowing rim of the sweep visible. */
.sq-gamble-content::after {
  content: ''; position: absolute; inset: 0; border-radius: 18px; z-index: -1;
  background: linear-gradient(180deg, #1a1230, #0c0814);
  box-shadow: inset 0 0 28px rgba(0,0,0,.55);
}
@keyframes sqGambleTrace { to { transform: rotate(360deg); } }
@keyframes sqGambleShake {
  0%, 80%, 100% { transform: translate(0,0) rotate(0deg); }
  83% { transform: translate(-4px, 1px) rotate(-.7deg); }
  86% { transform: translate(4px, -2px) rotate(.7deg); }
  89% { transform: translate(-3px, 1px) rotate(-.5deg); }
  92% { transform: translate(3px, -1px) rotate(.4deg); }
  95% { transform: translate(-2px, 0) rotate(-.2deg); }
  98% { transform: translate(1px, 0) rotate(0deg); }
}
.sq-gamble-title { font-family:'Exo 2',sans-serif; font-weight:900; font-size:20px; letter-spacing:1px; color:#ffcf4d; text-shadow:0 0 14px rgba(245,158,11,.6); }
.sq-gamble-amt-row { margin-top:8px; color:#c7ccd8; font-size:14px; font-weight:700; }
.sq-gamble-amt { color:#fff; font-family:'Share Tech Mono',monospace; font-size:20px; }

.sq-gamble-card {
  width: 110px; height: 150px; margin: 16px auto;
  border-radius: 14px; display:grid; place-items:center;
  font-size: 56px;
  background: linear-gradient(145deg, #2a2342, #15101f);
  border: 2px solid rgba(255,255,255,.25);
  box-shadow: inset 0 0 24px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.5);
  transition: transform .35s ease, box-shadow .3s ease, border-color .3s ease;
}
.sq-gamble-card.flipping { transform: rotateY(180deg) scale(.96); }
.sq-gamble-card.red   { border-color:#ff4d6d; box-shadow:0 0 28px rgba(255,77,109,.7), inset 0 0 24px rgba(255,77,109,.25); }
.sq-gamble-card.black { border-color:#6b7385; box-shadow:0 0 28px rgba(120,130,150,.6), inset 0 0 24px rgba(0,0,0,.5); }

.sq-gamble-prompt { color:#aab0be; font-size:13px; min-height:18px; margin-bottom:12px; }
.sq-gamble-choices { display:flex; gap:12px; }
.sq-gamble-pick {
  flex:1; padding:13px 0; border-radius:11px; cursor:pointer;
  font-family:inherit; font-weight:900; font-size:15px; color:#fff;
  border:1px solid #fff3; transition: transform .15s ease, filter .2s ease;
}
.sq-gamble-pick.red   { background:linear-gradient(180deg,#ff4d6d,#c81e3c); }
.sq-gamble-pick.black { background:linear-gradient(180deg,#3a4254,#1a1f2b); }
.sq-gamble-pick:hover:not(:disabled) { transform:translateY(-2px); filter:brightness(1.12); }
.sq-gamble-pick:disabled { opacity:.45; cursor:default; }

.sq-gamble-ladder { display:flex; gap:5px; justify-content:center; flex-wrap:wrap; min-height:24px; margin:12px 0 4px; }
.sq-gl-chip { font-size:12px; font-weight:900; padding:3px 8px; border-radius:6px; }
.sq-gl-chip.win  { background:rgba(34,197,94,.25); color:#4ade80; border:1px solid rgba(34,197,94,.5); }
.sq-gl-chip.lose { background:rgba(239,68,68,.25); color:#f87171; border:1px solid rgba(239,68,68,.5); }

.sq-gamble-collect {
  margin-top:8px; width:100%; padding:12px 0; border-radius:11px; cursor:pointer;
  font-family:inherit; font-weight:900; font-size:15px; color:#0a0b10;
  background:linear-gradient(180deg,#4ade80,#16a34a); border:1px solid #fff3;
  box-shadow:0 4px 16px rgba(22,163,74,.45);
}
.sq-gamble-collect:hover { filter:brightness(1.1); }

/* ════════════════════════════════════════════════════════════
   LAYOUT OVERHAUL — centered spin, real jackpot ladder, more reel space
   ════════════════════════════════════════════════════════════ */
/* 3-zone control bar: spin button always dead-centre */
.sq-controls {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 10px 20px !important;
}
.sq-ctrl-zone { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sq-ctrl-zone.left   { justify-content: flex-start; }
.sq-ctrl-zone.center { justify-content: center; }
.sq-ctrl-zone.right  { justify-content: flex-end; }

/* Compact header so the reels get more room */
.sq-header { padding: 4px 0 4px !important; }
.sq-title { font-size: 22px !important; margin-top: 0 !important; }
.sq-subtitle { font-size: 10px !important; }
.sq-mode-info { margin: 4px auto 2px !important; padding: 6px 14px !important; }
.sq-dispute-bar { padding: 6px 24px 5px !important; }

/* Real progressive jackpot ladder */
.sq-jackpots {
  display: flex; justify-content: center; align-items: flex-end;
  gap: 8px; margin: 2px auto 4px; flex-wrap: wrap;
}
.sq-jp-tier {
  display: flex; flex-direction: column; align-items: center; line-height: 1.05;
  padding: 4px 12px; border-radius: 9px;
  background: rgba(10,8,2,0.6); border: 1px solid rgba(255,255,255,0.12);
}
.sq-jp-name { font-size: 9px; font-weight: 800; letter-spacing: .12em; color: #9aa3b2; text-transform: uppercase; }
.sq-jp-val  { font-family:'Share Tech Mono',monospace; font-weight: 900; color:#fff; font-size: 15px; }
.sq-jp-tier.mini  { border-color: rgba(120,180,255,.4); }
.sq-jp-tier.minor { border-color: rgba(120,255,180,.4); }
.sq-jp-tier.major { border-color: rgba(200,120,255,.45); }
.sq-jp-tier.grand {
  padding: 5px 18px;
  background: linear-gradient(180deg, rgba(255,180,40,.28), rgba(120,40,0,.35));
  border: 1px solid #ffcf4d;
  box-shadow: 0 0 18px rgba(255,180,40,.45);
  animation: sqJpGrandPulse 1.8s ease-in-out infinite;
}
.sq-jp-tier.grand .sq-jp-name { color: #ffcf4d; text-shadow: 0 0 8px rgba(255,180,40,.7); }
.sq-jp-tier.grand .sq-jp-val  { font-size: 22px; color: #fff; text-shadow: 0 0 12px rgba(255,180,40,.8); }
@keyframes sqJpGrandPulse { 0%,100%{box-shadow:0 0 18px rgba(255,180,40,.45)} 50%{box-shadow:0 0 30px rgba(255,180,40,.8)} }

/* Jackpot WIN popup */
.sq-jackpot-modal {
  position: absolute; inset: 0; z-index: 800;
  display: none; align-items: center; justify-content: center;
  background: rgba(2,2,6,.86); backdrop-filter: blur(8px); overflow: hidden;
}
.sq-jackpot-modal.show { display: flex; animation: sqJpwIn .4s ease; }
@keyframes sqJpwIn { from{opacity:0} to{opacity:1} }
.sq-jpw-rays {
  position: absolute; width: 200vmax; height: 200vmax;
  background: repeating-conic-gradient(from 0deg, rgba(255,207,77,.18) 0deg 8deg, transparent 8deg 16deg);
  animation: sqJpwSpin 14s linear infinite;
}
@keyframes sqJpwSpin { to { transform: rotate(360deg); } }
.sq-jpw-content { position: relative; text-align: center; }
.sq-jpw-tier { font-family:'Exo 2',sans-serif; font-weight: 900; font-size: 26px; letter-spacing: 3px; color:#ffcf4d; text-shadow:0 0 16px rgba(255,180,40,.9); }
.sq-jpw-title { font-family:'Anton','Oswald',sans-serif; font-size: clamp(48px,10vw,110px); font-weight: 900; letter-spacing: 4px; color:#fff; text-shadow:0 0 30px #ffcf4d, 0 0 70px rgba(255,120,0,.7); animation: sqJpwPop .6s cubic-bezier(.2,1.3,.4,1); }
@keyframes sqJpwPop { from{transform:scale(.3);opacity:0} to{transform:scale(1);opacity:1} }
.sq-jpw-amount { font-family:'Share Tech Mono',monospace; font-size: clamp(30px,6vw,56px); font-weight: 900; color:#4ade80; text-shadow:0 0 20px rgba(74,222,128,.8); margin: 6px 0 22px; }
.sq-jpw-close {
  font-family:inherit; font-weight:900; font-size:18px; padding:14px 38px; border-radius:14px; cursor:pointer; color:#1a0e00;
  background:linear-gradient(180deg,#ffe08a,#f59e0b); border:1px solid #fff5; box-shadow:0 8px 28px rgba(245,158,11,.6);
}
.sq-jpw-close:hover { filter: brightness(1.1); }

/* (jackpot/controls responsive rules removed — fixed design stage handles scaling.) */

/* ════════════════════════════════════════════════════════════
   🎡 WHEEL OF FORTUNE
   ════════════════════════════════════════════════════════════ */
.sq-wheel-modal {
  position: absolute; inset: 0; z-index: 700;
  display: none; align-items: center; justify-content: center;
  background: rgba(2,2,6,.86); backdrop-filter: blur(7px);
}
.sq-wheel-modal.show { display: flex; }
.sq-wheel-content {
  text-align: center; padding: 18px 22px 20px; border-radius: 18px;
  background: linear-gradient(180deg, #1a1230, #0c0814);
  border: 1px solid rgba(255,207,77,.5);
  box-shadow: 0 20px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(255,207,77,.18);
}
.sq-wheel-title {
  font-family:'Exo 2',sans-serif; font-weight:900; font-size:22px; letter-spacing:1px;
  color:#ffcf4d; text-shadow:0 0 14px rgba(245,158,11,.7); margin-bottom: 12px;
}
.sq-wheel-stage { position: relative; width: 360px; max-width: 78vw; margin: 0 auto; aspect-ratio: 1; }
.sq-wheel-stage canvas { width: 100%; height: 100%; filter: drop-shadow(0 8px 26px rgba(0,0,0,.6)); }
.sq-wheel-pointer {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; z-index: 3;
  border-left: 16px solid transparent; border-right: 16px solid transparent;
  border-top: 28px solid #ffcf4d; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
}
.sq-wheel-hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #fff, #f59e0b);
  border: 3px solid #1a0e00; color: #1a0e00; font-weight: 900; font-size: 22px;
  box-shadow: 0 0 16px rgba(255,207,77,.8); z-index: 2;
}
.sq-wheel-result { margin: 14px 0 12px; color: #fff; font-size: 18px; font-weight: 800; min-height: 24px; }
.sq-wheel-result b { color: #4ade80; }
.sq-wheel-spin {
  display: block; width: 100%; padding: 13px 0; border-radius: 12px; cursor: pointer;
  font-family: inherit; font-weight: 900; font-size: 16px; color: #1a0e00;
  background: linear-gradient(180deg, #ffe08a, #f59e0b); border: 1px solid #fff5;
  box-shadow: 0 8px 24px rgba(245,158,11,.55);
}
.sq-wheel-spin:hover:not(:disabled) { filter: brightness(1.1); }
.sq-wheel-spin:disabled { opacity: .5; cursor: default; }
.sq-wheel-close {
  margin-top: 8px; background: none; border: none; color: #9aa3b2; cursor: pointer;
  font-family: inherit; font-size: 13px; text-decoration: underline;
}

/* ════════════════════════════════════════════════════════════
   AI ART — per-mode backgrounds + wheel medallion hub
   ════════════════════════════════════════════════════════════ */
.sq-bg {
  background-size: cover;
  background-position: center;
  filter: blur(8px) brightness(0.34) saturate(1.05);
  transition: filter .5s ease;
}
.sq-machine[data-mode="chaos"]   .sq-bg { background-image: url('assets/bg/bg_chaos.webp'); }
.sq-machine[data-mode="gates"]   .sq-bg { background-image: url('assets/bg/bg_gates.webp'); }
.sq-machine[data-mode="cluster"] .sq-bg { background-image: url('assets/bg/bg_cluster.webp'); }
/* free-spins keeps its own brighter/burning treatment (more specific selector wins) */

/* Ornate medallion as the wheel hub (circular crop hides the square white corners) */
.sq-wheel-hub {
  width: 96px; height: 96px;
  background: url('assets/bg/wheel_medallion.webp') center/cover;
  border: 4px solid #ffcf4d;
  font-size: 0; /* hide the fallback × */
  box-shadow: 0 0 26px rgba(255,207,77,.95), inset 0 0 0 2px rgba(0,0,0,.3);
}

/* ════════════════════════════════════════════════════════════
   🎉 BIG / MEGA / EPIC WIN celebration popup (uses bigwin.jpg)
   ════════════════════════════════════════════════════════════ */
.sq-bigwin-modal {
  position: absolute; inset: 0; z-index: 750;
  display: none; align-items: center; justify-content: center;
  background: rgba(2,2,6,.72); overflow: hidden; cursor: pointer;
}
.sq-bigwin-modal.show { display: flex; animation: sqBwFade .3s ease; }
@keyframes sqBwFade { from{opacity:0} to{opacity:1} }
.sq-bigwin-art {
  position: absolute; inset: -10%;
  background: url('assets/bg/bigwin.webp') center/contain no-repeat;
  mix-blend-mode: screen;   /* white bg → bright flash, gold burst glows */
  animation: sqBwSpin 9s linear infinite, sqBwPulse 2.2s ease-in-out infinite;
}
@keyframes sqBwSpin  { to { transform: rotate(360deg); } }
@keyframes sqBwPulse { 0%,100%{ filter:brightness(1) } 50%{ filter:brightness(1.25) } }
.sq-bigwin-inner { position: relative; text-align: center; z-index: 2; animation: sqBwPop .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes sqBwPop { from{ transform:scale(.4); opacity:0 } to{ transform:scale(1); opacity:1 } }
.sq-bigwin-tier {
  font-family:'Anton','Oswald',sans-serif; font-weight:900;
  font-size: clamp(40px, 9vw, 92px); letter-spacing: 3px; line-height: 1;
  -webkit-text-stroke: 2px rgba(0,0,0,.45);
}
.sq-bigwin-amount {
  font-family:'Share Tech Mono',monospace; font-weight:900;
  font-size: clamp(30px, 6vw, 60px); color:#fff; margin-top: 6px;
  text-shadow: 0 0 18px rgba(0,0,0,.8), 0 2px 4px #000;
}
/* tier colours */
.sq-bigwin-modal.big  .sq-bigwin-tier { color:#ffd54f; text-shadow:0 0 28px #ffae00, 0 0 60px rgba(255,174,0,.6); }
.sq-bigwin-modal.mega .sq-bigwin-tier { color:#ff8a3d; text-shadow:0 0 28px #ff5a1f, 0 0 70px rgba(255,90,31,.7); }
.sq-bigwin-modal.epic .sq-bigwin-tier {
  background: linear-gradient(90deg,#ffd54f,#ff80ab,#22d3ee,#a855f7,#ffd54f);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: sqEpicHue 2s linear infinite; filter: drop-shadow(0 0 26px rgba(168,85,247,.7));
}
@keyframes sqEpicHue { to { background-position: 300% 0; } }

/* ════════════════════════════════════════════════════════════
   🎁 PICK-ME (chests)
   ════════════════════════════════════════════════════════════ */
.sq-pick-modal {
  position: absolute; inset: 0; z-index: 700;
  display: none; align-items: center; justify-content: center;
  background: rgba(2,2,6,.85); backdrop-filter: blur(7px);
}
.sq-pick-modal.show { display: flex; }
.sq-pick-content {
  text-align: center; padding: 20px 24px; border-radius: 18px; width: min(440px, 92vw);
  background: linear-gradient(180deg, #1a1230, #0c0814);
  border: 1px solid rgba(255,207,77,.5);
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
}
.sq-pick-title { font-family:'Exo 2',sans-serif; font-weight:900; font-size:21px; color:#ffcf4d; text-shadow:0 0 14px rgba(245,158,11,.7); }
.sq-pick-sub { color:#aab0be; font-size:13px; margin:6px 0 14px; min-height:18px; }
.sq-pick-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; }
.sq-chest {
  aspect-ratio: 1; border-radius: 12px; cursor:pointer; font-size: 26px;
  display:grid; place-items:center; font-family:inherit; font-weight:900;
  background: linear-gradient(180deg, #2a2342, #15101f);
  border: 1px solid rgba(255,255,255,.14); color:#fff;
  transition: transform .12s ease, background .2s ease, box-shadow .2s ease;
}
.sq-chest:hover:not(.open) { transform: translateY(-3px) scale(1.04); box-shadow: 0 6px 18px rgba(255,207,77,.4); border-color:#ffcf4d; }
.sq-chest.open { cursor: default; font-size: 15px; animation: sqChestPop .3s ease; }
@keyframes sqChestPop { from{ transform:scale(.6) rotate(-6deg) } to{ transform:scale(1) rotate(0) } }
.sq-chest.cash { background: linear-gradient(180deg,#16a34a,#0f7a37); border-color:#4ade80; color:#fff; text-shadow:0 1px 2px #000; }
.sq-chest.stop { background: linear-gradient(180deg,#c81e3c,#7a1020); border-color:#ff4d6d; color:#fff; }
.sq-chest.dim  { opacity:.28; }
.sq-pick-total { margin:14px 0 12px; color:#fff; font-weight:800; font-size:17px; }
.sq-pick-total span { color:#4ade80; font-family:'Share Tech Mono',monospace; }
.sq-pick-close {
  width:100%; padding:12px 0; border-radius:12px; cursor:pointer; font-family:inherit; font-weight:900; font-size:15px;
  color:#0a0b10; background:linear-gradient(180deg,#4ade80,#16a34a); border:1px solid #fff3; box-shadow:0 4px 16px rgba(22,163,74,.45);
}
.sq-pick-close:hover { filter:brightness(1.1); }

/* ════════════════════════════════════════════════════════════
   WOW EFFECTS KIT — shockwave rings, light burst, chromatic flash
   ════════════════════════════════════════════════════════════ */
.sq-fx-ring {
  position: absolute; transform: translate(-50%,-50%);
  border-radius: 50%; border: 4px solid #ffcf4d; pointer-events: none; z-index: 60;
}
.sq-fx-rays {
  position: absolute; left: 50%; top: 46%; width: 150%; height: 150%;
  transform: translate(-50%,-50%); pointer-events: none; z-index: 58;
  background: repeating-conic-gradient(from 0deg, rgba(255,207,77,.55) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(closest-side, #000 0%, rgba(0,0,0,.5) 40%, transparent 72%);
          mask: radial-gradient(closest-side, #000 0%, rgba(0,0,0,.5) 40%, transparent 72%);
}
.sq-fx-flash { position: absolute; inset: 0; pointer-events: none; z-index: 62; }

/* ── Big-win explosion: CSS rays instead of the old white-bg image ── */
.sq-bigwin-modal { background: radial-gradient(circle at 50% 47%, rgba(70,38,0,.45), rgba(2,2,6,.85)); }
.sq-bigwin-art {
  inset: auto !important; left: 50%; top: 49%; width: 175vmax; height: 175vmax;
  transform: translate(-50%,-50%);
  background: repeating-conic-gradient(from 0deg,
     rgba(255,205,90,.20) 0 3.2deg, transparent 3.2deg 8.5deg) !important;
  mix-blend-mode: screen !important;
  -webkit-mask: radial-gradient(closest-side, #000 14%, rgba(0,0,0,.55) 45%, transparent 72%);
          mask: radial-gradient(closest-side, #000 14%, rgba(0,0,0,.55) 45%, transparent 72%);
}
.sq-bigwin-modal.mega .sq-bigwin-art { background: repeating-conic-gradient(from 0deg, rgba(255,120,40,.24) 0 3.2deg, transparent 3.2deg 8.5deg) !important; }
.sq-bigwin-modal.epic .sq-bigwin-art { background: repeating-conic-gradient(from 0deg, rgba(180,90,255,.24) 0 3.2deg, transparent 3.2deg 8.5deg) !important; }
.sq-bigwin-inner::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 120vmin; height: 120vmin;
  transform: translate(-50%,-50%); z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(255,200,90,.35) 0%, rgba(255,150,0,.12) 35%, transparent 65%);
  animation: sqBwPulse 1.6s ease-in-out infinite;
}

/* ── Iridescent animated wheel rim ── */
.sq-wheel-stage::after {
  content: ''; position: absolute; inset: -12px; border-radius: 50%;
  pointer-events: none; z-index: 1;
  background: conic-gradient(from 0deg, #ffcf4d, #ff6a3d, #ec4899, #b35aff, #22d3ee, #4ade80, #ffcf4d);
  -webkit-mask: radial-gradient(closest-side, transparent 90%, #000 91%);
          mask: radial-gradient(closest-side, transparent 90%, #000 91%);
  filter: blur(2px) saturate(1.4);
  animation: sqWheelRim 3.5s linear infinite;
  opacity: .9;
}
@keyframes sqWheelRim { to { transform: rotate(360deg); } }
.sq-wheel-stage { filter: drop-shadow(0 0 22px rgba(255,207,77,.45)); }

/* ── 🕊️ Seagull raid (steals клады) ── */
.sq-seagull {
  position: absolute; left: -14%; transform: translateY(-50%);
  font-size: 52px; z-index: 70; pointer-events: none;
  filter: drop-shadow(0 0 14px #fff) drop-shadow(-22px 0 18px rgba(180,220,255,.6));
}
.sq-seagull-label {
  /* Big flashing call-out pinned near the top so it never covers the bird,
     which flies across the reel band lower on the screen. */
  position: absolute; left: 50%; top: 9%; transform: translateX(-50%);
  z-index: 71; pointer-events: none; white-space: nowrap;
  font-family: 'Exo 2', sans-serif; font-weight: 900; font-size: 44px; letter-spacing: 2px;
  color: #eaf6ff;
  text-shadow: 0 0 18px #7fd0ff, 0 0 44px rgba(120,200,255,.85), 0 0 80px rgba(120,200,255,.5), 0 3px 6px #000;
  animation: sqSeagullBlink 0.42s steps(2, jump-none) infinite;
}
@keyframes sqSeagullBlink {
  0%   { opacity: 1;   text-shadow: 0 0 18px #7fd0ff, 0 0 44px rgba(120,200,255,.85), 0 0 80px rgba(120,200,255,.5), 0 3px 6px #000; }
  100% { opacity: .55; text-shadow: 0 0 8px #7fd0ff, 0 0 20px rgba(120,200,255,.5), 0 2px 4px #000; }
}

/* ════════════════════════════════════════════════════════════
   💣 MONEY CART / Инкассация общака
   ════════════════════════════════════════════════════════════ */
.sq-mc-modal {
  position: absolute; inset: 0; z-index: 700;
  display: none; align-items: center; justify-content: center;
  background: rgba(2,4,8,.9); backdrop-filter: blur(7px);
}
.sq-mc-modal.show { display: flex; }
.sq-mc-content {
  width: min(560px, 94vw); padding: 18px 20px 20px; border-radius: 18px; text-align: center;
  background: linear-gradient(180deg, #0c1726, #060a12);
  border: 1px solid rgba(34,211,238,.45);
  box-shadow: 0 20px 60px rgba(0,0,0,.75), 0 0 0 1px rgba(34,211,238,.15);
}
.sq-mc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sq-mc-title { font-family:'Exo 2',sans-serif; font-weight:900; font-size:19px; color:#ffcf4d; text-shadow:0 0 14px rgba(245,158,11,.6); }
.sq-mc-respins { font-family:'Share Tech Mono',monospace; font-weight:900; color:#22d3ee; font-size:14px; }
.sq-mc-respins span { color:#fff; font-size:18px; }
.sq-mc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.sq-mc-cell {
  aspect-ratio: 1; border-radius: 9px; display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 6px, rgba(255,255,255,.04) 6px 12px);
  border: 1px solid rgba(255,255,255,.07);
}
.sq-mc-cell.filled { border-color: rgba(255,255,255,.18); }
.sq-mc-cell.t-coin { background: linear-gradient(180deg,#0e7a4a,#0a5233); border-color:#22d3ee; }
.sq-mc-cell.t-coin .mc-coin { font-family:'Share Tech Mono',monospace; font-weight:900; font-size:17px; color:#eafff5; text-shadow:0 1px 2px #000; }
.sq-mc-cell.t-payer { background: linear-gradient(180deg,#1e6b8f,#0f3a52); border-color:#38bdf8; }
.sq-mc-cell.t-sniper { background: linear-gradient(180deg,#8a5a1e,#523210); border-color:#ffcf4d; }
.sq-mc-cell.t-collector { background: linear-gradient(180deg,#7a2f8f,#3a1052); border-color:#d68fff; }
.sq-mc-cell.collected { background: linear-gradient(180deg,#caa23a,#8a6a10); border-color:#ffe08a; box-shadow:0 0 18px rgba(255,207,77,.6); }
.sq-mc-cell.collected .mc-coin { color:#1a0e00; }
.mc-ag { display:flex; flex-direction:column; align-items:center; line-height:1; font-size: 20px; }
.mc-ag small { font-size: 7.5px; font-weight:900; letter-spacing:.3px; color:#fff; opacity:.85; margin-top:2px; }
.sq-mc-cell.agent-fire { box-shadow: 0 0 20px currentColor; }
.sq-mc-total { margin: 14px 0 12px; color:#fff; font-weight:800; font-size:18px; }
.sq-mc-total span { color:#4ade80; font-family:'Share Tech Mono',monospace; font-size:22px; }
.sq-mc-close {
  width:100%; padding:13px 0; border-radius:12px; cursor:pointer; font-family:inherit; font-weight:900; font-size:16px;
  color:#0a0b10; background:linear-gradient(180deg,#4ade80,#16a34a); border:1px solid #fff3; box-shadow:0 6px 20px rgba(22,163,74,.5);
}
.sq-mc-close:hover { filter:brightness(1.1); }

/* Compact two-line label for the Hold&Win respin state (fits the round button) */
.sq-spin-btn .sq-spin-sub { display:block; font-size:10px; line-height:1.15; letter-spacing:.3px; opacity:.95; }
.sq-spin-btn .sq-spin-num { display:block; font-size:26px; font-weight:900; line-height:1; }

/* Long game-name logo fits on all widths */
.sq-pre-logo { font-size: clamp(24px, 5vw, 46px) !important; text-align: center; padding: 0 12px; word-break: break-word; }

/* ════════════════════════════════════════════════════════════
   COMPACT TOP (more reel space) + responsive controls (no overlap)
   ════════════════════════════════════════════════════════════ */
.sq-mode-switch { margin: 2px auto 2px !important; }
.sq-mode-info   { margin: 3px auto 3px !important; }
.sq-header      { padding: 2px 0 2px !important; border-bottom: none !important; }
.sq-jackpots    { margin: 0 auto 2px !important; }

/* control zones never let their items overflow into the centre spin */
.sq-ctrl-zone { flex-wrap: wrap; }

/* (controls responsive wrap removed — fixed design stage handles scaling; the
   controls always lay out at design width 1580 and scale uniformly. The 980px
   wrap used to make the controls TALLER on small screens, which shrank the reel
   and broke the fixed proportions.) */

/* ════════════════════════════════════════════════════════════
   BRIGHT SHARP SYMBOLS — let the original art shine (the PNGs already
   carry their own neon ring; the dark card bg + double frame + glass
   sheen were dimming & shrinking them). Show big & vivid.
   ════════════════════════════════════════════════════════════ */
.sq-cell { padding: 3px !important; }
/* Full square art as a framed TILE: object-fit cover fills the cell (no empty
   corners), a thin tile frame + dark base makes even dark noir art readable. */
.sq-symbol-card,
.sq-symbol-card.tier-special,
.sq-symbol-card.tier-high,
.sq-symbol-card.tier-medium,
.sq-symbol-card.tier-low {
  background: #0a0a12 !important;
  border: 1.5px solid rgba(255,255,255,0.16) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 0 16px rgba(0,0,0,0.55), 0 3px 9px rgba(0,0,0,0.7) !important;
  overflow: hidden !important;
  animation: none !important;
}
.sq-symbol-card::after { display: none !important; }
.sq-symbol-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 11px;
  filter: brightness(1.22) saturate(1.18) contrast(1.06) !important;
}
/* tier-tinted frame so symbol rank reads at a glance */
.sq-symbol-card.tier-high   { border-color: rgba(255,90,90,0.5) !important; }
.sq-symbol-card.tier-medium { border-color: rgba(90,170,255,0.5) !important; }
.sq-symbol-card.tier-special{ border-color: rgba(255,200,80,0.6) !important; }
.sq-cell.win .sq-symbol-card {
  border-color: var(--sq-accent2, #ffcf4d) !important;
  box-shadow: 0 0 20px var(--sq-accent2, #ffcf4d) !important;
}
.sq-cell.win .sq-symbol-card img { filter: brightness(1.4) saturate(1.3) !important; }

/* Per-mode symbol zoom inside the reel cells (card overflow:hidden crops the surplus) */
.sq-machine[data-mode="lines"]   .sq-symbol-card img { transform: scale(1.13) translateZ(0) !important; }
.sq-machine[data-mode="gates"]   .sq-symbol-card img { transform: scale(1.18) translateZ(0) !important; }
.sq-machine[data-mode="cluster"] .sq-symbol-card img { transform: scale(1.18) translateZ(0) !important; }

/* ── "3D unavailable" gate notice (shown when WebGL is missing) ── */
.sq-unsupported {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
.sq-unsupported-card {
  position: relative;
  max-width: 480px;
  width: 100%;
  text-align: center;
  padding: 34px 30px 30px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(30,4,4,0.96), rgba(10,0,0,0.97));
  border: 1px solid rgba(255,42,42,0.45);
  box-shadow: 0 0 0 1px rgba(255,170,0,0.08),
              0 18px 60px rgba(0,0,0,0.7),
              0 0 50px rgba(255,42,42,0.18);
}
.sq-unsupported-ico {
  font-size: 54px;
  line-height: 1;
  margin-bottom: 14px;
  filter: drop-shadow(0 0 14px rgba(255,42,42,0.6));
}
.sq-unsupported-title {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--gold, #ffaa00);
  text-shadow: 0 0 16px rgba(255,170,0,0.4);
}
.sq-unsupported-text {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
}
.sq-unsupported-tip {
  margin: 18px 0 0;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.55;
  color: #fff;
  background: rgba(255,170,0,0.08);
  border: 1px solid rgba(255,170,0,0.3);
  border-radius: 12px;
}
.sq-unsupported-tip b { color: var(--gold, #ffaa00); }
.sq-unsupported-reason {
  margin-top: 18px;
  font-size: 11px;
  letter-spacing: 0.4px;
  color: rgba(255,255,255,0.4);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}