/* Hallmark · checked: 2026-10-31 · genre: playful · shape: app screen · brand: BananaLearn · surface: absolute
 * built: the project · redesign: polish with user-requested disclosures · scope: app UI · v2.0.0
 * pre-emit critique: P4 H4 E4 S4 R5 V3 · weakest: variety; retain the existing game-specific boards and artwork instead of imposing one template.
 * finish-review: subagent · 1 finding · 1 resolved; pre-review: 3 findings resolved · gap: five-family visual review, not every round.
 * sweep: shared UI stylesheet 0 static FAIL, 0 open REFLEX; 88 desktop and 88 phone entry/play/model checks, targeted interaction checks separately recorded.
 */
/* Hallmark · waive 7b · surface: absolute; retain branded white puzzle paper and readable ink · Existing BananaLearn game surfaces. */
:root {
 --ess-paper:#FAF7F2;--ess-white:#FFFFFF;--ess-ink:#1A1A1A;--ess-body:#555555;--ess-deep:#37324F;--ess-teal:#116B66;--ess-blue:#315DA3;--ess-soft:#EEE8F3;--ess-rule:#37324F26;
 --ess-ui:'Nunito Sans',system-ui,sans-serif;--ess-display:Fraunces,Georgia,serif;--ess-small:13px;--ess-label:14px;--ess-title:24px;--ess-radius:8px;
}
html,body{overflow-x:clip}
body .ess-disclosure{font-family:var(--ess-ui);margin:8px 0;color:var(--ess-body);min-width:0}
body .ess-disclosure>summary{display:flex;align-items:center;gap:8px;min-height:44px;width:fit-content;max-width:100%;padding:8px 12px;cursor:pointer;list-style:none;border-radius:var(--ess-radius);font-size:var(--ess-label);font-weight:700;letter-spacing:normal;text-transform:none;background:transparent;color:var(--ess-teal);touch-action:manipulation}
body .ess-disclosure>summary::-webkit-details-marker{display:none}
body .ess-disclosure>summary::before{content:'+';font-size:var(--ess-label)}
body .ess-disclosure[open]>summary::before{content:'−'}
body .ess-disclosure>summary:hover,body .ess-disclosure[open]>summary{background:var(--ess-soft);color:var(--ess-deep)}
body .ess-disclosure>summary:active{background:var(--ess-soft)}
body .ess-disclosure>summary:focus-visible{outline:3px solid var(--ess-blue);outline-offset:3px}
body .ess-disclosure :is(button,a,input,select):focus-visible{outline:3px solid var(--ess-blue);outline-offset:3px}
body .ess-disclosure .or-modes{margin:8px 0}
body .ess-disclosure .pvt-controls{margin:0;padding:8px}
body .sb-controls{align-items:center}
body .sb-controls>.ess-disclosure{margin:0}
body .sb-controls>.ess-disclosure[open]{width:100%}
body .sb-controls>.ess-disclosure[open]>button{margin:8px}
body .sb-controls .ess-disclosure .sb-key.submit{width:auto;min-width:120px;min-height:44px;font-size:var(--ess-label)}
body .or-game h1 em{font-style:normal}
body .or-game :is(.or-mission>span,header>span,.or-result>span){letter-spacing:normal;text-transform:none;font-family:var(--ess-ui);font-size:var(--ess-small)}
body .arcade-player--equation .arcade-launch-meta{display:none}
body :is(.sb-status,.ll-notice,.td-notice,.gcour-notice):empty{display:none}
body:has(.pgs-root--play) .min-h-\[100dvh\]>p,body:has(.or-game) .min-h-\[100dvh\]>p{display:none}
body:has(.gc-hud) .min-h-\[100dvh\]>p,body:has(.continuous-adventure) .min-h-\[100dvh\]>p{display:none}
/* A single Pause control accompanies feedback; live announcements remain accessible. */
html body.bl-auto-flow-open{padding-bottom:72px}
body.bl-auto-flow-open .bl-auto-flow{width:auto;min-width:0;max-width:calc(100% - 32px);left:auto;right:16px;bottom:16px;transform:none;padding:0;border:0;background:var(--ess-white);box-shadow:none;border-radius:var(--ess-radius)}
body.bl-auto-flow-open .bl-auto-flow span{position:absolute;width:1px;height:1px;min-width:0;padding:0;margin:-1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
body.bl-auto-flow-open .bl-auto-flow button{min-height:44px;min-width:88px;border:0;border-radius:var(--ess-radius);padding:8px 16px;background:var(--ess-deep);color:var(--ess-white);font:700 var(--ess-label)/1.4 var(--ess-ui)}
body.bl-auto-flow-open .bl-auto-flow button:hover,body.bl-auto-flow-open .bl-auto-flow button:active{background:var(--ess-teal)}
/* Brain games keep their active timer and board; secondary statistics and rules fold away. */
body #app .board-layout:has(.sidebar.ess-disclosure){grid-template-columns:minmax(0,1fr)}
body #app .sidebar.ess-disclosure{background:transparent;border:0;box-shadow:none;padding:0;display:block;max-width:none}
body #app .sidebar.ess-disclosure>summary{color:var(--ess-teal)}
body #app .sidebar.ess-disclosure:not([open])>:not(summary){display:none}
body #app .sidebar.ess-disclosure[open] .statbox{border-radius:var(--ess-radius);box-shadow:none}
body:has(#app #arena)>header{padding:8px 16px;justify-content:space-between}
body:has(#app #arena)>.library-return{font-size:var(--ess-small);margin:8px 16px}
body #app:has(#arena){padding-top:8px}
body #app .screen-top{margin-bottom:8px}
body #app .screen-top h1{font-size:clamp(26px,3vw,36px)}
body #app .live-strip{margin-bottom:8px;padding:8px 16px}
body #app .live-strip>span:first-child{text-transform:lowercase;font-family:var(--ess-ui);letter-spacing:normal}
body #app .board-layout:has(.sidebar.ess-disclosure){max-width:960px;margin-inline:auto}
body #app #arena{min-height:0;padding:16px}
body #app #arena>#feedback:empty{display:none}
body #app #arena[data-game="fill"] .checkpoint-order{display:none}
body #app #arena[data-game="fill"] .fill-features:empty{display:none}
body #app #arena[data-game="fill"] .fill-board{max-width:min(100%,360px);margin:8px auto}
body #app #arena[data-game="fill"] .board-heading{margin-bottom:8px}
body #app #arena[data-game="fill"] .caption{font-size:var(--ess-small);line-height:1.5;margin:8px 0;min-height:0}
@media(min-width:760px){
 body #app #arena[data-game="fill"] #game-area{display:grid;grid-template-columns:minmax(0,1fr) 224px;gap:8px 24px;align-items:center}
 body #app #arena[data-game="fill"] .board-heading,body #app #arena[data-game="fill"] .fill-features{grid-column:1/-1}
 body #app #arena[data-game="fill"] .fill-board{grid-column:1;grid-row:2/6;width:100%}
 body #app #arena[data-game="fill"] .fill-run{grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:8px;align-items:flex-start;font-size:var(--ess-small)}
 body #app #arena[data-game="fill"] .fill-run+.caption{grid-column:2;grid-row:3}
 body #app #arena[data-game="fill"] .actions{grid-column:2;grid-row:4;flex-direction:column}
 body #app #arena[data-game="fill"] .actions+.caption{grid-column:2;grid-row:5}
}
@media(max-width:759px){
 body #app #arena[data-game="fill"] .fill-board{max-width:min(100%,320px)}
 body #app #arena[data-game="fill"] .fill-run{margin-top:8px;font-size:var(--ess-small)}
 body #app #arena[data-game="fill"] .board-heading h2{font-size:20px}
}
body .course-shell:has(.course-map.ess-disclosure){grid-template-columns:minmax(0,1fr)}
body .course-map.ess-disclosure{background:transparent;box-shadow:none;padding:0}
body .course-map.ess-disclosure:not([open])>:not(summary){display:none}
body .imported-game>header>span{display:none}
body .imported-game>header{display:flex;align-items:center;flex-wrap:wrap;gap:8px;background:transparent;box-shadow:none;border-radius:0;padding:0;margin-bottom:8px;min-height:44px}
body .imported-game>header h1{font:600 var(--ess-title)/1.2 var(--ess-display);color:var(--ess-deep);margin:0}
body .imported-game>header>a,body .pgs-root--play .pgs-back{display:none}
body:has(.imported-game) .min-h-\[100dvh\]>p{display:none}
body.ess-calculus .intro{display:none}
.ess-embedded body.ess-calculus>header{display:none}
body.ess-calculus main{position:relative;padding-top:48px}
body.ess-calculus .ess-experiments{position:absolute;top:0;right:16px;z-index:4;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
body.ess-calculus .ess-experiments[open]{background:var(--ess-paper);max-width:calc(100% - 32px)}
body.ess-calculus .course-shell{gap:8px}
body.ess-calculus .course-map.ess-disclosure{position:static;margin:0}
body.ess-calculus .course-map.ess-disclosure>summary{position:absolute;top:0;left:16px}
body.ess-calculus .course-shell>div>.card{padding:16px}
body.ess-calculus .stage-nav{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;scrollbar-width:thin}
body.ess-calculus .stage-nav>button{flex:0 0 auto;white-space:nowrap;min-height:44px}
body .arcade-best-pill{display:none}
body .mw-arcade-title em{font-family:var(--ess-ui);font-size:var(--ess-small);font-style:normal;letter-spacing:normal}
body .mf-eyebrow{font-family:var(--ess-ui);font-size:var(--ess-small);letter-spacing:normal;text-transform:none}
body .multiplico-factory .mf-order,body .mt-side .mt-mission{background:transparent;box-shadow:none;border:0;border-radius:0}
body .br-session-bar{font-family:var(--ess-ui);letter-spacing:normal;text-transform:none}
body .math-path-sessions button p{font-family:var(--ess-ui);letter-spacing:normal;text-transform:none}
body .math-path-sessions p:empty{display:none}
body .screen-top>.pill,body header.topbar>.tagline{display:none}
body .phase-label{font-family:var(--ess-ui);letter-spacing:normal;text-transform:none}
/* Native science navigation remains available, outside the current experiment's controls. */
body .ess-experiments{margin:8px 16px;padding:0;background:transparent;border:0;box-shadow:none;width:fit-content;max-width:calc(100% - 32px);border-radius:var(--ess-radius)}
body .ess-experiments[open]>nav{flex-wrap:wrap;overflow:visible}
body #activity-symbol-key{display:none}
@media(max-width:759px){
 body #activity-lab:not([hidden]){display:flex;flex-direction:column}
 body #activity-lab>.activity-heading{order:1}
 body #activity-lab>#textbook-positions{display:contents}
 body #activity-lab #position-jump{order:2;padding:8px 0}
 body #activity-lab #position-cases{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;margin:0;padding-bottom:8px;max-width:100%;min-width:0}
 body #activity-lab #position-cases>button{flex:0 0 auto;min-height:44px}
 body #activity-lab #journey-progress{order:2;margin:8px 0 0}
 body #activity-lab #journey-title{order:2;font-size:20px;margin:8px 0}
 body #activity-lab>#infinity-case{order:3}
 body #activity-lab>.activity-layout{order:3}
 body #activity-lab :is(#journey-marker-help,#journey-look,#journey-setup-note,#position-table){order:4}
}
body .eyebrow{font-family:var(--ess-ui);font-size:var(--ess-small);letter-spacing:normal;text-transform:none}
body:has([data-lab="circuits"]) #eyebrow,body:has([data-lab="circuits"]) .try>div>span{display:none}
body:has([data-lab="circuits"]) .discovery>span{font-family:var(--ess-ui);font-size:var(--ess-small);letter-spacing:normal;text-transform:none}
body :is(h1,h2,h3){overflow-wrap:break-word;min-width:0;text-wrap:balance}
@media(prefers-reduced-motion:reduce){body .ess-disclosure *,body .bl-auto-flow{scroll-behavior:auto;transition:none;animation:none}}