/* Drop feedback follows a legal destination; it is interaction chrome built
   from the existing ghost-slot language, rather than new decorative art. */
/* Destination-local, below its cards, with no badge covering nearby UI. */
.card-drop-indicator {position:absolute;left:0;top:0;z-index:-1;box-sizing:border-box;pointer-events:none;border:2px dashed color-mix(in srgb,var(--gold) 58%,transparent);border-radius:5px;background:transparent;opacity:0;visibility:hidden;transition:opacity .16s ease;}
.card-drop-indicator.is-visible {visibility:visible;opacity:1;}
.card-drop-anchor {position:relative;}
.card-drop-target {isolation:isolate;outline:1px solid color-mix(in srgb,var(--gold) 52%,transparent)!important;outline-offset:-3px;}
#handRow>.card.dragging {translate:0 0!important;}
.drag-group-count {position:absolute;right:5px;top:-13px;z-index:4;padding:4px 7px;background:var(--gold);color:#332417;border:2px solid #332417;border-radius:5px;font:700 15px/1 var(--ui-display);}
#handRow>.card.drag-companion {outline:2px solid var(--gold);outline-offset:1px;}
#handRow>.card.drop-awaiting {visibility:hidden!important;pointer-events:none;}
.drop-action-flight,.drop-action-return {pointer-events:none!important;}
body.no-motion .card-drop-indicator {transition:none;}
@media(prefers-reduced-motion:reduce){.card-drop-indicator{transition:none;}}
/* iPad Chrome uses WebKit. Touch tablets need their own height budget rather
   than either the phone rail or a full desktop-sized fan and pile column. */
@media(pointer:coarse) and (min-width:600px) and (min-height:560px){
 html {text-size-adjust:100%;-webkit-text-size-adjust:100%;}
 body {--card-w:calc(clamp(66px,min(12vw,14dvh),106px) * var(--ui-scale));--card-h:calc(var(--card-w) * 1.435);--table-card-w:calc(clamp(40px,7dvh,60px) * var(--ui-scale));--table-card-h:calc(var(--table-card-w) * 1.435);--pile-w:clamp(48px,8dvh,78px);--pile-h:calc(var(--pile-w) * 1.43);}
 #screen-game .game-root {padding:max(6px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))!important;gap:7px!important;min-height:0;}
 #screen-game .statusbar {display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px!important;min-height:58px!important;flex:0 0 auto!important;padding:5px 7px!important;}
 #screen-game .statusbar .hud-btn {height:44px!important;min-height:44px!important;width:44px!important;min-width:44px!important;padding:6px!important;}
 #screen-game .hud-menu .hud-label,#screen-game .hud-chat .hud-label {display:none!important;}
 #screen-game .hud-icon-img {width:28px!important;height:28px!important;}
 #screen-game .statusbar>.hud-menu {grid-column:1;}
 #screen-game .status-center {grid-column:2;position:static!important;left:auto!important;top:auto!important;transform:none!important;width:100%!important;max-width:none!important;margin:0!important;}
 #screen-game .status-side {grid-column:3;position:static!important;}
 #screen-game .status-phase {font-size:19px!important;}
 #screen-game .status-round {font-size:12px!important;}
 #screen-game .game-shell,#screen-game .game-main {min-height:0!important;min-width:0!important;gap:7px!important;}
 #screen-game #playerRail {flex:0 0 auto!important;gap:7px!important;padding:0!important;}
 #screen-game #playerRail .pchip,#screen-game #playerRail .pchip.is-me {height:94px!important;min-height:94px!important;grid-template-columns:28px minmax(0,1fr) 28px!important;grid-template-rows:34px 42px!important;padding:6px!important;gap:3px 6px!important;}
 #screen-game #playerRail .pchip>.pchip-av,#screen-game #playerRail .pchip.is-me>.pchip-av {grid-column:1!important;grid-row:1!important;width:28px!important;height:28px!important;min-width:28px!important;}
 #screen-game #playerRail .pchip>.pchip-body,#screen-game #playerRail .pchip.is-me>.pchip-body {grid-column:2!important;grid-row:1!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:3px!important;}
 #screen-game #playerRail .pchip .pchip-name {font-size:13px!important;max-width:100%!important;}
 #screen-game #playerRail .pchip .pchip-meta {font-size:11px!important;gap:4px!important;}
 #screen-game #playerRail .pchip .pchip-count,#screen-game #playerRail .pchip .pchip-role {font-size:10px!important;}
 #screen-game #playerRail .pchip>.pchip-turn-hud,#screen-game #playerRail .pchip.is-me>.pchip-turn-hud {grid-column:3!important;grid-row:1!important;}
 #screen-game #playerRail .pchip .pchip-timer {width:25px!important;height:25px!important;min-width:25px!important;min-height:25px!important;}
 #screen-game #playerRail .pchip .opponent-hand {display:flex!important;grid-column:1/-1!important;grid-row:2!important;height:42px!important;gap:3px!important;}
 #screen-game #playerRail .opponent-back,#screen-game #playerRail .opponent-card-stack {width:27px!important;height:39px!important;flex-basis:27px!important;}
 #screen-game .hand-zone {flex:0 0 auto!important;}
 #screen-game .hand-row {min-height:calc(var(--card-h) + 18px)!important;padding:12px 0 4px!important;}
 #screen-game .action-bar {flex:0 0 auto!important;gap:7px!important;padding-bottom:5px!important;}
 #screen-game .action-bar>.btn {min-height:48px!important;min-width:0!important;padding:7px 9px!important;font-size:17px!important;}
 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!important;}
 #screen-game .table-area {min-height:90px!important;}
 #screen-game .team-score-rail {margin:2px 0!important;gap:10px;}
 #screen-game .team-score {padding:5px 12px;font-size:14px;}
 #screen-game .team-score strong {font-size:21px;}
 #screen-game .partnership-actions .btn {min-height:48px;font-size:16px!important;}
 #screen-game .game-field {font-size:15px;}
 #screen-game .game-field select {min-height:44px;}
 #screen-game .side-panel:not(.hidden) {position:absolute;z-index:1100;top:70px;right:10px;bottom:10px;width:min(380px,70vw);}
}
@media(pointer:coarse) and (min-width:600px) and (min-height:560px) and (orientation:landscape){
 body[data-game="kounga"] #screen-game .game-main {display:grid!important;grid-template-columns:minmax(0,1fr) 112px;grid-template-rows:auto minmax(90px,1fr) auto auto auto;gap:7px 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;}
 body[data-game="kounga"] #screen-game .piles-row {grid-column:2;grid-row:2;flex-direction:column;justify-content:center;align-items:center;gap:28px;padding:20px 0;}
 body[data-game="kounga"] #screen-game #evaluatorBanner {grid-column:1/-1;grid-row:3;}
 body[data-game="kounga"] #screen-game #handZone {grid-column:1/-1;grid-row:4;}
 body[data-game="kounga"] #screen-game .action-bar {grid-column:1/-1;grid-row:5;}
 #screen-game .pile-label {font-size:10px;}
 #screen-game .pile-count {font-size:14px;}
 #screen-game #playerRail .pchip,#screen-game #playerRail .pchip.is-me {height:85px!important;min-height:85px!important;grid-template-rows:30px 36px!important;}
 #screen-game #playerRail .pchip .opponent-hand {height:36px!important;}
 #screen-game #playerRail .opponent-back,#screen-game #playerRail .opponent-card-stack {width:24px!important;height:34px!important;flex-basis:24px!important;}
 body:not([data-game="kounga"]) #screen-game .game-main {display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:85px 36px minmax(0,1fr) auto auto;gap:7px 20px!important;}
 body:not([data-game="kounga"]) #screen-game #playerRail {grid-column:1/-1;grid-row:1;}
 body:not([data-game="kounga"]) #screen-game #teamScoreRail {grid-column:1/-1;grid-row:2;}
 body:not([data-game="kounga"]) #screen-game #partnershipBoard {grid-column:1;grid-row:3/6;min-height:0!important;justify-content:center!important;}
 body:not([data-game="kounga"]) #screen-game #handZone {grid-column:2;grid-row:3;align-self:center;}
 body:not([data-game="kounga"]) #screen-game #gameControls {grid-column:2;grid-row:4;}
 body:not([data-game="kounga"]) #screen-game .action-bar {grid-column:2;grid-row:5;}
 #screen-game .game-controls {padding:0;}
}
.tablet-hand-caption {display:none;}
/* Identity at the top, actual hand and its total below, timer at top-right.
   Every seat uses the same grid, including the viewer and the partner. */
@media(pointer:coarse) and (min-width:600px) and (min-height:560px){
 #screen-game #playerRail .pchip,#screen-game #playerRail .pchip.is-me {grid-template-columns:28px minmax(0,1fr) 32px!important;}
 #screen-game #playerRail .pchip .pchip-body {height:100%;justify-content:flex-start!important;}
 #screen-game #playerRail .pchip .pchip-meta {min-height:12px!important;}
 #screen-game #playerRail .pchip .pchip-meta .pchip-card-count {display:none!important;}
 #screen-game #playerRail .pchip .opponent-hand {grid-column:1/-1!important;justify-content:center!important;}
 #screen-game #playerRail .opponent-back,#screen-game #playerRail .opponent-card-stack {width:clamp(17px,2.6vw,27px)!important;height:calc(clamp(17px,2.6vw,27px) * 1.435)!important;flex-basis:clamp(17px,2.6vw,27px)!important;}
 #screen-game #playerRail .opponent-card-stack>b {font-size:12px;}
 #screen-game #playerRail .tablet-hand-caption {display:flex;flex:0 0 auto;flex-direction:column;align-items:center;justify-content:center;gap:3px;align-self:center;min-width:30px;margin-left:7px;padding-left:9px;border-left:1px solid var(--chrome-border-strong);color:var(--chrome-muted);font:500 10px/1 var(--ui-display);}
 #screen-game #playerRail .opponent-hand:is([data-art-state="loading"],[data-art-state="error"]) .tablet-hand-caption {visibility:hidden;}
 #screen-game #playerRail .tablet-hand-caption>strong {font-size:18px;line-height:1;color:var(--cream);font-variant-numeric:tabular-nums;}
 #screen-game #playerRail .tablet-hand-caption>small {font:inherit;}
 #screen-game .pilotta-contract {width:min(100%,490px)!important;}
 #screen-game .pilotta-auction {width:min(100%,490px)!important;}
 body:not([data-game="kounga"]) #screen-game .action-bar {display:flex!important;}
 #screen-game .partnership-actions {flex:1 1 auto;display:flex;}
 #screen-game .partnership-actions>.btn {flex:1 1 0;}
}
@media(pointer:coarse) and (min-width:600px) and (min-height:560px) and (orientation:landscape){
 body:not([data-game="kounga"]) #screen-game #handZone {align-self:end;}
}
/* A real portrait menu grid: logo, contained fan, primary/secondary actions,
   then the profile, all sharing the same column and regular gutters. */
.tablet-hero-slot {display:contents;}
@media(pointer:coarse) and (min-width:600px) and (min-height:560px) and (orientation:portrait){
 #screen-start:not(.hidden) {display:grid!important;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;gap:18px;align-items:center;justify-items:center;padding:max(22px,env(safe-area-inset-top)) 28px max(24px,env(safe-area-inset-bottom))!important;overflow:hidden;}
 #screen-start .title-brand-block {position:static!important;grid-row:1;width:min(100%,660px)!important;left:auto!important;top:auto!important;transform:none!important;margin:0!important;text-align:center;}
 #screen-start .title-logo-v48 {width:min(100%,600px)!important;margin:0 auto!important;}
 #screen-start .tablet-hero-slot {display:block;position:relative;grid-row:2;width:min(100%,660px);height:100%;min-height:0;container-type:size;}
 #screen-start .title-card-fan {position:absolute!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%)!important;width:min(100cqw,150cqh)!important;height:auto!important;aspect-ratio:3/2!important;margin:0!important;}
 #screen-start .title-main-menu {position:static!important;grid-row:3;width:min(100%,660px)!important;max-width:none!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;margin:0!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;}
 #screen-start .title-main-menu .title-menu-button {display:grid!important;grid-template-columns:34px minmax(0,1fr);gap:12px;min-height:62px!important;height:auto!important;padding:10px 13px!important;font-size:19px!important;line-height:1.15;}
 #screen-start .title-menu-button>img {position:static!important;width:34px!important;height:34px!important;transform:none!important;}
 #screen-start .title-menu-button::before {display:none!important;}
 #screen-start .title-menu-button>span {min-width:0;white-space:normal;overflow-wrap:normal;}
 #screen-start #btnPlayHub {grid-column:1/-1!important;min-height:70px!important;font-size:27px!important;}
 #screen-start #homeLevelBadge {display:none!important;}
 #screen-start #btnHomeOptions {grid-column:auto!important;}
 #screen-start .title-main-menu .title-resume {position:static!important;grid-column:1/-1!important;min-height:48px!important;}
 #screen-start .title-profile-plaque {position:static!important;grid-row:4;width:min(100%,660px)!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;margin:0!important;grid-template-columns:48px minmax(0,1fr)!important;min-height:73px!important;height:auto!important;padding:9px 12px;}
 #screen-start .title-profile-avatar {width:48px!important;height:48px!important;}
 #screen-start #homeProfileName {font-size:21px!important;}
}
@media(pointer:coarse) and (min-width:600px) and (min-height:560px){
 body[data-game="kounga"] #playerRail .pchip-score::after {content:'pts';font:500 9px/1 var(--ui-display);color:var(--chrome-muted);margin-left:4px;}
 html[data-lang="el"] body[data-game="kounga"] #playerRail .pchip-score::after {content:'π.';}
}
.opponent-hand:is([data-art-state="loading"],[data-art-state="error"])>.tablet-hand-caption {visibility:hidden!important;}
/* Split-view tablets can be narrower than the old phone breakpoint. Override
   its full-width self strip so every seat still shares the tablet grid. */
@media(pointer:coarse) and (min-width:600px) and (min-height:560px){
 #screen-game #playerRail:not([data-players="2"]) .pchip.is-me {grid-column:auto!important;order:0!important;height:94px!important;min-height:94px!important;grid-template-columns:28px minmax(0,1fr) 32px!important;grid-template-rows:34px 42px!important;padding:6px!important;gap:3px 6px!important;}
 #screen-game #playerRail:not([data-players="2"]) .pchip.is-me .pchip-body {grid-column:2!important;grid-row:1!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:3px!important;height:100%;}
 #screen-game #playerRail:not([data-players="2"]) .pchip.is-me .pchip-name {width:100%!important;max-width:100%!important;font-size:13px!important;}
 #screen-game #playerRail:not([data-players="2"]) .pchip.is-me .opponent-hand {display:flex!important;grid-column:1/-1!important;grid-row:2!important;height:42px!important;justify-content:center!important;}
}
@media(pointer:coarse) and (min-width:600px) and (min-height:560px) and (orientation:landscape){
 #screen-game #playerRail:not([data-players="2"]) .pchip.is-me {height:85px!important;min-height:85px!important;grid-template-rows:30px 36px!important;}
 #screen-game #playerRail:not([data-players="2"]) .pchip.is-me .opponent-hand {height:36px!important;}
}