:root { --ink:#3b3152; --ink-soft:#655a79; --purple:#7259aa; --pink:#f0a5b5; --cream:#fff8ea; --gold:#e6b35a; --outline:#d6c8df; }
* { box-sizing:border-box; }
html { min-height:100%; }
body { margin:0; min-height:100vh; color:var(--ink); font-family:"Trebuchet MS", "Avenir Next", "Arial Rounded MT Bold", system-ui, sans-serif; background:radial-gradient(ellipse at 10% 22%, #f9dfe8 0,transparent 34%),radial-gradient(ellipse at 86% 12%, #d9d0f9 0,transparent 31%),linear-gradient(140deg,#f9f1ff,#f7f0e8 72%,#e9f4f3); overflow-x:hidden; }
button { font:inherit; cursor:pointer; }
button:focus-visible, a:focus-visible { outline:4px solid #d89643; outline-offset:3px; }
button:disabled { cursor:not-allowed; opacity:.5; }
[hidden] { display:none !important; }
.site-wrap { max-width:1410px; padding:22px 30px 20px; margin:0 auto; position:relative; z-index:1; }
.sky-decor { position:fixed; color:#fff; font-size:80px; opacity:.8; z-index:0; pointer-events:none; text-shadow:0 0 26px #dfc7fb; }
.decor-one { top:13%; left:2%; transform:rotate(-10deg); }
.decor-two { top:52%; right:1%; color:#fde5a7; font-size:65px; }
.decor-three { bottom:8%; left:4%; font-size:38px; }
.site-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.brand-link { color:#796091; text-decoration:none; font-size:11px; font-weight:900; letter-spacing:2.05px; display:inline-flex; gap:10px; align-items:center; }
.tiny-castle { color:#ac7bb4; font-size:23px; }
.header-actions { display:flex; gap:22px; align-items:center; }
.edition-label { color:#9b89b0; letter-spacing:2.1px; font-size:10px; font-weight:900; }
.sound-toggle { border:1.5px solid #d8c6dd; background:rgba(255,255,255,.73); border-radius:50px; color:#7c638e; padding:9px 15px; font-size:13px; font-weight:800; box-shadow:0 4px 0 #e8ddea; }
.sound-toggle:hover { background:#fff; }
.customize-toggle { background:#fff1d5; border-color:#edcca7; color:#8e618f; }
.customize-toggle span { border-radius:20px; background:#dc98bb; color:white; padding:2px 7px; font-size:11px; margin-left:3px; }
.hero-heading { text-align:center; position:relative; padding:12px 0 7px; }
.heading-star { position:absolute; left:19%; top:30px; color:#ddbf67; font-size:37px; transform:rotate(-18deg); }
.eyebrow { font-weight:900; letter-spacing:3.5px; font-size:11px; color:#b390ba; margin:5px 0 3px; }
h1 { font-family:Georgia,"Palatino Linotype",serif; font-size:clamp(38px,4.6vw,62px); letter-spacing:-2.2px; line-height:1.08; margin:0; color:#544078; text-shadow:0 4px #fff6fc; }
h1 span:first-child { color:#c87a9b; font-style:italic; }
.title-spark { font-size:29px; vertical-align:top; display:inline-block; color:#f1c16b; margin-left:3px; animation:twinkle 3s ease-in-out infinite; }
.hero-subtitle { color:#766983; margin:9px auto 10px; font-size:14px; font-weight:600; }
.level-nav { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin:8px 0 17px; }
.level-pill { display:flex; gap:9px; align-items:center; background:rgba(255,255,255,.60); border:1.5px solid #e5dbe9; color:#877591; border-radius:20px; padding:8px 13px 8px 8px; box-shadow:0 3px 0 #e9e0e7; font-size:12px; font-weight:900; white-space:nowrap; transition:transform .15s,background .15s; }
.level-pill:hover { transform:translateY(-2px); background:#fff; }
.level-pill.active { border-color:#bd91bb; background:#fff; color:#614a84; box-shadow:0 4px 0 #e9cde2; }
.level-number { background:var(--level-color); color:#5e5271; border-radius:50%; width:25px; height:25px; display:grid; place-items:center; border:1.5px solid rgba(255,255,255,.8); }
.game-layout { display:grid; grid-template-columns: minmax(300px, .92fr) minmax(0,1.7fr); gap:19px; align-items:stretch; }
.crew-panel, .board-panel { border:2px solid rgba(255,255,255,.88); border-radius:27px; box-shadow:0 12px 35px rgba(112,81,133,.13),0 4px 0 rgba(176,145,178,.19); }
.crew-panel { background:rgba(255,250,255,.86); padding:22px 21px 17px; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; }
.section-kicker { color:#c08eaa; font-size:10px; font-weight:900; letter-spacing:2px; margin:0 0 2px; }
.panel-heading h2 { font-family:Georgia,serif; font-size:27px; color:#5c4781; margin:0; font-style:italic; letter-spacing:-.6px; }
.flower-sticker { font-size:35px; color:#efbb78; transform:rotate(18deg); text-shadow:0 3px 0 #fff; }
.crew-description { font-size:12px; color:#93859c; margin:7px 0 16px; }
.crew-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.hero-card { background:var(--card-bg); color:var(--ink); position:relative; border:2px solid rgba(255,255,255,.98); min-height:238px; border-radius:23px; padding:9px 7px 12px; box-shadow:0 6px 0 var(--card-shadow), 0 8px 18px rgba(93,59,120,.08); transition:transform .18s,box-shadow .18s; display:flex; flex-direction:column; align-items:center; overflow:hidden; }
.hero-card:hover:not(:disabled) { transform:translateY(-4px) rotate(-1deg); box-shadow:0 9px 0 var(--card-shadow),0 12px 18px rgba(93,59,120,.10); }
.hero-card:active:not(:disabled) { transform:translateY(3px); box-shadow:0 2px 0 var(--card-shadow); }
.hero-card::before { content:'✦'; position:absolute; left:12px; top:9px; font-size:18px; opacity:.8; color:var(--accent); }
.hero-card::after { content:'✦'; position:absolute; right:11px; top:20px; font-size:9px; opacity:.65; color:var(--accent); }
.avatar-box { position:relative; width:100%; height:142px; display:flex; align-items:end; justify-content:center; }
.avatar-box::before { content:''; position:absolute; width:108px; height:108px; border-radius:50%; background:rgba(255,255,255,.55); top:12px; box-shadow:inset 0 0 18px rgba(255,255,255,.8); }
.character-svg { width:124px; height:145px; overflow:visible; position:relative; filter:drop-shadow(0 5px 1px rgba(95,63,108,.13)); animation:idle-bob 3s ease-in-out infinite; }
.hero-card:nth-child(2) .character-svg { animation-delay:-.8s; }
.hero-card:nth-child(3) .character-svg { animation-delay:-1.3s; }
.hero-card:nth-child(4) .character-svg { animation-delay:-2.3s; }
.hero-name { display:block; text-align:center; font-family:Georgia,serif; font-size:17px; font-weight:800; line-height:1.05; margin:5px 0 5px; color:var(--name-color); }
.hero-name .small-name { display:block; font-size:14px; font-style:italic; }
.hero-power { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.9px; font-weight:900; color:var(--accent); }
.crew-footnote { text-align:center; font-size:11px; font-weight:bold; color:#a89bad; margin-top:18px; }
.crew-footnote span { color:#dfb468; }
.board-panel { background:rgba(255,255,255,.74); padding:17px; min-width:0; }
.board-topline { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 4px 13px; }
.quest-label { font-size:12px; font-weight:900; color:#795f94; }
.quest-icon { display:inline-grid; place-items:center; background:#fae6bd; border-radius:50%; height:25px; width:25px; color:#a67568; margin-right:5px; }
.mini-progress { display:flex; align-items:center; gap:8px; color:#9b91a4; font-size:11px; font-weight:900; white-space:nowrap; }
.progress-dots { display:flex; gap:4px; }
.progress-dots i { width:8px; height:8px; background:#e7dbe9; border-radius:50%; }
.progress-dots i.done { background:#dfb776; }
.progress-dots i.now { background:#ad89c4; box-shadow:0 0 0 2px #f3e4fa; }
.parchment { min-height:355px; position:relative; padding:30px 28px 25px; border:2px solid #e5d4b6; border-radius:20px; background:radial-gradient(circle at 30% 10%,rgba(255,255,255,.98),transparent 55%),linear-gradient(135deg,#fffaf1,#fff4df 55%,#fff8ec); box-shadow:inset 0 0 28px rgba(192,160,107,.12),0 5px 0 #eedfc9; }
.parchment-corner { color:#d6bd92; position:absolute; font-size:19px; }
.top-left { left:13px; top:9px; }.top-right { right:13px; top:9px; }.bottom-left { left:13px; bottom:9px; }.bottom-right { right:13px; bottom:9px; }
.board-inner { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:285px; }
.board-pretitle { font-weight:900; color:#bea27d; letter-spacing:3px; font-size:10px; margin:0 0 8px; }
#levelTitle { font-family:Georgia,serif; font-size:clamp(24px,2.45vw,34px); font-style:italic; color:#675080; line-height:1.2; margin:0; }
.level-tagline { font-size:13px; color:#9a887d; margin:5px 0 19px; }
.equation-stage { min-height:91px; display:flex; align-items:center; justify-content:center; max-width:100%; width:100%; padding:0 5px; }
.equation { position:relative; font-family:Georgia, "Times New Roman", serif; color:#463561; font-weight:700; letter-spacing:-.45px; font-size:clamp(24px,2.65vw,38px); line-height:1.5; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; max-width:100%; transition:filter .3s,opacity .3s; }
.eq-side { display:inline-flex; align-items:center; justify-content:center; gap:2px; flex-wrap:wrap; }
.eq-equals { color:#bd8a99; font-size:1.25em; font-weight:400; padding:0 5px; }
.term-piece { display:inline-flex; align-items:center; white-space:nowrap; gap:4px; }
.term-sign { color:#a57993; }
.math-term { display:inline-flex; align-items:center; white-space:nowrap; padding:0 2px; border-radius:8px; }
.math-term.spell-pulse, .eq-side.spell-pulse, .eq-equals.spell-pulse { color:#a65492; background:#ffe39c; font-weight:900; animation:math-shake .15s linear infinite alternate; box-shadow:0 0 0 5px rgba(255,217,115,.34); z-index:1; }
.eq-side.spell-pulse { padding:3px 7px; }
.equation.dissolving { opacity:.12; filter:blur(6px); transform:scale(1.035); }
.equation.appearing { animation:equation-appear .55s cubic-bezier(.22,.75,.3,1.25); }
.operation-preview { gap:11px; }
.operation-side { display:inline-flex; align-items:center; gap:7px; flex-wrap:wrap; justify-content:center; }
.preview-bracket { display:inline-flex; align-items:center; flex-wrap:wrap; font-size:.84em; }
.operation-tag { display:inline-block; color:#a75c98; background:#ffe2a8; border:2px solid #e9b6aa; padding:1px 8px; border-radius:13px; font-family:"Trebuchet MS",sans-serif; font-size:.53em; white-space:nowrap; transform:rotate(-3deg); }
.math-term.cancelled { animation:term-cancel .5s ease-in forwards; background:#ffdf95; }
.math-term.merging,.operation-tag.merging { animation:term-merge .5s ease-in forwards; background:#f8d4ee; }
.term-piece.gather-target { background:#ffe4a4; color:#9150a0; border-radius:13px; box-shadow:0 0 0 5px rgba(244,191,87,.25),0 3px 10px rgba(147,85,151,.15); position:relative; z-index:3; animation:gather-glow .25s ease-in-out infinite alternate; }
.term-piece.gather-target .math-term { font-weight:900; color:#8f4588; }
.term-piece.gather-vanish { animation:gather-away .85s ease-out forwards; }
.operation-preview .operation-highlight { background:#ffe49b; border-radius:12px; box-shadow:0 0 0 4px rgba(244,187,90,.3); animation:gather-glow .25s ease-in-out infinite alternate; }
.combine-poof { position:absolute; z-index:70; transform:translate(-50%,-50%); pointer-events:none; color:#8150a9; display:flex; flex-direction:column; align-items:center; min-width:80px; text-align:center; filter:drop-shadow(0 3px 9px #fff); animation:poof-appear 1s cubic-bezier(.22,.8,.38,1) forwards; }
.poof-result { font:bold 32px Georgia,serif; background:#fff5ca; padding:0 12px; border:3px solid #e8b96d; border-radius:16px; white-space:nowrap; }
.poof-stars { font:29px Georgia,serif; color:#d792a6; white-space:nowrap; }
@keyframes gather-glow { from { box-shadow:0 0 0 4px rgba(244,191,87,.19); } to { box-shadow:0 0 0 8px rgba(244,191,87,.37); } }
@keyframes gather-away { 0% { opacity:1; filter:blur(0); } 25% { opacity:1; filter:blur(1px); } 100% { opacity:0; filter:blur(8px); } }
@keyframes poof-appear { 0% { transform:translate(-50%,-50%) scale(.13) rotate(-15deg); opacity:0; } 24% { transform:translate(-50%,-50%) scale(1.38) rotate(5deg); opacity:1; } 58% { transform:translate(-50%,-50%) scale(1) rotate(-2deg); opacity:1; } 100% { transform:translate(-50%,-50%) scale(1.08); opacity:0; } }
@keyframes term-cancel { 0% { transform:scale(1); opacity:1; } 35% { transform:scale(1.42) rotate(-7deg); color:#d66f91; opacity:1; } 100% { transform:scale(.08) rotate(24deg); opacity:0; } }
@keyframes term-merge { 0% { transform:scale(1); } 45% { transform:scale(1.28) rotate(4deg); color:#a65cbb; } 100% { transform:scale(.84); opacity:.16; } }
.fraction { display:inline-flex; flex-direction:column; vertical-align:middle; align-items:center; line-height:.86; font-size:.66em; margin:0 2px; }
.fraction .numerator { border-bottom:1.5px solid currentColor; padding:0 3px 2px; }
.fraction .denominator { padding-top:3px; }
.equation-underline { display:flex; align-items:center; justify-content:center; color:#e4bb82; width:65%; margin:10px 0 12px; gap:14px; }
.equation-underline::before,.equation-underline::after { content:''; flex:1; height:1px; background:#e9d5b5; }
.guide-text { margin:0; min-height:21px; font-size:12px; font-weight:800; color:#8d779c; }
.action-panel { background:#f6eefb; border:1.5px solid #e5d4ef; margin-top:14px; border-radius:19px; padding:15px 16px; box-shadow:0 3px 0 #eadced; animation:slide-up .25s ease-out; }
.action-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:5px; }
.action-title { margin:0; font-size:15px; font-family:Georgia,serif; color:#624c80; }
.action-subtitle { font-size:12px; margin:0 0 11px; color:#8d7f9e; }
.choice-wrap { display:flex; flex-wrap:wrap; gap:8px; }
.move-option { background:#fff; color:#615279; border:1.5px solid #d7c7e1; border-radius:12px; font-size:13px; font-weight:900; padding:10px 12px; box-shadow:0 3px 0 #e0d4e6; }
.move-option:hover { border-color:#be9fd1; background:#fff9da; transform:translateY(-1px); }
.close-choice { background:transparent; color:#9484a3; border:0; font-size:22px; padding:0 3px; }
.board-bottom { display:flex; justify-content:space-between; gap:12px; align-items:center; margin:18px 3px 13px; }
.board-tools { display:flex; gap:8px; flex-wrap:wrap; }
.tool-button { border:1.5px solid #e1d5e5; border-radius:12px; padding:9px 13px; color:#79658b; background:#fff; font-size:12px; font-weight:900; box-shadow:0 3px 0 #eae3ed; }
.tool-button:hover { background:#faf1ff; }
.move-count { font-size:12px; color:#9587a3; font-weight:800; white-space:nowrap; }
.steps-medal { color:#e7b868; font-size:19px; }
.story-strip { background:#fdf1f3; border-radius:14px; min-height:72px; display:flex; align-items:center; gap:12px; padding:16px 18px; border:1px solid #f5e1e8; }
.story-icon { font-size:23px; }
.story-strip p { color:#65455f; font-size:18px; font-weight:bold; margin:0; line-height:1.45; }
.story-strip.misstep { background:#fff0c9; border:3px solid #d38d35; box-shadow:0 4px 12px rgba(138,74,35,.15); }
.story-strip.misstep p { color:#622c21; font-size:20px; font-weight:900; }
.story-strip.detour { background:#e9f4ff; border:2px solid #79a8d8; }
.story-strip.detour p { color:#214e75; font-weight:900; }
.site-footer { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:10px; color:#ac9baa; padding:18px 4px 2px; letter-spacing:.2px; }
.return-home-button { display:inline-flex; justify-content:center; align-items:center; gap:8px; border:2px solid #cbaed5; border-radius:18px; background:#fff9e9; color:#695183; padding:11px 16px; font-size:13px; font-weight:900; letter-spacing:0; text-decoration:none; box-shadow:0 4px 0 #e9dbea; transition:background .15s,transform .15s; }
.return-home-button:hover { background:#ffeed6; transform:translateY(-2px); }
.animation-layer { position:fixed; inset:0; pointer-events:none; z-index:60; overflow:visible; }
.flying-hero { width:132px; height:150px; position:fixed; transform-origin:center bottom; filter:drop-shadow(0 11px 10px rgba(80,48,93,.22)); }
.flying-hero .character-svg { animation:none; width:100%; height:100%; }
.rainbow-arc-overlay { position:fixed; inset:0; z-index:64; pointer-events:none; overflow:visible; filter:drop-shadow(0 2px 4px rgba(133,81,151,.35)); }
.flying-factor-badge { position:fixed; z-index:67; transform-origin:center; margin:-18px 0 0 -24px; border-radius:14px; padding:2px 10px 4px; background:#fff9db; border:3px solid #e3aedc; box-shadow:0 3px 13px rgba(89,52,121,.3); color:#804995; white-space:nowrap; display:flex; flex-direction:column; align-items:center; line-height:1.05; }
.flying-factor-badge small { font:900 9px "Trebuchet MS",sans-serif; letter-spacing:1px; }
.flying-factor-badge strong { font:900 23px Georgia,serif; }
.distribution-factor-source { background:#ffe4a4; box-shadow:0 0 0 4px #f3c46d66; border-radius:7px; color:#924f94; }
.factor-poof { animation:gather-away .6s ease-in forwards; }
.group-variable.distribution-hit,.group-constant.distribution-hit { background:#ffe4a4; border-radius:8px; color:#98499c; animation:math-shake .18s linear infinite alternate; }
.magic-ring { position:fixed; z-index:61; width:100px; height:100px; margin:-50px 0 0 -50px; border-radius:50%; border:4px dashed #f5b457; box-shadow:0 0 12px #fff; pointer-events:none; animation:ring-burst .9s ease-out forwards; }
.magic-ring::after { content:'✦ ✧ ✦'; position:absolute; inset:-25px; text-align:center; color:#df9c8b; font-size:28px; }
.modal-backdrop { position:fixed; inset:0; z-index:100; background:rgba(55,40,72,.58); backdrop-filter:blur(5px); display:flex; align-items:center; justify-content:center; padding:20px; }
.victory-card { background:linear-gradient(145deg,#fffbec,#fff4fb); border:5px solid white; border-radius:32px; box-shadow:0 30px 80px rgba(44,24,70,.35); max-width:530px; max-height:calc(100dvh - 24px); overflow-y:auto; width:100%; padding:16px 28px 24px; text-align:center; position:relative; }
.victory-confetti { color:#e6af5c; letter-spacing:26px; font-size:29px; }
.victory-avatar { height:98px; display:flex; justify-content:center; align-items:center; }
.victory-avatar .character-svg { width:95px; height:108px; }
.victory-overline { font-size:10px; letter-spacing:2.5px; font-weight:900; color:#c69ca9; margin:5px 0; }
.victory-card h2 { margin:3px 0 7px; font-family:Georgia,serif; font-size:30px; font-style:italic; color:#5f487d; }
.victory-details { margin:0 auto; color:#826e8e; font-size:14px; line-height:1.6; }
.victory-stars { margin:8px 0 12px; font-size:28px; color:#e9b359; letter-spacing:8px; text-shadow:0 3px #fff; }
.substituted-value { display:inline-block; color:#ad4b88; background:#ffeaa8; padding:0 3px; border-radius:7px; box-shadow:0 0 0 3px rgba(255,222,125,.3); animation:equation-appear .65s ease-out; }
.numeric-check { font-family:Georgia,serif; font-size:clamp(29px,3vw,38px); color:#5b4581; font-weight:bold; }
.checking-three-lines { display:flex; flex-direction:column; align-items:stretch; width:100%; gap:8px; font-size:20px; text-align:left; }
.check-row { display:flex; align-items:center; gap:15px; justify-content:space-between; background:rgba(255,255,255,.55); border:1px solid #f0dfc7; padding:7px 13px; border-radius:12px; width:100%; }
.check-row-label { color:#ac8f99; font:900 11px "Trebuchet MS",sans-serif; min-width:110px; }
.check-equation-line { display:inline-flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:5px; font-size:clamp(17px,2vw,25px); }
.check-equals { color:#be889a; padding:0 5px; }
.reveal-row { animation:slide-up .5s ease-out; }
.check-work-line+.check-work-line { border-top:1px dashed #e9daba; margin-top:5px; padding-top:5px; }
.numeric-check .true-equals { color:#4c9e83; }
.numeric-check .false-equals { color:#d47785; }
.special-statement { border:1px solid #dfc4e7; background:#fff9e7; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; font-family:Georgia,serif; color:#5c4382; font-weight:bold; font-size:28px; padding:8px; margin:7px 0 13px; }
.special-statement small { color:#a58caa; font-family:inherit; font-size:12px; font-style:italic; }
.check-work { border:1px solid #e7d5af; border-radius:15px; padding:9px 12px; background:#fff8e8; color:#705587; margin-top:11px; }
.check-work-label { font-size:10px; font-weight:900; letter-spacing:1.5px; color:#b19a74; margin-bottom:5px; }
.check-work-line { font-family:Georgia,serif; font-size:17px; font-weight:bold; overflow-wrap:anywhere; }
.check-work-result { color:#43836f; font-size:15px; font-weight:900; margin-top:4px; }
.wardrobe-reward { background:#fbf0fc; border:1.5px solid #ead7ee; border-radius:19px; text-align:left; padding:12px 13px 10px; margin-bottom:17px; }
.wardrobe-heading { display:flex; align-items:center; gap:10px; }
.wardrobe-heading>span { font-size:25px; }
.reward-eyebrow { color:#b996ba; font-size:9px; font-weight:900; letter-spacing:1.6px; margin:0; }
.wardrobe-heading h3 { font-family:Georgia,serif; font-size:21px; color:#74548e; margin:0; font-style:italic; }
.wardrobe-instruction { color:#9b879e; font-size:11px; margin:4px 0 9px; }
.next-reward-hint { font-size:11px; font-weight:800; color:#886398; background:#fff9e6; padding:6px 10px; border-radius:9px; margin:6px 0; }
.wardrobe-characters { display:flex; gap:6px; justify-content:space-between; }
.wardrobe-character { flex:1; min-width:0; background:#fff; border:1.5px solid #e5d2e9; border-radius:11px; color:#896d9c; font-size:11px; font-weight:900; padding:7px 3px; white-space:nowrap; }
.wardrobe-character.selected { background:#e9daf4; border-color:#ab84c0; color:#5a3f7e; box-shadow:0 2px 0 #cbb3d8; }
.wardrobe-choice-row { display:flex; align-items:center; gap:12px; margin-top:9px; }
.wardrobe-preview { background:radial-gradient(circle,#fff 32%,#f1e3f7 76%); border-radius:15px; border:1px solid #e1cbe9; width:100px; height:107px; flex:0 0 100px; display:flex; align-items:center; justify-content:center; }
.wardrobe-preview .character-svg { width:90px; height:105px; }
.wardrobe-outfits { flex:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.outfit-option { border:1.5px solid #e5d2e9; border-radius:10px; background:white; min-height:42px; color:#7c628f; font-size:11px; font-weight:900; padding:5px 6px; text-align:left; }
.outfit-option.selected { border-color:#b08bc4; background:#fff5ce; color:#654485; }
.wear-button { border:0; background:#dfadd3; color:#563e73; border-radius:11px; margin-top:9px; padding:9px 12px; font-size:12px; font-weight:900; width:100%; box-shadow:0 3px 0 #c994ba; }
.wear-button:hover { background:#f5c4e8; }
.wardrobe-feedback { color:#98829b; font-size:10px; text-align:center; margin:8px 0 0; min-height:15px; }
.closet-backdrop { z-index:150; }
.closet-card { background:linear-gradient(140deg,#fffaf1,#f9ebff); border:5px solid white; border-radius:27px; box-shadow:0 30px 80px rgba(44,24,70,.35); width:min(760px,96vw); max-height:calc(100dvh - 20px); overflow:auto; padding:23px 27px 18px; }
.closet-topline { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.closet-topline h2 { font:italic 32px Georgia,serif; color:#684e90; margin:2px 0; }
.closet-topline h2 span { color:#dda65f; }
.close-closet { border:0; background:#f2e0ed; color:#8b6f9e; width:36px; height:36px; font-size:26px; border-radius:50%; }
.closet-description { font-size:12px; color:#9482a1; line-height:1.45; margin:5px 0 14px; }
.closet-reward-status { display:flex; flex-wrap:wrap; justify-content:space-between; gap:7px; padding:9px 12px; margin:0 0 10px; background:#fff6dd; border:1px solid #e8d7b9; border-radius:12px; color:#785789; font-size:12px; font-weight:800; }
.closet-main { display:grid; grid-template-columns:218px 1fr; align-items:stretch; gap:14px; margin-top:14px; }
.closet-hero-preview { background:radial-gradient(circle at 50% 28%,#fff 0,#f3e2f3 65%,#e6d4e9); border:1.5px solid #e7d5eb; border-radius:18px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:12px; }
.closet-avatar .character-svg { height:255px; width:208px; animation:none; }
.closet-hero-preview p { font:italic bold 20px Georgia,serif; color:#76578d; margin:0; }
.closet-inventory { min-width:0; }
.wardrobe-slots { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-bottom:10px; }
.wardrobe-slot { background:#fff; border:1.5px solid #e1c9e8; color:#93789e; border-radius:9px; font-size:11px; font-weight:900; padding:10px 5px; }
.wardrobe-slot.selected { background:#fff0c7; border-color:#d5b07d; color:#72528f; }
.closet-inventory .wardrobe-outfits { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; gap:8px; max-height:255px; min-height:180px; overflow:auto; padding:3px; }
.inventory-item { border:1.5px solid #e4d2e9; color:#6f5488; background:white; text-align:left; border-radius:13px; padding:10px; display:flex; flex-direction:column; gap:3px; font-size:12px; font-weight:900; }
.inventory-item.selected { border-color:#aa8bbf; background:#fff3cd; box-shadow:inset 0 0 0 1px #d2b17c; }
.inventory-item.equipped { border-color:#57a88f; background:#e9fcf2; }
.inventory-item.locked { background:#efedf1; color:#99939f; border-style:dashed; opacity:.75; cursor:not-allowed; }
.inventory-item.locked small { color:#8e8493; }
.inventory-item:hover { transform:translateY(-1px); border-color:#b98fc9; }
.inventory-item small { color:#aa92b2; font-weight:700; font-size:10px; }
.inventory-emoji { font-size:21px; }
.empty-collection { grid-column:1/-1; background:#fff8e9; border:1px dashed #e7cda2; color:#a48b9a; padding:35px 20px; border-radius:14px; text-align:center; font-size:13px; font-weight:bold; line-height:1.5; }
.closet-card .wardrobe-feedback { margin-top:12px; border-top:1px solid #ebdeef; padding-top:12px; font-size:11px; }
.closet-controls { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.closet-controls button { flex:1; min-width:125px; border:1px solid #d9c7e1; background:#fff; color:#66487d; padding:9px 7px; font-size:11px; font-weight:900; border-radius:9px; }
.closet-controls .closet-equip { background:#7456a0; border-color:#63488d; color:white; }
.closet-controls button:disabled { opacity:.4; cursor:not-allowed; }
.next-button { display:block; background:#8867b4; color:white; border:0; border-radius:16px; width:100%; padding:14px 18px; font-size:15px; font-weight:900; box-shadow:0 5px 0 #644b89; }
.next-button:hover { background:#7856a5; }
.text-button { margin-top:13px; color:#9e85a8; text-decoration:underline; border:0; background:transparent; font-size:12px; font-weight:bold; }
@keyframes idle-bob { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-6px) rotate(1deg); } }
@keyframes twinkle { 0%,100% { transform:scale(.85) rotate(0); opacity:.7; } 50% { transform:scale(1.2) rotate(20deg); opacity:1; } }
@keyframes math-shake { 0% { transform:translateX(-2px) rotate(-1deg) scale(1.07); } 100% { transform:translateX(2px) rotate(1deg) scale(1.12); } }
@keyframes equation-appear { 0% { transform:scale(.88); opacity:.1; filter:blur(7px); } 100% { transform:scale(1); opacity:1; filter:blur(0); } }
@keyframes ring-burst { from { transform:scale(.4) rotate(0); opacity:1; } to { transform:scale(2.5) rotate(50deg); opacity:0; } }
@keyframes slide-up { from { transform:translateY(8px); opacity:0; } to { transform:translateY(0); opacity:1; } }
@media(max-width:1070px) { .site-wrap { padding:16px; } .game-layout { grid-template-columns:minmax(265px,1fr) minmax(0,1.45fr); gap:12px; } .crew-panel { padding:15px; } .hero-card { min-height:222px; } .avatar-box { height:128px; } .character-svg { width:115px; height:133px; } .hero-name { font-size:16px; } .parchment { padding:22px 15px; } .equation { font-size:clamp(23px,2.7vw,32px); } }
@media(max-width:780px) { .site-wrap { padding:13px 12px; } .edition-label { display:none; } .brand-link { font-size:9px; letter-spacing:1px; } .hero-heading { padding:17px 0 8px; } h1 { letter-spacing:-1.3px; } .hero-subtitle { font-size:12px; } .game-layout { grid-template-columns:1fr; } .crew-panel { order:2; } .board-panel { order:1; } .crew-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; } .hero-card { min-height:175px; padding:6px 3px; border-radius:15px; } .avatar-box { height:95px; } .avatar-box::before { width:70px; height:70px; } .character-svg { width:83px; height:101px; } .hero-name,.hero-name .small-name { font-size:12px; } .hero-power { font-size:8px; } .crew-description,.crew-footnote { margin-top:5px; margin-bottom:10px; } .board-panel { padding:11px; } .parchment { min-height:290px; } .board-inner { min-height:246px; } .level-pill { font-size:10px; padding:5px 9px 5px 5px; } .level-nav { gap:5px; margin:6px 0 11px; } .level-number { width:21px; height:21px; } .board-pretitle { font-size:9px; } .equation { font-size:clamp(22px,5vw,31px); } .level-tagline { margin-bottom:12px; } }
@media(max-width:490px) { .hero-subtitle { max-width:310px; } .hero-heading h1 { font-size:36px; } .title-spark { display:none; } .level-pill { font-size:9px; gap:4px; } .level-nav { justify-content:center; } .level-number { width:18px; height:18px; } .quest-label { font-size:10px; } .board-topline { padding-bottom:8px; } .mini-progress { font-size:9px; } .progress-dots i { width:6px; height:6px; } .parchment { padding:24px 10px; } .equation { font-size:22px; gap:4px; } .term-piece { gap:2px; } .board-inner { min-height:235px; } .board-tools { gap:4px; } .tool-button { padding:8px; font-size:10px; } .crew-panel { padding:12px; } .hero-card { min-height:159px; } .avatar-box { height:89px; } .character-svg { width:76px; height:94px; } .hero-name,.hero-name .small-name { font-size:10px; } .hero-power { font-size:7px; } .panel-heading h2 { font-size:23px; } .crew-footnote { font-size:9px; } }
@media(max-width:490px) { .victory-card { padding:12px 15px 20px; } .wardrobe-character { font-size:9px; } .wardrobe-choice-row { gap:6px; } .wardrobe-preview { width:80px; flex-basis:80px; } .outfit-option { font-size:10px; } }
@media(max-width:630px) { .header-actions { gap:6px; } .sound-toggle { padding:8px 9px; font-size:11px; } .sound-toggle span:not(#closetCount) { display:none; } .closet-card { padding:16px 13px; } .closet-main { grid-template-columns:1fr; } .closet-hero-preview { flex-direction:row; min-height:190px; } .closet-avatar .character-svg { height:184px; width:154px; } .wardrobe-slots { grid-template-columns:repeat(3,1fr); gap:4px; } .wardrobe-slot { font-size:10px; padding:8px 2px; } .closet-inventory .wardrobe-outfits { min-height:145px; max-height:210px; } .closet-topline h2 { font-size:27px; } }
@media(max-width:490px) { .checking-three-lines { font-size:17px; } .check-row { padding:7px; gap:5px; flex-direction:column; } .check-row-label { min-width:0; } .check-equation-line { font-size:19px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }