/* BLACKJACK ONLY. Fixed card geometry overrides legacy viewport card sizing.
   Rank and suit outlines share a 70 × 100 coordinate system on every OS. */
body.pg-game-page[data-game=blackjack] #ocBoard{--bj-card-width:clamp(64px,10.8dvh,80px)}
body.pg-game-page[data-game=blackjack] #ocBoard .oc-cards{
 display:grid;grid-template-columns:repeat(var(--bj-columns,2),minmax(0,1fr));
 width:min(100%,calc(var(--bj-card-width) + (var(--bj-count,2) - 1)*29px));
 max-width:100%;box-sizing:border-box;padding:2px calc(var(--bj-card-width) - 29px) 5px 0;
 column-gap:0;row-gap:4px;align-items:start;justify-content:normal;overflow:visible;margin:0 auto;
}
body.pg-game-page[data-game=blackjack] #ocBoard .oc-card.bj-card-art{
 display:block;position:relative;box-sizing:border-box;flex:none;flex-basis:auto;
 width:var(--bj-card-width);min-width:var(--bj-card-width);max-width:none;
 height:auto;min-height:0;aspect-ratio:7 / 10;padding:0;margin:0;
 border:1px solid #ded6bf;border-radius:6px;overflow:hidden;
 background:#fffdf5;color:#192722;box-shadow:0 2px 3px #0004;
 font-family:Arial,sans-serif;line-height:0;
}
body.pg-game-page[data-game=blackjack] #ocBoard .oc-card.bj-card-art.red{color:#b62438}
body.pg-game-page[data-game=blackjack] #ocBoard .oc-card.bj-card-art.oc-back{
 border:1px solid #e5dac0;background:repeating-linear-gradient(45deg,#713a38 0 3px,#884540 3px 5px);color:#ead7a4;
}
body.pg-game-page[data-game=blackjack] #ocBoard .bj-card-svg{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;overflow:hidden}
body.pg-game-page[data-game=blackjack] #ocBoard .bj-split{--bj-card-width:64px;gap:8px}
/* Wrap long hands instead of narrowing cards or clipping the final card.
   At most four cards per split row and six per unsplit row. */
body.pg-game-page[data-game=blackjack] #ocBoard .bj-split .bj-many-cards{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:4px}

/* Split-hand follow-up: the board must reserve its intrinsic content height.
   A shrinking flex board formerly let the second card row, score and wager
   paint over the following result panel. Keep both regions in normal flow.
   If a very short screen cannot contain all content, extend downward rather
   than clip scores, overlap the receipt, or scale the entire interface. */
body.pg-game-page[data-game=blackjack] #ocBoard{
 flex:1 0 auto;min-height:auto;height:auto;
 display:flex;flex-direction:column;justify-content:space-evenly;gap:8px;
 overflow:visible;
}
body.pg-game-page[data-game=blackjack] #ocBoard>.bj-dealer,
body.pg-game-page[data-game=blackjack] #ocBoard>.oc-hands{flex:0 0 auto;min-height:min-content}
body.pg-game-page[data-game=blackjack] #ocBoard .bj-split{align-items:flex-start}
body.pg-game-page[data-game=blackjack] #ocBoard .bj-split>.oc-zone{
 display:grid;grid-template-columns:minmax(0,1fr);
 grid-template-rows:auto auto auto auto;align-content:start;justify-items:center;
 min-width:0;height:auto;
}
body.pg-game-page[data-game=blackjack] #ocBoard .bj-split .bj-score{position:static;align-self:start}
body.pg-game-page[data-game=blackjack] #ocBoard .bj-split .bj-hand-wager{
 position:static;max-width:100%;overflow-wrap:anywhere;line-height:1.4;
}
body.pg-game-page[data-game=blackjack] #ocResult{
 position:relative;flex:0 0 auto;height:auto;min-height:0;margin-top:4px;
}
@media(max-height:667px){
 body.pg-game-page[data-game=blackjack] #ocBoard{justify-content:flex-start;gap:4px;padding-block:2px}
 body.pg-game-page[data-game=blackjack] #ocBoard .bj-zone-label{margin-bottom:2px}
}