*{box-sizing:border-box}body{margin:0;background:#f8f6ed;color:#294b3e;font-family:"Microsoft YaHei",sans-serif;font-size:15px}button,input,select{font:inherit}button,a,select,input[type=range]{touch-action:manipulation}button{cursor:pointer;border:1px solid #d5deca;background:#fffcf3;color:#365542;border-radius:14px;padding:12px 18px;font-weight:700;transition:transform .15s,background .15s}button:hover:not(:disabled){background:#e4efdb;transform:translateY(-2px)}button:disabled{cursor:default;opacity:.48}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #e6a743;outline-offset:3px}.primary{background:#307753;color:white;border-color:#286647;box-shadow:0 4px 0 #21543c}.primary:hover:not(:disabled){background:#3e8a60}a{color:inherit;text-decoration:none}header{min-height:96px;padding:20px 4%;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #e2e5d7;background:#fffcf5}.brand{font-size:25px;font-weight:900;letter-spacing:2px;white-space:nowrap}.brand span{color:#b2c96d}.brand small{display:block;font-size:11px;letter-spacing:3px;margin:6px 0 0 31px;font-weight:400}nav{display:flex;gap:6px}nav button{border:0;background:none;padding:13px 12px}.active{background:#e4edda!important;color:#2d704d!important}.wallet{display:flex;align-items:center;gap:12px;font-weight:700}.wallet button{padding:9px 12px;font-size:12px}main{max-width:1500px;margin:auto;padding:28px 4%}.hero{height:470px;border-radius:30px;position:relative;overflow:hidden;background:linear-gradient(90deg,#f7f1df 0%,#f7f1dfef 29%,#f7f1df00 72%),url('/assets/forest.png') center/cover}.hero-copy{position:relative;padding:54px 48px;max-width:610px}.eyebrow{font-size:11px;letter-spacing:2.5px;font-weight:700;color:#6c8665}h1{font-size:40px;line-height:1.45;margin:18px 0;font-weight:900;letter-spacing:1px}h2{font-size:27px;margin:12px 0}h3{font-size:18px}p{line-height:1.9;color:#6f7d6a}.hero-copy p{font-size:16px}.hero-actions{display:flex;align-items:center;gap:20px;margin-top:25px}.grade{font-size:13px}.grade select{padding:9px;border:0;border-radius:8px;background:#fff9e9;color:#446442}.hero-note{position:absolute;right:30px;bottom:25px;background:#fff9e5db;padding:12px 20px;border-radius:25px;font-size:12px}.overview{margin:22px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 25px;border-radius:18px;background:#edf1e3}.overview b{color:#315941}.overview button{padding:8px 14px}.section-title{display:flex;justify-content:space-between;align-items:end;margin:38px 0 25px}.section-title p{font-size:13px}.chapter{margin-bottom:28px}.chapter h3{border-bottom:1px solid #dde1d1;padding-bottom:17px;color:#6c7c61}.chapter h3 small{font-weight:400;margin-left:15px}.levels{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.level{display:flex;flex-direction:column;align-items:center;gap:10px;min-height:185px;background:#fffcf4;border:1px solid #e1e5d8;padding:20px 8px}.level-icon{font-size:37px;line-height:1.4}.level small{color:#859075;font-size:11px}.level strong{font-size:15px}.level.completed{background:#eef4e3;border-color:#c9d9ae}.level.boss{background:#fff0d4}.stars{color:#cda45b;letter-spacing:4px;font-size:12px}footer{margin-top:45px;padding:25px 0;border-top:1px solid #dfe3d6;font-size:12px;color:#8a9680;display:flex;justify-content:space-between}.task-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;font-size:13px}.steps{display:flex;gap:40px}.steps span{display:flex;align-items:center;gap:9px;color:#9ba28f}.steps b{background:#a6ad9a;border-radius:50%;color:white;padding:7px 11px}.steps .current{color:#376746}.steps .current b{background:#33764f}.task-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:20px}.scene{border-radius:28px;border:3px solid #c9b68c;background:linear-gradient(#ffffff22,#f5ecd277 35%,#f5ecd2c9 85%),url('/assets/forest.png') center/cover;overflow:hidden;padding:24px;min-height:700px;display:flex;flex-direction:column}.task-title{text-align:center;background:#fffbeddc;border:1px solid #ddd0af;box-shadow:0 4px 0 #c8b995;border-radius:20px;padding:16px}.task-title h1{font-size:30px;margin:8px}.task-title p{font-size:19px;margin:8px 0;color:#4e5038}.board{flex:1;text-align:center;padding:12px 0;min-height:360px}.instruction{font-size:12px;margin:8px 0 18px;color:#627052}.tray{min-height:90px;border:2px solid #c59c67;background:#e6c39866;box-shadow:inset 0 3px 10px #95714822;padding:15px;border-radius:18px;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;color:#886a45}.fruit{font-size:31px;border:0;background:transparent;padding:5px;border-radius:50%;cursor:grab;line-height:1.2}.fruit.selected{outline:3px solid #e0a136;background:#fff0ac}.baskets{display:flex;justify-content:space-around;gap:12px;margin-top:28px}.basket{flex:1;min-height:130px;background:repeating-linear-gradient(0deg,#c89b5a22 0 5px,#e2bb7633 5px 10px),#efd4a0;border:3px solid #ba945b;border-radius:15px 15px 35px 35px;box-shadow:0 7px 0 #a7804340;cursor:pointer;padding:12px 6px;display:flex;flex-direction:column;justify-content:space-between}.basket .fruit{font-size:24px;padding:3px}.basket strong{font-size:13px;padding-top:9px;border-top:1px solid #c39b5a}.basket>div{min-height:60px}.guide{background:#fffdf4;border:1px solid #e5e2cd;border-radius:26px;padding:22px;text-align:center}.guide-message{background:#f4f0e5;border:1px solid #e0d7c1;border-radius:23px;padding:22px 15px;font-weight:700;line-height:1.8;min-height:110px;color:#6a664d}.pet-portrait{font-size:105px;padding:25px 0 12px;background:radial-gradient(ellipse,#e3edcf,transparent 68%)}.guide h3{font-size:15px}.guide p{font-size:13px}.guide small{font-size:11px;line-height:1.8;color:#9a9e8c}.challenge{text-align:left;margin:28px 0;padding:10px;border-top:1px solid #e2e1cf}.task-actions{display:flex;justify-content:center;gap:12px;padding-top:15px;flex-wrap:wrap}.task-actions button{padding:15px 20px}.success,.try-again{margin:12px 0;border-radius:15px;padding:15px;text-align:center;background:#e1edcb;color:#3c6939}.try-again{background:#fff0c9;color:#8a6930}.success p{margin:4px;font-size:20px}.solved{pointer-events:none;opacity:.8}.math-grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:5px;width:min(100%,330px);margin:15px auto}.math-grid button,.math-grid span{aspect-ratio:1;border:1px solid #c6ccac;border-radius:9px;background:#f3f0d8;font-size:25px;padding:0;display:flex;align-items:center;justify-content:center;color:#a3ad8b}.math-grid .filled{background:#a9c874;color:#4c7742;border-color:#82a954}.mirror{display:flex;align-items:center;gap:10px;max-width:600px;margin:30px auto}.axis{writing-mode:vertical-rl;font-size:12px;border-left:2px dashed #bf8a5d;height:230px;padding:8px}.blocks{display:flex;gap:25px;justify-content:center;margin:25px auto}.blocks section{width:45%;background:#fff7e4a8;border-radius:15px;padding:10px}.ten-blocks,.one-blocks{min-height:90px;color:#d59843;font-size:38px;display:flex;flex-wrap:wrap;gap:5px;justify-content:center}.one-blocks{font-size:22px}.blocks button{padding:9px;font-size:12px}.bridge-story{padding:20px;background:#e6d5a4;border-radius:10px;margin:20px}.controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:20px 0}.clock{width:260px;height:260px;border:12px solid #d2b982;border-radius:50%;margin:24px auto;position:relative;background:#fffbed;box-shadow:0 7px 0 #baa778;touch-action:none}.clock>span{position:absolute;left:calc(50% - 12px);top:calc(50% - 12px);width:24px;height:24px;font-size:18px;transform:rotate(var(--angle)) translateY(-96px) rotate(calc(-1 * var(--angle)))}.hand{position:absolute;bottom:50%;left:calc(50% - 3px);width:6px;background:#53784b;transform-origin:50% 100%;border-radius:5px;pointer-events:none}.hour{height:60px;background:#996c3b;width:8px}.minute{height:88px}.pin{position:absolute;background:#d6a65d;left:calc(50% - 8px);top:calc(50% - 8px);height:16px;width:16px;border-radius:50%}.scale{max-width:500px;margin:75px auto 20px}.beam{display:flex;justify-content:space-between;border-bottom:8px solid #a68147;transition:transform .4s}.beam span{padding:25px 10px;border:2px solid #bca06c;border-radius:0 0 45% 45%;background:#fff7e4}.scale-foot{font-size:55px;color:#b29153}.weight{background:#aeb3ad;color:#fff;border:1px solid #8b928a}.ruler-scene{height:120px;position:relative;margin:50px 20px 30px}.wood{position:absolute;height:32px;background:repeating-linear-gradient(0deg,#b6884c,#ba9157 6px);border-radius:4px;top:10px}.ruler-numbers{position:absolute;left:0;right:0;top:68px;display:flex;justify-content:space-between;background:#edd99b;border-top:15px solid #e5c77a;height:42px;font-size:13px}.range-label{display:flex;gap:15px;align-items:center;margin:20px}.range-label input{flex:1;min-width:0;accent-color:#5b8048}.order{display:flex;justify-content:space-around;margin:20px;background:#fff2c9;padding:20px;border-radius:12px}.money{background:#d4e9c8}.path{font-size:13px;overflow-wrap:anywhere}.cozy,.result{max-width:850px;margin:15px auto;text-align:center;background:radial-gradient(ellipse at center,#e6edcf,#faf6e8 75%);border:1px solid #dde3cb;border-radius:30px;padding:45px}.pet-large{font-size:150px;margin:30px}.pet-options{display:flex;gap:10px;justify-content:center;margin-top:35px;flex-wrap:wrap}.cozy p{font-size:13px}.result-art{font-size:100px}.big-stars{color:#dcab49;font-size:50px;letter-spacing:10px}.result button{margin:15px}.home-heading{text-align:center;padding:20px 0 35px}.home-heading h1{font-size:32px}.home-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:28px}.room{background:linear-gradient(#e6ecd2 0 45%,#d7bf91 45% 47%,#eddbb7 47%);border:12px solid #c3a77a;border-radius:35px;min-height:450px;padding:70px 25px 30px;display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.room-slot{background:#fff9e95c;border:1px dashed #b0ad84;padding:15px 5px;display:flex;flex-direction:column;justify-content:center;gap:12px;align-items:center}.room-slot span{font-size:50px}.room-slot small{font-size:12px}.furniture-list{background:#fffdf6;border-radius:22px;padding:25px}.furniture-list article{display:flex;gap:14px;align-items:center;border-top:1px solid #e9e6d9;padding:20px 0}.furniture-list article>span{font-size:32px}.furniture-list article div{flex:1}.furniture-list small,.mastery small{display:block;font-size:11px;color:#9b9f8c;margin-top:8px}.furniture-list b{font-size:11px}.monster-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.monster{background:#fffced;border:1px solid #e1e6d5;border-radius:25px;text-align:center;padding:30px}.monster>div{font-size:70px}.monster h2{font-size:20px}.empty{padding:70px;text-align:center;line-height:2;grid-column:1/-1}.parent-gate{max-width:500px;margin:30px auto;background:#fffdf4;border:1px solid #e0e3d3;border-radius:25px;padding:40px}.parent-gate h1{font-size:32px}form label{display:flex;flex-direction:column;gap:8px;font-size:13px;margin:20px 0}input,select{border:1px solid #d6dccc;background:#fffef7;border-radius:9px;padding:12px;color:#365442}form button{width:100%;margin:15px 0}.report{max-width:950px;margin:auto}.report section{background:#fffdf4;border-radius:20px;margin:20px 0;padding:28px}.report h2{font-size:21px}.report p{font-size:13px}.mastery{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;border-top:1px solid #e4e8da}.mastery>div{flex:1}.mastery>span{font-size:12px}progress{accent-color:#6b9558;width:150px;height:12px}.week{display:flex;gap:30px;padding:20px 0}.week b{display:block;margin-top:12px}dialog{border:1px solid #dce2cd;background:#fffdf6;border-radius:25px;width:min(95vw,490px);padding:30px;color:#3c5543}dialog::backdrop{background:#223d3499;backdrop-filter:blur(4px)}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head h2{font-size:22px}.dialog-head button{padding:6px 12px}dialog>button{margin:10px}.form-error{color:#a14538;font-size:13px}#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);max-width:90vw;border-radius:15px;background:#294c3e;color:white;padding:17px 28px;box-shadow:0 10px 35px #16352444;z-index:100;opacity:0;pointer-events:none;transition:opacity .2s}#toast.show{opacity:1}


@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.hero-actions{flex-wrap:wrap}.mirror>.math-grid{min-width:0;flex:1}.sidebar nav{max-height:calc(100vh - 240px);overflow:auto}

.pet-portrait img{width:100%;height:210px;object-fit:contain;border-radius:25px}.pet-large img{width:260px;height:260px;object-fit:contain;border-radius:50%}.solved .filled{animation:grow .6s ease-out}.solved .basket{animation:grow .6s ease-out}@keyframes grow{50%{transform:translateY(-8px) scale(1.04)}}

.ruler-scene{overflow:hidden}.ruler-numbers{width:100%;right:auto;transition:transform .12s}.measure-marker{position:absolute;top:0;height:112px;border-left:2px dashed #397b56;pointer-events:none}.measure-marker:before{content:"▼";position:absolute;left:-7px;color:#397b56;top:0}
.level:disabled{opacity:1;background:#f3f1e6}.level:disabled .level-icon{opacity:.7;filter:saturate(.75)}.level:disabled strong{color:#748067}
.auth-layout{display:grid;grid-template-columns:1.1fr 1fr;max-width:1040px;margin:25px auto;border:1px solid #dfe4d1;border-radius:28px;overflow:hidden;background:#fffdf5}.auth-story{padding:45px;background:linear-gradient(#edf2dbed,#f9f3dacc),url('/assets/forest.png') center/cover}.auth-story img{display:block;width:210px;height:210px;object-fit:contain;border-radius:50%;margin:25px auto 0}.auth-panel{padding:40px}.auth-panel h2{font-size:25px}.auth-panel p,.auth-panel small{font-size:13px}.auth-tabs{display:flex;gap:8px;margin-bottom:30px}.auth-tabs button{flex:1;padding:12px 8px;font-size:13px}.auth-panel input{width:100%;min-width:0}.auth-panel small{color:#7a886e}.auth-layout h1{font-size:35px}

/* Compact, responsive journeys: only one chapter is expanded at a time. */
.hero{height:clamp(300px,40vh,390px)}.hero-copy{padding:30px 36px}.hero h1{font-size:clamp(27px,2.5vw,38px);margin:12px 0}.hero-actions{margin:18px 0}.hero-note{bottom:16px}.section-title{margin:24px 0 16px}.overview{margin:16px 0;gap:12px;flex-wrap:wrap}.chapter{margin:12px 0;border:1px solid #dce2cf;border-radius:18px;background:#fcfaf2;overflow:hidden}.chapter summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 22px;cursor:pointer;font-size:18px;font-weight:700;list-style:none}.chapter summary::-webkit-details-marker{display:none}.chapter summary:hover{background:#edf2e2}.chapter summary:focus-visible,.report-fold summary:focus-visible{outline:3px solid #72926d;outline-offset:-4px}.chapter-meta{display:flex;align-items:center;gap:16px;font-size:12px;font-weight:400;color:#748067;white-space:nowrap}.chapter-chevron{font-size:22px;transition:transform .2s}.chapter[open] .chapter-chevron{transform:rotate(180deg)}.chapter .levels{padding:0 18px 18px;gap:12px}.chapter .level{min-height:140px;padding:14px 8px;gap:7px}.chapter .level-icon{font-size:30px}.chapter .level strong{font-size:14px}footer{margin-top:24px;padding:18px 0}
.home-heading{padding:12px 0 22px}.home-heading h1{font-size:clamp(24px,2.3vw,32px);margin:12px 0}.cozy{padding:24px 32px;margin:8px auto}.pet-large{margin:14px 0;font-size:100px}.pet-large img{width:clamp(140px,24vh,210px);height:clamp(140px,24vh,210px)}.pet-options,.controls{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.room{min-height:340px;padding:35px 20px 24px}.home-layout{align-items:start}.furniture-list{padding:20px}.furniture-list article{padding:14px 0}.monster-list{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}.monster{padding:22px}.monster>div{font-size:52px}.empty{padding:38px}.report{max-width:1100px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.report>.overview,.report>.report-fold{grid-column:1/-1}.report>section,.report>.overview{margin:0}.report>section{padding:22px}.report-fold{border:1px solid #dce2cf;border-radius:18px;background:#fffdf5;min-width:0}.report-fold summary{padding:20px 22px;font-size:20px;font-weight:700;cursor:pointer}.report-fold>div{padding:0 22px 18px}.week{flex-wrap:wrap;gap:18px;padding:12px 0}.mastery{flex-wrap:wrap}.mastery>div{min-width:0}.mastery progress{max-width:100%}dialog{max-height:90dvh;overflow:auto}.home-layout>*,.task-layout>*,.report>*{min-width:0}


/* Curriculum workshops and persistent journey outcomes. */
.journey-hero{height:auto;min-height:260px}.journey-hero .hero-copy{max-width:780px;padding:28px 34px}.journey-hero h1{font-size:30px}.journey-filters{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:22px 0}.journey-filters label{display:flex;align-items:center;gap:10px}.journey-filters select{padding:10px;border:1px solid #dce2cf;border-radius:10px;background:#fffdf5;color:#294b3e}.memory-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}.memory-grid article{padding:18px;border-radius:14px;background:#eef2e1}.memory-grid article>span{display:block;font-size:32px;margin-bottom:12px}.memory-grid p{font-size:13px}.companion{position:relative;display:inline-block}.companion-badge{position:absolute;right:-8px;bottom:0;font-size:40px}.growth-goal{display:grid;gap:12px;padding:18px;max-width:470px;margin:auto;background:#edf2df;border-radius:16px}.growth-goal progress{width:100%;height:12px;accent-color:#467554}.home-memories{margin-top:20px}.mini-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;margin:14px auto;max-width:170px}.mini-grid i{aspect-ratio:1;background:#fffdf5}.mini-grid i.filled{background:#65985b}.number-wheels{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:12px auto}.number-wheel{display:flex;flex-direction:column;gap:8px;align-items:center;min-width:58px;padding:10px;background:#f0f3e5;border-radius:14px}.number-wheel strong{font-size:27px}.number-wheel small{font-size:12px}.number-wheel button{min-width:44px;min-height:44px;padding:6px}.machine-label{text-align:center;margin:14px;color:#477355}.sorting-bins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.sorting-bins section{padding:10px;background:#eef1e5;border-radius:16px;text-align:center}.sorting-bins .tray{min-height:58px}.sorting-bins h3{font-size:15px}.sorting-bins button{padding:10px}.fraction-bar{display:flex;max-width:500px;min-height:100px;margin:30px auto;border:3px solid #bf9653;border-radius:14px;overflow:hidden}.fraction-bar button{flex:1;min-width:0;border-radius:0;padding:4px;border-right:2px dashed #cdb37f}.fraction-bar button.filled{background:#f3ca86}.angle-board{width:min(100%,400px);display:block;margin:auto}.stack-model{display:grid;grid-template-columns:repeat(3,70px);gap:10px;justify-content:center;background:#edf2e3;padding:16px;width:fit-content;margin:auto}.cube-stack{display:flex;flex-direction:column;justify-content:end;align-items:center}.cube-stack span{display:flex;align-items:center;justify-content:center;background:#88ab80;width:52px;color:white;border:2px solid #49764a}.cube-stack small{margin-top:6px}.projection-bars{height:80px;display:flex;align-items:end;justify-content:center;gap:12px}.projection-bars span{width:50px;background:#7da570}.curriculum-grid .original{color:#236c9b;border:2px solid #236c9b}.curriculum-grid .filled{background:#7fa26c}.survey{font-size:27px;line-height:1.8;max-width:480px;text-align:center;margin:auto}.count-column{display:flex;flex-direction:column-reverse;gap:3px;align-items:center;margin:10px}.count-column i{width:35px;height:12px;background:#669257}.calendar-board{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;max-width:450px;margin:auto;text-align:center}.calendar-board button{padding:8px 0;min-height:44px}.fence-model{display:flex;align-items:center;justify-content:center;width:180px;max-height:190px;border:9px dashed #b29462;background:#dfeaca;margin:20px auto}.world-celebration{background:#e9f0db;border:1px solid #afc396;border-radius:16px;text-align:center;padding:14px;margin-top:16px}.world-art{font-size:40px;animation:world-grow .9s ease-out}.effect-train{animation:world-arrive 1s ease-out}.world-celebration p{font-size:14px}.task-story{font-size:13px!important;color:#6b7a57}.board:has(.number-wheels){min-height:240px}.warehouse{text-align:center;font-size:18px}.journey-hero small{display:block;font-size:12px}.home-memories>div{padding:18px}.report-fold{margin-top:16px}
@keyframes world-grow{from{transform:scale(.6);opacity:.3}to{transform:scale(1);opacity:1}}@keyframes world-arrive{from{transform:translateX(-30%);opacity:0}to{transform:translateX(0);opacity:1}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.abacus-beads{max-width:40px;word-break:break-all;font-size:13px;line-height:1.1;min-height:28px;color:#b38a41}.theme-harbor{background:linear-gradient(180deg,#f6fcfc,#edf5ef)}.theme-harbor .task-story{color:#286a7d}.theme-forest{background:linear-gradient(180deg,#fffdf5,#f3f5e8)}
.furniture-list{max-height:65dvh;overflow:auto;scrollbar-width:thin;scrollbar-color:#a2b394 transparent}.discovery-list .monster{padding:18px}.discovery-list .monster>div{font-size:32px}.discovery-list h2{font-size:18px}*{scrollbar-width:thin;scrollbar-color:#a5b59b transparent}*::-webkit-scrollbar{width:8px;height:8px}*::-webkit-scrollbar-thumb{background:#a5b59b;border:2px solid transparent;background-clip:padding-box;border-radius:10px}*::-webkit-scrollbar-button{display:none}

/* Tablet layouts: preserve room for manipulation in portrait and split view. */
header > *, .auth-layout > *, .levels > *, .room > *, .sorting-bins > * { min-width: 0; }
.wallet button:last-child { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.level strong, .guide-message, .chapter summary > span:first-child { overflow-wrap: anywhere; }


@media (hover:none) and (pointer:coarse) {
  button:hover:not(:disabled) { transform:none; }
  input, select, textarea { font-size:16px; }
}

.client-switch { display:flex; justify-content:flex-end; align-items:center; gap:8px; padding:6px 3%; background:#edf1e3; color:#607354; font-size:12px; }
.client-switch select { min-height:32px; padding:4px 10px; border:1px solid #cad6bf; border-radius:8px; background:#fffdf5; color:#365542; }

/* Shared activity shell: the active task owns the viewport. */
[hidden] { display:none !important; }
.chapter-picker { display:flex; align-items:center; gap:12px; margin:16px 0; }
.chapter-picker select { min-width:0; max-width:100%; padding:10px; border:1px solid #cad6bf; border-radius:10px; background:#fffdf5; color:#365542; }
.workshop-fold { margin-top:0; }
.workshop-fold .furniture-list { border:0; }
html[data-view=task] body { height:100dvh; padding:0; overflow:hidden; }
html[data-view=task] #header, html[data-view=task] .client-switch { display:none; }
html[data-view=task] #game { height:100dvh; max-width:1400px; width:100%; display:flex; flex-direction:column; gap:10px; padding:12px; }
html[data-view=task] .task-top { flex:none; margin:0; min-height:44px; gap:8px; }
html[data-view=task] .task-top > span { display:none; }
html[data-view=task] .task-top button { min-height:44px; padding:8px 12px; }
html[data-view=task] .steps { gap:12px; }
html[data-view=task] .task-layout { display:flex; flex:1; min-height:0; }
html[data-view=task] .scene { flex:1; min-width:0; min-height:0; padding:12px; border-radius:20px; position:relative; display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:8px; }
html[data-view=task] .guide { display:none; }
html[data-view=task] .task-title { padding:8px 12px; border-radius:14px; box-shadow:none; }
html[data-view=task] .task-title .eyebrow, html[data-view=task] .task-story { display:none; }
html[data-view=task] .task-title h1 { font-size:20px; line-height:1.3; margin:0 0 5px; }
html[data-view=task] .task-title p { font-size:17px; line-height:1.5; margin:0; }
html[data-client][data-view=task] .board { flex:none; min-height:0; padding:4px; overflow:auto; align-content:center; }
html[data-client][data-view=task] .board .instruction { margin:4px 0 8px; line-height:1.4; }
html[data-client][data-view=task] .board .math-grid { width:min(100%,390px,calc(var(--board-space,450px) - 130px)); margin:8px auto; gap:4px; }
html[data-client][data-view=task] .board .controls { margin:8px 0; gap:8px; }
html[data-client][data-view=task] .board p { margin:6px 0; }
html[data-client][data-view=task] .board .number-wheels { margin:6px auto; gap:8px; }
html[data-client][data-view=task] .board .number-wheel { gap:4px; padding:6px; }
html[data-view=task] .task-actions { padding:0; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
html[data-view=task] .task-actions > button { min-height:44px; padding:8px 14px; }
html[data-view=task] .task-actions > [data-act=reset], html[data-view=task] .task-actions > [data-act=hear] { display:none; }
html[data-view=task] .task-actions > [data-act=check] { order:10; }
html[data-view=task] #feedback:empty { display:none; }
html[data-view=task] #feedback:not(:empty) { position:absolute; z-index:5; left:12px; right:12px; bottom:70px; max-height:calc(100% - 100px); overflow:auto; background:#fffdf5; border:1px solid #c3d4b3; box-shadow:0 6px 30px #294b3e33; border-radius:16px; padding:10px; }
html[data-view=task] #feedback .world-art { font-size:30px; }
html[data-view=task] #feedback p { font-size:16px; margin:6px 0; }
html[data-client=phone][data-view=task] #game { padding:6px; gap:6px; }
html[data-client=phone][data-view=task] .scene { padding:8px; gap:6px; }
html[data-client=phone][data-view=task] .steps { gap:5px; font-size:10px; }
html[data-client=phone][data-view=task] .task-title h1 { font-size:17px; }
html[data-client=phone][data-view=task] .task-title p { font-size:15px; }
html[data-client=phone][data-view=task] .task-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
html[data-client=phone][data-view=task] .task-actions > button { font-size:13px; padding:8px; }
html[data-client=phone][data-view=task] #feedback:not(:empty) { bottom:112px; }

/* Geometry is semantic: step circles and square cells must not stretch. */
.steps { align-items:center; flex-shrink:0; }
.steps span { white-space:nowrap; flex-shrink:0; }
.steps b { display:inline-flex; align-items:center; justify-content:center; flex:0 0 32px; width:32px; height:32px; padding:0; border-radius:50%; line-height:1; }
.math-grid button, .math-grid span { min-width:0; min-height:0; overflow:hidden; }
.clock { flex-shrink:0; aspect-ratio:1; }
.pet-portrait img, .pet-large img { object-fit:contain; }
html[data-client=phone] .steps b { flex-basis:28px; width:28px; height:28px; padding:0; }
html[data-client=phone][data-view=task] .task-top { flex-wrap:nowrap; }
html[data-client=phone][data-view=task] .task-top button { font-size:12px; padding:6px 8px; }
html[data-view=task] .task-layout { align-items:stretch; }
.wallet-balance { display:inline-flex; flex:none; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:4px 8px; white-space:nowrap; line-height:1; font-variant-numeric:tabular-nums; }
.coin-icon { display:block; flex:0 0 24px; width:24px; height:24px; aspect-ratio:1; }
.wallet-balance > span { display:block; line-height:1.2; }
html[data-client][data-view=task] .board[data-type=shop] .tray { min-height:48px; padding:8px; }
html[data-client][data-view=task] .board[data-type=shop] h3 { font-size:15px; margin:8px 0; }
html[data-client][data-view=task] .board[data-type=shop] .order { margin:6px 0; padding:10px; }
html[data-client][data-view=task] .board[data-type=projection] .stack-model { grid-template-columns:repeat(3,50px); gap:6px; padding:8px; }
html[data-client][data-view=task] .board[data-type=projection] .cube-stack span { width:38px; height:calc(var(--stack-height)*16px) !important; font-size:12px; }
html[data-client][data-view=task] .board[data-type=projection] .projection-bars { height:40px; }
html[data-client][data-view=task] .board[data-type=projection] .projection-bars span { height:calc(var(--stack-height)*12px + 2px) !important; }
html[data-client][data-view=task] .board[data-type=projection] > p { font-size:12px; line-height:1.4; }
html[data-client=phone][data-view=task] .board .controls button { min-height:40px; padding:7px 10px; font-size:12px; }
html[data-client=phone][data-view=task] .board .controls { gap:5px; }
html[data-client=phone][data-view=task] .board .tray { min-height:48px; padding:8px; }
html[data-client=phone][data-view=task] .board .baskets { margin-top:10px; }
html[data-client=phone][data-view=task] .board .basket { min-height:88px; }
html[data-client=phone][data-view=task] .board .basket > div { min-height:36px; }
html[data-client=phone][data-view=task] .board .scale { margin:35px 18px 8px; }
html[data-client=phone][data-view=task] .board .scale-foot { font-size:35px; }
html[data-client=phone][data-view=task] .board .beam span { padding:14px 6px; font-size:12px; }
html[data-client=phone][data-view=task] .board .number-wheel { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; min-width:0; text-align:center; }
html[data-client=phone][data-view=task] .board .number-wheel small { grid-column:1/-1; grid-row:1; }
html[data-client=phone][data-view=task] .board .number-wheel strong { grid-column:1/-1; grid-row:2; font-size:22px; }
html[data-client=phone][data-view=task] .board .number-wheel button { min-width:30px; min-height:36px; grid-row:3; }
html[data-client=phone][data-view=task] .board .abacus-beads { grid-column:1/-1; justify-self:center; }
html[data-client=phone][data-view=task] .board[data-type=groups] .number-wheels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
html[data-client=phone][data-view=task] .board .machine-label { margin:5px; font-size:13px; }
html[data-client=phone][data-view=task] .board .sorting-bins { gap:5px; }
html[data-client=phone][data-view=task] .board .sorting-bins section { padding:5px; }
html[data-client=phone][data-view=task] .board .sorting-bins h3 { font-size:12px; }
html[data-client=phone][data-view=task] .board .sorting-bins .tray { min-height:40px; padding:3px; }
html[data-client=phone][data-view=task] .board .sorting-bins button { padding:6px; min-height:36px; }
html[data-client=phone][data-view=task] .board .fence-model { width:130px; max-height:130px; margin:8px auto; font-size:13px; }
html[data-client=phone][data-view=task] .board .calendar-board { gap:3px; }
html[data-client=phone][data-view=task] .board .calendar-board button { min-height:36px; padding:5px 0; }
html[data-client=phone][data-view=task] .board .clock { margin:8px auto; }
html[data-client=phone][data-view=task] .board .math-grid { width:min(100%,340px,calc(var(--board-space,400px) - 140px)); }
/* Use the visible browser height; retain an escape path for small/zoomed windows. */
html[data-view=task] body { height:auto; min-height:var(--app-height,100dvh); overflow-y:auto; }
html[data-view=task] #game { height:var(--app-height,100dvh); min-height:480px; }
html[data-client][data-view=task] .board { align-content:start; }
html[data-client=tablet][data-view=task] .board[data-type=projection],
html[data-client=desktop][data-view=task] .board[data-type=projection] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:center; align-items:center; gap:8px 16px; }
html[data-client=tablet][data-view=task] .board[data-type=projection] > .instruction,
html[data-client=desktop][data-view=task] .board[data-type=projection] > .instruction { grid-column:1/-1; }
html[data-client=tablet][data-view=task] .board[data-type=projection] > p:nth-child(2),
html[data-client=desktop][data-view=task] .board[data-type=projection] > p:nth-child(2) { grid-column:1/-1; }
html[data-client=tablet][data-view=task] .board[data-type=projection] .stack-model,
html[data-client=desktop][data-view=task] .board[data-type=projection] .stack-model { grid-column:1; grid-row:3/5; }
html[data-client=tablet][data-view=task] .board[data-type=projection] > p:nth-child(4),
html[data-client=desktop][data-view=task] .board[data-type=projection] > p:nth-child(4) { grid-column:1; grid-row:5; }
html[data-client=tablet][data-view=task] .board[data-type=projection] .number-wheels,
html[data-client=desktop][data-view=task] .board[data-type=projection] .number-wheels { grid-column:2; grid-row:3; }
html[data-client=tablet][data-view=task] .board[data-type=projection] .projection-bars,
html[data-client=desktop][data-view=task] .board[data-type=projection] .projection-bars { grid-column:2; grid-row:4; }
.task-buddy { display:none; }
html[data-client=tablet][data-view=task] .guide,
html[data-client=desktop][data-view=task] .guide { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; flex:0 0 180px; width:180px; min-height:0; overflow:auto; gap:10px; padding:14px; text-align:center; }
html[data-client=desktop][data-view=task] .guide { flex-basis:230px; width:230px; }
html[data-view=task] .guide .guide-message { padding:12px; min-height:0; font-size:13px; line-height:1.6; }
html[data-view=task] .guide .pet-portrait { padding:0; font-size:64px; }
html[data-view=task] .guide .pet-portrait img { width:100%; height:110px; object-fit:contain; }
html[data-view=task] .guide > h3 { display:block; margin:0; font-size:14px; }
html[data-view=task] .guide > p { display:none; }
html[data-view=task] .guide .challenge { display:none; }
html[data-view=task] .guide > small { margin-top:auto; font-size:11px; }
html[data-view=task] .guide > button { font-size:13px; padding:10px; min-height:44px; }
html[data-client=phone][data-view=task] .task-title { position:relative; padding-right:54px; }
html[data-client=phone][data-view=task] .task-buddy { display:flex; align-items:center; justify-content:center; position:absolute; right:6px; top:50%; transform:translateY(-50%); padding:0; width:44px; height:44px; min-height:44px; border-radius:50%; font-size:30px; overflow:hidden; }
html[data-client=phone][data-view=task] .task-buddy img { width:42px; height:42px; object-fit:contain; }
html[data-client=phone][data-view=task] .board[data-type=bridge] .bridge-story { margin:6px 0; padding:10px; font-size:13px; }
html[data-client=phone][data-view=task] .board[data-type=bridge] .blocks { margin:8px 0; }
html[data-client=phone][data-view=task] .board[data-type=bridge] .blocks h3 { margin:5px 0; font-size:14px; }
html[data-client=phone][data-view=task] .board[data-type=bridge] .ten-blocks { font-size:28px; min-height:64px; gap:3px; }
html[data-client=phone][data-view=task] .board[data-type=bridge] .one-blocks { min-height:64px; gap:3px; }

/* Primary screens occupy the available shell; details are paged or in dialogs. */
html[data-view]:not([data-view=task]):not([data-view=auth]) body { height:var(--app-height,100dvh); min-height:560px; display:grid; grid-template-rows:auto auto minmax(0,1fr); }
html[data-view]:not([data-view=task]):not([data-view=auth]) #game { width:100%; min-height:0; padding:14px 3%; }
html[data-view]:not([data-view=task]) .client-switch { padding:3px 3%; font-size:11px; }
html[data-view]:not([data-view=task]) .client-switch select { min-height:28px; padding:3px 8px; font-size:12px; }
html[data-view]:not([data-view=task]) header { min-height:64px; padding-top:10px; padding-bottom:10px; gap:8px 14px; }
html[data-view]:not([data-view=task]) .brand { font-size:21px; }
html[data-view]:not([data-view=task]) .brand small { font-size:9px; margin-top:4px; }
.panel-trigger { padding:10px 16px; min-height:40px; }
.card-pager { display:flex; justify-content:center; align-items:center; gap:12px; padding:8px; font-size:12px; }
.card-pager button { min-height:36px; padding:6px 12px; }
html[data-view=pet] #game { display:flex; justify-content:center; }
html[data-view=pet] .cozy { width:100%; max-width:960px; margin:0; padding:18px 24px; display:grid; grid-template-columns:220px minmax(0,1fr); grid-template-rows:auto auto auto auto; gap:10px 24px; align-content:center; align-items:center; }
html[data-view=pet] .cozy > .eyebrow { display:none; }
html[data-view=pet] .cozy > h1 { grid-column:1/-1; font-size:27px; line-height:1.4; margin:0; }
html[data-view=pet] .pet-large { grid-column:1; grid-row:2/5; margin:0; }
html[data-view=pet] .pet-large img { width:190px; height:190px; }
html[data-view=pet] .cozy > p { margin:0; font-size:13px; }
html[data-view=pet] .growth-goal { width:100%; padding:12px; gap:8px; }
html[data-view=pet] .controls { margin:0; gap:8px; }
html[data-view=pet] .controls button { padding:10px; font-size:13px; }
html[data-view=pet] .panel-trigger { grid-column:1/-1; justify-self:center; }
html[data-view=pet] .cozy > p:last-child { grid-column:1/-1; font-size:11px; }
html[data-view=home] #game { display:flex; flex-direction:column; gap:10px; }
html[data-view=home] .home-heading { padding:0; flex:none; }
html[data-view=home] .home-heading .eyebrow,html[data-view=home] .home-heading p { display:none; }
html[data-view=home] .home-heading h1 { font-size:24px; margin:0; }
html[data-view=home] .home-layout { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; gap:10px; }
html[data-view=home] .room { height:100%; min-height:0; padding:18px; }
html[data-view=home] .room-slot { min-height:0; }
html[data-view=home] .room-slot span { font-size:40px; }
html[data-view=home] .panel-trigger { justify-self:center; }
html[data-view=map] .journey-hero { min-height:0; }
html[data-view=map] .journey-hero .hero-copy { max-width:none; padding:14px 22px; }
html[data-view=map] .journey-hero .eyebrow,html[data-view=map] .journey-hero small { display:none; }
html[data-view=map] .journey-hero h1 { font-size:24px; margin:0 0 6px; }
html[data-view=map] .journey-hero p { font-size:13px; line-height:1.5; margin:0; }
html[data-view=map] .hero-actions { margin:10px 0 0; }
html[data-view=map] .hero-actions button { padding:10px 14px; min-height:40px; }
html[data-view=map] .overview { padding:10px 14px; margin:10px 0; font-size:12px; }
html[data-view=map] .overview button { min-height:36px; font-size:12px; }
html[data-view=map] .journey-filters { margin:8px 0; gap:12px; font-size:12px; }
html[data-view=map] .journey-filters select { padding:6px; }
html[data-view=map] .journey-filters small { display:none; }
html[data-view=map] .section-title { display:none; }
html[data-view=map] .chapter-picker { margin:8px 0; font-size:13px; }
html[data-view=map] .chapter-picker select { padding:7px; }
html[data-view=map] .chapter summary { padding:10px 14px; font-size:15px; }
html[data-view=map] .chapter { margin:8px 0; }
html[data-view=map] .chapter .level { min-height:100px; padding:10px 6px; gap:5px; }
html[data-view=map] footer { display:none; }
html[data-view=monsters] .home-heading,html[data-view=discoveries] .home-heading { padding:0; }
html[data-view=monsters] h1,html[data-view=discoveries] h1 { font-size:24px; margin:0 0 6px; }
html[data-view=monsters] .home-heading p,html[data-view=discoveries] .home-heading p { font-size:12px; margin:0 0 10px; }
html[data-view=monsters] .monster,html[data-view=discoveries] .monster { padding:14px; }
html[data-view=monsters] .monster > div,html[data-view=discoveries] .monster > div { font-size:28px; }
html[data-view=monsters] .monster h2,html[data-view=discoveries] .monster h2 { font-size:17px; }
html[data-view=creative] .cozy { padding:12px 18px; margin:0 auto; }
html[data-view=creative] .cozy > .eyebrow { display:none; }
html[data-view=creative] h1 { font-size:24px; margin:0 0 8px; }
html[data-view=creative] p { font-size:12px; line-height:1.5; margin:6px 0; }
html[data-view=creative] .math-grid { width:min(260px,30dvh); margin:10px auto; }
html[data-view=creative] form { display:flex; align-items:end; justify-content:center; gap:10px; flex-wrap:wrap; }
html[data-view=creative] form label { margin:0; }
html[data-view=creative] .controls { margin:8px 0; }
html[data-client=phone]:not([data-view=task]) #game { padding:10px 12px; }
html[data-client=phone][data-view=pet] .cozy { padding:12px; display:flex; flex-direction:column; gap:8px; justify-content:center; }
html[data-client=phone][data-view=pet] .cozy h1 { font-size:20px; }
html[data-client=phone][data-view=pet] .pet-large img { width:90px; height:90px; }
html[data-client=phone][data-view=pet] .pet-large { font-size:70px; line-height:1; }
html[data-client=phone][data-view=pet] .companion-badge { font-size:25px; }
html[data-client=phone][data-view=pet] .growth-goal { font-size:12px; padding:8px; }
html[data-client=phone][data-view=pet] .controls button { font-size:11px; padding:8px; }
html[data-client=phone][data-view=map] .journey-hero .hero-copy { padding:10px 12px; }
html[data-client=phone][data-view=map] .journey-hero h1 { font-size:19px; }
html[data-client=phone][data-view=map] .journey-hero p { display:none; }
html[data-client=phone][data-view=map] .overview { display:flex; flex-wrap:wrap; gap:6px; padding:8px; margin:6px 0; }
html[data-client=phone][data-view=map] .overview button { padding:6px 8px; font-size:11px; }
html[data-client=phone][data-view=map] .journey-filters { margin:5px 0; gap:8px; }
html[data-client=phone][data-view=map] .chapter .level { min-height:90px; }
html[data-client=phone][data-view=map] .chapter .level-icon { font-size:24px; }
html[data-client=phone][data-view=map] .chapter-picker { margin:5px 0; }
html[data-client=phone][data-view=map] .panel-trigger { padding:6px 10px; min-height:32px; font-size:12px; }
html[data-client=phone][data-view=home] .room { padding:10px; gap:8px; }
html[data-client=phone][data-view=home] .room-slot span { font-size:28px; }
html[data-client=phone][data-view=creative] .cozy { padding:8px; }
html[data-client=phone][data-view=creative] h1 { font-size:18px; }
html[data-client=phone][data-view=creative] .math-grid { width:min(220px,28dvh); }
/* Exploration is intentionally scrollable; other primary pages use the shell. */
html[data-view=map] body { display:block !important; height:auto !important; min-height:var(--app-height,100dvh); }
html[data-view=map] #game { height:auto; }
html[data-view=parent] .home-heading { padding:0; }
html[data-view=parent] .home-heading .eyebrow { display:none; }
html[data-view=parent] h1 { font-size:22px; margin:0 0 8px; }
html[data-view=parent] .report { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
html[data-view=parent] .report > .overview,html[data-view=parent] .report-tabs,html[data-view=parent] .report > section { width:100%; }
html[data-view=parent] .report > section { padding:12px; }
html[data-view=parent] .report p { margin:8px 0; font-size:13px; line-height:1.6; }
html[data-view=parent] .report h2 { font-size:18px; margin:5px 0; }
html[data-view=parent] .report .panel-trigger { padding:8px; font-size:12px; }
.report-tabs { display:flex; gap:10px; }
html[data-view=creative] .form-error:empty { display:none; }
html[data-view=creative] form input { margin-top:4px; padding:8px; }
html[data-view=creative] form button { min-height:40px; padding:8px 12px; }
html[data-client=phone][data-view=creative] .cozy > p:first-of-type { display:none; }
html[data-client=phone][data-view=creative] .math-grid { width:min(180px,25dvh); margin:6px auto; }
html[data-client=tablet][data-view=discoveries] .monster-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
html[data-client=tablet][data-view=discoveries] .monster { padding:10px; }
html[data-client=tablet][data-view=discoveries] .monster h2 { margin:6px 0; }
html[data-client=tablet][data-view=discoveries] .monster p { margin:6px 0; font-size:12px; }
html[data-client=tablet][data-view=discoveries] .controls { margin:10px 0; }
html[data-view=task] .result { width:100%; max-width:850px; max-height:100%; overflow:auto; margin:auto; padding:24px; }
html[data-view=task] .result h1 { font-size:25px; }
html[data-view=task] .result-art { font-size:64px; }
html[data-view=task] .result p { font-size:14px; }
html[data-view=map] .journey-filters .chapter-picker { margin:0; gap:10px; }
html[data-view=map] .journey-filters { align-items:center; }
html[data-view=map] .journey-filters .chapter-picker select { max-width:260px; }
html[data-client=phone][data-view=map] .journey-filters .chapter-picker { flex-basis:100%; }
html[data-client=phone][data-view=map] .journey-filters .chapter-picker select { flex:1; max-width:none; }

/* Distinct, device-independent icons for the two header utilities. */
#header .wallet .header-action { display:inline-flex; align-items:center; gap:8px; height:44px; min-height:44px; max-width:180px; padding:5px 12px 5px 5px; border-radius:14px; border:1px solid #d6dfcc; background:#fffdf5; color:#365542; font-size:12px; line-height:1.2; box-shadow:0 2px 0 #294b3e08; }
#header .header-action-icon { display:flex; align-items:center; justify-content:center; flex:0 0 32px; width:32px; height:32px; border-radius:10px; background:#e8efdd; color:#49754d; }
#header .header-action--parent .header-action-icon { background:#f5ecd5; color:#947034; }
#header .header-action-icon svg { display:block; width:22px; height:22px; flex:none; }
#header .header-action-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#header .wallet .header-action:hover { border-color:#9eb88e; background:#f0f5e8; }
html[data-client=phone] #header .wallet .header-action { max-width:140px; gap:5px; padding-right:8px; }

/* Shared close control: fixed geometry and accessible touch target. */
.dialog-head .icon-close,.dialog-header .icon-close { display:inline-flex; align-items:center; justify-content:center; flex:0 0 44px; width:44px; height:44px; min-width:44px; min-height:44px; max-width:44px; max-height:44px; padding:0; margin:0; border:1px solid #d8e2d1; border-radius:50%; background:#edf2e6; color:#49634d; box-shadow:none; line-height:1; cursor:pointer; }
.dialog-head .icon-close svg,.dialog-header .icon-close svg { display:block; width:20px; height:20px; flex:none; pointer-events:none; }
.dialog-head .icon-close:hover,.dialog-header .icon-close:hover { background:#dfead5; border-color:#9fb594; transform:none; }
.dialog-head .icon-close:active,.dialog-header .icon-close:active { background:#d2e1c7; }
.dialog-head .icon-close:focus-visible,.dialog-header .icon-close:focus-visible { outline:3px solid #d9a64d; outline-offset:3px; }
.dialog-head,.dialog-header { gap:16px; }
.dialog-head h2,.dialog-header h2 { min-width:0; overflow-wrap:anywhere; }

/* Unified interaction feedback; keyboard focus remains visible. */
:is(button,a,summary,input,select,textarea,[role=button]) { -webkit-tap-highlight-color:transparent; }
:is(button,a,summary,input,select,textarea,[role=button]):focus-visible { outline:2px solid #6c8d61 !important; outline-offset:3px; }
html[data-input=pointer] :is(button,a,summary,[role=button]):focus { outline:none !important; }
dialog > button:not(.icon-close) { min-height:44px; padding:10px 18px; margin:12px 0 0; border-radius:12px; font-size:14px; line-height:1.5; }
dialog > button[data-act=close],dialog > button[data-close] { background:#edf3e6; border-color:#c7d7ba; color:#365542; }
dialog > button:not(.icon-close):hover { background:#e1ecd7; border-color:#a5bd94; transform:none; }
dialog > button:not(.icon-close):active { background:#d4e4c8; }

select { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23536e4b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 10px center !important; background-size:18px 18px !important; padding-right:34px !important; }

.chapter summary { align-items:center; min-height:52px; }
.chapter .chapter-meta { display:inline-flex; align-items:center; justify-content:flex-end; gap:10px; line-height:1; font-variant-numeric:tabular-nums; flex-shrink:0; }
.chapter .chapter-chevron { display:inline-flex; align-items:center; justify-content:center; flex:0 0 28px; width:28px; height:28px; line-height:1; border-radius:8px; background:#edf2e5; color:#58764c; }
.chapter .chapter-chevron svg { display:block; width:18px; height:18px; flex:none; }
.chapter[open] .chapter-chevron { transform:rotate(180deg); }
.report-fold > summary { display:flex; align-items:center; justify-content:space-between; gap:12px; list-style:none; }
.report-fold > summary::-webkit-details-marker { display:none; }
.report-fold > summary::after { content:''; width:8px; height:8px; flex:0 0 8px; margin-right:5px; border-right:2px solid #6c855e; border-bottom:2px solid #6c855e; transform:rotate(45deg); }
.report-fold[open] > summary::after { transform:rotate(225deg); }

/* Shared utility icons: stable geometry independent of the device font. */
button.icon-action { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
button .action-icon { display:block; width:20px; height:20px; flex:0 0 20px; pointer-events:none; }
button.icon-action > span { min-width:0; }
/* Pet actions stay in one shared row, including the companion settings. */
html[data-view=pet] .pet-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; gap:8px; align-items:stretch; }
html[data-view=pet] .pet-actions > button { min-width:0; min-height:44px; margin:0; padding:8px 6px; line-height:1.4; }
html[data-view=pet] .pet-actions > .panel-trigger { grid-column:auto; justify-self:stretch; font-size:13px; }
html[data-client=phone][data-view=pet] .pet-actions { gap:5px; }
html[data-client=phone][data-view=pet] .pet-actions > button { font-size:11px; padding:6px 3px; }
/* Companion motion lives inside its existing stage, keeping actions on screen. */
html[data-view=pet] .living-companion { position:relative; isolation:isolate; padding-top:38px; }
.living-companion > img { animation:companion-breathe 3.6s ease-in-out infinite; transform-origin:50% 90%; }
.pet-speech { position:absolute; top:0; left:50%; transform:translateX(-50%); width:230px; max-width:110%; padding:7px 10px; border:1px solid #d4dfc8; border-radius:14px 14px 14px 3px; background:#fffdf6; color:#527044; font-size:12px; line-height:1.5; z-index:2; }
.pet-particles { position:absolute; inset:0; pointer-events:none; }
.pet-particles i { position:absolute; left:calc(12% + var(--i)*17%); bottom:30%; font-size:24px; font-style:normal; color:#cc796a; opacity:0; animation:pet-hearts 1.8s calc(var(--i)*.13s) ease-out forwards; }
.pet-snack { display:none; position:absolute; right:0; bottom:20%; font-size:34px; }
.react-feed .pet-snack { display:block; animation:pet-snack 1.3s ease-in-out both; }
.react-touch > img { animation:pet-nuzzle .65s ease-in-out 3; }
.react-feed > img { animation:pet-munch .35s ease-in-out 5; }
.react-gift > img { animation:pet-nuzzle .65s ease-in-out 2; }
.growth-path { display:flex; justify-content:space-between; gap:6px; margin-top:8px; }
.growth-path > span { flex:1; min-width:0; opacity:.5; padding-top:6px; border-top:3px solid #d6decc; }
.growth-path > .unlocked { opacity:1; border-color:#79a361; }
.growth-path b { display:block; font-size:20px; }
.growth-path small { display:block; font-size:10px; line-height:1.4; }
.growth-path [aria-current=step] b { animation:stage-glow 2.5s ease-in-out infinite; }
.growth-goal progress { display:block; width:100%; height:10px; border:0; border-radius:10px; overflow:hidden; background:#dce5d0; }
.growth-goal progress::-webkit-progress-bar { background:#dce5d0; border-radius:10px; }
.growth-goal progress::-webkit-progress-value { background:linear-gradient(90deg,#89b36a,#3c8055); border-radius:10px; transition:width .6s ease; }
.growth-goal progress::-moz-progress-bar { background:#639a59; border-radius:10px; }
@keyframes companion-breathe { 50% { transform:translateY(-4px) rotate(1deg) scale(1.015); } }
@keyframes pet-nuzzle { 30% { transform:rotate(-7deg) translateY(-5px); } 70% { transform:rotate(5deg); } }
@keyframes pet-munch { 50% { transform:scale(1.04,.97); } }
@keyframes pet-hearts { 15% { opacity:1; } 100% { opacity:0; transform:translateY(-90px) rotate(15deg); } }
@keyframes pet-snack { 0% { opacity:0; transform:translate(10px,10px); } 35% { opacity:1; } 100% { opacity:0; transform:translate(-70px,-70px) scale(.25); } }
@keyframes stage-glow { 50% { transform:translateY(-2px); } }
html[data-client=phone][data-view=pet] .living-companion { padding-top:28px; }
html[data-client=phone] .pet-speech { font-size:10px; width:240px; max-width:none; padding:4px 8px; }
html[data-client=phone] .growth-path { margin-top:3px; }
html[data-client=phone] .growth-path b { font-size:15px; }
html[data-client=phone] .growth-path small { font-size:9px; }
@media (prefers-reduced-motion:reduce) { .living-companion > img,.pet-particles i,.pet-snack,.growth-path b { animation:none!important; } .pet-particles { display:none; } }
/* Articulated vector companions: eyes, ears, head and tail animate independently. */
html[data-view=pet] .pet-avatar-button { display:inline-flex; padding:0; border:0; border-radius:50%; background:transparent; width:190px; height:209px; overflow:visible; align-items:center; justify-content:center; }
html[data-view=pet] .pet-avatar-button:hover { background:transparent; transform:none; }
.pet-avatar { display:block; width:100%; height:100%; overflow:visible; }
.pet-head { transform-origin:100px 130px; animation:pet-head-idle 4s ease-in-out infinite; }
.pet-eye { transform-box:fill-box; transform-origin:center; animation:pet-blink 5.3s infinite; }
.pet-ears { transform-origin:100px 75px; animation:pet-ear-twitch 7s infinite; }
.pet-tail { transform-origin:140px 182px; animation:pet-tail-wag 3s ease-in-out infinite; }
.pet-body { transform-origin:100px 200px; animation:companion-breathe 3.6s ease-in-out infinite; }
.pet-happy-eyes { display:none; }
.react-touch .pet-eyes,.react-feed .pet-eyes { display:none; }
.react-touch .pet-happy-eyes,.react-feed .pet-happy-eyes { display:block; }
.react-touch .pet-head { animation:pet-head-cuddle .7s ease-in-out 4; }
.react-touch .pet-tail,.react-gift .pet-tail { animation:pet-tail-wag .4s ease-in-out infinite; }
.react-feed .pet-mouth { transform-box:fill-box; transform-origin:center; animation:pet-chew .35s infinite; }
.living-companion[data-mood=curious] .pet-head { transform:rotate(-9deg); animation:none; }
.living-companion[data-mood=wave] .pet-arm { transform-origin:65px 170px; animation:pet-wave .7s ease-in-out 4; }
.living-companion[data-mood=sleepy] .pet-eye { transform:scaleY(.3); animation:none; }
@keyframes pet-blink { 0%,42%,46%,75%,79%,100% {transform:scaleY(1)} 44%,77% {transform:scaleY(.06)} }
@keyframes pet-head-idle { 50% {transform:rotate(2deg) translateY(-2px)} }
@keyframes pet-ear-twitch { 0%,84%,94%,100% {transform:rotate(0)} 87% {transform:rotate(-4deg)} 90% {transform:rotate(3deg)} }
@keyframes pet-tail-wag { 50% {transform:rotate(-12deg)} }
@keyframes pet-head-cuddle { 50% {transform:rotate(-8deg) translateY(-3px)} }
@keyframes pet-chew { 50% {transform:scale(.8,1.5)} }
@keyframes pet-wave { 50% {transform:rotate(35deg)} }
html[data-client=phone][data-view=pet] .pet-avatar-button { width:90px; height:99px; }
@media (prefers-reduced-motion:reduce) { .pet-avatar * { animation:none!important; } }
.pet-portrait > .pet-avatar { width:110px; height:121px; margin:auto; }
.task-buddy > .pet-avatar { width:100%; height:100%; }
.pet-wings { transform-origin:100px 160px; animation:pet-wing-flutter 4s ease-in-out infinite; }
@keyframes pet-wing-flutter { 50% { transform:scaleX(.88); } }
/* Four companion choices share one row in the name/settings dialog. */
dialog .pet-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; width:100%; margin:16px 0 0; }
dialog .pet-options > button { min-width:0; min-height:44px; margin:0; padding:10px 4px; font-size:12px; line-height:1.4; white-space:nowrap; }
html[data-client=phone] dialog .pet-options { gap:4px; }
html[data-client=phone] dialog .pet-options > button { padding:8px 2px; font-size:10px; }
html[data-view=pet] .pet-avatar-button { touch-action:none; user-select:none; -webkit-user-select:none; cursor:grab; }
html[data-view=pet] .pet-turning .pet-avatar-button { cursor:grabbing; }
.pet-turn-hint { display:block; font-size:11px; line-height:1.4; color:#69845b; margin-top:4px; }
.pet-turning .pet-head,.pet-turning .pet-tail,.pet-turning .pet-body { animation-play-state:paused; }
html[data-client=phone] .pet-turn-hint { font-size:9px; margin-top:2px; }
/* Independent task surfaces keep a visible gutter, including compact clients. */
html[data-client][data-view=task] .board[data-type=sort] > .tray { margin-bottom:12px; }
html[data-client][data-view=task] .board .sorting-bins { gap:10px; margin-bottom:12px; }
html[data-client][data-view=task] .board .sorting-bins section { display:flex; flex-direction:column; align-items:stretch; gap:10px; padding:10px; }
html[data-client][data-view=task] .board .sorting-bins h3 { margin:0; }
html[data-client][data-view=task] .board .sorting-bins section > button { align-self:center; margin-top:auto; }
html[data-client][data-view=task] .board .sorting-bins .tray { flex:1; min-height:58px; }
[data-op=nxpick] { touch-action:none; user-select:none; -webkit-user-select:none; cursor:grab; }
.sort-drag-source { opacity:.3; }
.sort-drag-ghost { position:fixed; z-index:10000; pointer-events:none; transform:translate(-50%,-50%); box-shadow:0 8px 20px #294b3e33; }
.sort-drop-active { outline:2px solid #397b56; outline-offset:2px; background-color:#e0edd6!important; }
/* Keep controls apart when labels grow or viewport narrows. */
.dialog-head,.section-title,.order { gap:12px; }
.board > .tray + button { margin-top:12px; }

[data-drag-op], [data-op=fruit] {touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;}
.ten-blocks[data-drop-op],.one-blocks[data-drop-op] {min-height:48px;}

.personal-center{width:min(100%,900px);height:100%;min-height:0;margin:auto;display:flex;flex-direction:column;gap:16px}.personal-center h1{font-size:28px;margin:8px 0}.personal-tabs{display:flex;gap:12px;flex-wrap:wrap}.personal-content{min-height:0;overflow:auto;border:1px solid #d5deca;border-radius:22px;padding:24px;background:#f4f3e6}.inventory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.inventory-grid article,.inventory-furniture article{padding:16px;border:1px solid #d5deca;border-radius:16px;background:#edf1e2;display:flex;flex-direction:column;gap:10px}.inventory-grid strong{font-size:26px}.inventory-furniture{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}#change-password-form{display:grid;gap:12px;max-width:480px}#change-password-form label{display:grid;gap:8px}#change-password-form input{width:100%;min-height:44px}.personal-center .controls{gap:12px;flex-wrap:wrap}@media(max-width:600px){.personal-content{padding:14px}.inventory-grid{gap:8px}.inventory-grid article{padding:10px}.personal-tabs{gap:8px}.personal-tabs button{padding:10px;font-size:13px}.personal-center h1{font-size:22px}}

.monster .knowledge-sprite{width:88px;height:86px;margin:0 auto 12px;flex:none}.knowledge-sprite svg{display:block;width:100%;height:100%}.sprite-body{transform-origin:60px 101px;animation:knowledge-breathe 5s ease-in-out infinite}.sprite-eyes{transform-origin:60px 56px;animation:knowledge-blink 7s infinite}.is-friend .sprite-body{animation-duration:3.6s}@keyframes knowledge-breathe{50%{transform:translateY(-2px) rotate(2deg)}}@keyframes knowledge-blink{0%,44%,48%,100%{transform:scaleY(1)}46%{transform:scaleY(.15)}}@media(prefers-reduced-motion:reduce){.sprite-body,.sprite-eyes{animation:none}}html[data-client=phone] .monster .knowledge-sprite{width:64px;height:62px}

.ranking-self{display:flex;justify-content:space-between;gap:12px;padding:16px;border:1px solid #b9cca6;border-radius:16px;background:#e8efdc;margin-bottom:16px}.ranking-list{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}.ranking-list li{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid #d7dfcc;border-radius:14px}.ranking-list li strong{flex:1;overflow-wrap:anywhere}.rank-number{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;background:#e4ecd7;font-weight:bold}.ranking-mine{background:#edf3e5}

/* Explorer journal: scoped so account tabs cannot inherit the site nav order. */
.explorer-journal{width:min(100%,1000px);gap:12px;justify-content:center;padding:8px 0}.journal-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.journal-kicker{font-size:10px;letter-spacing:2px;font-weight:700;color:#82906d}.journal-heading h1{font-size:28px;letter-spacing:1px;margin:2px 0 8px}.journal-bookmark{color:#8e7752;font-size:12px;letter-spacing:2px}.explorer-journal .personal-tabs{order:0;display:flex;flex-wrap:nowrap;gap:8px;width:auto;justify-content:flex-start;padding-left:20px}.explorer-journal .personal-tabs button{min-height:44px;padding:10px 26px;border-radius:14px 14px 5px 5px;border-color:#c7cfb4;background:#e7ecd9;box-shadow:inset 0 2px #ffffff80;color:#647459}.explorer-journal .personal-tabs button.active{background:#427957!important;color:#fffbed!important;border-color:#326345;box-shadow:0 3px 0 #285637}.explorer-journal .personal-content{border:2px solid #c6b68d;border-radius:24px;background:linear-gradient(100deg,#f4efdc,#fcf8e9 45%,#f5f1df);box-shadow:inset 0 0 0 6px #fffcf16b,0 6px 0 #dcd4b9,0 14px 30px #5a654014;padding:24px;min-height:0}.explorer-id{display:grid;grid-template-columns:120px minmax(0,1fr) 110px;gap:20px;align-items:center;padding:0 6px 18px;border-bottom:1px dashed #c7b991}.explorer-portrait{width:120px;height:132px;border-radius:50% 50% 40% 40%;background:#e5ead3;border:4px solid #fff9e6;box-shadow:0 3px 0 #cad0b2;overflow:hidden}.explorer-portrait .companion-art{width:100%;height:100%;display:block}.explorer-id h2{font-size:26px;margin:6px 0 10px;line-height:1.2}.explorer-id p{font-size:12px;margin:10px 0 0}.explorer-badge{display:inline-block;background:#e4ead0;border:1px solid #cad5b2;border-radius:20px;padding:4px 12px;font-size:11px;color:#547645}.journal-stamp{width:104px;height:104px;border:2px dashed #b8bc8d;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transform:rotate(8deg);color:#71845b}.journal-stamp strong{font-size:30px}.journal-stamp span{font-size:10px}.journal-section-label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;font-weight:bold;margin:16px 0 12px}.journal-section-label small{font-size:11px;font-weight:normal;color:#8d9178}.explorer-journal .inventory-grid{gap:14px}.explorer-journal .inventory-slot{position:relative;display:grid;grid-template-columns:58px 1fr;grid-template-rows:auto auto auto;column-gap:12px;row-gap:3px;text-align:left;padding:14px;border:1px solid #d7c8a1;border-radius:18px;background:#fff9e8;box-shadow:inset 0 -4px #e7dcbc66,0 2px 0 #d9ceb0}.item-art{grid-row:1/4;font-size:35px;width:58px;height:64px;display:grid;place-items:center;align-self:center;border-radius:16px;background:#eee5c9;filter:saturate(.85)}.item-label{font-size:12px;color:#7d805e}.inventory-slot strong{font-size:25px;line-height:1.2}.inventory-slot small{font-size:10px;color:#8a9276}.journal-shortcuts{display:flex;gap:12px;margin-top:20px}.journal-shortcuts button{flex:1;min-height:44px;background:#eaf0df;border:1px solid #cbd7b9;box-shadow:0 3px 0 #c9d2b7;font-size:13px}.journal-footer{display:flex;gap:16px;justify-content:space-between;align-items:center;border-top:1px dashed #d8ceaf;margin-top:20px;padding-top:12px;color:#949780;font-size:11px}.journal-footer button{background:transparent;border:0;font-size:11px;padding:8px}.explorer-journal #change-password-form{margin:0 auto}.explorer-journal #change-password-form label{margin:0}.explorer-journal #change-password-form p{margin:4px 0}.explorer-journal #change-password-form button{margin:4px 0}.explorer-journal .inventory-furniture article{background:#fff9e8;border-color:#d7c8a1}
@media(max-width:600px){.explorer-journal{gap:10px;padding:0}.journal-heading h1{font-size:23px}.journal-bookmark{display:none}.explorer-journal .personal-tabs{padding-left:8px;gap:6px}.explorer-journal .personal-tabs button{padding:9px 14px;font-size:12px;flex:1}.explorer-journal .personal-content{padding:14px}.explorer-id{grid-template-columns:74px minmax(0,1fr);gap:12px;padding:0 0 14px}.explorer-portrait{width:74px;height:86px}.explorer-id h2{font-size:21px}.explorer-id p{font-size:11px}.journal-stamp{display:none}.explorer-journal .inventory-grid{gap:8px}.explorer-journal .inventory-slot{grid-template-columns:1fr;text-align:center;padding:9px 5px;gap:5px}.item-art{grid-row:auto;width:46px;height:46px;font-size:29px;justify-self:center}.inventory-slot strong{font-size:22px}.inventory-slot small{font-size:9px}.journal-shortcuts{gap:8px;margin-top:14px}.journal-shortcuts button{font-size:11px;padding:8px 4px}.journal-footer{margin-top:14px}.journal-section-label small{font-size:10px}}

.honor-hall{width:min(100%,1050px);height:100%;min-height:0;overflow:auto;margin:auto;padding:8px 12px 18px}.honor-heading{text-align:center}.honor-heading h1{font-size:32px;margin:5px 0;color:#365b45;letter-spacing:3px}.honor-heading p{font-size:12px;margin:5px 0 18px;color:#899077}.honor-podium{display:flex;align-items:flex-end;justify-content:center;gap:18px;min-height:225px;padding:12px 18px 0;background:radial-gradient(ellipse at center bottom,#e7d99e77,transparent 70%);border-bottom:2px solid #d4c69d;margin-bottom:18px}.podium-place{position:relative;flex:1;max-width:260px;text-align:center;border:1px solid #cec3a0;border-radius:30px 30px 7px 7px;padding:14px 16px 0;background:linear-gradient(#faf8e9,#e9ecda);box-shadow:inset 0 0 0 5px #fffdf04d}.podium-1{order:2;min-height:215px;background:linear-gradient(#fff8d9,#efdfab);border-color:#c7ad63}.podium-2{order:1;min-height:187px}.podium-3{order:3;min-height:174px;background:linear-gradient(#faf1e4,#e9ddc5)}.podium-laurel{display:block;font-size:42px;line-height:1.2;margin-bottom:8px;filter:saturate(.75)}.podium-title{font-size:10px;color:#8d825c}.podium-place h2{font-size:17px;margin:8px 0;overflow-wrap:anywhere}.podium-place>strong{font-size:23px;color:#6b6744}.podium-place strong small{font-size:10px;font-weight:normal}.podium-rank{display:block;border-top:1px solid #d2c49c;margin-top:12px;padding:8px;font-size:11px;color:#8d7b4e}.my-honor{display:flex;align-items:center;gap:18px;padding:18px 22px;background:#e9efdc;border:1px solid #c3d1ad;border-radius:22px;box-shadow:0 4px 0 #d2dabe;margin:0 0 20px}.honor-medal{width:62px;height:70px;flex:none;display:grid;place-items:center;font-size:36px;color:#b78d35;background:#f2e2ad;border:3px double #c5aa60;border-radius:50% 50% 40% 40%}.honor-growth{flex:1;min-width:0}.honor-growth>small{font-size:10px;color:#7c8b66}.honor-growth h2{font-size:20px;margin:3px 0}.honor-growth p{font-size:11px;margin:4px 0}.honor-growth progress{width:100%;max-width:380px;height:8px}.honor-score{display:flex;flex-direction:column;align-items:center;gap:5px}.honor-score strong{font-size:34px;color:#3b7050}.honor-score span{font-size:11px;color:#7b8568}.honor-roster{border:1px solid #d7d6bb;background:#faf8e9;border-radius:16px;padding:14px 18px}.honor-roster summary{cursor:pointer;font-size:14px;font-weight:bold}.honor-roster summary>span{float:right;font-size:11px;color:#8b9079;font-weight:normal}.honor-roster .ranking-list{margin:14px 0 0}.honor-rules{text-align:center;font-size:10px!important;line-height:1.7;margin:12px 0 0!important;color:#899079}.honor-empty{text-align:center;padding:20px}.honor-empty>span{font-size:44px}.honor-empty h2{font-size:22px}
@media(max-width:600px){.honor-hall{padding:4px 2px 14px}.honor-heading h1{font-size:25px}.honor-heading p{font-size:10px}.honor-podium{gap:8px;padding:8px 0 0;min-height:190px;margin-bottom:14px}.podium-place{padding:10px 5px 0;border-radius:20px 20px 5px 5px}.podium-1{min-height:190px}.podium-2{min-height:170px}.podium-3{min-height:156px}.podium-laurel{font-size:30px}.podium-title{font-size:8px}.podium-place h2{font-size:12px}.podium-place>strong{font-size:19px}.my-honor{padding:12px;gap:10px;margin-bottom:14px}.honor-medal{width:42px;height:52px;font-size:27px}.honor-growth h2{font-size:16px}.honor-growth p{font-size:10px}.honor-score strong{font-size:26px}.honor-score span{font-size:9px}.honor-roster{padding:12px}.honor-roster summary>span{font-size:9px}}

html[data-client][data-view=result]:not([data-view=auth]) body{height:var(--app-height,100dvh);min-height:0;display:block;overflow:hidden}html[data-view=result] #header,html[data-view=result] .client-switch{display:none!important}html[data-view=result] #game{height:100%;max-width:none;padding:16px;display:flex;align-items:center;justify-content:center;overflow:auto}html[data-view=result] .result{width:min(100%,820px);max-height:100%;margin:0;padding:clamp(16px,3vh,32px);display:flex;flex-direction:column;align-items:center;gap:12px;border:2px solid #c9b88d;box-shadow:inset 0 0 0 6px #fff9e877,0 7px 0 #dbd3b9;overflow:auto}html[data-view=result] .result-art{font-size:clamp(50px,12vh,96px);line-height:1.1}html[data-view=result] .result h1{font-size:clamp(22px,3.4vh,32px);margin:0;line-height:1.4}html[data-view=result] .big-stars{font-size:clamp(24px,5vh,38px);line-height:1.2}html[data-view=result] .result p{margin:0;font-size:13px;line-height:1.6}.result-rewards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;max-width:500px}.result-rewards span{display:flex;flex-direction:column;gap:6px;border:1px solid #d8cba8;border-radius:16px;background:#faf4df;padding:12px;font-size:12px}.result-rewards b{font-size:24px;color:#558052}.result-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;width:100%}html[data-view=result] .result-actions button{margin:0;min-height:44px;font-size:13px}html[data-client=phone][data-view=result] .result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}html[data-client=phone][data-view=result] .result-actions .primary{grid-column:1/-1}.result .eyebrow{font-size:10px}@media(max-height:500px){html[data-view=result] .result{gap:6px;padding:12px}html[data-view=result] .result-art{font-size:40px}html[data-view=result] .result p{font-size:11px}.result-rewards span{padding:6px}.result-rewards b{font-size:18px}}

/* One currency artwork, independent of operating-system emoji fonts. */
.coin-icon{display:inline-block;width:28px;height:28px;flex:none;vertical-align:middle;object-fit:contain}.item-art .coin-icon{width:46px;height:46px}.result-rewards .coin-icon{width:28px;height:28px;align-self:center}
html[data-view=account] #game,html[data-view=backpack] #game,html[data-view=password] #game{align-self:stretch;margin:0 auto;overflow:hidden}.explorer-journal{justify-content:flex-start}.explorer-journal .personal-content{flex:1}.journal-footer{margin-top:12px;padding-top:8px}.explorer-journal .personal-content{padding:16px}.explorer-id{padding-bottom:12px}.journal-shortcuts{margin-top:12px}

html[data-view=leaderboard] #game{align-self:stretch;margin:0 auto;overflow:hidden}.journal-section-label{margin-top:10px;margin-bottom:10px}.explorer-journal .inventory-slot{padding-top:10px;padding-bottom:10px}
@media(max-height:850px){.honor-podium{min-height:185px;margin-bottom:12px}.podium-1{min-height:175px}.podium-2{min-height:158px}.podium-3{min-height:148px}.podium-laurel{font-size:30px;margin-bottom:4px}.podium-place h2{margin:4px 0}.podium-rank{margin-top:6px;padding:6px}.my-honor{padding:12px 16px;margin-bottom:12px}.honor-heading p{margin-bottom:10px}.honor-hall{padding-top:0;padding-bottom:8px}}
/* Shop controls always have independent spacing. */
.shop-intro{display:flex;align-items:center;justify-content:space-between;gap:12px}.shop-intro h2{margin:0}.shop-intro p{margin:8px 0}.shop-intro>strong{display:flex;align-items:center;gap:8px;white-space:nowrap}.material-stock{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}.material-stock>span{background:#e7ebd6;padding:8px 12px;border-radius:12px}.material-shop{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.material-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 10px;border:1px solid #ccb987;border-radius:22px;background:linear-gradient(145deg,#fff8df,#ece6cd);box-shadow:0 4px 0 #d9d1b2}.material-card h3,.material-card p{margin:0}.material-card button{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;min-height:44px;width:100%;font-size:15px}.material-cube{display:block;width:48px;height:48px;border:3px solid #ffffff66;border-radius:8px;box-shadow:inset -9px -8px 0 #00000015,0 4px 0 #00000010;background:#bb8c51}.material-stone{background:#a6aba0}.material-glass{background:#b7ddd8}.material-roof{background:#b5684b}.material-leaf{background:#77994f}.shop-note{margin:16px 0 8px;font-size:14px;color:#697655}html[data-view="store"] .personal-content{padding:20px}.personal-tabs{display:flex;gap:10px}.personal-tabs button{flex:1;min-width:0;padding:12px 6px}
@media(max-width:700px){.material-shop{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.material-card{padding:10px 5px;gap:5px;border-radius:14px}.material-cube{width:30px;height:30px}.material-card h3{font-size:16px}.material-card p{font-size:12px}.material-card button{font-size:11px;padding:5px;gap:3px}.shop-intro h2{font-size:21px}.shop-intro p{font-size:12px}.shop-intro>strong{font-size:13px}.material-stock{gap:6px;margin:8px 0}.material-stock>span{font-size:12px;padding:5px 7px}.shop-note{font-size:11px;margin:10px 0}.personal-tabs button{min-width:0;font-size:13px}html[data-view="store"] .personal-content{padding:12px}.material-card .coin-icon{width:16px;height:16px}}
.rank-prize-note{text-align:center;font-size:13px;line-height:1.6;margin:8px 0}.rank-tabs{margin:8px 0}.rank-tabs button{min-height:42px;padding:8px 18px}
@media(max-width:700px){html[data-view="store"] .material-card{gap:3px;padding:8px 5px}html[data-view="store"] .material-card p{line-height:1.2}html[data-view="store"] .material-card .material-cube{width:24px;height:24px}html[data-view="store"] .material-card button{margin:0;min-height:44px}html[data-view="store"] .controls{margin:8px 0;gap:8px}html[data-view="store"] .controls button{font-size:12px;padding:8px;min-height:44px}html[data-view="store"] .journal-heading{margin-bottom:8px}html[data-view="store"] .personal-tabs{margin-bottom:8px}html[data-view="store"] .shop-intro p{display:none}}
html[data-view="store"] .material-card h3,html[data-view="store"] .material-card p{margin:0;line-height:1.3}html[data-view="store"] .shop-intro h2{margin:0}html[data-view="store"] .shop-intro p{margin:6px 0}html[data-view="store"] .material-card button{margin:0}html[data-view="store"] .controls{margin:12px 0 0}html[data-view="store"] .journal-heading{margin-bottom:12px}html[data-view="store"] .personal-tabs{margin-bottom:12px}
@media(min-width:701px) and (max-height:850px){html[data-view="store"] .personal-center{gap:8px;padding:0}html[data-view="store"] .journal-heading,html[data-view="store"] .personal-tabs{margin-bottom:0}html[data-view="store"] .material-card{padding:10px;gap:6px}html[data-view="store"] .material-cube{width:36px;height:36px}html[data-view="store"] .shop-intro p{display:none}html[data-view="store"] .shop-intro h2{font-size:26px}html[data-view="store"] .personal-content{padding:16px}}
.badge-open{padding:0;border:0;background:none;box-shadow:none;cursor:pointer}.honor-medal.badge-open img{width:86px;height:96px;object-fit:contain}.badge-collection{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.badge-card{text-align:center;padding:12px 8px;border:1px solid #d8cfaa;border-radius:16px;background:#f3efd9}.badge-card img{width:76px;height:84px}.badge-card h3{font-size:16px;margin:8px 0}.badge-card p,.badge-card small{font-size:12px;line-height:1.5}.badge-card strong{font-size:12px;color:#3e7852}.badge-card.locked img{filter:grayscale(.8);opacity:.6}.badge-card.locked{background:#efeee5}.badge-card.unlocked{box-shadow:inset 0 0 0 2px #e4c983}
#dialog:has(.badge-collection){width:min(940px,94vw)}
@media(max-width:700px){.badge-collection{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.badge-card{padding:8px}.badge-card img{width:48px;height:54px}.badge-card p{margin:4px 0}.badge-card h3{font-size:14px;margin:4px 0}}
.earned-badges{display:flex;justify-content:center;gap:12px;margin:8px 0}.earned-badges button{display:flex;align-items:center;gap:10px;background:#f5e7af;animation:badge-arrive .55s ease-out}.earned-badges img{width:42px;height:48px}.earned-badges span{font-size:12px}.earned-badges strong{display:block;font-size:16px}@keyframes badge-arrive{from{transform:translateY(8px) scale(.94);opacity:0}to{transform:none;opacity:1}}@media(prefers-reduced-motion:reduce){.earned-badges button{animation:none}}
@media(max-width:700px){#dialog:has(.badge-collection){padding:16px}#dialog:has(.badge-collection)>.dialog-head h2{font-size:21px}#dialog:has(.badge-collection)>p{font-size:12px;line-height:1.5;margin:10px 0}#dialog .badge-card p{font-size:11px;line-height:1.35;margin:4px 0}#dialog .badge-card small{font-size:10px;line-height:1.3}#dialog .badge-card h3{font-size:13px;margin:4px 0}#dialog .badge-card strong{font-size:11px}#dialog .badge-card img{width:40px;height:44px}}
.comprehensive-answer{display:grid;gap:14px;justify-items:center;max-width:480px;margin:16px auto;padding:12px}.comprehensive-answer output{font-size:36px;border:1px solid #bdcbaa;border-radius:16px;background:#fffdf2;padding:12px;min-width:150px;text-align:center}.comprehensive-keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}.comprehensive-keypad button{min-height:48px}
.monster-pagination{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:20px}
html[data-client=desktop][data-view=monsters] .monster-list{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Shared vector identity across display modes. */
.brand .island-brand-mark{display:inline-block;width:36px;height:36px;max-width:none;vertical-align:middle;margin-right:8px;border-radius:10px;object-fit:contain}
@media(max-width:600px){.brand .island-brand-mark{width:30px;height:30px;margin-right:6px}}