/* Les zones sûres restent nulles dans une WebView déjà contenue par le système. */
:root {
  --belote-safe-top: env(safe-area-inset-top, 0px);
  --belote-safe-right: env(safe-area-inset-right, 0px);
  --belote-safe-bottom: env(safe-area-inset-bottom, 0px);
  --belote-safe-left: env(safe-area-inset-left, 0px);
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { padding: var(--belote-safe-top) var(--belote-safe-right) var(--belote-safe-bottom) var(--belote-safe-left); }
button, select, input { touch-action: manipulation; }
.game-dialog {
  inset: var(--belote-safe-top) var(--belote-safe-right) var(--belote-safe-bottom) var(--belote-safe-left);
  max-width: calc(100vw - var(--belote-safe-left) - var(--belote-safe-right) - 24px);
  max-height: calc(100vh - var(--belote-safe-top) - var(--belote-safe-bottom) - 24px);
  max-height: calc(100dvh - var(--belote-safe-top) - var(--belote-safe-bottom) - 24px);
}
@media (max-width: 680px) and (max-height: 760px) and (orientation: portrait) {
  .in-room .site-header { height: 45px; }
  .in-room .phase-banner { min-height: 74px; padding: 9px 11px; }
  .in-room .phase-banner h2 { font-size: 17px; }
  .in-room .table-stage, .in-room .room:has(#playPanel:not([hidden])) .table-stage { height: 270px; }
  .in-room .table-controls { margin-top: 8px; margin-bottom: 9px; }
  .in-room .hand-heading { margin-bottom: 8px !important; }
}
/* En paysage, le tapis et la main utilisent les deux côtés de l'écran. */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 680px) {
  .shell, .in-room .shell { padding-left: 12px; padding-right: 12px; }
  .site-header, .in-room .site-header { height: 34px; }
  .brand { font-size: 12px; gap: 8px; }
  .brand-mark { width: 25px; height: 30px; font-size: 19px; }
  .account-button { min-height: 29px; padding-top: 4px; padding-bottom: 4px; }
  .header-tagline { display: none; }
  .room { padding-top: 7px; }
  .room-layout { display: block; }
  .table-play-area { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px 15px; align-items: start; }
  .phase-banner { grid-column: 1; grid-row: 1; min-height: 0; margin: 0; padding: 7px 11px; gap: 7px; }
  .phase-icon { display: none; }
  .phase-label { font-size: 8px; margin-bottom: 3px; }
  .phase-banner h2 { font-size: 15px; line-height: 1.3; }
  .phase-help { font-size: 9px; line-height: 1.3; margin-top: 3px; }
  .score-board { grid-column: 2; grid-row: 1; margin: 0; padding: 8px 7px; min-height: 42px; align-self: center; grid-template-columns: minmax(0,1fr) minmax(58px,.7fr) minmax(0,1fr); gap: 4px; }
  .score-board .team-score strong { font-size: 22px; }
  .score-board .team-score { gap: 3px; min-width: 0; }
  .score-board .team-score span { max-width: 78px; font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .score-target { min-width: 0; max-width: 72px; overflow: hidden; }
  .table-stage, .room:has(#playPanel:not([hidden])) .table-stage { grid-column: 1; grid-row: 2 / span 2; width: 100%; max-width: none; height: 244px; margin: 0; }
  .table-felt { inset: 24px 9px 21px; border-width: 6px; }
  .table-felt::after { inset: 10px; }
  .seat { width: 78px; min-height: 62px; padding: 5px; gap: 2px; }
  .seat-name { font-size: 10px; }
  .seat-team, .seat-card-count { font-size: 8px; }
  .seat .avatar { width: 23px; height: 23px; }
  .seat.occupied .avatar.has-symbol { font-size: 19px; }
  .seat[data-position="top"] { width: 142px; min-height: 40px; display: grid; grid-template-columns: 25px 1fr; grid-template-rows: auto auto; gap: 1px 7px; text-align: left; }
  .seat[data-position="top"] .avatar { grid-row: 1 / 3; }
  .seat[data-position="top"] .seat-card-count { display: none; }
  .seat[data-position="bottom"] { width: 154px; min-height: 40px; padding: 5px 8px; grid-template-columns: 25px 1fr; gap: 1px 7px; }
  .seat[data-position="bottom"] .avatar { width: 25px; height: 25px; }
  .seat-turn-label { font-size: 8px; padding: 3px 5px; }
  .seat[data-position="top"] .seat-turn-label { top: calc(100% + 12px); }
  .opponent-hand { bottom: -12px; height: 25px; }
  .seat[data-position="top"] .opponent-hand { bottom: auto; top: 8px; left: -34px; width: 60px; }
  .mini-card { width: 17px; height: 24px; border-width: 1px; left: calc(50% + (var(--back-index, 0) - (var(--back-count, 5) - 1) / 2) * 6px); }
  .turned-area { top: 53%; gap: 4px; }
  #turnedCard .game-card { width: 53px; height: 75px; }
  .turned-label, .turned-help { font-size: 9px; }
  .room[data-stage="trumpChosen"]:has(#playPanel:not([hidden])) .turned-area { top: 53%; width: 145px; gap: 3px; }
  .room[data-stage="trumpChosen"]:has(#playPanel:not([hidden])) .trump-marker { width: 60px; height: 60px; font-size: 46px; }
  .room[data-stage="trumpChosen"]:has(#playPanel:not([hidden])) .turned-help { font-size: 9px; }
  .trick-area { width: 153px; height: 136px; top: 55%; transform: translate(-50%, -50%); }
  .played-card { width: 46px; height: 64px; }
  .played-card[data-position="top"] { top: 0; left: 54px; }
  .played-card[data-position="left"] { top: 29px; left: 0; }
  .played-card[data-position="right"] { top: 29px; left: 107px; }
  .played-card[data-position="bottom"] { top: 68px; left: 54px; }
  .played-by { font-size: 7px; padding: 2px 3px; max-width: 50px; }
  .played-card[data-position="top"] .played-by { top: auto; bottom: calc(100% + 3px); left: 50%; right: auto; transform: translateX(-50%); }
  .played-card[data-position="bottom"] .played-by { top: calc(100% + 3px); bottom: auto; left: 50%; right: auto; transform: translateX(-50%); }
  .played-card[data-position="left"] .played-by { top: 50%; bottom: auto; left: auto; right: calc(100% + 4px); transform: translateY(-50%); }
  .played-card[data-position="right"] .played-by { top: 50%; bottom: auto; left: calc(100% + 4px); right: auto; transform: translateY(-50%); }
  .trick-caption { display: none; }
  .hand-section { grid-column: 2; grid-row: 2; width: 100%; max-width: none; padding: 0; margin: 0; min-width: 0; }
  .hand-heading { margin-bottom: 7px !important; }
  .hand-heading h2 { font-size: 11px; }
  .private-hand { font-size: 8px; }
  .hand-help, .play-status { display: none; }
  .hand-cards { height: 106px; padding: 0 7px; }
  .hand-cards > [role="listitem"] { flex-basis: min(70px, calc((100% + 80px) / 5)); height: 98px; margin-left: -20px; }
  .hand-cards.complete-hand > [role="listitem"], .room:has(#playPanel:not([hidden])) .hand-cards.complete-hand > .hand-slot { flex-basis: min(70px, calc((100% + 280px) / 8)); height: 98px; margin-left: -40px; }
  body[data-card-size="large"] .hand-cards { height: 121px; }
  body[data-card-size="large"] .hand-cards > [role="listitem"] { flex-basis: min(82px, calc((100% + 112px) / 5)); height: 114px; margin-left: -28px; }
  body[data-card-size="large"] .hand-cards.complete-hand > [role="listitem"], body[data-card-size="large"] .room:has(#playPanel:not([hidden])) .hand-cards.complete-hand > .hand-slot { flex-basis: min(82px, calc((100% + 336px) / 8)); height: 114px; margin-left: -48px; }
  .hand-cards > [role="listitem"]:first-child, .room:has(#playPanel:not([hidden])) .hand-cards.complete-hand > .hand-slot:first-child, body[data-card-size="large"] .hand-cards > [role="listitem"]:first-child, body[data-card-size="large"] .room:has(#playPanel:not([hidden])) .hand-cards.complete-hand > .hand-slot:first-child { margin-left: 0; }
  .table-controls { grid-column: 2; grid-row: 3; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; gap: 5px; }
  .table-controls .button { min-height: 35px; padding: 7px 5px; font-size: 10px; }
  .table-controls .continue-button { min-height: 38px; font-size: 11px; }
  .room-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; margin: 14px 0 0; max-width: none; }
  .room-sidebar .action-panel { grid-column: 1 / -1; }
  .room-sidebar #leaveButton, .room-sidebar .table-details { grid-column: 1 / -1; }
  .bidding-panel .bid-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .bid-actions .button { flex: 1 1 100px; }
  .action-panel { padding: 13px; }
  .room-sidebar .room-status { margin-bottom: 10px; }
  .game-dialog { padding: 18px; }
  .account-dialog > .dialog-heading { top: -18px; margin: -18px -18px 12px; padding: 13px 18px 11px; }
}