/*
 * VA Poker — compact mobile landscape layout
 * Applies only to touch phones in landscape. Portrait remains controlled by
 * the existing rotate-device screen. Desktop/tablet layouts are unchanged.
 */

@media (max-width: 980px) and (max-height: 620px) and (hover: none) and (orientation: landscape) {
  html,
  body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
    background: #06120c;
  }

  body {
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
  }

  .poker-shell {
    width: 100%;
    min-height: 100svh;
    margin: 0;
    padding: 0;
  }

  .poker-card {
    min-height: 100svh;
    height: 100svh;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background:
      radial-gradient(circle at 50% 28%, rgba(34, 120, 71, .19), transparent 40%),
      linear-gradient(155deg, #07170f, #07130d 62%, #050d09);
    box-shadow: none;
  }

  .poker-card::before,
  .poker-header,
  .poker-footer,
  .hand-log,
  .action-copy,
  .next-hand-card,
  .reset-link,
  .table-note,
  .turn-queue {
    display: none !important;
  }

  .table-stage {
    position: relative;
    min-height: 100svh !important;
    height: 100svh !important;
    overflow: hidden !important;
    border: 0;
    border-radius: 0;
    background:
      radial-gradient(ellipse at 50% 42%, rgba(18, 92, 54, .23), transparent 43%),
      linear-gradient(150deg, rgba(10, 30, 18, .94), rgba(4, 14, 9, .98));
  }

  .felt {
    top: 45.5% !important;
    left: 50% !important;
    width: min(76vw, 720px) !important;
    height: min(61svh, 300px) !important;
    border-width: 7px !important;
    transform: translate(-50%, -50%) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 239, 175, .34),
      inset 0 -18px 34px rgba(0,0,0,.32),
      0 16px 30px rgba(0,0,0,.28) !important;
  }

  .felt::before { inset: 8px; }
  .felt-line { width: 56%; height: 47%; opacity: .46; }

  /* Keep the central table objects compact and entirely inside the felt. */
  .felt > .table-core,
  .table-core {
    top: 48% !important;
    width: min(64vw, 400px) !important;
    gap: 1px !important;
    transform: translate(-50%, -50%) scale(.72) !important;
    transform-origin: center center;
  }

  .table-core .pot-wrap {
    min-width: 126px !important;
    padding: 5px 10px 6px !important;
  }

  .table-core .pot-cluster {
    width: 112px !important;
    height: 56px !important;
    margin-bottom: -8px !important;
  }

  .table-core .pot-wrap span,
  .table-core .pot-wrap small { font-size: .5rem !important; }
  .table-core .pot-wrap strong { font-size: 1.02rem !important; }
  .table-core .street-pill { margin-top: -1px; font-size: .57rem; }

  .table-core .board {
    min-width: 186px !important;
    min-height: 52px !important;
    gap: 4px !important;
  }

  .table-logo {
    top: 49% !important;
    transform: translate(-50%, -50%) rotate(-8deg) scale(.53) !important;
    opacity: .38 !important;
  }

  /* Smaller cards keep all board, player, and hero cards visible at once. */
  .card-face,
  .card-back,
  .card-placeholder {
    width: 36px !important;
    height: 50px !important;
    border-radius: 6px !important;
  }

  .card-face .rank { top: 4px !important; left: 4px !important; font-size: .74rem !important; }
  .card-face .suit { font-size: 1.18rem !important; }
  .card-face .corner { top: auto !important; right: 4px !important; bottom: 4px !important; left: auto !important; }

  .street-tracker {
    top: 5px !important;
    padding: 3px !important;
    gap: 2px !important;
    border-radius: 999px;
    transform: translateX(-50%) scale(.86) !important;
    transform-origin: top center;
  }

  .street-step { padding: 4px 6px !important; font-size: .48rem !important; }

  /* Compact player rows around the table. */
  .seat {
    min-width: 112px !important;
    gap: 5px !important;
    padding: 6px 8px !important;
    border-radius: 12px !important;
  }

  .seat-top {
    top: 37px !important;
    left: 50% !important;
    transform: translateX(-50%) scale(.88) !important;
    transform-origin: top center;
  }

  .seat-left {
    top: 45% !important;
    left: 4px !important;
    transform: translateY(-50%) scale(.82) !important;
    transform-origin: left center;
  }

  .seat-right {
    top: 45% !important;
    right: 4px !important;
    left: auto !important;
    transform: translateY(-50%) scale(.82) !important;
    transform-origin: right center;
  }

  .avatar { width: 27px !important; height: 27px !important; font-size: .7rem !important; }
  .seat-copy strong { font-size: .68rem !important; }
  .seat-copy small { margin-top: 1px !important; font-size: .52rem !important; }
  .status-dot { width: 6px !important; height: 6px !important; box-shadow: 0 0 0 3px rgba(105,224,154,.10) !important; }

  .seat-marker {
    top: -7px !important;
    left: 7px !important;
    padding: 2px 4px !important;
    font-size: .42rem !important;
  }

  .seat-action {
    top: calc(100% + 3px) !important;
    max-width: 105px !important;
    padding: 2px 5px !important;
    font-size: .43rem !important;
  }

  .seat-cards {
    right: 4px !important;
    bottom: calc(100% + 4px) !important;
    gap: 2px !important;
  }

  .seat-top .seat-cards {
    top: calc(100% + 4px) !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  .seat-top .seat-action { top: calc(100% + 43px) !important; }

  .seat-cards .card-face,
  .seat-cards .card-back,
  .seat-cards .card-placeholder {
    width: 20px !important;
    height: 28px !important;
    border-radius: 4px !important;
  }

  .seat-cards .card-face .rank { top: 2px !important; left: 2px !important; font-size: .35rem !important; }
  .seat-cards .card-face .suit { font-size: .58rem !important; }
  .seat-cards .card-face .corner { right: 2px !important; bottom: 2px !important; }

  .deck-stack {
    top: 49% !important;
    left: 19% !important;
    width: 31px !important;
    height: 44px !important;
    transform: translateY(-50%) rotate(-7deg) scale(.78) !important;
  }

  .deck-stack span { font-size: .4rem !important; }
  .deal-flight { width: 21px !important; height: 30px !important; }
  .deal-flight.to-board { width: 27px !important; height: 37px !important; }

  /* Your seat stays clear above the compact action strip. */
  .hero-seat {
    z-index: 120 !important;
    bottom: 49px !important;
    width: min(56vw, 430px) !important;
    gap: 8px !important;
    padding: 6px 8px !important;
    border-radius: 13px !important;
  }

  .hero-name { gap: 5px !important; }
  .hero-name .avatar { width: 28px !important; height: 28px !important; font-size: .72rem !important; }
  .hero-name strong { font-size: .72rem !important; }
  .hero-name small { margin-top: 0 !important; font-size: .55rem !important; }
  .hero-action { bottom: calc(100% + 3px) !important; }
  .hole-cards { gap: 4px !important; }
  .hole-cards .card-face,
  .hole-cards .card-back,
  .hole-cards .card-placeholder { width: 36px !important; height: 50px !important; }

  /* No page chat or desktop panels on a phone table. Only a low action strip remains. */
  .game-bottom { display: block !important; padding: 0 !important; }

  .control-panel {
    position: fixed !important;
    z-index: 250 !important;
    right: 6px !important;
    bottom: 4px !important;
    left: 6px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .control-topline { display: none !important; }

  .raise-tray {
    display: none !important;
  }

  .action-buttons {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: min(100%, 680px);
    margin: 0 auto;
  }

  .primary,
  .secondary,
  .danger {
    min-height: 38px !important;
    padding: 0 5px !important;
    border-radius: 10px !important;
    font-size: clamp(.56rem, 1.7vw, .72rem) !important;
    line-height: 1 !important;
    white-space: nowrap;
  }

  .timer-card {
    position: absolute !important;
    z-index: 130 !important;
    top: 5px !important;
    right: 8px !important;
    min-width: 0 !important;
    padding: 2px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
  }

  .timer-card > span:last-child { display: none !important; }
  .timer-ring { width: 29px !important; height: 29px !important; }
  .timer-ring::before { width: 23px !important; height: 23px !important; }
  .timer-ring strong { font-size: .49rem !important; }

  .showdown-overlay { z-index: 300 !important; }
  .showdown-overlay strong { font-size: clamp(4rem, 16vw, 6rem) !important; }
  .showdown-overlay p,
  .showdown-overlay b { font-size: .68rem !important; }
  .showdown-overlay small { display: none !important; }
}

/* Extra-short devices: keep the same one-screen composition without clipping. */
@media (max-width: 780px) and (max-height: 430px) and (hover: none) and (orientation: landscape) {
  .felt { top: 44.5% !important; width: 75vw !important; height: min(58svh, 250px) !important; }
  .seat-top { top: 32px !important; transform: translateX(-50%) scale(.78) !important; }
  .seat-left, .seat-right { transform: translateY(-50%) scale(.72) !important; }
  .hero-seat { bottom: 45px !important; transform: translateX(-50%) scale(.86) !important; }
  .felt > .table-core,
  .table-core { transform: translate(-50%, -50%) scale(.62) !important; }
  .street-tracker { transform: translateX(-50%) scale(.76) !important; }
  .deck-stack { left: 18% !important; transform: translateY(-50%) rotate(-7deg) scale(.62) !important; }
  .primary, .secondary, .danger { min-height: 34px !important; font-size: .54rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  .poker-card,
  .seat,
  .hero-seat { transition: none !important; }
}