/* Playing table. Natural page height keeps every control reachable on short screens. */
#game { --table-gold:#e5c38b; --table-ink:#f0eee2; --table-muted:#b5c8ba; }
#game .room-header { margin:18px 0 12px; align-items:center; gap:14px; }
#game .room-header h1 { font-size:clamp(20px,2.3vw,29px); letter-spacing:-.7px; }
#game .room-header .eyebrow { font-size:9px; letter-spacing:2px; margin-bottom:5px; }
#game .room-header .muted { margin:5px 0 0; font-size:11px; }
#game .room-tools { gap:8px; }
#game .room-tools button { min-height:44px; border-radius:10px; }
#game .match-top, #game #admissions-status { display:none; }
#game .host-actions:not(:has(button:not([hidden]))) { display:none; }
#game .table-arena {
  display:grid; grid-template-columns:142px minmax(0,1fr) 142px;
  grid-template-areas:'. north .' 'west felt east' '. south .';
  grid-template-rows:auto auto auto; align-items:center; gap:14px;
  width:100%; max-width:1320px; margin:12px auto 24px; min-width:0;
}
#game .table-arena>.game-surface {
  position:relative; isolation:isolate; zoom:1; width:100%; height:auto;
  min-width:0; padding:16px!important; border:7px solid #65482f;
  border-radius:30px; overflow:visible;
  background:repeating-linear-gradient(25deg,#ffffff02 0 1px,transparent 1px 4px),radial-gradient(ellipse at 45% 0%,#ffffff0b,transparent 65%),linear-gradient(140deg,var(--felt-edge,#183d2d),var(--felt,#23553d));
  box-shadow:0 2px 0 #c49e65,inset 0 0 0 1px #e5c38b55,inset 0 0 0 5px #051e1b33,0 9px 0 #30271f,0 20px 45px #0004;
}
#game .table-top { display:flex; align-items:center; justify-content:space-between; min-height:44px; padding:0 2px 9px; gap:12px; border-bottom:1px solid #d5c9a520; }
#game .table-top>span { display:block; color:#dfcda5; font-size:9px; letter-spacing:2px; font-weight:600; }
#game .phone-options { display:block; position:relative; width:auto; z-index:15; letter-spacing:0; }
#game .phone-options>summary { display:flex; align-items:center; justify-content:center; min-height:44px; padding:9px 13px; border:1px solid #b9c6ab40; border-radius:10px; background:#0b241c55; font-size:11px; color:#eee5ce; cursor:pointer; }
#game .phone-options>summary::marker { content:''; }
#game .phone-options>summary::-webkit-details-marker { display:none; }
#game .phone-options .table-top-tools { position:absolute; top:calc(100% + 6px); right:0; width:min(310px,calc(100vw - 44px)); max-height:65dvh; overflow-y:auto; overscroll-behavior:contain; display:grid; grid-template-columns:minmax(0,1fr); gap:7px; padding:12px; background:#122c25; border:1px solid #b39d6966; border-radius:14px; box-shadow:0 16px 45px #0008; }
#game .phone-options button,#game .phone-options summary { min-height:44px; width:100%; font-size:12px; }
#game .phone-options #ends { display:block; text-align:center; padding:8px; color:#bdcdbb; font-size:10px; }
#game #participant-management .participant-list,#game #room-settings[open] form { position:static; width:100%; max-width:100%; padding:10px 0 0; background:transparent; border:0; box-shadow:none; }
#game #room-settings>summary { display:flex; align-items:center; justify-content:center; border:1px solid #c9d6b844; border-radius:8px; color:#e8dcbd; cursor:pointer; }
#game #room-settings form { text-align:left; }
#game #room-settings form input,#game #room-settings form select { min-width:0; width:100%; }
#game #turn-banner { display:grid; grid-template-columns:25px minmax(0,1fr); gap:0 10px; padding:10px 12px; margin:10px 0 4px; border:1px solid #b6c9af30; border-radius:12px; background:#102e254d; color:#edf3e5; box-shadow:none; }
#game #turn-banner strong { font-size:15px; line-height:1.4; }
#game #turn-banner .turn-banner-icon { font-size:23px; }
#game #turn-banner .turn-banner-hint { font-size:11px; color:#adc5b5; }
#game #turn-banner.is-your-turn { border-color:#e5c38b88; background:linear-gradient(110deg,#e5c38b1f,#e5c38b0a); }
#game #turn-banner.is-your-turn strong,#game #turn-banner.is-your-turn .turn-banner-icon { color:#ffe1a6; }
#game #turn-banner.is-your-turn .turn-banner-hint { color:#dacba5; }
#game #notice { white-space:normal; overflow-wrap:anywhere; overflow:visible; text-overflow:clip; min-height:0; padding:3px 4px!important; margin:4px 0; font-size:11px; line-height:1.5; color:#d6e1d1; }
#game #notice:empty,#game .round-stakes:empty,#game .play-feedback:empty { display:none; }
#game .round-stakes { font-size:11px; color:#efd39a; margin:6px 0; }
#game .play-feedback { gap:5px 8px; margin:5px 0 8px; font-size:11px; color:#cbd9c8; line-height:1.5; }
#game .play-feedback>.tile,#game #notice>.tile,#game .deal-event-summary>.tile { display:flex; flex-direction:column; width:22px; height:40px; padding:2px; border-radius:4px; }
#game .play-feedback .tile .half,#game #notice>.tile .half { width:16px; height:17px; padding:2px; gap:1px; }
#game .play-feedback .tile .half+.half,#game #notice>.tile .half+.half { border-left:0; border-top:1px solid #b9ae96; margin:1px 0 0; }
#game .deal-events { flex-basis:100%; text-align:center; }
#game .deal-events summary { cursor:pointer; padding:10px; min-height:44px; color:#edce92; }
#game .deal-event-summary { padding:10px; border:1px solid #e5c38b33; border-radius:10px; }
#game .play-zone { display:grid; grid-template-columns:30px minmax(0,1fr) 30px; align-items:center; gap:8px; flex:none; min-height:0; }
#game .opponent-top { min-height:25px; margin:4px 0 0; }
#game .opponent-side { width:30px; min-width:0; }
#game .table-arena .chain-table { min-height:240px!important; background:radial-gradient(ellipse,#ffffff04,transparent 65%); border:0; border-radius:18px; box-shadow:none; padding:0; width:100%; flex:none; }
#game .play-zone #table>.table-score-row { top:8px; padding:0 4px; }
#game .play-zone #table #scores.scoreboard { width:min(100%,360px); max-width:100%; gap:12px; padding:5px 12px; }
#game #scores .score-team { grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; }
#game #scores .score-team-name { font-size:11px; color:#c9d7c6; }
#game #scores .score-team-name small { font-size:7px; color:#a4bca7; }
#game #scores .score-value { font-size:29px; color:#f3efdf; }
#game #scores .yours .score-value { color:#efcd8d; }
#game #scores .score-goal { color:#a8bda5; font-size:8px; }
#game .last-played-tile { outline:2px solid #e8c383; outline-offset:3px; }
#game .last-play-label { max-width:150px; overflow:hidden; text-overflow:ellipsis; font-size:10px; bottom:calc(100% + 6px); padding:3px 6px; background:#eddbb7; box-shadow:0 2px 5px #0003; }
#game .table-controls { grid-template-columns:minmax(0,1fr) auto; gap:10px; min-height:0; padding:10px 0 0!important; }
#game .hand-panel { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 10px; padding:12px 10px 8px!important; border:1px solid #b9c8ac26; border-radius:16px; background:linear-gradient(180deg,#09231d66,#09231d22); }
#game .hand-heading { grid-column:1; grid-row:1; margin:0; }
#game .hand-heading h2 { font-size:14px; color:#e9e6d4; }
#game .hand-heading .muted,#game .hand-panel:after { display:none; }
#game #hand-count { font-size:11px; padding:3px 6px; border-radius:6px; background:#ffffff09; color:#d9bd87; }
#game .hand-clock { grid-column:2; grid-row:1; margin:0; }
#game .hand-clock .turn-clock { min-width:0; width:auto; gap:8px; padding:5px 9px; border:1px solid #c9ad7133; border-radius:8px; background:#10281f66; }
#game .hand-clock .turn-clock span { font-size:9px; }
#game .hand-clock .turn-clock strong { font-size:20px; min-width:34px; }
#game .hand { grid-column:1/-1; grid-row:auto; display:flex; flex-wrap:nowrap; justify-content:safe center; align-items:center; gap:7px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#c6b17b66 transparent; touch-action:pan-x pan-y; min-width:0; min-height:0; margin:0!important; padding:13px 5px 8px!important; }
#game .hand button { flex:0 0 46px; width:46px; height:86px; min-width:44px; min-height:44px; margin:0; padding:0; border-radius:9px; touch-action:none; }
#game .hand .tile { width:42px; height:80px; }
#game .hand button.selected { transform:translateY(-5px); }
#game .hand button.selected .tile { outline:2px solid #f6d38f; outline-offset:2px; }
#game .turn-info { grid-column:1/-1; grid-row:auto; margin:0; text-align:center; font-size:10px; line-height:1.5; color:#b2c6b5; }
#game .action-row { grid-column:1/-1; grid-row:auto; padding:0; border:0; }
#game .action-row:not(:has(button:not([hidden]):not(:disabled))) { display:none; }
#game .action-row button,#game .table-pass { min-height:44px; }
#game .table-pass { font-size:11px; border-radius:10px; padding:8px 14px!important; }
#game .table-pass:disabled { display:none; }
#game .sleeping-pieces { min-height:35px; }
#game .table-bottom { padding-top:12px; font-size:8px; color:#afbd9e; }
#game .hand-play-actions { display:none; grid-column:1/-1; gap:8px; }
#game .hand-play-actions button { flex:1; min-width:0; min-height:44px; padding:8px; font-size:11px; white-space:normal; }
/* Player identity, team and piece count remain readable without relying on color. */
#game .table-arena .player { --team-accent:#8ed0b3; display:grid!important; grid-template-columns:40px minmax(0,1fr); align-items:center; justify-items:stretch; text-align:left!important; width:100%; min-width:0; min-height:0; padding:12px!important; gap:8px!important; border:1px solid #7fae9850!important; border-radius:17px!important; background:linear-gradient(145deg,#1d3c33,#102b24)!important; box-shadow:inset 0 1px #ffffff0b,0 7px 20px #0002!important; overflow:visible; }
#game .table-arena .player.team-enemy { --team-accent:#d4b4a1; border-color:#ae95834d!important; background:linear-gradient(145deg,#333b34,#202f29)!important; }
#game .table-arena .player.active { border-color:#ebc88a!important; outline:2px solid #e8c589!important; outline-offset:2px; box-shadow:0 0 24px #e8c58912,0 7px 20px #0002!important; }
#game .table-arena .player .avatar { display:grid!important; width:40px; height:40px; border-radius:13px; border:1px solid #ffffff18; background:linear-gradient(145deg,#ffffff12,#ffffff03); color:var(--team-accent); font-size:18px; }
#game .table-arena .player .player-avatar { position:relative; display:flex; align-items:center; justify-content:center; width:40px; min-width:40px; height:40px; margin:0; flex-wrap:nowrap; }
#game .table-arena .player .avatar-mic { position:absolute; bottom:-5px; right:-5px; width:20px; height:20px; min-height:20px; margin:0; border:2px solid #18372b; border-radius:7px; background:#112d24; font-size:10px; }
#game .table-arena .arena-seat-bottom .avatar-mic { display:none; }
#game .table-arena .player .player-copy { min-width:0; width:100%; }
#game .table-arena .player .player-name { display:block; font-size:12px!important; line-height:1.4; white-space:nowrap!important; overflow:hidden; text-overflow:ellipsis; color:#f2f0e5; }
#game .player-meta { display:flex; gap:4px 7px; flex-wrap:wrap; align-items:center; margin-top:4px; }
#game .table-arena .player .player-team-badge { display:inline-block; margin:0; padding:0; border:0; background:none; color:var(--team-accent); font-size:9px!important; white-space:nowrap; }
#game .player-piece-count { display:inline-flex; align-items:center; gap:4px; font-size:10px; color:#c8d5c7; white-space:nowrap; font-variant-numeric:tabular-nums; }
#game .player-piece-count:before { content:''; width:7px; height:13px; border:1px solid #b6c4b399; border-radius:2px; background:linear-gradient(transparent 45%,#b6c4b399 45% 53%,transparent 53%); }
#game .table-arena .player .player-detail { display:block; margin-top:4px; font-size:9px!important; line-height:1.4; color:#9eb6a7; }
#game .table-arena .player-turn-label { display:block; padding:0; margin:0 0 3px; background:none; color:#f0cc8a; font-size:8px; line-height:1.4; letter-spacing:1px; }
#game .table-arena .player-clock-slot { position:static; grid-column:1/-1; width:100%; margin:0; }
#game .table-arena .player-clock-slot:empty { display:none; }
#game .table-arena .player-clock-slot .turn-clock { flex-direction:row; justify-content:space-between; gap:8px; margin:0; padding:5px 8px; background:#091f1966; border:0; border-radius:7px; }
#game .table-arena .player-clock-slot .turn-clock strong { font-size:17px; }
#game .table-arena .player-clock-slot .turn-clock span { display:block; font-size:9px; }
#game .table-arena .arena-seat-top { width:min(100%,300px); }
#game .table-arena .arena-seat-left,#game .table-arena .arena-seat-right { grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center!important; align-self:center; }
#game .arena-seat-left .player-meta,#game .arena-seat-right .player-meta { justify-content:center; }
#game .table-arena .arena-seat-bottom { grid-column:2; width:min(100%,480px); }
#game .table-arena .player>.voice-panel { grid-column:1/-1; display:block; width:100%; margin:2px 0 0; padding:8px 0 0; border-top:1px solid #ffffff10; }
#game .player .voice-panel p { margin:0 0 6px; font-size:10px; }
#game .player .voice-actions { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:7px; }
#game .player .voice-actions button { flex:1; min-width:0; min-height:44px; padding:8px 10px; font-size:11px; border-radius:9px; }
#game .table-round-actions button { min-height:44px; }
body.table-fullscreen #game { height:100dvh; overflow-y:auto; overflow-x:hidden; padding:12px max(10px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); }
/* Tablets use the whole width for the domino chain. */
@media(max-width:1100px) {
  #game .table-arena { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-areas:'west north east' 'felt felt felt' 'south south south'; gap:12px; }
  #game .table-arena .arena-seat-top,#game .table-arena .arena-seat-left,#game .table-arena .arena-seat-right { grid-template-columns:40px minmax(0,1fr); width:100%; text-align:left!important; justify-items:stretch; align-self:stretch; }
  #game .arena-seat-left .player-meta,#game .arena-seat-right .player-meta { justify-content:flex-start; }
  #game .table-arena .arena-seat-bottom { grid-column:1/-1; }
  #game[data-player-count='2'] .table-arena { grid-template-areas:'. north .' 'felt felt felt' 'south south south'; }
  #game[data-player-count='2'] .table-arena .arena-seat-top { grid-column:1/-1; width:min(100%,300px); }
  #game .hand-play-actions { display:flex; }
}
/* Phones scroll naturally, including landscape and open settings. */
@media(max-width:700px) {
  body:has(#game[style*='block']) { height:auto; min-height:100dvh; overflow-y:auto; }
  body:has(#game[style*='block']) main { height:auto; padding:0 8px; }
  #game[style*='block'] { display:block!important; height:auto; min-height:100dvh; padding:env(safe-area-inset-top,0px) 0 max(12px,env(safe-area-inset-bottom)); }
  #game .room-header { display:grid; grid-template-columns:minmax(0,1fr) auto; margin:8px 0 12px; gap:8px; }
  #game .room-header h1 { font-size:15px; line-height:1.4; max-width:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #game .room-header .muted { font-size:10px; }
  #game .room-tools { display:flex; gap:5px; }
  #game .room-tools .connection { display:none; }
  #game .room-tools button { font-size:10px; padding:7px 9px; }
  #game .table-arena { margin:0 auto 16px!important; gap:8px 6px; grid-template-rows:auto auto auto; }
  #game .table-arena>.game-surface { padding:9px!important; border-width:4px; border-radius:22px; gap:0; display:block; height:auto; }
  #game .table-top { min-height:44px; padding-bottom:7px; }
  #game .table-top>span { font-size:8px; letter-spacing:1.3px; }
  #game .phone-options>summary { padding:8px 10px; font-size:10px; }
  #game #turn-banner { padding:7px 9px; margin:8px 0 3px; }
  #game #turn-banner strong { font-size:13px; }
  #game #turn-banner .turn-banner-hint { font-size:10px; }
  #game #notice { font-size:10px; margin:3px 0; }
  #game .play-feedback { font-size:10px; margin:3px 0; }
  #game .play-zone { display:block; min-height:0; }
  #game .opponent-top,#game .opponent-side { display:none; }
  #game .play-zone #table #scores.scoreboard { gap:8px; padding:4px 7px; }
  #game #scores .score-team-name { font-size:10px; }
  #game #scores .score-value { font-size:25px; }
  #game .table-controls { padding-top:7px!important; gap:7px; }
  #game .hand-panel { padding:9px 6px 6px!important; gap:3px 6px; }
  #game .hand { gap:4px; padding:11px 2px 7px!important; }
  #game .hand button { flex-basis:44px; width:44px; height:77px; }
  #game .hand .tile { width:40px; height:73px; }
  #game .hand-clock .turn-clock { padding:4px 7px; }
  #game .hand-clock .turn-clock span { display:none; }
  #game .hand-heading h2 { font-size:12px; }
  #game .table-bottom { display:none; }
  #game .table-arena .player { grid-template-columns:28px minmax(0,1fr); padding:8px 6px!important; gap:6px!important; border-radius:12px!important; }
  #game .table-arena .player .avatar,#game .table-arena .player .player-avatar { width:28px; min-width:28px; height:30px; font-size:14px; border-radius:9px; }
  #game .table-arena .player .avatar-mic { width:16px; height:16px; min-height:16px; font-size:8px; bottom:-5px; right:-3px; }
  #game .table-arena .player .player-name { font-size:10px!important; }
  #game .table-arena .player .player-detail { display:none; }
  #game .table-arena .player .player-team-badge { font-size:8px!important; }
  #game .player-meta { gap:3px; }
  #game .player-piece-count { font-size:9px; }
  #game .table-arena .player-turn-label { font-size:7px; letter-spacing:.3px; }
  #game .table-arena .player-clock-slot .turn-clock { padding:3px 6px; }
  #game .table-arena .player-clock-slot .turn-clock span { font-size:8px; }
  #game .table-arena .player-clock-slot .turn-clock strong { font-size:15px; }
  #game .table-arena .arena-seat-bottom { grid-template-columns:34px minmax(0,1fr); width:100%; padding:10px!important; }
  #game .table-arena .arena-seat-bottom .avatar,#game .table-arena .arena-seat-bottom .player-avatar { width:34px; height:34px; }
  #game .arena-seat-bottom .voice-panel { flex:none; margin:0; width:100%; padding:7px 0 0; }
  #game .arena-seat-bottom .voice-panel p { display:block; }
  #game .arena-seat-bottom .voice-actions button { min-height:44px; font-size:11px; }
  body.table-fullscreen #game { height:100dvh; overflow-y:auto; padding:8px; }
}
@media(max-width:380px) {
  #game .table-arena .player:not(.arena-seat-bottom) { grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center!important; }
  #game .player:not(.arena-seat-bottom) .player-meta { justify-content:center; }
  #game .table-top>span { font-size:7px; letter-spacing:.7px; }
  #game .room-tools button { padding-inline:6px; }
}
@media(pointer:coarse) { #game .hand-play-actions { display:flex; } }
@media(prefers-reduced-motion:reduce) { #game .player { transition:none!important; } }
#game .chain-tile.last-played-tile { overflow:visible; }
@media(max-width:700px) {
  #game .table-arena .player:not(.arena-seat-bottom) .player-name { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:normal!important; overflow-wrap:anywhere; min-height:28px; }
}
/* Miniatures have independent tracks and pip sizes; full-size tile rules must not stretch them. */
#game .tile.mini-domino {
  --mini-width:24px; --mini-height:44px; --mini-pip:3px; --mini-padding:2px; --mini-gap:1px;
  display:grid!important; grid-template-columns:minmax(0,1fr); grid-template-rows:repeat(2,minmax(0,1fr));
  width:var(--mini-width)!important; height:var(--mini-height)!important;
  min-width:0; min-height:0; flex:0 0 var(--mini-width)!important;
  align-items:stretch; justify-items:stretch; padding:var(--mini-padding)!important; gap:0!important;
  overflow:hidden; box-sizing:border-box; border-radius:4px;
}
#game .tile.mini-domino>.half {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr));
  width:100%!important; height:100%!important; min-width:0; min-height:0; aspect-ratio:auto;
  margin:0!important; padding:var(--mini-padding)!important; gap:var(--mini-gap)!important;
  border:0!important; align-items:center; justify-items:center; overflow:hidden; box-sizing:border-box;
}
#game .tile.mini-domino>.half+.half { border-left:0!important; border-top:1px solid color-mix(in srgb,currentColor 40%,transparent)!important; }
#game .tile.mini-domino>.half>.pip {
  --pip-size:var(--mini-pip);
  width:var(--mini-pip)!important; height:var(--mini-pip)!important;
  min-width:var(--mini-pip)!important; min-height:var(--mini-pip)!important;
  max-width:var(--mini-pip)!important; max-height:var(--mini-pip)!important;
  aspect-ratio:1; box-sizing:border-box;
}
#game.compact-table .tile.mini-domino { --mini-width:18px; --mini-height:26px; --mini-pip:2px; --mini-padding:1px; --mini-gap:.5px; }
#game .chain-tile.last-played-tile { overflow:hidden; }
#game .chain-canvas>.last-play-label { z-index:3; pointer-events:none; }