/* FIX-51 assembled: gamba-stage.css = shell + 9 game modules */
/* Shity Casino — FIX-51 Gamba stage SHELL styles.
   Shell classes only: the stage container, the shared result banner /
   payout line every module may reuse, the waiting pulse, and the
   generic fallback stage. Game-specific visuals live in each module's
   own .gs-<game> stylesheet — never here.
   Phone-first (390px, no horizontal overflow), tokens and look match
   the house game-stage.css (dark card, gold accent, win green). */
.gs-shell{
  margin-top:12px;
  background:var(--card,#17171f);
  border:1px solid var(--card-border,#26262f);
  border-radius:var(--radius,14px);
  overflow:hidden;
  max-width:100%;
  box-sizing:border-box;
}
.gs-shell[hidden]{display:none !important}
.gs-shell *,.gs-shell *::before,.gs-shell *::after{box-sizing:border-box}
.gs-shell .gs-stage{padding:16px 14px;max-width:100%;overflow:hidden}

/* --- Shared result banner (modules may use these class names) --- */
.gs-banner{
  display:block;
  text-align:center;
  font-size:22px;
  font-weight:900;
  letter-spacing:1.2px;
  text-transform:uppercase;
  padding:14px 10px;
  border-radius:var(--radius-sm,10px);
  border:1px solid var(--card-border,#26262f);
  background:#101018;
  color:var(--text,#f2f2f2);
  overflow-wrap:anywhere;
}
.gs-banner--win,.gs-banner.win,.gs-banner.is-win{
  background:var(--win,#2fbf71);
  border-color:var(--win,#2fbf71);
  color:#0b2013;
  box-shadow:0 0 18px rgba(47,191,113,.45);
}
.gs-banner--lose,.gs-banner.lose,.gs-banner.is-lose{
  background:#2a1215;
  border-color:var(--loss,#e5484d);
  color:var(--loss,#e5484d);
}
.gs-banner--stakeback,.gs-banner.stakeback,.gs-banner.is-stakeback{
  background:var(--gold,#f5b324);
  border-color:var(--gold-dark,#c78d0e);
  color:var(--on-gold,#111111);
}

/* --- Shared payout line --- */
.gs-payout{
  margin-top:10px;
  text-align:center;
  font-size:17px;
  font-weight:800;
  color:var(--gold-soft,#ffc94d);
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}

/* --- Waiting state: a clear in-play pulse, never a result --- */
.gs-waiting{
  text-align:center;
  font-size:15px;
  font-weight:800;
  letter-spacing:.4px;
  color:var(--gold-soft,#ffc94d);
  padding:18px 10px;
  border:1px dashed var(--gold-dark,#c78d0e);
  border-radius:var(--radius-sm,10px);
  background:#101018;
  animation:gs-pulse 1.2s ease-in-out infinite;
}
@keyframes gs-pulse{
  0%,100%{opacity:1}
  50%{opacity:.45}
}
@media (prefers-reduced-motion:reduce){
  .gs-waiting{animation:none}
}

/* --- Generic fallback stage (no module registered) --- */
.gs-generic{text-align:center}
.gs-generic-title{
  font-size:17px;
  font-weight:900;
  color:var(--text,#f2f2f2);
  overflow-wrap:anywhere;
}
.gs-generic-note{
  margin-top:6px;
  font-size:13px;
  color:var(--muted,#9a9aa5);
}
.gs-shell .gs-result{margin-top:12px;min-height:24px}

/* ===== module: dice ===== */
/* FIX-51 — Gamba stage: Dice (.gs-dice)
   Every selector is prefixed with the game's root class .gs-dice.
   Shell classes (.gs-banner / .gs-payout) are only styled here as
   descendants of .gs-dice — never redefined on their own.
   DOM/CSS visuals only — no images, no emoji.
   Bright, phone-first: fits 390px, no horizontal overflow. */

.gs-dice {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 18px 12px 16px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(180deg, #232338, #14141f);
  border-radius: 14px;
}

.gs-dice *,
.gs-dice *::before,
.gs-dice *::after {
  box-sizing: border-box;
}

/* --- Big roll readout --- */

.gs-dice .gs-dice__readout-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.gs-dice .gs-dice__readout-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 0.65);
}

.gs-dice .gs-dice__readout {
  font-size: 84px;
  line-height: 1.05;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #f5b324;
  text-shadow: 0 4px 22px rgba(245, 179, 36, 0.35);
  min-width: 2ch;
}

.gs-dice .gs-dice__readout--rolling {
  animation: gs-dice-pulse 0.32s ease-in-out infinite alternate;
}

.gs-dice .gs-dice__readout--win {
  color: #2ee06f;
  text-shadow: 0 4px 22px rgba(46, 224, 111, 0.4);
}

.gs-dice .gs-dice__readout--lose {
  color: #ff7a7a;
  text-shadow: 0 4px 22px rgba(255, 122, 122, 0.3);
}

.gs-dice .gs-dice__readout--instant {
  animation: none;
}

@keyframes gs-dice-pulse {
  from { opacity: 0.72; }
  to { opacity: 1; }
}

.gs-dice .gs-dice__readout-sub {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
}

/* --- Target line --- */

.gs-dice .gs-dice__target {
  margin: 12px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
}

.gs-dice .gs-dice__target-n {
  color: #2ee06f;
  font-size: 19px;
  font-weight: 900;
}

/* --- 0..99 track --- */

.gs-dice .gs-dice__track-wrap {
  position: relative;
  margin-top: 6px;
  /* Room above the track for the threshold label, inside the stage so
     a target of 1 or 99 never pushes anything off the 390px screen. */
  padding-top: 22px;
}

.gs-dice .gs-dice__threshold {
  position: absolute;
  top: 22px;
  height: 58px;
  width: 0;
  border-left: 2px dashed rgba(255, 255, 255, 0.9);
  z-index: 4;
  pointer-events: none;
}

.gs-dice .gs-dice__threshold-label {
  position: absolute;
  top: -21px;
  left: 0;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 999px;
  padding: 1px 7px;
}

.gs-dice .gs-dice__track {
  position: relative;
  height: 58px;
  border-radius: 10px;
  overflow: hidden;
  /* No-win zone (N..99) base colour. */
  background: linear-gradient(180deg, #a03a48, #7c2836);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* Decile tick marks over both zones. */
.gs-dice .gs-dice__track::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(10% - 1px),
    rgba(255, 255, 255, 0.22) calc(10% - 1px),
    rgba(255, 255, 255, 0.22) 10%
  );
}

/* Win zone (0..N-1): width is set inline to exactly N%. */
.gs-dice .gs-dice__winzone {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  background: linear-gradient(180deg, #35d465, #1d9e4b);
  border-right: 1px solid rgba(255, 255, 255, 0.35);
}

/* Marker: a needle on the exact centre of the rolled value's slot
   (left is set inline to (value + 0.5)%). The short left transition
   keeps up with the waiting tumble; the landed classes slow it down
   so the reveal visibly sweeps to and stops on the result. */
.gs-dice .gs-dice__marker {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 4px;
  margin-left: -2px;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 10px rgba(255, 255, 255, 0.65);
  transition: left 0.08s linear;
}

.gs-dice .gs-dice__marker-diamond {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 13px;
  height: 13px;
  transform: translateX(-50%) rotate(45deg);
  background: #f5b324;
  border: 2px solid #ffffff;
  border-radius: 3px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

.gs-dice .gs-dice__marker--landed-win,
.gs-dice .gs-dice__marker--landed-lose {
  transition: left 0.6s cubic-bezier(0.15, 0.6, 0.25, 1);
}

.gs-dice .gs-dice__marker--landed-win .gs-dice__marker-diamond {
  background: #2ee06f;
}

.gs-dice .gs-dice__marker--landed-lose .gs-dice__marker-diamond {
  background: #ff7a7a;
}

.gs-dice .gs-dice__marker--hidden {
  opacity: 0;
}

.gs-dice .gs-dice__marker--instant {
  transition: none;
}

.gs-dice .gs-dice__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.65);
}

/* --- Legend --- */

.gs-dice .gs-dice__legend {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
}

.gs-dice .gs-dice__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gs-dice .gs-dice__swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.gs-dice .gs-dice__swatch--win { background: #25b957; }
.gs-dice .gs-dice__swatch--lose { background: #93313f; }

/* --- Status + result --- */

.gs-dice .gs-dice__status {
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  min-height: 20px;
}

.gs-dice .gs-dice__result {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.gs-dice .gs-dice__result:empty {
  margin-top: 0;
}

.gs-dice .gs-dice__versus {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}

/* Shell banner/payout, toned inside this stage only. */
.gs-dice .gs-banner[data-tone="win"] {
  color: #2ee06f;
}

.gs-dice .gs-banner[data-tone="lose"] {
  color: #ff7a7a;
}

.gs-dice .gs-payout {
  font-variant-numeric: tabular-nums;
}

/* --- Reduced motion: no pulse, no marker sweep --- */

@media (prefers-reduced-motion: reduce) {
  .gs-dice .gs-dice__readout--rolling {
    animation: none;
  }

  .gs-dice .gs-dice__marker,
  .gs-dice .gs-dice__marker--landed-win,
  .gs-dice .gs-dice__marker--landed-lose {
    transition: none;
  }
}

/* ===== module: flip ===== */
/* FIX-51 — Gamba stage: Flip (.gs-flip)
   Every selector is prefixed with the game's root class .gs-flip.
   Shell classes (.gs-banner / .gs-payout) are only styled here as
   descendants of .gs-flip — never redefined on their own.
   DOM/CSS/SVG visuals only. Bright, phone-first: fits 390px, no overflow. */

.gs-flip {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 18px 12px 16px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(180deg, #232338, #14141f);
  border-radius: 14px;
}

.gs-flip *,
.gs-flip *::before,
.gs-flip *::after {
  box-sizing: border-box;
}

/* --- Scene + coin (3D flip on the Y axis) --- */

.gs-flip .gs-flip__scene {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0 4px;
  perspective: 900px;
}

.gs-flip .gs-flip__coin {
  position: relative;
  width: min(52vw, 190px);
  height: min(52vw, 190px);
  flex: 0 0 auto;
  transform-style: preserve-3d;
}

/* Idle: flat, showing the player's pick — a pick, never a result. */
.gs-flip .gs-flip__coin--idle-heads { transform: rotateY(0deg); }
.gs-flip .gs-flip__coin--idle-tails { transform: rotateY(180deg); }

/* Waiting: continuous spin. It never stops on a side, so nothing here
   can be read as the landed result. */
.gs-flip .gs-flip__coin--spinning {
  animation: gs-flip-spin 0.55s linear infinite;
}

.gs-flip .gs-flip__coin--glow {
  filter: drop-shadow(0 0 14px rgba(245, 179, 36, 0.75));
}

@keyframes gs-flip-spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

/* Reveal (verified): settle flat on the true side. Heads ends on a whole
   number of turns; tails ends a half-turn further, tails face forward. */
.gs-flip .gs-flip__coin--landed-heads {
  transform: rotateY(1080deg);
  transition: transform 0.9s cubic-bezier(0.15, 0.6, 0.25, 1);
}

.gs-flip .gs-flip__coin--landed-tails {
  transform: rotateY(1260deg);
  transition: transform 0.9s cubic-bezier(0.15, 0.6, 0.25, 1);
}

/* Reveal (unverified): edge-on stop — neither face is presented. */
.gs-flip .gs-flip__coin--unknown {
  transform: rotateY(90deg);
  transition: transform 0.4s ease-out;
}

/* Reduced motion / instant: no spin, no settle sweep — straight to state. */
.gs-flip .gs-flip__coin--instant {
  animation: none;
  transition: none;
}

/* --- Faces: gold medallion, H / T letters (no emoji, no images) --- */

.gs-flip .gs-flip__face {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 4px solid #8a5a12;
  box-shadow: inset 0 0 0 3px rgba(255, 235, 170, 0.55),
    0 8px 20px rgba(0, 0, 0, 0.45);
}

.gs-flip .gs-flip__face--heads {
  background: radial-gradient(circle at 35% 30%, #ffe9a3, #f5b324 58%, #c07f10);
  color: #4a2c00;
}

.gs-flip .gs-flip__face--tails {
  background: radial-gradient(circle at 35% 30%, #fff3c4, #e8a91c 58%, #a86e0c);
  color: #4a2c00;
  transform: rotateY(180deg);
}

.gs-flip .gs-flip__rim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.gs-flip .gs-flip__rim-outer {
  fill: none;
  stroke: rgba(122, 74, 4, 0.65);
  stroke-width: 1.6;
  stroke-dasharray: 3 2.4;
}

.gs-flip .gs-flip__rim-inner {
  fill: none;
  stroke: rgba(122, 74, 4, 0.5);
  stroke-width: 1.2;
}

.gs-flip .gs-flip__face-centre {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1;
}

.gs-flip .gs-flip__letter {
  font-size: 64px;
  font-weight: 900;
  letter-spacing: 0;
}

.gs-flip .gs-flip__face-name {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 3px;
}

/* --- Pick, status, result --- */

.gs-flip .gs-flip__pick {
  margin: 12px 0 0;
  font-size: 16px;
  font-weight: 800;
  color: #f5b324;
}

.gs-flip .gs-flip__status {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  min-height: 20px;
}

.gs-flip .gs-flip__result {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.gs-flip .gs-flip__result:empty {
  margin-top: 0;
}

.gs-flip .gs-flip__landed {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}

/* Shell banner/payout, toned inside this stage only. */
.gs-flip .gs-banner[data-tone="win"] {
  color: #2ee06f;
}

.gs-flip .gs-banner[data-tone="lose"] {
  color: #ff7a7a;
}

.gs-flip .gs-payout {
  font-variant-numeric: tabular-nums;
}

/* --- Reduced motion: kill the spin and the settle sweep globally --- */

@media (prefers-reduced-motion: reduce) {
  .gs-flip .gs-flip__coin--spinning {
    animation: none;
  }

  .gs-flip .gs-flip__coin--landed-heads,
  .gs-flip .gs-flip__coin--landed-tails,
  .gs-flip .gs-flip__coin--unknown {
    transition: none;
  }
}

/* ===== module: slots ===== */
/* FIX-51 — Gamba stage: Slots (.gs-slots prefix on every selector).
   Multiplier reel only — there is no symbol outcome on chain.
   Bright, phone-first: fits 390px with no horizontal overflow.
   Shell classes (.gs-banner / .gs-payout) are used in the DOM but
   are NOT redefined here; only the module's own result wrapper
   around them is styled. */

.gs-slots {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.gs-slots *,
.gs-slots *::before,
.gs-slots *::after {
  box-sizing: border-box;
}

.gs-slots .gs-slots-cabinet {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  padding: 14px 12px 16px;
  border: 3px solid #92400e;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffe066 0%, #ffb703 55%, #fb8500 100%);
  box-shadow: 0 10px 24px rgba(146, 64, 14, 0.35);
  color: #431407;
  text-align: center;
}

.gs-slots .gs-slots-lights {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 0 8px;
}

.gs-slots .gs-slots-bulb {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #fff7ed;
  border: 2px solid #92400e;
}

.gs-slots .gs-slots-bulb:nth-child(odd) {
  background: #ef4444;
}

.gs-slots .gs-slots-bulb:nth-child(even) {
  background: #22c55e;
}

.gs-slots .gs-slots-window--spinning .gs-slots-bulb {
  animation: gs-slots-blink 0.45s steps(2, start) infinite;
}

@keyframes gs-slots-blink {
  50% {
    opacity: 0.35;
  }
}

.gs-slots .gs-slots-marquee {
  font-size: 30px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: 3px;
  color: #7c2d12;
  text-shadow: 0 2px 0 #fff7ed;
}

.gs-slots .gs-slots-sub {
  margin: 2px 0 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #9a3412;
}

/* Reel window: exactly 3 cells tall (3 x 64px), centre cell is the payline. */
.gs-slots .gs-slots-window {
  position: relative;
  height: 192px;
  overflow: hidden;
  border: 3px solid #7c2d12;
  border-radius: 14px;
  background: #fffdf5;
  box-shadow: inset 0 0 0 2px #fde68a, inset 0 10px 18px rgba(146, 64, 14, 0.22);
}

.gs-slots .gs-slots-window::before,
.gs-slots .gs-slots-window::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 34px;
  z-index: 3;
  pointer-events: none;
}

.gs-slots .gs-slots-window::before {
  top: 0;
  background: linear-gradient(180deg, rgba(124, 45, 18, 0.28), rgba(124, 45, 18, 0));
}

.gs-slots .gs-slots-window::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(124, 45, 18, 0.28), rgba(124, 45, 18, 0));
}

.gs-slots .gs-slots-strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.gs-slots .gs-slots-strip--spinning {
  /* In-play streaking only — blurred values are never a landed result. */
  filter: blur(2px) saturate(1.3);
}

.gs-slots .gs-slots-cell {
  flex: 0 0 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-bottom: 1px dashed rgba(124, 45, 18, 0.3);
  background: #fffdf5;
  color: #1f2937;
  font-size: 32px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.gs-slots .gs-slots-cell--m0 {
  color: #6b7280;
  background: #f3f4f6;
}

.gs-slots .gs-slots-cell--m1 {
  color: #1d4ed8;
  background: #dbeafe;
}

.gs-slots .gs-slots-cell--m2 {
  color: #15803d;
  background: #dcfce7;
}

.gs-slots .gs-slots-cell--m3 {
  color: #0f766e;
  background: #ccfbf1;
}

.gs-slots .gs-slots-cell--m5 {
  color: #7e22ce;
  background: #f3e8ff;
}

.gs-slots .gs-slots-cell--m10 {
  color: #c2410c;
  background: #ffedd5;
}

.gs-slots .gs-slots-cell--m14 {
  color: #92400e;
  background: linear-gradient(180deg, #fef08a, #facc15);
}

/* Centre payline: a 64px band over the middle cell. Quiet while
   spinning/idle, glowing only once the reel has landed. */
.gs-slots .gs-slots-payline {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 64px;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
  border-top: 2px dashed rgba(220, 38, 38, 0.45);
  border-bottom: 2px dashed rgba(220, 38, 38, 0.45);
}

.gs-slots .gs-slots-window--landed .gs-slots-payline {
  border-top: 3px solid #dc2626;
  border-bottom: 3px solid #dc2626;
  background: rgba(250, 204, 21, 0.22);
  box-shadow: 0 0 18px 4px rgba(250, 204, 21, 0.75),
    inset 0 0 14px rgba(250, 204, 21, 0.55);
}

.gs-slots .gs-slots-status {
  min-height: 22px;
  margin-top: 12px;
  font-size: 15px;
  font-weight: 800;
  color: #7c2d12;
}

.gs-slots .gs-slots-result {
  margin-top: 8px;
  padding: 10px 8px;
  border-radius: 12px;
  background: #fffdf5;
  border: 2px solid #92400e;
}

.gs-slots .gs-slots-result[hidden] {
  display: none;
}

.gs-slots .gs-slots-result--win {
  background: #dcfce7;
  border-color: #15803d;
}

.gs-slots .gs-slots-result--back {
  background: #dbeafe;
  border-color: #1d4ed8;
}

.gs-slots .gs-slots-result--lose {
  background: #f3f4f6;
  border-color: #6b7280;
}

.gs-slots .gs-slots-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}

.gs-slots .gs-slots-chip {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  border: 2px solid #92400e;
  background: #fffdf5;
  color: #1f2937;
  font-size: 14px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.gs-slots .gs-slots-chip--m0 {
  color: #6b7280;
  background: #f3f4f6;
}

.gs-slots .gs-slots-chip--m1 {
  color: #1d4ed8;
  background: #dbeafe;
}

.gs-slots .gs-slots-chip--m2 {
  color: #15803d;
  background: #dcfce7;
}

.gs-slots .gs-slots-chip--m3 {
  color: #0f766e;
  background: #ccfbf1;
}

.gs-slots .gs-slots-chip--m5 {
  color: #7e22ce;
  background: #f3e8ff;
}

.gs-slots .gs-slots-chip--m10 {
  color: #c2410c;
  background: #ffedd5;
}

.gs-slots .gs-slots-chip--m14 {
  color: #92400e;
  background: linear-gradient(180deg, #fef08a, #facc15);
}

.gs-slots .gs-slots-chip--landed {
  outline: 3px solid #dc2626;
  outline-offset: 1px;
  box-shadow: 0 0 12px rgba(220, 38, 38, 0.55);
}

.gs-slots .gs-slots-note {
  margin: 10px 4px 0;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  color: #7c2d12;
}

@media (prefers-reduced-motion: reduce) {
  .gs-slots .gs-slots-strip {
    transition: none;
  }

  .gs-slots .gs-slots-strip--spinning {
    filter: none;
  }

  .gs-slots .gs-slots-window--spinning .gs-slots-bulb {
    animation: none;
  }

  .gs-slots .gs-slots-chip--landed {
    box-shadow: none;
  }
}

/* ===== module: hilo ===== */
/* FIX-51 — Gamba stage: HiLo. Every selector is prefixed .gs-hilo.
   Shell classes (.gs-banner, .gs-payout) are used in the DOM only and
   are NOT styled here — the shell owns their styling. */

.gs-hilo,
.gs-hilo *,
.gs-hilo *::before,
.gs-hilo *::after {
  box-sizing: border-box;
}

.gs-hilo {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  font-family: inherit;
}

.gs-hilo .gs-hilo-felt {
  background:
    radial-gradient(ellipse at 50% 30%, #2fbf71 0%, #15924f 52%, #0b6e39 100%);
  border: 2px solid #083f22;
  border-radius: 18px;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.14),
    inset 0 -18px 34px rgba(0, 0, 0, 0.22);
  padding: 16px 12px 18px;
  color: #ffffff;
}

.gs-hilo .gs-hilo-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  margin-bottom: 14px;
}

.gs-hilo .gs-hilo-title {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.4px;
  color: #ffffff;
}

.gs-hilo .gs-hilo-call {
  background: #f5b324;
  color: #1c1602;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.gs-hilo .gs-hilo-table {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.gs-hilo .gs-hilo-slot {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.gs-hilo .gs-hilo-slot-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  text-align: center;
}

.gs-hilo .gs-hilo-vs {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  border: 2px solid rgba(255, 255, 255, 0.55);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  margin-top: 22px;
}

.gs-hilo .gs-hilo-card {
  position: relative;
  width: min(100%, 124px);
  aspect-ratio: 5 / 7;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.gs-hilo .gs-hilo-card--front {
  background: linear-gradient(160deg, #ffffff 0%, #fdfdf6 60%, #ececdd 100%);
  color: #16161c;
  border: 1px solid #c9c9b8;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.38);
}

.gs-hilo .gs-hilo-card--slot {
  background: rgba(0, 0, 0, 0.16);
  border: 2px dashed rgba(255, 255, 255, 0.55);
  color: rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.18);
}

.gs-hilo .gs-hilo-slot-hint {
  font-size: 34px;
  font-weight: 900;
}

.gs-hilo .gs-hilo-card--back {
  background: repeating-linear-gradient(
    45deg,
    #c2262e 0 9px,
    #8f161d 9px 18px
  );
  border: 3px solid #f7f7f2;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.38);
}

.gs-hilo .gs-hilo-card-back-pattern {
  position: absolute;
  inset: 9px;
  border: 2px solid rgba(255, 255, 255, 0.65);
  border-radius: 6px;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.16) 0 6px,
    transparent 6px 12px
  );
}

.gs-hilo .gs-hilo-card--shuffling {
  animation: gs-hilo-shuffle 0.55s ease-in-out infinite alternate;
}

.gs-hilo .gs-hilo-card--tilt {
  rotate: 2.5deg;
}

.gs-hilo .gs-hilo-card-corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  gap: 1px;
}

.gs-hilo .gs-hilo-card-corner-top {
  top: 7px;
  left: 9px;
}

.gs-hilo .gs-hilo-card-corner-bottom {
  bottom: 7px;
  right: 9px;
  transform: rotate(180deg);
}

.gs-hilo .gs-hilo-card-rank {
  font-size: 17px;
  font-weight: 900;
}

.gs-hilo .gs-hilo-card-suit {
  font-size: 13px;
}

.gs-hilo .gs-hilo-card-centre {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.gs-hilo .gs-hilo-card-big {
  font-size: 52px;
  font-weight: 900;
}

.gs-hilo .gs-hilo-card-suit-big {
  font-size: 26px;
  margin-top: 3px;
}

.gs-hilo .gs-hilo-card--landed {
  animation: gs-hilo-flip-in 0.45s ease-out;
  transform: scale(1.07);
  z-index: 2;
}

.gs-hilo .gs-hilo-card--win {
  box-shadow: 0 0 0 3px #f5b324, 0 10px 22px rgba(0, 0, 0, 0.42);
}

.gs-hilo .gs-hilo-card--lose {
  box-shadow: 0 0 0 3px rgba(20, 20, 28, 0.75), 0 10px 22px rgba(0, 0, 0, 0.42);
}

.gs-hilo .gs-hilo-status {
  margin: 14px 4px 0;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  color: #eafff1;
}

.gs-hilo .gs-hilo-result {
  margin-top: 12px;
  text-align: center;
}

.gs-hilo .gs-hilo-outcome {
  margin: 8px 4px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
  color: #ffffff;
}

@keyframes gs-hilo-shuffle {
  from {
    transform: translateX(-5px) rotate(-3deg);
  }
  to {
    transform: translateX(5px) rotate(3deg);
  }
}

@keyframes gs-hilo-flip-in {
  from {
    transform: rotateY(90deg) scale(1);
    opacity: 0.4;
  }
  to {
    transform: rotateY(0deg) scale(1.07);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gs-hilo .gs-hilo-card--shuffling,
  .gs-hilo .gs-hilo-card--landed {
    animation: none;
  }

  .gs-hilo .gs-hilo-card {
    transition: none;
  }
}

/* ===== module: mines ===== */
/* FIX-51 — Gamba stage: MINES.
   Every selector is prefixed with the module root class .gs-mines.
   Shell classes (.gs-banner / .gs-payout) are only styled scoped under
   .gs-mines, never redefined globally. DOM/CSS only: the gem and the
   mine are CSS shapes. Bright, phone-first, no horizontal overflow. */

.gs-mines,
.gs-mines * {
  box-sizing: border-box;
}

.gs-mines {
  width: 100%;
  max-width: 356px;
  margin: 0 auto;
  padding: 14px 12px 16px;
  border-radius: 16px;
  background: linear-gradient(165deg, #1d3a8a 0%, #0e4a6e 58%, #07332e 100%);
  border: 1px solid rgba(125, 211, 252, 0.45);
  box-shadow: 0 10px 28px rgba(2, 12, 32, 0.45);
  color: #f0f9ff;
  font-family: inherit;
  overflow: hidden;
}

/* --- Header: the real facts only (3 mines, board size, reveal count) --- */
.gs-mines .gs-mines-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.gs-mines .gs-mines-fact {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.gs-mines .gs-mines-sep {
  opacity: 0.65;
  font-weight: 900;
}

.gs-mines .gs-mines-status {
  margin-top: 10px;
  min-height: 20px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #bae6fd;
}

/* --- Board: 5 x 5 covered tiles --- */
.gs-mines .gs-mines-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin-top: 12px;
}

.gs-mines .gs-mines-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  min-width: 0;
  perspective: 600px;
}

.gs-mines .gs-mines-tile-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.45s ease;
}

.gs-mines .gs-mines-tile.gs-mines-flipped .gs-mines-tile-inner {
  transform: rotateY(180deg);
}

.gs-mines .gs-mines-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

/* Covered side: bright tile with an inset diamond frame and a shine. */
.gs-mines .gs-mines-face-cover {
  background: linear-gradient(145deg, #38bdf8 0%, #2563eb 55%, #7c3aed 100%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.35),
    0 3px 8px rgba(2, 12, 32, 0.4);
}

.gs-mines .gs-mines-face-cover::after {
  content: "";
  position: absolute;
  width: 44%;
  height: 44%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 6px;
  transform: rotate(45deg);
}

.gs-mines .gs-mines-cover-shine {
  position: absolute;
  top: -30%;
  left: -70%;
  width: 55%;
  height: 160%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: rotate(12deg);
  pointer-events: none;
}

/* Waiting: covered tiles pulse and the shine sweeps. Nothing flips and
 * nothing is shown as a result in this state. */
.gs-mines.gs-mines-playing .gs-mines-tile {
  animation: gs-mines-pulse 1.15s ease-in-out infinite;
}

.gs-mines.gs-mines-playing .gs-mines-cover-shine {
  animation: gs-mines-sweep 1.15s ease-in-out infinite;
}

@keyframes gs-mines-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.045); filter: brightness(1.3); }
}

@keyframes gs-mines-sweep {
  0% { left: -70%; }
  60%, 100% { left: 130%; }
}

/* Revealed sides. */
.gs-mines .gs-mines-face-back {
  transform: rotateY(180deg);
  background: #0b2440;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.gs-mines .gs-mines-face-back.gs-mines-face-gem {
  background: radial-gradient(circle at 50% 38%, #a5f3fc 0%, #22d3ee 52%, #0369a1 100%);
  border-color: rgba(207, 250, 254, 0.8);
  box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.45);
}

.gs-mines .gs-mines-face-back.gs-mines-face-mine {
  background: radial-gradient(circle at 50% 42%, #7f1d1d 0%, #450a0a 62%, #1c0505 100%);
  border-color: rgba(252, 165, 165, 0.7);
  box-shadow: inset 0 0 14px rgba(239, 68, 68, 0.55);
}

/* Gem: a faceted CSS diamond (clip-path), no image, no emoji. */
.gs-mines .gs-mines-gem {
  position: relative;
  width: 58%;
  height: 58%;
  background: linear-gradient(160deg, #ecfeff 0%, #67e8f9 34%, #06b6d4 62%, #0e7490 100%);
  clip-path: polygon(50% 0, 100% 32%, 82% 100%, 18% 100%, 0 32%);
  filter: drop-shadow(0 2px 4px rgba(8, 47, 73, 0.55));
}

.gs-mines .gs-mines-gem::after {
  content: "";
  position: absolute;
  top: 6%;
  left: 22%;
  width: 26%;
  height: 20%;
  background: rgba(255, 255, 255, 0.85);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* Mine: a spiked CSS ball — 4 crossed spike bars behind a round body. */
.gs-mines .gs-mines-mine {
  position: relative;
  width: 62%;
  height: 62%;
}

.gs-mines .gs-mines-spike {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 108%;
  height: 16%;
  margin: -8% 0 0 -54%;
  border-radius: 999px;
  background: #1f2937;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.35);
}

.gs-mines .gs-mines-mine-body {
  position: absolute;
  inset: 14%;
  border-radius: 999px;
  background: radial-gradient(circle at 34% 30%, #6b7280 0%, #1f2937 46%, #030712 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.gs-mines .gs-mines-mine-body::after {
  content: "";
  position: absolute;
  top: 16%;
  left: 18%;
  width: 24%;
  height: 16%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  transform: rotate(-24deg);
}

/* --- Result: shell banner/payout classes, scoped accents only --- */
.gs-mines .gs-mines-result {
  margin-top: 14px;
  text-align: center;
}

.gs-mines .gs-mines-result:empty {
  margin-top: 0;
}

.gs-mines .gs-banner {
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 1.5px;
}

.gs-mines.gs-mines-won .gs-banner {
  background: linear-gradient(90deg, #16a34a, #22c55e);
  color: #f0fdf4;
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.55);
}

.gs-mines.gs-mines-lost .gs-banner {
  background: linear-gradient(90deg, #b91c1c, #ef4444);
  color: #fef2f2;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.5);
}

.gs-mines .gs-payout {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #fde68a;
}

/* --- Reduced motion: no pulse, no sweep, flips land instantly --- */
@media (prefers-reduced-motion: reduce) {
  .gs-mines.gs-mines-playing .gs-mines-tile,
  .gs-mines.gs-mines-playing .gs-mines-cover-shine {
    animation: none;
  }

  .gs-mines .gs-mines-tile-inner {
    transition: none;
  }
}

/* ===== module: roulette ===== */
/* FIX-51 — Gamba stage: roulette.
   Every selector is prefixed with the module root class .gs-roulette.
   Shared shell classes (.gs-banner / .gs-payout) are styled by the
   shell and are NOT redefined here — the banner rules below only add
   module-local colour on top of the module's own extra class.
   SVG/DOM/CSS only — no images, no emoji. Phone-first: fits 390px
   wide with no horizontal overflow. Bright felt, bright wheel. */

.gs-roulette {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}
.gs-roulette *,
.gs-roulette *::before,
.gs-roulette *::after { box-sizing: border-box; }

/* --- Table ---------------------------------------------------------- */
.gs-roulette .gs-roulette__table {
  background: radial-gradient(ellipse at 50% 30%, #22b364 0%, #12994e 58%, #0b7a3c 100%);
  border: 6px solid #4a2c14;
  border-radius: 22px;
  box-shadow: inset 0 0 0 2px rgba(245, 197, 66, .6), 0 6px 18px rgba(0, 0, 0, .45);
  padding: 14px 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

/* --- Pick bar -------------------------------------------------------- */
.gs-roulette .gs-roulette__pickbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.gs-roulette .gs-roulette__pick-chip {
  font-size: 14px;
  font-weight: 900;
  color: #ffffff;
  background: rgba(0, 0, 0, .45);
  border: 2px solid rgba(255, 255, 255, .65);
  border-radius: 999px;
  padding: 4px 14px;
}
.gs-roulette .gs-roulette__pick-chip--red {
  background: #c01f28;
  border-color: #ffb3b8;
}
.gs-roulette .gs-roulette__pick-chip--black {
  background: #17181f;
  border-color: #9a9dab;
}
.gs-roulette .gs-roulette__pick-chip--green {
  background: #0a7a3d;
  border-color: #8fe6b6;
}
.gs-roulette .gs-roulette__stake {
  font-size: 13px;
  font-weight: 800;
  color: #fff3c4;
  background: rgba(0, 0, 0, .35);
  border-radius: 999px;
  padding: 4px 12px;
  font-variant-numeric: tabular-nums;
}

/* --- Wheel ------------------------------------------------------------ */
.gs-roulette .gs-roulette__wheel-wrap {
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
}
.gs-roulette .gs-roulette__wheel {
  display: block;
  width: 100%;
  height: 100%;
}
.gs-roulette .gs-roulette__rim {
  fill: #5a3a16;
  stroke: #f5c542;
  stroke-width: 2.5;
}
.gs-roulette .gs-roulette__track {
  fill: none;
  stroke: #2a1a08;
  stroke-width: 7;
}
.gs-roulette .gs-roulette__rotor {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}
.gs-roulette .gs-roulette__disc {
  fill: #7c4a1e;
  stroke: #f5c542;
  stroke-width: 1.5;
}
.gs-roulette .gs-roulette__spoke {
  stroke: #f5c542;
  stroke-width: 5;
  stroke-linecap: round;
  opacity: .85;
}
.gs-roulette .gs-roulette__pocket-wedge {
  stroke: #f8e9bd;
  stroke-width: 1;
}
.gs-roulette .gs-roulette__pocket--green .gs-roulette__pocket-wedge { fill: #0fa34a; }
.gs-roulette .gs-roulette__pocket--red .gs-roulette__pocket-wedge { fill: #d9232e; }
.gs-roulette .gs-roulette__pocket--black .gs-roulette__pocket-wedge { fill: #1c1e26; }
.gs-roulette .gs-roulette__pocket-num {
  fill: #ffffff;
  font-size: 11px;
  font-weight: 800;
  pointer-events: none;
}
/* The landed pocket: gold ring + glow, travels with the rotor and
   comes to rest at the top pointer. */
.gs-roulette .gs-roulette__pocket--winner .gs-roulette__pocket-wedge {
  stroke: #ffd94d;
  stroke-width: 3.5;
  filter: drop-shadow(0 0 5px rgba(255, 217, 77, .95));
}
.gs-roulette .gs-roulette__pocket--winner .gs-roulette__pocket-num {
  fill: #ffd94d;
  font-size: 12.5px;
  font-weight: 900;
}

/* --- Ball + pointer + hub ---------------------------------------------- */
/* Ball sits at the top of its orbit at pocket-centre radius:
   121/300 of the wheel width from the centre -> top: 50% - 40.33%. */
.gs-roulette .gs-roulette__ball-orbit {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  will-change: transform;
}
.gs-roulette .gs-roulette__ball-orbit--hidden { opacity: 0; }
.gs-roulette .gs-roulette__ball {
  position: absolute;
  left: 50%;
  top: 9.67%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #e8e8e8 55%, #b9bdc7 100%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .65), inset 0 -1px 2px rgba(0, 0, 0, .25);
}
.gs-roulette .gs-roulette__pointer {
  position: absolute;
  left: 50%;
  top: -4px;
  z-index: 4;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 14px solid #ffd94d;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
  pointer-events: none;
}
.gs-roulette .gs-roulette__hub {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  transform: translate(-50%, -50%);
  width: 82px;
  height: 82px;
  border-radius: 999px;
  background: #17171f;
  border: 3px solid #f5c542;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  pointer-events: none;
}
.gs-roulette .gs-roulette__hub-value {
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}
.gs-roulette .gs-roulette__hub-label {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 1.6px;
  color: #f5c542;
}
.gs-roulette .gs-roulette__hub--red { background: #c01f28; }
.gs-roulette .gs-roulette__hub--black { background: #17181f; }
.gs-roulette .gs-roulette__hub--green { background: #0a7a3d; }
.gs-roulette .gs-roulette__hub--red .gs-roulette__hub-label,
.gs-roulette .gs-roulette__hub--black .gs-roulette__hub-label,
.gs-roulette .gs-roulette__hub--green .gs-roulette__hub-label { color: #ffe9a8; }

/* --- Status / result / legend ------------------------------------------- */
.gs-roulette .gs-roulette__status {
  margin: 0;
  min-height: 20px;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.gs-roulette .gs-roulette__result {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.gs-roulette .gs-roulette__result:empty { display: none; }
.gs-roulette .gs-roulette__banner {
  font-size: 21px;
  font-weight: 900;
  letter-spacing: .3px;
  animation: gs-roulette-pop .3s ease-out both;
}
.gs-roulette .gs-roulette__banner--win {
  color: #ffd94d;
  text-shadow: 0 0 14px rgba(255, 217, 77, .6), 0 2px 4px rgba(0, 0, 0, .55);
}
.gs-roulette .gs-roulette__banner--lose {
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .55);
}
.gs-roulette .gs-roulette__detail {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: #eafff2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
@keyframes gs-roulette-pop {
  from { transform: scale(.7); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.gs-roulette .gs-roulette__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
}
.gs-roulette .gs-roulette__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #eafff2;
}
.gs-roulette .gs-roulette__legend-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, .85);
  flex: 0 0 auto;
}
.gs-roulette .gs-roulette__legend-dot--green { background: #0fa34a; }
.gs-roulette .gs-roulette__legend-dot--red { background: #d9232e; }
.gs-roulette .gs-roulette__legend-dot--black { background: #1c1e26; }

/* --- Narrow phones -------------------------------------------------------- */
@media (max-width: 340px) {
  .gs-roulette .gs-roulette__hub { width: 72px; height: 72px; }
  .gs-roulette .gs-roulette__hub-value { font-size: 21px; }
  .gs-roulette .gs-roulette__banner { font-size: 19px; }
}

/* --- Reduced motion --------------------------------------------------------- */
/* JS also jumps straight to the landed rotation; this kills the
   banner pop so nothing animates for reduced-motion players. */
@media (prefers-reduced-motion: reduce) {
  .gs-roulette .gs-roulette__banner { animation: none; }
  .gs-roulette .gs-roulette__rotor,
  .gs-roulette .gs-roulette__ball-orbit { will-change: auto; }
}

/* ===== module: plinko ===== */
/* FIX-51 — Gamba game stage: PLINKO.
 * Every selector is prefixed with the module root class .gs-plinko.
 * Shell classes (.gs-banner, .gs-payout) are styled by the shell and are
 * NOT redefined here; the module only adds its own prefixed modifiers.
 * Phone-first: fluid width, max 400px, no horizontal overflow. */

.gs-plinko {
  box-sizing: border-box;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 10px 8px 12px;
  color: #f4f6ff;
  font-family: inherit;
}

.gs-plinko * {
  box-sizing: border-box;
}

.gs-plinko .gs-plinko-board {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(88, 140, 255, 0.28) 0, rgba(88, 140, 255, 0) 55%),
    linear-gradient(180deg, #1b2a52 0%, #101a36 58%, #0b1226 100%);
  border: 1px solid #33507e;
  border-radius: 14px;
  padding: 8px 6px 6px;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.45), 0 4px 14px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.gs-plinko .gs-plinko-svg {
  display: block;
  width: 100%;
  height: auto;
}

.gs-plinko .gs-plinko-chute {
  stroke: #8fb4ff;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.85;
}

.gs-plinko .gs-plinko-peg {
  fill: #cfe1ff;
  stroke: #5f83c4;
  stroke-width: 1;
}

.gs-plinko.gs-plinko--waiting .gs-plinko-peg {
  animation: gs-plinko-peg-pulse 0.85s ease-in-out infinite alternate;
}

@keyframes gs-plinko-peg-pulse {
  from { fill: #7dd3fc; }
  to { fill: #f5b324; }
}

.gs-plinko .gs-plinko-ball {
  stroke: #8a5a00;
  stroke-width: 1.5;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55));
  transform-box: fill-box;
}

.gs-plinko.gs-plinko--waiting .gs-plinko-ball {
  animation: gs-plinko-ball-bob 0.55s ease-in-out infinite alternate;
}

@keyframes gs-plinko-ball-bob {
  from { transform: translateY(0); }
  to { transform: translateY(5px); }
}

/* --- bins --- */

.gs-plinko .gs-plinko-bin-rect {
  stroke-width: 1.5;
}

.gs-plinko .gs-plinko-bin--jackpot .gs-plinko-bin-rect {
  fill: #6b4a00;
  stroke: #f5b324;
}

.gs-plinko .gs-plinko-bin--win .gs-plinko-bin-rect {
  fill: #7a3b12;
  stroke: #ff9440;
}

.gs-plinko .gs-plinko-bin--low .gs-plinko-bin-rect {
  fill: #1d3a5f;
  stroke: #4d7dc2;
}

.gs-plinko .gs-plinko-bin--min .gs-plinko-bin-rect {
  fill: #232c47;
  stroke: #55648c;
}

.gs-plinko .gs-plinko-bin-label {
  fill: #f4f6ff;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.gs-plinko .gs-plinko-bin--landed .gs-plinko-bin-rect {
  fill: #f5b324;
  stroke: #ffe08a;
  stroke-width: 2.5;
  filter: drop-shadow(0 0 7px rgba(245, 179, 36, 0.85));
}

.gs-plinko .gs-plinko-bin--landed .gs-plinko-bin-label {
  fill: #16161c;
}

/* --- status + result --- */

.gs-plinko .gs-plinko-status {
  min-height: 20px;
  margin-top: 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #b9c8ee;
}

.gs-plinko .gs-plinko-result {
  margin-top: 6px;
  text-align: center;
}

.gs-plinko .gs-plinko-banner--win {
  color: #ffd75e;
}

.gs-plinko .gs-plinko-banner--partial {
  color: #9fd0ff;
}

.gs-plinko .gs-plinko-banner--back {
  color: #d7e3ff;
}

.gs-plinko .gs-plinko-banner--lose,
.gs-plinko .gs-plinko-banner--generic {
  color: #f4f6ff;
}

@media (prefers-reduced-motion: reduce) {
  .gs-plinko * {
    animation: none !important;
    transition: none !important;
  }
}

/* ===== module: crash ===== */
/* FIX-51 — Gamba stage: Crash (gs-crash)
   Every selector is prefixed with the game's root class .gs-crash.
   Shell classes (.gs-banner, .gs-payout, ...) are used in the DOM only
   and are NOT redefined here. Bright, phone-first, no horizontal overflow. */

.gs-crash {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 14px 14px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff8e1 0%, #e3f4ff 58%, #d9fbe8 100%);
  border: 2px solid #ffb300;
  color: #17233b;
  font-family: inherit;
  overflow: hidden;
}

.gs-crash *,
.gs-crash *::before,
.gs-crash *::after {
  box-sizing: border-box;
}

.gs-crash .gs-crash-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.gs-crash .gs-crash-target {
  background: #17233b;
  color: #ffd54a;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  padding: 7px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.gs-crash .gs-crash-wager {
  color: #43536e;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}

.gs-crash .gs-crash-wager:empty {
  display: none;
}

.gs-crash .gs-crash-status {
  margin-left: auto;
  background: #ffffff;
  border: 1px solid #f2b705;
  color: #8a5b00;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  padding: 7px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.gs-crash.gs-crash--waiting .gs-crash-status {
  background: #fff3c4;
  color: #7a4d00;
}

.gs-crash.gs-crash--win .gs-crash-status {
  background: #0e9f57;
  border-color: #0e9f57;
  color: #ffffff;
}

.gs-crash.gs-crash--lose .gs-crash-status {
  background: #d92d20;
  border-color: #d92d20;
  color: #ffffff;
}

.gs-crash .gs-crash-counter {
  text-align: center;
  font-size: 52px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  color: #17233b;
  padding: 8px 4px 4px;
  overflow-wrap: break-word;
}

.gs-crash.gs-crash--win .gs-crash-counter {
  color: #067a3e;
}

.gs-crash.gs-crash--lose .gs-crash-counter {
  color: #d92d20;
  font-size: 44px;
  letter-spacing: 1px;
}

.gs-crash.gs-crash--generic .gs-crash-counter {
  color: #43536e;
}

.gs-crash .gs-crash-chartwrap {
  background: #ffffff;
  border: 1px solid #d8e6f2;
  border-radius: 12px;
  padding: 8px;
  margin: 6px 0 12px;
}

.gs-crash .gs-crash-chart {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.gs-crash .gs-crash-grid {
  stroke: #e3edf6;
  stroke-width: 1;
}

.gs-crash .gs-crash-base {
  stroke: #b9cddd;
  stroke-width: 1.5;
}

.gs-crash .gs-crash-area {
  fill: rgba(255, 179, 0, 0.18);
  stroke: none;
}

.gs-crash .gs-crash-curve {
  fill: none;
  stroke: #f59e0b;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gs-crash.gs-crash--win .gs-crash-curve {
  stroke: #0e9f57;
}

.gs-crash.gs-crash--win .gs-crash-area {
  fill: rgba(14, 159, 87, 0.16);
}

.gs-crash.gs-crash--lose .gs-crash-curve {
  stroke: #98a6ba;
}

.gs-crash.gs-crash--lose .gs-crash-area {
  fill: rgba(152, 166, 186, 0.14);
}

.gs-crash.gs-crash--generic .gs-crash-curve {
  stroke: #98a6ba;
}

.gs-crash .gs-crash-break {
  fill: none;
  stroke: #d92d20;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gs-crash .gs-crash-dot {
  fill: #f59e0b;
  stroke: #ffffff;
  stroke-width: 2.5;
}

.gs-crash.gs-crash--win .gs-crash-dot {
  fill: #0e9f57;
}

.gs-crash.gs-crash--lose .gs-crash-dot {
  fill: #d92d20;
}

.gs-crash.gs-crash--generic .gs-crash-dot {
  fill: #98a6ba;
}

@media (prefers-reduced-motion: no-preference) {
  .gs-crash.gs-crash--waiting .gs-crash-dot {
    animation: gs-crash-pulse 0.9s ease-in-out infinite alternate;
  }

  .gs-crash.gs-crash--lose .gs-crash-chartwrap {
    animation: gs-crash-shake 0.28s ease-in-out 1;
  }
}

@keyframes gs-crash-pulse {
  from { opacity: 1; }
  to { opacity: 0.45; }
}

@keyframes gs-crash-shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  55% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

@media (max-width: 360px) {
  .gs-crash {
    padding: 12px 10px 14px;
  }

  .gs-crash .gs-crash-counter {
    font-size: 44px;
  }

  .gs-crash.gs-crash--lose .gs-crash-counter {
    font-size: 38px;
  }
}

/* ===== module: blackjack ===== */
/* FIX-51 — Gamba stage: blackjack.
   Every selector is prefixed with the module root class .gs-blackjack.
   Shared shell classes (.gs-banner / .gs-payout) are styled by the shell
   and are NOT redefined here. DOM/CSS only — card backs are a CSS
   pattern; no images, no emoji. Phone-first: fits 390px, no overflow. */

.gs-blackjack {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}
.gs-blackjack *,
.gs-blackjack *::before,
.gs-blackjack *::after { box-sizing: border-box; }

/* --- Table felt ---------------------------------------------------- */
.gs-blackjack .gs-blackjack-felt {
  position: relative;
  background: radial-gradient(ellipse at 50% 38%, #1d9e57 0%, #0d6e38 62%, #084d27 100%);
  border: 6px solid #4a2c14;
  border-radius: 120px / 56px;
  box-shadow: inset 0 0 0 2px rgba(245, 179, 36, .55), 0 6px 18px rgba(0, 0, 0, .45);
  padding: 18px 12px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

/* Printed arc line on the felt (pure decoration, no game claim). */
.gs-blackjack .gs-blackjack-felt::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 46%;
  height: 90px;
  border: 2px solid rgba(255, 255, 255, .22);
  border-color: transparent transparent rgba(255, 255, 255, .22) transparent;
  border-radius: 50%;
  pointer-events: none;
}

/* --- Hands ---------------------------------------------------------- */
.gs-blackjack .gs-blackjack-hand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
}
.gs-blackjack .gs-blackjack-hand-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #eafff2;
  background: rgba(0, 0, 0, .35);
  border-radius: 999px;
  padding: 2px 12px;
}
.gs-blackjack .gs-blackjack-cards {
  display: flex;
  gap: 8px;
  min-height: 84px;
  align-items: center;
  justify-content: center;
}

/* --- Cards: slots and face-down backs only. No face styles exist. --- */
.gs-blackjack .gs-blackjack-card {
  width: 58px;
  height: 84px;
  border-radius: 8px;
  flex: 0 0 auto;
}
.gs-blackjack .gs-blackjack-slot {
  border: 2px dashed rgba(255, 255, 255, .4);
  background: rgba(0, 0, 0, .12);
}
.gs-blackjack .gs-blackjack-back {
  /* Card back: bright patterned back with a white border. A back makes
     no claim about rank, suit, or total — that is the point. */
  background:
    repeating-linear-gradient(45deg, #d42a32 0 7px, #a3161c 7px 14px),
    #a3161c;
  border: 3px solid #f7f7f2;
  box-shadow: inset 0 0 0 2px rgba(163, 22, 28, .9), 0 4px 10px rgba(0, 0, 0, .45);
}
.gs-blackjack .gs-blackjack-dealt {
  animation: gs-blackjack-deal .38s ease-out both;
}
.gs-blackjack .gs-blackjack-dealt-instant {
  animation: none;
}
@keyframes gs-blackjack-deal {
  from { transform: translateY(-26px) scale(.92); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* --- Centre: status line / outcome emblem --------------------------- */
.gs-blackjack .gs-blackjack-centre {
  position: relative;
  z-index: 1;
  min-height: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  width: 100%;
}
.gs-blackjack .gs-blackjack-status {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.gs-blackjack .gs-blackjack-banner {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .4px;
  animation: gs-blackjack-emblem .3s ease-out both;
}
.gs-blackjack .gs-blackjack-banner-blackjack {
  color: #ffd94d;
  text-shadow: 0 0 14px rgba(255, 217, 77, .65), 0 2px 4px rgba(0, 0, 0, .55);
}
.gs-blackjack .gs-blackjack-banner-win { color: #b9ffd0; }
.gs-blackjack .gs-blackjack-banner-lose { color: #e8e8e8; opacity: .9; }
@keyframes gs-blackjack-emblem {
  from { transform: scale(.7); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Landed: backs settle still (they never flip). */
.gs-blackjack.gs-blackjack-landed .gs-blackjack-back {
  box-shadow: inset 0 0 0 2px rgba(163, 22, 28, .9), 0 2px 6px rgba(0, 0, 0, .4);
}

/* --- Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .gs-blackjack .gs-blackjack-dealt,
  .gs-blackjack .gs-blackjack-banner { animation: none; }
}