/* ============================================================
   MOBILE FIT — kills sideways scroll on phones.
   Loaded last so it wins. Everything here is inside a media query;
   desktop is untouched.
   ============================================================ */

/* ---------- the top bar: it never wrapped, so it pushed every page wide ---------- */
@media (max-width: 900px) {
  #topbar { flex-wrap: wrap; row-gap: 7px; padding: 8px 10px; }
  .brand { flex: 1 1 100%; font-size: 16px; letter-spacing: 2px;
    display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
  .brand .of { font-size: 12px; }
  .brand .sub { margin-left: 0; font-size: 9px; letter-spacing: 3px; }
  .hud { flex: 1 1 100%; flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
  .balance-box { min-width: 0; padding: 3px 10px; }
  #balance { font-size: 16px; }
  .hud-btn { padding: 7px 9px; font-size: 10px; letter-spacing: .4px; }
  .hud-btn.gear, .gear { font-size: 13px; padding: 7px 9px; }
}

@media (max-width: 760px) {
  /* ---------- shared shell ---------- */
  #slotMain, #tableMain { padding: 8px 6px; }
  #cabinet { width: 100%; max-width: 100%; padding: 10px 8px 12px; }
  #statsRow { width: 100%; max-width: 100%; }

  /* ---------- video-reel machines ----------
     the grid tracks had an automatic min-content floor set by the symbol
     glyph, so five columns could never shrink below ~564px. Flex with
     min-width:0 lets them divide whatever room there is. */
  #reels { display: flex; width: 100%; max-width: 100%; padding: 6px; gap: 4px; }
  #reels > * { flex: 1 1 0; min-width: 0; }
  .reel, .scell { min-width: 0; }
  .sy-icon { font-size: clamp(16px, 6.3vw, 40px); }
  .sy-tag, .pig-tag, .scell small { font-size: 7.5px; letter-spacing: 0; }

  /* ---------- stepper (3-reel) machines ---------- */
  #stepperWrap { width: 100%; max-width: 100%; padding: 6px; }
  #stepReels { display: flex; width: 100%; gap: 4px; }
  .streel { flex: 1 1 0; min-width: 0; }
  .stcell { min-width: 0; }
  .stcell .st-bar, .stcell b { max-width: 100%; }

  /* ---------- controls ---------- */
  #slotControls { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
    width: 100%; max-width: 100%; }
  .big-btn { padding: 11px 10px; font-size: 12px; flex: 1 1 auto; min-width: 0; }
  #denomRow, #meterRow, #betRow { flex-wrap: wrap; justify-content: center;
    width: 100%; max-width: 100%; }
  #denomRow > *, #meterRow > * { min-width: 0; }

  /* ---------- cabinet frame ---------- */
  #wcWrap { padding: 8px 6px 0; }
  #wcBody { gap: 0; }
}

/* ---------- table games: boards that genuinely cannot shrink get to
     scroll inside their own box instead of dragging the page sideways ---------- */
@media (max-width: 900px) {
  #rackRight, #rackLeft { max-width: 100%; }
  #tableWrap, #layoutWrap, #boardWrap, #feltWrap {
    max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}


/* ---------- hard-sized cells: these had literal px widths, so no amount of
     flexing on the parent could make a five-reel board fit a phone ---------- */
@media (max-width: 760px) {
  .scell { width: 100%; max-width: 100%; }
  .stcell { width: 100%; max-width: 100%; }
  .mm-reel { flex: 1 1 0; min-width: 0; }
  #gsStage, .rl-main, #mmWrap, #mmReels, #curtainRow, .ms-felt,
  #stageWrap, #barsWrap, #hngTop, #chefBand, #jpRail9, #potsFooter,
  #sigHeader, #sigFooter, #meterRow, #slotMsg {
    width: 100%; max-width: 100%; }
  .curtain, .ct-drape { max-width: 50%; }
  #jpRail9, #sigHeader, #chefBand { flex-wrap: wrap; }
}

/* the PYL marquee ring is a rotating pseudo-element: it sweeps outside its own
   box on every frame, which was dragging the page sideways */
#pylBoard { overflow: hidden; }

/* ---------- table games: the felt and the dome are drawn at fixed pixel
     sizes, which set a min-content floor the grid could never go under ---------- */
@media (max-width: 900px) {
  #dome, #wheel { max-width: 100%; height: auto; }
  #domeWrap, #rTop { grid-template-columns: minmax(0, 1fr); }
  #domeCenter, #rMid, #wheelWrap, .side-col { min-width: 0; max-width: 100%; }
  /* the roulette felt genuinely cannot shrink and stay tappable — let it pan
     inside its own box instead of dragging the whole page sideways */
  #rtable { max-width: 100%; overflow-x: auto; overflow-y: hidden; flex: 0 1 auto; }
  #rack { flex-wrap: wrap; gap: 8px; }
  #rack > *, #rackRight, #rackLeft, #chips { flex-wrap: wrap; max-width: 100%; min-width: 0; }
}

@media (max-width: 760px) {
  .wolf-reels .scell, .frenzy-cell, .linkd-cell, .vault-cell, .titan-cell,
  .dm-cell, .mm-cell { width: 100%; max-width: 100%; }
}

/* ---------- last mile ---------- */
@media (max-width: 900px) {
  /* 1fr tracks carry an automatic min-content floor; minmax(0,1fr) lets them shrink */
  .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zone { min-width: 0; }
  #controls { flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 100%; }
  #controls > * { min-width: 0; }
  #racetrack, #rtStrip { max-width: 100%; }
  #rtable { overflow-x: auto; }
}

/* ---------- small phones (320-360) ---------- */
@media (max-width: 760px) {
  /* video poker: five 104px cards never fit a phone */
  #vpLeft, #mainHand { width: 100%; max-width: 100%; }
  #mainHand { gap: 5px; }
  .pslot { flex: 1 1 0; min-width: 0; }
  .pcard:not(.mini) { width: 100%; max-width: 104px; height: auto; aspect-ratio: 104 / 146; }
  /* plinko payout slots */
  #slotRow { width: 100%; max-width: 100%; }
  .pl-slot { flex: 1 1 0; min-width: 0; }
  /* press your luck board */
  #pylBoard { grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr); max-width: 100%; padding: 8px; gap: 5px; }
  .pyl-sq { min-width: 0; overflow: hidden; }
}
@media (max-width: 400px) {
  #pylBoard { grid-template-rows: repeat(5, 58px); }
  #slotTitle { font-size: 20px; letter-spacing: 2px; max-width: 100%; overflow-wrap: anywhere; }
  #wcMq #slotTitle { font-size: 18px; }
}

/* Cruisin' USA keeps its two-column layout down to 760px, so on tablets the
   fixed-width reel cells still pushed past the edge */
@media (min-width: 761px) and (max-width: 920px) {
  .rl-main { grid-template-columns: minmax(0, 1fr) 200px; }
  .rl-left { min-width: 0; }
  .rl-left #reels { display: flex; width: 100%; max-width: 100%; gap: 5px; }
  .rl-left #reels > * { flex: 1 1 0; min-width: 0; }
  .wolf-reels .scell, .rl-left .scell { width: 100%; max-width: 100%; }
}