/* ==========================================================
   Phones: the game must fit one screen.
   The table shrinks, and the controls become a dock fixed to the
   bottom of the screen, so the buttons are always in reach.
   Loaded last.
   ========================================================== */
.a11y-top { display: none; }

@media (max-width: 680px) {
  /* the accessibility menu moves to the top bar on phones */
  .a11y-fab { display: none; }
  .a11y-top { display: grid; }
  .a11y-top svg { width: 24px; height: 24px; }
  .a11y-panel { top: 64px; bottom: auto; left: 8px; }
  .topbar { padding-top: 6px; padding-bottom: 6px; }
  .topbar .icon-btn { width: 40px; height: 40px; }
  .wallet { padding: 4px 10px 4px 8px; font-size: .95rem; }
  main#app { padding-bottom: 12px !important; }

  /* compact game header */
  main:has(.game-screen) { padding: 6px 8px 0 !important; }
  .game-head { margin-bottom: 6px; }
  .game-head h1 { font-size: 1.15rem; }
  .game-head .btn, .game-head .icon-btn { min-height: 40px; height: 40px; }
  .game-head .icon-btn { width: 40px; }
  .room-pill { padding: 6px 10px; font-size: .85rem; }

  /* ---- the dock ---- */
  .game-screen .controls {
    position: sticky; bottom: 0; z-index: 40;
    margin: 8px -8px 0; padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0; max-height: 52vh; overflow-y: auto; overscroll-behavior: contain;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 215, 120, .35);
  }
  .controls-top { margin-bottom: 6px; gap: 6px; }
  .stack-pill { font-size: .8rem; padding: 3px 10px; }
  .stack-pill b { font-size: .95rem; }
  .toggle { padding: 4px 10px; font-size: .8rem; gap: 6px; }
  .toggle .dot { width: 34px; height: 20px; }
  .toggle .dot::after { width: 14px; height: 14px; }
  .toggle.on .dot::after { right: 17px; }
  .bet-row, .action-row { gap: 6px; }
  .btn-xl { min-height: 50px; font-size: 1.05rem; padding: 8px 12px; border-radius: 14px; }
  .action-row .btn-xl { flex: 1 1 22%; min-width: 0; }
  .bet-row > .btn-xl { flex: 1 1 100%; }
  .chip-picker { width: 100%; justify-content: space-between; }
  .chip { --s: 44px; }
  .chip-btn.on { transform: translateY(-3px); }
  .bet-amount { min-width: 0; display: flex; align-items: baseline; gap: 6px; }
  .bet-amount span { display: inline; }
  .bet-amount b { font-size: 1.3rem; }
  .bet-buttons { flex: 1 1 100%; flex-wrap: nowrap; }
  .bet-buttons .btn { flex: 1; min-height: 42px; padding: 6px 8px; font-size: .9rem; }
  .bet-select { flex-wrap: nowrap; overflow-x: auto; width: 100%; justify-content: flex-start; scrollbar-width: none; }
  .bet-select::-webkit-scrollbar { display: none; }
  .bet-select > span { flex: none; font-size: .8rem; }
  .bet-opt { min-width: 48px; min-height: 42px; padding: 4px 8px; flex: none; }
  .coach-tip { font-size: .95rem; width: 100%; }
  .wait-msg { padding: 6px; font-size: 1rem; }

  /* ---- tables ---- */
  .felt { padding: 10px 8px; }
  .table-msg { font-size: 1.05rem; margin: 6px 0; min-height: 1.4em; }
  .table-rules { font-size: .7rem; margin-bottom: 6px; }

  /* blackjack */
  :root { --card-w: 66px; }
  html.big-text { --card-w: 72px; }
  html.huge-text { --card-w: 78px; }
  .bj-table { padding-top: 46px !important; }
  .bj-print { width: 94% !important; margin: -8px auto -54px !important; }
  .print-small { display: none; }
  .my-zone { min-height: 0; padding: 4px; }
  .bet-circle { width: 84px; height: 84px; margin-left: -42px; bottom: 6px; }
  .dealer-face { width: 34px; height: 34px; }
  .zone-label { font-size: .95rem; margin-bottom: 2px; }

  /* roulette: board only; the wheel pops up while it spins */
  .rl-layout.felt { display: block; padding: 8px; }
  .rl-layout .wheel-wrap {
    position: fixed; z-index: 60; left: 50%; top: 42%; width: min(86vw, 330px); max-width: none;
    transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none;
    transition: transform .35s cubic-bezier(.2, .9, .3, 1.2), opacity .25s;
  }
  .rl-layout.show-wheel .wheel-wrap { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  .rl-layout.show-wheel::before { content: ''; position: fixed; inset: 0; z-index: 55; background: rgba(5, 0, 10, .6); backdrop-filter: blur(2px); }
  .rl-board { grid-template-rows: 40px repeat(12, 34px) 34px !important; }
  .rl-cell .oval { font-size: .9rem; }
  .rl-cell.out { min-height: 44px !important; font-size: .9rem !important; }
  .diamond { width: 26px; height: 26px; }
  .rl-history { margin-bottom: 6px; }
  .hist { width: 28px; height: 28px; font-size: .8rem; }
  .rl-tip { font-size: .85rem; margin-bottom: 6px; }

  /* poker */
  .pk-table { height: min(470px, calc(100dvh - 330px)) !important; min-height: 380px; }
  .pk-log { display: none; }
  .pk-coach { padding: 4px 8px; margin-bottom: 6px; font-size: .8rem; gap: 2px 10px; }
  .pk-coach span:nth-child(3) { display: none; }
  .pk-coach .tip { font-size: .85rem; }
  .raise-box { padding: 6px; gap: 6px; }
  .raise-presets .btn { min-height: 36px; padding: 4px 8px; font-size: .8rem; }
  .raise-stepper b { min-width: 60px; font-size: 1.1rem; }
  .raise-stepper .icon-btn { width: 36px; height: 36px; }
  .pk-actions .btn-xl { flex: 1 1 30%; }
  .raise-box .btn-xl { flex: 1 1 100%; }

  /* slots: machine first, pay table under the dock area */
  .slots-wrap { display: block; }
  .slot-side { margin-top: 10px; }
  .slot-machine { padding: 10px 10px 12px; border-radius: 26px 26px 18px 18px; }
  .slot-topper { margin: 0 4px 6px; padding: 8px 6px 6px; }
  .slot-topper span { font-size: 1.25rem; }
  .slot-lights { padding: 0 10px 6px; }
  .slot-lights i { width: 9px; height: 9px; }
  .slot-window { --sym: min(25vw, 92px) !important; }
  .slot-panel { margin-top: 8px; padding: 8px; grid-template-columns: 1fr 1fr auto; }
  .spin-round { grid-column: auto; width: 68px; height: 68px; font-size: 1rem; }
  .led b { font-size: 1.05rem; }

  /* video poker */
  .vp-wrap { padding: 6px; gap: 8px; border-radius: 20px; }
  .vp-paytable { grid-template-columns: 1fr 1fr; padding: 6px; font-size: .78rem; gap: 0 8px; }
  .vp-pay { padding: 3px 6px; }
  .vp-screen { padding: 12px 4px; }
  .vp-card .card { --w: 17vw; }
  .vp-msg { font-size: .95rem; margin-top: 8px; }

  /* baccarat */
  .bac-table { padding-top: 46px !important; }
  .dealer-plate { top: 8px; right: 8px; font-size: .85rem; padding: 2px 10px 2px 2px; }
  .bac-hands { gap: 8px; flex-wrap: nowrap; }
  .bac-hand { min-width: 0; flex: 1 1 0; padding: 6px; }
  .bac-hand h3 { font-size: 1rem; margin-bottom: 6px; }
  .bac-vs { display: none; }
  .bac-sides { margin: 12px auto 24px; }
  .bac-side { min-height: 72px !important; padding: 8px 4px 14px !important; }
  .bac-road i { width: 22px; height: 22px; font-size: .65rem; }

  /* hi-lo */
  .hilo-trail { min-height: 0; }
  .hilo-trail .card { --w: 30px; }
  .hilo-card .card { --w: 96px; }
  .hilo-main { gap: 8px; margin: 6px 0; }
  .hilo-btn { padding: 10px 6px; }
  .hilo-btn b { font-size: 1.1rem; }

  /* dice */
  .dice-row { margin: 14px 0 20px; gap: 36px; min-height: 0; }
  .die3d { --size: 72px; }
  .dice-sum { font-size: 1.1rem; }
  .dice-sum b { font-size: 1.6rem; }
  .dice-options { grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 6px; }
  .dice-opt { padding: 6px 2px; border-radius: 12px; border-width: 2px; }
  .dice-opt b { font-size: .85rem; }
  .dice-opt span { display: none; }
}
@media (max-width: 680px) {
  /* the table grows to fill the screen between the header and the dock */
  .game-screen { display: flex; flex-direction: column; min-height: calc(100dvh - 60px); }
  .game-screen > .felt, .game-screen > .pk-wrap, .game-screen > .slots-wrap, .game-screen > .vp-wrap { flex: 1 0 auto; }
  .game-screen > .felt { display: flex; flex-direction: column; justify-content: space-evenly; }
  .game-screen .controls { margin-top: auto; }
}
@media (max-width: 680px) {
  .game-screen > .rl-layout.felt { align-items: stretch; justify-content: flex-start; }
}
@media (max-width: 680px) {
  /* poker: one-line coach, raise controls on one row, more room for the table */
  .pk-coach span:first-child { display: none; }
  .pk-coach { flex-wrap: nowrap; justify-content: space-between; }
  .pk-coach .tip { width: auto; }
  .raise-box { flex-wrap: wrap; }
  .raise-presets { order: 1; width: 100%; justify-content: space-between; }
  .raise-presets .btn { flex: 1; }
  .raise-stepper { order: 2; }
  .raise-box .btn-xl { order: 3; flex: 1 1 40% !important; }
  .pk-table { height: max(380px, calc(100dvh - 390px)) !important; }
  .pk-seat:not(.me) .pk-last { font-size: .65rem; padding: 1px 6px; }
}