/* Compact mechanics, using the same felt, paper, suit colors and type as the table. */
.compact-face,.compact-shared{display:none}
html[data-compact-table] body{overflow:auto}
html[data-compact-table] .app{height:auto;min-height:100dvh;max-height:none;overflow:visible;padding:0 12px 8px;gap:0}
html[data-compact-table] .top{height:48px;min-height:48px;margin:0 -12px 6px;padding:0 12px;gap:8px;position:relative}
html[data-compact-table] .brand{gap:6px;min-width:0}
html[data-compact-table] .brandmark{width:24px;height:28px;font-size:24px}
html[data-compact-table] .brand h1{font-size:20px;line-height:24px;white-space:nowrap}
html[data-compact-table] .brand p,html[data-compact-table] .table-footer{display:none}
html[data-compact-table] .table-nav{gap:8px;margin-left:auto}
html[data-compact-table] .nav-round{font-size:11px;line-height:15px;white-space:nowrap}
html[data-compact-table] .nav-link{min-width:44px;min-height:44px;padding:4px;font-size:12px}
html[data-compact-table] .table{display:flex;flex-direction:column;gap:6px;height:auto;min-height:0;overflow:visible;padding:0;margin:0}
html[data-compact-table] .table-center{display:none!important}
html[data-compact-table] .compact-shared{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:6px;order:0;min-height:76px}
html[data-compact-table] .compact-shared .turn-banner{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:5px;position:static;min-height:76px;height:auto;padding:7px 10px;margin:0;border-radius:6px}
html[data-compact-table] .turn-copy{min-width:0}
html[data-compact-table] .turn-banner h2{font-size:15px;line-height:19px;margin:0}
html[data-compact-table] .turn-owner{font-size:9px;line-height:12px;margin:0}
html[data-compact-table] .turn-steps{gap:5px;margin:0;padding:0}
html[data-compact-table] .turn-steps li{font-size:10px;min-height:18px;padding:1px 4px;gap:3px}
html[data-compact-table] .step-marker{width:15px;height:15px;line-height:13px;font-size:9px}
html[data-compact-table] .compact-shared .pilearea{display:grid;grid-template-columns:54px minmax(0,1fr);grid-template-rows:20px 1fr;gap:0 7px;position:relative;width:auto;height:76px;min-height:0;margin:0;padding:4px 6px;background:#415e49;border:1px solid #87957c;border-radius:6px;color:var(--felt-ink);overflow:visible}
html[data-compact-table] .pilearea .piles-title{grid-column:2;grid-row:1;font:600 12px/18px 'DM Sans',system-ui,sans-serif;margin:0;white-space:nowrap}
html[data-compact-table] .pilearea .pile.discard{display:block;position:relative;grid-column:1;grid-row:1/3;align-self:start;min-width:0;width:54px;margin:0;padding:0;transform:none}
html[data-compact-table] #discard{position:relative;width:48px;height:52px;min-width:48px;min-height:52px;max-height:none;padding:0;margin:0;transform:none;box-shadow:0 2px 0 #273b2d}
html[data-compact-table] #discard>.card{position:absolute;inset:0;width:100%;height:100%;margin:0;transform:none}
html[data-compact-table] .pilearea .pilelabel{position:static;margin:3px 0 0;padding:0;font-size:10px;line-height:12px;min-height:12px;color:var(--felt-ink);text-align:center;white-space:nowrap;transform:none}
html[data-compact-table] .discard-state{display:none}
html[data-compact-table] .pilearea :is(.draw-action,.pickup-action){grid-column:2;grid-row:2;position:static;width:100%;min-height:44px;height:44px;align-self:center;margin:0;padding:4px;font-size:12px;line-height:15px}
html[data-compact-table] .pilearea:has(.pickup-action:not([hidden])) .draw-action{display:none}
html[data-compact-table] .pilearea .pickup-action[hidden]{display:none}
html[data-compact-table] .pilearea .discard-quantity{display:inline;color:var(--felt-ink)}
html[data-compact-table] .player-tabs{display:none;order:1;margin:0;gap:4px;padding:0;min-height:46px;grid-template-columns:repeat(4,minmax(0,1fr))}
html[data-compact-table][data-single-board] .player-tabs{display:grid}
html[data-compact-table] .player-tabs button{min-width:0;min-height:46px;height:auto;padding:3px 4px;border-radius:4px;font-size:12px;line-height:16px;overflow:hidden}
html[data-compact-table] .player-tabs :is(.book-summary,.cumulative-score){display:none}
html[data-compact-table] .player-tabs .player-tab-identity{display:block}
html[data-compact-table] .player-tabs small{display:block;font-size:10px;line-height:13px}
html[data-compact-table] .player-tabs .phase-icon{display:none}
html[data-compact-table] .playing{display:grid;order:2;grid-template-columns:repeat(var(--compact-opponents),minmax(0,1fr));grid-template-rows:auto auto;gap:6px;flex:none;min-height:0;height:auto;width:100%;overflow:visible;margin:0;padding:0}
html[data-compact-table] #otherPlayers{display:contents}
html[data-compact-table] .playing>.player-panel[data-panel=you]{grid-column:1/-1;grid-row:2}
html[data-compact-table] .playing .player-panel[data-panel]{display:grid;grid-template-rows:32px minmax(44px,1fr);gap:4px;position:relative;inset:auto;width:100%;height:auto;min-height:0;max-height:none;padding:5px 6px 6px;margin:0;background:#ecebdc;border:1px solid #c4ccba;border-radius:6px;color:#304c37;overflow:visible;box-shadow:0 2px 4px #2033271c;transform:none}
html[data-compact-table] .playing .player-panel[data-panel]>.player-board-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;height:32px;min-height:32px;gap:4px;margin:0;padding:0;grid-template:none;color:#304c37;overflow:hidden}
html[data-compact-table] .playing .player-panel[data-panel] .player-board-header>.player-identity-card{display:flex;align-items:center;gap:5px;flex:0 1 auto;width:auto;max-width:100%;min-height:28px;margin:0;padding:0;background:none;border-radius:0}
html[data-compact-table] .playing .player-panel[data-panel] .player-avatar{width:28px;height:28px;border-radius:4px}
html[data-compact-table] .playing .player-panel[data-panel] .player-name{font-size:12px;line-height:15px;max-width:12ch;color:#304c37}
html[data-compact-table] .player-identity-copy{gap:0;flex-direction:column;align-items:flex-start;padding:0}
html[data-compact-table] .player-board-header .cumulative-score{font-size:10px;line-height:12px}
html[data-compact-table] .player-board-header .score-value{font-size:10px}
html[data-compact-table] .player-board-header .compact-standing{display:none}
html[data-compact-table] .playing .player-panel[data-panel] .player-board-header>.player-board-status{display:flex;align-items:flex-end;flex-direction:column;gap:0;font-size:10px;line-height:13px;flex:none;max-width:50%;margin:0;padding:0}
html[data-compact-table] .playing .player-panel[data-panel] .player-board-header>:is(.player-book-status,#yourBooks){display:none}
html[data-compact-table] .player-board-header .phase-icon{width:12px;height:13px}
html[data-compact-table] .player-board-header :is(.turn-indicator,#yourBoardDetail){font-size:9px;line-height:12px;margin:0;padding:0}
html[data-compact-table] .player-board-header .turn-indicator{padding:0 3px}
html[data-compact-table] .playing :is(.board-expand,.own-board-pager,.range-pager){display:none!important}
html[data-compact-table] .playing :is(#melds,.public-sets){display:grid;grid-template-columns:repeat(var(--compact-opponent-columns),minmax(0,1fr));grid-auto-rows:44px;gap:4px;align-items:stretch;align-content:start;justify-content:stretch;min-width:0;min-height:44px;width:100%;height:auto;max-height:none;margin:0;padding:0;overflow:visible}
html[data-compact-table] .playing #melds{grid-template-columns:repeat(var(--compact-board-columns),minmax(0,1fr))}
html[data-compact-table] .playing .meld-tile{display:grid;grid-template-columns:1fr auto;grid-template-rows:21px 15px;align-content:center;gap:0 2px;position:relative;width:100%;height:44px;min-height:44px;min-width:0;max-width:none;margin:0;padding:3px 5px;background:#fcf8ee;color:#304c37;border:1px solid #9da791;border-radius:4px;box-shadow:1px 2px 0 #a4ae99;overflow:hidden;transform:none}
html[data-compact-table] .meld-tile .meld-top{display:block;position:static;margin:0;padding:0;grid-column:1;grid-row:1}
html[data-compact-table] .meld-tile .meld-rank{display:block;font-size:19px;line-height:21px;text-align:left}
html[data-compact-table] .meld-tile .meld-caption{display:block;grid-column:1;grid-row:2;position:static;margin:0;padding:0;white-space:nowrap;font:600 9px/15px 'DM Sans',system-ui,sans-serif;letter-spacing:0;background:none;text-transform:none;text-align:left;color:#50634b}
html[data-compact-table] .meld-caption svg{display:none}
html[data-compact-table] .compact-meld-count{grid-column:2;grid-row:1;align-self:center;font:700 12px/18px 'DM Sans',system-ui,sans-serif;color:#304c37}
html[data-compact-table] .compact-meld-progress{grid-column:2;grid-row:2;font:500 8px/15px 'DM Sans',system-ui,sans-serif;white-space:nowrap;text-align:right;color:#50634b}
html[data-compact-table] .meld-tile :is(.pip-progress,.meld-progress,.status-corner,.book-ink-stamp,.book-stamp,.target-caption,.tile-art,.book-stamp-svg){display:none!important}
html[data-compact-table] .meld-tile.completed{border-color:#62765f;background:#e2e8d7}
html[data-compact-table] .meld-tile.dirty{border-color:#b38a61}
html[data-compact-table] .meld-tile.completed.dirty{background:#eee0c8}
html[data-compact-table] .playing .meld-tile.valid-target{outline:2px solid #ae593e;outline-offset:-3px}
html[data-compact-table] .playing .meld-tile.chosen-target{background:#efdca8;outline:3px solid #ae593e;outline-offset:-3px}
html[data-compact-table] .opening-empty{grid-column:1/-1;grid-row:1/span 2;min-height:80px;margin:0;padding:8px;overflow:visible}
html[data-compact-table] .opening-empty .opening-title{font-size:13px;line-height:18px}
html[data-compact-table] .opening-metrics{font-size:11px}
html[data-compact-table][data-single-board] .playing{display:block;height:calc(42px + var(--compact-board-rows)*48px);min-height:138px}
html[data-compact-table][data-single-board] .playing .player-panel[data-panel]{display:none;height:100%;grid-template-rows:32px minmax(0,1fr);grid-column:auto;grid-row:auto}
html[data-compact-table][data-single-board] .playing .player-panel.mobile-current{display:grid}
html[data-compact-table][data-single-board] .playing :is(#melds,.public-sets){grid-template-columns:repeat(var(--compact-board-columns),minmax(0,1fr))}
html[data-compact-table] .handzone{display:flex;flex-direction:column;order:3;position:relative;width:100%;height:auto;min-height:0;max-height:none;padding:0;margin:0;background:none;border:0;border-radius:0;gap:4px;overflow:visible;align-self:auto}
html[data-compact-table] .handhead{height:24px;min-height:24px;margin:0;padding:0;display:flex;align-items:center;justify-content:space-between}
html[data-compact-table] .hand-heading{display:flex;align-items:baseline;gap:6px;min-width:0}
html[data-compact-table] .handhead h2{font-size:15px;line-height:20px;margin:0;white-space:nowrap}
html[data-compact-table] .handhead h2 small{font-size:11px}
html[data-compact-table] #mobileHandMeta{display:none}
html[data-compact-table] .handzone #hand.hand{display:grid;grid-template-columns:repeat(var(--compact-hand-columns),minmax(0,1fr));grid-auto-rows:44px;gap:0 4px;align-items:start;align-content:start;justify-content:stretch;width:100%;height:var(--compact-hand-height);min-height:60px;max-height:none;padding:0;margin:0;overflow:visible;perspective:none}
html[data-compact-table] .handzone #hand .card{position:relative;inset:auto;display:block;width:100%;height:60px;min-width:44px;min-height:44px;max-width:none;max-height:none;flex:none;margin:0;padding:0;aspect-ratio:auto;transform:none!important;rotate:none;z-index:auto!important;border:1px solid #a9ad98;border-radius:4px;background:#fcf8ee;box-shadow:0 1px 2px #23352b40;outline:0;transition:background-color .12s}
html[data-compact-table] .handzone #hand .card:is(:hover,:focus-visible,.selected,.newly-drawn){transform:none!important;z-index:auto!important}
html[data-compact-table] .handzone #hand .card.selected{background:#efdaa3;box-shadow:inset 0 0 0 3px #ae593e}
html[data-compact-table] .handzone #hand .card:focus-visible{outline:3px solid #30463d;outline-offset:-4px}
html[data-compact-table] .handzone #hand .card.newly-drawn:not(.selected){box-shadow:inset 0 0 0 2px #c3a154}
html[data-compact-table]:not([data-hand-art]) #hand .card>:not(.compact-face):not(.points-badge),html[data-compact-table]:not([data-discard-art]) #discard .card>:not(.compact-face):not(.points-badge){display:none!important}
html[data-compact-table] .handzone #hand .card:after{display:none!important}
html[data-compact-table] :is(#hand,#discard) .compact-face{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 2px;position:absolute;inset:2px 1px auto;height:38px;line-height:25px;font-size:21px;font-family:Georgia,serif;font-weight:700;pointer-events:none;color:inherit}
html[data-compact-table] .compact-face b{font:inherit}
html[data-compact-table] .compact-face>span{font-size:21px;line-height:25px}
html[data-compact-table] .compact-face small{display:block;width:100%;margin-top:-5px;font:700 7px/9px 'DM Sans',system-ui,sans-serif;letter-spacing:.4px;color:#82462f}
html[data-compact-table] .suit-joker .compact-face{font-size:12px}
html[data-compact-table] .suit-joker .compact-face>span{font-size:14px}
html[data-compact-table] :is(#hand,#discard) .points-badge{position:absolute;left:2px;right:2px;top:31px;bottom:auto;width:auto;min-height:10px;font-size:8px;line-height:10px;padding:0;background:none;transform:none;text-align:center}
html[data-compact-table] .hand-pagination{display:none}
html[data-compact-table] .action-dock{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto;align-items:center;gap:12px;position:relative;inset:auto;width:100%;height:auto;min-height:68px;margin:0 0 8px;padding:12px;border-radius:6px;background:#f0ebdc;overflow:visible}
html[data-compact-table] .handzone .action-dock .selection-copy{grid-column:1;grid-row:1;min-height:15px;padding:0;margin:0}
html[data-compact-table] .selection-copy strong{font-size:11px;line-height:15px}
html[data-compact-table] .selection-copy p{display:none}
html[data-compact-table] .handzone .action-dock .dock-actions{display:flex;align-items:stretch;justify-self:end;gap:12px;grid-column:2;grid-row:1;position:static;width:auto;padding:0;margin:0;min-height:44px}
html[data-compact-table] .dock-actions button{display:block;flex:1 1 0;min-width:80px;min-height:44px;height:auto;margin:0;padding:8px 12px;line-height:15px;font-size:12px}
html[data-compact-table] #newMeldAction{display:none}
html[data-compact-table] .hand-tools{display:flex;justify-content:flex-end;gap:12px;min-height:18px;margin:0;padding:0;grid-column:auto}
html[data-compact-table] .hand-tools button{min-height:24px;padding:0;font-size:10px;line-height:18px;color:#50634b}
html[data-compact-table] #reorderUI{display:none}
html[data-compact-table] .card-quick-actions{display:none!important}
html[data-compact-table] #toast{position:absolute;bottom:calc(100% + 4px);left:0;right:0;max-width:100%;margin:0;font-size:12px;z-index:20}
html[data-compact-table] #toast:not(.show){display:none}
html[data-compact-table] .round-advance-controls{margin:0;min-height:44px}
html[data-compact-table] .round-advance-controls[hidden],html[data-compact-table] .handzone .action-dock .dock-actions[hidden]{display:none}
@media(max-width:479px){
 html[data-compact-table] .top{height:44px;min-height:44px;margin-bottom:4px}
 html[data-compact-table] .brand h1{font-size:17px}
 html[data-compact-table] .brandmark{display:none}
 html[data-compact-table] .table-nav{gap:2px}
 html[data-compact-table] .nav-round{font-size:9px;line-height:12px}
 html[data-compact-table] .nav-link{font-size:11px}
 html[data-compact-table] .table{gap:4px}
 html[data-compact-table] .compact-shared{grid-template-columns:minmax(0,1fr) 154px;gap:4px}
 html[data-compact-table] .compact-shared .turn-banner{padding:5px 6px}
 html[data-compact-table] .turn-banner h2{font-size:13px;line-height:17px}
 html[data-compact-table] .turn-steps{gap:2px}
 html[data-compact-table] .turn-steps li{font-size:9px;padding:0 2px;gap:2px}
 html[data-compact-table] .step-marker{display:none}
 html[data-compact-table] .compact-meld-progress{display:none}
 html[data-compact-table] .meld-tile .meld-caption{grid-column:1/-1}
 html[data-compact-table] .playing .meld-tile{padding-inline:4px}
}
html[data-compact-table] .compact-shared .pilearea .piles-title{display:block}
html[data-compact-table] .pilearea>.pile[hidden],html[data-compact-table] .pilearea>#drawNote{display:none!important}
html[data-compact-table] .handhead{height:44px;min-height:44px}
html[data-compact-table] .handhead .hand-tools{display:flex;gap:6px;margin-left:auto;min-height:44px;align-items:center}
html[data-compact-table] .handhead .hand-tools button{min-height:44px;min-width:44px;padding:0 3px;color:var(--felt-muted);font-size:10px}
/* Stack the selection above the actions when the footer needs the full width. */
@media(max-width:700px){
 html[data-compact-table] .action-dock{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;gap:10px}
 html[data-compact-table] .handzone .action-dock .dock-actions{grid-column:1;grid-row:2;justify-self:stretch;width:100%}
 html[data-compact-table] .dock-actions button{min-width:0}
}
/* Override fixed dimensions from the legacy illustrated deck and phone pager. */
html[data-compact-table] .playing .player-panel[data-panel]{grid-template-rows:32px minmax(44px,1fr)!important}
html[data-compact-table] .playing .player-panel[data-panel]>.player-board-header{height:32px!important;min-height:32px!important;grid-template:none!important}
html[data-compact-table] .playing :is(#melds,.public-sets){grid-template-rows:none!important;grid-auto-rows:44px!important;height:auto!important;min-height:44px!important}
html[data-compact-table]:not([data-meld-art]) .meld-tile>:not(.meld-top):not(.meld-caption):not(.compact-meld-count):not(.compact-meld-progress){display:none!important}
html[data-compact-table] .handzone{height:auto!important;max-height:none!important;flex:none!important}
html[data-compact-table] .handzone #hand.hand{height:var(--compact-hand-height)!important;min-height:var(--compact-hand-height)!important;max-height:none!important;flex:none!important}
html[data-compact-table] .handzone #hand .card{height:60px!important;min-height:60px!important;max-height:60px!important}
html[data-compact-table] #discard,html[data-compact-table] #discard>.card{height:52px!important;min-height:52px!important;max-height:52px!important}
html[data-compact-table] .compact-shared .pilearea #discardTitle{display:block!important;visibility:visible!important;position:static!important;width:auto!important;height:auto!important;clip:auto!important;clip-path:none!important;overflow:visible!important}
html[data-compact-table] :is(#hand,#discard) .compact-face{font-size:19px;column-gap:1px}
html[data-compact-table] .compact-face>span{font-size:19px}
html[data-compact-table] .suit-joker .compact-face{font-size:12px}
html[data-compact-table] .suit-joker .compact-face>span{font-size:14px}
html[data-compact-table] .compact-shared>:is(.turn-banner,.pilearea){grid-area:auto;grid-column:auto;grid-row:auto;width:auto;min-width:0}
html[data-compact-table] .handzone #hand .card{width:100%!important;max-width:100%!important}
html[data-compact-table] .compact-shared .pilearea #discardTitle{color:var(--felt-ink);font:600 12px/18px 'DM Sans',system-ui,sans-serif;text-transform:none;letter-spacing:0}
html[data-compact-table] .meld-top>:not(.meld-rank){display:none!important}
html[data-compact-table] .handzone #hand .card{margin:0!important}
html[data-compact-table] #toast{transform:none!important;width:auto;pointer-events:none}
html[data-compact-table] .compact-shared .turn-banner{height:76px;max-height:76px;overflow:hidden}
html[data-compact-table] .turn-owner{display:none!important}
html[data-compact-table] .turn-banner h2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
html[data-compact-table] .playing .player-panel[data-panel]>.player-board-header{flex-direction:row}
html[data-compact-table][data-single-board] .playing{height:calc(46px + var(--compact-board-rows)*48px)}
/* Keep the index, wild marker and optional points on distinct exposed lines. */
html[data-compact-table] :is(#hand,#discard) .compact-face{display:grid;grid-template-columns:auto auto;grid-template-rows:23px 8px;align-items:center;justify-content:center;gap:0 1px;height:32px;line-height:23px}
html[data-compact-table] .compact-face>b{grid-column:1;grid-row:1}
html[data-compact-table] .compact-face>span{grid-column:2;grid-row:1;font-size:19px;line-height:23px}
html[data-compact-table] .compact-face>small{position:static;grid-column:1/-1;grid-row:2;width:auto;margin:0;font-size:7px;line-height:8px}
html[data-compact-table] :is(#hand,#discard) .card.suit-joker .compact-face>b{font-size:11px;line-height:23px}
html[data-compact-table] :is(#hand,#discard) .card.suit-joker .compact-face>span{font-size:12px;line-height:23px}
html[data-compact-table][data-show-values="true"] :is(#hand,#discard) .points-badge{display:block!important;position:absolute;top:33px!important;bottom:auto!important;left:1px!important;right:1px!important;width:auto!important;min-height:9px;margin:0!important;padding:0!important;font:600 8px/9px 'DM Sans',system-ui,sans-serif;color:#50634b;background:transparent!important;transform:none!important;opacity:1}

/* Fidelity is independent of the compact table structure. Reuse the original art. */
html[data-compact-table] .compact-shared{min-height:var(--compact-shared-height,76px)}
html[data-compact-table] .compact-shared>:is(.turn-banner,.pilearea){height:var(--compact-shared-height,76px);max-height:var(--compact-shared-height,76px)}
html[data-compact-table] .compact-shared .pilearea{grid-template-columns:var(--compact-discard-card-width,48px) minmax(0,1fr)}
html[data-compact-table] .pilearea .pile.discard{width:var(--compact-discard-card-width,48px)}
html[data-compact-table] #discard,html[data-compact-table] #discard>.card{width:var(--compact-discard-card-width,48px)!important;min-width:var(--compact-discard-card-width,48px)!important;height:var(--compact-discard-card-height,52px)!important;min-height:var(--compact-discard-card-height,52px)!important;max-height:var(--compact-discard-card-height,52px)!important}
html[data-compact-table][data-hand-art] #hand .compact-face,html[data-compact-table][data-discard-art] #discard .compact-face{display:none!important}
html[data-compact-table][data-hand-art] .handzone #hand.hand{grid-auto-rows:var(--compact-hand-step)!important}
html[data-compact-table][data-hand-art] .handzone #hand .card{width:var(--compact-hand-card-width)!important;height:var(--compact-hand-card-height)!important;min-height:var(--compact-hand-card-height)!important;max-height:var(--compact-hand-card-height)!important;justify-self:center;isolation:isolate}
html[data-compact-table] .handzone #hand .card.selected:before{border:3px solid #ae593e}
html[data-compact-table][data-hand-art] .handzone #hand .card.newly-drawn:not(.selected){outline:2px solid #c3a154;outline-offset:-2px}
html[data-compact-table][data-hand-art][data-show-values="true"] #hand .points-badge,html[data-compact-table][data-discard-art][data-show-values="true"] #discard .points-badge{top:auto!important;bottom:2px!important;z-index:4;background:#fcf8ee!important;border-radius:2px}
html[data-compact-table][data-hand-stacked] #hand .wild-label{display:block!important;position:absolute;top:25px!important;bottom:auto!important;left:3px!important;right:3px!important;padding:0;font:700 7px/8px 'DM Sans',system-ui,sans-serif;text-align:center;background:#fcf8ee;color:#82462f;z-index:3;border-radius:2px}
html[data-compact-table][data-hand-stacked][data-show-values="true"] #hand .points-badge{top:34px!important;bottom:auto!important}
html[data-compact-table][data-meld-art] .playing :is(#melds,.public-sets){grid-auto-rows:var(--compact-meld-row-height)!important}
html[data-compact-table][data-meld-art] .playing .meld-tile{height:120px!important;min-height:120px;max-height:120px;width:100%!important;padding:0;display:block}
html[data-compact-table][data-meld-art] .playing .meld-tile>.tile-art{display:flex!important;position:absolute;inset:3px 2px auto;height:92px;min-height:92px;align-items:center;justify-content:center;margin:0;padding:0;overflow:visible;transform:none}
html[data-compact-table][data-meld-art] .playing .tile-art>.card{position:relative;inset:auto;width:64px!important;height:92px!important;min-height:92px;min-width:64px;max-width:64px;max-height:92px;flex:none;margin:0!important;padding:0;border-radius:4px;transform:none!important}
html[data-compact-table][data-meld-art] .playing .tile-art>.meld-card-layer{display:none!important}
html[data-compact-table][data-meld-art] .playing .meld-tile>.meld-top{display:none!important}
html[data-compact-table][data-meld-art] .playing .meld-tile>.meld-caption{position:absolute;bottom:3px;left:4px;right:auto;top:auto;line-height:15px;font-size:9px;overflow:visible}
html[data-compact-table][data-meld-art] .playing .meld-tile>.compact-meld-count{position:absolute;bottom:3px;right:4px;top:auto;font-size:10px;line-height:15px}
html[data-compact-table][data-meld-art] .playing .meld-tile>.compact-meld-progress{display:none!important}
html[data-compact-table][data-meld-art] .opening-empty{grid-row:1}
html[data-compact-table][data-single-board] .playing{height:var(--compact-public-height)!important}
/* Compact content must not inherit an empty footer row from the desktop grid. */
html[data-compact-table] .app{display:flex;flex-direction:column}
html[data-compact-table][data-hand-stacked] #hand :is(.wild-label,.three-warning){display:block!important;position:absolute;top:25px!important;bottom:auto!important;left:3px!important;right:3px!important;width:auto!important;height:8px;min-height:0;max-height:8px;padding:0!important;margin:0;font:700 7px/8px 'DM Sans',system-ui,sans-serif;letter-spacing:0;text-align:center;writing-mode:horizontal-tb;transform:none!important;background:#fcf8ee;color:#82462f;z-index:3;border-radius:2px}
html[data-compact-table][data-meld-art] .playing .meld-tile{rotate:none!important;transform:none!important}
html[data-compact-table][data-meld-art] .playing .meld-tile>.meld-caption{display:block!important;width:auto!important;height:15px!important;min-height:15px;max-height:none;clip:auto!important;clip-path:none!important;white-space:nowrap;overflow:visible;transform:none;opacity:1;margin:0;right:22px;letter-spacing:0}
/* Keep optional markers outside the artwork's upper-left rank/suit index. */
html[data-compact-table][data-hand-stacked] #hand :is(.wild-label,.three-warning){left:auto!important;right:3px!important;width:auto!important;min-width:24px;text-align:right}
html[data-compact-table][data-meld-art] .playing .meld-tile>.progress-pip-bar{display:none!important}
html[data-compact-table][data-hand-stacked] #hand .card>.corner:not(.bottom):not(.joker-index){font-size:18px!important;line-height:.9!important}
html[data-compact-table][data-hand-stacked] #hand .card>.corner:not(.bottom) span{font-size:13px!important;line-height:13px!important}
.card.suit-joker>.wild-label{display:none!important}
html[data-compact-table][data-hand-stacked] #hand .card.suit-joker>.wild-label{display:block!important}
html[data-compact-table][data-hand-stacked] #hand :is(.wild-label,.three-warning){z-index:35}
html[data-compact-table][data-hand-stacked][data-show-values="true"] #hand .points-badge{left:auto!important;right:3px!important;width:auto!important;min-width:24px;text-align:right;z-index:35}
html[data-compact-table][data-hand-stacked] #hand .card>.corner.joker-index:not(.bottom){font-size:11px!important;line-height:11px!important;white-space:nowrap;word-break:normal;width:auto!important;height:auto!important;min-height:0;max-width:calc(100% - 6px)}

/* The inline player strip owns phase/count and turn status above a single board. */
.tab-phase-count{display:none}
html[data-compact-table][data-single-board] .player-tabs .player-phase{display:inline-flex;align-items:center;gap:4px;min-height:18px;line-height:18px}
html[data-compact-table][data-single-board] .player-tabs .phase-icon{display:inline-block;width:14px;height:16px;flex:none}
html[data-compact-table][data-single-board] .player-tabs .phase-label{display:none}
html[data-compact-table][data-single-board] .player-tabs .tab-phase-count{display:inline;font:600 12px/18px 'DM Sans',system-ui,sans-serif;font-variant-numeric:tabular-nums}
html[data-compact-table][data-single-board] .playing .player-board-header :is(#yourPhase,.player-phase,.turn-indicator){display:none!important}

/* Warning badges follow their own card, rather than the viewport or body font. */
.card:has(>.three-warning){container-type:inline-size}
.card>.three-warning{font-size:clamp(7px,9cqi,12px);line-height:1;letter-spacing:0;padding:clamp(1px,2cqi,4px) clamp(1px,1.25cqi,3px);left:clamp(2px,3cqi,5px);top:max(32%,40px);border-radius:clamp(1px,2cqi,3px)}
@container (max-width:80px){
 .card>.three-warning{writing-mode:horizontal-tb;text-orientation:mixed;top:auto;bottom:3px;left:3px;right:auto;white-space:nowrap}
}
/* A stacked card exposes a short band: keep warnings above optional points. */
html[data-compact-table][data-hand-stacked] #hand .three-warning{font-size:clamp(6px,10cqi,9px);line-height:9px;top:22px!important;height:11px;max-height:11px;min-width:0;max-width:calc(100% - 32px)}
html[data-compact-table]:not([data-hand-art]) #hand .card:is([data-value-group="red3"],[data-value-group="black3"]) .compact-face>small{font-size:clamp(7px,16cqi,9px)}
@container (max-width:80px){
 html[data-show-values="true"] .card>.three-warning{top:38px;bottom:auto}
}

/* Keep the shared discard immediately before the hand on compact tables. */
html[data-compact-table] .compact-shared{order:2;margin-top:12px}
html[data-compact-table] .playing{order:1}
html[data-compact-table] .player-tabs{order:0}
/* Spend space between sections; keep the discard face and draw target intact. */
html[data-compact-table] .compact-shared .turn-banner{min-height:0}
html[data-compact-table][data-discard-art] .compact-shared .pilearea{grid-template-rows:36px minmax(0,1fr)}
html[data-compact-table][data-discard-art] .pilearea .pilelabel{position:absolute;top:22px;left:calc(100% + 7px);margin:0;text-align:left}
html[data-compact-table]:not([data-discard-art]) .compact-shared .pilearea{padding-block:0;grid-template-rows:18px 44px}
html[data-compact-table]:not([data-discard-art]) .pilearea .pilelabel{min-height:10px;margin:4px 0 0;font-size:9px;line-height:10px}
html[data-compact-table]:not([data-discard-art]) .compact-shared .turn-banner{gap:0;padding:4px 6px}