/* Readability and touch fixes from the axe-core / Playwright audit (scripts/ui-audit.mjs).
   Loaded last and marked !important on purpose: it only raises colour contrast, minimum text size and tap
   areas, and must win over the more specific game rules. Layout stays in the original files.
   Targets: WCAG AA contrast 4.5:1 on the cream panels, text >= 11px, tap targets >= 44px. */

/* Muted grey-green helper text (was #77–#a3, 2.3–4.4:1) */
:is(.portal-scope,.portal-kicker,.prototype-note,.map-note,.b2-local-note,.b2-map-title>span,.village-footer>span,
.home-bottom p,.quiet:not(.knowledge-footnote>.quiet),.map-pan-hint,.digit-console-screen>span,.location-meta,.location-copy>p,.footer>span,footer>span,
.legacy-world-link>span,.obstacle-heading span,.obstacle-heading p,.obstacle-question-label>span,.obstacle-question-label>b,
.obstacle-question>p,.b2-home-copy>small,.b2-home-copy>p,#coachText,.atlas-page-heading p,.safety-reflection,.safety-reflection>small,
button[data-safe-step]>small,button[data-b2-stage]>small,button[data-b2-stage]>p,button[data-b2-stage]>b,
.atlas-breadcrumb>span,#globalAudioStatus,.island-access-note,#mathHint,#safeRealHelp,.wordmark small,
span[data-obstacle-step],nav>span,nav>b,.island-nav>b,.friends-lobby p,.friends-lobby label,.friends-status,
details>summary,#lessonSelect,.kicker,.info>small,.info>.number){color:#4b5c45!important}

/* Answer choices in "Lá chắn của em" are the core of the lesson: full-strength text */
button[data-safe-option]{color:#2f4a3c!important}

/* Golden labels (was #96–#ad on pale yellow, 3–4:1) */
:is(.volume-two,#progress,#obstacleCount,#mathWallet,#b2Wallet,.b2-wallet,.location-num,.location-go,.b2-rules>span){color:#6e4f12!important}

/* Brand-green eyebrows and links (was #4f–#6d, 3.4–4.1:1) */
:is(.section-title .eyebrow,.b2-eyebrow,.b2-speech>b,.atlas-back,button[data-safe-step]>h3){color:#2b5f47!important}

/* Text that was 5–9px: hard to read for young learners */
:is(button[data-safe-step]>small,button[data-b2-stage]>small,.portal-kicker,.location-meta,.prototype-note,.map-note,.section-title .eyebrow){font-size:11px!important}
:is(.safety-reflection>small,.obstacle-heading span,.b2-rules>span,#globalAudioStatus,.wordmark small,.obstacle-question-label>span,
.portal-scope,.b2-local-note,.village-footer>span,.quiet:not(.knowledge-footnote>.quiet),.map-pan-hint,footer>span,.footer>span){font-size:12px!important}

/* Tap targets for small fingers (were 28–38px; the "Toán tập hai" link was 14px tall) */
:is(.island-nav button,.portal-nav button,.atlas-breadcrumb button,#globalSound,#globalTestSound,.top-button,
#b2Sound,#b2Music,#b2TestSound,#b2Wallet,.b2-wallet,#homeBtn,.welcome-brand,.topbar .brand){min-height:44px!important;min-width:44px!important;flex-shrink:0!important}
/* min-width above replaces min-width:auto, so items in scrolling rows (island nav) must not shrink or their labels overlap. */
.volume-two{display:inline-flex!important;align-items:center;min-height:44px!important;padding:0 6px}
:is(#homeBtn,.welcome-brand,.topbar .brand){display:inline-flex;align-items:center}
@media (max-width:640px){.account-badge{min-width:44px!important;min-height:44px!important}}

/* Second audit pass */
/* Selected filter buttons sit on a dark green background and keep their light text. */
:is(.lesson-label,.subtle,#statusFilter button:not(.selected),button[data-filter]:not(.selected),.obstacle-rules,.atlas-breadcrumb a,.atlas-breadcrumb button,.safety-cloud,.lesson-copy>.book-page,.lesson-copy small){color:#4b5c45!important}
:is(footer>a,#topProgress){color:#6e4f12!important}
:is(#atlasAsk,a[href="/"]){color:#2b5f47!important}
footer>a,.atlas-breadcrumb a,.atlas-breadcrumb button,.atlas-back,button[data-filter],#statusFilter button{display:inline-flex!important;align-items:center;min-height:44px!important;flex-shrink:0}
.registration-back{min-height:44px!important}
#statusFilter{color:#4b5c45!important}
:is(button[data-filter].selected,#statusFilter .selected){background:#2f6a52!important;color:#fff!important}

/* Third pass: "Hồ sơ · Đổi bạn" in the island header. Its 102px cap cut the label on tablets; on phones the
   two-line label pushed the SUSULAND wordmark off screen, so it shows only its icon there (named by aria-label). */
body .topbar .top-actions .profile-switch.top-button{max-width:none!important}
@media (max-width:520px){
  body .topbar .top-actions .profile-switch.top-button{min-width:44px!important;font-size:18px!important}
  body .topbar .top-actions .profile-switch.top-button span{display:none!important}
}
/* Knowledge map: island signs stop above the bottom bar ("← SUSULAND", "Hỏi Susu") instead of sliding under it. */
body[data-view="knowledge-map"] .grade-island-sign{top:clamp(155px,calc((var(--y) - 50%)*var(--map-scale-y,1) + 50%),calc(100% - 96px))!important}
/* Knowledge map on desktop windows narrower than 3:2: same fix as the world map (home-wide.css) — show the whole 16:9 map,
   fading into the sea colour sampled from its edges, instead of covering the window and cutting off grades 1, 2, 4 and 5. */
@media(min-width:900px) and (max-aspect-ratio:3/2){
body[data-view="knowledge-map"] .knowledge-map-viewport{display:flex!important;align-items:center;justify-content:center;background:linear-gradient(#076eba,#0562ae 50%,#0255a1)!important}
body[data-view="knowledge-map"] .atlas-grade-scene{width:112%!important;height:auto!important;aspect-ratio:16/9!important;overflow:visible!important;flex:none}
body[data-view="knowledge-map"] .atlas-grade-scene .atlas-world-art{object-fit:contain!important;-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
body[data-view="knowledge-map"] .atlas-grade-scene .grade-island-sign{left:clamp(100px,var(--x),calc(100% - 100px))!important;top:var(--y)!important}
}