/* prob-games.css — Next Card (nc-), Fermi Estimation (fe-) and Probability
   Trainer (ps-) players + the shared drill-kit bits (dk-). Games batch B5,
   Oct 2026. Builds on css/trading-game.css (landing, segmented controls,
   score rings); only game-specific pieces live here. Theme-aware via the
   site variables in css/variables.css. */

/* ---------- drill-kit shared ---------- */
.dk-seg .mm-seg__opt { min-height: 36px; }
.dk-seg .mm-seg__opt.is-locked { opacity: .55; cursor: not-allowed; }
.dk-lock { vertical-align: -1px; margin-left: 2px; }
.dk-bars { margin: var(--space-3) 0 0; }
.dk-bars figcaption { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .06em; font-weight: var(--font-bold); }
.dk-bars svg { width: 100%; height: 54px; display: block; }
.dk-bar { fill: var(--border-light); }
.dk-bar--best { fill: var(--accent-gold); }
.dk-bar--last { fill: var(--accent); }
.pg-cols { grid-template-columns: 1.25fr 1fr !important; }
@media (max-width: 980px) { .pg-cols { grid-template-columns: 1fr !important; } }
.pg-seo-links { font-size: var(--text-sm); }

/* ---------- Next Card ---------- */
.nc { max-width: 1060px; margin: 0 auto; padding: var(--space-3) 0 var(--space-6); }
.nc-hud { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); position: relative; margin-bottom: var(--space-4); }
.nc-hud__l { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.nc-hud__k { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: var(--font-bold); }
.nc-hud__cap { font-family: var(--font-mono); font-size: 1.6rem; font-weight: var(--font-bold); color: var(--text-bright); }
.nc-hud__m { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--font-semibold); }
.nc-hud__r { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-2); }
.nc-spark { width: 120px; height: 30px; display: block; }
.nc-spark path { fill: none; stroke: var(--accent); stroke-width: 2; }
.nc-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; border-radius: 0 0 var(--radius-lg) var(--radius-lg); overflow: hidden; }
.nc-prog span { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.nc-end { min-height: 40px; padding: 6px 12px; border: 1px solid var(--border-light); background: transparent; color: var(--text-secondary); border-radius: var(--radius-md); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.nc-end:hover { color: var(--text-primary); }
.nc-clock { font-family: var(--font-mono); font-weight: var(--font-bold); font-size: var(--text-lg); padding: 4px 10px; border-radius: var(--radius-md); background: var(--bg-surface); }
.nc-clock.is-low { color: var(--color-hard); }

.nc-main { display: grid; grid-template-columns: 1fr 400px; gap: var(--space-4); align-items: start; }
.nc-table { background: radial-gradient(120% 90% at 50% 0%, rgba(34,197,94,.10), transparent 60%), var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-4) var(--space-4); }
.nc-cards { display: flex; justify-content: center; gap: var(--space-5); flex-wrap: wrap; }
.nc-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.nc-slot__lab { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: var(--font-bold); }
.nc-card { position: relative; width: 112px; height: 158px; border-radius: 12px; background: #fdfdfb; border: 1px solid rgba(15,23,42,.14); box-shadow: 0 6px 18px rgba(2,6,23,.18); color: #111827; font-family: var(--font-sans); user-select: none; }
.nc-card--red { color: #c8102e; }
.nc-card__ix { position: absolute; top: 8px; left: 10px; display: flex; flex-direction: column; align-items: center; line-height: 1; font-weight: 800; font-size: 1.35rem; }
.nc-card__ix i { font-style: normal; font-size: 1rem; margin-top: 2px; }
.nc-card__ix--b { top: auto; left: auto; bottom: 8px; right: 10px; transform: rotate(180deg); }
.nc-card__pip { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3.4rem; line-height: 1; }
.nc-card--back { background: repeating-linear-gradient(45deg, #2f5fd0 0 6px, #3b6fe0 6px 12px); border: 5px solid #fdfdfb; }
.nc-card--back span { position: absolute; inset: 10px; border: 1.5px solid rgba(255,255,255,.55); border-radius: 6px; }
.nc-card--dim { opacity: .72; transform: scale(.92); }
.nc-card--turn { animation: nc-turn .42s ease-out; }
@keyframes nc-turn { 0% { transform: rotateY(90deg) scale(.96); } 100% { transform: rotateY(0) scale(1); } }
.nc-rankline { text-align: center; font-size: var(--text-xs); color: var(--text-muted); margin: var(--space-3) 0; letter-spacing: .04em; }
.nc-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--space-2); margin-bottom: var(--space-3); }
.nc-counts--self { display: flex; align-items: center; gap: var(--space-3); }
.nc-counts--self p { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.nc-count { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); text-align: center; }
.nc-count b { display: block; font-family: var(--font-mono); font-size: 1.5rem; color: var(--text-bright); }
.nc-count span { font-size: var(--text-xs); color: var(--text-muted); }
.nc-count--higher b, .nc-count--inside b, .nc-count--picture b, .nc-count--red b { color: var(--accent); }
.nc-turned__lab { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: var(--font-bold); margin-bottom: 6px; }
.nc-turned__row { display: flex; flex-wrap: wrap; gap: 5px; }
.nc-mini { display: inline-flex; align-items: center; gap: 1px; min-width: 34px; height: 30px; justify-content: center; padding: 0 5px; border-radius: 6px; background: #fdfdfb; color: #111827; border: 1px solid rgba(15,23,42,.14); font-weight: 700; font-size: .85rem; }
.nc-mini i { font-style: normal; font-size: .8rem; }
.nc-mini--red { color: #c8102e; }

.nc-panel { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-4); }
.nc-offer__k { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--accent); font-weight: var(--font-bold); }
.nc-offer__t { font-size: var(--text-xl); margin: 4px 0; }
.nc-offer__s { font-size: var(--text-sm); color: var(--text-secondary); margin: 0 0 var(--space-3); line-height: 1.45; }
.nc-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-2); margin-bottom: var(--space-3); }
.nc-side { position: relative; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 2px solid var(--border-light); background: var(--bg-surface); color: var(--text-primary); border-radius: var(--radius-lg); font: inherit; cursor: pointer; transition: border-color .12s, background .12s, transform .08s; }
.nc-side:hover { border-color: var(--accent-border); }
.nc-side:active { transform: scale(.98); }
.nc-side.is-active { border-color: var(--accent); background: var(--accent-light); box-shadow: 0 0 0 3px var(--accent-glow); }
.nc-side__l { font-weight: var(--font-bold); font-size: var(--text-lg); }
.nc-side__o { font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-mono); }
.nc-side kbd, .nc-pre kbd { position: absolute; top: 5px; right: 7px; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); background: none; border: 0; padding: 0; }
.nc-stake__top { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--text-sm); margin-bottom: 6px; }
.nc-stake__top label { font-weight: var(--font-semibold); }
.nc-stake__top span { font-family: var(--font-mono); font-weight: var(--font-bold); color: var(--text-bright); }
#nc-slider { width: 100%; accent-color: var(--accent); height: 28px; }
.nc-presets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 6px 0 var(--space-2); }
.nc-pre { position: relative; min-height: 44px; border: 1px solid var(--border-light); background: transparent; color: var(--text-secondary); border-radius: var(--radius-md); font: inherit; font-size: var(--text-sm); font-weight: var(--font-semibold); cursor: pointer; }
.nc-pre.is-active { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.nc-pre kbd { top: 2px; right: 4px; font-size: 9px; }
.nc-amt { display: flex; align-items: center; gap: 6px; margin-bottom: var(--space-3); font-family: var(--font-mono); color: var(--text-muted); }
.nc-amt input { flex: 1; min-height: 44px; font: inherit; font-size: var(--text-base); color: var(--text-bright); background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 0 10px; }
.nc-go { width: 100%; min-height: 48px; font-size: var(--text-base); }
.nc-go:disabled { opacity: .55; cursor: not-allowed; }
.nc-hint { font-size: var(--text-xs); color: var(--text-muted); margin: var(--space-2) 0 0; line-height: 1.45; }

.nc-res { border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-3); background: var(--bg-surface); border: 1px solid var(--border-color); }
.nc-res__big { font-family: var(--font-mono); font-size: 1.45rem; font-weight: var(--font-bold); }
.nc-res__cap { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 2px; }
.nc-res--up .nc-res__big { color: #16a34a; }
.nc-res--down .nc-res__big { color: var(--color-hard); }
.nc-verdict { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); margin-bottom: var(--space-3); font-size: var(--text-sm); font-weight: var(--font-semibold); border: 1px solid var(--border-color); }
.nc-verdict__score { flex: 0 0 auto; min-width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-weight: var(--font-bold); background: var(--bg-surface); }
.nc-verdict--good { border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.08); }
.nc-verdict--good .nc-verdict__score { background: #16a34a; color: #fff; }
.nc-verdict--close { border-color: rgba(76,139,245,.4); background: var(--accent-light); }
.nc-verdict--close .nc-verdict__score { background: var(--accent); color: #fff; }
.nc-verdict--small, .nc-verdict--big { border-color: rgba(245,183,49,.5); background: rgba(245,183,49,.08); }
.nc-verdict--small .nc-verdict__score, .nc-verdict--big .nc-verdict__score { background: var(--accent-gold); color: #111; }
.nc-verdict--wrong, .nc-verdict--missed, .nc-verdict--no-edge, .nc-verdict--bad { border-color: rgba(244,63,94,.45); background: rgba(244,63,94,.07); }
.nc-verdict--wrong .nc-verdict__score, .nc-verdict--missed .nc-verdict__score, .nc-verdict--no-edge .nc-verdict__score, .nc-verdict--bad .nc-verdict__score { background: var(--color-hard); color: #fff; }
.nc-rev { margin: 0 0 var(--space-3); display: grid; gap: 6px; }
.nc-rev > div { display: grid; grid-template-columns: 118px 1fr; gap: var(--space-2); font-size: var(--text-sm); line-height: 1.45; padding-bottom: 6px; border-bottom: 1px dashed var(--border-color); }
.nc-rev dt { color: var(--text-muted); font-weight: var(--font-semibold); }
.nc-rev dd { margin: 0; color: var(--text-primary); }
.nc-g { margin: 0 0 var(--space-3); }
.nc-g svg { width: 100%; height: auto; display: block; background: var(--bg-surface); border-radius: var(--radius-md); }
.nc-g figcaption { font-size: var(--text-xs); color: var(--text-muted); margin-top: 4px; }
.nc-g__axis { stroke: var(--border-light); stroke-width: 1; }
.nc-g__curve { fill: none; stroke: var(--text-secondary); stroke-width: 2; }
.nc-g__zone { fill: rgba(34,197,94,.18); }
.nc-g__kelly { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 3; }
.nc-g__you { fill: var(--accent-gold); stroke: var(--bg-card); stroke-width: 2; }
.nc-g__t { font-size: 10px; fill: var(--text-muted); font-family: var(--font-mono); }
.nc-key { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; white-space: nowrap; }
.nc-key::before { content: ''; width: 12px; height: 8px; border-radius: 2px; display: inline-block; }
.nc-key--zone::before { background: rgba(34,197,94,.45); }
.nc-key--kelly::before { background: var(--accent); height: 3px; }
.nc-key--you::before { background: var(--accent-gold); border-radius: 50%; width: 9px; height: 9px; }
.nc-why { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-4); align-items: center; }

/* results */
.nc-final { max-width: 940px; }
.nc-final .bto-scores { grid-template-columns: repeat(3, 1fr); }
.nc-final__score { display: flex; align-items: center; justify-content: center; gap: var(--space-6); flex-wrap: wrap; margin-top: var(--space-3); text-align: left; }
.nc-bigring { width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; align-content: center; background: conic-gradient(var(--accent) calc(var(--v) * 1%), var(--border-color) 0); position: relative; }
.nc-bigring::before { content: ''; position: absolute; inset: 11px; border-radius: 50%; background: var(--bg-primary); }
.nc-bigring span { position: relative; font-family: var(--font-mono); font-size: 2.8rem; font-weight: var(--font-bold); color: var(--text-bright); line-height: 1; }
.nc-bigring small { position: relative; font-size: var(--text-xs); color: var(--text-muted); }
.nc-final__money { max-width: 380px; }
.nc-final__k { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--accent); font-weight: var(--font-bold); }
.nc-final__money p { font-size: var(--text-sm); color: var(--text-secondary); margin: 4px 0 var(--space-3); }
.nc-final__row { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--text-sm); padding: 5px 0; border-bottom: 1px dashed var(--border-color); }
.nc-final__row b { font-family: var(--font-mono); }
.nc-pb { display: inline-block; margin-top: var(--space-3); padding: 4px 14px; border-radius: 999px; background: rgba(245,183,49,.16); color: var(--accent-gold); font-weight: 800; letter-spacing: .06em; font-size: var(--text-sm); }
.nc-path { margin: var(--space-5) 0; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); }
.nc-path figcaption { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nc-path svg { width: 100%; height: auto; display: block; }
.nc-path__y { fill: none; stroke: var(--accent-gold); stroke-width: 3; }
.nc-path__k { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; }
.nc-path__z { fill: none; stroke: #22c55e; stroke-width: 2; opacity: .8; }
.nc-table-wrap { overflow-x: auto; margin: var(--space-4) 0; border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.nc-bets { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 640px; }
.nc-bets th { text-align: left; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); padding: 8px 10px; background: var(--bg-surface); }
.nc-bets td { padding: 8px 10px; border-top: 1px solid var(--border-color); vertical-align: top; }
.nc-bets tr.nc-tr--good td:last-child b { color: #16a34a; }
.nc-bets tr.nc-tr--wrong td:last-child b, .nc-bets tr.nc-tr--missed td:last-child b, .nc-bets tr.nc-tr--bad td:last-child b { color: var(--color-hard); }

@media (max-width: 900px) {
  .nc-main { grid-template-columns: 1fr; }
  .nc-why { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nc { padding-top: 0; }
  .nc-hud { grid-template-columns: 1fr auto; padding: var(--space-2) var(--space-3); }
  .nc-hud__spark { display: none; }
  .nc-hud__cap { font-size: 1.3rem; }
  .nc-table { padding: var(--space-3) var(--space-3) var(--space-2); }
  .nc-cards { margin-bottom: 8px; }
  .nc-cards { gap: var(--space-3); }
  .nc-card { width: 56px; height: 78px; border-radius: 8px; }
  .nc-slot { flex-direction: row; gap: 6px; }
  .nc-slot__lab { writing-mode: vertical-rl; transform: rotate(180deg); }
  .nc-count { display: flex; align-items: baseline; justify-content: center; gap: 5px; }
  .nc-count span { display: inline; }
  .nc-card__ix { font-size: .95rem; top: 5px; left: 6px; }
  .nc-card__ix i { font-size: .8rem; }
  .nc-card__ix--b { display: none; }
  .nc-card__pip { font-size: 1.7rem; padding-top: 18px; padding-left: 10px; }
  .nc-card--back { border-width: 4px; }
  .nc-slot__lab { font-size: 10px; }
  .nc-rankline { margin: 6px 0; }
  .nc-counts { grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 6px; margin-bottom: 8px; }
  .nc-rankline { display: none; }
  .nc-hud__k { width: 100%; }
  .nc-hud__l { gap: 2px 10px; }
  .nc-end { min-height: 44px; }
  .nc-count { padding: 6px 4px; }
  .nc-count b { font-size: 1.15rem; }
  .nc-count span { font-size: 10px; line-height: 1.2; display: block; }
  .nc-turned__row { gap: 4px; }
  .nc-mini { min-width: 30px; height: 26px; font-size: .78rem; }
  .nc-main { gap: var(--space-3); }
  .nc-panel { padding: var(--space-3); }
  .nc-offer__t { font-size: var(--text-lg); }
  .nc-side { min-height: 56px; }
  .pg-cols .mm-set--row { flex-direction: column; align-items: stretch; gap: 6px; }
  .pg-cols .dk-seg { display: flex; width: 100%; }
  .pg-cols .dk-seg .mm-seg__opt { flex: 1 1 auto; min-height: 44px; }
  .nc-presets { grid-template-columns: repeat(3, 1fr); }
  .nc-pre kbd, .nc-side kbd { display: none; }
  .nc-rev > div { grid-template-columns: 1fr; gap: 0; }
  .nc-final .bto-scores { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .nc-final .bto-score__desc { display: none; }
  .nc-bigring { width: 120px; height: 120px; }
  .nc-bigring span { font-size: 2.2rem; }
}

/* ---------- Fermi Estimation ---------- */
.fe { max-width: 820px; margin: 0 auto; padding: var(--space-3) 0 var(--space-6); }
.fe-hud { position: relative; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4) calc(var(--space-3) + 4px); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); margin-bottom: var(--space-4); }
.fe-hud__k { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: var(--font-bold); }
.fe-hud__pts { font-family: var(--font-mono); font-weight: var(--font-bold); font-size: var(--text-lg); color: var(--text-bright); margin-right: auto; }
.fe-clock { font-family: var(--font-mono); font-weight: var(--font-bold); font-size: var(--text-lg); min-width: 3.4em; text-align: right; }
.fe-clock.is-low { color: var(--color-hard); }
.fe-clockbar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; overflow: hidden; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--bg-surface); }
.fe-clockbar span { display: block; height: 100%; width: 100%; background: var(--accent); transition: width .2s linear; }
.fe-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-5); }
.fe-chips { display: flex; gap: 6px; margin-bottom: var(--space-2); }
.fe-chip { font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: .06em; padding: 3px 9px; border-radius: 999px; background: var(--bg-surface); color: var(--text-secondary); border: 1px solid var(--border-color); }
.fe-chip--fact { color: var(--accent); border-color: var(--accent-border); background: var(--accent-light); }
.fe-chip--guess { color: #b7791f; border-color: rgba(245,183,49,.4); background: rgba(245,183,49,.1); }
.fe-q { font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.3; margin: 0 0 var(--space-2); }
.fe-q--sm { font-size: var(--text-lg); color: var(--text-secondary); font-weight: var(--font-semibold); }
.fe-unit { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-4); }
.fe-unit b { color: var(--text-primary); }
.fe-inputs { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-3); align-items: end; }
.fe-inputs--one { grid-template-columns: 1fr; }
.fe-in { min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: var(--font-bold); }
.fe-in input { width: 100%; min-width: 0; box-sizing: border-box; min-height: 52px; font-family: var(--font-mono); font-size: 1.25rem; padding: 0 12px; color: var(--text-bright); background: var(--bg-surface); border: 2px solid var(--border-light); border-radius: var(--radius-md); text-transform: none; letter-spacing: 0; font-weight: var(--font-semibold); }
.fe-in input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.fe-dash { padding-bottom: 16px; color: var(--text-muted); font-size: var(--text-sm); }
.fe-suffix { display: flex; gap: 6px; margin: var(--space-2) 0; }
.fe-suf { min-width: 48px; min-height: 40px; border: 1px solid var(--border-light); background: transparent; border-radius: var(--radius-md); font-family: var(--font-mono); font-weight: var(--font-bold); color: var(--text-secondary); cursor: pointer; }
.fe-suf:hover { border-color: var(--accent); color: var(--accent); }
.fe-live { font-size: var(--text-sm); color: var(--text-secondary); min-height: 1.6em; margin: var(--space-2) 0; }
.fe-live b { color: var(--text-bright); font-family: var(--font-mono); }
.fe-warn { color: #b7791f; margin-left: 6px; }
.fe-hints p { margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3); background: var(--bg-surface); border-left: 3px solid var(--accent-gold); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.fe-actions { display: flex; gap: var(--space-2); justify-content: flex-end; flex-wrap: wrap; margin-top: var(--space-4); }
.fe-actions .btn { min-height: 46px; padding-left: 18px; padding-right: 18px; }
.fe-actions .btn--primary { min-width: 160px; }
.fe-r { margin: var(--space-2) 0; }
.fe-r svg { width: 100%; height: auto; display: block; }
.fe-r figcaption { font-size: var(--text-xs); color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.fe-r__axis { stroke: var(--border-light); stroke-width: 2; }
.fe-r__tick { stroke: var(--text-muted); stroke-width: 1; }
.fe-r__lab { font-size: 11px; fill: var(--text-muted); font-family: var(--font-mono); }
.fe-r__band { fill: rgba(76,139,245,.25); stroke: var(--accent); stroke-width: 1.5; }
.fe-r__mid { stroke: var(--accent); stroke-width: 2.5; }
.fe-r__pin line { stroke: var(--accent-gold); stroke-width: 2.5; }
.fe-r__pin circle { fill: var(--accent-gold); }
.fe-key { display: inline-flex; align-items: center; gap: 4px; }
.fe-key::before { content: ''; display: inline-block; width: 12px; height: 8px; border-radius: 2px; }
.fe-key--band::before { background: rgba(76,139,245,.35); border: 1px solid var(--accent); }
.fe-key--mid::before { width: 3px; height: 12px; background: var(--accent); }
.fe-key--pin::before { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-gold); }
.fe-verdict { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); margin: var(--space-2) 0 var(--space-3); border: 1px solid var(--border-color); }
.fe-verdict--hit { background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.4); }
.fe-verdict--miss { background: rgba(244,63,94,.07); border-color: rgba(244,63,94,.35); }
.fe-verdict__big { font-weight: var(--font-bold); font-size: var(--text-lg); }
.fe-verdict__sub { font-size: var(--text-sm); color: var(--text-secondary); }
.fe-verdict__pts { font-family: var(--font-mono); font-size: 1.8rem; font-weight: var(--font-bold); color: var(--text-bright); }
.fe-verdict__pts small { font-size: var(--text-xs); color: var(--text-muted); margin-left: 3px; }
.fe-ans, .fe-mine { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: var(--text-sm); margin-bottom: 4px; }
.fe-ans span, .fe-mine span { color: var(--text-muted); min-width: 60px; font-weight: var(--font-semibold); }
.fe-ans b, .fe-mine b { font-family: var(--font-mono); font-size: var(--text-lg); color: var(--text-bright); }
.fe-ans em { font-style: normal; font-size: var(--text-xs); color: var(--text-muted); }
.fe-break { font-size: var(--text-sm); color: var(--text-secondary); margin: var(--space-2) 0; }
.fe-work { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--bg-surface); border-radius: var(--radius-md); border-left: 3px solid var(--accent); }
.fe-work h3 { font-size: var(--text-sm); margin: 0 0 4px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.fe-work p { margin: 0; font-size: var(--text-base); line-height: 1.55; }
.fe-final { max-width: 900px; }
.fe-rings { grid-template-columns: repeat(3, 1fr); }
.fe-revh { margin: var(--space-5) 0 var(--space-2); }
.fe-rev { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.fe-rev__i { background: var(--bg-card); border: 1px solid var(--border-color); border-left: 4px solid var(--border-light); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.fe-rev__i--hit { border-left-color: #22c55e; }
.fe-rev__i--miss { border-left-color: var(--color-hard); }
.fe-rev__top { display: flex; justify-content: space-between; gap: var(--space-3); font-weight: var(--font-semibold); }
.fe-rev__pts { font-family: var(--font-mono); color: var(--text-bright); }
.fe-rev__row { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--text-sm); color: var(--text-secondary); margin: 4px 0; }
.fe-rev__row b { font-family: var(--font-mono); color: var(--text-primary); }
.fe-rev__work { font-size: var(--text-sm); color: var(--text-secondary); margin: 4px 0 0; }
@media (max-width: 640px) {
  .fe-card { padding: var(--space-4) var(--space-3); }
  .fe-hud { gap: 8px 12px; padding: var(--space-2) var(--space-3) calc(var(--space-2) + 4px); }
  .fe-hud .nc-end { min-height: 40px; padding: 4px 10px; }
  .fe-inputs { grid-template-columns: 1fr 1fr; }
  .fe-dash { display: none; }
  .fe-in input { font-size: 1.1rem; min-height: 48px; }
  .fe-suf { flex: 1; min-height: 44px; }
  .fe-actions .btn { flex: 1 1 auto; }
  .fe-actions .btn--primary { flex-basis: 100%; order: -1; }
  .fe-rings .bto-score__desc { display: none; }
  .fe-rings { gap: 6px; }
}

/* ---------- Probability Trainer ---------- */
.ps { max-width: 820px; margin: 0 auto; padding: var(--space-3) 0 var(--space-6); }
.ps-hud { position: relative; display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-3) var(--space-4) calc(var(--space-3) + 4px); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); margin-bottom: var(--space-4); }
.ps-hud__stat { display: flex; flex-direction: column; line-height: 1.1; }
.ps-hud__stat span { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: var(--font-bold); }
.ps-hud__stat b { font-family: var(--font-mono); font-size: 1.35rem; color: var(--text-bright); }
.ps-hud__stat--ok b { color: #16a34a; }
.ps-hud__stat--bad b { color: var(--color-hard); }
.ps-hud__r { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.ps-clock { font-family: var(--font-mono); font-weight: var(--font-bold); font-size: var(--text-xl); }
.ps-clock.is-low { color: var(--color-hard); }
.ps-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-5); min-height: 220px; }
.ps-qn { margin-left: auto; font-size: var(--text-xs); color: var(--text-muted); align-self: center; }
.ps-q { font-size: clamp(1.15rem, 2.4vw, 1.45rem); line-height: 1.4; margin: var(--space-2) 0 var(--space-4); font-weight: var(--font-semibold); }
.ps-ansrow { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.ps-ansrow input { flex: 1 1 220px; min-width: 0; box-sizing: border-box; min-height: 52px; font-family: var(--font-mono); font-size: 1.2rem; padding: 0 12px; color: var(--text-bright); background: var(--bg-surface); border: 2px solid var(--border-light); border-radius: var(--radius-md); }
.ps-ansrow input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.ps-ansrow .btn { min-height: 52px; padding: 0 20px; }
.ps-parse { font-size: var(--text-xs); color: var(--text-muted); min-height: 1.4em; margin-top: 4px; font-family: var(--font-mono); }
.ps-opts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.ps-opt { position: relative; min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 2px solid var(--border-light); background: var(--bg-surface); color: var(--text-primary); border-radius: var(--radius-md); font: inherit; font-family: var(--font-mono); font-size: 1.1rem; font-weight: var(--font-semibold); cursor: pointer; text-align: left; }
.ps-opt:hover { border-color: var(--accent-border); }
.ps-opt em { font-style: normal; font-size: var(--text-sm); color: var(--text-muted); font-weight: var(--font-normal); }
.ps-opt kbd { font-size: 11px; color: var(--text-muted); border: 1px solid var(--border-light); border-radius: 4px; padding: 1px 6px; background: var(--bg-card); }
.ps-opt.is-right { border-color: #22c55e; background: rgba(34,197,94,.1); }
.ps-opt.is-wrong { border-color: var(--color-hard); background: rgba(244,63,94,.08); }
.ps-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); }
.ps-actions .btn { min-height: 46px; }
.ps-fb { margin-top: var(--space-3); min-height: 70px; }
.ps-fbi { border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-color); border-left: 4px solid var(--border-light); background: var(--bg-card); }
.ps-fbi--ok { border-left-color: #22c55e; }
.ps-fbi--bad { border-left-color: var(--color-hard); }
.ps-fbi--skip { border-left-color: var(--text-muted); }
.ps-fbi__top { font-size: var(--text-sm); }
.ps-fbi--ok .ps-fbi__top > b:first-child { color: #16a34a; }
.ps-fbi--bad .ps-fbi__top > b:first-child { color: var(--color-hard); }
.ps-fbi__q { font-size: var(--text-xs); color: var(--text-muted); margin: 4px 0 2px; }
.ps-fbi__w { font-size: var(--text-sm); color: var(--text-primary); line-height: 1.5; }
.ps-mono { font-family: var(--font-mono); }
.ps-learn { margin-top: var(--space-4); }
.ps-final { max-width: 900px; }
.ps-rings { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) {
  .ps-hud { gap: var(--space-3); padding: var(--space-2) var(--space-3) calc(var(--space-2) + 4px); }
  .ps-hud__stat b { font-size: 1.1rem; }
  .ps-hud__r { width: 100%; justify-content: space-between; margin-left: 0; }
  .ps-card { padding: var(--space-4) var(--space-3); min-height: 0; }
  .ps-opts { grid-template-columns: 1fr; }
  .ps-ansrow input { flex-basis: 100%; }
  .ps-ansrow .btn { flex: 1; }
  .ps-rings .bto-score__desc { display: none; }
  .ps-rings { gap: 6px; }
}

/* ---------- focus mode + countdown (all three players) ---------- */
body.pg-running > nav.nav, body.pg-running .qv-tabbar, body.pg-running #qv-pwa-bar, body.pg-running .qv-seo-wrap, body.pg-running .footer { display: none !important; }
body.pg-running.has-qv-tabbar { padding-bottom: 0 !important; }
body.pg-running .main { margin-top: 0; padding-top: 12px; }
body.pg-running .qv-sample-badge { margin-top: 0; }
.pg-count { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg-primary) 88%, transparent); backdrop-filter: blur(3px); }
.pg-count__n { font-family: var(--font-mono); font-size: 5rem; font-weight: var(--font-bold); color: var(--accent); line-height: 1; animation: pg-pop .6s ease-out infinite; }
.pg-count__l { margin-top: 10px; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); font-weight: var(--font-bold); }
@keyframes pg-pop { 0% { transform: scale(1.25); opacity: .4; } 40% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.pg-upsell:empty { display: none; }
.pg-share { margin-left: 4px; }
.pg-mstart { display: none !important; }
@media (max-width: 640px) {
  .pg-mstart { display: flex !important; justify-content: center; margin: var(--space-3) 0 0; min-height: 48px; }
  .pg-mstart + .qv-sample-note { margin-bottom: var(--space-3); }
  .nc-panel .nc-go { position: sticky; bottom: 8px; z-index: 5; box-shadow: 0 6px 18px rgba(15, 23, 42, .18); }
  .nc-amt { display: none; }
}
.fe-live { min-height: 2.8em; }
#fe-ruler { min-height: 92px; }
.fe-hud__cal { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--text-secondary); background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 999px; padding: 3px 10px; }
@media (max-width: 640px) { #fe-ruler { min-height: 80px; } .fe-hud__cal { order: 5; } }
.ps-card.is-ok { animation: ps-ok .45s ease-out; }
.ps-card.is-bad { animation: ps-bad .45s ease-out; }
@keyframes ps-ok { 0% { box-shadow: 0 0 0 3px rgba(34,197,94,.55); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
@keyframes ps-bad { 0% { box-shadow: 0 0 0 3px rgba(244,63,94,.55); transform: translateX(-4px); } 30% { transform: translateX(3px); } 100% { box-shadow: 0 0 0 0 rgba(244,63,94,0); transform: none; } }
.ps-pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: var(--space-3); }
.ps-key { min-height: 48px; border: 1px solid var(--border-light); background: var(--bg-surface); color: var(--text-primary); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: 1.15rem; font-weight: var(--font-semibold); cursor: pointer; }
.ps-key:active { background: var(--accent-light); border-color: var(--accent); }
@media (max-width: 640px) {
  .ps:not(.ps-final) { display: flex; flex-direction: column; }
  .ps:not(.ps-final) .ps-hud { order: 0; }
  .ps:not(.ps-final) .ps-fb { order: 1; margin: 0 0 var(--space-3); min-height: 0; }
  .ps:not(.ps-final) .ps-card { order: 2; }
  .ps-fbi { padding: var(--space-2) var(--space-3); }
  .ps-fbi__q { display: none; }
  .ps-fbi__w { font-size: var(--text-xs); }
}
.nc-go--warn { background: var(--color-hard) !important; border-color: var(--color-hard) !important; }