:root{
  color-scheme:dark;
  --red:#d71d31;
  --red2:#7c0a16;
  --hot:#ff4053;
  --black:#050505;
  --panel:#12090b;
  --panel2:#1c0b0f;
  --white:#f7f7f7;
  --muted:#b8a7aa;
  --line:#65232c;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:#050505}
body{
  min-height:100dvh;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  background:radial-gradient(circle at 50% 6%,#5b1018 0,#1b070a 35%,#050505 80%);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
  color:var(--white);
  overscroll-behavior:none;
}
button,input{font:inherit}
button{touch-action:manipulation}
main{
  width:min(100%,760px);
  min-height:100dvh;
  margin:auto;
  padding:14px 11px 24px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.brand small,small{font-size:9px;letter-spacing:.15em;color:var(--muted)}
h1{margin:1px 0 0;font-size:22px;line-height:1;letter-spacing:.12em;color:#fff}
.modeBtn,.actions button,.quickBets button,.lastBetTools button,#check,#reset,.deal,#strategyChartBtn{
  border:1px solid #812733;
  background:linear-gradient(#2b0b10,#110506);
  color:#fff;
  border-radius:10px;
  padding:11px 10px;
  font-weight:850;
  font-size:10px;
  letter-spacing:.05em;
}
.modeBtn{min-width:88px;border-color:#e52b40;background:linear-gradient(#7a101c,#31070d)}
button:active:not(:disabled){transform:scale(.98);background:linear-gradient(#74121e,#2c080d)}
button:disabled{opacity:.25}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.stats div{
  background:#11080ae8;
  border:1px solid #552029;
  border-radius:10px;
  padding:8px 5px;
  text-align:center;
}
.stats b{
  display:block;margin-top:4px;
  font:800 14px ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#fff;
}
.table{
  position:relative;
  min-height:470px;
  overflow:hidden;
  border:9px solid #5a3a25;
  outline:1px solid #9b7656;
  border-radius:45% 45% 18px 18px/13% 13% 18px 18px;
  background:
    radial-gradient(circle at 20% 18%,#ffffff08 0 1px,transparent 2px),
    radial-gradient(circle at 72% 64%,#00000012 0 1px,transparent 2px),
    linear-gradient(115deg,#ffffff05,transparent 35%,#00000010 70%,transparent),
    radial-gradient(ellipse at 50% 45%,#146247 0%,#0d503b 48%,#083e2f 78%,#062f25 100%);
  background-size:17px 17px,23px 23px,auto,auto;
  box-shadow:inset 0 0 72px #001a13aa,inset 0 0 0 2px #d6b98b22,0 12px 30px #000b;
  padding:20px 10px 15px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.table:before{
  content:"";position:absolute;inset:11px;pointer-events:none;
  border:1px solid #d7c28d55;
  border-radius:44% 44% 14px 14px/12% 12% 14px 14px;
}
.table:after{
  content:"";position:absolute;left:8%;right:8%;bottom:17%;height:34%;pointer-events:none;
  border:1px solid #d9c58d3d;border-bottom:0;border-radius:50% 50% 0 0;
}
.feltArc{position:absolute;left:13%;right:13%;height:115px;border:1px solid #e7d8a54d;border-color:#e7d8a54d transparent transparent;border-radius:50%;pointer-events:none}
.arc1{top:40%}.arc2{top:47%;left:20%;right:20%}
.feltRules{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:78%;text-align:center;font:700 8px Georgia,serif;letter-spacing:.17em;color:#eadfa38a;text-shadow:0 1px 1px #002218;pointer-events:none;z-index:1}
.hand{text-align:center;min-height:145px;position:relative;z-index:2}
.hand label{font-size:10px;font-weight:800;letter-spacing:.16em;color:#eee}
.hand label span{color:#ff7684;margin-left:4px}
.cards{
  display:flex;justify-content:center;align-items:center;
  margin-top:9px;min-height:108px;
  perspective:1100px;
}
.cardSlot{
  width:74px;height:104px;
  position:relative;
  margin-left:-13px;
  perspective:900px;
  transform-origin:50% 0;
}
.cardSlot:first-child{margin-left:0}
.cardSlot.dealing{animation:dealFlight 210ms cubic-bezier(.15,.8,.2,1) both}
@keyframes dealFlight{
  0%{opacity:.2;transform:translate3d(0,-105px,0) scale(.62) rotate(-5deg)}
  72%{opacity:1;transform:translate3d(0,5px,0) scale(1.03) rotate(.7deg)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
.card3d{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transform:rotateY(180deg);
}
.card3d.flip{animation:sourceFlip 350ms linear forwards}
.card3d.faceup{transform:rotateY(0deg)}
@keyframes sourceFlip{from{transform:rotateY(180deg)}to{transform:rotateY(0deg)}}
.cardFace{
  position:absolute;inset:0;border-radius:9px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 6px 14px #000a;
}
.cardFront{
  background:linear-gradient(145deg,#fff,#e8e8e4);
  border:1px solid #d0d0cc;color:#111;
  padding:6px;
}
.cardFront.red{color:#c52235}
.cardCorner{display:block;text-align:left;font:bold 17px Georgia,serif;line-height:1}
.cardSuit{position:absolute;inset:0;display:grid;place-items:center;font:34px Georgia,serif}
.countTag{
  position:absolute;right:5px;bottom:5px;
  min-width:27px;height:22px;padding:0 4px;
  display:grid;place-items:center;
  border-radius:6px;
  background:#0a0a0ae8;
  border:1px solid #d52237;
  color:#fff;
  font:900 11px ui-monospace,SFMono-Regular,Menlo,monospace;
  box-shadow:0 0 8px #c9162925;
}
.countTag.zero{border-color:#777;color:#fff}
.countTag.hiddenTag{border-color:#555;color:#aaa}
.cardBack{
  transform:rotateY(180deg);
  padding:5px;background:#f5f5f5;border:3px solid #fff;
}
.cardBack:after{
  content:"";display:block;width:100%;height:100%;border-radius:5px;
  border:2px solid #bd1729;
  background:
    linear-gradient(45deg,#b31527 25%,transparent 25%,transparent 75%,#b31527 75%),
    linear-gradient(-45deg,#b31527 25%,#100507 25%,#100507 75%,#b31527 75%);
  background-size:16px 16px;
  box-shadow:inset 0 0 0 3px #080808,inset 0 0 0 5px #f3f3f3;
}
.coach{
  position:relative;z-index:2;
  align-self:center;
  width:min(92%,330px);
  text-align:center;
  background:#0e0708e8;
  border:1px solid #66242c;
  border-radius:11px;
  padding:8px 14px;
  box-shadow:0 6px 18px #0005;
}
.coach strong{display:block;color:#ff6576;font-size:19px;margin-top:2px;letter-spacing:.04em}
.coach p{font-size:10px;color:#c0afb2;margin:3px 0 0}
#handTabs{font-size:10px;color:#ff7785;margin-top:5px;font-weight:800;letter-spacing:.08em}
.message{
  min-height:22px;padding:2px 6px;
  text-align:center;color:#e5dadd;font-size:12px;
}
.message.good{color:#fff}.message.bad{color:#ff8090}
.actions{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.actions button{padding:12px 3px;font-size:9px}
.bettingArea{display:grid;gap:6px}
.tableLimitDock{display:flex;justify-content:center;margin:-2px 0 2px}.tableLimits{display:grid;grid-template-columns:repeat(2,minmax(105px,145px));gap:6px;justify-content:center}
.tableLimits span{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;background:#0e0708;border:1px solid #3f181e;border-radius:8px;padding:6px 8px}
.tableLimits small{font-size:7px;white-space:nowrap}.tableLimits b{font:900 10px ui-monospace,SFMono-Regular,Menlo,monospace;color:#fff;white-space:nowrap}
.wagerPanel{
  display:grid;grid-template-columns:minmax(112px,1.05fr) minmax(230px,2fr) auto;
  gap:7px;align-items:stretch;
}
.betChoices{display:grid;grid-template-rows:1fr auto;gap:5px;min-width:0}
.wagerInput{
  background:#11080a;border:1px solid #552029;border-radius:10px;padding:6px 8px;
  display:flex;flex-direction:column;justify-content:center;
}
.moneyField{display:flex;align-items:center;margin-top:2px}
.moneyField span{color:#ff6677;font-weight:800;margin-right:3px}
.moneyField input{
  width:100%;min-width:0;
  border:0;outline:0;background:transparent;color:#fff;
  font:800 17px ui-monospace,SFMono-Regular,Menlo,monospace;
}
.quickBets{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.quickBets button{padding:9px 3px;font-size:9px}
.lastBetTools{display:grid;grid-template-columns:1fr auto 1fr;gap:5px;align-items:center}
.lastBetTools button{padding:7px 5px;font-size:8px}
.lastBetTools span{font:800 8px ui-monospace,SFMono-Regular,Menlo,monospace;color:#aa9296;text-align:center;white-space:nowrap;padding:0 3px}
.deal{
  min-width:75px;
  background:linear-gradient(#c11c2e,#670a14)!important;
  border-color:#ff4657!important;
  box-shadow:0 0 18px #d51e3320;
}
.countCheck{display:grid;grid-template-columns:1fr auto auto;gap:7px}
.countCheck input{
  min-width:0;
  background:#110709;border:1px solid #5b2129;border-radius:9px;
  padding:10px 11px;color:#fff;font-size:14px;outline:none;
}
.countCheck input:focus{border-color:#ff4255;box-shadow:0 0 0 2px #ff42551c}
.modeInfo{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  font-size:8px;line-height:1.35;text-align:center;color:#927f83;
}
.modeInfo span{border-top:1px solid #321419;padding-top:5px}
.modeInfo b{color:#d8ccce}
.strategyHelp{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #321419;border-bottom:1px solid #321419;padding:7px 2px}
.strategyHelpText{min-width:0}.strategyHelpText small{display:block;font-size:7px}.strategyHelpText b{display:inline-block;font-size:10px;margin-top:2px}.strategyHelpText span{font-size:8px;color:#8f7b7f;margin-left:6px}
#strategyChartBtn{padding:8px 11px;white-space:nowrap;font-size:8px}
.strategyHelp.testLocked{opacity:.5}.strategyHelp.testLocked #strategyChartBtn{display:none}
.strategyModal{width:min(96vw,920px);max-height:88dvh;overflow:auto;background:linear-gradient(180deg,#22090d,#090607);border:1px solid #8d2936;border-radius:18px;padding:18px;box-shadow:0 25px 80px #000}
.strategyModal h2{margin:3px 0 4px;font-size:21px;letter-spacing:.08em}.strategyModal .modalHead p{margin:0;color:#9f8d90;font-size:9px}
.chartLegend{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.chartLegend span{font-size:8px;color:#ad9b9e;border:1px solid #3d171d;border-radius:7px;padding:5px 7px;background:#0d0607}.chartLegend b{color:#ff7785}
.strategyTables{display:grid;gap:12px}.strategyTableBlock h3{margin:0 0 5px;font-size:9px;letter-spacing:.13em;color:#d9cacc}.strategyScroll{overflow-x:auto;border:1px solid #421920;border-radius:10px}.strategyGrid{width:100%;min-width:690px;border-collapse:collapse;background:#0c0607;font:800 9px ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center}.strategyGrid th,.strategyGrid td{border-right:1px solid #351419;border-bottom:1px solid #351419;padding:7px 6px;min-width:44px}.strategyGrid th{background:#16080a;color:#bca9ac}.strategyGrid th:first-child,.strategyGrid td:first-child{position:sticky;left:0;z-index:1;background:#16080a;color:#fff;min-width:70px}.strategyGrid td.action-H{color:#d9cacc}.strategyGrid td.action-S{color:#7fd0a0}.strategyGrid td.action-D,.strategyGrid td.action-Ds{color:#79b9ff}.strategyGrid td.action-P{color:#ffca73}.strategyGrid td.action-R{color:#ff7785}.chartNote{font-size:8px;color:#867477;margin:9px 2px 0}
footer{text-align:center;color:#8f7b7f;font-size:9px;letter-spacing:.08em;padding-top:2px}

@media(max-width:440px){
  main{padding-left:8px;padding-right:8px}
  .brand small{font-size:7px}.brand h1{font-size:19px}
  .stats small{font-size:7px}.stats b{font-size:12px}
  .table{min-height:445px}
  .cardSlot{width:67px;height:96px;margin-left:-14px}
  .cardCorner{font-size:15px}.cardSuit{font-size:31px}
  .wagerPanel{grid-template-columns:1fr 1.55fr auto}
  .quickBets button{font-size:8px;padding:8px 2px}
  .lastBetTools button{font-size:7px;padding:7px 2px}.lastBetTools span{font-size:7px}
  .tableLimits{gap:4px}.tableLimits span{gap:4px;padding:5px 4px}.tableLimits small{font-size:6px}.tableLimits b{font-size:8px}
  .strategyHelpText span{display:block;margin-left:0;margin-top:2px}
  .modeInfo{font-size:7px}
}
@media(max-height:760px){
  .table{min-height:395px;padding-top:13px}
  .hand{min-height:120px}
  .cards{min-height:92px}
  .cardSlot{width:60px;height:86px}
  .cardCorner{font-size:14px}.cardSuit{font-size:28px}.countTag{height:19px;font-size:9px}
  .coach{padding:6px 12px}.coach strong{font-size:16px}
  .modeInfo{display:none}
}


.bailout{
  width:100%;
  border:1px solid #ff4053;
  background:linear-gradient(#b9182a,#580912);
  color:#fff;
  border-radius:11px;
  padding:12px 14px;
  font-weight:900;
  font-size:11px;
  letter-spacing:.08em;
  box-shadow:0 0 20px rgba(215,29,49,.22);
}
.bailout[hidden]{display:none!important}
.bailout:active{background:linear-gradient(#e3273b,#790d19)!important}


.topActions{display:flex;align-items:center;gap:6px}
.soundBtn{
  width:42px;min-width:42px;
  border:1px solid #812733;
  background:linear-gradient(#2b0b10,#110506);
  color:#fff;border-radius:10px;padding:10px 0;
  font-weight:900;font-size:15px;
}
.soundBtn.muted{opacity:.48}

.profileBtn{
  max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border:1px solid #812733;background:linear-gradient(#2b0b10,#110506);color:#fff;
  border-radius:10px;padding:10px 10px;font-weight:900;font-size:9px;letter-spacing:.07em;
}
.modalBackdrop{position:fixed;inset:0;z-index:1000;background:#000c;backdrop-filter:blur(8px);display:grid;place-items:center;padding:18px}
.modalBackdrop[hidden]{display:none!important}
.profileModal{width:min(100%,560px);max-height:88dvh;overflow:auto;background:linear-gradient(180deg,#22090d,#090607);border:1px solid #8d2936;border-radius:18px;padding:18px;box-shadow:0 25px 80px #000}
.modalHead{display:flex;justify-content:space-between;align-items:flex-start;gap:15px}.profileModal h2{margin:3px 0 12px;font-size:22px;letter-spacing:.08em}.profileModal h3{font-size:10px;letter-spacing:.14em;color:#cbb9bc;margin:18px 0 7px}
.closeBtn{border:1px solid #73303a;background:#18080a;color:#fff;border-radius:9px;width:36px;height:36px;font-size:22px}
.profileHero{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;background:#100708;border:1px solid #552029;border-radius:13px;padding:12px}.profileHero strong{display:block;font-size:19px}.profileHero span{font-size:10px;color:#b8a7aa}.rankBadge{font:900 12px ui-monospace,monospace;color:#ff6576}
.statGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}.miniStat{background:#100708;border:1px solid #3e171d;border-radius:9px;text-align:center;padding:8px 4px}.miniStat small{display:block;font-size:7px}.miniStat b{display:block;margin-top:3px;font:800 12px ui-monospace,monospace}
.profileCreate{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:12px}.profileCreate input{min-width:0;background:#100708;border:1px solid #5b2129;border-radius:9px;padding:11px;color:#fff;outline:none}.profileCreate button,.profileRow button{border:1px solid #a72b3a;background:linear-gradient(#7a101c,#31070d);color:#fff;border-radius:9px;padding:10px;font-weight:900;font-size:9px}
.localNote{font-size:9px;line-height:1.45;color:#968387;margin:9px 2px}.profileList{display:grid;gap:6px}.profileRow{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:9px 10px;border:1px solid #3f181e;background:#0d0607;border-radius:10px}.profileRow.active{border-color:#b72a3c}.profileRow strong{font-size:12px}.profileRow span{display:block;font-size:8px;color:#9c898c;margin-top:2px}.profileRowActions{display:flex;gap:5px}.profileRow .danger{border-color:#5b232b;background:#16080a;color:#caa}
.leaderboard{display:grid;gap:5px}.leaderRow{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;background:#0c0607;border:1px solid #3b161c;border-radius:9px;padding:8px}.leaderRow .place{font:900 11px ui-monospace,monospace;color:#ff6677}.leaderRow strong{font-size:11px}.leaderRow span{font:800 10px ui-monospace,monospace;color:#d6c7c9}
.achievementList{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.achievement{border:1px solid #64232d;background:#12080a;border-radius:10px;padding:9px}.achievement b{display:block;font-size:9px;color:#ff6677;letter-spacing:.06em}.achievement span{font-size:8px;color:#9e8a8e}.achievementEmpty{font-size:9px;color:#877579;padding:8px 0}.welcomeCard{text-align:center}.welcomeCard p{font-size:11px;line-height:1.5;color:#b6a4a7}.formError{min-height:18px;font-size:9px;color:#ff8090;margin-top:5px}
@media(max-width:440px){.profileBtn{max-width:82px;padding-left:7px;padding-right:7px}.statGrid{grid-template-columns:repeat(2,1fr)}.achievementList{grid-template-columns:1fr}.profileModal{padding:14px}.topActions{gap:4px}}

.ownerTag{display:inline-block;margin-left:7px;padding:2px 6px;border:1px solid #ff6677;border-radius:999px;font:900 8px ui-monospace,monospace;letter-spacing:.08em;color:#ff8895;vertical-align:middle}.ownerTools{margin-top:10px;padding:10px;border:1px solid #3b161c;border-radius:10px;background:#0c0607;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.ownerTools button{padding:8px 10px;border-radius:8px;border:1px solid #7e2633;background:#2a0b10;color:#ff8c99;font:900 10px ui-monospace,monospace;cursor:pointer}.ownerTools span{font:700 9px ui-monospace,monospace;color:#aa9296;flex:1;min-width:180px}

@media(max-width:370px){
  .wagerPanel{grid-template-columns:1fr auto}.wagerInput{grid-column:1}.betChoices{grid-column:1 / -1;grid-row:2}.deal{grid-column:2;grid-row:1}
  .tableLimits{grid-template-columns:repeat(2,minmax(95px,1fr))}
}


.progressionBar{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;background:#0d0708;border:1px solid #3e171d;border-radius:11px;padding:7px 8px}
.ratingBlock{min-width:112px}.ratingBlock small,.xpHead small{display:block;font-size:7px;letter-spacing:.12em;color:#9d898d}.ratingBlock b{display:block;margin-top:2px;font:900 11px ui-monospace,monospace;color:#fff}.ratingBlock span,.xpBlock>span{font:700 7px ui-monospace,monospace;color:#907d81}
.xpBlock{min-width:0}.xpHead{display:flex;justify-content:space-between;align-items:center;gap:8px}.xpHead b{font:800 9px ui-monospace,monospace}.xpTrack{height:6px;margin:4px 0 2px;border-radius:999px;overflow:hidden;background:#250b10;border:1px solid #4a1720}.xpTrack i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7a1521,#ff5a6c);transition:width .25s ease}
#endSession{padding:8px 10px;border:1px solid #742430;background:#18090b;color:#ddd;border-radius:8px;font:900 8px ui-monospace,monospace;white-space:nowrap}
.sessionModal{width:min(100%,560px);max-height:88dvh;overflow:auto;background:linear-gradient(180deg,#22090d,#090607);border:1px solid #8d2936;border-radius:18px;padding:18px;box-shadow:0 25px 80px #000}
.sessionModal h2{margin:3px 0 12px;font-size:22px;letter-spacing:.08em}.sessionGrade{width:82px;height:82px;margin:4px auto 14px;border-radius:50%;display:grid;place-items:center;border:2px solid #a92d3c;background:#130708;font:1000 32px ui-monospace,monospace;color:#fff}
.sessionSummary{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.sessionSummary div{background:#100708;border:1px solid #3e171d;border-radius:9px;text-align:center;padding:9px 4px}.sessionSummary small{display:block;font-size:7px}.sessionSummary b{display:block;margin-top:3px;font:800 11px ui-monospace,monospace}.sessionSummary .positive{color:#8fe3a3}.sessionSummary .negative{color:#ff7b89}
.sessionFeedback{margin-top:10px;padding:10px;border:1px solid #3b161c;border-radius:10px;background:#0c0607}.sessionFeedback p{margin:0 0 6px;font-size:9px;line-height:1.45;color:#c3b0b4}.sessionFeedback p:last-child{margin-bottom:0}.sessionActions{display:flex;justify-content:center;margin-top:12px}.sessionActions button{border:1px solid #a72b3a;background:linear-gradient(#7a101c,#31070d);color:#fff;border-radius:9px;padding:11px 15px;font-weight:900;font-size:9px}
@media(max-width:520px){.progressionBar{grid-template-columns:1fr auto}.xpBlock{grid-column:1 / -1;grid-row:2}.sessionSummary{grid-template-columns:repeat(2,1fr)}}

.xpFoot{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:12px}
#xpGain{font:900 8px ui-monospace,monospace;color:#ff7f8d;white-space:nowrap}
#xpGain.pop{animation:xpGainPop .9s ease both}
.xpBlock.xpPulse .xpTrack{animation:xpTrackPulse .65s ease}
.xpBlock.xpPulse #xpFill{filter:brightness(1.25)}
@keyframes xpGainPop{0%{opacity:0;transform:translateY(4px) scale(.9)}20%{opacity:1;transform:translateY(0) scale(1.06)}70%{opacity:1}100%{opacity:0;transform:translateY(-4px) scale(1)}}
@keyframes xpTrackPulse{0%,100%{box-shadow:none}40%{box-shadow:0 0 13px #ff536777;border-color:#8b2937}}

.levelUpOverlay{position:fixed;inset:0;z-index:120;display:grid;place-items:center;background:#050304b8;backdrop-filter:blur(3px);padding:20px;overflow:hidden}
.levelUpOverlay[hidden]{display:none}
.levelUpCard{position:relative;z-index:2;width:min(92vw,390px);text-align:center;background:linear-gradient(180deg,#21090e 0%,#0b0607 100%);border:1px solid #a42e3d;border-radius:18px;padding:22px 20px 20px;box-shadow:0 24px 80px #000,0 0 34px #8d243133;transform:scale(.86) translateY(12px);opacity:0}
.levelUpOverlay.show .levelUpCard{animation:levelCardIn .48s cubic-bezier(.17,.84,.32,1.2) forwards}
.levelUpOverlay.hide .levelUpCard{animation:levelCardOut .2s ease forwards}
.levelUpCard small{font:900 8px ui-monospace,monospace;letter-spacing:.22em;color:#a58f93}
.levelUpIcon{width:54px;height:54px;margin:10px auto 8px;display:grid;place-items:center;border:1px solid #9e2a39;border-radius:50%;background:#120708;color:#ff6576;font-size:25px;box-shadow:inset 0 0 16px #7b152333}
.levelUpCard h2{margin:3px 0 5px;font-size:15px;letter-spacing:.22em;color:#d4c8ca}
.levelUpCard strong{display:block;font:1000 30px ui-monospace,monospace;letter-spacing:.06em;color:#fff;text-shadow:0 0 18px #ff506455}
.levelUpCard p{margin:8px 0 0;font:700 9px ui-monospace,monospace;color:#ae999d}
.levelUpLine{height:3px;margin:16px auto 0;background:#2c0c12;border-radius:99px;overflow:hidden}
.levelUpLine i{display:block;height:100%;width:0;background:linear-gradient(90deg,#6b101b,#ff6172,#6b101b)}
.levelUpOverlay.show .levelUpLine i{animation:levelLine 2.3s ease-out forwards}
.levelUpBurst{position:absolute;width:320px;height:320px;pointer-events:none}
.levelUpBurst i{position:absolute;left:50%;top:50%;width:2px;height:112px;transform-origin:50% 0;background:linear-gradient(#ff657688,transparent);opacity:0}
.levelUpBurst i:nth-child(1){transform:rotate(0deg)}.levelUpBurst i:nth-child(2){transform:rotate(45deg)}.levelUpBurst i:nth-child(3){transform:rotate(90deg)}.levelUpBurst i:nth-child(4){transform:rotate(135deg)}.levelUpBurst i:nth-child(5){transform:rotate(180deg)}.levelUpBurst i:nth-child(6){transform:rotate(225deg)}.levelUpBurst i:nth-child(7){transform:rotate(270deg)}.levelUpBurst i:nth-child(8){transform:rotate(315deg)}
.levelUpOverlay.show .levelUpBurst i{animation:burstRay .8s ease-out .08s}
.levelUpOverlay.ratingEvent .levelUpCard{border-color:#d34a5d;box-shadow:0 24px 80px #000,0 0 42px #ad304044}
.levelUpOverlay.ratingEvent .levelUpIcon{animation:ratingSpin .7s cubic-bezier(.2,.8,.3,1)}
@keyframes levelCardIn{to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes levelCardOut{to{opacity:0;transform:scale(.97) translateY(4px)}}
@keyframes levelLine{0%{width:0}75%,100%{width:100%}}
@keyframes burstRay{0%{opacity:0;height:35px}30%{opacity:.65}100%{opacity:0;height:145px}}
@keyframes ratingSpin{0%{transform:rotate(-12deg) scale(.8)}65%{transform:rotate(7deg) scale(1.12)}100%{transform:rotate(0) scale(1)}}
@media(prefers-reduced-motion:reduce){
  #xpGain.pop,.xpBlock.xpPulse .xpTrack,.levelUpOverlay.show .levelUpCard,.levelUpOverlay.hide .levelUpCard,.levelUpOverlay.show .levelUpLine i,.levelUpOverlay.show .levelUpBurst i,.levelUpOverlay.ratingEvent .levelUpIcon{animation:none!important}
  .levelUpCard{opacity:1;transform:none}.levelUpLine i{width:100%}
}

.tableLimitDock{display:grid;gap:6px;justify-items:center;margin:-2px 0 2px}
.tableIdentity{display:flex;align-items:center;justify-content:center;gap:8px}
.tableIdentity span{text-align:center}.tableIdentity small{display:block;font-size:7px;letter-spacing:.13em;color:#857276}.tableIdentity b{display:block;margin-top:2px;font:900 10px ui-monospace,monospace;color:#eee}.tableIdentity em{display:block;margin-top:2px;font:700 7px ui-monospace,monospace;color:#7d6b6f;font-style:normal}
.tableIdentity button{padding:7px 9px;border:1px solid #4d3030;background:#11090a;color:#c9b8bb;border-radius:7px;font:900 8px ui-monospace,monospace}
.tableLimits{display:grid;grid-template-columns:repeat(2,minmax(110px,150px));gap:6px;justify-content:center}
.tableLimits span{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;background:#0e0708;border:1px solid #3f181e;border-radius:8px;padding:6px 8px}
.tableLimits small{font-size:7px;white-space:nowrap}.tableLimits b{font:900 10px ui-monospace,SFMono-Regular,Menlo,monospace;color:#fff;white-space:nowrap}
.tableModal{width:min(100%,560px);max-height:88dvh;overflow:auto;background:linear-gradient(180deg,#191111,#080707);border:1px solid #604137;border-radius:18px;padding:18px;box-shadow:0 25px 80px #000}
.tableModal h2{margin:3px 0 4px;font-size:22px;letter-spacing:.08em}.tableModal .modalHead p{margin:0;font-size:9px;color:#9d8b86}
.tableOptions{display:grid;gap:8px;margin-top:14px}.tableOption{width:100%;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;text-align:left;border:1px solid #4a342b;background:linear-gradient(180deg,#17100d,#0c0908);color:#eee;border-radius:12px;padding:12px}.tableOption span{min-width:0}.tableOption small{display:block;font-size:7px;letter-spacing:.12em;color:#958078}.tableOption b{display:block;margin:2px 0;font-size:12px;letter-spacing:.07em}.tableOption em{display:block;font-size:8px;color:#93827d;font-style:normal}.tableOption strong{font:900 11px ui-monospace,monospace;white-space:nowrap;color:#d8c4a1}.tableOption.active{border-color:#9a6b48;box-shadow:inset 0 0 0 1px #9a6b4833}.tableOption.locked{opacity:.42;filter:saturate(.5);cursor:not-allowed}
.achievement{position:relative}.achievement em{display:inline-block;margin-top:5px;padding:2px 5px;border:1px solid #4a2328;border-radius:999px;font:900 7px ui-monospace,monospace;color:#df9aa4;font-style:normal}
@media(max-width:440px){.tableIdentity{flex-wrap:wrap}.tableOption{grid-template-columns:1fr}.tableOption strong{text-align:left}}

/* Game-stage layout: table + off-felt coaching panel */
.gameStage{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:10px;align-items:stretch}
.gameStage .table{min-width:0}
.sideCoach{
  align-self:stretch;
  width:auto;
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:left;
  background:linear-gradient(180deg,#15100e,#090706);
  border:1px solid #5a4034;
  border-radius:12px;
  padding:14px 13px;
  box-shadow:inset 0 0 0 1px #ffffff05,0 7px 18px #0006;
}
.sideCoach small{font:800 8px ui-monospace,monospace;letter-spacing:.15em;color:#9f9188}
.sideCoach strong{display:block;color:#e7d4a7;font-size:23px;margin:6px 0 5px;letter-spacing:.04em}
.sideCoach p{font-size:10px;line-height:1.45;color:#b9aaa1;margin:0}
.coachRule{margin-top:auto;padding-top:12px;border-top:1px solid #3d2c25;display:grid;gap:3px}
.coachRule span{font:800 7px ui-monospace,monospace;color:#766861;letter-spacing:.14em}
.coachRule b{font:800 9px ui-monospace,monospace;color:#b8a58d}

/* Physical wager chips on the felt */
.chipArea{
  position:absolute;z-index:3;left:50%;top:53%;
  transform:translate(-50%,-50%);
  display:grid;justify-items:center;gap:7px;
  pointer-events:none;min-width:160px;
}
.chipStacks{display:flex;align-items:flex-end;justify-content:center;gap:5px;min-height:48px}
.chipStack{position:relative;width:42px;height:48px}
.casinoChip{
  --i:0;position:absolute;left:3px;bottom:calc(var(--i) * 4px);
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  border:3px dashed #eee;
  box-shadow:0 2px 1px #0008,0 5px 8px #0005,inset 0 0 0 3px #ffffff28,inset 0 0 0 7px #00000018;
  font-style:normal;
}
.casinoChip:before{content:"";position:absolute;inset:7px;border-radius:50%;border:1px solid #ffffff66;background:#00000015}
.casinoChip span{position:relative;z-index:1;font:bold 8px Georgia,serif;color:#fff;text-shadow:0 1px 1px #000}
.chip1{background:#d9d7cf;border-color:#3a3a3a}.chip1 span{color:#222;text-shadow:none}.chip1:before{border-color:#5555}
.chip5{background:#b52b34}
.chip25{background:#23804f}
.chip100{background:#242428}
.chip500{background:#7046a5}
.chipBetLabel{padding:3px 8px;border-radius:999px;background:#052a20cc;border:1px solid #d9c58d45;font:800 8px ui-monospace,monospace;color:#eadfa9;letter-spacing:.08em;text-shadow:0 1px 1px #001b14}
.chipArea.empty{opacity:.4}
.feltRules{top:47%}

/* XP/rating strip sits above the bankroll/count HUD */
.progressionBar{margin-bottom:0}
.stats{margin-top:0}

@media(max-width:760px){
  .gameStage{grid-template-columns:1fr}
  .sideCoach{min-height:auto;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
  .sideCoach small{grid-column:1/-1}
  .sideCoach strong{font-size:19px;margin:3px 0}
  .sideCoach p{margin:0}
  .coachRule{display:none}
}
@media(max-width:440px){
  .chipArea{top:54%}.chipStack{width:35px}.casinoChip{width:31px;height:31px}.chipStacks{gap:2px}
}

/* SAFE CASINO TABLE V9 */
.gameStage{grid-template-columns:minmax(0,1fr) 190px;align-items:stretch}
.table{
  border:11px solid #4b2e1d;
  outline:2px solid #21130d;
  background:
    radial-gradient(circle at 18% 25%,rgba(255,255,255,.035) 0 1px,transparent 1.6px),
    radial-gradient(circle at 67% 71%,rgba(0,0,0,.08) 0 1px,transparent 1.6px),
    repeating-linear-gradient(24deg,rgba(255,255,255,.006) 0 1px,transparent 1px 5px),
    radial-gradient(ellipse at 50% 42%,#176b4d 0%,#105b43 42%,#0a4937 72%,#07392c 100%);
  background-size:19px 19px,27px 27px,auto,auto;
  box-shadow:inset 0 0 0 3px #745039,inset 0 0 0 5px #24160f,inset 0 0 80px rgba(0,27,20,.68),0 4px 0 #1b100b,0 14px 28px rgba(0,0,0,.58);
}
.table:before{inset:13px;border-color:rgba(215,194,141,.32);box-shadow:inset 0 0 22px rgba(224,199,146,.045)}
.table:after{left:9%;right:9%;bottom:14%;height:39%;border-color:rgba(234,217,168,.29)}
.feltArc{border-color:rgba(234,217,168,.32) transparent transparent}
.arc1{top:39%;left:12%;right:12%}.arc2{top:46%;left:20%;right:20%}
.feltBrand{position:absolute;z-index:1;left:50%;top:31%;transform:translateX(-50%);text-align:center;color:rgba(234,220,161,.38);pointer-events:none;text-shadow:0 1px #063729}
.feltBrand span{display:block;font:700 18px Georgia,serif;letter-spacing:.18em}
.feltBrand small{display:block;margin-top:2px;font:600 6px Georgia,serif;letter-spacing:.24em;color:inherit}
.feltRules{top:43%;font-size:7px;color:rgba(239,225,162,.46)}
.insuranceLine{position:absolute;z-index:1;left:50%;top:48%;transform:translateX(-50%);width:55%;padding-top:5px;border-top:1px solid rgba(234,217,168,.24);text-align:center;font:600 6px Georgia,serif;letter-spacing:.18em;color:rgba(234,217,168,.36);pointer-events:none}
.betSpot{position:absolute;z-index:1;left:50%;top:57%;transform:translate(-50%,-50%);width:112px;height:55px;border:1px solid rgba(234,217,168,.31);border-radius:50%;display:grid;place-items:center;pointer-events:none}
.betSpot span{font:600 6px Georgia,serif;letter-spacing:.18em;color:rgba(234,217,168,.33)}
.chipArea{top:57%;z-index:4}
.dealerHand,.playerHand{z-index:5}

/* Recenter all table information directly beneath the game stage */
.tableLimitDock{
  width:min(100%,650px);
  margin:0 auto 3px!important;
  display:grid!important;
  grid-template-columns:minmax(190px,1.45fr) minmax(210px,1fr)!important;
  align-items:stretch;
  justify-content:center;
  gap:6px!important;
}
.tableIdentity,.tableLimits{width:100%;margin:0!important}
.tableIdentity{
  display:grid!important;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:7px;
  background:linear-gradient(180deg,#15100e,#0b0807);
  border:1px solid #4b342a;
  border-radius:8px;
  padding:6px 8px;
}
.tableIdentity span{text-align:center}
.tableIdentity button{height:100%;align-self:stretch}
.tableLimits{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:6px!important;
}
.tableLimits span{
  background:linear-gradient(180deg,#15100e,#0b0807)!important;
  border-color:#4b342a!important;
}
@media(max-width:760px){
  .gameStage{grid-template-columns:1fr}
  .tableLimitDock{grid-template-columns:1fr!important;width:min(100%,430px)}
}
@media(max-width:440px){
  .feltBrand span{font-size:14px}.feltRules{font-size:6px}.insuranceLine{width:66%}
}

/* V11: restore and emphasize basic-strategy book control */
#strategyHelp.strategyHelp{
  width:min(100%,650px);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  background:linear-gradient(180deg,#15100e,#0b0807);
  border:1px solid #4b342a;
  border-radius:9px;
  box-shadow:inset 0 1px rgba(255,255,255,.03);
}
#strategyHelp .strategyHelpText{min-width:0}
#strategyHelp .strategyHelpText small{display:block;font-size:7px;letter-spacing:.14em;color:#8e7d73}
#strategyHelp .strategyHelpText b{display:inline-block;margin-top:2px;font-size:10px;color:#e8dcc5}
#strategyHelp .strategyHelpText span{margin-left:7px;font-size:7px;color:#85766e}
#strategyHelp #strategyChartBtn{
  padding:8px 12px;
  border-color:#79543e;
  background:linear-gradient(#2b1c13,#120c09);
  color:#ead9b9;
  white-space:nowrap;
}
#strategyHelp.testLocked{display:none!important}
@media(max-width:480px){
  #strategyHelp.strategyHelp{grid-template-columns:1fr auto}
  #strategyHelp .strategyHelpText span{display:block;margin:2px 0 0}
}


/* === MERGED TRAINING TOOLS V13 === */
.toolSwitcher{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  padding:4px;
  border:1px solid #4f2528;
  border-radius:12px;
  background:#0b0708;
}
.toolTab{
  min-width:0;
  min-height:54px;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  column-gap:8px;
  align-items:center;
  text-align:left;
  border:1px solid transparent;
  border-radius:9px;
  padding:8px 10px;
  background:#11090a;
  color:#a99599;
}
.toolTab>span{
  grid-row:1/3;
  display:grid;
  place-items:center;
  width:29px;height:29px;
  border-radius:50%;
  border:1px solid #4c2a2c;
  font:18px Georgia,serif;
  color:#786466;
}
.toolTab b{font-size:9px;letter-spacing:.08em;color:#bbaaad}
.toolTab small{font-size:7px;letter-spacing:.04em;color:#75676a}
.toolTab.active{
  border-color:#8e2b38;
  background:linear-gradient(180deg,#2a0d12,#110708);
  box-shadow:inset 0 1px rgba(255,255,255,.025);
}
.toolTab.active>span{border-color:#b33a48;color:#f0d9dc;background:#240c10}
.toolTab.active b{color:#fff}
.toolTab.active small{color:#b9a7aa}
.appView[hidden]{display:none!important}
.appView.activeView{display:flex;flex-direction:column;gap:10px}

/* Card Learner shell */
.learnerView{min-width:0}
.learnerIntro{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:4px 1px 0;
}
.learnerIntro h2{margin:2px 0 3px;font-size:18px;letter-spacing:.1em}
.learnerIntro p{margin:0;max-width:520px;color:#9e8d90;font-size:10px;line-height:1.4}
.learnerOutline,.learnerPrimary,#clCheckCount,#clResetStats{
  border:1px solid #6c2b31;
  background:linear-gradient(#251015,#100708);
  color:#fff;
  border-radius:9px;
  padding:10px 12px;
  font-weight:850;
  font-size:9px;
  letter-spacing:.06em;
}
.learnerPrimary{
  border-color:#c23949;
  background:linear-gradient(#8f1725,#3c090f);
}
.learnerHud{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
}
.learnerHud div,.learnerSession div{
  background:#10090a;
  border:1px solid #4c2629;
  border-radius:9px;
  padding:7px 5px;
  text-align:center;
}
.learnerHud b,.learnerSession b{
  display:block;
  margin-top:3px;
  font:850 13px ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#f2eeee;
}

/* Learner now shares the LTC casino language: green felt + warm wood rail */
.learnerTable{
  position:relative;
  min-height:390px;
  overflow:hidden;
  border:11px solid #4b2e1d;
  outline:2px solid #21130d;
  border-radius:46% 46% 18px 18px/12% 12% 18px 18px;
  background:
    radial-gradient(circle at 18% 25%,rgba(255,255,255,.035) 0 1px,transparent 1.6px),
    radial-gradient(circle at 67% 71%,rgba(0,0,0,.08) 0 1px,transparent 1.6px),
    repeating-linear-gradient(24deg,rgba(255,255,255,.006) 0 1px,transparent 1px 5px),
    radial-gradient(ellipse at 50% 42%,#176b4d 0%,#105b43 42%,#0a4937 72%,#07392c 100%);
  background-size:19px 19px,27px 27px,auto,auto;
  box-shadow:
    inset 0 0 0 3px #745039,
    inset 0 0 0 5px #24160f,
    inset 0 0 80px rgba(0,27,20,.68),
    0 4px 0 #1b100b,
    0 14px 28px rgba(0,0,0,.58);
}
.learnerTable:before{
  content:"";
  position:absolute;
  inset:13px;
  border:1px solid rgba(215,194,141,.28);
  border-radius:44% 44% 13px 13px/12% 12% 13px 13px;
  pointer-events:none;
}
.learnerTableBrand{
  position:absolute;z-index:1;left:50%;top:26%;
  transform:translateX(-50%);
  text-align:center;
  color:rgba(234,220,161,.34);
  pointer-events:none;
}
.learnerTableBrand span{display:block;font:700 17px Georgia,serif;letter-spacing:.18em}
.learnerTableBrand small{display:block;margin-top:2px;font:600 6px Georgia,serif;letter-spacing:.22em;color:inherit}
.learnerRuleArc{
  position:absolute;z-index:1;left:12%;right:12%;
  border:1px solid rgba(234,217,168,.28);
  border-color:rgba(234,217,168,.28) transparent transparent;
  border-radius:50%;
  pointer-events:none;
}
.learnerRuleArc.arcOuter{top:44%;height:120px}
.learnerRuleArc.arcInner{top:51%;left:21%;right:21%;height:90px}
.learnerFeltCopy{
  position:absolute;z-index:1;left:50%;top:42%;
  transform:translateX(-50%);
  width:80%;text-align:center;
  color:rgba(239,225,162,.42);
  font:600 6px Georgia,serif;
  letter-spacing:.18em;
  pointer-events:none;
}

.clShoeArea{height:88px;display:flex;justify-content:center;padding-top:13px;position:relative;z-index:3}
.clShoe{
  width:126px;height:57px;
  position:relative;
  border:2px solid #34261f;
  border-radius:7px 7px 11px 11px;
  background:linear-gradient(160deg,#4c4d49,#191b19 48%,#0d0e0d);
  box-shadow:0 7px 14px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.1);
  display:flex;align-items:flex-end;justify-content:center;
}
.clShoe:before{
  content:"";
  position:absolute;left:11px;right:11px;top:6px;height:32px;
  clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);
  background:#0a0b0a;
  border:1px solid #171817;
}
.clShoeSlot{
  position:absolute;left:20px;right:20px;top:11px;height:23px;
  background:repeating-linear-gradient(90deg,#e6e2d9 0 2px,#a7a59f 2px 3px,#1a1a19 3px 5px);
  opacity:.68;
}
.clShoe span{position:relative;z-index:2;margin-bottom:3px;font-size:6px;letter-spacing:.16em;color:#9b968b}

.clCardStage{height:232px;position:relative;z-index:3;perspective:1100px}
.clCardMover{
  position:absolute;width:118px;height:166px;left:50%;top:17px;margin-left:-59px;
  transform-origin:50% 50%;will-change:transform,opacity;
}
.clCardMover.idle{opacity:0;transform:translate3d(0,-70px,0) scale(.72)}
.clCardMover.dealIn{animation:clDealIn 210ms cubic-bezier(.15,.8,.2,1) forwards}
@keyframes clDealIn{
  0%{opacity:.25;transform:translate3d(0,-72px,0) scale(.68) rotate(-5deg)}
  72%{opacity:1;transform:translate3d(0,7px,0) scale(1.03) rotate(.8deg)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
.clCard3d{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateY(180deg);will-change:transform}
.clCard3d.flipping{animation:clSourceFlip 350ms linear forwards}
@keyframes clSourceFlip{from{transform:rotateY(180deg)}to{transform:rotateY(0deg)}}
.clFace{
  position:absolute;inset:0;border-radius:10px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.48);
}
.clFrontFace{
  background:linear-gradient(145deg,#fffdf8,#ebe8df);
  border:1px solid #d2d0c8;color:#111;padding:9px;
}
.clFrontFace.red{color:#c52235}
#clCornerRank{display:block;font:800 25px Georgia,serif;line-height:.9}
#clCornerSuit{display:block;font:21px Georgia,serif}
#clBigSuit{position:absolute;inset:0;display:grid;place-items:center;font:70px Georgia,serif}
.clBackFace{transform:rotateY(180deg);background:#f6f6f3;border:4px solid #fff;padding:7px}
.clBackPattern{
  width:100%;height:100%;border-radius:5px;border:2px solid #9c1725;
  background:
    linear-gradient(45deg,#9f1827 25%,transparent 25%,transparent 75%,#9f1827 75%),
    linear-gradient(-45deg,#9f1827 25%,#170608 25%,#170608 75%,#9f1827 75%);
  background-size:18px 18px;
  box-shadow:inset 0 0 0 3px #080808,inset 0 0 0 5px #fff;
}
.clReadyText{
  position:absolute;left:0;right:0;bottom:8px;text-align:center;
  color:rgba(239,225,162,.65);font:700 8px ui-monospace,monospace;letter-spacing:.13em;
}

.learnerStatus{
  background:#10090a;
  border:1px solid #4e292d;
  border-radius:10px;
  padding:9px 11px;
  text-align:center;
}
.learnerStatus strong{display:block;margin:3px 0 2px;font-size:12px}
.learnerStatus span{display:block;color:#a89699;font-size:10px}
.learnerStatus.good{border-color:#638874}
.learnerStatus.bad{border-color:#a93442}
.learnerValueButtons{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.learnerValueButtons button{
  min-height:62px;
  border:1px solid #5a2a30;
  border-radius:10px;
  background:linear-gradient(#211014,#0e0708);
  color:#fff;
}
.learnerValueButtons button b{display:block;font-size:23px;color:#f6eeee}
.learnerValueButtons button span{font-size:7px;letter-spacing:.1em;color:#968387}
.learnerValueButtons button:disabled{opacity:.3}
.learnerPrimaryRow{display:grid;grid-template-columns:2fr 1fr;gap:7px}
.learnerCountCheck{display:grid;grid-template-columns:1fr auto;gap:7px}
.learnerCountCheck input{
  min-width:0;width:100%;background:#10090a;border:1px solid #4f292d;border-radius:9px;
  color:#fff;padding:10px 11px;font-size:15px;outline:none;
}
.learnerCountCheck input:focus{border-color:#a93846;box-shadow:0 0 0 2px rgba(169,56,70,.12)}
.learnerSession{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:6px}
#clResetStats{padding-left:9px;padding-right:9px}
.learnerTip{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  padding:8px;border-top:1px solid #382125;color:#9f8f92;font-size:8px;
}
.learnerTip small{font-size:7px;color:#75676a}
.learnerTip b{color:#dfd3d5}

@media(max-width:520px){
  .toolTab{padding:7px}.toolTab>span{display:none}
  .toolTab{grid-template-columns:1fr}
  .learnerIntro{align-items:flex-start}.learnerIntro p{display:none}
  .learnerHud small,.learnerSession small{font-size:7px}
  .learnerSession{grid-template-columns:repeat(3,1fr)}
  #clResetStats{grid-column:1/-1}
}
@media(max-width:410px){
  .learnerTable{min-height:365px}
  .clShoeArea{height:76px}
  .clShoe{transform:scale(.9)}
  .clCardStage{height:218px}
  .clCardMover{width:110px;height:155px;margin-left:-55px}
}
@media(prefers-reduced-motion:reduce){
  .clCardMover.dealIn,.clCard3d.flipping{animation-duration:1ms}
}

/* V14 CARD LEARNER — NO VALUE HINTS */
.learnerValueButtons button{
  display:grid;
  place-items:center;
}
.learnerValueButtons button b{
  margin:0;
  font-size:26px;
}

/* V15 — 2 SECOND CARD LEARNER RESPONSE TIMER */
.learnerStatusTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.clTimer{
  min-width:42px;
  text-align:right;
  font:900 12px ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#d7c9cc;
  letter-spacing:.04em;
}
.clTimer.running{color:#f0e4e6}
.clTimer.urgent{
  color:#ff5b6b;
  animation:clTimerPulse .34s ease-in-out infinite alternate;
}
@keyframes clTimerPulse{
  from{transform:scale(1)}
  to{transform:scale(1.08)}
}
@media(prefers-reduced-motion:reduce){
  .clTimer.urgent{animation:none}
}

/* === V16 PRODUCT / ACADEMY === */
.toolSwitcher{grid-template-columns:repeat(3,1fr)}
.academyView{min-width:0}
.academyHero{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 2px}
.academyHero h2{margin:2px 0 4px;font-size:19px;letter-spacing:.09em}.academyHero p{margin:0;color:#9d8b8e;font-size:10px}
.academyOverall{width:72px;height:72px;flex:0 0 72px;border-radius:50%;border:2px solid #72533d;background:radial-gradient(circle,#183f31,#0b211a);display:grid;place-items:center;align-content:center;box-shadow:inset 0 0 22px #0008}
.academyOverall b{font:900 19px ui-monospace,monospace;color:#e9dfc3}.academyOverall span{font-size:6px;letter-spacing:.12em;color:#a89d83}
.academyNext{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;padding:12px 14px;border:1px solid #72533d;border-radius:11px;background:linear-gradient(135deg,#173e30,#0c251d)}
.academyNext small,.academyNext span{grid-column:1}.academyNext strong{grid-column:1;font-size:13px}.academyNext span{font-size:9px;color:#b5aa93}.academyNext button{grid-column:2;grid-row:1/4;border:1px solid #9b774f;background:#2e1d13;color:#f0dfba;border-radius:8px;padding:10px;font-size:8px;font-weight:900}
.academySkills{display:grid;gap:6px}.skillCard{display:grid;grid-template-columns:36px 1fr auto;gap:9px;align-items:center;padding:9px 10px;border:1px solid #49282b;border-radius:10px;background:#10090a}
.skillNum{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1px solid #65323a;color:#c6b6b8;font-weight:900}.skillCard.done .skillNum{border-color:#758b72;color:#d8e1c9;background:#17251b}
.skillBody{min-width:0}.skillBody small{display:block;font-size:6px}.skillBody strong{display:block;font-size:10px;margin:2px 0}.skillBody span{display:block;font-size:8px;color:#948387}.skillTrack{height:4px;background:#271619;border-radius:9px;overflow:hidden;margin-top:6px}.skillTrack i{display:block;height:100%;background:#8e3440}.skillCard.done .skillTrack i{background:#6f876b}.skillCard>b{font:800 10px ui-monospace,monospace;color:#ae9da0}
.academyGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.academyPanel{min-width:0;border:1px solid #47282b;border-radius:10px;background:#0f090a;padding:10px}.academyPanelHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.academyPanel h3{font-size:11px;margin:1px 0}.academyPanelHead button,.academyAction{border:1px solid #5a3034;background:#1d0e11;color:#d8cacc;border-radius:7px;padding:7px 9px;font-size:7px;font-weight:800}
.historyList,.mistakeList{display:grid;gap:5px}.historyRow{display:flex;align-items:center;justify-content:space-between;padding:7px;border-bottom:1px solid #281719}.historyRow span small{display:block;color:#88777a;font-size:7px;margin-top:2px}.historyRow strong{font:800 9px ui-monospace,monospace}.positive{color:#9dbb9d}.negative{color:#d57a84}
.mistakeRow{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:7px;background:#160c0e;border-radius:7px}.mistakeRow span{text-align:center}.mistakeRow small{display:block;font-size:6px}.mistakeRow b{display:block;margin-top:2px;font-size:8px}.emptyState{padding:14px 7px;text-align:center;color:#76686b;font-size:8px}.academyAction{width:100%;margin-top:8px}.academyAction:disabled{opacity:.35}
.certificationCard{display:grid;grid-template-columns:1.1fr 1fr;gap:12px;padding:14px;border:1px solid #7a5c3e;border-radius:12px;background:radial-gradient(circle at 15% 0,#29483b,#11241d 55%,#0b1511);box-shadow:inset 0 0 40px #0005}.certificationCard h3{margin:3px 0;font:700 15px Georgia,serif;color:#e5d8b5;letter-spacing:.08em}.certificationCard p{margin:0;font-size:8px;color:#a89e87}.certReqs{display:grid;gap:4px}.certReqs span{display:flex;justify-content:space-between;gap:6px;padding:5px 7px;border:1px solid #493d30;border-radius:6px}.certReqs span.met{border-color:#63735d}.certReqs b{font-size:7px}.certReqs small{font-size:6px}
.onboardingBackdrop{z-index:1200}.onboardingCard{width:min(92vw,460px);padding:24px;border:1px solid #75543a;border-radius:16px;background:radial-gradient(circle at 50% 0,#244a39,#101814 58%,#0b0909);box-shadow:0 25px 80px #000c;text-align:center}.onboardingCard h2{margin:5px 0 18px;font:700 22px Georgia,serif;color:#e8dcc1;letter-spacing:.06em}.onboardSteps{display:grid;gap:8px;text-align:left}.onboardSteps>div{display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:center;padding:9px;border:1px solid #44382e;border-radius:9px;background:#0e100e}.onboardSteps>div>b{width:30px;height:30px;display:grid;place-items:center;border:1px solid #765a3e;border-radius:50%;color:#e2d4b5}.onboardSteps strong,.onboardSteps small{display:block}.onboardSteps strong{font-size:9px}.onboardSteps small{font-size:7px;margin-top:2px;color:#948a78}.onboardingCard>button{width:100%;margin-top:15px;padding:11px;border:1px solid #a77c50;border-radius:9px;background:linear-gradient(#4e311d,#25170f);color:#f0dfbb;font-weight:900;font-size:9px;letter-spacing:.08em}
@media(max-width:620px){.academyGrid{grid-template-columns:1fr}.certificationCard{grid-template-columns:1fr}.academyHero p{display:none}}
@media(max-width:420px){.toolTab small{display:none}.toolTab{min-height:45px}.academyNext{grid-template-columns:1fr}.academyNext button{grid-column:1;grid-row:auto;margin-top:6px}}


/* =====================================================================
   V17 RESPONSIVE PRODUCT POLISH
   Two intentional interfaces:
   - ui-pc: wide training workspace for desktop/laptop
   - ui-mobile: touch-first stacked interface with breathing room
   ===================================================================== */

html{scroll-behavior:smooth}
button,input{touch-action:manipulation}
button{min-height:40px}
footer{
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
footer #layoutIndicator{
  font-size:6px;
  letter-spacing:.12em;
  color:#6e5d60;
  font-weight:800;
}

/* ---------- PC / LAPTOP ---------- */
body.ui-pc main{
  width:min(100%,1240px);
  padding:20px 24px 30px;
  gap:14px;
}
body.ui-pc .topbar{
  min-height:54px;
  padding:0 2px;
}
body.ui-pc .brand h1{font-size:24px}
body.ui-pc .brand small{font-size:8px}
body.ui-pc .topActions{gap:8px}
body.ui-pc .topActions button{min-height:38px;padding-left:13px;padding-right:13px}
body.ui-pc .toolSwitcher{
  max-width:760px;
  width:100%;
  margin:0 auto;
  gap:8px;
  padding:5px;
}
body.ui-pc .toolTab{
  min-height:54px;
  padding:8px 12px;
}
body.ui-pc .appView.activeView{gap:12px}

/* Blackjack becomes a proper two-column workstation. */
body.ui-pc #blackjackView.activeView{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(320px,.7fr);
  grid-template-rows:auto auto auto auto auto auto auto auto auto;
  gap:10px 14px;
  align-items:start;
}
body.ui-pc #blackjackView>.progressionBar{
  grid-column:1/-1;
  grid-row:1;
}
body.ui-pc #blackjackView>.stats{
  grid-column:1/-1;
  grid-row:2;
}
body.ui-pc #blackjackView>.gameStage{
  grid-column:1;
  grid-row:3/11;
  align-self:stretch;
}
body.ui-pc #blackjackView>.tableLimitDock{grid-column:2;grid-row:3}
body.ui-pc #blackjackView>#message{grid-column:2;grid-row:4}
body.ui-pc #blackjackView>.actions{grid-column:2;grid-row:5}
body.ui-pc #blackjackView>.bettingArea{grid-column:2;grid-row:6}
body.ui-pc #blackjackView>#bailout{grid-column:2;grid-row:7}
body.ui-pc #blackjackView>.countCheck{grid-column:2;grid-row:8}
body.ui-pc #blackjackView>.modeInfo{grid-column:2;grid-row:9}
body.ui-pc #blackjackView>#strategyHelp{grid-column:2;grid-row:10}

body.ui-pc .progressionBar{
  grid-template-columns:190px minmax(0,1fr) auto;
  padding:10px 12px;
}
body.ui-pc .stats{gap:10px}
body.ui-pc .stats div{padding:10px 7px}
body.ui-pc .stats b{font-size:16px}
body.ui-pc .stats small{font-size:7px;letter-spacing:.08em}
body.ui-pc .gameStage{
  grid-template-columns:minmax(0,1fr) 210px;
  gap:12px;
  min-width:0;
}
body.ui-pc .table{
  min-height:620px;
  padding:25px 18px 22px;
}
body.ui-pc .sideCoach{
  min-width:0;
  padding:16px 12px;
}
body.ui-pc .sideCoach strong{font-size:18px}
body.ui-pc .tableLimitDock{
  width:100%!important;
  grid-template-columns:1fr!important;
  margin:0!important;
}
body.ui-pc .tableIdentity,
body.ui-pc .tableLimits{width:100%}
body.ui-pc .actions{
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}
body.ui-pc .actions button{
  min-height:48px;
  font-size:10px;
}
body.ui-pc .actions button:last-child{
  grid-column:1/-1;
}
body.ui-pc .wagerPanel{
  grid-template-columns:1fr;
  gap:8px;
}
body.ui-pc .betChoices{display:grid;gap:7px}
body.ui-pc .quickBets{grid-template-columns:repeat(4,1fr)}
body.ui-pc .deal{min-height:52px;font-size:12px}
body.ui-pc .countCheck{
  grid-template-columns:1fr 1fr;
}
body.ui-pc .countCheck input{
  grid-column:1/-1;
  min-height:44px;
}
body.ui-pc #check,
body.ui-pc #reset{min-height:44px}
body.ui-pc #strategyHelp.strategyHelp{
  margin:0!important;
  grid-template-columns:1fr auto;
}
body.ui-pc .modeInfo{display:flex!important;flex-direction:column;gap:3px}

/* Learner uses the left side for the felt and the right side for training controls. */
body.ui-pc #learnerView.activeView{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(320px,.65fr);
  grid-template-rows:auto auto auto auto auto auto;
  gap:10px 14px;
  align-items:start;
}
body.ui-pc #learnerView>.learnerIntro{grid-column:1/-1;grid-row:1}
body.ui-pc #learnerView>.learnerHud{grid-column:1/-1;grid-row:2}
body.ui-pc #learnerView>.learnerTable{
  grid-column:1;
  grid-row:3/8;
  min-height:610px;
  align-self:stretch;
}
body.ui-pc #learnerView>.learnerStatus{grid-column:2;grid-row:3}
body.ui-pc #learnerView>.learnerValueButtons{grid-column:2;grid-row:4}
body.ui-pc #learnerView>.learnerPrimaryRow{grid-column:2;grid-row:5}
body.ui-pc #learnerView>.learnerCountCheck{grid-column:2;grid-row:6}
body.ui-pc #learnerView>.learnerSession{grid-column:2;grid-row:7}
body.ui-pc .learnerIntro p{display:block!important}
body.ui-pc .learnerHud{gap:10px}
body.ui-pc .learnerHud div{padding:10px 7px}
body.ui-pc .learnerHud b{font-size:16px}
body.ui-pc .learnerValueButtons{
  gap:8px;
}
body.ui-pc .learnerValueButtons button{
  min-height:78px;
}
body.ui-pc .learnerValueButtons button b{font-size:30px}
body.ui-pc .learnerPrimaryRow button{min-height:48px}
body.ui-pc .learnerCountCheck{
  grid-template-columns:1fr;
}
body.ui-pc .learnerCountCheck input,
body.ui-pc .learnerCountCheck button{min-height:46px}
body.ui-pc .learnerSession{
  grid-template-columns:repeat(3,1fr)!important;
}
body.ui-pc .learnerSession #clResetStats{
  grid-column:1/-1;
  min-height:40px;
}
body.ui-pc .clCardStage{height:360px}
body.ui-pc .clCardMover{transform:scale(1.12)}

/* Academy gets room to breathe rather than living in a phone-width column. */
body.ui-pc #academyView.activeView{gap:12px}
body.ui-pc .academyHero{padding:10px 4px}
body.ui-pc .academyHero h2{font-size:24px}
body.ui-pc .academyHero p{font-size:11px}
body.ui-pc .academyNext{padding:15px 17px}
body.ui-pc .academySkills{
  grid-template-columns:repeat(2,1fr);
  gap:9px;
}
body.ui-pc .skillCard{padding:12px}
body.ui-pc .academyGrid{grid-template-columns:1fr 1fr!important;gap:12px}
body.ui-pc .academyPanel{padding:14px}
body.ui-pc .certificationCard{padding:18px}

/* ---------- MOBILE / TOUCH ---------- */
body.ui-mobile{
  overscroll-behavior-y:auto;
}
body.ui-mobile main{
  width:100%;
  padding:calc(10px + env(safe-area-inset-top)) 12px calc(22px + env(safe-area-inset-bottom));
  gap:12px;
}
body.ui-mobile .topbar{
  display:grid;
  grid-template-columns:1fr;
  gap:9px;
}
body.ui-mobile .brand{text-align:center}
body.ui-mobile .brand small{font-size:7px}
body.ui-mobile .brand h1{font-size:19px;margin-top:2px}
body.ui-mobile .topActions{
  display:grid;
  grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);
  gap:7px;
  width:100%;
}
body.ui-mobile .topActions button{
  min-width:0;
  min-height:44px;
}
body.ui-mobile .profileBtn{max-width:none!important}
body.ui-mobile .soundBtn{width:auto}
body.ui-mobile .toolSwitcher{
  gap:5px;
  padding:4px;
}
body.ui-mobile .toolTab{
  min-width:0;
  min-height:52px;
  padding:7px 4px;
}
body.ui-mobile .toolTab>span{display:none}
body.ui-mobile .toolTab b{font-size:8px}
body.ui-mobile .toolTab small{display:none}
body.ui-mobile .appView.activeView{gap:12px}

/* Blackjack mobile: readable cards, 2x2 stats, touch-sized controls. */
body.ui-mobile .progressionBar{
  grid-template-columns:1fr auto;
  gap:8px;
  padding:9px;
}
body.ui-mobile .xpBlock{
  grid-column:1/-1;
  grid-row:2;
}
body.ui-mobile .stats{
  grid-template-columns:repeat(2,1fr);
  gap:7px;
}
body.ui-mobile .stats div{padding:10px 7px}
body.ui-mobile .stats b{font-size:15px}
body.ui-mobile .gameStage{grid-template-columns:1fr;gap:8px}
body.ui-mobile .table{
  min-height:480px;
  border-width:8px;
  padding:21px 8px 17px;
}
body.ui-mobile .sideCoach{
  min-height:auto;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:4px 10px;
  padding:10px 12px;
}
body.ui-mobile .sideCoach p{grid-column:1/-1;margin:2px 0}
body.ui-mobile .sideCoach .coachRule{grid-column:1/-1}
body.ui-mobile .tableLimitDock{
  width:100%!important;
  grid-template-columns:1fr!important;
  gap:7px!important;
  margin:0!important;
}
body.ui-mobile .tableIdentity,
body.ui-mobile .tableLimits{width:100%}
body.ui-mobile #message{
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
}
body.ui-mobile .actions{
  grid-template-columns:repeat(2,1fr);
  gap:7px;
}
body.ui-mobile .actions button{
  min-height:50px;
  padding:11px 6px;
  font-size:10px;
}
body.ui-mobile .actions button:last-child{grid-column:1/-1}
body.ui-mobile .wagerPanel{
  grid-template-columns:1fr!important;
  gap:9px;
}
body.ui-mobile .wagerInput{grid-column:auto}
body.ui-mobile .betChoices{
  grid-column:auto!important;
  grid-row:auto!important;
  display:grid;
  gap:7px;
}
body.ui-mobile .quickBets{
  grid-template-columns:repeat(2,1fr);
  gap:7px;
}
body.ui-mobile .quickBets button,
body.ui-mobile .lastBetTools button{min-height:44px}
body.ui-mobile .deal{
  grid-column:auto!important;
  grid-row:auto!important;
  min-height:54px;
  font-size:12px;
}
body.ui-mobile .countCheck{
  grid-template-columns:1fr 1fr;
  gap:7px;
}
body.ui-mobile .countCheck input{
  grid-column:1/-1;
  min-height:46px;
  font-size:16px;
}
body.ui-mobile #check,
body.ui-mobile #reset{min-height:46px}
body.ui-mobile .modeInfo{display:none!important}
body.ui-mobile #strategyHelp.strategyHelp{
  grid-template-columns:1fr auto;
  margin:0!important;
  padding:10px;
}
body.ui-mobile #strategyChartBtn{min-height:44px}

/* Card Learner mobile: more spacing, less visual compression. */
body.ui-mobile .learnerIntro{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:start;
}
body.ui-mobile .learnerIntro h2{font-size:18px}
body.ui-mobile .learnerIntro p{display:none}
body.ui-mobile .learnerIntro button{min-height:42px}
body.ui-mobile .learnerHud{
  grid-template-columns:repeat(2,1fr);
  gap:7px;
}
body.ui-mobile .learnerHud div{padding:10px 6px}
body.ui-mobile .learnerHud b{font-size:15px}
body.ui-mobile .learnerTable{
  min-height:430px;
  border-width:8px;
}
body.ui-mobile .clShoeArea{height:82px}
body.ui-mobile .clCardStage{height:250px}
body.ui-mobile .learnerStatus{
  padding:11px 12px;
}
body.ui-mobile .learnerStatus strong{font-size:12px}
body.ui-mobile .learnerValueButtons{
  gap:8px;
}
body.ui-mobile .learnerValueButtons button{
  min-height:68px;
}
body.ui-mobile .learnerValueButtons button b{font-size:28px}
body.ui-mobile .learnerPrimaryRow{
  grid-template-columns:1fr 1fr;
  gap:8px;
}
body.ui-mobile .learnerPrimaryRow button{min-height:48px}
body.ui-mobile .learnerCountCheck{
  grid-template-columns:1fr;
  gap:7px;
}
body.ui-mobile .learnerCountCheck input,
body.ui-mobile .learnerCountCheck button{
  min-height:48px;
  font-size:16px;
}
body.ui-mobile .learnerSession{
  grid-template-columns:repeat(2,1fr)!important;
  gap:7px;
}
body.ui-mobile .learnerSession>div{padding:9px 6px}
body.ui-mobile #clResetStats{
  grid-column:1/-1;
  min-height:44px;
}

/* Academy mobile deliberately stacks and enlarges tap targets. */
body.ui-mobile .academyHero{
  align-items:center;
  padding:4px 1px;
}
body.ui-mobile .academyHero h2{font-size:17px}
body.ui-mobile .academyHero p{display:none}
body.ui-mobile .academyOverall{
  width:64px;
  height:64px;
  flex-basis:64px;
}
body.ui-mobile .academyNext{
  grid-template-columns:1fr;
  padding:12px;
}
body.ui-mobile .academyNext button{
  grid-column:1;
  grid-row:auto;
  margin-top:7px;
  min-height:44px;
}
body.ui-mobile .academySkills{gap:8px}
body.ui-mobile .skillCard{
  grid-template-columns:36px 1fr;
  padding:10px;
}
body.ui-mobile .skillCard>b{
  grid-column:2;
  justify-self:end;
  margin-top:-20px;
}
body.ui-mobile .academyGrid{grid-template-columns:1fr!important;gap:9px}
body.ui-mobile .academyPanel{padding:11px}
body.ui-mobile .mistakeRow{gap:5px}
body.ui-mobile .academyAction{min-height:44px}
body.ui-mobile .certificationCard{
  grid-template-columns:1fr;
  gap:10px;
  padding:13px;
}
body.ui-mobile .certReqs span{padding:7px}

/* Short phones: keep the table usable without crushing controls. */
@media(max-height:700px) and (max-width:899px){
  body.ui-mobile .table{min-height:430px}
  body.ui-mobile .learnerTable{min-height:390px}
  body.ui-mobile .clCardStage{height:225px}
}

/* Very narrow phones still get full-size touch targets. */
@media(max-width:360px){
  body.ui-mobile main{padding-left:9px;padding-right:9px}
  body.ui-mobile .brand h1{font-size:17px}
  body.ui-mobile .toolTab b{font-size:7px}
  body.ui-mobile .stats b{font-size:13px}
  body.ui-mobile .table{min-height:445px}
  body.ui-mobile .learnerTable{min-height:410px}
}


/* =====================================================================
   V18 MOBILE REBUILD
   Overrides V17 mobile rules with an installed-app style interface.
   Desktop V17 layout intentionally remains intact.
   ===================================================================== */
@media(max-width:899px){
  body.ui-mobile{
    overflow-x:hidden;
    padding-bottom:calc(66px + env(safe-area-inset-bottom));
    background:
      radial-gradient(circle at 50% 0,#4a0d14 0,#180608 30%,#050505 72%);
  }
  body.ui-mobile main{
    width:min(100%,540px);
    margin:0 auto;
    padding:calc(9px + env(safe-area-inset-top)) 10px calc(20px + env(safe-area-inset-bottom));
    gap:9px;
  }

  /* Compact app header */
  body.ui-mobile .topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-height:42px;
  }
  body.ui-mobile .brand{
    min-width:0;
    text-align:left;
  }
  body.ui-mobile .brand small{
    display:block;
    font-size:5.8px;
    letter-spacing:.13em;
    white-space:nowrap;
  }
  body.ui-mobile .brand h1{
    margin:2px 0 0;
    font-size:14px;
    line-height:1;
    letter-spacing:.055em;
    white-space:nowrap;
  }
  body.ui-mobile .topActions{
    width:auto;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:5px;
  }
  body.ui-mobile .topActions button{
    min-height:36px;
    height:36px;
    padding:0 8px;
    font-size:7px;
    border-radius:8px;
  }
  body.ui-mobile .profileBtn{
    width:auto;
    max-width:88px!important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  body.ui-mobile .soundBtn{
    width:36px;
    padding:0!important;
  }
  body.ui-mobile .modeBtn{min-width:62px}

  /* Native-like fixed tool bar */
  body.ui-mobile .toolSwitcher{
    position:fixed;
    z-index:850;
    left:50%;
    bottom:max(7px,env(safe-area-inset-bottom));
    transform:translateX(-50%);
    width:min(calc(100% - 18px),520px);
    grid-template-columns:repeat(3,1fr);
    gap:4px;
    padding:5px;
    margin:0;
    border:1px solid #593136;
    border-radius:16px;
    background:rgba(12,7,8,.96);
    box-shadow:0 12px 35px #000c,0 0 0 1px #0008;
    backdrop-filter:blur(14px);
  }
  body.ui-mobile .toolTab{
    min-height:49px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:5px 3px;
    border-radius:11px;
  }
  body.ui-mobile .toolTab>span{
    display:block!important;
    font-size:14px;
    line-height:1;
  }
  body.ui-mobile .toolTab b{
    font-size:6.8px;
    line-height:1.05;
    letter-spacing:.055em;
  }
  body.ui-mobile .toolTab small{display:none!important}
  body.ui-mobile .toolTab.active{
    background:linear-gradient(180deg,#3a1218,#1b0a0d);
    border-color:#8f3b47;
    box-shadow:inset 0 1px #ffffff0a;
  }

  body.ui-mobile .appView.activeView{gap:9px}

  /* Progression becomes one compact dashboard strip */
  body.ui-mobile .progressionBar{
    display:grid;
    grid-template-columns:78px minmax(0,1fr) 70px!important;
    gap:7px;
    align-items:center;
    padding:7px 8px;
    border-radius:10px;
  }
  body.ui-mobile .ratingBlock{
    min-width:0;
  }
  body.ui-mobile .ratingBlock small{font-size:5.5px}
  body.ui-mobile .ratingBlock b{font-size:9px}
  body.ui-mobile .ratingBlock span{font-size:6px}
  body.ui-mobile .xpBlock{
    grid-column:auto!important;
    grid-row:auto!important;
    min-width:0;
  }
  body.ui-mobile .xpHead small,
  body.ui-mobile .xpFoot{font-size:5.5px}
  body.ui-mobile .xpHead b{font-size:7px}
  body.ui-mobile #endSession{
    min-height:36px;
    padding:5px;
    font-size:6.5px;
  }

  /* Four compact stats without the chunky 2x2 block */
  body.ui-mobile .stats{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:5px;
  }
  body.ui-mobile .stats div{
    min-width:0;
    padding:7px 3px;
    border-radius:8px;
  }
  body.ui-mobile .stats small{
    font-size:5.3px;
    line-height:1.05;
    letter-spacing:.025em;
  }
  body.ui-mobile .stats b{
    margin-top:3px;
    font-size:11px;
    white-space:nowrap;
  }

  /* Casino table is the visual hero */
  body.ui-mobile .gameStage{
    display:grid;
    grid-template-columns:1fr!important;
    gap:7px;
  }
  body.ui-mobile .table{
    min-height:455px;
    border-width:7px;
    border-radius:42% 42% 16px 16px/10% 10% 16px 16px;
    padding:18px 7px 14px;
    box-shadow:inset 0 0 52px #001a13aa,0 9px 23px #000b;
  }
  body.ui-mobile .hand{min-height:116px}
  body.ui-mobile .cards{min-height:90px}
  body.ui-mobile .cardSlot{
    width:62px;
    height:88px;
  }
  body.ui-mobile .feltBrand{top:35%}
  body.ui-mobile .feltBrand span{font-size:13px}
  body.ui-mobile .feltBrand small{font-size:5px}
  body.ui-mobile .feltRules{
    top:8px;
    font-size:5.3px;
    letter-spacing:.07em;
  }
  body.ui-mobile .insuranceLine{
    width:68%;
    font-size:5px;
  }
  body.ui-mobile .chipArea{top:51%}

  /* Coach is one slim post-table information card */
  body.ui-mobile .sideCoach{
    min-height:0;
    display:grid;
    grid-template-columns:auto 1fr auto;
    grid-template-rows:auto auto;
    align-items:center;
    column-gap:8px;
    row-gap:2px;
    padding:8px 10px;
    border-radius:9px;
  }
  body.ui-mobile .sideCoach small{
    grid-column:1;
    grid-row:1;
    font-size:5.5px;
  }
  body.ui-mobile .sideCoach strong{
    grid-column:2;
    grid-row:1;
    font-size:10px;
  }
  body.ui-mobile .sideCoach p{
    grid-column:1/3!important;
    grid-row:2;
    margin:0!important;
    font-size:6.5px;
  }
  body.ui-mobile .sideCoach .coachRule{
    grid-column:3!important;
    grid-row:1/3;
    align-self:center;
    padding-left:7px;
    border-left:1px solid #3e2428;
  }
  body.ui-mobile .coachRule span,
  body.ui-mobile .coachRule b{font-size:5.5px}

  /* Table identity + limits condensed into one card */
  body.ui-mobile .tableLimitDock{
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr)!important;
    gap:5px!important;
    align-items:stretch;
    margin:0!important;
  }
  body.ui-mobile .tableIdentity{
    min-width:0;
    padding:7px 8px;
  }
  body.ui-mobile .tableIdentity span{min-width:0}
  body.ui-mobile .tableIdentity small{font-size:5px}
  body.ui-mobile .tableIdentity b{font-size:8px}
  body.ui-mobile .tableIdentity em{
    max-width:115px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:5px;
  }
  body.ui-mobile #changeTable{
    min-height:34px;
    padding:5px 7px;
    font-size:6px;
  }
  body.ui-mobile .tableLimits{
    width:100%;
    min-width:0;
  }
  body.ui-mobile .tableLimits span{
    padding:6px 4px;
  }
  body.ui-mobile .tableLimits small{font-size:5px}
  body.ui-mobile .tableLimits b{font-size:8px}

  body.ui-mobile #message{
    min-height:36px;
    padding:7px 9px;
    font-size:7px;
    line-height:1.25;
    border-radius:8px;
  }

  /* Action hierarchy: HIT/STAND primary, advanced actions secondary */
  body.ui-mobile .actions{
    display:grid;
    grid-template-columns:repeat(6,1fr)!important;
    gap:6px;
  }
  body.ui-mobile .actions button{
    min-height:45px;
    padding:8px 3px;
    font-size:8px;
    border-radius:9px;
  }
  body.ui-mobile .actions button[data-action="hit"],
  body.ui-mobile .actions button[data-action="stand"]{
    grid-column:span 3;
    min-height:50px;
    font-size:10px;
  }
  body.ui-mobile .actions button[data-action="double"],
  body.ui-mobile .actions button[data-action="split"],
  body.ui-mobile .actions button[data-action="surrender"]{
    grid-column:span 2;
  }
  body.ui-mobile .actions button:last-child{grid-column:span 2!important}

  /* Betting feels like one unified control panel */
  body.ui-mobile .bettingArea{gap:0}
  body.ui-mobile .wagerPanel{
    grid-template-columns:1fr!important;
    gap:7px;
    padding:9px;
    border-radius:10px;
  }
  body.ui-mobile .wagerInput{
    grid-column:auto!important;
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:8px;
  }
  body.ui-mobile .wagerInput>small{margin:0}
  body.ui-mobile .moneyField input{
    min-height:40px;
    font-size:16px;
  }
  body.ui-mobile .betChoices{
    grid-column:auto!important;
    grid-row:auto!important;
    gap:6px;
  }
  body.ui-mobile .quickBets{
    grid-template-columns:repeat(4,1fr)!important;
    gap:5px;
  }
  body.ui-mobile .quickBets button{
    min-height:38px;
    padding:6px 2px;
    font-size:7px;
  }
  body.ui-mobile .lastBetTools{
    gap:5px;
  }
  body.ui-mobile .lastBetTools button{min-height:36px}
  body.ui-mobile #lastBetLabel{font-size:6px}
  body.ui-mobile .deal{
    min-height:49px!important;
    font-size:10px!important;
    border-radius:9px;
  }

  /* Count check becomes a clean 3-piece row */
  body.ui-mobile .countCheck{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto!important;
    gap:5px;
  }
  body.ui-mobile .countCheck input{
    grid-column:auto!important;
    min-width:0;
    min-height:42px;
    padding:8px;
    font-size:14px;
  }
  body.ui-mobile #check,
  body.ui-mobile #reset{
    min-height:42px;
    padding:7px;
    font-size:6.5px;
  }
  body.ui-mobile .modeInfo{display:none!important}
  body.ui-mobile #strategyHelp.strategyHelp{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:7px;
    margin:0!important;
    padding:8px 9px;
    border-radius:9px;
  }
  body.ui-mobile #strategyHelp .strategyHelpText small{font-size:5px}
  body.ui-mobile #strategyHelp .strategyHelpText b{font-size:8px}
  body.ui-mobile #strategyHelp .strategyHelpText span{font-size:5.5px}
  body.ui-mobile #strategyChartBtn{
    min-height:38px;
    padding:6px 8px;
    font-size:6px;
  }

  /* CARD LEARNER — minimal, centered, fast */
  body.ui-mobile .learnerIntro{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between;
    gap:7px;
    padding:0 1px;
  }
  body.ui-mobile .learnerIntro>div{min-width:0}
  body.ui-mobile .learnerIntro small{font-size:5.5px}
  body.ui-mobile .learnerIntro h2{
    margin:2px 0 0;
    font-size:15px;
  }
  body.ui-mobile .learnerIntro p{display:none!important}
  body.ui-mobile .learnerIntro button{
    min-height:36px;
    padding:5px 8px;
    font-size:6px;
  }
  body.ui-mobile .learnerHud{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:5px;
  }
  body.ui-mobile .learnerHud div{
    min-width:0;
    padding:7px 3px;
  }
  body.ui-mobile .learnerHud small{font-size:5.2px}
  body.ui-mobile .learnerHud b{
    font-size:11px;
    white-space:nowrap;
  }
  body.ui-mobile .learnerTable{
    min-height:400px;
    border-width:7px;
    border-radius:42% 42% 15px 15px/10% 10% 15px 15px;
  }
  body.ui-mobile .clShoeArea{height:68px}
  body.ui-mobile .clShoe{transform:scale(.82)}
  body.ui-mobile .clCardStage{height:250px}
  body.ui-mobile .clCardMover{
    width:114px;
    height:158px;
  }
  body.ui-mobile .clReadyText{font-size:7px}
  body.ui-mobile .learnerTableBrand span{font-size:13px}
  body.ui-mobile .learnerStatus{
    padding:8px 10px;
    border-radius:9px;
  }
  body.ui-mobile .learnerStatusTop{margin-bottom:2px}
  body.ui-mobile .learnerStatus small{font-size:5.5px}
  body.ui-mobile .learnerStatus strong{font-size:9px}
  body.ui-mobile .learnerStatus>span{font-size:6px}
  body.ui-mobile .learnerValueButtons{
    gap:7px;
  }
  body.ui-mobile .learnerValueButtons button{
    min-height:62px;
    border-radius:10px;
  }
  body.ui-mobile .learnerValueButtons button b{font-size:25px}
  body.ui-mobile .learnerPrimaryRow{
    grid-template-columns:1fr auto!important;
    gap:6px;
  }
  body.ui-mobile .learnerPrimaryRow button{min-height:42px}
  body.ui-mobile #clPause{min-width:88px}
  body.ui-mobile .learnerCountCheck{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:6px;
  }
  body.ui-mobile .learnerCountCheck input{
    min-height:42px;
    font-size:14px;
  }
  body.ui-mobile .learnerCountCheck button{
    min-height:42px;
    font-size:6.5px;
  }
  body.ui-mobile .learnerSession{
    grid-template-columns:repeat(3,1fr)!important;
    gap:5px;
  }
  body.ui-mobile .learnerSession>div{
    padding:7px 3px;
  }
  body.ui-mobile .learnerSession small{font-size:5px}
  body.ui-mobile .learnerSession b{font-size:11px}
  body.ui-mobile #clResetStats{
    grid-column:1/-1;
    min-height:36px;
    font-size:6px;
  }

  /* ACADEMY — cards become simpler and easier to scan */
  body.ui-mobile .academyHero{
    min-height:68px;
    padding:2px 1px;
  }
  body.ui-mobile .academyHero small{font-size:5.5px}
  body.ui-mobile .academyHero h2{
    margin:2px 0;
    font-size:15px;
  }
  body.ui-mobile .academyHero p{display:none!important}
  body.ui-mobile .academyOverall{
    width:58px;
    height:58px;
    flex:0 0 58px;
  }
  body.ui-mobile .academyOverall b{font-size:15px}
  body.ui-mobile .academyNext{
    grid-template-columns:minmax(0,1fr) auto!important;
    padding:9px 10px;
    gap:2px 8px;
  }
  body.ui-mobile .academyNext small,
  body.ui-mobile .academyNext strong,
  body.ui-mobile .academyNext span{grid-column:1!important}
  body.ui-mobile .academyNext strong{font-size:9px}
  body.ui-mobile .academyNext span{font-size:6px}
  body.ui-mobile .academyNext button{
    grid-column:2!important;
    grid-row:1/4!important;
    margin:0!important;
    min-height:38px;
    padding:6px 8px;
    font-size:6px;
  }
  body.ui-mobile .academySkills{
    display:grid;
    gap:6px;
  }
  body.ui-mobile .skillCard{
    grid-template-columns:31px minmax(0,1fr) auto!important;
    gap:7px;
    padding:8px;
  }
  body.ui-mobile .skillNum{
    width:28px;
    height:28px;
    font-size:8px;
  }
  body.ui-mobile .skillBody small{font-size:5px}
  body.ui-mobile .skillBody strong{font-size:8px}
  body.ui-mobile .skillBody span{font-size:6px}
  body.ui-mobile .skillCard>b{
    grid-column:3!important;
    margin:0!important;
    align-self:center;
    font-size:7px;
  }
  body.ui-mobile .academyGrid{
    grid-template-columns:1fr!important;
    gap:7px;
  }
  body.ui-mobile .academyPanel{
    padding:9px;
  }
  body.ui-mobile .academyPanel h3{font-size:9px}
  body.ui-mobile .historyRow{
    padding:7px 5px;
    gap:8px;
  }
  body.ui-mobile .historyRow span small{
    font-size:5.6px;
    line-height:1.35;
  }
  body.ui-mobile .mistakeRow{
    padding:7px 5px;
  }
  body.ui-mobile .mistakeRow small{font-size:5px}
  body.ui-mobile .mistakeRow b{font-size:7px}
  body.ui-mobile .academyAction{min-height:38px}
  body.ui-mobile .certificationCard{
    grid-template-columns:1fr!important;
    gap:8px;
    padding:10px;
  }
  body.ui-mobile .certificationCard h3{font-size:12px}
  body.ui-mobile .certificationCard p{font-size:6px}
  body.ui-mobile .certReqs span{padding:6px}

  body.ui-mobile footer{
    padding-bottom:3px;
    font-size:6px;
  }

  /* Modals use more of the screen but never touch the edges */
  body.ui-mobile .modalBackdrop{
    padding:12px;
  }
  body.ui-mobile .profileModal,
  body.ui-mobile .strategyModal,
  body.ui-mobile .sessionCard,
  body.ui-mobile .tableModal,
  body.ui-mobile .onboardingCard{
    width:min(100%,500px);
    max-height:calc(100dvh - 28px);
    overflow:auto;
  }
}

/* Small phones: preserve hierarchy, trim decoration rather than controls */
@media(max-width:380px){
  body.ui-mobile main{padding-left:7px;padding-right:7px}
  body.ui-mobile .brand small{display:none}
  body.ui-mobile .brand h1{font-size:13px}
  body.ui-mobile .profileBtn{max-width:75px!important}
  body.ui-mobile .modeBtn{min-width:56px;padding-left:5px!important;padding-right:5px!important}
  body.ui-mobile .progressionBar{grid-template-columns:69px minmax(0,1fr) 63px!important}
  body.ui-mobile .stats b,
  body.ui-mobile .learnerHud b{font-size:10px}
  body.ui-mobile .table{min-height:430px}
  body.ui-mobile .cardSlot{width:58px;height:83px}
  body.ui-mobile .tableIdentity em{display:none}
  body.ui-mobile .learnerTable{min-height:380px}
  body.ui-mobile .clCardStage{height:235px}
}


/* =====================================================================
   V19 CASINO STYLE SHOP + COSMETICS
   Cosmetics never change card faces, rules, values, timing or strategy.
   ===================================================================== */

.profileStylePanel{
  margin-top:10px;
  padding:10px;
  border:1px solid #624126;
  border-radius:11px;
  background:linear-gradient(135deg,#1d140d,#0d0907);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
}
.profileStylePanel small,.profileStylePanel b,.profileStylePanel span{display:block}
.profileStylePanel small{font-size:6px;color:#b19876;letter-spacing:.11em}
.profileStylePanel b{font-size:10px;color:#eee0bd;margin:2px 0}
.profileStylePanel span{font-size:7px;color:#9c8d7b;line-height:1.35}
.profileStylePanel button{
  min-height:40px;
  border:1px solid #9b7246;
  background:linear-gradient(#4b301c,#24170f);
  color:#f0dfb8;
  border-radius:8px;
  padding:8px 11px;
  font-size:7px;
  font-weight:900;
  letter-spacing:.08em;
}

.styleShopModal{
  width:min(94vw,760px);
  max-height:90dvh;
  overflow:auto;
  padding:18px;
  border:1px solid #8c6540;
  border-radius:18px;
  background:
    radial-gradient(circle at 50% -10%,#3a2a18 0,#19100a 35%,#0b0706 72%);
  box-shadow:0 26px 90px #000d;
}
.styleShopModal h2{margin:3px 0 0;font-size:22px;letter-spacing:.08em;color:#eee2c3}
.styleWallet{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:13px;
  align-items:center;
  margin:13px 0 16px;
  padding:11px 13px;
  border:1px solid #735331;
  border-radius:11px;
  background:#0e0a07dd;
}
.styleWallet small,.styleWallet strong{display:block}
.styleWallet small{font-size:6px;letter-spacing:.12em;color:#a68a63}
.styleWallet strong{font:900 18px ui-monospace,monospace;color:#f0d79a}
.styleWallet p{margin:0;font-size:8px;line-height:1.45;color:#a99c87}
.shopSectionHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin:15px 1px 7px;
}
.shopSectionHead small{font-size:6px;color:#99846b;letter-spacing:.12em}
.shopSectionHead h3{margin:2px 0 0;font-size:11px;letter-spacing:.11em;color:#e7d9ba}
.shopSectionHead>span{font:800 7px ui-monospace,monospace;color:#9c876b}
.cosmeticGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}
.cosmeticItem{
  min-width:0;
  min-height:102px;
  display:grid;
  grid-template-columns:62px minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  text-align:left;
  padding:9px;
  border:1px solid #4f3925;
  border-radius:11px;
  background:linear-gradient(145deg,#17100b,#0b0806);
  color:#eee;
}
.cosmeticItem:hover:not(:disabled){border-color:#9b7145}
.cosmeticItem.owned{border-color:#655339}
.cosmeticItem.equipped{
  border-color:#c59a5e;
  box-shadow:inset 0 0 0 1px #c59a5e33,0 0 18px #b97d2b12;
}
.cosmeticItem.locked{opacity:.48}
.cosmeticMeta{min-width:0}
.cosmeticMeta small,.cosmeticMeta strong,.cosmeticMeta em{display:block}
.cosmeticMeta small{font-size:5px;color:#917b61;letter-spacing:.1em}
.cosmeticMeta strong{font-size:9px;color:#eee0c2;margin:2px 0}
.cosmeticMeta em{font-style:normal;font-size:6.5px;line-height:1.3;color:#918675}
.cosmeticItem>b{
  font:900 7px ui-monospace,monospace;
  color:#d7ba80;
  white-space:nowrap;
}
.shopCardPreview{
  width:56px;
  height:78px;
  display:grid;
  place-items:center;
}
.miniPlayingCard{
  width:46px;
  height:66px;
  padding:4px;
  border:3px solid #f2eee5;
  border-radius:6px;
  background:#f4f1e9;
  box-shadow:0 5px 12px #0008;
}
.miniPlayingCard i{
  display:block;
  width:100%;
  height:100%;
  border-radius:3px;
}
.miniPlayingCard.back-classic i,
body[data-cardback="classic"] .cardBack:after,
body[data-cardback="classic"] .clBackPattern{
  background:
    linear-gradient(45deg,#9f1827 25%,transparent 25%,transparent 75%,#9f1827 75%),
    linear-gradient(-45deg,#9f1827 25%,#170608 25%,#170608 75%,#9f1827 75%);
  background-size:18px 18px;
}
.miniPlayingCard.back-midnight i,
body[data-cardback="midnight"] .cardBack:after,
body[data-cardback="midnight"] .clBackPattern{
  background:
    repeating-linear-gradient(45deg,#1c1f24 0 5px,#747c86 5px 7px,#101216 7px 12px),
    #111318;
}
.miniPlayingCard.back-emerald i,
body[data-cardback="emerald"] .cardBack:after,
body[data-cardback="emerald"] .clBackPattern{
  background:
    radial-gradient(circle at 50% 50%,transparent 0 4px,#d4bc7c55 4px 5px,transparent 5px 10px),
    linear-gradient(45deg,#0d593f,#073426);
  background-size:20px 20px,auto;
}
.miniPlayingCard.back-royal i,
body[data-cardback="royal"] .cardBack:after,
body[data-cardback="royal"] .clBackPattern{
  background:
    repeating-linear-gradient(0deg,#16345f 0 6px,#e4dfcd 6px 7px,#16345f 7px 13px),
    #15345e;
}
.miniPlayingCard.back-gold i,
body[data-cardback="gold"] .cardBack:after,
body[data-cardback="gold"] .clBackPattern{
  background:
    radial-gradient(circle,#c8a95f 0 2px,transparent 2.5px),
    linear-gradient(135deg,#0a0a09,#332814 48%,#0a0a09);
  background-size:12px 12px,auto;
}
.miniPlayingCard.back-neon i,
body[data-cardback="neon"] .cardBack:after,
body[data-cardback="neon"] .clBackPattern{
  background:
    linear-gradient(90deg,transparent 48%,#ff304944 48% 52%,transparent 52%),
    linear-gradient(0deg,transparent 48%,#ff304944 48% 52%,transparent 52%),
    radial-gradient(circle at 50% 50%,#ff344f 0 2px,transparent 3px),
    #12070a;
  background-size:16px 16px,16px 16px,32px 32px,auto;
}

/* Blackjack's back face previously had no inner element, so create one. */
.cardBack:after{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:5px;
  box-shadow:inset 0 0 0 2px #181818,inset 0 0 0 4px #fff8;
}
body:not([data-cardback]) .cardBack:after{
  background:
    linear-gradient(45deg,#9f1827 25%,transparent 25%,transparent 75%,#9f1827 75%),
    linear-gradient(-45deg,#9f1827 25%,#170608 25%,#170608 75%,#9f1827 75%);
  background-size:18px 18px;
}
body[data-cardback] .clBackPattern{
  border-color:#b59b70;
  box-shadow:inset 0 0 0 3px #080808,inset 0 0 0 5px #fff;
}

.feltPreview{
  width:60px;
  height:54px;
  position:relative;
  overflow:hidden;
  border:4px solid #55351f;
  border-radius:25px 25px 7px 7px/10px 10px 7px 7px;
  box-shadow:0 4px 10px #0008;
}
.feltPreview span{
  position:absolute;left:0;right:0;top:19px;
  text-align:center;font:700 5px Georgia,serif;letter-spacing:.08em;color:#e9d9a466;
}
.feltPreview i{
  position:absolute;left:12%;right:12%;bottom:6px;height:12px;
  border:1px solid #e5d09a55;border-radius:50%;
}
.felt-green{background:#0d503b}
.felt-burgundy{background:#6a1e2d}
.felt-midnight{background:#15334f}
.felt-royal{background:#4a295f}
.felt-black{background:#171917}

/* Felt themes affect both tools for a consistent casino identity. */
body[data-felt="burgundy"] .table,
body[data-felt="burgundy"] .learnerTable{
  background:
    radial-gradient(circle at 20% 18%,#ffffff08 0 1px,transparent 2px),
    radial-gradient(ellipse at 50% 44%,#8c3141 0%,#6b1f2e 50%,#47131f 78%,#2e0d15 100%)!important;
}
body[data-felt="midnight"] .table,
body[data-felt="midnight"] .learnerTable{
  background:
    radial-gradient(circle at 20% 18%,#ffffff08 0 1px,transparent 2px),
    radial-gradient(ellipse at 50% 44%,#265b83 0%,#183d5f 48%,#102c47 78%,#091d30 100%)!important;
}
body[data-felt="royal"] .table,
body[data-felt="royal"] .learnerTable{
  background:
    radial-gradient(circle at 20% 18%,#ffffff08 0 1px,transparent 2px),
    radial-gradient(ellipse at 50% 44%,#71438a 0%,#4f2e65 48%,#351f46 78%,#21132e 100%)!important;
}
body[data-felt="black"] .table,
body[data-felt="black"] .learnerTable{
  background:
    radial-gradient(circle at 20% 18%,#ffffff09 0 1px,transparent 2px),
    radial-gradient(ellipse at 50% 44%,#303630 0%,#20251f 48%,#151915 78%,#0c0f0c 100%)!important;
}

.shopFootnote{
  margin:13px 2px 1px;
  padding-top:10px;
  border-top:1px solid #3d2c1f;
  font-size:7px;
  line-height:1.45;
  color:#8e8170;
}

@media(max-width:620px){
  .styleShopModal{padding:13px}
  .styleShopModal h2{font-size:18px}
  .styleWallet{grid-template-columns:1fr;gap:4px}
  .styleWallet p{font-size:7px}
  .cosmeticGrid{grid-template-columns:1fr}
  .cosmeticItem{min-height:92px}
  .profileStylePanel{grid-template-columns:1fr}
  .profileStylePanel button{width:100%}
}


/* =====================================================================
   V20 MASTERY GOALS + ACHIEVEMENT POLISH
   ===================================================================== */

.achievementSummary{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid #725436;
  border-radius:10px;
  background:linear-gradient(135deg,#20150d,#0f0a08);
}
.achievementSummary b{
  font:900 17px ui-monospace,monospace;
  color:#ead6a4;
}
.achievementSummary span{
  font-size:7px;
  font-weight:800;
  letter-spacing:.11em;
  color:#a69173;
}
.achievement small{
  display:block;
  margin-bottom:3px;
  font-size:5.5px;
  font-weight:800;
  letter-spacing:.11em;
  color:#927d64;
}
.achievement em{
  display:block;
  margin-top:5px;
  font-style:normal;
  font:800 7px ui-monospace,monospace;
  color:#c69d68;
}
.achievement.locked{
  opacity:.5;
  border-color:#342126;
  background:#0b0708;
}
.achievement.locked b{color:#928286}
.achievement.locked em{color:#726367}
.achievement:not(.locked){
  box-shadow:inset 0 0 0 1px #7d2e3922;
}

.masteryGoalsPanel{
  padding:13px;
  border:1px solid #57412d;
  border-radius:12px;
  background:
    radial-gradient(circle at 100% 0,#3b291747,transparent 42%),
    linear-gradient(150deg,#17100b,#0d0907);
}
.masteryGoalsHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:9px;
}
.masteryGoalsHead small{font-size:6px;letter-spacing:.12em;color:#a0896b}
.masteryGoalsHead h3{margin:2px 0 3px;font-size:12px;letter-spacing:.1em;color:#ebddbc}
.masteryGoalsHead p{
  margin:0;
  max-width:690px;
  font-size:7.5px;
  line-height:1.4;
  color:#958878;
}
.goalSummary{
  flex:0 0 auto;
  min-width:68px;
  padding:9px 10px;
  border:1px solid #8a663d;
  border-radius:9px;
  text-align:center;
  font:900 13px ui-monospace,monospace;
  color:#ead39d;
  background:#110c08;
}
.academyGoals{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}
.goalCard{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  padding:9px;
  border:1px solid #392a20;
  border-radius:9px;
  background:#0e0a08;
}
.goalCard.done{
  border-color:#53624a;
  background:linear-gradient(135deg,#111b13,#0c100d);
}
.goalState{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid #60462d;
  border-radius:50%;
  color:#bd9d72;
  font:900 7px ui-monospace,monospace;
}
.goalCard.done .goalState{
  border-color:#74856a;
  color:#cce0bd;
  background:#172018;
}
.goalMain{min-width:0}
.goalMain small,.goalMain strong,.goalMain span,.goalMain em{display:block}
.goalMain small{font-size:5px;letter-spacing:.11em;color:#8f7b64}
.goalMain strong{margin:2px 0;font-size:8px;color:#e5d9bf}
.goalMain span{font-size:6px;color:#95897c}
.goalMain em{
  margin-top:3px;
  font-style:normal;
  font:700 6px ui-monospace,monospace;
  color:#b09b80;
}
.goalTrack{
  height:3px;
  margin-top:6px;
  overflow:hidden;
  border-radius:99px;
  background:#251a13;
}
.goalTrack i{
  display:block;
  height:100%;
  background:#9a5a38;
}
.goalCard.done .goalTrack i{background:#748a6c}
.goalSide{
  display:grid;
  justify-items:end;
  gap:6px;
}
.goalSide>b{
  font:800 7px ui-monospace,monospace;
  color:#aa957d;
}
.goalSide button{
  min-height:32px;
  padding:5px 7px;
  border:1px solid #724834;
  border-radius:7px;
  background:#25130d;
  color:#e3c7a1;
  font-size:5.5px;
  font-weight:900;
}

.keyboardHint{
  margin-top:4px;
  color:#a58e92!important;
}

@media(max-width:899px){
  body.ui-mobile .masteryGoalsPanel{padding:9px}
  body.ui-mobile .masteryGoalsHead{gap:8px;margin-bottom:7px}
  body.ui-mobile .masteryGoalsHead p{display:none}
  body.ui-mobile .masteryGoalsHead h3{font-size:10px}
  body.ui-mobile .goalSummary{min-width:58px;padding:7px;font-size:10px}
  body.ui-mobile .academyGoals{grid-template-columns:1fr;gap:5px}
  body.ui-mobile .goalCard{
    grid-template-columns:30px minmax(0,1fr) auto;
    padding:7px;
    gap:6px;
  }
  body.ui-mobile .goalState{width:26px;height:26px}
  body.ui-mobile .goalMain strong{font-size:7px}
  body.ui-mobile .goalMain span{font-size:5.5px}
  body.ui-mobile .goalSide button{min-height:30px}
  body.ui-mobile .achievementSummary{padding:8px 9px}
  body.ui-mobile .achievementSummary b{font-size:14px}
}

/* PRACTICE is intentionally wider than letter grades. */
#sessionGrade{min-width:72px}

.achievementCategory{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:5px;
  padding:7px 9px;
  border-bottom:1px solid #3c2a20;
  color:#b99b74;
}
.achievementCategory b{
  font-size:7px;
  letter-spacing:.12em;
}
.achievementCategory span{
  font:800 7px ui-monospace,monospace;
  color:#8e7c67;
}


/* =====================================================================
   V21 SHOP TAB + EXPANDED CASINO COLLECTION
   ===================================================================== */
.toolSwitcher{grid-template-columns:repeat(4,1fr)}
.styleShopView{min-width:0}
.styleShopPage{
  width:100%;
  padding:18px;
  border:1px solid #8c6540;
  border-radius:16px;
  background:
    radial-gradient(circle at 50% -10%,#3a2a18 0,#19100a 35%,#0b0706 72%);
  box-shadow:0 18px 55px #0009;
}
.styleShopPage h2{margin:3px 0 0;font-size:22px;letter-spacing:.08em;color:#eee2c3}
body.ui-pc #styleShopView.activeView{display:block}
body.ui-pc .styleShopPage{padding:22px}
body.ui-pc .cosmeticGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
body.ui-pc .feltGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
body.ui-mobile .styleShopPage{padding:10px;border-radius:11px}
body.ui-mobile .styleShopPage h2{font-size:16px}
body.ui-mobile .cosmeticGrid{grid-template-columns:1fr}
body.ui-mobile .shopSectionHead{margin-top:12px}
body.ui-mobile .styleWallet{margin:9px 0 12px}
body.ui-mobile .toolTab b{font-size:6.4px}

/* Expanded card-back patterns */
.miniPlayingCard.back-crimson i,
body[data-cardback="crimson"] .cardBack:after,
body[data-cardback="crimson"] .clBackPattern{
  background:repeating-linear-gradient(45deg,#65101d 0 5px,#b63b49 5px 6px,#300710 6px 11px);
}
.miniPlayingCard.back-ivory i,
body[data-cardback="ivory"] .cardBack:after,
body[data-cardback="ivory"] .clBackPattern{
  background:
    radial-gradient(circle,#8d1725 0 2px,transparent 2.5px),
    linear-gradient(135deg,#eee4cf,#c9bea9);
  background-size:14px 14px,auto;
}
.miniPlayingCard.back-vegas i,
body[data-cardback="vegas"] .cardBack:after,
body[data-cardback="vegas"] .clBackPattern{
  background:
    radial-gradient(circle,#e9bd58 0 1.5px,transparent 2px),
    #111018;
  background-size:10px 10px;
}
.miniPlayingCard.back-ocean i,
body[data-cardback="ocean"] .cardBack:after,
body[data-cardback="ocean"] .clBackPattern{
  background:
    repeating-radial-gradient(ellipse at 0 50%,#2e93a6 0 4px,#0d5364 5px 8px,#082f3c 9px 12px);
}
.miniPlayingCard.back-carbon i,
body[data-cardback="carbon"] .cardBack:after,
body[data-cardback="carbon"] .clBackPattern{
  background:
    linear-gradient(45deg,#303238 25%,transparent 25% 75%,#303238 75%),
    linear-gradient(-45deg,#16181c 25%,#090a0c 25% 75%,#16181c 75%);
  background-size:10px 10px;
}
.miniPlayingCard.back-diamond i,
body[data-cardback="diamond"] .cardBack:after,
body[data-cardback="diamond"] .clBackPattern{
  background:
    linear-gradient(45deg,transparent 43%,#cbb784 44% 48%,transparent 49%),
    linear-gradient(-45deg,transparent 43%,#cbb784 44% 48%,transparent 49%),
    #29231a;
  background-size:16px 16px;
}
.miniPlayingCard.back-roulette i,
body[data-cardback="roulette"] .cardBack:after,
body[data-cardback="roulette"] .clBackPattern{
  background:
    conic-gradient(#8c101f 0 45deg,#111 45deg 90deg,#8c101f 90deg 135deg,#111 135deg 180deg,#8c101f 180deg 225deg,#111 225deg 270deg,#8c101f 270deg 315deg,#111 315deg);
}
.miniPlayingCard.back-highroller i,
body[data-cardback="highroller"] .cardBack:after,
body[data-cardback="highroller"] .clBackPattern{
  background:
    radial-gradient(circle at 50% 50%,#d6ba69 0 2px,#0c4933 3px 8px,#091b14 9px 13px,#d6ba69 14px 15px,#091b14 16px);
  background-size:28px 28px;
}
.miniPlayingCard.back-platinum i,
body[data-cardback="platinum"] .cardBack:after,
body[data-cardback="platinum"] .clBackPattern{
  background:repeating-linear-gradient(135deg,#e0e3e5 0 3px,#7f858b 3px 5px,#202327 5px 9px);
}
.miniPlayingCard.back-copper i,
body[data-cardback="copper"] .cardBack:after,
body[data-cardback="copper"] .clBackPattern{
  background:
    linear-gradient(45deg,#a65f36 25%,transparent 25% 75%,#a65f36 75%),
    #24130d;
  background-size:14px 14px;
}
.miniPlayingCard.back-phantom i,
body[data-cardback="phantom"] .cardBack:after,
body[data-cardback="phantom"] .clBackPattern{
  background:
    radial-gradient(circle at 50% 50%,#2b2d2f 0 2px,transparent 2.5px),
    #08090a;
  background-size:16px 16px;
}
.miniPlayingCard.back-royalflush i,
body[data-cardback="royalflush"] .cardBack:after,
body[data-cardback="royalflush"] .clBackPattern{
  background:
    radial-gradient(circle,#d1ad5e 0 2px,transparent 2.5px),
    linear-gradient(135deg,#162749 0 45%,#641725 46% 54%,#162749 55%);
  background-size:20px 20px,auto;
}
.miniPlayingCard.back-master i,
body[data-cardback="master"] .cardBack:after,
body[data-cardback="master"] .clBackPattern{
  background:
    linear-gradient(90deg,transparent 47%,#c7a24d55 48% 52%,transparent 53%),
    linear-gradient(0deg,transparent 47%,#c7a24d55 48% 52%,transparent 53%),
    #080908;
  background-size:14px 14px;
}
.miniPlayingCard.back-founders i,
body[data-cardback="founders"] .cardBack:after,
body[data-cardback="founders"] .clBackPattern{
  background:
    radial-gradient(circle at 50% 50%,#a01828 0 3px,#e6d5a7 4px 8px,#b48b43 9px 10px,#f2e7cb 11px 15px,#7a1723 16px);
  background-size:32px 32px;
}

/* Expanded casino table themes */
body[data-felt="emeraldroom"] .table,body[data-felt="emeraldroom"] .learnerTable{background:radial-gradient(ellipse at 50% 44%,#27805a,#155d42 48%,#0b412f 78%,#06281e)!important}
body[data-felt="teal"] .table,body[data-felt="teal"] .learnerTable{background:radial-gradient(ellipse at 50% 44%,#2b8590,#17636d 48%,#0d454e 78%,#072d34)!important}
body[data-felt="crimsonroom"] .table,body[data-felt="crimsonroom"] .learnerTable{background:radial-gradient(ellipse at 50% 44%,#8e3341,#68202e 48%,#46131e 78%,#2d0b13)!important}
body[data-felt="navy"] .table,body[data-felt="navy"] .learnerTable{background:radial-gradient(ellipse at 50% 44%,#315a80,#203e61 48%,#152b47 78%,#0b1b30)!important}
body[data-felt="charcoal"] .table,body[data-felt="charcoal"] .learnerTable{background:radial-gradient(ellipse at 50% 44%,#515955,#373d3a 48%,#252a27 78%,#151916)!important}
body[data-felt="sand"] .table,body[data-felt="sand"] .learnerTable{background:radial-gradient(ellipse at 50% 44%,#9b8152,#75603d 48%,#54452c 78%,#382d1d)!important}
body[data-felt="copperroom"] .table,body[data-felt="copperroom"] .learnerTable{background:radial-gradient(ellipse at 50% 44%,#85543a,#623a29 48%,#42271c 78%,#2a1711)!important}
body[data-felt="ice"] .table,body[data-felt="ice"] .learnerTable{background:radial-gradient(ellipse at 50% 44%,#7694a0,#526f7a 48%,#39515b 78%,#25363e)!important}
body[data-felt="obsidian"] .table,body[data-felt="obsidian"] .learnerTable{background:radial-gradient(ellipse at 50% 44%,#2d302a,#1d201b 48%,#12140f 78%,#090a08)!important}
body[data-felt="masterfelt"] .table,body[data-felt="masterfelt"] .learnerTable{background:radial-gradient(ellipse at 50% 44%,#243e30,#13271d 48%,#0b1711 78%,#060b08)!important}

.felt-emeraldroom{background:#155d42}.felt-teal{background:#17636d}.felt-crimsonroom{background:#68202e}
.felt-navy{background:#203e61}.felt-charcoal{background:#373d3a}.felt-sand{background:#75603d}
.felt-copperroom{background:#623a29}.felt-ice{background:#526f7a}.felt-obsidian{background:#1d201b}.felt-masterfelt{background:#13271d}

@media(max-width:420px){
  body.ui-mobile .toolTab b{font-size:5.9px}
}


/* True Count Lab */
.trueCountLab{
  display:grid;
  gap:8px;
  padding:10px;
  border:1px solid #4f3426;
  border-radius:10px;
  background:linear-gradient(145deg,#17100b,#0d0907);
}
.trueCountHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.trueCountHead small,.trueCountHead b{display:block}
.trueCountHead small{font-size:5.5px;letter-spacing:.11em;color:#9b856a}
.trueCountHead b{font-size:9px;color:#eadab9;margin-top:2px}
#tcScore{font:900 8px ui-monospace,monospace;color:#d2b47a}
.trueCountPrompt{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
}
.trueCountPrompt>span{
  padding:8px 6px;
  border:1px solid #3d2b20;
  border-radius:8px;
  background:#0b0806;
  text-align:center;
}
.trueCountPrompt small{display:block;font-size:5px;color:#8d7c69}
.trueCountPrompt b{display:block;margin-top:3px;font:900 14px ui-monospace,monospace;color:#eee2c7}
.trueCountPrompt input{
  width:100%;
  margin-top:3px;
  min-height:32px;
  border:1px solid #5b4230;
  border-radius:6px;
  background:#100b08;
  color:#fff;
  text-align:center;
  font:900 15px ui-monospace,monospace;
  outline:none;
}
.trueCountActions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.trueCountActions button{
  min-height:40px;
  border:1px solid #6b4932;
  border-radius:8px;
  background:linear-gradient(#2b1b11,#130d08);
  color:#ead7b5;
  font-size:6.5px;
  font-weight:900;
}
#tcFeedback{
  margin:0;
  padding:7px 8px;
  border-radius:7px;
  background:#0b0806;
  font-size:6.5px;
  line-height:1.35;
  color:#958775;
}
#tcFeedback.good{color:#b9d6ad;border:1px solid #506548}
#tcFeedback.bad{color:#e29aa2;border:1px solid #6b3338}

/* Rail / trim previews */
.railPreview{
  width:60px;
  height:54px;
  position:relative;
  border-radius:22px 22px 8px 8px/10px 10px 8px 8px;
  overflow:hidden;
  background:#3e2818;
  box-shadow:0 4px 10px #0008;
}
.railPreview span{
  position:absolute;inset:7px 8px 11px;
  border-radius:18px 18px 5px 5px;
  background:#0d503b;
}
.railPreview i{
  position:absolute;left:5px;right:5px;bottom:5px;height:5px;border-radius:3px;background:#7a5131;
}
.rail-walnut{background:#583820}.rail-walnut i{background:#8e6038}
.rail-blackleather{background:#111}.rail-blackleather i{background:#303030}
.rail-mahogany{background:#4d1f18}.rail-mahogany i{background:#8a4937}
.rail-chrome{background:#444b50}.rail-chrome i{background:linear-gradient(90deg,#737b80,#e4e7e8,#6c7378)}
.rail-goldrail{background:#111}.rail-goldrail i{background:#c79a45}
.rail-carbonrail{background:repeating-linear-gradient(45deg,#111 0 4px,#303237 4px 6px)}.rail-carbonrail i{background:#52565b}
.rail-ivoryrail{background:#ddd2b8}.rail-ivoryrail i{background:#a98745}
.rail-masterrail{background:#10100e}.rail-masterrail i{background:linear-gradient(90deg,#684426,#c9a34d,#684426)}

/* Equipped rail changes actual Blackjack + Learner table border/outline */
body[data-rail="walnut"] .table,body[data-rail="walnut"] .learnerTable{border-color:#5a3a25;outline-color:#9b7656}
body[data-rail="blackleather"] .table,body[data-rail="blackleather"] .learnerTable{border-color:#111;outline-color:#4a4a4a}
body[data-rail="mahogany"] .table,body[data-rail="mahogany"] .learnerTable{border-color:#4d1f18;outline-color:#9a5542}
body[data-rail="chrome"] .table,body[data-rail="chrome"] .learnerTable{border-color:#4a5054;outline-color:#d1d6d8}
body[data-rail="goldrail"] .table,body[data-rail="goldrail"] .learnerTable{border-color:#17130d;outline-color:#c89b4a}
body[data-rail="carbonrail"] .table,body[data-rail="carbonrail"] .learnerTable{border-color:#202226;outline-color:#5d6267}
body[data-rail="ivoryrail"] .table,body[data-rail="ivoryrail"] .learnerTable{border-color:#cfc2a6;outline-color:#9d7d42}
body[data-rail="masterrail"] .table,body[data-rail="masterrail"] .learnerTable{border-color:#16130e;outline-color:#c7a24d}

@media(max-width:899px){
  body.ui-mobile .trueCountLab{padding:8px}
  body.ui-mobile .trueCountPrompt{gap:4px}
  body.ui-mobile .trueCountPrompt>span{padding:7px 4px}
  body.ui-mobile .trueCountPrompt b{font-size:12px}
  body.ui-mobile .trueCountActions button{min-height:38px}
}


/* Deck Estimation Lab */
.deckEstimateLab{
  display:grid;
  gap:8px;
  padding:10px;
  border:1px solid #3f3e2f;
  border-radius:10px;
  background:linear-gradient(145deg,#12130f,#0b0c09);
}
.deckVisual{
  display:grid;
  place-items:center;
  padding:8px 4px;
}
.deckShoeShell{
  position:relative;
  width:min(100%,330px);
  height:62px;
  overflow:hidden;
  border:5px solid #222;
  border-radius:9px 22px 12px 9px;
  background:#070707;
  box-shadow:inset 0 0 0 2px #4a4a45,0 5px 15px #0008;
}
.deckShoeFill{
  position:absolute;
  left:0;top:0;bottom:0;
  width:50%;
  background:
    repeating-linear-gradient(90deg,#e3dfd3 0 4px,#aaa59a 4px 5px,#ece7da 5px 9px),
    #d8d2c3;
  box-shadow:inset -5px 0 8px #0004;
  transition:width .2s ease;
}
.deckShoeShell i{
  position:absolute;
  top:6px;bottom:6px;right:10px;
  width:8px;
  border-left:2px solid #4b4b47;
  border-right:1px solid #141414;
  transform:skewX(-8deg);
}
.deckShoeShell span{
  position:absolute;
  right:24px;
  bottom:5px;
  font:800 5px ui-monospace,monospace;
  letter-spacing:.1em;
  color:#777;
}
.deckEstimateEntry{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:6px;
  align-items:end;
}
.deckEstimateEntry label small{display:block;margin-bottom:4px;font-size:5px;color:#8a8872}
.deckEstimateEntry input{
  width:100%;
  min-height:39px;
  border:1px solid #4b4a3a;
  border-radius:7px;
  background:#0c0d0a;
  color:#fff;
  padding:7px 9px;
  font:900 14px ui-monospace,monospace;
  outline:none;
}
.deckEstimateEntry button{
  min-height:39px;
  border:1px solid #55523d;
  border-radius:7px;
  background:linear-gradient(#252419,#11110c);
  color:#dfdabd;
  padding:7px 9px;
  font-size:6px;
  font-weight:900;
}
#deFeedback{
  margin:0;
  padding:7px 8px;
  border-radius:7px;
  background:#0a0b08;
  font-size:6.5px;
  line-height:1.35;
  color:#8f8d78;
}
#deFeedback.good{color:#b9d6ad;border:1px solid #506548}
#deFeedback.bad{color:#e29aa2;border:1px solid #6b3338}
@media(max-width:899px){
  body.ui-mobile .deckEstimateLab{padding:8px}
  body.ui-mobile .deckEstimateEntry{grid-template-columns:minmax(0,1fr) 70px 76px}
  body.ui-mobile .deckEstimateEntry button{padding:5px;font-size:5.5px}
}

/* V22 PAID ACCOUNT ACCESS */
body.authPending>main{visibility:hidden;pointer-events:none}
.accountGate[hidden]{display:none!important}
.accountGate{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:18px;background:radial-gradient(circle at 50% 20%,#18392b55,transparent 34%),linear-gradient(160deg,#080604,#130708);overflow:auto}
.accountGateCard{width:min(470px,100%);border:1px solid #59422f;border-radius:16px;padding:28px;background:linear-gradient(145deg,#110d09,#080605);box-shadow:0 24px 90px #000}
.gateBrand{display:flex;align-items:center;gap:13px;padding-bottom:18px;border-bottom:1px solid #30231a}
.gateBrand img{width:50px;height:50px}.gateBrand div{display:grid}.gateBrand small{font-size:7px;letter-spacing:.17em;color:#72c294}.gateBrand b{font-size:18px;letter-spacing:.08em}.gateBrand span{font-size:7px;color:#9e907e;letter-spacing:.14em}
#gateLogin h2{margin:25px 0 8px;font-size:28px;letter-spacing:.04em}#gateLogin>p{margin:0 0 20px;color:#9d9182;font-size:12px;line-height:1.55}
#loginForm{display:grid;gap:13px}#loginForm label{display:grid;gap:7px;font-size:8px;font-weight:900;letter-spacing:.11em;color:#a59784}
#loginForm input{box-sizing:border-box;width:100%;padding:13px;border:1px solid #392b21;border-radius:9px;background:#070504;color:#f1e7d7;font-size:16px;outline:none}#loginForm input:focus{border-color:#987445}
#loginSubmit{min-height:46px;border:1px solid #8a673e;border-radius:9px;background:#6e111a;color:#fff;font-weight:950;letter-spacing:.08em;cursor:pointer}#loginSubmit:disabled{opacity:.6;cursor:wait}
.gateError{min-height:17px;color:#dc7479;font-size:10px;line-height:1.45}
.gatePurchase{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:19px;padding-top:16px;border-top:1px solid #2c2118}.gatePurchase span{font-size:7px;letter-spacing:.13em;color:#7e7366}.gatePurchase a{font-size:8px;font-weight:950;color:#cfad70;text-decoration:none}
.gateChecking{padding:42px 0 12px;text-align:center;color:#c8a66d;font-size:9px;font-weight:950;letter-spacing:.14em}
.accountLocalHidden{display:none!important}.accountSessionRow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0;padding:12px;border:1px solid #34271e;border-radius:9px;background:#0b0806}
.accountSessionRow span{font-size:8px;font-weight:900;letter-spacing:.08em;color:#cdb784}.accountSessionRow button{border:1px solid #68434a;border-radius:7px;padding:8px 10px;background:#1c090c;color:#e6c9cb;font-size:8px;font-weight:900;cursor:pointer}
@media(max-width:560px){.accountGateCard{padding:20px}.gatePurchase{align-items:flex-start;flex-direction:column}}