/* Mobil oyun ekranı: masa ve bahis kontrolleri kaydırmadan tek ekrana sığar. */
@media (max-width: 820px) {
  html,
  body {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body {
    display: grid;
    grid-template-rows: 28px 42px minmax(0, 1fr);
  }

  .topbar {
    height: 42px;
    padding: 0 12px;
  }
  .logo { gap: 8px; }
  .logo-mark { width: 29px; height: 29px; font-size: 13px; }
  .top-actions { gap: 8px; }
  .icon-button { width: 29px; height: 29px; font-size: 16px; }
  .text-button { padding: 5px 0; font-size: 9px; }

  main {
    min-height: 0;
    height: calc(100vh - 70px);
    height: calc(100dvh - 70px);
    display: grid;
    grid-template-rows: minmax(0, 1fr) 88px;
    overflow: hidden;
  }

  .game-shell {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 4px 6px 54px;
    overflow: hidden;
  }
  .table-wrap { height: 100%; min-height: 0; }
  .table {
    height: 100%;
    min-height: 0;
    max-height: none;
    border-radius: 34% 34% 7% 7% / 11% 11% 5% 5%;
  }

  .table > .message {
    top: 5px;
    width: 94%;
    min-height: 32px;
    gap: 7px;
    padding: 4px 10px;
  }
  .table > .message .message-kicker {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .table > .message strong { font-size: 10px; }

  .dealer-character {
    top: 41px;
    width: 176px;
    height: 92px;
    border-radius: 42% 42% 12px 12px;
  }
  .dealer-character > span {
    right: 8px;
    bottom: 5px;
    display: block;
    font-size: 7px;
    letter-spacing: .7px;
  }
  .dealer-shoe {
    top: 42px;
    right: 2%;
    left: auto;
    transform: scale(.47);
    transform-origin: top right;
  }

  .dealer-zone {
    top: 130px;
    width: 76%;
    height: 88px;
  }
  .hand-head { height: 18px; font-size: 8px; }
  .dealer-zone .cards { height: 70px; padding-top: 1px; }
  .dealer-zone .card { width: 48px; height: 69px; margin-left: -12px; }
  .dealer-zone .card-corner { font-size: 9px; }
  .dealer-zone .card-suit { font-size: 22px; }

  .table-copy { top: 56%; }
  .table-copy span { width: 74px; height: 74px; font-size: 34px; }
  .table-copy b { margin-top: 8px; font-size: 7px; }
  .table-copy small { margin-top: 3px; font-size: 6px; }

  .multi-player-zone { right: 1%; bottom: 4px; left: 1%; }
  .bet-spots { gap: 4px; }
  .bet-spot { padding: 4px; border-radius: 11px; }
  .bet-spot > header {
    min-height: 18px;
    padding: 0 2px 3px;
    flex-wrap: nowrap;
  }
  .bet-spot > header span,
  .spot-hand-head span { font-size: 8px; letter-spacing: .35px; }
  .bet-spot > header b { font-size: 11px; white-space: nowrap; }
  .bet-result {
    order: initial;
    width: auto;
    min-height: 11px;
    max-width: 72px;
    margin: 0 3px;
    padding: 0 3px;
    overflow: hidden;
    font-size: 6px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .spot-hand-head { height: 16px; }
  .spot-hand-head .score { min-width: 22px; height: 17px; font-size: 10px; }
  .spot-cards { height: 64px; padding-top: 0; }
  .spot-cards .card { width: 43px; height: 62px; margin-left: -18px; }
  .spot-cards .card-corner { font-size: 7px; }
  .spot-cards .pip-field { inset: 14px 4px 13px; font-size: 8px; }
  .spot-cards .pips-1 i:nth-child(1) { font-size: 14px; }
  .spot-cards .court-card { inset: 14px 4px 13px; }
  .spot-cards.split-layout { height: 64px; }
  .spot-cards .split-hand { padding: 0 1px; }
  .spot-cards .split-label { margin-bottom: 1px; font-size: 6px; }
  .spot-cards.split-layout .card { width: 36px; height: 52px; margin-left: -17px; }
  .spot-side-bets { gap: 3px; }
  .spot-side {
    height: 28px;
    padding: 2px 4px;
    border-radius: 7px;
  }
  .spot-side span { font-size: 8px; }
  .spot-side small { font-size: 6px; }
  .spot-side b { font-size: 8px; }
  .spot-side em { font-size: 6px; }
  .spot-side.has-result { height: 32px; }

  .balance-panel {
    right: 8px;
    bottom: 4px;
    left: 8px;
    height: 46px;
    display: grid;
    grid-template-columns: 1.15fr repeat(3, 1fr) .9fr;
    align-items: center;
    gap: 4px;
  }
  .balance-panel > div {
    min-width: 0;
    padding: 0;
    text-align: center;
  }
  .balance-panel span {
    min-height: 17px;
    margin: 0 0 2px;
    font-size: 6px;
    line-height: 1.15;
    letter-spacing: .25px;
  }
  .balance-panel strong {
    display: block;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
  }
  .balance-panel > div:first-child strong { font-size: 14px; }
  .balance-panel button {
    display: block;
    margin: 0;
    padding: 2px;
    font-size: 6px;
    line-height: 1.2;
    text-align: center;
  }

  .controls {
    width: 100%;
    height: 88px;
    min-height: 0;
    padding: 5px 8px calc(5px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 28px 46px;
    gap: 4px;
    overflow: hidden;
  }
  .bet-area {
    width: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: 28px;
    gap: 0;
  }
  .quick-bet-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1.35fr 1fr .72fr;
    gap: 4px;
  }
  .repeat-bet,
  .all-in-bet,
  .quick-bet-actions .clear-bet {
    width: 100%;
    height: 28px;
    min-width: 0;
    padding: 0 5px;
    font-size: 7px;
    letter-spacing: .25px;
  }
  .repeat-bet span,
  .all-in-bet span { margin-right: 2px; font-size: 8px; }
  .bet-row {
    width: 100%;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
  }
  .bet-row .control-label {
    width: auto;
    font-size: 7px;
    line-height: 1.25;
    letter-spacing: .7px;
    text-align: center;
  }
  .chips {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 42px);
    justify-content: center;
    gap: 7px;
  }
  .chip { width: 42px; height: 42px; }
  .chip-250 { display: grid; }
  .chip span { font-size: 11px; }

  .action-area { width: 100%; height: 46px; }
  .deal-button {
    width: 100%;
    max-width: none;
    height: 46px;
    min-width: 0;
    padding: 0 18px;
    font-size: 10px;
  }
  .deal-button i { width: 28px; height: 28px; font-size: 17px; }
  .play-buttons { width: 100%; height: 46px; gap: 3px; }
  .game-action {
    max-width: none;
    height: 46px;
    padding: 0 6px;
    font-size: 8px;
  }

  .bet-history,
  footer { display: none; }

  dialog {
    max-height: 90dvh;
    overflow-y: auto;
  }
}

@media (max-width: 820px) and (max-height: 740px) {
  body { grid-template-rows: 26px 38px minmax(0, 1fr); }
  .topbar { height: 38px; }
  main {
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
    grid-template-rows: minmax(0, 1fr) 82px;
  }
  .controls {
    height: 82px;
    grid-template-rows: 26px 43px;
  }
  .bet-area { grid-template-rows: 26px; }
  .repeat-bet,
  .all-in-bet,
  .quick-bet-actions .clear-bet { height: 26px; }
  .chip { width: 36px; height: 36px; }
  .chips { grid-template-columns: repeat(4, 36px); gap: 6px; }
  .action-area,
  .deal-button,
  .play-buttons,
  .game-action { height: 43px; }
  .game-shell { padding-bottom: 48px; }
  .balance-panel { height: 41px; }
  .dealer-character { width: 158px; height: 82px; }
  .dealer-zone { top: 120px; }
  .spot-cards { height: 56px; }
  .spot-cards .card { width: 39px; height: 56px; }
  .spot-side { height: 25px; }
}