/* The playing table takes priority; setup and learning stay within reach. */
.trainer-page { background:radial-gradient(ellipse at 45% 8%,#172920 0,transparent 58%),#0b120f; }
.trainer-page main { max-width:1160px; padding:28px 24px; gap:18px; }
.game-intro { grid-column:1/-1; grid-row:1; order:-1; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 2px 4px; scroll-margin-top:80px; }
.game-intro h1 { font:600 clamp(22px,3vw,30px)/1.2 var(--font-display); letter-spacing:-.045em; margin:0; }
.game-intro p { font-size:14px; color:#9dac9f; margin:6px 0 0; }
.table-status { display:flex; align-items:center; gap:7px; font-size:12px; color:#b9c9bc; white-space:nowrap; }
.table-status i { width:6px; height:6px; border-radius:50%; background:#7bcc9c; box-shadow:0 0 10px #7bcc9c55; }
.trainer-page .table-zone { min-height:410px; border:1px solid #42614c; border-radius:24px; padding:25px 18px 22px; background:radial-gradient(ellipse at 50% 15%,#245b44,transparent 80%),linear-gradient(140deg,#163e2e,#112e24); box-shadow:inset 0 0 65px #00160f60,0 16px 40px #0003; }
.trainer-page .table-rim { inset:8px; border:1px solid #bcac7330; border-radius:17px; }
.trainer-page .dealer-foot { min-height:28px; }
.trainer-page .felt-print { font-size:9px; letter-spacing:.15em; color:#c8c7a38c; margin:12px 0; }
.trainer-page .seat.empty { min-height:140px; display:grid; place-items:center; }
.trainer-page .seat.empty .seat-spot { border:0; padding:10px 24px; display:flex; flex-direction:column; align-items:center; gap:5px; letter-spacing:0; font-size:12px; color:#a4bbaa; }
.seat-spot strong { font:500 19px var(--font-display); color:#edf0dc; }
.empty-spade { font-size:39px; line-height:1; color:#d1bd7970; margin-bottom:5px; }
.trainer-page #dealerCards:empty::before,.trainer-page #dealerCards:empty::after { content:'♠'; display:grid; place-items:center; width:var(--card-w); height:calc(var(--card-w)*1.4); border:1px solid #c8d9ba24; border-radius:8px; color:#cad6b521; font-size:32px; background:#021c0f15; }
.trainer-sidebar { display:flex; flex-direction:column; gap:14px; min-width:0; }
.trainer-welcome { padding:26px 23px 20px; background:linear-gradient(145deg,#1b2820,#111c16); border:1px solid #ffffff0e; border-radius:20px; }
.panel-eyebrow { font-size:9px; font-weight:700; letter-spacing:.18em; color:#b5bb9c; }
.trainer-welcome h2 { font:500 24px/1.35 var(--font-display); letter-spacing:-.045em; margin:17px 0 12px; }
.trainer-welcome>p { font-size:14px; line-height:1.6; color:#a9b9ad; margin:0 0 24px; }
.coach-feature { display:flex; gap:12px; margin:20px 0; }
.coach-feature>span { flex:none; width:28px; height:28px; display:grid; place-items:center; border:1px solid #bfcfa626; border-radius:9px; color:#d3c796; }
.coach-feature strong { font-size:13px; font-weight:600; color:#e0e8db; }
.coach-feature p { font-size:12px; line-height:1.6; margin:3px 0 0; color:#93a799; }
.practice-note { border-top:1px solid #ffffff0d; padding-top:16px; font-size:11px; color:#95a698; }
.course-card { display:flex; align-items:center; gap:12px; padding:18px; border:1px solid #c9a55730; border-radius:16px; text-decoration:none; color:#f4eddb; background:#c9a55708; transition:background .2s,border-color .2s; }
.course-card:hover { background:#c9a55714; border-color:#c9a55775; }
.course-icon { font-size:25px; color:#d4bd83; }
.course-card>span:nth-child(2) { display:flex; flex-direction:column; gap:5px; }
.course-card small { font-size:8px; letter-spacing:.16em; color:#b6ae8e; }
.course-card strong { font-size:13px; font-weight:600; }
.course-card span span { font-size:11px; color:#99aa9e; }
.course-card>b { margin-left:auto; color:#ccb780; font-size:18px; }
.trainer-page .insight { max-height:none; overflow:visible; padding:20px; border-radius:18px; box-shadow:none; background:#142119; }
.trainer-page .count-panel { max-height:none; }
.trainer-page .control-zone { gap:14px; }
.trainer-page .bet-bar { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; padding:14px 16px 4px; background:#17231b; border-radius:17px; }
.trainer-page #dealBtn { grid-column:1/-1; margin-bottom:5px; }
.trainer-page .deal-btn:not(.ghost) { background:linear-gradient(120deg,#ead49b,#c9ad6a); color:#1b2117; box-shadow:0 4px 16px #0002,inset 0 1px #ffffff50; letter-spacing:0; }
.game-options { min-width:0; }
.game-options summary { color:#afbea9; cursor:pointer; padding:13px 0; font-size:12px; min-height:44px; }
.game-options[open] { grid-column:1/-1; }
.game-options .bet-row { margin:4px 0 12px; }
.trainer-page .stats-line { padding:0 6px; gap:42px; }
.trainer-page .stat-val { color:#ccd5bf; font-size:16px; }
.trainer-page .stat-label { font-size:8px; color:#8f9f91; }
.trainer-page .action-bar .action-btn { min-height:100px; padding:18px 4px 12px; border-radius:13px; background:#17271e; }
.trainer-page .action-btn.book { background:#2b3723; border-color:#d1b975; animation:none; box-shadow:0 0 0 1px #c9a55712; }
.trainer-page .action-btn.book::after { display:none; }
.trainer-page .act-ev { font-size:12px; color:#e5e9d9; }
.trainer-page .act-avg { font-size:11px; }
.trainer-page .hand.active { animation:none; border-color:#d1bf85; box-shadow:0 0 18px #d1bf8510; }
.trainer-page .home-content { margin-top:44px; border-top:1px solid #ffffff0b; padding-top:36px; }
.game-modes { display:flex; flex-wrap:wrap; gap:8px; }
.game-modes button,.tutorial-link { padding:12px; border:1px solid #c9a55740; border-radius:9px; color:var(--cream); font:600 13px var(--font-body); }
.game-modes button[aria-pressed="true"] { background:var(--gold); color:#18190f; }
.mode-note { color:var(--cream-dim); font-size:12px; margin:10px 0; }
.tutorial-link { color:var(--gold-bright); }
.trainer-page :is(a,button,summary):focus-visible { outline:2px solid var(--gold-bright); outline-offset:4px; }
.trainer-page[data-mode="play"] :is(.practice-tools,#insight,#countPanel,#countHud,.book-tag,.act-ev,.act-avg,.ins-verdict,#insMath,#evenMath,#insNo small,#evenNo small) { display:none!important; }
@media(min-width:880px) {
 .trainer-page main { grid-template-columns:minmax(0,1fr) 310px; align-items:start; }
 .trainer-page .table-zone { grid-column:1; grid-row:2; }
 .trainer-page .control-zone { grid-column:1; grid-row:3; }
 .trainer-sidebar { grid-column:2; grid-row:2/span 2; }
 .trainer-page .home-content { grid-column:1/-1; grid-row:4; }
}
@media(max-width:879px) {
 .trainer-page main { max-width:720px; }
 .trainer-sidebar { order:2; }
 .trainer-page .control-zone { order:1; }
 .trainer-page .home-content { order:3; }
 .trainer-welcome { display:none; }
}
@media(max-width:700px) {
 .trainer-page main { padding:18px 12px 200px; gap:13px; }
 .game-intro { padding:0 4px 3px; }
 .game-intro h1 { font-size:23px; }
 .game-intro p { font-size:12px; margin-top:5px; }
 .table-status { font-size:10px; }
 .trainer-page .table-zone { flex:none; min-height:350px; padding:20px 12px 15px; border-radius:20px; }
 .trainer-page .table-rim { border-radius:14px; }
 .trainer-page .dealer-area { min-height:calc(var(--card-w)*1.4 + 45px); }
 .trainer-page .felt-print { font-size:8px; letter-spacing:.1em; margin:12px 0 3px; }
 .trainer-page .seat.empty { min-height:135px; }
 .trainer-page .control-zone { padding:12px 12px max(10px,env(safe-area-inset-bottom)); min-height:0; max-height:48dvh; overflow-y:auto; background:#0e1914f7; gap:12px; }
 .trainer-page .bet-bar { padding:0 8px; border:0; background:none; gap:0 20px; }
 .trainer-page #dealBtn { min-height:48px; }
 .trainer-page .stats-line { gap:30px; }
 .trainer-page .stat-val { font-size:15px; }
 .trainer-page .action-bar { gap:7px; padding-top:5px; }
 .trainer-page .action-bar .action-btn { min-height:94px; padding:16px 2px 10px; }
 .trainer-page .act-name { font-size:14px; }
 .trainer-page .act-ev { font-size:10px; min-height:15px; }
 .trainer-page .act-avg { font-size:10px; }
 .trainer-page .coach { bottom:calc(var(--ctrl-h,170px) + 10px); }
 .trainer-page .insight { padding:16px; }
 .course-card { padding:16px; }
 .trainer-page .home-content { margin-top:20px; padding-top:24px; }
}
@media(max-width:370px) {
 .trainer-page .brand-name { font-size:11px; }
 .trainer-page .brand-sub { font-size:6px; }
 .trainer-page .brand-mark { width:27px; height:30px; }
 .trainer-page #btnHelp { display:none; }
 .game-intro h1 { font-size:20px; }
 .game-intro p { font-size:11px; }
 .trainer-page .act-ev,.trainer-page .act-avg { font-size:9px; }
}
@media(prefers-reduced-motion:reduce) {
 .trainer-page *, .trainer-page *::after { animation:none!important; scroll-behavior:auto!important; }
}

.trainer-sidebar > * { order:0; }
.trainer-page .ins-btns .action-btn { min-height:48px; }
@media(max-width:700px) {
 .trainer-page .action-bar .action-btn::before { display:none; }
 .trainer-page .act-avg { white-space:nowrap; font-size:clamp(8px,2.3vw,10px); }
}
@media(max-width:370px) {
 .trainer-page .dealer-area { padding-top:12px; }
}
@media(max-width:700px) {
 .trainer-page .drill-hud { padding:6px 10px; gap:10px; }
 .trainer-page .drill-hud .deal-btn { width:auto; flex:none; min-height:44px; padding:8px 12px; font-size:12px; }
 .trainer-page .drill-info strong { font-size:12px; }
 .trainer-page .drill-info .mono { font-size:10px; }
 .trainer-page .act-ev { white-space:nowrap; font-size:clamp(8px,2.3vw,10px); }
}

/* Keep labels inside their controls at every supported width. */
.trainer-page :is(.control-zone,.drill-info,.setting-row>div,.modal-head h2,.mist-main,.sum-cell,.ins-text) { min-width:0; }
.trainer-page :is(.drill-info,.ins-text,.round-sub,.coach,.modal,.drawer-sub,.count-note,.ev-note) { overflow-wrap:anywhere; }
.trainer-page .action-bar { grid-template-columns:repeat(4,minmax(0,1fr)); }
.trainer-page .action-bar .action-btn { min-width:0; }
.trainer-page .action-btn :is(.act-ev,.act-avg) { max-width:100%; white-space:normal; line-height:1.4; }
.trainer-page .drill-hud { display:grid; grid-template-columns:minmax(0,1fr) auto; }
.trainer-page .drill-hud .deal-btn { width:auto; min-height:44px; }
.trainer-page .drill-info strong { line-height:1.4; }
.trainer-page .ev-row { grid-template-columns:54px minmax(0,1fr) 68px; gap:8px; }
.trainer-page .ev-cap { letter-spacing:.06em; gap:8px; }
.trainer-page .ev-cap>span { min-width:0; }
.trainer-page .ins-btns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.trainer-page .ins-btns .action-btn { justify-content:center; flex-wrap:wrap; gap:4px 8px; }
.trainer-page .round-btns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
.trainer-page .round-btns .deal-btn { padding:12px 10px; letter-spacing:0; font-size:14px; }
.trainer-page .modal { scrollbar-width:thin; scrollbar-color:#66715a #15201a; padding:20px; max-height:calc(100dvh - 32px); }
.trainer-page .modal-head { position:sticky; top:-20px; background:#15201a; z-index:2; padding:12px 0; margin-top:-12px; gap:12px; }
.trainer-page :is(.modal-head,.drawer-head) .icon-btn { flex:none; width:44px; height:44px; display:grid; place-items:center; border:1px solid #ffffff20; border-radius:10px; }
.trainer-page .setting-row { gap:14px; }
.trainer-page .setting-row:has(.mini-btns) { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; cursor:default; }
.trainer-page .setting-row p { max-width:none; line-height:1.6; }
.trainer-page .mini-btns { display:flex; flex-wrap:wrap; }
.trainer-page .mini-btns button { min-height:44px; min-width:44px; }
.trainer-page .game-modes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.trainer-page .game-modes button { min-height:48px; padding:10px; }
.trainer-page .tut-foot { gap:14px; flex-wrap:wrap; }
.trainer-page .tut-foot>div:last-child { display:grid; grid-template-columns:auto auto; margin-left:auto; min-width:0; gap:8px; }
.trainer-page .tut-foot .deal-btn { width:auto; min-height:44px; padding:10px 16px; font-size:14px; }
.trainer-page .sum-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.trainer-page .sum-key { letter-spacing:.06em; font-size:10px; }
.trainer-page .mist-row { gap:10px; align-items:flex-start; }
.trainer-page .mist-count { flex:none; }
.trainer-page .drawer { scrollbar-width:thin; }
.trainer-page .chart-tabs button { min-height:44px; }
.trainer-page .coach { max-width:calc(100vw - 32px); }
@media(min-width:700px) { .trainer-page .stats-modal .sum-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:700px) {
 .trainer-page main { padding-bottom:24px; }
 .trainer-page .control-zone { position:relative; inset:auto; transform:none; max-height:none; overflow:visible; padding:12px; border:1px solid #ffffff12; border-radius:16px; box-shadow:none; backdrop-filter:none; }
 .trainer-page .control-zone.ctrl-hidden { transform:none; }
 .trainer-page .stats-line { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
 .trainer-page .stat-label { text-align:center; letter-spacing:.07em; font-size:9px; }
 .trainer-page .coach { position:relative; inset:auto; order:2; width:100%; max-width:none; transform:none; margin:0; opacity:1; display:none; box-shadow:none; padding:14px; }
 .trainer-page .coach.show { display:flex; transform:none; }
 .trainer-page .coach strong { font-size:14px; }
 .trainer-page .coach span { font-size:13px; line-height:1.6; }
 .trainer-page .trainer-sidebar { order:3; }
 .trainer-page .home-content { order:4; }
 .trainer-page .drill-info strong { font-size:14px; }
 .trainer-page .drill-info .mono { font-size:12px; }
 .trainer-page .drill-hud { padding:8px 10px; }
 .trainer-page .bet-bar { padding:0; }
 .trainer-page .act-ev,.trainer-page .act-avg { font-size:11px; }
 .trainer-page .modal-scrim { padding:12px; }
 .trainer-page .modal { max-height:calc(100dvh - 24px); padding:18px; border-radius:16px; }
 .trainer-page .modal-head { top:-18px; }
 .trainer-page .modal-head h2 { font-size:21px; }
 .trainer-page .tutorial-link { width:100%; text-align:left; min-height:44px; }
 .trainer-page .tut-slide p { font-size:14px; line-height:1.6; }
 .trainer-page .tut-slide h2 { font-size:23px; }
 .trainer-page .drawer { padding:14px 12px; }
 .trainer-page .drawer-head h2 { font-size:20px; }
 .trainer-page .chart { table-layout:fixed; font-size:10px; }
 .trainer-page .chart th { font-size:10px; padding:5px 0; }
 .trainer-page .chart tbody th { padding-right:3px; }
 .trainer-page .chart td { padding:6px 0; }
 .trainer-page .chart-legend { gap:10px; font-size:11px; }
}
@media(max-width:420px) {
 .trainer-page .action-bar { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 10px; padding-top:8px; }
 .trainer-page .action-bar .action-btn { min-height:88px; padding:12px 5px 9px; }
 .trainer-page .act-name { font-size:16px; }
 .trainer-page .act-ev,.trainer-page .act-avg { font-size:12px; }
 .trainer-page .tut-foot>div:last-child { width:100%; grid-template-columns:1fr 1fr; }
 .trainer-page .game-intro h1 { font-size:21px; }
}
.trainer-page .action-btn:disabled { opacity:.5; }
.trainer-page .action-btn .book-tag { display:none; }
.trainer-page .action-btn.book .book-tag { display:block; }
.trainer-page .game-modes button:disabled { opacity:.65; cursor:default; }
/* Bet amount is a prominent control, separate from optional practice tools. */
.trainer-page #betOptions { grid-column:1/-1; margin:7px 0; }
.trainer-page #betOptions summary { list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px; min-height:64px; padding:12px 16px; background:#263829; border:1px solid #d4bd8370; border-radius:12px; color:#f4eddb; }
.trainer-page #betOptions summary::-webkit-details-marker { display:none; }
.trainer-page #betOptions summary:hover { background:#304430; border-color:#d4bd83; }
.trainer-page #betOptions summary>span:first-child { display:flex; flex-direction:column; gap:3px; min-width:0; }
.trainer-page #betOptions summary strong { font-size:16px; font-weight:700; }
.trainer-page #betOptions summary small { font-size:12px; color:#ccd5bf; }
.trainer-page .bet-chevron { color:#e8cb84; font-size:24px; flex:none; }
.trainer-page #betOptions[open] .bet-chevron { transform:rotate(180deg); }
.trainer-page #betOptions[open] summary { margin-bottom:16px; }
.trainer-page .practice-tools { grid-column:1/-1; }
.trainer-page #newBetBtn { border-color:#d4bd8370; color:#f4eddb; background:#263829; }
.low-balance-notice { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:10px 12px; border:1px solid #d4bd8355; border-radius:12px; background:#c9a5570d; font-size:13px; color:#d9d4bd; }
.low-balance-notice button { min-height:44px; padding:8px 12px; border:1px solid #d4bd8380; border-radius:8px; color:#e8cb84; font-weight:700; }
.bankroll-modal h2 { font-size:22px; line-height:1.3; }
.bankroll-modal p { font-size:15px; line-height:1.6; margin:12px 0; }
.bankroll-reassurance { color:#afbfaf; }
.bankroll-actions { display:grid; gap:10px; margin-top:20px; }
.bankroll-actions .deal-btn { min-height:48px; padding:12px 14px; }