/* Compact playing surface: the board gets the remaining viewport, the hand stays visible. */
body.compact-playing { height:100dvh; overflow:hidden; overscroll-behavior:none; }
body.compact-playing>.topbar,body.compact-playing footer { display:none; }
body.compact-playing main { width:100%; height:100dvh; max-width:none; margin:0; padding:0; }
#game.compact-table {
  display:flex!important; flex-direction:column; gap:5px;
  width:100%; height:var(--game-height,100dvh)!important; min-height:0!important;
  padding:max(5px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));
  margin:0; overflow:hidden; box-sizing:border-box;
}
#game.compact-table .room-header { flex:none; display:block; height:24px; min-height:0; margin:0; }
#game.compact-table .room-header>div:first-child { display:flex; align-items:center; justify-content:space-between; gap:10px; height:24px; }
#game.compact-table .room-header .eyebrow { display:none; }
#game.compact-table .room-header h1 { min-width:0; max-width:70%; margin:0; font-size:12px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#game.compact-table .room-header .muted { flex:none; font-size:9px; margin:0; }
#game.compact-table .table-arena {
  flex:1; min-height:0; width:100%; max-width:1440px;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-areas:'west north east' 'felt felt felt' 'south south south';
  grid-template-rows:60px minmax(0,1fr) 46px; gap:6px; margin:0 auto!important;
}
#game.compact-table[data-player-count='2'] .table-arena { grid-template-areas:'. north .' 'felt felt felt' 'south south south'; }
#game.compact-table[data-player-count='2'] .table-arena .arena-seat-top { grid-column:1/-1; width:min(100%,310px); }
#game.compact-table .table-arena>.game-surface {
  height:100%; min-height:0; display:flex; flex-direction:column; gap:3px;
  padding:5px!important; border-width:3px; border-radius:17px; overflow:visible;
  box-shadow:0 2px 0 #b89662,inset 0 0 0 1px #d6bb7b30,0 5px 12px #0002;
}
#game.compact-table .table-top { flex:none; display:flex; align-items:center; justify-content:flex-end; min-height:44px; height:44px; gap:4px; margin:0; padding:0; border:0; }
#game.compact-table .table-top>span { display:none; }
#game .board-zoom { display:none; }
#game.compact-table .board-zoom { flex:1; display:flex; align-items:center; justify-content:flex-start; gap:3px; min-width:0; margin:0; padding:0; }
#game.compact-table .board-zoom button { min-height:44px; height:44px; min-width:44px; margin:0; padding:5px 8px; font-size:18px; border-radius:9px; background:#0d292052; border-color:#b8c5aa30; }
#game.compact-table .board-zoom #zoom-reset { min-width:62px; font-size:10px; letter-spacing:0; }
#game.compact-table .phone-options { flex:none; width:44px; height:44px; }
#game.compact-table .phone-options>summary { min-height:44px; width:44px; padding:0; font-size:0; }
#game.compact-table .phone-options>summary:before { content:'☰'; font-size:19px; }
#game.compact-table #fullscreen-toggle { flex:none; width:44px; min-width:44px; height:44px; min-height:44px; padding:0; border:1px solid #b8c5aa40; border-radius:9px; background:#0d292052; font-size:0; }
#game.compact-table #fullscreen-toggle:before { content:'⛶'; font-size:24px; color:#f0d5a0; }
#game.compact-table #fullscreen-toggle[aria-pressed='true']:before { content:'↙'; font-size:23px; }
#game.compact-table .phone-options .table-top-tools { top:48px; right:0; width:min(310px,calc(100vw - 36px)); max-height:calc(var(--game-height,100dvh) - 130px); z-index:30; }
#game.compact-table .phone-options .room-tools { display:grid; grid-template-columns:1fr; width:100%; gap:7px; }
#game.compact-table .phone-options .room-tools button { width:100%; max-width:none!important; min-height:44px; font-size:12px; }
#game.compact-table .phone-options .connection { display:block; font-size:10px; line-height:1.5; }
#game.compact-table #turn-banner { flex:none; display:flex; align-items:center; gap:7px; min-height:28px; height:auto; margin:0; padding:4px 8px; border-radius:8px; }
#game.compact-table #turn-banner .turn-banner-icon { font-size:17px; }
#game.compact-table #turn-banner strong { min-width:0; font-size:12px; line-height:1.4; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#game.compact-table #turn-banner .turn-banner-hint { display:none; }
#game.compact-table #notice { flex:none; max-height:56px; min-height:0; margin:0; padding:2px 4px!important; overflow:auto; font-size:10px; line-height:1.4; }
#game.compact-table[data-phase='preparing'] #notice { max-height:82px; }
#game.compact-table .round-stakes { flex:none; margin:0; padding-inline:4px; font-size:10px; line-height:1.4; }
#game.compact-table .play-feedback { flex:none; display:flex; align-items:center; flex-wrap:nowrap; gap:5px; height:27px; min-width:0; margin:0; padding:0 5px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; white-space:nowrap; font-size:9px; }
#game.compact-table .play-feedback>strong { overflow:hidden; text-overflow:ellipsis; }
#game.compact-table .play-feedback>.tile { width:16px; height:25px; flex:0 0 16px; padding:1px; border-radius:3px; }
#game.compact-table .play-feedback .tile .half { width:12px; height:10px; padding:1px; gap:1px; }
#game.compact-table .play-feedback .tile .half+.half { margin:1px 0 0; }
#game.compact-table .play-zone { position:relative; flex:1; display:block; width:100%; min-height:0; }
#game.compact-table .opponent-top,#game.compact-table .opponent-side { display:none; }
#game.compact-table .table-arena .chain-table { width:100%; height:100%!important; min-height:0!important; margin:0; padding:0; overflow:hidden; border-radius:10px; }
#game.compact-table .play-zone #table>.table-score-row { top:3px; height:43px; padding:0 6px; z-index:3; }
#game.compact-table .play-zone #table #scores.scoreboard { width:min(100%,340px); max-width:100%; gap:6px; padding:2px 5px; }
#game.compact-table #scores .score-team-name { font-size:9px; }
#game.compact-table #scores .score-team-name small { font-size:6px; }
#game.compact-table #scores .score-value { font-size:22px; }
#game.compact-table #scores .score-goal { font-size:7px; }
#game.compact-table .board-viewport { position:absolute; inset:50px 0 0; overflow:auto; overscroll-behavior:contain; touch-action:pan-x pan-y; scrollbar-width:thin; scrollbar-color:#d5bc7f60 transparent; }
#game.compact-table .board-pan { position:relative; min-width:100%; min-height:100%; }
#game.compact-table .last-play-label { display:none; }
#game.compact-table .last-played-tile { outline-width:2px; outline-offset:2px; }
#game.compact-table .table-controls { flex:none; display:grid!important; grid-template-columns:minmax(0,1fr) auto; gap:3px; margin:0; padding:0!important; }
#game.compact-table .hand-panel { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 5px; padding:5px 4px 3px!important; border-radius:11px; }
#game.compact-table .hand-heading h2 { font-size:11px; }
#game.compact-table #hand-count { font-size:10px; padding:1px 4px; }
#game.compact-table .hand-clock .turn-clock { gap:4px; min-height:23px; padding:1px 6px; }
#game.compact-table .hand-clock .turn-clock strong { font-size:17px; min-width:30px; }
#game.compact-table .hand-clock .turn-clock span { display:none; }
#game.compact-table .hand { gap:2px; padding:7px 2px 3px!important; margin:0!important; scrollbar-width:none; }
#game.compact-table .hand::-webkit-scrollbar,#game.compact-table .play-feedback::-webkit-scrollbar { display:none; }
#game.compact-table .hand button { flex:0 0 44px; width:44px; height:66px; min-height:44px; min-width:44px; padding:0; }
#game.compact-table .hand .tile { width:36px; height:62px; border-radius:6px; }
#game.compact-table .hand button.selected { transform:translateY(-3px); }
#game.compact-table .hand button.selected .tile { outline-offset:1px; }
#game.compact-table .hand-play-actions { display:flex; align-items:center; justify-content:center; grid-column:1/-1; min-height:44px; gap:5px; }
#game.compact-table .hand-play-actions button { min-height:44px; font-size:10px; padding:5px; border-radius:8px; }
#game.compact-table .hand-play-hint { color:#bfd0bd; font-size:10px; text-align:center; line-height:1.4; }
#game.compact-table .turn-info { display:none; }
#game.compact-table .action-row { grid-column:1/-1; }
#game.compact-table .action-row button { min-height:44px; }
#game.compact-table .table-pass { min-width:110px; min-height:44px; padding:5px 9px!important; font-size:10px; }
#game.compact-table .sleeping-pieces { min-height:0; gap:4px; }
#game.compact-table .sleeping-stack .piece-back { width:12px; height:21px; }
#game.compact-table .sleeping-caption { font-size:7px; }
#game.compact-table .table-bottom { display:none; }
#game.compact-table .table-arena .player { grid-template-columns:25px minmax(0,1fr); align-items:center; justify-items:stretch; width:100%; height:100%; min-height:0; padding:5px 6px!important; gap:5px!important; border-radius:10px!important; box-shadow:inset 0 1px #ffffff0a!important; text-align:left!important; }
#game.compact-table .table-arena .player .avatar,#game.compact-table .table-arena .player .player-avatar { width:25px; min-width:25px; height:27px; border-radius:8px; font-size:13px; }
#game.compact-table .table-arena .player .player-name { display:block; min-height:0; font-size:10px!important; white-space:nowrap!important; line-height:1.3; }
#game.compact-table .player-meta { display:flex; justify-content:flex-start; flex-wrap:wrap; margin-top:3px; gap:2px 5px; }
#game.compact-table .table-arena .player .player-team-badge { display:inline; font-size:7px!important; }
#game.compact-table .player-piece-count { font-size:9px; }
#game.compact-table .player-piece-count:before { width:5px; height:10px; }
#game.compact-table .table-arena .player .player-detail { display:none; }
#game.compact-table .table-arena .player-turn-label { display:none; }
#game.compact-table .table-arena .player.active { outline-width:1px!important; outline-offset:0; border-color:#e7c68b!important; background:linear-gradient(120deg,#6b60362b,#15382b)!important; }
#game.compact-table .table-arena .player-clock-slot { position:absolute; bottom:4px; right:5px; width:auto; }
#game.compact-table .table-arena .player-clock-slot .turn-clock { min-height:0; padding:1px 3px; background:#10281e; }
#game.compact-table .table-arena .player-clock-slot .turn-clock span { display:none; }
#game.compact-table .table-arena .player-clock-slot .turn-clock strong { font-size:11px; }
#game.compact-table .table-arena .arena-seat-bottom { grid-column:1/-1; display:flex!important; align-items:center; width:100%; max-width:none; min-height:44px; padding:2px 6px!important; gap:6px!important; }
#game.compact-table .arena-seat-bottom .player-copy { flex:1; min-width:0; }
#game.compact-table .arena-seat-bottom .player-meta { margin-top:2px; }
#game.compact-table .arena-seat-bottom .player-avatar,#game.compact-table .arena-seat-bottom>.avatar { display:none!important; }
#game.compact-table .table-arena .arena-seat-bottom>.voice-panel { flex:0 1 190px; width:auto; min-width:0; margin:0; padding:0; border:0; }
#game.compact-table .player .voice-panel>div:first-child,#game.compact-table .player #voice-members { display:none; }
#game.compact-table .arena-seat-bottom .voice-actions { gap:4px; justify-content:flex-end; flex-wrap:nowrap; }
#game.compact-table .arena-seat-bottom .voice-actions button { flex:0 1 auto; min-width:0; min-height:44px; font-size:10px; padding:5px 9px; margin:0; white-space:nowrap; }
#game.compact-table .pass-effect { top:50%; left:50%; max-width:90%; z-index:8; }
#game.compact-table .knock-fist { font-size:35px; animation-duration:.35s; }
#game.compact-table .knock-ripple { width:45px; height:20px; border-width:2px; animation-duration:.4s; }
#game.compact-table .knock-caption { padding:6px 10px; font-size:10px; border-radius:9px; }
#game.compact-table .knock-caption small { display:block; font-size:9px; }
#game.compact-table .shuffling-table .chain-tile { animation-duration:2.4s; }
body.table-fullscreen #game.compact-table { position:fixed; inset:0; z-index:1000; overflow:hidden; }
body.table-fullscreen #game.compact-table .room-header { display:none; }
/* Landscape keeps the hand beside the board instead of below the fold. */
@media(max-height:600px) and (orientation:landscape) {
  #game.compact-table .table-arena { grid-template-rows:48px minmax(0,1fr) 44px; gap:4px; }
  #game.compact-table .table-arena>.game-surface { display:grid; grid-template-columns:minmax(0,1fr) minmax(205px,30%); grid-template-rows:44px 27px minmax(0,1fr); gap:3px 6px; }
  #game.compact-table .table-top { grid-column:1/-1; grid-row:1; }
  #game.compact-table #turn-banner { grid-column:1; grid-row:2; }
  #game.compact-table .play-feedback { grid-column:2; grid-row:2; }
  #game.compact-table #notice,#game.compact-table .round-stakes { grid-column:1; grid-row:2; max-height:27px; background:var(--felt,#204d38); z-index:2; }
  #game.compact-table .play-zone { grid-column:1; grid-row:3; height:100%; }
  #game.compact-table .table-controls { grid-column:2; grid-row:3; display:flex!important; flex-direction:column; justify-content:flex-start; min-height:0; overflow-y:auto; }
  #game.compact-table .hand-panel { width:100%; padding:4px!important; }
  #game.compact-table .hand { justify-content:flex-start; }
  #game.compact-table .hand button { height:60px; }
  #game.compact-table .hand .tile { height:56px; width:32px; }
  #game.compact-table .table-arena .player .avatar { width:23px; height:25px; }
}
@media(prefers-reduced-motion:reduce) { #game.compact-table .shuffling-table .chain-tile,#game.compact-table .knock-fist,#game.compact-table .knock-ripple { animation:none!important; } }
#game.compact-table .pass-effect { flex-direction:row; align-items:center; gap:7px; }
#game.compact-table .knock-impact { width:44px; height:44px; flex:0 0 44px; }
#game.compact-table .knock-fist { font-size:29px; line-height:1; animation:phone-table-knock .35s ease-out; }
#game.compact-table .knock-caption { max-width:min(220px,60vw); font-size:10px; line-height:1.4; padding:6px 9px; }
#game.compact-table .knock-caption small { margin-top:2px; }
@keyframes phone-table-knock { 0%{transform:translateY(-8px)}45%{transform:translateY(3px)}100%{transform:translateY(0)} }
#game.compact-table .chain-table { --board-score-space:50px; }
#game.compact-table .board-viewport { top:var(--board-score-space,50px); }
#game.compact-table .table-top>.hand-play-actions { flex:1; width:auto; min-width:0; margin:0; }
@media(max-height:600px) and (orientation:landscape) {
  #game.compact-table .chain-table { --board-score-space:30px; }
  #game.compact-table .play-zone #table>.table-score-row { height:27px; top:0; }
  #game.compact-table #scores .score-team-name { font-size:8px; }
  #game.compact-table #scores .score-team-name small { display:none; }
  #game.compact-table #scores .score-value { font-size:17px; }
  #game.compact-table #scores .score-goal { font-size:6px; }
  #game.compact-table #scores .score-goal strong { font-size:12px; }
  #game.compact-table .table-controls { overflow-y:auto; scrollbar-width:thin; scrollbar-color:#c5ad7866 transparent; }
  #game.compact-table .hand { padding:3px 2px!important; }
  #game.compact-table .hand button { height:48px; }
  #game.compact-table .hand .tile { height:46px; width:28px; }
}

#game.compact-table .hand-play-actions>.table-pass{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-width:0;min-height:44px;margin:0;background:#e9c17a;color:#17392a;border:1px solid #f5dca3;font-weight:700}
#game.compact-table .hand-play-actions>.table-pass small{color:inherit}