/* Shared small-screen corrections. Desktop boards keep their original layout. */
@media (max-width: 1050px) {
  .game-shell, .game-layout, .table-layout, .table-wrap,
  .side-panel, .game-panel, .deal-panel { min-width: 0; }
  /* Decorative rings must not turn a focused card into a scroll of the table. */
  .game-shell :is(.table, .felt-table, .water-table) { overflow: clip; }
  .human-hand[data-responsive-hand] {
    box-sizing: border-box;
    width: calc(100% - 16px);
    min-height: 108px;
    padding: 18px 8px 10px;
    gap: 0;
    align-items: flex-end;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: #ffffff65 transparent;
  }
  .human-hand[data-responsive-hand] > .playing-card {
    flex: 0 0 var(--mobile-card-width, 54px);
    width: var(--mobile-card-width, 54px);
    height: 78px;
    margin: 0 0 0 calc(var(--mobile-card-step, 28px) - var(--mobile-card-width, 54px));
    border-radius: 5px;
  }
  /* Auto margins centre short hands and resolve to zero when a long hand scrolls. */
  .human-hand[data-responsive-hand] > .playing-card:first-child { margin-left: auto; }
  .human-hand[data-responsive-hand] > .playing-card:last-child { margin-right: auto; }
  .human-hand[data-responsive-hand] .card-rank,
  .human-hand[data-responsive-hand] .card-corner { left: 5px; top: 7px; font-size: 1rem; }
  .human-hand[data-responsive-hand] .card-rank small,
  .human-hand[data-responsive-hand] .card-corner small { font-size: .6rem; }
  .human-hand[data-responsive-hand] .card-pip,
  .human-hand[data-responsive-hand] .card-center { font-size: 1.5rem; }
  .hand-scroll-hint { position: absolute; z-index: 9; bottom: 0; left: 0; width: 100%; margin: 0; text-align: center; color: #fff3d5; font-size: .6rem; pointer-events: none; }
  .hand-scroll-hint[hidden] { display: none; }

  /* President and I Doubt It: use rows instead of a tall, fixed-position table. */
  :is([data-game="president"], [data-game="i-doubt-it"]) .game-layout { min-height: 0; }
  :is([data-game="president"], [data-game="i-doubt-it"]) .table {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto minmax(160px, 1fr) auto 108px;
    gap: 8px 0;
    min-height: 440px;
    padding: 14px 8px 10px;
  }
  :is([data-game="president"], [data-game="i-doubt-it"]) .table > .seat {
    position: relative; inset: auto; transform: none; justify-self: center;
    gap: 5px; max-width: 100%; padding: 4px; align-self: start;
  }
  :is([data-game="president"], [data-game="i-doubt-it"]) .seat-west { grid-area: 1 / 1; }
  :is([data-game="president"], [data-game="i-doubt-it"]) .seat-north { grid-area: 1 / 2; }
  :is([data-game="president"], [data-game="i-doubt-it"]) .seat-east { grid-area: 1 / 3; }
  :is([data-game="president"], [data-game="i-doubt-it"]) .seat-you { grid-area: 3 / 1 / auto / -1; }
  :is([data-game="president"], [data-game="i-doubt-it"]) .seat .avatar { width: 28px; height: 28px; font-size: .85rem; flex-shrink: 0; }
  :is([data-game="president"], [data-game="i-doubt-it"]) .seat > div { display: grid; }
  :is([data-game="president"], [data-game="i-doubt-it"]) .seat strong { font-size: .65rem; }
  :is([data-game="president"], [data-game="i-doubt-it"]) .seat small { display: none; }
  :is([data-game="president"], [data-game="i-doubt-it"]) .seat b { position: static; font-size: .57rem; font-weight: 400; }
  :is([data-game="president"], [data-game="i-doubt-it"]) .pile-area {
    position: relative; inset: auto; transform: none; grid-area: 2 / 1 / auto / -1;
    align-self: center; justify-self: center; width: 100%; max-width: 340px;
  }
  :is([data-game="president"], [data-game="i-doubt-it"]) .pile-area > strong { font-size: 1.15rem; }
  :is([data-game="president"], [data-game="i-doubt-it"]) .human-hand { grid-area: 4 / 1 / auto / -1; bottom: 10px; width: 100%; }
  :is([data-game="president"], [data-game="i-doubt-it"]) .current-play { height: 84px; margin: 5px 0; }
  :is([data-game="president"], [data-game="i-doubt-it"]) .current-play .playing-card { width: 54px; height: 78px; }
  [data-game="president"] .current-play:empty::before { width: 54px; height: 78px; font-size: .85rem; }
  [data-game="i-doubt-it"] .bluff-pile { height: 95px; margin: 3px auto; }
  [data-game="i-doubt-it"] .pile-back { width: 54px; height: 78px; }
  [data-game="i-doubt-it"] .bluff-pile:empty::before { height: 78px; width: 54px; }

  /* The classic four-seat trick boards share these positions and card slots. */
  :is([data-game="hearts"], [data-game="sueca"], [data-game="spades"], [data-game="burro"], [data-game="twenty-nine"]) .felt-table { min-height: 510px; }
  :is([data-game="hearts"], [data-game="sueca"], [data-game="spades"], [data-game="burro"], [data-game="twenty-nine"]) :is(.table-layout, .table-wrap) { min-height: 0; }
  :is([data-game="hearts"], [data-game="sueca"], [data-game="spades"], [data-game="burro"], [data-game="twenty-nine"]) .seat-north { top: 12px; }
  :is([data-game="hearts"], [data-game="sueca"], [data-game="spades"], [data-game="burro"], [data-game="twenty-nine"]) .seat-south { bottom: 125px; }
  :is([data-game="hearts"], [data-game="sueca"], [data-game="spades"], [data-game="burro"], [data-game="twenty-nine"]) .trick-area { top: 42%; transform: translate(-50%, -50%) scale(.74); }
  :is([data-game="hearts"], [data-game="sueca"], [data-game="spades"], [data-game="burro"], [data-game="twenty-nine"]) .human-hand { bottom: 10px; }
  [data-game="go-fish"] .table-layout { min-height: 0; }
  [data-game="go-fish"] .water-table { min-height: 520px; }
  [data-game="go-fish"] .seat-north { top: 12px; }
  [data-game="go-fish"] .seat-south { bottom: 120px; }
  [data-game="go-fish"] .turn-status { top: 55%; }
  [data-game="go-fish"] .human-hand { bottom: 8px; }

  /* Seven Solitaire columns should fit the screen, rather than a 720px board. */
  [data-game="solitaire"] { --card-w: clamp(32px, calc((100vw - 88px) / 7), 70px); --card-h: calc(var(--card-w) * 1.45); }
  [data-game="solitaire"] .board { min-width: 0; min-height: 570px; width: 100%; padding: 22px 10px 30px; }
  [data-game="solitaire"] .top-row { gap: 12px; margin-bottom: 28px; }
  [data-game="solitaire"] :is(.pile-group, .foundation-group) { gap: 6px; }
  [data-game="solitaire"] .tableau { gap: 6px; }
  [data-game="solitaire"] .tableau-column { min-height: 430px; }
  [data-game="solitaire"] .card-corner { left: 4px; top: 5px; font-size: .9rem; }
  [data-game="solitaire"] .card-corner small { font-size: .55rem; }
  [data-game="solitaire"] .card-suit { font-size: 1.25rem; }
  [data-game="solitaire"] .pile-label { font-size: .45rem; letter-spacing: .03em; }
}

/* Short phone screens need controls beside the table, rather than far below it. */
@media (min-width: 640px) and (max-width: 1050px) and (max-height: 600px) and (orientation: landscape) {
  :is([data-game="hearts"], [data-game="sueca"], [data-game="spades"], [data-game="burro"], [data-game="twenty-nine"]) :is(.table-layout, .table-wrap) { grid-template-columns: minmax(0, 1fr) 220px; align-items: start; }
  :is([data-game="hearts"], [data-game="sueca"], [data-game="spades"], [data-game="burro"], [data-game="twenty-nine"]) .felt-table { min-height: 320px; height: max(320px, calc(100svh - 64px)); }
  :is([data-game="hearts"], [data-game="sueca"], [data-game="spades"], [data-game="burro"], [data-game="twenty-nine"]) :is(.game-panel, .deal-panel) { display: flex; flex-direction: column; padding: 10px; gap: 12px; }
  :is([data-game="hearts"], [data-game="sueca"], [data-game="spades"], [data-game="burro"], [data-game="twenty-nine"]) .game-topbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; min-height: 64px; padding: 6px 12px; }
  :is([data-game="hearts"], [data-game="sueca"], [data-game="spades"], [data-game="burro"], [data-game="twenty-nine"]) .instruction-card { padding: 12px; }
  :is([data-game="hearts"], [data-game="sueca"], [data-game="spades"], [data-game="burro"], [data-game="twenty-nine"]) .instruction-card strong { font-size: 1.15rem; }
  :is([data-game="hearts"], [data-game="sueca"], [data-game="spades"], [data-game="burro"], [data-game="twenty-nine"]) .card-stack { display: none; }
  :is([data-game="hearts"], [data-game="sueca"], [data-game="spades"], [data-game="burro"], [data-game="twenty-nine"]) :is(.avatar, .player-avatar) { width: 26px; height: 26px; font-size: .85rem; }
  :is([data-game="hearts"], [data-game="sueca"], [data-game="spades"], [data-game="burro"], [data-game="twenty-nine"]) :is(.player-seat, .seat) { padding: 3px 7px 3px 3px; }
  :is([data-game="hearts"], [data-game="sueca"], [data-game="spades"], [data-game="burro"], [data-game="twenty-nine"]) .seat-north { top: 6px; }
  :is([data-game="hearts"], [data-game="sueca"], [data-game="spades"], [data-game="burro"], [data-game="twenty-nine"]) .seat-south { bottom: 110px; }
  :is([data-game="hearts"], [data-game="sueca"], [data-game="spades"], [data-game="burro"], [data-game="twenty-nine"]) :is(.seat-west, .seat-east) { top: 6px; transform: none; }
  :is([data-game="hearts"], [data-game="sueca"], [data-game="spades"], [data-game="burro"], [data-game="twenty-nine"]) .seat-west { left: 8px; }
  :is([data-game="hearts"], [data-game="sueca"], [data-game="spades"], [data-game="burro"], [data-game="twenty-nine"]) .seat-east { right: 8px; }
  :is([data-game="hearts"], [data-game="sueca"], [data-game="spades"], [data-game="burro"], [data-game="twenty-nine"]) .trick-area {
    top: 58px; width: min(360px, calc(100% - 80px)); height: 120px;
    transform: translateX(-50%); display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding-top: 16px;
  }
  :is([data-game="hearts"], [data-game="sueca"], [data-game="spades"], [data-game="burro"], [data-game="twenty-nine"]) .played-slot { position: relative; inset: auto; transform: none; justify-self: center; width: 48px; height: 70px; }
  :is([data-game="hearts"], [data-game="sueca"], [data-game="spades"], [data-game="burro"], [data-game="twenty-nine"]) .played-slot .playing-card { width: 48px; height: 70px; }
  :is([data-game="hearts"], [data-game="sueca"], [data-game="spades"], [data-game="burro"], [data-game="twenty-nine"]) .played-slot::before { position: absolute; top: -14px; left: 0; width: 100%; font-size: .55rem; text-align: center; color: #f3e8d7; }
  :is([data-game="hearts"], [data-game="sueca"], [data-game="spades"], [data-game="burro"], [data-game="twenty-nine"]) .slot-north::before { content: "North"; }
  :is([data-game="hearts"], [data-game="sueca"], [data-game="spades"], [data-game="burro"], [data-game="twenty-nine"]) .slot-west::before { content: "West"; }
  :is([data-game="hearts"], [data-game="sueca"], [data-game="spades"], [data-game="burro"], [data-game="twenty-nine"]) .slot-east::before { content: "East"; }
  :is([data-game="hearts"], [data-game="sueca"], [data-game="spades"], [data-game="burro"], [data-game="twenty-nine"]) .slot-south::before { content: "You"; }
  :is([data-game="hearts"], [data-game="spades"], [data-game="burro"]) .heart-status { top: 94px; white-space: nowrap; font-size: .5rem; padding: 3px 6px; }
  :is([data-game="hearts"], [data-game="sueca"], [data-game="spades"], [data-game="burro"], [data-game="twenty-nine"]) .turn-message { width: 100%; bottom: 0; font-size: .65rem; }
  [data-game="sueca"] .score-team strong { font-size: 1.2rem; }
  [data-game="burro"] .draw-stock { left: 12px; top: 85px; width: 42px; height: 60px; transform: none; }
  [data-game="burro"] .trick-area { left: calc(50% + 20px); width: min(330px, calc(100% - 120px)); }
  [data-game="go-fish"] .table-layout { grid-template-columns: minmax(0, 1fr) 220px; align-items: start; }
  [data-game="go-fish"] .water-table { min-height: 320px; height: max(320px, calc(100svh - 64px)); }
  [data-game="go-fish"] .game-topbar { display: flex; flex-wrap: wrap; justify-content: space-between; min-height: 64px; padding: 6px 12px; }
  [data-game="go-fish"] .game-panel { display: flex; flex-direction: column; padding: 10px; gap: 12px; }
  [data-game="go-fish"] .instruction-card { padding: 12px; }
  [data-game="go-fish"] .instruction-card strong { font-size: 1.15rem; }
  [data-game="go-fish"] .seat-north { top: 6px; }
  [data-game="go-fish"] .avatar { width: 28px; height: 28px; }
  [data-game="go-fish"] .player-seat { padding: 3px 7px 3px 3px; }
  [data-game="go-fish"] .seat-south { bottom: 115px; left: 12px; transform: none; }
  [data-game="go-fish"] .pond { top: 35%; width: 115px; height: 115px; }
  [data-game="go-fish"] .pond-label { bottom: 18px; font-size: .48rem; }
  [data-game="go-fish"] .pond > strong { bottom: 4px; }
  [data-game="go-fish"] .deck-stack { width: 43px; height: 60px; }
  [data-game="go-fish"] .turn-status { top: 54%; left: 62%; width: 65%; font-size: .65rem; }
  [data-game="go-fish"] .turn-status p { font-size: .65rem; }
}

@media (min-width: 640px) and (max-width: 1050px) and (max-height: 600px) and (orientation: landscape) {
  :is([data-game="president"], [data-game="i-doubt-it"]) .game-layout { grid-template-columns: minmax(0, 1fr) 220px; align-items: start; }
  :is([data-game="president"], [data-game="i-doubt-it"]) .table {
    min-height: 264px; height: max(264px, calc(100svh - 56px));
    grid-template-rows: 32px minmax(80px, 1fr) 28px 96px;
    gap: 2px 0; padding-top: 6px;
  }
  :is([data-game="president"], [data-game="i-doubt-it"]) .side-panel { display: flex; padding: 10px; gap: 12px; }
  :is([data-game="president"], [data-game="i-doubt-it"]) .turn-card { padding: 12px; }
  :is([data-game="president"], [data-game="i-doubt-it"]) .turn-card > strong { margin-top: 7px; font-size: 1.15rem; }
  :is([data-game="president"], [data-game="i-doubt-it"]) .turn-card button { min-height: 36px; }
  :is([data-game="president"], [data-game="i-doubt-it"]) .game-topbar { min-height: 56px; padding: 7px 12px; gap: 8px; flex-wrap: nowrap; }
  :is([data-game="president"], [data-game="i-doubt-it"]) .game-topbar > p { order: initial; flex-basis: auto; font-size: .62rem; }
  :is([data-game="president"], [data-game="i-doubt-it"]) .pile-area > strong { font-size: 1rem; }
  [data-game="president"] .pile-label { display: none; }
  [data-game="president"] .current-play { height: 70px; }
  [data-game="president"] .current-play .playing-card { height: 64px; width: 45px; }
}

@media (min-width: 640px) and (max-width: 1050px) and (max-height: 360px) and (orientation: landscape) {
  [data-game="president"] .table { grid-template-rows: 32px minmax(90px, 1fr) 108px; }
  [data-game="president"] .seat-you { display: none; }
  [data-game="president"] .human-hand { grid-area: 3 / 1 / auto / -1; }
  [data-game="president"] .current-play { height: 60px; margin: 3px 0; }
  [data-game="president"] .current-play .playing-card { height: 58px; width: 42px; }
  [data-game="president"] .pile-area > small { font-size: .6rem; }
}

@media (max-width: 760px) {
  .site-header nav a:first-child { display: inline; }
  .game-intro { padding-top: 32px; gap: 16px; }
  .game-intro > p { font-size: .85rem; }
  .game-shell .game-topbar { gap: 10px; }
  .game-shell :is(.game-panel, .side-panel, .deal-panel) { min-width: 0; }
  .game-shell :is(.result-dialog, .reveal) { position: fixed; inset: 0; overflow-y: auto; padding: 16px; }
  .game-shell .result-card { max-height: calc(100svh - 32px); overflow-y: auto; }
}