:root{--ink: #33245a;--ink-soft: #64548a;--cream: #fff8e8;--paper: #fffdf8;--pink: #ff6fa5;--pink-deep: #e64d8d;--yellow: #ffd93d;--orange: #ff9f43;--mint: #4ecdc4;--blue: #5aa9ff;--purple: #8b5cf6;--green: #39b86a;--green-deep: #239b52;--red: #ff5d6c;--shadow-lg: 0 24px 60px rgba(66, 38, 112, .22);--shadow-md: 0 12px 30px rgba(66, 38, 112, .16);--shadow-sm: 0 5px 14px rgba(66, 38, 112, .12);--radius-xl: 38px;--radius-lg: 28px;--radius-md: 20px;--font-body: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif;--font-display: "Baloo 2", "Noto Sans TC", "Microsoft JhengHei", sans-serif;--vh: 1vh;--header-height: 74px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;color:var(--ink);font-family:var(--font-body);background:radial-gradient(circle at 12% 8%,rgba(255,217,61,.28),transparent 32%),radial-gradient(circle at 88% 16%,rgba(255,111,165,.22),transparent 30%),radial-gradient(circle at 50% 100%,rgba(78,205,196,.2),transparent 40%),#fff9ee;overflow-x:hidden}button{font-family:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:4px solid #2f7df6;outline-offset:4px}img{max-width:100%;display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.noscript{position:fixed;inset:0;display:grid;place-items:center;padding:24px;background:#fff9ee;font-size:20px;z-index:100000}#global-bar{position:fixed;top:0;left:0;right:0;height:var(--header-height);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 clamp(16px,4vw,46px);z-index:900;background:#fffdf8db;border-bottom:1px solid rgba(90,60,140,.1);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:background .35s ease,color .35s ease,box-shadow .35s ease}body[data-screen=home] #global-bar{background:linear-gradient(to bottom,rgba(43,20,78,.55),transparent);border-bottom:0;color:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}.brand{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:800;font-size:clamp(17px,2.2vw,23px);letter-spacing:.02em}.brand-star{color:var(--yellow);font-size:1.1em;animation:twinkle 2.2s ease-in-out infinite}.brand-sub{font-size:.66em;padding:3px 10px;border-radius:999px;background:var(--yellow);color:#6a3b00;letter-spacing:.08em}.bar-actions{display:flex;gap:10px}.bar-btn{width:48px;height:48px;border-radius:16px;border:0;background:#ffffffb8;box-shadow:var(--shadow-sm);font-size:23px;display:grid;place-items:center;transition:transform .18s ease,background .2s ease,opacity .2s ease}body[data-screen=home] .bar-btn{background:#fff3;border:1px solid rgba(255,255,255,.35);box-shadow:none}body[data-screen=home] #home-btn{visibility:hidden;pointer-events:none}.bar-btn:hover{transform:translateY(-2px) scale(1.04)}.bar-btn.is-off{opacity:.62;filter:grayscale(.6)}.bar-btn.is-off:after{content:"";position:absolute;width:26px;height:3px;background:currentColor;transform:rotate(-38deg);border-radius:4px}#app{min-height:100vh}.screen{display:none;min-height:100vh;padding-top:var(--header-height)}.screen.active{display:block;animation:screen-in .45s cubic-bezier(.22,1,.36,1)}body[data-screen=home] .screen.active{padding-top:0}@keyframes screen-in{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}.home-view{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;isolation:isolate;background:#1b0f36}.home-backdrop{position:absolute;inset:-4%;background-size:cover;background-position:center;transform:scale(1.04);filter:saturate(1.15) brightness(.92);animation:slow-zoom 22s ease-in-out infinite alternate;z-index:-3}.home-view:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,#1b0f36e6,#1b0f369e 40%,#1b0f3614 72%),linear-gradient(to top,rgba(27,15,54,.82),transparent 55%);z-index:-2}.home-glow{position:absolute;width:70vw;height:70vw;max-width:820px;max-height:820px;border-radius:50%;background:radial-gradient(circle,rgba(255,217,61,.32),transparent 62%);right:-14vw;top:-18vw;filter:blur(10px);z-index:-1;animation:glow-pulse 6s ease-in-out infinite alternate}.home-content{position:relative;z-index:3;width:min(760px,60vw);margin-left:clamp(24px,8vw,120px);padding:calc(var(--header-height) + 26px) 24px 64px 0;color:#fff}.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:999px;font-size:14px;font-weight:700;letter-spacing:.12em;background:#ffd93d33;border:1px solid rgba(255,217,61,.55);color:#ffe98a;backdrop-filter:blur(6px)}.game-title{margin:22px 0 18px;font-family:var(--font-display);line-height:.96;letter-spacing:.02em;text-shadow:0 6px 0 rgba(80,30,110,.35),0 18px 40px rgba(0,0,0,.35)}.title-top{display:block;font-size:clamp(48px,7.4vw,92px);font-weight:800;color:#fff}.title-bottom{display:inline-block;font-size:clamp(56px,9vw,116px);font-weight:800;background:linear-gradient(180deg,#fff8b6,#ffd93d 45%,#ff9f43);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.35);filter:drop-shadow(0 8px 0 rgba(151,62,0,.28))}.subtitle{margin:0 0 30px;font-size:clamp(16px,2vw,21px);font-weight:500;color:#ffffffdb;letter-spacing:.04em}.home-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:30px}.start-adventure{position:relative;display:inline-flex;align-items:center;gap:16px;padding:20px 44px;border:0;border-radius:999px;font-family:var(--font-display);font-size:clamp(22px,2.6vw,30px);font-weight:800;letter-spacing:.05em;color:#5b2100;background:linear-gradient(135deg,#ffe26b,#ffd93d 30%,#ff9f43 75%,#ff7a59);box-shadow:0 12px #c45f1e,0 26px 48px #ff7a596b;overflow:hidden;transition:transform .16s ease,box-shadow .16s ease;animation:button-bob 2.6s ease-in-out infinite}.start-adventure:hover{transform:translateY(-3px);box-shadow:0 15px #c45f1e,0 30px 54px #ff7a597a}.start-adventure:active{transform:translateY(6px);box-shadow:0 5px #c45f1e,0 16px 26px #ff7a594d}.start-icon{font-size:1.1em;filter:drop-shadow(0 3px 2px rgba(0,0,0,.15))}.start-shine{position:absolute;top:-60%;left:-30%;width:22%;height:220%;background:#ffffff8c;transform:rotate(24deg);animation:shine-sweep 3.4s ease-in-out infinite}.how-btn,.continue-btn{border:2px solid rgba(255,255,255,.5);background:#ffffff24;color:#fff;border-radius:999px;padding:14px 26px;font-size:17px;font-weight:700;backdrop-filter:blur(8px);transition:background .2s ease,transform .2s ease}.how-btn:hover,.continue-btn:hover{background:#ffffff42;transform:translateY(-2px)}.continue-btn{border-color:#ffd93dcc;color:#ffe98a}.home-stats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}.stat-chip{display:flex;align-items:center;gap:7px;padding:10px 16px;border-radius:16px;background:#ffffff1f;border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);font-size:14px;color:#ffffffe6}.stat-chip strong{font-family:var(--font-display);font-size:22px;color:#ffe98a}.stat-emoji{font-size:18px}.home-note{max-width:560px;font-size:13px;line-height:1.7;color:#ffffff9e}.home-mascot{position:absolute;right:clamp(16px,6vw,100px);bottom:clamp(24px,6vh,70px);z-index:4;width:clamp(150px,20vw,280px);animation:mascot-float 4.2s ease-in-out infinite}.home-mascot img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:42% 42% 46% 46%;border:8px solid rgba(255,255,255,.88);box-shadow:0 24px 50px #00000059}.mascot-bubble{position:absolute;top:-18px;left:-80px;width:max-content;max-width:220px;padding:12px 18px;border-radius:20px 20px 6px;background:#fffdf6;color:var(--ink);font-size:14px;font-weight:700;box-shadow:var(--shadow-md);animation:bubble-bob 3.6s ease-in-out infinite}.floating-symbols{position:absolute;inset:0;z-index:2;pointer-events:none;color:#ffffff80;font-family:var(--font-display);font-weight:800}.floating-symbols span{position:absolute;font-size:clamp(24px,3vw,46px);text-shadow:0 4px 14px rgba(0,0,0,.28);animation:symbol-float 7s ease-in-out infinite}.floating-symbols span:nth-child(1){top:18%;left:45%;animation-delay:-1s;color:#ffe26b}.floating-symbols span:nth-child(2){top:30%;left:53%;animation-delay:-2.4s;color:#7fffd4}.floating-symbols span:nth-child(3){top:62%;left:47%;animation-delay:-3.2s;color:#ff9fb9}.floating-symbols span:nth-child(4){top:76%;left:58%;animation-delay:-.6s;color:#b9a6ff}.floating-symbols span:nth-child(5){top:15%;left:64%;animation-delay:-4.4s;color:#ffd93d}.floating-symbols span:nth-child(6){top:47%;left:61%;animation-delay:-2s;color:#8fe3ff}.floating-symbols span:nth-child(7){top:84%;left:42%;animation-delay:-5.1s;color:#ffe26b}.floating-symbols span:nth-child(8){top:42%;left:40%;animation-delay:-3.8s;color:#ffb3c8}.map-view{max-width:1240px;margin:0 auto;padding:28px clamp(16px,4vw,44px) 40px}.map-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;margin-bottom:26px}.map-top-actions{display:flex;align-items:flex-start;gap:6px}.map-back{align-self:start}.map-heading{text-align:center}.map-heading .eyebrow{color:#8a5a00;background:#ffd93d3d;border-color:#ff9f4373}.map-heading h1{margin:8px 0 6px;font-family:var(--font-display);font-size:clamp(32px,4.4vw,52px);line-height:1;color:var(--ink)}.map-heading p{margin:0;color:var(--ink-soft);font-size:15px}.map-summary{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:14px;font-weight:700;color:var(--ink-soft)}.summary-star{color:#b47800}.reset-btn{border:0;background:transparent;color:#a18fbe;font-size:12px;text-decoration:underline;padding:2px}.island-list{display:grid;gap:30px}.island-card{position:relative;border-radius:var(--radius-xl);overflow:hidden;min-height:320px;box-shadow:var(--shadow-lg);isolation:isolate;border:4px solid rgba(255,255,255,.8)}.island-bg{position:absolute;inset:0;background-size:cover;background-position:center 62%;transform:scale(1.03);transition:transform .8s ease;z-index:-3}.island-card:hover .island-bg{transform:scale(1.08)}.island-shade{position:absolute;inset:0;background:linear-gradient(to bottom,#1b0f3685,#1b0f361f 42%,#1b0f36a8),linear-gradient(100deg,rgba(27,15,54,.5),transparent 60%);z-index:-2}.island-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:26px 30px 20px;color:#fff}.island-title-wrap{display:flex;gap:16px;align-items:center}.island-emoji{font-size:clamp(42px,5vw,64px);filter:drop-shadow(0 8px 12px rgba(0,0,0,.3));animation:mascot-float 5s ease-in-out infinite}.island-planet{flex:none;width:86px;height:86px;border-radius:50%;background-size:cover;background-position:58% 45%;border:3px solid rgba(255,255,255,.85);box-shadow:0 10px 24px #00000061,inset 0 -6px 14px #0000002e;animation:mascot-float 5s ease-in-out infinite}.island-kicker{font-size:12px;font-weight:700;letter-spacing:.16em;color:#ffe98a}.island-header h2{margin:2px 0 4px;font-family:var(--font-display);font-size:clamp(26px,3.2vw,38px);line-height:1.1;text-shadow:0 3px 12px rgba(0,0,0,.35)}.island-header p{margin:0;max-width:560px;font-size:14px;line-height:1.6;color:#ffffffd1}.island-progress-pill{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px;padding:10px 16px;border-radius:18px;background:#ffffff2e;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px);font-size:13px;font-weight:700}.island-stars{color:#ffe98a;font-size:15px}.island-done{color:#ffffffbf;font-size:11px}.level-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:0 24px 26px}.level-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 14px 15px;border:3px solid rgba(255,255,255,.75);border-radius:24px;background:#fffdf7eb;color:var(--ink);box-shadow:0 10px 22px #1e0f3c2e;text-align:center;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;backdrop-filter:blur(6px)}.level-card:hover{transform:translateY(-5px);box-shadow:0 18px 34px #1e0f3c42;background:#fffdf7}.level-card.perfect{border-color:#ffd93d;box-shadow:0 0 0 4px #ffd93d52,0 14px 28px #1e0f3c38}.level-card.locked{background:#eee9f8c7;color:#8d80a8;filter:saturate(.4);border-color:#fff6}.level-card.locked .level-emoji{opacity:.55;filter:grayscale(.7)}.level-number{position:absolute;top:10px;left:12px;font-family:var(--font-display);font-size:13px;font-weight:800;color:#a58fc9;letter-spacing:.04em}.level-emoji{font-size:42px;line-height:1.1;filter:drop-shadow(0 4px 4px rgba(0,0,0,.12))}.level-title{font-size:17px;font-weight:900;line-height:1.25}.level-skill{font-size:11.5px;line-height:1.4;color:var(--ink-soft);min-height:32px}.level-card.locked .level-skill{color:#9c90b4}.level-stars{margin-top:2px}.stars{display:inline-flex;gap:2px;font-size:17px;line-height:1}.star.earned{color:#ffc107;text-shadow:0 2px 0 #c98a00}.star.empty{color:#ddd3e8}.locked-shake{animation:shake .45s ease}.map-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:34px;padding-top:18px;border-top:1px dashed rgba(100,84,138,.25);color:#a18fbe;font-size:12px}.map-footer .reset-btn{margin-left:auto}.level-view{position:relative;min-height:calc(100vh - var(--header-height));padding:20px clamp(14px,4vw,44px) 90px;background:radial-gradient(circle at 10% 10%,var(--theme-glow, rgba(255, 217, 61, .28)),transparent 34%),radial-gradient(circle at 90% 84%,var(--theme-glow2, rgba(78, 205, 196, .2)),transparent 38%),var(--theme-bg, #f9f3ff)}.theme-forest{--theme-bg: #f1fff4;--theme-accent: #39b86a;--theme-glow: rgba(94, 231, 168, .3);--theme-glow2: rgba(255, 217, 61, .22)}.theme-ocean{--theme-bg: #edfbff;--theme-accent: #2aa7c9;--theme-glow: rgba(90, 169, 255, .26);--theme-glow2: rgba(78, 205, 196, .24)}.theme-cloud{--theme-bg: #f3f2ff;--theme-accent: #7c8cf8;--theme-glow: rgba(124, 140, 248, .24);--theme-glow2: rgba(255, 111, 165, .16)}.theme-space{--theme-bg: #f4efff;--theme-accent: #8b5cf6;--theme-glow: rgba(139, 92, 246, .24);--theme-glow2: rgba(255, 217, 61, .2)}.level-topbar{max-width:1000px;margin:0 auto 18px;display:flex;align-items:center;gap:18px}.round-back{width:48px;height:48px;flex:0 0 auto;border-radius:50%;border:0;background:#fff;box-shadow:var(--shadow-sm);font-size:22px;font-weight:800;display:grid;place-items:center;transition:transform .18s ease}.round-back:hover{transform:translate(-3px) scale(1.04)}.level-progress{flex:1;display:flex;align-items:center;gap:12px}.progress-track{flex:1;height:16px;border-radius:999px;background:#fff;box-shadow:inset 0 2px 5px #503c7824;overflow:hidden}.progress-fill{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#5ee7a8,#4ecdc4 40%,#5aa9ff);transition:width .55s cubic-bezier(.22,1,.36,1)}.progress-label{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--ink-soft);min-width:48px;text-align:right}.hint-top{border:0;border-radius:999px;padding:11px 20px;background:#fff3c4;color:#8a5a00;font-size:15px;font-weight:800;box-shadow:var(--shadow-sm);transition:transform .18s ease}.hint-top:hover{transform:translateY(-2px)}.question-stage{position:relative;max-width:1000px;margin:0 auto}.question-card{position:relative;background:var(--paper);border-radius:var(--radius-xl);padding:clamp(20px,3.4vw,38px);box-shadow:var(--shadow-lg);border:4px solid rgba(255,255,255,.9);overflow:hidden}.question-card:before{content:"";position:absolute;top:-70px;right:-70px;width:220px;height:220px;border-radius:50%;background:var(--theme-glow, rgba(255, 217, 61, .2));pointer-events:none}.question-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.meta-chip{padding:6px 14px;border-radius:999px;background:var(--theme-accent, #7c8cf8);color:#fff;font-size:12px;font-weight:800;letter-spacing:.04em}.meta-chip.soft{background:#64548a1a;color:var(--ink-soft)}.prompt-row{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}.question-prompt{flex:1;margin:0;font-size:clamp(22px,3.3vw,34px);font-weight:900;line-height:1.35;letter-spacing:.02em;color:var(--ink)}.icon-btn{flex:0 0 auto;width:52px;height:52px;border-radius:16px;border:0;background:linear-gradient(145deg,#5aa9ff,#3d86e8);color:#fff;font-size:24px;display:grid;place-items:center;box-shadow:0 6px #2d6bc0,0 10px 18px #3d86e847;transition:transform .15s ease,box-shadow .15s ease}.icon-btn:hover{transform:translateY(-2px)}.icon-btn:active{transform:translateY(4px);box-shadow:0 2px #2d6bc0}.visual-zone{display:flex;justify-content:center;align-items:center;min-height:230px;padding:clamp(14px,2.8vw,28px);margin-bottom:20px;border-radius:26px;background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.92),transparent 70%),linear-gradient(145deg,#fff6dc,#eef9ff);border:2px dashed rgba(120,95,165,.18)}.visual{animation:visual-in .5s cubic-bezier(.22,1,.36,1);width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.visual-caption{margin-top:4px;font-size:12.5px;font-weight:700;color:#9b89b8;text-align:center}.hint-box{display:flex;align-items:center;gap:12px;padding:14px 18px;margin-bottom:18px;border-radius:20px;background:#fff6c9;border:2px solid #ffe27a;animation:hint-in .35s ease}.hint-box[hidden]{display:none}.hint-icon{font-size:26px}.hint-box p{flex:1;margin:0;font-size:16px;font-weight:700;line-height:1.5;color:#7a5200}.hint-speak{width:42px;height:42px;font-size:19px;border-radius:13px;background:linear-gradient(145deg,#ffce4a,#f2a900);box-shadow:0 5px #c28200}.answer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.answer-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-height:88px;padding:14px 18px;border:3px solid #e7def5;border-radius:24px;background:#fff;color:var(--ink);font-family:var(--font-display);font-size:clamp(24px,3vw,34px);font-weight:800;box-shadow:0 7px #e5d9f4,0 10px 20px #42267014;transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease;animation:option-in .4s both cubic-bezier(.22,1,.36,1);overflow:hidden}.answer-btn:hover:not(:disabled){transform:translateY(-3px);border-color:#b9a4e6;box-shadow:0 10px #e5d9f4,0 18px 30px #42267024}.answer-btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 3px #e5d9f4}.answer-index{position:absolute;top:8px;left:12px;width:24px;height:24px;border-radius:8px;background:#f1eafd;color:#a18acd;font-family:var(--font-body);font-size:12px;font-weight:800;display:grid;place-items:center}.answer-emoji{font-size:1.15em}.answer-label{line-height:1.15}.answer-btn.correct{background:linear-gradient(145deg,#d8ffe5,#b4f7c9);border-color:var(--green);color:#126b34;box-shadow:0 7px #63cf8b,0 0 0 5px #39b86a2e;animation:correct-pop .5s cubic-bezier(.34,1.56,.64,1)}.answer-btn.correct:after{content:"\2713";position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:26px;color:#1c9349}.answer-btn.wrong{background:#fff0f1;border-color:var(--red);color:#b32134;animation:shake .45s ease}.answer-btn.wrong:after{content:"\2715";position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:24px;color:var(--red)}.answer-btn.dimmed{opacity:.45;filter:grayscale(.5)}.answer-btn.revealed{animation:reveal-pulse 1s ease infinite alternate}.feedback{min-height:34px;margin-top:18px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px;font-size:18px;font-weight:800;text-align:center;line-height:1.5}.next-inline{flex:0 0 auto;border:0;border-radius:999px;padding:10px 22px;background:linear-gradient(135deg,#5ee7a8,#39b86a);color:#0b4d2a;font-size:16px;font-weight:900;box-shadow:0 4px #239b52;transition:transform .15s ease}.next-inline:hover{transform:translateY(-2px)}.next-inline:active{transform:translateY(3px);box-shadow:0 1px #239b52}.next-inline:disabled{opacity:.55;transform:none;box-shadow:0 1px #239b52}.feedback.correct{color:var(--green-deep);animation:feedback-pop .4s ease}.feedback.gentle{color:#b07a00}.feedback.reveal{color:#5c4a86}.buddy{position:absolute;right:-6px;bottom:12px;width:112px;pointer-events:none;animation:mascot-float 4.4s ease-in-out infinite}.buddy img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;border:5px solid #fff;box-shadow:var(--shadow-md)}.buddy-bubble{position:absolute;right:96px;top:12px;width:max-content;max-width:150px;padding:8px 13px;border-radius:14px 14px 4px;background:#fff;color:var(--ink);font-size:12px;font-weight:800;box-shadow:var(--shadow-sm)}.intro-overlay,.result-overlay{position:fixed;inset:0;z-index:850;display:grid;place-items:center;padding:24px;background:#22123e8c;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:fade-in .3s ease}.intro-card,.result-card{position:relative;width:min(620px,94vw);max-height:92vh;overflow:auto;padding:clamp(28px,5vw,50px);border-radius:42px;text-align:center;background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.95),transparent 55%),linear-gradient(160deg,#fffdf7,#f4ecff);box-shadow:0 30px 80px #14083273;border:5px solid rgba(255,255,255,.85);animation:card-in .5s cubic-bezier(.22,1,.36,1)}.intro-card .round-back{position:absolute;top:18px;left:18px}.intro-emoji{font-size:clamp(70px,12vw,110px);line-height:1;filter:drop-shadow(0 12px 14px rgba(80,40,120,.2));animation:mascot-float 3.6s ease-in-out infinite}.intro-island{display:inline-block;margin-top:14px;padding:6px 16px;border-radius:999px;background:var(--theme-glow, #fff3c4);color:var(--ink-soft);font-size:12px;font-weight:800;letter-spacing:.08em}.intro-card h1{margin:12px 0 4px;font-family:var(--font-display);font-size:clamp(34px,6vw,56px);line-height:1.05;color:var(--ink)}.intro-skill{margin:0 0 14px;font-size:15px;font-weight:800;color:var(--theme-accent, var(--purple))}.intro-text{margin:0 auto 26px;max-width:420px;font-size:17px;line-height:1.7;color:var(--ink-soft)}.big-btn,.secondary-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:999px;padding:17px 36px;font-family:var(--font-display);font-size:clamp(19px,2.4vw,24px);font-weight:800;color:#fff;background:linear-gradient(135deg,#ff8a5c,#ff5d8f);box-shadow:0 8px #c73d68,0 18px 34px #ff5d8f57;transition:transform .16s ease,box-shadow .16s ease}.big-btn:hover{transform:translateY(-2px)}.big-btn:active{transform:translateY(5px);box-shadow:0 3px #c73d68}.secondary-btn{background:linear-gradient(135deg,#7fb7ff,#5a7bff);box-shadow:0 8px #3f5ed0,0 18px 34px #5a7bff47}.text-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--ink-soft);font-size:15px;font-weight:800;padding:10px 14px;border-radius:12px}.text-btn:hover{background:#64548a1a}.intro-start{margin-bottom:14px}.result-card h2{margin:8px 0 6px;font-family:var(--font-display);font-size:clamp(34px,6vw,52px);color:var(--ink)}.result-emoji{font-size:clamp(70px,12vw,104px);line-height:1;animation:mascot-float 3.8s ease-in-out infinite}.result-stars{margin:4px 0 14px}.result-stars .stars{gap:8px;font-size:clamp(42px,7vw,62px)}.result-line{margin:0 0 6px;font-size:17px;color:var(--ink-soft)}.result-line strong{font-family:var(--font-display);font-size:24px;color:var(--pink-deep)}.result-new{display:inline-block;margin:4px 0;padding:5px 14px;border-radius:999px;background:#fff0b8;color:#9a6a00;font-size:13px;font-weight:800;animation:twinkle 1.6s ease-in-out infinite}.result-skill{margin:10px 0 22px;font-size:14px;font-weight:800;color:var(--green-deep)}.result-actions{display:flex;flex-direction:column;align-items:center;gap:12px}.how-overlay{position:fixed;inset:0;z-index:950;display:grid;place-items:center;padding:20px;background:#22123e99;backdrop-filter:blur(8px)}.how-card{position:relative;width:min(600px,94vw);max-height:90vh;overflow:auto;padding:34px;border-radius:34px;background:var(--paper);box-shadow:var(--shadow-lg);animation:card-in .4s ease}.how-card .round-back{position:absolute;top:16px;right:16px;width:40px;height:40px;font-size:16px}.how-card h2{margin:0 0 18px;font-family:var(--font-display);font-size:34px}.how-list{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:12px}.how-list li{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;border-radius:18px;background:#fff7e6}.how-list li>span{font-size:26px}.how-list strong{font-size:15px}.how-list p{margin:2px 0 0;font-size:13px;line-height:1.6;color:var(--ink-soft)}.how-card>.big-btn{width:100%}.ten-frame-wrap,.double-ten-wrap,.compare-wrap,.ordinal-wrap,.bond-wrap,.addsub-wrap,.maketen-wrap,.breakten-wrap,.clock-wrap,.baseten-wrap,.shape-wrap,.ruler-wrap,.coins-wrap,.vertical-wrap,.calendar-wrap,.table-wrap,.scene-wrap,.numberline-wrap{width:100%}.ten-frame{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;width:min(360px,78vw);padding:10px;border-radius:18px;background:#fff;border:4px solid #ffcf5c;box-shadow:0 8px #f0b73d,0 12px 24px #b4780024}.double-ten{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}.double-ten .ten-frame{width:min(300px,44vw)}.ten-cell{aspect-ratio:1;border-radius:9px;background:#fff8e8;border:1.5px solid #f0dfbd;display:grid;place-items:center;min-width:0}.ten-chip{font-size:clamp(18px,3.2vw,30px);line-height:1;animation:chip-pop .4s cubic-bezier(.34,1.56,.64,1) both}.ten-frame-split{border-color:#74c6ff;box-shadow:0 8px #4aa4e8,0 12px 24px #3c8cdc24}.compare-board{display:flex;width:min(100%,620px);align-items:stretch;gap:clamp(6px,1.6vw,12px);justify-content:center;flex-wrap:nowrap}.compare-column{flex:1 1 0;min-width:0;padding:clamp(8px,2vw,14px);border-radius:20px;background:#fff;border:3px solid #dcd0f3;box-shadow:var(--shadow-sm)}.compare-chips{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;max-width:100%}.compare-chip{font-size:clamp(16px,4.6vw,28px);animation:chip-pop .35s both}.compare-count{margin-top:8px;text-align:center;font-family:var(--font-display);font-weight:800;font-size:20px;color:#b3a1cf}.compare-versus{align-self:center;font-family:var(--font-display);font-weight:800;font-size:18px;color:#b3a1cf}.compare-left{border-color:#ffc7d8;background:#fff7fa}.compare-right{border-color:#bde8ff;background:#f4fbff}.ordinal-direction{display:table;margin:2px auto 10px;padding:6px 14px;border-radius:999px;background:#fff3c4;color:#8a5a00;font-size:clamp(12px,3.4vw,14px);font-weight:800;white-space:nowrap}.ordinal-line{display:grid;width:min(100%,720px);grid-template-columns:repeat(var(--ordinal-count, 5),minmax(0,1fr));align-items:stretch;gap:clamp(3px,1.2vw,8px);padding:clamp(8px,2.4vw,18px);border-radius:22px;background:#fff;border:3px solid #d9ecff;box-shadow:var(--shadow-sm)}.ordinal-item{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;gap:4px;padding:clamp(4px,1.4vw,8px) clamp(2px,1vw,10px);border-radius:14px;background:#f8f4ff;animation:option-in .4s both}.ordinal-emoji{font-size:clamp(16px,calc(44vw / var(--ordinal-count, 5)),46px);line-height:1}.ordinal-number{font-family:var(--font-display);font-weight:800;font-size:clamp(10px,3vw,14px);color:var(--ink-soft)}.ordinal-label{font-size:14px;font-weight:800;color:var(--ink-soft);text-align:center}.bond-board{width:min(320px,80vw);display:flex;flex-direction:column;align-items:center}.bond-whole,.bond-part{display:grid;place-items:center;min-width:86px;height:70px;padding:0 16px;border-radius:20px;background:linear-gradient(145deg,#ffe26b,#ffc93d);border:3px solid #f0a800;font-family:var(--font-display);font-size:32px;font-weight:800;color:#6d4300;box-shadow:0 6px #d99400}.bond-part{background:linear-gradient(145deg,#bde8ff,#8ed4ff);border-color:#4aa4e8;color:#0b4d7a;box-shadow:0 6px #3c8bc4}.bond-whole.is-unknown,.bond-part.is-unknown{background:#fff;border:3px dashed #b3a1cf;color:#8d7aac;box-shadow:none}.bond-stems{position:relative;width:220px;height:52px}.bond-stem{position:absolute;top:0;width:4px;height:64px;border-radius:4px;background:#c9b6e8;transform-origin:top center}.bond-stem-left{left:50%;transform:rotate(38deg)}.bond-stem-right{left:50%;transform:rotate(-38deg)}.bond-parts{display:flex;gap:54px}.addsub-row{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:clamp(4px,1.2vw,10px)}.object-group{display:flex;flex:0 1 auto;flex-wrap:wrap;gap:2px;justify-content:center;min-width:44px;max-width:180px;padding:clamp(4px,1vw,10px);border-radius:16px;background:#fff;border:1.5px solid #e8def8;min-height:54px}.object-chip{font-size:clamp(15px,4.2vw,30px);animation:chip-pop .35s both}.crossed-out .object-chip{opacity:.42;text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:#ff5d6c}.is-removed{position:relative;opacity:.4;filter:grayscale(.7)}.is-removed:after{content:"";position:absolute;left:-8%;right:-8%;top:50%;height:3px;border-radius:2px;background:#ff5d6c;transform:rotate(-14deg)}.object-chip.is-removed:after,.scene-emoji.is-removed:after{left:-12%;right:-12%;top:52%}.subtract-target{border-color:#ffc2c8;background:#fff7f8}.addsub-sign{flex:0 0 auto;font-family:var(--font-display);font-size:clamp(18px,3.4vw,36px);font-weight:800;color:#8b5cf6}.addsub-answer{flex:0 0 auto;width:clamp(42px,12vw,56px);height:clamp(42px,12vw,56px);border-radius:16px;border:3px dashed #b3a1cf;display:grid;place-items:center;font-family:var(--font-display);font-size:clamp(22px,6vw,30px);font-weight:800;color:#8d7aac;background:#fff}.maketen-board,.breakten-board{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px}.mini-frame{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;width:min(250px,38vw);padding:8px;border-radius:16px;background:#fff;border:3px solid #ffcf5c}.mini-frame-second{border-color:#8ed4ff}.mini-frame .ten-cell{border-radius:7px}.mini-frame .ten-chip{font-size:clamp(15px,2.5vw,24px)}.ten-chip.to-move{animation:move-pulse 1.2s ease-in-out infinite;filter:drop-shadow(0 0 6px #ff9f43)}.maketen-plus,.breakten-plus{font-family:var(--font-display);font-size:30px;font-weight:800;color:#8b5cf6}.breakten-ten{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;width:min(250px,38vw);padding:8px;border-radius:16px;background:#fff;border:3px solid #ffcf5c}.breakten-ones{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;max-width:110px;padding:8px;border-radius:16px;background:#fff;border:3px dashed #8ed4ff;min-height:108px;align-content:flex-start}.crossed-chip{opacity:.38;text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:#ff5d6c}.clock-wrap{display:flex;flex-direction:column;align-items:center}.clock-face{width:min(260px,60vw);height:auto;filter:drop-shadow(0 10px 16px rgba(80,50,140,.18))}.clock-rim{fill:#ffcf5c}.clock-dial{fill:#fffdf7;stroke:#f0b73d;stroke-width:3}.clock-tick{stroke:#d8c9ee;stroke-width:2}.clock-tick.major{stroke:#9c86c4;stroke-width:4}.clock-number{font-family:var(--font-display);font-size:19px;font-weight:800;fill:#55427a}.clock-hand{stroke-linecap:round}.hour-hand{stroke:#5b3f8c;stroke-width:10}.minute-hand{stroke:#ff5d8f;stroke-width:6}.clock-center{fill:#ff5d8f;stroke:#fff;stroke-width:3}.clock-legend{margin-top:6px;font-size:12.5px;font-weight:700;color:#8d7aac}.legend-short{color:#5b3f8c;font-weight:900}.legend-long{color:#e64d8d;font-weight:900}.baseten-board{display:flex;gap:24px;justify-content:center;flex-wrap:wrap}.baseten-column{padding:14px;border-radius:18px;background:#fff;border:2px solid #e8def8;min-width:140px}.baseten-label{margin-bottom:10px;text-align:center;font-size:12px;font-weight:800;color:#8d7aac}.baseten-rods,.baseten-cubes{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;max-width:240px}.ten-rod{display:flex;flex-direction:column;gap:1px;width:26px;padding:2px;border-radius:5px;background:#ff9f43;border:1.5px solid #d97706}.rod-cell{height:12px;border-radius:2px;background:#ffd08a;border-bottom:1px solid rgba(180,90,0,.25)}.one-cube{width:22px;height:22px;border-radius:4px;background:#5aa9ff;border:1.5px solid #2d6bc0;box-shadow:inset 0 2px #fff6}.shape-canvas{width:min(540px,88vw);height:auto;border-radius:20px;background:#fff;border:2px solid #e8def8}.ruler-wrap{--cell: 46px;display:flex;flex-direction:column;align-items:center}.ruler-stage{position:relative;padding-top:56px}.ruler-object{position:absolute;top:0;left:0;height:54px;display:flex;align-items:center;justify-content:center;font-size:34px;background:repeating-linear-gradient(90deg,#fff2c9 0,#fff2c9 calc(var(--cell) - 1px),#ffcf5c calc(var(--cell) - 1px),#ffcf5c var(--cell));border:2px solid #ffcf5c;border-radius:12px;overflow:hidden}.ruler{display:flex;height:58px;border:3px solid #b48b00;border-radius:10px;overflow:hidden;background:#ffe98a}.ruler-cell{width:var(--cell);border-right:1px solid #d9a900;position:relative;flex:0 0 auto}.ruler-number{position:absolute;bottom:4px;left:4px;font-family:var(--font-display);font-size:13px;font-weight:800;color:#7a5200}.ruler-end{position:relative;align-self:flex-end;padding-bottom:4px;left:-4px}.ruler-parts{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,3vw,26px)}.ruler-piece{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 12px;border-radius:18px;background:#fffdf4;border:2px solid #ffe08a}.ruler-piece-label{font-family:var(--font-display);font-size:13px;font-weight:800;color:#8a6b00;letter-spacing:.05em}.ruler-mini{position:relative;padding-top:48px}.ruler-mini .ruler-object{height:40px;font-size:26px}.ruler-mini-ruler{height:40px;border-width:2px}.ruler-mini-ruler .ruler-number{font-size:11px;bottom:2px;left:2px}.coin-tray{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;padding:18px;border-radius:22px;background:#fff;border:2px solid #e8def8;min-height:100px}.coin{width:72px;height:72px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;line-height:1;box-shadow:inset 0 -4px #00000026,0 6px 10px #3c28642e;border:3px solid rgba(255,255,255,.7)}.coin small{font-size:10px;margin-top:2px}.coin span{font-size:24px}.coin-1{background:radial-gradient(circle at 35% 30%,#f4f6fb,#c8cedd);color:#5f6577;width:58px;height:58px}.coin-5{background:radial-gradient(circle at 35% 30%,#f7d9a8,#c98b45);color:#6d3f0c;width:63px;height:63px}.coin-10{background:radial-gradient(circle at 35% 30%,#eef2fa,#aeb9cc);color:#4c5568}.coin-50{background:radial-gradient(circle at 35% 30%,#ffe9a3,#e0a72b);color:#704e00;width:82px;height:82px;border-color:#ffe9a3}.vertical-board{width:min(320px,86vw);padding:18px;border-radius:20px;background:#fff;border:3px solid #dcd0f3;box-shadow:var(--shadow-sm)}.vertical-head,.vertical-row{display:grid;grid-template-columns:40px 1fr 1fr;align-items:center;text-align:center;font-family:var(--font-display);font-weight:800}.vertical-head{font-family:var(--font-body);font-size:12px;color:#a18fbe;padding-bottom:8px}.vertical-row{font-size:34px;color:#4a356f;line-height:1.35}.vertical-row.answer{color:#e64d8d}.vertical-op{font-size:26px;color:#8b5cf6}.vertical-line{height:3px;margin:4px 0 6px 40px;background:#8b5cf6;border-radius:3px}.calendar-card{width:min(460px,90vw);padding:16px;border-radius:22px;background:#fff;border:3px solid #dcd0f3;box-shadow:var(--shadow-sm)}.calendar-title{text-align:center;font-family:var(--font-display);font-size:26px;font-weight:800;color:#5b3f8c;margin-bottom:10px}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-weekday{text-align:center;font-size:12px;font-weight:800;color:#a18fbe;padding:4px 0}.calendar-day{aspect-ratio:1;display:grid;place-items:center;border-radius:9px;background:#faf7ff;font-family:var(--font-display);font-size:clamp(12px,2.2vw,16px);font-weight:700;color:#5b4b7a}.calendar-day.empty{background:transparent}.calendar-day.highlight{background:linear-gradient(145deg,#ff8a5c,#ff5d8f);color:#fff;box-shadow:0 4px #c73d68;animation:correct-pop .5s ease;font-weight:800}.calendar-day.today{outline:2px solid #5aa9ff}.table-title{text-align:center;font-size:15px;font-weight:800;color:var(--ink-soft);margin-bottom:8px}.data-table{border-collapse:separate;border-spacing:0;margin:0 auto;background:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);font-size:14px}.data-table th,.data-table td{padding:10px 14px;text-align:center;border-bottom:1px solid #efe7fa}.data-table th{background:#f4ecff;font-size:12px;color:#7c6a9e}.data-table tr:last-child td{border-bottom:0}.data-table td:first-child{text-align:left;font-weight:800}.table-value{font-family:var(--font-display);font-size:20px;font-weight:800;color:#5b3f8c}.scene-stage{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:14px;border-radius:20px;background:#fff;border:2px solid #e8def8;min-height:80px;align-items:center}.scene-emoji{font-size:clamp(26px,4vw,38px);animation:chip-pop .4s both}.scene-text{text-align:center;font-size:15px;font-weight:700;color:var(--ink-soft)}.scene-groups{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(8px,2.4vw,20px)}.scene-group{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 12px;border-radius:18px;background:#fff;border:2px solid #e8def8;min-width:64px}.scene-group-label{font-size:12px;font-weight:800;color:var(--ink-soft);text-align:center}.scene-group-items{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:3px;max-width:min(320px,74vw)}.scene-sign{display:grid;place-items:center;font-family:var(--font-display);font-size:clamp(22px,4.4vw,34px);font-weight:800;color:#8b5cf6;padding:0 4px}.countboard-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}.countboard{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:clamp(10px,2.6vw,20px)}.countboard-group{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 12px;border-radius:18px;background:#fff;border:2px solid #e8def8}.countboard-label{font-size:12px;font-weight:800;color:var(--ink-soft);text-align:center}.countboard-frames{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.countboard-frame{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:4px;border-radius:10px;background:#faf6ff;border:2px solid #d9c9f2}.countboard-frame.is-partial{border-style:dashed;border-color:#b3a1cf}.countboard-slot{width:clamp(18px,3.6vw,26px);height:clamp(18px,3.6vw,26px);display:grid;place-items:center;font-size:clamp(13px,2.6vw,19px);line-height:1;border-radius:5px;background:#fff;border:1px solid #ece2f8}.countboard-slot.is-empty{color:#cbbade;font-weight:800}.queue-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}.queue-line{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:clamp(8px,2.2vw,18px);padding:16px 14px;border-radius:22px;background:#fff;border:2px solid #e8def8}.queue-group{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 10px;border-radius:16px;background:#faf6ff;border:2px solid #e8def8}.queue-label{font-size:12px;font-weight:800;color:var(--ink-soft);white-space:nowrap}.queue-items{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;max-width:min(240px,52vw)}.queue-emoji{font-size:clamp(18px,3.2vw,26px);line-height:1.1}.queue-subject{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 12px;border-radius:16px;background:#fff6d9;border:3px solid #ffcf5c;box-shadow:0 4px 10px #b48b002e}.queue-hero-badge{position:absolute;top:-12px;left:50%;transform:translate(-50%);padding:1px 9px;border-radius:999px;background:#ff9f43;color:#fff;font-size:11px;font-weight:800;box-shadow:0 2px 5px #b45a0040}.queue-hero-emoji{font-size:clamp(26px,4.6vw,34px);line-height:1.1;animation:chip-pop .4s both}.queue-subject .queue-label{color:#a9700b}.numberline{display:flex;justify-content:space-between;padding:14px 8px 4px;border-top:3px solid #c9b6e8;position:relative;overflow-x:auto}.numberline-tick{position:relative;display:flex;flex-direction:column;align-items:center;min-width:24px}.numberline-dot{width:8px;height:8px;border-radius:50%;background:#c9b6e8;margin-top:-18px}.numberline-number{font-family:var(--font-display);font-size:11px;font-weight:700;color:#8d7aac;margin-top:4px}.numberline-tick.marked .numberline-dot{background:#ff5d8f;transform:scale(1.6)}.numberline-tick.from .numberline-number,.numberline-tick.to .numberline-number{color:#e64d8d;font-weight:900}#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9990}#toast{position:fixed;left:50%;top:calc(var(--header-height) + 14px);transform:translate(-50%,-18px);display:flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;background:#2b1950f0;color:#fff;font-size:15px;font-weight:800;box-shadow:0 16px 40px #14083259;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;z-index:10000;max-width:88vw}#toast.show{opacity:1;transform:translate(-50%)}.toast-emoji{font-size:21px}@keyframes slow-zoom{0%{transform:scale(1.04) translateY(0)}to{transform:scale(1.12) translateY(-1.5%)}}@keyframes glow-pulse{0%{transform:scale(1);opacity:.75}to{transform:scale(1.12);opacity:1}}@keyframes button-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes shine-sweep{0%,55%{left:-30%;opacity:0}65%{opacity:.7}to{left:120%;opacity:0}}@keyframes mascot-float{0%,to{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-12px) rotate(1.5deg)}}@keyframes bubble-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes symbol-float{0%,to{transform:translateY(0) rotate(-6deg);opacity:.4}50%{transform:translateY(-20px) rotate(8deg);opacity:.85}}@keyframes twinkle{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.88)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes card-in{0%{opacity:0;transform:translateY(26px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes visual-in{0%{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes hint-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@keyframes chip-pop{0%{opacity:0;transform:scale(.3) rotate(-12deg)}70%{transform:scale(1.14) rotate(3deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes option-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes correct-pop{0%{transform:scale(1)}45%{transform:scale(1.06)}to{transform:scale(1)}}@keyframes reveal-pulse{0%{box-shadow:0 7px #63cf8b,0 0 0 3px #39b86a26}to{box-shadow:0 7px #63cf8b,0 0 0 9px #39b86a47}}@keyframes feedback-pop{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-7px) rotate(-1deg)}40%{transform:translate(7px) rotate(1deg)}60%{transform:translate(-5px)}80%{transform:translate(5px)}}@keyframes move-pulse{0%,to{transform:scale(1);filter:drop-shadow(0 0 2px #ff9f43)}50%{transform:scale(1.14);filter:drop-shadow(0 0 9px #ff9f43)}}@media(max-width:980px){.home-content{width:min(720px,92vw);margin-left:5vw}.home-mascot{width:180px;right:3vw;bottom:3vh;opacity:.96}.mascot-bubble{display:none}.level-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.map-header{grid-template-columns:auto 1fr}.map-summary{grid-column:1 / -1;flex-direction:row;justify-content:space-between;align-items:center}.buddy{display:none}}@media(max-width:680px){:root{--header-height: 64px}.brand-sub{display:none}.bar-btn{width:42px;height:42px;border-radius:14px;font-size:20px}.home-content{padding-top:calc(var(--header-height) + 10px);margin-left:0;width:100%;padding-left:22px;padding-right:22px}.home-mascot{display:none}.home-view:before{background:linear-gradient(to bottom,#1b0f36b8,#1b0f366b 50%,#1b0f36db)}.home-stats{gap:7px}.stat-chip{padding:8px 12px;font-size:12px}.start-adventure{width:100%;justify-content:center;padding:18px 24px}.how-btn,.continue-btn{width:100%}.map-view{padding-top:18px}.map-heading h1{font-size:32px}.map-heading p{font-size:13px}.island-header{flex-direction:column;padding:20px 18px 14px}.island-planet{width:60px;height:60px}.island-progress-pill{flex-direction:row;align-items:center;gap:10px}.level-grid{padding:0 14px 18px;gap:10px}.level-card{padding:14px 8px 12px;border-radius:20px}.level-emoji{font-size:34px}.level-title{font-size:15px}.level-skill{font-size:10.5px;min-height:28px}.map-footer{flex-direction:column;text-align:center}.question-card{border-radius:28px}.visual-zone{min-height:190px;padding:12px}.answer-grid{gap:10px}.answer-btn{min-height:74px;border-radius:19px;padding:10px 12px}.answer-index{width:20px;height:20px;font-size:10px;top:6px;left:8px}.answer-btn.correct:after,.answer-btn.wrong:after{right:8px;font-size:20px}.hint-top{padding:9px 14px;font-size:13px}.progress-label{font-size:13px}.intro-card,.result-card{border-radius:30px;padding:26px 20px}.intro-card .round-back{top:10px;left:10px}.double-ten .ten-frame{width:min(220px,42vw)}.mini-frame,.breakten-ten{width:min(200px,42vw)}.compare-column{min-width:0;padding:8px}.compare-chips{max-width:100%}.bond-parts{gap:28px}.baseten-board{gap:10px}.baseten-column{min-width:110px;padding:10px}.coin{width:60px;height:60px}.coin-1{width:48px;height:48px}.coin-5{width:53px;height:53px}.coin-50{width:68px;height:68px}.ruler-wrap{--cell: 34px}.ruler-object{font-size:27px;height:46px}.ruler-stage{padding-top:48px}.ruler{height:48px}.ruler-parts{gap:10px}.ruler-piece{padding:8px 9px;border-radius:15px}.ruler-mini{padding-top:40px}.ruler-mini .ruler-object{height:34px;font-size:21px}.ruler-mini-ruler{height:34px}.scene-group{padding:8px 9px;min-width:52px}.scene-group-items{max-width:min(240px,70vw)}.countboard-slot{width:clamp(16px,4.4vw,22px);height:clamp(16px,4.4vw,22px);font-size:clamp(11px,3.2vw,16px)}.queue-items{max-width:min(190px,46vw)}.toast{font-size:13px}}@media(max-width:420px){.title-bottom{font-size:62px}.title-top{font-size:42px}.subtitle{font-size:14px}.level-card .level-skill{display:none}.level-card{padding:12px 6px 10px}.level-title{font-size:13.5px}.level-emoji{font-size:30px}.question-prompt{font-size:21px}.answer-btn{font-size:22px}.answer-emoji{font-size:1em}.compare-board{gap:6px}.ordinal-line{gap:4px;padding:8px}.ordinal-item{padding:4px 2px}.visual-caption{font-size:11px}.data-table th,.data-table td{padding:8px 9px}.calendar-card{padding:10px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@font-face{font-family:Bpmf Huninn;src:url(../assets/fonts/BpmfHuninn-Regular.woff2) format("woff2");font-weight:100 900;font-display:swap}.zhuyin-switch{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:8px 12px;border-radius:16px;background:#fffdf8;color:var(--ink);box-shadow:var(--shadow-sm);font-size:16px;font-weight:700;cursor:pointer;white-space:nowrap}.zhuyin-switch input{appearance:none;width:38px;height:24px;margin:0;border:2px solid #897b9f;border-radius:20px;background:#e9e3f2;cursor:pointer}.zhuyin-switch input:before{content:"";display:block;width:16px;height:16px;margin:2px;border-radius:50%;background:#64548a}.zhuyin-switch input:checked{background:#c7f5db;border-color:#239b52}.zhuyin-switch input:checked:before{transform:translate(14px);background:#239b52}.zhuyin-switch input:focus-visible{outline:4px solid #2f7df6;outline-offset:4px}.zhuyin-switch input:disabled{opacity:.55;cursor:wait}#screen-level.zhuyin-enabled{--font-body: "Bpmf Huninn", "Noto Sans TC", sans-serif;--font-display: "Bpmf Huninn", "Noto Sans TC", sans-serif;font-family:var(--font-body)}.zhuyin-enabled .question-prompt,.zhuyin-enabled .intro-text,.zhuyin-enabled .hint-box p,.zhuyin-enabled .feedback{line-height:1.85;overflow-wrap:anywhere}.zhuyin-enabled .intro-card h1{line-height:1.5}.zhuyin-enabled .big-btn,.zhuyin-enabled .next-inline{white-space:normal}@media(max-width:680px){#global-bar{gap:8px;padding-inline:12px}.bar-actions{gap:6px}.zhuyin-switch{min-height:42px;padding:6px 8px;gap:5px;font-size:14px}}@media(max-width:420px){.brand{font-size:15px;gap:3px}.brand-star{display:none}.bar-actions .bar-btn{width:36px}.zhuyin-switch{padding-inline:6px}}.lb-overlay{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:16px;background:#1f14379e;backdrop-filter:blur(6px)}.lb-card{width:min(640px,100%);max-height:min(90vh,780px);overflow:auto;background:var(--paper);color:var(--ink);border-radius:28px;box-shadow:var(--shadow-lg);padding:22px}.lb-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.lb-head h2{margin:0;font-family:var(--font-display);font-size:clamp(20px,4vw,26px)}.lb-close{width:40px;height:40px;border:0;border-radius:999px;background:#33245a14;color:var(--ink);font-size:18px;cursor:pointer}.lb-close:hover{background:#33245a29}.lb-note{margin:8px 0 14px;color:var(--ink-soft);font-size:13px;line-height:1.6}.lb-tabs{display:flex;gap:8px;flex-wrap:wrap}.lb-tab{border:2px solid rgba(139,92,246,.22);background:#fff;color:var(--ink);border-radius:999px;padding:8px 18px;font:inherit;font-weight:800;cursor:pointer}.lb-tab.is-active{background:var(--purple);border-color:var(--purple);color:#fff}.lb-list{list-style:none;margin:14px 0;padding:0;display:grid;gap:6px}.lb-row{display:grid;grid-template-columns:34px 34px minmax(0,1fr) auto;grid-template-areas:"rank avatar name score" "rank avatar detail detail";align-items:center;gap:2px 10px;padding:9px 12px;border:2px solid transparent;border-radius:14px;background:#ffffffb8}.lb-row.is-me{background:#fff4c2;border-color:#f0c419}.lb-rank{grid-area:rank;font-weight:900;font-size:18px;text-align:center}.lb-avatar{grid-area:avatar;font-size:22px;line-height:1;text-align:center}.lb-name{grid-area:name;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-score{grid-area:score;font-weight:800;color:var(--orange)}.lb-detail{grid-area:detail;font-size:12px;color:var(--ink-soft)}.lb-empty{padding:22px 12px;text-align:center;color:var(--ink-soft);font-size:14px}.lb-profile{display:grid;gap:10px;margin-top:8px;padding-top:16px;border-top:2px dashed rgba(51,36,90,.14)}.lb-profile h3{margin:0;font-size:16px}.lb-me{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.lb-me-name{font-weight:900;flex:1 1 140px}.lb-me .lb-avatar{font-size:30px}.lb-field{display:grid;gap:6px;font-size:13px;font-weight:700;color:var(--ink-soft)}.lb-field input{width:100%;box-sizing:border-box;border:2px solid rgba(51,36,90,.16);border-radius:12px;padding:10px 12px;font:inherit;color:var(--ink);background:#fff}.lb-field input:focus{outline:3px solid rgba(90,169,255,.35)}.lb-save{justify-self:start;border:0;border-radius:999px;padding:9px 18px;background:var(--mint);color:#063b36;font:inherit;font-weight:900;cursor:pointer}.lb-save:disabled{opacity:.55;cursor:wait}.lb-check{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.5}.lb-check input{width:18px;height:18px}.lb-delete{justify-self:start;border:0;background:none;padding:0;color:var(--red);font:inherit;font-size:13px;font-weight:800;text-decoration:underline;cursor:pointer}.lb-fineprint{margin:0;color:var(--ink-soft);font-size:11px}.map-board{align-self:flex-start}@media(max-width:640px){.lb-card{padding:18px;border-radius:22px}.lb-row{grid-template-columns:30px 30px minmax(0,1fr) auto}.lb-detail{font-size:11px}}.lb-enable-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.profile-preview{display:grid;place-items:center;width:112px;height:112px;margin:6px auto 12px;border-radius:999px;background:linear-gradient(145deg,#fff8d6,#ffe9f3);border:3px solid rgba(139,92,246,.18);font-size:64px;line-height:1;box-shadow:var(--shadow-md)}.profile-avatars{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px;margin-bottom:10px}.profile-avatar-btn{border:2px solid rgba(51,36,90,.12);border-radius:14px;background:#fff;font-size:28px;line-height:1;padding:8px 0;cursor:pointer;transition:transform .12s ease,border-color .12s ease}.profile-avatar-btn:hover{transform:translateY(-2px)}.profile-avatar-btn.is-selected{border-color:var(--purple);background:#f3ecff;box-shadow:0 0 0 3px #8b5cf62e}.profile-random{margin-bottom:12px}.profile-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}@media(max-width:640px){.profile-preview{width:92px;height:92px;font-size:52px}}.theme-rainbow{--theme-bg: #fff5fb;--theme-accent: #d946ef;--theme-glow: rgba(217, 70, 239, .22);--theme-glow2: rgba(90, 169, 255, .22)}.island-rainbow{background:linear-gradient(135deg,#8b5cf6,#ff6fa5 45%,#ffd93d)}.hundred-wrap{width:100%;overflow-x:auto;padding-bottom:4px}.hundred-grid{display:grid;grid-template-columns:repeat(10,minmax(26px,1fr));gap:3px;max-width:560px;margin:0 auto}.hundred-cell{aspect-ratio:1;display:grid;place-items:center;background:#fff;border:1px solid rgba(51,36,90,.08);border-radius:7px;color:var(--ink-soft);font-size:clamp(9px,2.1vw,14px);font-weight:700}.hundred-cell.is-marked{background:#fff0b8;border-color:#f0c419;color:var(--ink)}.hundred-cell.is-hidden{background:var(--purple);border-color:var(--purple);color:#fff}.length-wrap{width:100%}.length-board{display:grid;gap:10px;width:100%;max-width:620px;margin:0 auto}.length-row{display:grid;grid-template-columns:minmax(70px,110px) minmax(0,1fr) 46px;gap:8px;align-items:center}.length-label{font-size:13px;font-weight:800;white-space:nowrap}.length-track{width:100%;height:24px;border-radius:8px;background-color:#33245a0a;background-image:repeating-linear-gradient(90deg,rgba(51,36,90,.12) 0 1px,transparent 1px 10%);overflow:hidden}.length-bar{height:100%;border-radius:8px;min-width:4px;box-shadow:inset 0 -3px #00000014}.length-value{font-size:12px;font-weight:800;color:var(--ink-soft)}.shapesort-wrap{display:grid;gap:10px;justify-items:center}.shape-bins{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.shape-bin{border:2px dashed rgba(139,92,246,.35);border-radius:12px;padding:8px 14px;font-size:13px;font-weight:800;background:#8b5cf60f}.compose-wrap,.solid-wrap{display:grid;justify-items:center}.solid-wrap svg,.compose-wrap svg,.shapesort-wrap svg{max-width:320px;width:100%;height:auto}.moneypay-wrap{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}.moneypay-item{display:grid;justify-items:center;gap:4px;padding:12px 16px;border-radius:16px;background:#fff;border:2px solid rgba(51,36,90,.1);min-width:110px}.moneypay-emoji{font-size:38px;line-height:1}.moneypay-name{font-size:13px;font-weight:800}.moneypay-price{font-size:20px;font-weight:900;color:var(--orange)}.moneypay-paid{display:flex;align-items:center;gap:6px}.moneypay-caption{font-size:13px;font-weight:800;color:var(--ink-soft)}.money-coin{width:54px;height:54px;border-radius:999px;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#fff3b0,#ffd93d 65%,#d4a100);border:3px solid #c99b00;color:#5a3d00;font-weight:900;font-size:16px;box-shadow:var(--shadow-sm)}.tally-wrap{display:grid;gap:10px;max-width:560px;margin:0 auto}.tally-row{display:grid;grid-template-columns:minmax(80px,150px) 1fr;gap:10px;align-items:center}.tally-label{font-size:13px;font-weight:800}.tally-marks{display:flex;gap:8px;flex-wrap:wrap}.tally-group{display:flex;gap:4px;padding:4px 6px;border-radius:8px;background:#5aa9ff1a}.tally-mark{width:6px;height:26px;border-radius:3px;background:var(--blue)}.barchart-wrap{width:100%}.barchart{display:flex;align-items:flex-end;justify-content:center;gap:12px;height:180px;max-width:560px;margin:0 auto;padding:10px;border-bottom:2px solid rgba(51,36,90,.15)}.barchart-column{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%;flex:0 0 64px;max-width:64px}.barchart-track{width:64px;height:100%;display:flex;align-items:flex-end;background:#33245a0a;border-radius:8px}.barchart-bar{width:100%;border-radius:8px 8px 0 0;min-height:4px}.barchart-label{font-size:12px;font-weight:800;color:var(--ink-soft);white-space:nowrap}@media(max-width:520px){.length-row{grid-template-columns:70px minmax(0,1fr)}.length-value{display:none}.barchart{gap:6px;height:150px}.barchart-column{flex-basis:52px;max-width:52px}.barchart-track{width:52px}}.app-actions{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}.app-btn{border:2px solid rgba(51,36,90,.14);background:#ffffffe0;color:var(--ink);border-radius:999px;padding:8px 14px;font:inherit;font-size:13px;font-weight:800;cursor:pointer;box-shadow:var(--shadow-sm)}.app-btn:hover{background:#fff}.app-btn[hidden]{display:none}.pwa-card{max-width:480px}.pwa-progress{height:14px;border-radius:999px;background:#33245a14;overflow:hidden;margin:16px 0 8px}.pwa-progress-bar{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#ffd93d,#ff9f43,#ff6fa5);transition:width .18s linear}.pwa-progress-text{margin:0;text-align:center;font-size:13px;color:var(--ink-soft)}.theme-sunrise{--theme-bg: #fffbea;--theme-accent: #f59e0b;--theme-glow: rgba(255, 216, 77, .3);--theme-glow2: rgba(126, 224, 143, .24)}.island-sunrise{background:linear-gradient(135deg,#ffd93d,#ff9f43 55%,#7ee08f)}.pattern-wrap{width:100%}.pattern-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.pattern-chip{min-width:52px;height:52px;padding:0 10px;display:grid;place-items:center;border-radius:14px;background:#fff;border:2px solid rgba(51,36,90,.1);font-size:26px;font-weight:900;box-shadow:var(--shadow-sm)}.pattern-chip.is-blank{background:var(--purple);color:#fff;border-color:var(--purple)}.position-wrap{display:grid;justify-items:center}.position-grid{display:grid;gap:6px;width:min(360px,100%);padding:10px;border-radius:18px;background:#ffffffb8;border:2px solid rgba(51,36,90,.1)}.position-cell{min-height:72px;display:grid;place-items:center;border-radius:12px;background:repeating-linear-gradient(45deg,rgba(90,169,255,.08) 0 8px,transparent 8px 16px)}.position-emoji{font-size:34px;line-height:1}.position-label{font-size:10px;color:var(--ink-soft)}.capacity-wrap{width:100%}.capacity-row{display:flex;justify-content:center;align-items:flex-end;gap:22px;flex-wrap:wrap}.capacity-cup-wrap{display:grid;justify-items:center;gap:6px}.capacity-cup{width:90px;height:130px;border:4px solid #9bd2ff;border-top:0;border-radius:0 0 22px 22px;overflow:hidden;display:flex;align-items:flex-end;background:#ffffff80;box-shadow:inset 0 0 0 2px #fff9}.capacity-liquid{width:100%;border-radius:0 0 16px 16px;transition:height .3s ease}.capacity-label{font-size:13px;font-weight:800}.weight-wrap{display:grid;justify-items:center}.weight-svg{width:min(360px,100%);height:auto}.cm-wrap{width:100%;max-width:620px;margin:0 auto;--cm: clamp(18px, 4.2vw, 32px)}.cm-object{height:44px;margin-left:0;display:flex;align-items:center;justify-content:flex-end;padding-right:4px;font-size:30px;border-radius:10px;background:linear-gradient(180deg,#fff3b0,#ffd93d);border:2px solid #c99b00;box-sizing:border-box;max-width:100%}.cm-ruler{display:flex;border:2px solid #c99b00;border-radius:8px;overflow:hidden;background:#fff8c9}.cm-cell{width:var(--cm);flex:0 0 var(--cm);height:38px;border-right:1px solid rgba(90,61,0,.35);position:relative}.cm-cell:before{content:"";position:absolute;left:50%;bottom:0;width:1px;height:10px;background:#5a3d0059}.cm-number{position:absolute;bottom:12px;left:50%;transform:translate(-50%);font-size:9px;font-weight:800;color:#6b4b00}.hmath-wrap{display:grid;justify-items:center;gap:8px}.hmath-line{display:flex;align-items:center;gap:10px;font-size:clamp(34px,8vw,54px);font-weight:900;color:var(--ink)}.hmath-op{color:var(--purple)}.hmath-part.is-blank{min-width:56px;padding:2px 12px;border-radius:12px;background:#f3ecff;border:3px dashed var(--purple);text-align:center}@media(max-width:520px){.capacity-cup{width:70px;height:108px}.pattern-chip{min-width:44px;height:44px;font-size:22px}}.space-home .home-backdrop{filter:saturate(1.22) brightness(.9)}.space-home .home-glow{background:radial-gradient(circle,rgba(90,169,255,.38),rgba(139,92,246,.18) 45%,transparent 66%)}.space-home .eyebrow{background:#5aa9ff29;border-color:#7ef0ff8c;color:#c9f6ff}.space-home .start-adventure{color:#0e1745;background:linear-gradient(135deg,#7ef0ff,#5aa9ff 32%,#8b5cf6 70%,#ff6fa5);box-shadow:0 12px #3b2a8a,0 26px 48px #5b50ff73}.space-home .start-adventure:hover{box-shadow:0 15px #3b2a8a,0 30px 54px #5b50ff85}.space-home .start-adventure:active{box-shadow:0 5px #3b2a8a,0 16px 26px #5b50ff4d}.space-home .stat-chip{background:#0e144657;border-color:#7ef0ff3d}.space-home .floating-symbols span{font-size:18px;opacity:.75;filter:drop-shadow(0 4px 10px rgba(90,169,255,.45))}