body.desktop-match-fit #matchView{height:calc(100dvh - var(--match-top,102px) - 8px);grid-template-rows:38px var(--room-height,0px) 30px minmax(0,1fr) var(--readable-hand-height,clamp(210px,31dvh,238px)) 48px;gap:6px}body.desktop-match-fit #board{padding:6px;gap:10px}body.desktop-match-fit .handarea{grid-template-rows:25px minmax(0,1fr)}body.desktop-match-fit .handhead h2{font-size:17px;margin:0}body.desktop-match-fit #hand{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(var(--hand-rows,2),minmax(0,1fr));gap:8px;padding:0;overflow:visible}body.desktop-match-fit #hand .hand-card-item{width:auto;height:auto;min-width:0;position:relative;padding:6px;border:1px solid #3a665d;border-radius:12px;background:linear-gradient(135deg,#16382f,#10232c);display:block}body.desktop-match-fit #hand .hand-card-item:has([aria-pressed=true]){border:2px solid #55f4ae;background:#1d4a3c}body.desktop-match-fit #hand [data-select]{display:grid;grid-template-columns:58px minmax(0,1fr);gap:8px;align-items:start;width:100%;height:100%;text-align:left;color:#f3faf8}body.desktop-match-fit #hand .card{width:58px;height:87px;transform:none;margin:0;pointer-events:none}body.desktop-match-fit #hand .card .cardbody,body.desktop-match-fit #hand .card .energy-blocked{display:none}body.desktop-match-fit #hand .card .art{height:100%}body.desktop-match-fit #hand .card .badges{display:none}.hand-readable{display:grid;gap:5px;min-width:0;padding-top:2px}.hand-readable strong{font-size:14px;line-height:1.12;min-height:29px}.hand-stats{display:flex;gap:5px;align-items:center;font-size:13px;font-weight:800}.hand-stats>span{background:#194568;border:1px solid #509ac5;border-radius:7px;padding:3px 6px}.hand-stats>span+span{background:#684628;border-color:#c49b53}.hand-readable small{font-size:11px;color:#b7d8cf;line-height:1.1}.hand-readable .hand-ability{color:#e8d095;font-size:11px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 45px)}body.desktop-match-fit #hand .card-quick-detail{position:absolute;right:6px;bottom:6px;width:50px;height:23px;min-height:23px;font-size:10px;padding:2px;background:#1b3e48;border:1px solid #456e76;border-radius:5px}body.desktop-match-fit .controls .hint{font-size:12px;max-width:58%;line-height:1.2}body.desktop-match-fit .controls button{min-height:39px;font-size:14px}body.desktop-match-fit .topbar .chip{display:none}body.desktop-match-fit .nav{justify-content:flex-start}body.desktop-match-fit .nav button{max-width:180px}
body.desktop-match-fit #hand [data-select]:focus-visible,body.desktop-match-fit #hand .card-quick-detail:focus-visible{outline:3px solid #9fffd5;outline-offset:2px}body.desktop-match-fit #hand .card.unaffordable{opacity:.65}body.desktop-match-fit #hand .hand-card-item:has(.unaffordable) .hand-stats>span:first-child{background:#592938;border-color:#e2839b}body.desktop-match-fit #hand .hand-card-item:has(.unaffordable) .hand-stats>span:first-child::after{content:" !"}body.desktop-match-fit #onlineBanner{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
@media(max-height:700px){body.desktop-match-fit .hand-readable{gap:3px;padding-top:0}body.desktop-match-fit .hand-readable strong{font-size:12px;min-height:24px}body.desktop-match-fit .hand-stats{font-size:11px}body.desktop-match-fit .hand-stats>span{padding:2px 4px}body.desktop-match-fit .hand-readable small{font-size:10px}body.desktop-match-fit #hand [data-select]{grid-template-columns:48px minmax(0,1fr);gap:6px}body.desktop-match-fit #hand .card{width:48px;height:72px}body.desktop-match-fit #hand .card-quick-detail{height:20px;min-height:20px;font-size:9px;width:42px}}

body.desktop-match-fit #board .slot,body.desktop-match-fit #board .minicard,body.desktop-match-fit #board .minicard.realplayer{height:100%;width:auto;max-width:100%;aspect-ratio:2/3}

/* Adaptive hand: large portraits for one row, compact for two rows. */
body.desktop-match-fit.single-hand #hand .hand-card-item{padding:12px;display:flex;align-items:center}body.desktop-match-fit.single-hand #hand [data-select]{grid-template-columns:108px minmax(0,1fr);align-items:center;gap:12px;height:100%}body.desktop-match-fit.single-hand #hand .card{width:108px;height:162px}body.desktop-match-fit.single-hand .hand-readable{gap:10px}body.desktop-match-fit.single-hand .hand-readable strong{font-size:16px;min-height:36px;line-height:1.15}body.desktop-match-fit.single-hand .hand-stats{font-size:15px;gap:6px}body.desktop-match-fit.single-hand .hand-stats>span{padding:5px 7px}body.desktop-match-fit.single-hand .hand-readable small{font-size:13px;line-height:1.25}body.desktop-match-fit.single-hand .hand-readable .hand-ability{white-space:normal;max-width:100%;font-size:13px}body.desktop-match-fit.single-hand #hand .card-quick-detail{font-size:12px;height:28px;min-height:28px;width:64px;right:12px;bottom:9px}body.desktop-match-fit.single-hand .hand-readable{gap:6px;align-self:start;margin-top:12px}body.desktop-match-fit.single-hand .hand-stats{font-size:13px;gap:4px;white-space:nowrap}body.desktop-match-fit.single-hand .hand-stats>span{padding:4px 5px;flex:0 0 auto}body.desktop-match-fit.single-hand .hand-readable .hand-ability{font-size:12px;line-height:16px;max-height:32px;overflow:hidden}
/* Keep the values centered in every card size and every shared card view. */
.card .badge,.minicard .mini-cost,.minicard .num,.guide-key .badge{display:grid!important;place-items:center;padding:0!important;line-height:1;text-align:center;font-family:Arial,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:0}
.card .badge,.guide-key .badge{position:relative}
.card .badge>.orb-value,.minicard .mini-cost>.orb-value,.minicard .num>.orb-value{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:0;line-height:1;font:inherit;letter-spacing:0;transform:none;min-width:0;white-space:nowrap}
body.desktop-match-fit.single-hand #hand .card-quick-detail{bottom:8px}
@media(max-width:1400px){body.desktop-match-fit.single-hand #hand [data-select]{grid-template-columns:80px minmax(0,1fr);gap:8px}body.desktop-match-fit.single-hand #hand .card{width:80px;height:120px}body.desktop-match-fit.single-hand #hand .hand-card-item{padding:8px}body.desktop-match-fit.single-hand .hand-readable{margin-top:5px;gap:5px}body.desktop-match-fit.single-hand .hand-readable strong{font-size:14px;min-height:32px}body.desktop-match-fit.single-hand .hand-readable small{font-size:11px}body.desktop-match-fit.single-hand .hand-stats{font-size:11px}body.desktop-match-fit.single-hand .hand-stats>span{padding:3px 4px}body.desktop-match-fit.single-hand #hand .card-quick-detail{font-size:10px;height:23px;min-height:23px;width:50px;right:7px}}
@media(max-width:1150px),(max-height:700px){body.desktop-match-fit.single-hand #hand [data-select]{grid-template-columns:65px minmax(0,1fr);gap:6px}body.desktop-match-fit.single-hand #hand .card{width:65px;height:98px}body.desktop-match-fit.single-hand .hand-readable{gap:4px;margin-top:0}body.desktop-match-fit.single-hand .hand-readable strong{font-size:12px;min-height:27px}body.desktop-match-fit.single-hand .hand-stats{font-size:10px;gap:3px}body.desktop-match-fit.single-hand .hand-stats>span{padding:3px}body.desktop-match-fit.single-hand .hand-readable small{font-size:10px}body.desktop-match-fit.single-hand .hand-readable .hand-ability{font-size:10px;line-height:12px;max-height:24px}}
/* Short PC screens keep enough space for the field and the turn controls. */
body.desktop-match-fit #hand{align-items:stretch}
@media(max-height:700px){
 body.desktop-match-fit #matchView{grid-template-rows:38px var(--room-height,0px) 30px minmax(0,1fr) 180px 48px}
 body.desktop-match-fit.single-hand #matchView{grid-template-rows:38px var(--room-height,0px) 30px minmax(0,1fr) 145px 48px}
 body.desktop-match-fit .lane{grid-template-rows:26px 12px minmax(0,1fr) 20px 12px minmax(0,1fr) 14px}
 body.desktop-match-fit.single-hand .hand-readable .hand-ability{display:none}
 body.desktop-match-fit:not(.single-hand) #hand .hand-card-item{padding:4px}
 body.desktop-match-fit:not(.single-hand) #hand [data-select]{grid-template-columns:38px minmax(0,1fr);gap:5px}
 body.desktop-match-fit:not(.single-hand) #hand .card{width:38px;height:57px}
 body.desktop-match-fit:not(.single-hand) .hand-readable{gap:2px}
 body.desktop-match-fit:not(.single-hand) .hand-readable>small:not(.hand-ability){display:none}
 body.desktop-match-fit:not(.single-hand) .hand-readable .hand-ability{max-width:calc(100% - 34px)}
 body.desktop-match-fit:not(.single-hand) #hand .card-quick-detail{width:38px;right:4px;bottom:4px;height:18px;min-height:18px;font-size:8px}
}
@media(max-height:700px){
 body.desktop-match-fit .board .mini-cost,body.desktop-match-fit .board .num{width:clamp(10px,calc(var(--field-card-height)*.22),18px);height:clamp(10px,calc(var(--field-card-height)*.22),18px);font-size:clamp(7px,calc(var(--field-card-height)*.13),11px);top:1px}
 body.desktop-match-fit .board .mini-cost{left:1px}
 body.desktop-match-fit .board .num{right:1px}
 body.desktop-match-fit .board .mini-caption{padding:1px;min-height:0}
 body.desktop-match-fit .board .mini-caption .name,body.desktop-match-fit .board .mini-identity,body.desktop-match-fit .board .synergy{display:none}
}

.hand-stats>span{display:inline-flex;align-items:center;justify-content:center;gap:3px;min-width:0}.hand-stats .modern-symbol{padding:0!important;border:0!important;background:none!important;flex:0 0 auto}.hand-stats .modern-icon{width:14px!important;height:14px!important;max-width:14px!important}.hand-stats{flex-wrap:wrap}.hand-readable strong{overflow-wrap:anywhere}