:root{
  font-family:ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#242449;
  --purple1:#8f5dff;--purple2:#6b42cf;--purple3:#45339c;--navy:#1b2044;
  --green1:#80e3ab;--green2:#40c98a;--cream:#fffaf2;--gold:#ffcf52;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#171b38}
body{display:flex;justify-content:center}
button{font:inherit}
.app{width:min(100%,480px);min-height:100dvh;background:linear-gradient(180deg,#8d5eff 0%,#6a43ca 22%,#34438b 56%,#1c2348 100%);position:relative;overflow:hidden}
.app::before,.app::after{content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(30px)}
.app::before{width:250px;height:250px;background:#ffffff1c;top:40px;right:-90px}
.app::after{width:210px;height:210px;background:#7ff0ae1f;bottom:80px;left:-70px}
.screen{display:none;min-height:100dvh;padding:env(safe-area-inset-top) 16px calc(18px + env(safe-area-inset-bottom));position:relative}
.screen.active{display:flex;flex-direction:column}
.hidden{display:none!important}

/* dashboard */
.hero-top{display:flex;align-items:center;justify-content:space-between;color:#fff;margin-top:8px}
.logoBubble{display:flex;align-items:center;gap:10px}
.flower{width:42px;height:42px;border-radius:14px;background:linear-gradient(145deg,#fff2,#ffffff3f);display:grid;place-items:center;border:1px solid #ffffff42;font-size:22px}
.top-pill{border:1px solid #ffffff47;background:#ffffff1f;color:#fff;padding:10px 12px;border-radius:14px;font-size:12px;font-weight:800}
.heroCard{margin-top:16px;border-radius:28px;padding:22px 18px;background:linear-gradient(155deg,#fff6,#ffffff18);backdrop-filter:blur(3px);border:1px solid #ffffff33;box-shadow:0 14px 28px #15173b55;color:white;position:relative;overflow:hidden}
.heroCard::before{content:"";position:absolute;inset:auto -30px -55px auto;width:150px;height:150px;border-radius:50%;background:#a0ffbf26}
.heroCard h1{margin:0;font-size:36px;line-height:1;letter-spacing:-1.3px}
.heroCard p{margin:8px 0 0;color:#efe4ff;max-width:240px;line-height:1.35}
.heroButtons{display:flex;gap:10px;margin-top:18px;position:relative;z-index:1}
.btn{border:0;border-radius:16px;padding:13px 15px;font-weight:900;cursor:pointer}
.btn.primary{background:#fff8db;color:#5e40ac;box-shadow:0 6px 0 #eadca5}
.btn.secondary{background:#ffffff22;color:#fff;border:1px solid #ffffff46}
.statsRow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.statTile{background:#ffffff18;border:1px solid #ffffff30;border-radius:18px;padding:12px 8px;text-align:center;color:white}
.statTile b{display:block;font-size:22px}
.statTile small{display:block;font-size:10px;letter-spacing:.8px;color:#efe7ff;font-weight:900}
.sectionTitle{display:flex;align-items:center;justify-content:space-between;color:#fff;margin:18px 2px 10px}
.sectionTitle h2{margin:0;font-size:18px;letter-spacing:-.3px}
.chapterCard{border-radius:24px;padding:18px;background:linear-gradient(180deg,#7de0a5,#4cca8b);box-shadow:inset 0 4px 0 #ffffff85,0 12px 0 #2e6f7d,0 20px 24px #0f133649;color:#184b3c;position:relative;overflow:hidden}
.chapterCard::before{content:"✦";position:absolute;right:18px;top:10px;font-size:28px;color:#ffffff93}
.chapterCard h3{margin:0;font-size:24px;color:#fffef6;letter-spacing:-.7px}
.chapterCard p{margin:7px 0 0;color:#ebfff2;font-weight:700;max-width:280px}
.chapterMeta{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
.chip{background:#ffffff24;color:white;border:1px solid #ffffff55;border-radius:999px;padding:8px 11px;font-size:11px;font-weight:900}
.levelGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding-bottom:12px}
.levelCard{border:0;border-radius:22px;min-height:102px;padding:12px 10px 10px;background:linear-gradient(180deg,#fff,#f4ecff);color:#5b3ea7;box-shadow:0 9px 0 #d7cbef,0 16px 22px #1012353c;text-align:left;position:relative;overflow:hidden;cursor:pointer}
.levelCard.locked{background:linear-gradient(180deg,#dad7ea,#c9c7da);color:#6f6a89;box-shadow:0 9px 0 #bcb7cf,0 16px 22px #10123524}
.levelCard .num{font-size:24px;font-weight:1000;line-height:1}
.levelCard .name{font-size:11px;font-weight:900;opacity:.95;margin-top:4px;min-height:26px}
.levelCard .stars{position:absolute;left:10px;bottom:10px;font-size:15px;letter-spacing:1px;color:#ffc952}
.levelCard .badge{position:absolute;right:10px;top:10px;border-radius:999px;padding:5px 8px;font-size:9px;font-weight:1000;letter-spacing:.7px;background:#f1e6ff;color:#805cd0}
.levelCard.locked .badge{background:#ffffff80;color:#766f87}
.levelCard .best{position:absolute;right:10px;bottom:11px;font-size:9px;font-weight:900;color:#867ca3}
.footerHint{margin-top:auto;padding-top:8px;text-align:center;color:#d8cbff85;font-size:11px}

/* game */
.topBar{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#fff;margin-top:10px}
.iconbtn{border:1px solid #ffffff57;background:#ffffff22;color:#fff;border-radius:14px;padding:10px 12px;font-size:18px;font-weight:900;cursor:pointer}
.stageLabel{text-align:center;flex:1}
.stageLabel small{display:block;font-size:10px;letter-spacing:1px;color:#efe0ff;font-weight:1000}
.stageLabel b{display:block;font-size:16px}
.gameHeading{color:white;text-align:center;margin:10px 0 12px}
.gameHeading h1{font-size:31px;line-height:1.05;margin:4px 0;letter-spacing:-1.1px}.gameHeading p{margin:0;color:#e9dcff;font-size:13px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:13px}
.stat{border:1px solid #ffffff52;border-radius:15px;background:#ffffff24;color:white;text-align:center;padding:8px 3px}.stat b{font-size:18px;display:block}.stat small{font-size:10px;color:#f6e5ff;letter-spacing:.6px;font-weight:800}
.board{background:linear-gradient(#66d89c,#42c98a);border-radius:25px;padding:20px 8px 18px;box-shadow:inset 0 4px 0 #ffffff70,0 14px 0 #255f7a,0 23px 33px #12173e70;min-height:290px;display:flex;align-items:center;position:relative}.board:before{content:"✦";position:absolute;left:15px;top:5px;color:#ffffff65;font-size:26px}.board:after{content:"✧";position:absolute;right:19px;bottom:9px;color:#ffffff75;font-size:27px}.cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;width:100%;align-items:end}.pile{border:0;border-radius:15px;background:#ffffff22;min-width:0;min-height:210px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:12px 3px;position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}.pile.selected{outline:3px solid #fff8a3;background:#fff6bf53}.pile.empty{opacity:.7}.pile .layers{width:83%;height:0;position:relative}.pile .layers i{position:absolute;left:0;right:0;height:13px;border:2px solid #dbf2ff;background:#88c7ef;border-radius:5px;bottom:var(--offset);box-shadow:0 2px 2px #286c9480}.card{width:100%;height:128px;border-radius:11px;background:linear-gradient(140deg,#fff,#f2edff);box-shadow:0 5px 0 #b9afdb,0 7px 11px #1e4d5375;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;position:relative;border:2px solid white;touch-action:manipulation}.card.star{background:linear-gradient(135deg,#fffafc,#fae2ff)}.card .st{position:absolute;top:7px;right:8px;color:#b356dd;font-size:17px}.equation{font-size:clamp(14px,4vw,20px);font-weight:900;white-space:nowrap;color:#3c3c66}.answer{color:#9954de;font-size:29px;font-weight:900;border-bottom:3px solid #bb8be8;min-width:44px;text-align:center;line-height:1.3}.pile.done .card{height:128px;background:#effff8;color:#218358;font-size:39px}.pile-name{font-size:11px;font-weight:900;color:#16624d;margin-top:16px}.note{min-height:20px;color:#e5ffec;text-align:center;font-size:13px;font-weight:800;margin:15px 0 8px}.answers{background:#f9f6ff;border-radius:22px;padding:16px 13px;box-shadow:0 8px 0 #d1c4ed,0 14px 28px #100e3455}.answers-title{font-size:12px;letter-spacing:.7px;color:#77729a;font-weight:900;text-align:center;margin-bottom:11px}.options{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.option{height:64px;border-radius:14px;border:2px solid #e3d8f5;background:white;color:#4a3d8b;font-size:26px;font-weight:900;box-shadow:0 4px 0 #ddd2f0;cursor:pointer}.option:active{transform:translateY(3px);box-shadow:0 1px 0 #ddd2f0}.actions{display:flex;gap:7px;margin-top:15px}.action{flex:1;border:1px solid #ffffff57;background:#ffffff28;color:white;border-radius:15px;padding:12px 4px;font-size:12px;font-weight:800;cursor:pointer}.action.active{background:#fff0b8;color:#5d4093}.toast{min-height:30px;text-align:center;font-size:14px;color:#fff0bb;font-weight:800;margin-top:12px}.holders{margin-top:16px;display:flex;align-items:center;gap:10px}.hold-label{color:#f7e9ff;font-weight:900;font-size:10px;letter-spacing:.8px;width:82px}.hold-slots{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;flex:1}.hold{border:2px dashed #ffffff7d;background:#ffffff1a;border-radius:13px;min-height:56px;color:white;font-weight:800;font-size:13px;cursor:pointer}.hold.filled{background:#f9f4ff;color:#4a3882;border-style:solid}.hold.selected{outline:3px solid #faff9b}.hold small{display:block;font-weight:700;font-size:10px;opacity:.72}.move-mode .hold:not(.filled){background:#fdf2b94d}.move-mode .pile:not(.selected){background:#fff7b333}.footer{text-align:center;color:#d7caff8f;font-size:11px;margin-top:auto;padding-top:10px}
.overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:#17173dcc;z-index:30;padding:25px}.overlay.show{display:flex}.modal{background:white;border-radius:24px;padding:26px 22px;text-align:center;width:100%;max-width:340px;box-shadow:0 16px 60px #0007}.modal h2{margin:0 0 10px;color:#5d39a5;font-size:30px}.modal p{color:#625e7e;line-height:1.45}.modalStars{font-size:26px;letter-spacing:4px;color:#ffcb4c;margin:6px 0 14px}
.modalActions{display:grid;gap:10px;margin-top:16px}
.primary{border:0;background:#8853df;color:white;border-radius:15px;padding:15px 22px;font-size:17px;font-weight:850;width:100%;cursor:pointer}.secondary{border:1px solid #d7caef;background:white;color:#6d5998;border-radius:15px;padding:14px 16px;font-weight:850;cursor:pointer;width:100%}
@media(max-height:760px){.heroCard h1{font-size:32px}.board{min-height:235px}.pile{min-height:176px}.card,.pile.done .card{height:108px}.answer{font-size:24px}.hold{min-height:48px}.stats{gap:6px}.gameHeading h1{font-size:28px}.heroButtons{flex-wrap:wrap}}

/* Version 0.4 daily challenge and delight */
.dailyHelp{font-size:12px;color:#efe6ff;margin:0 2px 11px;line-height:1.35}
.dailyGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}
.dailyCard{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:6px;min-height:137px;border:1px solid #ffffff88;border-radius:19px;padding:11px 9px;color:#43366d;background:linear-gradient(165deg,#fffaf0,#ffe4a8);cursor:pointer;box-shadow:0 6px 0 #222d6477;transition:transform .18s ease,box-shadow .18s ease}
.dailyCard.hard{background:linear-gradient(165deg,#f1fff5,#a5e9bc)}
.dailyCard.expert{background:linear-gradient(165deg,#f4efff,#c6b0ff)}
.dailyCard:active{transform:translateY(4px);box-shadow:0 2px 0 #222d6477}
.dailyCard.complete{outline:2px solid #baffd7}
.dailyEmoji{font-size:24px}.dailyCard b{font-size:15px}.dailyCard small{font-size:10px;opacity:.78;font-weight:800}.dailyStatus{margin-top:auto;font-size:10px;font-weight:1000;color:#6b42a3}
.levelCard{transition:transform .2s ease,box-shadow .2s ease}.levelCard:not(.locked):active{transform:translateY(4px);box-shadow:0 4px 0 #d7cbef}
.anim-solve .pile.selected .card{animation:cardSolve .48s ease-out}
.anim-wrong .board{animation:wrongShake .38s ease-in-out}
.anim-move .pile.selected .card{animation:cardMove .36s cubic-bezier(.2,.9,.3,1.1)}
@keyframes cardSolve{0%{transform:scale(1);filter:brightness(1.3)}40%{transform:scale(1.10) rotate(2deg)}100%{transform:scale(1)}}
@keyframes cardMove{0%{transform:translateY(-16px) scale(.94)}75%{transform:translateY(4px) scale(1.025)}100%{transform:translateY(0) scale(1)}}
@keyframes wrongShake{0%,100%{transform:translateX(0)}25%,75%{transform:translateX(-5px)}50%{transform:translateX(5px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}