/* Counts must retain their natural width, including 11, 14 and +105. */
#screen-game #playerRail :is(.pchip-card-count,.pchip-score,.tablet-hand-caption)>strong,
#screen-game #playerRail .opponent-card-stack>b {flex-shrink:0;white-space:nowrap;letter-spacing:.075em!important;font-kerning:none;font-variant-numeric:tabular-nums;font-feature-settings:'kern' 0,'tnum' 1;}
#screen-game #playerRail :is(.pchip-card-count,.pchip-score)>small {flex-shrink:0;}
#screen-game #playerRail .opponent-card-stack>b {font-size:clamp(9px, .9em, 15px);letter-spacing:.025em!important;}
#screen-game #playerRail .opponent-card-stack[data-digits="3"]>b {font-size:9px!important;letter-spacing:0!important;}
/* The pointer-capturing source stays stable; only its fresh face is portalled. */
#handRow>.card.drag-source {visibility:hidden!important;}
#flightLayer>.held-card {position:absolute!important;margin:0!important;translate:0 0!important;transition:none!important;pointer-events:none!important;box-shadow:3px 7px 0 #0004,0 0 0 2px var(--gold)!important;}
#flightLayer>.held-card .cardface {contain:strict;}
.table-follow-notice {position:sticky;top:0;height:0;z-index:22;display:flex;justify-content:flex-end;pointer-events:none;}
.table-follow-button {display:flex;align-items:center;gap:9px;max-width:190px;transform:translateY(-9px);padding:5px 8px;border:1px solid var(--gold);border-radius:5px;background:var(--chrome-raised);box-shadow:0 2px 0 var(--chrome-shadow);color:var(--cream);font:600 11px/1.2 var(--ui-display);cursor:pointer;pointer-events:auto;}
.table-follow-button>span:first-child {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.table-follow-button>strong {white-space:nowrap;color:var(--gold-ink);}
.table-follow-arrow {font-size:16px;}
#tableMelds .meld-activity>.meld-caption {box-shadow:0 0 0 1px var(--gold);color:var(--gold-ink);}
#tableMelds .meld-activity>.meld-group {outline:1px solid color-mix(in srgb,var(--gold) 70%,transparent);outline-offset:2px;transition:outline-color .2s ease;}
@media(max-width:760px){
 /* One compact header, with the phase in its own legible two-line column. */
 #screen-game .statusbar {grid-template-columns:40px minmax(0,1fr) auto!important;grid-template-areas:'menu status controls'!important;grid-template-rows:auto!important;height:49px!important;flex-basis:49px!important;gap:5px!important;min-height:49px!important;padding:4px 5px!important;}
 #screen-game .status-center {display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:4px!important;border:0!important;padding:0 3px!important;min-height:0!important;min-width:0!important;height:auto!important;}
 #screen-game .status-round {font-size:9px!important;}
 #screen-game .status-phase {font-size:12px!important;line-height:1.15!important;max-width:100%;}
 #screen-game .status-side {gap:3px!important;}
 #screen-game .status-side :is(.hud-btn,.operator-quick) {width:35px!important;height:38px!important;min-width:35px!important;padding:5px!important;}
 #screen-game #playerRail .pchip:not(.is-me) {height:78px!important;min-height:78px!important;grid-template-rows:29px 34px!important;}
 /* Two seats share one row, so the local chip keeps the opponent geometry:
    identity above, its visible hand below (it must not span both rows). */
 #screen-game #playerRail[data-players="2"] .pchip.is-me {height:78px!important;min-height:78px!important;grid-template-rows:29px 34px!important;}
 #screen-game #playerRail[data-players="2"] .pchip.is-me>:is(.pchip-av,.pchip-body,.pchip-turn-hud) {grid-row:1!important;}
 #screen-game #playerRail .pchip .opponent-card-stack>b {font-size:11px!important;}
 #screen-game #playerRail .pchip .tablet-hand-caption>strong {letter-spacing:.085em!important;}
 body[data-game="kounga"] #screen-game .piles-row {--pile-w:48px;--pile-h:69px;gap:38px!important;padding:12px 0 7px!important;}
 body[data-game="kounga"] #screen-game #evaluatorBanner {display:flex!important;align-items:center;justify-content:center;flex:0 0 25px;min-height:25px!important;max-height:25px;max-width:100%;box-sizing:border-box;margin:0!important;padding:3px 7px!important;font-size:10px!important;line-height:1.2!important;letter-spacing:.025em!important;z-index:1;}
 body[data-game="kounga"] #screen-game #evaluatorBanner.hidden {visibility:hidden!important;}
 #screen-game .hand-row {min-height:calc(var(--card-h) + 26px)!important;padding:20px 0 2px!important;}
 #screen-game #handRow>.card.selected {transform:translateY(-18px)!important;}
 #screen-game .table-area {padding-top:14px!important;}
}
/* Phones held sideways need a deliberate table/hand split, not a cropped
   portrait stack. Tablets keep their established spacious arrangement. */
@media(pointer:coarse) and (max-height:559px) and (min-width:600px){
 #screen-game .game-root {padding:3px 8px 5px!important;gap:4px!important;}
 #screen-game .statusbar {min-height:44px!important;padding:3px 6px!important;}
 #screen-game .status-phase {font-size:13px!important;}
 #screen-game .status-round {font-size:10px!important;}
 #screen-game #playerRail {grid-template-columns:repeat(4,minmax(0,1fr))!important;}
 body #screen-game #playerRail[data-players] :is(.pchip,.pchip.is-me) {height:70px!important;min-height:70px!important;grid-template-columns:25px minmax(0,1fr) 30px!important;grid-template-rows:25px 30px!important;padding:4px!important;gap:2px 5px!important;}
 #screen-game #playerRail .pchip .pchip-body {grid-column:2!important;grid-row:1!important;flex-direction:row!important;align-items:center!important;gap:6px!important;}
 #screen-game #playerRail .pchip .pchip-name {font-size:11px!important;}
 #screen-game #playerRail .pchip .pchip-av {width:25px!important;height:25px!important;min-width:25px!important;}
 #screen-game #playerRail .pchip .pchip-turn-hud {grid-column:3!important;grid-row:1!important;height:27px!important;}
 #screen-game #playerRail .pchip .pchip-timer {width:24px!important;height:24px!important;min-width:24px!important;max-width:24px!important;min-height:24px!important;max-height:24px!important;flex-basis:24px!important;}
 #screen-game #playerRail .pchip .pchip-timer-seconds {font-size:11px!important;}
 #screen-game #playerRail .pchip .opponent-hand {display:flex!important;grid-column:1/-1!important;grid-row:2!important;height:30px!important;}
 #screen-game #playerRail .opponent-back,#screen-game #playerRail .opponent-card-stack {width:20px!important;height:28px!important;flex-basis:20px!important;}
 #screen-game #playerRail .pchip .pchip-card-count {display:none!important;}
 #screen-game #playerRail .pchip .tablet-hand-caption {display:flex!important;flex-direction:row;gap:4px;align-items:baseline;margin-left:8px;font-size:9px;}
 #screen-game #playerRail .pchip .tablet-hand-caption>strong {font-size:12px!important;}
 body[data-game="kounga"] #screen-game .game-main {display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:70px minmax(59px,1fr) 24px 91px 43px;gap:4px 14px!important;}
 body[data-game="kounga"] #screen-game #playerRail {grid-column:1/-1;grid-row:1;}
 body[data-game="kounga"] #screen-game #tableArea {grid-column:1;grid-row:2/6;min-height:0!important;}
 body[data-game="kounga"] #screen-game .piles-row {grid-column:2;grid-row:2;--pile-w:35px;--pile-h:50px;gap:36px!important;padding:9px 0 7px!important;}
 body[data-game="kounga"] #screen-game #evaluatorBanner {grid-column:2;grid-row:3;display:flex!important;align-items:center;justify-content:center;max-height:24px;margin:0!important;font-size:10px!important;padding:2px 5px!important;}
 body[data-game="kounga"] #screen-game #evaluatorBanner.hidden {visibility:hidden!important;}
 body[data-game="kounga"] #screen-game #handZone {grid-column:2;grid-row:4;}
 body[data-game="kounga"] #screen-game .hand-row {min-height:91px!important;padding:17px 0 1px!important;}
 body[data-game="kounga"] #screen-game #handRow>.card.selected {transform:translateY(-16px)!important;}
 body[data-game="kounga"] #screen-game .action-bar {grid-column:2;grid-row:5;min-height:0!important;}
 body[data-game="kounga"] #screen-game .action-bar .btn {min-height:38px!important;padding:4px 2px!important;font-size:12px!important;}
}

@media(pointer:coarse) and (max-height:559px) and (min-width:600px){body[data-game="kounga"] #screen-game .action-bar{display:flex!important;}body[data-game="kounga"] #screen-game .action-bar>.btn:not(.hidden){flex:1 1 0;min-width:0!important;}}
@media(max-width:760px){
 body #screen-game .statusbar .status-center {display:flex!important;flex-direction:column!important;align-items:flex-start!important;min-width:0!important;min-height:0!important;height:auto!important;}
 body #screen-game .statusbar .status-center .status-phase {max-width:100%;}
}
@media(pointer:coarse) and (max-height:559px) and (min-width:600px){
 body #screen-game #playerRail[data-players] .pchip.is-me .pchip-body {grid-column:2!important;grid-row:1!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:6px!important;height:auto!important;}
 body #screen-game #playerRail[data-players] .pchip.is-me .opponent-hand {grid-column:1/-1!important;grid-row:2!important;}
 body #screen-game #playerRail[data-players] .pchip.is-me .pchip-score>small {display:inline!important;}
}

@media(max-width:760px){
 body #screen-game .statusbar .status-center {max-height:none!important;overflow:visible!important;}
 body #screen-game .statusbar .status-center :is(.status-round,.status-phase) {flex:0 0 auto!important;line-height:1.15!important;}
 body #screen-game .statusbar .status-center .status-round {font-size:9px!important;}
 body #screen-game .statusbar .status-center .status-phase {font-size:12px!important;}
 /* The faces already show these ranks. Joker readings remain explicit. */
 #screen-game .meld-caption:not(.has-joker) .cap-cards {display:none;}
 #screen-game .meld-caption {font-size:8px!important;line-height:1.15!important;padding:2px 5px!important;}
}
@media(pointer:coarse) and (max-height:559px) and (min-width:600px){
 body #screen-game #playerRail[data-players] .pchip.is-me>.pchip-av {grid-column:1!important;grid-row:1!important;}
}
@media(pointer:coarse) and (min-width:600px) and (min-height:560px){
 /* Leave real clearance above a tablet's full 26px selection lift too. */
 #screen-game .hand-row {padding:28px 0 6px!important;min-height:calc(var(--card-h) + 38px)!important;}
}
.table-follow-button>span:first-child {min-width:0;flex:1 1 auto;}
.table-follow-button>:is(strong,.table-follow-arrow) {flex-shrink:0;}
#screen-game .pile-count {white-space:nowrap;letter-spacing:.075em;font-variant-numeric:tabular-nums;font-kerning:none;}
@media(pointer:coarse) and (max-height:559px) and (min-width:600px){
 body #screen-game #playerRail[data-players] {padding:0!important;}
 body #screen-game #playerRail[data-players] :is(.pchip,.pchip.is-me) {grid-template-rows:28px 28px!important;}
 body #screen-game #playerRail[data-players] :is(.pchip,.pchip.is-me)>.pchip-av {grid-column:1!important;grid-row:1!important;}
 body #screen-game #playerRail[data-players] :is(.pchip,.pchip.is-me)>.pchip-body {grid-column:2!important;grid-row:1!important;height:auto!important;}
 body #screen-game #playerRail[data-players] :is(.pchip,.pchip.is-me)>.opponent-hand {display:flex!important;grid-column:1/-1!important;grid-row:2!important;justify-content:center!important;height:28px!important;}
 body #screen-game #playerRail[data-players] :is(.pchip,.pchip.is-me)>.pchip-turn-hud {grid-column:3!important;grid-row:1!important;height:28px!important;gap:1px!important;}
 body #screen-game #playerRail[data-players] .pchip .pchip-missed-dots {height:3px!important;min-height:3px!important;max-height:3px!important;flex-basis:3px!important;}
 body #screen-game #playerRail[data-players] .pchip .pchip-missed-dots i {width:3px!important;height:3px!important;min-width:3px!important;min-height:3px!important;flex-basis:3px!important;}
 body:is([data-game="pilotta"],[data-game="tichu"]) #screen-game .game-main {grid-template-rows:70px 26px minmax(0,1fr) auto auto!important;gap:4px 12px!important;}
 body:is([data-game="pilotta"],[data-game="tichu"]) #screen-game #teamScoreRail {margin:0!important;min-height:0!important;max-height:26px!important;}
 body:is([data-game="pilotta"],[data-game="tichu"]) #screen-game #playerRail[data-players] :is(.pchip,.pchip.is-me)>.pchip-body {flex-direction:column!important;align-items:flex-start!important;gap:2px!important;}
 body:is([data-game="pilotta"],[data-game="tichu"]) #screen-game .action-bar .btn {min-height:40px!important;}
}
@media(pointer:coarse) and (min-width:600px) and (min-height:560px){
 /* The viewer uses the same two tracks as every other tablet seat. */
 body #screen-game #playerRail[data-players] :is(.pchip,.pchip.is-me) {height:100px!important;min-height:100px!important;grid-template-columns:36px minmax(0,1fr) 34px!important;grid-template-rows:38px 42px!important;}
 body #screen-game #playerRail[data-players] :is(.pchip,.pchip.is-me)>.pchip-av {grid-column:1!important;grid-row:1!important;}
 body #screen-game #playerRail[data-players] :is(.pchip,.pchip.is-me)>.pchip-body {grid-column:2!important;grid-row:1!important;}
 body #screen-game #playerRail[data-players] :is(.pchip,.pchip.is-me)>.opponent-hand {grid-column:1/-1!important;grid-row:2!important;}
 body #screen-game #playerRail[data-players] :is(.pchip,.pchip.is-me)>.pchip-turn-hud {grid-column:3!important;grid-row:1!important;}
}
@media(pointer:coarse) and (min-width:600px) and (min-height:560px) and (orientation:landscape){
 body #screen-game #playerRail[data-players] :is(.pchip,.pchip.is-me) {height:92px!important;min-height:92px!important;grid-template-rows:38px 34px!important;}
}
@media(pointer:coarse) and (max-height:559px) and (min-width:600px){
 body[data-game="pilotta"] #screen-game #playerRail:not([data-players="2"]) .pchip.is-me {height:70px!important;min-height:70px!important;grid-template-columns:25px minmax(0,1fr) 30px!important;grid-template-rows:28px 28px!important;padding:4px!important;gap:2px 5px!important;}
}