/* Readable controls are independent of the scaled 720 × 1280 combat art. */
#cb-first-play { font-family: 'Space Mono', monospace; color: #edf6f5; }
#cb-first-play [hidden] { display: none !important; }
#cb-first-play button { font: inherit; cursor: pointer; touch-action: manipulation; min-height: 48px; border-radius: 10px; padding: 12px 16px; }
#cb-first-play button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.cb-eyebrow { display: block; color: #64f4c5; font-size: 11px; letter-spacing: 1px; margin-bottom: 10px; }
.cb-primary, .cb-secondary { width: 100%; border: 1px solid #64f4c5; font-weight: 700 !important; font-size: 15px !important; }
.cb-primary { background: #64f4c5; color: #05120e; }
.cb-secondary { background: transparent; color: #64f4c5; margin-top: 12px; }
.cb-text-button { background: transparent; border: 0; color: #c4d1d4; font-size: 13px !important; text-decoration: underline; }
#cb-combat-hud { position: fixed; inset: 0; z-index: 200000; pointer-events: none; }
.cb-hud-top, #cb-move-cue, .cb-controls { position: absolute; width: min(94vw, 490px); left: 50%; transform: translateX(-50%); }
.cb-hud-top { top: max(8px, env(safe-area-inset-top)); display: flex; gap: 12px; justify-content: space-between; align-items: center; font-size: 12px; background: #071015ed; border-radius: 10px; padding: 4px 12px; }
.cb-hud-top strong { color: #64f4c5; font-size: 22px; margin-left: 12px; }
.cb-hud-top button { pointer-events: auto; background: #13262d; border: 1px solid #36555d; color: #fff; }
#cb-move-cue { top: max(72px, calc(env(safe-area-inset-top) + 64px)); background: #071015ed; border: 1px solid #36555d; padding: 10px; text-align: center; font-size: 13px; line-height: 1.5; border-radius: 10px; }
.cb-controls { bottom: max(18px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; pointer-events: auto; }
.cb-controls button { background: #081c18f5; color: #79ffd8; border: 1px solid #49d6ae; display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 68px !important; padding: 8px 3px !important; font-size: 12px !important; }
.cb-controls button:active { background: #27674f; }
.cb-controls kbd { font: inherit; color: #b7c6c2; margin-top: 5px; font-size: 11px; }
.cb-practice { position: fixed; z-index: 250000; bottom: max(100px, calc(env(safe-area-inset-bottom) + 88px)); left: 50%; transform: translateX(-50%); width: min(94vw, 460px); background: #071419f5; border: 1px solid #64f4c5; border-radius: 16px; padding: 20px; box-shadow: 0 8px 48px #000b; max-height: calc(var(--cb-viewport-height, 100dvh) - 210px); overflow-y: auto; touch-action: pan-y; }
.cb-practice h2 { font-size: 22px; line-height: 1.25; margin-bottom: 12px; color: #fff; }
.cb-practice p { font-size: 14px; line-height: 1.65; margin-bottom: 16px; }
.cb-practice .cb-text-button { display: block; margin: 6px auto -6px; }
.cb-practice-nav { display: flex; gap: 10px; }
.cb-practice-nav .cb-secondary { width: 32%; margin: 0; }
#cb-first-play .cb-walkthrough { border: 2px solid #00ff41; border-radius: 0; padding: 16px; background: #050e19f7; }
#cb-first-play .cb-walkthrough button { border-radius: 0; }
#cb-first-play .cb-walkthrough h2 { font-size: 19px; margin: 8px 0 12px; }
#cb-first-play .cb-walkthrough p { font-size: 13px; line-height: 1.5; }
#cb-practice-outcome { border-left: 3px solid #ffcc00; padding-left: 10px; color: #ffe28a; }
.cb-market-controls .cb-lesson-target { outline: 3px solid #ffcc00 !important; outline-offset: 3px; box-shadow: 0 0 22px #ffcc0080 !important; }
.cb-result { z-index: 800000 !important; background: linear-gradient(to top, rgba(3, 7, 18, .94) 0%, rgba(3, 7, 18, .55) 38%, rgba(3, 7, 18, .08) 64%) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; justify-content: flex-end !important; align-items: center !important; padding: 0 12px 12px !important; box-sizing: border-box; }
.cb-result-card { width: min(100%, 420px); max-height: 54dvh; overflow-y: auto; padding: 14px 16px 12px; background: rgba(9, 18, 26, .96); border: 1px solid #37534e; border-radius: 16px; text-align: center; margin: 0 auto !important; box-sizing: border-box; animation: cb-sheet-up .32s ease-out both; }
@keyframes cb-sheet-up { from { transform: translateY(36px); opacity: 0; } to { transform: none; opacity: 1; } }
.cb-result-card .cb-eyebrow { margin-bottom: 4px; font-size: 10px; }
.cb-result-card h2 { color: #fff; font-size: clamp(19px, 5vw, 24px); line-height: 1.2; margin: 4px 0 6px; }
.cb-result-card p { font-size: 12.5px; line-height: 1.45; color: #c4d1d4; margin: 4px 0; }
.cb-result-score { padding: 12px 0; display: flex; flex-direction: column; gap: 4px; }
.cb-result-score strong { font-size: 40px; line-height: 1; color: #64f4c5; }
.cb-result-score span { font-size: 12px; }
#cb-save-note { font-size: 11px; margin: 8px 0 2px; }
#cb-progress-strip-result, #cb-result-detail { display: none !important; }
.cb-free-round #bottom-banner-ad, .cb-free-round .controls-overlay, .cb-free-round #tutorial-callout,
.cb-free-round #combat-screen button[onclick*="StarterPack"], .cb-free-round #combat-screen button[onclick="togglePause()"] { display: none !important; }
@media (max-height: 550px) and (orientation: landscape) {
  .cb-practice { width: min(55vw,460px); max-height: calc(100dvh - 105px); bottom: 12px; left: 30%; padding: 14px; }
  .cb-controls { width: 38vw; left: auto; right: 12px; transform: none; grid-template-columns: repeat(2,1fr); }
  .cb-hud-top, #cb-move-cue { width: 38vw; left: auto; right: 12px; transform: none; }
}

/* Rookie run: readable decisions, one continuous five-round journey. */
.cb-rookie-controls #cb-market-hud [data-move^="SUPER"],
.cb-rookie-controls #cb-market-hud [data-move^="PARRY"],
.cb-rookie-controls .cb-parry-panel { display:none !important; }
.cb-rookie-controls .cb-market-controls { grid-template-columns:repeat(2,minmax(0,1fr)); }
.cb-run-map { display:flex; gap:5px; margin:10px 0; align-items:center; }
.cb-run-map span { position:relative; flex:1 1 0; min-width:0; display:grid; place-items:center; border:1px solid #66706b; border-radius:50%; aspect-ratio:1; max-width:38px; font-weight:800; font-size:12px; }
.cb-run-map .cb-chest-node { border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; padding:2px; }
.cb-run-map .cb-map-chest-svg { width:15px; height:15px; display:block; }
.cb-run-map .cb-chest-node small { font-size:8.5px; line-height:1; font-weight:800; opacity:.9; }
.cb-run-map .cb-chest-silver { border-color:#cbd5e1; color:#e2e8f0; background:linear-gradient(145deg, rgba(226,232,240,.22), rgba(148,163,184,.08)); box-shadow:0 0 10px rgba(226,232,240,.35); }
.cb-run-map .cb-chest-gold { border-color:#fbbf24; color:#fde047; background:linear-gradient(145deg, rgba(251,191,36,.26), rgba(217,119,6,.1)); box-shadow:0 0 12px rgba(251,191,36,.45); }
.cb-run-map .complete { background:#d4ef7c; color:#172117; border-color:#d4ef7c; }
.cb-run-map .complete.win { background:#3ddc84; border-color:#3ddc84; }
.cb-run-map .complete.loss { background:#ff5a6e; border-color:#ff5a6e; color:#2a0b10; }
.cb-scorecard { margin:0 0 10px; padding:10px; border:1px solid #3a4540; border-radius:10px; background:rgba(0,0,0,.28); text-align:center; }
.cb-scorecard h3 { margin:0 0 4px; font-size:17px; letter-spacing:.06em; color:#d4ef7c; }
.cb-scorecard p { margin:0 0 8px; font-size:12px; line-height:1.35; }
.cb-scorecard-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.cb-scorecard-grid div { padding:6px; border-radius:8px; background:rgba(255,255,255,.05); }
.cb-scorecard-grid strong { display:block; font-size:17px; }
.cb-scorecard-grid span { font-size:11px; opacity:.75; }
.cb-scorecard-grid .good strong { color:#3ddc84; }
.cb-scorecard-grid .bad strong { color:#ff5a6e; }
.cb-scorecard .cb-scorecard-foot { margin:8px 0 0; font-size:11px; opacity:.7; }
.cb-receipt-details { margin:8px 0; font-size:12px; }
.cb-receipt-details summary { cursor:pointer; min-height:36px; padding:6px 0; color:#94a3b8; }
.cb-result-card #cb-next-round { width:100%; min-height:48px; }
.cb-result-card #cb-result-detail { line-height:1.4; }

.cb-rookie-controls.cb-rookie-power #cb-market-hud [data-move^="SUPER"] { display:flex !important; }
.cb-rookie-controls.cb-rookie-power .cb-market-controls { grid-template-columns:repeat(4,minmax(0,1fr)); }
.cb-rookie-controls #cb-market-hud button:disabled { opacity:.5; }

/* Compact coach card: a see-through card in the open band between the BTC ticker and the fighters' heads, so the price chart,
   the fighters, the ring, the combo line and the controls all stay visible while the tutorial explains. Text and buttons are
   unchanged; only size, position and layout are. Text on the left; the action button and the skip link stacked on the right. */
@media not all and (max-height: 550px) and (orientation: landscape) {
  body #cb-first-play .cb-practice {
    left: 50%; transform: translateX(-50%); width: calc(100% - 16px); max-width: 520px;
    /* bottom edge at 54% of the screen height (the fighters' heads start at about 55-60%); the cap keeps it below the price ticker */
    top: auto; bottom: 46vh; bottom: 46dvh; max-height: calc(54vh - 59vw - 8px); overflow-y: auto; padding: 7px 10px 8px;
    border: 1px solid #00ff41d0; border-radius: 8px; background: rgba(4, 14, 24, .72);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); box-shadow: 0 2px 14px #0009;
    display: grid; grid-template-columns: 1fr 104px; column-gap: 10px; row-gap: 2px; align-items: start;
    grid-template-areas: "prog action" "title action" "copy action" "back skip";
  }
  body #cb-first-play #cb-practice-progress { grid-area: prog; margin: 0; font-size: 9.5px; letter-spacing: .4px; text-align: start; }
  body #cb-first-play #cb-practice-title { grid-area: title; margin: 1px 0 0; font-size: 13.5px; line-height: 1.25; }
  body #cb-first-play #cb-practice-copy { grid-area: copy; margin: 0; font-size: 12px; line-height: 1.4; color: #d3e6ee; }
  body #cb-first-play #cb-practice-outcome { grid-area: copy; margin: 0; font-size: 12px; line-height: 1.4; }
  body #cb-first-play .cb-practice-nav { display: contents; }
  body #cb-first-play #cb-practice-action { grid-area: action; align-self: center; width: 100%; max-width: none; min-height: 44px; margin: 0; padding: 4px 6px; font-size: 11.5px; line-height: 1.2; white-space: normal; }
  body #cb-first-play #cb-practice-back, body #cb-first-play #cb-practice-skip {
    background: none !important; border: 0 !important; box-shadow: none !important; clip-path: none !important; outline: 0;
    min-height: 0 !important; height: auto !important; width: auto !important; margin: 0 !important; padding: 2px 0 !important;
    color: #8ee8dc !important; text-decoration: underline; font-size: 10px !important; line-height: 1.3; display: inline-block; text-align: start;
  }
  body #cb-first-play #cb-practice-back { grid-area: back; justify-self: start; align-self: end; }
  body #cb-first-play #cb-practice-skip { grid-area: skip; justify-self: stretch; align-self: end; text-align: center; }
  body #cb-first-play #cb-practice-back[hidden], body #cb-first-play #cb-practice-skip[hidden], body #cb-first-play #cb-practice-outcome[hidden] { display: none !important; }
}
/* Very short phones: leaner layout (no back link; smaller buttons) so the card never scrolls over the fighters. */
@media (max-height: 700px) and (min-height: 551px) {
  body #cb-first-play .cb-practice { grid-template-columns: 1fr 96px; grid-template-areas: "prog action" "title action" "copy skip"; padding: 6px 8px 6px; }
  body #cb-first-play #cb-practice-title { font-size: 13px; }
  body #cb-first-play #cb-practice-copy { font-size: 11.5px; line-height: 1.35; }
  body #cb-first-play #cb-practice-action { min-height: 36px; padding: 3px 4px; font-size: 11px; }
  body #cb-first-play #cb-practice-back { display: none !important; }
}

.cb-reward { margin:0 0 16px; padding:14px; border:1px solid #d4ef7c; border-radius:12px; background:rgba(212,239,124,.08); text-align:center; }
.cb-reward h3 { margin:0 0 6px; font-size:17px; color:#d4ef7c; }
.cb-reward p { margin:0 0 10px; font-size:13px; line-height:1.4; }
.cb-reward-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cb-reward-grid button { min-height:44px; padding:6px 8px; border:1px solid #3a4540; border-radius:8px; background:rgba(255,255,255,.06); color:inherit; font:inherit; font-weight:700; font-size:13px; cursor:pointer; }
.cb-reward-grid button:hover:not(:disabled), .cb-reward-grid button:focus-visible { border-color:#d4ef7c; background:rgba(212,239,124,.15); }
.cb-reward-grid button:disabled { opacity:.5; cursor:default; }