[hidden]{display:none!important}.star-counter,#settlementStars,#resultStars,.reward-layer{display:none!important}#resultStars{display:none}.tone-settlement p:has(#resultStars){display:none}.eyebrow,.tone-brand>span{letter-spacing:.08em!important}.version-tag{color:#8c775d;font-size:12px}.lite-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}.lite-nav a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:80px;background:#fffaf0eb;border:1px solid #deceb5;border-radius:20px;color:#725b40;text-decoration:none;font-size:18px;box-shadow:0 4px 0 #dfd2bd70}.lite-nav strong{font-size:14px}.lite-nav img{width:40px;height:40px;object-fit:contain}.test-note,.scope-summary{color:#79654c;text-align:center;font-size:13px}.page-shell{max-width:900px;margin:auto}.page-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:15px 0 24px}.page-header h1{font-size:28px}.paper{padding:24px;background:#fffdf6f2;border:1px solid #e5d9c4;border-radius:24px;margin:20px 0;box-shadow:0 6px 0 #dfd2bd70}.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.toolbar input[type=search]{flex:1;min-width:180px;padding:14px;border:1px solid #cfbfa5;border-radius:12px;font-size:16px}button,.action-link{font:inherit;cursor:pointer;border:1px solid #d1dcbf;border-radius:12px;padding:12px 18px;background:#eaf0df;color:#53683e;text-decoration:none;display:inline-block;min-height:44px}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #bd8b30;outline-offset:3px}.character-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:12px;margin:22px 0}.character-choice{position:relative;display:flex;align-items:center;flex-direction:column;gap:5px;padding:14px 6px;border:2px solid #e6ddcd;border-radius:16px;background:#fffdf8;cursor:pointer}.character-choice:has(input:checked){background:#eaf0df;border-color:#8c9f70}.character-choice input{align-self:flex-start;width:18px;height:18px}.character-choice strong{font-size:29px}.character-choice span{font-size:15px}.savebar{position:sticky;bottom:8px;padding:14px;background:#fffaf2f5;border:1px solid #dac8aa;border-radius:16px;display:flex;align-items:center;justify-content:space-between;gap:10px;box-shadow:0 4px 20px #65563820}#scopeStatus{color:#51683a}.muted{color:#89755d;font-size:13px;line-height:1.8}.badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.badge{padding:14px 6px;text-align:center;background:#fffcf5;border:1px solid #e6dcc9;border-radius:18px}.badge img{width:100%;max-width:135px;aspect-ratio:1;object-fit:contain}.badge.locked img{filter:grayscale(1);opacity:.3}.badge strong,.badge small{display:block;margin:5px 0}.badge small{color:#8f785c}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;white-space:nowrap}th,td{padding:14px 10px;border-bottom:1px solid #e8dfd0;text-align:left}td:first-child strong{font-size:24px;margin-right:10px}.recent{font-size:12px;color:#7a684f}.empty{text-align:center;padding:30px 5px;color:#8e795c}.external-change{position:fixed;inset:0;background:#53423580;z-index:10000;display:grid;place-items:center}.external-change section{max-width:90%;padding:28px;background:#fffaf0;border-radius:24px}.practice-note{background:#fffaf0e8;border-radius:12px;padding:10px 16px;text-align:center;color:#7a6548;font-size:13px}.hall-brand h1{font-size:clamp(24px,6vw,34px)}@media(max-width:560px){.paper{padding:16px}.page-header h1{font-size:24px}.badge-grid{gap:7px}.badge strong{font-size:13px}.lite-nav{gap:7px}.lite-nav a{flex-direction:column;font-size:16px}.lite-nav img{width:28px;height:28px}.savebar{font-size:13px}.character-grid{grid-template-columns:repeat(4,1fr);gap:7px}.character-choice{padding:10px 3px}}

.record-table th:nth-child(6),.record-table td:nth-child(6){display:none}
.curriculum-entry{margin:20px 0;border:1px solid #eadfcd;border-radius:18px;background:#fffdf5c9;overflow:hidden}.curriculum-entry-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:10px;padding:11px 13px;background:#f5eedf;border-bottom:1px solid #e6d8bf}.curriculum-entry-head h3{margin:0;flex:1;font-family:Georgia,"Songti SC",serif;font-size:18px}.curriculum-entry-head small{color:#806d52}.curriculum-entry-head button{min-height:38px;padding:7px 10px;font-size:12px}.curriculum-grid{padding:10px 12px}.curriculum-entry .character-choice span{font-size:13px}.scope-source{font-size:12px;color:#907b5c}.CSS
.badge-quick-link img{width:24px;height:24px;object-fit:contain}.badge-quick-link span{font-size:12px}.hall-header>.version-tag{justify-self:end}.lite-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.asset-overview-link{display:flex;justify-content:space-between;align-items:center;margin:12px auto 0;padding:14px 16px;max-width:520px;border:1px solid #dfd2bd;border-radius:16px;background:#fffaf0;color:#786449;text-decoration:none;font-size:14px;font-weight:800}.asset-overview-link span{font-size:20px}@media(max-width:560px){.hall-header>.version-tag{grid-area:stars}.badge-quick-link{padding-inline:9px}.badge-quick-link img{width:20px;height:20px}.badge-quick-link span{font-size:11px}.asset-overview-link{margin-top:8px}}


/* New mobile visual assets */
.home-feature-links{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(4px,1.6vw,12px);max-width:680px;margin:18px auto 0}
.home-feature-links a{position:relative;display:block;min-height:0;aspect-ratio:1;padding:0;overflow:hidden;border:0;border-radius:0;background:transparent;box-shadow:none;color:#68442c;text-decoration:none}
.home-feature-links a img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.home-feature-links a strong{position:absolute;left:5%;right:5%;bottom:13.5%;display:flex;min-height:18%;align-items:center;justify-content:center;text-align:center;font-size:clamp(9px,2.8vw,16px);line-height:1.13;font-weight:900;text-shadow:0 1px 0 #fff2da}
.home-feature-links a:focus-visible{outline:3px solid #bd8b30;outline-offset:-5px;border-radius:20px}

/* Practice art stays at the supplied 8:3 ratio. */
body.storybook-layout .topbar{height:auto;min-height:0;padding:0;display:grid;grid-template-columns:1fr;grid-template-rows:auto auto auto;grid-template-areas:"brand" "actions" "tools";gap:8px}
body.storybook-layout .brand-lockup.practice-hero{position:relative;grid-area:brand;width:100%;height:auto;aspect-ratio:2048/768;padding:0;display:block;overflow:hidden;border:1px solid #dec99f;border-radius:18px;background-color:#f9edcf;background-position:center;background-size:cover;box-shadow:0 4px 0 #d8c49c80}
body.storybook-layout .brand-lockup.practice-hero::before{display:none!important}
body.storybook-layout .practice-hero--pinyin{background-image:url("./assets/UI/practice_banner_pinyin.webp")}
body.storybook-layout .brand-lockup.practice-hero .cat-avatar{display:none}
body.storybook-layout .brand-lockup.practice-hero .brand-copy{position:absolute;left:54%;right:4%;top:50%;transform:translateY(-50%);min-width:0;padding:0;text-align:center}
body.storybook-layout .brand-lockup.practice-hero .eyebrow{margin:0 0 3px;color:#7d5b34;font-size:clamp(9px,2.3vw,15px);letter-spacing:.12em;text-shadow:0 1px 4px #fff8e7}
body.storybook-layout .brand-lockup.practice-hero h1{color:#674024;font-size:clamp(20px,6vw,42px);line-height:1.12;letter-spacing:.04em;text-shadow:0 1px 5px #fff7df}
body.storybook-layout .practice-header-actions{grid-area:actions;justify-content:flex-end}
body.storybook-layout .header-tools{grid-area:tools;grid-row:auto;justify-content:space-between}

.tone-shell .tone-topbar{grid-template-columns:1fr;grid-template-rows:auto auto auto;grid-template-areas:"brand" "actions" "progress";gap:8px;min-height:0}
.tone-shell .tone-brand.practice-hero{grid-area:brand;position:relative;width:100%;aspect-ratio:2048/768;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 4% 0 54%;overflow:hidden;border:1px solid #dec99f;border-radius:18px;background:#f9edcf url("./assets/UI/practice_banner_tone.webp") center/cover no-repeat;box-shadow:0 4px 0 #d8c49c80;text-align:center}
.tone-shell .tone-brand.practice-hero span{color:#7d5b34;font-size:clamp(8px,2.2vw,14px);letter-spacing:.12em;text-shadow:0 1px 4px #fff8e7}
.tone-shell .tone-brand.practice-hero h1{margin:3px 0 0;color:#674024;font-size:clamp(20px,6vw,42px);line-height:1.12;letter-spacing:.04em;text-shadow:0 1px 5px #fff7df}
.tone-shell .tone-header-actions{grid-area:actions;justify-content:flex-end}
.tone-shell .tone-topbar>#toneProgress{grid-area:progress;justify-self:center}

body:has(#curriculumEntries),body:has(#mistakeRows),body:has(#assetGrid){background-color:#f8efdc;background-repeat:no-repeat;background-position:center top;background-size:cover;background-attachment:fixed}
body:has(#curriculumEntries){background-image:linear-gradient(#fff9ed70,#fff9ed70),url("./assets/scene/scene_scope_mobile.webp")}
body:has(#mistakeRows){background-image:linear-gradient(#fff9ed70,#fff9ed70),url("./assets/scene/scene_mistakes_mobile.webp")}
body:has(#assetGrid){background-image:linear-gradient(#fff9ed70,#fff9ed70),url("./assets/scene/scene_textbook_mobile.webp")}
@media(max-width:760px){
 body:has(#curriculumEntries),body:has(#mistakeRows),body:has(#assetGrid){background-size:100% auto}
 body:has(#curriculumEntries){background-image:linear-gradient(#fff9ed70,#fff9ed70),url("./assets/scene/scene_scope_mobile.webp")}
 body:has(#mistakeRows){background-image:linear-gradient(#fff9ed70,#fff9ed70),url("./assets/scene/scene_mistakes_mobile.webp")}
 body:has(#assetGrid){background-image:linear-gradient(#fff9ed70,#fff9ed70),url("./assets/scene/scene_textbook_mobile.webp")}
}
@media(max-width:520px){
 .home-feature-links{gap:4px;margin-top:15px}
 .home-feature-links a strong{font-size:clamp(8px,2.9vw,12px);bottom:13%}
 body.storybook-layout .app-shell{gap:11px}
 body.storybook-layout .topbar{gap:6px}
 body.storybook-layout .practice-header-actions .hall-return{min-height:34px;padding-inline:9px;font-size:11px}
 body.storybook-layout .practice-header-actions .sound-toggle{min-height:34px;padding:4px 8px}
 body.storybook-layout .header-tools{justify-content:center;gap:9px}
 .tone-shell .tone-topbar{gap:6px}
 .tone-shell .tone-header-actions{gap:6px}
}

/* Home game art supplied as portrait banners, used in the existing left art panes. */
.hall-game--assemble .hall-art{background-image:url("./assets/UI/home_banner_pinyin.webp")!important;background-color:#f4eddd;background-size:cover!important;background-position:center 68%!important}
.hall-game--tone .hall-art{background-image:url("./assets/UI/home_banner_tone.webp")!important;background-color:#f4eddd;background-size:cover!important;background-position:center 68%!important}
.hall-game .hall-art>*{display:none!important}
.badge-quick-link img{width:31px;height:31px;object-fit:contain}
@media(max-width:560px){.badge-quick-link img{width:26px;height:26px}}

/* Keep the copy balanced beside the new full-height home artwork. */
.hall-copy{align-self:center;width:100%;padding:22px clamp(12px,3vw,28px) 22px 14px}
.hall-copy h2.hall-game-title{width:auto;max-width:100%;margin:0 0 10px;font-size:clamp(25px,4.4vw,32px);line-height:1.12}
.hall-copy .game-subtitle{margin:0 0 18px;font-size:clamp(12px,1.9vw,15px);line-height:1.5}
.hall-copy .game-start{min-height:52px;padding-inline:16px;font-size:clamp(13px,1.9vw,16px)}
@media(max-width:560px){.hall-copy{padding:18px 12px 18px 7px}.hall-copy h2.hall-game-title{font-size:clamp(22px,6vw,26px);margin-bottom:8px}.hall-copy .game-subtitle{font-size:11px;margin-bottom:13px}.hall-copy .game-start{min-height:46px;padding-inline:12px;font-size:12px}}