body.oc-page[data-game=blackjack]{background:#071b16;color:#f8f5e9;font-family:Arial,'Noto Sans JP',sans-serif;background-image:radial-gradient(ellipse at 50% 30%,#194d36,#071b16 80%)}
[data-game=blackjack] main{width:min(100%,600px);padding:calc(8px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom));background:radial-gradient(ellipse at 50% 36%,#236a48 0,#10462f 48%,#0b2e23 100%);box-shadow:0 0 80px #0007;min-height:100svh}
[data-game=blackjack] .oc-header h1{display:grid;text-align:center;font-size:18px;letter-spacing:2px;font-family:Georgia,serif;color:#f7e5b4}[data-game=blackjack] .oc-header h1 small{font:9px Arial;letter-spacing:3px;color:#bbcebb;margin-bottom:4px}
[data-game=blackjack] .button{border:1px solid #b59b61;border-radius:12px;box-shadow:inset 0 1px #fff2,0 3px 6px #0003;font-weight:700;text-decoration:none;letter-spacing:0;text-transform:none;font-family:inherit}[data-game=blackjack] .quiet{background:#0b251de0;color:#e2e5d7;font-size:12px;padding:8px 12px}
[data-game=blackjack] .oc-wallet{margin:12px 0 2px;padding:8px 16px;border:1px solid #c0a66b66;border-radius:30px;background:#09271f;min-height:46px;box-sizing:border-box}[data-game=blackjack] .oc-wallet strong{color:#ffe5a1;font-size:23px;font-variant-numeric:tabular-nums}[data-game=blackjack] .oc-wallet span{color:#d5dfd2}
[data-game=blackjack] #ocBoard{height:auto;min-height:380px;border:0;background:none;border-radius:0;padding:18px 0 8px;overflow:visible;gap:16px;justify-content:space-between}
.bj-zone-label{font-size:12px;color:#e1e8d8;margin-bottom:8px;letter-spacing:1px}.bj-score{display:inline-block;padding:4px 13px;border:1px solid #c9ae6d;border-radius:22px;background:#092a20;color:#fff7da;font:bold 20px Georgia,serif;margin:7px 0}.bj-zone-label .bj-score{margin:0 0 0 7px;font-size:17px}.bj-turn{font-size:10px;color:#ffe39d;letter-spacing:0}.bj-hand-wager{display:block;color:#e2d7af;font-size:11px}
[data-game=blackjack] .oc-cards{gap:0;flex-wrap:nowrap;margin:0 auto;padding:2px 8px 6px;width:fit-content;max-width:100%;box-sizing:border-box}[data-game=blackjack] .oc-card{position:relative;flex:0 1 82px;width:82px;min-width:25px;height:116px;border:1px solid #e9ddbf;border-radius:7px;background:linear-gradient(115deg,#fffef6,#f1eddf);box-shadow:1px 5px 8px #0005;justify-content:flex-start;align-items:flex-start;padding:7px;box-sizing:border-box;color:#182320;overflow:hidden}[data-game=blackjack] .oc-card+.oc-card{margin-left:-18px}[data-game=blackjack] .oc-card b{font-size:23px;line-height:1;display:flex;flex-direction:column;align-items:center;z-index:1}[data-game=blackjack] .oc-card b i{font-size:17px}[data-game=blackjack] .oc-card em{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:44px}[data-game=blackjack] .oc-card .bj-corner-bottom{position:absolute;right:7px;bottom:7px;transform:rotate(180deg);font-size:18px}[data-game=blackjack] .oc-card.red{color:#bd3036}[data-game=blackjack] .oc-card.oc-back{align-items:center;justify-content:center;border:4px solid #ede6cf;background:repeating-linear-gradient(45deg,#763631 0 3px,#9c4a3e 3px 5px);color:#f2d9a2}[data-game=blackjack] .oc-back span{display:grid;place-items:center;width:42px;height:54px;border:1px solid #e3c58e;border-radius:50%;font:bold 19px Georgia;background:#612e2c}
.bj-table-mark{text-align:center;display:grid;gap:4px;opacity:.65;pointer-events:none}.bj-table-mark span{font:10px Georgia;letter-spacing:5px;color:#e5cd91}.bj-table-mark strong{font:23px Georgia;letter-spacing:4px;color:#eee5c8}.bj-table-mark small{font-size:8px;letter-spacing:1px;color:#cee0c9}
[data-game=blackjack] .oc-hands .oc-zone{border:0;padding:0;min-width:0}[data-game=blackjack] .oc-zone.active-hand{background:none;box-shadow:none}.bj-ready{display:grid;justify-items:center;gap:10px;padding:8px 0 16px}.bj-ready-chip{display:grid;place-items:center;width:46px;height:46px;border:3px dashed #bfa76d;border-radius:50%;color:#ecd398;font:27px Georgia}.bj-ready strong{font-size:16px}.bj-ready small{font-size:11px;color:#c3d4c4}
[data-game=blackjack] #ocResult{height:auto;min-height:0;gap:4px}[data-game=blackjack] #ocResult:not(:empty){padding:12px;border:1px solid #cfaf65;border-radius:12px;background:#09271fe8}[data-game=blackjack] #ocResult strong{color:#ffe2a0}[data-game=blackjack] #ocStatus{font-size:11px;text-align:center;min-height:0;line-height:1.6;margin:8px 0;color:#d4e2d3}[data-game=blackjack] #ocStatus:empty{display:none}
.bj-controls{padding:12px 10px;border-top:2px solid #b4975c;border-radius:20px 20px 12px 12px;background:linear-gradient(#352b22,#201e19);box-shadow:0 -4px 20px #0002}[data-game=blackjack] .oc-play-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}[data-game=blackjack] .oc-play-actions button{min-height:64px;font-size:13px;line-height:1.6;padding:8px 4px;color:#fff8e9;border:2px solid #c6a96c}[data-game=blackjack] #oc_stand{order:0;background:linear-gradient(#a03935,#702522)}[data-game=blackjack] #oc_double{order:1;background:linear-gradient(#30668c,#214665)}[data-game=blackjack] #oc_hit{order:2;background:linear-gradient(#478d43,#29622c)}[data-game=blackjack] #oc_split{order:3;grid-column:1/-1;min-height:44px;background:#544333}[data-game=blackjack] #oc_split:disabled{display:none}
[data-game=blackjack] #ocHelp{font-size:10px;line-height:1.6;color:#d5cbb5;min-height:0;margin:8px 0;text-align:center}[data-game=blackjack] .oc-bets{display:grid;grid-template-columns:38px 1fr repeat(3,52px);gap:6px;align-items:center}[data-game=blackjack] .oc-bets label{font:12px Georgia;color:#dfc68d}[data-game=blackjack] .oc-bets input{width:100%;min-width:0;color:#fff3cd;border:1px solid #ae945b;border-radius:9px;background:#121e19;padding:4px 7px;font-size:20px}[data-game=blackjack] .oc-bets button{border:4px dashed #e4d4ac;border-radius:50%;width:52px;height:52px;padding:3px;min-width:0;background:#226e90;box-shadow:0 3px 0 #0008}[data-game=blackjack] .oc-bets button span{display:grid;place-items:center;border-radius:50%;background:#f3e9d1;color:#1c2c2a;height:34px;width:34px;font:bold 12px Arial}[data-game=blackjack] #ocAdd50{background:#a83e37}[data-game=blackjack] #ocAdd100{background:#734884}[data-game=blackjack] .accent,[data-game=blackjack] #ocAck{background:linear-gradient(#efcf80,#bb9248);color:#241e12;min-height:52px;font-size:16px}[data-game=blackjack] .oc-note{text-align:center;font-size:10px;color:#acc4b3;line-height:1.8;margin:16px 0 4px}[data-game=blackjack] a{color:#eddaa6}[data-game=blackjack] details{font-size:12px;line-height:1.8;color:#c2d2c4}[data-game=blackjack] summary{justify-content:center}
@media(min-height:800px){[data-game=blackjack] #ocBoard{min-height:440px}.bj-table-mark{padding:12px 0}}@media(max-width:360px){[data-game=blackjack] main{padding-left:8px;padding-right:8px}[data-game=blackjack] .oc-bets{grid-template-columns:28px 1fr repeat(3,46px);gap:4px}[data-game=blackjack] .oc-bets button{width:46px;height:46px;padding:1px}[data-game=blackjack] .oc-bets button span{width:34px;height:34px}[data-game=blackjack] .bj-split .oc-card{height:98px;width:65px}[data-game=blackjack] .oc-play-actions button{font-size:11px}}
/* Fit the play surface to the visible mobile viewport, including Safari chrome. */
body.oc-page[data-game=blackjack]{min-height:0;margin:0;padding:0}
body.oc-page[data-game=blackjack] main{box-sizing:border-box;width:min(100%,600px);height:100dvh;min-height:0;padding:env(safe-area-inset-top) 8px env(safe-area-inset-bottom);display:flex;flex-direction:column;gap:4px;box-shadow:none}
body[data-game=blackjack]:is(:has(#pgSessionUser[hidden]),:has(#pgSessionStatus:not([hidden])),:has(#pgSessionRetry:not([hidden]))) main{height:calc(100dvh - 52px)}
body[data-game=blackjack] .oc-header{flex:none;margin:0 -8px}
body[data-game=blackjack] #ocBoard{flex:1 1 auto;min-height:190px;height:auto;padding:4px 0;gap:4px;justify-content:space-evenly;overflow:visible}
body[data-game=blackjack] .bj-table-mark{display:none}
body[data-game=blackjack] .oc-card{height:clamp(72px,16dvh,126px);width:clamp(52px,11dvh,88px);flex-basis:clamp(52px,11dvh,88px);box-shadow:1px 2px 3px #0004}
body[data-game=blackjack] .bj-zone-label{margin:0 0 3px;font-size:11px}
body[data-game=blackjack] .bj-score{font-size:18px;margin:3px 0;padding:2px 12px}
body[data-game=blackjack] .bj-zone-label .bj-score{font-size:16px}
body[data-game=blackjack] .bj-ready{padding:0;gap:6px}
body[data-game=blackjack] #ocResult:not(:empty){flex:none;padding:5px 8px;border-radius:8px}
body[data-game=blackjack] #ocResult strong{font-size:22px;line-height:1.2}
body[data-game=blackjack] #ocResult span{font-size:10px}
body[data-game=blackjack] #ocStatus{flex:none;margin:0;font-size:10px;line-height:1.3}
body[data-game=blackjack] .bj-controls{flex:none;padding:5px 6px;border-radius:12px 12px 0 0;box-shadow:none}
body[data-game=blackjack] .oc-play-actions button{min-height:48px;font-size:12px;line-height:1.3;padding:4px 2px;box-shadow:none}
body[data-game=blackjack] #oc_split{min-height:44px}
body[data-game=blackjack] #ocHelp,body[data-game=blackjack] .oc-note{display:none}
body[data-game=blackjack] .oc-actions{margin:3px 0;gap:4px}
body[data-game=blackjack] .oc-actions:not(:has(button:not([hidden]))){display:none}
body[data-game=blackjack] .oc-actions button{min-height:44px;padding:4px;font-size:13px}
body[data-game=blackjack] .oc-bets input{height:44px;font-size:18px}
body[data-game=blackjack] .oc-bets button{width:46px;height:46px;min-height:44px;border-width:3px;padding:3px}
body[data-game=blackjack] #ocRules{display:none}
body[data-game=blackjack] #ocRules[open]{display:block;position:fixed;z-index:100;inset:10% 12px auto;margin:auto;max-width:520px;max-height:75dvh;overflow:auto;padding:20px;background:#102b23;border:1px solid #c9ae6d;border-radius:12px;box-shadow:0 0 0 100vmax #0009}
body[data-game=blackjack] #bjRulesClose{float:right;width:44px;height:44px;border:0;background:none;color:white;font-size:25px}
body[data-game=blackjack] button{touch-action:manipulation}
body[data-game=blackjack] button:active:not(:disabled){filter:brightness(1.2);transform:translateY(1px)}
@media(max-height:620px){body[data-game=blackjack] .oc-card{height:72px;width:52px;flex-basis:52px}body[data-game=blackjack] .oc-card em{font-size:28px}body[data-game=blackjack] .oc-card b{font-size:17px}body[data-game=blackjack] .bj-corner-bottom{display:none}body[data-game=blackjack] .oc-cards{padding-bottom:1px}}
/* Very short landscape screens and enlarged text retain access by scrolling. */
@media(max-height:460px){body.oc-page[data-game=blackjack] main{height:auto;min-height:100dvh}}
