/* Portrait mobile table: a half-visible full-size hand leaves room for the battle. */
@media(max-width:900px) and (orientation:portrait){
 body.in-game .game:not(.club-table){--mobile-card-width:min(48vw,32dvh,210px);--mobile-hand-height:calc(var(--mobile-card-width)*.75 + 12px);grid-template-rows:auto 28px minmax(0,1fr) auto var(--mobile-hand-height)!important;gap:8px!important;padding-bottom:0!important;overflow:hidden}
 body.in-game .game:not(.club-table) .last-action{display:none!important}
 body.in-game .game:not(.club-table) .play-area{grid-row:3}
 body.in-game .game:not(.club-table) .player-dock{grid-row:4;gap:6px}
 body.in-game .game:not(.club-table) .hand-area{grid-row:5;width:calc(100% + 32px)!important;margin-left:-16px!important}
 body.in-game .game:not(.club-table) .hand .card{bottom:calc(var(--mobile-card-width)*-.75)!important}
 body.in-game .game:not(.club-table) .table-stats{height:28px!important;width:auto!important;max-width:100%;justify-self:center;font-size:12px}
 body.in-game .game:not(.club-table) .supply{width:max-content;max-width:100%;justify-content:center!important;gap:12px!important;height:28px;white-space:nowrap}
 body.in-game .game:not(.club-table) .supply>span:not(.supply-cards){font-size:12px}
 body.in-game .game:not(.club-table) .trump-badge .ui-icon{width:17px;height:20px}
 body.in-game .game:not(.club-table) .control-stack{gap:6px}
 body.in-game .game:not(.club-table) .mobile-sort-group button,body.in-game .game:not(.club-table) .actions button,body.in-game .game:not(.club-table) .multi-controls button{min-height:40px;height:40px;padding:4px 6px;font-size:13px;line-height:1.2}
 body.in-game .game:not(.club-table) .mobile-sort-group{box-sizing:border-box;height:40px;min-height:40px}
 body.in-game .game:not(.club-table) .mobile-sort-group button{height:100%;min-height:0}
 body.in-game .game:not(.club-table) .multi-controls button{white-space:nowrap;min-width:0}
 body.in-game .game:not(.club-table) #play-many{flex:1.5 1 0}
 body.in-game .game:not(.club-table) #cancel-many{flex:1 1 0}
 body.in-game .game:not(.club-table) .hand .card.selected,body.in-game .game:not(.club-table) .hand .card.selected:hover{transform:translate(var(--x),calc(var(--y) - 12px)) rotate(var(--r));z-index:var(--z)}
 body.in-game .game:not(.club-table) #mobile-sort-settings{flex-basis:40px}
 body.in-game .game:not(.club-table) .turn-text small{line-height:15px}
}
@media(max-width:900px) and (orientation:portrait) and (max-height:650px){body.in-game .game:not(.club-table){--mobile-card-width:min(48vw,30dvh,180px)}}

/* Dragging uses the card itself as feedback, without target outlines. */
body.in-game .game .play-area.drop-ready,body.in-game .game .battle.target,body.in-game .game .hand .card.drag-origin{outline:none!important;background-color:transparent}
.defense-targets{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:18px 0}
.defense-targets button{padding:0;width:90px;min-height:0;background:none;border:0}
.defense-targets img{display:block;width:100%;border-radius:5px}
@media(max-width:900px) and (orientation:portrait){
 body.in-game .game:not(.club-table) .player-dock{z-index:20}
 body.in-game .game:not(.club-table) .multi-controls{position:fixed;bottom:max(8px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(280px,calc(100vw - 32px));z-index:30;filter:drop-shadow(0 3px 8px #0008)}
 body.in-game .game:not(.club-table) .multi-controls button{background:#183125}
}

/* The battle scrolls independently behind the fixed opponent header. */
@media(max-width:900px) and (orientation:portrait){
 body.in-game .game:not(.club-table) .opponents,body.in-game .game:not(.club-table) .table-stats{z-index:12;pointer-events:none}
 body.in-game .game:not(.club-table) .opponents .portrait{pointer-events:auto}
 body.in-game .game:not(.club-table) .play-area{grid-row:1/4!important;grid-column:1;display:block!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;touch-action:pan-y;padding:0!important;z-index:5;scrollbar-width:thin;scrollbar-color:#b49b6266 transparent;mask-image:linear-gradient(to bottom,transparent 70px,rgba(0,0,0,.08) calc(var(--battle-inset,210px) - 72px),#000 var(--battle-inset,210px));-webkit-mask-image:linear-gradient(to bottom,transparent 70px,rgba(0,0,0,.08) calc(var(--battle-inset,210px) - 72px),#000 var(--battle-inset,210px))}
 body.in-game .game:not(.club-table) .battles{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;max-width:none!important;height:auto!important;min-height:100%;box-sizing:border-box;padding:var(--battle-inset,150px) 8px 22px!important;gap:24px 14px!important;transform:none!important;align-content:start;position:relative!important;inset:auto!important}
 body.in-game .game:not(.club-table) .battle{width:100%!important;height:calc((100vw - 94px)*.75 + 18px)!important}
 body.in-game .game:not(.club-table) .battle .card{width:calc(100% - 18px)!important;height:auto!important;aspect-ratio:2/3;opacity:1!important;transform:rotate(-2deg)!important;left:0!important;top:14px!important;box-shadow:0 4px 9px #0007}
 body.in-game .game:not(.club-table) .battle .card.defense{left:18px!important;top:0!important;transform:rotate(2deg)!important}
 body.in-game .game:not(.club-table) .table-empty{grid-column:1/-1;align-self:center;margin:auto;padding-top:60px}
}

@media(max-width:900px) and (orientation:portrait){
 body.in-game .game:not(.club-table)>*{grid-column:1!important}
 body.in-game .game:not(.club-table) .battles{grid-auto-rows:auto!important}
}

/* Shared compact selection control and persistent selection mode notice. */
.game .multi-toggle{flex:0 0 40px!important;width:40px!important;min-width:40px!important;padding:8px!important;display:grid;place-items:center}
.game .multi-toggle svg{width:22px;height:22px;fill:#183125;stroke:currentColor;stroke-width:1.5}
.game .multi-toggle[aria-pressed=true]{color:#f0ce7b;border-color:#d9b86b}
.game .hand-tools:has(.multi-toggle){grid-template-columns:1fr 1fr 40px}
.game .multi-selection-panel{position:fixed;z-index:40;left:50%;bottom:max(8px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(340px,calc(100vw - 32px));padding:9px 12px;background:#10271ff5;border:1px solid #9e895c;border-radius:7px;box-shadow:0 3px 14px #0007;box-sizing:border-box;text-align:center;font:13px/1.3 "Golos Text",sans-serif}
.game .multi-selection-panel>div{display:flex;gap:8px;margin-top:7px}
.game .multi-selection-panel button{height:36px;min-height:36px;padding:4px 10px;white-space:nowrap;font-size:14px}
.game .multi-selection-panel #play-many{flex:1.5}
.game .multi-selection-panel #cancel-many{flex:1}
@media(max-width:900px) and (orientation:portrait){
 body.in-game .game:not(.club-table) .mobile-sort-group{overflow:visible;position:relative;margin-right:46px}
 body.in-game .game:not(.club-table) .mobile-sort-group .multi-toggle{position:absolute;left:calc(100% + 6px);top:-1px;height:40px;border:1px solid #9e895c!important;border-radius:5px!important;background:#183125}
 body.in-game .game:not(.club-table) .battles{grid-template-columns:repeat(2,calc(var(--battle-card-width,117px) + 18px))!important;justify-content:center}
 body.in-game .game:not(.club-table) .battle{height:calc(var(--battle-card-width,117px)*1.5 + 18px)!important}
 body.in-game .game:not(.club-table) .battle .card{width:var(--battle-card-width,117px)!important}
 body.in-game .game:not(.club-table) .play-area.battle-small{grid-row:3!important;mask-image:none!important;-webkit-mask-image:none!important;overflow:hidden!important}
 body.in-game .game:not(.club-table) .battle-small .battles{padding:12px 8px!important;align-content:center}
}

.game .multi-selection-panel{pointer-events:auto}
.game .multi-selection-panel button{background:#183125;color:#e9ddba;border:1px solid #9e895c;border-radius:5px}

/* Symmetric mobile controls and compact right-hand stock information. */
@media(max-width:900px) and (orientation:portrait){
 body.in-game .game:not(.club-table){grid-template-rows:auto 0 minmax(0,1fr) auto var(--mobile-hand-height)!important}
 body.in-game .game:not(.club-table) .opponents{padding-right:72px!important;min-height:124px}
 body.in-game .game:not(.club-table) .table-stats{position:absolute!important;grid-row:auto!important;grid-column:auto!important;top:64px!important;right:0!important;left:auto!important;bottom:auto!important;width:68px!important;height:auto!important;justify-content:center;align-self:auto}
 body.in-game .game:not(.club-table) .supply{flex-direction:column;gap:4px!important;width:100%;height:auto!important;align-items:center;text-align:center}
 body.in-game .game:not(.club-table) .supply>span:not(.supply-cards){font-size:10px;line-height:16px}
 body.in-game .game:not(.club-table) .trump-badge .ui-icon{width:12px;height:14px}
 body.in-game .game:not(.club-table) .mobile-sort-group{margin-right:0;min-width:0}
 body.in-game .game:not(.club-table) .control-stack{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
 body.in-game .game:not(.club-table) .control-stack:has(>.multi-toggle){grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr)}
 body.in-game .game:not(.club-table) .control-stack>.multi-toggle{grid-column:2;grid-row:1;position:static;box-sizing:border-box;height:40px!important;min-height:40px!important;max-height:40px;margin:0;border:1px solid #9e895c;border-radius:5px;background:linear-gradient(#22382b,#14291f);color:#e7dbb6}
 body.in-game .game:not(.club-table) .control-stack .mobile-sort-group{grid-column:1;grid-row:1}
 body.in-game .game:not(.club-table) .control-stack .actions{grid-column:2;grid-row:1;min-width:0}
 body.in-game .game:not(.club-table) .control-stack:has(>.multi-toggle) .actions{grid-column:3}
 body.in-game .game:not(.club-table) .control-stack button{box-sizing:border-box;box-shadow:none}
 body.in-game .game:not(.club-table) #mobile-sort-settings{flex-basis:32px}
 body.in-game .game:not(.club-table) #mobile-sort{font-size:12px;padding-inline:2px}
 body.in-game .game:not(.club-table) .actions button{width:100%;margin:0;font-size:12px}
 body.in-game .game:not(.club-table) .play-area:not(.battle-small){mask-image:linear-gradient(to bottom,transparent 50px,#000 var(--battle-inset,150px),#000 calc(100% - 18px),transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 50px,#000 var(--battle-inset,150px),#000 calc(100% - 18px),transparent 100%)}
}

html.webgl-table .mobile-card-flight,body .mobile-card-flight{opacity:1!important;min-height:0;max-width:none;aspect-ratio:auto;box-shadow:0 5px 12px #0006}
.mobile-sort-group{position:relative}
.game .sort-popover{position:absolute;bottom:calc(100% + 7px);left:0;z-index:50;min-width:180px;display:flex;gap:5px;padding:6px;background:#152c21;border:1px solid #9e895c;border-radius:6px;box-shadow:0 5px 15px #0007;animation:sort-open .16s ease-out}
.game .sort-popover button{width:auto!important;flex:1;white-space:nowrap;height:38px!important;min-height:38px!important;font-size:12px;padding:5px 9px;color:#e7dbb6;background:#21382a;border:1px solid #756b4d;border-radius:4px}
@keyframes sort-open{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:901px),(orientation:landscape){
 .game:not(.club-table) .sort-label,.game:not(.club-table) .hand-tools{display:none!important}
 .game:not(.club-table) .control-stack{grid-template-columns:minmax(0,1fr);grid-template-rows:42px auto;gap:7px}
 .game:not(.club-table) .control-stack:has(>.multi-toggle){grid-template-columns:minmax(0,1fr) 40px}
 .game:not(.club-table) .mobile-sort-group{display:flex!important;grid-column:1;grid-row:1;height:42px;min-width:0;border:1px solid #9e895c;border-radius:5px;background:linear-gradient(#22382b,#14291f)}
 .game:not(.club-table) .mobile-sort-group>button{display:block;min-height:0;height:40px;background:none;color:#e7dbb6;border:0;padding:5px 10px;font-size:15px}
 .game:not(.club-table) #mobile-sort{flex:1;order:2}
 .game:not(.club-table) #mobile-sort-settings{width:40px;order:1;border-right:1px solid #9e895c55}
 .game:not(.club-table) #mobile-sort-settings svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5}
 .game:not(.club-table) .control-stack>.multi-toggle{grid-column:2;grid-row:1;height:42px;min-height:42px;background:#183125;border:1px solid #9e895c;border-radius:5px;color:#e7dbb6}
 .game:not(.club-table) .actions{grid-column:1/-1;grid-row:2}
}
@media(prefers-reduced-motion:reduce){.game .sort-popover{animation:none}}

@media(min-width:901px),(orientation:landscape){
 body.in-game .game:not(.club-table) .control-stack{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:42px auto!important}
 body.in-game .game:not(.club-table) .control-stack:has(>.multi-toggle){grid-template-columns:minmax(0,1fr) 40px!important}
 body.in-game .game:not(.club-table) .mobile-sort-group{grid-column:1!important;grid-row:1!important;overflow:visible!important}
 body.in-game .game:not(.club-table) .control-stack>.multi-toggle{grid-column:2!important;grid-row:1!important}
 body.in-game .game:not(.club-table) .actions{grid-column:1/-1!important;grid-row:2!important}
}
@media(max-width:900px) and (orientation:portrait){body.in-game .game:not(.club-table) .mobile-sort-group{overflow:visible!important}}

.mobile-stock-count,.mobile-trump-preview{display:none}
@media(max-width:900px) and (orientation:portrait){
 body.in-game .game:not(.club-table) .supply>.desktop-stock-count,body.in-game .game:not(.club-table) .supply>.discard-count{display:none}
 body.in-game .game:not(.club-table) .supply>.mobile-stock-count{display:block;order:0}
 body.in-game .game:not(.club-table) .supply>.trump-badge{order:1}
 body.in-game .game:not(.club-table) .mobile-trump-preview{display:block;order:2;width:27px;height:40.5px;object-fit:contain;border-radius:2px;box-shadow:0 2px 4px #0005;margin:1px auto 0}
 body.in-game .game:not(.club-table) .control-stack{grid-template-rows:40px;align-items:start}
 body.in-game .game:not(.club-table) .control-stack>.mobile-sort-group,body.in-game .game:not(.club-table) .control-stack>.multi-toggle,body.in-game .game:not(.club-table) .control-stack>.actions{box-sizing:border-box;height:40px!important;min-height:40px!important;max-height:40px!important;align-self:start;margin-top:0!important;margin-bottom:0!important}
 body.in-game .game:not(.club-table) .actions>button{box-sizing:border-box;height:40px!important;min-height:40px!important;max-height:40px!important;transform:none!important;translate:none!important;align-self:start;margin:0!important;vertical-align:top}
}
