/* Composition, card sizes, toolbar, notices, and typography come from durak.css. */
.twenty-one-hand .durak-card { margin-left: calc(var(--card-width) * -.35); }
.twenty-one-score { font-variant-numeric: tabular-nums; }
.twenty-one-score.is-bust { color: #ffb5a8; }
.twenty-one-seat.is-winner .twenty-one-score { color: #fff0a0; }
.twenty-one-seat.is-winner .durak-card { box-shadow: 0 0 0 2px #f9dd79, 0 0 16px rgba(255,233,142,.5); }
.twenty-one-page .twenty-one-finances { display: grid; align-content: center; gap: 6px; height: auto; min-height: var(--card-height); padding: 8px; border-radius: 4px; color: #eef5ef; background: rgba(19,73,29,.78); font-size: 11px; }
.twenty-one-finances > span { display: flex; justify-content: space-between; gap: 6px; white-space: nowrap; }
.twenty-one-finances b { font-variant-numeric: tabular-nums; }
.twenty-one-finance-short { display: none; }
.twenty-one-betting { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; max-width: 100%; }
.twenty-one-bet-controls { display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; }
.twenty-one-page .twenty-one-is-betting .durak-board { grid-template-rows: calc(var(--card-height) + 40px) minmax(0, 1fr) 40px 94px minmax(calc(var(--card-height) + 26px), .65fr); }
.twenty-one-betting label { font-size: 13px; }
.twenty-one-betting input { width: 76px; height: 40px; border: 1px solid #d0ddcf; border-radius: 3px; background: #fff; color: #193522; font: bold 14px Arial; padding: 6px; }
.twenty-one-actions button:disabled { opacity: .45; cursor: default; }
.twenty-one-bet-presets { display: flex; gap: 5px; }
.twenty-one-page .twenty-one-bet-presets button { padding-inline: 11px; font-size: 13px; font-weight: normal; border: 1px solid #75a881; background: #266b36; box-shadow: none; }
.twenty-one-page .twenty-one-bet-presets button[aria-pressed="true"] { color: #13491d; background: #fff; border-color: #fff; }
.twenty-one-page .durak-player { flex-direction: column; gap: 6px; padding-top: 12px; }
.twenty-one-page .durak-player-label--you { position: static; display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 0; background: none; }
.twenty-one-page .durak-player-label--you strong { opacity: 1; }
.twenty-one-result { width: 100%; text-align: center; color: #eef5ef; }
.twenty-one-result h2 { margin: 0 0 6px; color: #fff0a0; font-size: 24px; line-height: 1.2; }
.twenty-one-result__money { display: block; font-size: 19px; line-height: 1.2; }
.twenty-one-result.is-win .twenty-one-result__money { color: #fff0a0; }
.twenty-one-result p { margin: 8px 0 0; font-size: 13px; line-height: 1.3; }
.twenty-one-actions [hidden], .twenty-one-intro[hidden], .twenty-one-result[hidden] { display: none; }
.twenty-one-message.is-win { color: #fff2a4; }
.twenty-one-intro { max-height: 100%; overflow: auto; }
.twenty-one-intro .twenty-one-subtitle { color: #254932; font-weight: bold; }

@media (max-width: 680px) {
 .twenty-one-page .twenty-one-finances { width: 60px; min-height: 51px; padding: 5px 4px; gap: 4px; font-size: 10px; }
 .twenty-one-finances > span { gap: 3px; }
 .twenty-one-finance-label { display: none; }
 .twenty-one-finance-short { display: inline; }
 .twenty-one-betting, .twenty-one-bet-controls { gap: 6px; }
 .twenty-one-betting label { display: none; }
 .twenty-one-betting input { width: 65px; height: 35px; font-size: 16px; }
 .twenty-one-page .twenty-one-bet-presets button { padding-inline: 9px; font-size: 12px; }
 .twenty-one-bet-submit { align-self: stretch; }
 .twenty-one-page .twenty-one-is-betting .durak-board { grid-template-rows: 104px minmax(0, 1fr) 40px 82px minmax(calc(var(--card-height) + 26px), .65fr); }
 .twenty-one-result h2 { font-size: 20px; }
 .twenty-one-result__money { font-size: 17px; }
 .twenty-one-result p { font-size: 12px; }
}
@media (max-height: 500px) and (orientation: landscape) {
 .twenty-one-page .twenty-one-finances { min-height: 38px; gap: 3px; padding-block: 4px; font-size: 10px; }
 .twenty-one-result h2 { display: inline; margin: 0 8px 0 0; font-size: 16px; }
 .twenty-one-result__money { display: inline; font-size: 14px; }
 .twenty-one-result p { margin-top: 3px; font-size: 11px; }
 .twenty-one-page .twenty-one-is-betting .durak-board { grid-template-rows: calc(var(--card-height) + 22px) minmax(0,1fr) 28px 82px calc(var(--card-height) + 26px); }
 .twenty-one-page .twenty-one-is-finished .durak-board { grid-template-rows: calc(var(--card-height) + 22px) minmax(38px,1fr) 0 38px calc(var(--card-height) + 20px); }
 .twenty-one-page .durak-player { padding-top: 0; gap: 3px; }
 .twenty-one-betting input { height: 35px; }
}
/* Very short landscape screens have no spare caption row below the toolbar. */
@media (max-height: 360px) and (orientation: landscape) {
 .twenty-one-page .durak-board,
 .twenty-one-page .twenty-one-is-betting .durak-board { padding-block: 2px; grid-template-rows: calc(var(--card-height) + 18px) minmax(0,1fr) 24px 38px calc(var(--card-height) + 16px); }
 .twenty-one-page .twenty-one-is-betting .durak-board { --card-width: calc(28px * var(--durak-scale)); --card-height: calc(38px * var(--durak-scale)); grid-template-rows: calc(var(--card-height) + 18px) minmax(0,1fr) 16px 78px calc(var(--card-height) + 16px); }
 .twenty-one-page .twenty-one-is-betting .durak-seat { --card-width: calc(28px * var(--durak-scale)); --card-height: calc(38px * var(--durak-scale)); }
 .twenty-one-page .twenty-one-is-finished .durak-board { grid-template-rows: calc(var(--card-height) + 18px) minmax(34px,1fr) 0 38px calc(var(--card-height) + 16px); }
 .twenty-one-page .durak-player { padding-top: 0; }
 .twenty-one-page .durak-seat[data-position="top"] { top: 2px; padding: 0 5px; }
 .twenty-one-page .durak-turn-notice { display: none; }
 .twenty-one-page .durak-table__empty { display: none; }
}
/* Reserve room for the landing template's full-screen link in mobile iframes. */
@media (max-width: 680px) and (min-height: 501px) {
 .twenty-one-embedded .durak-board { padding-bottom: 50px; }
}