/* Casino Faction v23 — compact Telegram phone layout. Loaded after all legacy styles. */
:root { --app-height: 100dvh; }
html, body { min-height: var(--app-height, 100dvh); }
body { overscroll-behavior: none; }
.casino-app { min-height: var(--app-height, 100dvh); }
.orientation-hint { display: none !important; }

/* Tablet / narrow desktop */
@media (max-width: 900px) {
  .casino-app { width: 100%; padding-inline: max(6px, env(safe-area-inset-left)); }
  .reel-frame { width: 100%; }
  .frame-gem { width: 34px; }
  .frame-gem-left { left: -8px; }
  .frame-gem-right { right: -8px; }
}

/* Real portrait layout instead of forcing a 720 px canvas. */
@media (max-width: 760px) and (orientation: portrait) {
  html, body { width: 100%; min-width: 0; overflow-x: hidden; overflow-y: auto; }
  .casino-app {
    min-width: 0 !important;
    width: 100%;
    transform: none !important;
    padding: calc(4px + var(--safe-top)) 5px calc(5px + var(--safe-bottom));
    gap: 4px;
    grid-template-rows: auto auto auto auto auto auto;
    align-content: start;
  }

  .topbar {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand actions" "logo logo";
    gap: 3px 5px;
    align-items: center;
  }
  .brand-and-jackpot { grid-area: brand; min-width: 0; gap: 3px; }
  .mini-symbol { width: 39px; }
  .jackpot-card {
    min-width: 0;
    padding: 3px 6px 4px;
    border-width: 1px;
    box-shadow: inset 0 0 0 1px rgba(255,232,157,.12), 0 3px 10px rgba(0,0,0,.45);
  }
  .jackpot-card span { font-size: 8px; letter-spacing: .06em; }
  .jackpot-card strong { min-height: 17px; font-size: 13px; gap: 3px; }
  .money-icon { width: 1.05em; height: 1.05em; }
  .faction-logo { grid-area: logo; width: min(78vw, 360px); max-height: 44px; justify-self: center; }
  .top-actions { grid-area: actions; gap: 3px; flex-wrap: nowrap; }
  .icon-button { width: 27px; border-width: 1px; font-size: 12px; box-shadow: none; }

  .machine { width: 100%; min-height: 0; }
  .reel-frame {
    width: 100%;
    min-height: 0;
    height: auto;
    aspect-ratio: 5 / 3.03;
    padding: 5px;
    clip-path: polygon(1.5% 0,98.5% 0,100% 4%,100% 96%,98.5% 100%,1.5% 100%,0 96%,0 4%);
    box-shadow: 0 7px 18px rgba(0,0,0,.62), 0 0 10px rgba(240,166,54,.2);
  }
  .reel-frame::before { inset: 3px; }
  .reel-grid { gap: 2px; padding: 2px; }
  .reel-column { gap: 2px; }
  .symbol-cell { border-width: 1px; }
  .symbol-cell::after { inset: 1px; }
  .symbol-cell img { width: 91%; height: 91%; }
  .frame-gem { width: 20px; border-width: 2px; }
  .frame-gem-left { left: -5px; }
  .frame-gem-right { right: -5px; }

  .control-deck {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) 70px;
    grid-template-areas:
      "bet lines spin"
      "max balance spin";
    gap: 3px;
    align-items: stretch;
  }
  .bet-card { grid-area: bet; }
  .lines-card { grid-area: lines; }
  .spin-button { grid-area: spin; width: 68px; align-self: center; justify-self: center; }
  .max-bet-button { grid-area: max; }
  .balance-card { grid-area: balance; }
  .control-card {
    min-height: 42px;
    padding: 3px 4px;
    gap: 1px;
    border-width: 1px;
    box-shadow: inset 0 0 0 1px rgba(255,235,169,.08), 0 3px 9px rgba(0,0,0,.45);
  }
  .control-label { font-size: 8px; }
  .stepper { grid-template-columns: 25px 1fr 25px; gap: 2px; }
  .stepper button { width: 25px; border-width: 1px; font-size: 17px; }
  .stepper strong, .balance-card strong { font-size: 12px; min-height: 17px; gap: 2px; }
  .max-bet-button { height: auto; min-height: 42px; padding: 3px; border-width: 1px; font-size: 9px; line-height: 1.05; }

  .feature-deck {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    grid-template-areas: "scatter auto" "fast fast";
    gap: 3px;
  }
  .scatter-buy { grid-area: scatter; }
  .auto-button { grid-area: auto; }
  .fast-spin-control { grid-area: fast; }
  .feature-deck > * {
    min-height: 32px;
    padding: 3px 7px;
    border-width: 1px;
    font-size: 9px;
    box-shadow: inset 0 0 0 1px rgba(255,235,169,.08), 0 2px 7px rgba(0,0,0,.42);
  }
  .scatter-buy strong { font-size: 11px; }
  .fast-spin-control i { width: 30px; height: 16px; }
  .fast-spin-control i::after { width: 12px; height: 12px; }
  .fast-spin-control input:checked + i::after { transform: translateX(14px); }

  .status-deck { grid-template-columns: .92fr 1.04fr 1.04fr; gap: 3px; }
  .status-card {
    min-width: 0;
    min-height: 48px;
    padding: 4px 5px;
    border-width: 1px;
    box-shadow: inset 0 0 0 1px rgba(255,235,169,.07), 0 2px 7px rgba(0,0,0,.42);
  }
  .status-card > span, .status-row span { font-size: 6.8px; letter-spacing: .02em; }
  .status-row { gap: 2px; }
  .status-row b { font-size: 7px; white-space: nowrap; }
  .last-win-card strong { min-height: 18px; font-size: 12px; gap: 2px; }
  .progress { height: 5px; margin-top: 2px; }
  .status-card small { margin-top: 1px; font-size: 6.8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .game-footer { min-height: 16px; font-size: 8px; gap: 4px; }
  .game-footer #statusText { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .game-footer button { white-space: nowrap; }
  .free-spin-banner { top: 9%; padding: 6px 11px; font-size: 10px; }
  .toast { bottom: calc(5px + var(--safe-bottom)); padding: 7px 10px; font-size: 10px; }
  .modal { padding: 5px; }
  .modal-card { width: 100%; max-height: calc(var(--app-height,100dvh) - 10px); padding: 13px 10px; border-radius: 12px; }
  .modal-card h2 { margin-bottom: 9px; font-size: 20px; }
  .modal-close { width: 30px; top: 5px; right: 5px; }
}

/* Very short landscape phone screens inside Telegram. */
@media (max-height: 540px) and (orientation: landscape) {
  html, body { overflow: hidden; }
  .casino-app {
    width: 100%;
    height: var(--app-height, 100dvh);
    min-height: 0;
    padding: calc(2px + var(--safe-top)) max(4px, var(--safe-left, 0px)) calc(2px + var(--safe-bottom));
    gap: 2px;
    grid-template-rows: 40px minmax(0,1fr) 43px 29px 35px 15px;
  }
  .topbar { min-height: 40px; grid-template-columns: .88fr 1.16fr .96fr; gap: 3px; }
  .mini-symbol { width: 34px; }
  .jackpot-card { min-width: 100px; padding: 2px 6px; border-width: 1px; }
  .jackpot-card span { font-size: 7px; }
  .jackpot-card strong { min-height: 15px; font-size: 12px; }
  .faction-logo { max-height: 39px; }
  .top-actions { gap: 3px; }
  .icon-button { width: 25px; border-width: 1px; font-size: 11px; }
  .machine { min-height: 0; }
  .reel-frame { width: min(78vw, 720px); min-height: 0; height: 100%; padding: 4px; }
  .reel-frame::before { inset: 3px; }
  .reel-grid,.reel-column { gap: 2px; }
  .symbol-cell::after { inset: 1px; }
  .symbol-cell img { width: 88%; height: 88%; }
  .frame-gem { width: 20px; border-width: 2px; }
  .frame-gem-left { left: -5px; }.frame-gem-right { right: -5px; }

  .control-deck { gap: 3px; grid-template-columns: 1fr .7fr 62px .65fr 1.05fr; }
  .control-card { min-height: 40px; padding: 2px 4px; gap: 0; border-width: 1px; }
  .control-label { font-size: 7px; }
  .stepper { grid-template-columns: 22px 1fr 22px; gap: 2px; }
  .stepper button { width: 22px; font-size: 15px; border-width: 1px; }
  .stepper strong,.balance-card strong { min-height: 15px; font-size: 11px; }
  .spin-button { width: 58px; }
  .max-bet-button { height: 39px; padding: 2px 4px; font-size: 8px; border-width: 1px; }

  .feature-deck { gap: 3px; }
  .feature-deck > * { min-height: 27px; padding: 2px 5px; font-size: 8px; border-width: 1px; }
  .scatter-buy strong { font-size: 9px; }
  .fast-spin-control i { width: 27px; height: 14px; }
  .fast-spin-control i::after { width: 10px; height: 10px; }
  .fast-spin-control input:checked + i::after { transform: translateX(13px); }

  .status-deck { gap: 3px; }
  .status-card { min-height: 33px; padding: 2px 5px; border-width: 1px; }
  .status-card > span,.status-row span,.status-row b { font-size: 6px; }
  .last-win-card strong { min-height: 13px; font-size: 10px; }
  .progress { height: 4px; margin-top: 1px; }
  .status-card small { margin-top: 0; font-size: 6px; }
  .game-footer { min-height: 13px; font-size: 7px; }
  .free-spin-banner { top: 5%; padding: 4px 8px; font-size: 8px; }
  .modal { padding: 3px; }
  .modal-card { max-height: calc(var(--app-height,100dvh) - 6px); padding: 9px; }
}

/* Tiny phones: protect against text expanding cards. */
@media (max-width: 360px) and (orientation: portrait) {
  .casino-app { padding-inline: 3px; }
  .mini-symbol { width: 34px; }
  .faction-logo { max-height: 39px; }
  .icon-button { width: 24px; font-size: 10px; }
  .control-deck { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 63px; }
  .spin-button { width: 61px; }
  .stepper { grid-template-columns: 22px 1fr 22px; }
  .stepper button { width: 22px; }
  .status-card > span,.status-row span,.status-row b,.status-card small { font-size: 6px; }
}

/* Keep the main control circular even before the SVG finishes loading. */
.spin-button { aspect-ratio: 1; height: auto; min-height: 0; }
.spin-button img { width: 100%; height: 100%; object-fit: contain; }
@media (max-height: 540px) and (orientation: landscape) {
  .spin-button { width: 42px; }
}


/* Casino Faction v25 — guaranteed three visible rows on portrait phones. */
@media (max-width: 760px) and (orientation: portrait) {
  .machine {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }
  .reel-frame {
    width: min(100%, 430px) !important;
    height: clamp(166px, 48vw, 196px) !important;
    min-height: 166px !important;
    max-height: 196px !important;
    aspect-ratio: auto !important;
    padding: 4px !important;
    margin-inline: auto !important;
    overflow: hidden !important;
  }
  .reel-frame::before { inset: 2px !important; }
  .reel-grid {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 2px !important;
    padding: 2px !important;
    overflow: hidden !important;
  }
  .reel-column {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: 2px !important;
    overflow: hidden !important;
  }
  .symbol-cell {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .symbol-cell img {
    width: 84% !important;
    height: 84% !important;
    max-width: 58px !important;
    max-height: 58px !important;
  }
}

@media (max-width: 380px) and (orientation: portrait) {
  .reel-frame {
    height: clamp(158px, 47vw, 178px) !important;
    min-height: 158px !important;
    max-height: 178px !important;
  }
  .symbol-cell img { max-width: 52px !important; max-height: 52px !important; }
}

/* The reel grid is pinned inside the gold frame on every phone orientation.
   This avoids percentage-height overflow that could crop the third row in WebView. */
@media (max-width: 900px) {
  .reel-frame { overflow: hidden !important; }
  .reel-grid {
    position: absolute !important;
    inset: 4px !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
}
@media (max-width: 900px) {
  .reel-column {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    overflow: hidden !important;
  }
  .symbol-cell {
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }
  .symbol-cell img {
    min-width: 0 !important;
    min-height: 0 !important;
  }
}

/* SCATTER summary v26 mobile */
@media(max-width:820px){.free-spin-banner small{font-size:9px;margin-top:2px}.scatter-summary-card{gap:8px}.scatter-summary-emblem{width:54px;height:54px;font-size:25px}.scatter-summary-total{padding:10px}.scatter-summary-grid{gap:5px}.scatter-summary-stat{padding:7px}.scatter-summary-stat b{font-size:13px}}