/* Spanish 21 uses Blackjack's table, card, wager and panel components. */
#spanishView{color:var(--white);padding-bottom:85px}
#spanishView .s21Head{padding:10px 14px;margin-bottom:10px;border-color:var(--line);background:var(--panel);border-radius:10px}
#spanishView .s21Head>div{display:grid;gap:5px}#spanishView .s21Head b{font-size:13px;letter-spacing:.06em}#spanishView small{color:var(--muted)}
#spanishView button,#spanishView select,#spanishView input{border:1px solid var(--line);background:linear-gradient(var(--panel2),var(--panel));color:var(--white);border-radius:8px;font-size:12px;min-height:38px;padding:8px 10px}
#spanishView button:hover:not(:disabled){background:var(--panel2);border-color:var(--hot)}#spanishView :focus-visible{outline-color:var(--hot)}
#spanishView .s21Nav{gap:6px;padding-bottom:10px}#spanishView .s21Nav button{font-size:11px}#spanishView .s21Nav [aria-pressed=true]{background:linear-gradient(var(--red2),var(--panel2))!important;border-color:var(--hot)!important}
#spanishView .s21Hud{gap:6px;margin-bottom:10px}#spanishView .s21Hud>div{display:block;padding:8px 5px;background:var(--panel);border:1px solid var(--line);border-radius:10px}#spanishView .s21Hud b{font:800 16px ui-monospace,monospace;margin-top:4px}#spanishView .s21Hud small{font-size:10px}
#spanishView .s21Workspace{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.7fr);align-items:start;gap:12px}
#spanishView .blackjackLeftColumn,#spanishView .s21Console{display:flex;flex-direction:column;gap:8px;min-width:0}
#spanishView .s21Console{padding:0;margin:0;border:0;border-radius:0;background:transparent}
#spanishView .s21Console>div,#spanishView .s21Console>section{width:100%}
#spanishView .s21Coach{padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);min-height:140px;height:auto!important;max-height:none!important;text-align:center}
#spanishView .s21Coach strong{font-size:20px;color:var(--hot)}#spanishView .s21Coach p{font-size:12px;margin:6px 0;line-height:1.5;min-height:32px}
#spanishView .tableLimitDock{padding:8px;border-radius:10px}#spanishView .tableIdentity{padding:6px 8px;display:block}#spanishView .tableIdentity>span{display:block}#spanishView .tableIdentity select{width:100%;font-size:11px;margin-top:4px}#spanishView .tableLimits b{font-size:15px}
#spanishView .s21Actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}#spanishView .s21Actions button{min-width:0;font-size:11px}
#spanishView .wagerPanel{width:100%;padding:8px;gap:6px;border-radius:10px}#spanishView .wagerInput{min-width:0}#spanishView .moneyField input{width:100%;min-width:0;border:0;background:transparent;padding:4px;font-size:18px}
#spanishView .quickBets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}#spanishView .quickBets button{padding:6px 3px;min-width:0}#spanishView .lastBetTools{display:flex;align-items:center;justify-content:space-between;gap:4px}#spanishView .lastBetTools span{font-size:9px}
#spanishView #s21Deal{background:linear-gradient(var(--red),var(--red2));border-color:var(--hot);min-height:46px;font-size:15px;width:100%}
#spanishView #s21Check{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:5px}#spanishView #s21Check input{width:100%;min-width:0;font-size:11px}#spanishView #s21Check button{padding:7px;font-size:10px}
#spanishView #s21Result{margin:0;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font-size:12px;line-height:1.4;min-height:35px}
#spanishView .modeInfo{display:grid;gap:4px;padding:8px;font-size:10px;line-height:1.5}#spanishView .s21Shoe{padding:9px;background:var(--panel);border:1px solid var(--line);border-radius:8px;font-size:11px}#spanishView progress{accent-color:var(--hot)}
#spanishView .s21Table{width:100%;height:auto;min-height:0!important;padding:0;position:relative;isolation:isolate}
/* Cover the Blackjack rules printed in the original artwork with live Spanish rules. */
#spanishView .s21TableRules{position:absolute;left:24%;right:24%;top:47%;height:22%;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:8px;border:1px solid var(--theme-line,var(--line));border-radius:12px;background:linear-gradient(180deg,#100a0bfd,#090607fd);text-align:center;box-shadow:0 4px 12px #0008;pointer-events:none}
#spanishView .s21TableRules b{font-size:clamp(12px,1.4vw,21px);color:var(--theme-hot,var(--hot));letter-spacing:.14em}#spanishView .s21TableRules span{font-size:clamp(7px,.7vw,11px);font-weight:800}#spanishView .s21TableRules small{font-size:clamp(6px,.6vw,9px);letter-spacing:.05em}
body[data-felt] #spanishView .s21Table .playerHand{bottom:5%;z-index:3}body[data-felt] #spanishView .s21Table .dealerHand{z-index:3}
body[data-felt] #spanishView .s21Table .chipArea{left:78%;top:77%;z-index:4}
#spanishView .s21ChipLabel{display:block;color:#efe0c1;font:bold 9px ui-monospace,monospace;text-align:center;background:#070607c9;border-radius:5px;padding:4px}
#spanishView .s21HandTabs{display:flex;flex-wrap:wrap;gap:5px}#spanishView .s21HandTabs button{font-size:10px;flex:1}#spanishView .s21HandTabs [aria-pressed=true]{border-color:var(--hot);background:var(--panel2)}
#spanishView .s21Inline{margin-top:0;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}#spanishView .s21Inline h2{font-size:15px;margin:4px 0}#spanishView .s21Inline p{font-size:11px;line-height:1.4;margin:8px 0 0}
#spanishView .s21Inline table{width:100%;border-collapse:collapse;text-align:center;font:700 11px ui-monospace,monospace}#spanishView .s21Inline td,#spanishView .s21Inline th{padding:5px;border:1px solid #ffffff18}#spanishView .s21Inline th{background:var(--panel2)}
#spanishView .s21TestCover{display:grid;place-content:center;text-align:center;min-height:160px;gap:8px;background:var(--panel);color:var(--muted)}#spanishView .s21TestCover b{color:#4bd782}
#spanishView .s21Reading{background:var(--panel);border-color:var(--line)}#spanishView .s21Reading h4,#spanishView .s21Reading a{color:var(--hot)}#spanishView .s21Reading th{background:var(--panel2)}#spanishView .s21Reading th,#spanishView .s21Reading td{border-color:var(--line)}#spanishView .s21Tags>div{background:var(--panel2);border-color:var(--line)}#spanishView .s21Tags b{color:var(--hot)}#spanishView .s21Goal{border-color:var(--line)}
#spanishView .s21DrillPrompt{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}#spanishView .s21DrillPrompt>p{flex-basis:100%}#spanishView .s21DrillPrompt .cardSlot{margin:0;display:inline-block;width:74px;height:104px;flex:none}#spanishView .s21DrillPrompt .cardCorner{font-size:17px}#spanishView .s21DrillPrompt .cardSuit{font-size:34px}
@media(max-width:899px){#spanishView .s21Workspace{grid-template-columns:1fr}#spanishView .s21Hud{grid-template-columns:repeat(4,minmax(0,1fr))}#spanishView .s21Hud b{font-size:13px}#spanishView .s21Hud small{font-size:8px}#spanishView .s21TableRules{padding:3px;gap:2px;border-radius:6px}#spanishView .s21TableRules b{font-size:12px}#spanishView .s21TableRules span{font-size:7px}#spanishView .s21TableRules small{font-size:6px}#spanishView .s21Head b{font-size:10px}}
@media(max-width:899px) and (orientation:landscape){body.ui-mobile.ui-landscape #spanishView .s21Workspace{grid-template-columns:minmax(0,1.55fr) minmax(235px,.85fr)}#spanishView .s21Coach{min-height:95px;padding:8px}#spanishView .s21Coach strong{font-size:15px}#spanishView .s21Coach p{font-size:10px}#spanishView .s21Actions button{font-size:9px;padding:6px}#spanishView .s21TableRules b{font-size:10px}#spanishView .s21TableRules small{display:none}}
@media(prefers-reduced-motion:reduce){#spanishView .cardSlot{animation:none!important}}

#spanishView .s21FaceDown .card3d,#spanishView .s21FaceDown .cardBack{transform:none}