/* UX audit 17 (design/17_ux_audit.md): calmer hierarchy, readable type, fewer competing frames. Loaded last; small overrides only. */

/* ---------- type: pixel font only for h1/h2 titles + HUD numbers. h3, labels, small chips, ring text = UI font ---------- */
html[data-skin=pixel] :is(h3, .me-bn, .arc-soon, .arc-h, .arc-cab-t, .wmap-count, .ring-wrap .rt, .ring .rt, span.rt) {
  font-family: var(--lg-font); -webkit-font-smoothing: antialiased; letter-spacing: 0; font-weight: 700; }
html[data-skin=pixel] h3:not(:is(.q-card, .cheat, .notes, .ex, .tool-host, dialog) *) { font-size: 19px; line-height: 1.3; }
html[data-skin=pixel] .arc-h { font-size: 18px; }
/* long content titles inside cards (island name, game titles in lists) read better in the UI font */
html[data-skin=pixel] :is(.isl-card, .isl-prev, .arc-home, .arc-cab) h2 { font-family: var(--lg-font); -webkit-font-smoothing: antialiased; letter-spacing: 0; font-weight: 700; font-size: 21px; }

/* ---------- noise: lighter drop shadow, no double frames for cards nested in cards ---------- */
html[data-skin=pixel] main :is(.card, .stat, .kcard, .pcard, .tile, .plcard) {
  box-shadow: 0 -3px 0 0 var(--pf), 0 3px 0 0 var(--pf), -3px 0 0 0 var(--pf), 3px 0 0 0 var(--pf), 4px 4px 0 0 var(--px-drop), inset 0 -3px 0 0 var(--px-lo); }
html[data-skin=pixel] main :is(.card, .plcard) :is(.card, .icard, .plcard) { --pf: var(--px-line-2); box-shadow: inset 0 0 0 2px var(--px-line-2); }

/* ---------- Home: Continue first, then today (goal + streak, quests), one game, then "More" ---------- */
.home-next { margin-bottom: 24px; }
@media (min-width: 700px) {
  .card.continue.home-next { grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; }
  .card.continue.home-next .btn { grid-column: auto; min-height: 52px; padding: 0 22px; }
}
html[data-skin=pixel] main .card.continue.home-next { box-shadow: 0 -3px 0 0 var(--px-line), 0 3px 0 0 var(--px-line), -3px 0 0 0 var(--px-line), 3px 0 0 0 var(--px-line), 4px 4px 0 0 var(--px-drop), inset 8px 0 0 0 var(--bp-primary); }
.card.continue.home-next h3 { font-size: 22px; }
.home-today { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; margin-bottom: 24px; align-items: start; }
.home-today > * { margin: 0; min-width: 0; }
@media (max-width: 1024px) { .home-today { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.arc-home { margin-bottom: 24px; }
.arc-home-line { margin: 0 0 8px; }
.home-more { margin: 8px 0 0; }
.home-more > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 16px; cursor: pointer; background: var(--bp-paper); color: var(--bp-ink);
  box-shadow: inset 0 0 0 3px var(--px-line-2, var(--bp-line)), inset 0 -5px 0 0 var(--px-lo, transparent); }
.home-more > summary::-webkit-details-marker { display: none; }
.home-more > summary:focus-visible { outline: 3px solid var(--bp-focus); outline-offset: 2px; }
.home-more[open] > summary svg { transform: rotate(180deg); }
.home-more-body { display: flex; flex-direction: column; gap: 24px; padding-top: 24px; }
.home-more-body > * { margin: 0; }
@media (max-width: 560px) { .home-today, .home-next, .arc-home { margin-bottom: 16px; } .home-more-body { gap: 16px; padding-top: 16px; } .home-head .home-cubes { display: none; } }

/* ---------- top bar: fewer chips on small screens (streak + bell + avatar; coins live in Me/Wallet) ---------- */
@media (max-width: 480px) { .app-nav .hud-coins, .app-nav .hud-gems { display: none; } }
/* bell count: solid red with white text in both themes */
.bell .cnt { background: #C62828 !important; color: #FFFFFF !important; }

/* ---------- avatar menu: grouped, scrolls on short screens ---------- */
.menu { max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; }
.menu .mgroup { padding: 8px 12px 2px; font: 700 12px/1.2 var(--lg-font); letter-spacing: .06em; text-transform: uppercase; }
.menu .mlabel { padding: 4px 12px 0; font-size: 13px; }

/* ---------- games hub: recommended card + mood groups ---------- */
.arc-mood { margin-top: 28px; }
.arc-mood-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 12px; }
.arc-mood-h h2 { margin: 0; }
.arc-cab-t { margin: 0 0 4px; font-size: 18px; }
.arc-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.arc-soon-list { margin-top: 28px; }
.arc-soon-list > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 650; color: var(--bp-ink-2); }

/* ---------- games on phones: no tab bar in a run; question panel = bottom sheet (Boba like Quick Pack) ---------- */
@media (max-width: 819px) {
  body.in-game .tabnav, body.in-game .foot { display: none !important; }
  body.in-game .qp-side { bottom: env(safe-area-inset-bottom, 0px); }
  body.in-game .bq-side:not(:empty) { position: sticky; bottom: env(safe-area-inset-bottom, 0px); z-index: 3; margin: 0 -4px; padding: 8px 4px; background: var(--bp-paper);
    box-shadow: 0 -3px 0 0 var(--px-line, #16365F), 0 -8px 16px -8px rgba(11,22,38,.35); max-height: 58vh; overflow-y: auto; overscroll-behavior: contain; }
  body.in-game .bq-stage { max-height: 34vh; }
  body.in-game .bq-stage canvas { max-height: 34vh; width: auto !important; max-width: 100%; }
}

/* ---------- companion: tucked bubble never covers controls ---------- */
.companion.tucked .comp-bubble { display: none; }
@media (max-width: 820px) { .companion { bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); } .companion .comp-bubble { max-width: min(240px, calc(100vw - 48px)); } }
.companion.over .comp-btn { opacity: .3; pointer-events: none; transition: opacity .2s; }
.companion.dodge { visibility: hidden; pointer-events: none; }   /* phone: a Next / Check button is under the companion or its pet (22/10) */
@media (max-width: 820px) { body.has-shell .menu { max-height: calc(100dvh - 190px); } }
@media (max-width: 560px) { .arc-hero .arc-cab-cv { width: 96px !important; height: 144px !important; } .arc-hero-av { min-height: 80px; } }
/* shop section tabs: the current tab is a filled primary block (was outline-only, weak in dark mode) */
html[data-skin=pixel] .eco-tabs button[aria-pressed="true"] { background: var(--bp-primary); color: var(--bp-on-primary); box-shadow: inset 0 0 0 3px var(--px-pri-edge), inset 0 -5px 0 0 var(--px-pri-lo); }
/* teacher tools are data-dense: card headings in the UI font; only the page h1 keeps the pixel title */
html[data-skin=pixel] body[data-screen="teacher"] main :is(h2, h3) { font-family: var(--lg-font); -webkit-font-smoothing: antialiased; letter-spacing: 0; font-weight: 700; font-size: 20px; }
html[data-skin=pixel] body[data-screen="teacher"] main :is(.stat b, .stat3 b, .stat-strip b) { font-size: 26px; }
/* test paper: no empty framed box when the keypad is not needed */
.card:has(> .keypad-wrap[hidden]:only-child) { display: none; }

/* readable numbers (15/10): pixel font stays on h1/h2 and the brand only; everything else, digits included, is antialiased system text */
html[data-skin=pixel] body *:not(h1):not(h2):not(.px):not(.brand):not(.brand *) { -webkit-font-smoothing: antialiased; }
html[data-skin=pixel] :is(.chip-s, .hud-chip, .stat b, .lv-badge, .xp-chip, .cnt, .n, .num) { font-family: var(--lg-font); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0; }
html[data-skin=pixel] .px { font-family: var(--lg-font); font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }

/* ---- companion play layer (trend pack 2): pet beside the companion, hearts, roam mute control */
.comp-btn{position:relative;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.comp-btn .px-pet{position:absolute;image-rendering:auto;}
.comp-bubble .comp-mute{margin-left:6px;padding:1px 6px;font-weight:700;font-size:11px;line-height:1.4;font-family:inherit;color:var(--comp-ink);background:transparent;border:1px solid var(--comp-edge);border-radius:3px;cursor:pointer;opacity:.75}
.comp-bubble .comp-mute:hover,.comp-bubble .comp-mute:focus-visible{opacity:1;outline:2px solid var(--comp-edge)}
.comp-heart{position:absolute;bottom:56px;pointer-events:none;animation:comp-heart 1.2s ease-out both}
.comp-heart svg{display:block}
@keyframes comp-heart{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translateY(-46px) scale(1.1)}}
@media(prefers-reduced-motion:reduce){.comp-heart{animation:comp-heart-still 1.2s linear both}@keyframes comp-heart-still{0%,70%{opacity:1}100%{opacity:0}}}

/* ---- companion behaviours (companion/ui_act.js): stage overlay, snore label, emote wheel, Pomodoro badge, drag */
.comp-btn{cursor:grab;transform-origin:50% 100%}
.companion.held .comp-btn{cursor:grabbing}
.comp-btn canvas.comp-stage{position:absolute;margin:0;pointer-events:none;image-rendering:auto;}
.comp-snore{position:absolute;z-index:3;pointer-events:none;padding:2px 6px;font:700 italic 12px/1.1 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;color:var(--comp-ink);background:var(--comp-bg);border:2px solid var(--comp-edge);border-radius:4px;white-space:nowrap}
.comp-snore[hidden]{display:none}
.comp-wheel{position:absolute;left:50%;top:42%;width:0;height:0;z-index:5}
.comp-wheel-b{position:absolute;left:0;top:0;transform:translate(calc(var(--wx) - 26px),calc(var(--wy) - 26px));width:52px;height:52px;padding:0;border:2px solid var(--comp-edge);border-radius:50%;background:var(--comp-bg);color:var(--comp-ink);font:700 12px/1.1 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;cursor:pointer;box-shadow:3px 3px 0 0 rgba(16,35,63,.22);animation:comp-pop .18s cubic-bezier(.2,.9,.3,1.2) both}
.comp-wheel-b:hover,.comp-wheel-b:focus-visible{outline:3px solid var(--comp-edge);outline-offset:1px}
.comp-pomo{position:absolute;top:-2px;right:-2px;z-index:6;min-width:44px;min-height:30px;padding:2px 8px;font:700 13px/1.2 -apple-system,system-ui,sans-serif;color:var(--comp-ink);background:var(--comp-bg);border:2px solid var(--comp-edge);border-radius:4px;cursor:pointer;pointer-events:auto}
.comp-pomo[hidden]{display:none}
.comp-bubble .comp-hint{font-size:12px;opacity:1}
@media(prefers-reduced-motion:reduce){.comp-wheel-b{animation:none}}
/* Practice: "Pick from 4 | Type it" (js/practice_mc.js). Exactly 4 big buttons, keys 1-4. */
.mc-typed{display:contents}.mc-typed[hidden]{display:none}
.mc-toggle{margin:4px 0 10px;align-items:center;gap:2px}.mc-toggle>svg{margin:0 6px 0 10px;color:var(--bp-ink-2)}
.mc-toggle button{min-height:44px;min-width:44px}
.mc-block{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:6px 0 10px}.mc-block[hidden]{display:none}
.mc-opt{position:relative;display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 12px;border:1px solid var(--bp-line);border-radius:14px;background:var(--bp-paper);color:var(--bp-ink);font:500 19px/1.2 var(--lg-font);text-align:left;cursor:pointer;touch-action:manipulation;transition:opacity .25s,transform .15s}
.mc-opt:focus-visible{outline:3px solid var(--bp-focus);outline-offset:2px}
@media(hover:hover){.mc-opt:not(:disabled):hover{background:var(--bp-paper-2)}}
.mc-k{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--bp-paper-2);border:1px solid var(--bp-line);font:700 13px var(--lg-font);color:var(--bp-ink-2)}
.mc-opt.wrong{opacity:.55;border-color:var(--bp-neg,#c0392b);text-decoration:line-through}.mc-opt.right{border-color:var(--bp-pos,#1e8e5a);box-shadow:inset 0 0 0 2px var(--bp-pos,#1e8e5a)}
.mc-opt.mc-faded{opacity:.28;border-style:dashed}
.mc-opt:disabled{cursor:default}
@media(max-width:560px){.mc-block{grid-template-columns:1fr}.mc-opt{font-size:18px}}
@media(prefers-reduced-motion:reduce){.mc-opt{transition:none}}
.comp-ping{animation:comp-ping 1.1s ease-in-out 4}@keyframes comp-ping{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--bp-focus,#2b7fff) 45%,transparent)}}
@media(prefers-reduced-motion:reduce){.comp-ping{animation:none;outline:3px solid var(--bp-focus,#2b7fff)}}

/* ===================== 22/10 OLD-UI SWEEP (tools/pw_old_ui_sweep.py, design/qa/OLD_UI_SWEEP_2026-10-22.md) =====================
   One look everywhere outside the games' own scenes: sky-blue liquid-glass panels and chips, drawn icons, smooth (never pixelated) art. */
.arc-cab-cv.arc-cab-ic { image-rendering: auto; filter: drop-shadow(0 6px 10px rgba(22, 54, 95, .18)); }
html[data-hm="on"] .arc-home.hm-on .hm-cab { animation-timing-function: ease-in-out; }
/* CH heroes are hi-res art: always drawn smooth, wherever they sit (header headshot, path portrait, cards) */
.ch-port, .ch-port canvas, .ch-port img { image-rendering: auto !important; }

/* ---- contrast sweep 22/10 (tools/pw_contrast_sweep.py): disabled states stay readable (>= 3:1), never white on a faded blue ---- */
button.f3-go:disabled { opacity: 1; background: #C3D3EA; color: #1E3358; }
/* the floating music button shares the hero-art class .float (screens.css paints .float white): keep its label ink on the glass pill */
.btn.glass.snd-music.float { color: var(--bp-ink, #10233F); }
/* Home journey + study session (inline sheets in js): the selected segment / current dot is ink-on-tint; --bp-on-primary flips to dark ink in dark mode */
html body .jh-seg button[aria-pressed="true"], html body .jh-node.cur .jh-dot, html body .st3-mode button[aria-pressed="true"] { color: var(--bp-on-primary, #fff); }
/* skills strip link in the city house: an <a> outside placement.css got the browser's link blue (#9E9EFF in dark mode) */
.st-strip a.pl-btn:not(.pri) { color: #10233F; text-decoration: none; }

/* release smoke 22/10: a <select> with a long option (Assign: "Unit 1 · Solving linear equations…") set the min width of its card and scrolled a 390 px phone sideways by 89 px */
#app select{max-width:100%;min-width:0;text-overflow:ellipsis}
/* teacher Tester pill sat on top of the side-nav "Settings" label (desktop): park it just right of the side nav */
@media (min-width: 901px) { body.has-shell:not(.in-game) .tp-fab { left: 124px; } }

/* merged Continue + play row card */
.jh-play { grid-column: 1 / -1; flex: 1 0 100%; display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(16, 35, 63, .1); }
.jh-play .hm-cab { width: 40px; height: 40px; flex: none; }
.jh-play .eyebrow { margin: 0; }

/* "Need Energy" card (games host) */
.need-energy { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; max-width: 720px; margin: 24px auto; }
.need-energy .ne-ico { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(#FFE27A, #F5B91E); color: #5A3B00; }
.need-energy h2 { margin: 2px 0 6px; font-size: 24px; }
.need-energy .ne-act { grid-column: 1 / -1; gap: 10px; flex-wrap: wrap; }
@media (max-width: 560px) { .need-energy { grid-template-columns: 1fr; } .need-energy .ne-act .btn { width: 100%; justify-content: center; } }