/* base.css */
:root{
 --kb-blue-dark:#0069b8;--kb-blue:#00a4ff;--kb-blue-soft:#e3f5ff;--kb-blue-bg:#0a94df;
 --kb-yellow:#ffc928;--kb-orange:#ff8a3d;--kb-green:#59c15b;--card:#fff;--text-main:#163148;
 --text-soft:#60758e;--muted:#8aa5c2;--error:#e63946;--success:#20a65a;--radius-xl:26px;
 --radius-lg:20px;--radius-md:14px;--shadow-soft:0 16px 40px rgba(5,61,112,.30);--shadow-small:0 8px 16px rgba(0,0,0,.12);
 font-family:"Nunito","Segoe UI",system-ui,-apple-system,sans-serif;color:var(--text-main);font-synthesis:none;
}
*{box-sizing:border-box}html{min-height:100%;background:#0288d1}body{margin:0;min-height:100vh;background:radial-gradient(circle at top,#35b4ff 0,var(--kb-blue-bg) 45%,#01619b 100%);padding:18px;color:var(--text-main)}
button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.62}a{color:inherit}.skip{position:absolute;top:-100px;left:20px;background:#fff;padding:10px;z-index:30}.skip:focus{top:10px}[hidden]{display:none!important}
.shell{width:100%;max-width:1200px;margin:0 auto;background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.08));border-radius:32px;overflow:hidden;box-shadow:var(--shadow-soft);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(12px)}
.topbar{display:flex;align-items:center;gap:20px;padding:10px 24px;background:#263238;color:#f5f5f5;min-height:62px}.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-size:18px;font-weight:900;letter-spacing:.02em;white-space:nowrap}.brand>span:last-child{color:#ffd449}.brand-icon{font-size:26px}.version{font-size:11px;color:#cfd8dc;border:1px solid #607d8b;border-radius:999px;padding:3px 9px;margin-left:auto}.top-nav{display:flex;align-items:center;gap:5px}.top-nav button{border:0;background:transparent;color:#eceff1;padding:7px 10px;border-radius:999px;font-size:12px;font-weight:700;opacity:.72}.top-nav button:hover,.top-nav button.active{background:rgba(255,255,255,.13);opacity:1}.quiet{border:1px solid #78909c;background:transparent;color:#fff;padding:8px 12px;border-radius:12px;font-weight:800;min-height:40px}.family-logout{margin-left:0}
main{min-height:680px;padding:18px 22px 22px;background:radial-gradient(circle at top,#3ab8ff 0,#0588d4 40%,#0367a4 100%);outline:none}footer{display:flex;justify-content:space-between;color:#e3f2fd;font-size:11px;padding:15px 22px;background:#075f95}
.profile-intro{color:#fff;margin:20px auto 24px;max-width:1020px}.profile-intro .eyebrow{color:#dff4ff}.profile-intro h1{font-size:42px;margin:0 0 8px}.intro{margin:0;color:#d9effc}.profile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:1020px;margin:0 auto}.profile-card{border:0;background:rgba(255,255,255,.97);border-radius:24px;padding:28px;text-align:left;display:flex;flex-direction:column;color:var(--text-main);min-height:300px;box-shadow:var(--shadow-small);transition:.15s transform,.15s box-shadow}.profile-card:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(0,0,0,.2)}.avatar{font-size:58px;background:#dff3ff;border-radius:22px;padding:12px 18px;align-self:flex-start}.profile-card.orange .avatar{background:#fff0d7}.profile-name{font-size:32px;font-weight:900;margin-top:18px}.profile-meta,.profile-count{color:var(--text-soft);font-size:13px}.profile-count{margin-top:14px}.profile-enter{margin-top:auto;background:#e3f5ff;border-radius:12px;padding:10px 14px;font-weight:900;color:#075988}.orange .profile-enter{background:#fff0d7;color:#8b4900}.hint{text-align:center;color:#e3f2fd;font-size:12px;margin:20px 0}
.loading-card{max-width:620px;margin:70px auto;background:#fff;border-radius:22px;padding:34px;text-align:center;box-shadow:var(--shadow-soft)}.loading-icon{display:block;font-size:44px;margin-bottom:10px}.loading-card p{color:var(--text-soft);margin:8px 0 0}.error-state{border:2px solid #ffcdd2}
.app-main-grid{display:grid;grid-template-columns:260px 1fr;gap:18px}.side-menu{display:flex;flex-direction:column;gap:12px}.side-profile,.badge-card,.side-tile{background:rgba(255,255,255,.97);border-radius:var(--radius-lg);box-shadow:var(--shadow-small)}.side-profile{padding:11px 12px;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}.profile-avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:28px;background:#e3f5ff}.side-profile.orange .profile-avatar{background:#fff0d7}.profile-info h2{font-size:15px;margin:0;font-weight:900}.profile-info p{font-size:10px;color:var(--text-soft);margin:2px 0 0}.xp-badge{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:5px}.xp-main,.coin-main,.xp-level{font-size:10px;font-weight:800;padding:4px 8px;border-radius:999px}.xp-main{background:#e3f5ff;color:#1565c0}.coin-main{background:#fff3e0;color:#e65100}.xp-level{background:#00a85a;color:#fff}
.badge-card{padding:11px 12px}.badge-title{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#546e7a;margin-bottom:7px}.badge-list{display:flex;flex-direction:column;gap:6px}.badge-empty{font-size:10px;color:#90a4ae}.badge-chip{display:flex;align-items:center;gap:7px;background:#e3f5ff;border-radius:12px;padding:6px 8px;border:1px solid #bbdefb}.badge-chip .emoji{font-size:15px}.badge-text{display:flex;flex-direction:column}.badge-name{font-size:10px;font-weight:900;color:#1565c0}.badge-desc{font-size:9px;color:#607d8b;line-height:1.25}.badge-more{font-size:9px;color:#607d8b;margin:6px 0 0}.side-tile{padding:10px 12px;display:flex;align-items:center;gap:9px}.side-tile-icon{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:#ffb74d;font-size:20px}.review-tile .side-tile-icon{background:#a5d6a7}.side-tile-text{font-size:12px;font-weight:900}.side-tile-sub{font-size:10px;color:var(--muted)}.coming-soon{opacity:.66}.main-col{min-width:0;display:flex;flex-direction:column;gap:14px}
.hero-daily{background:#ffce32;border-radius:var(--radius-xl);padding:18px 20px;display:grid;grid-template-columns:1fr auto;align-items:center;box-shadow:var(--shadow-soft);position:relative;overflow:hidden}.hero-daily:after{content:"";position:absolute;right:-38px;top:-36px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.25)}.hero-text{position:relative;z-index:1}.hero-kicker{font-size:10px;font-weight:900;letter-spacing:.14em;color:#a85a00;margin:0 0 3px}.hero-text h1{font-size:27px;line-height:1.12;margin:0 0 5px;color:#b85b00}.hero-text p{font-size:12px;color:#805000;margin:0}.hero-meta{font-size:10px;color:#8b5300;margin-top:6px;font-weight:700}.hero-action{position:relative;z-index:2}.hero-trophy{font-size:46px;filter:drop-shadow(0 4px 6px rgba(199,125,0,.45))}
.controls-panel{margin-top:12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:12px}.controls-row{display:flex;flex-wrap:wrap;gap:8px}.controls-pill{background:#fff;border-radius:999px;padding:6px 10px;display:flex;align-items:center;gap:7px;box-shadow:var(--shadow-small);font-size:11px;color:var(--text-soft)}.control-label{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:#37474f}.controls-pill select{border:0;outline:0;background:transparent;font-size:11px;font-weight:800;color:var(--text-main);cursor:pointer}.start-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}.start-btn,.review-btn,.primary{border:0;border-radius:999px;padding:9px 17px;font-size:12px;font-weight:900}.start-btn,.primary{background:linear-gradient(135deg,#ff8a3d,#ff5722);color:#fff;box-shadow:0 6px 14px rgba(204,96,0,.48)}.review-btn{background:#e8f5e9;color:#1b5e20;border:1px solid #a5d6a7}.review-info{font-size:10px;color:#e3f2fd}.start-status{font-size:10px;color:#fff3e0;margin:0;width:100%}.rules-strip{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}.rules-strip span{background:rgba(13,71,161,.88);color:#e3f2fd;border-radius:999px;padding:5px 9px;font-size:9px;font-weight:800}.today-summary{margin-top:10px;padding:11px 14px;border-radius:16px;background:rgba(13,71,161,.92);color:#e3f2fd;font-size:11px}.today-summary p{margin:3px 0 0;opacity:.9}
.quiz-card{background:#fff;border-radius:var(--radius-lg);padding:15px 16px 16px;box-shadow:var(--shadow-soft)}.quiz-header{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:9px}.quiz-header-left{display:flex;flex-direction:column;gap:4px}.tag-row{display:flex;flex-wrap:wrap;gap:5px}.tag-row span{padding:2px 8px;border-radius:999px;background:#e3f5ff;color:#1565c0;font-size:9px;font-weight:800}.tag-row .category{background:#ffecb3;color:#ef6c00}.quiz-header h2{font-size:13px;margin:0}.score-pill{font-size:10px;border-radius:999px;background:#ffecb3;padding:5px 9px;color:#c05d00;font-weight:900;white-space:nowrap}.progress-wrapper{margin-bottom:11px}.progress-label-row{display:flex;justify-content:space-between;font-size:9px;color:var(--text-soft);margin-bottom:4px}.progress-bar{width:100%;height:9px;border-radius:999px;background:#e3f2fd;overflow:hidden}.progress-fill{display:block;height:100%;background:linear-gradient(90deg,#00c853,#ffd600);border-radius:inherit;transition:width .25s}.question-text{font-size:17px;font-weight:900;line-height:1.35;margin:12px 0}.question-image-wrap{text-align:center;margin:6px 0 12px}.question-image-wrap img{max-width:100%;max-height:250px;border-radius:14px;box-shadow:0 6px 14px rgba(0,0,0,.14)}.options{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}.option-btn{border-radius:var(--radius-md);padding:9px 11px;border:2px solid transparent;background:#f9fbff;color:var(--text-main);font-size:12px;display:flex;align-items:center;gap:9px;text-align:left;box-shadow:0 3px 6px rgba(13,71,161,.12);transition:.12s}.option-btn:hover:not(:disabled){transform:translateY(-1px);border-color:#00a4ff;background:#fff}.option-label{width:27px;height:27px;border-radius:50%;background:#00a4ff;color:#fff;display:grid;place-items:center;font-weight:900;flex:0 0 auto}.option-text{flex:1}.option-btn.correct{border-color:#2ecc71;background:#e8f9f0}.option-btn.wrong{border-color:#e53935;background:#ffebee}.image-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.image-option{flex-direction:column;align-items:stretch}.option-img-wrapper{display:block;border-radius:12px;overflow:hidden;background:#e3f2fd}.option-img-wrapper img{display:block;width:100%;max-height:180px;object-fit:contain}.text-answer{width:100%;border-radius:11px;padding:10px 12px;border:2px solid #e3f2fd;background:#f9fbff;outline:0;font-size:13px}.text-answer:focus{border-color:#00a4ff}.check-btn{margin-top:8px;border:0;border-radius:999px;padding:8px 13px;background:#00c853;color:#fff;font-size:11px;font-weight:900}.feedback-row{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-top:5px}.feedback-stack{min-width:0;flex:1}.feedback{font-size:11px;min-height:18px;white-space:pre-wrap}.feedback.correct{color:var(--success);font-weight:800}.feedback.wrong{color:var(--error);font-weight:800}.answer-rewards{display:flex;gap:5px;margin-top:5px}.reward-chip{font-size:9px;font-weight:900;background:#e3f5ff;color:#1565c0;border-radius:999px;padding:4px 7px}.reward-chip.coin{background:#fff3e0;color:#e65100}.bottom-actions{display:flex;gap:7px}.secondary{border-radius:999px;padding:7px 11px;font-size:10px;font-weight:800;border:0;background:#e3f2fd;color:#1565c0}.secondary.outline{background:#fff;border:1px dashed #bbdefb;color:#607d8b}
.result-panel{background:#fff;border-radius:24px;padding:25px;text-align:center;box-shadow:var(--shadow-soft)}.result-emoji{font-size:46px}.result-panel .eyebrow{font-size:9px;color:#607d8b}.result-score{display:flex;justify-content:center;align-items:flex-start;color:#ff6f00}.result-score strong{font-size:68px;line-height:1;font-weight:900}.result-score span{font-size:22px;font-weight:900;margin-top:8px}.result-panel h2{font-size:20px;margin:7px 0 3px}.result-message{font-size:11px;color:#607d8b;max-width:520px;margin:0 auto 10px}.result-stats,.result-rewards{display:flex;justify-content:center;flex-wrap:wrap;gap:7px}.result-stats span,.result-rewards span{font-size:10px;padding:5px 9px;border-radius:999px;background:#f3f7fa}.result-rewards span{background:#fff3e0;color:#e65100;font-weight:900}.result-actions{display:flex;justify-content:center;gap:8px;margin-top:15px}
.report-card,.robotlab-card{background:rgba(255,255,255,.98);border-radius:22px;padding:16px;box-shadow:var(--shadow-soft)}.report-header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.report-header h2,.robotlab-card h2{font-size:17px;margin:0}.report-header p,.robotlab-card>p{font-size:11px;color:var(--text-soft);margin:2px 0 0}.report-badge{border-radius:999px;padding:6px 9px;font-size:9px;background:#e3f5ff;color:#1565c0;font-weight:800}.report-main-grid{display:grid;grid-template-columns:2fr 3fr;gap:12px}.report-chart,.report-table-wrap{background:#f5f8ff;border-radius:16px;padding:10px}.report-chart h3,.report-table-wrap h3{font-size:11px;margin:0 0 7px;color:#1a237e}.report-chart-inner{height:170px;display:flex;align-items:flex-end;gap:6px;padding:20px 2px 0}.report-bar-wrap{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}.report-bar{width:100%;min-width:12px;max-width:42px;border-radius:999px 999px 4px 4px;background:linear-gradient(180deg,#a5d6a7,#43a047);position:relative}.report-bar.mid{background:linear-gradient(180deg,#ffecb3,#ffc107)}.report-bar.low{background:linear-gradient(180deg,#ef9a9a,#e53935)}.report-bar-value{position:absolute;top:-17px;left:50%;transform:translateX(-50%);font-size:8px;font-weight:800}.report-bar-label{font-size:7px;color:#607d8b;margin-top:3px}.report-table-wrap{overflow:auto}.report-table{width:100%;border-collapse:collapse;font-size:9px}.report-table th,.report-table td{padding:5px 4px;text-align:left;border-bottom:1px solid #e0e0e0;white-space:nowrap}.score-high{color:#1b5e20;font-weight:900}.score-mid{color:#ef6c00;font-weight:900}.score-low{color:#c62828;font-weight:900}.report-empty{font-size:11px;color:#607d8b}
.robotlab-card{text-align:left}.robotlab-robot-emoji{text-align:center;font-size:65px;margin:12px 0 4px}.robotlab-level-title{text-align:center;font-size:14px;font-weight:900;color:#1565c0}.robotlab-xpbar{margin-top:13px}.robotlab-xpbar-label{display:flex;justify-content:space-between;font-size:10px;color:#455a64;margin-bottom:4px}.robotlab-xpbar-track{height:12px;background:#e3f2fd;border-radius:999px;overflow:hidden}.robotlab-xpbar-fill{display:block;height:100%;background:linear-gradient(90deg,#00c853,#ffd600);border-radius:inherit}.robotlab-stats{display:flex;justify-content:space-around;margin:17px 0}.robotlab-stat{text-align:center;display:flex;flex-direction:column}.stat-number{font-size:20px;color:#ff6f00;font-weight:900}.stat-label{font-size:9px;color:#607d8b}.robotlab-upgrade-title{font-size:12px;color:#1a237e}.robotlab-upgrade-list{display:flex;flex-direction:column;gap:7px}.robotlab-upgrade-item{display:flex;gap:9px;align-items:center;background:#f3f7ff;padding:9px 11px;border-radius:13px;border:1px solid #bbdefb}.upgrade-icon{font-size:24px}.upgrade-name{font-size:11px;font-weight:900;color:#0d47a1}.upgrade-status{font-size:9px;color:#455a64}.upgrade-locked{opacity:.42}
.login-card{max-width:520px;margin:45px auto;background:#fff;border-radius:24px;padding:36px;box-shadow:var(--shadow-soft)}.login-icon{display:grid;place-items:center;width:62px;height:62px;border-radius:20px;background:#e3f5ff;font-size:31px;margin-bottom:18px}.login-card h1{font-size:30px;margin:0 0 7px}.login-card .eyebrow{color:#607d8b}.login-card .intro{color:#607d8b}.login-form{display:grid;gap:9px;margin-top:22px}.field-label{font-size:11px;font-weight:900;color:#455a64}.login-form .primary{margin-top:8px}.login-status{min-height:18px;color:#c62828;font-size:10px;margin:0}
@media(max-width:900px){.app-main-grid{grid-template-columns:1fr}.side-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));order:2}.main-col{order:1}.report-main-grid{grid-template-columns:1fr}.badge-card{grid-row:span 2}.top-nav{order:3;width:100%}.topbar{flex-wrap:wrap}}
@media(max-width:640px){body{padding:8px}.shell{border-radius:20px}.topbar{padding:9px 12px;gap:8px}.brand{font-size:16px}.version{display:none}.top-nav{gap:2px}.top-nav button{font-size:10px;padding:6px 7px}.quiet{font-size:10px;padding:7px 9px}.family-logout{font-size:10px}main{padding:12px;min-height:720px}footer{padding:12px;font-size:9px}.profile-intro h1{font-size:30px}.profile-grid{grid-template-columns:1fr;gap:12px}.profile-card{min-height:230px;padding:20px}.avatar{font-size:42px}.profile-name{font-size:27px}.app-main-grid{display:flex;flex-direction:column}.side-menu{display:grid;grid-template-columns:1fr 1fr;order:2}.side-profile{grid-column:1/-1}.badge-card{grid-column:1/-1}.main-col{order:1}.hero-daily{padding:15px}.hero-text h1{font-size:22px}.hero-trophy{font-size:36px}.controls-pill{width:100%;justify-content:space-between}.controls-pill select{max-width:62%;text-align:right}.start-btn,.review-btn{flex:1}.quiz-header{flex-direction:column}.score-pill{align-self:flex-start}.question-text{font-size:16px}.feedback-row{flex-direction:column;align-items:stretch}.bottom-actions{justify-content:flex-end}.image-grid{grid-template-columns:1fr}.result-score strong{font-size:58px}.report-header{align-items:flex-start;flex-direction:column}.report-table{font-size:8px}.login-card{margin:20px auto;padding:26px 18px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}


/* nalaroo-auth.css */
.nalaroo-auth-wrap{min-height:calc(100vh - 180px);display:grid;place-items:center;padding:28px 12px}
.nalaroo-auth-card{width:min(100%,460px);background:var(--surface,#fff);border:1px solid rgba(80,88,112,.18);border-radius:24px;padding:28px;box-shadow:0 18px 48px rgba(29,47,89,.10);display:flex;flex-direction:column;gap:14px}
.nalaroo-auth-card h1{font-size:clamp(1.5rem,4vw,2rem);margin:0}
.nalaroo-auth-note,.nalaroo-auth-or{opacity:.73;margin:0}.nalaroo-auth-or{text-align:center}
.nalaroo-auth-form,.nalaroo-auth-field{display:flex;flex-direction:column;gap:12px}
.nalaroo-auth-field{gap:6px;font-weight:600}.nalaroo-auth-field input{width:100%;min-height:46px}
.nalaroo-auth-form button,.nalaroo-auth-card>.primary,.nalaroo-auth-google{min-height:46px;border-radius:12px;cursor:pointer}
.nalaroo-auth-tabs{display:flex;gap:8px}.nalaroo-auth-tabs button{flex:1;padding:11px;border:1px solid #ccd5e9;border-radius:10px;background:transparent;cursor:pointer}
.nalaroo-auth-tabs button.selected{background:#273c74;color:#fff}
.nalaroo-auth-google{border:1px solid #9baed0;background:#fff;color:#21334b;font-weight:600}
.nalaroo-auth-status{min-height:1.25em;color:#b33348;margin:0;font-size:.9rem}
.nalaroo-auth-email{word-break:break-all;font-weight:600}
.nalaroo-consent{display:flex;align-items:start;gap:9px;font-size:.83rem;line-height:1.45}
.nalaroo-consent input{margin-top:4px}
.nalaroo-profile-add{margin-top:18px;padding:20px;border:1px solid rgba(85,103,136,.2);border-radius:18px;display:flex;flex-direction:column;gap:12px}
.nalaroo-profile-add form{display:grid;gap:12px;max-width:400px}
.nalaroo-profile-add label{display:grid;gap:5px}
.nalaroo-profile-add input,.nalaroo-profile-add select{min-height:42px;padding:8px;border:1px solid #abb8d4;border-radius:9px}
.nalaroo-profile-add button{min-height:42px}
@media(max-width:520px){.nalaroo-auth-card{padding:20px}}


/* nalaroo-plan.css */
.nalaroo-plan-pill{display:inline-block;width:fit-content;margin:12px 0 18px;padding:10px 16px;border:1px solid #b4d5ee;border-radius:999px;background:rgba(255,255,255,.94);color:#234366;font-size:.88rem;font-weight:700;line-height:1.35}
.profile-card.nalaroo-locked{opacity:.68;cursor:not-allowed;filter:saturate(.65)}
.profile-card.nalaroo-locked .profile-enter{background:rgba(35,54,89,.12);color:#374c6b}
.controls-panel button:disabled,.start-row button:disabled{cursor:not-allowed;opacity:.55}


/* profile.css */
body[data-profile="bian"] .question-text{font-size:20px;line-height:1.45}
body[data-profile="bian"] .option-btn{padding:13px 14px;font-size:14px;min-height:58px}
body[data-profile="bian"] .option-label{width:34px;height:34px;font-size:14px}
body[data-profile="bian"] .text-answer{font-size:16px;padding:13px 14px}
body[data-profile="bian"] .check-btn{font-size:13px;padding:10px 16px}
body[data-profile="bian"] .feedback{font-size:13px;line-height:1.45}
body[data-profile="bian"] .hero-text h1{font-size:29px}
body[data-profile="bian"] .hero-text p{font-size:13px}
@media(max-width:640px){body[data-profile="bian"] .question-text{font-size:19px}body[data-profile="bian"] .option-btn{font-size:14px}}


/* layout.css */
/* Desktop layout refinement for UbayBian v0.4.1 */
@media (min-width: 1100px){
  body{padding:12px 14px 0;}
  .shell{
    width:min(96vw,1540px);
    max-width:1540px;
    min-height:calc(100vh - 12px);
    display:flex;
    flex-direction:column;
    border-radius:28px 28px 0 0;
  }
  .topbar{
    min-height:70px;
    padding:12px 28px;
    gap:24px;
  }
  .brand{font-size:21px;}
  .brand-icon{font-size:29px;}
  .top-nav button{font-size:13px;padding:8px 13px;}
  .quiet{padding:9px 15px;}
  main{
    flex:1;
    min-height:0;
    padding:22px 26px 24px;
  }
  footer{padding:14px 26px;}

  .app-main-grid{
    grid-template-columns:300px minmax(0,1fr);
    gap:22px;
    min-height:calc(100vh - 152px);
    align-items:stretch;
  }
  .side-menu{
    height:100%;
    gap:14px;
  }
  .side-profile{padding:16px 17px;}
  .profile-avatar{width:50px;height:50px;font-size:31px;}
  .profile-info h2{font-size:17px;}
  .profile-info p{font-size:11px;}
  .xp-main,.coin-main,.xp-level{font-size:11px;padding:5px 9px;}
  .badge-card{padding:15px 16px;min-height:128px;}
  .badge-title{font-size:12px;margin-bottom:10px;}
  .badge-empty{font-size:11px;line-height:1.45;}
  .badge-chip{padding:8px 9px;}
  .badge-name{font-size:11px;}
  .badge-desc{font-size:10px;}
  .side-tile{
    padding:14px 15px;
    min-height:68px;
  }
  .side-tile-icon{width:42px;height:42px;font-size:22px;}
  .side-tile-text{font-size:13px;}
  .side-tile-sub{font-size:11px;}

  .main-col{height:100%;}
  .main-col>div{
    height:100%;
    display:grid;
    grid-template-rows:auto auto auto minmax(150px,1fr);
    gap:14px;
  }
  .hero-daily{
    min-height:150px;
    padding:26px 30px;
    border-radius:28px;
  }
  .hero-daily:after{width:230px;height:230px;right:-45px;top:-70px;}
  .hero-kicker{font-size:11px;}
  .hero-text h1{font-size:38px;margin-bottom:8px;}
  .hero-text p{font-size:13px;max-width:760px;}
  .hero-meta{font-size:11px;margin-top:10px;}
  .hero-trophy{font-size:62px;margin-right:16px;}

  .controls-panel{
    margin-top:0;
    padding:18px 20px;
    border-radius:22px;
  }
  .controls-row{gap:10px;}
  .controls-pill{padding:8px 12px;font-size:12px;}
  .control-label{font-size:10px;}
  .controls-pill select{font-size:12px;min-width:115px;}
  .start-row{margin-top:14px;gap:10px;}
  .start-btn,.review-btn,.primary{padding:11px 20px;font-size:13px;}
  .review-info,.start-status{font-size:11px;}

  .rules-strip{margin-top:0;gap:9px;}
  .rules-strip span{font-size:10px;padding:7px 11px;}

  .today-summary{
    margin-top:0;
    min-height:150px;
    padding:22px 24px;
    border-radius:20px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,rgba(13,71,161,.96),rgba(10,86,171,.88));
  }
  .today-summary strong{font-size:15px;}
  .today-summary p{font-size:12px;max-width:720px;line-height:1.6;margin-top:7px;}
  .today-summary:after{
    content:"🤖";
    position:absolute;
    right:34px;
    bottom:-14px;
    font-size:112px;
    line-height:1;
    opacity:.13;
    transform:rotate(-8deg);
    pointer-events:none;
  }

  .quiz-card,.result-panel,.report-card,.robotlab-card{min-height:calc(100vh - 188px);}
}

@media (min-width: 1500px){
  .shell{width:min(97vw,1600px);max-width:1600px;}
  .app-main-grid{grid-template-columns:320px minmax(0,1fr);gap:24px;}
  .hero-text h1{font-size:42px;}
  .hero-daily{padding:30px 34px;}
}


/* extras.css */
.clickable-tile{cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease}.clickable-tile:hover,.clickable-tile:focus-visible{transform:translateY(-2px);box-shadow:0 10px 18px rgba(0,0,0,.18);opacity:1;outline:3px solid rgba(255,255,255,.55);outline-offset:2px}.ub-modal-overlay{position:fixed;inset:0;z-index:1000;background:rgba(7,37,61,.72);backdrop-filter:blur(7px);display:grid;place-items:center;padding:20px}.ub-modal-box{width:min(680px,94vw);max-height:90vh;overflow:auto;background:#fff;border-radius:26px;padding:22px;color:#163148;box-shadow:0 28px 80px rgba(0,0,0,.35)}.ub-modal-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}.ub-modal-heading{display:flex;align-items:center;gap:11px}.ub-modal-heading h2{margin:0;font-size:24px}.ub-modal-icon{width:48px;height:48px;border-radius:16px;background:#e3f5ff;display:grid;place-items:center;font-size:27px}.ub-modal-close{border:0;background:#eef5f9;color:#35536a;width:38px;height:38px;border-radius:50%;font-weight:900}.ub-modal-copy{font-size:13px;color:#60758e;line-height:1.55;margin:4px 0 14px}.ub-modal-status{font-size:12px;color:#60758e;margin:8px 0;min-height:18px}.ub-modal-status.success{color:#188a4b;font-weight:800}.ub-modal-status.error{color:#d03442;font-weight:800}.ub-review-list{display:grid;gap:10px}.ub-review-item{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;border:1px solid #d7e7f2;background:#f8fcff;border-radius:16px;padding:13px 15px;text-align:left;color:#163148}.ub-review-item:hover{border-color:#00a4ff;background:#eef9ff}.ub-review-icon{font-size:24px}.ub-review-name{font-weight:900}.ub-review-count{font-size:11px;color:#60758e;background:#e3f5ff;padding:5px 8px;border-radius:999px}.ub-game-info{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:6px 0 16px}.ub-game-pill{background:#e3f5ff;color:#1565c0;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800}.ub-game-question{font-size:28px;font-weight:900;text-align:center;margin:18px 0}.ub-game-input{width:100%;border:2px solid #dbeaf4;background:#f9fcff;border-radius:14px;padding:12px 14px;font-size:18px;text-align:center;outline:0}.ub-game-input:focus{border-color:#00a4ff}.ub-modal-actions{display:flex;justify-content:center;gap:9px;margin-top:14px;flex-wrap:wrap}.ub-primary,.ub-secondary,.ub-approve,.ub-reject{border:0;border-radius:999px;padding:10px 17px;font-size:12px;font-weight:900}.ub-primary{background:linear-gradient(135deg,#ff8a3d,#ff5722);color:#fff}.ub-secondary{background:#e3f2fd;color:#1565c0}.ub-primary:disabled,.ub-secondary:disabled{opacity:.5}.ub-memory-grid{display:grid;grid-template-columns:repeat(2,92px);gap:10px;justify-content:center;margin:14px auto}.ub-memory-cell{width:92px;height:92px;border-radius:18px;background:#e3f2fd;display:grid;place-items:center;font-size:28px;font-weight:900;color:#1a237e;box-shadow:0 6px 14px rgba(13,71,161,.18)}.ub-memory-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.ub-memory-option{border:2px solid transparent;border-radius:14px;background:#f7fbff;color:#163148;padding:11px 12px;display:flex;align-items:center;gap:9px;font-weight:800}.ub-memory-option:hover:not(:disabled){border-color:#00a4ff}.ub-memory-option.correct{border-color:#2ecc71;background:#e8f9f0}.ub-memory-option.wrong{border-color:#e53935;background:#ffebee}.ub-option-label{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#00a4ff;color:#fff;font-weight:900}.ub-wallet{display:flex;justify-content:space-between;align-items:center;gap:12px;background:linear-gradient(135deg,#fff4cf,#ffe49a);border-radius:18px;padding:14px 16px;margin:6px 0 16px}.ub-wallet-main{font-size:19px;font-weight:900;color:#9c5a00}.ub-wallet-sub{font-size:11px;color:#8a6b32;text-align:right}.ub-section-title{font-size:14px;margin:16px 0 8px}.ub-reward-list,.ub-request-list{display:grid;gap:9px}.ub-reward-card{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;border:1px solid #e1eaf0;border-radius:16px;padding:12px;background:#fbfdff}.ub-reward-icon{font-size:25px}.ub-reward-copy strong{font-size:12px}.ub-reward-copy p{font-size:10px;color:#60758e;margin:3px 0}.ub-reward-cost{font-size:10px;font-weight:900;color:#e65100}.ub-request-row{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid #e1eaf0;border-radius:14px;padding:10px 12px;background:#f9fbfd}.ub-request-row>div:first-child{display:flex;flex-direction:column}.ub-request-row strong{font-size:11px}.ub-request-row span{font-size:10px;color:#60758e}.ub-parent-actions{display:flex;gap:6px}.ub-approve{background:#e8f5e9;color:#1b5e20}.ub-reject{background:#ffebee;color:#b71c1c}@media(max-width:600px){.ub-modal-overlay{padding:10px}.ub-modal-box{padding:18px;border-radius:20px}.ub-modal-heading h2{font-size:20px}.ub-game-question{font-size:24px}.ub-memory-grid{grid-template-columns:repeat(2,74px)}.ub-memory-cell{width:74px;height:74px;font-size:23px}.ub-reward-card{grid-template-columns:auto 1fr}.ub-reward-card .ub-primary{grid-column:1/-1;width:100%}.ub-request-row{align-items:flex-start;flex-direction:column}.ub-parent-actions{width:100%}.ub-parent-actions button{flex:1}}


/* brain-games-base.css */
/* UbayBian Brain Games v2 · Math Reactor · visual polish */
.reactor-overlay{
  position:fixed;inset:0;z-index:1200;display:grid;place-items:center;
  padding:clamp(14px,3vw,36px);
  background:
    radial-gradient(circle at 14% 10%,rgba(38,180,235,.24),transparent 34%),
    radial-gradient(circle at 86% 84%,rgba(246,185,52,.18),transparent 30%),
    rgba(4,27,52,.86);
  backdrop-filter:blur(18px) saturate(122%);
  -webkit-backdrop-filter:blur(18px) saturate(122%);
  animation:reactorFade .22s ease-out both;
}
.reactor-shell{
  --reactor-blue:#168fe8;
  --reactor-cyan:#26b4eb;
  --reactor-orange:#ff6b32;
  --reactor-gold:#f6b934;
  --reactor-green:#17a673;
  --reactor-coral:#e95662;
  --reactor-ink:#17354d;
  --reactor-muted:#627f94;
  position:relative;width:min(1080px,96vw);min-height:min(720px,90vh);max-height:92vh;
  overflow:auto;border:1px solid rgba(255,255,255,.78);border-radius:36px;
  color:var(--reactor-ink);
  background:
    radial-gradient(circle at 50% 38%,rgba(255,255,255,1) 0%,rgba(247,252,255,.98) 36%,rgba(233,244,251,.98) 100%);
  box-shadow:0 30px 90px rgba(0,28,61,.43),inset 0 1px 0 rgba(255,255,255,.95);
}
.reactor-shell:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.38;
  background-image:
    linear-gradient(rgba(22,143,232,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(22,143,232,.04) 1px,transparent 1px),
    radial-gradient(circle at 68% 35%,rgba(38,180,235,.10),transparent 30%),
    radial-gradient(circle at 30% 78%,rgba(246,185,52,.08),transparent 28%);
  background-size:32px 32px,32px 32px,auto,auto;
  mask-image:linear-gradient(to bottom,#000,transparent 82%);
}
.reactor-top{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:26px 28px 12px;
}
.reactor-brand{display:flex;align-items:center;gap:15px;min-width:0;}
.reactor-bolt{
  width:58px;height:58px;display:grid;place-items:center;flex:0 0 auto;border-radius:19px;
  font-size:28px;background:linear-gradient(145deg,#dcf5ff,#fff5df);
  box-shadow:inset 0 0 0 1px rgba(22,143,232,.10),0 10px 24px rgba(16,110,184,.12),0 0 28px rgba(38,180,235,.10);
}
.reactor-kicker{margin:0 0 3px;font-size:12px;font-weight:700;letter-spacing:.16em;color:#477b9e;}
.reactor-title{margin:0;font-size:clamp(30px,3vw,42px);line-height:1.03;font-weight:800;letter-spacing:-.035em;color:#17354d;}
.reactor-subtitle{margin:6px 0 0;font-size:15px;color:#627f94;font-weight:600;}
.reactor-close{
  width:48px;height:48px;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  color:#496a82;background:#edf6fb;font-size:25px;line-height:1;transition:.18s ease;
}
.reactor-close:hover{transform:rotate(6deg) scale(1.04);background:#e3f1f8;color:#173b55;}
.reactor-stage{position:relative;z-index:1;padding:8px 34px 34px;}
.reactor-view{min-height:550px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.reactor-view[hidden]{display:none!important;}

/* ready */
.reactor-ready{text-align:center;max-width:760px;margin:auto;}
.reactor-orb{
  position:relative;width:110px;height:110px;margin:0 auto 18px;border-radius:34px;display:grid;place-items:center;
  font-size:48px;background:linear-gradient(145deg,#dcf6ff 10%,#fff6df 88%);
  box-shadow:0 18px 46px rgba(20,115,179,.16),0 0 36px rgba(38,180,235,.12),inset 0 0 0 1px rgba(255,255,255,.88);
}
.reactor-orb:before{content:"";position:absolute;inset:20%;border-radius:22px;background:radial-gradient(circle,rgba(255,107,50,.16),transparent 68%);filter:blur(4px);}
.reactor-orb:after{content:"";position:absolute;inset:-10px;border:1px solid rgba(38,180,235,.22);border-radius:42px;animation:reactorOrbit 3.2s ease-in-out infinite;}
.reactor-ready h3{margin:0;font-size:clamp(42px,4.4vw,58px);line-height:1;font-weight:800;letter-spacing:-.045em;color:#17354d;}
.reactor-ready-copy{max-width:600px;margin:15px auto 24px;color:#627f94;font-size:18px;line-height:1.55;font-weight:600;}
.reactor-mission-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 26px;}
.reactor-chip{padding:9px 14px;border-radius:999px;background:#e5f6ff;color:#0f6da9;font-size:13px;font-weight:700;box-shadow:inset 0 0 0 1px rgba(22,143,232,.12),0 5px 16px rgba(22,143,232,.05);}
.reactor-xp-card{width:min(580px,100%);margin:0 auto 27px;padding:16px 18px;border-radius:20px;text-align:left;background:rgba(255,255,255,.82);border:1px solid #d7e9f3;box-shadow:0 10px 30px rgba(31,91,132,.08);}
.reactor-xp-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;font-size:14px;font-weight:600;color:#55768e;}
.reactor-xp-row strong{color:#173d58;font-size:15px;font-weight:800;}
.reactor-xp-track{height:10px;overflow:hidden;border-radius:999px;background:#dfeef5;}
.reactor-xp-fill{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#168fe8,#26b4eb);transition:width .35s ease;box-shadow:0 0 16px rgba(38,180,235,.38);}
.reactor-main-btn{
  min-width:220px;border:0;border-radius:18px;padding:16px 26px;cursor:pointer;
  color:white;background:linear-gradient(135deg,#ff8437,#ff642e);font:800 17px/1 inherit;
  box-shadow:0 13px 30px rgba(255,107,50,.27);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.reactor-main-btn:hover{transform:translateY(-2px);filter:saturate(1.08);box-shadow:0 17px 36px rgba(255,107,50,.34);}
.reactor-main-btn:disabled{opacity:.55;cursor:wait;transform:none;filter:none;}

/* playing */
.reactor-play{width:100%;max-width:860px;margin:auto;}
.reactor-hud{display:grid;grid-template-columns:1fr 150px 1fr;align-items:center;gap:22px;margin:4px 0 24px;}
.reactor-stat{min-height:92px;padding:15px 18px;border-radius:23px;background:rgba(255,255,255,.82);border:1px solid #d7e9f3;box-shadow:0 12px 34px rgba(25,83,122,.07);}
.reactor-stat.right{text-align:right;}
.reactor-stat-label{display:block;margin-bottom:5px;color:#67879d;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
.reactor-stat-value{display:block;font-size:40px;font-weight:800;letter-spacing:-.045em;color:#17354d;}
.reactor-score-pop{animation:reactorPop .28s cubic-bezier(.2,.8,.3,1.35);}
.reactor-timer-wrap{display:grid;place-items:center;}
.reactor-timer{
  --progress:100;--ring:#26b4eb;
  width:132px;height:132px;padding:9px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--ring) calc(var(--progress)*1%),rgba(24,130,190,.12) 0);
  box-shadow:0 16px 42px rgba(8,126,195,.18),0 0 0 8px rgba(38,180,235,.07),0 0 34px rgba(38,180,235,.10);
  transition:background .3s ease,transform .2s ease;
}
.reactor-timer-core{width:100%;height:100%;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#fff,#edf9ff);box-shadow:inset 0 0 0 1px rgba(21,151,220,.09);}
.reactor-timer-number{font-size:52px;font-weight:800;letter-spacing:-.055em;line-height:.9;color:#17354d;}
.reactor-timer-unit{display:block;margin-top:4px;font-size:10px;font-weight:700;letter-spacing:.14em;color:#67879d;text-transform:uppercase;text-align:center;}
.reactor-play.is-warning .reactor-timer{--ring:#f0a53a;animation:reactorPulse 1s ease-in-out infinite;}
.reactor-play.is-critical .reactor-timer{--ring:#e95662;animation:reactorPulse .55s ease-in-out infinite;}
.reactor-final-label{height:22px;margin:-8px 0 4px;text-align:center;color:#db6439;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;}
.reactor-question-card{
  position:relative;overflow:hidden;margin:0 auto 20px;padding:31px 24px;border-radius:28px;text-align:center;
  background:
    radial-gradient(circle at 82% 18%,rgba(38,180,235,.11),transparent 26%),
    linear-gradient(145deg,#ffffff,#f4fbff);
  border:1px solid #d5e8f3;
  box-shadow:0 18px 48px rgba(20,81,123,.10),0 0 30px rgba(38,180,235,.04);
}
.reactor-question-card:before{content:"";position:absolute;inset:auto -40px -70px auto;width:160px;height:160px;border-radius:50%;background:rgba(246,185,52,.055);}
.reactor-question{position:relative;font-size:clamp(54px,6vw,70px);font-weight:800;letter-spacing:-.05em;color:#17354d;transition:.18s ease;}
.reactor-question.is-entering{animation:reactorQuestion .22s ease-out;}
.reactor-answer-dock{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;margin:auto;max-width:720px;}
.reactor-input{
  width:100%;min-width:0;border:2px solid #acd5e9;border-radius:20px;padding:16px 19px;
  color:#17354d;background:rgba(255,255,255,.94);font:800 25px/1.1 inherit;text-align:center;outline:none;
  box-shadow:inset 0 2px 6px rgba(28,97,143,.04);transition:.18s ease;
}
.reactor-input::placeholder{font-size:17px;font-weight:600;color:#7f9bad;}
.reactor-input:focus{border-color:#26b4eb;box-shadow:0 0 0 5px rgba(38,180,235,.12),0 10px 30px rgba(18,109,166,.08);}
.reactor-submit{border:0;border-radius:18px;padding:17px 24px;cursor:pointer;background:linear-gradient(135deg,#168fe8,#26b4eb);color:#fff;font:800 15px/1 inherit;box-shadow:0 9px 22px rgba(22,143,232,.20);transition:.16s ease;}
.reactor-submit:hover{transform:translateY(-1px);filter:saturate(1.08);box-shadow:0 12px 26px rgba(22,143,232,.27);}
.reactor-play-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:720px;margin:13px auto 0;color:#627f94;font-size:14px;font-weight:600;}
.reactor-key{padding:6px 9px;border:1px solid #d2e5ef;border-radius:8px;background:rgba(255,255,255,.88);color:#4f7086;box-shadow:0 2px 0 #dceaf1;font-size:12px;font-weight:700;}
.reactor-flash{position:absolute;left:50%;top:47%;z-index:7;transform:translate(-50%,-50%) scale(.75);padding:12px 18px;border-radius:999px;opacity:0;pointer-events:none;font-size:16px;font-weight:800;letter-spacing:.03em;box-shadow:0 15px 38px rgba(0,0,0,.15);}
.reactor-flash.show{animation:reactorFlash .65s ease-out both;}
.reactor-flash.correct{color:#087d4a;background:#d9f8e9;border:1px solid #a9ebcd;}
.reactor-flash.wrong{color:#b82d43;background:#ffe2e6;border:1px solid #ffc1ca;}
.reactor-play.flash-correct .reactor-question-card{animation:reactorGlowGreen .34s ease-out;}
.reactor-play.flash-wrong .reactor-question-card{animation:reactorShake .26s ease-out;}

/* result */
.reactor-result{position:relative;text-align:center;max-width:760px;margin:auto;}
.reactor-result:before{content:"";position:absolute;left:50%;top:44%;width:360px;height:260px;transform:translate(-50%,-50%);pointer-events:none;background:radial-gradient(circle,rgba(246,185,52,.12) 0%,rgba(38,180,235,.07) 36%,transparent 72%);filter:blur(5px);}
.reactor-complete-badge{position:relative;display:inline-flex;align-items:center;gap:7px;margin-bottom:12px;padding:8px 13px;border-radius:999px;background:#e3f6ff;color:#0d6fae;font-size:12px;font-weight:700;letter-spacing:.11em;}
.reactor-result h3{position:relative;margin:0;font-size:clamp(34px,4vw,46px);font-weight:800;letter-spacing:-.035em;color:#17354d;}
.reactor-result-score{position:relative;margin:12px 0 0;font-size:clamp(88px,9vw,106px);font-weight:800;line-height:.9;letter-spacing:-.06em;color:#17354d;text-shadow:0 9px 28px rgba(20,91,137,.10);}
.reactor-result-caption{position:relative;margin:11px 0 24px;color:#627f94;font-size:16px;font-weight:600;}
.reactor-new-best{position:relative;display:inline-flex;align-items:center;gap:7px;margin-bottom:22px;padding:9px 14px;border-radius:999px;color:#7b5200;background:#fff1b8;font-size:13px;font-weight:800;animation:reactorTrophy .7s cubic-bezier(.2,.8,.3,1.25) both;box-shadow:0 8px 20px rgba(246,185,52,.16);}
.reactor-result-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 auto 25px;}
.reactor-result-card{padding:18px 13px;border-radius:20px;background:rgba(255,255,255,.84);border:1px solid #d8e9f2;box-shadow:0 10px 28px rgba(28,83,120,.07);}
.reactor-result-card span{display:block;color:#607f94;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.reactor-result-card strong{display:block;margin-top:8px;color:#17354d;font-size:32px;font-weight:800;}
.reactor-result-actions{position:relative;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}
.reactor-ghost-btn{border:1px solid #d1e4ee;border-radius:18px;padding:15px 24px;cursor:pointer;background:rgba(255,255,255,.92);color:#496b82;font:700 15px/1 inherit;transition:.16s ease;}
.reactor-ghost-btn:hover{transform:translateY(-1px);background:#fff;border-color:#bed9e7;}
.reactor-save-note{position:relative;min-height:22px;margin:14px 0 0;color:#627f94;font-size:14px;font-weight:600;}
.reactor-save-note.error{color:#c93b50;}

@keyframes reactorFade{from{opacity:0}to{opacity:1}}
@keyframes reactorOrbit{0%,100%{transform:scale(.96);opacity:.35}50%{transform:scale(1.04);opacity:.82}}
@keyframes reactorPop{0%{transform:scale(.9)}55%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes reactorPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes reactorQuestion{from{opacity:.2;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes reactorFlash{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}72%{opacity:1;transform:translate(-50%,-58%) scale(1)}100%{opacity:0;transform:translate(-50%,-72%) scale(.96)}}
@keyframes reactorGlowGreen{50%{box-shadow:0 18px 52px rgba(23,166,115,.22),inset 0 0 0 2px rgba(23,166,115,.28)}}
@keyframes reactorShake{0%,100%{transform:none}30%{transform:translateX(-5px)}65%{transform:translateX(5px)}}
@keyframes reactorTrophy{0%{opacity:0;transform:translateY(7px) scale(.75)}65%{transform:translateY(-2px) scale(1.08)}100%{opacity:1;transform:none}}

@media(max-width:760px){
  .reactor-overlay{padding:0;align-items:stretch;}
  .reactor-shell{width:100%;min-height:100dvh;max-height:100dvh;border-radius:0;border:0;}
  .reactor-top{padding:18px 18px 8px;}
  .reactor-bolt{width:48px;height:48px;border-radius:16px;font-size:23px;}
  .reactor-title{font-size:27px;}
  .reactor-subtitle{font-size:12px;}
  .reactor-close{width:43px;height:43px;}
  .reactor-stage{padding:6px 17px 24px;}
  .reactor-view{min-height:calc(100dvh - 95px);}
  .reactor-orb{width:96px;height:96px;font-size:42px;}
  .reactor-ready h3{font-size:42px;}
  .reactor-ready-copy{font-size:16px;}
  .reactor-hud{grid-template-columns:1fr 112px 1fr;gap:9px;margin-bottom:18px;}
  .reactor-stat{min-height:74px;padding:11px;border-radius:17px;}
  .reactor-stat-label{font-size:10px;}
  .reactor-stat-value{font-size:30px;}
  .reactor-timer{width:104px;height:104px;padding:7px;}
  .reactor-timer-number{font-size:38px;}
  .reactor-question-card{padding:28px 14px;border-radius:23px;}
  .reactor-question{font-size:clamp(42px,13vw,60px);}
  .reactor-answer-dock{grid-template-columns:1fr;}
  .reactor-submit{width:100%;}
  .reactor-play-meta{justify-content:center;font-size:13px;}
  .reactor-play-meta .reactor-key{display:none;}
  .reactor-result-score{font-size:88px;}
  .reactor-result-grid{gap:7px;}
  .reactor-result-card{padding:14px 7px;}
  .reactor-result-card span{font-size:10px;}
  .reactor-result-card strong{font-size:24px;}
}
@media(prefers-reduced-motion:reduce){
  .reactor-overlay,.reactor-orb:after,.reactor-score-pop,.reactor-play.is-warning .reactor-timer,.reactor-play.is-critical .reactor-timer,.reactor-question.is-entering,.reactor-flash.show,.reactor-play.flash-correct .reactor-question-card,.reactor-play.flash-wrong .reactor-question-card,.reactor-new-best{animation:none!important;}
}

/* home.css */
/* UbayBian Home v0.5 · Adventure UI */
:root{
  --adv-sky:#29b9f4;
  --adv-sky-deep:#168bd2;
  --adv-navy:#17354d;
  --adv-glass:rgba(247,252,255,.78);
  --adv-glass-strong:rgba(255,255,255,.9);
  --adv-coral:#ff7180;
  --adv-orange:#ff9b5c;
  --adv-yellow:#ffd14b;
  --adv-blue:#2a9ae8;
  --adv-purple:#6658ce;
}

body.adventure-home{
  padding:0;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 11% 8%,rgba(255,255,255,.95) 0 2px,transparent 3px),
    radial-gradient(circle at 29% 14%,rgba(255,244,155,.92) 0 2px,transparent 3px),
    radial-gradient(circle at 66% 9%,rgba(255,255,255,.9) 0 2px,transparent 3px),
    radial-gradient(circle at 83% 19%,rgba(255,247,176,.9) 0 3px,transparent 4px),
    radial-gradient(circle at 92% 46%,rgba(255,255,255,.82) 0 2px,transparent 3px),
    radial-gradient(circle at 5% 74%,rgba(255,255,255,.7) 0 2px,transparent 3px),
    linear-gradient(145deg,#2cbdf5 0%,#24a9ed 45%,#188bd1 100%);
}
body.adventure-home:before,
body.adventure-home:after{
  content:"";position:fixed;pointer-events:none;z-index:0;border-radius:50%;filter:blur(.2px);
}
body.adventure-home:before{
  width:330px;height:330px;left:-120px;top:15%;opacity:.23;
  background:radial-gradient(circle at 50% 50%,transparent 0 34%,rgba(255,255,255,.46) 35% 37%,transparent 38% 51%,rgba(255,255,255,.24) 52% 54%,transparent 55%);
  transform:rotate(-20deg);
}
body.adventure-home:after{
  width:300px;height:300px;right:-95px;bottom:-80px;opacity:.15;
  background:radial-gradient(circle at 48% 46%,#fff 0 5%,transparent 6%),radial-gradient(circle at 50% 50%,transparent 0 29%,#fff 30% 32%,transparent 33%);
}

body.adventure-home .shell{
  position:relative;z-index:1;
  width:100%;max-width:none;min-height:100vh;margin:0;
  background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;overflow:visible;
}

/* floating navigation */
body.adventure-home .topbar{
  min-height:76px;padding:13px 42px;background:transparent;color:#fff;gap:20px;
}
body.adventure-home .brand{
  font-size:22px;font-weight:900;text-shadow:0 2px 6px rgba(8,75,124,.28);
}
body.adventure-home .brand>span:last-child{color:#fff4be;}
body.adventure-home .brand-icon{font-size:28px;filter:drop-shadow(0 4px 6px rgba(7,79,126,.24));}
body.adventure-home .top-nav{
  position:absolute;left:50%;transform:translateX(-50%);
  gap:2px;padding:6px;
  border:1px solid rgba(255,255,255,.58);border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(226,246,255,.57));
  box-shadow:0 10px 22px rgba(18,103,158,.18),inset 0 1px 0 rgba(255,255,255,.86);
  backdrop-filter:blur(12px);
}
body.adventure-home .top-nav button{
  color:#17354d;opacity:1;font-size:13px;font-weight:900;padding:9px 15px;
}
body.adventure-home .top-nav button:hover,
body.adventure-home .top-nav button.active{
  color:#17354d;background:rgba(255,255,255,.84);box-shadow:0 5px 12px rgba(20,93,142,.13);
}
body.adventure-home .version{
  margin-left:auto;color:#17354d;border:1px solid rgba(255,255,255,.7);
  background:rgba(236,249,255,.68);font-weight:700;padding:5px 10px;
  box-shadow:0 5px 14px rgba(13,87,137,.13);backdrop-filter:blur(8px);
}
body.adventure-home .quiet,
body.adventure-home .family-logout{
  border:1px solid rgba(255,255,255,.72);color:#17354d;
  background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(226,245,255,.72));
  border-radius:999px;min-height:40px;padding:9px 16px;
  box-shadow:0 7px 18px rgba(12,83,132,.17),inset 0 1px 0 #fff;
}

body.adventure-home main{
  min-height:calc(100vh - 76px);padding:6px 38px 30px;background:transparent;
}
body.adventure-home footer{display:none;}
body.adventure-home .app-main-grid{
  grid-template-columns:290px minmax(0,1fr);gap:22px;min-height:calc(100vh - 114px);
}

/* profile + badges */
body.adventure-home .side-menu{gap:12px;}
body.adventure-home .side-profile,
body.adventure-home .badge-card{
  border:1px solid rgba(255,255,255,.65);
  background:linear-gradient(150deg,rgba(255,255,255,.90),rgba(225,247,255,.79));
  box-shadow:0 9px 22px rgba(16,94,148,.22),inset 0 1px 0 rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
}
body.adventure-home .side-profile{
  position:relative;overflow:visible;min-height:105px;padding:16px 16px 14px 87px;
  display:block;border-radius:21px;
}
body.adventure-home .side-profile:before{
  content:"⭐";position:absolute;left:-10px;top:-15px;width:92px;height:92px;display:grid;place-items:center;
  font-size:82px;line-height:1;filter:drop-shadow(0 8px 10px rgba(175,105,6,.24));z-index:0;
}
body.adventure-home .profile-avatar{
  position:absolute;left:18px;top:24px;z-index:1;width:55px;height:55px;
  background:linear-gradient(145deg,#d7f6ff,#aee7fb);border:3px solid #fff;font-size:34px;
  box-shadow:0 6px 12px rgba(16,95,145,.18);
}
body.adventure-home .profile-info h2{font-size:20px;line-height:1;margin:3px 0 3px;}
body.adventure-home .profile-info p{font-size:11px;color:#284b61;}
body.adventure-home .xp-badge{margin-top:12px;gap:6px;position:relative;z-index:2;}
body.adventure-home .xp-main,
body.adventure-home .coin-main,
body.adventure-home .xp-level{padding:5px 9px;font-size:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.65);}
body.adventure-home .badge-card{position:relative;min-height:105px;padding:14px 16px 13px;border-radius:21px;overflow:hidden;}
body.adventure-home .badge-title{font-size:12px;color:#44647a;}
body.adventure-home .badge-empty{font-size:10px;color:#5e7d91;}
body.adventure-home .adventure-badge-rack{display:flex;gap:10px;margin-top:13px;align-items:center;}
body.adventure-home .adventure-badge-rack span{
  width:34px;height:34px;display:grid;place-items:center;border-radius:11px;font-size:20px;
  background:linear-gradient(145deg,#fff2ae,#e2f5ff);border:1px solid rgba(255,255,255,.82);
  box-shadow:0 5px 10px rgba(17,94,145,.12);
}

/* side menu adventure cards */
body.adventure-home .side-tile{
  position:relative;overflow:hidden;min-height:66px;padding:11px 90px 11px 16px;border:1px solid rgba(255,255,255,.55);
  border-radius:18px;color:#17354d;box-shadow:0 8px 18px rgba(19,84,134,.23),inset 0 1px 0 rgba(255,255,255,.52);
  transition:transform .15s ease,box-shadow .15s ease;
}
body.adventure-home .side-tile:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(16,76,126,.29),inset 0 1px 0 rgba(255,255,255,.7);}
body.adventure-home .side-tile-icon{
  width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.45);font-size:24px;
  border:1px solid rgba(255,255,255,.36);box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
body.adventure-home .side-tile-text{font-size:13px;color:#15364d;}
body.adventure-home .side-tile-sub{font-size:10px;color:#284b62;opacity:.86;}
body.adventure-home .side-tile.review-tile{background:linear-gradient(135deg,#82d9ff 0%,#66b9f8 55%,#8e8bf0 100%);}
body.adventure-home .side-tile.adventure-brain{background:linear-gradient(135deg,#ff7a87 0%,#ffaf65 60%,#ffc66a 100%);}
body.adventure-home .side-tile.adventure-memory{background:linear-gradient(135deg,#506db6 0%,#5b56bd 58%,#6b62cf 100%);color:#fff;}
body.adventure-home .side-tile.adventure-memory .side-tile-text,
body.adventure-home .side-tile.adventure-memory .side-tile-sub{color:#fff;}
body.adventure-home .side-tile.adventure-reward{background:linear-gradient(135deg,#ffd064 0%,#ffad3e 52%,#ff8a43 100%);}
body.adventure-home .side-tile.review-tile:after,
body.adventure-home .side-tile.adventure-brain:after,
body.adventure-home .side-tile.adventure-memory:after,
body.adventure-home .side-tile.adventure-reward:after{
  position:absolute;right:8px;bottom:-5px;font-size:40px;letter-spacing:-13px;filter:drop-shadow(0 5px 8px rgba(12,56,95,.18));opacity:.96;
}
body.adventure-home .side-tile.review-tile:after{content:"❓📋";}
body.adventure-home .side-tile.adventure-brain:after{content:"🧩🎲";}
body.adventure-home .side-tile.adventure-memory:after{content:"🧠✨";}
body.adventure-home .side-tile.adventure-reward:after{content:"🎁🏆";}

/* main adventure area */
body.adventure-home .main-col>div{gap:12px;grid-template-rows:auto auto auto minmax(180px,1fr);}
body.adventure-home .hero-daily{
  min-height:142px;padding:23px 30px;border-radius:25px;border:1px solid rgba(255,255,255,.55);
  background:
    radial-gradient(circle at 78% 35%,rgba(255,255,255,.16),transparent 19%),
    linear-gradient(110deg,#ffb05d 0%,#ff9567 44%,#ff6f83 100%);
  box-shadow:0 12px 25px rgba(118,63,64,.22),inset 0 1px 0 rgba(255,255,255,.56);
  overflow:hidden;
}
body.adventure-home .hero-daily:before{
  content:"";position:absolute;right:150px;bottom:-80px;width:460px;height:180px;border-radius:50%;
  background:rgba(255,122,111,.18);transform:rotate(-8deg);
}
body.adventure-home .hero-daily:after{content:"✦  ✦  ⭐";right:14px;top:8px;width:auto;height:auto;background:none;color:#fff4b8;font-size:20px;letter-spacing:18px;opacity:.95;}
body.adventure-home .hero-kicker{font-size:11px;color:#713c20;letter-spacing:.10em;}
body.adventure-home .hero-text h1{font-size:37px;line-height:1.02;color:#fff;font-weight:900;text-shadow:0 3px 0 rgba(148,75,54,.26);}
body.adventure-home .hero-text p{color:#5d3d2f;font-size:12px;font-weight:600;}
body.adventure-home .hero-meta{color:#7f3b27;font-size:10px;font-weight:800;}
body.adventure-home .hero-action{width:150px;height:100%;display:grid;place-items:center;}
body.adventure-home .hero-trophy{font-size:64px;filter:drop-shadow(0 9px 10px rgba(102,55,45,.28));transform:rotate(3deg);}

body.adventure-home .controls-panel{
  position:relative;min-height:118px;margin:0;padding:17px 44% 16px 18px;
  border:1px solid rgba(255,255,255,.66);border-radius:22px;
  background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(211,243,255,.61));
  box-shadow:0 10px 22px rgba(16,91,142,.19),inset 0 1px 0 rgba(255,255,255,.91);
  backdrop-filter:blur(12px);overflow:hidden;
}
body.adventure-home .controls-row{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
body.adventure-home .controls-pill{
  min-width:0;padding:7px 10px;border:1px solid rgba(139,201,230,.67);box-shadow:0 5px 12px rgba(19,97,147,.10);
}
body.adventure-home .controls-pill select{min-width:0;width:100%;}
body.adventure-home .start-row{position:relative;z-index:2;margin-top:12px;flex-wrap:nowrap;}
body.adventure-home .start-btn{background:linear-gradient(135deg,#ff9861,#ff653d);box-shadow:0 7px 16px rgba(215,86,44,.28);}
body.adventure-home .review-btn{background:linear-gradient(180deg,#f0fff2,#dcf7df);box-shadow:0 5px 12px rgba(64,139,73,.13);}
body.adventure-home .review-info{color:#234d67;white-space:nowrap;}
body.adventure-home .adventure-map{
  position:absolute;right:18px;top:15px;width:40%;height:88px;z-index:1;pointer-events:none;
  transform:rotate(1.5deg);
}
body.adventure-home .adventure-map-road{
  position:absolute;left:5%;right:4%;top:20px;height:50px;border-radius:50% 40% 50% 45%;
  background:#f6d699;border:7px solid rgba(255,255,255,.82);box-shadow:0 5px 0 rgba(67,112,132,.18),inset 0 0 0 2px rgba(179,126,52,.16);
  clip-path:polygon(0 35%,9% 9%,25% 15%,36% 66%,51% 78%,64% 23%,80% 10%,100% 35%,95% 72%,79% 75%,64% 56%,50% 94%,34% 84%,19% 46%,4% 69%);
}
body.adventure-home .adventure-map:before{content:"🚩";position:absolute;left:4px;bottom:2px;font-size:26px;z-index:3;}
body.adventure-home .adventure-map:after{content:"🏅";position:absolute;right:0;top:3px;font-size:29px;z-index:3;filter:drop-shadow(0 4px 4px rgba(132,72,33,.18));}
body.adventure-home .adventure-map-scenery{position:absolute;inset:0;z-index:2;font-size:18px;letter-spacing:45px;white-space:nowrap;padding:0 27px;color:#438b60;}

body.adventure-home .rules-strip{margin:0;gap:8px;}
body.adventure-home .rules-strip span{
  padding:6px 11px;font-size:9px;color:#fff;border:1px solid rgba(255,255,255,.35);
  background:linear-gradient(180deg,#2a8ddd,#1b70c1);box-shadow:0 5px 11px rgba(19,86,145,.16);
}
body.adventure-home .rules-strip span:nth-child(2){background:linear-gradient(180deg,#ff8f59,#ef6844);}
body.adventure-home .rules-strip span:nth-child(3){background:linear-gradient(180deg,#7c67d7,#594abd);}
body.adventure-home .rules-strip span:nth-child(4){background:linear-gradient(180deg,#ffc953,#eaa52b);}

body.adventure-home .today-summary{
  min-height:210px;margin:0;padding:100px 24px 28px;border-radius:23px;color:#17354d;
  background:
    radial-gradient(circle at 88% 38%,rgba(255,255,255,.58),transparent 26%),
    linear-gradient(135deg,rgba(240,251,255,.83),rgba(184,230,250,.70));
  border:1px solid rgba(255,255,255,.65);box-shadow:0 12px 25px rgba(17,92,145,.18),inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(12px);overflow:hidden;
}
body.adventure-home .today-summary:before{
  content:"🤖";position:absolute;left:26px;top:22px;width:62px;height:62px;display:grid;place-items:center;border-radius:50%;font-size:38px;
  background:linear-gradient(145deg,#fff2aa,#d8f5ff);border:4px solid rgba(255,255,255,.85);box-shadow:0 7px 14px rgba(19,94,143,.16);
}
body.adventure-home .today-summary:after{
  content:"🪐     🤖";right:35px;bottom:12px;font-size:62px;opacity:.14;transform:rotate(-8deg);
}
body.adventure-home .today-summary strong{font-size:14px;color:#17354d;}
body.adventure-home .today-summary p{font-size:11px;color:#17354d;opacity:.92;}

@media (min-width:1500px){
  body.adventure-home main{padding-left:44px;padding-right:44px;}
  body.adventure-home .app-main-grid{grid-template-columns:300px minmax(0,1fr);gap:24px;}
  body.adventure-home .hero-text h1{font-size:40px;}
}

@media (max-width:1100px){
  body.adventure-home .top-nav{position:static;transform:none;}
  body.adventure-home main{padding:10px 16px 24px;}
  body.adventure-home .app-main-grid{grid-template-columns:240px minmax(0,1fr);}
  body.adventure-home .controls-panel{padding-right:18px;}
  body.adventure-home .adventure-map{display:none;}
}

@media (max-width:760px){
  body.adventure-home .topbar{padding:10px 14px;gap:8px;flex-wrap:wrap;}
  body.adventure-home .brand{font-size:18px;}
  body.adventure-home .top-nav{order:3;width:100%;justify-content:center;}
  body.adventure-home .version{margin-left:auto;}
  body.adventure-home main{padding:10px 12px 22px;}
  body.adventure-home .app-main-grid{display:block;}
  body.adventure-home .side-menu{margin-bottom:14px;display:grid;grid-template-columns:1fr 1fr;}
  body.adventure-home .side-profile,body.adventure-home .badge-card{grid-column:1/-1;}
  body.adventure-home .side-tile{padding-right:58px;}
  body.adventure-home .side-tile:after{font-size:28px!important;}
  body.adventure-home .hero-daily{padding:20px 18px;}
  body.adventure-home .hero-text h1{font-size:30px;}
  body.adventure-home .hero-action{width:82px;}.hero-trophy{font-size:48px!important;}
  body.adventure-home .controls-panel{padding:14px;}
  body.adventure-home .controls-row{grid-template-columns:1fr;}
  body.adventure-home .start-row{flex-wrap:wrap;}
  body.adventure-home .review-info{white-space:normal;}
  body.adventure-home .today-summary{min-height:165px;padding-top:88px;}
}


/* home-mission.css */
/* UbayBian Home v0.5.1 · Adventure UI polish */

/* Keep the adventure world playful, but let learning actions win the hierarchy. */
body.adventure-home .side-tile{
  min-height:64px;
  padding:11px 72px 11px 15px;
  box-shadow:0 6px 15px rgba(16,84,132,.18),inset 0 1px 0 rgba(255,255,255,.50);
}
body.adventure-home .side-tile:hover{
  transform:translateY(-1px);
  box-shadow:0 9px 18px rgba(16,76,126,.22),inset 0 1px 0 rgba(255,255,255,.62);
}
body.adventure-home .side-tile.review-tile{
  background:linear-gradient(135deg,#9be1fb 0%,#7bc8ef 58%,#9ca7e8 100%);
}
body.adventure-home .side-tile.adventure-brain{
  background:linear-gradient(135deg,#ff9aa2 0%,#ffb77a 58%,#ffd18b 100%);
}
body.adventure-home .side-tile.adventure-memory{
  background:linear-gradient(135deg,#647eba 0%,#6569b7 58%,#7774c4 100%);
}
body.adventure-home .side-tile.adventure-reward{
  background:linear-gradient(135deg,#ffe08a 0%,#ffc362 55%,#ffa866 100%);
}
body.adventure-home .side-tile.review-tile:after,
body.adventure-home .side-tile.adventure-brain:after,
body.adventure-home .side-tile.adventure-memory:after,
body.adventure-home .side-tile.adventure-reward:after{
  right:13px;bottom:8px;font-size:32px;letter-spacing:0;opacity:.78;
  filter:drop-shadow(0 4px 6px rgba(12,56,95,.14));
}
body.adventure-home .side-tile.review-tile:after{content:"📝";}
body.adventure-home .side-tile.adventure-brain:after{content:"🎲";}
body.adventure-home .side-tile.adventure-memory:after{content:"🧠";}
body.adventure-home .side-tile.adventure-reward:after{content:"🎁";}
body.adventure-home .side-tile-icon{
  width:40px;height:40px;font-size:22px;background:rgba(255,255,255,.38);
  box-shadow:none;
}
body.adventure-home .side-tile-text{font-size:14px;}
body.adventure-home .side-tile-sub{font-size:11px;line-height:1.3;}

/* Softer supporting cards. */
body.adventure-home .side-profile,
body.adventure-home .badge-card{
  box-shadow:0 7px 17px rgba(16,94,148,.17),inset 0 1px 0 rgba(255,255,255,.94);
}
body.adventure-home .badge-empty{font-size:11px;line-height:1.35;}
body.adventure-home .profile-info p{font-size:11.5px;}
body.adventure-home .xp-main,
body.adventure-home .coin-main,
body.adventure-home .xp-level{font-size:10.5px;}
body.adventure-home .adventure-badge-rack{gap:8px;margin-top:11px;}
body.adventure-home .adventure-badge-rack span{
  width:31px;height:31px;font-size:17px;box-shadow:0 3px 7px rgba(17,94,145,.10);
}

/* Hero remains the emotional focal point, but decoration takes a step back. */
body.adventure-home .hero-daily{
  box-shadow:0 10px 22px rgba(118,63,64,.18),inset 0 1px 0 rgba(255,255,255,.52);
}
body.adventure-home .hero-daily:after{opacity:.68;font-size:17px;letter-spacing:15px;}
body.adventure-home .hero-text p{font-size:13px;}
body.adventure-home .hero-meta{font-size:11px;}
body.adventure-home .hero-trophy{font-size:59px;filter:drop-shadow(0 7px 8px rgba(102,55,45,.22));}

/* Learning controls: action first, map second. */
body.adventure-home .controls-panel{
  min-height:118px;
  padding:17px 37% 16px 18px;
}
body.adventure-home .controls-row{gap:9px;}
body.adventure-home .controls-pill{padding:8px 11px;}
body.adventure-home .control-label{font-size:10px;}
body.adventure-home .controls-pill select{font-size:12px;}
body.adventure-home .start-btn,
body.adventure-home .review-btn{font-size:13px;padding:10px 19px;}
body.adventure-home .review-info,
body.adventure-home .start-status{font-size:11px;}
body.adventure-home .adventure-map{
  right:18px;top:20px;width:32%;height:77px;opacity:.72;transform:rotate(1deg) scale(.96);
}
body.adventure-home .adventure-map-scenery{opacity:.74;}
body.adventure-home .rules-strip span{font-size:10.5px;padding:6px 10px;box-shadow:0 3px 8px rgba(25,93,145,.09);}

/* TODAY MISSION replaces the visually empty rules panel. */
body.adventure-home .today-summary.today-mission{
  min-height:190px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 210px;
  grid-template-rows:auto 1fr;
  column-gap:18px;
  row-gap:13px;
  padding:20px 22px;
  color:#17354d;
  border:1px solid rgba(255,255,255,.72);
  background:
    radial-gradient(circle at 86% 22%,rgba(255,229,130,.18),transparent 24%),
    linear-gradient(135deg,rgba(248,253,255,.83),rgba(212,242,255,.72));
  box-shadow:0 10px 22px rgba(14,91,143,.16),inset 0 1px 0 rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
  overflow:hidden;
}
body.adventure-home .today-summary.today-mission:after{display:none;}
body.adventure-home .mission-heading{
  grid-column:1/-1;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
body.adventure-home .mission-heading-copy{display:flex;align-items:center;gap:11px;}
body.adventure-home .mission-heading-icon{
  width:48px;height:48px;border-radius:15px;display:grid;place-items:center;font-size:27px;
  background:linear-gradient(145deg,#dff7ff,#fff0c9);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 5px 12px rgba(18,94,145,.11);
}
body.adventure-home .mission-heading .eyebrow{
  margin:0 0 2px;font-size:10px;letter-spacing:.13em;font-weight:900;color:#2188be;
}
body.adventure-home .mission-heading h3{margin:0;font-size:21px;line-height:1.08;font-weight:900;color:#17354d;}
body.adventure-home .mission-heading p{margin:3px 0 0;font-size:11.5px;line-height:1.35;color:#58798d;}
body.adventure-home .mission-focus{
  align-self:center;white-space:nowrap;padding:7px 11px;border-radius:999px;font-size:10.5px;font-weight:900;
  color:#155f8a;background:rgba(230,247,255,.86);border:1px solid #b9def0;
}
body.adventure-home .mission-left{min-width:0;display:flex;flex-direction:column;gap:11px;}
body.adventure-home .mission-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;}
body.adventure-home .mission-stat{
  min-width:0;padding:10px 11px;border-radius:15px;background:rgba(255,255,255,.74);
  border:1px solid rgba(173,216,236,.68);box-shadow:0 4px 10px rgba(19,91,139,.07);
}
body.adventure-home .mission-stat .icon{font-size:16px;margin-right:4px;}
body.adventure-home .mission-stat .label{display:block;font-size:9.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#6f8c9f;}
body.adventure-home .mission-stat strong{display:block;margin-top:4px;font-size:18px;line-height:1;font-weight:900;color:#17354d;}
body.adventure-home .mission-stat small{display:block;margin-top:4px;font-size:9.5px;color:#68879a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.adventure-home .mission-progress-card{
  padding:10px 12px;border-radius:15px;background:rgba(255,255,255,.67);border:1px solid rgba(173,216,236,.62);
}
body.adventure-home .mission-progress-head{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10.5px;color:#58798d;}
body.adventure-home .mission-progress-head strong{font-size:11.5px;color:#17354d;}
body.adventure-home .mission-progress{
  margin-top:7px;height:8px;border-radius:999px;background:#dbeef6;overflow:hidden;
}
body.adventure-home .mission-progress span{
  display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#21a8e5,#59c15b);transition:width .25s ease;
}
body.adventure-home .mission-tip{margin:7px 0 0;font-size:10px;line-height:1.35;color:#628196;}
body.adventure-home .mission-visual{
  position:relative;display:grid;place-items:center;border-radius:19px;
  background:linear-gradient(145deg,rgba(172,229,251,.56),rgba(239,250,255,.73));
  border:1px solid rgba(255,255,255,.72);overflow:hidden;
}
body.adventure-home .mission-visual:before,
body.adventure-home .mission-visual:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(64,159,207,.16);}
body.adventure-home .mission-visual:before{width:140px;height:140px;}
body.adventure-home .mission-visual:after{width:92px;height:92px;}
body.adventure-home .mission-robot{position:relative;z-index:2;font-size:65px;filter:drop-shadow(0 8px 10px rgba(25,92,137,.18));}
body.adventure-home .mission-planet{position:absolute;font-size:18px;opacity:.5;}
body.adventure-home .mission-planet.one{top:16px;right:20px;}
body.adventure-home .mission-planet.two{bottom:14px;left:20px;}

/* Do not show any auxiliary version footer in Adventure Home. */
body.adventure-home .adventure-version-footer,
body.adventure-home [data-adventure-version-footer]{display:none!important;}

@media (max-width:1100px){
  body.adventure-home .controls-panel{padding-right:18px;}
  body.adventure-home .adventure-map{display:none;}
  body.adventure-home .today-summary.today-mission{grid-template-columns:1fr 170px;}
}

@media (max-width:820px){
  body.adventure-home .today-summary.today-mission{grid-template-columns:1fr;padding:17px;}
  body.adventure-home .mission-visual{display:none;}
  body.adventure-home .mission-heading{align-items:flex-start;}
  body.adventure-home .mission-focus{display:none;}
  body.adventure-home .mission-stats{grid-template-columns:repeat(3,minmax(0,1fr));}
}

@media (max-width:560px){
  body.adventure-home .mission-stats{grid-template-columns:1fr;}
  body.adventure-home .mission-heading h3{font-size:19px;}
}


/* home-polish.css */
/* UbayBian Home v0.5.2 · final polish */

/* Header: slightly quieter secondary actions so the learning nav stays central. */
body.adventure-home .quiet,
body.adventure-home .family-logout{
  min-height:37px;
  padding:8px 14px;
  font-size:12px;
  box-shadow:0 5px 14px rgba(12,83,132,.14),inset 0 1px 0 #fff;
}
body.adventure-home .version{font-size:10px;padding:5px 9px;}

/* Profile: keep the star motif, but stop it competing with the child's name. */
body.adventure-home .side-profile{
  min-height:101px;
  padding-left:82px;
}
body.adventure-home .side-profile:before{
  left:-3px;top:-7px;width:78px;height:78px;font-size:69px;
  filter:drop-shadow(0 6px 8px rgba(175,105,6,.18));
}
body.adventure-home .profile-avatar{
  left:18px;top:25px;width:51px;height:51px;font-size:31px;
}
body.adventure-home .profile-info h2{font-size:19px;}

/* Locked badge shelf: decorative slots are visibly unavailable until earned. */
body.adventure-home .adventure-badge-rack.is-locked span{
  filter:grayscale(1);
  opacity:.43;
  background:linear-gradient(145deg,#edf4f7,#e6eef2);
  border-color:#d7e4ea;
  box-shadow:none;
}
body.adventure-home .adventure-badge-rack.is-locked span:last-child{opacity:.62;}
body.adventure-home .badge-title{font-size:12.5px;}
body.adventure-home .badge-empty{color:#496d83;}

/* Side features: same family, slightly calmer saturation and clearer text. */
body.adventure-home .side-tile.adventure-memory{
  background:linear-gradient(135deg,#7188bf 0%,#7178bb 58%,#807dc6 100%);
}
body.adventure-home .side-tile-sub{color:#31556d;opacity:.92;}
body.adventure-home .side-tile.adventure-memory .side-tile-sub{color:rgba(255,255,255,.82);}
body.adventure-home .side-tile.review-tile:after,
body.adventure-home .side-tile.adventure-brain:after,
body.adventure-home .side-tile.adventure-memory:after,
body.adventure-home .side-tile.adventure-reward:after{opacity:.68;}

/* Hero: a slightly stronger trophy anchor, without adding more decoration. */
body.adventure-home .hero-trophy{font-size:62px;transform:translateY(3px) rotate(2deg);}
body.adventure-home .hero-text p{color:#543d34;}
body.adventure-home .hero-meta{color:#6e402d;}

/* Learning map: smaller than the actions, but now reads as an actual route. */
body.adventure-home .adventure-map{
  right:20px;top:17px;width:30%;height:82px;opacity:.84;transform:none;
}
body.adventure-home .adventure-map-road{
  left:7%;right:7%;top:25px;height:38px;
  border-width:5px;
  border-radius:52% 42% 48% 38%;
  background:linear-gradient(180deg,#efd39a,#e7c480);
  box-shadow:0 4px 0 rgba(67,112,132,.13),inset 0 2px 0 rgba(255,255,255,.35);
}
body.adventure-home .adventure-map-scenery{
  top:0;font-size:12px;letter-spacing:24px;opacity:.55;
}
body.adventure-home .adventure-map-checkpoints{position:absolute;inset:0;z-index:3;pointer-events:none;}
body.adventure-home .adventure-map-checkpoints .map-point{
  position:absolute;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-size:9px;font-weight:900;
  background:#fff;border:3px solid #55a9d4;box-shadow:0 3px 7px rgba(18,86,130,.17);
}
body.adventure-home .adventure-map-checkpoints .map-point.start,
body.adventure-home .adventure-map-checkpoints .map-point.goal{
  width:26px;height:26px;border:0;font-size:16px;background:rgba(255,255,255,.86);
}
body.adventure-home .adventure-map-checkpoints .p0{left:4%;top:39px;}
body.adventure-home .adventure-map-checkpoints .p1{left:28%;top:31px;}
body.adventure-home .adventure-map-checkpoints .p2{left:49%;top:46px;}
body.adventure-home .adventure-map-checkpoints .p3{left:70%;top:29px;}
body.adventure-home .adventure-map-checkpoints .p4{right:2%;top:35px;}
body.adventure-home .adventure-map-checkpoints .p1,
body.adventure-home .adventure-map-checkpoints .p2,
body.adventure-home .adventure-map-checkpoints .p3{background:#eef9ff;}

/* TODAY MISSION: compact dashboard, not a second hero. */
body.adventure-home .today-summary.today-mission{
  min-height:158px;
  grid-template-columns:minmax(0,1fr) 170px;
  grid-template-rows:auto 1fr;
  column-gap:14px;
  row-gap:9px;
  padding:15px 18px;
  background:
    radial-gradient(circle at 87% 21%,rgba(255,229,130,.12),transparent 23%),
    linear-gradient(135deg,rgba(248,253,255,.80),rgba(212,242,255,.70));
}
body.adventure-home .mission-heading{gap:12px;}
body.adventure-home .mission-heading-copy{gap:9px;}
body.adventure-home .mission-heading-icon{
  width:41px;height:41px;border-radius:13px;font-size:23px;
  box-shadow:0 4px 9px rgba(18,94,145,.09);
}
body.adventure-home .mission-heading .eyebrow{font-size:9px;}
body.adventure-home .mission-heading h3{font-size:18px;}
body.adventure-home .mission-heading p{font-size:10px;margin-top:2px;color:#4f7288;}
body.adventure-home .mission-focus{padding:6px 10px;font-size:9.5px;}
body.adventure-home .mission-left{gap:8px;}
body.adventure-home .mission-stats{gap:7px;}
body.adventure-home .mission-stat{
  padding:8px 9px;border-radius:13px;box-shadow:0 3px 8px rgba(19,91,139,.055);
}
body.adventure-home .mission-stat .icon{font-size:14px;}
body.adventure-home .mission-stat .label{font-size:8.5px;color:#5f7f93;}
body.adventure-home .mission-stat strong{margin-top:3px;font-size:16px;}
body.adventure-home .mission-stat small{margin-top:3px;font-size:8.8px;color:#5b7d91;}
body.adventure-home .mission-progress-card{padding:8px 10px;border-radius:13px;}
body.adventure-home .mission-progress-head{font-size:9.5px;}
body.adventure-home .mission-progress-head strong{font-size:10.5px;}
body.adventure-home .mission-progress{margin-top:5px;height:7px;}
body.adventure-home .mission-tip{margin-top:5px;font-size:9px;color:#56788e;}
body.adventure-home .mission-visual{
  min-height:120px;border-radius:16px;
  padding:9px 8px 8px;
  align-content:center;
  background:linear-gradient(145deg,rgba(184,233,250,.48),rgba(242,251,255,.72));
}
body.adventure-home .mission-visual:before{width:108px;height:108px;}
body.adventure-home .mission-visual:after{width:72px;height:72px;}
body.adventure-home .mission-robot{font-size:55px;transform:translateY(-6px);}
body.adventure-home .mission-planet{font-size:14px;opacity:.4;}
body.adventure-home .mission-planet.one{top:9px;right:14px;}
body.adventure-home .mission-planet.two{bottom:8px;left:14px;}
body.adventure-home .mission-companion-copy{
  position:absolute;left:9px;right:9px;bottom:7px;z-index:3;text-align:center;
  padding:5px 7px;border-radius:10px;
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.86);
  box-shadow:0 3px 8px rgba(20,90,134,.06);
}
body.adventure-home .mission-companion-copy strong{display:block;font-size:9.5px;color:#17354d;line-height:1.2;}
body.adventure-home .mission-companion-copy small{display:block;margin-top:1px;font-size:8px;color:#5d7d91;line-height:1.2;}

/* Tiny readability pass. */
body.adventure-home .review-info,
body.adventure-home .start-status{color:#355b73;}
body.adventure-home .rules-strip span{font-weight:800;}

@media (max-width:1100px){
  body.adventure-home .today-summary.today-mission{grid-template-columns:1fr 145px;}
}
@media (max-width:820px){
  body.adventure-home .today-summary.today-mission{grid-template-columns:1fr;min-height:0;}
}


/* home-dedup.css */
/* UbayBian Home v0.5.3 · cleanup legacy Adventure decorations */

/* v0.5.0 generated its own start flag / medal through pseudo-elements.
   v0.5.2 now renders real checkpoint nodes, so the legacy pair must be removed. */
body.adventure-home .adventure-map::before,
body.adventure-home .adventure-map::after{
  content:none!important;
  display:none!important;
}

/* v0.5.0 also placed a large robot bubble on every today-summary.
   Today Mission has its own heading icon + companion card now. */
body.adventure-home .today-summary.today-mission::before,
body.adventure-home .today-summary.today-mission::after{
  content:none!important;
  display:none!important;
}

/* Keep the new route visually centered once the duplicated legacy endpoints are gone. */
body.adventure-home .adventure-map-checkpoints .p0{
  left:5%;
  top:37px;
}
body.adventure-home .adventure-map-checkpoints .p4{
  right:4%;
  top:33px;
}

/* Give Today Mission's actual heading a clean, protected lane. */
body.adventure-home .today-summary.today-mission .mission-heading{
  position:relative;
  z-index:4;
  min-height:42px;
}
body.adventure-home .today-summary.today-mission .mission-heading-copy{
  min-width:0;
}
body.adventure-home .today-summary.today-mission .mission-heading-copy>div:last-child{
  min-width:0;
}

/* Slightly tighten the companion so it cannot visually creep into the content column. */
body.adventure-home .today-summary.today-mission .mission-visual{
  isolation:isolate;
}
body.adventure-home .today-summary.today-mission .mission-robot{
  max-width:100%;
}


/* login.css */
/* UbayBian v0.5.4 · Family Gateway / Adventure Login */

body.login-gateway{
  min-height:100vh;
  padding:14px;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 18% 18%,rgba(255,255,255,.22),transparent 24%),
    radial-gradient(circle at 82% 32%,rgba(66,210,255,.24),transparent 28%),
    linear-gradient(135deg,#209bdc 0%,#20b6ef 48%,#0d7fc0 100%);
}
body.login-gateway .shell{
  position:relative;
  width:100%;max-width:none;min-height:calc(100vh - 28px);margin:0;
  display:grid;grid-template-rows:auto 1fr auto;
  border-radius:26px;overflow:hidden;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.05);
  box-shadow:0 22px 54px rgba(3,63,105,.25);
  backdrop-filter:none;
}
body.login-gateway .topbar{
  min-height:64px;padding:11px 24px;
  background:linear-gradient(180deg,rgba(18,48,69,.92),rgba(21,53,73,.88));
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 12px 28px rgba(6,65,104,.20);
  backdrop-filter:blur(18px);
}
body.login-gateway .brand{font-size:20px;text-shadow:0 2px 6px rgba(0,0,0,.16)}
body.login-gateway .brand-icon{font-size:28px;filter:drop-shadow(0 5px 8px rgba(16,105,163,.3))}
body.login-gateway .version{
  margin-left:auto;font-size:10px;color:#d9e9f2;
  border-color:rgba(205,232,244,.28);background:rgba(255,255,255,.04);
  padding:5px 10px;
}
body.login-gateway main{
  position:relative;isolation:isolate;min-height:0;padding:34px 24px 44px;
  display:grid;place-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 43%,rgba(255,255,255,.11),transparent 26%),
    linear-gradient(135deg,rgba(36,183,239,.58),rgba(5,132,199,.52));
}
body.login-gateway main:before,
body.login-gateway main:after{
  content:"";position:absolute;z-index:-3;border-radius:50%;pointer-events:none;
}
body.login-gateway main:before{
  width:560px;height:560px;right:-210px;top:-140px;
  border:34px solid rgba(202,239,255,.10);transform:rotate(-24deg);
  box-shadow:0 0 0 52px rgba(255,255,255,.025),0 0 0 110px rgba(80,211,255,.035);
}
body.login-gateway main:after{
  width:410px;height:410px;left:-170px;bottom:-180px;
  border:26px solid rgba(255,255,255,.075);transform:rotate(20deg);
}
body.login-gateway footer{
  min-height:38px;align-items:center;padding:10px 22px;
  background:rgba(16,67,97,.72);color:#e6f5fc;border-top:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(12px);
}

.login-scene{
  position:relative;width:min(1040px,100%);min-height:570px;
  display:grid;place-items:center;
}
.login-scene .login-decor{position:absolute;inset:0;z-index:-1;pointer-events:none;}
.login-decor span{
  position:absolute;display:grid;place-items:center;
  filter:saturate(.72) blur(.3px);opacity:.15;
  text-shadow:0 10px 24px rgba(13,75,116,.12);
  user-select:none;
}
.login-decor .d1{font-size:108px;left:3%;top:4%;transform:rotate(-18deg)}
.login-decor .d2{font-size:95px;left:11%;bottom:8%;transform:rotate(-20deg)}
.login-decor .d3{font-size:108px;right:5%;top:10%;transform:rotate(12deg)}
.login-decor .d4{font-size:94px;right:13%;bottom:9%;transform:rotate(14deg)}
.login-decor .d5{font-size:72px;left:27%;top:24%;transform:rotate(13deg);opacity:.09}
.login-decor .d6{font-size:75px;right:28%;bottom:22%;transform:rotate(-9deg);opacity:.09}

body.login-gateway .login-card{
  position:relative;width:min(480px,calc(100vw - 52px));margin:0;
  padding:32px 36px 34px;border-radius:30px;
  background:
    linear-gradient(145deg,rgba(246,253,255,.86),rgba(222,244,252,.79));
  border:1px solid rgba(255,255,255,.82);
  box-shadow:
    0 22px 44px rgba(7,74,115,.24),
    0 0 0 10px rgba(255,255,255,.12),
    inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter:blur(22px);
}
body.login-gateway .login-card:before{
  content:"";position:absolute;inset:9px;border-radius:23px;pointer-events:none;
  border:1px solid rgba(255,255,255,.56);
}
body.login-gateway .login-icon{
  position:relative;z-index:1;width:66px;height:66px;margin:0 0 20px;
  display:grid;place-items:center;border-radius:20px;font-size:37px;
  background:linear-gradient(145deg,#fff3c2,#ffd46a);
  border:1px solid rgba(226,168,52,.34);
  box-shadow:0 10px 22px rgba(163,103,29,.18),inset 0 1px 0 #fff;
}
body.login-gateway .login-card .eyebrow{
  margin:0 0 12px;font-size:12px;font-weight:800;letter-spacing:.08em;color:#315c74;
}
body.login-gateway .login-card h1{
  margin:0 0 7px;font-size:31px;line-height:1.12;font-weight:900;letter-spacing:-.025em;color:#17354d;
}
body.login-gateway .login-card .intro{
  margin:0 0 23px;max-width:390px;font-size:14px;line-height:1.45;color:#4f7084;
}
body.login-gateway .login-form{position:relative;z-index:1;display:grid;gap:7px;}
body.login-gateway .field-label{
  margin-top:3px;font-size:10px;font-weight:900;color:#274a60;
}
.login-input-wrap{position:relative;display:block;}
.login-input-icon{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);z-index:2;
  width:22px;height:22px;display:grid;place-items:center;font-size:14px;color:#486a7d;pointer-events:none;
}
body.login-gateway .login-input-wrap .text-answer{
  width:100%;height:45px;padding:10px 13px 10px 42px;border-radius:12px;
  border:1px solid rgba(84,145,177,.42);
  background:rgba(239,248,252,.64);color:#17354d;font-size:13px;
  box-shadow:inset 0 1px 2px rgba(31,88,119,.06),0 1px 0 rgba(255,255,255,.68);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
body.login-gateway .login-input-wrap .text-answer::placeholder{color:#7891a0;opacity:.9}
body.login-gateway .login-input-wrap .text-answer:focus{
  background:rgba(255,255,255,.86);border-color:#159fe2;
  box-shadow:0 0 0 4px rgba(21,159,226,.13),inset 0 1px 2px rgba(31,88,119,.04);
}
body.login-gateway .login-form .primary{
  width:100%;height:44px;margin-top:8px;padding:0 18px;border-radius:13px;
  background:linear-gradient(180deg,#ff8555,#f05b31);color:#fff;
  font-size:13px;font-weight:900;
  box-shadow:0 9px 18px rgba(209,75,34,.29),inset 0 1px 0 rgba(255,255,255,.28),0 3px 0 rgba(174,59,29,.22);
  transition:transform .12s,box-shadow .12s;
}
body.login-gateway .login-form .primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 11px 22px rgba(209,75,34,.34),inset 0 1px 0 rgba(255,255,255,.28),0 3px 0 rgba(174,59,29,.22)}
body.login-gateway .login-status{min-height:17px;margin:4px 0 0;text-align:center;font-size:10px;color:#c5483c;font-weight:700;}
.login-welcome-bot{
  position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);z-index:2;
  display:grid;place-items:center;width:72px;height:58px;font-size:48px;
  filter:drop-shadow(0 8px 10px rgba(7,79,119,.2));
  animation:loginBotFloat 3.2s ease-in-out infinite;
}
.login-welcome-bot:after{
  content:"";position:absolute;left:50%;bottom:1px;transform:translateX(-50%);z-index:-1;
  width:54px;height:10px;border-radius:50%;background:rgba(3,75,116,.16);filter:blur(5px);
}
@keyframes loginBotFloat{0%,100%{transform:translate(-50%,0) rotate(-2deg)}50%{transform:translate(-50%,-6px) rotate(2deg)}}

@media (max-height:760px) and (min-width:681px){
  body.login-gateway main{padding-top:20px;padding-bottom:28px;}
  .login-scene{min-height:500px;}
  body.login-gateway .login-card{padding:25px 32px 27px;}
  body.login-gateway .login-icon{width:57px;height:57px;font-size:31px;margin-bottom:14px;}
  body.login-gateway .login-card h1{font-size:28px;}
  body.login-gateway .login-card .intro{margin-bottom:17px;}
  .login-welcome-bot{font-size:42px;height:50px;}
}
@media (max-width:680px){
  body.login-gateway{padding:0;}
  body.login-gateway .shell{min-height:100vh;border:0;border-radius:0;}
  body.login-gateway .topbar{min-height:58px;padding:9px 15px;}
  body.login-gateway .brand{font-size:18px;}
  body.login-gateway .version{font-size:9px;padding:4px 8px;}
  body.login-gateway main{padding:24px 14px 38px;}
  .login-scene{min-height:520px;}
  body.login-gateway .login-card{width:min(430px,100%);padding:27px 24px 28px;border-radius:26px;}
  body.login-gateway .login-card h1{font-size:27px;}
  body.login-gateway .login-card .intro{font-size:13px;}
  .login-decor .d1,.login-decor .d3{font-size:70px;}
  .login-decor .d2,.login-decor .d4{font-size:62px;}
  .login-welcome-bot{bottom:-4px;}
  body.login-gateway footer{font-size:9px;padding:9px 14px;}
}
@media (prefers-reduced-motion:reduce){.login-welcome-bot{animation:none}}


/* login-polish.css */
/* UbayBian v0.5.5 · Family Gateway final polish
   Scoped to the pre-login state only. Home v0.5.3 remains the locked baseline. */

body.login-gateway{
  background:
    radial-gradient(circle at 50% 42%,rgba(222,248,255,.28),transparent 28%),
    radial-gradient(circle at 14% 18%,rgba(255,255,255,.16),transparent 24%),
    radial-gradient(circle at 84% 28%,rgba(63,205,255,.18),transparent 29%),
    linear-gradient(145deg,#1599d8 0%,#24b7ed 48%,#087ab6 100%);
}

/* Floating gateway shell/header */
body.login-gateway .shell{
  border:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
  grid-template-rows:auto 1fr auto;
}
body.login-gateway .topbar{
  margin:2px 4px 0;
  min-height:62px;
  padding:10px 22px;
  border:1px solid rgba(214,239,249,.20);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(18,49,70,.94),rgba(17,48,69,.89));
  box-shadow:0 14px 34px rgba(5,61,96,.22),inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(20px);
}
body.login-gateway .brand{font-size:19px;gap:8px;}
body.login-gateway .brand-icon{font-size:27px;}
body.login-gateway .version{
  font-size:9.5px;
  padding:4px 9px;
  color:#dcebf2;
  background:rgba(255,255,255,.045);
  border-color:rgba(211,235,245,.24);
}

/* More depth, less visual noise */
body.login-gateway main{
  margin-top:8px;
  border-radius:24px;
  background:
    radial-gradient(circle at 50% 44%,rgba(235,251,255,.20),transparent 23%),
    radial-gradient(circle at 50% 52%,rgba(6,97,151,.12),transparent 42%),
    linear-gradient(145deg,rgba(31,183,236,.63),rgba(5,128,193,.57));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
body.login-gateway main:before{opacity:.74;}
body.login-gateway main:after{opacity:.62;}
.login-decor span{opacity:.105;filter:saturate(.56) blur(.45px);}
.login-decor .d5,.login-decor .d6{opacity:.06;}

/* Cleaner, lighter glass card */
body.login-gateway .login-card{
  width:min(452px,calc(100vw - 52px));
  padding:29px 32px 30px;
  border-radius:27px;
  background:linear-gradient(145deg,rgba(247,253,255,.84),rgba(224,244,251,.76));
  border:1px solid rgba(255,255,255,.72);
  box-shadow:
    0 23px 52px rgba(7,70,111,.22),
    0 0 0 5px rgba(208,244,255,.10),
    inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter:blur(24px);
}
body.login-gateway .login-card:before{
  inset:1px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.25);
}

/* Security badge */
body.login-gateway .login-icon{
  width:60px;height:60px;margin-bottom:17px;
  border-radius:18px;font-size:32px;
  background:linear-gradient(145deg,#fff4c7,#ffd66f);
  border-color:rgba(225,169,57,.27);
  box-shadow:0 8px 18px rgba(148,96,27,.14),inset 0 1px 0 rgba(255,255,255,.94);
}
body.login-gateway .login-card .eyebrow{
  margin-bottom:10px;
  font-size:10.5px;
  font-weight:900;
  letter-spacing:.14em;
  color:#466a7c;
}
body.login-gateway .login-card h1{
  margin-bottom:7px;
  font-size:29px;
  letter-spacing:-.022em;
}
body.login-gateway .login-card .intro{
  margin-bottom:20px;
  font-size:13.5px;
  line-height:1.48;
  color:#4a6a7c;
}

/* Inputs */
body.login-gateway .login-form{gap:8px;}
body.login-gateway .field-label{
  margin-top:3px;
  font-size:11px;
  color:#294d61;
}
.login-input-icon{
  left:13px;
  width:24px;height:24px;
  font-size:15px;
  color:#3e6579;
  opacity:.88;
}
body.login-gateway .login-input-wrap .text-answer{
  height:46px;
  padding-left:43px;
  border-radius:13px;
  background:rgba(244,250,253,.68);
  border-color:rgba(83,143,173,.33);
  font-size:13px;
}
body.login-gateway .login-input-wrap .text-answer:focus{
  border-color:#149edc;
  box-shadow:0 0 0 3px rgba(20,158,220,.12),inset 0 1px 2px rgba(31,88,119,.035);
}
body.login-gateway .login-form .primary{
  height:45px;
  margin-top:9px;
  border-radius:13px;
  background:linear-gradient(180deg,#ff8150,#f15e34);
  box-shadow:0 7px 15px rgba(204,76,36,.22),inset 0 1px 0 rgba(255,255,255,.25);
}
body.login-gateway .login-form .primary:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:0 10px 19px rgba(204,76,36,.26),inset 0 1px 0 rgba(255,255,255,.25);
}

/* Welcome bot now belongs below the card, not on its edge */
.login-welcome-bot{
  bottom:-31px;
  width:78px;height:62px;
  font-size:52px;
  filter:drop-shadow(0 9px 12px rgba(5,69,106,.19));
}
.login-welcome-bot:after{bottom:-1px;width:58px;opacity:.72;}

/* Footer becomes a quiet glass caption rather than a heavy bar */
body.login-gateway footer{
  margin-top:8px;
  min-height:32px;
  padding:7px 18px;
  border:0;
  border-radius:16px;
  background:rgba(13,68,98,.30);
  color:rgba(239,250,255,.90);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(10px);
}

@media (max-height:760px) and (min-width:681px){
  body.login-gateway .topbar{min-height:58px;}
  body.login-gateway main{margin-top:6px;padding-top:17px;padding-bottom:26px;}
  .login-scene{min-height:474px;}
  body.login-gateway .login-card{width:min(438px,calc(100vw - 52px));padding:23px 29px 24px;}
  body.login-gateway .login-icon{width:54px;height:54px;font-size:29px;margin-bottom:12px;}
  body.login-gateway .login-card h1{font-size:27px;}
  body.login-gateway .login-card .intro{margin-bottom:15px;font-size:13px;}
  .login-welcome-bot{bottom:-27px;font-size:46px;height:54px;}
}

@media (max-width:680px){
  body.login-gateway .topbar{margin:8px 9px 0;border-radius:18px;}
  body.login-gateway main{margin:8px 0 0;border-radius:22px;padding:22px 14px 42px;}
  .login-scene{min-height:510px;}
  body.login-gateway .login-card{width:min(420px,100%);padding:25px 22px 27px;border-radius:24px;}
  body.login-gateway .login-card:before{border-radius:23px;}
  body.login-gateway .login-card h1{font-size:26px;}
  body.login-gateway .field-label{font-size:10.5px;}
  .login-welcome-bot{bottom:-29px;font-size:47px;}
  body.login-gateway footer{margin:7px 9px 9px;border-radius:14px;}
}


/* login-password.css */
/* UbayBian v0.5.6 · Password-only Family Gateway */

/* Wordmark must read as one product name: UbayBian */
.brand>.brand-wordmark{
  display:inline-flex;
  align-items:baseline;
  gap:0;
  color:inherit!important;
  white-space:nowrap;
}
.brand>.brand-wordmark>span{color:#ffd449;}

/* The password-only card can be calmer and more compact. */
body.login-gateway .login-card{
  width:min(430px,calc(100vw - 52px));
  padding:30px 34px 31px;
}
body.login-gateway .login-icon{margin-bottom:18px;}
body.login-gateway .login-card .eyebrow{margin-bottom:11px;}
body.login-gateway .login-card h1{
  margin-bottom:25px;
  font-size:29px;
}
body.login-gateway .login-form{gap:9px;}
body.login-gateway .field-label{
  margin-top:0;
  font-size:11.5px;
}
body.login-gateway .login-input-wrap .text-answer{
  height:49px;
  font-size:14px;
}
body.login-gateway .login-form .primary{
  height:47px;
  margin-top:10px;
  font-size:13.5px;
}
body.login-gateway .login-status{margin-top:5px;}

/* With fewer fields, bring the gateway composition inward rather than leaving dead space. */
.login-scene{min-height:515px;}
.login-welcome-bot{bottom:-33px;}

@media (max-height:760px) and (min-width:681px){
  .login-scene{min-height:430px;}
  body.login-gateway .login-card{
    width:min(416px,calc(100vw - 52px));
    padding:24px 29px 25px;
  }
  body.login-gateway .login-card h1{margin-bottom:20px;font-size:27px;}
  body.login-gateway .login-input-wrap .text-answer{height:46px;}
  body.login-gateway .login-form .primary{height:44px;}
}

@media (max-width:680px){
  .login-scene{min-height:460px;}
  body.login-gateway .login-card{
    width:min(400px,100%);
    padding:26px 23px 28px;
  }
  body.login-gateway .login-card h1{margin-bottom:22px;font-size:26px;}
}


/* profile-select.css */
/* UbayBian v0.5.7 · Profile Select — Cosmic Adventure
   Scoped only to the logged-in profile chooser. Home v0.5.3 remains the locked baseline. */

body[data-profile=""]:not(.login-gateway){
  background:
    radial-gradient(circle at 18% 18%,rgba(71,178,255,.32),transparent 24%),
    radial-gradient(circle at 82% 16%,rgba(196,122,255,.28),transparent 26%),
    radial-gradient(circle at 78% 84%,rgba(255,164,117,.16),transparent 22%),
    linear-gradient(150deg,#153f86 0%,#246fc0 38%,#6b63b9 72%,#425087 100%);
  color:#15324b;
}

body[data-profile=""]:not(.login-gateway) .shell{
  max-width:none;
  width:100%;
  min-height:calc(100vh - 24px);
  display:grid;
  grid-template-rows:auto 1fr auto;
  overflow:hidden;
  border-radius:28px;
  border:1px solid rgba(218,238,255,.32);
  background:transparent;
  box-shadow:0 22px 56px rgba(18,35,78,.24),inset 0 1px 0 rgba(255,255,255,.08);
}

/* Floating cosmic topbar */
body[data-profile=""]:not(.login-gateway) .topbar{
  margin:0;
  min-height:72px;
  padding:13px 26px;
  border:0;
  border-bottom:1px solid rgba(220,238,255,.16);
  border-radius:27px 27px 0 0;
  background:linear-gradient(180deg,rgba(29,48,83,.92),rgba(27,43,74,.88));
  box-shadow:0 10px 28px rgba(18,32,67,.16),inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(18px);
}
body[data-profile=""]:not(.login-gateway) .brand{
  font-size:21px;
  font-weight:900;
  gap:8px;
}
body[data-profile=""]:not(.login-gateway) .brand-icon{font-size:28px;}
body[data-profile=""]:not(.login-gateway) .brand-wordmark{display:inline-flex;gap:0;}
body[data-profile=""]:not(.login-gateway) .brand-wordmark>span{color:#ffd34d;}
body[data-profile=""]:not(.login-gateway) .version{
  margin-left:auto;
  color:#dce9f6;
  background:rgba(255,255,255,.045);
  border-color:rgba(219,235,248,.23);
  padding:5px 10px;
}
body[data-profile=""]:not(.login-gateway) .family-logout{
  min-height:42px;
  padding:8px 18px;
  border-radius:14px;
  border-color:rgba(220,238,248,.34);
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}

/* Cosmic stage */
body[data-profile=""]:not(.login-gateway) main{
  position:relative;
  min-height:0;
  padding:36px 7vw 30px;
  overflow:hidden;
  background:
    radial-gradient(circle at 7% 20%,rgba(136,192,255,.34) 0 5.2%,transparent 5.35%),
    radial-gradient(circle at 91% 9%,rgba(222,184,255,.24) 0 8%,transparent 8.2%),
    radial-gradient(circle at 9% 87%,rgba(255,179,145,.15) 0 5%,transparent 5.2%),
    radial-gradient(circle at 92% 76%,rgba(255,201,145,.18) 0 6.3%,transparent 6.5%),
    radial-gradient(circle at 15% 13%,rgba(255,255,255,.68) 0 1px,transparent 2px),
    radial-gradient(circle at 26% 33%,rgba(255,255,255,.54) 0 1.4px,transparent 2.2px),
    radial-gradient(circle at 64% 14%,rgba(255,255,255,.65) 0 1.2px,transparent 2px),
    radial-gradient(circle at 79% 37%,rgba(255,255,255,.52) 0 1px,transparent 1.8px),
    radial-gradient(circle at 38% 79%,rgba(255,255,255,.46) 0 1px,transparent 1.8px),
    linear-gradient(155deg,rgba(53,127,198,.88),rgba(63,103,177,.78) 47%,rgba(122,94,162,.72));
}
body[data-profile=""]:not(.login-gateway) main::before,
body[data-profile=""]:not(.login-gateway) main::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
  border:1px solid rgba(226,240,255,.12);
  border-radius:50%;
}
body[data-profile=""]:not(.login-gateway) main::before{
  width:460px;height:460px;
  right:-205px;top:-190px;
  box-shadow:0 0 0 58px rgba(255,255,255,.018),0 0 0 118px rgba(255,255,255,.012);
}
body[data-profile=""]:not(.login-gateway) main::after{
  width:350px;height:350px;
  left:-190px;bottom:-205px;
  box-shadow:0 0 0 52px rgba(255,255,255,.017);
}

/* Intro */
body[data-profile=""]:not(.login-gateway) .profile-intro{
  position:relative;
  z-index:2;
  max-width:1080px;
  margin:0 auto 20px;
  color:white;
}
body[data-profile=""]:not(.login-gateway) .profile-intro::before{
  content:"🪐";
  position:absolute;
  left:-118px;
  top:10px;
  font-size:66px;
  opacity:.42;
  filter:drop-shadow(0 12px 22px rgba(28,49,99,.18));
}
body[data-profile=""]:not(.login-gateway) .profile-intro::after{
  content:"✦";
  position:absolute;
  right:14px;
  top:16px;
  color:#ffe27a;
  font-size:25px;
  text-shadow:-72px 22px 0 rgba(255,229,132,.65),52px 54px 0 rgba(255,255,255,.48);
}
body[data-profile=""]:not(.login-gateway) .profile-intro .eyebrow{
  margin:0 0 7px;
  color:rgba(241,248,255,.84);
  font-size:12px;
  letter-spacing:.11em;
}
body[data-profile=""]:not(.login-gateway) .profile-intro h1{
  margin:0 0 7px;
  font-size:44px;
  line-height:1.04;
  letter-spacing:-.035em;
  color:#fff;
  text-shadow:0 3px 12px rgba(25,45,92,.18);
}
body[data-profile=""]:not(.login-gateway) .profile-intro .intro{
  max-width:780px;
  color:rgba(248,251,255,.90);
  font-size:14px;
  line-height:1.45;
}

/* Character select cards */
body[data-profile=""]:not(.login-gateway) .profile-grid{
  position:relative;
  z-index:2;
  max-width:1080px;
  margin:0 auto;
  gap:20px;
}
body[data-profile=""]:not(.login-gateway) .profile-card{
  min-height:270px;
  padding:26px 26px 22px;
  display:grid;
  grid-template-columns:170px minmax(0,1fr);
  grid-template-rows:auto auto auto auto 1fr auto;
  column-gap:22px;
  row-gap:4px;
  align-items:start;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.72);
  border-radius:25px;
  background:
    radial-gradient(circle at 9% 16%,rgba(143,214,255,.24),transparent 25%),
    linear-gradient(145deg,rgba(255,255,255,.94),rgba(243,249,255,.89));
  box-shadow:0 18px 34px rgba(22,42,86,.20),inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter:blur(18px);
  transform:translateZ(0);
}
body[data-profile=""]:not(.login-gateway) .profile-card.orange{
  background:
    radial-gradient(circle at 90% 15%,rgba(255,211,125,.20),transparent 27%),
    linear-gradient(145deg,rgba(255,255,255,.95),rgba(255,249,239,.90));
}
body[data-profile=""]:not(.login-gateway) .profile-card:hover{
  transform:translateY(-4px) scale(1.008);
  box-shadow:0 24px 46px rgba(20,38,78,.24),0 0 0 3px rgba(130,206,255,.10),inset 0 1px 0 rgba(255,255,255,.98);
}
body[data-profile=""]:not(.login-gateway) .profile-card.orange:hover{
  box-shadow:0 24px 46px rgba(20,38,78,.22),0 0 0 3px rgba(255,201,92,.11),inset 0 1px 0 rgba(255,255,255,.98);
}

body[data-profile=""]:not(.login-gateway) .profile-card .avatar{
  grid-column:1;
  grid-row:1 / 6;
  width:150px;
  height:150px;
  margin:0;
  padding:0;
  display:grid;
  place-items:center;
  align-self:center;
  justify-self:center;
  border-radius:36px;
  font-size:82px;
  line-height:1;
  background:linear-gradient(145deg,#e8f8ff,#c9edff);
  border:1px solid rgba(86,178,225,.18);
  box-shadow:0 14px 28px rgba(45,133,181,.14),inset 0 1px 0 rgba(255,255,255,.86);
  filter:drop-shadow(0 9px 12px rgba(33,94,137,.10));
}
body[data-profile=""]:not(.login-gateway) .profile-card.orange .avatar{
  background:linear-gradient(145deg,#fff7dc,#ffe5a7);
  border-color:rgba(225,166,52,.18);
  box-shadow:0 14px 28px rgba(177,127,39,.13),inset 0 1px 0 rgba(255,255,255,.86);
}
body[data-profile=""]:not(.login-gateway) .profile-name{
  grid-column:2;
  grid-row:1;
  align-self:end;
  margin:3px 0 0;
  font-size:31px;
  line-height:1.05;
  color:#172e52;
}
body[data-profile=""]:not(.login-gateway) .profile-meta{
  grid-column:2;
  grid-row:2;
  color:#334e69;
  font-size:13px;
  font-weight:700;
}
/* Real subject icons from each child's curriculum, not fake progress data */
body[data-profile=""]:not(.login-gateway) .profile-card::before{
  grid-column:2;
  grid-row:3;
  align-self:center;
  content:"📚  🧮  💻";
  display:block;
  margin-top:11px;
  font-size:22px;
  letter-spacing:3px;
  filter:drop-shadow(0 3px 5px rgba(31,70,112,.10));
}
body[data-profile=""]:not(.login-gateway) .profile-card.orange::before{content:"📚  ✏️  🔬";}
body[data-profile=""]:not(.login-gateway) .profile-card::after{
  grid-column:2;
  grid-row:3;
  justify-self:end;
  align-self:center;
  content:"⭐  🏅";
  margin-top:11px;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(224,244,255,.62);
  border:1px solid rgba(139,198,230,.20);
  font-size:18px;
}
body[data-profile=""]:not(.login-gateway) .profile-card.orange::after{
  background:rgba(255,243,210,.70);
  border-color:rgba(227,184,83,.20);
}
body[data-profile=""]:not(.login-gateway) .profile-count{
  grid-column:2;
  grid-row:4;
  margin-top:7px;
  color:#61798e;
  font-size:12px;
  font-weight:700;
}
body[data-profile=""]:not(.login-gateway) .profile-enter{
  grid-column:1 / -1;
  grid-row:6;
  margin-top:15px;
  min-height:46px;
  display:grid;
  place-items:center;
  border-radius:15px;
  color:#fff;
  background:linear-gradient(180deg,#399df0,#2579ce);
  box-shadow:0 8px 16px rgba(37,121,206,.24),inset 0 1px 0 rgba(255,255,255,.34);
  font-size:15px;
  font-weight:900;
}
body[data-profile=""]:not(.login-gateway) .profile-card.orange .profile-enter{
  color:#fff;
  background:linear-gradient(180deg,#f7c83e,#dca51c);
  box-shadow:0 8px 16px rgba(198,142,18,.23),inset 0 1px 0 rgba(255,255,255,.34);
}

body[data-profile=""]:not(.login-gateway) .hint{
  position:relative;
  z-index:2;
  margin:18px auto 0;
  color:rgba(250,252,255,.92);
  font-size:11.5px;
  text-shadow:0 2px 8px rgba(23,39,80,.22);
}

body[data-profile=""]:not(.login-gateway) footer{
  min-height:42px;
  padding:11px 22px;
  color:rgba(242,248,255,.91);
  background:rgba(23,42,76,.58);
  border-top:1px solid rgba(223,237,255,.12);
  backdrop-filter:blur(12px);
}

@media (max-height:780px) and (min-width:801px){
  body[data-profile=""]:not(.login-gateway) main{padding-top:24px;padding-bottom:20px;}
  body[data-profile=""]:not(.login-gateway) .profile-intro{margin-bottom:14px;}
  body[data-profile=""]:not(.login-gateway) .profile-intro h1{font-size:38px;}
  body[data-profile=""]:not(.login-gateway) .profile-card{min-height:238px;padding:20px 22px 18px;grid-template-columns:145px minmax(0,1fr);}
  body[data-profile=""]:not(.login-gateway) .profile-card .avatar{width:128px;height:128px;font-size:70px;border-radius:30px;}
  body[data-profile=""]:not(.login-gateway) .profile-name{font-size:28px;}
  body[data-profile=""]:not(.login-gateway) .profile-card::before{font-size:20px;margin-top:7px;}
  body[data-profile=""]:not(.login-gateway) .profile-card::after{font-size:16px;margin-top:7px;}
  body[data-profile=""]:not(.login-gateway) .profile-enter{margin-top:10px;min-height:42px;}
  body[data-profile=""]:not(.login-gateway) .hint{margin-top:12px;}
}

@media (max-width:800px){
  body[data-profile=""]:not(.login-gateway){padding:10px;}
  body[data-profile=""]:not(.login-gateway) .shell{min-height:calc(100vh - 20px);border-radius:22px;}
  body[data-profile=""]:not(.login-gateway) .topbar{min-height:62px;padding:10px 15px;border-radius:21px 21px 0 0;}
  body[data-profile=""]:not(.login-gateway) main{padding:26px 16px 30px;overflow:auto;}
  body[data-profile=""]:not(.login-gateway) .profile-intro{margin-bottom:18px;}
  body[data-profile=""]:not(.login-gateway) .profile-intro::before{display:none;}
  body[data-profile=""]:not(.login-gateway) .profile-intro h1{font-size:34px;}
  body[data-profile=""]:not(.login-gateway) .profile-intro .intro{font-size:13px;}
  body[data-profile=""]:not(.login-gateway) .profile-grid{grid-template-columns:1fr;gap:16px;}
  body[data-profile=""]:not(.login-gateway) .profile-card{min-height:230px;grid-template-columns:130px minmax(0,1fr);padding:20px;column-gap:18px;}
  body[data-profile=""]:not(.login-gateway) .profile-card .avatar{width:116px;height:116px;font-size:65px;border-radius:28px;}
  body[data-profile=""]:not(.login-gateway) .profile-name{font-size:27px;}
  body[data-profile=""]:not(.login-gateway) .profile-card::before{font-size:18px;letter-spacing:1px;}
  body[data-profile=""]:not(.login-gateway) .profile-card::after{font-size:15px;padding:4px 7px;}
}

@media (max-width:520px){
  body[data-profile=""]:not(.login-gateway) .brand{font-size:18px;}
  body[data-profile=""]:not(.login-gateway) .version{display:none;}
  body[data-profile=""]:not(.login-gateway) .family-logout{padding:7px 12px;min-height:38px;}
  body[data-profile=""]:not(.login-gateway) .profile-intro h1{font-size:30px;}
  body[data-profile=""]:not(.login-gateway) .profile-card{grid-template-columns:98px minmax(0,1fr);padding:17px;column-gap:14px;}
  body[data-profile=""]:not(.login-gateway) .profile-card .avatar{width:88px;height:88px;font-size:52px;border-radius:23px;align-self:start;}
  body[data-profile=""]:not(.login-gateway) .profile-card::after{display:none;}
  body[data-profile=""]:not(.login-gateway) .profile-card::before{font-size:16px;}
  body[data-profile=""]:not(.login-gateway) .profile-enter{min-height:43px;}
}


/* profile-select-polish.css */
/* UbayBian v0.5.8 · Cosmic Profile Polish
   Visual-only override for the logged-in profile chooser.
   Home Adventure UI v0.5.3 remains the locked baseline. */

body[data-profile=""]:not(.login-gateway) main{
  padding-top:48px;
  background:
    radial-gradient(circle at 50% 43%,rgba(126,211,255,.13),transparent 24%),
    radial-gradient(circle at 49% 77%,rgba(255,255,255,.08),transparent 20%),
    radial-gradient(circle at 21% 67%,rgba(255,225,151,.08),transparent 16%),
    radial-gradient(circle at 79% 61%,rgba(198,170,255,.09),transparent 18%),
    radial-gradient(circle at 7% 20%,rgba(136,192,255,.30) 0 5.2%,transparent 5.35%),
    radial-gradient(circle at 91% 9%,rgba(222,184,255,.22) 0 8%,transparent 8.2%),
    radial-gradient(circle at 9% 87%,rgba(255,179,145,.13) 0 5%,transparent 5.2%),
    radial-gradient(circle at 92% 76%,rgba(255,201,145,.15) 0 6.3%,transparent 6.5%),
    radial-gradient(circle at 16% 14%,rgba(255,255,255,.72) 0 1px,transparent 2px),
    radial-gradient(circle at 28% 31%,rgba(255,255,255,.48) 0 1.2px,transparent 2.1px),
    radial-gradient(circle at 47% 19%,rgba(255,255,255,.70) 0 1px,transparent 2px),
    radial-gradient(circle at 65% 14%,rgba(255,255,255,.62) 0 1.2px,transparent 2px),
    radial-gradient(circle at 78% 35%,rgba(255,255,255,.50) 0 1px,transparent 1.8px),
    radial-gradient(circle at 40% 78%,rgba(255,255,255,.42) 0 1px,transparent 1.8px),
    radial-gradient(circle at 61% 72%,rgba(255,255,255,.48) 0 1px,transparent 1.8px),
    linear-gradient(155deg,rgba(50,126,199,.91),rgba(61,101,177,.82) 47%,rgba(121,92,161,.76));
}

/* Bring the selector a little lower and give the title more breathing room. */
body[data-profile=""]:not(.login-gateway) .profile-intro{
  margin-bottom:24px;
}
body[data-profile=""]:not(.login-gateway) .profile-intro h1{
  font-size:43px;
  text-shadow:0 5px 18px rgba(18,38,83,.22);
}
body[data-profile=""]:not(.login-gateway) .profile-intro .intro{
  font-size:14.5px;
  color:rgba(250,253,255,.94);
}

/* More depth: card is now a real character-select tile instead of a flat panel. */
body[data-profile=""]:not(.login-gateway) .profile-card{
  min-height:286px;
  padding:25px 27px 22px;
  grid-template-columns:178px minmax(0,1fr);
  column-gap:24px;
  border-color:rgba(255,255,255,.80);
  background:
    radial-gradient(circle at 10% 18%,rgba(96,199,255,.24),transparent 28%),
    radial-gradient(circle at 84% 84%,rgba(80,153,231,.07),transparent 30%),
    linear-gradient(145deg,rgba(255,255,255,.96),rgba(239,248,255,.90));
  box-shadow:
    0 22px 46px rgba(16,37,82,.24),
    0 0 0 1px rgba(142,218,255,.10),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -18px 36px rgba(106,177,226,.045);
}
body[data-profile=""]:not(.login-gateway) .profile-card.orange{
  background:
    radial-gradient(circle at 88% 16%,rgba(255,211,107,.24),transparent 29%),
    radial-gradient(circle at 14% 84%,rgba(242,183,73,.07),transparent 30%),
    linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,247,227,.91));
  box-shadow:
    0 22px 46px rgba(48,39,77,.22),
    0 0 0 1px rgba(255,220,138,.10),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -18px 36px rgba(238,188,82,.05);
}
body[data-profile=""]:not(.login-gateway) .profile-card.blue:hover{
  box-shadow:0 28px 54px rgba(15,42,90,.27),0 0 0 4px rgba(95,195,255,.13),inset 0 1px 0 rgba(255,255,255,.98);
}
body[data-profile=""]:not(.login-gateway) .profile-card.orange:hover{
  box-shadow:0 28px 54px rgba(44,37,75,.25),0 0 0 4px rgba(255,203,83,.13),inset 0 1px 0 rgba(255,255,255,.98);
}

/* Original in-universe character avatars. Ubay keeps the red/blue wall-crawler-superhero energy
   he likes, but the character remains an original UbayBian robot. */
body[data-profile=""]:not(.login-gateway) .profile-card .avatar{
  width:166px;
  height:166px;
  border-radius:40px;
  font-size:0;
  color:transparent;
  background-repeat:no-repeat;
  background-position:center;
  background-size:94% 94%;
  box-shadow:0 18px 34px rgba(42,126,183,.18),0 0 30px rgba(96,207,255,.12),inset 0 1px 0 rgba(255,255,255,.92);
  animation:profile-avatar-float 4.2s ease-in-out infinite;
}
body[data-profile=""]:not(.login-gateway) .profile-card.blue .avatar{
  background-color:#dff5ff;
  background-image:url('assets/ubay-cosmic-spider-bot.svg');
  border-color:rgba(75,177,226,.24);
}
body[data-profile=""]:not(.login-gateway) .profile-card.orange .avatar{
  background-color:#fff3c8;
  background-image:url('assets/bian-cosmic-scout.svg');
  border-color:rgba(228,176,53,.24);
  box-shadow:0 18px 34px rgba(177,126,36,.16),0 0 30px rgba(255,211,103,.12),inset 0 1px 0 rgba(255,255,255,.92);
  animation-delay:-1.2s;
}
@keyframes profile-avatar-float{
  0%,100%{transform:translateY(0) rotate(-.5deg)}
  50%{transform:translateY(-5px) rotate(.5deg)}
}

body[data-profile=""]:not(.login-gateway) .profile-name{
  font-size:33px;
  letter-spacing:-.025em;
}
body[data-profile=""]:not(.login-gateway) .profile-meta{
  color:#3b5670;
  font-size:13.5px;
}
body[data-profile=""]:not(.login-gateway) .profile-count{
  color:#536f86;
  font-size:12.5px;
}

/* Make the reward decoration feel like a deliberate mini-chip rather than loose emoji. */
body[data-profile=""]:not(.login-gateway) .profile-card::after{
  content:"⭐  XP   🏅";
  margin-top:10px;
  padding:6px 11px;
  border-radius:13px;
  color:#41627d;
  background:linear-gradient(180deg,rgba(237,249,255,.88),rgba(218,241,253,.74));
  border:1px solid rgba(120,192,228,.25);
  box-shadow:0 5px 12px rgba(45,111,152,.08),inset 0 1px 0 rgba(255,255,255,.76);
  font-size:13px;
  font-weight:800;
  letter-spacing:.02em;
}
body[data-profile=""]:not(.login-gateway) .profile-card.orange::after{
  color:#795b20;
  background:linear-gradient(180deg,rgba(255,249,225,.94),rgba(255,237,184,.78));
  border-color:rgba(220,174,64,.26);
}

body[data-profile=""]:not(.login-gateway) .profile-enter{
  min-height:48px;
  border-radius:16px;
  letter-spacing:.01em;
}
body[data-profile=""]:not(.login-gateway) .profile-card.blue .profile-enter{
  background:linear-gradient(180deg,#3aa8f4,#267cd1);
  box-shadow:0 10px 20px rgba(36,121,206,.27),inset 0 1px 0 rgba(255,255,255,.38);
}
body[data-profile=""]:not(.login-gateway) .profile-card.orange .profile-enter{
  background:linear-gradient(180deg,#ffd14c,#e2ad20);
  box-shadow:0 10px 20px rgba(196,144,21,.25),inset 0 1px 0 rgba(255,255,255,.38);
}

body[data-profile=""]:not(.login-gateway) .hint{
  margin-top:20px;
  font-size:12.5px;
  font-weight:600;
  color:rgba(250,253,255,.96);
  text-shadow:0 2px 9px rgba(20,39,78,.26);
}

/* The exit action should not compete with the children cards. */
body[data-profile=""]:not(.login-gateway) .family-logout{
  min-height:38px;
  padding:7px 15px;
  font-size:13px;
  border-radius:13px;
  background:rgba(255,255,255,.045);
}

/* Lighter footer: still anchors the screen without becoming a heavy dark slab. */
body[data-profile=""]:not(.login-gateway) footer{
  min-height:34px;
  padding:8px 22px;
  background:rgba(19,40,75,.36);
  border-top:1px solid rgba(229,242,255,.10);
  color:rgba(245,250,255,.90);
  font-size:10.5px;
}

@media(max-height:780px) and (min-width:801px){
  body[data-profile=""]:not(.login-gateway) main{padding-top:30px;padding-bottom:18px;}
  body[data-profile=""]:not(.login-gateway) .profile-intro{margin-bottom:16px;}
  body[data-profile=""]:not(.login-gateway) .profile-card{min-height:248px;grid-template-columns:150px minmax(0,1fr);padding:19px 22px 17px;}
  body[data-profile=""]:not(.login-gateway) .profile-card .avatar{width:138px;height:138px;border-radius:32px;}
  body[data-profile=""]:not(.login-gateway) .profile-name{font-size:29px;}
  body[data-profile=""]:not(.login-gateway) .hint{margin-top:13px;}
}

@media(max-width:800px){
  body[data-profile=""]:not(.login-gateway) main{padding-top:26px;}
  body[data-profile=""]:not(.login-gateway) .profile-card{grid-template-columns:112px minmax(0,1fr);min-height:230px;padding:18px;column-gap:17px;}
  body[data-profile=""]:not(.login-gateway) .profile-card .avatar{width:104px;height:104px;border-radius:28px;}
  body[data-profile=""]:not(.login-gateway) .profile-name{font-size:27px;}
}

@media(max-width:560px){
  body[data-profile=""]:not(.login-gateway) .profile-card{grid-template-columns:88px minmax(0,1fr);min-height:205px;padding:15px;column-gap:13px;}
  body[data-profile=""]:not(.login-gateway) .profile-card .avatar{width:82px;height:82px;border-radius:23px;}
  body[data-profile=""]:not(.login-gateway) .profile-card::after{font-size:11px;padding:5px 8px;}
  body[data-profile=""]:not(.login-gateway) .profile-intro h1{font-size:32px;}
}


/* profile-select-final.css */
/* UbayBian v0.5.9 · Final Profile Polish
   Small visual-only refinements for the cosmic profile chooser.
   No behavior changes; Home v0.5.3 remains the locked baseline. */

/* Keep the selector premium and calm: no placeholder reward chip without real profile data. */
body[data-profile=""]:not(.login-gateway) .profile-card::after{
  content:none !important;
  display:none !important;
}

/* Subject icons should read as useful curriculum cues, not tiny decoration. */
body[data-profile=""]:not(.login-gateway) .profile-card::before{
  font-size:24px;
  letter-spacing:4px;
  margin-top:12px;
  filter:drop-shadow(0 3px 6px rgba(31,70,112,.12));
}

/* Bring the subject count slightly closer to the curriculum row after removing the placeholder chip. */
body[data-profile=""]:not(.login-gateway) .profile-count{
  margin-top:9px;
  color:#526f88;
  font-size:12.5px;
}

/* Bian stays warm/gold, but returns closer to the same white-glass system as Ubay. */
body[data-profile=""]:not(.login-gateway) .profile-card.orange{
  background:
    radial-gradient(circle at 88% 15%,rgba(255,210,106,.14),transparent 29%),
    radial-gradient(circle at 16% 84%,rgba(244,190,82,.045),transparent 30%),
    linear-gradient(145deg,rgba(255,255,255,.965),rgba(255,250,239,.925));
  box-shadow:
    0 22px 46px rgba(40,38,73,.215),
    0 0 0 1px rgba(255,220,138,.08),
    inset 0 1px 0 rgba(255,255,255,.99),
    inset 0 -16px 32px rgba(238,188,82,.035);
}

/* Micro contrast: secondary copy should remain readable against the cosmic stage. */
body[data-profile=""]:not(.login-gateway) .profile-meta{
  color:#2d4a66;
}
body[data-profile=""]:not(.login-gateway) .hint{
  color:rgba(255,255,255,.97);
  font-size:12px;
  font-weight:650;
  text-shadow:0 2px 10px rgba(18,34,76,.28);
}

/* Header exit should be available but visually secondary to the character choice. */
body[data-profile=""]:not(.login-gateway) .family-logout{
  min-height:38px;
  padding:6px 15px;
  border-radius:13px;
  font-size:13px;
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

/* Footer becomes a light glass caption instead of a heavy bottom bar. */
body[data-profile=""]:not(.login-gateway) footer{
  min-height:34px;
  padding:8px 22px;
  font-size:10.5px;
  color:rgba(244,249,255,.90);
  background:rgba(21,39,73,.32);
  border-top:1px solid rgba(225,239,255,.08);
  backdrop-filter:blur(9px);
}

/* Slightly more breathing room beneath cards without introducing more decoration. */
body[data-profile=""]:not(.login-gateway) .profile-grid{
  margin-bottom:2px;
}

@media (max-height:780px) and (min-width:801px){
  body[data-profile=""]:not(.login-gateway) .profile-card::before{font-size:22px;letter-spacing:3px;}
  body[data-profile=""]:not(.login-gateway) .hint{font-size:11.5px;}
}

@media (max-width:800px){
  body[data-profile=""]:not(.login-gateway) .profile-card::before{font-size:22px;}
  body[data-profile=""]:not(.login-gateway) .family-logout{min-height:36px;padding:6px 12px;}
}


/* profile-select-simple.css */
/* UbayBian v0.5.10 · Simpler Profile Select
   Removes explanatory helper copy that children do not need.
   Visual-only change for the logged-in profile chooser. */

body[data-profile=""]:not(.login-gateway) .profile-intro .intro,
body[data-profile=""]:not(.login-gateway) .hint{
  display:none !important;
}

/* Rebalance spacing now that the two helper sentences are gone. */
body[data-profile=""]:not(.login-gateway) .profile-intro{
  margin-bottom:22px;
}
body[data-profile=""]:not(.login-gateway) .profile-intro h1{
  margin-bottom:0;
}
body[data-profile=""]:not(.login-gateway) .profile-grid{
  margin-top:0;
}

@media (max-height:780px) and (min-width:801px){
  body[data-profile=""]:not(.login-gateway) .profile-intro{margin-bottom:16px;}
}


/* transition.css */
/* UbayBian v0.5.11 · Adventure Transition
   Modernizes the short dashboard-loading state without touching app behavior. */

body[data-profile]:has(.loading-card:not(.error-state)) main{
  position:relative;
  display:grid;
  place-items:center;
  min-height:680px;
  overflow:hidden;
  padding:40px 24px;
  background:
    radial-gradient(circle at 50% 38%,rgba(255,255,255,.24),transparent 23%),
    radial-gradient(circle at 16% 18%,rgba(121,218,255,.32),transparent 21%),
    radial-gradient(circle at 84% 20%,rgba(255,215,125,.14),transparent 20%),
    radial-gradient(circle at 82% 82%,rgba(133,118,255,.12),transparent 24%),
    linear-gradient(155deg,#2db9ef 0%,#1498dc 44%,#0a73bd 100%);
}

/* subtle adventure-space atmosphere during the handoff */
body[data-profile]:has(.loading-card:not(.error-state)) main::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.56;
  background:
    radial-gradient(circle at 12% 18%,rgba(255,255,255,.92) 0 2px,transparent 3px),
    radial-gradient(circle at 23% 69%,rgba(255,255,255,.66) 0 1.4px,transparent 2.4px),
    radial-gradient(circle at 39% 23%,rgba(255,255,255,.74) 0 1.6px,transparent 2.6px),
    radial-gradient(circle at 63% 18%,rgba(255,255,255,.78) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 77% 67%,rgba(255,255,255,.68) 0 1.4px,transparent 2.4px),
    radial-gradient(circle at 91% 30%,rgba(255,236,162,.82) 0 2px,transparent 3px);
}
body[data-profile]:has(.loading-card:not(.error-state)) main::after{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  left:-300px;
  bottom:-330px;
  border:1px solid rgba(226,244,255,.16);
  border-radius:50%;
  box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 145px rgba(255,255,255,.015);
  pointer-events:none;
}

body[data-profile]:has(.loading-card:not(.error-state)) .loading-card{
  position:relative;
  z-index:2;
  width:min(520px,calc(100vw - 48px));
  max-width:none;
  margin:0;
  padding:30px 34px 28px;
  text-align:center;
  overflow:hidden;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.78);
  background:
    radial-gradient(circle at 50% -10%,rgba(190,238,255,.42),transparent 40%),
    linear-gradient(145deg,rgba(255,255,255,.94),rgba(239,249,255,.88));
  box-shadow:
    0 26px 60px rgba(8,62,111,.28),
    0 0 0 7px rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.98);
  backdrop-filter:blur(18px);
}

body[data-profile]:has(.loading-card:not(.error-state)) .loading-card::before{
  content:"ADVENTURE LOADING";
  display:block;
  margin:0 auto 14px;
  color:#2582b7;
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.16em;
}

body[data-profile]:has(.loading-card:not(.error-state)) .loading-icon{
  position:relative;
  display:grid;
  place-items:center;
  width:108px;
  height:108px;
  margin:0 auto 15px;
  border-radius:32px;
  font-size:0;
  line-height:0;
  border:1px solid rgba(117,198,235,.28);
  background:linear-gradient(145deg,#ecfaff,#d9f2ff);
  box-shadow:0 15px 30px rgba(36,128,177,.17),inset 0 1px 0 rgba(255,255,255,.96);
  animation:ubaybianLoadingFloat 1.8s ease-in-out infinite;
}
body[data-profile="bian"]:has(.loading-card:not(.error-state)) .loading-icon{
  border-color:rgba(231,185,82,.28);
  background:linear-gradient(145deg,#fff9e8,#ffefbe);
  box-shadow:0 15px 30px rgba(176,129,40,.15),inset 0 1px 0 rgba(255,255,255,.96);
}
body[data-profile]:has(.loading-card:not(.error-state)) .loading-icon::before{
  content:"";
  width:90px;
  height:90px;
  background:center/contain no-repeat;
  filter:drop-shadow(0 7px 10px rgba(24,80,123,.16));
}
body[data-profile="ubay"]:has(.loading-card:not(.error-state)) .loading-icon::before{
  background-image:url("assets/ubay-cosmic-spider-bot.svg");
}
body[data-profile="bian"]:has(.loading-card:not(.error-state)) .loading-icon::before{
  background-image:url("assets/bian-cosmic-scout.svg");
}

body[data-profile]:has(.loading-card:not(.error-state)) .loading-card strong{
  display:block;
  margin:0;
  color:#173650;
  font-size:21px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:-.015em;
}
body[data-profile]:has(.loading-card:not(.error-state)) .loading-card p{
  margin:7px 0 0;
  color:#68849b;
  font-size:13px;
  line-height:1.45;
  font-weight:600;
}
body[data-profile]:has(.loading-card:not(.error-state)) .loading-card p::after{
  content:"";
  display:block;
  width:150px;
  height:6px;
  margin:18px auto 0;
  border-radius:999px;
  background:
    linear-gradient(90deg,#26a9ec 0%,#5ed3e4 35%,#ffd05c 58%,#26a9ec 100%);
  background-size:220% 100%;
  box-shadow:0 3px 10px rgba(30,157,211,.18);
  animation:ubaybianLoadingSweep 1.15s linear infinite;
}

@keyframes ubaybianLoadingFloat{
  0%,100%{transform:translateY(0) rotate(-1deg)}
  50%{transform:translateY(-6px) rotate(1deg)}
}
@keyframes ubaybianLoadingSweep{
  from{background-position:100% 0}
  to{background-position:-120% 0}
}

@media (prefers-reduced-motion:reduce){
  body[data-profile]:has(.loading-card:not(.error-state)) .loading-icon,
  body[data-profile]:has(.loading-card:not(.error-state)) .loading-card p::after{animation:none;}
}

@media (max-height:760px) and (min-width:801px){
  body[data-profile]:has(.loading-card:not(.error-state)) main{min-height:560px;padding:26px 20px;}
  body[data-profile]:has(.loading-card:not(.error-state)) .loading-card{padding:23px 30px 22px;}
  body[data-profile]:has(.loading-card:not(.error-state)) .loading-icon{width:90px;height:90px;border-radius:27px;margin-bottom:12px;}
  body[data-profile]:has(.loading-card:not(.error-state)) .loading-icon::before{width:74px;height:74px;}
}

@media (max-width:800px){
  body[data-profile]:has(.loading-card:not(.error-state)) main{min-height:620px;padding:28px 16px;}
  body[data-profile]:has(.loading-card:not(.error-state)) .loading-card{width:min(430px,100%);padding:27px 24px 25px;border-radius:25px;}
  body[data-profile]:has(.loading-card:not(.error-state)) .loading-icon{width:96px;height:96px;border-radius:29px;}
  body[data-profile]:has(.loading-card:not(.error-state)) .loading-icon::before{width:80px;height:80px;}
  body[data-profile]:has(.loading-card:not(.error-state)) .loading-card strong{font-size:19px;}
}


/* typography.css */
/* UbayBian v0.5.14 — Typography Balance
   Normalize hierarchy across the Adventure shell, Quiz Mission, and Results.
   Goal: fewer competing heavy weights, more readable support text, no layout redesign. */

/* ===== Global Adventure shell typography ===== */
body.adventure-home .brand{
  font-size:22px;
  font-weight:900;
}
body.adventure-home .top-nav button{
  font-size:13px;
  font-weight:800;
}
body.adventure-home .quiet,
body.adventure-home .family-logout{
  font-size:13px;
  font-weight:800;
}
body.adventure-home .version{
  font-size:11px;
  font-weight:700;
}

/* ===== Sidebar profile ===== */
body.adventure-home .profile-info h2{
  font-size:19px;
  line-height:1.05;
  font-weight:800;
  letter-spacing:-.012em;
}
body.adventure-home .profile-info p{
  font-size:12px;
  line-height:1.35;
  font-weight:600;
}
body.adventure-home .xp-main,
body.adventure-home .coin-main,
body.adventure-home .xp-level{
  font-size:11px;
  line-height:1.1;
  font-weight:800;
}

/* ===== Sidebar badge + menu cards ===== */
body.adventure-home .badge-title{
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.05em;
}
body.adventure-home .badge-empty{
  font-size:11px;
  line-height:1.4;
  font-weight:550;
}
body.adventure-home .badge-card strong,
body.adventure-home .badge-card b{
  font-weight:800;
}
body.adventure-home .badge-card p,
body.adventure-home .badge-card small{
  font-size:10.75px;
  line-height:1.35;
  font-weight:550;
}
body.adventure-home .side-tile-text{
  font-size:13px;
  line-height:1.2;
  font-weight:800;
}
body.adventure-home .side-tile-sub{
  font-size:11px;
  line-height:1.35;
  font-weight:550;
}

/* ===== Quiz mission meta hierarchy ===== */
.adventure-quiz .tag-row span{
  font-size:11px;
  font-weight:800;
}
.adventure-quiz .quiz-header h2{
  font-size:13px;
  line-height:1.35;
  font-weight:700;
}
.adventure-quiz .score-pill{
  font-size:11px;
  font-weight:800;
}
.adventure-quiz .progress-label-row{
  font-size:11px;
  line-height:1.2;
  font-weight:700;
}

/* ===== Quiz question hierarchy ===== */
.adventure-quiz .question-text{
  font-size:clamp(23px,1.7vw,26px);
  line-height:1.27;
  font-weight:800;
  letter-spacing:-.016em;
}
.adventure-quiz.question-long .question-text{
  font-size:clamp(21px,1.5vw,23px);
  line-height:1.33;
  font-weight:800;
}
.adventure-quiz.question-very-long .question-text{
  font-size:clamp(19px,1.35vw,21px);
  line-height:1.38;
  font-weight:750;
}

/* ===== Quiz answers ===== */
.adventure-quiz .option-label{
  font-size:13px;
  font-weight:850;
}
.adventure-quiz .option-text{
  font-size:16px;
  line-height:1.35;
  font-weight:700;
}
.adventure-quiz .text-answer{
  font-size:16px;
  font-weight:500;
}
.adventure-quiz .check-btn{
  font-size:12.5px;
  font-weight:800;
}

/* ===== Feedback and rewards ===== */
.adventure-quiz .feedback .feedback-title{
  font-size:13px;
  line-height:1.35;
  font-weight:850;
}
.adventure-quiz .feedback .feedback-copy{
  font-size:13px;
  line-height:1.48;
  font-weight:600;
}
.adventure-quiz .reward-chip{
  font-size:11.5px;
  font-weight:800;
}
.adventure-quiz .bottom-actions .secondary,
.adventure-quiz .skip-btn{
  font-size:11.5px;
  font-weight:750;
}
.adventure-quiz .next-btn{
  font-size:12.5px;
  font-weight:850;
}

/* ===== Companion coach ===== */
.mission-coach span{
  font-size:11px;
  line-height:1.25;
  font-weight:800;
}

/* ===== Result screen ===== */
.adventure-result .eyebrow{
  font-size:10.5px;
  line-height:1.2;
  font-weight:850;
}
.adventure-result .result-score strong{
  font-size:60px;
  line-height:1;
  font-weight:900;
}
.adventure-result .result-score span{
  font-size:17px;
  line-height:1;
  font-weight:750;
}
.adventure-result h2{
  font-size:25px;
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.012em;
}
.adventure-result .result-message{
  font-size:13.5px;
  line-height:1.45;
  font-weight:550;
}
.adventure-result .result-stats span{
  font-size:12.5px;
  line-height:1.25;
  font-weight:750;
}
.adventure-result .result-rewards span{
  font-size:11.5px;
  line-height:1.2;
  font-weight:800;
}
.result-review-note{
  font-size:11.5px;
  line-height:1.35;
  font-weight:650;
}
.result-companion-bubble{
  font-size:11.5px;
  line-height:1.3;
  font-weight:780;
}
.adventure-result .result-actions .primary,
.adventure-result .result-actions .secondary{
  font-size:12.5px;
  font-weight:800;
}

/* ===== Accessibility/readability on smaller screens ===== */
@media (max-width:1180px){
  body.adventure-home .profile-info p,
  body.adventure-home .side-tile-sub,
  body.adventure-home .badge-empty{
    font-size:11px;
  }
  .adventure-quiz .question-text{
    font-size:clamp(21px,2vw,25px);
  }
}

@media (max-width:980px){
  body.adventure-home .top-nav button,
  body.adventure-home .quiet,
  body.adventure-home .family-logout{
    font-size:12.5px;
  }
  .adventure-quiz .question-text,
  .adventure-quiz.question-long .question-text,
  .adventure-quiz.question-very-long .question-text{
    font-size:clamp(19px,3vw,24px);
    font-weight:800;
  }
  .adventure-result .result-message{
    font-size:13px;
  }
}

@media (max-width:640px){
  body.adventure-home .brand{font-size:20px}
  body.adventure-home .profile-info h2{font-size:18px}
  .adventure-quiz .option-text{font-size:15px}
  .adventure-result h2{font-size:23px}
  .adventure-result .result-score strong{font-size:52px}
}


/* shell.css */
/* UbayBian v0.5.15 — Unified Adventure Shell
   Home v0.5.3 remains the visual master. Non-home authenticated screens inherit
   the same world; only the main content area is allowed to change. */

:root{
  --adv-sky:#29b9f4;
  --adv-sky-deep:#168bd2;
  --adv-navy:#17354d;
  --adv-glass:rgba(247,252,255,.78);
  --adv-glass-strong:rgba(255,255,255,.90);
  --adv-coral:#ff7180;
  --adv-orange:#ff9b5c;
  --adv-yellow:#ffd14b;
  --adv-blue:#2a9ae8;
  --adv-purple:#6658ce;
}

/* The Adventure world now continues after leaving Home. */
body.adventure-shell:not(.adventure-home){
  padding:0;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 11% 8%,rgba(255,255,255,.95) 0 2px,transparent 3px),
    radial-gradient(circle at 29% 14%,rgba(255,244,155,.92) 0 2px,transparent 3px),
    radial-gradient(circle at 66% 9%,rgba(255,255,255,.90) 0 2px,transparent 3px),
    radial-gradient(circle at 83% 19%,rgba(255,247,176,.90) 0 3px,transparent 4px),
    radial-gradient(circle at 92% 46%,rgba(255,255,255,.82) 0 2px,transparent 3px),
    radial-gradient(circle at 5% 74%,rgba(255,255,255,.70) 0 2px,transparent 3px),
    linear-gradient(145deg,#2cbdf5 0%,#24a9ed 45%,#188bd1 100%);
}
body.adventure-shell:not(.adventure-home)::before,
body.adventure-shell:not(.adventure-home)::after{
  content:"";
  position:fixed;
  pointer-events:none;
  z-index:0;
  border-radius:50%;
}
body.adventure-shell:not(.adventure-home)::before{
  width:330px;height:330px;left:-120px;top:15%;opacity:.23;
  background:radial-gradient(circle at 50% 50%,transparent 0 34%,rgba(255,255,255,.46) 35% 37%,transparent 38% 51%,rgba(255,255,255,.24) 52% 54%,transparent 55%);
  transform:rotate(-20deg);
}
body.adventure-shell:not(.adventure-home)::after{
  width:300px;height:300px;right:-95px;bottom:-80px;opacity:.15;
  background:radial-gradient(circle at 48% 46%,#fff 0 5%,transparent 6%),radial-gradient(circle at 50% 50%,transparent 0 29%,#fff 30% 32%,transparent 33%);
}

body.adventure-shell:not(.adventure-home) .shell{
  position:relative;
  z-index:1;
  width:100%;
  max-width:none;
  min-height:100vh;
  margin:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
  overflow:visible;
}

/* Master navigation: same floating glass treatment as Home. */
body.adventure-shell:not(.adventure-home) .topbar{
  min-height:76px;
  padding:13px 42px;
  background:transparent;
  color:#fff;
  gap:20px;
  border:0;
  box-shadow:none;
}
body.adventure-shell:not(.adventure-home) .brand{
  font-size:22px;
  font-weight:900;
  text-shadow:0 2px 6px rgba(8,75,124,.28);
}
body.adventure-shell:not(.adventure-home) .brand-wordmark{color:#fff;}
body.adventure-shell:not(.adventure-home) .brand-wordmark span{color:#fff0a6;}
body.adventure-shell:not(.adventure-home) .brand-icon{
  font-size:28px;
  filter:drop-shadow(0 4px 6px rgba(7,79,126,.24));
}
body.adventure-shell:not(.adventure-home) .top-nav{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  gap:2px;
  padding:6px;
  border:1px solid rgba(255,255,255,.58);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(226,246,255,.57));
  box-shadow:0 10px 22px rgba(18,103,158,.18),inset 0 1px 0 rgba(255,255,255,.86);
  backdrop-filter:blur(12px);
}
body.adventure-shell:not(.adventure-home) .top-nav button{
  color:#17354d;
  opacity:1;
  font-size:13px;
  font-weight:800;
  padding:9px 15px;
}
body.adventure-shell:not(.adventure-home) .top-nav button:hover,
body.adventure-shell:not(.adventure-home) .top-nav button.active{
  color:#17354d;
  background:rgba(255,255,255,.84);
  box-shadow:0 5px 12px rgba(20,93,142,.13);
}
body.adventure-shell:not(.adventure-home) .version{
  margin-left:auto;
  color:#17354d;
  border:1px solid rgba(255,255,255,.70);
  background:rgba(236,249,255,.68);
  font-size:10px;
  font-weight:700;
  padding:5px 9px;
  box-shadow:0 5px 14px rgba(13,87,137,.13);
  backdrop-filter:blur(8px);
}
body.adventure-shell:not(.adventure-home) .quiet,
body.adventure-shell:not(.adventure-home) .family-logout{
  min-height:37px;
  padding:8px 14px;
  border:1px solid rgba(255,255,255,.72);
  color:#17354d;
  background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(226,245,255,.72));
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  box-shadow:0 5px 14px rgba(12,83,132,.14),inset 0 1px 0 #fff;
}

body.adventure-shell:not(.adventure-home) main{
  min-height:calc(100vh - 76px);
  padding:6px 38px 30px;
  background:transparent;
}
body.adventure-shell:not(.adventure-home) footer{display:none;}
body.adventure-shell:not(.adventure-home) .app-main-grid{
  grid-template-columns:290px minmax(0,1fr);
  gap:22px;
  min-height:calc(100vh - 114px);
}
body.adventure-shell:not(.adventure-home) .main-col{min-width:0;}

/* Sidebar = the same persistent character/home system. */
body.adventure-shell:not(.adventure-home) .side-menu{gap:12px;}
body.adventure-shell:not(.adventure-home) .side-profile,
body.adventure-shell:not(.adventure-home) .badge-card{
  border:1px solid rgba(255,255,255,.65);
  background:linear-gradient(150deg,rgba(255,255,255,.90),rgba(225,247,255,.79));
  box-shadow:0 9px 22px rgba(16,94,148,.22),inset 0 1px 0 rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
}
body.adventure-shell:not(.adventure-home) .side-profile{
  position:relative;
  overflow:visible;
  min-height:101px;
  padding:16px 16px 14px 82px;
  display:block;
  border-radius:21px;
}
body.adventure-shell:not(.adventure-home) .side-profile::before{
  content:"⭐";
  position:absolute;
  left:-3px;
  top:-7px;
  width:78px;
  height:78px;
  display:grid;
  place-items:center;
  font-size:69px;
  line-height:1;
  filter:drop-shadow(0 6px 8px rgba(175,105,6,.18));
  z-index:0;
}
body.adventure-shell:not(.adventure-home) .profile-avatar,
body.adventure-shell:not(.adventure-home) .profile-avatar.profile-avatar-upgraded{
  position:absolute;
  left:18px;
  top:25px;
  z-index:1;
  width:51px;
  height:51px;
  border-radius:16px;
  background:linear-gradient(145deg,#d7f6ff,#fff5cf);
  border:3px solid #fff;
  box-shadow:0 6px 12px rgba(16,95,145,.18);
  overflow:hidden;
}
body.adventure-shell:not(.adventure-home) .profile-avatar.profile-avatar-upgraded img{
  width:45px;
  height:45px;
  object-fit:contain;
}
body.adventure-shell:not(.adventure-home) .profile-info h2{
  font-size:19px;
  line-height:1;
  margin:3px 0 3px;
}
body.adventure-shell:not(.adventure-home) .profile-info p{font-size:12px;color:#284b61;}
body.adventure-shell:not(.adventure-home) .xp-badge{
  margin-top:12px;
  gap:6px;
  position:relative;
  z-index:2;
}
body.adventure-shell:not(.adventure-home) .xp-main,
body.adventure-shell:not(.adventure-home) .coin-main,
body.adventure-shell:not(.adventure-home) .xp-level{
  padding:5px 9px;
  font-size:11px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}
body.adventure-shell:not(.adventure-home) .badge-card{
  position:relative;
  min-height:105px;
  padding:14px 16px 13px;
  border-radius:21px;
  overflow:hidden;
}
body.adventure-shell:not(.adventure-home) .badge-title{font-size:12.5px;color:#44647a;}
body.adventure-shell:not(.adventure-home) .badge-empty{font-size:11px;color:#496d83;}

/* Functional tiles preserve Home colors everywhere. */
body.adventure-shell:not(.adventure-home) .side-tile{
  position:relative;
  overflow:hidden;
  min-height:66px;
  padding:11px 90px 11px 16px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:18px;
  color:#17354d;
  box-shadow:0 8px 18px rgba(19,84,134,.23),inset 0 1px 0 rgba(255,255,255,.52);
  transition:transform .15s ease,box-shadow .15s ease;
}
body.adventure-shell:not(.adventure-home) .side-tile:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(16,76,126,.29),inset 0 1px 0 rgba(255,255,255,.70);
}
body.adventure-shell:not(.adventure-home) .side-tile-icon{
  width:42px;
  height:42px;
  border-radius:13px;
  background:rgba(255,255,255,.45);
  font-size:24px;
  border:1px solid rgba(255,255,255,.36);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.50);
}
body.adventure-shell:not(.adventure-home) .side-tile-text{font-size:13px;color:#15364d;}
body.adventure-shell:not(.adventure-home) .side-tile-sub{font-size:11px;color:#31556d;opacity:.92;}
body.adventure-shell:not(.adventure-home) .side-tile.review-tile{
  background:linear-gradient(135deg,#82d9ff 0%,#66b9f8 55%,#8e8bf0 100%);
}
body.adventure-shell:not(.adventure-home) .side-tile.adventure-brain{
  background:linear-gradient(135deg,#ff7a87 0%,#ffaf65 60%,#ffc66a 100%);
}
body.adventure-shell:not(.adventure-home) .side-tile.adventure-memory{
  background:linear-gradient(135deg,#7188bf 0%,#7178bb 58%,#807dc6 100%);
  color:#fff;
}
body.adventure-shell:not(.adventure-home) .side-tile.adventure-memory .side-tile-text,
body.adventure-shell:not(.adventure-home) .side-tile.adventure-memory .side-tile-sub{color:#fff;}
body.adventure-shell:not(.adventure-home) .side-tile.adventure-reward{
  background:linear-gradient(135deg,#ffd064 0%,#ffad3e 52%,#ff8a43 100%);
}
body.adventure-shell:not(.adventure-home) .side-tile.review-tile::after,
body.adventure-shell:not(.adventure-home) .side-tile.adventure-brain::after,
body.adventure-shell:not(.adventure-home) .side-tile.adventure-memory::after,
body.adventure-shell:not(.adventure-home) .side-tile.adventure-reward::after{
  position:absolute;
  right:8px;
  bottom:-5px;
  font-size:40px;
  letter-spacing:-13px;
  filter:drop-shadow(0 5px 8px rgba(12,56,95,.18));
  opacity:.68;
}
body.adventure-shell:not(.adventure-home) .side-tile.review-tile::after{content:"❓📋";}
body.adventure-shell:not(.adventure-home) .side-tile.adventure-brain::after{content:"🧩🎲";}
body.adventure-shell:not(.adventure-home) .side-tile.adventure-memory::after{content:"🧠✨";}
body.adventure-shell:not(.adventure-home) .side-tile.adventure-reward::after{content:"🎁🏆";}

/* Quiz/result becomes content inside the world, not a replacement world. */
body.adventure-shell:not(.adventure-home) .quiz-card.adventure-quiz,
body.adventure-shell:not(.adventure-home) .result-panel.adventure-result{
  border-color:rgba(255,255,255,.72);
  box-shadow:0 12px 28px rgba(16,91,142,.18),inset 0 1px 0 rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
}

@media (max-width:1180px){
  body.adventure-shell:not(.adventure-home) .topbar{padding-inline:26px;}
  body.adventure-shell:not(.adventure-home) main{padding-inline:24px;}
  body.adventure-shell:not(.adventure-home) .app-main-grid{grid-template-columns:250px minmax(0,1fr);gap:18px;}
}

@media (max-width:900px){
  body.adventure-shell:not(.adventure-home) .topbar{
    min-height:auto;
    padding:12px 18px;
    flex-wrap:wrap;
  }
  body.adventure-shell:not(.adventure-home) .top-nav{
    position:static;
    transform:none;
    order:3;
    width:100%;
    justify-content:center;
  }
  body.adventure-shell:not(.adventure-home) main{padding:8px 16px 24px;}
  body.adventure-shell:not(.adventure-home) .app-main-grid{grid-template-columns:1fr;min-height:0;}
  body.adventure-shell:not(.adventure-home) .side-menu{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body.adventure-shell:not(.adventure-home) .side-profile,
  body.adventure-shell:not(.adventure-home) .badge-card{grid-column:span 1;}
}

@media (max-width:640px){
  body.adventure-shell:not(.adventure-home) .topbar{gap:9px;}
  body.adventure-shell:not(.adventure-home) .brand{font-size:19px;}
  body.adventure-shell:not(.adventure-home) .top-nav button{font-size:11px;padding:8px 10px;}
  body.adventure-shell:not(.adventure-home) .side-menu{grid-template-columns:1fr;}
  body.adventure-shell:not(.adventure-home) .side-profile,
  body.adventure-shell:not(.adventure-home) .badge-card{grid-column:auto;}
}


/* transition-unified.css */
/* UbayBian v0.5.16 — Unified Adventure Transition
   Loading is no longer a separate legacy world. It inherits the Home master shell. */

body.adventure-transition-shell{
  background:
    radial-gradient(circle at 11% 8%,rgba(255,255,255,.95) 0 2px,transparent 3px),
    radial-gradient(circle at 29% 14%,rgba(255,244,155,.92) 0 2px,transparent 3px),
    radial-gradient(circle at 66% 9%,rgba(255,255,255,.90) 0 2px,transparent 3px),
    radial-gradient(circle at 83% 19%,rgba(255,247,176,.90) 0 3px,transparent 4px),
    linear-gradient(145deg,#2cbdf5 0%,#24a9ed 45%,#188bd1 100%);
}

/* Keep the exact Home shell during the handoff. */
body.adventure-transition-shell .shell{
  width:100%;
  max-width:none;
  min-height:100vh;
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}
body.adventure-transition-shell .topbar{
  min-height:76px;
  padding:13px 42px;
  gap:20px;
  color:#fff;
  background:transparent;
  border:0;
  box-shadow:none;
}
body.adventure-transition-shell .brand{
  font-size:22px;
  font-weight:900;
  text-shadow:0 2px 6px rgba(8,75,124,.28);
}
body.adventure-transition-shell .brand-wordmark{color:#fff;}
body.adventure-transition-shell .brand-wordmark span{color:#fff0a6;}
body.adventure-transition-shell .brand-icon{font-size:28px;filter:drop-shadow(0 4px 6px rgba(7,79,126,.24));}
body.adventure-transition-shell .top-nav{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  gap:2px;
  padding:6px;
  border:1px solid rgba(255,255,255,.58);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(226,246,255,.57));
  box-shadow:0 10px 22px rgba(18,103,158,.18),inset 0 1px 0 rgba(255,255,255,.86);
  backdrop-filter:blur(12px);
}
body.adventure-transition-shell .top-nav button{
  color:#17354d;
  opacity:1;
  font-size:13px;
  font-weight:800;
  padding:9px 15px;
}
body.adventure-transition-shell .top-nav button.active,
body.adventure-transition-shell .top-nav button:hover{
  color:#17354d;
  background:rgba(255,255,255,.84);
  box-shadow:0 5px 12px rgba(20,93,142,.13);
}
body.adventure-transition-shell .version{
  margin-left:auto;
  color:#17354d;
  border:1px solid rgba(255,255,255,.70);
  background:rgba(236,249,255,.68);
  font-size:10px;
  font-weight:700;
  padding:5px 9px;
  box-shadow:0 5px 14px rgba(13,87,137,.13);
  backdrop-filter:blur(8px);
}
body.adventure-transition-shell .quiet,
body.adventure-transition-shell .family-logout{
  min-height:37px;
  padding:8px 14px;
  border:1px solid rgba(255,255,255,.72);
  color:#17354d;
  background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(226,245,255,.72));
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  box-shadow:0 5px 14px rgba(12,83,132,.14),inset 0 1px 0 #fff;
}

/* The transition is content inside Home, not a full-page blue replacement. */
body.adventure-transition-shell main{
  position:relative;
  display:grid;
  place-items:center;
  min-height:calc(100vh - 76px)!important;
  padding:6px 38px 30px!important;
  overflow:visible!important;
  background:transparent!important;
}
body.adventure-transition-shell main::before,
body.adventure-transition-shell main::after{
  content:none!important;
  display:none!important;
}
body.adventure-transition-shell footer{display:none!important;}

/* Loading card now uses the same frosted surface language as Home controls/cards. */
body.adventure-transition-shell .loading-card:not(.error-state){
  width:min(470px,calc(100vw - 48px));
  padding:27px 32px 25px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.72);
  background:
    radial-gradient(circle at 50% -14%,rgba(255,235,167,.19),transparent 38%),
    linear-gradient(145deg,rgba(255,255,255,.88),rgba(219,244,255,.77));
  box-shadow:0 16px 34px rgba(15,91,143,.19),inset 0 1px 0 rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
}
body.adventure-transition-shell .loading-card:not(.error-state)::before{
  color:#2a82b4;
  font-size:9.5px;
  letter-spacing:.14em;
  margin-bottom:12px;
}
body.adventure-transition-shell .loading-icon{
  width:94px;
  height:94px;
  border-radius:28px;
  margin-bottom:13px;
  box-shadow:0 11px 23px rgba(36,128,177,.14),inset 0 1px 0 rgba(255,255,255,.96);
}
body.adventure-transition-shell .loading-icon::before{width:78px;height:78px;}
body.adventure-transition-shell .loading-card strong{font-size:19px;}
body.adventure-transition-shell .loading-card p{font-size:12.5px;}
body.adventure-transition-shell .loading-card p::after{width:132px;height:5px;margin-top:16px;}

@media (max-width:900px){
  body.adventure-transition-shell .topbar{padding:12px 18px;flex-wrap:wrap;}
  body.adventure-transition-shell .top-nav{position:static;transform:none;order:3;width:100%;justify-content:center;}
  body.adventure-transition-shell main{padding:8px 16px 24px!important;}
}

@media (max-width:640px){
  body.adventure-transition-shell .loading-card:not(.error-state){width:min(420px,100%);padding:24px 20px 22px;border-radius:22px;}
}


/* cards.css */
/* UbayBian v0.5.17 — Unified Side Cards
   Report / Robot Lab / Quiz keep the exact Home side-card language.
   This intentionally mirrors the Home v0.5.1–v0.5.2 polish instead of the older v0.5.0 tile styling. */

body.adventure-shell:not(.adventure-home) .side-tile{
  min-height:64px;
  padding:11px 72px 11px 15px;
  border-radius:18px;
  box-shadow:0 6px 15px rgba(16,84,132,.18),inset 0 1px 0 rgba(255,255,255,.50);
}
body.adventure-shell:not(.adventure-home) .side-tile:hover{
  transform:translateY(-1px);
  box-shadow:0 9px 18px rgba(16,76,126,.22),inset 0 1px 0 rgba(255,255,255,.62);
}

/* Exact current Home palettes. */
body.adventure-shell:not(.adventure-home) .side-tile.review-tile{
  background:linear-gradient(135deg,#9be1fb 0%,#7bc8ef 58%,#9ca7e8 100%);
}
body.adventure-shell:not(.adventure-home) .side-tile.adventure-brain{
  background:linear-gradient(135deg,#ff9aa2 0%,#ffb77a 58%,#ffd18b 100%);
}
body.adventure-shell:not(.adventure-home) .side-tile.adventure-memory{
  background:linear-gradient(135deg,#7188bf 0%,#7178bb 58%,#807dc6 100%);
  color:#fff;
}
body.adventure-shell:not(.adventure-home) .side-tile.adventure-reward{
  background:linear-gradient(135deg,#ffe08a 0%,#ffc362 55%,#ffa866 100%);
}

/* Home uses one quiet decorative object per card — never the older paired emoji set. */
body.adventure-shell:not(.adventure-home) .side-tile.review-tile::after,
body.adventure-shell:not(.adventure-home) .side-tile.adventure-brain::after,
body.adventure-shell:not(.adventure-home) .side-tile.adventure-memory::after,
body.adventure-shell:not(.adventure-home) .side-tile.adventure-reward::after{
  right:13px;
  bottom:8px;
  font-size:32px;
  letter-spacing:0;
  opacity:.68;
  filter:drop-shadow(0 4px 6px rgba(12,56,95,.14));
}
body.adventure-shell:not(.adventure-home) .side-tile.review-tile::after{content:"📝";}
body.adventure-shell:not(.adventure-home) .side-tile.adventure-brain::after{content:"🎲";}
body.adventure-shell:not(.adventure-home) .side-tile.adventure-memory::after{content:"🧠";}
body.adventure-shell:not(.adventure-home) .side-tile.adventure-reward::after{content:"🎁";}

body.adventure-shell:not(.adventure-home) .side-tile-icon{
  width:40px;
  height:40px;
  border-radius:13px;
  font-size:22px;
  background:rgba(255,255,255,.38);
  box-shadow:none;
}
body.adventure-shell:not(.adventure-home) .side-tile-text{
  font-size:14px;
  color:#15364d;
}
body.adventure-shell:not(.adventure-home) .side-tile-sub{
  font-size:11px;
  line-height:1.3;
  color:#31556d;
  opacity:.92;
}
body.adventure-shell:not(.adventure-home) .side-tile.adventure-memory .side-tile-text{
  color:#fff;
}
body.adventure-shell:not(.adventure-home) .side-tile.adventure-memory .side-tile-sub{
  color:rgba(255,255,255,.82);
}


/* rewards-hub.css */
/* NALAROO Rewards Hub v1.0, loaded only when feature flag is enabled. */
.hub-shell{max-width:850px;margin:auto;color:#153d56}
.hub-wallet{background:linear-gradient(135deg,#e1f6e6,#effaff);border:1px solid #c1e1d5;border-radius:19px;padding:19px;margin-bottom:16px}
.hub-wallet h3{margin:0 0 6px;font-size:.91rem}
.hub-wallet-total{display:block;font-size:1.65rem;line-height:1.45}
.hub-wallet p,.hub-hint{font-size:.86rem;color:#406574;margin:5px 0 14px;line-height:1.5}
.hub-tabs{display:flex;gap:8px;overflow-x:auto;margin-bottom:16px;padding-bottom:4px}
.hub-tab{border:1px solid #b5d6d5;background:#fff;color:#1c5368;border-radius:100px;padding:10px 13px;cursor:pointer;white-space:nowrap;font:inherit;font-weight:700}
.hub-tab[aria-pressed=true]{background:#186b65;color:white}
.hub-content{min-height:100px}
.hub-content h3{font-size:1.1rem;margin:16px 0 5px}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.hub-card{display:flex;flex-direction:column;align-items:center;gap:7px;padding:15px 12px;background:#f5fbfd;border:1px solid #cbdfdf;border-radius:16px;text-align:center}
.hub-card strong{font-size:.89rem}
.hub-icon{font-size:2.4rem;line-height:1.6;display:grid;place-items:center;width:70px;height:70px;border-radius:18px;background:linear-gradient(145deg,#fffaf0,#d9f0f4);box-shadow:inset 0 1px 0 #fff,0 3px 9px #174e6218}
.hub-rarity{display:inline-block;padding:3px 9px;border-radius:999px;background:#e8e9ec;color:#405366;font-size:.72rem;font-weight:800}
.hub-card[data-rarity="Rare"] .hub-rarity{background:#d6efff;color:#17609a}
.hub-card[data-rarity="Epic"] .hub-rarity{background:#eee1ff;color:#713aaf}
.hub-card[data-rarity="Legendary"] .hub-rarity{background:#fff0be;color:#8b5813}
.hub-card .hub-action{margin-top:auto;width:100%}
.hub-card:has(.hub-action:disabled){opacity:.9}
.hub-cost{font-size:.8rem;color:#486477}
.hub-action{font:inherit;font-size:.84rem;font-weight:700;padding:10px 13px;border:0;border-radius:12px;background:#207d71;color:#fff;cursor:pointer;min-height:42px}
.hub-action:disabled{background:#bbcaca;cursor:default}
.hub-secondary{color:#13535d;background:#e3f1f1;border:1px solid #badbd6}
.hub-list{display:grid;gap:9px}
.hub-reward-row{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid #d0e2e2;border-radius:14px;padding:12px}
.hub-detail{flex:1;min-width:0}
.hub-detail p{font-size:.86rem;color:#58717f;margin:4px 0}
.hub-history,.hub-manage-row{border-bottom:1px solid #d6e5e5;padding:10px 0;font-size:.86rem;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.hub-parent{margin-top:18px;padding:13px;border:1px solid #c4dada;border-radius:16px}
.hub-parent-form{display:grid;gap:10px;margin:12px 0}
.hub-input{font:inherit;width:100%;box-sizing:border-box;min-height:43px;border:1px solid #afcaca;padding:10px;border-radius:12px;background:#fff;color:#234}
.hub-inline-label{display:flex;align-items:center;gap:8px;font-size:.9rem}
.hub-pin-label{display:grid;gap:6px;margin:10px 0}
.hub-templates,.hub-manage-actions{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.hub-feedback{min-height:22px;color:#245d69;font-size:.85rem}
@media(max-width:480px){.hub-reward-row{align-items:stretch;flex-direction:column}.hub-wallet-total{font-size:1.4rem}}

/* Collection surfaces sit inside the legacy dark Reward Chamber; prevent dark-on-dark copy.
   The internal scroll area keeps all 28 items reachable even when the modal has a fixed height. */
.reward-chamber .hub-shell .hub-content{color:#edf8ff;max-height:min(55vh,580px);overflow-y:auto;overflow-x:hidden;padding:1px 2px 12px;scrollbar-width:thin;scrollbar-color:#77b5c8 transparent}
.reward-chamber .hub-shell .hub-content h3{color:#f4fcff}
.reward-chamber .hub-shell .hub-hint{color:#d3e4f5;line-height:1.55}
.reward-chamber .hub-shell .hub-feedback{color:#d3efff}
.reward-chamber .hub-shell .hub-tab{font-size:.81rem;padding:9px 10px}
.reward-chamber .hub-shell .hub-tabs{gap:6px}
.reward-chamber .hub-shell .hub-card{color:#173d56}
.reward-chamber .hub-shell .hub-reward-row,.reward-chamber .hub-shell .hub-history{color:#e7f4ff}
@media(max-width:480px){
 .reward-chamber .hub-shell .hub-tab{font-size:.76rem;padding:8px 8px}
 .reward-chamber .hub-shell .hub-tabs{gap:5px}
 .reward-chamber .hub-shell .hub-content{max-height:48vh}
}

.reward-chamber.nalaroo-collectibles-modal .ub-modal-heading h2{font-size:20px!important;white-space:nowrap}


/* parent-access.css */
/* UbayBian v0.5.45 — Parent Access PIN Foundation */
.reward-parent-panel.parent-access-v0545{
  position:relative;
}
.reward-parent-panel.parent-access-v0545.parent-access-locked .ub-parent-actions{
  display:none !important;
}
.parent-access-gate{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:9px 0 2px;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(129,220,255,.18);
  background:linear-gradient(135deg,rgba(9,33,62,.58),rgba(38,45,88,.48));
  box-shadow:inset 0 1px rgba(255,255,255,.055);
}
.parent-access-gate-copy{
  min-width:0;
  display:grid;
  gap:2px;
}
.parent-access-state{
  color:#f7fbff;
  font-size:11.6px;
  font-weight:950;
  line-height:1.2;
}
.parent-access-detail{
  color:#a9c7dc;
  font-size:9.6px;
  line-height:1.3;
}
.parent-access-gate-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}
.parent-access-gate button,
.parent-pin-dialog button{
  appearance:none;
  border:0;
  font:inherit;
  cursor:pointer;
}
.parent-access-open,
.parent-access-lock,
.parent-access-small{
  min-height:31px;
  padding:7px 10px;
  border-radius:11px;
  font-size:9.5px !important;
  font-weight:900 !important;
  letter-spacing:.01em;
}
.parent-access-open{
  color:#14324b;
  background:linear-gradient(135deg,#dff9ff,#83e6f7);
  box-shadow:0 6px 15px rgba(69,215,243,.14),inset 0 1px rgba(255,255,255,.8);
}
.parent-access-lock{
  color:#eef8ff;
  background:rgba(121,151,190,.20);
  border:1px solid rgba(203,229,247,.15) !important;
}
.parent-access-small{
  color:#cde8f5;
  background:transparent;
  border:1px solid rgba(181,222,242,.15) !important;
}
.parent-access-unlocked .parent-access-gate{
  border-color:rgba(103,239,200,.25);
  background:linear-gradient(135deg,rgba(9,55,66,.58),rgba(29,54,89,.45));
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 0 18px rgba(75,231,193,.06);
}
.parent-access-unlocked .parent-access-state::before{
  content:"●";
  margin-right:6px;
  color:#6de7bd;
  text-shadow:0 0 8px rgba(109,231,189,.55);
}
.parent-access-locked .parent-access-state::before{
  content:"●";
  margin-right:6px;
  color:#88b8d2;
}

.parent-pin-dialog-overlay{
  position:fixed;
  inset:0;
  z-index:100000;
  display:grid;
  place-items:center;
  padding:22px;
  background:rgba(3,12,29,.66);
  backdrop-filter:blur(14px) saturate(120%);
}
.parent-pin-dialog{
  width:min(420px,calc(100vw - 36px));
  padding:22px;
  border-radius:24px;
  border:1px solid rgba(199,239,255,.32);
  background:
    radial-gradient(circle at 20% 0,rgba(82,218,255,.12),transparent 30%),
    linear-gradient(165deg,rgba(18,50,83,.98),rgba(27,36,78,.98));
  box-shadow:0 28px 80px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.12);
  color:#f7fbff;
}
.parent-pin-dialog-icon{
  width:48px;
  height:48px;
  border-radius:16px;
  display:grid;
  place-items:center;
  margin-bottom:12px;
  font-size:22px;
  background:linear-gradient(145deg,rgba(104,230,255,.22),rgba(121,117,255,.20));
  border:1px solid rgba(184,235,255,.20);
}
.parent-pin-dialog h3{
  margin:0;
  font-size:21px;
  line-height:1.15;
}
.parent-pin-dialog-note{
  margin:7px 0 16px;
  color:#b9d1e0;
  font-size:12px;
  line-height:1.45;
}
.parent-pin-form{
  display:grid;
  gap:9px;
}
.parent-pin-form input{
  width:100%;
  min-height:44px;
  border:1px solid rgba(187,226,244,.18);
  border-radius:13px;
  padding:10px 12px;
  color:#f7fbff;
  background:rgba(6,24,50,.58);
  outline:none;
  font-size:13px;
  box-shadow:inset 0 1px rgba(255,255,255,.035);
}
.parent-pin-form input:focus{
  border-color:rgba(101,225,255,.55);
  box-shadow:0 0 0 3px rgba(83,220,255,.08);
}
.parent-pin-form input::placeholder{color:#7799ae}
.parent-pin-feedback{
  min-height:17px;
  margin:0;
  color:#ffd28a;
  font-size:10.5px;
  line-height:1.35;
}
.parent-pin-dialog-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:3px;
}
.parent-pin-cancel,
.parent-pin-submit{
  min-height:38px;
  padding:9px 14px;
  border-radius:12px;
  font-size:11px !important;
  font-weight:900 !important;
}
.parent-pin-cancel{
  color:#c5d9e6;
  background:rgba(107,132,167,.14);
  border:1px solid rgba(198,224,239,.12) !important;
}
.parent-pin-submit{
  color:#12334c;
  background:linear-gradient(135deg,#e5fbff,#78e0f2);
  box-shadow:0 8px 19px rgba(72,211,239,.15),inset 0 1px rgba(255,255,255,.8);
}
.parent-pin-submit:disabled{opacity:.55;cursor:wait}

@media (max-width:680px){
  .parent-access-gate{
    align-items:flex-start;
    flex-direction:column;
  }
  .parent-access-gate-actions{width:100%}
  .parent-access-gate-actions button{flex:1}
  .parent-pin-dialog{padding:18px;border-radius:20px}
}


/* learning-deck.css */
/* UbayBian v0.5.46 — Learning Control Deck */
.controls-panel.learning-deck{
  --deck-line:rgba(150,225,255,.18);
  --deck-line-strong:rgba(151,230,255,.34);
  --deck-ink:#f7fbff;
  --deck-soft:#a9c8dc;
  --deck-cyan:#6fe6ff;
  --deck-cyan-2:#62bfff;
  --deck-gold:#ffd45a;
  --deck-coral:#ff7f67;
  position:relative;
  isolation:isolate;
  overflow:visible !important;
  margin-top:14px !important;
  padding:16px !important;
  border-radius:24px !important;
  border:1px solid rgba(175,228,255,.24) !important;
  background:
    radial-gradient(circle at 10% 0,rgba(73,211,255,.10),transparent 30%),
    radial-gradient(circle at 88% 115%,rgba(139,104,255,.12),transparent 35%),
    linear-gradient(145deg,rgba(12,43,73,.94),rgba(22,43,83,.96)) !important;
  box-shadow:
    0 18px 42px rgba(2,24,55,.24),
    inset 0 1px rgba(255,255,255,.10),
    inset 0 -1px rgba(68,154,215,.10) !important;
}
.controls-panel.learning-deck::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent,rgba(120,222,255,.08),transparent) 0 48px/100% 1px no-repeat,
    radial-gradient(circle at 16px 16px,rgba(113,234,255,.65) 0 2px,transparent 2.5px),
    radial-gradient(circle at calc(100% - 18px) calc(100% - 16px),rgba(255,211,86,.5) 0 1.5px,transparent 2px);
  opacity:.9;
  z-index:-1;
}
.controls-panel.learning-deck::after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:18px;
  border:1px solid rgba(146,220,255,.055);
  pointer-events:none;
  z-index:-1;
}

.learning-deck-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:0 2px 13px;
}
.learning-deck-heading-main{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}
.learning-deck-emblem{
  width:36px;
  height:36px;
  flex:0 0 36px;
  display:grid;
  place-items:center;
  border-radius:12px;
  font-size:16px;
  background:
    radial-gradient(circle at 35% 25%,rgba(255,255,255,.22),transparent 32%),
    linear-gradient(145deg,rgba(86,221,255,.24),rgba(94,112,255,.24));
  border:1px solid rgba(163,227,255,.22);
  box-shadow:inset 0 1px rgba(255,255,255,.10),0 8px 18px rgba(0,0,0,.10);
}
.learning-deck-title-wrap{display:grid;gap:2px;min-width:0}
.learning-deck-kicker{
  color:var(--deck-cyan);
  font-size:8.5px;
  line-height:1;
  font-weight:950;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.learning-deck-title{
  color:var(--deck-ink);
  font-size:14px;
  line-height:1.15;
  font-weight:950;
}
.learning-deck-status-chip{
  flex:0 0 auto;
  min-height:27px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 9px;
  border-radius:999px;
  color:#cceafb;
  font-size:8.5px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
  border:1px solid rgba(156,224,255,.13);
  background:rgba(7,27,54,.30);
}
.learning-deck-status-chip::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:#71e8cf;
  box-shadow:0 0 10px rgba(113,232,207,.65);
}

.learning-deck .controls-row,
.learning-deck .learning-deck-controls{
  position:relative;
  z-index:5;
  display:grid !important;
  grid-template-columns:minmax(0,1.18fr) minmax(0,1fr) minmax(0,.96fr);
  gap:10px !important;
  align-items:stretch;
  overflow:visible !important;
}
.learning-deck .controls-pill.deck-control{
  min-width:0;
  min-height:68px;
  position:relative;
  display:block !important;
  padding:0 !important;
  border-radius:18px !important;
  color:var(--deck-ink) !important;
  border:1px solid rgba(164,226,255,.16) !important;
  background:
    linear-gradient(145deg,rgba(27,63,101,.76),rgba(25,48,91,.68)) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.07),
    0 8px 22px rgba(2,19,45,.13) !important;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.learning-deck .controls-pill.deck-control:hover,
.learning-deck .controls-pill.deck-control.deck-open{
  transform:translateY(-1px);
  border-color:rgba(113,226,255,.38) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.09),
    0 11px 26px rgba(2,19,45,.18),
    0 0 0 3px rgba(83,211,255,.045) !important;
}
.learning-deck .deck-native-select{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.deck-trigger{
  width:100%;
  height:100%;
  min-height:68px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 20px;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.deck-trigger-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:11px;
  font-size:15px;
  background:linear-gradient(145deg,rgba(103,226,255,.18),rgba(103,135,255,.14));
  border:1px solid rgba(157,229,255,.14);
  box-shadow:inset 0 1px rgba(255,255,255,.08);
}
.deck-trigger-copy{min-width:0;display:grid;gap:3px}
.deck-trigger-label{
  color:#8fb4cc;
  font-size:8px;
  line-height:1;
  font-weight:950;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.deck-trigger-value{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#f9fcff;
  font-size:13px;
  line-height:1.15;
  font-weight:950;
}
.deck-trigger-chevron{
  width:20px;height:20px;
  display:grid;place-items:center;
  color:#9dd8ef;
  font-size:13px;
  transition:transform .16s ease,color .16s ease;
}
.deck-open .deck-trigger-chevron{transform:rotate(180deg);color:#72e6ff}

.deck-menu{
  position:absolute;
  z-index:120;
  left:0;
  right:0;
  top:calc(100% + 8px);
  display:grid;
  gap:4px;
  padding:7px;
  border-radius:17px;
  border:1px solid rgba(164,229,255,.24);
  background:
    radial-gradient(circle at 12% 0,rgba(80,213,255,.11),transparent 28%),
    linear-gradient(160deg,rgba(12,38,70,.985),rgba(24,35,74,.99));
  box-shadow:0 20px 50px rgba(0,10,30,.44),inset 0 1px rgba(255,255,255,.08);
  transform-origin:top center;
  animation:deckMenuIn .14s ease-out;
  max-height:min(350px,52vh);
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(117,200,235,.35) transparent;
}
.deck-menu[hidden]{display:none !important}
@keyframes deckMenuIn{
  from{opacity:0;transform:translateY(-5px) scale(.985)}
  to{opacity:1;transform:none}
}
.deck-option{
  position:relative;
  width:100%;
  min-height:39px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 34px 8px 10px;
  border:1px solid transparent;
  border-radius:11px;
  background:transparent;
  color:#d9ecf7;
  font-size:11px;
  font-weight:800;
  text-align:left;
  cursor:pointer;
  transition:background .12s ease,border-color .12s ease,color .12s ease,transform .12s ease;
}
.deck-option:hover,
.deck-option:focus-visible{
  outline:none;
  transform:translateX(2px);
  color:#fff;
  background:rgba(94,196,238,.11);
  border-color:rgba(130,218,255,.15);
}
.deck-option[aria-selected="true"]{
  color:#fff;
  background:linear-gradient(90deg,rgba(70,197,239,.20),rgba(100,121,247,.16));
  border-color:rgba(120,221,255,.25);
}
.deck-option[aria-selected="true"]::after{
  content:"✓";
  position:absolute;
  right:11px;
  top:50%;
  transform:translateY(-50%);
  width:19px;height:19px;
  display:grid;place-items:center;
  border-radius:50%;
  color:#153955;
  font-size:10px;
  font-weight:950;
  background:#7ce9f8;
  box-shadow:0 0 12px rgba(93,225,247,.22);
}
.deck-option-dot{
  width:7px;height:7px;flex:0 0 7px;border-radius:50%;
  background:#6bcef4;
  box-shadow:0 0 8px rgba(107,206,244,.28);
}
.deck-control-questions .deck-option:nth-child(1) .deck-option-dot{background:#6fe6ff}
.deck-control-questions .deck-option:nth-child(2) .deck-option-dot{background:#ffd45a}
.deck-control-questions .deck-option:nth-child(3) .deck-option-dot{background:#ff8e7b}

/* Mode is intentionally a direct two-state switch rather than another dropdown. */
.deck-mode-shell{
  min-height:68px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding:9px 10px;
}
.deck-mode-icon{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:11px;
  font-size:15px;
  background:linear-gradient(145deg,rgba(117,231,216,.16),rgba(113,124,255,.16));
  border:1px solid rgba(157,229,255,.13);
}
.deck-mode-content{min-width:0;display:grid;gap:6px}
.deck-mode-label{
  color:#8fb4cc;
  font-size:8px;
  line-height:1;
  font-weight:950;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.deck-mode-segments{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  padding:3px;
  border-radius:10px;
  background:rgba(5,24,50,.38);
  border:1px solid rgba(151,217,244,.09);
}
.deck-mode-option{
  min-width:0;
  min-height:26px;
  padding:5px 7px;
  border:0;
  border-radius:8px;
  color:#87a9be;
  background:transparent;
  font-size:8.8px;
  font-weight:900;
  cursor:pointer;
  transition:.14s ease;
}
.deck-mode-option:hover{color:#dff6ff;background:rgba(105,211,245,.07)}
.deck-mode-option.active{
  color:#15344c;
  background:linear-gradient(135deg,#dffaff,#78e5f5);
  box-shadow:0 3px 10px rgba(70,206,235,.18),inset 0 1px rgba(255,255,255,.75);
}
.deck-mode-option[data-value="challenge"].active{
  color:#3b294d;
  background:linear-gradient(135deg,#ffe59b,#ff9b7a 58%,#d897ff);
  box-shadow:0 3px 12px rgba(255,140,112,.15),inset 0 1px rgba(255,255,255,.68);
}

.learning-deck .start-row{
  position:relative;
  z-index:2;
  display:grid !important;
  grid-template-columns:minmax(150px,190px) minmax(140px,180px) minmax(170px,1fr);
  gap:9px !important;
  align-items:stretch !important;
  margin-top:12px !important;
}
.learning-deck .start-btn,
.learning-deck .review-btn{
  position:relative;
  min-height:48px;
  border-radius:15px !important;
  padding:10px 14px 10px 42px !important;
  border:1px solid rgba(255,255,255,.13) !important;
  text-align:left;
  font-size:11px !important;
  line-height:1.1;
  font-weight:950 !important;
  letter-spacing:.01em;
  overflow:hidden;
  isolation:isolate;
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.learning-deck .start-btn::before,
.learning-deck .review-btn::before{
  position:absolute;
  left:11px;
  top:50%;
  transform:translateY(-50%);
  width:24px;height:24px;
  display:grid;place-items:center;
  border-radius:8px;
  font-size:12px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px rgba(255,255,255,.14);
}
.learning-deck .start-btn::before{content:"⚡"}
.learning-deck .review-btn::before{content:"↻"}
.learning-deck .start-btn::after,
.learning-deck .review-btn::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(110deg,transparent 10%,rgba(255,255,255,.13) 40%,transparent 70%);
  transform:translateX(-110%);
  transition:transform .38s ease;
}
.learning-deck .start-btn:hover:not(:disabled),
.learning-deck .review-btn:hover:not(:disabled){transform:translateY(-2px)}
.learning-deck .start-btn:hover:not(:disabled)::after,
.learning-deck .review-btn:hover:not(:disabled)::after{transform:translateX(110%)}
.learning-deck .start-btn{
  color:#fff !important;
  background:linear-gradient(135deg,#ffb147,#ff775e 58%,#ff5d80) !important;
  box-shadow:0 9px 22px rgba(255,98,77,.20),inset 0 1px rgba(255,255,255,.24) !important;
}
.learning-deck .review-btn{
  color:#eafff8 !important;
  background:linear-gradient(135deg,rgba(31,130,124,.90),rgba(45,107,155,.90)) !important;
  border-color:rgba(118,236,215,.22) !important;
  box-shadow:0 8px 20px rgba(23,100,123,.18),inset 0 1px rgba(255,255,255,.12) !important;
}
.learning-deck .start-btn:disabled,
.learning-deck .review-btn:disabled{transform:none;filter:saturate(.6);opacity:.62}
.learning-deck .review-info{
  min-width:0;
  display:flex;
  align-items:center;
  gap:7px;
  min-height:48px;
  padding:9px 12px;
  border-radius:15px;
  color:#b8d7e8 !important;
  font-size:9.6px !important;
  line-height:1.3;
  font-weight:750;
  border:1px solid rgba(146,217,244,.10);
  background:rgba(7,27,55,.27);
}
.learning-deck .review-info::before{
  content:"";
  width:7px;height:7px;flex:0 0 7px;
  border-radius:50%;
  background:#ffd55c;
  box-shadow:0 0 10px rgba(255,213,92,.35);
}
.learning-deck .start-status{
  grid-column:1/-1;
  min-height:0;
  margin:0 !important;
  padding:0 2px;
  color:#ffd5bd !important;
  font-size:9.5px !important;
}
.learning-deck .start-status:empty{display:none}

/* Pull the nearby reward rules into the same visual language. */
.rules-strip.learning-deck-rules{
  margin-top:8px !important;
  gap:6px !important;
}
.rules-strip.learning-deck-rules span{
  min-height:27px;
  display:inline-flex;
  align-items:center;
  padding:6px 10px !important;
  border-radius:999px !important;
  border:1px solid rgba(180,226,255,.12);
  background:linear-gradient(135deg,rgba(10,55,101,.78),rgba(45,55,118,.72)) !important;
  color:#d9f0ff !important;
  box-shadow:inset 0 1px rgba(255,255,255,.055);
  font-size:8.7px !important;
  font-weight:850 !important;
}

@media (max-width:980px){
  .learning-deck .controls-row,
  .learning-deck .learning-deck-controls{grid-template-columns:1fr 1fr}
  .deck-control-mode{grid-column:1/-1}
  .learning-deck .start-row{grid-template-columns:1fr 1fr}
  .learning-deck .review-info{grid-column:1/-1}
}
@media (max-width:680px){
  .controls-panel.learning-deck{padding:12px !important;border-radius:20px !important}
  .learning-deck-heading{align-items:flex-start;margin-bottom:10px}
  .learning-deck-status-chip{display:none}
  .learning-deck .controls-row,
  .learning-deck .learning-deck-controls{grid-template-columns:1fr}
  .deck-control-mode{grid-column:auto}
  .learning-deck .controls-pill.deck-control{min-height:62px}
  .deck-trigger,.deck-mode-shell{min-height:62px}
  .learning-deck .start-row{grid-template-columns:1fr}
  .learning-deck .start-btn,
  .learning-deck .review-btn{min-height:46px}
  .learning-deck .review-info{grid-column:auto;min-height:42px}
  .deck-menu{max-height:42vh}
}


/* learning-deck-polish.css */
/* UbayBian v0.5.47 — Learning Deck Lock Polish */
.controls-panel.learning-deck{
  z-index:24;
  padding:13px !important;
  border-radius:22px !important;
  box-shadow:
    0 16px 38px rgba(2,24,55,.22),
    inset 0 1px rgba(255,255,255,.10),
    inset 0 -1px rgba(68,154,215,.10) !important;
}
.controls-panel.learning-deck:has(.deck-open){z-index:90}

.learning-deck-heading{
  position:relative;
  min-height:36px;
  margin:0 2px 10px !important;
  overflow:hidden;
  isolation:isolate;
}
.learning-deck-heading-main,
.learning-deck-status-chip{position:relative;z-index:2}
.learning-deck-emblem{
  width:32px !important;
  height:32px !important;
  flex-basis:32px !important;
  border-radius:11px !important;
  font-size:14px !important;
}
.learning-deck-title{font-size:13px !important}
.learning-deck-kicker{font-size:8px !important}
.learning-deck-status-chip{
  min-height:25px !important;
  padding:5px 8px !important;
  font-size:8px !important;
  background:rgba(7,27,54,.62) !important;
  backdrop-filter:blur(8px);
}

/* Keep the old adventure route as a faint header-world detail instead of crossing controls. */
.learning-deck .adventure-map{
  right:76px !important;
  top:-3px !important;
  width:300px !important;
  height:42px !important;
  opacity:.15 !important;
  transform:scale(.78) rotate(0deg) !important;
  transform-origin:top right !important;
  filter:saturate(.72) brightness(.92);
  z-index:0 !important;
  pointer-events:none !important;
}
.learning-deck .adventure-map-road{
  top:10px !important;
  height:24px !important;
  border-width:4px !important;
  opacity:.82;
}
.learning-deck .adventure-map-scenery,
.learning-deck .adventure-map-checkpoints{display:none !important}

.learning-deck .controls-row,
.learning-deck .learning-deck-controls{
  z-index:12 !important;
  gap:9px !important;
}
.learning-deck .controls-pill.deck-control{
  min-height:58px !important;
  border-radius:16px !important;
  background:linear-gradient(145deg,rgba(27,63,101,.82),rgba(24,47,88,.78)) !important;
}
.deck-trigger{
  min-height:58px !important;
  grid-template-columns:30px minmax(0,1fr) 18px !important;
  gap:9px !important;
  padding:9px 11px !important;
}
.deck-trigger-icon,
.deck-mode-icon{
  width:30px !important;
  height:30px !important;
  border-radius:10px !important;
  font-size:13px !important;
}
.deck-trigger-copy{gap:2px !important}
.deck-trigger-label,
.deck-mode-label{font-size:7.6px !important}
.deck-trigger-value{font-size:12.4px !important}
.deck-trigger-chevron{width:18px !important;height:18px !important}

/* Menus should read as a separate floating layer, not reveal content underneath. */
.learning-deck .deck-menu{
  z-index:999 !important;
  top:calc(100% + 7px) !important;
  padding:7px !important;
  border-radius:16px !important;
  border-color:rgba(151,226,255,.34) !important;
  background:
    radial-gradient(circle at 14% 0,rgba(75,210,255,.10),transparent 30%),
    linear-gradient(160deg,#102f56 0%,#15284e 58%,#1a2852 100%) !important;
  box-shadow:
    0 24px 58px rgba(0,9,30,.58),
    0 0 0 1px rgba(76,168,220,.08),
    inset 0 1px rgba(255,255,255,.08) !important;
  backdrop-filter:blur(18px) saturate(115%);
  overflow:auto;
}
.learning-deck .deck-control-subject .deck-menu{
  max-height:246px !important;
  min-height:210px;
}
.learning-deck .deck-control-questions .deck-menu{
  max-height:none !important;
  min-height:0 !important;
}
.learning-deck .deck-option{
  min-height:39px !important;
  border-radius:11px !important;
  background:rgba(8,28,55,.16);
}
.learning-deck .deck-option:hover,
.learning-deck .deck-option:focus-visible{
  background:rgba(91,199,241,.14) !important;
}
.learning-deck .deck-option[aria-selected="true"]{
  background:linear-gradient(90deg,rgba(68,194,239,.27),rgba(97,118,240,.23)) !important;
}

.deck-mode-shell{
  min-height:58px !important;
  grid-template-columns:30px minmax(0,1fr) !important;
  gap:9px !important;
  padding:8px 9px !important;
}
.deck-mode-content{gap:5px !important}
.deck-mode-segments{padding:3px !important;border-radius:9px !important}
.deck-mode-option{
  min-height:24px !important;
  padding:4px 6px !important;
  font-size:8.4px !important;
}

/* Lock the action row into a compact mission strip. */
.learning-deck .start-row{
  grid-template-columns:minmax(180px,220px) minmax(160px,200px) max-content !important;
  justify-content:start;
  gap:8px !important;
  margin-top:10px !important;
}
.learning-deck .start-btn,
.learning-deck .review-btn{
  min-height:44px !important;
  border-radius:14px !important;
  padding-top:9px !important;
  padding-bottom:9px !important;
}
.learning-deck .deck-review-info{
  width:max-content;
  max-width:240px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 13px;
  border-radius:14px;
  border:1px solid rgba(157,226,255,.14);
  background:linear-gradient(145deg,rgba(17,47,80,.88),rgba(22,43,79,.82));
  color:#c9e4f3 !important;
  font-size:9.3px !important;
  font-weight:800;
  line-height:1.25;
  white-space:nowrap;
  box-shadow:inset 0 1px rgba(255,255,255,.055);
}
.learning-deck .deck-review-info::before{
  content:"";
  width:7px;height:7px;flex:0 0 7px;border-radius:50%;
  background:#ffd45a;
  box-shadow:0 0 10px rgba(255,212,90,.38);
}
.learning-deck .deck-start-status{
  grid-column:1/-1;
  margin:0 !important;
  min-height:0;
}
.learning-deck .deck-start-status:empty{display:none}

/* Bridge the dark control deck into the lighter mission area. */
.learning-deck-rules{
  position:relative;
  z-index:4;
  margin-top:7px !important;
  margin-bottom:7px !important;
}
.learning-deck-rules span{
  box-shadow:0 5px 12px rgba(11,52,89,.10);
}
.learning-deck-rules + .today-mission{
  margin-top:10px !important;
  box-shadow:0 13px 30px rgba(17,97,148,.16),inset 0 1px rgba(255,255,255,.70) !important;
}

@media (max-width:980px){
  .controls-panel.learning-deck{padding:12px !important}
  .learning-deck .adventure-map{display:none !important}
  .learning-deck .start-row{
    grid-template-columns:minmax(150px,1fr) minmax(140px,1fr) !important;
  }
  .learning-deck .deck-review-info{grid-column:1/-1;max-width:none;width:100%}
}

@media (max-width:720px){
  .learning-deck-heading{margin-bottom:9px !important}
  .learning-deck .controls-row,
  .learning-deck .learning-deck-controls{grid-template-columns:1fr !important}
  .learning-deck .start-row{grid-template-columns:1fr !important}
  .learning-deck .deck-review-info{grid-column:auto;width:100%}
  .learning-deck .deck-control-subject .deck-menu{min-height:0;max-height:260px !important}
}


/* learning-deck-lock.css */
/* UbayBian v0.5.48 — Learning Deck Final Lock */

/* The old adventure route no longer belongs inside Mission Setup. */
.controls-panel.learning-deck .adventure-map,
.controls-panel.learning-deck .deck-route-ambient{
  display:none !important;
}

/* Keep the floating menus compact, opaque and clearly detached from the page. */
.controls-panel.learning-deck .deck-menu{
  background:linear-gradient(160deg,#102f56 0%,#14284d 58%,#18274e 100%) !important;
  box-shadow:
    0 15px 34px rgba(0,9,30,.42),
    0 0 0 1px rgba(76,168,220,.07),
    inset 0 1px rgba(255,255,255,.075) !important;
  backdrop-filter:none !important;
  scrollbar-width:thin;
  scrollbar-color:rgba(104,183,218,.24) transparent;
}
.controls-panel.learning-deck .deck-menu::-webkit-scrollbar{width:5px}
.controls-panel.learning-deck .deck-menu::-webkit-scrollbar-track{background:transparent}
.controls-panel.learning-deck .deck-menu::-webkit-scrollbar-thumb{
  background:rgba(104,183,218,.22);
  border-radius:999px;
}
.controls-panel.learning-deck .deck-menu::-webkit-scrollbar-thumb:hover{
  background:rgba(116,205,239,.34);
}

/* Five subjects are enough at once; the rest remain one small scroll away. */
.controls-panel.learning-deck .deck-control-subject .deck-menu{
  min-height:0 !important;
  max-height:218px !important;
}

/* Slightly tighter item rhythm prevents the subject popover from feeling modal-sized. */
.controls-panel.learning-deck .deck-control-subject .deck-option{
  min-height:37px !important;
  padding-top:7px !important;
  padding-bottom:7px !important;
}

/* Action controls stop where the mission actions stop instead of stretching across the deck. */
.controls-panel.learning-deck .start-row{
  display:inline-grid !important;
  width:max-content !important;
  max-width:100% !important;
  grid-template-columns:220px 200px max-content !important;
  justify-content:start !important;
  align-self:start;
}
.controls-panel.learning-deck .start-btn,
.controls-panel.learning-deck .review-btn{
  width:100%;
}
.controls-panel.learning-deck .deck-review-info{
  max-width:220px !important;
}

/* Refine the transition into Today Mission without adding another visual object. */
.learning-deck-rules{
  margin-top:8px !important;
}
.learning-deck-rules + .today-mission{
  margin-top:9px !important;
}

@media (max-width:980px){
  .controls-panel.learning-deck .start-row{
    display:grid !important;
    width:100% !important;
    grid-template-columns:minmax(150px,1fr) minmax(140px,1fr) !important;
  }
  .controls-panel.learning-deck .deck-review-info{
    grid-column:1/-1;
    width:100% !important;
    max-width:none !important;
  }
}

@media (max-width:720px){
  .controls-panel.learning-deck .deck-control-subject .deck-menu{max-height:222px !important}
  .controls-panel.learning-deck .start-row{grid-template-columns:1fr !important}
  .controls-panel.learning-deck .deck-review-info{grid-column:auto}
}


/* learning-deck-session.css */
/* UbayBian v0.5.56 — simplify learning sessions: Session owns difficulty behavior */

/* Mode remains in the legacy/backend model for compatibility, but is no longer a user-facing choice. */
.controls-panel.learning-deck .deck-control-mode,
.controls-panel.learning-deck label.controls-pill:has(#quiz-mode){
  display:none !important;
}

/* Subject + Session are now the only setup controls. */
.controls-panel.learning-deck .controls-row,
.controls-panel.learning-deck .learning-deck-controls{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
}

/* Mid Exam has no Review action inside mission setup. */
.controls-panel.learning-deck.exam-session-selected .review-btn,
.controls-panel.learning-deck.exam-session-selected .review-info,
.controls-panel.learning-deck.exam-session-selected .deck-review-info{
  display:none !important;
}

.controls-panel.learning-deck.exam-session-selected .start-row{
  grid-template-columns:minmax(190px,330px) minmax(0,1fr) !important;
}

@media (max-width:760px){
  .controls-panel.learning-deck .controls-row,
  .controls-panel.learning-deck .learning-deck-controls{
    grid-template-columns:1fr !important;
  }

  .controls-panel.learning-deck.exam-session-selected .start-row{
    grid-template-columns:1fr !important;
  }
}


/* stimulus.css */
.question-text {
  white-space: pre-line;
  line-height: 1.65;
}


/* learning-audit.css */
/* Practice + Assessment analytics polish */
.report-subject-cell .report-session-type,
.report-table td > .report-session-type{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  margin-left:8px;
  padding:4px 9px;
  border-radius:999px;
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.025em;
  text-transform:none;
  white-space:nowrap !important;
  color:#236a9d;
  background:linear-gradient(180deg,#eef9ff,#dcefff);
  border:1px solid rgba(47,137,195,.20);
  box-shadow:0 3px 8px rgba(38,111,158,.10),inset 0 1px 0 rgba(255,255,255,.86);
  vertical-align:middle;
}
.report-subject-cell .report-session-type.assessment,
.report-table td > .report-session-type.assessment{
  color:#6849a6;
  background:linear-gradient(180deg,#f6f2ff,#e9e0ff);
  border-color:rgba(109,85,164,.22);
  box-shadow:0 3px 8px rgba(96,72,154,.10),inset 0 1px 0 rgba(255,255,255,.88);
}
.report-card .report-subject-cell{
  gap:7px;
}
.report-card .report-subject-cell .report-session-type{
  margin-left:0;
}
.report-score-pill.is-provisional{
  border-style:dashed;
}
.report-bar.is-provisional{
  opacity:.72;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.22) 0 6px,transparent 6px 12px);
}
.report-auto-note{
  max-width:880px;
  margin:12px auto 0;
  padding:10px 14px;
  border-radius:14px;
  color:#667f95;
  background:rgba(238,246,252,.82);
  border:1px solid rgba(78,137,177,.12);
  font-size:12px;
  line-height:1.5;
  text-align:center;
}

/* Assessment reward pills sit directly on the adventure background.
   The individual pills carry the visual treatment; the strip itself must not
   become a large white card. */
body.adventure-home .rules-strip[data-reward-mode="assessment"],
.rules-strip[data-reward-mode="assessment"]{
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

@media (max-width:760px){
  .report-subject-cell .report-session-type,
  .report-table td > .report-session-type{
    margin-left:0;
    padding:4px 7px;
    font-size:9px;
  }
  .report-card .report-subject-cell{
    gap:6px;
  }
}


/* responsive.css */
/* UbayBian v0.5.85 — responsive hardening
   One final responsive layer for phone/tablet portrait + landscape.
   Loaded last so it can safely contain older visual layers without rewriting them. */

/* --------------------------------------------------------------------------
   GLOBAL CONTAINMENT
   -------------------------------------------------------------------------- */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

.shell,
main,
.app-main-grid,
.main-col,
.side-menu,
.controls-panel,
.quiz-card,
.result-panel,
.report-card,
.robotlab-card,
.exam-shell,
.exam-result,
.exam-question-card,
.exam-review,
.reward-chamber,
.parent-pin-dialog{
  min-width:0;
  max-width:100%;
}

main > *,
.main-col > *,
.report-main-grid > *,
.controls-row > *,
.learning-deck-controls > *,
.exam-meta > *,
.exam-nav > *{
  min-width:0;
}

img,
svg,
video,
canvas{
  max-width:100%;
}

input,
select,
textarea,
button{
  min-width:0;
  max-width:100%;
}

.badge-text,
.profile-info,
.side-tile > div,
.hero-text,
.deck-trigger-copy,
.upgrade-info,
.ub-reward-copy,
.report-subject-cell{
  min-width:0;
}

.badge-name,
.badge-desc,
.side-tile-text,
.side-tile-sub,
.hero-text,
.question-text,
.option-text,
.exam-question-text,
.exam-review-item,
.upgrade-name,
.upgrade-status,
.ub-reward-copy,
.report-learning-note{
  overflow-wrap:anywhere;
}

/* --------------------------------------------------------------------------
   REPORT — keep Detail Sesi inside the viewport on every device.
   -------------------------------------------------------------------------- */
.report-card,
.report-card .report-main-grid,
.report-card .report-chart,
.report-card .report-table-wrap,
.report-card .report-table-scroll{
  min-width:0 !important;
  max-width:100% !important;
}

.report-card .report-table-wrap{
  overflow:hidden !important;
}

.report-card .report-table-scroll{
  width:100%;
  overflow-x:auto !important;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}

.report-card .report-table{
  width:100% !important;
  max-width:100% !important;
}

.report-card .report-subject-cell{
  max-width:100%;
  flex-wrap:wrap;
}

.report-card .report-session-type{
  white-space:normal;
}

/* --------------------------------------------------------------------------
   TABLET NAVIGATION — two clean rows avoid centre-nav collisions in landscape.
   -------------------------------------------------------------------------- */
@media (max-width:1180px){
  .topbar,
  body.adventure-shell:not(.adventure-home) .topbar,
  body:has(#main > .exam-shell) .topbar,
  body:has(#main > .exam-result) .topbar{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto auto auto;
    grid-template-areas:
      "brand version switch logout"
      "nav nav nav nav";
    align-items:center;
    gap:9px 10px !important;
    min-height:auto !important;
    padding:11px 20px !important;
  }

  .topbar .brand{grid-area:brand;justify-self:start;min-width:0}
  .topbar .version{grid-area:version;margin-left:0 !important;justify-self:end}
  .topbar #switch-profile{grid-area:switch;justify-self:end}
  .topbar #logout-family{grid-area:logout;justify-self:end}

  .topbar .top-nav,
  body.adventure-shell:not(.adventure-home) .top-nav,
  body:has(#main > .exam-shell) .top-nav,
  body:has(#main > .exam-result) .top-nav{
    grid-area:nav;
    position:static !important;
    left:auto !important;
    transform:none !important;
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    justify-content:stretch !important;
    justify-self:stretch;
    gap:4px !important;
    padding:5px !important;
  }

  .topbar .top-nav[hidden]{display:none !important}

  .topbar .top-nav button{
    width:100%;
    min-width:0;
    white-space:nowrap;
    text-align:center;
  }

  body.adventure-shell:not(.adventure-home) main,
  body:has(#main > .exam-shell) main,
  body:has(#main > .exam-result) main{
    padding-left:20px !important;
    padding-right:20px !important;
  }
}

/* --------------------------------------------------------------------------
   TABLET PORTRAIT / PHONE LANDSCAPE
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .app-main-grid,
  body.adventure-shell:not(.adventure-home) .app-main-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
    min-height:0 !important;
  }

  .main-col{order:1 !important;min-width:0}
  .side-menu{order:2 !important}

  .side-menu,
  body.adventure-shell:not(.adventure-home) .side-menu{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  .side-profile,
  .badge-card,
  body.adventure-shell:not(.adventure-home) .side-profile,
  body.adventure-shell:not(.adventure-home) .badge-card{
    grid-column:span 1;
  }

  .report-card[data-adventure-report="1"] .report-main-grid{
    grid-template-columns:1fr !important;
  }

  .report-card[data-adventure-report="1"] .report-chart,
  .report-card[data-adventure-report="1"] .report-table-wrap{
    min-height:0 !important;
  }

  .controls-panel.learning-deck .controls-row,
  .controls-panel.learning-deck .learning-deck-controls{
    min-width:0;
  }

  .controls-panel.learning-deck .deck-menu{
    max-width:100% !important;
  }

  .result-actions,
  .bottom-actions,
  .exam-nav,
  .exam-nav-actions{
    flex-wrap:wrap;
  }

  .robotlab-card .robotlab-upgrade-item,
  .robotlab-card .upgrade-info{
    min-width:0;
  }
}

/* --------------------------------------------------------------------------
   PHONE / SMALL TABLET PORTRAIT
   -------------------------------------------------------------------------- */
@media (max-width:700px){
  body{
    padding-left:max(0px,env(safe-area-inset-left));
    padding-right:max(0px,env(safe-area-inset-right));
  }

  .topbar,
  body.adventure-shell:not(.adventure-home) .topbar,
  body:has(#main > .exam-shell) .topbar,
  body:has(#main > .exam-result) .topbar{
    grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-areas:
      "brand switch logout"
      "nav nav nav";
    padding:9px 12px !important;
    gap:7px !important;
  }

  .topbar .version{display:none !important}
  .topbar .brand{font-size:18px !important}
  .topbar .brand-icon{font-size:24px !important}
  .topbar #switch-profile,
  .topbar #logout-family{
    min-height:34px !important;
    padding:6px 9px !important;
    font-size:10px !important;
    white-space:nowrap;
  }

  .topbar .top-nav,
  body.adventure-shell:not(.adventure-home) .top-nav,
  body:has(#main > .exam-shell) .top-nav,
  body:has(#main > .exam-result) .top-nav{
    padding:4px !important;
    border-radius:16px !important;
  }

  .topbar .top-nav button,
  body.adventure-shell:not(.adventure-home) .top-nav button,
  body:has(#main > .exam-shell) .top-nav button,
  body:has(#main > .exam-result) .top-nav button{
    padding:7px 6px !important;
    font-size:10.5px !important;
  }

  main,
  body.adventure-shell:not(.adventure-home) main,
  body:has(#main > .exam-shell) main,
  body:has(#main > .exam-result) main{
    padding-left:10px !important;
    padding-right:10px !important;
  }

  /* Home/sidebar stays compact: profile + badges full width, action tiles in two columns. */
  .side-menu,
  body.adventure-shell:not(.adventure-home) .side-menu{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .side-profile,
  .badge-card,
  body.adventure-shell:not(.adventure-home) .side-profile,
  body.adventure-shell:not(.adventure-home) .badge-card{
    grid-column:1/-1 !important;
  }

  body.adventure-shell:not(.adventure-home) .side-tile,
  .side-tile{
    min-width:0;
    padding:10px 48px 10px 11px !important;
  }

  body.adventure-shell:not(.adventure-home) .side-tile::after{
    right:4px !important;
    font-size:30px !important;
    letter-spacing:-11px !important;
  }

  .badge-chip{min-width:0}
  .badge-name{font-size:10.5px}
  .badge-desc{font-size:9.5px}

  /* Mission setup / floating selectors. */
  .controls-panel.learning-deck{
    width:100%;
    max-width:100%;
    overflow:visible;
  }

  .controls-panel.learning-deck .controls-row,
  .controls-panel.learning-deck .learning-deck-controls,
  .controls-panel.learning-deck .start-row{
    grid-template-columns:1fr !important;
    width:100% !important;
  }

  .controls-panel.learning-deck .deck-menu{
    left:0 !important;
    right:0 !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  .controls-panel.learning-deck .deck-review-info{
    width:100% !important;
    max-width:100% !important;
    white-space:normal !important;
  }

  .rules-strip{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px !important;
  }
  .rules-strip span{text-align:center;white-space:normal}

  .hero-daily{
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
  }
  .hero-text h1{font-size:clamp(20px,7vw,28px) !important}
  .hero-trophy{font-size:34px !important;margin:0 !important}

  /* Practice/result. */
  .quiz-card,
  .result-panel{
    width:100%;
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .result-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    width:100%;
  }
  .result-actions button{width:100%}

  /* REPORT: convert the desktop table into true mobile session cards. */
  .report-card[data-adventure-report="1"] .report-header,
  .report-card .report-header{
    min-height:0 !important;
    padding:16px 82px 16px 16px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:6px !important;
  }

  .report-card[data-adventure-report="1"] .report-header > div:first-child{
    width:100%;
    min-width:0;
  }

  .report-card[data-adventure-report="1"] .report-badge,
  .report-card .report-badge{
    position:static !important;
    transform:none !important;
    margin:2px 0 0 !important;
    max-width:100%;
    white-space:normal;
  }

  .report-card[data-adventure-report="1"] .report-hero-visual{
    right:8px !important;
    top:12px !important;
    bottom:auto !important;
    width:66px !important;
    height:74px !important;
  }
  .report-card[data-adventure-report="1"] .report-hero-visual img{
    width:62px !important;
    height:70px !important;
  }

  .report-card[data-adventure-report="1"] .report-chart,
  .report-card[data-adventure-report="1"] .report-table-wrap{
    padding:14px !important;
    border-radius:18px !important;
  }

  .report-card[data-adventure-report="1"] .report-chart-inner{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    gap:4px !important;
    padding-left:2px !important;
    padding-right:2px !important;
  }
  .report-card[data-adventure-report="1"] .report-bar-wrap{
    flex:1 0 24px;
    min-width:24px;
  }

  .report-card[data-adventure-report="1"] .report-table-scroll{
    max-height:none !important;
    overflow:visible !important;
    padding:0 !important;
  }

  .report-card[data-adventure-report="1"] .report-table{
    display:block;
    width:100% !important;
    border-spacing:0 !important;
    font-size:11px !important;
  }

  .report-card[data-adventure-report="1"] .report-table thead{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
  }

  .report-card[data-adventure-report="1"] .report-table tbody{
    display:grid;
    gap:9px;
    width:100%;
  }

  .report-card[data-adventure-report="1"] .report-table tbody tr{
    display:grid;
    grid-template-columns:1fr;
    gap:0;
    width:100%;
    min-width:0;
    padding:10px 12px;
    border:1px solid rgba(140,193,222,.30);
    border-radius:15px;
    background:rgba(255,255,255,.70);
    box-shadow:0 5px 12px rgba(43,105,143,.055);
  }

  .report-card[data-adventure-report="1"] .report-table tbody td{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:100%;
    min-width:0;
    padding:6px 0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    white-space:normal !important;
    text-align:right;
  }

  .report-card[data-adventure-report="1"] .report-table tbody td + td{
    border-top:1px solid rgba(121,181,213,.16) !important;
  }

  .report-card[data-adventure-report="1"] .report-table tbody td::before{
    flex:0 0 auto;
    color:#6a879b;
    font-size:9.5px;
    line-height:1;
    font-weight:850;
    letter-spacing:.045em;
    text-transform:uppercase;
    text-align:left;
  }
  .report-card[data-adventure-report="1"] .report-table tbody td:nth-child(1)::before{content:"Tanggal"}
  .report-card[data-adventure-report="1"] .report-table tbody td:nth-child(2)::before{content:"Subject"}
  .report-card[data-adventure-report="1"] .report-table tbody td:nth-child(3)::before{content:"Nilai"}
  .report-card[data-adventure-report="1"] .report-table tbody td:nth-child(4)::before{content:"Benar / Total"}

  .report-card[data-adventure-report="1"] .report-subject-cell{
    justify-content:flex-end;
    flex-wrap:wrap;
    text-align:right;
  }

  .report-card[data-adventure-report="1"] .report-session-type{
    margin-left:4px !important;
  }

  .report-card[data-adventure-report="1"] .report-learning-insights{
    padding:12px !important;
    border-radius:18px !important;
  }

  /* Assessment. */
  .exam-shell,
  .exam-result{
    width:100% !important;
    max-width:100% !important;
    margin:7px 0 !important;
    padding:15px !important;
    border-radius:20px !important;
  }

  .exam-question-card{padding:16px !important}
  .exam-meta{grid-template-columns:1fr !important}
  .exam-timer-box,
  .exam-answered-box{width:100%;min-width:0 !important}
  .exam-option{width:100%;min-width:0}
  .exam-result-stats{display:grid !important;grid-template-columns:1fr 1fr;width:100%}
  .exam-result-stats span{width:100%;min-width:0 !important}
  .exam-result-rewards{width:100%}
  .exam-result-reward-chip{min-width:0 !important;flex:1 1 120px !important}
  .exam-review,
  .exam-review-item,
  .exam-unanswered-group{width:100%;max-width:100%}

  .exam-nav-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    width:100%;
    gap:7px;
  }
  .exam-nav-actions button{width:100%}
  .exam-finish-btn{grid-column:1/-1}

  /* Robot Lab. */
  .robotlab-card.robotlab-adventure-v0521 .robotlab-energy-label,
  .robotlab-card.robotlab-adventure-v0521 .robotlab-xpbar-label{
    padding-left:18px !important;
    padding-right:18px !important;
    white-space:normal !important;
    flex-wrap:wrap;
    gap:4px 10px !important;
  }
  .robotlab-card.robotlab-adventure-v0521 .robotlab-xpbar-label > span{
    white-space:normal !important;
  }
  .robotlab-card.robotlab-adventure-v0521 .robotlab-next-step{
    padding-left:18px !important;
    padding-right:18px !important;
  }
  .robotlab-card.robotlab-adventure-v0521 .robotlab-xpbar-track{
    margin-left:16px !important;
    margin-right:16px !important;
  }
  .robotlab-upgrade-item{max-width:100%;overflow:hidden}

  /* Reward Shop / Parent Access. */
  .reward-chamber-overlay,
  .parent-pin-dialog-overlay{
    padding:10px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
  }
  .reward-chamber{
    width:100% !important;
    max-width:100% !important;
    max-height:calc(100dvh - 20px) !important;
    border-radius:22px !important;
  }
  .reward-chamber .ub-modal-heading h2{font-size:21px !important}
  .reward-chamber .ub-wallet{min-width:0;max-width:100%}
  .reward-chamber .ub-reward-card{min-width:0;max-width:100%}
  .parent-pin-dialog{width:100% !important;max-width:420px !important}
}

/* --------------------------------------------------------------------------
   VERY SMALL PHONES
   -------------------------------------------------------------------------- */
@media (max-width:420px){
  .topbar,
  body.adventure-shell:not(.adventure-home) .topbar,
  body:has(#main > .exam-shell) .topbar,
  body:has(#main > .exam-result) .topbar{
    grid-template-columns:minmax(0,1fr) auto auto;
    padding-inline:9px !important;
  }

  .topbar .brand{font-size:16.5px !important;gap:6px !important}
  .topbar .brand-icon{font-size:22px !important}
  .topbar #switch-profile,
  .topbar #logout-family{padding:6px 7px !important;font-size:9.5px !important}
  .topbar .top-nav button{font-size:9.5px !important;padding:7px 4px !important}

  .side-menu,
  body.adventure-shell:not(.adventure-home) .side-menu{
    grid-template-columns:1fr !important;
  }
  .side-profile,
  .badge-card,
  body.adventure-shell:not(.adventure-home) .side-profile,
  body.adventure-shell:not(.adventure-home) .badge-card{
    grid-column:auto !important;
  }
  body.adventure-shell:not(.adventure-home) .side-tile,
  .side-tile{padding-right:62px !important}

  .hero-daily{grid-template-columns:1fr}
  .hero-action{display:none}
  .rules-strip{grid-template-columns:1fr !important}

  .result-actions{grid-template-columns:1fr !important}
  .exam-result-stats{grid-template-columns:1fr !important}
  .exam-nav-actions{grid-template-columns:1fr !important}
  .exam-finish-btn{grid-column:auto}

  .report-card[data-adventure-report="1"] .report-header,
  .report-card .report-header{
    padding-right:16px !important;
  }
  .report-card[data-adventure-report="1"] .report-hero-visual{display:none !important}

  .report-card[data-adventure-report="1"] .report-table tbody td{
    align-items:flex-start;
  }

  .reward-chamber .ub-wallet{
    padding-left:70px !important;
    padding-right:12px !important;
  }
}

/* --------------------------------------------------------------------------
   PHONE LANDSCAPE — save vertical room without squeezing horizontal content.
   -------------------------------------------------------------------------- */
@media (orientation:landscape) and (max-width:950px) and (max-height:600px){
  .topbar,
  body.adventure-shell:not(.adventure-home) .topbar,
  body:has(#main > .exam-shell) .topbar,
  body:has(#main > .exam-result) .topbar{
    padding-top:6px !important;
    padding-bottom:6px !important;
  }

  .topbar .top-nav{padding:3px !important}
  .topbar .top-nav button{padding-top:5px !important;padding-bottom:5px !important}

  main,
  body.adventure-shell:not(.adventure-home) main,
  body:has(#main > .exam-shell) main,
  body:has(#main > .exam-result) main{
    padding-top:5px !important;
    padding-bottom:14px !important;
  }

  .hero-daily{min-height:0 !important;padding-top:12px !important;padding-bottom:12px !important}
  .exam-shell,.exam-result{margin-top:4px !important;margin-bottom:4px !important}
  .reward-chamber{max-height:calc(100dvh - 12px) !important}
}


/* review-modal.css */
/* UbayBian v0.5.89 · Review modal visual refresh
   Child-facing recovery selector aligned with the current Adventure visual system. */

.ub-modal-overlay.ub-review-overlay{
  background:
    radial-gradient(circle at 18% 18%,rgba(68,211,255,.16),transparent 30%),
    radial-gradient(circle at 84% 78%,rgba(255,150,116,.12),transparent 30%),
    rgba(6,35,61,.72)!important;
  backdrop-filter:blur(13px) saturate(118%)!important;
  -webkit-backdrop-filter:blur(13px) saturate(118%)!important;
}

.ub-review-modal{
  position:relative;
  width:min(760px,94vw)!important;
  max-height:min(86dvh,760px)!important;
  overflow:auto!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.84)!important;
  border-radius:32px!important;
  color:#183952!important;
  background:
    radial-gradient(circle at 9% 12%,rgba(94,218,255,.20),transparent 27%),
    radial-gradient(circle at 93% 82%,rgba(255,181,117,.16),transparent 27%),
    linear-gradient(145deg,rgba(248,253,255,.98),rgba(235,247,255,.96) 54%,rgba(244,240,255,.96))!important;
  box-shadow:
    0 34px 90px rgba(2,31,58,.38),
    0 0 0 7px rgba(102,219,255,.055),
    inset 0 1px 0 rgba(255,255,255,.96)!important;
  isolation:isolate;
}
.ub-review-modal:before{
  content:"";
  position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.65;
  background:
    radial-gradient(circle at 88% 16%,rgba(255,255,255,.90) 0 2px,transparent 3px),
    radial-gradient(circle at 14% 78%,rgba(84,210,236,.42) 0 2px,transparent 3px),
    linear-gradient(rgba(55,151,210,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(55,151,210,.035) 1px,transparent 1px);
  background-size:auto,auto,28px 28px,28px 28px;
  mask-image:linear-gradient(to bottom,#000,transparent 92%);
}

.ub-review-modal .ub-modal-top{
  position:sticky;top:0;z-index:4;
  min-height:96px;
  margin:0!important;
  padding:20px 24px 16px!important;
  border-bottom:1px solid rgba(88,154,195,.10);
  background:linear-gradient(90deg,rgba(235,252,255,.89),rgba(250,253,255,.88) 44%,rgba(249,240,255,.86));
  backdrop-filter:blur(15px) saturate(118%);
  -webkit-backdrop-filter:blur(15px) saturate(118%);
}
.ub-review-modal .ub-modal-heading{gap:14px!important;min-width:0;}
.ub-review-modal .ub-modal-icon{
  width:58px!important;height:58px!important;flex:0 0 auto;
  border-radius:19px!important;
  display:grid;place-items:center;
  font-size:29px!important;
  background:linear-gradient(145deg,#dff8ff,#dceaff 55%,#eee6ff)!important;
  border:1px solid rgba(255,255,255,.94);
  box-shadow:0 10px 24px rgba(45,119,166,.13),inset 0 2px 0 rgba(255,255,255,.94)!important;
}
.ub-review-titlecopy{min-width:0;}
.ub-review-kicker{
  display:block;margin:0 0 3px;
  color:#4783a4;font-size:10px;font-weight:950;letter-spacing:.15em;text-transform:uppercase;
}
.ub-review-modal .ub-modal-heading h2{
  margin:0!important;color:#173a54!important;
  font-size:27px!important;line-height:1.05;font-weight:950!important;letter-spacing:-.025em;
}
.ub-review-modal .ub-modal-close{
  width:44px!important;height:44px!important;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.86)!important;
  border-radius:15px!important;
  background:rgba(239,248,253,.84)!important;
  color:#53748b!important;font-size:18px;
  box-shadow:0 7px 18px rgba(32,78,108,.08),inset 0 1px 0 #fff;
  transition:transform .16s ease,background .16s ease,color .16s ease;
}
.ub-review-modal .ub-modal-close:hover,
.ub-review-modal .ub-modal-close:focus-visible{
  transform:translateY(-1px) rotate(3deg);background:#fff!important;color:#173a54!important;outline:3px solid rgba(52,184,235,.18);outline-offset:2px;
}

.ub-review-modal > .ub-modal-status,
.ub-review-modal > .ub-modal-copy,
.ub-review-modal > .ub-review-summary,
.ub-review-modal > .ub-review-list{margin-left:24px!important;margin-right:24px!important;}
.ub-review-modal > .ub-modal-status:first-of-type{margin-top:22px!important;}
.ub-review-modal .ub-modal-copy{
  margin-top:19px!important;margin-bottom:10px!important;
  color:#607b90!important;font-size:13px!important;line-height:1.5!important;font-weight:700;
}
.ub-review-summary{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:0!important;margin-bottom:15px!important;
}
.ub-review-summary-main,
.ub-review-summary-note{
  display:inline-flex;align-items:center;gap:6px;border-radius:999px;
  padding:7px 11px;font-size:10px;font-weight:900;
}
.ub-review-summary-main{
  color:#156488;background:linear-gradient(145deg,rgba(220,246,255,.96),rgba(207,236,255,.86));
  border:1px solid rgba(113,201,237,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.ub-review-summary-note{
  color:#745d86;background:rgba(244,237,255,.75);border:1px solid rgba(190,166,231,.22);
}

.ub-review-modal .ub-review-list{
  display:grid!important;gap:11px!important;
  margin-bottom:24px!important;
}
.ub-review-modal .ub-review-item{
  position:relative;
  width:100%;min-height:78px;
  display:grid!important;
  grid-template-columns:50px minmax(0,1fr) auto auto!important;
  align-items:center!important;gap:13px!important;
  padding:13px 15px!important;
  border:1px solid rgba(155,204,231,.48)!important;
  border-radius:20px!important;
  text-align:left;color:#173a54!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.91),rgba(240,249,255,.78))!important;
  box-shadow:0 9px 22px rgba(34,84,119,.07),inset 0 1px 0 rgba(255,255,255,.95)!important;
  cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.ub-review-modal .ub-review-item:hover,
.ub-review-modal .ub-review-item:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(42,180,233,.74)!important;
  background:linear-gradient(145deg,#fff,rgba(229,247,255,.94))!important;
  box-shadow:0 14px 28px rgba(37,121,168,.12),0 0 0 4px rgba(66,192,237,.06),inset 0 1px 0 #fff!important;
  outline:none;
}
.ub-review-modal .ub-review-icon{
  width:50px;height:50px;display:grid;place-items:center;
  border-radius:16px;font-size:25px!important;
  background:linear-gradient(145deg,#eefaff,#e7edff)!important;
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 7px 17px rgba(62,107,151,.08),inset 0 1px 0 #fff;
}
.ub-review-modal .ub-review-name{
  min-width:0;font-size:15px;font-weight:950!important;letter-spacing:.005em;
}
.ub-review-modal .ub-review-name:after{
  content:"Siap dikuasai lagi";display:block;margin-top:4px;
  color:#7890a1;font-size:10px;font-weight:750;letter-spacing:0;text-transform:none;
}
.ub-review-modal .ub-review-count{
  color:#257392!important;background:linear-gradient(145deg,#e5f8ff,#d8efff)!important;
  border:1px solid rgba(102,190,226,.23);
  padding:6px 10px!important;border-radius:999px!important;
  font-size:10px!important;font-weight:900!important;white-space:nowrap;
}
.ub-review-arrow{
  width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  color:#58849b;background:rgba(231,244,251,.84);font-size:16px;font-weight:900;
  transition:transform .16s ease,background .16s ease,color .16s ease;
}
.ub-review-item:hover .ub-review-arrow,
.ub-review-item:focus-visible .ub-review-arrow{transform:translateX(2px);background:#d9f4ff;color:#1779a4;}

/* Empty review queue becomes a deliberate positive state rather than a plain status line. */
.ub-review-modal .ub-review-list > .ub-modal-status.success{
  min-height:118px;margin:0!important;padding:24px!important;
  display:grid;place-items:center;text-align:center;
  border:1px solid rgba(112,211,168,.30);border-radius:22px;
  color:#197052!important;font-size:13px!important;line-height:1.45;
  background:linear-gradient(145deg,rgba(236,255,247,.92),rgba(220,248,240,.76));
  box-shadow:0 9px 22px rgba(47,145,106,.07),inset 0 1px 0 rgba(255,255,255,.92);
}

@media (max-width:700px){
  .ub-modal-overlay.ub-review-overlay{padding:10px!important;align-items:center;}
  .ub-review-modal{width:min(100%,560px)!important;max-height:88dvh!important;border-radius:26px!important;}
  .ub-review-modal .ub-modal-top{min-height:82px;padding:15px 16px 13px!important;}
  .ub-review-modal .ub-modal-icon{width:50px!important;height:50px!important;font-size:24px!important;border-radius:16px!important;}
  .ub-review-modal .ub-modal-heading h2{font-size:23px!important;}
  .ub-review-kicker{font-size:9px;}
  .ub-review-modal .ub-modal-close{width:40px!important;height:40px!important;}
  .ub-review-modal > .ub-modal-status,
  .ub-review-modal > .ub-modal-copy,
  .ub-review-modal > .ub-review-summary,
  .ub-review-modal > .ub-review-list{margin-left:16px!important;margin-right:16px!important;}
  .ub-review-modal .ub-modal-copy{margin-top:15px!important;}
  .ub-review-summary{align-items:flex-start;flex-direction:column;gap:6px;}
  .ub-review-modal .ub-review-item{
    grid-template-columns:44px minmax(0,1fr) auto!important;
    min-height:70px;padding:11px 12px!important;gap:10px!important;border-radius:18px!important;
  }
  .ub-review-modal .ub-review-icon{width:44px;height:44px;font-size:22px!important;border-radius:14px;}
  .ub-review-arrow{display:none;}
  .ub-review-modal .ub-review-name{font-size:14px;}
  .ub-review-modal .ub-review-count{padding:5px 8px!important;font-size:9px!important;}
}

@media (max-width:420px){
  .ub-review-modal .ub-review-name:after{display:none;}
  .ub-review-modal .ub-modal-copy{font-size:12px!important;}
  .ub-review-summary-note{display:none;}
}


/* badge-showcase.css */
/* UbayBian v0.5.90 · compact badge showcase + collection gallery */
.badge-card{
  overflow:hidden;
}
.badge-card .badge-list{
  display:grid;
  gap:10px;
}
.badge-showcase-item{
  min-width:0;
  transition:opacity .18s ease,transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.badge-showcase-item .badge-text{min-width:0;}
.badge-showcase-item .badge-desc{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.badge-showcase-name-row{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  flex-wrap:wrap;
}
.badge-showcase-name-row .badge-name{min-width:0;}
.badge-spotlight-label,
.badge-new-label{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:18px;
  padding:2px 7px;
  border-radius:999px;
  font-size:8px;
  line-height:1;
  font-weight:950;
  letter-spacing:.08em;
}
.badge-new-label{
  color:#8b5800;
  background:linear-gradient(135deg,#fff1a9,#ffd569);
  border:1px solid rgba(255,190,65,.42);
}
.badge-spotlight-label{
  color:#4d3d91;
  background:linear-gradient(135deg,rgba(235,229,255,.96),rgba(214,244,255,.94));
  border:1px solid rgba(158,145,237,.28);
}
.badge-showcase-item.is-spotlight{
  position:relative;
  background:
    radial-gradient(circle at 96% 15%,rgba(181,151,255,.16),transparent 32%),
    linear-gradient(135deg,rgba(255,255,255,.76),rgba(237,248,255,.72));
  border-color:rgba(137,164,236,.34);
}
.badge-showcase-item.is-spotlight:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88);
}
.badge-showcase-item.is-swapping{opacity:.28;transform:translateY(3px);}
.badge-showcase-item.badge-spotlight-enter{opacity:0;transform:translateY(-3px);}
.badge-showcase-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:11px;
  padding-top:10px;
  border-top:1px solid rgba(59,129,186,.13);
}
.badge-showcase-total{
  color:#5f7890;
  font-size:10px;
  font-weight:850;
  white-space:nowrap;
}
.badge-view-all{
  border:1px solid rgba(32,119,197,.18);
  border-radius:999px;
  padding:7px 11px;
  background:rgba(255,255,255,.54);
  color:#1765ae;
  font-size:10px;
  font-weight:950;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .15s ease,background .15s ease,box-shadow .15s ease;
}
.badge-view-all:hover,.badge-view-all:focus-visible{
  transform:translateY(-1px);
  background:rgba(255,255,255,.82);
  box-shadow:0 7px 16px rgba(38,102,158,.10),inset 0 1px 0 #fff;
  outline:none;
}

/* Desktop shows 3 featured + 1 rotating spotlight. Tablet/mobile keeps 2 featured + spotlight,
   but preserves all three when there is no fourth slot yet. */
@media (min-width:901px){
  .badge-card .badge-showcase-item:nth-child(n+5){display:none!important;}
}
@media (min-width:601px) and (max-width:900px){
  .badge-card.has-badge-spotlight .badge-showcase-item:nth-child(3){display:none!important;}
  .badge-card .badge-showcase-item:nth-child(n+5){display:none!important;}
}
@media (max-width:600px){
  .badge-card.has-badge-spotlight .badge-showcase-item:nth-child(3){display:none!important;}
  .badge-card .badge-showcase-item:nth-child(n+5){display:none!important;}
  .badge-showcase-footer{align-items:stretch;flex-direction:column;}
  .badge-view-all{width:100%;min-height:36px;}
  .badge-showcase-total{text-align:center;}
}

body.badge-gallery-open{overflow:hidden;}
.badge-gallery-overlay{
  position:fixed;
  inset:0;
  z-index:1450;
  display:grid;
  place-items:center;
  padding:22px;
  background:
    radial-gradient(circle at 18% 12%,rgba(63,214,255,.13),transparent 28%),
    radial-gradient(circle at 84% 80%,rgba(194,137,255,.14),transparent 30%),
    rgba(5,37,65,.76);
  backdrop-filter:blur(11px) saturate(120%);
  -webkit-backdrop-filter:blur(11px) saturate(120%);
  opacity:0;
  transition:opacity .16s ease;
}
.badge-gallery-overlay.is-open{opacity:1;}
.badge-gallery-overlay.is-closing{opacity:0;}
.badge-gallery-dialog{
  width:min(900px,94vw);
  max-height:min(820px,90dvh);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(255,255,255,.76);
  border-radius:34px;
  color:#163654;
  background:
    radial-gradient(circle at 0 0,rgba(184,241,255,.50),transparent 34%),
    radial-gradient(circle at 100% 100%,rgba(225,207,255,.46),transparent 35%),
    linear-gradient(145deg,rgba(247,253,255,.96),rgba(231,246,255,.95));
  box-shadow:0 34px 100px rgba(0,26,55,.38),inset 0 1px 0 rgba(255,255,255,.96);
  transform:translateY(10px) scale(.985);
  transition:transform .18s ease;
}
.badge-gallery-overlay.is-open .badge-gallery-dialog{transform:none;}
.badge-gallery-top{
  flex:0 0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:24px 26px 18px;
  border-bottom:1px solid rgba(39,111,169,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,.12));
}
.badge-gallery-heading{display:flex;align-items:center;gap:14px;min-width:0;}
.badge-gallery-icon{
  flex:0 0 auto;
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:19px;
  font-size:29px;
  background:linear-gradient(145deg,#fff9c7,#ffd979 50%,#ffb55f);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 11px 25px rgba(218,154,51,.18),inset 0 2px 0 rgba(255,255,255,.76);
}
.badge-gallery-kicker{
  display:block;
  margin-bottom:3px;
  color:#4d84ad;
  font-size:9px;
  font-weight:950;
  letter-spacing:.13em;
}
.badge-gallery-heading h2{margin:0;font-size:28px;line-height:1.05;color:#173a59;}
.badge-gallery-heading p{margin:5px 0 0;color:#658098;font-size:12px;}
.badge-gallery-close{
  flex:0 0 auto;
  width:44px;
  height:44px;
  border:1px solid rgba(67,128,178,.13);
  border-radius:16px;
  background:rgba(255,255,255,.62);
  color:#5c7690;
  font-size:25px;
  line-height:1;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.badge-gallery-close:hover,.badge-gallery-close:focus-visible{background:#fff;color:#284f70;outline:none;}
.badge-gallery-body{
  min-height:0;
  overflow:auto;
  padding:20px 24px 28px;
  overscroll-behavior:contain;
}
.badge-gallery-section + .badge-gallery-section{margin-top:22px;}
.badge-gallery-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 2px 9px;
}
.badge-gallery-section-head h3{margin:0;color:#244e70;font-size:14px;}
.badge-gallery-section-head span{
  padding:4px 8px;
  border-radius:999px;
  color:#6d8295;
  background:rgba(255,255,255,.48);
  font-size:9px;
  font-weight:850;
}
.badge-gallery-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;
}
.badge-gallery-card{
  min-width:0;
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:12px;
  align-items:center;
  padding:13px 14px;
  border:1px solid rgba(64,133,189,.14);
  border-radius:19px;
  background:rgba(255,255,255,.62);
  box-shadow:0 8px 20px rgba(32,91,137,.05),inset 0 1px 0 rgba(255,255,255,.86);
}
.badge-gallery-card.rarity-rare{border-color:rgba(243,174,64,.28);background:linear-gradient(145deg,rgba(255,255,255,.70),rgba(255,245,213,.62));}
.badge-gallery-card.rarity-legendary{border-color:rgba(171,117,232,.28);background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(242,230,255,.68));}
.badge-gallery-emblem{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:17px;
  font-size:27px;
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(224,245,255,.88));
  border:1px solid rgba(255,255,255,.90);
  box-shadow:0 7px 16px rgba(44,112,163,.08);
}
.badge-gallery-card-copy{min-width:0;}
.badge-gallery-card-copy strong{display:block;color:#1763ad;font-size:13px;line-height:1.2;}
.badge-gallery-card-copy p{margin:3px 0;color:#627d94;font-size:10px;line-height:1.35;}
.badge-gallery-card-copy small{display:block;margin-top:5px;color:#8b6f43;font-size:8.5px;font-weight:850;line-height:1.25;}

@media(max-width:720px){
  .badge-gallery-overlay{padding:8px;place-items:end center;}
  .badge-gallery-dialog{width:100%;max-height:91dvh;border-radius:28px 28px 16px 16px;}
  .badge-gallery-top{padding:18px 17px 14px;}
  .badge-gallery-icon{width:50px;height:50px;border-radius:16px;font-size:25px;}
  .badge-gallery-heading h2{font-size:23px;}
  .badge-gallery-heading p{font-size:10px;}
  .badge-gallery-close{width:40px;height:40px;border-radius:14px;}
  .badge-gallery-body{padding:16px 14px 24px;}
  .badge-gallery-grid{grid-template-columns:1fr;gap:8px;}
  .badge-gallery-card{grid-template-columns:46px minmax(0,1fr);padding:11px 12px;}
  .badge-gallery-emblem{width:44px;height:44px;border-radius:14px;font-size:23px;}
}

@media(prefers-reduced-motion:reduce){
  .badge-showcase-item,.badge-view-all,.badge-gallery-overlay,.badge-gallery-dialog{transition:none!important;}
}


/* guided-setup.css */
/* UbayBian v0.5.91 · guided Subject → Session → Start flow */
.controls-panel.learning-deck{
  --guided-cyan:#61e6ff;
  --guided-gold:#ffd766;
  --guided-green:#62e6b2;
}
.controls-panel.learning-deck .deck-control{
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease,opacity .18s ease,transform .18s ease;
}
.controls-panel.learning-deck .deck-control.guided-focus{
  border-color:rgba(100,226,255,.72)!important;
  box-shadow:0 0 0 2px rgba(70,213,255,.14),0 10px 28px rgba(17,172,230,.12),inset 0 1px 0 rgba(255,255,255,.08)!important;
  background:
    radial-gradient(circle at 7% 20%,rgba(87,230,255,.10),transparent 28%),
    rgba(27,63,108,.78)!important;
  animation:guidedPulse 2.2s ease-in-out infinite;
}
.controls-panel.learning-deck .deck-control.guided-locked{
  opacity:.52;
  filter:saturate(.72);
}
.controls-panel.learning-deck .deck-control.guided-locked .deck-trigger{
  cursor:not-allowed;
}
.controls-panel.learning-deck .deck-control.guided-locked .deck-trigger-chevron{
  opacity:.35;
}
.controls-panel.learning-deck .deck-trigger-value{
  transition:color .16s ease,opacity .16s ease;
}
.controls-panel.learning-deck.guided-step-subject .deck-control-subject .deck-trigger-value,
.controls-panel.learning-deck.guided-step-session .deck-control-questions .deck-trigger-value{
  color:#d8f8ff!important;
  opacity:.86;
}
.controls-panel.learning-deck .learning-deck-status-chip{
  min-width:154px;
  justify-content:center;
  text-align:center;
  transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.controls-panel.learning-deck[data-guided-step="1"] .learning-deck-status-chip{
  color:#d7f7ff;
  background:rgba(25,98,142,.66);
  border-color:rgba(94,222,255,.30);
}
.controls-panel.learning-deck[data-guided-step="2"] .learning-deck-status-chip{
  color:#fff2c0;
  background:rgba(117,88,29,.46);
  border-color:rgba(255,215,102,.30);
}
.controls-panel.learning-deck[data-guided-step="ready"] .learning-deck-status-chip{
  color:#cbffec;
  background:rgba(17,103,77,.58);
  border-color:rgba(98,230,178,.34);
  box-shadow:0 0 18px rgba(57,226,164,.09);
}
.controls-panel.learning-deck .start-btn.guided-disabled{
  cursor:not-allowed!important;
  color:rgba(255,255,255,.62)!important;
  background:linear-gradient(135deg,rgba(104,132,158,.72),rgba(82,103,133,.72))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important;
  transform:none!important;
  filter:saturate(.65);
}
.controls-panel.learning-deck .start-btn.guided-disabled:hover{
  transform:none!important;
}
.controls-panel.learning-deck.guided-ready .start-btn{
  box-shadow:0 10px 25px rgba(255,98,105,.20),inset 0 1px 0 rgba(255,255,255,.22);
}
.guided-setup-hint{
  flex:1 1 100%;
  margin:3px 2px 0!important;
  min-height:16px;
  color:rgba(214,235,255,.62);
  font-size:9.5px!important;
  font-weight:760;
  line-height:1.35;
  letter-spacing:.01em;
  transition:color .18s ease;
}
.controls-panel.learning-deck.guided-step-subject .guided-setup-hint{color:#bcefff;}
.controls-panel.learning-deck.guided-step-session .guided-setup-hint{color:#ffe7a1;}
.controls-panel.learning-deck.guided-ready .guided-setup-hint{color:#b9f6dc;}
.learning-deck-rules,.rules-strip{
  transition:opacity .18s ease,filter .18s ease,transform .18s ease;
}
.learning-deck-rules.guided-rules-muted,.rules-strip.guided-rules-muted{
  opacity:.48;
  filter:saturate(.65);
}

@keyframes guidedPulse{
  0%,100%{transform:translateY(0);box-shadow:0 0 0 2px rgba(70,213,255,.10),0 8px 24px rgba(17,172,230,.08),inset 0 1px 0 rgba(255,255,255,.08)}
  50%{transform:translateY(-1px);box-shadow:0 0 0 3px rgba(70,213,255,.18),0 13px 30px rgba(17,172,230,.15),inset 0 1px 0 rgba(255,255,255,.10)}
}

@media(max-width:900px){
  .controls-panel.learning-deck .learning-deck-status-chip{min-width:0;}
  .guided-setup-hint{font-size:9px!important;}
}
@media(max-width:600px){
  .guided-setup-hint{text-align:center;margin-top:6px!important;}
  .controls-panel.learning-deck .learning-deck-status-chip{font-size:8px!important;letter-spacing:.05em;}
}
@media(prefers-reduced-motion:reduce){
  .controls-panel.learning-deck .deck-control.guided-focus{animation:none!important;}
}

/* v0.5.1d: only server-confirmed learning availability can display Ready. */
.controls-panel.learning-deck[data-guided-step="unavailable"] .learning-deck-status-chip{
  color:#ffe6b3;background:rgba(120,70,26,.52);border-color:rgba(255,192,91,.4);
  box-shadow:none;
}
.controls-panel.learning-deck.learning-content-unavailable .guided-setup-hint{
  color:#ffe2aa;font-size:11px!important;max-width:720px;line-height:1.5;
}
.controls-panel.learning-deck.learning-content-unavailable .learning-deck-rules,
.controls-panel.learning-deck.learning-content-unavailable .rules-strip{opacity:.55;}


/* login-living-world.css */
/* Login storybook composition: preserve the native form and illustrations; calibrate desktop logo/robot only. */
body.login-gateway{margin:0;padding:0;min-height:100vh;min-height:100dvh;background:#d9f2ed;color:#10285e}
body.login-gateway .shell{display:block;margin:0;min-height:100vh;min-height:100dvh;width:100%;max-width:none;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;overflow:visible}
body.login-gateway footer{display:none}
body.login-gateway main{min-height:0;display:block;isolation:auto;padding:0;margin:0;border-radius:0;background:none;overflow:visible}
body.login-gateway main::before,body.login-gateway main::after{display:none}
body.login-gateway .nalaroo-auth-wrap{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;min-height:100vh;min-height:100dvh;padding:max(12px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background:#c5ecd9}
body.login-gateway .living-world-background{position:absolute;z-index:0;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center top;pointer-events:none}
body.login-gateway .living-world-hero{position:relative;z-index:1;width:100%;max-width:600px;min-height:230px;flex:1;isolation:isolate}
body.login-gateway .living-world-identity{position:absolute;top:-30px;left:50%;width:clamp(215px,62vw,300px);transform:translateX(-50%);text-align:center;z-index:1}
body.login-gateway .living-world-logo{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 5px #124d7840)}
body.login-gateway .living-world-robot{position:absolute;z-index:0;bottom:-80px;left:5%;display:block;width:clamp(240px,66vw,320px);height:auto;object-fit:contain;pointer-events:none}
body.login-gateway .nalaroo-auth-card{box-sizing:border-box;position:relative;z-index:2;display:flex;flex:none;flex-direction:column;gap:12px;width:100%;max-width:580px;margin:0 auto;padding:24px 20px 22px;border:2px solid #fff;border-radius:32px;background:#fcfefff5;box-shadow:0 10px 28px #246c8530;text-align:center;color:#10285e;font-family:ui-rounded,'Trebuchet MS',system-ui,sans-serif}
body.login-gateway .nalaroo-auth-card h1{margin:0;color:#071e58;font-size:clamp(28px,7.3vw,36px);line-height:1.18;font-weight:900;letter-spacing:-.8px}
body.login-gateway .nalaroo-auth-note{margin:0 0 3px;opacity:1;color:#3f5579;font-size:15px;line-height:1.45}
body.login-gateway .nalaroo-auth-google,body.login-gateway .auth-email-choice{box-sizing:border-box;display:grid;grid-template-columns:26px 1fr 15px;align-items:center;gap:10px;width:100%;min-height:54px;padding:12px 16px;border-radius:20px;border:2px solid #cbdcf0;background:#fff;color:#12306a;font:700 16px/1.3 ui-rounded,'Trebuchet MS',system-ui,sans-serif;cursor:pointer;box-shadow:0 3px 0 #b7d1ea30}
body.login-gateway .nalaroo-auth-google{grid-template-columns:24px 1fr 24px;color:#1f1f1f;border:1px solid #747775;font-family:Arial,system-ui,sans-serif;font-weight:500;box-shadow:0 3px 8px #174e7d18}
body.login-gateway .nalaroo-auth-google img{display:block;box-sizing:content-box;background:#fff;padding:0;margin:0;width:24px;height:24px;object-fit:contain}
body.login-gateway .auth-mail-icon{display:block;width:24px;height:18px;border:2px solid #1277f4;border-radius:4px;font-size:0;position:relative}
body.login-gateway .auth-mail-icon::after{content:'';position:absolute;width:13px;height:13px;left:3px;top:-6px;border-right:2px solid #1277f4;border-bottom:2px solid #1277f4;transform:rotate(45deg)}
body.login-gateway .auth-chevron{font:28px/1 system-ui,sans-serif}
body.login-gateway .auth-signup{border-top:1px solid #d7e5f3;padding-top:13px;margin:0;color:#3f5579;font-size:14px;line-height:1.8}
body.login-gateway .auth-text-link{border:0;padding:0;background:none;color:#005ec6;text-decoration:underline;text-underline-offset:3px;font:inherit;font-weight:700;cursor:pointer;min-height:32px}
body.login-gateway .auth-family-note{margin:0;padding:10px 12px;border-radius:24px;background:#eaf5ff;color:#354e73;font-size:14px;line-height:1.5}
body.login-gateway .nalaroo-auth-status{font-size:14px;line-height:1.45;min-height:0;color:#a1283e;overflow-wrap:anywhere}
body.login-gateway .nalaroo-auth-status:empty{display:none}
body.login-gateway .nalaroo-auth-field{text-align:left;color:#24436f;font-size:14px;gap:7px}
body.login-gateway .nalaroo-auth-field input{box-sizing:border-box;border:1px solid #adc5df;border-radius:14px;background:white;color:#10285e;min-height:50px;padding:12px 14px;font:16px/1.4 system-ui,sans-serif;scroll-margin-block:24px}
body.login-gateway .nalaroo-auth-form{gap:14px}
body.login-gateway .nalaroo-auth-card .primary{border:0;border-radius:15px;background:#0865d8;color:white;min-height:50px;padding:12px;font:700 16px/1.4 system-ui,sans-serif;cursor:pointer}
body.login-gateway .nalaroo-auth-tabs{gap:10px}
body.login-gateway .nalaroo-auth-tabs button{border-color:#c4d8ed;color:#315279;font-size:14px;min-height:44px}
body.login-gateway .nalaroo-auth-tabs button.selected{background:#e7f3ff;border-color:#84bafa;color:#0066d9}
body.login-gateway .nalaroo-auth-card .quiet{border:0;background:transparent;color:#0066d9;min-height:44px;font:600 14px system-ui,sans-serif;cursor:pointer}
body.login-gateway .auth-back{align-self:flex-start;font-size:14px}
body.login-gateway .nalaroo-consent{text-align:left;color:#476085}
body.login-gateway .nalaroo-consent input{flex:none;width:20px;height:20px;accent-color:#1277ee}
body.login-gateway button:focus-visible,body.login-gateway input:focus-visible{outline:3px solid #064caf;outline-offset:4px}
body.login-gateway button:disabled{opacity:.65;cursor:wait}
body.login-gateway .nalaroo-auth-card button:hover:not(:disabled){filter:brightness(.97)}
@media(min-width:700px){body.login-gateway .nalaroo-auth-card{padding:28px 36px;gap:16px}body.login-gateway .nalaroo-auth-note{font-size:17px}body.login-gateway .living-world-hero{min-height:300px}body.login-gateway .living-world-identity{width:320px}body.login-gateway .living-world-robot{width:350px;left:12%;bottom:-150px}}
@media(min-width:1000px){body.login-gateway .nalaroo-auth-wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(360px,.9fr);align-content:center;align-items:stretch;gap:0;padding:48px max(36px,calc((100vw - 1340px)/2));background:radial-gradient(ellipse at 15% 15%,#c3efff,transparent 65%),linear-gradient(140deg,#dcf4ff,#e7f4d9)}body.login-gateway .living-world-background{display:none}body.login-gateway .living-world-hero{max-width:none;min-height:590px;overflow:hidden;border-radius:36px 0 0 36px;background:#45baff url('assets/world/nalaroo-world-portrait.webp') center top/cover;box-shadow:0 22px 65px #477da329}body.login-gateway .living-world-identity{width:60%;top:-30px}body.login-gateway .living-world-robot{width:70%;left:2%;bottom:-135px}body.login-gateway .nalaroo-auth-card{justify-content:center;max-width:none;width:100%;margin:0;padding:36px;border-radius:0 36px 36px 0;border:0;box-shadow:12px 22px 65px #477da329}body.login-gateway .nalaroo-auth-card h1{font-size:36px}body.login-gateway .nalaroo-auth-card[data-auth-mode=signup]{padding-block:28px}}
@media(max-width:999px) and (orientation:landscape){body.login-gateway .nalaroo-auth-wrap{min-height:100dvh}body.login-gateway .living-world-hero{min-height:260px}body.login-gateway .nalaroo-auth-card{max-width:580px}}
@media(prefers-reduced-motion:no-preference){body.login-gateway .nalaroo-auth-card{animation:auth-appear .18s ease-out}@keyframes auth-appear{from{opacity:.6;transform:translateY(5px)}to{opacity:1;transform:none}}}


/* family-menu.css */
/* Reuse existing account and router actions without the retired header. */
.family-menu{position:fixed;z-index:160;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));max-width:calc(100vw - 32px);color:#17335d;font:600 15px/1.4 system-ui,sans-serif}
.family-menu>summary{display:block;list-style:none;cursor:pointer;padding:13px 19px;border:2px solid #fff;border-radius:999px;background:#fff;box-shadow:0 5px 24px #052c6150;min-height:48px}
.family-menu>summary::-webkit-details-marker{display:none}
.family-menu[open]>summary{background:#123c72;color:white}
.family-menu-panel{position:absolute;right:0;bottom:calc(100% + 10px);display:grid;gap:6px;min-width:220px;padding:12px;border-radius:20px;border:1px solid #cad9ec;background:#fff;box-shadow:0 12px 36px #052c6140;max-height:calc(100dvh - 120px);overflow-y:auto}
.family-menu-nav{display:grid;gap:6px}
.family-menu-panel button{display:block;width:100%;min-height:46px;border:0;border-radius:12px;padding:11px 14px;background:#edf4fc;color:#17335d;font:600 15px/1.4 system-ui,sans-serif;text-align:left;cursor:pointer}
.family-menu-panel button.active{background:#d8eaff;color:#064daa}
.family-menu-panel .family-menu-logout{margin:0;color:#9c2741;background:#fff1f3}
.family-menu :focus-visible{outline:3px solid #126ed4;outline-offset:3px}
body.login-gateway .family-menu{display:none}
body:not(.login-gateway) .shell{grid-template-rows:minmax(0,1fr) auto!important;padding-bottom:76px}


/* free-plus-experience.css */
/* NALAROO — Membership Panel Compact Refinement v1.2.
   Parent-only storybook UI; no new imagery, system emoji or ambient effects. */
.family-plan-dialog{
 box-sizing:border-box;width:min(730px,calc(100vw - 24px));
 max-width:730px;max-height:min(92dvh,740px);padding:0;
 border:2px solid #cdb58f;border-radius:26px;
 background:#fff9ee;color:#3b5846;
 font:650 14px/1.5 Nunito,system-ui,sans-serif;
 box-shadow:0 20px 65px #304c3960;
}
.family-plan-dialog[open]{
 display:grid;grid-template-rows:auto minmax(0,1fr) auto;
 overflow:hidden;
}
.family-plan-dialog::backdrop{background:#1f393a70;backdrop-filter:blur(4px)}
/* Header and action bar are separate grid rows: never scroll out of reach. */
.family-plan-header{
 display:flex;justify-content:space-between;align-items:center;
 gap:14px;padding:15px 22px;background:#e8f1e3;
 border-bottom:1px solid #d0dcbf;z-index:2;
}
.family-plan-kicker{
 display:block;font-size:10px;font-weight:900;
 letter-spacing:.09em;color:#70815e;
}
.family-plan-header h2{
 margin:2px 0 0;font-size:clamp(21px,2.5vw,27px);
 line-height:1.2;color:#35584b;
}
.family-plan-close{
 min-height:44px;min-width:55px;flex:0 0 auto;
 border-radius:13px;border:1px solid #d9c7ad;
 background:#fff9ee;color:#45624d;
 font:800 13px Nunito,system-ui;cursor:pointer;
}
.family-plan-body{
 min-height:0;overflow-y:auto;overscroll-behavior:contain;
 padding:17px 22px 13px;display:grid;gap:12px;
 scrollbar-width:thin;scrollbar-color:#a5b9a0 transparent;
}
.family-plan-current{
 display:flex;align-items:center;min-height:68px;
 background:#e8f1e3;border:1px solid #c6d6bb;
 border-radius:16px;padding:10px 15px;
}
.family-plan-current-copy{display:grid;gap:0}
.family-plan-current small{color:#637a62;font-size:11px;font-weight:850}
.family-plan-current strong{
 color:#345d46;font-weight:950;
 font-size:clamp(19px,2.2vw,23px);line-height:1.3;
}
.family-plan-current p{font-size:12px;line-height:1.45;margin:1px 0 0;color:#506b54}
.family-plan-section-title{
 color:#3b5947;font-size:15px;font-weight:900;
 margin:0;padding:0;
}
.family-plan-compare{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
 gap:11px;align-items:stretch;
}
.family-plan-tier{
 box-sizing:border-box;min-width:0;min-height:0;
 background:#f3efe5;border:1px solid #d8ceb9;
 border-radius:17px;padding:13px 15px;
 display:flex;flex-direction:column;gap:0;
}
.family-plan-tier-plus{
 background:#ddebd5;border:2px solid #739b7e;
 padding:12px 14px;
}
.family-plan-tier-heading{
 display:flex;align-items:center;justify-content:space-between;
 gap:6px;min-height:25px;
}
.family-plan-tier h3{font-size:16px;line-height:1.2;font-weight:950;color:#506950;margin:0}
.family-plan-tier-plus h3{color:#2f6343}
.family-plan-active-mark{
 flex-shrink:0;padding:3px 9px;border-radius:999px;
 border:1px solid #9fbba0;background:#f9f9ee;
 color:#386a4c;font-size:10px;font-weight:900;line-height:1.2;
}
.family-plan-price{
 display:flex;flex-direction:column;align-items:flex-start;
 gap:1px;margin:5px 0 8px;
}
.family-plan-price strong{
 font-size:clamp(25px,2.7vw,32px);
 font-weight:950;line-height:1.1;letter-spacing:-.025em;
 color:#485e49;
}
.family-plan-price-plus strong{color:#265c3e;font-size:clamp(29px,3vw,35px)}
.family-plan-price span{
 font-size:11px;line-height:1.4;color:#5f7560;font-weight:800;
}
.family-plan-benefits{
 display:grid;gap:6px;margin:0;
 padding:0;list-style:none;line-height:1.35;
}
.family-plan-benefits li{
 position:relative;padding:0 0 0 12px;font-size:12.5px;
 color:#385945;font-weight:800;
}
.family-plan-benefits li:before{
 content:'';position:absolute;left:0;top:.54em;
 width:4px;height:4px;border-radius:50%;background:#728f73;
}
.family-plan-tier-plus .family-plan-benefits li:before{background:#4f795b}
.family-plan-footnote,.family-plan-activation-note{
 font-size:11px;line-height:1.45;color:#526b57;margin:0;
}
.family-plan-activation-note{font-size:11px}
/* Dedicated action area: no bare footer element, no inherited site footer rules. */
.family-plan-dialog > .family-plan-footer{
 box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr);
 justify-items:stretch;align-items:stretch;min-width:0;width:100%;
 gap:7px;padding:13px 22px 14px;margin:0;
 background:#f5f0e5;color:#3d604e;border-top:1px solid #d7c8ae;
 opacity:1;filter:none;z-index:2;
}
.family-plan-footer-title{font-size:15px;line-height:1.3;color:#3f634e;font-weight:900}
.family-plan-dialog .family-plan-contact{
 box-sizing:border-box;display:block;justify-self:stretch;
 width:100%;max-width:none;min-width:0;min-height:48px;
 margin:0;padding:11px 16px;
 border:1px solid #416e4e;border-radius:14px;
 background:#4f795b;color:#fffaf0;text-align:center;
 font:900 15px/1.3 Nunito,system-ui;cursor:pointer;
 box-shadow:0 3px 0 #2e583e;
}
.family-plan-dialog .family-plan-contact:hover{background:#416d4f}
.family-plan-footer-note{
 display:block;text-align:center;color:#536b58;
 font-size:11px;font-weight:750;line-height:1.45;
}
.family-plan-unavailable{color:#985b41;font-size:13px;margin:0}
.family-plan-dialog :focus-visible{outline:3px solid #4e8873;outline-offset:3px}
@media(max-width:600px){
 .family-plan-dialog{
  max-height:92dvh;width:calc(100vw - 20px);border-radius:22px;
 }
 .family-plan-header{padding:11px 15px}
 .family-plan-header h2{font-size:21px}
 .family-plan-body{padding:13px 15px 12px;gap:11px}
 .family-plan-compare{grid-template-columns:1fr;gap:9px}
 .family-plan-tier{padding:12px 14px}
 .family-plan-tier-plus{padding:11px 13px}
 .family-plan-price{margin:4px 0 7px}
 .family-plan-price strong{font-size:27px}
 .family-plan-benefits{gap:5px}
 .family-plan-dialog > .family-plan-footer{padding:11px 15px 13px;gap:6px}
 .family-plan-footer-title{font-size:13px}
 .family-plan-contact{min-height:45px;font-size:14px}
 .family-plan-footer-note{font-size:10.5px}
}
@media(max-height:620px){
 .family-plan-dialog{max-height:94dvh}
 .family-plan-header{padding-block:9px}
 .family-plan-dialog > .family-plan-footer{padding-block:9px}
 .family-plan-body{padding-block:10px}
}
/* A disabled Practice should not be the visual primary action when no quota remains. */
.world-learning-dialog .world-free-quota{
 display:grid;gap:10px;border:1.5px solid #d6c49d;background:#fbf3df;
 border-radius:18px;padding:15px;color:#4b674e
}
.world-free-quota>strong{font-size:16px;font-weight:900;line-height:1.35}
.world-learning-dialog .world-free-quota>p{font-size:13px;line-height:1.55;margin:0}
.world-free-review{
 min-height:47px;border:1px solid #86a483;border-radius:13px;background:#dcebd7;
 color:#3a6446;font:900 14px Nunito,system-ui;cursor:pointer
}
.world-free-review:disabled{opacity:.7;background:#f3efe2;color:#7c806e;cursor:default}
.world-free-plus-info{
 border:0;background:transparent;color:#587662;text-decoration:underline;
 padding:10px 4px;min-height:44px;font:800 13px Nunito,system-ui;cursor:pointer
}
.world-learning-dialog .world-chapter-start:disabled{opacity:.45}
.world-playground-card.is-locked{opacity:1!important;filter:none!important;cursor:pointer!important;position:relative}
.world-playground-card.is-locked :is(strong,small){opacity:1!important;color:#526d59!important}
.world-game-plus-tag{
 display:block;font:850 12px Nunito,system-ui;color:#6b744e;
 background:#e6edce;border:1px solid #b7c5a4;padding:6px 12px;border-radius:999px
}
.world-game-info{gap:15px}
.world-game-info>strong{font-size:20px;color:#45694f;line-height:1.3}
.world-game-info p{font-size:15px;line-height:1.6}
.world-game-parent-info{background:#d8e8d0!important;border-color:#9cbe95!important;color:#37614a!important;box-shadow:0 3px 0 #acc6a0!important}
@media(max-width:600px){
 .family-plan-header{padding:17px}
 .family-plan-body{padding:18px 16px 20px;gap:15px}
 .family-plan-compare{grid-template-columns:1fr}
 .family-plan-tier{padding:14px}
}


/* cek-kemampuan.css */
/* Topic-based Cek Kemampuan selector / report, no changes to Explorer Profile. */
.cek-topics-control{display:flex;flex-direction:column;gap:8px;margin:12px 0 16px;color:#173B63;font-weight:700;max-width:100%}
.cek-topics-control[hidden],.exam-timer-box[hidden]{display:none!important}
.cek-topics-control select{width:100%;max-width:100%;padding:12px 14px;border:1px solid #9abbd1;border-radius:14px;background:#f9fdff;color:#173B63;font:inherit;white-space:normal}
.cek-topics-control select:focus-visible{outline:3px solid #397cc5;outline-offset:2px}
.cek-insights{padding:20px;border:1px solid #d0e5e8;border-radius:18px;margin:16px 0;background:#f8fcfb}
.cek-topic-row{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:8px;border-top:1px solid #e1e9ec;padding:12px 0}
.cek-topic-row span{color:#285877}
.cek-insights p{color:#416278;font-size:.92rem;line-height:1.5}


/* explorer-profile.css */
/* Explorer v2.1 chooser, background and Family Menu remain unchanged. */
body.explorer-view{background:#dce9df!important;color:#12385d;padding:0!important;overflow-y:auto!important;height:auto!important}
body.explorer-view::before,body.explorer-view::after{display:none!important}
body.explorer-view .shell{display:block!important;max-width:none!important;width:100%!important;min-height:100dvh;margin:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-radius:0!important}
body.explorer-view #main{display:block!important;width:100%!important;max-width:none!important;min-height:0!important;margin:0!important;padding:0!important;background:transparent!important;overflow:visible!important}
body.explorer-view #main::before,body.explorer-view #main::after,body.explorer-view .shell::before,body.explorer-view .shell::after{display:none!important}
body.explorer-view .shell>footer{display:none!important}
.explorer-backdrop{position:absolute;inset:0;z-index:-2;pointer-events:none;background:url('assets/world/explorer-garden.webp') center/cover no-repeat;filter:saturate(.86) contrast(.95) brightness(1.025)}
body.explorer-view #family-menu>summary{transition:transform 200ms ease,box-shadow 200ms ease,background 200ms ease,border-color 200ms ease}
body.explorer-view #family-menu>summary:active{transform:translateY(0) scale(.99)}
body.explorer-view #family-menu>summary:focus-visible{outline:3px solid #1756bc;outline-offset:4px}
@media(hover:hover) and (pointer:fine){
body.explorer-view #family-menu>summary:hover{transform:translateY(-2px);background:#f5fbff;border-color:#b8d3e5;box-shadow:0 6px 16px #23405e33}
body.explorer-view #family-menu[open]>summary:hover{background:#184a80;color:#fff}
body.explorer-view #family-menu>summary:active{transform:translateY(0) scale(.99)}
}
@media(prefers-reduced-motion:reduce){
body.explorer-view #family-menu>summary{transition:none!important;animation:none!important;transform:none!important}
}
.explorer-family-status{margin:4px 0 10px;padding:4px 8px;font:500 13px/1.5 system-ui,sans-serif;color:#536578;overflow-wrap:anywhere}
body.explorer-view .family-menu{position:absolute;top:max(16px,env(safe-area-inset-top));bottom:auto;left:auto;right:max(20px,env(safe-area-inset-right));z-index:170}
body.explorer-view .family-menu>summary{border:1px solid #e2edf1;box-shadow:0 4px 14px #23405e1f;font-size:14px;padding:13px 18px;min-height:48px}
body.explorer-view .family-menu-panel{top:calc(100% + 10px);bottom:auto;left:auto;right:0;width:260px;min-width:0;max-width:calc(100vw - 32px)}
@media(max-width:900px){
.explorer-backdrop{background-image:url('assets/world/explorer-garden-portrait.webp')}
body.explorer-view .family-menu{top:max(12px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right))}
}
.explorer-family-tools{display:none}
body.explorer-view .explorer-family-tools{display:block}
@media(max-width:900px){
body.explorer-view .family-menu{top:calc(10px + env(safe-area-inset-top))}
body.explorer-view .family-menu>summary{font-size:13px;min-height:44px;padding:11px 15px}
}
.explorer-backdrop{
  filter:saturate(.79) contrast(.93) brightness(1.045);
}
body.explorer-view #family-menu{
  --explorer-ivory:#fff9ed;
  --explorer-cream:#f6ebd8;
  --explorer-ink:#244665;
  --explorer-outline:#ad9275;
}
body.explorer-view #family-menu>summary{
  background:var(--explorer-ivory);
  color:var(--explorer-ink);
  border:1.5px solid var(--explorer-outline);
  border-radius:17px 19px 16px 18px;
  box-shadow:0 3px 0 rgba(154,118,83,.23),0 7px 15px rgba(76,55,36,.15);
}
body.explorer-view #family-menu[open]>summary{
  background:#f1e4cb;color:var(--explorer-ink);
}
body.explorer-view #family-menu .family-menu-panel{
  background:var(--explorer-ivory);
  border:1.5px solid var(--explorer-outline);
  border-radius:20px 22px 19px 21px;
  box-shadow:0 3px 0 rgba(154,118,83,.20),0 12px 27px rgba(76,55,36,.21);
}
body.explorer-view #family-menu .family-menu-panel button{
  background:#f9efdf;
  color:var(--explorer-ink);
  border:1px solid rgba(173,146,117,.22);
  border-radius:12px 14px 12px 13px;
}
body.explorer-view #family-menu .family-menu-panel button.active{background:var(--explorer-sky)}
body.explorer-view #family-menu .family-menu-panel .family-menu-logout{
  background:#fbe9e8;
  color:#9e3f4d;
}
body.explorer-view #family-menu :focus-visible{outline:3px solid #315e89;outline-offset:2px}
@media(hover:hover) and (pointer:fine){
body.explorer-view #family-menu>summary:hover{
    background:#f4e7d1;
    border-color:#ad9275;
    box-shadow:0 3px 0 rgba(154,118,83,.2),0 7px 15px rgba(76,55,36,.2);
  }
body.explorer-view #family-menu[open]>summary:hover{background:#f1e4cb;color:#244665}
body.explorer-view #family-menu .family-menu-panel button:hover{background:#efe1ca}
body.explorer-view #family-menu .family-menu-panel button.active:hover{background:#c8e2ef}
body.explorer-view #family-menu .family-menu-panel .family-menu-logout:hover{background:#f5d9d7}
}
@media(prefers-reduced-motion:reduce){
body.explorer-view #family-menu>summary,body.explorer-view #family-menu .family-menu-panel button{transition:none!important}
}
body.explorer-view #family-menu .family-menu-panel{
  width:min(316px,calc(100vw - 28px));
  max-width:calc(100vw - 28px);
  min-width:0;
  padding:14px;
  gap:12px;
  border-radius:21px 23px 20px 22px;
  max-height:calc(100dvh - 90px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y:auto;
  color:#244665;
}
body.explorer-view #family-menu .explorer-family-tools{
  display:grid;
  gap:9px;
  font:500 14px/1.4 ui-rounded,'Trebuchet MS',system-ui,sans-serif;
  color:#244665;
}
body.explorer-view #family-menu .explorer-family-heading{
  display:flex;
  align-items:center;
  gap:10px;
  padding:2px 0 11px;
  border-bottom:1px solid #e6d4b9;
}
body.explorer-view #family-menu .explorer-family-mark{
  flex:0 0 42px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid #d6bb93;
  border-radius:13px 15px 12px 14px;
  background:#f2e3c9;
  color:#a46d2f;
  font:700 25px/1 system-ui,sans-serif;
  box-shadow:0 2px 0 #b48c5d2b;
}
body.explorer-view #family-menu .explorer-family-heading-text{min-width:0}
body.explorer-view #family-menu .explorer-family-heading h2{
  margin:0;
  color:#244665;
  font:800 19px/1.15 ui-rounded,'Trebuchet MS',system-ui,sans-serif;
  letter-spacing:-.02em;
}
body.explorer-view #family-menu .explorer-family-heading p{
  margin:4px 0 0;
  color:#62748a;
  font:500 12px/1.35 system-ui,sans-serif;
}
body.explorer-view #family-menu .explorer-family-plan,body.explorer-view #family-menu .explorer-family-quota{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
body.explorer-view #family-menu .explorer-family-plan{margin-top:3px}
body.explorer-view #family-menu .explorer-family-plan-badge{
  flex-shrink:0;
  display:inline-flex;
  min-width:57px;
  justify-content:center;
  align-items:center;
  padding:4px 12px;
  border:1px solid #d2dfdf;
  border-radius:999px;
  background:#e2f0ed;
  color:#315b65;
  font:800 12px/1.2 system-ui,sans-serif;
}
body.explorer-view #family-menu .explorer-family-quota strong{
  color:#244665;
  font-weight:800;
  white-space:nowrap;
}
body.explorer-view #family-menu .explorer-family-meter{
  position:relative;
  display:block;
  overflow:hidden;
  height:8px;
  border-radius:999px;
  background:#e7e5de;
  border:1px solid #d5dacd;
}
body.explorer-view #family-menu .explorer-family-meter-fill{
  display:block;
  height:100%;
  border-radius:999px;
  background:#87b9cc;
}
body.explorer-view #family-menu .explorer-family-status{
  margin:0;
  padding:0;
  color:#596e82;
  font:500 12px/1.45 system-ui,sans-serif;
}
body.explorer-view #family-menu .explorer-add{
  min-height:44px;
  margin-top:3px;
}
body.explorer-view #family-menu #logout-family{
  min-height:46px;
  background:#fbe9e8;
  color:#9c3f50;
  font-weight:700;
  margin-top:2px;
}
@media(max-width:360px){
body.explorer-view #family-menu .family-menu-panel{
    right:0;
    width:min(302px,calc(100vw - 22px));
    max-width:calc(100vw - 22px);
    padding:12px;
  }
body.explorer-view #family-menu .explorer-family-heading h2{font-size:18px}
}
.explorer-scene{
  --explorer-ivory:#FFF9ED;--explorer-cream:#F8F2E4;--explorer-ink:#244665;
  --explorer-outline:#B7A080;--explorer-sky:#DCE8CF;--explorer-sage:#A4BD9A;
  --explorer-paper-shadow:#765b3c24;
  position:relative;isolation:isolate;box-sizing:border-box;min-height:100dvh;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;
  gap:24px;padding:max(24px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)) max(28px,env(safe-area-inset-left));
  font-family:ui-rounded,'Trebuchet MS',system-ui,sans-serif;color:var(--explorer-ink);
}
.explorer-scene *{box-sizing:border-box}
.explorer-scene::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 38%,rgba(255,250,232,.25) 0%,rgba(255,251,239,.09) 49%,transparent 75%),linear-gradient(180deg,rgba(251,247,228,.055),transparent 42%,rgba(255,240,210,.105))}
.explorer-heading{min-width:0;max-width:100%;justify-self:center;text-align:center;align-self:start}
.explorer-logo{display:block;width:220px;max-width:65vw;height:auto;margin:0 auto 2px}
.explorer-heading h1{
  margin:0 0 8px;font-size:clamp(30px,2.5vw,38px);font-weight:900;line-height:1.15;
  letter-spacing:-.025em;color:#244665;-webkit-text-stroke:1px #FFF9ED;paint-order:stroke fill;
  text-shadow:0 2px 0 #fff9ede6,0 3px 8px #24466526;overflow-wrap:anywhere;
}
.explorer-heading>p{display:inline-block;margin:0;padding:6px 14px;max-width:100%;border:1px solid #B7A080;border-radius:20px 22px 19px 21px;background:#FFF9ED;color:#244665;font-size:15px;line-height:1.4}
.explorer-content{min-width:0;width:100%;align-self:center;justify-self:center}
.explorer-gallery{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:20px;max-width:880px;width:100%;margin:auto}
.explorer-card{flex:0 1 272px;width:272px;min-width:0;max-width:100%;padding:12px;background:#F8F2E4;border:1px solid #B7A080;border-radius:22px 24px 21px 23px;box-shadow:0 5px 14px #765b3c24;cursor:default}
.explorer-start{display:grid;grid-template-rows:auto 1fr auto;gap:8px;width:100%;height:100%;min-width:0;color:#244665;cursor:default}
.explorer-character{min-width:0;height:150px;display:grid;place-items:center;background:#DCE8CF;border:1px solid #A4BD9A;border-radius:15px 17px 14px 16px}
.explorer-card:nth-child(2n) .explorer-character{background:#e9e3d9;border-color:#c6b79e}
.explorer-card:nth-child(3n) .explorer-character{background:#dfe8e4;border-color:#acbfb4}
.explorer-card-avatar{display:block;width:100%;height:100%;min-height:0;object-fit:contain;filter:none}
.explorer-identity{min-width:0;text-align:center;align-self:center}
.explorer-start h2{margin:0 0 5px;color:#244665;font:900 24px/1.15 ui-rounded,'Trebuchet MS',system-ui,sans-serif;letter-spacing:-.02em;overflow-wrap:anywhere}
.explorer-grade{display:inline-block;padding:3px 10px;border:1px solid #A4BD9A;border-radius:999px;background:#DCE8CF;color:#3E5948;font-size:13px;font-weight:700;line-height:1.2}
.explorer-actions{display:grid;gap:4px;min-width:0;align-items:center}
.explorer-play,.explorer-edit{box-sizing:border-box;font-family:inherit;min-width:44px;min-height:44px;line-height:1.2;text-align:center;overflow-wrap:anywhere;cursor:pointer;transition:background-color 160ms ease,transform 160ms ease,box-shadow 160ms ease}
.explorer-play{display:block;width:100%;padding:9px 12px;border:1px solid #3E5948;border-radius:12px 14px 11px 13px;background:#3E5948;color:#FFF9ED;font-size:18px;font-weight:800;text-shadow:none;box-shadow:0 2px 4px #3e59481f}
.explorer-edit{display:block;justify-self:center;width:auto;max-width:100%;padding:9px 14px;margin:0;border:1px solid #B7A080;border-radius:12px 14px 11px 13px;background:#FFF9ED;color:#244665;font-size:14px;font-weight:700;box-shadow:none;text-decoration:none}
.explorer-play:disabled{cursor:not-allowed;background:#687a6b;border-color:#687a6b;color:#FFF9ED}
.explorer-lock-note{margin:4px 0 0;font-size:12px;line-height:1.3;color:#3E5948;overflow-wrap:anywhere}
.explorer-scene :focus-visible{outline:3px solid #3E5948;outline-offset:3px}
@media(hover:hover) and (pointer:fine){
.explorer-play:not(:disabled):hover{background:#324d3b;transform:translateY(-1px);box-shadow:0 3px 7px #3e59482b}
.explorer-edit:hover{background:#eee5d4;transform:translateY(-1px);box-shadow:0 2px 5px #765b3c1f}
}
.explorer-play:not(:disabled):active,.explorer-edit:active{transform:translateY(0) scale(.99);box-shadow:inset 0 2px 3px #3e594826}
.explorer-scene .explorer-guide{display:none!important}
@media(max-width:700px){
.explorer-scene{gap:12px;padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.explorer-logo{width:170px;max-width:calc(100vw - 150px);margin-bottom:0}
.explorer-heading{width:100%}
.explorer-heading h1{font-size:clamp(24px,6.7vw,28px);margin:0;line-height:1.2}
.explorer-heading>p{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.explorer-content{align-self:start;margin-top:12px}
.explorer-gallery{flex-direction:column;align-items:stretch;gap:10px;max-width:430px}
.explorer-card{flex:none;width:100%;padding:10px;border-radius:19px 21px 18px 20px}
.explorer-start{grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto;gap:7px 12px;align-items:center}
.explorer-character{grid-column:1;grid-row:1 / 3;height:112px;align-self:stretch}
.explorer-identity{grid-column:2;grid-row:1;text-align:left;align-self:end}
.explorer-start h2{font-size:21px;margin-bottom:4px}
.explorer-grade{font-size:12px;padding:3px 9px}
.explorer-actions{grid-column:2;grid-row:2;grid-template-columns:minmax(72px,1fr) auto;gap:6px;align-self:start}
.explorer-play{font-size:16px;padding:9px 8px}
.explorer-edit{font-size:13px;padding:9px 10px;justify-self:stretch}
}
@media(max-width:374px){
.explorer-start{grid-template-columns:88px minmax(0,1fr);column-gap:10px}
.explorer-start h2{font-size:20px}
.explorer-edit{padding-inline:7px}
}
@media(orientation:landscape) and (max-height:600px) and (min-width:740px){
.explorer-scene{gap:10px;padding:max(8px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
.explorer-logo{width:115px;margin:0 auto}
.explorer-heading h1{font-size:24px;margin:0}
.explorer-heading>p{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.explorer-gallery{flex-wrap:nowrap;gap:12px;max-width:820px}
.explorer-card{flex:1 1 0;width:auto;padding:10px}
.explorer-start{gap:6px}
.explorer-character{height:106px}
.explorer-start h2{font-size:20px}
.explorer-actions{grid-template-columns:minmax(72px,1fr) auto;gap:6px}
.explorer-play{font-size:16px;padding-inline:8px}
.explorer-edit{font-size:13px;padding-inline:9px;justify-self:stretch}
}
@media(prefers-reduced-motion:reduce){
.explorer-scene *{transition:none!important;animation:none!important;scroll-behavior:auto!important;transform:none!important}
}

/* v2.2 — one visual editor, separate update/create workflows.
   All overrides are form-only; the v2.1 chooser is unchanged. */
.explorer-creating{gap:14px}
.explorer-creating .explorer-content{align-self:start;margin-top:0}
.explorer-creating .explorer-logo{width:160px}
.explorer-creating .explorer-heading h1{font-size:30px;margin-bottom:6px}
.explorer-creating .explorer-heading>p{font-size:14px;padding:5px 12px}
.explorer-form{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  grid-template-areas:'details avatars' 'actions actions' 'status status';
  align-items:start;column-gap:24px;row-gap:16px;width:100%;max-width:780px;
  margin:0 auto;padding:20px;border:1px solid #B7A080;border-radius:22px 24px 21px 23px;
  background:#F8F2E4;color:#244665;box-shadow:0 5px 16px #765b3c26;text-align:left;
}
.explorer-editor-details{grid-area:details;display:grid;gap:14px;min-width:0}
.explorer-editor-field{display:grid;gap:6px;min-width:0}
.explorer-editor-field>label,.explorer-avatar-picker legend{font:800 16px/1.3 ui-rounded,'Trebuchet MS',system-ui,sans-serif;color:#244665}
.explorer-form input:not([type=radio]),.explorer-form select{
  display:block;box-sizing:border-box;width:100%;min-width:0;min-height:44px;margin:0;
  padding:10px 12px;border:1px solid #B7A080;border-radius:12px 14px 11px 13px;
  background:#FFF9ED;color:#244665;font:500 16px/1.35 ui-rounded,'Trebuchet MS',system-ui,sans-serif;
  scroll-margin-block:20px;
}
.explorer-grade-note{display:grid;justify-items:start;gap:8px;margin:0}
.explorer-editor-note{margin:0;color:#3E5948;font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.explorer-avatar-picker{grid-area:avatars;min-width:0;border:0;padding:0;margin:0}
.explorer-avatar-picker legend{padding:0;margin:0 0 8px}
.explorer-avatar-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.explorer-avatar-choice{position:relative;display:block;min-width:44px;min-height:44px;aspect-ratio:1;cursor:pointer;border:1px solid #B7A080;border-radius:13px 15px 12px 14px;background:#DCE8CF}
.explorer-avatar-choice:nth-child(3n){background:#eee3d6}
.explorer-avatar-choice:nth-child(3n + 1){background:#dfe8e4}
.explorer-avatar-choice img{display:block;width:100%;height:100%;aspect-ratio:1;object-fit:contain;border-radius:inherit}
.explorer-avatar-choice input{appearance:none;-webkit-appearance:none;position:absolute;inset:0;width:100%;height:100%;margin:0;border:2px solid transparent;border-radius:inherit;background:transparent;cursor:pointer;z-index:1}
.explorer-avatar-choice input:checked{border:3px solid #3E5948;box-shadow:inset 0 0 0 2px #FFF9ED}
.explorer-avatar-check{display:none;position:absolute;right:3px;top:3px;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid #FFF9ED;background:#3E5948;color:#FFF9ED;font:800 13px/1 system-ui,sans-serif;pointer-events:none}
.explorer-avatar-choice input:checked~.explorer-avatar-check{display:grid}
.explorer-form .explorer-avatar-choice input:focus-visible{outline:3px solid #244665;outline-offset:2px}
.explorer-editor-actions{grid-area:actions;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:stretch}
.explorer-submit,.explorer-back,.explorer-empty-add{box-sizing:border-box;min-width:44px;min-height:44px;padding:10px 16px;border-radius:12px 14px 11px 13px;font:800 16px/1.3 ui-rounded,'Trebuchet MS',system-ui,sans-serif;text-align:center;overflow-wrap:anywhere;cursor:pointer;transition:background-color 160ms ease,transform 160ms ease,box-shadow 160ms ease}
.explorer-submit,.explorer-empty-add{width:100%;margin:0;border:1px solid #3E5948;background:#3E5948;color:#FFF9ED;box-shadow:0 2px 5px #3e59481f;text-shadow:none}
.explorer-back{border:1px solid #B7A080;background:#FFF9ED;color:#244665;box-shadow:none;text-decoration:none}
.explorer-submit:disabled,.explorer-back:disabled{cursor:wait;opacity:.75}
.explorer-avatar-choice input:disabled{cursor:wait}
.explorer-status{grid-area:status;min-width:0;margin:0;color:#8d263d;font:600 13px/1.4 system-ui,sans-serif;overflow-wrap:anywhere}
.explorer-status:empty{display:none}
.explorer-form[aria-busy=true] .explorer-status{color:#3E5948}
.explorer-empty{display:grid;justify-items:center;gap:14px;max-width:340px;margin:auto;padding:24px;border:1px solid #B7A080;border-radius:22px;background:#F8F2E4;color:#244665}
.explorer-empty p{margin:0}
@media(hover:hover) and (pointer:fine){
 .explorer-submit:not(:disabled):hover,.explorer-empty-add:hover{background:#324d3b;transform:translateY(-1px);box-shadow:0 3px 7px #3e59482b}
 .explorer-back:not(:disabled):hover{background:#eee5d4;transform:translateY(-1px)}
}
.explorer-submit:not(:disabled):active,.explorer-back:not(:disabled):active,.explorer-empty-add:active{transform:translateY(0) scale(.99);box-shadow:inset 0 2px 3px #3e594826}
@media(max-width:700px){
 .explorer-creating{gap:12px}
 .explorer-creating .explorer-logo{width:130px}
 .explorer-creating .explorer-heading h1{font-size:clamp(23px,6.1vw,26px);margin:0}
 .explorer-creating .explorer-heading>p{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
 .explorer-form{grid-template-columns:minmax(0,1fr);grid-template-areas:'details' 'avatars' 'actions' 'status';max-width:430px;padding:14px;gap:14px;border-radius:19px 21px 18px 20px}
 .explorer-editor-details{gap:10px}
 .explorer-grade-note{gap:6px}
 .explorer-editor-note{font-size:13px}
 .explorer-avatar-grid{gap:6px}
 .explorer-editor-actions{grid-template-columns:auto minmax(0,1fr);gap:8px}
 .explorer-back,.explorer-submit{font-size:15px;padding-inline:12px}
}
@media(orientation:landscape) and (max-height:600px) and (min-width:740px){
 .explorer-creating .explorer-logo{width:100px}
 .explorer-creating .explorer-heading h1{font-size:23px;margin:0}
 .explorer-creating .explorer-heading>p{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
 .explorer-form{padding:14px;gap:10px 20px;max-width:740px}
 .explorer-avatar-choice{aspect-ratio:auto;height:70px}
}
@media(prefers-reduced-motion:reduce){.explorer-submit,.explorer-back,.explorer-empty-add{transition:none;transform:none}}


/* living-world.css */
/* Starter Garden: the same scene objects, two responsive compositions. */
body.living-world-view{margin:0;overflow:hidden;background:#86cdec;color:#173751}
body.living-world-view .shell,body.living-world-view #main{width:100%;max-width:none;margin:0;padding:0;min-height:0}
body.living-world-view .shell>footer,body.living-world-view .topbar{display:none!important}
.living-world{position:relative;isolation:isolate;width:100%;height:100svh;min-height:540px;overflow:hidden;font-family:Nunito,system-ui,sans-serif}
.world-landscape{position:absolute;inset:0;z-index:-2;background:#7abb62 url('assets/world/starter-garden.webp') center center/cover no-repeat}
.world-landscape:after{content:'';position:absolute;inset:0;background:linear-gradient(#61c5f922,transparent 35%,transparent 75%,#3c673822)}
.world-hud{position:absolute;z-index:5;top:max(12px,env(safe-area-inset-top));left:20px;right:140px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;pointer-events:none}
.world-identity{display:flex;align-items:center;gap:10px;padding:7px 18px 7px 7px;min-width:260px;max-width:390px;border:2px solid #fff;border-radius:25px;background:#fff9efed;box-shadow:0 5px 0 #b17c4880,0 8px 18px #274e4d2a}
.world-avatar{width:76px;height:76px;object-fit:contain;object-position:bottom;background:#e1f4ff;border-radius:50%;border:2px solid #fff}
.world-profile-copy{display:grid;gap:2px;min-width:0;flex:1}.world-profile-copy strong{font-size:22px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px}.world-profile-copy>span{font-size:13px;font-weight:800}.world-profile-copy small{font-size:11px;font-weight:800}
.world-xp{width:100%;height:11px;accent-color:#09a9df}.world-xp::-webkit-progress-bar{background:#23496f;border-radius:8px}.world-xp::-webkit-progress-value{background:linear-gradient(90deg,#36d4f1,#2585e0);border-radius:8px}
.world-coins{display:flex;align-items:center;gap:9px;background:#204f7fe8;color:white;border:2px solid #9fdaed;border-radius:28px;margin-top:8px;padding:2px 17px 2px 3px;box-shadow:0 3px 0 #274e5955}.world-coins>span{font-size:36px;line-height:1.2}.world-coins strong{font-size:23px}.world-coins small{font-size:12px}
body.living-world-view #family-menu{z-index:15;top:max(14px,env(safe-area-inset-top));right:18px}body.living-world-view #family-menu>summary{background:#fff9ef;color:#153a63;border:2px solid white;box-shadow:0 4px 0 #b17c4866;border-radius:18px;max-width:102px;text-align:center;min-height:52px;display:grid;align-content:center;font-weight:900}
.world-stage{position:absolute;top:100px;bottom:90px;left:4%;right:4%}
.world-canvas{position:relative;width:100%;height:100%;}
.world-building,.world-plaza,.world-decoration{position:absolute;left:var(--dx);top:var(--dy);transform:translate(-50%,-50%)}
.world-building{z-index:3;display:flex;flex-direction:column;align-items:center;width:18%;max-width:290px;padding:0;border:0;background:transparent;cursor:pointer;color:#19344a;box-shadow:none!important;min-height:0;transition:filter .18s,translate .18s}
.world-sprite{display:block;width:100%;aspect-ratio:1;background-image:url('assets/world/garden-buildings.webp');background-size:400% 200%;background-position:var(--sx) var(--sy);background-repeat:no-repeat;pointer-events:none;filter:drop-shadow(0 6px 4px #244a3030)}
.world-building-label{display:flex;align-items:center;justify-content:center;gap:6px;position:relative;margin-top:-20px;min-height:38px;width:93%;padding:4px 7px 4px 3px;border:2px solid #fff5d0;border-radius:13px;background:linear-gradient(#fff5d8,#f3d4a2);box-shadow:0 3px 0 #ac723f;font-weight:900;font-size:clamp(12px,1.1vw,19px);line-height:1.1;text-shadow:none}
.world-subject-icon{display:grid;place-items:center;flex-shrink:0;font-size:23px;width:34px;height:34px;background:var(--accent);border:2px solid white;border-radius:50%;color:white;margin-left:-10px}.world-building-label>span:last-child{flex:1}
.world-building:hover{filter:brightness(1.09);translate:0 -5px}.world-building:focus-visible,.world-decoration:focus-visible{outline:4px solid #fff;outline-offset:5px;border-radius:20px;filter:drop-shadow(0 0 4px #185c96)}
.world-plaza{width:16%;max-width:245px;z-index:2;pointer-events:none}
.world-explorer{position:absolute;left:28%;bottom:-3%;width:12%;height:30%;object-fit:contain;object-position:bottom;z-index:4;pointer-events:none;filter:drop-shadow(0 7px 4px #173b3240)}
.world-robot{position:absolute;left:20%;bottom:0;width:8%;height:18%;object-fit:contain;z-index:4;pointer-events:none;filter:drop-shadow(0 6px 4px #173b3240)}
.world-decoration{z-index:2;width:10%;height:14%;border:2px dashed #99683080;border-radius:50%;background:#f3ce8c9c;box-shadow:inset 0 2px 5px #9a613c35;display:grid;place-items:center;cursor:pointer;padding:0;min-height:0;color:#173b32}.world-plot-sign{font-size:28px;line-height:1}.world-decoration-item{font-size:clamp(32px,5vw,65px);line-height:1;filter:drop-shadow(0 4px 2px #234b3450)}.world-slot-selecting{outline:4px solid #fff39b;box-shadow:0 0 20px #fff39b}
.world-tip{position:absolute;bottom:84px;left:50%;transform:translateX(-50%);padding:5px 15px;background:#fff8e9e8;color:#26442d;border-radius:14px;font-size:12px;font-weight:800;max-width:90%;text-align:center;width:max-content;margin:0;z-index:5}
.world-nav{position:absolute;z-index:6;bottom:max(10px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,1fr);width:min(680px,70%);height:68px;padding:4px;background:#142f4eed;border:2px solid #e7cb9a;border-radius:23px;box-shadow:0 5px 0 #7f5a37,0 8px 15px #25405b40}
.world-nav-button{border:0;background:transparent;border-radius:17px;color:white;font:800 15px Nunito,system-ui;display:grid;justify-items:center;align-content:center;gap:1px;padding:3px;cursor:pointer;transition:background .15s,transform .15s;box-shadow:none}.world-nav-button>span:first-child{font-size:27px;line-height:1.1}.world-nav-button[aria-current=page]{background:linear-gradient(#58d4ff,#aafaff);color:#054875;box-shadow:inset 0 0 0 2px #e4fbff,0 0 13px #32ceef88}.world-nav-button:hover{background:#477995;transform:translateY(-2px)}.world-nav-button:focus-visible{outline:3px solid #ffe7a5}
.world-dialog{border:3px solid #fff2d4;padding:0;border-radius:24px;background:#fffaf0;color:#173751;width:min(480px,calc(100vw - 26px));max-height:85svh;box-shadow:0 18px 65px #12385677;font:inherit;overflow:auto}.world-dialog::backdrop{background:#103e6080;backdrop-filter:blur(4px)}.world-dialog-heading{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:#e6f2e4;gap:12px}.world-dialog-heading h2{margin:0;font-size:22px}.world-close{border:0;background:#fff8e9;border-radius:50%;width:40px;height:40px;min-width:40px;font-size:26px;color:#1b4664;cursor:pointer}.world-dialog-content{display:grid;gap:12px;padding:20px}.world-dialog-content p{margin:0;line-height:1.5;font-size:14px}.world-field{display:grid;gap:5px;font-size:14px;font-weight:800}.world-field select{padding:10px;border:1px solid #7ea8b8;background:white;border-radius:10px;color:#173751;font:inherit}.world-action{display:block;width:100%;border:1px solid #086783;border-radius:12px;background:#13849e;color:#fff;padding:12px;font:800 14px Nunito,system-ui;cursor:pointer;transition:transform .15s,filter .15s;box-shadow:0 3px 0 #07576e}.world-action.secondary{background:#fff2d7;color:#24485b;border-color:#c4a873;box-shadow:0 3px 0 #d0b88b}.world-action:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.08)}.world-action:disabled{opacity:.55;cursor:default;box-shadow:none}.world-feedback{font-size:13px;color:#6a4b2c}.world-assessments{display:grid;gap:10px}.world-inventory-item{display:grid;grid-template-columns:36px 1fr;gap:8px;align-items:center;padding:12px;background:#f2eedb;border-radius:13px}.world-inventory-item>span{font-size:28px}.world-inventory-item>button{grid-column:2}
@media(max-width:700px){
 .living-world{min-height:0}.world-landscape{background-position:52% center}.world-hud{left:8px;right:86px;top:max(8px,env(safe-area-inset-top));gap:6px}.world-identity{min-width:0;width:69%;max-width:220px;gap:4px;padding:5px 7px 5px 3px;border-radius:20px}.world-avatar{width:47px;height:52px}.world-profile-copy strong{font-size:15px;max-width:120px}.world-profile-copy>span{font-size:10px}.world-profile-copy small{font-size:9px}.world-xp{height:8px}.world-coins{gap:3px;margin-top:8px;padding:4px 7px 4px 2px;flex-wrap:wrap;justify-content:center;max-width:86px;min-width:58px}.world-coins>span{font-size:24px}.world-coins strong{font-size:15px}.world-coins small{font-size:9px;flex-basis:100%;text-align:center;line-height:1}
 body.living-world-view #family-menu{top:max(10px,env(safe-area-inset-top));right:8px}body.living-world-view #family-menu>summary{width:72px;min-height:54px;font-size:11px;padding:8px 4px;border-radius:16px}body.living-world-view .family-menu-panel{max-height:70svh;overflow:auto}
 .world-stage{left:0;right:0;top:90px;bottom:106px}.world-building,.world-plaza,.world-decoration{left:var(--mx);top:var(--my)}.world-building{width:32%;max-width:190px}.world-building-label{font-size:11px;min-height:30px;margin-top:-14px;border-radius:10px;gap:3px;padding:3px 4px 3px 2px}.world-subject-icon{font-size:17px;width:26px;height:26px;margin-left:-8px}.world-plaza{width:29%}.world-building-games{width:30%}.world-explorer{left:28%;width:22%;height:25%;bottom:-4%}.world-{left:50%;width:16%;height:18%;bottom:-5%}.world-decoration{width:19%;height:10%}.world-decoration-item{font-size:35px}.world-plot-sign{font-size:21px}
 .world-nav{width:calc(100% - 18px);height:64px;bottom:max(10px,env(safe-area-inset-bottom));border-radius:20px}.world-nav-button{font-size:12px}.world-nav-button>span:first-child{font-size:26px}.world-tip{bottom:82px;font-size:10px;padding:4px 8px}.world-dialog-content{padding:16px}
}
@media(max-height:720px) and (max-width:700px){.world-stage{top:80px;bottom:94px}.world-building{width:29%}.world-building-games{width:27%}.world-building-label{font-size:10px;min-height:26px}.world-subject-icon{width:23px;height:23px;font-size:15px}.world-plaza{width:26%}.world-explorer{height:22%}.world-tip{bottom:78px;font-size:9px}.world-nav{height:60px}}
@media(prefers-reduced-motion:reduce){.world-building,.world-action,.world-nav-button{transition:none}}
body.living-world-view #family-menu{bottom:auto}
body.living-world-view .family-menu-panel{top:calc(100% + 10px);bottom:auto}
body.living-world-view{padding:0!important}
body.living-world-view .shell{padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;height:100svh;overflow:hidden}

body.living-world-view #main{padding:0!important;margin:0!important;border:0!important;border-radius:0!important;max-width:none!important;width:100%!important}

.world-ui-icon{display:block;width:36px;height:36px;flex-shrink:0;pointer-events:none}
.world-nav-button .world-ui-icon{width:34px;height:34px;filter:drop-shadow(0 2px 1px #0004)}
.world-decoration .world-ui-icon{width:70%;height:90%;overflow:visible;filter:drop-shadow(0 3px 2px #244b3444)}
.world-coins .world-ui-icon{width:43px;height:43px}
.world-plaza-name{position:absolute;bottom:2%;left:50%;transform:translateX(-50%);background:#aa6a30;color:#fff4b6;border:2px solid #f3c66a;padding:2px 8px;border-radius:5px;font-size:clamp(9px,1.2vw,18px);box-shadow:0 3px 0 #714627}
@media(max-width:700px){.world-coins .world-ui-icon{width:24px;height:24px}.world-nav-button .world-ui-icon{width:28px;height:28px}.world-plaza-name{padding:1px 5px;border-width:1px;font-size:9px}}
.world-xp{appearance:none;border:0;display:block;min-height:9px;border-radius:8px;overflow:hidden}
@media(max-height:720px) and (max-width:700px){.world-building-science{--my:65%!important}.world-building-games{width:25%}}

/* Universal Starter Garden responsive polish.
   Compact landscape is determined by available height, not a phone model. */
.world-pan-hint{display:none}
.world-slot-empty{background:#e9dfac99;border-color:#9d854b8a}
.world-slot-filled{background:#e3f0ba99;border-color:#5f925c9a}
.world-slot-filled .world-decoration-item{filter:drop-shadow(0 4px 2px #244b3455)}
.world-stage:focus-visible{outline:3px solid #fff9a6;outline-offset:-3px;border-radius:12px}
@media (orientation:landscape) and (max-height:620px){
 .living-world{height:100svh;min-height:0}
 body.living-world-view .shell{height:100svh}
 .world-hud{left:8px;right:90px;top:max(5px,env(safe-area-inset-top));gap:9px}
 .world-identity{width:auto;min-width:0;max-width:240px;padding:3px 10px 3px 3px;gap:7px;border-radius:16px}
 .world-avatar{width:43px;height:43px}
 .world-profile-copy strong{font-size:14px;max-width:130px}
 .world-profile-copy>span{font-size:10px}
 .world-profile-copy small{font-size:9px}
 .world-xp{height:8px;min-height:7px}
 .world-coins{margin-top:4px;min-width:0;max-width:none;flex-wrap:nowrap;gap:3px;padding:2px 10px 2px 3px}
 .world-coins .world-ui-icon{width:28px;height:28px}
 .world-coins strong{font-size:15px}
 .world-coins small{font-size:10px;flex-basis:auto}
 body.living-world-view #family-menu{top:max(5px,env(safe-area-inset-top));right:7px}
 body.living-world-view #family-menu>summary{width:76px;min-height:48px;padding:3px 5px;font-size:11px;border-radius:13px}
 .world-stage{left:6px;right:6px;top:65px;bottom:65px;overflow:auto;scrollbar-width:thin;scrollbar-color:#c1e4dd80 transparent;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;cursor:grab}
 .world-stage.world-panning{cursor:grabbing;user-select:none}
 .world-canvas{width:1220px;height:580px;min-width:1220px;min-height:580px}
 .world-building,.world-plaza,.world-decoration{left:var(--dx);top:var(--dy)}
 .world-building,.world-building-games{width:18%;max-width:290px}
 .world-building-label{font-size:clamp(12px,1.1vw,19px);min-height:38px;margin-top:-20px;border-radius:13px;gap:6px;padding:4px 7px 4px 3px}
 .world-subject-icon{font-size:21px;width:32px;height:32px;margin-left:-10px}
 .world-plaza{width:16%;max-width:245px}
 .world-plaza-name{font-size:13px;padding:2px 8px;border-width:2px}
 .world-decoration{width:10%;height:14%}
 .world-decoration-item{font-size:48px}
 .world-explorer{left:28%;bottom:-3%;width:12%;height:30%}
 .world-{left:20%;bottom:0;width:8%;height:18%}
 .world-nav{left:50%;width:min(470px,calc(100% - 20px));height:52px;bottom:max(5px,env(safe-area-inset-bottom));border-radius:15px;padding:2px}
 .world-nav-button{font-size:11px;border-radius:11px;gap:0;padding:1px;min-height:42px}
 .world-nav-button .world-ui-icon{width:25px;height:25px}
 .world-tip{display:none}
 .world-pan-hint{display:block;position:absolute;z-index:7;right:10px;bottom:63px;background:#143c61e0;color:#fff5d4;border:1px solid #bce9ed;border-radius:8px;padding:4px 8px;font-size:11px;font-weight:800;pointer-events:none}
 .world-landscape{background-position:center center}
}

/* Keep the plaza title on its raised stone base, above the adjacent PAI roof. */
@media (min-width:701px) and (min-height:621px){.world-plaza-name{bottom:16%}}
@media (orientation:landscape) and (max-height:620px){.world-plaza-name{bottom:16%}}


/* Desktop master composition: depth-sized cottages and bridge-side explorers.
   Scope to wide/adequately tall viewports only, preserving portrait and
   compact-landscape panning layouts unchanged. */
@media (min-width:1100px) and (min-height:621px) {
  .world-building,.world-plaza,.world-decoration{left:var(--wx);top:var(--wy)}
  .world-building{width:var(--dw,12%);max-width:none}
  .world-plaza{width:var(--dw,13%);max-width:none}
  .world-building-label{
    box-sizing:border-box;
    width:100%;
    min-height:34px;
    margin-top:-15px;
    padding:3px 5px 3px 2px;
    font-size:clamp(11px,.85vw,15px);
    line-height:1.15;
    gap:4px;
    overflow:visible;
  }
  .world-subject-icon{width:29px;height:29px;font-size:19px;margin-left:-7px}
  .world-building-pancasila .world-building-label{width:113%}
  .world-building-bahasa-indonesia .world-building-label{width:124%}
  .world-building-paibp .world-building-label{width:91%}
  .world-explorer{left:85%;bottom:7%;width:9%;height:22%;object-position:bottom}
  /* Keep the robot on the far/right side of Explorer, standing on bridge planks. */
  .world-robot{left:91%;bottom:6%;width:6%;height:15%;object-position:bottom}
  .world-decoration{width:8%;height:11%}
  .world-decoration .world-ui-icon{width:65%;height:78%}
  .world-plaza-name{bottom:22%;font-size:clamp(11px,1vw,17px)}
}
/* Narrow tablets and phones retain the prior responsive composition. */

/* Storybook Home HUD. Tokens and overrides deliberately stop at Home. */
body.living-world-view{
 --hud-ivory:#fff8ec;
 --hud-cream:#f6ebd7;
 --hud-outline:#a88d71;
 --hud-ink:#244665;
 --hud-sky:#bbdff5;
 --hud-blush:#fbe9e8;
 --hud-shadow:0 2px 0 #a88d7133,0 5px 12px #5c463323;
}
body.living-world-view .world-identity{
 border:1px solid var(--hud-outline);
 border-radius:25px 28px 24px 27px;
 background:var(--hud-ivory);
 box-shadow:var(--hud-shadow);
 color:var(--hud-ink);
}
body.living-world-view .world-avatar{
 flex-shrink:0;
 background:#e6f0ed;
 border:1px solid #cbb69c;
 border-radius:48% 52% 49% 51%;
}
body.living-world-view .world-profile-copy strong{color:var(--hud-ink);font-weight:900}
body.living-world-view .world-profile-copy>span,
body.living-world-view .world-profile-copy small{color:var(--hud-ink)}
body.living-world-view .world-xp{
 background:var(--hud-ink);
 color:var(--hud-sky);
 accent-color:var(--hud-sky);
 border-radius:7px;
}
body.living-world-view .world-xp::-webkit-progress-bar{background:var(--hud-ink);border-radius:7px}
body.living-world-view .world-xp::-webkit-progress-value{background:var(--hud-sky);border-radius:7px;transition:width 180ms ease}
body.living-world-view .world-xp::-moz-progress-bar{background:var(--hud-sky);border-radius:7px}
body.living-world-view #family-menu{
 right:max(18px,env(safe-area-inset-right));
 font-family:Nunito,system-ui,sans-serif;
 color:var(--hud-ink);
}
body.living-world-view #family-menu>summary{
 box-sizing:border-box;
 background:var(--hud-ivory);
 color:var(--hud-ink);
 border:1px solid var(--hud-outline);
 border-radius:18px 20px 17px 19px;
 box-shadow:var(--hud-shadow);
 line-height:1.35;
 transition:background-color 180ms ease,box-shadow 180ms ease,transform 180ms ease;
}
body.living-world-view #family-menu[open]>summary{
 background:var(--hud-cream);
 box-shadow:inset 0 1px 2px #a88d7126,0 2px 5px #5c46331a;
}
body.living-world-view #family-menu .family-menu-panel{
 box-sizing:border-box;
 width:244px;
 min-width:0;
 max-width:calc(100vw - 36px - env(safe-area-inset-left) - env(safe-area-inset-right));
 max-height:calc(100svh - 100px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
 padding:10px;
 gap:6px;
 border:1px solid var(--hud-outline);
 border-radius:21px 24px 20px 23px;
 background:var(--hud-ivory);
 box-shadow:0 3px 0 #a88d7126,0 8px 20px #5c46332b;
 overflow:auto;
 overscroll-behavior:contain;
 scrollbar-width:thin;
 scrollbar-color:var(--hud-outline) var(--hud-ivory);
}
body.living-world-view #family-menu .family-menu-nav,
body.living-world-view #family-account-actions{display:grid;gap:6px}
body.living-world-view #family-menu .family-menu-panel button{
 box-sizing:border-box;
 min-height:44px;
 padding:10px 14px;
 border:1px solid #deceb6;
 border-radius:13px 15px 12px 14px;
 background:#faf1e2;
 color:var(--hud-ink);
 box-shadow:none;
 font:800 15px/1.4 Nunito,system-ui,sans-serif;
 transition:background-color 180ms ease,transform 180ms ease;
}
body.living-world-view #family-menu .family-menu-panel button.active{
 background:var(--hud-sky);
 border-color:#9bbfce;
 color:var(--hud-ink);
}
body.living-world-view #family-menu .family-menu-panel .family-menu-logout{
 background:var(--hud-blush);
 border-color:#e8c9c4;
 color:#914c4a;
}
@media(hover:hover){
 body.living-world-view #family-menu>summary:hover{background:#f3e7d1;transform:translateY(-1px);box-shadow:0 3px 0 #a88d7133,0 6px 14px #5c46332b}
 body.living-world-view #family-menu .family-menu-panel button:hover{background:#efe1c9}
 body.living-world-view #family-menu .family-menu-panel button.active:hover{background:#acd1e9}
 body.living-world-view #family-menu .family-menu-panel .family-menu-logout:hover{background:#f3dcd9}
}
body.living-world-view #family-menu>summary:active,
body.living-world-view #family-menu .family-menu-panel button:active{transform:translateY(1px);background:#ebdcc2}
body.living-world-view #family-menu :focus-visible{outline:3px solid var(--hud-ink);outline-offset:2px}
@media(max-width:700px){
 body.living-world-view .world-hud{left:max(8px,env(safe-area-inset-left));right:94px}
 body.living-world-view .world-identity{flex:1;width:auto;max-width:220px;gap:6px;padding:6px 8px 6px 5px;border-radius:19px 22px 18px 21px}
 body.living-world-view .world-avatar{width:44px;height:52px}
 body.living-world-view .world-profile-copy strong{font-size:16px}
 body.living-world-view .world-profile-copy>span{font-size:11px;line-height:1.4}
 body.living-world-view .world-profile-copy small{font-size:10px;line-height:1.4}
 body.living-world-view #family-menu{right:max(8px,env(safe-area-inset-right))}
 body.living-world-view #family-menu>summary{width:78px;font-size:12px;padding:8px 5px}
}
@media(orientation:landscape) and (max-height:620px){
 body.living-world-view .world-hud{left:max(8px,env(safe-area-inset-left));right:98px}
 body.living-world-view .world-identity{flex:0 1 240px;width:auto;max-width:240px;padding:4px 10px 4px 5px;gap:7px;border-radius:16px 18px 15px 17px}
 body.living-world-view .world-avatar{width:43px;height:43px}
 body.living-world-view .world-profile-copy strong{font-size:14px}
 body.living-world-view .world-profile-copy>span{font-size:11px}
 body.living-world-view .world-profile-copy small{font-size:10px}
 body.living-world-view #family-menu{right:max(8px,env(safe-area-inset-right))}
 body.living-world-view #family-menu>summary{width:78px;min-height:48px;font-size:12px;padding:3px 5px}
 body.living-world-view #family-menu .family-menu-panel{top:calc(100% + 8px);max-height:calc(100svh - 76px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){
 body.living-world-view #family-menu>summary,
 body.living-world-view #family-menu .family-menu-panel button,
 body.living-world-view .world-xp::-webkit-progress-value{transition:none}
 body.living-world-view #family-menu>summary:hover,
 body.living-world-view #family-menu>summary:active,
 body.living-world-view #family-menu .family-menu-panel button:active{transform:none}
}

/* Learning Quest v2.1 — Compact Storybook Launcher, grades 1–6 only. */
.world-dialog.world-learning-dialog[open]{
 display:flex;
 flex-direction:column;
 box-sizing:border-box;
 width:min(690px,calc(100vw - 28px));
 max-height:min(88svh,730px);
 overflow:hidden;
 border:2px solid #d4bd95;
 border-radius:27px 24px 26px 25px;
 background:#fff9ed;
 box-shadow:0 20px 65px #372f2555,0 5px 0 #8a6e4833;
 color:#355c4b;
}
.world-learning-dialog .world-dialog-heading{
 position:relative;
 flex:0 0 auto;
 z-index:2;
 min-height:68px;
 box-sizing:border-box;
 padding:12px 20px;
 border-bottom:1px solid #d9dfc9;
 background:#e8f2e6;
}
.world-learning-dialog .world-dialog-heading h2{font:800 clamp(21px,3.5vw,25px)/1.25 Nunito,system-ui,sans-serif;color:#355c4b}
.world-learning-dialog .world-close{
 color:#456352;
 background:#fff9ec;
 border:1px solid #eadbc6;
 width:42px;height:42px;min-width:42px;
}
.world-learning-dialog .world-dialog-content{
 flex:1 1 auto;
 min-height:0;
 overflow-y:auto;
 overscroll-behavior:contain;
 padding:18px 20px 20px;
 box-sizing:border-box;
 scrollbar-width:thin;
 scrollbar-color:#bea989 transparent;
}
.world-quest-launcher{display:grid;gap:13px}
.world-learning-dialog .world-launcher-intro{font-size:15px;line-height:1.4;color:#78664f;margin:0}
.world-quest-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.world-quest-choice{
 position:relative;isolation:isolate;
 box-sizing:border-box;
 min-width:0;
 display:flex;flex-direction:column;align-items:stretch;
 gap:6px;
 padding:14px 15px 15px;
 min-height:224px;
 border:2px solid #bdd2b5;
 border-radius:22px 24px 21px 23px;
 background:#eaf2e3;
 box-shadow:0 4px 0 #77916e22;
}
.world-quest-choice-simulation{
 background:#faedd8;
 border-color:#e1c79d;
 box-shadow:0 4px 0 #ac855b20;
}
.world-quest-art{
 display:block;
 width:65px;height:65px;
 object-fit:contain;object-position:center;
 margin:0 auto 2px;
 filter:drop-shadow(0 3px 2px #73583b16);
}
.world-quest-choice h3{margin:0;color:#345b47;font:800 19px/1.25 Nunito,system-ui,sans-serif;text-align:center}
.world-quest-choice-simulation h3{color:#75573a}
.world-learning-dialog .world-quest-choice p{margin:0;font-size:13px;line-height:1.35;color:#597461;text-align:center}
.world-learning-dialog .world-quest-choice-simulation p{color:#836d4e}
.world-learning-dialog .world-quest-choice .world-quest-meta{
 font-size:11px;font-weight:800;line-height:1.3;color:#866947;
}
.world-quest-choice .world-action{
 margin-top:auto;
 width:100%;min-height:43px;padding:9px 10px;
 border-radius:13px 12px 14px 12px;
 background:#6e9575;border:1px solid #55745c;
 box-shadow:0 3px 0 #3f6849;
 color:white;font:800 14px/1.25 Nunito,system-ui,sans-serif;
}
.world-quest-choice-simulation .world-quest-sim-button{
 background:#b58b59;border-color:#906f46;
 box-shadow:0 3px 0 #805f3b;
}
.world-quest-choice .world-action:disabled{opacity:.65;box-shadow:none;cursor:default}
.world-quest-review{
 display:flex;gap:12px;align-items:center;
 width:100%;min-height:62px;
 padding:10px 14px;
 color:#5b4a35;background:#fff3dd;
 border:1.5px solid #dbc39e;border-radius:17px 18px 15px 18px;
 text-align:left;font:inherit;cursor:pointer;
}
.world-review-mark{
 display:grid;place-items:center;
 flex:0 0 39px;height:39px;
 border-radius:13px;background:#f0e0c0;
 color:#8e7550;font-size:26px;font-weight:800;
}
.world-review-copy{display:grid;gap:1px;flex:1;min-width:0}
.world-review-copy strong{font:800 15px/1.2 Nunito,system-ui,sans-serif}
.world-review-copy small{font:600 12px/1.35 Nunito,system-ui,sans-serif;color:#967d5e}
.world-review-chevron{font-size:26px;color:#927c5d}
.world-learning-dialog .world-feedback:empty{display:none}
.world-learning-dialog .world-feedback{
 color:#985336;font-size:12px;line-height:1.4;margin:0;
}
.world-chapter-view{display:grid;gap:12px}
.world-chapter-back{
 justify-self:start;
 display:inline-flex;align-items:center;
 min-height:36px;padding:5px 12px 5px 9px;
 background:#f7efdf;color:#735b3c;
 border:1px solid #dfcfb0;border-radius:12px;
 font:800 13px Nunito,system-ui;cursor:pointer;
}
.world-learning-dialog .world-chapter-intro{font-size:15px;color:#5f6f54;font-weight:800}
.world-chapter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.world-chapter-option{
 display:flex;align-items:center;gap:10px;
 padding:10px 11px;min-width:0;min-height:58px;
 border:1.5px solid #ddcfb7;border-radius:15px 14px 16px 13px;
 background:#fffcf5;color:#4d624f;text-align:left;cursor:pointer;
 font:700 13px/1.35 Nunito,system-ui,sans-serif;
 transition:background .15s,border-color .15s,transform .15s;
}
.world-chapter-number{
 display:grid;place-items:center;
 width:33px;height:33px;min-width:33px;
 background:#eef2e5;border-radius:12px;
 color:#64826a;font-size:13px;font-weight:900;
}
.world-chapter-name{flex:1;min-width:0;overflow-wrap:anywhere}
.world-chapter-check{display:none;color:#4c7959;font-size:17px;font-weight:900}
.world-chapter-option.is-selected{
 background:#e5f2e2;border-color:#71977b;box-shadow:inset 0 0 0 1px #71977b;
}
.world-chapter-option.is-selected .world-chapter-check{display:inline}
.world-chapter-option.is-selected .world-chapter-number{background:#cee5ce}
.world-chapter-controls{
 position:sticky;bottom:-20px;z-index:1;
 display:grid;gap:8px;padding:12px 0 1px;
 background:linear-gradient(180deg,#fff9eddd,#fff9ed 18%);
}
.world-chapter-more{
 padding:6px 11px;border-radius:12px;background:#f8efdf;
 border:1px solid #ebdcc6;
 color:#775f46;font:700 12px Nunito,system-ui,sans-serif;
}
.world-chapter-more summary{cursor:pointer;padding:2px}
.world-chapter-more .world-field{margin:8px 0 3px}
.world-learning-dialog .world-field select{color:#345b47;border:1px solid #b9cdb5;border-radius:11px}
.world-learning-dialog .world-chapter-start{
 background:#6e9575;border-color:#58785d;box-shadow:0 3px 0 #446c4d;
 min-height:46px;font-size:15px;
}
.world-learning-dialog .world-chapter-start:disabled{box-shadow:none}
.world-learning-dialog .world-quest-empty,
.world-learning-dialog .world-quest-loading{
 grid-column:1/-1;background:#f5edde;border-radius:12px;
 color:#7b6141;padding:12px;font-size:13px;text-align:center;
}
.world-learning-dialog .world-quest-status:empty,
.world-learning-dialog .world-quest-review-status:empty{display:none}
.world-learning-dialog .world-close:focus-visible,
.world-quest-choice .world-action:focus-visible,
.world-quest-review:focus-visible,
.world-chapter-option:focus-visible,
.world-chapter-back:focus-visible{outline:3px solid #688c6e;outline-offset:3px}
@media(hover:hover){
 .world-chapter-option:hover{background:#f2f6e9;transform:translateY(-1px)}
 .world-quest-review:hover{background:#fae9cf}
}
@media(max-width:599px){
 .world-dialog.world-learning-dialog[open]{
  width:calc(100vw - 22px);
  max-height:min(92svh,730px);
  border-radius:24px;
 }
 .world-learning-dialog .world-dialog-heading{min-height:60px;padding:9px 14px}
 .world-learning-dialog .world-dialog-content{padding:12px 13px 14px}
 .world-learning-dialog .world-launcher-intro{font-size:14px}
 .world-quest-launcher{gap:10px}
 .world-quest-choices{grid-template-columns:minmax(0,1fr);gap:10px}
 .world-quest-choice{
  display:grid;grid-template-columns:68px minmax(0,1fr);
  grid-template-rows:auto auto auto auto;
  align-content:center;align-items:center;row-gap:2px;column-gap:12px;
  min-height:0;padding:12px 13px 13px;border-radius:19px;
 }
 .world-quest-art{grid-column:1;grid-row:1/span 3;width:65px;height:65px;margin:0}
 .world-quest-choice h3{grid-column:2;grid-row:1;text-align:left;font-size:18px}
 .world-learning-dialog .world-quest-choice p:not(.world-quest-meta){
  grid-column:2;grid-row:2;text-align:left;font-size:12px;
 }
 .world-learning-dialog .world-quest-choice .world-quest-meta{
  grid-column:2;grid-row:3;text-align:left;font-size:11px;
 }
 .world-quest-choice .world-action{grid-column:1/-1;grid-row:4;margin-top:9px;min-height:42px}
 .world-quest-review{min-height:59px;padding:9px 11px}
 .world-chapter-grid{grid-template-columns:minmax(0,1fr)}
 .world-chapter-option{min-height:51px}
 .world-chapter-controls{bottom:-14px}
}
@media(max-height:540px) and (orientation:landscape){
 .world-dialog.world-learning-dialog[open]{max-height:94svh}
 .world-learning-dialog .world-dialog-heading{min-height:52px;padding:6px 15px}
 .world-learning-dialog .world-dialog-content{padding:10px 15px}
 .world-quest-choice{min-height:0;padding:10px 12px}
 .world-quest-art{width:46px;height:46px}
 .world-quest-choice h3{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
 .world-chapter-option{transition:none}
 .world-chapter-option:hover{transform:none}
}


/* family-badge.css */
/* NALAROO Family Badge — approved circular storybook artwork.
   Icon-only trigger; native <summary> remains keyboard/touch accessible.
   Accessible name and hover tooltip come from index.html. */
#family-menu>summary{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:row;
  gap:0;
  text-align:center;
}
#family-menu>summary .family-badge-icon{
  display:block;
  width:48px;
  height:48px;
  max-width:100%;
  flex-shrink:0;
  object-fit:contain;
  pointer-events:none;
}
body.living-world-view #family-menu>summary,
body.explorer-view #family-menu>summary{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:row;
  width:64px;
  max-width:64px;
  height:64px;
  min-height:64px;
  padding:6px;
  gap:0;
  text-align:center;
}
body.living-world-view #family-menu>summary .family-badge-icon,
body.explorer-view #family-menu>summary .family-badge-icon{
  width:48px;
  height:48px;
}
@media(max-width:900px){
  body.explorer-view #family-menu>summary,
  body.living-world-view #family-menu>summary{
    width:56px;
    max-width:56px;
    height:56px;
    min-height:56px;
    padding:4px;
  }
  body.explorer-view #family-menu>summary .family-badge-icon,
  body.living-world-view #family-menu>summary .family-badge-icon{
    width:44px;
    height:44px;
  }
}
@media(max-height:450px){
  body.explorer-view #family-menu>summary,
  body.living-world-view #family-menu>summary{
    width:50px;
    max-width:50px;
    height:50px;
    min-height:50px;
    padding:3px;
  }
  body.explorer-view #family-menu>summary .family-badge-icon,
  body.living-world-view #family-menu>summary .family-badge-icon{
    width:40px;
    height:40px;
  }
}
@media(prefers-reduced-motion:reduce){
  #family-menu>summary .family-badge-icon{transition:none!important}
}

/* The Legend Book is an uninterrupted reading space: no floating Family Badge.
   Leave the global family controls intact on Home and the other pages. */
body.storybook-view #family-menu{display:none!important}


/* navigation-hud-v2.css */
/* Elevated Parchment & Forest Sage v2.1 — same icon-only HUD and routes. */
:root{--primary-hud-height:68px;--primary-hud-bottom:11px}
.persistent-nav{
  box-sizing:border-box;
  position:fixed;left:50%;transform:translateX(-50%);z-index:6;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  width:min(580px,calc(100% - 36px));height:var(--primary-hud-height);
  padding:5px;gap:4px;
  bottom:max(var(--primary-hud-bottom),env(safe-area-inset-bottom));
  border:1.5px solid #A98A67;border-radius:26px 28px 24px 27px;
  background:linear-gradient(180deg,#F6EFE1 0%,#EDE1CB 100%);
  box-shadow:0 5px 0 #92744f20,0 11px 24px #5e492c36,inset 0 1px 0 #fffdf5f2;
}
.persistent-nav::before{
  content:'';position:absolute;inset:3px;pointer-events:none;
  border:1px solid #FFF9EDc7;border-radius:23px 25px 21px 24px;
}
.persistent-nav .world-nav-button{
  box-sizing:border-box;position:relative;
  display:flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:3px 6px;
  border:1px solid transparent;border-radius:21px 23px 19px 22px;
  background:transparent;color:#3E5948;text-shadow:none;transform:none;
  transition:background-color 180ms ease,box-shadow 180ms ease;
  -webkit-tap-highlight-color:transparent;
}
.persistent-nav .world-nav-button .world-ui-icon{
  display:block;width:44px;height:44px;max-width:100%;flex:none;object-fit:contain;
  filter:drop-shadow(0 1px 1px #765b3c24);
  transition:transform 180ms ease;
}
/* Keep real text nodes for assistive technology and existing text locators. */
.persistent-nav .world-nav-label{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}
/* Override the legacy .world-nav-button hover lift; only the illustrated icon floats. */
.persistent-nav .world-nav-button:hover{transform:none}
.persistent-nav .world-nav-button[aria-current="page"]{
  background:linear-gradient(180deg,#DFEBD6,#C4D9B5);
  border-color:#78966C;
  box-shadow:inset 0 1px 0 #ffffffdb,0 2px 3px #58754926;
}
@media(hover:hover) and (pointer:fine){
  .persistent-nav .world-nav-button:hover:not([aria-current="page"]){background:#E5D7BD}
  .persistent-nav .world-nav-button[aria-current="page"]:hover{background:#BDD4AC}
  .persistent-nav .world-nav-button:hover .world-ui-icon{transform:translateY(-1px)}
}
.persistent-nav .world-nav-button:active{background:#DACEB9;box-shadow:inset 0 2px 3px #765b3c26}
.persistent-nav .world-nav-button[aria-current="page"]:active{background:#B5CDA6;box-shadow:inset 0 2px 3px #63785326}
.persistent-nav .world-nav-button:active .world-ui-icon{transform:none}
.persistent-nav .world-nav-button:focus-visible{outline:3px solid #3E5948;outline-offset:1px}
.persistent-nav[hidden]{display:none!important}
body:has(dialog[open])>.persistent-nav{visibility:hidden;pointer-events:none}
/* Ensure the final collectible card/CTA can scroll clear of the fixed HUD. */
body.learning-journal-view .learning-journal,body.collection-view .collection-page{padding-bottom:calc(var(--primary-hud-height) + var(--primary-hud-bottom) + 72px + env(safe-area-inset-bottom))!important}
@media(min-width:701px) and (min-height:621px){body.living-world-view .world-tip{bottom:89px}}
@media(max-width:700px){
  :root{--primary-hud-height:62px;--primary-hud-bottom:10px}
  .persistent-nav{
    width:calc(100% - 18px - env(safe-area-inset-left) - env(safe-area-inset-right));
    /* Center inside asymmetric device safe areas. */
    left:calc(50% + (env(safe-area-inset-left) - env(safe-area-inset-right))/2);
    gap:2px;padding:4px;border-radius:21px 22px 20px 21px;
  }
  .persistent-nav::before{border-radius:18px 19px 17px 18px}
  .persistent-nav .world-nav-button{padding:2px;border-radius:16px 17px 15px 16px}
  .persistent-nav .world-nav-button .world-ui-icon{width:38px;height:38px}
}
@media(orientation:landscape) and (max-height:620px){
  :root{--primary-hud-height:54px;--primary-hud-bottom:5px}
  .persistent-nav{
    width:min(510px,calc(100% - 20px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    left:calc(50% + (env(safe-area-inset-left) - env(safe-area-inset-right))/2);
    padding:4px;gap:2px;border-radius:18px 19px 17px 18px;
  }
  .persistent-nav::before{border-radius:15px 16px 14px 15px}
  .persistent-nav .world-nav-button{padding:1px;border-radius:13px 14px 12px 13px}
  .persistent-nav .world-nav-button .world-ui-icon{width:34px;height:34px}
  body.learning-journal-view .learning-journal,body.collection-view .collection-page{padding-bottom:calc(var(--primary-hud-height) + var(--primary-hud-bottom) + 58px + env(safe-area-inset-bottom))!important}
}
@media(prefers-reduced-motion:reduce){
  .persistent-nav .world-nav-button,.persistent-nav .world-nav-button .world-ui-icon{transition:none}
  .persistent-nav .world-nav-button:hover .world-ui-icon,.persistent-nav .world-nav-button:active .world-ui-icon{transform:none}
}
/* Dedicated learning/game surfaces retain their existing visibility rules. */
body.exam-mode-active>.persistent-nav{display:none!important}
body:has(.reactor-overlay)>.persistent-nav,
body:has(.neural-overlay)>.persistent-nav,
body:has(.ub-modal-overlay)>.persistent-nav{visibility:hidden;pointer-events:none}


/* learning-journal.css */
/* Compact Journal v1.1: page-owned styles, no legacy Report selectors. */
body.learning-journal-view{padding:0;margin:0;overflow:auto;background:#edf2e8;color:#233b52}
body.learning-journal-view .shell{display:block;width:100%;max-width:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;background:transparent;padding:0!important;overflow:visible}
body.learning-journal-view #main{max-width:none;margin:0;padding:0;background:transparent}
body.learning-journal-view .shell>footer{display:none}
/* Family settings stay in Home; journal has no floating Family Badge. */
body.learning-journal-view #family-menu{display:none!important}
.learning-journal{--lj-cream:#fff8ec;--lj-muted:#546779;max-width:1280px;margin:0 auto;padding:14px 28px max(24px,env(safe-area-inset-bottom));font:400 14px/1.45 Nunito,'Segoe UI',sans-serif;position:relative;isolation:isolate}
.learning-journal:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 6% 4%,#d5e7dc,transparent 45%),linear-gradient(130deg,#eff3e9,#f7efdf)}
.learning-journal *{min-width:0}
.learning-journal h1,.learning-journal h2,.learning-journal h3,.learning-journal p{margin:0}
.learning-journal h1{font-size:30px;line-height:1.2;font-weight:900;letter-spacing:-.025em}
.learning-journal h2{font-size:18px;line-height:1.3;font-weight:850}
.learning-journal h3{font-size:15px;line-height:1.35;font-weight:800}
.learning-journal small,.lj-caption{font-size:12px;line-height:1.45;color:var(--lj-muted)}
.lj-nav{display:flex;justify-content:flex-end;align-items:center;min-height:52px;margin-bottom:12px;gap:12px}
.lj-wordmark{display:block;width:142px;max-width:42%;height:auto;aspect-ratio:1586/509;object-fit:contain;flex-shrink:0}
.lj-back{display:flex;align-items:center;justify-content:center;width:52px;height:52px;min-width:52px;min-height:52px;padding:2px;border:0;border-radius:50%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .16s ease,background-color .16s ease}
.lj-back-badge{display:block;width:100%;height:100%;object-fit:contain}
@media(hover:hover) and (pointer:fine){.lj-back:hover{transform:translateY(-2px);background:#fff8ecaa}}
.lj-back:active{transform:translateY(1px)}
.lj-hero{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.lj-avatar{width:64px;height:64px;object-fit:contain;object-position:bottom;border-radius:48%;background:#dceef0;border:1px solid #c5d8cf;flex:0 0 auto}
.lj-identity{flex:1}.lj-explorer{margin-top:4px!important;overflow-wrap:anywhere}.lj-name{font-weight:800}.lj-xp-label{font-size:12px;color:#546779;margin-top:3px!important}
.lj-panel{border:1.5px solid #b3977b;border-radius:20px 18px 22px 19px;background:var(--lj-cream);padding:16px;box-shadow:0 3px 0 #d8c7af55,0 7px 18px #5e604307}
.lj-panel>h2{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.lj-icon{width:26px;height:26px;display:block;flex-shrink:0}
.lj-overview{margin-bottom:16px}
.lj-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.lj-stat{padding:9px 14px;border-radius:12px;border:1px solid #c2d9d6;background:#edf7f5;display:flex;flex-direction:column;gap:3px}
.lj-stat-scores{background:#fbf1dd;border-color:#e1c79d}.lj-stat-review{background:#f6e9e0;border-color:#dfc2af}
.lj-stat-label{font-size:12px;line-height:1.3}.lj-stat-value{font-size:25px;font-weight:850;line-height:1.2;overflow-wrap:anywhere}
.lj-average-note{margin-top:8px!important}
.lj-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start}
.lj-subjects>h2{margin-bottom:5px}.lj-subjects>.lj-caption{margin-bottom:12px}
.lj-subject-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.lj-subject{display:flex;align-items:center;gap:9px;border:1px solid #dfd0bc;background:#fffdf6;border-radius:13px;padding:11px 9px;min-height:84px}
.lj-building{display:block;width:48px;height:48px;flex:0 0 auto;background-image:url('assets/world/garden-buildings.webp');background-size:400% 200%;background-position:var(--sx,0%) var(--sy,0%);background-repeat:no-repeat}
.lj-building:has(.lj-icon){background:none}
/* Only the six subject results use the new transparent, hand-drawn assets. */
.lj-subject .lj-building.lj-subject-art{width:58px;height:58px;object-fit:contain;background-image:none;filter:drop-shadow(0 2px 2px #6e543026)}
@media(max-width:760px){.lj-subject .lj-building.lj-subject-art{width:48px;height:48px}}

.lj-subject-copy{flex:1}.lj-subject h3{font-size:14px;overflow-wrap:anywhere}.lj-accuracy{font-size:12px;color:#345d59;margin-top:3px!important;font-weight:750}
.lj-no-data{font-size:12px;color:#546779;margin-top:3px!important}
.lj-accuracy-bar{display:block;width:100%;height:6px;margin-top:5px;accent-color:#6c9c7d;border:0;border-radius:8px;overflow:hidden}
.lj-accuracy-bar::-webkit-progress-bar{background:#e5e9dd}.lj-accuracy-bar::-webkit-progress-value{background:#82ac90}.lj-accuracy-bar::-moz-progress-bar{background:#82ac90}
.lj-review-count{font-size:11px;color:#83533d;margin-top:4px!important}
.lj-side-sections{display:grid;gap:14px}
.lj-next{background:linear-gradient(130deg,#edf3e6,#fff8ec 75%)}
.lj-next h3{font-size:17px}.lj-next-copy{font-size:13px;color:#546779;margin-top:5px!important;margin-bottom:11px!important}
.lj-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:9px 15px;border:1.5px solid #7f9e9d;border-radius:12px;background:#d8eceb;color:#233b52;font-size:13px;font-weight:800;box-shadow:0 2px 0 #aec9c5;transition:transform .16s,background .16s}
.lj-button:hover{transform:translateY(-2px);background:#c4e3e2}.lj-button:active{transform:translateY(1px)}
.lj-feedback:empty{display:none}.lj-feedback{font-size:12px;color:#8b432f;overflow-wrap:anywhere;margin-top:8px!important}.lj-next>small{display:block;margin-top:8px}
.lj-history>h2{margin-bottom:4px}.lj-history>.lj-caption{margin-bottom:8px}
.lj-timeline{padding:0;margin:0;list-style:none}
.lj-session+.lj-session{border-top:1px dashed #d9c9b5}
.lj-session-summary{display:flex;align-items:center;gap:8px;cursor:pointer;min-height:64px;padding:9px 0;list-style:none}
.lj-session-summary::-webkit-details-marker,.lj-achievement-details>summary::-webkit-details-marker{display:none}
.lj-session-info{flex:1}.lj-session-heading{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}.lj-session-heading strong{font-size:13px}.lj-session time{font-size:11px;color:#546779}
.lj-session-score{display:block;font-size:12px;margin-top:3px!important;color:#345d59;overflow-wrap:anywhere}
.lj-detail-label{font-size:11px;color:#365e78;text-decoration:underline;text-underline-offset:3px}
.lj-session-details{padding:2px 0 10px;font-size:12px;color:#546779}.lj-session-details p+p{margin-top:4px}
.lj-link-button{display:inline-flex;align-items:center;min-height:44px;min-width:44px;background:none;border:0;padding:7px 0;color:#365e78;font-family:inherit;font-size:12px;font-weight:800;line-height:1.4;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lj-history-toggle{margin-top:2px}
.lj-badges{margin-top:16px}.lj-badges>h2{margin-bottom:6px}.lj-empty-badges{font-size:13px;color:#546779}
.lj-badge-total{font-size:13px;font-weight:750}.lj-badge-preview{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;padding:0;margin:8px 0 0}
.lj-badge-preview li{display:flex;gap:6px;align-items:center;font-size:12px}.lj-badge-preview .lj-icon{width:24px;height:24px}
.lj-badge-list{padding:0;margin:0;list-style:none;display:grid;gap:10px}.lj-badge p{font-size:12px;margin-top:3px}.lj-badge small{display:block;margin-top:3px}.lj-achievement-details[open]>summary{margin-bottom:6px}
.lj-empty{display:flex;gap:8px;align-items:center;color:#546779;font-size:13px;padding:5px 0}.lj-empty .lj-icon{width:24px;height:24px}
.lj-state{max-width:650px;margin:28px auto}.lj-state>button{margin-top:12px}
.learning-journal :focus-visible{outline:3px solid #365e78;outline-offset:3px}
@media(max-width:1100px){.lj-subject-grid{grid-template-columns:1fr}.lj-subject{min-height:76px}}
@media(max-width:760px){
 .learning-journal{padding:10px max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));font-size:14px}
 .learning-journal h1{font-size:25px}.learning-journal h2{font-size:17px}.lj-nav{min-height:48px;margin-bottom:10px;gap:8px}.lj-wordmark{width:116px;max-width:43%}.lj-back{width:48px;height:48px;min-width:48px;min-height:48px}
 .lj-hero{gap:11px;margin-bottom:14px}.lj-avatar{width:56px;height:56px}.lj-explorer{font-size:13px}.lj-xp-label{font-size:12px}
 .lj-panel{padding:13px;border-radius:18px}.lj-overview{margin-bottom:14px}.lj-stats{gap:7px}.lj-stat{padding:9px 8px}.lj-stat-value{font-size:23px}.lj-stat-label{font-size:11px}.lj-average-note{font-size:11px}
 .lj-grid{display:block}.lj-subject-grid{gap:7px}.lj-subject{min-height:72px;padding:9px 10px;gap:10px}.lj-building{width:44px;height:44px}.lj-subject h3{font-size:14px}.lj-subjects>.lj-caption{font-size:11px;margin-bottom:10px}
 .lj-side-sections{margin-top:14px;gap:14px}.lj-next h3{font-size:16px}.lj-next-copy{font-size:13px}.lj-session-summary{min-height:62px}.lj-badges{margin-top:14px}
}
@media(prefers-reduced-motion:reduce){.learning-journal *{transition:none!important;animation:none!important}}


/* collectibles.css */
/* Storybook Collectibles v2: isolated full pages, not legacy Reward Chamber overrides. */
body.collection-view{margin:0;padding:0;background:#f5f1e5;color:#233b52;overflow:visible}
body.collection-view .shell{display:block;width:100%;max-width:none;margin:0;padding:0!important;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;overflow:visible}
body.collection-view #main{max-width:none;margin:0;padding:0;background:#f5f1e5}
body.collection-view .shell>footer,body.collection-view #family-menu{display:none!important}
.collection-page{--ink:#233b52;--brown:#987551;--muted:#586b70;max-width:1320px;min-height:100svh;margin:auto;padding:14px 28px max(32px,env(safe-area-inset-bottom));font:400 15px/1.5 Nunito,'Segoe UI',sans-serif;background:radial-gradient(ellipse at 0 0,#dbece0,transparent 46%),linear-gradient(130deg,#fbf9ed,#f7f0e2)}
.collection-page *{min-width:0;box-sizing:border-box}
.collection-page h1,.collection-page h2,.collection-page h3,.collection-page p{margin:0}
.collection-page h1{font-size:44px;line-height:1.15;font-weight:900;letter-spacing:-.025em}
.collection-page h2{font-size:22px;line-height:1.3;font-weight:850}
.collection-page h3{font-size:15px;line-height:1.3;font-weight:850;overflow-wrap:anywhere}
.collection-nav{width:100%;max-width:1224px;margin-inline:auto;display:flex;align-items:center;justify-content:flex-end;min-height:52px;gap:12px;margin-bottom:12px}
.collection-home{display:flex;align-items:center;justify-content:center;width:52px;height:52px;min-width:44px;min-height:44px;padding:2px;border:0;background:transparent;border-radius:50%;cursor:pointer}
.collection-home-badge{width:48px;height:48px;object-fit:contain}
.collection-logo{width:142px;height:auto;object-fit:contain}
.collection-heading{margin-bottom:20px}
.collection-subtitle{font-size:16px;color:#466969;margin-top:7px!important}
.collection-explorer{font-weight:750;color:#386b65;font-size:13px;margin-top:12px!important;overflow-wrap:anywhere}
.collection-wallet{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1.5px solid #b9956d;border-radius:20px;background:linear-gradient(110deg,#fffaf0,#fcf1da);padding:17px 22px;box-shadow:0 4px 0 #b5956b20;margin-bottom:14px}
.collection-wallet:empty{display:none}
.collection-wallet-amount{display:flex;align-items:center;gap:13px}
.collection-coin{width:22px;height:22px;flex:0 0 auto}
.collection-wallet .collection-coin{width:46px;height:46px}
.collection-wallet-amount>div{display:grid;gap:1px}.collection-wallet-amount span{font-size:12px;color:#825c3b}
.collection-balance{font-size:27px;line-height:1.25;font-weight:900}
.collection-wallet small{font-size:12px;color:#586b70}
.collection-owned-count{display:flex;flex-direction:column;gap:3px;border-left:1px solid #dfcbb1;padding-left:22px;text-align:center}
.collection-owned-count span{font-size:11px;color:#825c3b}.collection-owned-count strong{font-size:24px}
.collection-feedback{font-size:13px;color:#386b65;margin:12px 0!important;overflow-wrap:anywhere}
.collection-feedback:empty{display:none}
.collection-section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:22px 0 13px}
.collection-section-heading h2{flex:1}.collection-count{font-size:12px;color:#586b70;white-space:nowrap}
.collection-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;align-items:stretch}
.collection-card{--edge:#d1b18b;--glow:#c5b49212;--wash:#fffdf6;position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 12px 13px;border:1.5px solid var(--edge);border-radius:18px 16px 19px 17px;background:radial-gradient(ellipse at 50% 28%,#ffffffde,var(--wash) 74%);box-shadow:0 4px 0 #bdab8d15,0 0 18px var(--glow);text-align:center}
.collection-card::before{content:'';position:absolute;inset:5px;border:1px solid var(--edge);border-radius:13px;opacity:.3;pointer-events:none;z-index:-1}
.collection-card::after{content:'';position:absolute;inset:7px;pointer-events:none;opacity:.6;background:radial-gradient(circle at 3px 3px,var(--edge) 0 2px,transparent 3px),radial-gradient(circle at calc(100% - 3px) 3px,var(--edge) 0 2px,transparent 3px),radial-gradient(circle at 3px calc(100% - 3px),var(--edge) 0 2px,transparent 3px),radial-gradient(circle at calc(100% - 3px) calc(100% - 3px),var(--edge) 0 2px,transparent 3px)}
.collection-card[data-rarity=Rare]{--edge:#78bdd6;--wash:#e9f8fc;--glow:#56bde82b}
.collection-card[data-rarity=Epic]{--edge:#bd8ddf;--wash:#f5eaff;--glow:#b373df30}
.collection-card[data-rarity=Legendary]{--edge:#d8a342;--wash:#fff1c3;--glow:#efbc4a45;background:radial-gradient(ellipse at 50% 25%,#fff8d3,#fff1c3 42%,#fff8eb 85%);box-shadow:0 4px 0 #c6a26b20,0 0 24px var(--glow),inset 0 0 16px #ffda6525}
.collection-card[data-rarity=Rare]::after,.collection-card[data-rarity=Epic]::after,.collection-card[data-rarity=Legendary]::after{background:var(--edge);mask:url('assets/collectibles/card-ornaments.svg') center/100% 100% no-repeat;opacity:.75}
.collection-art{display:block;width:100%;aspect-ratio:1;height:auto;object-fit:contain;position:relative;z-index:1}
.collection-art-button{display:block;align-self:stretch;min-height:44px;min-width:44px;border:0;border-radius:12px;background:none;padding:0;cursor:pointer}
.collection-tags{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap}
.collection-rarity{font-size:11px;color:#725d47;border-radius:20px;background:#efeadf;padding:2px 10px;font-weight:750}
[data-rarity=Rare] .collection-rarity{background:#d3effb;color:#315d7e}[data-rarity=Epic] .collection-rarity{background:#ebd9fa;color:#704e90}[data-rarity=Legendary] .collection-rarity{background:#ffe3a0;color:#7d5425}
.collection-plus{font-size:10px;font-weight:900;color:#704e90;background:#ebd9fa;border:1px solid #c8a2e5;padding:2px 7px;border-radius:7px}
.collection-price{display:flex;align-items:center;justify-content:center;gap:5px;font-size:12px;color:#725335}
.collection-price .collection-coin{width:18px;height:18px}
.collection-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:10px 15px;border:1px solid #8db5ad;border-radius:12px;background:#d3ece6;color:#244e50;font:800 13px/1.35 Nunito,'Segoe UI',sans-serif;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 2px 0 #a8c5bd}
.collection-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 0 #a8c5bd}
.collection-card>.collection-button{width:100%;margin-top:auto;padding:9px 5px;font-size:12px}
.collection-button:disabled{opacity:1;background:#eceee9;border-color:#d9dcd4;color:#58676b;box-shadow:none;cursor:default}
.collection-owned{display:inline-block;padding:6px 14px;color:#386b65;background:#deeee5;border-radius:99px;font-size:12px;font-weight:800;margin-top:auto}
.collection-filters{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 12px}
.collection-filter{min-height:44px;min-width:44px;padding:9px 15px;border:1px solid #d8c8ac;border-radius:99px;background:#fffaf0;color:#6c513c;font:750 13px/1.35 Nunito,'Segoe UI',sans-serif;cursor:pointer}
.collection-filter[aria-pressed=true]{background:#dcebdd;color:#38614f;border-color:#9bb99c;box-shadow:0 0 0 2px #fff9ef}
.collection-shop-links{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.collection-family-link{min-height:44px;padding:10px 16px;border:1px solid #d7bd8c;border-radius:12px;background:#fff2cf;color:#74502e;font:750 13px Nunito,'Segoe UI',sans-serif;cursor:pointer}
.collection-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:8px;color:#386b65;background:none;border:0;font:750 13px/1.4 Nunito,'Segoe UI',sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.collection-empty{text-align:center;border:1.5px solid #d5c1a6;border-radius:22px;background:#fffaf0;padding:25px;display:flex;align-items:center;flex-direction:column;gap:12px;min-height:330px}
.collection-empty>img{width:180px;height:162px}.collection-empty>p{color:#586b70;font-size:14px}
.collection-empty h2{font-size:25px}.collection-empty .collection-button{margin-top:5px}
.collection-bag-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:22px;color:#586b70;font-size:13px}
.collection-loading,.collection-error,.collection-empty-message{padding:24px;background:#fffaf0;border:1px solid #d8c8ac;border-radius:16px;color:#586b70}
.collection-dialog{width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow-y:auto;padding:20px;border:1.5px solid #a18462;border-radius:22px;background:#fff8ec;color:#233b52;box-shadow:0 18px 60px #364e4540;font:400 14px/1.5 Nunito,'Segoe UI',sans-serif}
.collection-dialog::backdrop{background:#243b465c;backdrop-filter:blur(3px)}
.collection-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.collection-dialog-header h2{font-size:21px;margin:0}
.collection-purchase-summary{display:flex;flex-direction:column;align-items:center;gap:8px}.collection-purchase-summary>.collection-art,.collection-detail-art{width:190px;height:190px;object-fit:contain;display:block;margin:auto}
.collection-detail-art{margin:12px auto}.collection-dialog .collection-tags{margin:8px 0}.collection-confirm-price{font-size:20px;font-weight:850;color:#7b5935}
.collection-dialog-actions{display:flex;justify-content:center;gap:10px;margin-top:16px;flex-wrap:wrap}.collection-dialog-feedback{font-size:13px;color:#805336;margin:12px 0 0!important;overflow-wrap:anywhere}.collection-acquired{display:block;margin-top:10px;font-size:12px;color:#586b70}.collection-note{margin-top:12px!important;color:#586b70;font-size:12px}
.collection-page :focus-visible,.collection-dialog :focus-visible{outline:3px solid #365e78;outline-offset:3px}
/* Family management reuses existing PIN/approval behavior, within a light full-page surface. */
.collection-page .hub-shell{max-width:none;margin:0;background:#fffaf0;border:1.5px solid #d8c8ac;padding:20px;border-radius:20px;color:#233b52}
.collection-page .hub-content h3{color:#233b52}.collection-page .hub-action{min-height:44px;background:#d3ece6;color:#244e50;border:1px solid #8db5ad}
.collection-page .hub-action:disabled{background:#eceee9;color:#58676b;border-color:#d9dcd4}.collection-page .hub-reward-row{border-color:#d8c8ac;background:#fffdf6}
.collection-page .hub-parent{background:#f7f1e5;border-color:#d8c8ac}.collection-page .hub-input{border-color:#c8b59a;background:#fffdf7;min-height:44px}.collection-page .hub-history,.collection-page .hub-manage-row{border-color:#d8c8ac}.collection-page .hub-feedback{color:#386b65}
@media(min-width:1700px){.collection-page{max-width:1500px}.collection-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:1100px){.collection-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* One horizontal category strip follows the mobile catalog; the page keeps vertical scroll. */
@media(max-width:900px){
 .collection-filters{position:sticky;top:max(6px,env(safe-area-inset-top));z-index:5;flex-wrap:nowrap;gap:8px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-padding-inline:8px;scrollbar-width:thin;padding:8px;margin:14px 0 12px;background:#f8f4e9;border:1px solid #e1d5bd;border-radius:16px;box-shadow:0 3px 8px #675a3e10}
 .collection-filter{flex:0 0 auto;white-space:nowrap}
 .collection-card,.collection-category h2{scroll-margin-top:92px}
}
@media(max-width:760px){.collection-page{padding:10px max(16px,env(safe-area-inset-right)) max(26px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}.collection-nav{min-height:48px;margin-bottom:10px}.collection-home{width:48px;height:48px}.collection-home-badge{width:44px;height:44px}.collection-logo{width:116px}.collection-page h1{font-size:34px}.collection-page h2{font-size:20px}.collection-subtitle{font-size:14px}.collection-heading{margin-bottom:17px}.collection-wallet{padding:14px;gap:8px;border-radius:18px}.collection-wallet .collection-coin{width:33px;height:33px}.collection-wallet-amount{gap:8px}.collection-balance{font-size:23px}.collection-wallet small{font-size:11px}.collection-owned-count{padding-left:11px}.collection-owned-count span{font-size:10px}.collection-owned-count strong{font-size:21px}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.collection-card{padding:10px 9px;gap:7px}.collection-page .collection-card h3{font-size:14px;min-height:2.6em}.collection-rarity{font-size:11px;padding:2px 8px}.collection-price{font-size:12px}.collection-card>.collection-button{font-size:12px}.collection-filter{font-size:12px;padding:9px 12px}.collection-tags{min-height:22px}.collection-shop-links{gap:5px}.collection-section-heading{margin:20px 0 12px}.collection-count{font-size:11px}.collection-empty{padding:20px 14px;min-height:310px}.collection-empty>img{width:150px;height:135px}.collection-empty h2{font-size:23px}.collection-dialog{padding:16px}.collection-page .hub-shell{padding:14px}.collection-page .hub-reward-row{align-items:stretch;flex-direction:column}.collection-page .hub-parent{padding:10px}}
@media(prefers-reduced-motion:reduce){.collection-page *,.collection-dialog *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Collectible Story Detail v2 — one in-place legend for Ransel and Toko. */
.collection-dialog[data-kind="story"]{width:min(770px,calc(100vw - 28px));max-height:min(92dvh,920px);padding:clamp(18px,2.4vw,30px)}
.collection-dialog[data-kind="story"]>.collection-dialog-eyebrow{text-align:center;margin:3px 0 16px}
.collection-story-layout{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(16px,2.5vw,28px);align-items:start}
.collection-story-visual{display:flex;align-items:center;flex-direction:column;gap:8px;padding:18px;border:1px solid #dac8a4;background:linear-gradient(150deg,#f1f2e7,#f8edda);border-radius:20px}
.collection-dialog[data-kind="story"] .collection-dialog-art{width:100%;margin:0}
.collection-dialog[data-kind="story"] .collection-detail-art{width:min(100%,235px);height:auto;aspect-ratio:1;object-fit:contain}
.collection-story-visual .collection-tags{margin:0}
.collection-story-visual .collection-journal-owned{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:5px 11px;background:#e4f0de;color:#3b684e;font-weight:900}
.collection-story-visual .collection-state-icon{width:21px;height:21px}
.collection-story-section{margin:0;color:#385343}
.collection-story-heading{font-size:18px;line-height:1.3;color:#4d7056;margin:0 0 8px}
.collection-story-origin{font-size:clamp(14px,1.5vw,16px);font-weight:700;line-height:1.7;margin:0;color:#455c4b}
.collection-story-lesson{margin-top:18px;padding:14px 16px;border:1px solid #bdd2ae;background:#e8f2df;border-radius:16px}
.collection-story-lesson h4{font-size:15px;line-height:1.4;color:#496b53;margin:0 0 5px}
.collection-story-lesson p{font-size:14px;line-height:1.5;color:#385343;font-weight:800;margin:0}
.collection-story-content .collection-acquired{padding:10px 12px;margin:15px 0 0;border-radius:12px;background:#f5edda;color:#745f4a;text-align:center}
.collection-story-shop-info{display:grid;gap:9px;margin-top:15px}
.collection-story-price{display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid #d9c3a0;border-radius:14px;background:#fff2d6;padding:8px 10px;margin:0;color:#796039}
.collection-story-price .collection-coin{width:29px;height:29px}
.collection-story-price strong{font-size:19px}
.collection-story-status{font-size:13px;color:#566856;margin:0;text-align:center}
.collection-story-status[data-state="insufficient"],.collection-story-status[data-state="plus"]{color:#816d53}
.collection-dialog[data-kind="story"]>.collection-note{border-top:1px solid #e6dac5;padding-top:12px;margin-top:16px!important;text-align:center}
.collection-dialog[data-kind="exchange"] .collection-story-section{width:100%;text-align:left;border:1px solid #d8c9b1;border-radius:15px;background:#fffdf8;padding:14px 16px;margin:10px 0}
.collection-dialog[data-kind="exchange"] .collection-story-origin{font-size:13px;line-height:1.6}
.collection-dialog[data-kind="exchange"] .collection-story-lesson{margin-top:12px;padding:11px 12px}
.collection-dialog[data-kind="exchange"] .collection-story-lesson p{font-size:13px}
@media(max-width:600px){
 .collection-dialog[data-kind="story"]{padding:16px;width:calc(100vw - 22px);max-height:calc(100dvh - 22px)}
 .collection-story-layout{grid-template-columns:1fr;gap:14px}
 .collection-story-visual{padding:9px 12px;gap:4px}
 .collection-dialog[data-kind="story"] .collection-detail-art{width:min(100%,156px);max-height:155px}
 .collection-story-origin{font-size:14px;line-height:1.65}
 .collection-story-lesson{margin-top:12px;padding:10px 12px}
}


/* learning-quest.css */
/* Learning Quest owns its focused surface; legacy quiz/result selectors are not used. */
body.quest-view{margin:0;padding:0;background:#edf0df;color:#263d4a;overflow:visible}
body.quest-view .shell{display:block;width:100%;max-width:none;margin:0;padding:0!important;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;overflow:visible}
body.quest-view #main{max-width:none;margin:0;padding:0;background:none}
body.quest-view #family-menu,body.quest-view>.persistent-nav,body.quest-view .shell>footer{display:none!important}
.learning-quest{min-height:100svh;padding:20px max(24px,env(safe-area-inset-right)) max(40px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));background:linear-gradient(#f4f4e0b8,#edf1e2dc),url('assets/learning-quest/backgrounds/quest-background-desktop.webp') center/cover scroll;font:400 16px/1.55 Nunito,'Segoe UI',sans-serif}
.learning-quest *{box-sizing:border-box;min-width:0}.learning-quest [hidden]{display:none!important}
.learning-quest h1,.learning-quest h2,.learning-quest p{margin:0}.learning-quest h1{font-size:30px;line-height:1.25;letter-spacing:-.02em}.learning-quest h2{font-size:20px;line-height:1.3}
.quest-nav{max-width:1120px;margin:0 auto 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}.quest-logo{width:142px;height:auto;object-fit:contain}
.quest-card{max-width:920px;margin:0 auto;padding:30px 36px;border:1.5px solid #a88e6b;border-radius:26px 23px 28px 24px;background:#fffaf0f7;box-shadow:0 6px 0 #b6a37b30,0 14px 40px #4d624b16}
.quest-heading{display:flex;gap:16px;align-items:center;margin-bottom:24px}.quest-cottage{flex:0 0 76px;width:76px;height:76px;background-image:url('assets/world/garden-buildings.webp');background-size:400% 200%;background-repeat:no-repeat;object-fit:contain}
.quest-mode{font-size:12px;color:#51776b;letter-spacing:.06em;font-weight:850}.quest-explorer{font-size:13px;color:#586e6d;margin-top:6px!important}
.quest-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}.quest-position{margin-right:auto!important;font-weight:800}.quest-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:#eaf0df;border:1px solid #c4d2b6;border-radius:20px;font-size:12px}.quest-chip img{width:26px;height:26px}.quest-timer.warning{color:#9c4f30;background:#fff0d5}
.quest-progress{display:block;width:100%;height:10px;accent-color:#80a489;margin:0 0 26px;border:0;border-radius:20px;overflow:hidden;background:#e2e8d4}.quest-progress::-webkit-progress-bar{background:#e2e8d4}.quest-progress::-webkit-progress-value{background:#80a489;border-radius:20px}
.quest-stem,.quest-explanation,.quest-choice-text,.quest-review-prompt{white-space:pre-wrap;overflow-wrap:anywhere}.quest-stem{font-size:21px;line-height:1.65;font-weight:750;margin-bottom:24px}.quest-question-image{display:block;width:auto;max-width:100%;height:auto;margin:16px auto 24px;object-fit:contain;border-radius:14px}
.quest-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.quest-option{display:flex;align-items:center;gap:12px;min-height:68px;width:100%;padding:14px;border:1.5px solid #c8b79a;border-radius:16px;background:#fffdf5;color:#293e4c;font:700 16px/1.5 Nunito,'Segoe UI',sans-serif;text-align:left;cursor:pointer;transition:background .15s,box-shadow .15s}
.quest-option[aria-pressed=true]{background:#e6f0e3;border-color:#678f77;box-shadow:0 0 0 2px #b9d6b6}.quest-token{flex:0 0 34px;width:34px;height:34px;display:grid;place-items:center;background:url('assets/learning-quest/ui/quest-answer-token.svg') center/contain no-repeat;color:#64482d;font-size:13px}.quest-option[data-feedback=correct]{background:#e7f2d9;border-color:#78a15b}.quest-option[data-feedback=wrong]{background:#fff0e6;border-color:#bf8979}
.image-options .quest-option{flex-wrap:wrap;align-content:flex-start}.quest-choice-image{display:block;width:100%;height:auto;object-fit:contain;max-height:none;border-radius:12px}.quest-answer-label{display:block;font-weight:800;margin-bottom:8px}.quest-input{display:block;width:100%;min-height:54px;padding:14px;border:1.5px solid #b4aa8f;border-radius:14px;background:#fffef8;color:#293e4c;font:400 17px/1.7 Nunito,'Segoe UI',sans-serif;resize:vertical}.quest-input:disabled{opacity:1;background:#f2f2e8}
.quest-hint{font-size:13px;color:#586c65;margin-top:10px!important;overflow-wrap:anywhere}.quest-save-state{font-size:13px;color:#4d695e;margin-top:16px!important;white-space:pre-wrap}.quest-save-state:empty{display:none}
.quest-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:flex-end;margin-top:24px}.quest-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;min-width:44px;padding:10px 18px;border:1.5px solid #8da582;border-radius:14px;background:#deebd1;color:#314f42;font:800 15px/1.4 Nunito,'Segoe UI',sans-serif;box-shadow:0 3px 0 #abc19b;cursor:pointer;transition:transform .15s,box-shadow .15s}.quest-button img{width:28px;height:28px;object-fit:contain}.quest-button.secondary{background:#fffaf0;border-color:#c5b596;box-shadow:0 3px 0 #d8cbb0}.quest-button:disabled{opacity:1;background:#eceee5;color:#667267;border-color:#d1d5c7;box-shadow:none;cursor:default}.quest-option:disabled{opacity:1;cursor:default}
@media(hover:hover){.quest-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 0 #b6c7a5}.quest-option:hover:not(:disabled){border-color:#759779;background:#f0f6e7}}
.quest-button:active:not(:disabled){transform:translateY(1px);box-shadow:none}.learning-quest :focus-visible{outline:3px solid #375d73;outline-offset:4px}
.quest-feedback{display:flex;align-items:flex-start;gap:14px;margin-top:22px;padding:18px;border:1px solid #b4c89b;border-radius:18px;background:#eff6e3}.quest-feedback[data-state=wrong],.quest-feedback[data-state=skipped]{background:#fff0e6;border-color:#dbb397}.quest-feedback-icon{width:52px;height:52px;object-fit:contain;flex:0 0 auto}.quest-feedback>div{flex:1}.quest-feedback p{margin-top:8px}.quest-feedback-book{width:72px;height:72px;object-fit:contain}.quest-answer-awards,.quest-result-awards{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}.quest-award{display:inline-flex;align-items:center;gap:7px;font-size:14px;padding:6px 10px;background:#fff8e0;border:1px solid #d9c894;border-radius:12px}.quest-award img{width:28px;height:28px}
.quest-review,.quest-insights{max-width:1080px;margin:24px auto 0;border:1px solid #c5b596;border-radius:20px;background:#fffaf1;padding:24px}.quest-review details{margin-top:12px;border-top:1px solid #dfd2ba;padding-top:12px}.quest-review summary{min-height:44px;cursor:pointer;font-weight:800}.quest-review details p{margin-top:10px}.quest-topic-row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #dfd2ba}.quest-status{color:#576e62;font-size:14px}
@media(max-width:760px){.learning-quest{padding:10px max(14px,env(safe-area-inset-right)) max(26px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));background:linear-gradient(#f3f3e1c9,#edf1e2e8),url('assets/learning-quest/backgrounds/quest-background-mobile.webp') center top/cover scroll}.quest-nav{margin-bottom:14px;gap:12px}.quest-logo{width:116px}.quest-exit{font-size:12px;padding:8px}.quest-exit img{width:26px;height:26px}.quest-card{padding:20px 18px;border-radius:22px}.quest-heading{gap:10px;margin-bottom:18px}.quest-cottage{width:54px;height:54px;flex-basis:54px}.learning-quest h1{font-size:25px}.quest-meta{gap:8px}.quest-position{font-size:14px}.quest-chip{font-size:11px}.quest-stem{font-size:18px;line-height:1.65}.quest-options{grid-template-columns:1fr;gap:12px}.image-options{grid-template-columns:repeat(2,minmax(0,1fr))}.quest-option{font-size:15px;padding:12px;min-height:60px}.quest-token{flex-basis:30px;width:30px;height:30px}.quest-actions{gap:10px}.quest-actions .quest-button{flex:1 1 auto;padding:10px 12px;font-size:13px}.quest-feedback{padding:14px;gap:10px;flex-wrap:wrap}.quest-feedback-icon{width:40px;height:40px}.quest-feedback-book{width:44px;height:44px;margin-left:auto}.quest-feedback h2{font-size:18px}.quest-review,.quest-insights{padding:18px}}
@media(prefers-reduced-motion:reduce){.learning-quest *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

.quest-divider{display:block;width:min(100%,320px);height:24px;object-fit:contain;margin:18px auto}.quest-question-list{margin-top:20px;border-top:1px solid #d8ccb6;padding-top:12px}.quest-question-list>summary{min-height:44px;font-weight:800;cursor:pointer}

.quest-review details p{white-space:pre-wrap;overflow-wrap:anywhere}

/* One storybook scene: artwork, ribbon, readable summary, then real HTML actions. */
.quest-result-page{background-image:linear-gradient(#f4f4e04d,#edf1e299),url('assets/learning-quest/backgrounds/quest-background-desktop.webp')}
.quest-complete{position:relative;isolation:isolate;display:block;max-width:1060px;padding:0 42px 28px;border:0;background:none;box-shadow:none;text-align:center}
.quest-complete::before{content:'';position:absolute;z-index:-1;inset:172px 0 0;border:1.5px solid #b49a73;border-radius:36px 30px 32px 28px;background:linear-gradient(105deg,#fff9eafa,#fffaf1f7);box-shadow:0 6px 0 #b6a37b30,0 16px 40px #4d624b1c;pointer-events:none}
.quest-result-hero{position:relative}.quest-result-art{display:flex;justify-content:center;align-items:flex-end;gap:18px;max-width:480px;margin:0 auto 8px;min-height:280px}
.quest-result-picture{position:relative;flex:0 1 236px;display:grid;place-items:center;align-self:end}
.quest-result-picture::before{content:'';position:absolute;z-index:-1;bottom:0;left:10%;width:80%;height:20px;border-radius:50%;background:#9eb1812b;filter:blur(5px);pointer-events:none}
.quest-character{display:block;width:100%;height:280px;object-fit:contain;object-position:center bottom;pointer-events:none}
.quest-medal{display:block;flex:0 1 144px;width:144px;height:144px;object-fit:contain;margin-bottom:16px;pointer-events:none}
.quest-result-caption{position:relative}.quest-result-banner{position:relative;isolation:isolate;max-width:760px;margin:auto;padding:12px 26px;border:1.5px solid #ba9565;border-radius:16px 22px 17px 20px;background:linear-gradient(175deg,#ffe6ad,#f3ce8d);box-shadow:0 4px 0 #c3a27844;color:#644328}
.quest-result-banner::before,.quest-result-banner::after{content:'';position:absolute;z-index:-1;top:14px;width:30px;height:calc(100% - 10px);background:#e9c18c;border:1px solid #b99a72;pointer-events:none}.quest-result-banner::before{left:-18px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,25% 50%)}.quest-result-banner::after{right:-18px;clip-path:polygon(0 0,100% 0,75% 50%,100% 100%,0 100%)}
.quest-complete h1{font-size:38px;line-height:1.22;overflow-wrap:anywhere}.quest-result-message{max-width:740px;margin:14px auto 0!important;color:#58684f;font-weight:750;overflow-wrap:anywhere}
.quest-result-body{max-width:740px;margin:18px auto 0}.quest-complete .quest-explorer{margin-top:2px!important}.quest-score{margin-top:8px!important;font-weight:900;font-size:24px;overflow-wrap:anywhere}
.quest-result-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}.quest-result-stats>div{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;gap:0 12px;padding:10px 14px;border:1px solid #d2c39f;background:#fffdf3;border-radius:16px}.quest-result-stats img{grid-row:1/3;width:44px;height:44px;object-fit:contain}.quest-result-stats strong{font-size:27px;line-height:1.3}.quest-result-stats span{font-size:13px}.quest-result-stats>div:nth-child(1){background:#edf2dd}.quest-result-stats>div:nth-child(2){background:#fcf0e5}
.quest-result-awards{justify-content:center;gap:14px;padding:12px;margin-top:14px;border:1px solid #dac58f;border-radius:18px;background:#fff2cd88}.quest-result-awards .quest-award{flex:1 1 160px;justify-content:center;border:0;background:none;padding:0;font-size:19px;overflow-wrap:anywhere}.quest-result-awards img{flex-shrink:0;width:42px;height:42px}
.quest-complete>.quest-actions{justify-content:center;margin-top:22px}.quest-complete>.quest-actions .quest-button{flex:1 1 180px;max-width:290px}.quest-pending{font-size:14px;color:#775c36;background:#fff0ce;border-radius:12px;padding:12px;margin-top:14px!important}.quest-complete .quest-hint{text-align:left}
.quest-complete[data-state=progress] .quest-result-banner{background:linear-gradient(175deg,#f4dfb3,#e7c994)}
.quest-complete[data-state=encourage] .quest-result-banner{background:linear-gradient(175deg,#f5d6b9,#edc6a7)}
@media(min-width:1100px){
 .quest-complete[data-state=encourage]{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:20px 30px;padding:20px 42px 28px}
 .quest-complete[data-state=encourage]::before{top:24px}
 .quest-complete[data-state=encourage] .quest-result-hero{display:contents}
 .quest-complete[data-state=encourage] .quest-result-caption{grid-column:1/-1;grid-row:1}
 .quest-complete[data-state=encourage] .quest-result-art{grid-column:1;grid-row:2;position:relative;display:block;min-height:340px;margin:0;align-self:center}
 .quest-complete[data-state=encourage] .quest-result-picture{width:calc(100% - 100px)}
 .quest-complete[data-state=encourage] .quest-character{height:340px}
 .quest-complete[data-state=encourage] .quest-medal{position:absolute;width:88px;height:88px;right:0;bottom:16px;margin:0}
 .quest-complete[data-state=encourage] .quest-result-body{grid-column:2;grid-row:2;margin:0;width:100%;align-self:center}
 .quest-complete[data-state=encourage]>.quest-actions{grid-column:1/-1;grid-row:3;margin-top:4px}
}
@media(max-width:1099px){.quest-complete{max-width:800px;padding-inline:30px}.quest-complete h1{font-size:34px}}
@media(max-width:760px){
 .quest-result-page{background-image:linear-gradient(#f3f3e15c,#edf1e2ae),url('assets/learning-quest/backgrounds/quest-background-mobile.webp')}
 .quest-complete{padding:0 18px 24px}.quest-complete::before{top:174px;border-radius:28px 25px 24px 22px}
 .quest-result-art{gap:4px;min-height:232px;margin-bottom:6px;max-width:310px}.quest-result-picture{flex-basis:190px}.quest-character{height:232px}
 .quest-medal{flex-basis:94px;width:94px;height:94px;margin-bottom:16px}.quest-complete h1{font-size:28px}.quest-result-banner{padding:11px 12px;border-radius:14px}.quest-result-banner::before{left:-12px;width:20px}.quest-result-banner::after{right:-12px;width:20px}.quest-result-message{font-size:15px;margin-top:12px!important}
 .quest-result-body{margin-top:16px}.quest-score{font-size:22px}.quest-result-stats{gap:7px;margin-top:12px}.quest-result-stats>div{display:flex;flex-direction:column;gap:0;padding:10px 4px}.quest-result-stats img{width:34px;height:34px}.quest-result-stats strong{font-size:25px}.quest-result-stats span{font-size:12px}
 .quest-result-awards{gap:8px;padding:12px 6px}.quest-result-awards .quest-award{flex:1 1 0;font-size:16px;gap:4px}.quest-result-awards img{width:32px;height:32px}.quest-complete>.quest-actions{gap:12px;margin-top:20px}.quest-complete>.quest-actions .quest-button{flex:1 1 100%;max-width:none;min-height:48px;font-size:15px}.quest-complete .quest-hint{font-size:13px}
}

/* Composite foreground and HTML content share the board/upper-card boundary.
   Percentages follow the supplied 1672 x 941 canvas: board center (49.6%, 80.1%). */
.quest-complete[data-hero=composite]{display:block;max-width:780px;padding:0;background:none;border:0;box-shadow:none;container-type:inline-size}
.quest-complete[data-hero=composite]::before{display:none}
.quest-composite-hero{position:relative;z-index:1;width:100%;aspect-ratio:1672/941;pointer-events:none}
.quest-composite-image{display:block;width:100%;height:auto;aspect-ratio:1672/941;object-fit:contain}
.quest-complete .quest-composite-title{position:absolute;left:49.6%;top:80.1%;transform:translate(-50%,-50%);width:60%;margin:0;text-align:center;font-size:clamp(18px,5.2cqw,44px);line-height:1.12;font-weight:950;color:#5c341d;text-shadow:0 1px 0 #ffe2b0;letter-spacing:-.025em;overflow-wrap:normal}
.quest-result-panel{position:relative;margin-top:-13%;padding:10% 40px 28px;border:1.5px solid #b49a73;border-radius:34px 30px 32px 28px;background:linear-gradient(105deg,#fff9eafa,#fffaf1f7);box-shadow:0 6px 0 #b6a37b30,0 16px 40px #4d624b1c}
.quest-result-panel>.quest-result-message{margin:0 auto!important;max-width:720px}.quest-result-panel>.quest-result-body{margin-top:14px}.quest-result-panel>.quest-actions{justify-content:center;margin-top:22px}.quest-result-panel>.quest-actions .quest-button{flex:1 1 180px;max-width:290px}
@media(max-width:760px){.quest-complete[data-hero=composite]{padding:0}.quest-result-panel{padding:11% 18px 24px;border-radius:24px}.quest-result-panel>.quest-result-body{margin-top:12px}.quest-result-panel>.quest-actions{gap:12px;margin-top:20px}.quest-result-panel>.quest-actions .quest-button{flex:1 1 100%;max-width:none;min-height:48px;font-size:15px}}

/* Assessment Experience v2.0 (P0) — result explanation panels fill the same
   centered storybook column, including desktop flex layouts. */
.quest-result-page>.quest-review,.quest-result-page>.quest-insights{
 box-sizing:border-box;
 flex:0 0 auto;
 align-self:center;
 width:min(100%,900px);
 max-width:900px;
 min-width:0;
 margin:20px auto 0;
}
.quest-review details{min-width:0;overflow-wrap:anywhere}
.quest-review details>summary{font-size:15px;line-height:1.5;padding:7px 0}
.quest-review-prompt{font-size:16px;line-height:1.65;font-weight:700}
.quest-review-image{
 display:block;width:auto;max-width:100%;max-height:380px;height:auto;
 margin:14px auto;border-radius:14px;object-fit:contain;
}
.quest-review-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.quest-review-choice{margin:0;padding:10px;border-radius:14px;border:1px solid #dfd2ba;background:#fffdf6}
.quest-review-choice figcaption{font-weight:750;font-size:14px}
.quest-review-choice-image{width:100%;max-height:220px;object-fit:contain;display:block;margin-top:7px}
.quest-topic-row{align-items:flex-start}
.quest-topic-row strong{flex:1;min-width:0;overflow-wrap:anywhere}
.quest-topic-row span{flex:0 0 auto;max-width:47%;text-align:right}
@media(max-width:760px){
 .quest-result-page>.quest-review,.quest-result-page>.quest-insights{margin-top:16px;padding:18px;width:100%}
 .quest-topic-row{flex-direction:column;gap:4px}
 .quest-topic-row span{max-width:none;text-align:left}
 .quest-review-choices{grid-template-columns:1fr}
}

/* Assessment v2.0 P1 — storybook review before final submission. */
.exam-review-dialog{box-sizing:border-box;width:min(650px,calc(100vw - 28px));max-width:650px;max-height:min(90dvh,880px);padding:0;overflow:auto;border:2px solid #b8a077;border-radius:26px;background:#fffbf2;color:#315043;box-shadow:0 16px 60px #263d3455}
.exam-review-dialog::backdrop{background:#203d385c;backdrop-filter:blur(3px)}
.exam-review-content{padding:clamp(18px,4vw,32px)}
.exam-review-eyebrow{font-size:12px;font-weight:850;letter-spacing:.1em;color:#7c8866;text-transform:uppercase;margin:0 0 7px}
.exam-review-content h2{font-size:clamp(23px,3vw,31px);color:#244a63;line-height:1.3;margin:0 0 10px}
.exam-review-description{font-size:15px;line-height:1.6;margin:0 0 17px}
.exam-review-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.exam-review-stats>div{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;padding:13px;border:1px solid #d4c5a6;border-radius:17px;background:#edf3e4}
.exam-review-stats>div:nth-child(2){background:#fff0df}
.exam-review-stats strong{font-size:29px;line-height:1.15;color:#28596b}
.exam-review-stats span{font-size:13px;font-weight:700}
.exam-review-caption{font-size:13px;margin:17px 0 9px;color:#667462}
.exam-review-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.exam-review-grid .quest-button{box-sizing:border-box;width:100%;min-width:0;min-height:53px;padding:9px 3px;display:flex;justify-content:center;align-items:center;gap:4px;font-size:13px;line-height:1.35;border-radius:12px}
.exam-review-grid .quest-button img{width:23px;height:23px;object-fit:contain}
.exam-review-grid .quest-button[data-status="saved"]{background:#e5f1de;border-color:#abc5a1}
.exam-review-grid .quest-button[data-status="pending"]{background:#fff5e6;border-color:#d8b894}
.exam-review-warning{font-size:13px;font-weight:750;text-align:center;color:#805f44;margin:19px 0 10px}
.exam-review-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.exam-review-actions .quest-button{flex:1 1 215px;min-height:48px;justify-content:center}
.exam-review-actions .quest-button:last-child{background:#dcecd5;border-color:#9ab58b}
.exam-review-dialog :focus-visible{outline:3px solid #578e83;outline-offset:2px}
@media(max-width:480px){.exam-review-content{padding:18px 14px}.exam-review-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.exam-review-grid .quest-button{min-height:48px;font-size:11px;flex-direction:column;gap:0}.exam-review-grid .quest-button img{width:19px;height:19px}.exam-review-actions{flex-direction:column;gap:9px}.exam-review-actions .quest-button{flex:0 0 auto;width:100%;min-height:48px}}

/* Unified Periksa Jawabanmu v2 — one Storybook numbered-grid view. */
.exam-review-dialog{width:min(800px,calc(100vw - 28px));max-width:800px}
.exam-review-content{padding:clamp(18px,3.8vw,34px)}
.exam-review-description{max-width:680px}
.exam-review-stats{margin:20px 0;gap:14px}
.exam-review-stats>div{min-height:78px}
.exam-review-stats strong{font-size:clamp(25px,3vw,34px);font-weight:900}
.exam-review-grid{gap:10px;margin:8px 0 11px}
.exam-review-grid .quest-button,.exam-review-grid .quest-button.secondary{
 display:flex;flex-direction:column-reverse;justify-content:center;align-items:center;
 gap:7px;min-width:0;width:100%;min-height:82px;padding:11px 4px;
 border:1.5px solid #c7d0ba;border-radius:14px;background:#e7efe4;
 box-shadow:none;font-weight:850;cursor:pointer
}
.exam-review-grid .quest-button>span{display:block;font-size:clamp(18px,2.1vw,24px);line-height:1.2;color:#2e4d40}
.exam-review-grid .quest-button img{width:23px;height:23px;object-fit:contain}
.exam-review-grid .quest-button[data-status="saved"]{background:#e6efe2;border-color:#b8c9ad}
.exam-review-grid .quest-button[data-status="pending"]{background:#fff3e4;border-color:#d8bca1}
.exam-review-grid .quest-button[data-current="true"]{outline:2px solid #779e88;outline-offset:1px}
.exam-review-grid .quest-button:hover{filter:brightness(.975);transform:translateY(-1px)}
.exam-review-legend{display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:center;margin:10px 0 18px}
.exam-review-legend>span{display:flex;align-items:center;gap:6px;font-size:13px;color:#566a55}
.exam-review-legend img{width:20px;height:20px;object-fit:contain}
@media(max-width:480px){
 .exam-review-grid{gap:6px}
 .exam-review-grid .quest-button,.exam-review-grid .quest-button.secondary{min-height:62px;gap:4px;padding:7px 1px;border-radius:11px}
 .exam-review-grid .quest-button>span{font-size:17px}
 .exam-review-grid .quest-button img{width:19px;height:19px}
 .exam-review-stats>div{min-height:69px}
}

/* Assessment Result & Topic Mastery v2 — scoped to assessment-only sections. */
.quest-result-page>.quest-mastery,.quest-result-page>.quest-review-learning{
 width:min(100%,900px);max-width:900px;min-width:0;box-sizing:border-box;
 align-self:center;flex:0 0 auto;margin:20px auto 0;
}
.quest-mastery-heading h2,.quest-review-learning>h2{font-size:clamp(21px,2.4vw,27px);color:#244c64;line-height:1.25}
.quest-mastery-eyebrow{font-weight:850;color:#718462;font-size:12px;letter-spacing:.075em;text-transform:uppercase;margin-bottom:5px}
.quest-mastery-intro,.quest-review-intro{font-size:15px;line-height:1.65;color:#556b5f;margin-top:8px}
.quest-mastery-list{display:grid;gap:13px;margin-top:20px}
.quest-mastery-item{background:#fffdf7;border:1px solid #ddd0b6;border-radius:18px;padding:16px 18px;min-width:0}
.quest-mastery-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.quest-mastery-top>strong{flex:1;min-width:0;overflow-wrap:anywhere;font-size:16px;color:#305349}
.quest-mastery-count{flex:0 0 auto;white-space:nowrap;font-size:13px;font-weight:800;color:#496456}
.quest-mastery-progress{display:block;width:100%;height:10px;margin:12px 0;accent-color:#87a882;border:0;border-radius:12px;overflow:hidden;background:#e8ebdc}
.quest-mastery-progress::-webkit-progress-bar{background:#e8ebdc;border-radius:12px}
.quest-mastery-progress::-webkit-progress-value{background:#88a983;border-radius:12px}
.quest-mastery-progress::-moz-progress-bar{background:#88a983;border-radius:12px}
.quest-mastery-item[data-state="support"] .quest-mastery-progress{accent-color:#d7a079}
.quest-mastery-item[data-state="support"] .quest-mastery-progress::-webkit-progress-value{background:#d7a079}
.quest-mastery-item[data-state="support"] .quest-mastery-progress::-moz-progress-bar{background:#d7a079}
.quest-mastery-feedback{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px 13px;color:#4f6c5a}
.quest-mastery-feedback strong{font-size:14px}
.quest-mastery-feedback p{font-size:13px;line-height:1.5;margin:0}
.quest-mastery-footnote{border-top:1px solid #e4d8bf;margin-top:18px;padding-top:12px;font-size:13px;line-height:1.6;color:#657365}
.quest-review-learning .quest-review-entry{border-top:1px solid #e1d4bd;padding:0;margin:0}
.quest-review-learning .quest-review-summary{display:flex;align-items:center;gap:14px;justify-content:space-between;min-height:58px;padding:12px 4px;line-height:1.5;cursor:pointer}
.quest-review-status{font-weight:800;font-size:13px;color:#506c58;background:#e7f0df;padding:5px 12px;border-radius:100px}
.quest-review-entry[data-state="wrong"] .quest-review-status,.quest-review-entry[data-state="skipped"] .quest-review-status{background:#fff0e2;color:#925d42}
.quest-review-entry[data-state="pending"] .quest-review-status{background:#f3e7ff;color:#6c5688}
.quest-review-entry-body{padding:1px 6px 22px}
.quest-review-learning .quest-review-prompt{font-size:16px;font-weight:750;line-height:1.7;margin:6px 0 13px}
.quest-review-answers{display:grid;gap:8px;margin:13px 0}
.quest-review-answers p{margin:0;padding:12px 14px;border:1px solid #dfd5bd;border-radius:12px;background:#fffdf7;line-height:1.55}
.quest-review-answers strong{color:#3d5748}
.quest-review-explanation{margin-top:12px;padding:15px;border:1px solid #c4d7b5;border-radius:14px;background:#ecf3e4}
.quest-review-explanation strong{color:#3b634c}
.quest-review-explanation p{margin-top:7px;font-size:14px;line-height:1.65;white-space:pre-wrap}
@media(max-width:760px){
 .quest-result-page>.quest-mastery,.quest-result-page>.quest-review-learning{width:100%;padding:18px}
 .quest-mastery-top{flex-direction:column;gap:4px}
 .quest-mastery-count{white-space:normal}
 .quest-mastery-item{padding:14px}
 .quest-review-learning .quest-review-summary{gap:8px}
 .quest-review-status{flex:0 0 auto}
}


/* storybook-home-handoff.css */
/* NALAROO Storybook Home Handoff v1.0
 * Show the real Explorer chooser while dashboard data loads. For direct deep
 * links / refreshes only, replace legacy UbayBian Adventure Loading visuals.
 * No artificial timer, backend/coin changes, or generated assets.
 */
.explorer-opening .explorer-play[aria-busy="true"]{
 background:linear-gradient(180deg,#a6caa9,#5f9d6d);
 border-color:#568b60;
 cursor:progress;
}
.explorer-opening .explorer-edit,
.explorer-opening .explorer-add{cursor:wait}
.explorer-handoff-error{
 width:min(560px,100%);
 margin:16px auto 0;
 padding:15px 18px;
 border:1px solid #c4a181;
 border-radius:18px;
 color:#65442c;
 background:#fffaf0f5;
 box-shadow:0 4px 14px #483c2730;
 text-align:center;
 font:600 15px/1.5 ui-rounded,system-ui,sans-serif;
}
.explorer-handoff-error p{margin:0 0 10px}
.explorer-handoff-retry{
 min-height:44px;
 padding:10px 20px;
 border:1px solid #8c9e7a;
 border-radius:15px;
 color:#27513a;
 background:#e7f0df;
 font:800 15px ui-rounded,system-ui,sans-serif;
 cursor:pointer;
}
.explorer-handoff-retry:focus-visible{outline:3px solid #3367a1;outline-offset:3px}

/* NALAROO first paint and direct Home access: never reveal the UbayBian
 * blue shell or match .loading-card, whose old selectors override theme styles.
 * Static initial splash renders even before Firebase / JS bootstraps. */
html:has(.storybook-initial-splash),
html:has(.storybook-home-placeholder),
html:has(.storybook-home-error){
 background:#e5efe7!important;
}
body:has(.storybook-initial-splash),
body:has(.storybook-home-placeholder),
body:has(.storybook-home-error){
 margin:0!important;
 padding:0!important;
 min-height:100dvh!important;
 background:linear-gradient(rgba(247,246,226,.26),rgba(224,236,214,.21)),
  url('assets/world/explorer-garden.webp') center / cover no-repeat!important;
 color:#365542;
}
body:has(.storybook-initial-splash) .shell,
body:has(.storybook-home-placeholder) .shell,
body:has(.storybook-home-error) .shell{
 width:100%!important;
 max-width:none!important;
 min-height:100dvh!important;
 margin:0!important;
 padding:0!important;
 border:0!important;
 border-radius:0!important;
 overflow:visible!important;
 box-shadow:none!important;
 background:transparent!important;
}
body:has(.storybook-initial-splash) #main,
body:has(.storybook-home-placeholder) #main,
body:has(.storybook-home-error) #main{
 display:grid!important;
 place-items:center!important;
 width:100%!important;
 min-height:100dvh!important;
 margin:0!important;
 padding:24px max(16px,env(safe-area-inset-right))!important;
 overflow:visible!important;
 background:transparent!important;
}
body:has(.storybook-initial-splash) #main::before,
body:has(.storybook-initial-splash) #main::after,
body:has(.storybook-home-placeholder) #main::before,
body:has(.storybook-home-placeholder) #main::after,
body:has(.storybook-home-error) #main::before,
body:has(.storybook-home-error) #main::after{
 display:none!important;
 content:none!important;
}
body:has(.storybook-initial-splash) .shell>footer,
body:has(.storybook-home-placeholder) .shell>footer,
body:has(.storybook-home-error) .shell>footer{
 display:none!important;
}
.storybook-initial-splash,.storybook-home-placeholder,.storybook-home-error{
 box-sizing:border-box;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 width:min(420px,calc(100vw - 32px));
 margin:auto;
 padding:27px 26px 24px;
 text-align:center;
 border:1.5px solid #bfa785;
 border-radius:24px;
 background:linear-gradient(145deg,rgba(255,253,244,.97),rgba(249,242,222,.97));
 box-shadow:0 3px 0 rgba(145,110,71,.2),0 15px 34px rgba(62,58,40,.16);
 color:#325a47;
}
.storybook-initial-splash img{
 display:block;
 width:min(220px,76%);
 height:auto;
 object-fit:contain;
}
.storybook-initial-splash p{
 margin:12px 0 0;
 font:700 15px/1.45 ui-rounded,system-ui,sans-serif;
}
.storybook-home-placeholder::before{
 content:'NALAROO STORYBOOK';
 color:#78966f;
 font:800 11px/1.3 ui-rounded,system-ui,sans-serif;
 letter-spacing:.12em;
 margin-bottom:12px;
}
.storybook-status-image{
 display:block;
 width:76px;
 height:76px;
 object-fit:contain;
 margin:0 auto 14px;
}
.storybook-home-placeholder strong,.storybook-home-error strong{
 color:#315544;
 font:900 21px/1.35 ui-rounded,'Trebuchet MS',system-ui,sans-serif;
}
.storybook-home-placeholder p,.storybook-home-error p{
 margin:9px 0 0;
 color:#5d725e;
 font:600 14px/1.5 ui-rounded,system-ui,sans-serif;
}
.storybook-home-placeholder p::after{
 content:'';
 display:block;
 width:108px;
 height:4px;
 margin:18px auto 0;
 border-radius:20px;
 background:linear-gradient(90deg,#d1c896,#7fa68b,#e6c997);
}
.storybook-home-error .storybook-return-retry{margin-top:16px}
body.storybook-returning-world #primary-navigation-hud button[data-page="home"][aria-busy="true"]{
 cursor:progress;
 background:linear-gradient(180deg,#dff1df,#afd9b4);
}
.storybook-return-error{
 position:fixed;
 z-index:200;
 left:50%;
 bottom:max(104px,calc(96px + env(safe-area-inset-bottom)));
 transform:translateX(-50%);
 width:min(470px,calc(100vw - 32px));
 box-sizing:border-box;
 margin:0;
 padding:14px 18px;
 border:1.5px solid #c4a181;
 border-radius:18px;
 color:#65442c;
 background:#fffaf2f9;
 box-shadow:0 10px 28px rgba(64,49,30,.21);
 text-align:center;
 font:600 14px/1.5 ui-rounded,system-ui,sans-serif;
}
.storybook-return-error p{margin:0 0 10px}
.storybook-return-retry{
 min-height:44px;
 padding:9px 19px;
 border:1px solid #82996b;
 border-radius:14px;
 color:#285641;
 background:#e8f2e1;
 font:800 15px ui-rounded,system-ui,sans-serif;
 cursor:pointer;
}
.storybook-return-retry:focus-visible{outline:3px solid #3864a0;outline-offset:3px}
@media(max-width:700px){
 body:has(.storybook-initial-splash),
 body:has(.storybook-home-placeholder),
 body:has(.storybook-home-error){
  background:linear-gradient(rgba(247,246,226,.24),rgba(224,236,214,.18)),
   url('assets/world/explorer-garden-portrait.webp') center / cover no-repeat!important;
 }
 .storybook-initial-splash,.storybook-home-placeholder,.storybook-home-error{padding:24px 20px}
}


/* integrated-world.css */
/* NALAROO Integrated Storybook World v1
 * Scope carefully: all learning and rewards UI stay on their existing styles.
 * Four user-approved WebP masters are rendered whole, never stretched/cropped.
 */
body.living-world-view:has(.integrated-world){background:#dce8d7;color:#354c42}
.integrated-world{height:100svh!important;min-height:0!important;overflow:hidden!important;isolation:isolate}
.integrated-world .world-landscape{
 position:absolute;inset:-12px;z-index:-2;
 background-position:center center;background-size:cover;
 filter:blur(11px) saturate(.8);opacity:.65;pointer-events:none;
}
.integrated-world[data-grade-band="g1-2"] .world-landscape{
 background-image:linear-gradient(#eaf0e7bb,#eceddaad),url('assets/world/storybook-integrated/home-desktop-g1-2.webp');
}
.integrated-world[data-grade-band="g3-6"] .world-landscape{
 background-image:linear-gradient(#eaf0e7bb,#eceddaad),url('assets/world/storybook-integrated/home-desktop-g3-6.webp');
}
.integrated-world .world-landscape::after{content:none}
.integrated-world .integrated-world-stage{
 position:absolute!important;inset:0!important;
 display:flex!important;align-items:center;justify-content:center;
 overflow:visible!important;min-width:0;min-height:0;
 cursor:default;outline-offset:-3px;touch-action:auto;
}
.integrated-world .integrated-world-canvas{
 box-sizing:border-box;
 position:relative;
 flex:0 0 auto;
 width:min(100vw,177.7778svh)!important;
 height:auto!important;
 min-width:0!important;min-height:0!important;
 max-width:100vw;
 aspect-ratio:16 / 9;
 margin:auto;isolation:isolate;
}
.integrated-world .world-artwork{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.integrated-world .world-master{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none}
.integrated-world .world-building{
 position:absolute!important;
 z-index:3;
 left:var(--ix)!important;top:var(--iy)!important;
 width:var(--iw)!important;height:var(--ih)!important;
 max-width:none!important;min-width:44px;min-height:44px;
 display:block;box-sizing:border-box;
 transform:translate(-50%,-50%)!important;translate:none!important;
 margin:0!important;padding:0!important;border:0!important;
 background:transparent!important;color:#425744!important;
 cursor:pointer;filter:none!important;overflow:visible;
 transition:none;box-shadow:none!important;
}
.integrated-world .world-building::before{
 content:'';position:absolute;inset:5% 6% 10%;
 border:2px solid transparent;border-radius:34% 29% 20% 20%;
 background:transparent;pointer-events:none;
 transition:border-color .16s,background-color .16s,transform .16s;
}
.integrated-world .world-building:hover::before,
.integrated-world .world-building:focus-visible::before{
 border-color:#fff5db;background:rgba(233,245,209,.18);
 transform:scale(1.035);box-shadow:0 0 0 2px #6f95648c;
}
.integrated-world .world-building:focus-visible{outline:0!important}
.integrated-world .world-building-label{
 box-sizing:border-box;
 position:absolute!important;
 display:flex!important;align-items:center;justify-content:center;
 left:50%;bottom:-4px;
 transform:translate(-50%,60%);
 width:max-content!important;max-width:126%;min-width:75px;
 margin:0!important;
 padding:5px 12px!important;min-height:28px!important;
 font:900 clamp(11px,1.08vw,16px)/1.17 Nunito,system-ui,sans-serif!important;
 color:#395646;background:linear-gradient(165deg,#fffaf0f5,#f7e8cafa)!important;
 border:1.4px solid #aa9271!important;
 border-radius:14px 17px 14px 16px!important;
 box-shadow:0 2px 0 #9d7e584c,0 4px 8px #5b443522!important;
 text-shadow:none!important;white-space:nowrap;pointer-events:none;
 text-align:center;
}
.integrated-world .world-hud{z-index:7;top:max(12px,env(safe-area-inset-top))}
.integrated-world .world-identity{
 background:#fffbf0f0;border:1px solid #b8a184;
 color:#3d5948;box-shadow:0 3px 10px #55483527;
}
.integrated-world .world-profile-copy strong,
.integrated-world .world-profile-copy>span,
.integrated-world .world-profile-copy small{color:#3e5846}
.integrated-world .world-xp::-webkit-progress-bar{background:#9eb5a2}
.integrated-world .world-xp::-webkit-progress-value{background:#83ad8b}
.integrated-world .world-coins{
 color:#385645;background:#fffaf0ec;border:1px solid #b4a080;
 box-shadow:0 2px 8px #67553d2d;
}
.integrated-world .world-robot,
.integrated-world .world-explorer{display:none!important}
.integrated-world .world-tip{display:none}
.integrated-world .world-pan-hint{color:#3d5948;background:#fffaf0eb;border:1px solid #baa58b}
.integrated-world .world-dialog{background:#fffaf0;border:2px solid #bda786;color:#304f43}
.integrated-world .world-action{background:#668c70;border-color:#587960}
.integrated-world .world-action.secondary{background:#faefda;color:#3e5846;border-color:#b5a183}
@media(orientation:portrait){
 .integrated-world .integrated-world-canvas{
  width:min(100vw,56.25svh)!important;
  max-width:100vw;
  aspect-ratio:9 / 16;
 }
 .integrated-world .world-building{
  left:var(--imx)!important;top:var(--imy)!important;
  width:var(--imw)!important;height:var(--imh)!important;
 }
 .integrated-world[data-grade-band="g1-2"] .world-landscape{
  background-image:linear-gradient(#eaf0e7c4,#eceddaad),url('assets/world/storybook-integrated/home-mobile-g1-2.webp');
 }
 .integrated-world[data-grade-band="g3-6"] .world-landscape{
  background-image:linear-gradient(#eaf0e7c4,#eceddaad),url('assets/world/storybook-integrated/home-mobile-g3-6.webp');
 }
 .integrated-world .world-building-label{
  font-size:clamp(9px,2.4vw,12px)!important;
  min-width:62px;max-width:116%;
  min-height:25px!important;padding:4px 7px!important;
  transform:translate(-50%,54%);
  bottom:-1px;
  border-radius:12px!important;
 }
 .integrated-world .world-building-pancasila .world-building-label,
 .integrated-world .world-building-bahasa-indonesia .world-building-label{font-size:clamp(8px,2.2vw,11px)!important}
 .integrated-world .world-hud{top:max(7px,env(safe-area-inset-top))}
}
@media(orientation:landscape) and (max-height:620px){
 .integrated-world .integrated-world-stage{
  inset:60px 0 58px!important;
  display:block!important;overflow:auto!important;
  scrollbar-width:thin;touch-action:pan-x pan-y;cursor:grab;
 }
 .integrated-world .integrated-world-stage.world-panning{cursor:grabbing}
 .integrated-world .integrated-world-canvas{
  width:1120px!important;height:630px!important;
  min-width:1120px!important;min-height:630px!important;
  max-width:none;aspect-ratio:16 / 9;margin:0!important;
 }
 .integrated-world .world-building-label{
  font-size:13px!important;min-height:28px!important;
 }
}
@media(prefers-reduced-motion:reduce){
 .integrated-world .world-building::before{transition:none!important}
}
/* KALIBRASI POSISI LABEL DESKTOP */

@media (min-width: 701px) and (orientation: landscape) {

  /* Matematika */
  .integrated-world .world-building-math .world-building-label {
    translate: 20px -40px;
  }

  /* PAI & BP */
  .integrated-world .world-building-paibp .world-building-label {
    translate: 20px -35px;
  }

  /* Bahasa Indonesia */
  .integrated-world .world-building-bahasa-indonesia .world-building-label {
    translate: 0px -30px;
  }

  /* Bahasa Inggris */
  .integrated-world .world-building-english .world-building-label {
    translate: 0px -40px;
  }

  /* Pendidikan Pancasila */
  .integrated-world .world-building-pancasila .world-building-label {
    translate: 0px 0px;
  }

  /* Taman Bermain */
  .integrated-world .world-building-games .world-building-label {
    translate: 0px 0px;
  }

  /* IPAS — Kelas 3–6 */
  .integrated-world .world-building-science .world-building-label {
    translate: 35px -20px;
  }
}
/* KALIBRASI POSISI LABEL MOBILE PORTRAIT */

@media (orientation: portrait) and (max-width: 700px) {

  /* Matematika */
  .integrated-world .world-building-math .world-building-label {
    translate: 40px -20px;
  }

  /* PAI & BP */
  .integrated-world .world-building-paibp .world-building-label {
    translate: 0px -20px;
  }

  /* Bahasa Indonesia */
  .integrated-world .world-building-bahasa-indonesia .world-building-label {
    translate: 0px 0px;
  }

  /* Bahasa Inggris */
  .integrated-world .world-building-english .world-building-label {
    translate: 0px 0px;
  }

  /* Pendidikan Pancasila */
  .integrated-world .world-building-pancasila .world-building-label {
    translate: 0px 0px;
  }

  /* Taman Bermain */
  .integrated-world .world-building-games .world-building-label {
    translate: 0px 0px;
  }

  /* IPAS — Kelas 3–6 */
  .integrated-world .world-building-science .world-building-label {
    translate: 0px 0px;
  }
}

/* NALAROO — Desktop Home Full-Bleed World v1.0
 * Desktop 16:9 master and its % hotspots are children of the SAME canvas.
 * Widen that entire canvas to cover desktop displays wider than 16:9.
 * For super-ultrawide (>21:9), stop at 21:9 to keep all cottage/plaza
 * hit areas visible and centered instead of cropping essential controls.
 * Short landscape, mobile and tablet masters keep their own sizing below.
 */
@media (min-width:1100px) and (min-height:621px) and (orientation:landscape) and (min-aspect-ratio:16/9) and (hover:hover) and (pointer:fine){
 .integrated-world .integrated-world-canvas{
  width:min(100vw,233.3333svh)!important;
  max-width:none!important;
  /* The master image and absolutely-positioned hotspots scale together. */
 }
}

/* Tablet Masters v1 — the user-approved 3:4 / 4:3 illustrations are the
 * actual interactive artwork, not a blurred copy of desktop/mobile art.
 * The canvas and hotspots always scale together, so crop at odd tablet
 * aspect ratios is symmetric and does not desynchronize hit targets.
 * This media contract exactly matches <picture> in living-world.js.
 */
@media (min-width:701px) and (any-pointer:coarse){
 .integrated-world{background:#dce8d7!important}
 .integrated-world .world-landscape{display:none!important}
 .integrated-world .integrated-world-stage{
  inset:0!important;display:flex!important;align-items:center!important;justify-content:center!important;
  overflow:hidden!important;touch-action:manipulation;cursor:default;
 }
 /* Cover without distortion. Example: 16:10 tablets trim only peripheral sky/water. */
 .integrated-world .integrated-world-canvas{
  flex:0 0 auto;width:max(100vw,133.3333svh)!important;height:auto!important;
  min-width:0!important;min-height:0!important;max-width:none!important;
  aspect-ratio:4 / 3;margin:0!important;
 }
 .integrated-world .world-building{
  left:var(--itlx)!important;top:var(--itly)!important;
  width:var(--itlw)!important;height:var(--itlh)!important;
 }
 .integrated-world .world-building-label{
  translate:none!important;min-width:70px;min-height:28px!important;
  padding:4px 8px!important;font-size:clamp(11px,1.3vw,16px)!important;
  max-width:120%;
 }
}
@media (min-width:701px) and (any-pointer:coarse) and (orientation:portrait){
 .integrated-world .integrated-world-canvas{
  width:max(100vw,75svh)!important;max-width:none!important;
  aspect-ratio:3 / 4;
 }
 
 .integrated-world .world-building{
  left:var(--itpx)!important;top:var(--itpy)!important;
  width:var(--itpw)!important;height:var(--itph)!important;
 }
 .integrated-world .world-building-label{
  min-width:70px;font-size:clamp(11px,1.7vw,16px)!important;
 }
 /* Lift upper badges clear of the second cottage row. */
 .integrated-world .world-building-math .world-building-label,
 .integrated-world .world-building-science .world-building-label,
 .integrated-world .world-building-paibp .world-building-label{translate:0 -14px!important}
}
/* ========================================
   KALIBRASI LABEL TABLET PORTRAIT
   KELAS 1–2
   ======================================== */

@media (min-width:701px)
       and (any-pointer:coarse)
       and (orientation:portrait) {

  /* Matematika */
  .integrated-world[data-grade-band="g1-2"]
  .world-building-math .world-building-label {
    translate: 0px -50px !important;
  }

  /* PAI & BP */
  .integrated-world[data-grade-band="g1-2"]
  .world-building-paibp .world-building-label {
    translate: 0px -50px !important;
  }

  /* Bahasa Indonesia */
  .integrated-world[data-grade-band="g1-2"]
  .world-building-bahasa-indonesia .world-building-label {
    translate: 0px -50px !important;
  }

  /* Bahasa Inggris */
  .integrated-world[data-grade-band="g1-2"]
  .world-building-english .world-building-label {
    translate: 0px -50px !important;
  }

  /* Pendidikan Pancasila */
  .integrated-world[data-grade-band="g1-2"]
  .world-building-pancasila .world-building-label {
    translate: 0px -50px !important;
  }

  /* Taman Bermain */
  .integrated-world[data-grade-band="g1-2"]
  .world-building-games .world-building-label {
    translate: 0px -20px !important;
  }
}
/* ========================================
   KALIBRASI LABEL TABLET PORTRAIT
   KELAS 3–6
   ======================================== */

@media (min-width: 701px)
       and (any-pointer: coarse)
       and (orientation: portrait) {

  /* Matematika */
  .integrated-world[data-grade-band="g3-6"]
  .world-building-math .world-building-label {
    translate: 0px -10px !important;
  }

  /* IPAS */
  .integrated-world[data-grade-band="g3-6"]
  .world-building-science .world-building-label {
    translate: 0px -25px !important;
  }

  /* PAI & BP */
  .integrated-world[data-grade-band="g3-6"]
  .world-building-paibp .world-building-label {
    translate: 0px 0px !important;
  }

  /* Bahasa Indonesia */
  .integrated-world[data-grade-band="g3-6"]
  .world-building-bahasa-indonesia .world-building-label {
    translate: 0px 0px !important;
  }

  /* Bahasa Inggris */
  .integrated-world[data-grade-band="g3-6"]
  .world-building-english .world-building-label {
    translate: 0px 0px !important;
  }

  /* Pendidikan Pancasila */
  .integrated-world[data-grade-band="g3-6"]
  .world-building-pancasila .world-building-label {
    translate: 0px -25px !important;
  }

  /* Taman Bermain */
  .integrated-world[data-grade-band="g3-6"]
  .world-building-games .world-building-label {
    translate: 0px -10px !important;
  }
 }
/* ========================================
   KALIBRASI LABEL TABLET LANDSCAPE
   KELAS 1–2
   ======================================== */

@media (min-width: 701px)
       and (any-pointer: coarse)
       and (orientation: landscape) {

  /* Matematika */
  .integrated-world[data-grade-band="g1-2"]
  .world-building-math .world-building-label {
    translate: 0px 0px !important;
  }

  /* PAI & BP */
  .integrated-world[data-grade-band="g1-2"]
  .world-building-paibp .world-building-label {
    translate: 0px 0px !important;
  }

  /* Bahasa Indonesia */
  .integrated-world[data-grade-band="g1-2"]
  .world-building-bahasa-indonesia .world-building-label {
    translate: 0px -60px !important;
  }

  /* Bahasa Inggris */
  .integrated-world[data-grade-band="g1-2"]
  .world-building-english .world-building-label {
    translate: 0px -50px !important;
  }

  /* Pendidikan Pancasila */
  .integrated-world[data-grade-band="g1-2"]
  .world-building-pancasila .world-building-label {
    translate: 0px -30px !important;
  }

  /* Taman Bermain */
  .integrated-world[data-grade-band="g1-2"]
  .world-building-games .world-building-label {
    translate: 0px 0px !important;
  }
 }


/* storybook-universe.css */
/* NALAROO Storybook Universe — calm parchment reading experience, isolated from learning UI. */
body.storybook-view{background:#edf1e7;color:#354f43}
body.storybook-view .topbar{display:none!important}
body.storybook-view .shell{width:100%;max-width:none;min-height:100svh;margin:0}
body.storybook-view #main{width:100%;max-width:none;margin:0;padding:0;min-height:100svh}
body.storybook-view .shell>footer{display:none}
.storybook-universe{box-sizing:border-box;min-height:100svh;padding:clamp(16px,3vw,34px) 18px 135px;background:radial-gradient(ellipse at top,#faf5e7 0%,#eef2e6 70%);font:700 16px/1.55 Nunito,system-ui,sans-serif;color:#385044}
.storybook-universe *{box-sizing:border-box}
.storybook-book{width:min(980px,100%);margin:0 auto}
.storybook-back,.storybook-inline-back{font:800 14px Nunito,system-ui,sans-serif;color:#476c53;cursor:pointer;border:1px solid #b2bca3;border-radius:15px;background:#fffaf0;padding:10px 16px;min-height:44px;box-shadow:0 3px 9px #6b6c4424}
.storybook-back{display:block;margin:0 auto 18px;max-width:980px;width:100%;text-align:left}
.storybook-inline-back{margin-bottom:17px}
.storybook-universe button:focus-visible{outline:3px solid #547c5a;outline-offset:3px}
.storybook-heading{text-align:center;padding:26px 20px 22px;border:2px solid #d6c7a9;border-radius:24px;background:linear-gradient(145deg,#fffbf2,#f6ebd7);box-shadow:0 7px 18px #79604418}
.storybook-eyebrow{color:#7c8865;letter-spacing:.08em;text-transform:uppercase;font-size:12px;font-weight:900;margin:0 0 8px}
.storybook-heading h1{font-size:clamp(26px,4vw,41px);line-height:1.2;color:#405d46;margin:0}
.storybook-welcome{font-size:14px;color:#6b705d;margin:12px 0 0}
.storybook-shelf{display:grid;grid-template-columns:1fr 1fr;gap:21px;margin:24px 0}
.storybook-tile{display:flex;flex-direction:column;overflow:hidden;border:2px solid #c5b38e;border-radius:23px;background:#fffaf0;text-align:left;padding:0;cursor:pointer;color:#365042;box-shadow:0 6px 16px #6c654126;min-height:330px;transition:transform .18s,box-shadow .18s}
.storybook-tile:hover,.storybook-item-card:hover{transform:translateY(-3px);box-shadow:0 9px 19px #6c654139}
.storybook-tile-visual{display:block;width:100%;height:235px;object-fit:cover;background:#d9e5ca;overflow:hidden}
.storybook-tile-visual img{display:block;width:100%;height:100%;object-fit:cover}
.storybook-tile-body{display:grid;gap:6px;padding:17px 20px 21px}
.storybook-tile-body strong{font-size:21px;line-height:1.2;color:#385844}
.storybook-tile-body span{font-size:13px;font-weight:700;color:#777660}
.storybook-reading-note{font-size:12px;line-height:1.5;color:#7c796d;margin:16px 0;text-align:center}
.storybook-section-copy{font-size:15px;line-height:1.6;margin:22px auto;color:#65755e;text-align:center;max-width:650px}
.storybook-filters{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;padding:5px 1px 13px}
.storybook-filter{flex:0 0 auto;min-height:42px;border:1px solid #b6b69d;border-radius:16px;padding:8px 13px;background:#fffaf0;color:#3e5a44;font:800 13px Nunito,system-ui;cursor:pointer}
.storybook-filter[aria-pressed=true]{background:#d7e8d1;border-color:#729a7a;color:#345b3f}
.storybook-collection-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:12px 0 30px}
.storybook-item-card{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;min-height:218px;padding:12px 8px 16px;cursor:pointer;text-align:center;border:1.5px solid #d2c2a5;border-radius:20px;background:#fffcf4;color:#365042;box-shadow:0 3px 10px #74644818;transition:transform .18s,box-shadow .18s}
.storybook-item-art{display:block;width:100%;height:140px;object-fit:contain}
.storybook-item-card strong{font:900 14px/1.3 Nunito,system-ui;overflow-wrap:anywhere}
.storybook-item-card span{font:700 11px Nunito,system-ui;color:#72806b}
.storybook-item-detail{display:grid;grid-template-columns:minmax(200px,.8fr) minmax(0,1.2fr);gap:30px;align-items:start;margin:0;padding:clamp(18px,3vw,35px);background:#fffaf0;border:2px solid #d3bfa0;border-radius:26px;box-shadow:0 7px 23px #6f5a4f1f}
.storybook-item-illustration{display:grid;place-items:center;min-height:260px;padding:10px;background:linear-gradient(160deg,#edf1e3,#f6ead7);border:1px solid #cfbea0;border-radius:20px}
.storybook-item-illustration img{display:block;width:100%;max-width:320px;height:auto;aspect-ratio:1;object-fit:contain}
.storybook-item-prose h1{font-size:clamp(25px,3vw,38px);margin:0 0 20px;line-height:1.15;color:#405f4a}
.storybook-item-prose h2{font-size:19px;margin:14px 0 8px;color:#536f54}
.storybook-story-text{font-size:clamp(16px,1.9vw,20px);font-weight:700;line-height:1.75;color:#4b5d4f;margin:0}
.storybook-lesson{padding:14px 17px;margin:23px 0 0;border:1px solid #bcd2af;border-radius:18px;background:#e9f3df}
.storybook-lesson h2{margin:0 0 6px}.storybook-lesson p{margin:0;font-size:16px}
.storybook-scene{display:grid;gap:7px;margin:14px 0 25px;background:#f2efdc;border:1px solid #d2c6ac;border-radius:18px;overflow:hidden;box-shadow:0 3px 12px #74644820}
.storybook-scene-image{display:block;width:100%;aspect-ratio:16 / 9;height:auto;object-fit:contain;background:#e7eddd}
.storybook-scene-caption{font:800 12px/1.4 Nunito,system-ui,sans-serif;color:#68765f;text-align:center;padding:0 10px 10px}
.storybook-reader:focus-visible{outline:3px solid #638c69;outline-offset:3px}
.storybook-reader{padding:clamp(20px,4vw,48px);margin:0 auto;max-width:800px;min-height:285px;border:2px solid #d5be9e;border-radius:21px;background:#fffcf5;box-shadow:0 5px 18px #866e5421;text-align:center}
.storybook-page-number{font-size:12px;color:#8c8b74;letter-spacing:.08em;margin:0 0 12px}
.storybook-reader h2{font-size:clamp(22px,3vw,32px);line-height:1.2;color:#486447;margin:0 0 22px}
.storybook-reader .storybook-story-text{max-width:670px;margin:0 auto}
.storybook-turns{display:flex;justify-content:space-between;gap:12px;margin-top:34px}
.storybook-action{border:1px solid #557b5b;border-radius:14px;padding:12px 17px;min-height:44px;background:#638c69;color:white;font:900 14px Nunito,system-ui;cursor:pointer}
.storybook-action.secondary{background:#fff9ea;color:#4b6950;border-color:#b9bb9b}
.storybook-action:disabled{opacity:.45;cursor:default}
.integrated-world .world-storybook-plaza{
 position:absolute;z-index:4;left:var(--ix);top:var(--iy);width:var(--iw);height:var(--ih);
 transform:translate(-50%,-50%);box-shadow:none!important;background:transparent!important;
 border:0!important;border-radius:40%;padding:0;margin:0;cursor:pointer;min-width:44px;min-height:44px
}
.integrated-world .world-storybook-plaza::before{content:'';position:absolute;inset:3% 12% 18%;border:2px solid transparent;border-radius:48%;pointer-events:none;transition:border-color .18s,background .18s}
.integrated-world .world-storybook-plaza:hover::before,.integrated-world .world-storybook-plaza:focus-visible::before{border-color:#faf0ca;background:#fcf9d52a}
.integrated-world .world-storybook-plaza:focus-visible{outline:3px solid #fff6d4;outline-offset:2px}
.integrated-world .storybook-plaza-label{position:absolute;bottom:-7%;left:50%;transform:translateX(-50%);padding:5px 11px;border:1px solid #ad9770;border-radius:15px;background:#fffaf0f2;color:#395948;font:900 clamp(10px,1.05vw,15px)/1.2 Nunito,system-ui;white-space:nowrap;box-shadow:0 2px 8px #4d412c2e;pointer-events:none}
@media(orientation:portrait){
 .integrated-world .world-storybook-plaza{left:var(--imx);top:var(--imy);width:var(--imw);height:var(--imh)}
 .integrated-world .storybook-plaza-label{font-size:clamp(9px,2.1vw,12px);padding:4px 8px}
}
@media(min-width:701px) and (any-pointer:coarse){
 .integrated-world .world-storybook-plaza{left:var(--itlx);top:var(--itly);width:var(--itlw);height:var(--itlh)}
}
@media(min-width:701px) and (any-pointer:coarse) and (orientation:portrait){
 .integrated-world .world-storybook-plaza{left:var(--itpx);top:var(--itpy);width:var(--itpw);height:var(--itph)}
}
@media(max-width:700px){
 .storybook-universe{padding:12px 12px 116px}
 .storybook-shelf{grid-template-columns:1fr;gap:15px}
 .storybook-tile{min-height:0}
 .storybook-tile-visual{height:185px}
 .storybook-collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
 .storybook-item-card{min-height:188px}
 .storybook-item-art{height:115px}
 .storybook-item-detail{grid-template-columns:1fr;gap:12px}
 .storybook-item-illustration{min-height:180px}
 .storybook-item-illustration img{max-width:220px}
 .storybook-turns{gap:7px}
 .storybook-turns button{font-size:12px;padding:10px 11px}
}
@media(prefers-reduced-motion:reduce){.storybook-tile,.storybook-item-card,.integrated-world .world-storybook-plaza::before{transition:none}}

/* Books are for illustrated village stories; collectible lore lives in Toko/Ransel. */
.storybook-shelf.storybook-stories{grid-template-columns:minmax(0,1fr);max-width:640px;margin-inline:auto}

/* NALAROO — The Living Storybook v2.0: Library & Immersive Reader.
   Artwork and editorial content are unchanged; no decorative animation. */
.storybook-universe{padding:clamp(16px,2.5vw,30px) clamp(12px,2.5vw,24px) 126px}
.storybook-book{width:min(1140px,100%)}
.storybook-heading{padding:23px 24px 24px}
.storybook-heading h1{font-size:clamp(27px,3.4vw,42px)}
.storybook-heading-compact{padding:18px 22px 19px;margin-bottom:18px}
.storybook-heading-compact h1{font-size:clamp(24px,2.8vw,34px)}
.storybook-heading-compact .storybook-welcome{margin-top:7px;font-size:13px}
.storybook-inline-back{display:inline-flex;align-items:center;margin:0 0 14px;min-height:44px}
.storybook-universe .storybook-shelf.storybook-stories{
 display:grid;grid-template-columns:minmax(0,1fr);max-width:920px;
 margin:24px auto 16px
}
.storybook-shelf.storybook-stories .storybook-tile{
 display:grid;grid-template-columns:minmax(0,1.17fr) minmax(0,.83fr);
 min-height:320px;align-items:stretch
}
.storybook-shelf.storybook-stories .storybook-tile-visual{
 width:100%;height:100%;min-height:320px;max-height:none
}
.storybook-shelf.storybook-stories .storybook-tile-visual img{
 width:100%;height:100%;object-fit:cover;object-position:center
}
.storybook-shelf.storybook-stories .storybook-tile-body{
 display:flex;flex-direction:column;justify-content:center;gap:15px;
 min-width:0;padding:clamp(21px,3vw,34px)
}
.storybook-shelf.storybook-stories .storybook-tile-kicker{
 font-size:11px;letter-spacing:.08em;text-transform:uppercase;
 color:#7c896b;font-weight:900
}
.storybook-shelf.storybook-stories .storybook-tile-body strong{
 font-size:clamp(24px,2.5vw,32px);line-height:1.18;color:#395948
}
.storybook-shelf.storybook-stories .storybook-tile-description{
 font-size:15px;line-height:1.65;font-weight:650;color:#627466
}
.storybook-shelf.storybook-stories .storybook-tile-cta{
 display:inline-flex;align-self:flex-start;align-items:center;justify-content:center;
 min-height:46px;padding:10px 22px;background:#65896b;color:#fffaf0;
 font-size:15px;font-weight:900;border-radius:14px
}
.storybook-reading-note{font-weight:650;font-size:13px;max-width:780px;margin:18px auto}
.storybook-reader{
 width:100%;max-width:1140px;padding:clamp(19px,3vw,34px);
 border-radius:26px;text-align:left
}
.storybook-reader-head{text-align:center;margin-bottom:22px}
.storybook-page-number{font-size:12px;letter-spacing:.09em;font-weight:900;color:#7e8b70;margin:0 0 7px}
.storybook-reader .storybook-page-title{
 font-size:clamp(24px,2.8vw,33px);line-height:1.2;color:#446448;
 margin:0 0 14px
}
.storybook-page-progress{
 display:block;appearance:auto;width:min(360px,100%);
 height:9px;margin:0 auto;accent-color:#7d9e77;
 border-radius:100px;overflow:hidden
}
.storybook-page-progress::-webkit-progress-bar{background:#e8e7d4;border-radius:100px}
.storybook-page-progress::-webkit-progress-value{background:#88ab82;border-radius:100px}
.storybook-spread{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:0;align-items:stretch}
.storybook-spread .storybook-scene{
 display:block;margin:0;border-radius:20px 0 0 20px;
 border:1px solid #d5c3a3;border-right:0;box-shadow:none;
 background:#eff1e5;min-width:0;overflow:hidden
}
.storybook-spread .storybook-scene-image{
 display:block;width:100%;height:100%;min-height:330px;aspect-ratio:auto;
 max-height:440px;object-fit:contain;background:#e9eee3
}
.storybook-scene-caption:not([hidden]){padding:7px 10px;font-size:12px}
.storybook-story-panel{
 display:flex;align-items:center;justify-content:center;
 padding:clamp(20px,3vw,36px);border:1px solid #d5c3a3;
 border-radius:0 20px 20px 0;background:#f8f1e3;min-width:0
}
.storybook-reader .storybook-story-text{
 max-width:46ch;margin:0;font-size:clamp(17px,1.55vw,19px);
 font-weight:650;line-height:1.75;text-align:left;overflow-wrap:break-word
}
.storybook-turns{margin-top:24px;align-items:center;gap:14px}
.storybook-turns .storybook-action{min-height:47px;padding:11px 20px}
@media(max-width:900px){
 .storybook-spread{grid-template-columns:minmax(0,1fr)}
 .storybook-spread .storybook-scene{border-right:1px solid #d5c3a3;border-radius:18px 18px 0 0}
 .storybook-spread .storybook-scene-image{height:auto;min-height:0;max-height:none;aspect-ratio:16 / 9}
 .storybook-story-panel{border-top:0;border-radius:0 0 18px 18px;padding:24px 26px}
 .storybook-reader .storybook-story-text{max-width:62ch}
}
@media(max-width:700px){
 .storybook-universe{padding:12px 12px 112px}
 .storybook-heading{padding:21px 14px}
 .storybook-heading-compact{padding:16px 12px}
 .storybook-universe .storybook-shelf.storybook-stories{margin:17px auto 12px}
 .storybook-shelf.storybook-stories .storybook-tile{grid-template-columns:minmax(0,1fr);min-height:0}
 .storybook-shelf.storybook-stories .storybook-tile-visual{height:220px;min-height:0}
 .storybook-shelf.storybook-stories .storybook-tile-body{padding:19px 21px 22px;gap:10px}
 .storybook-shelf.storybook-stories .storybook-tile-body strong{font-size:24px}
 .storybook-shelf.storybook-stories .storybook-tile-cta{min-height:44px}
 .storybook-reader{padding:14px 13px 19px;border-radius:22px}
 .storybook-reader-head{margin-bottom:16px}
 .storybook-reader .storybook-page-title{font-size:clamp(22px,6.2vw,28px)}
 .storybook-story-panel{padding:20px 18px}
 .storybook-reader .storybook-story-text{font-size:17px;line-height:1.7;max-width:none}
 .storybook-turns{margin-top:20px;gap:10px}
 .storybook-turns button{font-size:13px;padding:10px 13px}
}
@media(max-width:360px){
 .storybook-shelf.storybook-stories .storybook-tile-visual{height:185px}
 .storybook-turns button{font-size:12px;padding:9px}
}
@media(prefers-reduced-motion:reduce){
 .storybook-tile{transition:none}
}

/* Living Storybook v2 — Stage 3: editorial rhythm, no ambient motion. */
.storybook-reader .storybook-story-text{
 font-size:clamp(16px,1.42vw,18px);
 font-weight:650;line-height:1.67;max-width:49ch;
}
.storybook-story-paragraph{margin:0 0 14px}
.storybook-story-paragraph:last-child{margin-bottom:0}
.storybook-story-panel{padding:clamp(17px,2vw,28px)}
@media(max-width:900px){
 .storybook-reader .storybook-story-text{max-width:62ch;line-height:1.7}
 .storybook-story-paragraph{margin-bottom:13px}
}
@media(max-width:700px){
 .storybook-reader .storybook-story-text{font-size:17px;line-height:1.72}
 .storybook-story-paragraph{margin-bottom:13px}
}


/* explorer-ribbon.css */
/* NALAROO Explorer Ribbon v3.1 — one storybook HUD across desktop, tablet and mobile.
 * Only the Home Living World is affected. The global Family Menu retains its
 * original <details> element, click handlers and accessible name outside #main.
 */
.world-ribbon-brand,.world-ribbon-family-space{display:none}
body.living-world-view:has(.integrated-world){
  --ribbon-width:min(1280px,calc(100vw - 40px));
  --ribbon-top:max(14px,env(safe-area-inset-top));
  --ribbon-family-inset:16px;
  --ribbon-family-top:12px;
  --ribbon-family-size:64px;
}
body.living-world-view .integrated-world .world-hud{
  box-sizing:border-box;
  position:absolute;left:50%;right:auto;top:var(--ribbon-top);
  transform:translateX(-50%);
  width:var(--ribbon-width);height:88px;
  display:grid;grid-template-columns:minmax(240px,1fr) 250px minmax(240px,1fr);
  align-items:center;gap:16px;padding:8px 16px;
  border:1px solid #B7A080;
  border-radius:32px 39px 31px 36px / 33px 34px 30px 31px;
  background:linear-gradient(176deg,#fffbf2 0%,#F8F2E4 65%,#f3e8d4 100%);
  box-shadow:inset 0 1px 0 #fffdf5,0 3px 0 #b7a08024,0 7px 18px #79604424;
  pointer-events:none;
}
body.living-world-view .integrated-world .world-hud::before{
  content:'';position:absolute;inset:4px;border:1px solid #b7a08030;
  border-radius:inherit;pointer-events:none;
}
body.living-world-view .integrated-world .world-identity{
  box-sizing:border-box;display:flex;align-items:center;
  min-width:0;max-width:none;width:100%;height:70px;
  gap:12px;padding:0 20px 0 0;border:0;border-radius:0;
  border-right:1px solid #b7a08055;
  background:transparent;box-shadow:none;
}
body.living-world-view .integrated-world .world-avatar{
  flex:0 0 auto;width:64px;height:64px;object-fit:contain;
  background:#DCE8CF;border:1px solid #B7A080;
  border-radius:49% 51% 48% 52%;
}
body.living-world-view .integrated-world .world-profile-copy{
  flex:1;min-width:0;gap:2px;
}
body.living-world-view .integrated-world .world-profile-copy strong{
  display:block;max-width:none;
  font-size:20px;line-height:1.15;color:#244665;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
body.living-world-view .integrated-world .world-profile-copy>span{
  display:block;font-size:12px;line-height:1.35;color:#3E5948;
}
body.living-world-view .integrated-world .world-profile-copy small{
  display:block;font-size:10px;line-height:1.2;color:#3E5948;
}
body.living-world-view .integrated-world .world-xp{
  display:block;width:100%;max-width:230px;height:8px;margin:3px 0;
  border:1px solid #b7a08080;background:#e9dfca;
  color:#8aad79;accent-color:#8aad79;
}
body.living-world-view .integrated-world .world-xp::-webkit-progress-bar{background:#e9dfca}
body.living-world-view .integrated-world .world-xp::-webkit-progress-value{background:#8aad79}
body.living-world-view .integrated-world .world-xp::-moz-progress-bar{background:#8aad79}
/* Keep the ribbon brand visible; the generic rule above hides it outside Home. */
body.living-world-view .world-ribbon-brand{
  display:block;justify-self:center;
  width:250px;height:70px;overflow:hidden;
}
body.living-world-view .world-ribbon-logo{
  display:block;width:100%;height:100%;object-fit:contain;object-position:center;
}
body.living-world-view .integrated-world .world-coins{
  box-sizing:border-box;
  justify-self:end;display:flex;align-items:center;justify-content:center;
  min-width:0;max-width:100%;height:52px;gap:7px;
  margin:0 88px 0 0;padding:0 14px 0 4px;
  background:#fffaf04d;border:1px solid #b7a08080;
  border-radius:28px 30px 27px 29px;
  box-shadow:inset 0 1px 0 #fffdf2;color:#3E5948;
  flex-wrap:nowrap;
}
body.living-world-view .integrated-world .world-coins .world-ui-icon{
  width:42px;height:42px;flex:0 0 42px;
}
body.living-world-view .integrated-world .world-coins strong{
  font-size:26px;line-height:1;overflow-wrap:anywhere;
}
body.living-world-view .integrated-world .world-coins small{
  font-size:12px;flex-basis:auto;line-height:1.2;
}
body.living-world-view .world-ribbon-family-space{
  display:block;position:absolute;
  right:var(--ribbon-family-inset);top:var(--ribbon-family-top);
  width:72px;height:62px;border-left:1px solid #b7a08055;
}
body.living-world-view:has(.integrated-world) #family-menu{
  top:calc(var(--ribbon-top) + var(--ribbon-family-top));bottom:auto;
  right:calc((100vw - var(--ribbon-width))/2 + var(--ribbon-family-inset));
}
body.living-world-view:has(.integrated-world) #family-menu .family-menu-panel{
  top:calc(100% + 12px);bottom:auto;
  max-height:min(65svh,calc(100svh - 100px));overflow-y:auto;
}
body.living-world-view:has(.integrated-world) #family-menu>summary{
  display:flex;align-items:center;justify-content:center;
  box-sizing:border-box;
  width:var(--ribbon-family-size);max-width:var(--ribbon-family-size);
  height:var(--ribbon-family-size);min-height:var(--ribbon-family-size);
  padding:4px;background:transparent;
  border:1px solid transparent;border-radius:50%;box-shadow:none;
  transition:background-color 160ms ease,border-color 160ms ease;
}
body.living-world-view:has(.integrated-world) #family-menu>summary .family-badge-icon{
  width:calc(var(--ribbon-family-size) - 8px);
  height:calc(var(--ribbon-family-size) - 8px);
  object-fit:contain;
}
@media(hover:hover) and (pointer:fine){
  body.living-world-view:has(.integrated-world) #family-menu>summary:hover{
    background:#DCE8CF;border-color:#B7A080;transform:none;
  }
}
body.living-world-view:has(.integrated-world) #family-menu[open]>summary{
  background:#DCE8CF;border-color:#B7A080;transform:none;
}
body.living-world-view:has(.integrated-world) #family-menu>summary:active{
  background:#d3dfc8;box-shadow:inset 0 1px 3px #79604424;transform:none;
}
body.living-world-view:has(.integrated-world) #family-menu :focus-visible{
  outline:3px solid #3E5948;outline-offset:2px;
}

/* A tablet has the SAME parchment ribbon, logo and Family Badge, but tighter
 * spacing. Includes touch laptops and large-screen tablets in both rotations. */
@media (min-width:701px) and (max-width:1100px), (min-width:701px) and (any-pointer:coarse){
  body.living-world-view:has(.integrated-world){
    --ribbon-width:calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
    --ribbon-top:max(9px,env(safe-area-inset-top));
    --ribbon-family-inset:9px;--ribbon-family-top:10px;
    --ribbon-family-size:54px;
  }
  body.living-world-view .integrated-world .world-hud{
    height:76px;padding:6px 11px;gap:8px;
    grid-template-columns:minmax(175px,1fr) minmax(112px,170px) minmax(155px,1fr);
    border-radius:27px 29px 26px 28px;
  }
  body.living-world-view .integrated-world .world-identity{
    height:62px;gap:8px;padding-right:8px;
  }
  body.living-world-view .integrated-world .world-avatar{width:52px;height:52px}
  body.living-world-view .integrated-world .world-profile-copy strong{font-size:16px}
  body.living-world-view .integrated-world .world-profile-copy>span{font-size:11px}
  body.living-world-view .integrated-world .world-xp{height:7px;margin:2px 0}
  body.living-world-view .world-ribbon-brand{width:100%;max-width:170px;height:54px}
  body.living-world-view .integrated-world .world-coins{
    height:44px;margin-right:62px;padding:0 7px 0 2px;gap:3px;
  }
  body.living-world-view .integrated-world .world-coins .world-ui-icon{
    width:34px;height:34px;flex-basis:34px;
  }
  body.living-world-view .integrated-world .world-coins strong{font-size:20px}
  body.living-world-view .integrated-world .world-coins small{font-size:10px}
  body.living-world-view .world-ribbon-family-space{
    right:9px;top:10px;height:54px;width:58px;
  }
  body.living-world-view:has(.integrated-world) #family-menu{
    right:calc(env(safe-area-inset-right) + 21px);
  }
}

/* Short landscape devices: preserve usable scenery and hit areas. */
@media (min-width:701px) and (orientation:landscape) and (max-height:620px){
  body.living-world-view:has(.integrated-world){
    --ribbon-top:max(5px,env(safe-area-inset-top));
    --ribbon-family-top:6px;--ribbon-family-size:44px;
  }
  body.living-world-view .integrated-world .world-hud{
    height:58px;padding:3px 10px;
  }
  body.living-world-view .integrated-world .world-identity{height:50px}
  body.living-world-view .integrated-world .world-avatar{width:44px;height:44px}
  body.living-world-view .world-ribbon-brand{height:48px}
  body.living-world-view .integrated-world .world-coins{height:40px}
  body.living-world-view .world-ribbon-family-space{top:6px;height:44px}
  body.living-world-view:has(.integrated-world) #family-menu .family-menu-panel{
    max-height:calc(100svh - 80px);
  }
}

/* Phones: two neat levels in the SAME parchment frame. Full logo stays
 * visible above a compact profile, live Coins, and the real Family trigger. */
@media (max-width:700px){
  body.living-world-view:has(.integrated-world){
    --ribbon-width:calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));
    --ribbon-top:max(7px,env(safe-area-inset-top));
    --ribbon-family-size:44px;
  }
  body.living-world-view .integrated-world .world-hud{
    left:calc(50% + (env(safe-area-inset-left) - env(safe-area-inset-right))/2);
    width:var(--ribbon-width);height:104px;
    padding:4px 7px 6px;gap:2px 5px;
    display:grid;grid-template-columns:minmax(0,1fr) auto 46px;
    grid-template-rows:32px minmax(0,1fr);
    grid-template-areas:"brand brand brand" "identity coins family";
    border-radius:24px 26px 23px 25px;
  }
  body.living-world-view .world-ribbon-brand{
    grid-area:brand;width:126px;max-width:100%;height:32px;
    justify-self:center;align-self:center;
  }
  body.living-world-view .integrated-world .world-identity{
    grid-area:identity;min-width:0;width:100%;height:58px;
    gap:5px;padding:0 5px 0 0;border-right:1px solid #b7a08055;
  }
  body.living-world-view .integrated-world .world-avatar{
    width:42px;height:42px;
  }
  body.living-world-view .integrated-world .world-profile-copy{
    min-width:0;gap:1px;
  }
  body.living-world-view .integrated-world .world-profile-copy strong{
    font-size:14px;line-height:1.1;
  }
  body.living-world-view .integrated-world .world-profile-copy>span{
    font-size:10px;line-height:1.1;
  }
  body.living-world-view .integrated-world .world-profile-copy small{
    font-size:9px;line-height:1.1;
  }
  body.living-world-view .integrated-world .world-xp{
    height:6px;max-width:100%;margin:2px 0;
  }
  body.living-world-view .integrated-world .world-coins{
    grid-area:coins;align-self:center;justify-self:end;
    display:grid;grid-template-columns:28px auto;grid-template-rows:20px 13px;
    height:44px;gap:0 3px;margin:0;padding:3px 7px 3px 3px;
    min-width:0;max-width:100%;align-items:center;
  }
  body.living-world-view .integrated-world .world-coins .world-ui-icon{
    grid-row:1 / 3;grid-column:1;width:28px;height:28px;
  }
  body.living-world-view .integrated-world .world-coins strong{
    grid-row:1;grid-column:2;font-size:17px;line-height:1;
  }
  body.living-world-view .integrated-world .world-coins small{
    grid-row:2;grid-column:2;font-size:9px;line-height:1;
    text-align:left;white-space:nowrap;
  }
  body.living-world-view .world-ribbon-family-space{
    grid-area:family;position:relative;top:auto;right:auto;
    width:46px;height:46px;border-left:1px solid #b7a08055;
    align-self:center;
  }
  body.living-world-view:has(.integrated-world) #family-menu{
    top:calc(var(--ribbon-top) + 43px);
    right:calc(9px + env(safe-area-inset-right));
  }
  body.living-world-view:has(.integrated-world) #family-menu .family-menu-panel{
    top:calc(100% + 10px);max-height:calc(100svh - 126px);
  }
}

/* Very small screens keep all three data points without cutting the logo. */
@media (max-width:360px){
  body.living-world-view .world-ribbon-brand{width:108px}
  body.living-world-view .integrated-world .world-hud{
    grid-template-columns:minmax(0,1fr) auto 42px;column-gap:3px;
    padding-inline:5px;
  }
  body.living-world-view .integrated-world .world-avatar{width:36px;height:36px}
  body.living-world-view .integrated-world .world-profile-copy strong{font-size:13px}
  body.living-world-view .integrated-world .world-coins{
    grid-template-columns:25px auto;padding-right:5px;
  }
  body.living-world-view .integrated-world .world-coins .world-ui-icon{width:25px;height:25px}
  body.living-world-view .world-ribbon-family-space{width:42px}
}

/* Phone landscape needs a single slim ribbon instead of a tall two-row panel. */
@media (max-width:700px) and (orientation:landscape) and (max-height:500px){
  body.living-world-view:has(.integrated-world){
    --ribbon-top:max(5px,env(safe-area-inset-top));
    --ribbon-family-size:42px;
  }
  body.living-world-view .integrated-world .world-hud{
    height:58px;grid-template-areas:"identity brand coins family";
    grid-template-columns:minmax(0,1fr) 106px auto 44px;
    grid-template-rows:1fr;gap:5px;padding:3px 6px;
  }
  body.living-world-view .world-ribbon-brand{height:42px;width:106px}
  body.living-world-view .integrated-world .world-identity{height:50px}
  body.living-world-view .integrated-world .world-coins{height:40px}
  body.living-world-view .world-ribbon-family-space{height:44px;width:44px}
  body.living-world-view:has(.integrated-world) #family-menu{
    top:calc(var(--ribbon-top) + 8px);
    right:calc(8px + env(safe-area-inset-right));
  }
  body.living-world-view:has(.integrated-world) #family-menu .family-menu-panel{
    max-height:calc(100svh - 78px);
  }
}
@media(prefers-reduced-motion:reduce){
  body.living-world-view:has(.integrated-world) #family-menu>summary{transition:none}
}

/* NALAROO — Explorer Ribbon Brand Emphasis v3.3
 * The official WebP has generous internal transparent padding. Scale the
 * wordmark INSIDE an enlarged, clipped brand stage instead of distorting it.
 * All rules below remain scoped to Home only; no world hotspot coordinates
 * or Family Menu logic are touched.
 */
body.living-world-view:has(.integrated-world){--ribbon-logo-scale:1.65}
body.living-world-view .integrated-world .world-hud{
  height:104px;
  grid-template-columns:minmax(240px,1fr) 310px minmax(240px,1fr);
}
body.living-world-view .world-ribbon-brand{
  display:block;justify-self:center;width:310px;height:90px;
  overflow:hidden;
}
body.living-world-view .world-ribbon-logo{
  width:100%;height:100%;object-fit:contain;object-position:center;
  transform:scale(var(--ribbon-logo-scale));transform-origin:center;
}
@media (min-width:701px) and (max-width:1100px), (min-width:701px) and (any-pointer:coarse){
  body.living-world-view:has(.integrated-world){--ribbon-logo-scale:1.42}
  body.living-world-view .integrated-world .world-hud{
    height:90px;
    grid-template-columns:minmax(175px,1fr) minmax(150px,220px) minmax(155px,1fr);
  }
  body.living-world-view .world-ribbon-brand{
    width:100%;max-width:220px;height:72px;
  }
}
@media (min-width:701px) and (orientation:landscape) and (max-height:620px){
  body.living-world-view:has(.integrated-world){--ribbon-logo-scale:1.42}
  body.living-world-view .integrated-world .world-hud{height:58px}
  body.living-world-view .world-ribbon-brand{height:48px}
}
/* v3.3.1: restore the portrait 3-column grid. Without this override the
 * desktop 310px center column remains active at phone widths, pushing the
 * logo, Coins and Family Badge off-screen. Contain the complete logo with no
 * magnification/clipping; the larger 196x54px stage makes it prominent. */
@media (max-width:700px){
  body.living-world-view:has(.integrated-world){--ribbon-logo-scale:1}
  body.living-world-view .integrated-world .world-hud{
    height:130px;
    grid-template-columns:minmax(0,1fr) auto 46px;
    grid-template-rows:54px minmax(0,1fr);
    grid-template-areas:"brand brand brand" "identity coins family";
  }
  body.living-world-view .world-ribbon-brand{
    grid-area:brand;width:196px;max-width:100%;height:54px;
  }
}
@media (max-width:360px){
  body.living-world-view .world-ribbon-brand{width:172px}
}
@media (max-width:700px) and (orientation:landscape) and (max-height:500px){
  body.living-world-view:has(.integrated-world){--ribbon-logo-scale:1}
  body.living-world-view .integrated-world .world-hud{
    height:58px;
    grid-template-columns:minmax(0,1fr) minmax(82px,124px) auto 44px;
    grid-template-rows:1fr;
    /* Explicitly restore one-row layout after the portrait grid override. */
    grid-template-areas:"identity brand coins family";
  }
  body.living-world-view .world-ribbon-brand{
    width:100%;max-width:124px;height:42px;
  }
}

/* NALAROO — Family Badge Docking v3.4
 * The same real Family Menu is a child of the Home ribbon's right-hand
 * slot. It moves with the ribbon rather than floating at viewport coordinates.
 * Keep the original summary, membership label, and account menu interactive.
 */
body.living-world-view .integrated-world .world-ribbon-family-space{
  pointer-events:auto;
}
body.living-world-view .integrated-world .world-ribbon-family-space>#family-menu{
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  max-width:none;
  margin:0;
  z-index:20;
  pointer-events:auto;
}
body.living-world-view .integrated-world .world-ribbon-family-space>#family-menu>summary{
  margin-inline:auto;
  pointer-events:auto;
}
body.living-world-view .integrated-world .world-ribbon-family-space>#family-menu .family-menu-panel{
  top:calc(100% + 10px);
  right:0;left:auto;bottom:auto;
  pointer-events:auto;
}
/* The phone slot is a real grid cell, not an absolutely positioned proxy. */
@media(max-width:700px){
  body.living-world-view .integrated-world .world-ribbon-family-space{
    position:relative;top:auto;right:auto;
  }
}


/* adventure-menu.css */
/* Shared themed destination headers; no Home, card, navigation or modal rules. */
.collection-page .adventure-hero,.learning-journal .adventure-hero{
 --hero-accent:#DCE8CF;--hero-wash:#f0f3e7;--hero-ink:#3E5948;
 box-sizing:border-box;position:relative;isolation:isolate;display:grid;
 grid-template-columns:116px minmax(0,1fr);gap:12px 24px;
 width:100%;max-width:1224px;padding:18px 26px;margin:4px auto 22px;
 border:1px solid #B7A080;border-radius:29px 35px 28px 33px;
 background:radial-gradient(ellipse at 0 15%,var(--hero-wash),transparent 65%),linear-gradient(145deg,#fffaf0,#F8F2E4);
 box-shadow:inset 0 1px 0 #fffdf7,0 3px 0 #b7a08024,0 7px 16px #79604412;
 color:#244665;
}
.adventure-hero::before{content:'';position:absolute;inset:5px;border:1px solid #b7a08035;border-radius:inherit;pointer-events:none;z-index:-1}
.collection-page .adventure-shop{--hero-accent:#f3dfb0;--hero-wash:#fbecd2;--hero-ink:#76562e}
.learning-journal .adventure-progress{--hero-accent:#d0e2c7;--hero-wash:#e8efdd}
.adventure-hero .adventure-emblem{
 grid-row:1/3;align-self:center;display:grid;place-items:center;position:relative;
 width:116px;height:116px;padding:12px;border:1px solid #B7A080;
 border-radius:34% 41% 36% 40%;background:linear-gradient(145deg,#fffaf0,var(--hero-accent));
 box-shadow:inset 0 0 0 5px #fffaf080,0 4px 0 #b7a08025;
}
.adventure-emblem::after{content:'';position:absolute;width:10px;height:10px;right:4px;bottom:13px;background:#fff7db;border:1px solid #B7A080;border-radius:3px;rotate:45deg}
.adventure-emblem svg{display:block;width:88px;height:88px;filter:drop-shadow(0 3px 1px #79604418)}
.adventure-hero .adventure-copy{min-width:0;padding-right:190px}
.adventure-hero .adventure-eyebrow{margin:0 0 4px;font-size:10px;line-height:1.3;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--hero-ink)}
.collection-page .adventure-title,.learning-journal .adventure-title{margin:0;font-size:32px;line-height:1.16;font-weight:900;letter-spacing:-.025em;color:#244665;overflow-wrap:anywhere}
.adventure-hero .adventure-subtitle{margin:5px 0 9px;font-size:14px;line-height:1.45;color:#526950}
.adventure-hero .adventure-identity{margin:0!important;display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0;font-size:13px;line-height:1.35;color:#3E5948}
.adventure-avatar{display:block;width:32px;height:32px;flex-shrink:0;object-fit:contain;background:#fffaf0;border:1px solid #b7a08080;border-radius:50%}
.adventure-name{max-width:100%;overflow-wrap:anywhere}
.adventure-grade{padding:3px 9px;background:var(--hero-accent);border-radius:10px 12px 10px 11px;font-size:11px;font-weight:800}
.adventure-hero .adventure-brand{display:block;min-height:0;margin:0;position:absolute;right:25px;top:20px;width:174px;height:51px;overflow:hidden}
.adventure-hero .adventure-logo{display:block;max-width:none;width:100%;height:100%;object-fit:cover;object-position:center}
.adventure-stats{grid-column:2;min-width:0}
.adventure-hero .collection-wallet{
 display:flex;justify-content:flex-start;align-items:center;gap:24px;flex-wrap:wrap;
 margin:0;padding:8px 14px;border:1px solid #b7a08060;border-radius:14px 18px 13px 16px;
 background:#fffaf080;box-shadow:none;width:fit-content;max-width:100%;
}
.adventure-hero .collection-wallet-amount{gap:8px}
.adventure-hero .collection-wallet .collection-coin{width:29px;height:29px}
.adventure-hero .collection-balance{font-size:19px;line-height:1.2;color:#3E5948}
.adventure-hero .collection-wallet-amount span,.adventure-hero .collection-wallet small{font-size:10px;color:#5d6e5b}
.adventure-hero .collection-owned-count{padding-left:20px;border-left:1px solid #b7a08060;gap:0;text-align:left}
.adventure-hero .collection-owned-count strong{font-size:21px;line-height:1.2;color:#3E5948}
.adventure-hero .collection-owned-count span{font-size:10px;color:#5d6e5b}
.adventure-bag .collection-owned-count{order:-1;border-left:0;border-right:1px solid #b7a08060;padding-left:0;padding-right:24px}
.adventure-shop .collection-balance{font-size:25px;color:#76562e}
.adventure-shop .collection-wallet .collection-coin{width:35px;height:35px}
.adventure-shop .collection-wallet{background:#fff3d8;border-color:#cfb37d}
.adventure-progress .lj-xp-label{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 6px;font-size:12px;color:#3E5948;font-weight:800}
.adventure-progress .adventure-level{padding:3px 10px;border:1px solid #a4bd9a;background:#DCE8CF;border-radius:10px 12px 9px 11px}
.adventure-progress .adventure-xp{display:block;width:100%;max-width:630px;height:10px;accent-color:#88a775;border:1px solid #b7a08080;border-radius:8px;overflow:hidden}
.adventure-xp::-webkit-progress-bar{background:#e5e8d8}.adventure-xp::-webkit-progress-value{background:#88a775}.adventure-xp::-moz-progress-bar{background:#88a775}
@media(max-width:900px){
 .collection-page .adventure-hero,.learning-journal .adventure-hero{grid-template-columns:84px minmax(0,1fr);gap:12px 18px;padding:20px}
 .adventure-hero .adventure-emblem{width:84px;height:90px;padding:8px}.adventure-emblem svg{width:68px;height:68px}
 .adventure-hero .adventure-copy{padding-right:0}.adventure-hero .adventure-brand{width:123px;height:37px;right:18px;top:14px}
 .adventure-hero .adventure-eyebrow{padding-right:120px;min-height:26px}.collection-page .adventure-title,.learning-journal .adventure-title{font-size:28px}
}
@media(max-width:600px){
 .collection-page .adventure-hero,.learning-journal .adventure-hero{grid-template-columns:64px minmax(0,1fr);padding:16px;gap:10px 12px;border-radius:23px 27px 22px 26px}
 .adventure-hero .adventure-emblem{grid-row:1;align-self:start;width:64px;height:72px;margin-top:29px;padding:5px}.adventure-emblem svg{width:54px;height:54px}
 .adventure-hero .adventure-brand{width:103px;height:32px;top:12px;right:14px}
 .adventure-hero .adventure-eyebrow{padding-right:0;max-width:calc(100% - 100px);min-height:32px;font-size:8px;letter-spacing:.07em}
 .collection-page .adventure-title,.learning-journal .adventure-title{font-size:25px}
 .adventure-hero .adventure-subtitle{font-size:12px;line-height:1.4;margin-top:5px}
 .adventure-identity{gap:5px;font-size:12px}.adventure-avatar{width:28px;height:28px}
 .adventure-stats{grid-column:1/-1}.adventure-hero .collection-wallet{width:100%;padding:10px;gap:10px;justify-content:space-between}
 .adventure-bag .collection-owned-count{padding-right:10px}.adventure-hero .collection-owned-count{padding-left:10px}
 .adventure-hero .collection-wallet small{font-size:9px}.adventure-shop .collection-balance{font-size:21px}
}


/* collectible-cards-v2.css */
/* One page width; hero artwork/type treatment remains owned by adventure-menu.css. */
.collection-page:has(.adventure-hero),.learning-journal{
 box-sizing:border-box;width:100%;max-width:1320px;
 padding-inline:28px;
 padding-bottom:max(108px,calc(92px + env(safe-area-inset-bottom)));
}
.collection-page .adventure-hero,.learning-journal .adventure-hero{max-width:none}
.collection-page .collection-grid{
 display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;align-items:stretch;
}
.collection-page .collection-card{
 --rarity-edge:#c4a476;--edge:var(--rarity-edge);--wash:#fffaf0;--glow:#b7996521;
 gap:5px;padding:12px 10px 10px;scroll-margin-block:90px 100px;
 border:1.5px solid var(--edge);border-radius:18px 15px 18px 16px;
 background:radial-gradient(ellipse at 50% 24%,#fffdf7,var(--wash) 75%);
 box-shadow:0 3px 0 #9c7a4923,0 5px 12px #79604413;
 transition:transform 160ms ease,box-shadow 160ms ease,border-color 160ms ease;
}
.collection-page .collection-card[data-rarity=Rare]{--rarity-edge:#82b9cf;--wash:#eff8fb;--glow:#82b9cf36}
.collection-page .collection-card[data-rarity=Epic]{--rarity-edge:#b99bd1;--wash:#f8f0fc;--glow:#b99bd13b}
.collection-page .collection-card[data-rarity=Legendary]{--rarity-edge:#c6a054;--wash:#fff3d6;--glow:#d8b25c45}
.collection-page .collection-card::before{inset:4px;border:1px solid var(--edge);opacity:.65;border-radius:13px 11px 14px 12px}
.collection-page .collection-card::after{
 inset:7px;background:var(--edge);opacity:.55;
 mask:url('assets/collectibles/card-ornaments.svg') center/100% 100% no-repeat;
}
.collection-page .collection-card[data-rarity=Legendary]::after{opacity:.85}
.collection-art-stage{
 display:grid;place-items:center;position:relative;isolation:isolate;
 width:100%;height:120px;margin:0;overflow:hidden;border-radius:12px;
}
.collection-art-stage::before{
 content:'';position:absolute;inset:5%;z-index:-1;border-radius:50%;
 background:radial-gradient(ellipse,#fffef7e6,var(--glow) 55%,transparent 72%);
 transition:opacity 160ms ease;opacity:.65;
}
.collection-page .collection-card .collection-art{width:100%;height:100%;max-height:120px;aspect-ratio:auto;object-fit:contain;transition:transform 160ms ease,filter 160ms ease}
.collection-page .collection-card .collection-art-button{width:100%;padding:0;min-height:44px;margin:0}
.collection-page .collection-card h3{
 align-self:stretch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-height:38px;
 min-height:38px;margin:0;padding:3px 7px;font-size:12px;line-height:1.2;
 background:#fffaf0a6;border:1px solid #b7a08042;border-radius:9px 11px 8px 10px;
 color:#244665;overflow-wrap:anywhere;
}
.collection-page .collection-card .collection-tags{min-height:20px;gap:4px}
.collection-page .collection-card .collection-rarity{font-size:10px;padding:2px 8px;border:1px solid #b7a08066}
.collection-page .collection-card .collection-price{margin:0;min-height:20px;font-size:11px;line-height:1.2;color:#69502f}
.collection-page .collection-card .collection-price .collection-coin{width:16px;height:16px}
.collection-page .collection-card>.collection-button{
 min-height:44px;padding:7px 5px;font-size:12px;line-height:1.2;
 border:1px solid #2f4d3b;background:#3E5948;color:#fffaf0;
 border-radius:10px 12px 9px 11px;box-shadow:0 2px 0 #263f3280;
}
.collection-page .collection-card>.collection-button:disabled{background:#ece8dd;border-color:#bcb2a2;color:#5f584c;box-shadow:inset 0 1px 2px #79604418;cursor:default}
.collection-page .collection-card[data-state=owned]>.collection-button:disabled{background:#DCE8CF;color:#3E5948;border-color:#A4BD9A}
.collection-page .collection-card .collection-owned{
 position:absolute;z-index:3;top:8px;right:8px;
 display:flex;align-items:center;gap:3px;margin:0;padding:2px 6px 2px 2px;
 background:#eff5e5;border:1px solid #a4bd9a;border-radius:12px 14px 11px 13px;
 pointer-events:none;font-size:9px;line-height:1;font-weight:900;color:#3E5948;box-shadow:0 2px 3px #7960441a;
}
.collection-state-icon{display:block;width:29px;height:29px;flex-shrink:0}
.collection-lock{position:absolute;z-index:3;top:8px;right:8px;width:33px;height:33px;padding:3px;background:#f4eee3;border:1px solid #b7a080;border-radius:50%;box-shadow:0 2px 3px #79604418}
.collection-lock .collection-state-icon{width:25px;height:25px}
.collection-page .collection-card[data-state=insufficient]{--edge:color-mix(in srgb,var(--rarity-edge) 55%,#b9b0a0);--wash:#f5f1e8;--glow:#b9b0a01a}
.collection-page .collection-card[data-state=insufficient] .collection-art{filter:saturate(.5)}
.collection-page .collection-card:focus-within{outline:2px solid #3E5948;outline-offset:3px;box-shadow:0 5px 14px var(--glow)}
.collection-page .collection-card :focus-visible{outline:3px solid #3E5948;outline-offset:2px}
@media(hover:hover) and (pointer:fine){
 .collection-page .collection-card:is([data-state=available],[data-state=owned]):hover{transform:translateY(-4px);box-shadow:0 5px 0 #9c7a4923,0 10px 20px var(--glow)}
 .collection-page .collection-card:is([data-state=available],[data-state=owned]):hover .collection-art{transform:scale(1.04)}
 .collection-page .collection-card:hover .collection-art-stage::before{opacity:1}
 .collection-page .collection-card>.collection-button:hover:not(:disabled){background:#496b54;transform:none;box-shadow:0 2px 0 #263f3280}
}
.collection-page .collection-card[data-state]:active,.collection-page .collection-card[data-state].is-pressed{transform:translateY(1px);box-shadow:inset 0 1px 3px #79604425,0 2px 5px var(--glow)}
.collection-page .collection-card>.collection-button:active:not(:disabled){background:#304b3a;box-shadow:inset 0 2px 3px #172c2740}
@media(max-width:1199px){
 .collection-page .collection-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:601px) and (max-width:1100px){
 .collection-page .collection-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
 .collection-art-stage{height:108px}.collection-page .collection-card .collection-art{max-height:108px}
}
@media(min-width:601px) and (max-width:1400px) and (any-pointer:coarse){
 .collection-page .collection-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
 .collection-page:has(.adventure-hero),.learning-journal{padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right))}
}
@media(max-width:600px){
 .collection-page .collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .collection-page .collection-card{padding:9px 8px 8px;gap:4px}
 .collection-art-stage{height:92px}.collection-page .collection-card .collection-art{max-height:92px}
 .collection-page .collection-card h3{min-height:38px;font-size:11px;padding:3px 5px}
 .collection-page .collection-card .collection-tags{min-height:19px}
 .collection-page .collection-card>.collection-button{font-size:11px;padding:6px 3px}
 .collection-page .collection-card .collection-owned{font-size:9px;top:6px;right:6px;padding-right:4px;gap:1px}
 .collection-state-icon{width:24px;height:24px}
}
@media(prefers-reduced-motion:reduce){
 .collection-page .collection-card,.collection-page .collection-card .collection-art,.collection-art-stage::before{transition:none!important}
 .collection-page .collection-card:hover,.collection-page .collection-card:active,.collection-page .collection-card.is-pressed,.collection-page .collection-card:hover .collection-art{transform:none!important}
}

/* Every collectible image is an accessible, tappable story entry, even when locked. */
.collection-page .collection-card .collection-art-button{cursor:pointer;position:relative;z-index:2}
.collection-page .collection-card .collection-art-button:focus-visible{outline:3px solid #3e5948;outline-offset:2px}
.collection-page .collection-card{cursor:pointer}


/* collectible-frames.css */
/* The illustration IS the frame. No CSS/SVG ornamental frame is rendered. */
.collection-page .collection-card[data-rarity]{
 --frame-glow:#bda57838;--edge:transparent;
 box-sizing:border-box;width:100%;aspect-ratio:3/4;min-height:0;
 display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 30px 22px 44px;
 align-items:center;justify-items:center;gap:4px;padding:18.6% 16% 18%;
 border:0;border-radius:0;background:none;box-shadow:none;
 filter:drop-shadow(0 3px 3px #79604424);
 transition:transform 160ms ease,filter 160ms ease;
}
.collection-page .collection-card[data-rarity=Rare]{--frame-glow:#69bfd649}
.collection-page .collection-card[data-rarity=Epic]{--frame-glow:#bc8be356}
.collection-page .collection-card[data-rarity=Legendary]{--frame-glow:#eac35763}
.collection-page .collection-card[data-rarity]::before,
.collection-page .collection-card[data-rarity]::after,
.collection-page .collection-card .collection-art-stage::before{content:none}
.collection-page .collection-card .collection-frame-image{
 position:absolute;inset:0;z-index:-1;display:block;width:100%;height:100%;max-height:none;
 object-fit:contain;pointer-events:none;user-select:none;filter:none;transform:none;
}
.collection-page .collection-card .collection-art-stage{
 grid-row:1;grid-column:1;align-self:stretch;width:100%;height:auto;min-height:0;margin:0;overflow:hidden;background:none;
}
.collection-page .collection-card .collection-art-button{grid-row:1;grid-column:1;align-self:stretch;position:relative;height:auto;width:100%;min-height:44px}
.collection-page .collection-card .collection-art-button .collection-art-stage{position:absolute;inset:0}
.collection-page .collection-card .collection-art{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:contain;padding:3px}
.collection-page .collection-card h3{
 grid-row:2;grid-column:1;align-self:center;min-height:0;max-height:30px;max-width:80%;margin:0;padding:0;
 border:0;border-radius:0;background:none;box-shadow:none;font-size:12px;line-height:15px;
}
.collection-card-meta{grid-row:3;grid-column:1;display:flex;align-items:center;justify-content:center;gap:6px;max-width:100%;white-space:nowrap}
.collection-page .collection-card .collection-tags{min-height:0;gap:3px;flex-wrap:nowrap}
.collection-page .collection-card .collection-rarity{font-size:10px;padding:1px 7px;line-height:15px}
.collection-page .collection-card .collection-plus{font-size:9px;padding:1px 4px;line-height:15px}
.collection-page .collection-card .collection-price{min-height:0;font-size:11px;line-height:16px;white-space:nowrap;gap:3px}
.collection-price-unit{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* 70% of the card canvas; the painted 38px face sits within a 44px hit area. */
.collection-page .collection-card[data-rarity][data-state]>.collection-button{
 grid-row:4;grid-column:1;align-self:stretch;min-width:44px;min-height:44px;width:102.941176%;max-width:none;
 position:relative;margin:0;padding:4px 3px;border:0;background:none;box-shadow:none;isolation:isolate;
 font-size:11px;line-height:1.2;color:#fffaf0;
}
.collection-page .collection-card>.collection-button::before{
 content:'';position:absolute;inset:3px 4%;z-index:-1;border:1px solid #2f4d3b;border-radius:10px 12px 9px 11px;
 background:#3e5948;box-shadow:0 2px 0 #263f3260;pointer-events:none;
}
.collection-page .collection-card>.collection-button:hover:not(:disabled)::before{background:#496b54}
.collection-page .collection-card>.collection-button:active:not(:disabled)::before{background:#304b3a;box-shadow:inset 0 2px 3px #172c2740}
.collection-page .collection-card[data-rarity][data-state]>.collection-button:disabled{color:#5f584c}
.collection-page .collection-card>.collection-button:disabled::before{background:#ece8dd;border-color:#bcb2a2;box-shadow:inset 0 1px 2px #79604418}
.collection-page .collection-card[data-rarity][data-state=owned]>.collection-button{width:auto;min-width:88px;color:#3e5948}
.collection-page .collection-card[data-state=owned]>.collection-button::before{content:none}
.collection-page .collection-card .collection-owned{
 position:static;display:flex;align-items:center;justify-content:center;gap:3px;margin:0;
 padding:2px 4px;max-width:100%;font-size:10px;line-height:1.1;box-shadow:none;pointer-events:none;
}
.collection-page .collection-card[data-rarity]>.collection-button .collection-owned{background:#eff5e5;border:1px solid #a4bd9a;padding:2px 6px;min-height:28px;border-radius:12px 14px 11px 13px}
.collection-page .collection-card .collection-state-icon{width:22px;height:22px}
.collection-page .collection-card .collection-lock{top:23%;right:14%;width:30px;height:30px;padding:2px}
.collection-page .collection-card .collection-lock .collection-state-icon{width:24px;height:24px}
.collection-page .collection-card[data-owned-view]{grid-template-rows:minmax(0,1fr) 30px 22px 28px}
.collection-page .collection-card[data-owned-view]>.collection-owned{grid-row:4;grid-column:1;justify-self:center}
.collection-page .collection-card[data-rarity]:focus-within{outline:2px solid #3E5948;outline-offset:2px;box-shadow:none}
@media(hover:hover) and (pointer:fine){
 .collection-page .collection-card[data-rarity]:is([data-state=available],[data-state=owned]):hover{transform:translateY(-4px);box-shadow:none;filter:drop-shadow(0 5px 4px #7960442a) drop-shadow(0 0 6px var(--frame-glow))}
}
.collection-page .collection-card[data-rarity][data-state]:active,
.collection-page .collection-card[data-rarity][data-state].is-pressed{transform:translateY(1px);box-shadow:none;filter:drop-shadow(0 1px 2px #79604430)}
/* Cap wider tracks so 3:4 masters remain compact instead of growing on landscape tablets. */
@media(min-width:1101px) and (max-width:1199px){
 .collection-page .collection-grid{max-width:1010px;margin-inline:auto}
}
@media(min-width:601px) and (max-width:1100px){
 .collection-page .collection-grid{max-width:760px;margin-inline:auto}
}
@media(min-width:601px) and (max-width:1400px) and (any-pointer:coarse){
 .collection-page .collection-grid{max-width:760px;margin-inline:auto}
}
@media(max-width:600px){
 .collection-page .collection-card[data-rarity]{padding-block:14% 14%;gap:2px;grid-template-rows:minmax(0,1fr) 26px 18px 44px}
 .collection-page .collection-card h3{font-size:11px;line-height:13px;max-height:26px}
 .collection-page .collection-card[data-owned-view]{grid-template-rows:minmax(0,1fr) 26px 18px 26px}
 .collection-card-meta{gap:3px}
 .collection-page .collection-card .collection-rarity{font-size:9px;padding-inline:4px;line-height:14px}
 .collection-page .collection-card .collection-plus{font-size:8px;padding-inline:3px}
 .collection-page .collection-card .collection-price{font-size:10px;line-height:15px}
 .collection-page .collection-card .collection-price .collection-coin{width:14px;height:14px}
 .collection-page .collection-card .collection-owned{font-size:9px}
 .collection-page .collection-card .collection-lock{top:23%;right:14%}
}
@media(prefers-reduced-motion:reduce){
 .collection-page .collection-card[data-rarity]{transition:none!important}
 .collection-page .collection-card[data-rarity]:hover,.collection-page .collection-card[data-rarity]:active,.collection-page .collection-card[data-rarity].is-pressed{transform:none!important}
}


/* collectible-experience.css */
/* One shared journal/exchange dialog. Approved illustrated card frames are untouched. */
.collection-dialog{width:min(500px,calc(100vw - 24px));max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:24px 28px;border:1px solid #c69b6c;border-radius:28px 24px 30px 25px;background:#fff8ec;color:#263d4d;box-shadow:0 16px 60px #54412f45,inset 0 0 0 5px #faebd170;overscroll-behavior:contain;scrollbar-width:thin;text-align:center;overflow-wrap:anywhere}
.collection-dialog::backdrop{background:#263d4d70;backdrop-filter:none}
.collection-dialog-leaves{position:absolute;top:6px;left:9px;width:48px;height:36px;opacity:.58;pointer-events:none}
.collection-dialog-header{position:relative;gap:8px;padding-left:12px;text-align:left;align-items:flex-start}
.collection-dialog-header h2{flex:1;font-size:23px!important;line-height:1.25;padding-top:8px;overflow-wrap:anywhere}
.collection-dialog-close{flex:0 0 44px;display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;border:1px solid #dfc9a8;border-radius:50%;background:#faebd1;color:#80664c;cursor:pointer}
.collection-dialog-close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.collection-dialog-close:disabled{opacity:.55;cursor:wait}
.collection-dialog .collection-dialog-eyebrow{margin:8px 0 0;color:#80664c;font-size:12px;letter-spacing:.03em}
.collection-dialog-art{position:relative;display:grid;place-items:center;width:100%;margin:6px auto;background:radial-gradient(ellipse at center,#f6dfa784,transparent 65%)}
.collection-dialog .collection-detail-art{width:168px;height:168px;margin:0 auto;object-fit:contain}
.collection-dialog .collection-purchase-summary{gap:7px}
.collection-dialog .collection-purchase-summary h3,.collection-dialog .collection-success h3{font-size:19px;line-height:1.3}
.collection-dialog .collection-tags{margin:0;min-height:24px}
.collection-dialog .collection-rarity{font-size:12px;padding:3px 14px}
.collection-dialog .collection-flavor{max-width:360px;margin:6px auto 10px;font-size:14px;line-height:1.5;color:#80664c}
.collection-exchange-ledger{align-self:stretch;display:grid;gap:9px;margin:5px 0 0;padding:14px 18px;border:1px solid #e3cfad;border-radius:15px;background:#faebd180;text-align:left;font-size:14px}
.collection-exchange-ledger>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.collection-exchange-ledger dd{margin:0;font-weight:850;white-space:nowrap}.collection-exchange-ledger>div:last-child{padding-top:9px;border-top:1px solid #dfc9a8;color:#3e614f}
.collection-dialog-actions{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:16px}
.collection-dialog .collection-button{width:min(100%,310px);min-height:46px;background:#3e614f;color:#fff8ec;border:1px solid #304f3e;box-shadow:0 3px 0 #294a38;border-radius:14px;font-size:15px}
.collection-dialog .collection-button:hover:not(:disabled){background:#345640;box-shadow:0 5px 10px #3e614f25}.collection-dialog .collection-button:active:not(:disabled){transform:translateY(1px);box-shadow:0 1px 0 #294a38}
.collection-dialog .collection-button:disabled{background:#c9d6cb;color:#3e614f;box-shadow:none;cursor:wait}
.collection-dialog .collection-link{color:#3e614f;text-decoration:none;min-height:44px}.collection-dialog .collection-link:hover:not(:disabled){text-decoration:underline}.collection-dialog .collection-link:disabled{opacity:.55;cursor:wait}
.collection-dialog .collection-dialog-feedback:not(:empty){padding:10px 12px;border-radius:10px;background:#faebd1;font-size:13px;color:#684c32}
.collection-dialog :focus-visible{outline:3px solid #3e614f;outline-offset:3px}.collection-dialog h2:focus{outline:none}
.collection-journal-meta{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0}
.collection-journal-owned{display:inline-flex;align-items:center;gap:5px;padding:4px 12px 4px 6px;background:#e1eddf;border:1px solid #96b7a1;color:#3e614f;border-radius:30px;font-weight:850;font-size:13px}.collection-journal-owned svg{width:25px;height:25px}
.collection-dialog .collection-acquired{padding:14px;margin:18px 0 0;background:#faebd180;border-block:1px solid #e3cfad;border-radius:12px;color:#80664c;font-size:13px}
.collection-dialog .collection-note{font-size:12px;line-height:1.5;color:#80664c;margin:14px auto 0;max-width:330px}
.collection-success .collection-dialog-art{margin:10px auto;background:radial-gradient(ellipse,#f3d27a80,transparent 68%)}
.collection-success .collection-dialog-art::before,.collection-success .collection-dialog-art::after{content:'';position:absolute;width:38px;height:38px;background:url('assets/learning-quest/ornaments/ornament-sparkle.webp') center/contain no-repeat;pointer-events:none;top:25%;left:18%}.collection-success .collection-dialog-art::after{top:57%;left:auto;right:18%;width:25px;height:25px}
.collection-success .collection-detail-art{animation:collection-arrival .4s ease-out both}.collection-dialog .collection-success-copy{font-size:16px;line-height:1.5;font-weight:800;margin:16px auto 6px;max-width:350px}.collection-dialog .collection-success-saved{color:#3e614f;font-size:14px}
.collection-card[data-owned-view=true] .collection-price{opacity:.76}
@keyframes collection-arrival{from{transform:scale(.92);opacity:.5}to{transform:scale(1);opacity:1}}
@media(max-width:480px){.collection-dialog{padding:18px 18px 16px;border-radius:24px 21px 25px 22px}.collection-dialog-header{padding-left:6px}.collection-dialog-header h2{font-size:21px!important}.collection-dialog .collection-detail-art{width:146px;height:146px}.collection-dialog .collection-flavor{font-size:13px;margin-bottom:7px}.collection-exchange-ledger{font-size:13px;padding:12px 14px;gap:8px}.collection-dialog-actions{margin-top:12px}}
@media(max-height:650px){.collection-dialog .collection-detail-art{width:118px;height:118px}.collection-dialog .collection-purchase-summary{gap:4px}.collection-dialog .collection-flavor{margin:3px auto 6px}.collection-exchange-ledger{padding:10px 12px;gap:6px}.collection-dialog-actions{margin-top:10px}}
@media(prefers-reduced-motion:reduce){.collection-success .collection-detail-art{animation:none}.collection-dialog *{transition:none!important}}


/* kid-friendly-ux.css */
/* NALAROO Kid-Friendly Language & Storybook UX v1.0
 * Presentation only — no changes to XP, wallet, sessions or achievements.
 * Scoped to the three destination pages, without repainting collectible cards.
 */

/* Compact destination chapters: reduce dead space but retain the established
   parchment, brown hand-drawn border, custom illustrated emblem and logo. */
.collection-page .adventure-hero,
.learning-journal .adventure-hero{
  grid-template-columns:90px minmax(0,1fr);
  gap:8px 17px;
  padding:13px 18px;
  margin:4px auto 15px;
  border-radius:26px 30px 25px 29px;
}
.adventure-hero .adventure-emblem{
  width:90px;height:92px;
  padding:9px;
}
.adventure-hero .adventure-emblem svg{width:70px;height:70px}
.adventure-hero .adventure-copy{padding-right:170px}
.adventure-hero .adventure-eyebrow{
  font-size:11px;line-height:1.35;
  letter-spacing:.1em;margin-bottom:3px;
}
.collection-page .adventure-title,
.learning-journal .adventure-title{font-size:30px;line-height:1.13}
.adventure-hero .adventure-subtitle{
  font-size:15px;line-height:1.4;
  margin:3px 0 7px;
}
.adventure-hero .adventure-brand{width:155px;height:46px;top:13px;right:18px}
.adventure-hero .adventure-identity{font-size:14px;gap:7px}
.adventure-hero .adventure-stats{align-self:start}
.adventure-hero .collection-wallet{padding:8px 12px;gap:15px}
.adventure-hero .collection-wallet-amount span,
.adventure-hero .collection-wallet small,
.adventure-hero .collection-owned-count span{
  font-size:13px;line-height:1.4;
}
.adventure-hero .collection-owned-count{padding-left:15px}
.adventure-bag .collection-owned-count{padding-left:0;padding-right:15px}
.collection-page .collection-wallet small{max-width:230px}
.collection-page .collection-filters .collection-filter{
  font-size:14px;line-height:1.35;
}
.collection-page .collection-family-link,
.collection-page .collection-shop-links .collection-link{
  font-size:14px;
}

/* Journal: legible learning outcomes, distinct notes and storybook badges.
 * Descriptive statistic copy never replaces verified data or calculation. */
.learning-journal .lj-panel>h2{font-size:19px;line-height:1.3}
.learning-journal .lj-stat-value{font-size:25px}
.learning-journal .lj-stat-label{
  font-size:14px;line-height:1.35;color:#385447;
}
.learning-journal .lj-caption,
.learning-journal .lj-no-data,
.learning-journal .lj-accuracy,
.learning-journal .lj-review-count{
  font-size:13px;line-height:1.45;
}
.learning-journal .lj-subject h3{font-size:15px}
.learning-journal .lj-session-heading strong,
.learning-journal .lj-session-score,
.learning-journal .lj-session-details,
.learning-journal .lj-session time,
.learning-journal .lj-detail-label,
.learning-journal .lj-link-button{
  font-size:13px;line-height:1.45;
}
.learning-journal .lj-next-copy{font-size:14px;line-height:1.5}
.learning-journal .lj-button{font-size:14px}
.lj-method-note{
  margin-top:5px;
  color:#4E6257;
  font-size:12px;line-height:1.45;
}
.lj-method-note summary{
  display:inline-flex;align-items:center;
  min-height:36px;padding:4px 1px;
  color:#365e78;font-weight:800;
  text-decoration:underline;text-underline-offset:3px;
  cursor:pointer;
}
.lj-method-note p{
  max-width:78ch;
  padding:7px 11px;margin:0 0 3px!important;
  background:#F4F0E2;border-left:3px solid #9AAE8D;
  border-radius:3px 9px 9px 3px;
}
.learning-journal .lj-badge-total{font-size:14px}
.learning-journal .lj-badge-preview{
  gap:9px;margin:10px 0 0;
}
.learning-journal .lj-badge-preview li{
  display:flex;align-items:center;gap:8px;
  max-width:100%;min-height:46px;
  padding:6px 12px 6px 7px;
  background:linear-gradient(150deg,#FFFDF6,#F4EAD7);
  border:1px solid #CAB08C;border-radius:16px 18px 15px 17px;
  box-shadow:0 2px 0 #B7A08033;
  color:#2A4C44;font-size:14px;font-weight:800;
}
.learning-journal .lj-badge-preview .lj-icon{
  width:34px;height:34px;
}
.learning-journal .lj-badge-list{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr));
}
.learning-journal .lj-badge{
  padding:13px;
  border:1px solid #D5C2A3;border-radius:13px;
  background:#FFFCF5;
}
.learning-journal .lj-badge h3{font-size:15px}
.learning-journal .lj-badge p,
.learning-journal .lj-badge small{font-size:13px}
.learning-journal .lj-achievement-details>summary{margin-top:7px}
.learning-journal :focus-visible,
.collection-page :focus-visible{outline-offset:3px}

/* Tablets and narrow desktop screens keep the compact headers, with the
 * official logo clear of labels and without hiding the wallet/XP. */
@media(max-width:900px){
 .collection-page .adventure-hero,
 .learning-journal .adventure-hero{
   grid-template-columns:74px minmax(0,1fr);
   gap:9px 13px;padding:13px 15px;
 }
 .adventure-hero .adventure-emblem{
   width:74px;height:80px;padding:7px;
 }
 .adventure-hero .adventure-emblem svg{width:59px;height:59px}
 .adventure-hero .adventure-copy{padding-right:0}
 .adventure-hero .adventure-brand{width:121px;height:37px;top:12px;right:15px}
 .adventure-hero .adventure-eyebrow{
   padding-right:110px;min-height:0;
 }
 .collection-page .adventure-title,
 .learning-journal .adventure-title{font-size:27px}
}
@media(max-width:600px){
 .collection-page .adventure-hero,
 .learning-journal .adventure-hero{
   grid-template-columns:58px minmax(0,1fr);
   gap:8px 10px;padding:12px 11px;
   margin-bottom:13px;
   border-radius:22px 25px 22px 24px;
 }
 .adventure-hero .adventure-emblem{
   width:58px;height:65px;margin-top:28px;padding:5px;
 }
 .adventure-hero .adventure-emblem svg{width:48px;height:48px}
 .adventure-hero .adventure-brand{width:94px;height:29px;top:10px;right:11px}
 .adventure-hero .adventure-eyebrow{
   padding-right:80px;max-width:none;
   font-size:10px;min-height:0;
 }
 .collection-page .adventure-title,
 .learning-journal .adventure-title{font-size:23px}
 .adventure-hero .adventure-subtitle{
   font-size:13px;line-height:1.4;margin:4px 0 8px;
 }
 .adventure-hero .adventure-identity{font-size:12px;gap:5px}
 .adventure-hero .adventure-stats{grid-column:1/-1}
 .adventure-hero .collection-wallet{gap:9px;padding:8px 10px}
 .adventure-hero .collection-wallet-amount span,
 .adventure-hero .collection-wallet small,
 .adventure-hero .collection-owned-count span{font-size:12px}
 .adventure-hero .collection-owned-count{
   padding-left:10px;
 }
 .adventure-bag .collection-owned-count{
   padding-left:0;padding-right:10px;
 }
 .collection-page .collection-filters .collection-filter{font-size:13px}
 .learning-journal .lj-stats{gap:6px}
 .learning-journal .lj-stat{padding:9px 7px}
 .learning-journal .lj-stat-value{font-size:clamp(17px,5.4vw,23px)}
 .learning-journal .lj-stat-label{font-size:12px}
 .learning-journal .lj-panel>h2{font-size:17px}
 .learning-journal .lj-session-summary{min-height:65px}
 .learning-journal .lj-badge-preview li{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
 .learning-journal .lj-badge-preview li{transition:none}
}


/* brain-games-storybook.css */
/* Hitung Kilat v2.0 — Little Explorer Companion & Storybook Game Board.
   Presentation only. Scoring, session timing and rewards are server-owned. */
.reactor-overlay{background:rgba(48,64,48,.58);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);padding:20px;}
.reactor-shell{--reactor-ink:#405a46;--reactor-muted:#65715f;--reactor-gold:#e6b65f;--reactor-brown:#997552;position:relative;width:min(940px,96vw);min-height:0;max-height:94dvh;overflow:auto;border:3px solid #aa8965;border-radius:30px;background:linear-gradient(145deg,#fffaf0,#f8efd9 75%,#e7efdc);color:var(--reactor-ink);font-family:'Nunito',system-ui,sans-serif;box-shadow:0 7px 0 #887055,0 24px 65px #253a3b55,inset 0 0 0 5px #fffdf1;}
.reactor-shell::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.35;mask-image:none;background:radial-gradient(ellipse at 8% 95%,#bacba7,transparent 35%),radial-gradient(ellipse at 95% 8%,#f0ce91,transparent 40%);}
.reactor-shell *{box-sizing:border-box;}
.reactor-shell :is(button,input,select):focus-visible{outline:3px solid #496f56;outline-offset:4px;}
.reactor-top{padding:16px 24px;gap:12px;background:#e3ebd8;border-bottom:2px solid #bcc9a9;border-radius:26px 26px 40% 5% / 26px 26px 12px 8px;}
.reactor-brand{gap:12px;}
.reactor-bolt{width:48px;height:48px;flex:0 0 48px;border:2px solid #bb9765;border-radius:16px;background:#fff0cd url('assets/learning-quest/ui/quest-xp-star.svg') center/85% no-repeat;box-shadow:0 3px 0 #d3bd91;}
.reactor-kicker{margin:0 0 2px;color:#65775d;font-size:10px;font-weight:900;letter-spacing:.12em;}
.reactor-title{color:#405a46;font-size:30px;letter-spacing:-.025em;font-weight:900;}
.reactor-subtitle{display:none;}
.reactor-close{width:42px;height:42px;flex-shrink:0;border:2px solid #c4ad87;background:#fff7e7;color:#795e43;font-size:28px;box-shadow:0 3px 0 #d4c19f;}
.reactor-close:hover{transform:none;background:#f6e7c7;color:#5c4a35;}
.reactor-stage{padding:22px 30px 26px;}
.reactor-stage::before{display:none;}
.reactor-view{position:relative;min-height:0;max-width:790px;width:100%;margin:auto;padding:0;justify-content:flex-start;}
.reactor-view[hidden],.reactor-shell [hidden]{display:none!important;}
/* Companion and invitation occupy one compact, shared scene. */
.reactor-ready{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:16px 28px;text-align:left;align-items:center;}
.reactor-ready-intro{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;}
.reactor-ready-guide{display:block;position:static;width:155px;height:184px;object-fit:contain;margin:0;filter:drop-shadow(0 6px 3px #816b4c20);}
.reactor-personal{margin:0 0 6px;font-size:12px;font-weight:800;color:#788066;}
.reactor-ready h3{margin:0;color:#405a46;font-size:34px;font-weight:900;line-height:1.1;letter-spacing:-.03em;}
.reactor-ready-copy{margin:10px auto 0;max-width:300px;color:#66715e;font-size:16px;line-height:1.45;font-weight:700;}
.reactor-ready-board{padding:22px 20px 17px;background:#fffbef;border:2px solid #c3a279;border-radius:23px 28px 20px 26px;box-shadow:0 6px 0 #dfcba7,0 10px 22px #8a6e4610,inset 0 0 0 4px #fff;}
.reactor-mission-chips{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px;margin:0 0 17px;}
.reactor-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1.5px solid #d5b97f;border-radius:12px;background:#fff0cb;color:#785f34;font-size:12px;font-weight:900;box-shadow:0 3px 0 #e8d8b9;}
.reactor-chip::before{content:'';width:20px;height:20px;background:url('assets/learning-quest/ui/quest-xp-star.svg') center/contain no-repeat;}
.reactor-chip-time::before{background-image:url('assets/learning-quest/ui/quest-timer.svg');}
.reactor-difficulty{display:grid;grid-template-columns:1fr auto;gap:9px 12px;align-items:center;width:100%;margin:0 0 16px;}
.reactor-band,.reactor-classic{grid-column:1/-1;}
.reactor-band{color:#456149;font-size:16px;font-weight:900;}
.reactor-difficulty label{color:#6b725f;font-size:13px;font-weight:800;}
.reactor-challenge{min-width:112px;min-height:44px;padding:9px 12px;border:2px solid #93aa87;border-radius:12px;background:#eaf2df;color:#405b45;font:800 15px 'Nunito',sans-serif;}
.reactor-classic{margin:1px 0;color:#7b7964;font-size:12px;}
.reactor-xp-rule{margin:0 0 9px;color:#596d51;font-size:13px;font-weight:800;}
.reactor-xp-card{width:100%;margin:0;padding:12px;border:1px solid #cfdbbc;border-radius:14px;background:#f0f5e5;box-shadow:none;}
.reactor-xp-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 9px;margin-bottom:8px;color:#68745c;font-size:11px;font-weight:800;}
.reactor-xp-row strong{color:#4d694c;font-size:12px;}
.reactor-xp-track{height:10px;border:1px solid #cad5b7;background:#e0e7cd;box-shadow:inset 0 2px 2px #66794e18;}
.reactor-xp-fill{background:linear-gradient(90deg,#7ca47e,#c1d7a0);box-shadow:none;}
.reactor-main-btn,.reactor-submit,.reactor-ghost-btn{min-height:50px;padding:14px 23px;border:2px solid #688568;border-radius:16px;background:#769779;color:#fffdf2;font:900 16px/1.2 'Nunito',sans-serif;box-shadow:0 5px 0 #4f6b51;cursor:pointer;transition:transform .14s,background .14s;}
.reactor-ready>.reactor-main-btn{grid-column:1/-1;justify-self:center;min-width:265px;margin-top:3px;}
.reactor-main-btn:hover:not(:disabled){background:#668a6c;transform:translateY(-1px);box-shadow:0 5px 0 #4f6b51;filter:none;}
.reactor-main-btn:active:not(:disabled),.reactor-submit:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #4f6b51;}
.reactor-shell button:disabled{opacity:.55;cursor:wait;transform:none;}
.reactor-save-note{margin:14px 0 0;color:#6e7762;font-size:12px;line-height:1.45;font-weight:700;text-align:center;}
.reactor-ready>.reactor-save-note{grid-column:1/-1;margin:0;}
.reactor-save-note:empty{display:none;}
.reactor-save-note.error{color:#a05345;}
/* Three gameplay zones: HUD, parchment question, and mint answer dock. */
.reactor-play{max-width:700px;}
.reactor-hud{width:min(490px,100%);grid-template-columns:minmax(0,1fr) 130px minmax(0,1fr);gap:18px;margin:0 auto 14px;}
.reactor-stat{min-height:79px;padding:12px 15px;border:2px solid #c5b08a;border-radius:19px;background:#fff5dc;box-shadow:0 4px 0 #e0ccaa;transform:rotate(-2deg);text-align:center;}
.reactor-stat.right{background:#e8efdc;border-color:#b0c29d;transform:rotate(2deg);text-align:center;}
.reactor-stat-label{display:block;margin-bottom:4px;color:#72785e;font-size:11px;font-weight:900;letter-spacing:.05em;}
.reactor-stat-value{color:#466047;font-size:34px;font-weight:900;text-shadow:none;line-height:1;}
.reactor-timer{--ring:#82a982;width:122px;height:122px;padding:8px;border:2px solid #b09368;background:conic-gradient(var(--ring) calc(var(--progress)*1%),#e6dcc0 0);box-shadow:0 5px 0 #d7c098,0 0 0 6px #f4e5c4;}
.reactor-timer-core{background:#fff9e7;border:2px solid #ddc9a0;box-shadow:inset 0 3px 0 #efdfbc77;}
.reactor-timer-number{color:#405e46;font-size:46px;font-weight:900;text-shadow:none;}
.reactor-timer-unit{color:#817256;font-size:10px;font-weight:900;}
.reactor-play.is-warning .reactor-timer{--ring:#d5a043;animation:none;}
.reactor-play.is-critical .reactor-timer{--ring:#c77863;animation:none;}
.reactor-final-label{height:auto;min-height:20px;margin:0 0 10px;color:#89714b;font-size:11px;font-weight:900;letter-spacing:.03em;line-height:1.4;}
.reactor-question-card{width:100%;min-height:158px;padding:26px 18px;margin:0;border:3px solid #b18a59;border-radius:26px 32px 24px 30px;display:grid;place-items:center;background:radial-gradient(ellipse at 15% 5%,#fffef6,transparent 60%),linear-gradient(165deg,#fff5d9,#f3e1b7);box-shadow:0 7px 0 #d7bb8e,0 12px 20px #84673b18,inset 0 0 0 5px #fff8e4;overflow:hidden;}
.reactor-question-card::before{display:block;content:'';position:absolute;inset:12px;border:1px dashed #c7a67188;border-radius:17px;background:none;width:auto;height:auto;pointer-events:none;}
.reactor-question{font-size:clamp(42px,6vw,68px);font-weight:900;line-height:1.25;letter-spacing:.015em;color:#496047;text-shadow:0 2px 0 #fff8e7;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
.reactor-answer-dock{width:100%;max-width:none;display:grid;grid-template-columns:minmax(0,1fr) 138px;gap:12px;padding:14px;border:2px solid #a9bea1;border-radius:22px;background:#e2eddb;box-shadow:0 4px 0 #c4d2b5;margin:0;}
.reactor-input{min-height:56px;min-width:0;border:2px solid #a3b594;border-radius:14px;padding:12px;color:#405b46;background:#fffdf5;font:900 24px/1.15 'Nunito',sans-serif;box-shadow:inset 0 3px 0 #ede8d4;text-align:center;}
.reactor-input::placeholder{font-size:15px;color:#7c856b;font-weight:700;}
.reactor-input:focus{border-color:#64896a;box-shadow:0 0 0 3px #94b29144;}
.reactor-submit{min-height:56px;min-width:0;background:#dba66c;border-color:#ae7b46;box-shadow:0 5px 0 #9d6b3d;color:#493c29;font-size:18px;}
.reactor-submit:hover:not(:disabled){background:#e5b67b;box-shadow:0 5px 0 #9d6b3d;transform:translateY(-1px);filter:none;}
.reactor-play-meta{width:100%;max-width:none;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin:14px 0 0;color:#6b775e;font-size:12px;}
.reactor-key{padding:3px 7px;color:#7b795f;background:#faf2dd;border:1px solid #d7c8a5;border-radius:6px;box-shadow:none;font-size:11px;}
/* Reserve feedback space below the question; never cover the next problem. */
.reactor-flash{position:static;top:auto;left:auto;transform:none;display:flex;align-items:center;justify-content:center;width:100%;min-height:43px;margin:7px 0 3px;padding:5px 10px;opacity:0;border:0;border-radius:10px;box-shadow:none;font-size:14px;font-weight:900;letter-spacing:0;pointer-events:none;}
.reactor-flash.show{animation:none;opacity:1;transform:none;}
.reactor-flash.correct{color:#406b45;background:#e3eedb;border:0;}
.reactor-flash.wrong{color:#956349;background:#f6e5ce;border:0;}
.reactor-play.flash-correct .reactor-question-card{animation:none;border-color:#86a16e;}
.reactor-play.flash-wrong .reactor-question-card{animation:none;border-color:#c79c65;}
/* Result character shares the score board, with three small reward tiles. */
.reactor-result{max-width:700px;text-align:center;}
.reactor-result::before{display:none;}
.reactor-result h3{margin:0;color:#426048;font-size:34px;font-weight:900;line-height:1.15;letter-spacing:-.025em;}
.reactor-result-subtitle{margin:7px 0 17px;color:#6d785f;font-size:14px;font-weight:700;line-height:1.4;}
.reactor-result-board{width:100%;padding:12px 18px 18px;border:2px solid #c1a072;border-radius:28px 23px 26px 22px;background:radial-gradient(ellipse at 25% 38%,#f6e4ae88,transparent 55%),#fffae9;box-shadow:0 6px 0 #dac298,inset 0 0 0 4px #fffef5;}
.reactor-result-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;max-width:480px;margin:0 auto 5px;gap:6px;}
.reactor-result-guide{display:block;position:static;justify-self:center;width:180px;height:204px;max-width:100%;object-fit:contain;margin:0;filter:drop-shadow(0 6px 3px #8d734d22);}
.reactor-result-total{padding:12px 5px;}
.reactor-complete-badge{margin:0 0 8px;padding:5px 10px;border:1px solid #d9b571;border-radius:10px;background:#f7e5b5;color:#8a6b37;font-size:10px;font-weight:900;letter-spacing:.09em;}
.reactor-result-score{margin:0;color:#496346;font-size:88px;font-weight:900;line-height:1;letter-spacing:-.04em;text-shadow:0 3px 0 #e9dab5;}
.reactor-result-caption{margin:3px 0 8px;color:#7c7d62;font-size:14px;font-weight:800;}
.reactor-new-best{margin:0;padding:5px 11px 5px 29px;border:1px solid #d2aa62;border-radius:10px;background:#f8e3ac url('assets/learning-quest/ui/quest-xp-star.svg') 5px center/20px no-repeat;color:#88622e;box-shadow:0 3px 0 #e6cc99;font-size:12px;font-weight:900;animation:none;}
.reactor-result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:10px;margin:0;}
.reactor-result-card{min-width:0;padding:12px 7px;border:1.5px solid #d1b581;border-radius:16px;background:#fbefcd;box-shadow:0 3px 0 #ead8b7;}
.reactor-result-card:nth-child(2){background:#e3eed9;border-color:#b0c59b;box-shadow:0 3px 0 #ccdab6;}
.reactor-result-card:nth-child(3){background:#f7e5d5;border-color:#d5b59a;}
.reactor-result-card span{color:#77765a;font-size:10px;font-weight:900;letter-spacing:0;text-transform:none;}
.reactor-result-card strong{margin-top:5px;color:#496346;font-size:28px;font-weight:900;}
.reactor-result-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px;}
.reactor-result-actions .reactor-main-btn{min-width:170px;}
.reactor-ghost-btn{min-width:170px;background:#fff5dc;color:#796347;border-color:#c5a77c;box-shadow:0 5px 0 #d6bf98;font-size:14px;}
.reactor-ghost-btn:hover{background:#faebc8;transform:none;border-color:#b79a70;}
/* Retired arcade decorations must never reintroduce robot companions. */
.reactor-mascot,.reactor-math-field,.reactor-orb{display:none!important;}
@media(max-width:760px){
 .reactor-overlay{padding:0;align-items:stretch;}
 .reactor-shell{width:100%;height:100dvh;min-height:0;max-height:100dvh;border:0;border-radius:0;box-shadow:none;}
 .reactor-top{padding:12px 15px;border-radius:0 0 24px 8px;}
 .reactor-bolt{width:40px;height:40px;flex-basis:40px;border-radius:13px;}
 .reactor-title{font-size:25px;}.reactor-kicker{font-size:9px;}
 .reactor-stage{padding:18px max(15px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(15px,env(safe-area-inset-left));}
 .reactor-view{max-width:530px;}
 .reactor-ready{grid-template-columns:1fr;gap:17px;}
 .reactor-ready-intro{flex-direction:row;text-align:left;gap:12px;align-items:center;}
 .reactor-ready-guide{width:105px;height:135px;flex:0 0 105px;}
 .reactor-ready h3{font-size:29px;}.reactor-ready-copy{font-size:14px;margin:8px 0 0;}
 .reactor-personal{font-size:11px;}
 .reactor-ready-board{padding:16px;}.reactor-mission-chips{margin-bottom:14px;}
 .reactor-ready>.reactor-main-btn{width:100%;min-width:0;}
 .reactor-difficulty{margin-bottom:12px;}.reactor-band{font-size:15px;}
 .reactor-hud{grid-template-columns:minmax(0,1fr) 108px minmax(0,1fr);gap:12px;margin:4px 0 16px;}
 .reactor-stat{min-height:70px;padding:11px 7px;border-radius:16px;}.reactor-stat-label{font-size:10px;}.reactor-stat-value{font-size:29px;}
 .reactor-timer{width:102px;height:102px;padding:6px;}.reactor-timer-number{font-size:39px;}
 .reactor-question-card{min-height:144px;padding:23px 12px;border-radius:23px 27px 21px 25px;}.reactor-question{font-size:clamp(35px,10vw,54px);}
 .reactor-answer-dock{grid-template-columns:minmax(0,1fr) 86px;padding:10px;gap:9px;border-radius:18px;}
 .reactor-input{min-height:54px;font-size:22px;padding:10px 6px;}.reactor-input::placeholder{font-size:13px;}.reactor-submit{padding:12px 8px;min-height:54px;font-size:16px;}
 .reactor-play-meta{font-size:11px;justify-content:center;}.reactor-key{display:none;}
 .reactor-result h3{font-size:29px;}.reactor-result-subtitle{font-size:13px;margin-bottom:15px;}
 .reactor-result-board{padding:10px 12px 15px;}.reactor-result-guide{width:145px;height:176px;}.reactor-result-score{font-size:74px;}
 .reactor-result-grid{gap:7px;}.reactor-result-card{padding:12px 4px;}.reactor-result-card strong{font-size:25px;}.reactor-result-card span{font-size:10px;}
 .reactor-result-actions{width:100%;gap:10px;margin-top:21px;}.reactor-result-actions :is(.reactor-main-btn,.reactor-ghost-btn){flex:1 1 135px;min-width:0;padding:13px 8px;font-size:14px;}
}
@media(max-width:360px){.reactor-stage{padding:14px 12px 22px;}.reactor-ready-guide{width:88px;flex-basis:88px;height:120px;}.reactor-ready h3{font-size:26px;}.reactor-ready-board{padding:13px;}.reactor-xp-rule{font-size:12px;}.reactor-result h3{font-size:27px;}.reactor-result-guide{height:155px;}.reactor-result-score{font-size:66px;}.reactor-result-caption{font-size:12px;}}
@media(max-height:550px) and (min-width:600px){.reactor-ready{grid-template-columns:1fr 1fr;}.reactor-ready-intro{flex-direction:row;}.reactor-ready-guide{width:95px;height:145px;}.reactor-ready h3{font-size:27px;}.reactor-stage{padding:15px 24px;}.reactor-ready-board{padding:14px;}}
@media(prefers-reduced-motion:reduce){.reactor-shell *,.reactor-overlay{animation:none!important;transition:none!important;}}


/* memory-grid-storybook.css */
/* Jejak Ingatan v2.0 — Little Explorer Memory Adventure.
   All memory styles are isolated from Hitung Kilat and Learning Quest. */
.memory-overlay{position:fixed;inset:0;z-index:9900;display:grid;place-items:center;padding:20px;background:rgba(48,64,48,.58);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.memory-shell{--leaf:#405a46;--soft:#65715f;--brown:#997552;--paper:#fff9ec;position:relative;isolation:isolate;width:min(940px,96vw);max-height:94dvh;overflow:auto;color:var(--leaf);background:linear-gradient(145deg,#fffaf0,#f7f0df 75%,#e4efdf);border:3px solid #aa8965;border-radius:30px;box-shadow:0 7px 0 #887055,0 24px 65px #253a3b55,inset 0 0 0 5px #fffdf1;font-family:'Nunito',system-ui,sans-serif;overscroll-behavior:contain}
.memory-shell *{box-sizing:border-box}
.memory-shell [hidden]{display:none!important}
.memory-shell button{font-family:inherit;cursor:pointer}
.memory-shell button:disabled{cursor:wait;opacity:.6}
.memory-shell :is(button,[tabindex]):focus-visible{outline:3px solid #496f56;outline-offset:4px}
.memory-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 24px;background:#e3ebd8;border-bottom:2px solid #bcc9a9;border-radius:26px 26px 40% 5% / 26px 26px 12px 8px}
.memory-brand{display:flex;align-items:center;gap:12px;min-width:0}
.memory-emblem{width:48px;height:48px;flex:none;display:grid;grid-template-columns:repeat(2,1fr);gap:4px;padding:9px;border:2px solid #b49970;border-radius:16px;background:#fff4db;box-shadow:0 3px 0 #d3bd91;transform:rotate(-4deg)}
.memory-emblem i{display:block;border:1px solid #839e7b;border-radius:4px;background:#c6ddba}
.memory-emblem i:nth-child(2){background:#c3dfe7;border-color:#86a8b1}.memory-emblem i:nth-child(3){background:#f5dfaa;border-color:#c5ad75}.memory-emblem i:nth-child(4){background:#deceeb;border-color:#b29bbe}
.memory-brand-copy{display:grid;gap:2px}.memory-eyebrow{color:#65775d;font-size:10px;font-weight:900;letter-spacing:.12em}
.memory-shell .memory-title{margin:0;color:#405a46;font-size:30px;line-height:1.05;letter-spacing:-.025em;font-weight:900}
.memory-subtitle{display:none}
.memory-shell .memory-close{display:grid;place-items:center;flex:none;width:42px;height:42px;border:2px solid #c4ad87;border-radius:50%;background:#fff7e7;color:#795e43;font-size:28px;line-height:1;box-shadow:0 3px 0 #d4c19f}
.memory-close:hover{background:#f6e7c7}
.memory-stage{position:relative;padding:22px 30px 26px;background:radial-gradient(ellipse at 4% 94%,#c6d9bc33,transparent 40%),radial-gradient(ellipse at 94% 6%,#ded2ed33,transparent 40%)}
.memory-view{position:relative;width:100%;max-width:790px;margin:auto}
.memory-view[hidden]{display:none!important}
/* Invitation: the profile companion and challenge board form one scene. */
.memory-ready{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:18px 28px;text-align:left}
.memory-invitation{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.memory-guide{display:block;position:static;width:155px;height:184px;object-fit:contain;filter:drop-shadow(0 6px 3px #816b4c20)}
.memory-personal{margin:0 0 6px;color:#788066;font-size:12px;font-weight:800}
.memory-shell .memory-ready h3,.memory-shell .memory-result h3{margin:0;color:#405a46;font-size:34px;line-height:1.12;font-weight:900;letter-spacing:-.03em}
.memory-intro{margin:10px 0 0;color:#66715e;font-size:15px;font-weight:700;line-height:1.5}
.memory-ready-main{padding:22px 20px 18px;border:2px solid #bca381;border-radius:23px 28px 20px 26px;background:#fffbef;box-shadow:0 6px 0 #dfcba7,0 10px 22px #8a6e4610,inset 0 0 0 4px #fff}
.memory-chips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 17px}
.memory-chip{padding:7px 10px;border:1.5px solid #b5c7a6;border-radius:11px;background:#e6f0dd;color:#526b4b;box-shadow:0 3px 0 #d5e1c8;font-size:11px;font-weight:900}
.memory-chip:nth-child(2){background:#e5eff4;border-color:#b5ccd5;box-shadow:0 3px 0 #d3e3e8;color:#55717b}
.memory-chip:nth-child(3){background:#eee6f5;border-color:#cebdd9;box-shadow:0 3px 0 #dfd4e7;color:#766480}
.memory-rank{margin:0 0 11px;color:#47624b;font-size:16px;line-height:1.4;font-weight:900}
.memory-xp-rule{margin:0 0 14px;color:#6f795f;font-size:13px;font-weight:700}
.memory-ready-facts{display:grid;gap:8px}
.memory-record,.memory-daily{margin:0;padding:11px 12px;border:1px solid #d5c19b;border-radius:12px;background:#fbf0d5;color:#7b6c4a;font-size:12px;font-weight:800;line-height:1.4}
.memory-daily{border-color:#bdcda9;background:#eef4e4;color:#596e50}
.memory-primary,.memory-secondary{min-height:50px;padding:14px 23px;border:2px solid #688568;border-radius:16px;background:#769779;color:#fffdf2;font-size:16px;font-weight:900;line-height:1.2;box-shadow:0 5px 0 #4f6b51;transition:transform .14s,background .14s}
.memory-primary:not(:disabled):hover{background:#668a6c;transform:translateY(-1px)}
.memory-primary:not(:disabled):active,.memory-secondary:not(:disabled):active{transform:translateY(3px);box-shadow:0 2px 0 #4f6b51}
.memory-secondary{background:#fff5dc;color:#796347;border-color:#c5a77c;box-shadow:0 5px 0 #d6bf98;font-size:14px}
.memory-secondary:not(:disabled):hover{background:#faebc8}
.memory-ready>.memory-primary{grid-column:1/-1;justify-self:center;min-width:265px;margin-top:3px}
.memory-note{margin:14px 0 0;color:#6e7762;font-size:12px;line-height:1.45;font-weight:700;text-align:center}
.memory-note:empty{display:none}.memory-note.is-error{color:#986348}
.memory-ready>.memory-note{grid-column:1/-1;margin:0}
/* Memory board: four pastel pieces; six pieces remain supported for higher grades. */
.memory-play{max-width:660px;text-align:center}
.memory-hud{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:center;gap:12px;max-width:440px;margin:0 auto 17px}
.memory-stat,.memory-round-pill{padding:9px 12px;border:1.5px solid #c7b591;border-radius:13px;background:#fff4da;color:#75724f;box-shadow:0 3px 0 #e1d1b0;font-size:12px;line-height:1.3;font-weight:900;white-space:nowrap}
.memory-round-pill{padding:12px 9px;border:2px solid #a3b994;border-radius:16px;background:#e1edd6;color:#496445;box-shadow:0 4px 0 #c1d2ad;font-size:14px}
.memory-shell .memory-phase{margin:0 0 9px;color:#496148;font-size:24px;font-weight:900;line-height:1.2;letter-spacing:-.02em}
.memory-scan-clock{display:inline-block;min-width:166px;margin:0 auto 12px;padding:5px 11px;border:1px solid #c0cdd7;border-radius:10px;background:#e8f0f5;color:#55707d;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.memory-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:min(350px,100%);gap:12px;margin:0 auto;padding:14px;border:3px solid #af8c60;border-radius:26px 30px 25px 28px;background:repeating-linear-gradient(2deg,transparent 0 17px,#b18b5720 18px 19px),linear-gradient(155deg,#efddbd,#d9bc91);box-shadow:0 7px 0 #b49369,0 12px 22px #8a6c4120,inset 0 0 0 4px #fff3d7}
.memory-board.is-six{width:min(455px,100%);grid-template-columns:repeat(3,minmax(0,1fr))}
.memory-tile{position:relative;display:grid;place-items:center;min-width:0;min-height:107px;border:2px solid #9db68c;border-radius:17px;background:#dceacb;color:#40533b;box-shadow:0 4px 0 #a6ba95,inset 0 2px 0 #ffffff99;font-weight:900;font-size:46px;line-height:1.1;font-variant-numeric:tabular-nums}
.memory-tile:nth-child(4n+2){background:#dcecf2;border-color:#99b5c1;box-shadow:0 4px 0 #a4bdc7,inset 0 2px 0 #ffffff99;color:#3e5866}
.memory-tile:nth-child(4n+3){background:#faebbe;border-color:#c5ae73;box-shadow:0 4px 0 #d0b982,inset 0 2px 0 #ffffff99;color:#6b5835}
.memory-tile:nth-child(4n+4){background:#e9def1;border-color:#bba3c8;box-shadow:0 4px 0 #c4afd0,inset 0 2px 0 #ffffff99;color:#64516f}
.memory-tile:not(.is-open):not(.is-target){color:#77806c;font-size:32px;background:#f5f1df;border-color:#c8c5ac;box-shadow:0 4px 0 #cbc5ac,inset 0 2px 0 #fffaf0}
.memory-tile.is-target{border:3px solid #896d3f;background:#fff1bb;color:#6e542d;box-shadow:0 4px 0 #b1955f,inset 0 0 0 4px #fff9dc;outline:2px dashed #9d7848;outline-offset:3px;padding-bottom:19px;font-size:42px}
.memory-target-label{position:absolute;left:0;right:0;bottom:9px;color:#806538;font-size:11px;font-weight:900;letter-spacing:.02em}
.memory-shell .memory-prompt{max-width:500px;margin:18px auto 12px;color:#53694e;font-size:17px;font-weight:800;line-height:1.4}
.memory-play[data-phase='scan'] .memory-prompt{margin-bottom:0;color:#758067;font-size:14px}
.memory-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:min(460px,100%);margin:auto;padding:12px;border:1.5px solid #c1cdb4;border-radius:20px;background:#e9efdf}
.memory-options:empty{display:none}
.memory-shell .memory-choice{min-height:58px;min-width:0;padding:8px 5px;border:2px solid #a7bb99;border-radius:14px;background:#f3f8e9;color:#496344;font-size:25px;font-weight:900;box-shadow:0 5px 0 #b0c39f,inset 0 2px 0 #fff;transition:transform .1s,box-shadow .1s}
.memory-choice:nth-child(2){background:#e7f1f5;border-color:#aec4cc;box-shadow:0 5px 0 #b4cbd2,inset 0 2px 0 #fff;color:#4b6975}.memory-choice:nth-child(3){background:#fff1ce;border-color:#cfb77e;box-shadow:0 5px 0 #d9c28b,inset 0 2px 0 #fff;color:#7c6537}.memory-choice:nth-child(4){background:#f0e8f6;border-color:#c2afd0;box-shadow:0 5px 0 #cbb9d7,inset 0 2px 0 #fff;color:#776282}
.memory-choice:not(:disabled):hover{transform:translateY(-2px)}
.memory-shell .memory-choice:active,.memory-shell .memory-choice[aria-pressed='true']{transform:translateY(4px);border-color:#6c815a;box-shadow:0 1px 0 #92a57d,inset 0 2px 4px #61735020;outline:2px solid #a5b98a;outline-offset:1px;opacity:1}
.memory-action-zone{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:14px}
.memory-action-zone:has(.memory-feedback:empty):not(:has(button:not([hidden]))){display:none}
.memory-feedback{width:min(490px,100%);margin:0;padding:11px 14px;border:1.5px solid #c5cdb6;border-radius:14px;background:#edf2e2;color:#617455;font-size:14px;font-weight:900;line-height:1.45}
.memory-feedback:empty{display:none}.memory-feedback.is-correct{background:#e0edda;border-color:#a9c49e;color:#4a7047}.memory-feedback.is-error{background:#f8e7d5;border-color:#d8b597;color:#956448}
.memory-action-zone>.memory-primary{min-width:230px}
/* Result hero and score are integrated in the same parchment board. */
.memory-result{max-width:700px;text-align:center}
.memory-result-subtitle{margin:7px 0 17px;color:#6d785f;font-size:14px;font-weight:700;line-height:1.4}
.memory-result-board{padding:12px 18px 18px;border:2px solid #c1a072;border-radius:28px 23px 26px 22px;background:radial-gradient(ellipse at 25% 38%,#e1d7ed66,transparent 55%),#fffae9;box-shadow:0 6px 0 #dac298,inset 0 0 0 4px #fffef5}
.memory-result-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:6px;max-width:480px;margin:0 auto 5px}
.memory-result-guide{display:block;justify-self:center;width:180px;height:204px;max-width:100%;object-fit:contain;filter:drop-shadow(0 6px 3px #8d734d22)}
.memory-result-total{padding:12px 5px}
.memory-complete-badge{display:inline-block;margin-bottom:10px;padding:5px 10px;border:1px solid #c6b2d0;border-radius:10px;background:#ede3f1;color:#7b6484;font-size:10px;font-weight:900;letter-spacing:.06em}
.memory-result-score{display:block;margin:0;color:#496346;font-size:78px;font-weight:900;line-height:1;letter-spacing:-.04em;text-shadow:0 3px 0 #e9dab5;font-variant-numeric:tabular-nums}
.memory-score-caption{margin:5px 0 8px;color:#7c7d62;font-size:14px;font-weight:800}
.memory-record-badge{display:inline-block;margin:0;padding:5px 11px 5px 29px;border:1px solid #d2aa62;border-radius:10px;background:#f8e3ac url('assets/learning-quest/ui/quest-xp-star.svg') 5px center/20px no-repeat;color:#88622e;box-shadow:0 3px 0 #e6cc99;font-size:12px;font-weight:900}
.memory-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
.memory-result-card{min-width:0;display:grid;gap:5px;padding:12px 7px;border:1.5px solid #d1b581;border-radius:16px;background:#fbefcd;color:#77765a;box-shadow:0 3px 0 #ead8b7;font-size:10px;font-weight:900}
.memory-result-card:nth-child(2){background:#e3eed9;border-color:#b0c59b;box-shadow:0 3px 0 #ccdab6}.memory-result-card:nth-child(3){background:#e5edf3;border-color:#b4c6d2;box-shadow:0 3px 0 #ccdbe5}
.memory-result-card strong{color:#496346;font-size:28px;font-weight:900}
.memory-result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px}
.memory-result-actions button{min-width:170px}
@media(max-width:700px){
 .memory-overlay{padding:0;align-items:stretch}.memory-shell{width:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0;box-shadow:none}
 .memory-top{padding:12px 15px;border-radius:0 0 24px 8px}.memory-brand{gap:10px}.memory-emblem{width:40px;height:40px;padding:7px;border-radius:13px}.memory-shell .memory-title{font-size:25px}.memory-eyebrow{font-size:9px}
 .memory-stage{padding:18px max(15px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(15px,env(safe-area-inset-left))}.memory-view{max-width:530px}
 .memory-ready{grid-template-columns:1fr;gap:17px}.memory-invitation{flex-direction:row;text-align:left;gap:12px}.memory-guide{width:105px;height:145px;flex:0 0 105px}.memory-shell .memory-ready h3{font-size:28px}.memory-personal{font-size:11px}.memory-intro{margin-top:8px;font-size:13px;line-height:1.45}
 .memory-ready-main{padding:16px}.memory-chips{margin-bottom:14px}.memory-rank{font-size:15px}.memory-ready>.memory-primary{width:100%;min-width:0}
 .memory-hud{gap:8px;margin-bottom:15px}.memory-stat{padding:9px 5px;font-size:11px}.memory-round-pill{padding:11px 5px;font-size:12px}.memory-shell .memory-phase{font-size:23px}
 .memory-board{width:min(320px,100%);padding:12px;gap:10px}.memory-tile{min-height:92px;font-size:40px;border-radius:14px}.memory-board.is-six{width:min(390px,100%)}.memory-board.is-six .memory-tile{min-height:85px;font-size:35px}
 .memory-shell .memory-prompt{font-size:15px;margin:16px auto 12px}.memory-options{gap:9px;padding:10px}.memory-shell .memory-choice{min-height:56px;font-size:24px}.memory-feedback{font-size:13px}.memory-action-zone>.memory-primary{width:min(100%,300px)}
 .memory-shell .memory-result h3{font-size:29px}.memory-result-subtitle{font-size:13px;margin-bottom:15px}.memory-result-board{padding:10px 12px 15px}.memory-result-guide{width:145px;height:176px}.memory-result-score{font-size:65px}.memory-results{gap:7px}.memory-result-card{padding:12px 4px}.memory-result-card strong{font-size:25px}.memory-result-actions{gap:10px;margin-top:21px}.memory-result-actions button{flex:1 1 135px;min-width:0;padding:13px 8px;font-size:14px}
}
@media(max-width:360px){.memory-stage{padding:14px 12px 22px}.memory-guide{width:88px;flex-basis:88px;height:133px}.memory-shell .memory-ready h3{font-size:25px}.memory-ready-main{padding:13px}.memory-chip{padding:7px 8px;font-size:10px}.memory-tile{min-height:85px}.memory-result-guide{height:155px}.memory-result-score{font-size:58px}.memory-complete-badge{font-size:9px}}
@media(max-height:550px) and (min-width:600px){.memory-stage{padding:15px 24px}.memory-ready{grid-template-columns:1fr 1fr}.memory-invitation{flex-direction:row}.memory-guide{width:95px;height:145px}.memory-shell .memory-ready h3{font-size:26px}}
@media(prefers-reduced-motion:reduce){.memory-shell *{animation:none!important;transition:none!important}}
/* Taman Bermain · compact illustrated activity tiles, never generic icon fonts. */
.world-playground-intro{font-size:15px;line-height:1.5;margin:0 0 12px;color:#55705b}
.world-playground-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0}
.world-playground-card{display:flex!important;flex-direction:column;justify-content:center;align-items:center;gap:9px;min-height:154px;padding:16px!important;text-align:center;background:#f9f0dc!important;color:#48624d!important;border:2px solid #c8af89!important;border-radius:21px!important;box-shadow:0 4px 0 #ccb38c!important}
.world-playground-card:first-child{background:#e5efdc!important;border-color:#acc8ad!important}
.world-playground-card:hover:not(:disabled){transform:translateY(-2px)}
.world-playground-card:disabled{opacity:.55}
.world-playground-card strong{font-size:18px;font-weight:900}
.world-playground-card small{font-size:12px;color:#6e806d}
.world-playground-art{height:51px;display:grid;place-items:center}
.world-playground-art.is-math{width:65px;border:3px solid #a4bd9c;border-radius:14px;background:#fcf7e8;color:#698e72;font-weight:900;font-size:24px;transform:rotate(-5deg)}
.world-playground-art.is-memory{display:grid;grid-template-columns:repeat(2,22px);gap:4px;transform:rotate(4deg)}
.world-playground-art.is-memory i{width:22px;height:22px;border:2px solid #a4bbab;border-radius:7px;background:#c9e2b9}
.world-playground-art.is-memory i:nth-child(2){background:#c5e4ec}.world-playground-art.is-memory i:nth-child(3){background:#f4dba4}.world-playground-art.is-memory i:nth-child(4){background:#e4cdea}
.world-playground-progress{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px;color:#58755f;font-size:13px}
.world-playground-progress span{background:#e8efdc;border:1px solid #c6d6c0;border-radius:20px;padding:8px 12px}
@media(max-width:470px){.world-playground-cards{grid-template-columns:1fr}.world-playground-card{min-height:110px;flex-direction:row;justify-content:flex-start;text-align:left}.world-playground-art{flex:none}}



/* unified-typography.css */
/* NALAROO Unified Typography & Learning Readability v1.0
 * One loaded Nunito family, a restrained 400–800 weight scale, and a consistent
 * ink hierarchy across Login, Explorer, Home, Journal, Collectibles and Learning.
 * No layout coordinates, data logic, illustrations, rarity frames or result
 * composite artwork are altered here.
 */
:root {
  --nr-font-ui:"Nunito","Trebuchet MS",ui-rounded,system-ui,sans-serif;
  --nr-ink:#244665;
  --nr-forest:#3E5948;
  --nr-copy:#526950;
  --nr-warm-ink:#83533D;
  --nr-weight-copy:500;
  --nr-weight-label:600;
  --nr-weight-action:700;
  --nr-weight-heading:800;
}

/* Explicitly unify the page roots; Google sign-in retains Google's own label. */
body.login-gateway .nalaroo-auth-card,
body.explorer-view .explorer-scene,
body.explorer-view .explorer-family-tools,
body.living-world-view .living-world,
body.collection-view .collection-page,
body.learning-journal-view .learning-journal,
body.quest-view .learning-quest,
body.quest-view .world-dialog,
body.living-world-view .world-dialog,
.collection-dialog,
.adventure-quiz,
.adventure-result,
.exam-shell,
.exam-result {
  font-family:var(--nr-font-ui);
}
body.login-gateway .nalaroo-auth-card :is(button,input,select,textarea):not(.nalaroo-auth-google),
body.explorer-view .explorer-scene :is(button,input,select,textarea),
body.living-world-view .world-dialog :is(button,select,input),
body.quest-view .learning-quest :is(button,input,textarea),
body.collection-view .collection-page :is(button,input,select),
body.learning-journal-view .learning-journal button,
.exam-shell :is(button,input,textarea) {
  font-family:var(--nr-font-ui);
}

/* LOGIN: headings lead; instructional text and controls stay comfortably legible. */
body.login-gateway .nalaroo-auth-card h1{
  font-family:var(--nr-font-ui);
  font-size:clamp(1.75rem,3vw,2.25rem);
  font-weight:var(--nr-weight-heading);
  line-height:1.2;
  letter-spacing:-.018em;
  color:#173551;
}
body.login-gateway .nalaroo-auth-note{
  font-size:1rem;
  font-weight:var(--nr-weight-copy);
  line-height:1.55;
  color:#3F5570;
}
body.login-gateway .nalaroo-auth-card :is(.auth-email-choice,.primary){
  font-size:1rem;
  font-weight:var(--nr-weight-action);
  line-height:1.35;
}
body.login-gateway .nalaroo-auth-field{
  font-size:.9375rem;
  font-weight:var(--nr-weight-label);
}
body.login-gateway .nalaroo-auth-field input{
  font-size:1rem;
  font-weight:var(--nr-weight-copy);
  line-height:1.5;
}
body.login-gateway .auth-signup,
body.login-gateway .auth-family-note{
  font-size:.875rem;
  font-weight:var(--nr-weight-copy);
  line-height:1.55;
}
body.login-gateway .nalaroo-auth-card .nalaroo-auth-google{
  font-family:Arial,system-ui,sans-serif; /* Provider button identity */
  font-size:1rem;
  font-weight:500;
}

/* EXPLORER SELECT & EDIT: one headline and one clear action per card. */
body.explorer-view .explorer-heading h1,
body.explorer-view .explorer-creating .explorer-heading h1{
  font-family:var(--nr-font-ui);
  font-size:clamp(1.625rem,2.8vw,2.125rem);
  font-weight:var(--nr-weight-heading);
  line-height:1.23;
  letter-spacing:-.015em;
}
body.explorer-view .explorer-start h2{
  font-family:var(--nr-font-ui);
  font-weight:var(--nr-weight-heading);
  line-height:1.22;
  letter-spacing:-.01em;
}
body.explorer-view .explorer-heading>p,
body.explorer-view .explorer-editor-note{
  font-family:var(--nr-font-ui);
  font-size:.9375rem;
  font-weight:var(--nr-weight-copy);
  line-height:1.5;
}
body.explorer-view :is(.explorer-play,.explorer-edit,.explorer-back,.explorer-submit){
  font-family:var(--nr-font-ui);
  font-weight:var(--nr-weight-action);
  line-height:1.3;
}
body.explorer-view .explorer-play{font-size:1rem}
body.explorer-view .explorer-edit{font-size:.875rem}
body.explorer-view .explorer-family-tools :is(p,button,small,strong){
  font-family:var(--nr-font-ui);
}
/* Name and avatar editing must match the profile cards. */
body.explorer-view .explorer-form :is(.explorer-editor-field>label,.explorer-avatar-picker legend){
  font-family:var(--nr-font-ui);
  font-size:1rem;
  font-weight:var(--nr-weight-action);
  line-height:1.4;
}
body.explorer-view .explorer-form :is(input:not([type=radio]),select){
  font-family:var(--nr-font-ui);
  font-size:1rem;
  font-weight:var(--nr-weight-copy);
  line-height:1.45;
}
body.explorer-view .explorer-form .explorer-status{
  font-family:var(--nr-font-ui);
  font-size:.875rem;
  font-weight:var(--nr-weight-label);
  line-height:1.5;
}

/* HOME: honor the artist-calibrated label positions and small HUD geometry. */
body.living-world-view .integrated-world .world-building-label{
  font-family:var(--nr-font-ui)!important;
  font-weight:var(--nr-weight-heading)!important;
  letter-spacing:0;
}
body.living-world-view .integrated-world .world-profile-copy strong{
  font-family:var(--nr-font-ui);
  font-weight:var(--nr-weight-heading);
}
body.living-world-view .integrated-world .world-profile-copy>span,
body.living-world-view .integrated-world .world-profile-copy small{
  font-family:var(--nr-font-ui);
  font-weight:var(--nr-weight-label);
}
body.living-world-view .integrated-world .world-coins strong{
  font-weight:var(--nr-weight-heading);
  font-variant-numeric:tabular-nums;
}

/* WORLD COURSE SELECTOR: a readable learning choice, not administrative UI. */
body.living-world-view .world-dialog-heading h2,
body.quest-view .world-dialog-heading h2{
  font-size:1.375rem;
  font-weight:var(--nr-weight-heading);
  line-height:1.3;
  color:var(--nr-forest);
}
body.living-world-view .world-dialog-content p,
body.quest-view .world-dialog-content p{
  font-size:1rem;
  font-weight:var(--nr-weight-copy);
  line-height:1.55;
  color:var(--nr-forest);
}
body.living-world-view .world-field,
body.quest-view .world-field{
  font-size:1rem;
  font-weight:var(--nr-weight-action);
  line-height:1.4;
}
body.living-world-view .world-field select,
body.quest-view .world-field select{
  font-size:1rem;
  font-weight:var(--nr-weight-label);
}
body.living-world-view .world-action,
body.quest-view .world-action{
  font-family:var(--nr-font-ui);
  font-size:1rem;
  font-weight:var(--nr-weight-action);
  line-height:1.35;
}

/* DESTINATION CHAPTER HEADERS: harmonize title, story subtitle and chapter tag. */
.collection-page .adventure-title,
.learning-journal .adventure-title{
  font-size:clamp(1.625rem,2.4vw,2rem);
  font-weight:var(--nr-weight-heading);
  line-height:1.2;
  letter-spacing:-.015em;
  color:var(--nr-ink);
}
.collection-page .adventure-hero .adventure-eyebrow,
.learning-journal .adventure-hero .adventure-eyebrow{
  font-size:.75rem;
  font-weight:var(--nr-weight-heading);
  line-height:1.4;
  letter-spacing:.07em;
}
.collection-page .adventure-hero .adventure-subtitle,
.learning-journal .adventure-hero .adventure-subtitle{
  font-size:1rem;
  font-weight:var(--nr-weight-copy);
  line-height:1.5;
  color:var(--nr-copy);
}
.collection-page .adventure-identity,
.learning-journal .adventure-identity{
  font-weight:var(--nr-weight-label);
}
.collection-page .adventure-hero .collection-wallet-amount span,
.collection-page .adventure-hero .collection-owned-count span{
  font-size:.8125rem;
  font-weight:var(--nr-weight-copy);
}
.collection-page .adventure-hero .collection-balance,
.collection-page .adventure-hero .collection-owned-count strong{
  font-weight:var(--nr-weight-heading);
  font-variant-numeric:tabular-nums;
}
.collection-page :is(.collection-section-heading h2,.collection-heading h1),
.learning-journal .lj-panel>h2{
  font-weight:var(--nr-weight-heading);
  line-height:1.28;
  color:var(--nr-ink);
}
.collection-page .collection-filter,
.collection-page .collection-family-link,
.collection-page .collection-link{
  font-family:var(--nr-font-ui);
  font-weight:var(--nr-weight-action);
  line-height:1.3;
}

/* Collectible art/frame is fixed 3:4. Do not scale/reposition text on the card. */
.collection-page .collection-card h3{
  font-family:var(--nr-font-ui);
  font-weight:var(--nr-weight-heading);
}
.collection-page .collection-card :is(.collection-rarity,.collection-price){
  font-family:var(--nr-font-ui);
  font-weight:var(--nr-weight-action);
}
.collection-dialog .collection-dialog-header h2{
  font-size:1.375rem!important;
  font-weight:var(--nr-weight-heading);
  line-height:1.3;
}
.collection-dialog .collection-flavor,
.collection-dialog .collection-note,
.collection-dialog .collection-acquired{
  font-weight:var(--nr-weight-copy);
  line-height:1.55;
}
.collection-dialog .collection-button{
  font-family:var(--nr-font-ui);
  font-weight:var(--nr-weight-action);
}

/* PROGRESS: metrics stand apart from explanations and action labels. */
.learning-journal .lj-panel>h2{
  font-size:1.25rem;
}
.learning-journal :is(.lj-subject h3,.lj-next h3){
  font-size:1.0625rem;
  font-weight:var(--nr-weight-action);
  line-height:1.35;
}
.learning-journal .lj-stat-value{
  font-size:clamp(1.5rem,2.5vw,1.875rem);
  font-weight:var(--nr-weight-heading);
  line-height:1.2;
  font-variant-numeric:tabular-nums;
}
.learning-journal .lj-stat-label{
  font-size:.875rem;
  font-weight:var(--nr-weight-copy);
  line-height:1.45;
}
.learning-journal :is(.lj-caption,.lj-no-data,.lj-next-copy,.lj-session-score,.lj-session-details,.lj-badge p,.lj-empty){
  font-size:.875rem;
  font-weight:var(--nr-weight-copy);
  line-height:1.5;
  color:var(--nr-copy);
}
.learning-journal :is(.lj-accuracy,.lj-review-count,.lj-session-heading strong){
  font-size:.875rem;
  font-weight:var(--nr-weight-action);
  line-height:1.4;
}
.learning-journal :is(.lj-link-button,.lj-button,.lj-detail-label){
  font-size:.9375rem;
  font-weight:var(--nr-weight-action);
  line-height:1.4;
}
.learning-journal .lj-badge-preview li{
  font-size:.875rem;
  font-weight:var(--nr-weight-action);
}
.learning-journal .lj-method-note{font-size:.8125rem;line-height:1.5}

/* LEARNING QUEST — primary route for Practice, Assessment and Cek Kemampuan.
 * Reading comfort takes priority over decorative, ultra-bold question styling. */
body.quest-view .learning-quest{
  font-family:var(--nr-font-ui);
  font-size:1rem;
  line-height:1.55;
  color:var(--nr-ink);
}
.learning-quest .quest-heading h1{
  font-size:clamp(1.625rem,2.6vw,2rem);
  font-weight:var(--nr-weight-heading);
  line-height:1.22;
  letter-spacing:-.015em;
}
.learning-quest :is(.quest-mode,.quest-position,.quest-explorer,.quest-chip,.quest-hint){
  font-size:.875rem;
  line-height:1.45;
}
.learning-quest .quest-mode{font-weight:var(--nr-weight-action)}
.learning-quest .quest-explorer{font-weight:var(--nr-weight-copy)}
.learning-quest .quest-stem{
  font-size:clamp(1.3125rem,2.2vw,1.625rem);
  line-height:1.5;
  font-weight:var(--nr-weight-action);
  letter-spacing:0;
  text-wrap:pretty;
  overflow-wrap:anywhere;
}
.learning-quest .quest-option{
  font-family:var(--nr-font-ui);
  font-size:1.0625rem;
  font-weight:var(--nr-weight-label);
  line-height:1.45;
}
.learning-quest .quest-choice-text{
  font-size:1.0625rem;
  font-weight:var(--nr-weight-action);
  line-height:1.45;
}
.learning-quest .quest-input{
  font-family:var(--nr-font-ui);
  font-size:1.0625rem;
  font-weight:var(--nr-weight-copy);
  line-height:1.55;
}
.learning-quest .quest-button{
  font-family:var(--nr-font-ui);
  font-size:1rem;
  font-weight:var(--nr-weight-action);
  line-height:1.35;
}
.learning-quest .quest-feedback h2{
  font-size:1.25rem;
  font-weight:var(--nr-weight-heading);
  line-height:1.35;
}
.learning-quest .quest-feedback p,
.learning-quest .quest-explanation{
  font-size:1.0625rem;
  font-weight:var(--nr-weight-copy);
  line-height:1.6;
  color:#334D47;
  overflow-wrap:anywhere;
}
.learning-quest .quest-feedback .quest-answer-label{
  font-weight:var(--nr-weight-action);
}
.learning-quest .quest-award{
  font-size:.875rem;
  font-weight:var(--nr-weight-action);
}
.learning-quest .quest-review details p{
  font-size:1rem;
  font-weight:var(--nr-weight-copy);
  line-height:1.55;
}
.learning-quest .quest-review summary{
  font-weight:var(--nr-weight-action);
}
.learning-quest .quest-result-message{
  font-size:1rem;
  line-height:1.55;
  font-weight:var(--nr-weight-label);
  color:#465F50;
}
.learning-quest .quest-score{
  font-size:1.75rem;
  line-height:1.25;
  font-weight:var(--nr-weight-heading);
  font-variant-numeric:tabular-nums;
}
.learning-quest .quest-result-stats strong{
  font-weight:var(--nr-weight-heading);
  font-variant-numeric:tabular-nums;
}
.learning-quest .quest-result-stats span{
  font-size:.875rem;
  font-weight:var(--nr-weight-copy);
}
.learning-quest .quest-result-awards .quest-award{
  font-size:1rem;
  font-weight:var(--nr-weight-action);
}
/* Composite hero text belongs on the wooden sign. Preserve its overlay scale. */
.learning-quest .quest-composite-title{
  font-family:var(--nr-font-ui);
}

/* LEGACY QUIZ & ASSESSMENT: use the same reading scale when these views appear. */
.adventure-quiz .question-text{
  font-size:clamp(1.3125rem,2vw,1.625rem);
  line-height:1.48;
  font-weight:var(--nr-weight-action);
  letter-spacing:0;
}
.adventure-quiz :is(.option-text,.text-answer){
  font-size:1.0625rem;
  font-weight:var(--nr-weight-action);
  line-height:1.45;
}
.adventure-quiz .feedback .feedback-title{
  font-size:1.25rem;
  font-weight:var(--nr-weight-heading);
  line-height:1.35;
}
.adventure-quiz .feedback .feedback-copy{
  font-size:1.0625rem;
  font-weight:var(--nr-weight-copy);
  line-height:1.55;
}
.adventure-quiz :is(.next-btn,.check-btn,.skip-btn){
  font-size:1rem;
  font-weight:var(--nr-weight-action);
}
.adventure-result h2{
  font-weight:var(--nr-weight-heading);
}
.adventure-result .result-message{
  font-size:1rem;
  font-weight:var(--nr-weight-copy);
  line-height:1.55;
}
.exam-shell .exam-question-text{
  font-size:clamp(1.25rem,2vw,1.5rem);
  line-height:1.5;
  font-weight:var(--nr-weight-action);
}
.exam-shell .exam-option{
  font-size:1.0625rem;
  font-weight:var(--nr-weight-action);
  line-height:1.45;
}
.exam-result :is(.exam-result-note,.exam-review-body,.exam-review-explanation){
  font-size:1rem;
  line-height:1.55;
  font-weight:var(--nr-weight-copy);
}

/* Mobile text stays readable while layout remains owned by existing scenes. */
@media(max-width:760px){
  body.login-gateway .nalaroo-auth-card h1{font-size:1.75rem}
  body.explorer-view .explorer-heading h1,
  body.explorer-view .explorer-creating .explorer-heading h1{
    font-size:clamp(1.5rem,6vw,1.75rem);
  }
  body.explorer-view .explorer-start h2{font-size:1.25rem}
  .collection-page .adventure-title,
  .learning-journal .adventure-title{font-size:1.625rem}
  .collection-page .adventure-hero .adventure-subtitle,
  .learning-journal .adventure-hero .adventure-subtitle{
    font-size:.875rem;
  }
  .learning-journal .lj-panel>h2{font-size:1.125rem}
  .learning-journal .lj-stat-value{font-size:clamp(1.375rem,5.4vw,1.625rem)}
  .learning-journal .lj-stat-label{font-size:.8125rem}
  .learning-quest .quest-heading h1{font-size:1.625rem}
  .learning-quest .quest-stem{font-size:1.3125rem;line-height:1.5}
  .learning-quest .quest-option,
  .learning-quest .quest-choice-text{font-size:1.0625rem}
  .learning-quest .quest-feedback p,
  .learning-quest .quest-explanation{font-size:1rem;line-height:1.55}
  .learning-quest .quest-feedback h2{font-size:1.1875rem}
  .learning-quest .quest-result-message{font-size:1rem}
  .learning-quest .quest-result-stats span{font-size:.8125rem}
  .adventure-quiz .question-text{font-size:1.3125rem}
}
@media(max-width:370px){
  /* Keep three journal metric columns and the art-backed collection cards intact. */
  .learning-journal .lj-stat-value{font-size:1.25rem}
  .learning-journal .lj-stat-label{font-size:.75rem}
  .learning-quest .quest-stem{font-size:1.25rem}
}
/* System accessibility settings still control zoom. No px-locked heights/overflow. */


/* family-membership-label.css */
/* NALAROO Minimal Membership Label v1.0
 * FREE/PLUS is plain text beneath the official Family Badge.
 * No medal, pill, border, backdrop, extra tap target or animation.
 * Applies only to Explorer selection and integrated Home.
 */
#family-menu>summary .family-membership-label{
 display:none;
 font-family:var(--nr-font-ui,"Nunito",system-ui,sans-serif);
 font-size:12px;
 font-weight:800;
 letter-spacing:.06em;
 line-height:1;
 white-space:nowrap;
 text-align:center;
 text-shadow:0 1px 0 #fff9edaa;
 pointer-events:none;
}
#family-menu>summary .family-membership-label[hidden]{display:none!important}
#family-menu>summary .family-membership-label[data-plan="free"]{color:#3E5948}
#family-menu>summary .family-membership-label[data-plan="plus"]{color:#79521F}
body.explorer-view #family-menu>summary,
body.living-world-view:has(.integrated-world) #family-menu>summary{
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 gap:1px;
 padding:2px;
}
body.explorer-view #family-menu>summary .family-membership-label,
body.living-world-view:has(.integrated-world) #family-menu>summary .family-membership-label{
 display:block;
}
body.explorer-view #family-menu>summary .family-badge-icon,
body.living-world-view:has(.integrated-world) #family-menu>summary .family-badge-icon{
 width:42px;
 height:42px;
 max-width:100%;
 flex-shrink:0;
 object-fit:contain;
}
@media(max-width:1100px), (min-width:701px) and (any-pointer:coarse){
 body.explorer-view #family-menu>summary .family-badge-icon,
 body.living-world-view:has(.integrated-world) #family-menu>summary .family-badge-icon{
  width:34px;
  height:34px;
 }
}
@media(min-width:701px) and (orientation:landscape) and (max-height:620px){
 body.living-world-view:has(.integrated-world) #family-menu>summary .family-badge-icon{
  width:26px;
  height:26px;
 }
}
@media(max-width:700px){
 body.living-world-view:has(.integrated-world) #family-menu>summary{
  padding:1px;
  gap:0;
 }
 body.living-world-view:has(.integrated-world) #family-menu>summary .family-badge-icon{
  width:27px;
  height:27px;
 }
}
@media(max-width:700px) and (orientation:landscape) and (max-height:500px){
 body.living-world-view:has(.integrated-world) #family-menu>summary .family-badge-icon{
  width:25px;
  height:25px;
 }
}
@media(max-height:450px){
 body.explorer-view #family-menu>summary .family-badge-icon{
  width:29px;
  height:29px;
 }
}


/* quest-result-optimization.css */
/* NALAROO Quest Result Hero & Responsive Layout Optimization v1.0
 * Only the composite Quest Complete scene is redesigned. Artwork, scores,
 * rewards, buttons and legacy fallback stay controlled by their JS owners.
 */

/* Remove the in-flow navigation row from result pages. The logo remains
 * accessible in the top-right, but can no longer push the hero down. */
body.quest-view #main:has(>.quest-result-page){min-height:0}
.quest-result-page{
  box-sizing:border-box;
  width:100%;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  min-height:100svh;
  padding:max(47px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right))
    max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
}
.quest-result-page>.quest-nav{
  position:absolute;
  z-index:5;
  inset-block-start:max(10px,env(safe-area-inset-top));
  inset-inline-end:max(16px,env(safe-area-inset-right));
  width:auto;
  max-width:none;
  margin:0;
  pointer-events:none;
}
.quest-result-page>.quest-nav .quest-logo{
  width:clamp(90px,10vw,134px);
}

/* Keep the result illustration above the parchment on every viewport.
 * The out-of-flow logo does not participate in this vertical composition. */
.quest-result-page .quest-complete[data-hero="composite"]{
  display:block;
  width:min(100%,640px);
  max-width:640px;
  padding:0;
  margin:auto;
  container-type:normal;
}
.quest-result-page .quest-complete[data-hero="composite"]::before{display:none}
.quest-result-page .quest-complete[data-hero="composite"] .quest-composite-hero{
  width:min(100%,clamp(260px,44svh,470px));
  margin-inline:auto;
  aspect-ratio:1672/941;
  container-type:inline-size;
  align-self:center;
  z-index:2;
  background:radial-gradient(ellipse at 50% 67%,#faf1df99 0%,transparent 65%);
}
.quest-result-page .quest-complete[data-hero="composite"] .quest-composite-image{
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
  transition:opacity 180ms ease-out;
}
.quest-result-page .quest-complete[data-hero="composite"][data-loaded="true"] .quest-composite-image{
  opacity:1;
}
.quest-result-page .quest-complete[data-hero="composite"] .quest-composite-hero::after{
  content:"Menyiapkan ilustrasi…";
  position:absolute;
  top:58%;left:50%;
  transform:translate(-50%,-50%);
  width:80%;
  font:600 .85rem/1.4 var(--nr-font-ui,"Nunito",system-ui,sans-serif);
  color:#526950;
  text-align:center;
  pointer-events:none;
}
.quest-result-page .quest-complete[data-hero="composite"][data-loaded="true"] .quest-composite-hero::after{
  display:none;
}

/* The wooden ribbon is part of the image; only the live title is overlaid.
 * Container units now use the ART width, not the outer result panel width. */
.quest-result-page .quest-complete[data-hero="composite"] .quest-composite-title{
  left:49.6%;
  top:80%;
  transform:translate(-50%,-50%);
  width:61%;
  max-width:61%;
  font-family:var(--nr-font-ui,"Nunito",system-ui,sans-serif);
  font-weight:800;
  font-size:clamp(16px,5.5cqw,34px);
  line-height:1.05;
  letter-spacing:-.018em;
  color:#60391f;
  text-shadow:0 1px 0 #f7dbab9c;
  white-space:normal;
  opacity:0;
  transition:opacity 180ms ease-out;
}
.quest-result-page .quest-complete[data-hero="composite"][data-loaded="true"] .quest-composite-title{
  opacity:1;
}
.quest-result-page .quest-complete[data-hero="composite"] .quest-result-panel{
  width:100%;
  max-width:none;
  margin-top:clamp(-55px,-7.5vw,-25px);
  padding:clamp(30px,4.5vw,48px) clamp(16px,3vw,30px) 22px;
  border-radius:26px 28px 25px 27px;
  text-align:center;
}
.quest-result-page .quest-result-panel>.quest-result-message{
  font-size:clamp(.9rem,1.35vw,1rem);
  line-height:1.42;
  font-weight:600;
  color:#425e50;
  margin:0 auto!important;
}
.quest-result-page .quest-result-panel>.quest-result-body{
  margin-top:10px;
  max-width:none;
}
.quest-result-page .quest-result-panel .quest-mode{
  font-size:.8rem;
  line-height:1.35;
}
.quest-result-page .quest-result-panel .quest-explorer{
  font-size:.8125rem;
  margin-top:2px!important;
  line-height:1.35;
}
.quest-result-page .quest-result-panel .quest-score{
  margin-top:6px!important;
  font-size:clamp(1.5rem,2.2vw,2rem);
  font-weight:800;
  line-height:1.23;
}
.quest-result-page .quest-result-panel .quest-result-stats{
  gap:8px;
  margin-top:12px;
}
.quest-result-page .quest-result-panel .quest-result-stats>div{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:1px;
  padding:9px 5px;
  min-height:82px;
}
.quest-result-page .quest-result-panel .quest-result-stats img{
  width:32px;height:32px;
}
.quest-result-page .quest-result-panel .quest-result-stats strong{
  font-size:clamp(1.25rem,1.8vw,1.625rem);
  font-weight:800;
  line-height:1.15;
}
.quest-result-page .quest-result-panel .quest-result-stats span{
  font-size:.8125rem;
  line-height:1.25;
}
.quest-result-page .quest-result-panel .quest-result-awards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:9px;
  margin-top:12px;
}
.quest-result-page .quest-result-panel .quest-result-awards .quest-award{
  min-width:0;
  flex-basis:auto;
  font-size:.875rem;
  gap:5px;
  white-space:nowrap;
}
.quest-result-page .quest-result-panel .quest-result-awards img{
  width:30px;height:30px;
}
.quest-result-page .quest-result-panel>.quest-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin-top:14px;
}
.quest-result-page .quest-result-panel>.quest-actions .quest-button{
  width:100%;
  max-width:none;
  min-height:46px;
  margin:0;
  padding:9px 8px;
  gap:5px;
  font-size:.875rem;
  line-height:1.25;
}
.quest-result-page .quest-result-panel>.quest-actions .quest-button img{
  width:25px;height:25px;
}
.quest-result-page .quest-result-panel>.quest-actions>.quest-result-home{
  grid-column:1/-1;
}
.quest-result-page .quest-result-panel>.quest-actions:has(>.quest-button:nth-child(2):last-child)>.quest-result-home{
  grid-column:auto;
}

/* Portrait desktop/tablets use a single parchment book leaf with hero overlap. */
@media(max-width:919px), (orientation:portrait) and (max-width:1150px){
  .quest-result-page{
    padding-top:max(47px,env(safe-area-inset-top));
    justify-content:flex-start;
  }
  .quest-result-page .quest-complete[data-hero="composite"]{
    display:block;
    width:min(100%,640px);
    max-width:640px;
    margin:0 auto auto;
  }
  .quest-result-page .quest-complete[data-hero="composite"] .quest-composite-hero{
    width:min(100%,clamp(260px,44svh,470px));
    margin-inline:auto;
  }
  .quest-result-page .quest-complete[data-hero="composite"] .quest-result-panel{
    margin-top:clamp(-55px,-7.5vw,-25px);
    padding:clamp(30px,4.5vw,48px) clamp(16px,3vw,30px) 22px;
    border-radius:26px;
  }
  .quest-result-page .quest-complete[data-hero="composite"] .quest-result-panel>.quest-result-message{
    max-width:36ch;
  }
}
/* Short landscape remains stacked; allow normal vertical scrolling rather
 * than moving the hero beside the panel or clipping the actions. */
@media(min-width:560px) and (orientation:landscape) and (max-height:620px){
  .quest-result-page{
    justify-content:flex-start;
    padding-top:max(42px,env(safe-area-inset-top));
    padding-bottom:max(10px,env(safe-area-inset-bottom));
  }
  .quest-result-page .quest-complete[data-hero="composite"]{
    display:block;
    width:min(100%,640px);
    max-width:640px;
    margin:auto;
  }
  .quest-result-page .quest-complete[data-hero="composite"] .quest-composite-hero{
    width:min(100%,240px);
  }
  .quest-result-page .quest-complete[data-hero="composite"] .quest-result-panel{
    margin-top:-24px;
    padding:30px 12px 12px;
  }
  .quest-result-page .quest-result-panel>.quest-result-message{font-size:.82rem}
  .quest-result-page .quest-result-panel .quest-result-stats>div{min-height:62px;padding:5px}
  .quest-result-page .quest-result-panel .quest-result-stats img{width:25px;height:25px}
  .quest-result-page .quest-result-panel .quest-result-stats{margin-top:7px}
  .quest-result-page .quest-result-panel .quest-result-awards{margin-top:7px;padding:5px}
  .quest-result-page .quest-result-panel>.quest-actions{margin-top:8px}
}

/* Phone portrait: make the final score and buttons appear high on the page. */
@media(max-width:600px) and (orientation:portrait){
  .quest-result-page{
    padding: max(40px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right))
      max(12px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
  }
  .quest-result-page>.quest-nav{
    inset-block-start:max(6px,env(safe-area-inset-top));
    inset-inline-end:max(11px,env(safe-area-inset-right));
  }
  .quest-result-page>.quest-nav .quest-logo{width:100px}
  .quest-result-page .quest-complete[data-hero="composite"]{
    width:100%;
    max-width:440px;
  }
  .quest-result-page .quest-complete[data-hero="composite"] .quest-composite-hero{
    width:100%;
  }
  .quest-result-page .quest-complete[data-hero="composite"] .quest-result-panel{
    margin-top:-9%;
    padding:clamp(27px,7.5vw,37px) 14px 16px;
    border-radius:24px;
  }
  .quest-result-page .quest-complete[data-hero="composite"] .quest-composite-title{
    font-size:clamp(16px,5.5cqw,22px);
  }
  .quest-result-page .quest-result-panel>.quest-result-message{
    font-size:.875rem;
    line-height:1.4;
  }
  .quest-result-page .quest-result-panel>.quest-result-body{margin-top:7px}
  .quest-result-page .quest-result-panel .quest-score{
    font-size:clamp(1.4rem,6vw,1.7rem);
    margin-top:4px!important;
  }
  .quest-result-page .quest-result-panel .quest-result-stats{
    gap:6px;
    margin-top:8px;
  }
  .quest-result-page .quest-result-panel .quest-result-stats>div{
    min-height:72px;
    padding:6px 3px;
  }
  .quest-result-page .quest-result-panel .quest-result-stats img{width:28px;height:28px}
  .quest-result-page .quest-result-panel .quest-result-stats strong{font-size:1.375rem}
  .quest-result-page .quest-result-panel .quest-result-awards{
    padding:6px;
    gap:4px;
    margin-top:8px;
  }
  .quest-result-page .quest-result-panel .quest-result-awards .quest-award{
    font-size:.8125rem;
    gap:3px;
  }
  .quest-result-page .quest-result-panel .quest-result-awards img{width:25px;height:25px}
  .quest-result-page .quest-result-panel>.quest-actions{
    gap:7px;
    margin-top:10px;
  }
  .quest-result-page .quest-result-panel>.quest-actions .quest-button{
    min-height:44px;
    padding:8px 5px;
    font-size:.8125rem;
    gap:3px;
  }
  .quest-result-page .quest-result-panel>.quest-actions .quest-button img{width:22px;height:22px}
}
@media(max-width:345px){
  .quest-result-page .quest-result-panel>.quest-actions{
    grid-template-columns:1fr;
  }
  .quest-result-page .quest-result-panel>.quest-actions>.quest-result-home{
    grid-column:1/-1!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .quest-result-page .quest-composite-image,
  .quest-result-page .quest-composite-title{transition:none!important}
}


/* play-garden-v2.css */
/* NALAROO — Storybook Play Garden v2.0
   Calm storybook choice cards; no game status API in the chooser.
   Scoped to the playground dialog only. */
body.living-world-view .world-dialog.world-playground-dialog[open]{
  box-sizing:border-box;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  width:min(748px,calc(100vw - 28px));
  max-height:min(88dvh,720px);
  overflow:hidden;
  border:2.5px solid #c6ab83;
  border-radius:30px;
  background:#fff9ef;
  color:#3e604c;
  box-shadow:0 22px 68px #322d2259,0 5px 0 #8b76524d;
}
.world-playground-dialog .world-dialog-heading{
  min-height:70px;
  box-sizing:border-box;
  padding:15px 26px;
  background:#e8f2e6;
  border-bottom:1px solid #d5decf;
}
body.living-world-view .world-playground-dialog .world-dialog-heading h2{
  font:900 clamp(23px,3.7vw,30px)/1.2 Nunito,system-ui,sans-serif;
  color:#3f6049;
  letter-spacing:-.02em;
}
.world-playground-dialog .world-close{
  display:grid;
  place-items:center;
  width:44px;height:44px;min-width:44px;
  border:1px solid #e3d5bb;
  border-radius:50%;
  background:#fff9ed;
  color:#4e6858;
  box-shadow:none;
}
.world-playground-dialog .world-close:hover{background:#fff1da}
.world-playground-dialog .world-close:focus-visible{
  outline:3px solid #6b9b7c;
  outline-offset:3px;
}
body.living-world-view .world-playground-dialog .world-dialog-content.world-playground-body{
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  box-sizing:border-box;
  padding:22px 28px 29px;
  gap:17px;
  scrollbar-width:thin;
  scrollbar-color:#c7b495 transparent;
}
body.living-world-view .world-playground-dialog .world-playground-intro{
  margin:0;
  max-width:45ch;
  color:#526e5a;
  font:750 clamp(15px,2.4vw,18px)/1.42 Nunito,system-ui,sans-serif;
}
.world-playground-dialog .world-playground-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
  gap:18px;
}
body.living-world-view .integrated-world .world-playground-dialog .world-action.world-playground-card{
  position:relative;
  isolation:isolate;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:7px;
  min-width:0;
  min-height:297px;
  padding:15px 15px 18px;
  border:2px solid #ddac87;
  border-radius:24px;
  background:#fbecdb;
  color:#624b3e;
  box-shadow:0 6px 0 #d5b496,0 11px 24px #8b6f5222;
  font-family:Nunito,system-ui,sans-serif;
  line-height:1.35;
  text-align:center;
  cursor:pointer;
  transform:none;
  filter:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
body.living-world-view .integrated-world .world-playground-dialog .world-action.world-playground-card.is-memory{
  border-color:#c7afd8;
  background:#f1eaf8;
  color:#5a4e71;
  box-shadow:0 6px 0 #c9b9da,0 11px 24px #78698e20;
}
.world-playground-dialog .world-playground-card .world-playground-kicker{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:26px;
  padding:3px 12px;
  border:1px solid #e5c49e;
  border-radius:999px;
  background:#fff5e4;
  color:#755d43;
  font:900 12px/1.2 Nunito,system-ui,sans-serif;
}
.world-playground-dialog .world-playground-card.is-memory .world-playground-kicker{
  background:#faf4ff;
  border-color:#d8c5e4;
  color:#685780;
}
.world-playground-dialog .world-playground-card img.world-playground-art{
  display:block;
  width:100%;
  height:132px;
  min-height:0;
  max-width:270px;
  object-fit:contain;
  flex:0 0 132px;
  pointer-events:none;
}
body.living-world-view .world-playground-dialog .world-playground-card strong{
  display:block;
  color:inherit;
  font:900 clamp(19px,2.7vw,23px)/1.2 Nunito,system-ui,sans-serif;
  letter-spacing:-.025em;
}
body.living-world-view .world-playground-dialog .world-playground-card small{
  display:block;
  max-width:26ch;
  min-height:38px;
  color:#745e4e;
  font:750 13px/1.38 Nunito,system-ui,sans-serif;
}
body.living-world-view .world-playground-dialog .world-playground-card.is-memory small{
  color:#6c6079;
}
.world-playground-dialog .world-playground-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  min-width:112px;
  min-height:34px;
  box-sizing:border-box;
  padding:7px 16px;
  margin-top:auto;
  border-radius:999px;
  background:#e9bf97;
  color:#674731;
  box-shadow:0 2px 0 #d1a47e;
  font:900 13px/1.2 Nunito,system-ui,sans-serif;
}
.world-playground-dialog .is-memory .world-playground-cta{
  background:#d6c5e9;
  box-shadow:0 2px 0 #bca7d5;
  color:#594976;
}
.world-playground-dialog .world-game-plus-tag{
  position:absolute;
  top:14px;right:13px;
  z-index:2;
  padding:5px 9px;
  border:1px solid #b49ccf;
  border-radius:999px;
  background:#fff8e6;
  color:#5d4d78;
  font:900 10px/1.2 Nunito,system-ui,sans-serif;
}
body.living-world-view .world-playground-dialog .world-playground-card.is-locked{
  opacity:1;
  filter:none;
  cursor:pointer;
}
body.living-world-view .world-playground-dialog .world-playground-card.is-locked :is(strong,small){
  color:#5a4e71!important;
}
@media(hover:hover) and (pointer:fine){
  body.living-world-view .integrated-world .world-playground-dialog .world-action.world-playground-card:hover{
    transform:translateY(-4px);
    filter:none;
    box-shadow:0 10px 0 #d5b496,0 15px 28px #8b6f5229;
  }
  body.living-world-view .integrated-world .world-playground-dialog .world-action.world-playground-card.is-memory:hover{
    box-shadow:0 10px 0 #c9b9da,0 15px 28px #78698e29;
  }
}
body.living-world-view .world-playground-dialog .world-playground-card:focus-visible{
  outline:4px solid #527c65;
  outline-offset:4px;
}
body.living-world-view .world-playground-dialog .world-playground-card:active{
  transform:translateY(2px);
  box-shadow:0 3px 0 #d5b496;
}
@media(max-width:599px){
  body.living-world-view .world-dialog.world-playground-dialog[open]{
    width:calc(100vw - 22px);
    max-height:min(91dvh,760px);
    border-radius:24px;
  }
  .world-playground-dialog .world-dialog-heading{min-height:58px;padding:10px 16px}
  .world-playground-dialog .world-close{width:40px;height:40px;min-width:40px}
  body.living-world-view .world-playground-dialog .world-dialog-content.world-playground-body{
    gap:13px;
    padding:15px 15px 18px;
  }
  body.living-world-view .world-playground-dialog .world-playground-intro{
    font-size:15px;
  }
  .world-playground-dialog .world-playground-cards{
    grid-template-columns:minmax(0,1fr);
    gap:14px;
  }
  body.living-world-view .integrated-world .world-playground-dialog .world-action.world-playground-card{
    display:grid;
    grid-template-columns:112px minmax(0,1fr);
    grid-template-rows:26px auto auto auto;
    column-gap:11px;
    row-gap:4px;
    justify-items:start;
    text-align:left;
    align-items:center;
    min-height:156px;
    padding:12px 12px;
    border-radius:20px;
  }
  .world-playground-dialog .world-playground-card img.world-playground-art{
    grid-column:1;
    grid-row:1 / 5;
    width:112px;
    height:118px;
    max-width:112px;
    align-self:center;
    justify-self:center;
  }
  .world-playground-dialog .world-playground-kicker{
    grid-column:2;grid-row:1;
  }
  body.living-world-view .world-playground-dialog .world-playground-card strong{
    grid-column:2;grid-row:2;font-size:19px;
  }
  body.living-world-view .world-playground-dialog .world-playground-card small{
    grid-column:2;grid-row:3;
    min-height:0;
    max-width:none;
    font-size:12px;
  }
  .world-playground-dialog .world-playground-cta{
    grid-column:2;grid-row:4;
    min-height:29px;min-width:104px;
    padding:5px 12px;
    margin-top:2px;
    font-size:12px;
  }
  .world-playground-dialog .world-game-plus-tag{
    top:7px;right:8px;font-size:9px;padding:3px 6px;
  }
  .world-playground-dialog .is-locked .world-playground-kicker{
    margin-right:77px;
  }
}
@media(max-width:360px){
  body.living-world-view .integrated-world .world-playground-dialog .world-action.world-playground-card{
    grid-template-columns:88px minmax(0,1fr);column-gap:9px;
  }
  .world-playground-dialog .world-playground-card img.world-playground-art{width:90px;height:102px}
  body.living-world-view .world-playground-dialog .world-playground-card strong{font-size:17px}
}
@media(max-height:540px) and (orientation:landscape){
  body.living-world-view .world-dialog.world-playground-dialog[open]{max-height:94dvh}
  .world-playground-dialog .world-dialog-heading{min-height:52px;padding-block:7px}
  body.living-world-view .world-playground-dialog .world-dialog-content.world-playground-body{padding:12px 17px 18px}
  body.living-world-view .integrated-world .world-playground-dialog .world-action.world-playground-card{min-height:0;padding:10px}
  .world-playground-dialog .world-playground-card img.world-playground-art{height:80px;flex-basis:80px}
}
@media(prefers-reduced-motion:reduce){
  body.living-world-view .world-playground-dialog .world-playground-card{
    transition:none!important;
  }
}

/* learning-gateway-v2.css */
/* Storybook Learning Gateway v2.1 — calibrated subject accents. Only this grade 1–6 dialog is restyled. */
/* Accent / soft surface / companion accent follow the approved subject swatches.
   Text uses darker ink; selection and primary actions keep the shared sage identity. */
.world-learning-dialog.gateway-v2{
 --gateway-accent:#9dc5a7;--gateway-soft:#dfeedd;--gateway-detail:#d6be82;
 --gateway-edge:#91aa87;--gateway-ink:#354e3c;--gateway-second-edge:#b7a16c;
 font-family:'Nunito',system-ui,sans-serif;
}
.world-learning-dialog.gateway-v2[data-subject='math']{--gateway-accent:#e9b77e;--gateway-soft:#f7e5c9;--gateway-detail:#688f76;--gateway-edge:#be9868;--gateway-ink:#634428;--gateway-second-edge:#8da58b}
.world-learning-dialog.gateway-v2[data-subject='bahasa-indonesia']{--gateway-accent:#e9ab9a;--gateway-soft:#f8ddd2;--gateway-detail:#718f77;--gateway-edge:#c08d7b;--gateway-ink:#693e32;--gateway-second-edge:#91a58e}
.world-learning-dialog.gateway-v2[data-subject='english']{--gateway-accent:#a8c7e5;--gateway-soft:#e0eef7;--gateway-detail:#d9b8e8;--gateway-edge:#8ba9c0;--gateway-ink:#344d5f;--gateway-second-edge:#b89ac5}
.world-learning-dialog.gateway-v2[data-subject='pancasila']{--gateway-accent:#e3b276;--gateway-soft:#f3d9a4;--gateway-detail:#d99e8f;--gateway-edge:#b49563;--gateway-ink:#634324;--gateway-second-edge:#bd8c7e}
.world-learning-dialog.gateway-v2[data-subject='paibp']{--gateway-accent:#9dc5a7;--gateway-soft:#dfeedd;--gateway-detail:#d6be82;--gateway-edge:#86a58a;--gateway-ink:#354e3c;--gateway-second-edge:#b7a16c}
.world-learning-dialog.gateway-v2[data-subject='science']{--gateway-accent:#91c9c3;--gateway-soft:#d9efec;--gateway-detail:#b0c5e7;--gateway-edge:#7ba9a2;--gateway-ink:#2d504c;--gateway-second-edge:#91a9c6}
.world-dialog.world-learning-dialog.gateway-v2[open]{width:min(790px,calc(100vw - 36px));max-height:90dvh;overflow:hidden;border:3px solid #ac8e66;border-radius:29px 26px 28px 25px;background:linear-gradient(145deg,#fffbf1,#f9f1df);box-shadow:0 7px 0 #8e765744,0 22px 65px #303e3755,inset 0 0 0 4px #fffdf5;color:#415b46}
.world-learning-dialog.gateway-v2::backdrop{background:#30483c88;backdrop-filter:blur(6px)}
.world-learning-dialog.gateway-v2 *{box-sizing:border-box}
.world-learning-dialog.gateway-v2 .world-dialog-heading{display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:2px 14px;align-items:center;padding:15px 23px 14px;min-height:80px;background:linear-gradient(110deg,var(--gateway-soft),#fff9ed 88%);border-bottom:3px solid var(--gateway-accent);border-radius:23px 23px 34% 5% / 23px 23px 11px 7px}
.world-learning-dialog.gateway-v2 .gateway-context{grid-column:1;color:var(--gateway-ink);font-size:11px;line-height:1.2;font-weight:800;letter-spacing:.035em}
.world-learning-dialog.gateway-v2 .world-dialog-heading h2{grid-column:1;grid-row:2;margin:0;color:#405b45;font-size:25px;font-weight:900;line-height:1.2;letter-spacing:-.025em}
.world-learning-dialog.gateway-v2 .world-close{grid-column:2;grid-row:1/3;width:42px;min-width:42px;height:42px;border:2px solid #c4ad87;background:#fff8e7;color:#7a6446;box-shadow:0 3px 0 #d4c19f;font-size:28px;font-weight:700}
.world-learning-dialog.gateway-v2 .world-dialog-content{display:block;min-height:0;padding:19px 23px 23px;overflow-y:auto;overscroll-behavior:contain;scroll-padding:12px}
.world-learning-dialog.gateway-v2 .world-quest-launcher{display:grid;gap:16px}
.world-learning-dialog.gateway-v2 .world-launcher-intro{margin:0;color:#718064;font-size:15px;line-height:1.4;font-weight:700}
.world-learning-dialog.gateway-v2 .world-quest-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
/* One native button per whole activity: artwork, description and CTA share a target. */
.world-learning-dialog.gateway-v2 .world-quest-choice{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;min-width:0;min-height:275px;padding:14px 20px 18px;border:2px solid #a0b68c;border-radius:24px 29px 22px 26px;background:radial-gradient(ellipse at 50% 25%,#fffaf099,transparent 65%),#e3edda;color:#426143;box-shadow:0 6px 0 #bdcdaa,0 10px 18px #66734c13,inset 0 0 0 3px #ffffff66;text-align:center;font:inherit;cursor:pointer;transition:transform .13s,box-shadow .13s,border-color .13s;isolation:isolate}
.world-learning-dialog.gateway-v2 .world-quest-choice-simulation{border-color:#caa67e;border-radius:29px 23px 27px 22px;background:radial-gradient(ellipse at 50% 25%,#fffaf0bb,transparent 65%),#f6e2c8;color:#7f5e3b;box-shadow:0 6px 0 #dfc29b,0 10px 18px #88724e13,inset 0 0 0 3px #ffffff66}
.world-learning-dialog.gateway-v2 .world-quest-art{display:block;width:170px;height:110px;max-width:100%;grid-column:auto;grid-row:auto;margin:0;object-fit:contain;filter:drop-shadow(0 4px 2px #73583b16);background:radial-gradient(ellipse at center,var(--gateway-soft) 0 54%,transparent 55%);border-bottom:3px solid var(--gateway-detail);border-radius:45% 45% 38% 38%}
.world-learning-dialog.gateway-v2 .gateway-activity-title{display:block;font-size:22px;line-height:1.15;font-weight:900;letter-spacing:-.02em}
.world-learning-dialog.gateway-v2 .gateway-activity-desc{display:block;max-width:260px;font-size:14px;line-height:1.4;color:#617457;font-weight:700}
.world-learning-dialog.gateway-v2 .world-quest-choice-simulation .gateway-activity-desc{color:#856b4f}
.world-learning-dialog.gateway-v2 .world-quest-meta{display:block;margin:0;font-size:11px;line-height:1.4;font-weight:800;color:#967850}
.world-learning-dialog.gateway-v2 .gateway-cta{display:block;width:100%;margin-top:auto;padding:11px 12px;border:1.5px solid #5f805f;border-radius:13px;background:#71936e;color:#fffdf2;box-shadow:0 3px 0 #4d6c4d;font-size:14px;font-weight:900;line-height:1.2}
.world-learning-dialog.gateway-v2 .world-quest-choice-simulation .gateway-cta{background:#bd8a54;border-color:#a07344;box-shadow:0 3px 0 #8f653a}
.world-learning-dialog.gateway-v2 .world-quest-choice:disabled{opacity:1;cursor:default}
.world-learning-dialog.gateway-v2 .world-quest-choice:disabled .gateway-cta{background:#eee5d4;border-color:#cfbda0;color:#8b7a61;box-shadow:none}
.world-learning-dialog.gateway-v2 .world-quest-choice[aria-busy='true']{justify-content:center;min-height:275px;border-color:#76966e;color:#486345;font-weight:900;font-size:18px}
.world-learning-dialog.gateway-v2 .world-quest-review{display:flex;align-items:center;gap:12px;width:100%;min-height:75px;padding:10px 16px;border:2px solid #c0afcc;border-radius:20px 17px 21px 18px;background:linear-gradient(110deg,#eee6f4,#edf1e3);box-shadow:0 4px 0 #d6c9dc;text-align:left;color:#6e5b79;font:inherit;cursor:pointer;transition:transform .13s,box-shadow .13s}
.world-learning-dialog.gateway-v2 .world-review-mark{width:60px;height:53px;flex:0 0 60px;object-fit:contain;border:0;border-radius:0;background:none}
.world-learning-dialog.gateway-v2 .world-review-copy{display:grid;gap:3px;flex:1;min-width:0}.world-learning-dialog.gateway-v2 .world-review-copy strong{font-size:16px;font-weight:900;line-height:1.2}.world-learning-dialog.gateway-v2 .world-review-copy small{font-size:12px;font-weight:700;line-height:1.35;color:#7d7382}
.world-learning-dialog.gateway-v2 .gateway-review-cta{padding:7px 11px;border:1px solid #b5a0c3;border-radius:11px;background:#f8f3fb;font-size:12px;font-weight:900;white-space:nowrap;box-shadow:0 2px 0 #d3c5dc}
/* Chapter badges use the subject's own pastel palette. */
.world-learning-dialog.gateway-v2 .world-chapter-view{display:grid;gap:14px;min-width:0}
.world-learning-dialog.gateway-v2 .world-chapter-back{min-height:36px;justify-self:start;padding:6px 11px;border:1px solid #d3bfa1;border-radius:10px;background:#fff5df;color:#7c6548;box-shadow:0 2px 0 #e4d2b4;font:800 12px/1.2 Nunito,sans-serif;cursor:pointer}
.world-learning-dialog.gateway-v2 .world-chapter-intro{margin:0;color:#526b4c;font-size:20px;font-weight:900;line-height:1.3;letter-spacing:-.015em}
.world-learning-dialog.gateway-v2 .world-chapter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;max-height:42dvh;overflow-y:auto;padding:2px 5px 7px 1px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c6b38b transparent;scroll-padding:6px}
.world-learning-dialog.gateway-v2 .world-chapter-option{position:relative;display:flex;align-items:center;gap:11px;min-height:78px;min-width:0;padding:11px 12px;border:2px solid var(--gateway-edge);border-radius:19px 16px 20px 17px;background:linear-gradient(120deg,var(--gateway-soft),#fffaf0 82%);box-shadow:0 4px 0 #e3d1ae;color:#5e7057;text-align:left;font:800 14px/1.4 Nunito,sans-serif;cursor:pointer;transition:transform .13s,box-shadow .13s,border-color .13s}
.world-learning-dialog.gateway-v2 .world-chapter-option:nth-child(even){border-color:var(--gateway-second-edge);background:#fffcf3;box-shadow:inset 4px 0 0 var(--gateway-detail),0 4px 0 #e3d1ae;border-radius:16px 20px 17px 19px}
.world-learning-dialog.gateway-v2 .world-chapter-number{display:grid;place-content:center;gap:1px;position:relative;width:43px;min-width:43px;height:48px;border:1.5px solid var(--gateway-edge);border-radius:10px 10px 15px 6px;background:var(--gateway-accent);box-shadow:0 3px 0 var(--gateway-second-edge);color:var(--gateway-ink);text-align:center}
.world-learning-dialog.gateway-v2 .world-chapter-number small{font-size:8px;line-height:1;font-weight:900;letter-spacing:.08em}.world-learning-dialog.gateway-v2 .world-chapter-number strong{font-size:23px;font-weight:900;line-height:1}
.world-learning-dialog.gateway-v2 .world-chapter-name{min-width:0;flex:1;overflow-wrap:anywhere}
.world-learning-dialog.gateway-v2 .world-chapter-check{display:block;visibility:hidden;width:27px;height:27px;min-width:27px;object-fit:contain}
.world-learning-dialog.gateway-v2 .world-chapter-option.is-selected{background:#dcebd3;border-color:#678960;color:#355436;box-shadow:0 4px 0 #a2ba8d,inset 0 0 0 1px #9db58a;opacity:1}
.world-learning-dialog.gateway-v2 .world-chapter-option.is-selected .world-chapter-number{background:#73956c;border-color:#5c8058;color:#fffdf1;box-shadow:0 3px 0 #557450}
.world-learning-dialog.gateway-v2 .world-chapter-option.is-selected .world-chapter-check{visibility:visible}
.world-learning-dialog.gateway-v2 .world-chapter-controls{position:static;display:grid;gap:12px;padding:5px 0 0;background:none}
.world-learning-dialog.gateway-v2 .gateway-count{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:9px;padding:11px 13px;border:1px solid #dacfaf;border-radius:15px;background:#f8f0de}
.world-learning-dialog.gateway-v2 .gateway-count-label{font-size:12px;font-weight:800;color:#82704f;line-height:1.3}
.world-learning-dialog.gateway-v2 .gateway-count-options{display:flex;flex-wrap:wrap;gap:7px}
.world-learning-dialog.gateway-v2 .gateway-count-choice{min-height:40px;min-width:57px;padding:7px 10px;border:1.5px solid #d0bd99;border-radius:10px;background:#fffaf0;box-shadow:0 2px 0 #e1d0ae;color:#7e7157;font:800 12px/1.2 Nunito,sans-serif;cursor:pointer}
.world-learning-dialog.gateway-v2 .gateway-count-choice[aria-pressed='true']{background:#73956c;border-color:#597e56;box-shadow:0 2px 0 #4d7048;color:#fffdf1}
.world-learning-dialog.gateway-v2 .world-chapter-start{margin:0;min-height:53px;padding:14px 18px;border:2px solid #50724e;border-radius:16px;background:#678b60;box-shadow:0 5px 0 #41633f;color:#fffdf3;font:900 17px/1.2 Nunito,sans-serif;filter:none}
.world-learning-dialog.gateway-v2 .world-chapter-start:disabled{background:#e3dfcf;border-color:#c5bda4;color:#948b71;box-shadow:0 3px 0 #d2c8ac;opacity:1;cursor:default}
.world-learning-dialog.gateway-v2 .world-feedback{font-size:12px;line-height:1.45;color:#986b48;margin:0;padding:0}
.world-learning-dialog.gateway-v2 .world-feedback:empty{display:none}
.world-learning-dialog.gateway-v2 .world-quest-empty,.world-learning-dialog.gateway-v2 .world-quest-loading{grid-column:1/-1;margin:0;padding:19px;border:1px dashed var(--gateway-edge);border-radius:16px;background:var(--gateway-soft);color:var(--gateway-ink);font-size:14px;line-height:1.5}
.world-learning-dialog.gateway-v2 :is(button):focus-visible{outline:3px solid #5e7f55;outline-offset:3px}
.world-learning-dialog.gateway-v2 :is(.world-quest-choice,.world-quest-review,.world-chapter-option,.gateway-count-choice):active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #bca884}
.world-learning-dialog.gateway-v2 .world-chapter-start:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #41633f}
/* One shared component adapts density to the grade band. */
.world-learning-dialog.gateway-v2[data-explorers='little'] .world-quest-art{width:182px;height:120px}
.world-learning-dialog.gateway-v2[data-explorers='little'] .world-chapter-option{min-height:88px;font-size:15px}
.world-learning-dialog.gateway-v2[data-explorers='little'] .gateway-count-choice{min-height:44px}
.world-learning-dialog.gateway-v2[data-explorers='senior'] .world-quest-art{width:145px;height:92px}
.world-learning-dialog.gateway-v2[data-explorers='senior'] .world-quest-choice{min-height:252px}
.world-learning-dialog.gateway-v2[data-explorers='senior'] .world-chapter-option{min-height:72px;font-size:13px}
@media(hover:hover){.world-learning-dialog.gateway-v2 :is(.world-quest-choice,.world-quest-review,.world-chapter-option):hover:not(:disabled){transform:translateY(-2px);border-color:#879f6c}.world-learning-dialog.gateway-v2 .world-chapter-start:hover:not(:disabled){background:#5d8057;filter:none;transform:translateY(-1px)}}
@media(max-width:599px){
 .world-dialog.world-learning-dialog.gateway-v2[open]{width:calc(100vw - 20px);max-height:94dvh;border-width:2px;border-radius:23px}
 .world-learning-dialog.gateway-v2 .world-dialog-heading{padding:12px 14px;min-height:74px;gap:3px 9px}.world-learning-dialog.gateway-v2 .world-dialog-heading h2{font-size:22px}.world-learning-dialog.gateway-v2 .gateway-context{font-size:10px}.world-learning-dialog.gateway-v2 .world-dialog-content{padding:15px 14px 19px}
 .world-learning-dialog.gateway-v2 .world-quest-launcher{gap:13px}.world-learning-dialog.gateway-v2 .world-launcher-intro{font-size:14px}
 .world-learning-dialog.gateway-v2 .world-quest-choices{grid-template-columns:1fr;gap:14px}
 .world-learning-dialog.gateway-v2 .world-quest-choice{display:grid;grid-template-columns:93px minmax(0,1fr);grid-template-rows:auto auto auto auto;align-items:center;align-content:center;gap:4px 11px;min-height:170px;padding:13px 14px 15px;text-align:left;border-radius:21px 24px 20px 22px}
 .world-learning-dialog.gateway-v2 .world-quest-art,.world-learning-dialog.gateway-v2[data-explorers] .world-quest-art{grid-column:1;grid-row:1/4;width:93px;height:89px;margin:0}.world-learning-dialog.gateway-v2 .gateway-activity-title{grid-column:2;grid-row:1;font-size:20px}.world-learning-dialog.gateway-v2 .gateway-activity-desc{grid-column:2;grid-row:2;font-size:12px;line-height:1.4}.world-learning-dialog.gateway-v2 .world-quest-meta{grid-column:2;grid-row:3;font-size:10px}.world-learning-dialog.gateway-v2 .gateway-cta{grid-column:1/-1;grid-row:4;margin-top:7px;text-align:center;min-height:41px;padding:10px}
 .world-learning-dialog.gateway-v2[data-explorers='senior'] .world-quest-choice{min-height:160px}.world-learning-dialog.gateway-v2[data-explorers='little'] .world-quest-choice{min-height:178px}
 .world-learning-dialog.gateway-v2 .world-quest-review{padding:10px;gap:8px;min-height:74px}.world-learning-dialog.gateway-v2 .world-review-mark{width:48px;height:48px;flex-basis:48px}.world-learning-dialog.gateway-v2 .world-review-copy strong{font-size:14px}.world-learning-dialog.gateway-v2 .world-review-copy small{font-size:11px}.world-learning-dialog.gateway-v2 .gateway-review-cta{padding:7px 8px;font-size:10px}
 .world-learning-dialog.gateway-v2 .world-chapter-view{gap:12px}.world-learning-dialog.gateway-v2 .world-chapter-intro{font-size:18px}.world-learning-dialog.gateway-v2 .world-chapter-grid{grid-template-columns:1fr;max-height:40dvh;gap:10px}.world-learning-dialog.gateway-v2 .world-chapter-option{min-height:74px}.world-learning-dialog.gateway-v2[data-explorers='little'] .world-chapter-option{min-height:80px}.world-learning-dialog.gateway-v2 .world-chapter-name{font-size:14px}.world-learning-dialog.gateway-v2 .world-chapter-check{width:26px;min-width:26px}.world-learning-dialog.gateway-v2 .gateway-count{padding:10px}.world-learning-dialog.gateway-v2 .gateway-count-options{gap:6px}.world-learning-dialog.gateway-v2 .gateway-count-choice{min-width:55px;min-height:42px;padding:7px 8px}.world-learning-dialog.gateway-v2 .world-chapter-start{font-size:16px}
}
@media(max-width:360px){.world-learning-dialog.gateway-v2 .world-dialog-content{padding:13px 11px 17px}.world-learning-dialog.gateway-v2 .world-quest-choice{grid-template-columns:78px 1fr;padding:12px}.world-learning-dialog.gateway-v2 .world-quest-art,.world-learning-dialog.gateway-v2[data-explorers] .world-quest-art{width:78px}.world-learning-dialog.gateway-v2 .gateway-activity-title{font-size:18px}.world-learning-dialog.gateway-v2 .gateway-review-cta{display:none}.world-learning-dialog.gateway-v2 .world-dialog-heading h2{font-size:20px}.world-learning-dialog.gateway-v2 .world-chapter-option{padding:10px}.world-learning-dialog.gateway-v2 .world-chapter-number{width:38px;min-width:38px}}
@media(max-height:650px) and (min-width:600px){.world-dialog.world-learning-dialog.gateway-v2[open]{max-height:94dvh}.world-learning-dialog.gateway-v2 .world-dialog-heading{padding:10px 20px;min-height:65px}.world-learning-dialog.gateway-v2 .world-dialog-content{padding:14px 19px 20px}.world-learning-dialog.gateway-v2 .world-quest-choice{min-height:220px;padding:10px 17px 14px}.world-learning-dialog.gateway-v2 .world-quest-art,.world-learning-dialog.gateway-v2[data-explorers] .world-quest-art{height:72px;width:120px}.world-learning-dialog.gateway-v2 .world-chapter-grid{max-height:32dvh}.world-learning-dialog.gateway-v2 .world-chapter-option{min-height:70px}}
@media(prefers-reduced-motion:reduce){.world-learning-dialog.gateway-v2 *{transition:none!important;animation:none!important}}


/* collectible-discovery-v3.css */
/* Collectible Discovery & Exchange v3.0. Only modal presentation is changed.
   Approved catalog cards, frames, artwork, prices and lore stay untouched. */
.collection-dialog.collection-discovery-v3{
 --discovery-wash:#f3ead0;--discovery-soft:#fbf5e5;--discovery-edge:#bcaa7d;--discovery-ink:#756342;--discovery-shadow:#dcccaa;
 box-sizing:border-box;padding:0;border:3px solid #a78a63;border-radius:29px 25px 28px 24px;background:#fff9ec;color:#425a46;
 width:min(520px,calc(100vw - 28px));max-height:calc(94dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
 box-shadow:0 7px 0 #7b654c44,0 24px 65px #34423655,inset 0 0 0 4px #fffdf2;text-align:left;overflow:hidden;font-family:Nunito,system-ui,sans-serif;
}
.collection-dialog.collection-discovery-v3[open]{display:flex;flex-direction:column}
.collection-dialog.collection-discovery-v3[data-rarity='Rare']{--discovery-wash:#dcecf5;--discovery-soft:#f0f7fb;--discovery-edge:#9ab7c9;--discovery-ink:#47677f;--discovery-shadow:#bbd2e0}
.collection-dialog.collection-discovery-v3[data-rarity='Epic']{--discovery-wash:#eadef1;--discovery-soft:#f7f0fa;--discovery-edge:#b8a0ca;--discovery-ink:#755887;--discovery-shadow:#d1bfdf}
.collection-dialog.collection-discovery-v3[data-rarity='Legendary']{--discovery-wash:#f4dfaa;--discovery-soft:#fff5dd;--discovery-edge:#c3a068;--discovery-ink:#86632f;--discovery-shadow:#e0c490}
.collection-dialog.collection-discovery-v3::backdrop{background:#30463d88;backdrop-filter:blur(6px)}
.collection-dialog.collection-discovery-v3 *{box-sizing:border-box;min-width:0}
.collection-dialog.collection-discovery-v3 .collection-dialog-leaves{display:none}
.collection-dialog.collection-discovery-v3 .collection-dialog-header{display:flex;flex:0 0 auto;align-items:center;gap:14px;padding:16px 20px 15px;background:linear-gradient(115deg,var(--discovery-wash),#fff8e7);border-bottom:2px solid var(--discovery-edge);border-radius:24px 20px 26% 6% / 24px 20px 10px 6px}
.collection-dialog.collection-discovery-v3 .collection-dialog-header h2{margin:0;padding:0;font-size:25px!important;font-weight:900;line-height:1.2;letter-spacing:-.025em;color:#405a46;overflow-wrap:anywhere}
.collection-dialog.collection-discovery-v3 .collection-dialog-close{border:2px solid #c7ae89;background:#fff9e8;color:#7c6649;box-shadow:0 3px 0 #d6c39f;flex:0 0 44px;min-width:44px;width:44px;height:44px}
/* Full official 3:4 frame masters are reused without cropping or recoloring. */
.collection-dialog.collection-discovery-v3 .collection-dialog-art{display:block;position:relative;isolation:isolate;flex:none;width:224px;max-width:100%;aspect-ratio:3/4;margin:0 auto;background:none;filter:drop-shadow(0 5px 3px #7d664a22)}
.collection-dialog.collection-discovery-v3 .collection-showcase-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.collection-dialog.collection-discovery-v3 .collection-detail-art{position:absolute;left:18%;top:16%;width:64%;height:57%;max-height:none;aspect-ratio:auto;margin:0;object-fit:contain;animation:none;filter:drop-shadow(0 3px 2px #8d73521a)}
.collection-dialog.collection-discovery-v3 .collection-showcase-badge{position:absolute;left:16%;right:16%;bottom:17%;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;margin:0;min-height:0}
.collection-dialog.collection-discovery-v3 .collection-rarity{padding:4px 12px;border:1px solid var(--discovery-edge);border-radius:12px;background:var(--discovery-wash);color:var(--discovery-ink);font-size:12px;font-weight:900;line-height:1.2}
.collection-dialog.collection-discovery-v3 .collection-plus{padding:3px 7px;font-size:10px;border:1px solid #c4af7d;border-radius:9px;background:#f8e8b9;color:#7b6335}
/* Discovery: showcase left, the original story and message right. */
.collection-dialog.collection-discovery-v3[data-kind='story']{width:min(840px,calc(100vw - 32px));padding:0}
.collection-dialog.collection-discovery-v3 .collection-story-layout{display:grid;grid-template-columns:minmax(190px,.8fr) minmax(0,1.3fr);gap:22px;padding:20px 23px;align-items:center;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.collection-dialog.collection-discovery-v3 .collection-story-visual{display:flex;flex-direction:column;align-items:center;gap:9px;padding:9px 7px;border:1px solid var(--discovery-edge);border-radius:23px 26px 21px 25px;background:radial-gradient(ellipse at 50% 40%,var(--discovery-wash),var(--discovery-soft) 70%);box-shadow:0 4px 0 var(--discovery-shadow)}
.collection-dialog.collection-discovery-v3 .collection-story-content{text-align:left}
.collection-dialog.collection-discovery-v3 .collection-story-heading{margin:0 0 11px;color:var(--discovery-ink);font-size:17px;font-weight:900;line-height:1.3}
.collection-dialog.collection-discovery-v3 .collection-story-origin{margin:0;color:#56634e;font-size:15px;font-weight:600;line-height:1.75;max-width:44ch;text-align:left}
.collection-dialog.collection-discovery-v3 .collection-story-lesson{margin-top:17px;padding:13px 15px;border:1.5px solid #b5c8a5;border-radius:17px 14px 18px 15px;background:#eaf1df;box-shadow:0 3px 0 #cfdbbd}
.collection-dialog.collection-discovery-v3 .collection-story-lesson h4{margin:0 0 5px;color:#55734f;font-size:12px;font-weight:900;letter-spacing:.025em}
.collection-dialog.collection-discovery-v3 .collection-story-lesson p{margin:0;color:#4c6548;font-size:14px;font-weight:700;line-height:1.5}
.collection-dialog.collection-discovery-v3 .collection-acquired{display:block;margin:13px 0 0;padding:0;border:0;background:none;color:#8b7b60;font-size:11px;text-align:left}
.collection-dialog.collection-discovery-v3 .collection-journal-owned{font-size:11px;gap:5px;padding:4px 10px;margin:0;background:#e8f1dd;border:1px solid #a2bc95;box-shadow:0 2px 0 #c7d6b6;color:#4b6b49}
.collection-dialog.collection-discovery-v3 .collection-journal-owned .collection-state-icon{width:22px;height:22px}
.collection-dialog.collection-discovery-v3 .collection-discovery-footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,1fr);gap:14px;align-items:center;flex:0 0 auto;margin:0;padding:15px 23px 19px;border-top:2px solid var(--discovery-edge);background:linear-gradient(110deg,var(--discovery-soft),#fff9e9);color:#5c6b51}
.collection-dialog.collection-discovery-v3 .collection-story-price{display:flex;align-items:center;justify-content:flex-start;gap:7px;padding:0;margin:0;border:0;background:none;color:#7e6439}
.collection-dialog.collection-discovery-v3 .collection-story-price .collection-coin{width:25px;height:25px;flex:0 0 25px}
.collection-dialog.collection-discovery-v3 .collection-story-price strong{font-size:20px;font-weight:900}
.collection-dialog.collection-discovery-v3 .collection-wallet-copy{font-size:12px;color:#7c7b62;margin:5px 0 0;line-height:1.3}
.collection-dialog.collection-discovery-v3 .collection-story-status{margin:6px 0 0;font-size:12px;font-weight:800;text-align:left;color:#5d7853;line-height:1.4}
.collection-dialog.collection-discovery-v3 .collection-story-status:empty{display:none}
.collection-dialog.collection-discovery-v3 .collection-story-status[data-state='insufficient']{color:#926649}
.collection-dialog.collection-discovery-v3 .collection-dialog-actions{display:flex;flex-direction:column;align-items:stretch;gap:4px;margin:0}
.collection-dialog.collection-discovery-v3 .collection-button{width:100%;min-height:49px;padding:12px 16px;border:2px solid #5a7b58;border-radius:15px;background:#587b54;color:#fffdf1;box-shadow:0 4px 0 #496a48;font-size:15px;font-weight:900;line-height:1.25;white-space:normal}
.collection-dialog.collection-discovery-v3 .collection-button:disabled{background:#e3dfd0;border-color:#c9bea6;color:#8d846d;box-shadow:0 2px 0 #d4c9ad;cursor:default;opacity:1}
.collection-dialog.collection-discovery-v3 .collection-link{display:block;min-height:44px;padding:8px 10px;border:0;background:none;color:#687859;font-size:13px;font-weight:800;text-align:center;cursor:pointer}
.collection-dialog.collection-discovery-v3 .collection-link:disabled{opacity:.55;cursor:wait}
/* Compact exchange: a small identity row and one price summary. */
.collection-dialog.collection-discovery-v3[data-kind='exchange']{width:min(475px,calc(100vw - 28px));overflow-y:auto}
.collection-dialog.collection-discovery-v3[data-kind='exchange'] .collection-dialog-header h2{font-size:23px!important}
.collection-dialog.collection-discovery-v3 .collection-exchange-intro{margin:15px 22px 12px;color:#7c795f;font-size:13px;font-weight:700;line-height:1.4}
.collection-dialog.collection-discovery-v3 .collection-purchase-summary{display:grid;gap:14px;margin:0;padding:0 22px}
.collection-dialog.collection-discovery-v3 .collection-exchange-item{display:flex;align-items:center;gap:14px;padding:10px 13px;border:1.5px solid var(--discovery-edge);border-radius:17px;background:var(--discovery-soft);box-shadow:0 3px 0 var(--discovery-shadow)}
.collection-dialog.collection-discovery-v3 .collection-exchange-thumbnail{display:block;width:67px;height:67px;flex:0 0 67px;object-fit:contain;margin:0}
.collection-dialog.collection-discovery-v3 .collection-exchange-item-copy{display:grid;gap:7px;flex:1}.collection-dialog.collection-discovery-v3 .collection-exchange-item-copy>strong{color:#596b4f;font-size:15px;font-weight:900;line-height:1.3}
.collection-dialog.collection-discovery-v3 .collection-exchange-item .collection-tags{justify-content:flex-start;margin:0;min-height:0}
.collection-dialog.collection-discovery-v3 .collection-exchange-ledger{display:grid;gap:10px;margin:0;padding:14px 16px;border:1.5px solid #ddc9a5;border-radius:17px;background:#fbefd7;color:#84704f;font-size:13px;line-height:1.4}
.collection-dialog.collection-discovery-v3 .collection-exchange-ledger>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.collection-dialog.collection-discovery-v3 .collection-exchange-ledger dd{margin:0;font-size:14px;font-weight:900;white-space:nowrap;color:#6f6044}
.collection-dialog.collection-discovery-v3 .collection-exchange-ledger>div:last-child{padding-top:10px;border-top:1px dashed #c4ac81;color:#54714d}.collection-dialog.collection-discovery-v3 .collection-exchange-ledger>div:last-child dd{color:#54714d}
.collection-dialog.collection-discovery-v3 .collection-dialog-feedback{flex-shrink:0;margin:12px 22px 0!important;padding:10px 12px;border:1px solid #d8b88d;border-radius:12px;background:#f7e8cf;color:#916b44;font-size:12px;line-height:1.45}
.collection-dialog.collection-discovery-v3 .collection-dialog-feedback:empty{display:none}
.collection-dialog.collection-discovery-v3[data-kind='exchange']>.collection-dialog-actions{flex-shrink:0;padding:17px 22px 20px;gap:5px}
.collection-dialog.collection-discovery-v3[aria-busy='true'] .collection-button{cursor:wait}
/* Celebrate only confirmed ownership: a quiet rarity showcase, no confetti. */
.collection-dialog.collection-discovery-v3[data-kind='success']{width:min(500px,calc(100vw - 28px))}
.collection-dialog.collection-discovery-v3[data-kind='success'] .collection-dialog-header h2{font-size:24px!important}
.collection-dialog.collection-discovery-v3 .collection-success{overflow-y:auto;overscroll-behavior:contain;min-height:0;display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 22px 20px;text-align:center;background:radial-gradient(ellipse at 50% 32%,var(--discovery-wash),#fff9ec 67%)}
.collection-dialog.collection-discovery-v3 .collection-success .collection-dialog-art{width:204px;margin:0;background:none}
.collection-dialog.collection-discovery-v3 .collection-success .collection-dialog-art::before,.collection-dialog.collection-discovery-v3 .collection-success .collection-dialog-art::after{display:none}
.collection-dialog.collection-discovery-v3 .collection-success-saved{margin:0;color:#56724e;font-size:14px;font-weight:900;line-height:1.3}
.collection-dialog.collection-discovery-v3 .collection-success-balance{margin:0;color:#8c7b5d;font-size:12px;line-height:1.3}
.collection-dialog.collection-discovery-v3 .collection-success .collection-dialog-actions{width:100%;margin-top:4px}
.collection-dialog.collection-discovery-v3 :focus-visible{outline:3px solid #5d8058;outline-offset:3px}
.collection-dialog.collection-discovery-v3 h2:focus{outline:none}
.collection-page>.collection-economy-note{font-size:12px;color:#8c806b;line-height:1.5;text-align:center;max-width:650px;margin:22px auto 0}
@media(hover:hover){.collection-dialog.collection-discovery-v3 .collection-button:hover:not(:disabled){background:#5e835b;box-shadow:0 4px 0 #496a48;transform:translateY(-1px)}.collection-dialog.collection-discovery-v3 .collection-button:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #496a48}}
@media(max-width:600px){
 .collection-dialog.collection-discovery-v3[data-kind]{width:calc(100vw - 20px);max-height:calc(96dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));border-width:2px;border-radius:23px 21px 24px 22px}
 .collection-dialog.collection-discovery-v3 .collection-dialog-header{padding:12px 14px;gap:9px}.collection-dialog.collection-discovery-v3 .collection-dialog-header h2{font-size:22px!important}
 .collection-dialog.collection-discovery-v3 .collection-story-layout{grid-template-columns:1fr;gap:17px;padding:15px 16px;align-items:start}
 .collection-dialog.collection-discovery-v3 .collection-story-visual{display:grid;grid-template-columns:1fr;justify-items:center;padding:5px 8px 8px;gap:5px;background:radial-gradient(ellipse,var(--discovery-wash),var(--discovery-soft));border-radius:20px}
 .collection-dialog.collection-discovery-v3 .collection-dialog-art{width:150px;max-width:100%}.collection-dialog.collection-discovery-v3 .collection-detail-art{width:64%;height:57%;max-height:none}
 .collection-dialog.collection-discovery-v3 .collection-rarity{font-size:10px;padding:3px 9px}.collection-dialog.collection-discovery-v3 .collection-plus{font-size:9px}
 .collection-dialog.collection-discovery-v3 .collection-story-origin{font-size:14px;line-height:1.65;max-width:none}.collection-dialog.collection-discovery-v3 .collection-story-heading{font-size:16px;margin-bottom:8px}.collection-dialog.collection-discovery-v3 .collection-story-lesson{padding:11px 13px;margin-top:13px}.collection-dialog.collection-discovery-v3 .collection-story-lesson p{font-size:13px}
 .collection-dialog.collection-discovery-v3 .collection-discovery-footer{grid-template-columns:1fr;gap:9px;padding:12px 16px 15px}
 .collection-dialog.collection-discovery-v3 .collection-discovery-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px 12px}.collection-dialog.collection-discovery-v3 .collection-story-price strong{font-size:18px}.collection-dialog.collection-discovery-v3 .collection-wallet-copy{margin:0;font-size:11px}.collection-dialog.collection-discovery-v3 .collection-story-status{margin:0;flex-basis:100%;font-size:11px}
 .collection-dialog.collection-discovery-v3 .collection-discovery-footer .collection-dialog-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}.collection-dialog.collection-discovery-v3 .collection-button{min-height:48px;font-size:14px;padding:11px 12px}.collection-dialog.collection-discovery-v3 .collection-discovery-footer .collection-link{padding-inline:8px}
 .collection-dialog.collection-discovery-v3 .collection-exchange-intro{margin:13px 16px 11px}.collection-dialog.collection-discovery-v3 .collection-purchase-summary{padding:0 16px;gap:12px}.collection-dialog.collection-discovery-v3 .collection-exchange-thumbnail{width:60px;height:60px;flex-basis:60px}.collection-dialog.collection-discovery-v3 .collection-exchange-ledger{padding:12px 14px;gap:9px;font-size:12px}.collection-dialog.collection-discovery-v3 .collection-exchange-ledger dd{font-size:13px}
 .collection-dialog.collection-discovery-v3[data-kind='exchange']>.collection-dialog-actions{padding:15px 16px 16px}.collection-dialog.collection-discovery-v3 .collection-dialog-feedback{margin-inline:16px!important}
 .collection-dialog.collection-discovery-v3 .collection-success{padding:12px 16px 16px}.collection-dialog.collection-discovery-v3 .collection-success .collection-dialog-art{width:180px}
}
@media(max-height:650px){.collection-dialog.collection-discovery-v3 .collection-dialog-header{padding:10px 14px}.collection-dialog.collection-discovery-v3 .collection-dialog-art{width:170px}.collection-dialog.collection-discovery-v3 .collection-success .collection-dialog-art{width:150px}.collection-dialog.collection-discovery-v3 .collection-exchange-thumbnail{width:50px;height:50px;flex-basis:50px}.collection-dialog.collection-discovery-v3 .collection-exchange-ledger{padding:10px 12px;gap:7px}.collection-dialog.collection-discovery-v3[data-kind='exchange']>.collection-dialog-actions{padding-top:12px}}
@media(max-width:360px){.collection-dialog.collection-discovery-v3 .collection-dialog-header h2{font-size:20px!important}.collection-dialog.collection-discovery-v3 .collection-story-layout{padding:13px}.collection-dialog.collection-discovery-v3 .collection-discovery-footer{padding:11px 13px 14px}.collection-dialog.collection-discovery-v3 .collection-discovery-footer .collection-dialog-actions{grid-template-columns:1fr}.collection-dialog.collection-discovery-v3 .collection-discovery-footer .collection-link{min-height:36px;padding:5px}}
@media(prefers-reduced-motion:reduce){.collection-dialog.collection-discovery-v3 *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}