@import"https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&display=swap";:root{--font-display: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--fw-regular: 600;--fw-bold: 800;--fw-black: 900;--fs-display: 2.4rem;--fs-title: 1.5rem;--fs-heading: 1.15rem;--fs-body-lg: 1.05rem;--fs-body: .95rem;--fs-caption: .8rem;--surface-card: #ffffff;--surface-pill: #1c2d4f;--surface-pill-glow: linear-gradient(180deg, #2c3e6e, #15233f);--surface-overlay: rgba(8, 18, 40, .78);--bg-sky-1: #9ed4ff;--bg-sky-2: #67b8ff;--c-yellow: #ffd93d;--c-yellow-2: #f4a83a;--c-blue: #4a90e2;--c-blue-2: #2563eb;--c-green: #4caf50;--c-green-2: #2e7d32;--c-orange: #ff8c42;--c-orange-2: #e76f2c;--c-red: #ef4444;--c-red-2: #b91c1c;--c-purple: #9b5cf6;--c-purple-2: #6f3bd8;--text-on-dark: #ffffff;--text-on-light: #1c2d4f;--muted-on-light: #5d6b85;--muted-on-dark: #9aa3b2;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-7: 48px;--r-pill: 999px;--r-button: 18px;--r-card: 22px;--r-tile: 26px;--sh-card: 0 8px 24px rgba(15, 30, 70, .12);--sh-card-strong: 0 14px 40px rgba(15, 30, 70, .22);--sh-button: 0 6px 0 rgba(0, 0, 0, .18), inset 0 3px 0 rgba(255, 255, 255, .25);--sh-button-pressed: 0 2px 0 rgba(0, 0, 0, .18), inset 0 3px 0 rgba(255, 255, 255, .18)}html,body,#root{height:100dvh;margin:0}html{background:linear-gradient(180deg,var(--bg-sky-1),var(--bg-sky-2))}body,#root{background:transparent;color:var(--text-on-light);font-family:var(--font-display);font-weight:var(--fw-regular);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior:none}input,button,select,textarea{font-family:inherit}.page{min-height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.shell{width:100%;max-width:1100px;margin:0 auto;padding:var(--space-5)}.shell-narrow{width:100%;max-width:520px;margin:0 auto;padding:var(--space-5)}.t-display{font-size:var(--fs-display);font-weight:var(--fw-black);letter-spacing:-.02em}.t-title{font-size:var(--fs-title);font-weight:var(--fw-bold)}.t-heading{font-size:var(--fs-heading);font-weight:var(--fw-bold)}.t-body{font-size:var(--fs-body);font-weight:var(--fw-regular)}.t-caption{font-size:var(--fs-caption);font-weight:var(--fw-bold);letter-spacing:.5px;text-transform:uppercase}.t-muted{color:var(--muted-on-light)}.t-muted-dark{color:var(--muted-on-dark)}.t-center{text-align:center}.stack>*+*{margin-top:var(--space-3)}.stack-tight>*+*{margin-top:var(--space-2)}.stack-loose>*+*{margin-top:var(--space-5)}.row{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap}.row-between{display:flex;gap:var(--space-3);align-items:center;justify-content:space-between}.grid-auto{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.grid-2{display:grid;gap:var(--space-3);grid-template-columns:repeat(2,1fr)}.card{background:var(--surface-card);color:var(--text-on-light);border-radius:var(--r-card);box-shadow:var(--sh-card);padding:var(--space-5)}.card-tight{padding:var(--space-4)}.btn{--btn-bg: var(--c-blue);--btn-bg-2: var(--c-blue-2);--btn-fg: var(--text-on-dark);appearance:none;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:56px;padding:12px 22px;border-radius:var(--r-button);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-body-lg);letter-spacing:.2px;color:var(--btn-fg);background:linear-gradient(180deg,var(--btn-bg),var(--btn-bg-2));box-shadow:var(--sh-button);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform 80ms ease,box-shadow 80ms ease,filter .12s ease}.btn:hover{filter:brightness(1.05)}.btn:active{transform:translateY(4px);box-shadow:var(--sh-button-pressed)}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:var(--sh-button)}.btn-primary{--btn-bg: var(--c-yellow);--btn-bg-2: var(--c-yellow-2);--btn-fg: #1c1c1c}.btn-blue{--btn-bg: var(--c-blue);--btn-bg-2: var(--c-blue-2)}.btn-green{--btn-bg: var(--c-green);--btn-bg-2: var(--c-green-2)}.btn-orange{--btn-bg: var(--c-orange);--btn-bg-2: var(--c-orange-2)}.btn-red{--btn-bg: var(--c-red);--btn-bg-2: var(--c-red-2)}.btn-purple{--btn-bg: var(--c-purple);--btn-bg-2: var(--c-purple-2)}.btn-ghost{background:transparent;color:var(--text-on-light);box-shadow:none;font-weight:var(--fw-bold)}.btn-ghost:hover{background:#0000000d}.btn-ghost:active{transform:none;box-shadow:none}.btn-big{min-height:72px;font-size:1.2rem;padding:16px 32px;border-radius:22px}.btn-pill{border-radius:var(--r-pill)}.btn-block{width:100%}.btn-icon{font-size:1.25rem}.hud-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 12px;border-radius:var(--r-pill);background:var(--surface-pill);background-image:var(--surface-pill-glow);color:var(--text-on-dark);font-weight:var(--fw-black);font-size:1.05rem;box-shadow:0 4px 12px #0000002e,inset 0 1px #ffffff14;line-height:1}.hud-pill .hud-icon{font-size:1.25rem;line-height:1}.hud-pill-label{font-size:.7rem;font-weight:var(--fw-bold);letter-spacing:.5px;color:var(--muted-on-dark);text-transform:uppercase}.hud-add{display:inline-grid;place-items:center;width:22px;height:22px;margin-left:4px;border-radius:50%;background:var(--c-green);color:#fff;font-weight:var(--fw-black);font-size:1rem;box-shadow:0 2px #0003;cursor:pointer}.avatar-pill{display:inline-flex;align-items:center;gap:12px;padding:8px 18px 8px 8px;border-radius:var(--r-pill);background:var(--surface-card);box-shadow:var(--sh-card);min-width:220px}.avatar-pill-face{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--c-blue),var(--c-purple));display:grid;place-items:center;overflow:hidden;flex:0 0 56px}.avatar-pill-name{font-weight:var(--fw-black);font-size:1.05rem;line-height:1}.avatar-pill-level{font-size:.78rem;font-weight:var(--fw-bold);color:var(--c-green)}.avatar-pill-xp{margin-top:4px;height:6px;width:100%;background:#e5ecf5;border-radius:var(--r-pill);overflow:hidden}.avatar-pill-xp>span{display:block;height:100%;background:linear-gradient(90deg,var(--c-green),var(--c-yellow))}.lesson-tile{display:block;text-decoration:none;color:var(--text-on-light);background:var(--surface-card);border-radius:var(--r-card);box-shadow:var(--sh-card);padding:var(--space-4);transition:transform .12s ease,box-shadow .12s ease;position:relative}.lesson-tile:hover{transform:translateY(-2px);box-shadow:var(--sh-card-strong)}.lesson-tile-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}.lesson-tile-num{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--cat-color, var(--c-blue));color:#fff;font-weight:var(--fw-black);font-size:1rem;box-shadow:0 3px #00000026}.lesson-tile-title{font-weight:var(--fw-black);font-size:1.1rem;color:var(--cat-color, var(--text-on-light))}.lesson-tile-art{height:110px;border-radius:16px;background:linear-gradient(135deg,#e9f4ff,#d6ecff);display:grid;place-items:center;overflow:hidden;margin-bottom:12px}.lesson-tile-art img{width:60%;height:60%;object-fit:contain}.lesson-tile-progress{display:flex;align-items:center;gap:8px}.lesson-tile-progress-bar{flex:1;height:8px;border-radius:var(--r-pill);background:#e5ecf5;overflow:hidden}.lesson-tile-progress-fill{height:100%;background:var(--cat-color, var(--c-blue));border-radius:var(--r-pill);transition:width .6s ease}.lesson-tile-progress-stars{font-weight:var(--fw-black);font-size:.85rem;color:var(--cat-color, var(--c-blue))}.cat-family{--cat-color: var(--c-green)}.cat-classroom,.cat-places{--cat-color: var(--c-blue)}.cat-food{--cat-color: var(--c-orange)}.cat-animals{--cat-color: var(--c-blue)}.cat-feelings{--cat-color: var(--c-purple)}.cat-numbers{--cat-color: var(--c-orange)}.cat-actions{--cat-color: var(--c-green)}.cat-builders{--cat-color: var(--c-purple)}.input{width:100%;padding:14px 18px;border-radius:var(--r-button);border:2px solid #e5ecf5;background:#fff;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:1.1rem;color:var(--text-on-light);outline:none;transition:border-color .12s ease}.input:focus{border-color:var(--c-blue)}.full-center{min-height:100dvh;display:grid;place-items:center;font-size:1.2rem;color:var(--text-on-light)}.error{color:var(--c-red);font-size:.95rem;font-weight:var(--fw-bold)}.divider{height:1px;background:#00000014;margin:var(--space-3) 0}.code-pill{display:inline-block;background:#f1f5fb;color:var(--text-on-light);border:2px dashed var(--c-blue);padding:6px 16px;border-radius:var(--r-pill);font-weight:var(--fw-black);letter-spacing:2px;font-family:ui-monospace,SFMono-Regular,monospace}.home-dashboard{min-height:100dvh;width:min(100%,1220px);margin:0 auto;padding:clamp(16px,3vw,28px);color:#fff}.home-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.home-player-pill,.home-resource-pill,.home-settings-btn,.home-level-card,.home-action-btn,.home-start-btn{font-family:var(--font-display)}.home-player-pill{display:inline-flex;align-items:center;gap:14px;min-width:224px;border:3px solid rgba(255,255,255,.82);border-radius:26px;padding:8px 18px 8px 8px;color:#1d4ed8;background:#fffffff0;box-shadow:0 8px #2563eb40,0 18px 34px #0054b42e;cursor:pointer}.home-player-face{width:82px;height:82px;display:grid;place-items:center;overflow:hidden;border-radius:18px;background:linear-gradient(180deg,#a5dbff,#57a7ff);flex:0 0 82px}.home-player-face .avatar-preview{transform:scale(.58);padding:0;background:transparent}.home-player-name,.home-player-level{display:block;text-align:left;line-height:1.05}.home-player-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;font-size:clamp(1.2rem,2vw,1.55rem);font-weight:var(--fw-black);white-space:nowrap}.home-player-level{margin-top:6px;font-size:1rem;font-weight:var(--fw-bold)}.home-resource-row{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap}.home-resource-pill{display:inline-flex;align-items:center;gap:10px;min-height:58px;padding:8px 16px;border:3px solid rgba(166,223,255,.72);border-radius:20px;background:linear-gradient(180deg,#2c96f4fa,#175cc8fa);box-shadow:inset 0 3px #ffffff4d,0 6px #00399652;color:#fff;font-size:clamp(1rem,2vw,1.35rem);font-weight:var(--fw-bold)}.home-resource-pill strong{font-size:1.45em}.home-resource-icon{display:grid;place-items:center;width:38px;height:38px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.18);font-size:2rem}.home-resource-add{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(180deg,#83d84e,#45a820);box-shadow:inset 0 2px #ffffff4d,0 2px #00000038;font-size:1.4rem;line-height:1}.home-settings-btn{width:70px;height:70px;border:3px solid rgba(166,223,255,.78);border-radius:22px;color:#fff;background:linear-gradient(180deg,#47a7ff,#1665f0);box-shadow:inset 0 3px #ffffff4d,0 7px #0045b159;cursor:pointer;font-size:2rem}.home-hero-panel{position:relative;min-height:clamp(390px,50vw,520px);overflow:hidden;border:5px solid rgba(255,255,255,.9);border-radius:30px;background:#72c7ff;box-shadow:0 18px 44px #004caa40}.home-hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.home-hero-copy{position:absolute;top:clamp(20px,4vw,42px);left:clamp(22px,4vw,52px);z-index:2;max-width:min(390px,45%);text-shadow:0 4px 0 rgba(0,62,148,.26),0 12px 28px rgba(0,0,0,.25)}.home-hero-copy p{margin:0 0 4px;color:#eaffff;font-size:1rem;font-weight:var(--fw-black);text-transform:uppercase}.home-hero-copy h1{margin:0;color:#fff;font-size:clamp(2.5rem,7vw,5rem);font-weight:var(--fw-black);line-height:.92}.home-hero-copy span{display:inline-flex;margin-top:14px;padding:8px 16px;border-radius:var(--r-pill);color:#1150b6;background:#ffffffe6;box-shadow:0 4px #004eb42e;font-weight:var(--fw-black)}.home-hero-card{position:absolute;right:clamp(18px,4vw,52px);top:50%;z-index:3;width:min(430px,42%);transform:translateY(-48%);padding:clamp(22px,4vw,34px);border:5px solid rgba(178,231,255,.9);border-radius:30px;background:linear-gradient(180deg,#37b1fff2,#1670e2f2);box-shadow:inset 0 4px #ffffff4d,0 12px 30px #003d9b40;text-align:center}.home-hero-name{color:#fff;font-size:clamp(2.4rem,6vw,4.2rem);font-weight:var(--fw-black);line-height:1;text-shadow:0 4px 0 rgba(0,65,160,.22);overflow-wrap:anywhere}.home-hero-subtitle{display:inline-flex;align-items:center;justify-content:center;gap:14px;margin-top:18px;color:#fff;font-size:clamp(1.4rem,3vw,2rem);font-weight:var(--fw-black);text-shadow:0 3px 0 rgba(0,65,160,.22)}.home-hero-star{display:grid;place-items:center;width:58px;height:58px;color:#fff;background:#ffbf1c;clip-path:polygon(50% 0%,62% 32%,96% 35%,70% 56%,79% 90%,50% 72%,21% 90%,30% 56%,4% 35%,38% 32%);font-size:1.25rem}.home-xp-track{position:relative;height:30px;margin:22px 0 28px;overflow:hidden;border-radius:var(--r-pill);background:#0c4da0b8;box-shadow:inset 0 2px 3px #00000038}.home-xp-track span{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:linear-gradient(180deg,#a3ec4d,#52bf28)}.home-xp-track strong{position:relative;z-index:1;display:block;color:#fff;font-size:1rem;font-weight:var(--fw-black);line-height:30px;text-align:right;padding-right:18px;text-shadow:0 1px 0 rgba(0,0,0,.24)}.home-start-btn,.home-action-btn{border:0;color:#fff;cursor:pointer;font-weight:var(--fw-black);text-transform:uppercase;text-shadow:0 2px 0 rgba(0,0,0,.14)}.home-start-btn{width:100%;min-height:86px;border-radius:28px;background:linear-gradient(180deg,#ffdd3f,#ff9f19);box-shadow:inset 0 4px #ffffff73,0 8px #dd7200;font-size:clamp(1.35rem,3vw,2.15rem)}.home-action-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0}.home-action-btn{min-height:70px;border-radius:22px;box-shadow:inset 0 3px #ffffff52,0 7px #00368c40;font-size:clamp(1rem,2.4vw,1.35rem)}.home-action-play{background:linear-gradient(180deg,#ffdf54,#f2a323);color:#2b230b;text-shadow:none}.home-action-battle{background:linear-gradient(180deg,#ff8b42,#ec5b23)}.home-action-settings{background:linear-gradient(180deg,#4b93ff,#2367e6)}.home-level-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.home-level-card{position:relative;display:grid;grid-template-rows:auto auto 1fr auto;gap:8px;min-height:235px;padding:16px;border:4px solid rgba(255,255,255,.88);border-radius:24px;background:#fffffff0;color:#1c2d4f;box-shadow:0 8px #1a59ae33,0 12px 30px #0049a533;cursor:pointer;overflow:hidden;text-align:left}.home-level-card.is-locked{cursor:not-allowed;filter:grayscale(.25);opacity:.72}.home-level-num{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;color:#fff;background:linear-gradient(180deg,#7ed957,#34a320);box-shadow:inset 0 2px #ffffff59,0 4px #0000002e;font-size:1.45rem;font-weight:var(--fw-black)}.home-level-title{color:#23812f;font-size:clamp(1.15rem,2.2vw,1.55rem);font-weight:var(--fw-black);line-height:1.05}.home-level-art{display:grid;place-items:center;min-height:94px;border-radius:18px;background:linear-gradient(180deg,#caf1ff,#80cdfb)}.home-level-art img{width:min(76px,60%);height:min(76px,60%);object-fit:contain}.home-level-progress{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;color:#2563eb;font-size:.95rem;font-weight:var(--fw-black)}.home-level-progress i{display:block;height:12px;border-radius:var(--r-pill);overflow:hidden;background:#dfe8f2}.home-level-progress b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#76d948,#ffcf2e)}.home-credit{margin:18px 0 0;color:#ffffffc2;font-size:.85rem;font-weight:var(--fw-bold);text-align:center}.home-credit a{color:inherit}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}@media(max-width:840px){.home-topbar{align-items:stretch;flex-direction:column}.home-resource-row{justify-content:space-between}.home-resource-pill{flex:1 1 120px}.home-hero-panel{min-height:640px}.home-hero-copy{max-width:calc(100% - 44px);top:22px;left:22px}.home-hero-card{inset:auto 18px 18px;width:auto;transform:none}.home-action-row,.home-level-strip{grid-template-columns:1fr}.home-level-card{min-height:180px;grid-template-columns:54px 1fr 120px;grid-template-rows:auto 1fr;align-items:center}.home-level-num{grid-row:1 / 3}.home-level-art{grid-column:3;grid-row:1 / 3;min-height:120px}.home-level-progress{grid-column:2}}:root{--bg: #0b132b;--bg-2: #1c2541;--panel: #1e2a4a;--panel-2: #243056;--primary: #ffd166;--primary-2: #f4a83a;--accent: #ffd166;--accent-2: #ef476f;--good: #06d6a0;--good-2: #048663;--bad: #ef476f;--info: #6ec5ff;--magic: #9b5cf6;--text: #f8f9fc;--muted: #9aa3b2;--radius: 14px;--radius-lg: 22px;--shadow-card: 0 12px 28px #00000055;--shadow-btn: 0 6px 0 #00000044;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color-scheme:dark}*{box-sizing:border-box}html{height:100dvh;margin:0;background:var(--bg);color:var(--text);overscroll-behavior:none}body,#root{height:100dvh;margin:0;background:transparent;color:var(--text);overscroll-behavior:none}.menu-backdrop{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;filter:blur(14px) brightness(.55) saturate(1.15);transform:scale(1.06);pointer-events:none}.page-content{position:relative;z-index:1;min-height:100dvh}.menu-frame{background:#141c38b3;backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border-radius:var(--radius-lg);border:1px solid #ffffff1f;box-shadow:0 20px 60px #0007}body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}button{font:inherit;cursor:pointer;border:none;border-radius:var(--radius);padding:12px 18px;background:var(--accent);color:#1a1a1a;font-weight:700;transition:transform .05s ease,filter .15s ease}button:hover{filter:brightness(1.05)}button:active{transform:translateY(1px)}button.ghost{background:transparent;color:var(--text);border:1px solid #ffffff22}button.danger{background:var(--accent-2);color:#fff}button:disabled{opacity:.5;cursor:not-allowed}input,select,textarea{font:inherit;width:100%;padding:12px 14px;border-radius:var(--radius);border:1px solid #ffffff22;background:#0b132b;color:var(--text)}input:focus,select:focus,textarea:focus{outline:2px solid var(--accent)}a{color:var(--accent)}.full-center{min-height:100dvh;display:grid;place-items:center;font-size:1.2rem;color:var(--muted)}.shell{max-width:960px;margin:0 auto;padding:24px}.shell-narrow{max-width:480px;margin:0 auto;padding:24px}.card{background:var(--panel);border-radius:var(--radius);padding:20px;margin-bottom:16px;box-shadow:0 6px 24px #0004}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px}.stack>*+*{margin-top:12px}.grid{display:grid;gap:12px}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-auto{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.muted{color:var(--muted);font-size:.9rem}.error{color:var(--accent-2);font-size:.9rem}h1,h2,h3{margin:0 0 8px}.title{font-size:2rem;font-weight:900;letter-spacing:-.5px;background:linear-gradient(90deg,var(--accent),var(--good));-webkit-background-clip:text;background-clip:text;color:transparent}.brand{font-size:3rem;font-weight:900;letter-spacing:-1px;text-align:center;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}.pin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.pin-grid button{height:64px;font-size:1.5rem}.pin-display{letter-spacing:18px;font-size:2rem;text-align:center;padding:14px;border-radius:var(--radius);background:#0b132b;border:1px solid #ffffff22}.avatar-card{background:var(--panel);border-radius:var(--radius);padding:16px;text-align:center;cursor:pointer;transition:transform .1s ease,background .15s ease;border:2px solid transparent}.avatar-card:hover{background:var(--bg-2)}.avatar-card.selected{border-color:var(--accent)}.avatar-blob{width:64px;height:64px;border-radius:50%;margin:0 auto 8px;background:linear-gradient(135deg,var(--accent),var(--accent-2))}.lesson-tile{display:block;text-decoration:none;background:var(--panel);color:var(--text);padding:16px;border-radius:var(--radius);transition:transform .1s ease}.lesson-tile:hover{transform:translateY(-2px)}.lesson-tile h3{font-size:1.1rem;margin-bottom:4px}.code-pill{display:inline-block;background:#0b132b;border:1px dashed var(--accent);color:var(--accent);padding:6px 14px;border-radius:999px;font-family:ui-monospace,SFMono-Regular,monospace;letter-spacing:2px;font-weight:800}table{width:100%;border-collapse:collapse;font-size:.95rem}th,td{text-align:left;padding:10px;border-bottom:1px solid #ffffff14}th{color:var(--muted);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:1px}.swatch{width:32px;height:32px;border-radius:8px;border:2px solid #ffffff22;cursor:pointer;padding:0;transition:transform .05s ease,border-color .15s ease}.swatch:hover{transform:scale(1.06)}.swatch.selected{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:2px}.avatar-preview{width:110px;flex:0 0 110px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;background:linear-gradient(180deg,#0e1832,#182550);border-radius:14px}.avatar-preview{position:relative}.ap-hat-cap,.ap-hat-beanie,.ap-hat-crown{position:relative;width:56px;height:14px;margin-bottom:-2px}.ap-cap-crown{width:50px;height:12px;border-radius:6px 6px 2px 2px;margin:0 auto}.ap-cap-brim{width:36px;height:5px;border-radius:3px;margin:-2px auto 0}.ap-hat-beanie{height:18px}.ap-beanie-body{width:54px;height:16px;background:#ef476f;border-radius:8px 8px 4px 4px;margin:0 auto}.ap-beanie-pom{width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:-4px;left:50%;transform:translate(-50%)}.ap-hat-crown{font-size:22px;line-height:1;text-align:center;color:#ffd166;text-shadow:0 2px 4px #00000066}.ap-head{width:56px;height:56px;border-radius:8px;position:relative;box-shadow:inset 0 -4px #0002}.ap-eye{position:absolute;top:38%;width:8px;height:8px;background:#111;border-radius:1px}.ap-shoulders{display:flex;gap:4px;align-items:stretch}.ap-torso{width:56px;height:56px;border-radius:6px;box-shadow:inset 0 -4px #0002}.ap-arm{width:18px;height:56px;border-radius:5px;box-shadow:inset 0 -4px #0002}.ap-legs{display:flex;gap:6px}.ap-leg{width:24px;height:38px;border-radius:5px;box-shadow:inset 0 -4px #0002}.upgrade-row{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;background:#0b132b;border:1px solid #ffffff14;border-radius:12px;padding:10px 12px}.upgrade-icon{width:56px;height:56px;font-size:1.8rem;display:grid;place-items:center;background:linear-gradient(160deg,#2a3970,#1a2348);border-radius:12px}.lb-widget{background:var(--panel);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow-card)}.lb-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.lb-title{font-weight:800;letter-spacing:.5px}.lb-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}.lb-list li{display:grid;grid-template-columns:36px 56px 1fr auto;align-items:center;gap:10px;background:#0b132b;border-radius:10px;padding:6px 10px;font-size:.92rem}.lb-list li.me{background:linear-gradient(90deg,#ffd16622,#06d6a022);border:1px solid #ffd16677}.lb-rank{font-size:1.1rem;text-align:center}.lb-mini-avatar{transform:scale(.45);transform-origin:center;width:48px;height:48px;display:flex;align-items:center;justify-content:center}.lb-mini-avatar .avatar-preview{padding:0;background:transparent}.lb-name{font-weight:700}.lb-coins{color:var(--primary);font-weight:800;font-size:.9rem}.create-tile{border:2px dashed var(--primary)}.create-plus{width:64px;height:64px;border-radius:50%;margin:0 auto 8px;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#1a1a1a;font-size:2.2rem;font-weight:900;display:grid;place-items:center}.pin-display{display:flex;justify-content:center;gap:14px;font-size:1.6rem;letter-spacing:0;padding:14px;border-radius:var(--radius);background:#0b132b;border:1px solid #ffffff22}.pin-display span{width:24px;text-align:center}.btn-primary{background:linear-gradient(180deg,var(--primary),var(--primary-2));color:#1a1a1a;border:none;border-radius:16px;padding:14px 22px;font-weight:900;font-size:1rem;cursor:pointer;box-shadow:var(--shadow-btn),inset 0 -4px #0003,inset 0 3px #fff4;transition:transform .06s ease,box-shadow .12s ease,filter .15s ease}.btn-primary:hover{filter:brightness(1.05)}.btn-primary:active{transform:translateY(3px);box-shadow:0 2px #0004,inset 0 -2px #0003}.btn-primary:disabled{opacity:.55;cursor:not-allowed;transform:none}.btn-secondary{background:linear-gradient(180deg,var(--magic),#6a3bd8);color:#fff;border:none;border-radius:16px;padding:14px 22px;font-weight:800;cursor:pointer;box-shadow:var(--shadow-btn),inset 0 -4px #0003,inset 0 3px #fff2;transition:transform .06s ease,filter .15s ease}.btn-secondary:hover{filter:brightness(1.08)}.btn-secondary:active{transform:translateY(3px)}.btn-big{font-size:1.2rem;padding:18px 28px;min-width:200px}.results-overlay{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:radial-gradient(ellipse at top,#1c2541,#08081a 70%);padding:16px;animation:results-fade-in .35s ease both;overflow-y:auto}@keyframes results-fade-in{0%{opacity:0}to{opacity:1}}.fireworks-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}.results-card{position:relative;z-index:2;width:100%;max-width:460px;background:linear-gradient(180deg,var(--panel),var(--panel-2));border-radius:var(--radius-lg);padding:26px 24px 20px;box-shadow:var(--shadow-card),0 0 0 3px #ffffff14 inset;animation:results-pop .5s cubic-bezier(.34,1.56,.64,1) both}.results-card.flawless{box-shadow:var(--shadow-card),0 0 0 3px var(--primary) inset,0 0 60px var(--primary)}@keyframes results-pop{0%{transform:scale(.8) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.results-title{text-align:center;margin:0 0 16px;font-size:2rem;font-weight:900;background:linear-gradient(90deg,var(--primary),var(--good));-webkit-background-clip:text;background-clip:text;color:transparent}.results-card.flawless .results-title{background:linear-gradient(90deg,var(--primary),var(--accent-2),var(--magic));-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 2.5s ease-in-out infinite;background-size:200% 100%}@keyframes shimmer{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.results-coin-banner{display:flex;align-items:center;justify-content:center;gap:12px;background:linear-gradient(180deg,#ffd16633,#f4a83a22);border:2px solid #ffd16677;border-radius:18px;padding:16px 20px;margin-bottom:14px}.results-coin-icon{font-size:2.2rem}.results-coin-num{font-size:2.6rem;font-weight:900;color:var(--primary);line-height:1}.results-coin-label{color:var(--muted);font-size:.85rem}.results-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:1rem}.results-row.dim{color:var(--muted);font-size:.9rem}.results-row.highlight{background:linear-gradient(90deg,transparent,#ffd16622,transparent);border-radius:8px;padding:10px 14px;font-weight:800;color:var(--primary)}.results-divider{height:1px;background:#ffffff14;margin:8px 0}.results-actions{display:flex;gap:10px;margin-top:18px}.results-actions .btn-primary{flex:1.4}.results-actions .btn-secondary{flex:1}.results-home-link{display:block;width:100%;margin-top:12px;background:transparent;color:var(--muted);border:none;cursor:pointer;font-size:.85rem;padding:6px}.results-home-link:hover{color:var(--text)}.results-footer-stack{margin-top:18px;display:flex;flex-direction:column;gap:12px}.lobby-row{display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;background:#0b132b;border-radius:12px;padding:6px 12px}.ready-pill{background:#0004;color:var(--muted);font-size:.75rem;font-weight:800;letter-spacing:1px;padding:4px 10px;border-radius:999px}.ready-pill.on{background:var(--good);color:#062a1f}.race-countdown{position:fixed;inset:0;display:grid;place-items:center;z-index:30;background:#0005;pointer-events:none}.race-countdown-num{font-size:8rem;font-weight:900;color:var(--primary);text-shadow:0 8px 32px #00000099;animation:count-pop 1s ease both}@keyframes count-pop{0%{transform:scale(.4);opacity:0}30%{transform:scale(1.2);opacity:1}to{transform:scale(1);opacity:1}}.podium-card{max-width:520px}.podium{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:10px;align-items:end;margin:18px 0}.podium-step{background:linear-gradient(180deg,#243056,#1a2348);border-radius:14px;padding:12px 8px;text-align:center;border:2px solid transparent}.podium-step.empty{opacity:.3}.podium-step.step-1{border-color:#ffd166;box-shadow:0 0 30px #ffd16655;padding-top:14px;padding-bottom:22px}.podium-step.step-2{border-color:silver}.podium-step.step-3{border-color:#cd7f32}.podium-medal{font-size:2rem}.podium-avatar{display:flex;justify-content:center;margin:4px 0}.podium-name{font-weight:800}.podium-stats{font-size:.8rem}.podium-scene{display:block;width:100%;height:220px;margin:-8px 0 6px;border-radius:14px;background:linear-gradient(180deg,#1c2541,#0f1838)}.game-root{position:fixed;inset:0;background:#000;overflow:hidden;user-select:none;touch-action:none}.game-canvas{display:block;width:100%;height:100%}.hud{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:env(safe-area-inset-top,12px) env(safe-area-inset-right,12px) env(safe-area-inset-bottom,12px) env(safe-area-inset-left,12px)}.hud2{position:absolute;top:0;left:0;right:0;padding:max(env(safe-area-inset-top,0px),12px) 16px 0 16px;pointer-events:none;z-index:5}.hud2-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.hud2-row>*{pointer-events:auto}.hud2-stats{display:flex;gap:8px;flex:1;justify-content:center;flex-wrap:wrap}.hud-pause{min-height:48px;min-width:48px;padding:8px 14px;font-size:1.2rem;border-radius:var(--r-pill)}.hud2-progress{height:6px;background:#00000040;border-radius:var(--r-pill);overflow:hidden;margin-top:10px;pointer-events:auto}.hud2-progress-fill{height:100%;background:linear-gradient(90deg,var(--c-yellow),var(--c-green));border-radius:var(--r-pill);transition:width .1s linear}.touch-controls{position:absolute;bottom:max(env(safe-area-inset-bottom,0px),14px);left:14px;right:14px;display:flex;justify-content:space-between;z-index:6;pointer-events:none}.touch-controls-left,.touch-controls-right{display:flex;gap:12px;pointer-events:auto}.touch-btn{width:80px;height:80px;flex-direction:column;gap:4px;padding:8px;border-radius:22px;font-size:.7rem;letter-spacing:1px}.touch-btn-icon{font-size:1.8rem;font-weight:var(--fw-black);line-height:1}.touch-btn-label{font-size:.65rem;font-weight:var(--fw-black);letter-spacing:1.5px}@media(max-width:480px){.touch-btn{width:64px;height:64px}.touch-btn-icon{font-size:1.5rem}.touch-controls-left,.touch-controls-right{gap:8px}}.hud-top,.hud-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 12px}.hud-top>*{pointer-events:auto}.hud-bottom button{pointer-events:auto}.hud-stat{background:#0008;color:#fff;border-radius:999px;padding:6px 14px;font-weight:700;letter-spacing:.5px;backdrop-filter:blur(6px)}.hud-progress{flex:1;height:8px;border-radius:4px;background:#0006;overflow:hidden}.hud-progress-fill{height:100%;background:linear-gradient(90deg,#ffd166,#06d6a0);transition:width .1s linear}.heart{color:#f57;font-size:1.2rem;margin-right:2px}.heart.dim{color:#555}.challenge-overlay{position:absolute;inset:0;display:grid;place-items:center;background:#08122873;backdrop-filter:blur(8px);z-index:10;pointer-events:auto;padding:20px}.challenge-card{background:var(--surface-card);color:var(--text-on-light);border-radius:var(--r-card);padding:26px 24px 24px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:var(--sh-card-strong);animation:card-pop .22s cubic-bezier(.34,1.56,.64,1)}@keyframes card-pop{0%{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}.challenge-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.challenge-tag{background:linear-gradient(180deg,var(--c-blue),var(--c-blue-2));color:#fff;padding:6px 14px;border-radius:var(--r-pill);font-size:.78rem;font-weight:var(--fw-black);letter-spacing:1.5px;text-transform:uppercase;box-shadow:0 2px #00000026}.challenge-prompt{font-size:1.3rem;font-weight:var(--fw-black);margin:14px 0 8px;text-align:center;color:var(--text-on-light)}.challenge-card .challenge-header .btn{min-height:44px;padding:8px 14px;font-size:.95rem}.choice{display:flex;flex-direction:column;gap:4px;padding:18px 14px;background:#fff;color:var(--text-on-light);border:2px solid #e5ecf5;border-radius:16px;font-weight:var(--fw-bold);text-align:center;min-height:72px;cursor:pointer;font-family:var(--font-display);font-size:1.05rem;transition:transform 80ms ease,border-color .12s ease,background .12s ease,box-shadow .12s ease,color .12s ease;-webkit-tap-highlight-color:transparent;box-shadow:0 3px #0000000f}.choice:hover:not(:disabled){border-color:var(--c-blue);transform:translateY(-1px)}.choice:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px #0000000f}.choice .choice-vi{font-size:1.15rem;font-weight:var(--fw-black)}.choice .choice-en{font-size:.85rem;color:var(--muted-on-light)}.choice.good{background:linear-gradient(180deg,var(--c-green),var(--c-green-2));color:#fff;border-color:var(--c-green-2);box-shadow:0 4px 0 var(--c-green-2)}.choice.good .choice-en{color:#ffffffd9}.choice.bad{background:linear-gradient(180deg,var(--c-red),var(--c-red-2));color:#fff;border-color:var(--c-red-2);box-shadow:0 4px 0 var(--c-red-2)}.choice.faded{opacity:.45}.choice.choice-image{min-height:130px;padding:10px}.choice.choice-image img{width:100%;height:110px;object-fit:contain;filter:drop-shadow(0 2px 6px #00000044)}.audio-bubbles{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:16px;justify-items:center;padding:8px 0}.audio-bubble{width:110px;height:110px;border-radius:50%;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:linear-gradient(160deg,#2a3970,#1a2348);color:#fff;font-weight:800;box-shadow:0 8px #0008,0 12px 24px #0005,inset 0 -6px #0004,inset 0 4px #ffffff14;transition:transform .08s ease,box-shadow .12s ease,background .15s ease;-webkit-tap-highlight-color:transparent}.audio-bubble:hover:not(:disabled){transform:translateY(-2px)}.audio-bubble:active:not(:disabled){transform:translateY(4px);box-shadow:0 4px #0008,0 6px 12px #0005,inset 0 -4px #0004,inset 0 2px #ffffff14}.audio-bubble.selected-pick{background:linear-gradient(160deg,#ffd166,#d99c1f);color:#1a1a1a;box-shadow:0 8px #0005,0 0 0 4px #ffd16699,0 0 24px #ffd16677;animation:bubble-pulse 1.4s ease-in-out infinite}.audio-bubble.good{background:linear-gradient(160deg,#06d6a0,#058564);color:#062a1f}.audio-bubble.bad{background:linear-gradient(160deg,#ef476f,#b22b4d)}.audio-bubble.faded{opacity:.45}.audio-bubble-icon{font-size:2.2rem;line-height:1}.audio-bubble-num{font-size:.95rem;letter-spacing:1px;opacity:.9}@keyframes bubble-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.teach-overlay{position:absolute;inset:0;display:grid;place-items:center;background:#000000c0;backdrop-filter:blur(8px);z-index:12;animation:teach-fade-in .25s ease both}@keyframes teach-fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.teach-card{background:linear-gradient(180deg,#2a3970,#1a2348);border-radius:22px;padding:28px 26px 26px;width:90%;max-width:380px;text-align:center;border:2px solid #ffd16677;box-shadow:0 24px 60px #000a,0 0 60px #ffd16633}.teach-label{margin:0 0 10px;font-size:.85rem}.teach-image{width:130px;height:130px;object-fit:contain;filter:drop-shadow(0 4px 14px #000000aa);margin-bottom:8px}.teach-english{font-size:2.2rem;font-weight:900;margin:0;background:linear-gradient(90deg,var(--primary),var(--good));-webkit-background-clip:text;background-clip:text;color:transparent}.teach-vi{font-size:1.2rem;color:#cdd5e0;margin:6px 0 14px}.teach-progress{height:4px;background:#fff2;border-radius:2px;overflow:hidden;position:relative}.teach-progress:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--primary),var(--good));transform-origin:left;animation:teach-bar 3s linear forwards}@keyframes teach-bar{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.coin-floats{position:absolute;top:56px;right:18px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;pointer-events:none;z-index:5}.coin-float{font-weight:900;color:var(--primary);font-size:1.2rem;text-shadow:0 2px 6px #000a;animation:coin-float-up .9s ease-out forwards}@keyframes coin-float-up{0%{transform:translateY(14px) scale(.9);opacity:0}20%{opacity:1;transform:translate(0) scale(1.1)}to{transform:translateY(-34px) scale(.95);opacity:0}}.challenge-image{display:block;margin:4px auto 12px;width:140px;height:140px;object-fit:contain;filter:drop-shadow(0 4px 12px #00000044)}.lesson-intro-page{min-height:100dvh;width:min(100%,920px);margin:0 auto;padding:clamp(18px,4vw,34px);color:#fff}.lesson-intro-top{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:18px}.lesson-intro-top p,.lesson-intro-top h1{margin:0;text-align:right}.lesson-intro-top p{color:#ffffffd1;font-weight:var(--fw-black);text-transform:uppercase}.lesson-intro-top h1{font-size:clamp(2.5rem,7vw,4.6rem);font-weight:var(--fw-black);line-height:.95;text-shadow:0 5px 0 rgba(0,72,160,.22)}.lesson-intro-back{color:#fff;padding:12px 18px;border-radius:var(--r-pill);background:#1354b373;text-decoration:none;font-weight:var(--fw-black)}.intro-root{background:var(--panel);border-radius:var(--radius);padding:20px;margin-top:8px}.intro-card{background:linear-gradient(135deg,#1c2541,#2b3766);border-radius:18px;padding:24px 24px 28px;text-align:center;position:relative;min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.intro-image{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 4px 14px #00000055);margin-bottom:4px}.intro-art-frame{width:clamp(150px,28vw,230px);height:clamp(150px,28vw,230px);display:grid;place-items:center;margin:0 auto 10px;border-radius:32px;background:radial-gradient(circle at 50% 35%,#ffffff 0%,#ffffff 26%,transparent 27%),linear-gradient(180deg,#d9f4ff,#90d3ff);box-shadow:inset 0 0 0 4px #ffffffb8,0 10px 24px #1f69e62e}.intro-art-frame .intro-image{width:78%;height:78%;margin:0;filter:drop-shadow(0 10px 14px rgba(13,43,84,.22))}.intro-image-placeholder{color:#ffbf1c;font-size:5rem;text-shadow:0 3px 0 rgba(0,0,0,.16)}.intro-speaker{position:absolute;top:12px;right:12px;background:#0004;color:#fff;border-radius:999px;width:44px;height:44px;display:grid;place-items:center;border:none;cursor:pointer;font-size:1.2rem}.intro-english{font-size:2.6rem;font-weight:900;letter-spacing:-.5px;background:linear-gradient(90deg,#ffd166,#06d6a0);-webkit-background-clip:text;background-clip:text;color:transparent}.intro-vietnamese{font-size:1.4rem;color:#cdd5e0;font-weight:600}.intro-sentence{margin-top:12px;font-style:italic;background:#0003;color:#fff;border:none;border-radius:12px;padding:10px 14px;cursor:pointer;font-size:.95rem;max-width:100%}.intro-dots{display:flex;justify-content:center;gap:6px;margin-top:14px}.intro-dot{width:8px;height:8px;border-radius:50%;background:#fff2}.intro-dot.active{background:var(--accent)}.level-select-page,.settings-page{position:relative;z-index:1}.level-select-hero{display:flex;align-items:end;justify-content:space-between;gap:18px;margin:10px 0 18px;padding:clamp(22px,4vw,38px);border:5px solid rgba(255,255,255,.85);border-radius:30px;color:#fff;background:radial-gradient(circle at 80% 20%,rgba(255,217,61,.35),transparent 28%),linear-gradient(135deg,#31aefff2,#1f69e6f2);box-shadow:0 14px 36px #004caa38}.level-select-hero p,.level-select-hero h1{margin:0}.level-select-hero p{font-size:1rem;font-weight:var(--fw-black);text-transform:uppercase;color:#ffffffd9}.level-select-hero h1{font-size:clamp(3rem,8vw,5.5rem);font-weight:var(--fw-black);line-height:.9;text-shadow:0 5px 0 rgba(0,72,160,.22)}.level-select-xp{min-width:min(100%,320px);display:grid;gap:8px;font-weight:var(--fw-black)}.level-select-xp i{height:24px;overflow:hidden;border-radius:var(--r-pill);background:#0c4da0a6}.level-select-xp b{display:block;height:100%;border-radius:inherit;background:linear-gradient(180deg,#a3ec4d,#52bf28)}.level-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}.level-grid .home-level-card{text-decoration:none;min-height:250px}.level-reward-pill{justify-self:start;padding:5px 10px;border-radius:var(--r-pill);color:#7a4b00;background:linear-gradient(180deg,#fff4bd,#ffd866);box-shadow:inset 0 1px #ffffff8c,0 2px #a763002e;font-size:.82rem;font-weight:var(--fw-black)}.lesson-locked{position:relative;opacity:.78}.lesson-locked-overlay{position:absolute;inset:0;display:grid;place-items:center;gap:8px;padding:18px;color:#fff;background:#0a18379e;backdrop-filter:blur(4px);text-align:center;font-weight:var(--fw-black)}.lesson-locked-icon{font-size:2.6rem}.settings-topbar{display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:16px;margin-bottom:18px}.settings-topbar h1{margin:0;color:#fff;font-size:clamp(2.4rem,6vw,4.5rem);font-weight:var(--fw-black);text-shadow:0 5px 0 rgba(0,72,160,.22)}.settings-saved{color:#fff;padding:8px 14px;border-radius:var(--r-pill);background:#1354b373;font-weight:var(--fw-black)}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.settings-panel{padding:clamp(18px,3vw,26px);border:4px solid rgba(255,255,255,.85);border-radius:28px;color:var(--text-on-light);background:#fffffff0;box-shadow:0 8px #1a59ae2e,0 16px 32px #0049a52e}.settings-panel h2{margin:0;color:#1d4ed8;font-size:1.45rem;font-weight:var(--fw-black)}.settings-look{grid-row:span 2}.settings-look .card{padding:0;box-shadow:none}.settings-look .avatar-preview{background:linear-gradient(180deg,#a5dbff,#57a7ff)}.create-page{display:grid;place-items:center}.create-panel{width:min(100%,620px);padding:clamp(22px,4vw,34px);border:5px solid rgba(255,255,255,.88);border-radius:32px;background:#fffffff2;box-shadow:0 10px #1a59ae2e,0 20px 44px #0049a533}.create-panel h1{margin:0;color:#1d4ed8;font-size:clamp(2.2rem,6vw,4rem);font-weight:var(--fw-black);line-height:1;text-align:center}.create-panel .avatar-preview{background:linear-gradient(180deg,#a5dbff,#57a7ff)}.hud2{padding:max(env(safe-area-inset-top,0px),18px) 22px 0}.hud2-row{gap:clamp(10px,2vw,22px)}.hud2 .avatar-pill{border:3px solid rgba(255,255,255,.78);border-radius:20px;background:linear-gradient(180deg,#1d77eff0,#124ebef0);color:#fff;box-shadow:inset 0 3px #ffffff47,0 7px #002d8252}.hud2 .avatar-pill-name,.hud2 .avatar-pill-level{color:#fff}.hud2 .avatar-pill-face{background:#7bc9ff}.hud2 .hud-pill{min-height:58px;min-width:132px;justify-content:center;border:3px solid rgba(166,223,255,.55);border-radius:20px;background:linear-gradient(180deg,#10528deb,#082a53f2);box-shadow:inset 0 3px #ffffff24,0 7px #00153e57;font-size:clamp(1rem,2vw,1.35rem)}.hud2-progress{height:10px;margin-top:14px;background:#08265685;border:1px solid rgba(255,255,255,.25)}.hud-pause{min-width:70px;min-height:70px;border-radius:22px}.touch-btn{width:clamp(76px,10vw,112px);height:clamp(76px,10vw,112px);border:3px solid rgba(255,255,255,.45);border-radius:30px;box-shadow:inset 0 4px #ffffff38,0 8px #0028695c;text-shadow:0 2px 0 rgba(0,0,0,.18)}.touch-btn-icon{font-size:clamp(1.8rem,4vw,2.9rem)}.touch-btn-label{font-size:clamp(.68rem,1.4vw,.95rem)}.pause-overlay{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:22px;pointer-events:auto;background:#081e3a47;backdrop-filter:blur(7px) saturate(1.15)}.pause-menu{width:min(92vw,520px);padding:clamp(24px,4vw,34px);border:5px solid rgba(255,255,255,.92);border-radius:34px;background:radial-gradient(circle at 50% 0%,rgba(255,217,61,.2),transparent 36%),linear-gradient(180deg,#3aaefffa,#1e67e2fa);box-shadow:inset 0 5px #ffffff47,0 12px #05379247,0 28px 60px #00236452;text-align:center}.pause-menu-title{color:#fff;margin-bottom:22px;font-size:clamp(2.4rem,7vw,4.4rem);font-weight:var(--fw-black);line-height:.95;text-shadow:0 5px 0 rgba(0,65,160,.24),0 12px 28px rgba(0,0,0,.18)}.pause-menu-actions{display:grid;gap:14px}.pause-btn{min-height:72px;width:100%;border:0;border-radius:24px;color:#fff;cursor:pointer;font-family:var(--font-display);font-size:clamp(1.15rem,3vw,1.55rem);font-weight:var(--fw-black);text-transform:uppercase;letter-spacing:0;text-shadow:0 2px 0 rgba(0,0,0,.16);box-shadow:inset 0 4px #ffffff5c,0 7px #002d7847}.pause-btn-resume{color:#2b230b;text-shadow:none;background:linear-gradient(180deg,#ffdf54,#f2a323)}.pause-btn-settings{background:linear-gradient(180deg,#55b6ff,#2379ed)}.pause-btn-exit{background:linear-gradient(180deg,#ff8b42,#ec5b23)}.pause-btn:active{transform:translateY(4px);box-shadow:inset 0 3px #ffffff38,0 3px #002d7847}.challenge-overlay{background:#0918366b;backdrop-filter:blur(6px) saturate(1.15)}.challenge-card{max-width:580px;border:4px solid rgba(255,255,255,.9);border-radius:30px;background:linear-gradient(180deg,#fff,#f7fbff);box-shadow:0 12px #0939802e,0 22px 48px #001e5838}.challenge-tag{margin-top:-54px;min-width:220px;text-align:center;border-radius:14px;background:linear-gradient(180deg,#55b6ff,#2379ed);box-shadow:inset 0 3px #ffffff5c,0 6px #0046a540;font-size:1rem}.challenge-prompt{color:#1c2d4f;font-size:clamp(1.4rem,3vw,2rem)}.choice{border-radius:18px;border:2px solid #d8e4f2;background:linear-gradient(180deg,#fff,#f3f7fc);box-shadow:0 4px #0d2b541f;color:#1c2d4f;font-size:1.2rem}.choice.good{background:linear-gradient(180deg,#5edf61,#35b53e);border-color:#36ad3d}.choice.bad{background:linear-gradient(180deg,#ff6a7c,#d7344f);border-color:#c52d45}.audio-bubble{background:linear-gradient(180deg,#4b93ff,#2367e6);box-shadow:inset 0 3px #ffffff38,0 7px #00368c4d}.teach-overlay{background:#0918368c}.teach-card{border:4px solid rgba(255,255,255,.85);background:linear-gradient(180deg,#fff,#f7fbff);color:var(--text-on-light);box-shadow:0 12px #0939802e,0 22px 48px #001e5838}.teach-english{color:#1d4ed8;background:none}.teach-vi{color:var(--muted-on-light)}.teach-progress{background:#dfe8f2}.intro-root{width:min(100%,620px);margin:0 auto;padding:clamp(18px,4vw,28px);border:4px solid rgba(255,255,255,.85);border-radius:32px;background:#fffffff0;box-shadow:0 8px #1a59ae2e,0 16px 32px #0049a52e}.intro-card{min-height:420px;border-radius:28px;color:var(--text-on-light);background:linear-gradient(180deg,#fff,#eef8ff);box-shadow:inset 0 0 0 2px #dbeafe}.intro-speaker{background:linear-gradient(180deg,#4b93ff,#2367e6);box-shadow:0 4px #00368c40}.intro-english{font-size:clamp(2.5rem,8vw,4.5rem);line-height:1;color:#1d4ed8;background:none}.intro-vietnamese{color:#23812f;font-size:clamp(1.4rem,4vw,2.1rem)}.intro-sentence{font-size:1.05rem;color:#1c2d4f;background:#eaf4ff}.intro-dot{background:#cfe0f3}.intro-dot.active{background:#2379ed}.intro-root>button:last-child{min-height:64px;border-radius:22px;color:#2b230b;background:linear-gradient(180deg,#ffdf54,#f2a323);box-shadow:inset 0 3px #ffffff5c,0 7px #b76a0047;font-size:1.18rem;font-weight:var(--fw-black)}@media(max-width:640px){.lesson-intro-top{align-items:start;flex-direction:column}.lesson-intro-top p,.lesson-intro-top h1{text-align:left}}.results-overlay{background:linear-gradient(#49b1ff4d,#49b1ff4d),radial-gradient(circle at top,#8edbff,#2e9cff 48%,#126dde)}.results-card,.results-card2{color:var(--text-on-light);border:5px solid rgba(255,255,255,.9);border-radius:34px;background:linear-gradient(180deg,#fff,#fffaf2);box-shadow:0 12px #09398029,0 24px 56px #001e583d}.results-card{max-width:min(960px,94vw)}.results-card.flawless,.results-card2.flawless{box-shadow:0 12px #09398029,0 24px 56px #001e583d,0 0 54px #ffd93d8c}.results-title{color:#1d4ed8;background:none}.results-coin-banner,.results-row.highlight{background:linear-gradient(180deg,#fff8d6,#fff0aa);border-color:#ffbf1c8c}.results-row,.results-row.dim,.results-coin-label{color:#1c2d4f}.results-divider{background:#dfe8f2}.results-home-link{color:#5d6b85}.podium-scene{background:linear-gradient(180deg,#aee5ff,#55b6ff);border:3px solid #d9f6ff}.results-actions .btn-primary,.results-actions .btn-secondary,.results-actions2 .btn{border-radius:24px;min-height:72px}@media(max-width:820px){.settings-topbar,.settings-grid{grid-template-columns:1fr}.settings-look{grid-row:auto}.level-select-hero{align-items:stretch;flex-direction:column}.hud2 .avatar-pill{transform:scale(.82);transform-origin:top left}.hud2 .hud-pill{min-width:auto;min-height:48px}}