.cb-progression-overlay { z-index: 2000000; background: rgba(3, 8, 16, .98); }
.cb-progression-card { width: min(100%, 580px); box-sizing: border-box; padding: 20px; border: 1px solid #30504f; border-radius: 16px; background: #0b141d; color: #f1f5f9; font-family: 'Space Mono', monospace; margin: auto; flex: 0 0 auto; }
.cb-progression-card h2 { font-size: clamp(24px, 5vw, 32px); margin: 8px 0; }
.cb-progression-card p { font-size: 14px; line-height: 1.6; }
.cb-sim-map { height: 220px; position: relative; margin: 14px 0; background: #061018; border: 1px solid #284047; border-radius: 10px; }
.cb-sim-map svg { width: 100%; height: 100%; position: absolute; inset: 0; }
.cb-sim-map path { fill: none; stroke: #36686d; stroke-width: 3; }
.cb-sim-node { position: absolute; transform: translate(-50%, -50%); min-width: 44px; min-height: 44px; padding: 3px; border: 1px solid #67cfcd; border-radius: 50%; background: #11262f; color: #b9eeec; font: bold 13px 'Space Mono', monospace; cursor: pointer; }
.cb-sim-node.completed { color: #b8f66b; border-color: #b8f66b; }
.cb-sim-node.next { background: #b8f66b; color: #0b141d; border-color: #e1ffbe; box-shadow: 0 0 0 4px #b8f66b22; }
#cb-sim-map .cb-sim-node { width: 44px; height: 44px !important; padding: 2px !important; font-size: 12px !important; }
.cb-progression-actions { display: flex; gap: 10px; margin-top: 12px; }
.cb-progression-actions button { flex: 1; font-size: 13px; min-height: 48px; }
.cb-progression-card button, .cb-live-run-result button { cursor: pointer; border-radius: 10px; }
.cb-progression-note { color: #b2c2cb; font-size: 12px !important; line-height: 1.6; }
.cb-live-run-result { width: min(100%, 520px); box-sizing: border-box; padding: 16px; border: 1px solid #4a6952; background: #0c1d20; border-radius: 12px; font-family: 'Space Mono', monospace; color: #f1f5f9; flex: 0 0 auto; }
#end-screen.viewport-overlay { justify-content: flex-start !important; }
#end-screen.viewport-overlay .paper-receipt { margin-top: 0; }
#end-screen.cb-has-live-run > button[onclick="restartMatch()"], #end-screen.cb-has-live-run > button[onclick="returnToMenu()"], #end-screen.cb-has-live-run > #challenge-friend-btn { display: none !important; }
.cb-live-run-result[hidden], #cb-live-run-hud[hidden] { display: none; }
.cb-live-run-result h2 { font-size: 24px; margin: 8px 0; }
.cb-live-run-result p { font-size: 13px; line-height: 1.6; }
.cb-run-actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 10px; }
.cb-run-actions-row button { min-height: 48px; padding: 8px 10px; font-size: 12px; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.3; margin: 0 !important; }
.cb-run-restart-btn { border-color: #00ff41 !important; color: #00ff41 !important; background: rgba(0, 255, 65, 0.08) !important; }
.cb-compact-challenge-btn { opacity: 0.9; letter-spacing: 0.5px; }
.cb-live-run-result .cb-primary { font-size: 14px; margin-top: 0; }
.cb-live-run-result button:disabled { opacity: .65; cursor: default; }
#cb-live-run-hud { position: fixed; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 100002; width: min(calc(100% - 24px), 520px); box-sizing: border-box; padding: 8px 12px; background: rgba(7, 23, 28, .96); border: 1px solid #3b7169; border-radius: 9px; color: #e0f7e6; font: 12px/1.5 'Space Mono', monospace; pointer-events: none; }
#cb-live-run-hud span { display: block; }
.cb-live-run-achievements { border: 1px solid #6ec5a6; background: #0a2020; padding: 12px; margin: 12px 0; color: #dcf7ed; }
.cb-live-run-achievements h3 { font-size: 14px; margin: 0 0 8px; }
.cb-live-run-achievements p, .cb-live-run-achievements small { font-size: 12px; line-height: 1.6; }
#tutorial-modal .tutorial-slide { font-size: 16px; line-height: 1.7; }
#tutorial-modal .tutorial-slide h3 { font-size: 21px; color: #b8f66b; margin: 4px 0 12px; }
#tutorial-modal .tutorial-slide p { margin: 0 0 12px; }
@media (max-height: 700px) { .cb-sim-map { height: 175px; } .cb-progression-card { padding: 14px; } .cb-progression-card p { margin: 6px 0; } }

/* Compact paper receipt shared by every round result. */
#end-screen.viewport-overlay .cb-round-receipt,
.cb-progression-card .cb-round-receipt,
.cb-result-card .cb-round-receipt {
    width: 100%; max-width: 420px; padding: 14px 16px; margin: 12px auto 18px;
    color: #1a1a1a; box-shadow: 0 6px 18px #0004; text-align: left;
}
.cb-round-receipt .receipt-header { font-size: 12px; letter-spacing: 1px; margin: 0 0 5px; }
.cb-round-receipt .receipt-context { font-size: 10px; color: #555; text-align: center; }
.cb-round-receipt .receipt-outcome { font-size: 14px; font-weight: bold; text-align: center; margin: 8px 0; color: #222 !important; }
.cb-round-receipt .receipt-summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px dashed #888; font-size: 11px; }
.cb-round-receipt .receipt-net { font-size: 24px; letter-spacing: -1px; }
.cb-round-receipt .receipt-stamp { position: static; display: block; width: fit-content; margin: 0 0 3px auto; transform: rotate(-4deg); border-width: 2px; font-size: 9px; padding: 2px 6px; letter-spacing: 1px; }
.cb-round-receipt .receipt-details { border-top: 1px dashed #888; margin-top: 8px; }
.cb-round-receipt .receipt-details summary { min-height: 44px; padding: 12px 0; font: bold 12px/20px 'Space Mono', monospace; cursor: pointer; touch-action: manipulation; }
.cb-round-receipt .receipt-details summary:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
#end-screen.viewport-overlay .bank-statement, .cb-round-receipt .bank-statement { min-height: 0; max-height: 160px; margin: 0; font-size: 11px; line-height: 1.5; touch-action: pan-y; }
.receipt-trade { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dotted #bbb; }
.receipt-trade strong { white-space: nowrap; }
#cb-simulation-result.viewport-overlay { padding: 16px 12px !important; }
.cb-progression-card { max-width: 420px; padding: 14px; border-radius: 10px; }
.cb-progression-card h2 { font-size: 20px; margin: 4px 0; }
.cb-progression-card .cb-eyebrow { margin-bottom: 4px; }
.cb-progression-card p { margin: 4px 0; }
.cb-progression-card #cb-sim-map { height: 145px; margin: 8px 0; }
.cb-progression-card #cb-sim-detail, .cb-progression-card #cb-sim-entry, .cb-progression-card #cb-sim-score { font-size: 11px !important; line-height: 1.4 !important; }
.cb-progression-card #cb-sim-detail { margin-bottom: 8px; }
.cb-progression-card #cb-sim-next { margin: 0; font-size: 14px !important; }
.cb-progression-card .cb-progression-actions { gap: 6px; margin-top: 8px; }
.cb-progression-card .cb-progression-actions button { margin: 0; padding: 8px !important; font-size: 12px !important; }
#cb-sim-reward:empty, #cb-run-reward:empty { display: none; }
#end-screen.viewport-overlay { gap: 8px; }
#end-screen.viewport-overlay > .end-btn, #end-screen.viewport-overlay > .cb-live-run-result { width: min(100%, 420px) !important; max-width: 420px; }
.cb-live-run-result { padding: 12px; }
.cb-live-run-result h2 { font-size: 19px; }
.cb-live-run-result #cb-run-detail, .cb-live-run-result #cb-run-risk, .cb-live-run-result #cb-run-milestone { font-size: 11px !important; line-height: 1.4 !important; margin: 6px 0; }
#cb-result .cb-result-card { width: min(100%, 420px); padding: 16px; border-radius: 10px; }
#cb-result .cb-result-card h2 { font-size: 20px; margin: 6px 0; }
#cb-result #cb-result-detail { display: none; }
.cb-progression-card .receipt-outcome, .cb-progression-card .receipt-stamp,
.cb-result-card .receipt-outcome, .cb-result-card .receipt-stamp { display: none; }
#cb-sim-score { display: none; }
@media (max-height: 700px) {
    .cb-progression-card #cb-sim-map { height: 128px; }
    .cb-progression-card .cb-round-receipt { padding: 10px 12px; margin: 10px auto 14px; }
}
#cb-result .cb-round-receipt .receipt-header { color: #111; font-size: 12px; letter-spacing: 1px; margin: 0 0 5px; }

/* Quick result: stay on the fight screen; the panel slides up over the fighters. Details open the receipt. */
#end-screen.cb-quick-mode.viewport-overlay, #cb-simulation-result.viewport-overlay:not(.cb-show-details) {
    background: linear-gradient(to top, rgba(3, 7, 18, .94) 0%, rgba(3, 7, 18, .55) 34%, rgba(3, 7, 18, 0) 58%) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important; justify-content: flex-end !important;
}
#end-screen.cb-quick-mode:not(.cb-show-details) > :not(#cb-quick) { display: none !important; }
#end-screen.cb-quick-mode.cb-show-details, #cb-simulation-result.cb-show-details { background: rgba(3, 7, 18, .96) !important; justify-content: flex-start !important; overflow-y: auto; }
.cb-quick { width: min(100%, 420px); box-sizing: border-box; padding: 16px 16px 12px; border: 1px solid #2f5a55; border-radius: 16px; background: rgba(9, 18, 26, .96);
    color: #f1f5f9; font-family: 'Space Mono', monospace; text-align: center; flex: 0 0 auto; margin: 0 !important; animation: cb-quick-up .35s ease-out both; }
.cb-quick-title { margin: 0; font-size: 22px; font-weight: bold; letter-spacing: 1px; }
.cb-quick-net { margin: 2px 0 12px; font-size: 30px; font-weight: bold; letter-spacing: -1px; }
.cb-quick-primary { display: block; width: 100%; min-height: 56px; border: 0; border-radius: 12px; background: #b8f66b; color: #0b141d; font: bold 17px 'Space Mono', monospace; letter-spacing: .5px; cursor: pointer; box-shadow: 0 0 0 4px #b8f66b22; }
.cb-quick-primary:active { transform: scale(.98); }
.cb-quick-pro-pack {
    display: block; width: 100%; min-height: 42px; margin-top: 8px; border: 1px solid #ffcc00 !important;
    border-radius: 10px; background: rgba(251, 191, 36, .14) !important; color: #fde047 !important;
    font: bold 12px 'Space Mono', monospace !important; cursor: pointer;
}
.cb-quick-pro-pack:hover { background: rgba(251, 191, 36, .24) !important; }
.cb-quick-pro-pack[hidden] { display: none !important; }
.cb-quick-friend, #cb-first-play .cb-call-friend-btn {
    display: block; width: 100%; min-height: 44px; margin-top: 8px; border: 1px solid #00f0ff !important;
    border-radius: 10px; background: rgba(0, 240, 255, .12) !important; color: #00f0ff !important;
    font: bold 13px 'Space Mono', monospace !important; cursor: pointer;
}
.cb-quick-friend:hover, #cb-first-play .cb-call-friend-btn:hover { background: rgba(0, 240, 255, .22) !important; }
.cb-quick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.cb-quick-row button, .cb-quick #guest-save-score { min-height: 44px; border: 1px solid #3a5560; border-radius: 10px; background: transparent; color: #cbd5e1; font: bold 12px 'Space Mono', monospace; cursor: pointer; }
.cb-quick #guest-save-score { width: 100% !important; margin-top: 8px !important; border-color: #00f0ff; color: #00f0ff; }
#end-screen.cb-show-details .cb-quick { animation: none; }
@keyframes cb-quick-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
#cb-simulation-result .cb-progression-card { margin: auto auto 0; animation: cb-quick-up .35s ease-out both; background: rgba(11, 20, 29, .96); }
#cb-simulation-result.cb-show-details .cb-progression-card { margin: 0 auto auto; animation: none; }
#cb-simulation-result:not(.cb-show-details) #cb-sim-receipt, #cb-simulation-result:not(.cb-show-details) #cb-sim-entry { display: none; }
#cb-simulation-result .cb-quick-net { margin: 0 0 6px; font-size: 26px; text-align: center; }
#cb-simulation-result #cb-sim-title { text-align: center; }
@media (prefers-reduced-motion: reduce) { .cb-quick, #cb-simulation-result .cb-progression-card { animation: none; } }
/* the game's button skin flattens buttons: give Play again its own bright look */
#end-screen #cb-quick #cb-quick-again, #cb-simulation-result #cb-sim-next, #pause-screen #cb-pause #cb-pause-resume { color: #b8f66b !important; border-color: #b8f66b !important; background: rgba(184, 246, 107, .14) !important; text-shadow: 0 0 8px #b8f66b88; font-size: 16px !important; min-height: 56px; }
/* the button skin sets its own positioning: map nodes must stay pinned to their spot on the map */
#cb-sim-map .cb-sim-node { position: absolute !important; margin: 0 !important; }
/* compact Sim result so the fighters stay in view */
#cb-simulation-result:not(.cb-show-details) .cb-progression-card #cb-sim-map { height: 104px; margin: 6px 0; }
#cb-simulation-result:not(.cb-show-details) #cb-sim-map .cb-sim-node { width: 34px; height: 34px !important; min-width: 34px; min-height: 34px; font-size: 11px !important; }
#cb-simulation-result:not(.cb-show-details) .cb-progression-card h2 { font-size: 18px; margin: 2px 0; }
#cb-simulation-result:not(.cb-show-details) .cb-progression-card { padding: 12px; }

/* Pause: the same slide-up panel as the result, over the frozen fight (not a full screen that looks like leaving the round). */
#pause-screen.cb-pause-mode.viewport-overlay {
    background: linear-gradient(to top, rgba(3, 7, 18, .94) 0%, rgba(3, 7, 18, .55) 34%, rgba(3, 7, 18, .12) 58%) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important; justify-content: flex-end !important; gap: 0 !important;
}
#pause-screen.cb-pause-mode > :not(#cb-pause) { display: none !important; }
.cb-pause-title { color: #ffcc00; }
.cb-pause-note { margin: 4px 0 12px; font-size: 12px; line-height: 1.45; color: #aebdcc; }
/* Play again: a small "GET READY" over the arena while the next round opens (no loading screen). */
.cb-get-ready { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.9); z-index: 60; padding: 12px 22px; border-radius: 999px;
    background: rgba(9, 18, 26, .9); border: 1px solid #b8f66b; color: #b8f66b; font: bold 20px 'Space Mono', monospace; letter-spacing: 2px;
    opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
.cb-get-ready.on { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: cb-ready-pulse 1s ease-in-out infinite; }
@keyframes cb-ready-pulse { 50% { box-shadow: 0 0 22px #b8f66b55; } }
@media (prefers-reduced-motion: reduce) { .cb-get-ready.on { animation: none; } }
#cb-pause #cb3d-help { margin: 0 0 12px; padding: 7px 28px 7px 12px; max-height: calc(1.7em + 14px); box-sizing: border-box; overflow: hidden; cursor: pointer; font-size: 12px; line-height: 1.7; position: relative; }
#cb-pause #cb3d-help::after { content: "▾"; position: absolute; right: 10px; top: 7px; color: #00f0ff; }
#cb-pause #cb3d-help.cb-open { max-height: none; }
#cb-pause #cb3d-help.cb-open::after { content: '▴'; }

/* Welcome sheet (all entry pages, new visitor): the same slide-up panel as pause and result, over the game behind it. */
#start-overlay.cb-welcome-sheet.viewport-overlay {
    background: linear-gradient(to top, rgba(3, 7, 18, .94) 0%, rgba(3, 7, 18, .55) 38%, rgba(3, 7, 18, .1) 62%) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important; justify-content: flex-end !important; align-items: center !important; padding-bottom: 12px !important; box-sizing: border-box;
}
#start-overlay.cb-welcome-sheet .cb-welcome { position: relative; margin: 0 !important; width: min(100%, 430px) !important; max-height: 86vh !important; overflow-y: auto !important; padding: 16px 16px 14px !important; }
.cb-welcome-title { color: #b8f66b; font-size: 18px !important; line-height: 1.3 !important; margin-bottom: 4px !important; }
.cb-welcome-top { display: flex; justify-content: space-between; align-items: center; margin: -2px 0 8px; gap: 8px; }
.cb-welcome-badge { font: bold 10px/1 'Space Mono', monospace; color: #00f0ff; background: rgba(0, 240, 255, .1); border: 1px solid rgba(0, 240, 255, .35); border-radius: 999px; padding: 5px 10px; letter-spacing: .6px; }
#start-overlay #cb-welcome .cb-welcome-lang { min-height: 32px !important; height: 32px !important; padding: 0 10px !important; border: 1px solid #3a5560; border-radius: 10px; background: transparent; clip-path: none; font: bold 12px 'Space Mono', monospace !important; color: #cbd5e1 !important; cursor: pointer; }
#start-overlay #cb-welcome .cb-quick-primary { color: #10190a !important; border: 1px solid #ceff92 !important; background: #b8f66b !important; text-shadow: none; font: 700 16px 'Space Mono', monospace !important; min-height: 54px; border-radius: 10px; box-shadow: 0 4px 20px rgba(184, 246, 107, .25); }
#start-overlay #cb-welcome .cb-quick-primary:hover { background: #ceff92 !important; }
#start-overlay #cb-welcome .cb-quick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
#start-overlay #cb-welcome .cb-quick-row button { color: #e2e8f0 !important; font-size: 12px !important; min-height: 42px !important; border-radius: 8px; border: 1px solid #334155 !important; background: rgba(15, 23, 42, .75) !important; }
#start-overlay #cb-welcome .cb-quick-row button:hover { border-color: #64748b !important; background: rgba(30, 41, 59, .9) !important; }
.cb-welcome-consent { display: flex; align-items: flex-start; gap: 8px; margin: 12px 2px 2px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); text-align: left; font: 11px/1.45 'Space Mono', monospace; color: #94a3b8; cursor: pointer; }
.cb-welcome-consent input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; min-width: 16px; margin: 1px 0 0; accent-color: #b8f66b; cursor: pointer; }
.cb-welcome-consent a, .cb-welcome-consent .cb-welcome-howto { color: #00d2ff; text-decoration: underline; background: none; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer; min-height: 0 !important; height: auto !important; display: inline; clip-path: none; }
@keyframes cbConsentShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.cb-welcome-consent.cb-consent-shake { border-color: #ffcc00; background: rgba(255, 204, 0, .12); color: #fef08a; animation: cbConsentShake .35s ease; }
.cb-welcome .welcome-reassurance { margin: 10px 0 6px; font-size: 11px; line-height: 1.5; color: #a9b8c9; }
.cb-welcome-notice { margin-top: 4px; text-align: left; }
.cb-welcome-notice summary { cursor: pointer; text-align: center; font-size: 11px; color: #ffcc00; }
.cb-welcome-notice .welcome-regulatory-block { margin-top: 8px !important; }
.cb-run-checkpoint { margin: 6px 0 10px; padding: 8px 10px; border-radius: 10px; background: rgba(0, 240, 255, .07); border: 1px solid rgba(0, 240, 255, .28); text-align: left; }
.cb-run-cp-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; margin-bottom: 5px; }
.cb-run-cp-bar span { display: block; height: 100%; width: 10%; border-radius: 999px; background: linear-gradient(90deg, #00f0ff, #b8f66b); transition: width .35s ease; }
.cb-run-checkpoint small { display: block; font: bold 11px/1.35 'Space Mono', monospace; color: #b8f66b; }
.cb-run-boss-switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 8px 0 4px; }
.cb-run-boss-switch[hidden], .cb-run-checkpoint[hidden] { display: none !important; }
.cb-boss-switch-label { width: 100%; font: bold 10px/1.2 'Space Mono', monospace; color: #94a3b8; letter-spacing: .5px; text-align: center; }
.cb-boss-pill { min-height: 32px !important; padding: 4px 10px !important; border: 1px solid #00f0ff !important; border-radius: 999px !important; background: rgba(0, 240, 255, .1) !important; color: #00f0ff !important; font: bold 11px 'Space Mono', monospace !important; cursor: pointer; }
.cb-boss-pill:hover { background: rgba(0, 240, 255, .22) !important; }
.cb-boss-pill.cb-boss-pill-locked { border-color: #ffcc00 !important; background: rgba(255, 204, 0, .1) !important; color: #ffcc00 !important; }
.cb-boss-pill.cb-boss-pill-locked:hover { background: rgba(255, 204, 0, .22) !important; }

/* Ensure in-game alerts and confirm dialogs slide up from the bottom without hiding the characters. */
#game-dialog-overlay.viewport-overlay {
    background: linear-gradient(to top, rgba(3, 7, 18, .92) 0%, rgba(3, 7, 18, .48) 38%, rgba(3, 7, 18, 0) 64%) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    justify-content: flex-end !important; align-items: center !important; padding: 0 12px 14px !important; box-sizing: border-box;
}
#game-dialog-overlay .modal-content {
    margin: 0 auto !important; width: min(100%, 420px) !important; max-height: 48dvh !important; overflow-y: auto !important;
    padding: 14px 16px !important; border-radius: 14px !important; animation: cb-quick-up .28s ease-out both;
}
#game-dialog-overlay .modal-body { font-size: 13.5px !important; margin-bottom: 12px !important; line-height: 1.4 !important; }

/* Call a Friend / Duel modal and Starter Pack modal slide up at the bottom without hiding the characters. */
#duel-challenge-modal.viewport-overlay, #starter-pack-modal.viewport-overlay {
    background: linear-gradient(to top, rgba(3, 7, 18, .94) 0%, rgba(3, 7, 18, .52) 40%, rgba(3, 7, 18, .08) 66%) !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;
}
#duel-challenge-modal .modal-content, #starter-pack-modal .modal-content {
    margin: 0 auto !important; width: min(100%, 420px) !important; max-height: 58dvh !important; overflow-y: auto !important;
    padding: 14px 16px !important; border-radius: 16px !important; animation: cb-quick-up .28s ease-out both;
}