/* ============================================================================
   mobile.css - phone layout for XtremeIdiots Casino
   Loaded by all 4 pages (lobby + 3 tables) AFTER their own stylesheets so these
   rules win on small screens.

   Strategy:
   - Phones are asked to play in landscape (more horizontal room for felt tables
     and the wheel). A website can't force rotation, so instead we show a "rotate
     your phone" overlay whenever a small screen is held in portrait, and reveal
     the game only once it's turned sideways.
   - "Phone" here means a coarse pointer (touch) on a short viewport. We key the
     overlay off orientation + height rather than a raw width breakpoint so that
     a small landscape phone (wide but very short) still gets the compact layout
     without wrongly triggering the rotate prompt.
   ========================================================================== */

/* ---------- rotate-to-landscape overlay ---------- */

.rotate-overlay {
  display: none; /* only shown on portrait phones, via the media query below */
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: radial-gradient(ellipse at 50% 40%, #241318, #0c0708 80%);
  color: var(--cream, #f2e8d5);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  gap: 18px;
}
.rotate-overlay .rotate-icon {
  width: 76px;
  height: 76px;
  animation: rotate-hint 2.4s ease-in-out infinite;
}
.rotate-overlay h2 {
  margin: 0;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.06em;
  font-size: 1.6rem;
  color: var(--gold-bright, #e8c874);
}
.rotate-overlay p {
  margin: 0;
  max-width: 300px;
  font-size: 0.9rem;
  line-height: 1.5;
  opacity: 0.8;
}
@keyframes rotate-hint {
  0%, 100% { transform: rotate(0deg); }
  40%, 60% { transform: rotate(-90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .rotate-overlay .rotate-icon { animation: none; }
}

/* Show the overlay only on a touch-capable phone held upright. The (pointer:
   coarse) guard keeps it off any desktop browser resized tall-and-narrow, and the
   max-width: 500px keeps it off tablets in portrait (an iPad has room to play
   upright and shouldn't be told to rotate) - phone portrait widths are ~430px and
   under, tablet portrait starts around 768px. */
@media (orientation: portrait) and (pointer: coarse) and (max-width: 500px) {
  .rotate-overlay { display: flex; }
  /* Freeze the page behind the overlay so it can't be scrolled or interacted
     with while rotated the wrong way. */
  body.has-rotate-overlay { overflow: hidden; }
}

/* ============================================================================
   LANDSCAPE PHONE LAYOUT
   Applies to short viewports (<= 500px tall) that are touch-capable - this is a
   phone on its side. Tablets and laptops are taller, so they keep the desktop
   layout untouched.
   ========================================================================== */
@media (orientation: landscape) and (pointer: coarse) and (max-height: 500px) {

  /* Match the draw-poker (video poker) card style across every table on mobile:
     corners show just the rank, with no suit symbol tucked under the number. Video
     poker + UTH already omit it in markup; this hides it for blackjack & baccarat,
     whose cardMarkup still includes the corner suit <span>. Face-card center suit
     (.bc-face span) and the pips are untouched. */
  .bc-corner span { display: none; }

  /* --- global chrome shrink --- */
  .wallet, .wallet.mono {
    font-size: 0.72rem;
    padding: 5px 10px;
    top: 6px; right: 6px;
  }
  .phase-banner { font-size: 0.85rem !important; padding: 4px 10px !important; margin: 4px 0 !important; }
  .log-strip { font-size: 0.68rem; }

  /* Main wrappers: use the full width, trim the generous desktop padding. */
  .bj-wrap, .bc-wrap, .rl-wrap, .lobby-floor {
    max-width: 100%;
    padding: 6px 8px 10px;
  }

  /* --- the side column (chat + betting bars) --- */
  /* Keep the chat + betting boxes as a narrow column to the RIGHT of the table
     (not stacked below it). A landscape phone is wide enough to fit a slim side
     column beside the felt, which keeps the table itself taller. The donation
     panel is hidden here to make room - it's still on the lobby. */
  .bj-main-row, .bc-main-row {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 8px;
  }
  .bj-chat-col, .bc-side-col {
    flex: 0 0 240px !important;   /* slim fixed side column on the right */
    width: 240px !important;
    max-width: 240px !important;
  }
  .table-stage { flex: 1 1 auto !important; min-width: 0 !important; }
  .chat-panel { width: 100% !important; max-width: 100% !important; }
  .chat-messages, #chatMessages { max-height: 70px !important; height: 70px !important; }
  .table-tables .support-panel,
  .bj-chat-col .support-panel,
  .bc-side-col .support-panel,
  .vp-support,
  .rl-left-col .support-panel { display: none; }
  /* Baccarat's betting board has 3-, 4- and 2-across rows built for a wide desktop
     column. In this slim mobile column the 4-across row would be unusably tiny, so
     drop every row to 2 columns and shrink the spot text/inputs to stay tappable. */
  .bc-side-col .bc-bet-row,
  .bc-side-col .bc-side-row-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .bc-side-col .bc-spot { padding: 5px 4px 6px !important; }
  .bc-side-col .bc-spot-name { font-size: 0.68rem !important; }
  .bc-side-col .bc-spot-pay { font-size: 0.52rem !important; }
  .bc-side-col .bc-spot input[type=number] { width: 100% !important; font-size: 0.7rem !important; }

  /* Roulette on a landscape phone: drop the chat panel entirely and sit the wheel
     and board SIDE BY SIDE. A phone on its side is wide-but-short, so using the
     width for two columns (instead of stacking them and scrolling) is the better
     fit. This overrides both the desktop column-stack and the generic mobile
     column rule above. */
  .rl-main-row {
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }
  .rl-wheel-col { order: 0 !important; flex: 0 0 auto !important; width: auto !important; }
  .rl-left-col { flex: 1 1 auto !important; width: auto !important; max-width: none !important; min-width: 0 !important; }
  .rl-wheel-col .chat-panel { display: none !important; }  /* chat lives here on roulette - remove on mobile */

  /* --- cards: smaller everywhere --- */
  .card, .bc-card-slot, .bc-card-slot .card {
    transform: scale(0.82);
    transform-origin: center;
  }
  .hand-row, .bc-hand-row { min-height: 84px !important; }

  /* --- baccarat mobile: hands side by side + shorter table --- */
  /* Player and Banker were wrapping onto stacked rows on a phone. Force them to
     share one row, and pull the felt height down so the table isn't so tall. */
  .bc-hands { flex-wrap: nowrap !important; gap: 10px !important; margin-bottom: 4px !important; }
  .bc-hand-block { min-width: 0 !important; flex: 0 1 auto !important; }
  .bc-hand-row { min-height: 70px !important; }
  .bc-vs { font-size: 1rem !important; padding-top: 8px !important; }
  .bc-felt { padding-top: 30px !important; }
  .bc-felt .felt-table { padding: 8px 14px 10px !important; }
  .bc-felt .table-legend { display: none !important; }  /* the arc SVG just adds clutter on a small felt */

  /* --- seats: compact grid, shorter cards --- */
  .seat-ring {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 8px !important;
  }
  .seat {
    min-height: 0 !important;
    padding: 8px !important;
    font-size: 0.8rem;
  }
  .bj-seat-ring {
    position: static !important; min-height: 0 !important; margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 8px !important;
  }
  .bj-seat-ring .seat { position: static !important; width: auto !important; transform: none !important; }

  /* --- action bars: compact, never sticky in this mode --- */
  .action-bar {
    position: static !important;
    padding: 8px !important;
    gap: 8px !important;
    font-size: 0.8rem;
  }
  .action-bar button { padding: 7px 12px !important; font-size: 0.8rem !important; }
  .bet-panel input[type=number] { width: 64px !important; }

  /* --- baccarat betting board: tighten the spot grid --- */
  .bc-spot-name { font-size: 0.72rem !important; }
  .bc-spot-pay { font-size: 0.56rem !important; }
  .bc-spot input[type=number] { width: 54px !important; font-size: 0.72rem !important; }

  /* --- roulette: wheel + board side by side (see the row override above) --- */
  /* Wheel on the left is fixed-size; the board takes the remaining width. With the
     chat gone and the two side by side there's more room, so the wheel can be a
     touch larger than the old stacked layout allowed. */
  .rl-wheel-wrap { width: 190px !important; height: 190px !important; }
  .rl-board { gap: 3px !important; width: 100% !important; }
  .rl-cell { min-height: 24px !important; font-size: 0.62rem !important; }
  .rl-cell.rl-outside, .rl-cell.rl-col2to1 { font-size: 0.54rem !important; }
  .rl-chip-row { gap: 6px !important; flex-wrap: wrap !important; }
  .rl-chip-btn { width: 38px !important; height: 38px !important; font-size: 0.68rem !important; }
  .rl-board-hint { font-size: 0.6rem !important; }
  .rl-last-numbers { display: none !important; }  /* recent-numbers strip - drop it to save the wheel column's height */

  /* --- lobby: cards in a scrollable row, small --- */
  .marquee-banner { padding: 8px 12px 6px !important; }
  .marquee-banner h1 { font-size: 1.5rem !important; }
  .marquee-banner .tag { font-size: 0.7rem !important; }
  .bulb-row { display: none; }
  .lobby-row { flex-direction: column; }
  /* Force all game cards onto ONE row on mobile (4 visible games; slots is hidden).
     Fixed-column grid instead of auto-fit so they always share the row and shrink to
     fit rather than wrapping video poker underneath. If slots is un-hidden later,
     bump this to repeat(5, 1fr). */
  .entrance-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; }
  .entrance-card { padding: 10px 10px 10px !important; }
  .entrance-card .dealer-avatar { margin-bottom: 6px !important; }
  .dealer-avatar { width: 70px !important; height: 70px !important; }
  .entrance-card h2 { font-size: 1.15rem !important; }
  .entrance-card p { font-size: 0.76rem !important; }
  .entrance-card ul { font-size: 0.72rem !important; margin-bottom: 8px !important; }
}

/* ---------- betting countdown on phones ----------
   The felt is only a couple of hundred pixels tall on a phone in landscape, so the
   desktop clock (up to 4.2rem of digits plus padding) would swallow the table. Shrink
   it and tuck it toward the top of the felt, clear of the seat row and the cards. */
@media (orientation: landscape) and (pointer: coarse) and (max-height: 500px) {
  .bet-clock {
    top: 34% !important;
    padding: 6px 16px !important;
    border-radius: 12px !important;
    gap: 0 !important;
  }
  .bet-clock-secs { font-size: 1.9rem !important; }
  .bet-clock-label { font-size: 0.6rem !important; letter-spacing: 0.1em !important; }
  .bet-clock-hint { font-size: 0.55rem !important; }
}

/* Portrait phones get the rotate-device overlay, so the clock would sit behind it.
   Hidden explicitly rather than relying on stacking order. */
@media (orientation: portrait) and (pointer: coarse) and (max-width: 500px) {
  .bet-clock { display: none !important; }
}

/* ---------- premium skin adjustments for phones in landscape ---------- */
@media (orientation: landscape) and (pointer: coarse) and (max-height: 500px) {
  /* hub: title left so the wallet pill has its corner; key art stays a banner */
  .marquee-banner { text-align: left !important; padding: 10px 12px 6px !important; }
  .marquee-banner h1 { padding: 0 !important; }
  .marquee-banner h1.has-img img { height: 40px !important; margin: 0 !important; }
  .marquee-banner .tag { font-size: 0.56rem !important; margin-top: 4px !important; }
  .entrance-card .dealer-avatar { width: 100% !important; height: 84px !important; border-radius: 0 !important; margin: 0 !important; }
  .entrance-card h2.has-img img { height: 36px !important; }
  .entrance-card p { display: none !important; }
  .entrance-cta { font-size: 0.85rem !important; padding: 6px 10px !important; margin: auto 10px 10px !important; }

  /* tables: crop the felt art's header band, shrink the logo and corner box */
  .felt-table.has-felt-art::before { background-position: center 70% !important; opacity: 0.45 !important; }
  .table-title-text.has-img img { height: 34px !important; }
  .table-corner-totals { top: 6px !important; left: 6px !important; padding: 4px 8px !important; font-size: 0.5rem !important; line-height: 1.5 !important; }
  .table-corner-totals span { font-size: 0.7rem !important; }
  .dealer-area { padding: 6px 12px 8px !important; margin-bottom: 8px !important; }
  .dealer-area.has-portrait { margin-left: 28px !important; }
  .dealer-portrait { width: 56px !important; height: 56px !important; left: -34px !important; }
  .dealer-portrait-float { width: 48px !important; height: 48px !important; top: 8px !important; }
  .table-chips.has-img { width: 52px !important; height: 52px !important; top: -8px !important; }
  .bc-hand-block { padding: 6px 10px 8px !important; min-width: 0 !important; }

  /* video poker: the marquee is a slim strip on a phone */
  .vp-marquee.has-img { height: 44px !important; margin: -10px -12px 8px !important; border-radius: 10px 10px 0 0 !important; }
  .vp-landing .vp-marquee.has-img { margin: -12px -12px 10px !important; }
  .vp-landing-title.has-img img { height: 40px !important; }
}