/* 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: #030b12ed !important; }
.cb-result-card { width: min(100%, 440px); padding: 26px; background: #0b1c22; border: 1px solid #37534e; border-radius: 20px; text-align: center; margin: auto; }
.cb-result-card h2 { color: #fff; font-size: clamp(25px,6vw,34px); line-height: 1.2; margin: 12px 0; }
.cb-result-card p { font-size: 14px; line-height: 1.6; color: #c4d1d4; }
.cb-result-score { padding: 24px 0; display: flex; flex-direction: column; gap: 6px; }
.cb-result-score strong { font-size: 56px; line-height: 1; color: #64f4c5; }
.cb-result-score span { font-size: 13px; }
#cb-save-note { font-size: 12px; margin: 14px 0 4px; }
.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:10px; margin:20px 0; }
.cb-run-map span { flex:1; display:grid; place-items:center; border:1px solid #66706b; border-radius:50%; aspect-ratio:1; max-width:44px; font-weight:800; }
.cb-run-map .complete { background:#d4ef7c; color:#172117; border-color:#d4ef7c; }
.cb-receipt-details { margin:16px 0; font-size:13px; }
.cb-receipt-details summary { cursor:pointer; min-height:44px; padding:12px 0; }
.cb-result-card #cb-next-round { width:100%; min-height:54px; }
.cb-result-card #cb-result-detail { line-height:1.6; }

.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; }