/* Compact reserves have one owner. Geometry comes from reserve-layout.mjs;
   only the playable hand gets placement targets. Never allocate space to an
   empty hand unless it carries a live player's name or clock. */
@layer screens {
 body[data-reserve-sizing=compact] #banks.reserve-dock{container:reserves / inline-size;display:flex!important;flex-direction:column!important;flex:none!important;align-self:center!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;margin:0!important;padding:0!important;gap:0!important;border:0!important;border-radius:12px 12px 0 0!important;background:var(--ui-surface)!important;overflow:hidden!important;box-shadow:none!important}
 body[data-reserve-sizing=compact] #banks>.bank-side{display:flex!important;flex-direction:column!important;align-items:stretch!important;flex:none!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:hidden!important}
 body[data-reserve-sizing=compact] #banks .player-card{display:flex!important;align-items:center!important;order:-1!important;gap:6px!important;flex:none!important;height:28px!important;min-height:28px!important;width:auto!important;padding:2px 10px!important;box-sizing:border-box!important;background:transparent!important;color:var(--ui-ink)!important;box-shadow:none!important;opacity:1!important}
 body[data-reserve-sizing=compact] #banks .side-disc{display:none!important}
 body[data-reserve-sizing=compact] #banks .reserve-controller{display:block!important;flex:1!important;min-width:0!important;width:auto!important;height:24px!important;min-height:24px!important;padding:0!important;margin:0!important;border:0!important;background:transparent!important;color:inherit!important;font-family:inherit!important;font-size:14px!important;font-weight:600!important;line-height:24px!important;text-align:left!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;opacity:1!important}
 body[data-reserve-sizing=compact] #banks .reserve-controller::before{content:''!important;display:inline-block!important;width:8px!important;height:8px!important;margin:0 5px 0 0!important;border:1px solid var(--ui-muted)!important;border-radius:50%!important;background:#f6f2e7!important;vertical-align:baseline!important}
 body[data-reserve-sizing=compact] #banks .black-player .reserve-controller::before{background:#20252b!important}
 body[data-reserve-sizing=compact] #banks .reserve-controller::after{display:none!important}
 body[data-reserve-sizing=compact] #banks .player-status{display:block!important;flex:none!important;min-height:0!important;margin:0!important;color:var(--ui-muted)!important;font-size:12px!important;font-weight:600!important;line-height:18px!important;white-space:nowrap!important}
 body[data-reserve-sizing=compact] #banks .player-card.active .player-status{padding:0 5px!important;border-radius:4px!important;background:var(--ui-primary)!important;color:var(--ui-on-primary)!important}
 body[data-reserve-sizing=compact] #banks .player-status:empty{display:none!important}
 body[data-reserve-sizing=compact] #banks .footer-clock{margin:0!important;min-width:0!important;padding:0 5px!important;background:var(--ui-hover)!important;color:var(--ui-ink)!important;border-radius:4px!important;font-size:14px!important;line-height:22px!important;font-variant-numeric:tabular-nums!important;opacity:1!important;box-shadow:none!important}
 body[data-reserve-sizing=compact] #banks .footer-clock.ticking{background:var(--ui-primary)!important;color:var(--ui-on-primary)!important}
 body[data-reserve-sizing=compact]:not(.has-match-clock) #banks .footer-clock{display:none!important}
 body[data-reserve-sizing=compact] #banks [data-reserve-role=hand]{order:1!important}
 body[data-reserve-sizing=compact] #banks [data-reserve-role=hand] .tray{display:flex!important;justify-content:center!important;flex:none!important;width:100%!important;padding:0 6px 2px!important;box-sizing:border-box!important;min-height:0!important;overflow:visible!important}
 body[data-reserve-sizing=compact] #banks [data-reserve-role=hand] .tray>svg{display:block!important;position:static!important;flex:none!important;width:calc(var(--reserve-types)*50px + 8px)!important;max-width:100%!important;height:64px!important;min-height:64px!important;max-height:64px!important;aspect-ratio:auto!important;overflow:visible!important}
 body[data-reserve-sizing=compact] #banks [data-reserve-role=summary]{order:0!important;display:grid!important;grid-template-columns:minmax(58px,80px) minmax(0,1fr)!important;align-items:center!important;background:var(--ui-hover)!important;min-height:38px!important;padding:0 4px!important;box-sizing:border-box!important}
 body[data-reserve-sizing=compact] #banks [data-reserve-role=summary] .player-card{padding:2px 5px!important;max-width:none!important}
 body[data-reserve-sizing=compact] #banks [data-reserve-role=summary] .player-status{display:none!important}
 body[data-reserve-sizing=compact] #banks [data-reserve-role=summary] .tray{display:none!important}
 body[data-reserve-sizing=compact] #banks [data-reserve-role=summary] .reserve-summary{display:grid!important;grid-template-columns:repeat(var(--reserve-types),minmax(0,34px))!important;justify-content:start!important;align-items:center!important;gap:2px!important;min-height:40px!important;padding:2px 5px!important;box-sizing:border-box!important}
 .reserve-mini{display:flex;position:relative;justify-content:center;align-items:center;min-width:0;height:38px;color:var(--ui-ink)}
 .reserve-mini>span:first-child{display:block;width:100%;max-width:34px;height:37px}
 .reserve-mini svg{display:block;width:100%;height:100%;overflow:visible}
 .reserve-mini>span:last-child{position:absolute;top:0;right:-1px;min-width:14px;height:14px;box-sizing:border-box;padding:0 2px;border-radius:4px;background:var(--ui-surface);box-shadow:0 0 0 1px var(--ui-line);color:var(--ui-ink);font-size:11px;font-weight:650;line-height:14px;text-align:center}
 body[data-reserve-sizing=compact] #banks [data-reserve-role=hand] .reserve-summary{display:none!important}
 body[data-reserve-sizing=compact] #banks .empty-reserve .tray{display:none!important}
 body[data-reserve-sizing=compact]:not(.online-game):not(.has-match-clock) #banks .empty-reserve{display:none!important}
 body[data-reserve-sizing=compact]:not(.online-game):not(.has-match-clock) #banks.empty-players{display:none!important}
 body[data-reserve-sizing=compact] #banks .bank-side.empty-reserve{min-height:28px!important}
 /* One to three bugs share the label's row. A pair of grasshoppers gets a
    small hand, never a giant stretched tile and an empty enemy card. */
 body[data-reserve-sizing=compact] #banks [data-reserve-role=hand]:is([data-reserve-count="1"],[data-reserve-count="2"],[data-reserve-count="3"]){flex-direction:row!important;align-items:center!important;justify-content:space-between!important}
 body[data-reserve-sizing=compact] #banks [data-reserve-role=hand]:is([data-reserve-count="1"],[data-reserve-count="2"],[data-reserve-count="3"]) .player-card{flex:1!important;flex-wrap:wrap!important;height:auto!important;max-width:190px!important}
 body[data-reserve-sizing=compact] #banks [data-reserve-role=hand]:is([data-reserve-count="1"],[data-reserve-count="2"],[data-reserve-count="3"]) .tray{width:calc(var(--reserve-types)*50px + 20px)!important;max-width:60%!important}
 /* Mobile bottom compact uses one strip for a sparse hand, as desktop does.
    The opponent is a count summary; the playable side keeps real tap targets. */
 body.phone-shell:not([data-landscape=true])[data-reserve-sizing=compact] #banks [data-reserve-role=summary]{min-height:30px!important;grid-template-columns:minmax(62px,90px) minmax(0,1fr)!important}
 body.phone-shell:not([data-landscape=true])[data-reserve-sizing=compact] #banks [data-reserve-role=summary] .reserve-summary{grid-template-columns:repeat(var(--reserve-types),minmax(0,28px))!important;gap:1px!important;min-height:30px!important;padding:0 4px!important}
 body.phone-shell:not([data-landscape=true])[data-reserve-sizing=compact] #banks [data-reserve-role=summary] .reserve-mini{height:28px!important}
 body.phone-shell:not([data-landscape=true])[data-reserve-sizing=compact] #banks [data-reserve-role=summary] .reserve-mini>span:first-child{height:28px!important}
 body.phone-shell:not([data-landscape=true])[data-reserve-sizing=compact] #banks [data-reserve-role=hand]{padding:0!important;align-items:stretch!important}
 body.phone-shell:not([data-landscape=true])[data-reserve-sizing=compact] #banks [data-reserve-role=hand] .player-card{height:24px!important;min-height:24px!important;padding:0 6px!important;max-width:none!important;flex-wrap:nowrap!important}
 body.phone-shell:not([data-landscape=true])[data-reserve-sizing=compact] #banks [data-reserve-role=hand] .tray{width:100%!important;max-width:100%!important;margin:0!important;padding:0 6px!important}
 body.phone-shell:not([data-landscape=true])[data-reserve-sizing=compact] #banks [data-reserve-role=hand] .tray>svg{width:calc(var(--reserve-types)*44.148148px + 8px)!important;height:64px!important}
 body.phone-shell:not([data-landscape=true])[data-reserve-sizing=compact] #banks [data-reserve-role=hand]:is([data-reserve-count="5"],[data-reserve-count="6"],[data-reserve-count="7"],[data-reserve-count="8"]){position:static!important}
 body.phone-shell:not([data-landscape=true]).has-match-clock[data-reserve-sizing=compact] #banks .footer-clock{font-size:12px!important}
 /* Full hands put both player labels in the summary band. The hand itself
    takes one row; on very narrow phones it scrolls rather than shrinking taps. */
 body.phone-shell:not([data-landscape=true])[data-reserve-sizing=compact] #banks:has([data-reserve-role=hand]:is([data-reserve-count="5"],[data-reserve-count="6"],[data-reserve-count="7"],[data-reserve-count="8"])){position:relative!important;border-radius:12px!important}
 body.phone-shell:not([data-landscape=true])[data-reserve-sizing=compact] #banks:has([data-reserve-role=hand]:is([data-reserve-count="5"],[data-reserve-count="6"],[data-reserve-count="7"],[data-reserve-count="8"])) [data-reserve-role=summary]{grid-template-columns:minmax(62px,80px) minmax(0,1fr)!important;padding-right:90px!important}
 body.phone-shell:not([data-landscape=true])[data-reserve-sizing=compact] #banks [data-reserve-role=hand]:is([data-reserve-count="5"],[data-reserve-count="6"],[data-reserve-count="7"],[data-reserve-count="8"]) .player-card{position:absolute!important;top:0!important;right:0!important;width:90px!important;height:30px!important;min-height:30px!important;gap:4px!important;font-size:12px!important}
 body.phone-shell:not([data-landscape=true])[data-reserve-sizing=compact] #banks [data-reserve-role=hand]:is([data-reserve-count="5"],[data-reserve-count="6"],[data-reserve-count="7"],[data-reserve-count="8"]) .player-status{display:none!important}
 body.phone-shell:not([data-landscape=true])[data-reserve-sizing=compact] #banks [data-reserve-role=hand]:is([data-reserve-count="5"],[data-reserve-count="6"],[data-reserve-count="7"],[data-reserve-count="8"]) .tray{overflow-x:auto!important;overflow-y:hidden!important;touch-action:pan-x!important;justify-content:flex-start!important;scrollbar-width:thin}
 body.phone-shell:not([data-landscape=true])[data-reserve-sizing=compact] #banks [data-reserve-role=hand]:is([data-reserve-count="5"],[data-reserve-count="6"],[data-reserve-count="7"],[data-reserve-count="8"]) .tray>svg{max-width:none!important;touch-action:pan-x!important;margin-inline:auto!important}
 body.phone-shell:not([data-landscape=true]).has-match-clock[data-reserve-sizing=compact] #banks:has([data-reserve-role=hand]:is([data-reserve-count="5"],[data-reserve-count="6"],[data-reserve-count="7"],[data-reserve-count="8"])) [data-reserve-role=summary]{grid-template-columns:110px minmax(0,1fr)!important;padding-right:110px!important}
 body.phone-shell:not([data-landscape=true]).has-match-clock[data-reserve-sizing=compact] #banks [data-reserve-role=hand]:is([data-reserve-count="5"],[data-reserve-count="6"],[data-reserve-count="7"],[data-reserve-count="8"]) .player-card{width:110px!important}
 body.phone-shell:not([data-landscape=true]).has-match-clock[data-reserve-sizing=compact] #banks .reserve-controller{font-size:12px!important}
 body.phone-shell:not([data-landscape=true])[data-reserve-sizing=compact] #banks [data-reserve-role=hand]:is([data-reserve-count="5"],[data-reserve-count="6"],[data-reserve-count="7"],[data-reserve-count="8"]) .reserve-controller[data-you=true]{font-size:0!important}
 body.phone-shell:not([data-landscape=true])[data-reserve-sizing=compact] #banks [data-reserve-role=hand]:is([data-reserve-count="5"],[data-reserve-count="6"],[data-reserve-count="7"],[data-reserve-count="8"]) .reserve-controller[data-you=true]::after{content:'You'!important;display:inline!important;font-size:12px!important}
 body.phone-shell:not([data-landscape=true])[data-reserve-sizing=compact] #banks:has([data-reserve-role=hand]:is([data-reserve-count="1"],[data-reserve-count="2"],[data-reserve-count="3"],[data-reserve-count="4"])){container-type:normal!important;display:grid!important;grid-template-columns:minmax(84px,1fr) minmax(0,60%)!important;align-items:center!important;border-radius:12px!important}
 body.phone-shell:not([data-landscape=true])[data-reserve-sizing=compact] #banks:has([data-reserve-role=hand]:is([data-reserve-count="1"],[data-reserve-count="2"],[data-reserve-count="3"],[data-reserve-count="4"]))>.bank-side{width:100%!important;align-self:stretch!important}
 body.phone-shell:not([data-landscape=true])[data-reserve-sizing=compact] #banks:has([data-reserve-role=hand]:is([data-reserve-count="1"],[data-reserve-count="2"],[data-reserve-count="3"],[data-reserve-count="4"])) [data-reserve-role=summary]{grid-template-columns:1fr!important;align-content:center!important;border-right:1px solid var(--ui-line)!important}
 body.phone-shell:not([data-landscape=true])[data-reserve-sizing=compact] #banks:has([data-reserve-role=hand]:is([data-reserve-count="1"],[data-reserve-count="2"],[data-reserve-count="3"],[data-reserve-count="4"])) .reserve-summary{grid-template-columns:repeat(min(var(--reserve-types),4),minmax(0,28px))!important;justify-content:center!important}
 body.phone-shell:not([data-landscape=true])[data-reserve-sizing=compact] #banks [data-reserve-role=hand]:is([data-reserve-count="1"],[data-reserve-count="2"],[data-reserve-count="3"],[data-reserve-count="4"]){flex-direction:column!important;justify-content:center!important}
 body.phone-shell:not([data-landscape=true])[data-reserve-sizing=compact] #banks [data-reserve-role=hand]:is([data-reserve-count="1"],[data-reserve-count="2"],[data-reserve-count="3"],[data-reserve-count="4"]) .tray{width:100%!important;max-width:100%!important}
 /* Sheet replaces reserves. The drawer is the single scroll container. */
 /* Analysis owns this space even when a small hand selects the compact grid. */
 body.phone-shell:is([data-mobile-panel=moves],[data-mobile-panel=openings],[data-mobile-panel=position],[data-mobile-panel=edge]) #banks.reserve-dock,
 body.phone-shell[data-screen=mobile][data-reserve-sizing=compact]:is([data-mobile-panel=moves],[data-mobile-panel=openings],[data-mobile-panel=position],[data-mobile-panel=edge]) #banks.reserve-dock{display:none!important}
 body.phone-shell.normal-online[data-strategy-open] #banks.reserve-dock{display:none!important}
 body.phone-shell .panel-rail-left.drawer-open .drawer-content{min-height:0!important;overflow-y:auto!important;touch-action:pan-y!important}
 body.phone-shell .panel-rail-left #strategy-panel :is(.tactics-panel,.tactics-body,.tactics-help){flex:none!important;height:auto!important;max-height:none!important;overflow:visible!important;touch-action:pan-y!important}
 body.phone-shell .panel-rail-left #strategy-panel{height:auto!important;max-height:none!important;overflow:visible!important}
 body.phone-shell:not([data-landscape=true]) .panel-rail-left.drawer-open{border-radius:14px 14px 0 0!important;border-bottom:0!important}
 body.phone-shell:not([data-landscape=true]) .board-footer{margin-top:4px!important;border-radius:12px!important;border:1px solid var(--ui-line)!important;background:var(--panel)!important;box-shadow:none!important;padding-block:4px!important}
 body.phone-shell:not([data-landscape=true]) #banks{border-radius:12px 12px 0 0!important}
 body.phone-shell:not([data-landscape=true]) .board-footer .footer-actions{border-radius:inherit!important}
 /* Desktop bottom compact is one strip, rather than two stacked cards.
    The side dock and all phone layouts keep their existing geometry. */
 body[data-screen=desktop][data-reserve-sizing=compact]:not([data-reserves=left]) #banks.reserve-dock{container-type:normal!important;flex-direction:row!important;align-items:center!important;width:fit-content!important;max-width:100%!important;border-radius:12px!important}
 body[data-screen=desktop][data-reserve-sizing=compact]:not([data-reserves=left]) #banks>.bank-side{width:auto!important;flex:0 1 auto!important;min-height:72px!important}
 body[data-screen=desktop][data-reserve-sizing=compact]:not([data-reserves=left]) #banks [data-reserve-role=summary]{grid-template-columns:80px minmax(0,1fr)!important;align-self:stretch!important;padding:4px!important;border-right:1px solid var(--ui-line)!important}
 body[data-screen=desktop][data-reserve-sizing=compact]:not([data-reserves=left]) #banks [data-reserve-role=summary] .reserve-summary{grid-template-columns:repeat(var(--reserve-types),minmax(0,28px))!important;gap:1px!important;padding:2px!important}
 body[data-screen=desktop][data-reserve-sizing=compact]:not([data-reserves=left]) #banks [data-reserve-role=hand]{flex-direction:row!important;align-items:center!important;padding:4px!important}
 body[data-screen=desktop][data-reserve-sizing=compact]:not([data-reserves=left]) #banks [data-reserve-role=hand] .player-card{flex:0 1 104px!important;max-width:104px!important;min-width:64px!important;flex-wrap:wrap!important;height:auto!important;padding:2px 6px!important;gap:0 4px!important}
 body[data-screen=desktop][data-reserve-sizing=compact]:not([data-reserves=left]) #banks [data-reserve-role=hand] .reserve-controller{flex:1 0 100%!important}
 body[data-screen=desktop][data-reserve-sizing=compact]:not([data-reserves=left]) #banks [data-reserve-role=hand] .tray{width:calc(var(--reserve-types)*44.148148px + 20px)!important;max-width:none!important;flex:0 1 auto!important;margin:0!important;padding:0 6px!important}
 body[data-screen=desktop][data-reserve-sizing=compact]:not([data-reserves=left]) #banks [data-reserve-role=hand] .tray>svg{width:calc(var(--reserve-types)*44.148148px + 8px)!important}
 /* Narrow side docks use two rows for full hands. Every bug stays visible;
    reserve-layout supplies matching geometry and single rows for small hands. */
 body[data-reserve-sizing=compact][data-reserves=left] #banks.reserve-dock,
 body.phone-shell[data-landscape=true][data-reserve-sizing=compact] #banks.reserve-dock{width:100%!important;align-self:start!important;border-radius:10px!important}
 body[data-reserve-sizing=compact][data-reserves=left] #banks .tray,
 body.phone-shell[data-landscape=true][data-reserve-sizing=compact] #banks .tray{justify-content:center!important;overflow:visible!important;touch-action:manipulation!important}
 body[data-reserve-sizing=compact][data-reserves=left] #banks [data-reserve-rows="2"] .tray>svg,
 body.phone-shell[data-landscape=true][data-reserve-sizing=compact] #banks [data-reserve-rows="2"] .tray>svg{width:280px!important;max-width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:350 / 184!important}
 body[data-reserve-sizing=compact][data-reserves=left] #banks [data-reserve-role=summary],
 body.phone-shell[data-landscape=true][data-reserve-sizing=compact] #banks [data-reserve-role=summary]{grid-template-columns:1fr!important}
 /* Full names sit above the miniatures in a narrow dock. The pieces stay
    together instead of spreading a sparse hand across four empty columns. */
 @container reserves (max-width:360px){
  body[data-screen=desktop][data-reserve-sizing=compact] #banks [data-reserve-role=summary],
  body.phone-shell[data-landscape=true][data-reserve-sizing=compact] #banks [data-reserve-role=summary]{grid-template-columns:1fr!important}
 }
 @container reserves (max-width:250px){
  body[data-reserve-sizing=compact] #banks .reserve-summary:has(.reserve-mini:nth-child(5)){grid-template-columns:repeat(4,minmax(0,34px))!important}
 }
 @media(max-width:359px){
  body.phone-shell:not([data-landscape=true]).has-match-clock[data-reserve-sizing=compact] #banks:has([data-reserve-role=hand]:is([data-reserve-count="5"],[data-reserve-count="6"],[data-reserve-count="7"],[data-reserve-count="8"])) [data-reserve-role=summary]{grid-template-columns:76px minmax(0,1fr)!important;padding-right:84px!important;min-height:52px!important}
  body.phone-shell:not([data-landscape=true]).has-match-clock[data-reserve-sizing=compact] #banks:has([data-reserve-role=hand]:is([data-reserve-count="5"],[data-reserve-count="6"],[data-reserve-count="7"],[data-reserve-count="8"])) .player-card{flex-direction:column!important;justify-content:center!important;height:52px!important;min-height:52px!important;width:84px!important;gap:0!important}
  body.phone-shell:not([data-landscape=true]).has-match-clock[data-reserve-sizing=compact] #banks:has([data-reserve-role=hand]:is([data-reserve-count="5"],[data-reserve-count="6"],[data-reserve-count="7"],[data-reserve-count="8"])) .reserve-controller{flex:none!important;width:100%!important;text-align:center!important}
 }
}