/* Phone and short-window composition of the shared game UI. */
html[data-layout="compact"] {
  --hand-card-w:clamp(46px,13vw,58px);
  --pile-card-w:56px;
  --opp-card-w:34px;
  --opp-card-h:48px;
  --opp-card-overlap:-21px;
  --hud-inset:8px;
  --hud-gap:6px;
  --card-controls-gap:6px;
  --arena-width:100%;
}
html[data-layout="compact"] .table {
  --fs:var(--font-scale);
  height:var(--play-height,100dvh);
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  grid-template-areas:"mode mode" "score loose" "arena arena" "status status";
  gap:6px;
}
html[data-layout="compact"] .left-rail,
html[data-layout="compact"] .right-rail { display:contents; }
html[data-layout="compact"] .mode-badge {
  grid-area:mode; display:grid; grid-template-columns:minmax(0,1fr) auto;
  text-align:left; padding:6px 8px; gap:2px 8px;
}
html[data-layout="compact"] .brand-mark { font-size:15px; }
html[data-layout="compact"][data-orientation="portrait"] .mode-badge {
  grid-template-areas:"brand brand" "play utilities"; gap:8px 6px;
}
html[data-layout="compact"][data-orientation="portrait"] .mode-badge .brand-mark {
  grid-area:brand; text-align:center; justify-self:stretch; font-size:17px;
}
html[data-layout="compact"] .mode-badge .mode-title { display:none; font-size:13px; margin:0; }
html[data-layout="compact"] .mode-description { display:none; }
html[data-layout="compact"] #optionsBtn {
  margin:0; min-width:40px; min-height:40px;
  width:auto !important; font-size:13px;
}
html[data-layout="compact"] .mode-utilities {
  grid-column:2; grid-row:1 / 3; margin:0; gap:4px; align-self:center;
}
html[data-layout="compact"] #optionsBtn .options-label { display:none; }
html[data-layout="compact"] #headerNewGame {
  min-height:40px; padding:6px 8px; font-size:11px; white-space:nowrap;
}
html[data-layout="compact"] #optionsBtn .options-gear { font-size:18px; }
html[data-layout="compact"] .gin-play-style { grid-column:1; grid-row:2; margin-top:3px; padding:2px; }
html[data-layout="compact"] .gin-play-style-button { min-height:36px; font-size:10px; padding:5px 6px; letter-spacing:0; }
html[data-layout="compact"][data-orientation="portrait"] .mode-utilities { grid-area:utilities; align-self:stretch; }
html[data-layout="compact"][data-orientation="portrait"] #optionsBtn {
  height:40px; min-height:40px; align-self:stretch;
}
html[data-layout="compact"][data-orientation="portrait"] .gin-play-style {
  grid-area:play; height:40px; margin:0;
}
html[data-layout="compact"][data-orientation="portrait"] .gin-play-style-button { min-height:0; }
html[data-layout="compact"] .scoreboard {
  grid-area:score; display:flex; width:100%; margin:0; padding:0; align-items:center;
  justify-content:space-around; min-height:42px;
}
html[data-layout="compact"] .scoreboard .row { border:0; padding:4px; gap:5px; font-size:12px; }
html[data-layout="compact"] .scoreboard .row b { min-width:0; font-size:20px; }
html[data-layout="compact"] .scoreboard .row.turn { display:none; }
html[data-layout="compact"] .scoreboard .player-record { display:none; }
html[data-layout="compact"] #mobileRecord .player-record { margin:0 0 12px; border-radius:8px; background:#0f2a1f; color:#e8d9a8; padding:12px; }
html[data-layout="compact"] #mobileRecord .player-record-label { font-size:12px; }
html[data-layout="compact"] .loose-plaque {
  grid-area:loose; width:auto; margin:0; padding:2px 8px;
  display:grid; grid-template-columns:auto auto; align-items:center; gap:0 6px;
  grid-template-areas:"label value" "status status";
  border:1px solid rgba(255,240,197,.25); border-radius:10px; background:rgba(6,35,22,.55);
}
html[data-layout="compact"] .lhud-label { font-size:10px; margin:0; letter-spacing:.04em; }
html[data-layout="compact"] .lhud-value { font-size:24px; }
html[data-layout="compact"] .lhud-previous { font-size:24px; }
html[data-layout="compact"] .lhud-value-wrap { padding:0; }
html[data-layout="compact"] .lhud-status { grid-column:1 / -1; margin:0; min-height:12px; }
html[data-layout="compact"] .lhud-tag { font-size:10px; font-weight:400; margin:0; line-height:1.2; }
html[data-layout="compact"] .lhud-now,
html[data-layout="compact"] .lhud-delta { display:none; }
html[data-layout="compact"] #statusBox {
  grid-area:status; width:100%; margin:0; padding:4px 8px;
  min-height:32px; font-size:13px; text-align:center;
}
html[data-layout="compact"] #statusBox .status-main { display:none; font-size:12px; }
html[data-layout="compact"] #statusBox .status-next { font-size:11px; margin:0; }
html[data-layout="compact"] .arena {
  width:100%; grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto auto minmax(min-content,1fr) auto;
  gap:6px; align-content:stretch;
}
html[data-layout="compact"] .seat.opponent #cpuPlate { grid-row:1; grid-column:1; align-self:center; }
html[data-layout="compact"] .opponent-portrait-frame { width:40px; }
html[data-layout="compact"] .opponent-copy { width:60px; }
html[data-layout="compact"] .opponent-name { font-size:18px; }
html[data-layout="compact"] .opponent-role { font-size:7px; }
/* Portrait puts the existing opponent plaque beside score and turn status. */
html[data-layout="compact"][data-orientation="portrait"] {
  --hand-card-w:clamp(56px,16vw,62.4px);
  --pile-card-w:72px;
  --opp-card-w:clamp(48px,14.5vw,60px);
  --opp-card-h:calc(var(--opp-card-w) * 1.40625);
  --opp-card-overlap:calc(var(--opp-card-w) * -.58);
}
html[data-layout="compact"][data-orientation="portrait"] .table {
  grid-template-columns:auto minmax(0,1fr) minmax(0,1.15fr);
  grid-template-rows:auto auto minmax(0,1fr);
  grid-template-areas:"mode mode mode" "gus score status" "arena arena arena";
}
html[data-layout="compact"][data-orientation="portrait"] .table > #cpuPlate {
  grid-area:gus; align-self:stretch; justify-self:start;
}
html[data-layout="compact"][data-orientation="portrait"] .scoreboard .row {
  flex-direction:column; gap:0; padding:2px;
}
html[data-layout="compact"][data-orientation="portrait"] #statusBox {
  contain:size; min-width:0; min-height:0; align-self:stretch;
  display:flex; flex-direction:column; justify-content:safe center;
  padding:4px 6px; overflow:auto; overflow-wrap:anywhere;
}
html[data-layout="compact"][data-orientation="portrait"] #statusBox .status-main {
  display:block; flex-shrink:0; font-size:calc(12px * var(--portrait-status-scale,1));
  line-height:1.15; font-weight:700; color:#fff0c5;
}
html[data-layout="compact"][data-orientation="portrait"] #statusBox .status-next {
  flex-shrink:0; font-size:calc(10px * var(--portrait-status-scale,1));
  line-height:1.15; margin-top:2px;
}
html[data-layout="compact"][data-orientation="portrait"] .arena {
  position:relative; grid-template-columns:minmax(0,1fr);
}
html[data-layout="compact"][data-orientation="portrait"] .seat.opponent #computer {
  grid-column:1 / -1; padding-bottom:var(--opp-fan-dip);
}
html[data-layout="compact"][data-orientation="portrait"] .seat.opponent #computer:not(.gin-review-lane) {
  transform:translateY(16px);
}
html[data-layout="compact"][data-orientation="portrait"] .arena:not(:has(.gin-review-lane)) {
  grid-template-rows:auto 0 minmax(min-content,1fr) minmax(0,2fr);
}
html[data-layout="compact"][data-orientation="portrait"] .arena:not(:has(.gin-review-lane)) .seat.player {
  height:100%; min-height:0;
}
html[data-layout="compact"][data-orientation="portrait"] .opponent .cardface .pip { font-size:36px; }
html[data-layout="compact"][data-orientation="portrait"] #hand .cardface .pip { font-size:40px; }
html[data-layout="compact"][data-orientation="portrait"] .pile.cardface .pip { font-size:46px; }
html[data-layout="compact"] .seat.opponent #computer {
  grid-row:1; grid-column:2; width:100%; padding-bottom:18px;
  transform:none; align-self:center;
}
html[data-layout="compact"] #mobileCoach { grid-row:2; grid-column:1 / -1; width:100%; min-width:0; }
html[data-layout="compact"] #mobileCoach:has(> [hidden]):not(:has(> :not([hidden]))) { display:none; }
html[data-layout="compact"] #mobileCoach .opponent-comment,
html[data-layout="compact"] #mobileCoach .gin-tutorial-bubble {
  position:relative; width:100%; max-width:none; max-height:clamp(96px,20dvh,176px);
  left:auto; top:auto; transform:none; padding:9px 12px; font-size:15px;
}
/* Portrait speech floats directly below Gus's plaque without resizing the board. */
html[data-layout="compact"][data-orientation="portrait"] #mobileCoach {
  position:absolute; top:0; left:0; z-index:60; pointer-events:none;
}
html[data-layout="compact"][data-orientation="portrait"] #mobileCoach > :not([hidden]) {
  pointer-events:auto;
}
html[data-layout="compact"][data-orientation="portrait"] #mobileCoach .opponent-comment,
html[data-layout="compact"][data-orientation="portrait"] #mobileCoach .gin-tutorial-bubble {
  position:fixed; right:auto; bottom:auto; width:max-content; height:auto;
  min-width:0; max-height:none; overflow-wrap:anywhere; overflow-y:auto;
}
html[data-layout="compact"][data-orientation="landscape"] .arena:has(.gin-tutorial-bubble-actions) #computer:not(.gin-review-lane) { display:none; }
html[data-layout="compact"][data-orientation="landscape"] .arena:has(.gin-tutorial-bubble-actions) .center { display:none; }
html[data-layout="compact"][data-orientation="landscape"] .arena:has(.gin-tutorial-bubble-actions) #mobileCoach { grid-row:2 / 4; align-self:start; }
html[data-layout="compact"][data-orientation="landscape"] #mobileCoach .gin-tutorial-bubble:has(.gin-tutorial-bubble-actions),
html[data-layout="compact"][data-orientation="landscape"] #mobileCoach .gin-coach-speech:has(.gin-tutorial-bubble-actions) { max-height:184px; }
html[data-layout="compact"][data-orientation="landscape"] #mobileCoach .opponent-comment:not(.gin-coach-speech) { max-height:80px; overflow-y:auto; }
html[data-layout="compact"] #mobileCoach .opponent-comment::before,
html[data-layout="compact"] #mobileCoach .gin-tutorial-bubble::before { display:none; }
html[data-layout="compact"] .gin-tutorial-more { min-height:32px; }
html[data-layout="compact"] .gin-tutorial-bubble-button { min-height:44px; font-size:13px; }
html[data-layout="compact"] .gin-tutorial-definition { font-size:14px; padding-right:46px; }
html[data-layout="compact"] .gin-tutorial-definition-close { width:44px; height:44px; }
html[data-layout="compact"] #mobileNote { width:100%; margin:8px 0; }
html[data-layout="compact"] #mobileNote summary {
  min-height:44px; padding:10px; border:1px solid #c5aa70; border-radius:8px;
  background:#f4e7c8; color:#332b20; font-size:13px; font-weight:700; cursor:pointer;
}
html[data-layout="compact"] #mobileNote .gin-strategy-note {
  position:relative; top:auto; width:100%; transform:none; margin-top:4px;
  max-height:120px; overflow:auto; padding:8px 10px; animation:none;
}
html[data-layout="compact"] #mobileNote .gin-strategy-note::before { display:none; }
html[data-layout="compact"] .center { grid-row:3; grid-column:1 / -1; width:100%; }
html[data-layout="compact"] #drawActions { grid-template-columns:1fr; }
html[data-layout="compact"] #drawStock,
html[data-layout="compact"] #drawDiscard { display:none; }
html[data-layout="compact"] .piles { gap:28px; justify-self:center; }
html[data-layout="compact"] .pilecol .label { font-size:11px; }
html[data-layout="compact"] .pile.cardface .pip { font-size:36px; }
html[data-layout="compact"] .seat.player { grid-row:4; grid-column:1 / -1; width:100%; }
html[data-layout="compact"] .player-hand-area { display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px; }
html[data-layout="compact"] #hand {
  grid-column:1 / -1; min-height:0; width:100%; flex-wrap:wrap; gap:8px 6px; padding:8px 2px 2px;
}
html[data-layout="compact"] .hand-drop-marker { transform:translate(-50%,-50%); }
html[data-layout="compact"] #topWrap.discard-drop-ready::after {
  background:rgba(255,233,138,.72);
  box-shadow:inset 0 0 0 2px #ffe98a,0 0 0 2px #ffe98a,0 4px 10px rgba(0,0,0,.35);
}
html[data-layout="compact"] #hand .cardface.selected,
html[data-layout="compact"] #hand .cardface.click-carried { transform:translateY(-6px) !important; }
html[data-layout="compact"] .group-label { font-size:11px; white-space:nowrap; }
html[data-layout="compact"] .hand-tools-wrap { width:auto; gap:4px; }
html[data-layout="compact"] .hand-tools-title { display:block; font-size:11px; color:#fff; }
html[data-layout="compact"] .hand-sort-btn { height:44px; min-width:74px; padding:4px 12px; font-size:12px; gap:3px; }
html[data-layout="compact"] .hand-sort-btn svg { width:15px; }
html[data-layout="compact"] #mobileTurnActions {
  position:absolute; width:0; height:0; min-height:0; pointer-events:none;
}
html[data-layout="compact"] #discardChoice {
  position:fixed; transform:translate(-50%,calc(-100% - 14px));
  justify-content:center; pointer-events:auto; border-radius:12px;
  max-width:calc(100vw - 16px); box-shadow:0 5px 18px rgba(0,0,0,.4);
}
html[data-layout="compact"] #discardChoice[data-side="below"] { transform:translate(-50%,8px); }
html[data-layout="compact"] #discardChoice .btn { min-width:88px; min-height:48px; padding:10px 16px; font-size:16px; }
html[data-layout="compact"] #discardChoice #discard { border-radius:12px 0 0 12px; }
html[data-layout="compact"] #discardChoice:not(.has-knock) #discard { border-radius:12px; }
html[data-layout="compact"] #discardChoice #knock { border-radius:0 12px 12px 0; }
html[data-layout="compact"][data-orientation="portrait"] .player-hand-area {
  height:100%; min-height:0; grid-template-rows:minmax(0,1fr) auto;
  grid-template-areas:"hand hand" "sort loose";
}
html[data-layout="compact"][data-orientation="portrait"] #hand { grid-area:hand; }
html[data-layout="compact"][data-orientation="portrait"] #hand:not(.gin-review-lane) {
  height:100%; min-height:0; overflow-y:auto; flex-wrap:nowrap;
  justify-content:flex-start; overscroll-behavior:contain; scrollbar-width:none;
}
html[data-layout="compact"][data-orientation="portrait"] #hand:not(.gin-review-lane)::-webkit-scrollbar { display:none; }
html[data-layout="compact"][data-orientation="portrait"] .hand-row { flex-shrink:0; }
html[data-layout="compact"][data-orientation="portrait"] .hand-tools-wrap {
  grid-area:sort; justify-self:start;
}
html[data-layout="compact"][data-orientation="portrait"] .player-hand-area > #loosePlaque {
  grid-area:loose; justify-self:end; align-self:stretch; min-width:0; width:100%; max-width:100%;
  height:44px; padding:4px 8px; gap:6px; grid-template-columns:minmax(0,1fr) minmax(0,.55fr);
  grid-template-areas:"copy value"; grid-template-rows:minmax(0,1fr); overflow:hidden;
}
html[data-layout="compact"][data-orientation="portrait"] #loosePlaque .lhud-copy {
  grid-area:copy; display:flex; flex-direction:column; justify-content:center; gap:4px; min-width:0;
  text-align:left; overflow-wrap:normal;
}
html[data-layout="compact"][data-orientation="portrait"] #loosePlaque .lhud-reel,
html[data-layout="compact"][data-orientation="portrait"] #loosePlaque .lhud-value-wrap {
  height:100%; min-width:0; min-height:0; overflow:hidden; align-self:stretch;
}
html[data-layout="compact"][data-orientation="portrait"] #loosePlaque .lhud-value,
html[data-layout="compact"][data-orientation="portrait"] #loosePlaque .lhud-previous {
  font-size:var(--lhud-portrait-value-size,32px); line-height:1; place-self:center;
  top:-3px;
}
html[data-layout="compact"][data-orientation="portrait"] #loosePlaque .lhud-label { font-size:11px; white-space:nowrap; letter-spacing:0; }
html[data-layout="compact"][data-orientation="portrait"] #loosePlaque .lhud-status {
  min-height:0; grid-column:auto; flex-direction:column; align-items:flex-start; gap:2px;
}
html[data-layout="compact"][data-orientation="portrait"] #loosePlaque .lhud-tag {
  font-size:11px; white-space:normal; letter-spacing:0; word-break:normal;
}
html[data-layout="compact"][data-orientation="portrait"] #mobileTurnActions {
  min-height:0;
}
html[data-layout="compact"][data-orientation="portrait"] #mobileTurnActions:not(:has(> :not([hidden]))) {
  display:none;
}
html[data-layout="compact"] .btn { min-height:44px; font-size:14px; touch-action:manipulation; }
html[data-layout="compact"] .cardface,
html[data-layout="compact"] .hand-sort-btn { touch-action:manipulation; }
html[data-layout="compact"] .overlay { position:fixed; padding:8px; }
html[data-layout="compact"] .modal { width:100%; }
html[data-layout="compact"] .modal-scroll { padding:14px; }
html[data-layout="compact"] .modal-close { min-width:44px; min-height:44px; }
html[data-layout="compact"] .result-modal { width:100%; padding:14px; }
html[data-layout="compact"] .result-hands { grid-template-columns:1fr; }
html[data-layout="compact"] .result-header { gap:8px; }
html[data-layout="compact"] .result-award { max-width:120px; font-size:12px; }
html[data-layout="compact"] .gin-review-hand { width:100%; max-width:100%; padding:6px; }
html[data-layout="compact"] #hand.gin-tutorial-exercise-lane,
html[data-layout="compact"] #computer.gin-tutorial-exercise-lane { flex-direction:column; align-items:stretch; }
html[data-layout="compact"] .gin-review-group { min-width:0; max-width:100%; }
html[data-layout="compact"] .gin-teaching-active #computer .gin-review-hand { max-width:100%; }
html[data-layout="compact"] .seat.opponent #computer.gin-review-lane {
  grid-column:1 / -1; grid-row:3; margin:0; padding:0; transform:none;
  min-height:0; height:100%; overflow:auto; align-items:flex-start; overscroll-behavior:contain;
}
html[data-layout="compact"] .arena:has(.gin-review-lane) {
  grid-template-rows:auto auto minmax(0,1fr) minmax(0,1fr);
}
html[data-layout="compact"] .arena:has(.gin-review-lane) .seat.player { height:100%; min-height:0; }
html[data-layout="compact"] .arena:has(.gin-review-lane) .player-hand-area {
  height:100%; min-height:0; display:block;
}
html[data-layout="compact"] .arena:has(.gin-review-lane) .hand-tools-wrap,
html[data-layout="compact"] .arena:has(.gin-review-lane) #mobileTurnActions { display:none; }
html[data-layout="compact"][data-orientation="portrait"] .arena:has(.gin-review-lane) #loosePlaque { display:none; }
html[data-layout="compact"] #hand.gin-review-lane {
  height:100%; min-height:0; overflow:auto; padding:0; align-items:flex-start; flex-wrap:nowrap;
  overscroll-behavior:contain; scrollbar-width:thin;
}
html[data-layout="compact"] #computer.gin-review-lane { flex-wrap:nowrap; }
html[data-layout="compact"] .gin-tutorial-exercise-lane > * { flex-shrink:0; }
html[data-layout="compact"] .arena:has(.gin-review-lane) #cpuPlate { grid-column:1 / -1; justify-self:start; }
html[data-layout="compact"] .gin-review-actions { gap:5px; }
html[data-layout="compact"] .gin-review-groups { gap:4px; }
html[data-layout="compact"] .gin-review-cards { flex-wrap:wrap; min-height:0; gap:3px; }
html[data-layout="compact"] #hand.gin-review-lane .cardface,
html[data-layout="compact"] #computer.gin-review-lane .cardface { margin:0; width:44px; height:62px; }
html[data-layout="compact"][data-orientation="portrait"] #hand.gin-review-lane .cardface,
html[data-layout="compact"][data-orientation="portrait"] #computer.gin-review-lane .cardface { width:56px; height:79px; }
html[data-layout="compact"] .gin-review-group-label { font-size:10px; }
html[data-layout="compact"] .round-review-bar {
  position:static; left:auto; right:auto; bottom:auto; transform:none;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  width:min(100%,280px); max-width:100%; margin:10px auto 0;
  padding:6px; gap:6px;
}
html[data-layout="compact"] .round-review-summary { display:none; }
html[data-layout="compact"] .round-review-bar .btn { min-height:44px; padding:8px 12px; font-size:13px; }

/* Portrait review has one shared overflow surface, with independently fitted hands. */
html[data-layout="compact"][data-orientation="portrait"] .arena:has(.gin-review-lane) {
  grid-template-rows:auto auto auto auto; align-content:start;
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:thin;
  scrollbar-gutter:stable;
}
html[data-layout="compact"][data-orientation="portrait"] .arena:has(.gin-review-lane) .seat.player,
html[data-layout="compact"][data-orientation="portrait"] .arena:has(.gin-review-lane) .player-hand-area {
  height:auto; align-self:start;
}
html[data-layout="compact"][data-orientation="portrait"] #hand.gin-review-lane,
html[data-layout="compact"][data-orientation="portrait"] .seat.opponent #computer.gin-review-lane {
  height:auto; min-height:0; overflow:visible; align-self:start;
}
html[data-layout="compact"][data-orientation="portrait"] .gin-review-hand { width:100%; }
html[data-layout="compact"][data-orientation="portrait"] .gin-review-hand-title {
  font-size:12px; padding-bottom:5px;
}
html[data-layout="compact"][data-orientation="portrait"] .gin-review-groups {
  padding-top:5px; align-items:flex-start;
}
html[data-layout="compact"][data-orientation="portrait"] .gin-review-group {
  flex:0 0 auto; padding:4px; max-width:100%;
}
html[data-layout="compact"][data-orientation="portrait"] .gin-review-cards { gap:3px; }
html[data-layout="compact"][data-orientation="portrait"] #hand.gin-review-lane .gin-review-cards .cardface,
html[data-layout="compact"][data-orientation="portrait"] #computer.gin-review-lane .gin-review-cards .cardface {
  width:var(--compact-review-card-w,56px); height:calc(var(--compact-review-card-w,56px) * 1.40625);
  margin:0; flex-shrink:0;
}
html[data-layout="compact"][data-orientation="portrait"] #hand.gin-review-lane .gin-review-cards .cardface .pip,
html[data-layout="compact"][data-orientation="portrait"] #computer.gin-review-lane .gin-review-cards .cardface .pip {
  font-size:calc(var(--compact-review-card-w,56px) * .55);
}
html[data-layout="compact"][data-orientation="portrait"] .gin-review-buttons { flex-wrap:wrap; justify-content:center; }

/* Wide, short phones spend width on piles and coaching, preserving hand height. */
html[data-layout="compact"][data-orientation="landscape"] .table {
  grid-template-columns:minmax(260px,1fr) minmax(0,2fr) auto;
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"mode score loose" "arena arena arena" "status status status";
}
html[data-layout="compact"][data-orientation="landscape"] .gin-play-style { grid-column:1; grid-row:2; margin:0; }
html[data-layout="compact"][data-orientation="landscape"] .mode-title { display:none; }
html[data-layout="compact"][data-orientation="landscape"] .gin-play-style-button { min-height:32px; }
html[data-layout="compact"][data-orientation="landscape"] .arena {
  grid-template-columns:minmax(140px,.8fr) minmax(0,2fr);
  grid-template-rows:auto auto minmax(0,1fr);
}
html[data-layout="compact"][data-orientation="landscape"] #cpuPlate { grid-row:1; grid-column:1; }
html[data-layout="compact"][data-orientation="landscape"] #computer:not(.gin-review-lane) { display:none; }
html[data-layout="compact"][data-orientation="landscape"] #mobileCoach { grid-row:3; grid-column:1; align-self:start; min-height:0; height:100%; }
html[data-layout="compact"][data-orientation="landscape"] #mobileCoach > :not([hidden]) { max-height:min(110px,100%); font-size:14px; }
html[data-layout="compact"][data-orientation="landscape"] .center { grid-row:2; grid-column:1; }
html[data-layout="compact"][data-orientation="landscape"] .seat.player { grid-row:1 / 4; grid-column:2; align-self:center; min-height:0; height:100%; }
html[data-layout="compact"][data-orientation="landscape"] #hand .group-cards { gap:4px; }
html[data-layout="compact"][data-orientation="landscape"] { --hand-card-w:44px; --pile-card-w:44px; }
html[data-layout="compact"][data-orientation="landscape"] #hand { gap:4px; padding-top:6px; }
html[data-layout="compact"][data-orientation="landscape"] .player-hand-area { display:grid; grid-template-columns:1fr auto; grid-template-rows:minmax(0,1fr) auto; gap:5px; min-height:0; height:100%; }
html[data-layout="compact"][data-orientation="landscape"] #hand { grid-column:1 / -1; overflow-y:auto; height:100%; justify-content:safe center; }
html[data-layout="compact"][data-orientation="landscape"] .hand-row { flex-shrink:0; }
html[data-layout="compact"][data-orientation="landscape"] .hand-tools-wrap { width:auto; }
html[data-layout="compact"][data-orientation="landscape"] #mobileTurnActions { min-width:0; }
html[data-layout="compact"][data-orientation="landscape"] #discardChoice .btn { min-width:88px; padding:10px 16px; }
html[data-layout="compact"][data-orientation="landscape"] .arena:has(.gin-review-lane) {
  grid-template-columns:minmax(140px,.8fr) minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr);
}
html[data-layout="compact"][data-orientation="landscape"] .arena:has(.gin-review-lane) #cpuPlate { grid-column:1; grid-row:1; }
html[data-layout="compact"][data-orientation="landscape"] .arena:has(.gin-review-lane) #mobileCoach { grid-column:1; grid-row:2; align-self:start; }
html[data-layout="compact"][data-orientation="landscape"] .seat.opponent #computer.gin-review-lane { grid-column:2; grid-row:1 / 3; }
html[data-layout="compact"][data-orientation="landscape"] .arena:has(.gin-review-lane) .seat.player { grid-column:3; grid-row:1 / 3; align-self:stretch; }

@media (max-height:700px) {
  html[data-layout="compact"][data-orientation="portrait"] { --pile-card-w:64px; --hand-card-w:56px; }
  html[data-layout="compact"][data-orientation="portrait"] .mode-badge { padding:3px 8px; }
  html[data-layout="compact"][data-orientation="portrait"] .brand-mark { line-height:1; }
  html[data-layout="compact"][data-orientation="portrait"] .gin-play-style { margin-top:0; }
  html[data-layout="compact"][data-orientation="portrait"] .seat.opponent #computer { padding-bottom:8px; }
  html[data-layout="compact"][data-orientation="portrait"] #mobileCoach > :not([hidden]) { max-height:88px; }
}

/* Browser bars and small phones can shorten portrait play. Keep turn controls
   docked and let the shared hand scroll, rather than shrinking the card faces. */
@media (max-height:700px) {
  html[data-layout="compact"][data-orientation="portrait"] .arena:not(:has(.gin-review-lane)) {
    grid-template-rows:auto auto minmax(0,1fr);
  }
  html[data-layout="compact"][data-orientation="portrait"] #computer:not(.gin-review-lane) { display:none; }
  html[data-layout="compact"][data-orientation="portrait"] .arena:not(:has(.gin-review-lane)) #cpuPlate { grid-row:1; }
  html[data-layout="compact"][data-orientation="portrait"] .arena:not(:has(.gin-review-lane)) #mobileCoach { grid-row:1; grid-column:1 / -1; }
  html[data-layout="compact"][data-orientation="portrait"] .arena:not(:has(.gin-review-lane)) .center { grid-row:2; }
  html[data-layout="compact"][data-orientation="portrait"] .arena:not(:has(.gin-review-lane)) .seat.player { grid-row:3; height:100%; min-height:0; }
  html[data-layout="compact"][data-orientation="portrait"] .arena:not(:has(.gin-review-lane)) .player-hand-area {
    height:100%; min-height:0; grid-template-rows:minmax(0,1fr) auto;
  }
  html[data-layout="compact"][data-orientation="portrait"] #hand:not(.gin-review-lane) {
    height:100%; overflow-y:auto; flex-wrap:nowrap; justify-content:flex-start; overscroll-behavior:contain;
  }
  html[data-layout="compact"][data-orientation="portrait"] .hand-row { flex-shrink:0; }
  html[data-layout="compact"][data-orientation="portrait"] .arena:has(.gin-tutorial-bubble-actions) #mobileCoach {
    grid-row:2; grid-column:1 / -1;
  }
}