/* V2.8 — shared website/app visual language. Table artwork and card geometry stay in their game components. */
body[data-felt]{--panel:#171419;--panel2:#211a21;--white:#f4eee8;--muted:#b5a8af;--line:#49313c;--red:#b92a46;--red2:#6d1930;--hot:#f37188;background:radial-gradient(ellipse at 85% 0,#66203a25,transparent 55%),#0d0c10!important;color:var(--white)}
body[data-felt] main{max-width:1600px;padding:24px 28px 36px;gap:16px}
body[data-felt] .topbar{padding:4px 0 18px;border-bottom:1px solid #ffffff12;gap:18px;background:transparent!important}
body[data-felt] .brand{position:relative;padding-left:54px}body[data-felt] .brand:before{content:'';position:absolute;left:0;top:1px;width:40px;height:40px;background:url('icon.svg') center/contain no-repeat}
body[data-felt] .brand>small{font-size:9px!important;color:#c7a578;letter-spacing:.18em}
body[data-felt] .brand h1{font-size:clamp(17px,1.9vw,28px)!important;letter-spacing:.06em;line-height:1.25}
body[data-felt] .toolkitTitle{font-size:10px!important;color:#b6a8b1!important;letter-spacing:.15em;margin-top:5px}
body[data-felt] .topActions{gap:10px}body[data-felt] .profileBtn,body[data-felt] .soundBtn{border:1px solid #ffffff20!important;border-radius:10px!important;background:#211a21!important;min-height:44px;box-shadow:none!important}
body[data-felt] .modeBtn{min-height:44px;border-radius:10px!important;font-size:11px!important;letter-spacing:.06em;box-shadow:none!important}
body[data-felt] .toolSwitcher{background:#141116!important;border:1px solid #ffffff12!important;padding:8px;gap:8px;border-radius:15px;box-shadow:none!important}
body[data-felt] .toolSwitcher .toolTab{min-height:64px;border:1px solid transparent!important;border-radius:10px;background:transparent!important;box-shadow:none!important;transition:background .18s,border-color .18s,transform .18s}
body[data-felt] .toolSwitcher .toolTab>span{background:#ffffff06;color:#c2a486;border:1px solid #ffffff0b;border-radius:9px;width:32px;height:32px}
body[data-felt] .toolSwitcher .toolTab b{font-size:11px!important;letter-spacing:.055em;color:#bdb0b8}
body[data-felt] .toolSwitcher .toolTab.active{background:linear-gradient(120deg,#61203960,#281721)!important;border-color:#b850695c!important;box-shadow:inset 0 -2px #e16d86!important}
body[data-felt] .toolSwitcher .toolTab.active b,body[data-felt] .toolSwitcher .toolTab.active>span{color:#ffb4c2!important}
body[data-felt] .toolSwitcher .toolTab:hover:not(.active){background:#ffffff06!important;border-color:#ffffff12!important}
body[data-felt] :is(.progressionBar,.stats>div,.s21Hud>div,.learnerHud>div,.recognitionHud>div){background:linear-gradient(140deg,#201920,#151217)!important;border:1px solid #ffffff13!important;border-radius:13px!important;box-shadow:none!important}
body[data-felt] .progressionBar{padding:16px!important;gap:20px!important}body[data-felt] .ratingBlock small{font-size:8px!important;color:#a99ca5}body[data-felt] .ratingBlock b{font-size:13px!important;color:#dbb98a}body[data-felt] .xpTrack{height:6px;background:#ffffff0b}body[data-felt] .xpTrack i{background:linear-gradient(90deg,#b52d4e,#eb8094)!important}body[data-felt] .xpFoot{margin-top:6px;color:#b5a4b0}
body[data-felt] .stats{gap:12px!important}body[data-felt] .stats>div{padding:18px 10px!important;min-height:78px}body[data-felt] .stats small{font-size:9px!important;letter-spacing:.1em;color:#af9ca9}body[data-felt] .stats b{font-size:22px!important;line-height:1.4;color:#f6ede7!important}
body[data-felt] :is(.sideCoach,.tableLimitDock,.wagerPanel,.inlineStrategyPanel,.s21Reading,.academyPanel,.certificationCard,.masteryGoalsPanel,.learnerIntro,.recognitionIntro){background:#171319!important;border:1px solid #ffffff15!important;border-radius:14px!important;box-shadow:none!important}
body[data-felt] .sideCoach{background:radial-gradient(ellipse at top right,#7d243733,transparent 75%),#191419!important;padding:18px!important;text-align:left!important}
body[data-felt] .sideCoach>small{font-size:9px!important;color:#c4a783;letter-spacing:.17em}body[data-felt] .sideCoach>strong{color:#f39bb0!important;font-size:24px!important;line-height:1.35}body[data-felt] .sideCoach p{color:#b7a5b1!important;line-height:1.6;font-size:12px!important}
body[data-felt] :is(.actions button,.quickBets button,.lastBetTools button,#endSession,#s21End,#s21Style,.academyAction){border:1px solid #ffffff1c!important;background:#261e27!important;border-radius:9px!important;color:#e7dce3!important;box-shadow:none!important;min-height:42px;font-size:11px!important}
body[data-felt] .actions button:hover:not(:disabled),body[data-felt] .quickBets button:hover:not(:disabled){border-color:#bd5c76!important;background:#382230!important}
body[data-felt] :is(.deal,#s21Deal){min-height:50px!important;background:linear-gradient(110deg,#bf2f51,#7c1f3b)!important;border:1px solid #e66b845c!important;border-radius:10px!important;color:#fff!important;letter-spacing:.13em;font-size:14px!important;box-shadow:0 7px 20px #0003!important}
body[data-felt] :is(input,select){color:#f4ecee;background-color:#110f14;border-color:#ffffff25!important;border-radius:8px}
body[data-felt] :is(.tableIdentity,.tableLimits span){background:#ffffff03!important;border-color:#ffffff10!important}.tableLimits small{color:#aa97a4!important}
body[data-felt] .message{border:1px solid #ffffff12!important;border-radius:9px;background:#1c1720!important;color:#decbd6!important;padding:10px!important;line-height:1.5}
body[data-felt] .modeInfo{background:#ffffff03!important;border:1px solid #ffffff0c;border-radius:9px;padding:12px!important;color:#b9aab3!important;line-height:1.7}
body[data-felt] :is(.academyHero,.academyNext,.skillCard,.goalCard){border:1px solid #ffffff16!important;border-radius:13px!important;background:#1a151c!important;box-shadow:none!important}
body[data-felt] .academyHero{padding:22px!important;background:linear-gradient(120deg,#3b233230,#171319)!important}body[data-felt] .academyHero h2{font-size:24px!important;letter-spacing:.03em}body[data-felt] .academyNext{border-left:3px solid #cca66c!important;padding:20px!important}
body[data-felt] .academyOverall{background:#30231c!important;border-color:#ae885749!important;color:#edcc9a!important}
body[data-felt] :is(.skillBody strong,.goalMain strong){font-size:13px!important;line-height:1.5}body[data-felt] :is(.skillBody span,.goalMain span){font-size:11px!important;line-height:1.5}body[data-felt] :is(.skillBody small,.goalMain small){font-size:8px!important;color:#bd9e7c}
body[data-felt] .certificationCard{padding:24px!important;border-color:#a47a424d!important;background:linear-gradient(120deg,#2c211a60,#171319)!important}body[data-felt] .certReqs>span{border-color:#ffffff12!important;padding:12px!important}body[data-felt] .certReqs small{font-size:10px!important;line-height:1.6}
body[data-felt] .modalBackdrop{backdrop-filter:blur(8px);background:#08060bce}body[data-felt] :is(.modal,.profileModal,.accountGateCard){background:#171219!important;border:1px solid #80604755!important;border-radius:18px!important;box-shadow:0 24px 100px #0007!important}
body[data-felt] .accountGate{background:radial-gradient(ellipse at 70% 20%,#55203944,transparent 65%),#0d0c10!important}body[data-felt] .accountGateCard{padding:32px!important}body[data-felt] .gateBrand b{letter-spacing:.06em}body[data-felt] #loginSubmit{background:linear-gradient(120deg,#b9294a,#721b36)!important;border-radius:10px;min-height:48px}
body[data-felt] footer{border-top:1px solid #ffffff10;padding-top:18px;color:#867782;background:transparent!important}
body[data-felt] button:disabled{opacity:.4!important;cursor:not-allowed}body[data-felt] :is(button,input,select,a,summary):focus-visible{outline:2px solid #e5bc82!important;outline-offset:3px}
@media(min-width:1200px){body[data-felt] .toolSwitcher{grid-template-columns:repeat(7,minmax(0,1fr))!important}.blackjackControlColumn{gap:10px!important}}
@media(max-width:899px){body[data-felt] main{padding:12px 12px 100px!important;gap:12px}body[data-felt] .topbar{padding-bottom:12px;flex-wrap:wrap;gap:12px}body[data-felt] .brand{padding-left:43px}body[data-felt] .brand:before{width:33px;height:33px}body[data-felt] .brand h1{font-size:18px!important}body[data-felt] .topActions{gap:7px;margin-left:auto}body[data-felt] .toolSwitcher{background:#151118f5!important;backdrop-filter:blur(16px)}body[data-felt] .toolSwitcher .toolTab{min-height:48px}body[data-felt] .stats{gap:7px!important}body[data-felt] .stats>div{padding:12px 4px!important;min-height:62px}body[data-felt] .stats small{font-size:7px!important}body[data-felt] .stats b{font-size:16px!important}body[data-felt] .progressionBar{padding:12px!important;gap:12px!important}body[data-felt] .academyHero{padding:16px!important}body[data-felt] .academyHero h2{font-size:19px!important}body[data-felt] .certificationCard{padding:16px!important}}
@media(max-width:899px) and (orientation:landscape){body[data-felt] .topbar{flex-wrap:nowrap}body[data-felt] .sideCoach{padding:10px!important}body[data-felt] .sideCoach>strong{font-size:18px!important}body[data-felt] .stats>div{min-height:48px;padding:6px!important}body[data-felt] .brand h1{font-size:16px!important}}
@media(prefers-reduced-motion:reduce){body[data-felt] *,body[data-felt] *::before,body[data-felt] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Compact portrait tables keep the two hands apart and put controls before the reference chart. */
@media(max-width:899px) and (orientation:portrait){
 body[data-felt] :is(#blackjackView,#spanishView) .blackjackWorkspace{display:flex!important;flex-direction:column;gap:12px}
 body[data-felt] :is(#blackjackView,#spanishView) .blackjackLeftColumn{display:contents!important}
 body[data-felt] :is(#blackjackView,#spanishView) .gameStage{order:1;width:100%}
 body[data-felt] :is(#blackjackView,#spanishView) .blackjackControlColumn{order:2;width:100%}
 body[data-felt] :is(#blackjackView,#spanishView) .inlineStrategyPanel{order:3;width:100%}
 body[data-felt] #spanishView .s21HandTabs{order:1}
 body[data-felt] :is(#blackjackView,#spanishView) .table .hand{height:auto!important;min-height:0!important;bottom:auto!important}
 body[data-felt] :is(#blackjackView,#spanishView) .table .dealerHand{top:14%!important}
 body[data-felt] :is(#blackjackView,#spanishView) .table .playerHand{top:54%!important}
 body[data-felt] :is(#blackjackView,#spanishView) .table .hand>label{width:100px!important;min-height:0!important;height:auto!important;font-size:7px!important;padding:4px!important;line-height:1.2!important;margin:0 auto 3px!important}
 body[data-felt] :is(#blackjackView,#spanishView) .table .cards{min-height:0!important;gap:3px!important;margin-top:2px!important}
 body[data-felt] :is(#blackjackView,#spanishView) .table .cardSlot{width:34px!important;height:48px!important;flex:0 0 34px!important}
 body[data-felt] :is(#blackjackView,#spanishView) .table .cardCorner{font-size:9px!important}body[data-felt] :is(#blackjackView,#spanishView) .table .cardSuit{font-size:18px!important}
 body[data-felt] :is(#blackjackView,#spanishView) .table .countTag{font-size:7px!important}
}
body[data-felt] .sideCoach>strong{display:block;margin:8px 0}
@media(max-width:899px) and (orientation:portrait){
 body[data-felt] #spanishView .s21Nav{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}body[data-felt] #spanishView .s21Nav button{flex:0 0 auto}
 body[data-felt] :is(#blackjackView,#spanishView) .tableLimitDock{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important;padding:10px!important}
 body[data-felt] :is(#blackjackView,#spanishView) .tableIdentity{width:100%!important;min-width:0;grid-column:1!important}
 body[data-felt] :is(#blackjackView,#spanishView) .tableLimits{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;width:100%!important;grid-column:1!important}
 body[data-felt] :is(#blackjackView,#spanishView) .tableLimits span{min-width:0;padding:8px!important}body[data-felt] :is(#blackjackView,#spanishView) .tableLimits small{display:block;font-size:8px!important}body[data-felt] :is(#blackjackView,#spanishView) .tableLimits b{font-size:16px!important}
}
body[data-felt] :is(.styleShopPage,.leaderboardPage){background:#141116!important;border:1px solid #ffffff12!important;border-radius:16px!important;padding:22px!important}
body[data-felt] :is(.styleWallet,.callingCardShop,.leaderboardHero,.leaderboardRules){background:linear-gradient(130deg,#271c23,#1a151b)!important;border:1px solid #ffffff15!important;border-radius:13px!important;padding:18px!important}
body[data-felt] :is(.cosmeticItem,.callingCardItem){background:#1d171f!important;border:1px solid #ffffff16!important;border-radius:12px!important;box-shadow:none!important;overflow:hidden}
body[data-felt] :is(.cosmeticItem.equipped,.callingCardItem.equipped){border-color:#caa46c!important;box-shadow:inset 0 0 0 1px #caa46c25!important}
body[data-felt] :is(.cosmeticMeta strong,.callingCardInfo strong){color:#eadace!important}body[data-felt] .shopSectionHead{padding:20px 0 10px}body[data-felt] .shopSectionHead h3{letter-spacing:.08em;color:#e5c39b}body[data-felt] .shopFootnote{font-size:11px!important;line-height:1.8;color:#b09fa9}
body[data-felt] :is(.learnerIntro,.recognitionIntro){padding:18px!important}body[data-felt] :is(.learnerIntro h2,.recognitionIntro h2){font-size:21px!important;letter-spacing:.04em}body[data-felt] :is(.learnerHud,.recognitionHud){gap:10px!important}body[data-felt] :is(.learnerHud>div,.recognitionHud>div){padding:12px!important}
@media(max-width:899px){body[data-felt] :is(.styleShopPage,.leaderboardPage){padding:12px!important}body[data-felt] :is(.styleWallet,.callingCardShop,.leaderboardHero,.leaderboardRules){padding:12px!important}}
.demoExplore{border:1px solid #b27d4b50;background:linear-gradient(120deg,#33211f70,#171319);border-radius:12px;padding:16px 18px}.demoExplore[hidden]{display:none!important}.demoExplore summary{cursor:pointer;color:#dfbd8e;font-size:11px;font-weight:800;letter-spacing:.07em}.demoExplore p{font-size:12px;line-height:1.6;color:#bfaeb8}.demoExplore>div{display:flex;flex-wrap:wrap;gap:8px}.demoExplore button{min-height:40px;padding:10px 14px;background:#271d27;color:#efdee5;border:1px solid #ffffff20;border-radius:8px;font-size:10px;cursor:pointer}@media(max-width:899px){.demoExplore{padding:12px}.demoExplore>div{display:grid;grid-template-columns:1fr 1fr}.demoExplore button{padding:8px;font-size:9px}}