/* Scoped to quizzes and their rewards, not module identities or answer logic.
   Paired ink/text-fill overrides are intentional: legacy styles set both. */
/* The same bounded player is used for every course, including private lessons. */
html #view-learning:has(.learning-game-shell) {
    position:fixed!important; inset:0!important; height:100dvh!important;
    display:flex!important; flex-direction:column; overflow:hidden!important;
    padding:0!important; box-sizing:border-box; background:var(--quiz-bg)!important;
}
html #view-learning:has(.learning-game-shell) > div:first-child {
    flex:none; padding-top:max(44px,env(safe-area-inset-top,0px))!important;
}
html #view-learning:has(.learning-game-shell) #learning-content {
    flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
    padding-bottom:calc(var(--nav-height,80px) + max(24px,env(safe-area-inset-bottom,0px)))!important;
}
html #learning-content .learning-game-shell {min-height:0!important;}
html #learning-content .learning-game-stage {flex:none!important; box-sizing:border-box;}
html #learning-content .learning-game-stage > div {box-sizing:border-box;}
@media(prefers-reduced-motion:reduce) {
    html #learning-content .balance-quiz :is(.scenario-option,.match-item,.tap-all-option,.fill-blank-option,.order-item,.card-enter,.story-slide,.story-photo,.story-text) {
        opacity:1!important; transform:none!important;
    }
}
:root {
    --quiz-bg:#fbf7ee; --quiz-card:#fffdf7; --quiz-ink:#25251f;
    --quiz-muted:#686052; --quiz-gold:#80601f; --quiz-line:#d8c9aa;
    --quiz-selected:#f4e4b9; --quiz-button:#e3c16f; --quiz-button-ink:#292313;
    --quiz-correct:#e9f0df; --quiz-correct-ink:#365324;
    --quiz-incorrect:#f9e7dd; --quiz-incorrect-ink:#87391f;
}
html:not([data-pbb-theme="light"]) {
    --quiz-bg:#191b18; --quiz-card:#252820; --quiz-ink:#fffaf0;
    --quiz-muted:#c6bfae; --quiz-gold:#e3c16f; --quiz-line:#6d634c;
    --quiz-selected:#403720; --quiz-correct:#273c26; --quiz-correct-ink:#c7e4b0;
    --quiz-incorrect:#432c24; --quiz-incorrect-ink:#ffd3be;
}
html #view-learning:has(.balance-quiz) > div:first-child {
    padding-top:max(44px,env(safe-area-inset-top,0px))!important;
    background:var(--quiz-bg)!important; border-color:var(--quiz-line)!important;
}
html #view-learning:has(.balance-quiz) > div:first-child h2 {
    color:var(--quiz-ink)!important; -webkit-text-fill-color:var(--quiz-ink)!important;
}
html #learning-content .balance-quiz.balance-quiz.balance-quiz,
#game-feedback-overlay.balance-quiz-feedback,
#health-iq-celebration .health-iq-celebration-card {
    background:var(--quiz-bg)!important; color:var(--quiz-ink)!important;
    -webkit-text-fill-color:var(--quiz-ink)!important; box-sizing:border-box;
}
html #learning-content .balance-quiz.balance-quiz.balance-quiz :is(div,p,span,strong,h1,h2,h3,button),
#game-feedback-overlay.balance-quiz-feedback :is(div,p,span,button),
#health-iq-celebration :is(div,span,button) {
    color:var(--quiz-ink)!important; -webkit-text-fill-color:var(--quiz-ink)!important; text-shadow:none!important;
}
html #learning-content .balance-quiz.balance-quiz.balance-quiz :is(.learning-game-progress-header,.learning-game-question-card,.learning-game-scenario-card,.fill-blank-option,.tap-all-option,.match-item,.order-item,.scenario-option,.balance-quiz-summary) {
    background:var(--quiz-card)!important; border-color:var(--quiz-line)!important;
    box-shadow:0 5px 20px #0000000a!important;
}
html #learning-content .balance-quiz.balance-quiz.balance-quiz :is(.learning-game-count-pill,.learning-game-progress-track,.order-number,.tap-checkbox) {
    background:var(--quiz-selected)!important; border-color:var(--quiz-line)!important;
}
html #learning-content .balance-quiz.balance-quiz.balance-quiz :is(.learning-game-progress-track > div,[style*="color: #80601f"],#blank-slot) {
    color:var(--quiz-gold)!important; -webkit-text-fill-color:var(--quiz-gold)!important;
    border-color:var(--quiz-gold)!important;
}
html #learning-content .balance-quiz.balance-quiz.balance-quiz .learning-game-progress-track > div {
    background:var(--quiz-button)!important;
}
html #learning-content .balance-quiz.balance-quiz.balance-quiz :is(.learning-game-helper,.learning-game-count-pill) {
    color:var(--quiz-muted)!important; -webkit-text-fill-color:var(--quiz-muted)!important;
}
html #learning-content .balance-quiz.balance-quiz.balance-quiz :is(.learning-answer-selected,.selected):not(.learning-answer-correct):not(.learning-answer-incorrect) {
    background:var(--quiz-selected)!important; border-color:var(--quiz-gold)!important;
}
html #learning-content .balance-quiz.balance-quiz.balance-quiz .learning-answer-selected .tap-checkbox {
    background:var(--quiz-button)!important; color:var(--quiz-button-ink)!important;
    -webkit-text-fill-color:var(--quiz-button-ink)!important;
}
html #learning-content .balance-quiz.balance-quiz.balance-quiz .learning-answer-correct,
html #learning-content .balance-quiz.balance-quiz.balance-quiz .learning-answer-correct * {
    background:var(--quiz-correct)!important; color:var(--quiz-correct-ink)!important;
    -webkit-text-fill-color:var(--quiz-correct-ink)!important; border-color:var(--quiz-correct-ink)!important;
}
html #learning-content .balance-quiz.balance-quiz.balance-quiz .learning-answer-incorrect,
html #learning-content .balance-quiz.balance-quiz.balance-quiz .learning-answer-incorrect * {
    background:var(--quiz-incorrect)!important; color:var(--quiz-incorrect-ink)!important;
    -webkit-text-fill-color:var(--quiz-incorrect-ink)!important; border-color:var(--quiz-incorrect-ink)!important;
}
html #learning-content .balance-quiz.balance-quiz.balance-quiz button[onclick^="window.check"],
html #learning-content .balance-quiz.balance-quiz.balance-quiz.balance-quiz-result button,
#game-feedback-overlay.balance-quiz-feedback > button,
#health-iq-celebration .health-iq-celebration-btn {
    background:linear-gradient(110deg,#edd395,var(--quiz-button))!important;
    color:var(--quiz-button-ink)!important; -webkit-text-fill-color:var(--quiz-button-ink)!important;
    border:1px solid #b08b3c!important; border-radius:16px!important; min-height:48px;
}
html #learning-content .balance-quiz button:focus-visible,
#game-feedback-overlay button:focus-visible,#health-iq-celebration button:focus-visible {
    outline:3px solid var(--quiz-gold)!important; outline-offset:3px;
}
html #learning-content .balance-quiz button:disabled { opacity:.55; cursor:default; }
html #learning-content .balance-quiz.balance-quiz-result {
    min-height:100%!important; padding:28px 20px max(100px,calc(80px + env(safe-area-inset-bottom,0px)))!important;
}
html #learning-content .balance-quiz.balance-quiz-result > h1 {
    font-family:'Playfair Display',Georgia,serif; font-weight:600!important;
}
html #learning-content .balance-quiz.balance-quiz-result > div:first-child {
    background:var(--quiz-selected)!important; border:1px solid var(--quiz-line); box-shadow:none!important;
}
html #learning-content .balance-quiz.balance-quiz-result .balance-quiz-summary { padding:24px!important; max-width:350px!important; border:1px solid var(--quiz-line); }
html #learning-content .balance-quiz.balance-quiz-result [style*="border-top"] {border-color:var(--quiz-line)!important}
html #learning-content .balance-quiz.balance-quiz-result [style*="height: 6px"],
html #learning-content .balance-quiz.balance-quiz-result [style*="height:6px"] {background:var(--quiz-line)!important}
html #learning-content .balance-quiz.balance-quiz-result [style*="height: 100%"],
html #learning-content .balance-quiz.balance-quiz-result [style*="height:100%"] {background:var(--quiz-button)!important}
html #learning-content .balance-quiz.balance-quiz-result .health-iq-levelup-banner {
    background:var(--quiz-selected)!important; border:1px solid var(--quiz-line); box-shadow:none;
}
html #learning-content .balance-quiz.balance-quiz-result .health-iq-levelup-glow {display:none}
#game-feedback-overlay.balance-quiz-feedback {
    border:1px solid var(--quiz-line); border-bottom:0;
    max-height:calc(100dvh - max(44px,env(safe-area-inset-top,0px)) - 12px)!important;
    padding-bottom:max(28px,env(safe-area-inset-bottom,0px))!important;
}
#game-feedback-overlay.balance-quiz-feedback > div {background:var(--quiz-selected)!important;border-radius:16px;padding:14px}
#game-feedback-overlay.balance-quiz-feedback[data-result="incorrect"] > div {background:var(--quiz-incorrect)!important}
#game-feedback-overlay.balance-quiz-feedback svg {fill:var(--quiz-gold)!important}
#health-iq-celebration {
    padding:max(44px,env(safe-area-inset-top,0px)) 16px max(24px,env(safe-area-inset-bottom,0px));
    box-sizing:border-box; overflow:hidden;
}
#health-iq-celebration .health-iq-celebration-card {
    max-height:100%; overflow-y:auto; overscroll-behavior:contain;
    width:100%; max-width:360px; padding:28px 24px; border:1px solid var(--quiz-line);
    box-shadow:0 18px 65px #00000030;
}
#health-iq-celebration :is(.health-iq-celebration-badge,.health-iq-celebration-xp) {background:var(--quiz-selected);box-shadow:none;animation:none}
#health-iq-celebration .health-iq-ring {border-color:var(--quiz-line);animation-iteration-count:2}
#health-iq-celebration .hiq-old {opacity:1;color:var(--quiz-muted)!important;-webkit-text-fill-color:var(--quiz-muted)!important}
#health-iq-celebration .health-iq-celebration-rank-transition {flex-wrap:wrap}
/* Reading, key insight and start-quiz use the same palette as the questions. */
html #learning-content .balance-quiz.story-container {--module-color:var(--quiz-gold)!important}
html #learning-content .balance-quiz.balance-quiz.balance-quiz :is(.story-visual,.story-key-insight,.story-skip-btn) {
    background:var(--quiz-card)!important; border-color:var(--quiz-line)!important;
}
html #learning-content .balance-quiz.balance-quiz.balance-quiz :is(.story-text strong,.story-key-insight-label) {
    color:var(--quiz-gold)!important;-webkit-text-fill-color:var(--quiz-gold)!important;
}
html #learning-content .balance-quiz.balance-quiz.balance-quiz .story-image-caption {
    background:#fffdf7!important;color:#25251f!important;-webkit-text-fill-color:#25251f!important;
}
html #learning-content .balance-quiz.balance-quiz.balance-quiz :is(.story-next-btn,button[onclick="window.startLessonGames()"]) {
    background:linear-gradient(110deg,#edd395,var(--quiz-button))!important;
    color:var(--quiz-button-ink)!important;-webkit-text-fill-color:var(--quiz-button-ink)!important;
}
html #learning-content .balance-quiz.balance-quiz.balance-quiz :is(.story-next-btn,button[onclick="window.startLessonGames()"]) :is(span,svg) {
    color:var(--quiz-button-ink)!important;-webkit-text-fill-color:var(--quiz-button-ink)!important;fill:var(--quiz-button-ink)!important;
}
html #learning-content .balance-quiz .story-controls {padding-bottom:max(30px,env(safe-area-inset-bottom,0px))}
@media(prefers-reduced-motion:reduce) {
    .balance-quiz *,#game-feedback-overlay *,#health-iq-celebration * {animation:none!important;transition:none!important}
    #health-iq-celebration .health-iq-celebration-particles {display:none}
}
/* Compact, independently scrollable reading pages. Quiz gameplay is unchanged. */
html #view-learning:has(.story-paged):not([style*="display: none"]):not([style*="display:none"]) {
    position:fixed!important; inset:0!important; height:100dvh!important; max-height:100dvh!important;
    /* Reserve the fixed app menu as well as the home-indicator area, even when WebViews report zero insets. */
    padding:0 0 calc(var(--nav-height,80px) + max(24px,env(safe-area-inset-bottom,0px)))!important;
    box-sizing:border-box; overflow:hidden!important; display:flex!important; flex-direction:column; z-index:120;
}
html #view-learning:has(.story-paged) > div:first-child {
    flex:none; padding: max(42px,env(safe-area-inset-top,0px)) 20px 10px!important;
}
html #view-learning:has(.story-paged) > #learning-content {flex:1; min-height:0; overflow:hidden;}
html #learning-content .story-paged {height:100%; min-height:0; overflow:hidden;}
html #learning-content .story-paged > div:first-child {padding:8px 16px!important; flex:none;}
html #learning-content .story-paged h1 {font-size:clamp(1.05rem,3.8vw,1.4rem)!important; line-height:1.25;}
html #learning-content .story-paged .story-progress-dots {padding:4px 20px 10px; gap:12px; align-items:center; flex:none;}
html #learning-content .story-page-count {font-size:.78rem; white-space:nowrap; color:var(--quiz-muted)!important;}
html #learning-content .story-progress-dots progress {height:6px; max-width:160px; flex:1; accent-color:var(--quiz-gold);}
html #learning-content .story-paged #story-content-area {flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;}
html #learning-content .story-paged #story-content-area[hidden] {display:none;}
html #learning-content .story-paged .story-slide {min-height:0; padding:10px 20px 18px; gap:14px; max-width:640px; margin:auto;}
html #learning-content .story-paged .story-text {font-size:1.05rem; line-height:1.6; text-align:left; max-width:560px; white-space:pre-line; animation:none; opacity:1; overflow-wrap:anywhere;}
html #learning-content .story-paged .story-photo {margin:0; width:100%; max-width:480px; border:1px solid var(--quiz-line); border-radius:14px; overflow:hidden; background:var(--quiz-card);}
html #learning-content .story-paged .story-photo img {display:block; width:100%; height:170px; background:#10120f;}
html #learning-content .story-paged .story-image-caption {position:static; padding:5px 8px; text-align:center; font-size:.7rem; line-height:1.3;}
html #learning-content .story-paged .story-photo-credit {padding:4px 8px; text-align:center; font-size:.65rem; line-height:1.3; color:var(--quiz-muted);}
html #learning-content .story-paged .story-photo-credit a {color:var(--quiz-muted); -webkit-text-fill-color:var(--quiz-muted); text-decoration:underline;}
html #learning-content .story-paged .story-controls {margin-top:auto; flex:none; padding:10px 16px max(24px,env(safe-area-inset-bottom,0px)); gap:8px; border-top:1px solid var(--quiz-line); background:var(--quiz-bg);}
html #learning-content .story-paged .story-controls button {padding:12px 8px; min-height:44px; font-size:.88rem; box-shadow:none;}
html #learning-content .story-paged .story-controls button:disabled {opacity:.45; cursor:default;}
html #learning-content .story-paged #story-key-insight {min-height:0; overflow-y:auto; flex:1; padding-top:12px;}
html #learning-content .story-paged #story-quiz-btn {flex:none; padding-bottom:max(24px,env(safe-area-inset-bottom,0px))!important;}
/* Let the insight and quiz action scroll together when landscape leaves little reading space. */
html #learning-content .story-paged:has(#story-content-area[hidden]) {overflow-y:auto; overscroll-behavior:contain;}
html #learning-content .story-paged:has(#story-content-area[hidden]) > div {flex-shrink:0;}
html #learning-content .story-paged #story-content-area[hidden] ~ #story-key-insight {flex:none; overflow:visible;}
@media(max-height:700px) {
    html #learning-content .story-paged .story-photo img {height:125px;}
    html #learning-content .story-paged .story-text {font-size:1rem; line-height:1.5;}
}
@media(orientation:landscape) and (max-height:500px) {
    html #learning-content .story-paged > div:first-child {display:none;}
    html #learning-content .story-paged .story-slide:has(.story-photo) {display:grid; grid-template-columns:minmax(140px,35%) 1fr; align-items:start; max-width:850px;}
    html #learning-content .story-paged .story-photo img {height:120px;}
    html #learning-content .story-paged .story-controls {padding-top:6px;}
}
html #learning-content .story-paged .story-controls button:hover {transform:none;}
/* Retain a generous, uncropped canvas for the existing labelled diagrams. */
html #learning-content .story-paged .story-photo--diagram img {height:240px; background:white;}
@media(orientation:landscape) and (max-height:500px) {
    html #learning-content .story-paged .story-photo img {height:60px;}
    html #learning-content .story-paged .story-photo--diagram img {height:140px;}
    html #learning-content .story-paged .story-image-caption {font-size:.6rem;padding:3px 5px;}
    html #learning-content .story-paged .story-photo-credit {font-size:.55rem;padding:3px 5px;}
}

/* Keep supporting photos small; labelled anatomy retains its uncropped canvas. */
html #learning-content .story-paged .story-photo:not(.story-photo--diagram) {max-width:320px; flex-shrink:0;}
html #learning-content .story-paged .story-photo:not(.story-photo--diagram) img {height:140px;}
html #learning-content .story-paged .story-photo--diagram img {height:160px;}
@media(max-height:700px) {
    html #learning-content .story-paged > div:first-child {display:none;}
    html #learning-content .story-paged .story-photo:not(.story-photo--diagram) img {height:90px;}
    html #learning-content .story-paged .story-photo--diagram img {height:100px;}
}
@media(orientation:landscape) and (max-height:500px) {
    html #learning-content .story-paged .story-photo:not(.story-photo--diagram) img {height:60px;}
    html #learning-content .story-paged .story-photo--diagram img {height:80px;}
    /* Retain the status-bar spacer, using the lesson title as the visible header. */
    html #view-learning:has(.story-paged) > div:first-child {
        height:max(42px,env(safe-area-inset-top,0px)); padding:0!important;
        overflow:hidden;
    }
    html #view-learning:has(.story-paged) > div:first-child > * {visibility:hidden;}
    html #learning-content .story-paged {
        display:grid; grid-template-columns:1fr auto; grid-template-rows:auto minmax(0,1fr) auto;
    }
    html #learning-content .story-paged > div:nth-child(2) {padding:4px 12px!important;}
    html #learning-content .story-paged h1 {font-size:1rem!important;}
    html #learning-content .story-paged .story-progress-dots {padding:4px 12px;}
    html #learning-content .story-paged .story-progress-dots progress {display:none;}
    html #learning-content .story-paged :is(#story-content-area,.story-controls,#story-key-insight,#story-quiz-btn) {grid-column:1 / -1;}
    html #learning-content .story-paged .story-controls {padding:6px 16px; margin:0;}
    html #learning-content .story-paged:has(#story-content-area[hidden]) {display:flex;}
}