/* Full finished artwork: preserve its proportions at every viewport size.
   Positioning the image absolutely also avoids intrinsic image dimensions
   changing the board's grid tracks on mobile Safari. */
.card-front{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;border-radius:inherit;pointer-events:none;user-select:none;-webkit-user-select:none}
.card:not(.back):not(.empty)::before{display:none}
.collection-item .card,.revealed-book .card{aspect-ratio:870/1214}
.detail-preview.card{height:auto;aspect-ratio:870/1214}
/* The border, shadow, click target and artwork share one rigid rectangle. */
#board .card,#hand .card{width:var(--physical-card-width,50px)!important;height:var(--physical-card-height,69.77px)!important;min-width:0;max-width:none!important;min-height:0;align-self:center;justify-self:center;flex:0 0 auto;border:0;aspect-ratio:870/1214}
#aiHand i{width:auto;aspect-ratio:870/1214;flex-shrink:0;border:0}
.collection-item .card,.revealed-book .card,.detail-preview.card{border:0}

/* The table wraps a tightly spaced grid instead of stretching its rows. */
.stage{position:relative}
body .table,body.topview .table{position:absolute!important;inset:auto!important;left:50%!important;top:50%!important;width:var(--table-width,90%)!important;height:var(--table-height,90%)!important;max-width:none!important;transform:translate(-50%,-50%) rotateX(20deg);border-radius:45px}
body.topview .table{transform:translate(-50%,-50%)}
.table:before{border-radius:30px}
body #board,body #board.draft,body #insertLayer{inset:auto!important;left:var(--shelf-left)!important;top:var(--shelf-top)!important;width:var(--shelf-width);height:var(--shelf-height);gap:var(--shelf-gap)}
.board-insert.left,.board-insert.right{top:calc((100% + var(--shelf-gap))/4 * var(--row) + (100% - 3 * var(--shelf-gap))/8)}
.board-insert.top,.board-insert.bottom{left:calc((100% + var(--shelf-gap))/4 * var(--col) + (100% - 3 * var(--shelf-gap))/8)}
@media(min-width:751px) and (pointer:fine),(min-width:951px){
 .stage{height:clamp(480px,68vh,1100px)}
 main{max-width:2400px}
 #hand{height:clamp(190px,23vh,330px);min-height:0}
}
@media(max-width:950px) and (pointer:coarse),(max-width:750px){
 body:not(.at-title) .table,body:not(.at-title).topview .table{transform:translate(-50%,-50%);border-radius:26px}
 .table:before{border-radius:18px}
}

/* On phones the insertion controls temporarily overlap the outer cards;
   the board cannot be picked during insertion, so no action is obscured. */
@media(max-width:950px) and (pointer:coarse),(max-width:750px){
 body:not(.at-title) .table{border-width:2px;border-radius:12px;box-shadow:0 3px 0 #211d16,inset 0 0 12px #071a14}
 .table:before{display:none}
 .board-insert{width:44px;height:44px;font-size:28px;box-shadow:0 2px 8px #000b}
 .board-insert.left{left:-12px}.board-insert.right{right:-12px}
 .board-insert.top{top:-22px}.board-insert.bottom{bottom:-22px}
 .board-insert.left,.board-insert.right{top:clamp(44px,calc((100% + var(--shelf-gap))/4 * var(--row) + (100% - 3 * var(--shelf-gap))/8),calc(100% - 44px))}
}
@media(max-width:750px) and (orientation:portrait),(max-width:950px) and (pointer:coarse) and (orientation:portrait){
 body:not(.at-title)>header{height:32px;left:8px;right:8px}
 header .brand{font-size:20px;letter-spacing:3px}#mobileMenu{min-height:30px;padding:2px 9px}
 body:not(.at-title)>.mobile-status{top:calc(var(--safe-top) + 32px);height:30px;padding:1px 8px}
 .mobile-status span:last-child{font-size:11px}
 body:not(.at-title)>main{top:calc(var(--safe-top) + 62px);bottom:calc(var(--safe-bottom) + 210px);padding:0 2px}
 body:not(.at-title) .play{inset:0 2px}
 body:not(.at-title) .opponent{flex-basis:22px;height:22px}
 .opponent .avatar{display:none}#aiHand{height:20px}#aiHand i{height:18px}
 body:not(.at-title) .tablefoot{flex-basis:16px;height:16px;font-size:9px;padding:0 4px}
 body:not(.at-title)>.handzone{height:132px;bottom:calc(var(--safe-bottom) + 78px);grid-template-rows:29px 103px;padding:0 4px}
 body:not(.at-title) #hand{height:103px;gap:3px;padding:14px 1px 4px}
 body:not(.at-title)>.mobile-dock{height:78px;padding:3px 6px}
 .mobile-dock p{height:26px;line-height:13px;margin-bottom:3px}
 .mobile-dock>div{height:40px}
}