@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
:root{--forest:#1B3A2E;--deep-forest:#10261E;--gold:#D4B061;--parchment:#ECE7C7;--light-parchment:#F6EBD0;--purple:#742E6C;--berry:#8B2E3A;--fairy-blue:#9ED8FF;--ink:#473526;--card:#F6EBD0;--border:#b99656;--shadow-fantasy:0 4px 14px #0004}*{box-sizing:border-box}html{background:var(--deep-forest)}body{margin:0;font-family:Inter,-apple-system,sans-serif;color:var(--ink);min-height:100vh;background:radial-gradient(ellipse at 50% -10%,#315340 0%,#193427 55%,var(--deep-forest) 100%);font-size:14px}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #9ed8ff;outline-offset:2px}button:active{transform:scale(.975)}[hidden]{display:none!important}h1,h2,h3,h4{font-family:Cinzel,Georgia,serif}h1{font-size:25px;margin:5px 0}h2{font-size:20px}h3{font-size:15px}.appShell{max-width:650px;margin:auto;background:linear-gradient(180deg,#234533 0%,#183226 100%);min-height:100dvh;padding:0 18px 120px;box-shadow:0 0 90px #0008;position:relative}.appShell:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 10%,rgba(255,224,160,.06),transparent 28%),radial-gradient(circle at 80% 25%,rgba(255,224,160,.05),transparent 24%),repeating-linear-gradient(0deg,transparent 0 26px,#ffffff03 27px);pointer-events:none}.appShell>*{position:relative}.appHeader{height:168px;background:radial-gradient(ellipse at top,#346049,var(--forest) 70%);margin:0 -18px 20px;border-bottom:3px double var(--gold);display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 8px 22px #12291e50;padding:10px 86px 8px 14px}.logo{width:min(560px,100%);max-height:146px;object-fit:contain;display:block}.accountMini{position:absolute;right:12px;top:52px;color:#f6e2aa}.accountMini .miniAvatar{width:54px;height:54px}.sectionTitle{text-align:center;margin:18px 0 22px;color:#f1e2be}.tinyGold{font-family:Cinzel,serif;font-size:10px;letter-spacing:.18em;color:#d7b56a;font-weight:800}.sectionTitle h1{color:#f8ebcb}.sectionTitle #status{display:block;color:#b7a37f;font-size:11px}.screen{display:none}.screen.active{display:block}.panel,.item,.addForm,.completed,.historyCard,.storeGroup{background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 3px 11px #5f3c2420;position:relative}.panel{padding:17px;margin:16px auto;max-width:540px}.panel:before,.item:before{content:'✦';position:absolute;right:7px;top:3px;font-size:9px;color:#ba9d6c}.addForm{display:grid;grid-template-columns:1fr 49px;gap:9px;padding:12px;max-width:540px;margin:0 auto;background:linear-gradient(180deg,#f7ecd1 0%,#ecdfbe 100%);border:2px solid #b9955a}.addForm>input{font-size:16px;padding:12px 11px;border:1px solid #d4b986;background:#fff9ea;border-radius:7px;min-width:0;color:var(--ink)}.addBtn,.goldButton,.equipBtn{color:#ffeab0;background:linear-gradient(#28513b,#102e24);border:2px solid var(--gold);border-radius:7px;font-weight:700;box-shadow:inset 0 1px 0 #e3c27d55,0 2px 4px #0003}.addBtn{font-size:27px}.goldButton{padding:13px 20px}.storeTabs{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap}.store{border:1px solid #c7a972;background:#e7dbc1;padding:8px 12px;border-radius:7px;color:#715638;font-size:12px;font-weight:700}.store.active{background:var(--forest);color:var(--gold);border-color:var(--gold)}.suggestions{margin:8px auto 0;max-width:540px;background:#fff4db;border:1px solid #c9a768;border-radius:8px;overflow:hidden}.suggestion{width:100%;text-align:left;background:none;padding:12px;border:0;border-bottom:1px solid #ddc9a8;color:var(--ink)}.quickHead,.listMeta,.storeHeading{display:flex;align-items:center;justify-content:space-between}.quickHead{margin:18px auto 0;max-width:540px;color:#eedcb8}.quickHead h3{margin:0;color:#f0dfb9}.quietBtn{background:none;border:0;color:#cdb27b;padding:10px;font-size:12px;font-weight:700}.listMeta{color:#d0bc97;font-size:12px;margin:14px auto 10px;max-width:540px;padding:0 4px}.storeHeading{color:var(--forest);margin:0 0 8px;border-bottom:1px solid #c7ae78;padding:0 2px 10px;display:flex;align-items:center;justify-content:space-between}.storeHeading h2{font-size:18px;margin:0;letter-spacing:.03em}.storeHeading span{font-size:12px;color:#6e5939}.storeGroup{max-width:540px;margin:0 auto 16px;padding:14px 14px 10px;background:linear-gradient(180deg,#f7ecd1 0%,#ecdfbe 100%);border:2px solid #b9955a;border-radius:14px;box-shadow:0 8px 18px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,249,234,.55)}.storeGroup:before,.completed:before,.addForm:before{content:'';position:absolute;inset:8px;border:1px solid rgba(137,97,43,.24);border-radius:10px;pointer-events:none}.storeGroup:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(116,78,31,.028) 0 1px,transparent 1px 27px),radial-gradient(circle at 18% 12%,rgba(255,255,255,.18),transparent 24%),radial-gradient(circle at 85% 80%,rgba(144,106,47,.08),transparent 22%);border-radius:14px;pointer-events:none}.item{display:flex;gap:10px;align-items:center;padding:11px 4px;min-height:52px;background:transparent;border:0;border-radius:0;box-shadow:none;margin:0;border-bottom:1px solid rgba(143,111,62,.2)}.item:last-child{border-bottom:0}.item.done{opacity:.62}.check{width:29px;height:29px;flex-shrink:0;border:2px solid #ad873f;border-radius:6px;background:#fff7df;color:#fff}.done .check{background:var(--forest);color:var(--gold)}.name{font-size:15px;flex:1;overflow-wrap:anywhere;font-weight:600}.done .name{text-decoration:line-through}.tag{font-size:10px;background:#d8c69a;color:#54442c;border-radius:4px;padding:4px}.star,.delete{background:transparent;border:0;color:#af904e;font-size:21px;padding:4px}.delete{font-size:20px;color:#967e58}.favorite{display:flex;justify-content:space-between;align-items:center;padding:5px 12px;background:#f8edcf;border:1px solid #d5b881;margin:5px auto;max-width:540px;border-radius:7px}.favorite button{background:none;border:0;padding:9px;color:var(--ink)}.favorite small{color:#877659}.completed{padding:14px 14px 10px;margin:22px auto 0;max-width:540px;background:linear-gradient(180deg,#f7ecd1 0%,#ecdfbe 100%);border:2px solid #b9955a;border-radius:14px}.completed summary{font-family:Cinzel,serif;font-weight:700;cursor:pointer;color:#756039}.completed summary span{font:12px Inter;background:#e1cfa9;padding:3px 8px;border-radius:20px}.muted{color:#8e7857;font-size:12px;line-height:1.6}.emptyState{max-width:540px;margin:8px auto 0;text-align:center;padding:22px 16px 24px;background:linear-gradient(180deg,#f7ecd1 0%,#ecdfbe 100%);border:2px solid #b9955a;border-radius:14px;box-shadow:0 8px 18px rgba(0,0,0,.18)}.emptyState .shrine{font-size:62px;color:#b89750;text-shadow:0 0 20px #d0aa64}.emptyState h2{margin:8px;color:#143829}.bottomNav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:30;width:min(650px,100%);height:calc(69px + env(safe-area-inset-bottom));padding:6px 4px env(safe-area-inset-bottom);background:linear-gradient(#255340,#10291f);border-top:2px solid var(--gold);display:flex;box-shadow:0 -4px 15px #07190f5c}.nav{flex:1;color:#d5c795;border:0;background:none;display:grid;place-items:center;gap:2px;font-size:11px}.nav span{font-size:24px}.nav.active{color:#ffe496;background:#d5aa4120;border-radius:8px}.xpBar{height:15px;background:#133226;border:2px solid #a98640;border-radius:8px;overflow:hidden}.xpFill{height:100%;background:linear-gradient(90deg,#997332,#ffe2a1,#d4b061);transition:width .5s}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stat{padding:12px 5px;background:#e5d2a7;text-align:center;border:1px solid #ccb078;border-radius:7px}.stat b{font:700 21px Cinzel;display:block}.stat small{font-size:10px}.frameAvatar{width:102px;height:102px;position:relative;display:inline-grid;place-items:center;flex-shrink:0}.frameAvatar img.avatar{width:67%;height:67%;border-radius:50%;object-fit:cover;position:absolute;z-index:0;background:#255443}.frameAvatar img.frameArt{width:100%;height:100%;position:absolute;z-index:1;pointer-events:none}.frameAvatar .initial{font:700 27px Cinzel;color:#f7d89d}.miniAvatar{width:52px;height:52px}.profileHero{display:flex;align-items:center;gap:15px}.profileHero h2{margin:0}.progressText{margin:8px 0;font-size:12px}.rewardGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:12px 0}.reward{border:1px solid #b8965c;background:#eddcb7;border-radius:9px;padding:9px 4px;text-align:center;min-height:120px;color:#543e27}.reward.locked{filter:grayscale(.8);opacity:.53}.reward img{width:68px;height:68px;object-fit:contain;display:block;margin:auto}.reward .symbol{font-size:38px;height:68px;display:grid;place-items:center;color:#ac7f38}.reward strong{display:block;font-size:11px;overflow-wrap:anywhere}.reward small{font-size:10px;display:block;margin-top:4px}.tabs{display:flex;gap:5px;margin:14px 0;flex-wrap:wrap}.tab{border:1px solid #b89a63;background:#e8d7b1;border-radius:5px;padding:9px;flex:1;color:#5b482d;font-size:11px}.tab.active{background:var(--forest);color:#f4d787}.chest{min-height:205px;background:linear-gradient(#071f2366,#09180b80),url('assets/chest.jpg') center 55%/cover;border:2px solid var(--gold);border-radius:9px;color:#f6deb0;text-align:center;padding:14px;display:flex;flex-direction:column;justify-content:flex-end;text-shadow:0 2px 4px #000}.chest h3{font-size:18px;margin:5px}.medal{width:70px;height:70px;margin:auto;display:grid;place-items:center;border:5px double #a57936;border-radius:50%;background:radial-gradient(#ffe8a6,#bb8944,#674828);color:#563d1d;font-size:31px;box-shadow:0 2px 8px #0004}.overlay{position:fixed;z-index:80;inset:0;background:#071710c9;display:grid;place-items:center;padding:25px}.modal{max-width:400px;width:100%;background:#f4e4be;border:5px double #b28c48;border-radius:12px;text-align:center;padding:25px;color:#593e1b;box-shadow:0 0 70px #e4b65755}.modal h2{font-size:25px}.modal img{max-width:150px}.toast{position:fixed;top:calc(14px + env(safe-area-inset-top));left:50%;transform:translate(-50%,-150px);z-index:90;background:#1b3a2e;color:#f9da94;border:1px solid #d4b061;padding:11px 20px;border-radius:9px;transition:transform .3s;white-space:nowrap;box-shadow:0 4px 20px #0007}.toast.visible{transform:translate(-50%,0)}.authScreen{min-height:100dvh;display:grid;place-items:center;padding:20px}.authCard{width:min(420px,100%);background:#f6e7c5;border:4px double #b8904b;border-radius:13px;text-align:center;padding:22px;box-shadow:0 20px 70px #0008}.loginLogo{width:min(100%,620px);max-height:230px;object-fit:contain;display:block;margin:0 auto 8px}.claim{font:11px Cinzel;color:#866532}.authCard form{display:grid;gap:12px;text-align:left}.authCard label{font-weight:600;font-size:12px}.authCard label input:not([type=checkbox]){display:block;width:100%;padding:13px;margin-top:6px;border:1px solid #bda16d;background:#fff6e4;border-radius:6px;font-size:16px}.remember{display:flex;gap:8px;align-items:center}#authError{color:#a62828}.settings{margin-bottom:20px}.switchLine{display:flex;gap:10px;align-items:center;margin:14px 0}.avatarUpload{font-size:12px;max-width:180px}.theme-temple{--forest:#253927;--deep-forest:#17291c;--card:#e0dfc9;--border:#96916c}.theme-royal{--forest:#123e32;--deep-forest:#092b22;--card:#fae9b9;--border:#c9972b}.theme-ruby{--forest:#682936;--deep-forest:#34161e;--card:#f4ddc7;--border:#b3774c}.theme-fairy{--forest:#1f4260;--deep-forest:#0a233d;--card:#e1f0f4;--border:#83b8d2}.theme-night{--forest:#30234f;--deep-forest:#15152f;--card:#ddd6ea;--border:#866da5}.theme-ancient{--forest:#51402d;--deep-forest:#2b241e;--card:#ece1cc;--border:#a4875d}.theme-sunrise{--forest:#48583a;--deep-forest:#2a402e;--card:#ffe2c7;--border:#d3a369}@media(max-width:390px){.appShell{padding-left:12px;padding-right:12px}.appHeader{margin-left:-12px;margin-right:-12px}.rewardGrid{gap:5px}.reward{padding:6px 2px}.store{padding:8px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* Distinct special effects; rendered over the checked item without layout movement */
.item{isolation:isolate}.item.rewardFlash::after{content:'✦';pointer-events:none;position:absolute;z-index:4;left:38px;top:1px;font-size:24px;color:#f9d37d;text-shadow:0 0 13px #ffde9f;animation:fxGold .65s ease-out both}.item.fx-forestlight::after{content:'❋';color:#66c59d;text-shadow:0 0 13px #58f2a3}.item.fx-fairydust::after{content:'✧ ✦';color:#86d8ff;text-shadow:0 0 13px #89dcff}.item.fx-rubyglow::after{content:'✦';color:#d74e63;text-shadow:0 0 13px #e84c64}.item.fx-starrain::after{content:'✧ ✧ ✧';color:#ead48e}.item.fx-moonshine::after{content:'☾';color:#a890ee}.item.fx-leaves::after{content:'❧';color:#76ac55}.item.fx-crystalglow::after{content:'❖';color:#76d6ec}.item.fx-legendglow::after{content:'✦ ❖ ✦';color:#ffe0a0;text-shadow:0 0 16px #ffd877}@keyframes fxGold{0%{opacity:0;transform:translateY(12px) scale(.4)}35%{opacity:1}100%{opacity:0;transform:translateY(-22px) scale(1.4)}}
/* Distinct artwork-like theme ornamentation, applied without affecting readability */
.theme-temple .appHeader{background:radial-gradient(at 45% 20%,#52764d,#1f3728 65%);border-bottom:5px ridge #928467}.theme-royal .appHeader{background:radial-gradient(at 50% -20%,#3f7d5c,#092b22 65%);border-bottom:5px double #ffe1a5}.theme-ruby .appHeader{background:radial-gradient(at 50% 0,#8d4350,#431720 70%)}.theme-fairy .appHeader{background:radial-gradient(at 50% 0,#438ea8,#152e52 70%)}.theme-night .appHeader{background:radial-gradient(at 50% 0,#694b8d,#1a1934 70%)}.theme-ancient .appHeader{background:repeating-linear-gradient(130deg,#564735,#564735 15px,#60513d 17px,#564735 21px)}.theme-sunrise .appHeader{background:radial-gradient(at 50% 0,#c48960,#45643f 72%)}
.theme-temple .panel,.theme-temple .item{background-image:linear-gradient(115deg,#849a7630,transparent 70%)}.theme-royal .panel,.theme-royal .item{border:2px solid #c99626}.theme-ruby .panel,.theme-ruby .item{background-image:linear-gradient(110deg,#f1bbb322,transparent)}.theme-fairy .panel,.theme-fairy .item{box-shadow:0 2px 12px #88bce955}.theme-night .panel,.theme-night .item{border-color:#886fa8}.theme-ancient .panel,.theme-ancient .item{border-style:double;border-width:3px}.theme-sunrise .panel,.theme-sunrise .item{background-image:linear-gradient(145deg,#ffd3a355,transparent 50%)}

/* SHOPONA v1.4 – fantasy parchment and real reward feedback */
.storeGroup{border:3px ridge #c8a46a;outline:1px solid #876536;outline-offset:-8px;background:radial-gradient(ellipse at 20% 0%,#fff7df 0%,#f1e1bd 58%,#e5cfa2 100%)}
.storeHeading h2{font-family:Cinzel,Georgia,serif;text-transform:uppercase;letter-spacing:.07em;color:#35503a}
.storeGroup .item{position:relative;z-index:1}.storeGroup .item:before{display:none}
.storeGroup .check{width:31px;height:31px;border:2px solid #94784d;background:#fffae9}
.storeGroup .name{font-family:Georgia,serif;font-size:17px;font-weight:500}
.addForm,.completed{border:3px double #b9975e;background:radial-gradient(circle at top,#fbefd2,#ecd7aa)}
.appHeader{border-bottom:4px ridge #d4b061;box-shadow:0 8px 25px #091b14a8}
.bottomNav{border-top:3px ridge #d4b061}
.shopona-burst{position:fixed;z-index:110;pointer-events:none;width:0;height:0;isolation:isolate}
.shopona-xp-label{position:absolute;left:0;top:0;white-space:nowrap;transform:translate(-50%,-50%);color:#fff0ba;font:900 18px Cinzel,Georgia,serif;text-shadow:0 2px 3px #092219,0 0 12px #cba354;animation:shopona-float .95s ease-out forwards}
.shopona-spark{position:absolute;left:0;top:0;display:block;color:var(--hue);font:900 20px Georgia,serif;text-shadow:0 0 8px var(--hue);animation:shopona-spark .72s ease-out forwards;opacity:0}
@keyframes shopona-float{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}20%{opacity:1;transform:translate(-50%,-105%) scale(1.13)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-200%) scale(1)}}
@keyframes shopona-spark{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}16%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.65) rotate(90deg)}}
@media(prefers-reduced-motion:reduce){.shopona-spark{display:none}.shopona-xp-label{animation:none;position:fixed;left:50vw;top:90px;transform:translateX(-50%);background:#21402e;border:1px solid #d4b061;padding:7px 12px;border-radius:7px}}

/* SHOPONA 1.5: engraved fantasy parchment, shared across all account themes */
:root{--paper-light:#fff4d5;--paper-base:#f0dcaf;--paper-shadow:#c39d65;--engrave:#8b6538;--ornament:#b58a42}
.appShell{background:radial-gradient(ellipse at 50% 5%,color-mix(in srgb,var(--forest) 80%,#68865b),var(--deep-forest) 75%)}
.appShell:before{background:radial-gradient(circle at 5% 30%,#fff1bc0b,transparent 30%),repeating-linear-gradient(117deg,#080f070d 0 2px,transparent 2px 12px);opacity:.55}
.storeGroup,.addForm,.completed,.emptyState,.panel,.authCard,.modal{
 background-color:var(--paper-base);
 background-image:radial-gradient(ellipse at 24% 12%,var(--paper-light) 0%,transparent 57%),radial-gradient(ellipse at 88% 93%,var(--paper-shadow) 0%,transparent 58%),repeating-linear-gradient(12deg,#74451d0a 0 1px,transparent 1px 9px);
 border:4px ridge var(--ornament);border-radius:8px;
 box-shadow:inset 0 0 0 2px #f9eac7,inset 0 0 0 5px #7e572f65,inset 0 8px 12px #fff8dc96,inset 0 -9px 18px #65401f39,0 7px 19px #071a13b0;
}
.storeGroup{position:relative;padding:21px 18px 13px;margin:0 auto 18px;isolation:isolate}
.storeGroup:before,.completed:before,.addForm:before{content:'';position:absolute;z-index:0;inset:10px;border:1px solid #a9834e88;border-radius:2px;pointer-events:none}
.storeGroup:after{content:'';position:absolute;z-index:0;inset:0;pointer-events:none;background:
 linear-gradient(135deg,var(--ornament) 0 9px,transparent 9px) top left/25px 25px no-repeat,
 linear-gradient(225deg,var(--ornament) 0 9px,transparent 9px) top right/25px 25px no-repeat,
 linear-gradient(45deg,var(--ornament) 0 9px,transparent 9px) bottom left/25px 25px no-repeat,
 linear-gradient(315deg,var(--ornament) 0 9px,transparent 9px) bottom right/25px 25px no-repeat;
 border-radius:5px}
.storeHeading,.storeGroup .item{position:relative;z-index:1}
.storeHeading{padding-bottom:12px;border-bottom:2px groove #d0ac73}
.storeHeading h2{font-size:18px;color:#3b3325;text-shadow:0 1px #fff7e1,0 -1px #77502d25;letter-spacing:.045em}
.storeGroup .item{background:transparent;box-shadow:none;border:0;border-bottom:1px solid #936a392c;border-radius:0;margin:0;padding:11px 5px}
.storeGroup .item:last-child{border-bottom:0}
.item:before{display:none}
.addBtn,.goldButton,.equipBtn,.store.active,.tab.active,.nav.active{
 border:2px solid var(--gold);background:linear-gradient(180deg,color-mix(in srgb,var(--forest) 75%,#729477),var(--forest) 47%,var(--deep-forest));
 color:#f7e5b6;text-shadow:0 -1px #061a12;
 box-shadow:inset 0 2px 2px #e3d2a45c,inset 0 -4px 5px #071910a8,0 3px 0 #947041,0 5px 9px #0d1d1780}
.addBtn:active,.goldButton:active,.equipBtn:active,.store:active{box-shadow:inset 0 3px 8px #001a10a8;transform:translateY(2px)}
.store:not(.active),.tab:not(.active){background:linear-gradient(#fff4d8,#d4b985);border:2px ridge #b89156;box-shadow:inset 0 2px 2px #fff7d8,inset 0 -3px 4px #86603844,0 2px 2px #0004;color:#4f3a27}
.check{box-shadow:inset 1px 2px 4px #785d3e52,0 1px 1px #fff4da}
.completed{margin-top:25px}
.accountMini{cursor:pointer;touch-action:manipulation;border-radius:50%}.accountMini:focus-visible{outline:3px solid #9ed8ff;outline-offset:5px}
/* Full visual themes: background, parchment material, accents and controls all change */
.theme-forest{--paper-light:#fff4d5;--paper-base:#f0dcaf;--paper-shadow:#c39d65;--ornament:#b58a42}
.theme-temple{--paper-light:#e9e7ca;--paper-base:#c4cbb0;--paper-shadow:#8d9a77;--ornament:#82916a}
.theme-royal{--paper-light:#fff3c0;--paper-base:#f4dc92;--paper-shadow:#c39939;--ornament:#d9ac36}
.theme-ruby{--paper-light:#fff0da;--paper-base:#edd1c9;--paper-shadow:#c17b86;--ornament:#b05d67}
.theme-fairy{--paper-light:#eef9ff;--paper-base:#d3e8f1;--paper-shadow:#89b4d2;--ornament:#84bfdf}
.theme-night{--paper-light:#eae3f4;--paper-base:#cfc2df;--paper-shadow:#9580af;--ornament:#a38ac0}
.theme-ancient{--paper-light:#f1e5d0;--paper-base:#d2bda1;--paper-shadow:#a18a71;--ornament:#91734d}
.theme-sunrise{--paper-light:#fff1d8;--paper-base:#f9d8ba;--paper-shadow:#d79d75;--ornament:#d4a369}
.theme-temple .storeGroup,.theme-royal .storeGroup,.theme-ruby .storeGroup,.theme-fairy .storeGroup,.theme-night .storeGroup,.theme-ancient .storeGroup,.theme-sunrise .storeGroup{background-color:var(--paper-base);background-image:radial-gradient(ellipse at 24% 12%,var(--paper-light),transparent 57%),radial-gradient(ellipse at 88% 93%,var(--paper-shadow),transparent 58%),repeating-linear-gradient(12deg,#74451d0a 0 1px,transparent 1px 9px);border-color:var(--ornament)}
.shopona-spark{width:23px;height:23px;filter:drop-shadow(0 0 5px var(--hue));transform-origin:center;color:var(--hue)}
.shopona-spark svg{width:100%;height:100%;display:block}
@keyframes shopona-spark{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0)}18%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.78) rotate(var(--spin))}}
.shopona-spark[data-effect="leaves"]{width:25px;height:25px}
.shopona-spark[data-effect="starrain"]{width:19px;height:19px}
.shopona-spark[data-effect="fairydust"]{width:27px;height:27px}
@media(prefers-reduced-motion:reduce){.shopona-spark{display:none!important}}


/* SHOPONA 1.6: theme-aware nav, stronger parchment, centered XP reward popup */
:root{--nav-top:#244f3c;--nav-bottom:#112920;--nav-active:#d5aa41;--nav-text:#dacb99;--paper-line:#9f7747;--paper-deep:#e4c48e}
.bottomNav{background:linear-gradient(180deg,var(--nav-top),var(--nav-bottom));border-top:3px ridge color-mix(in srgb,var(--ornament) 80%, #e0c48b);box-shadow:0 -6px 20px #07190f73,inset 0 1px 0 #fff2ca1e}
.nav{color:var(--nav-text);border-radius:10px;transition:transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease}
.nav.active{color:#ffedbb;background:linear-gradient(180deg,color-mix(in srgb,var(--nav-active) 22%,transparent),color-mix(in srgb,var(--nav-active) 9%,transparent));box-shadow:inset 0 1px 0 #fff0bf50,0 0 0 1px #d3a84f44}
.theme-forest{--nav-top:#244f3c;--nav-bottom:#112920;--nav-active:#d5aa41;--nav-text:#dacb99}
.theme-temple{--nav-top:#374936;--nav-bottom:#1c2a1d;--nav-active:#bccd90;--nav-text:#e3dec6}
.theme-royal{--nav-top:#134737;--nav-bottom:#082219;--nav-active:#e0b347;--nav-text:#f3dfaa}
.theme-ruby{--nav-top:#7a3240;--nav-bottom:#34161e;--nav-active:#df8796;--nav-text:#f3d8d4}
.theme-fairy{--nav-top:#295b77;--nav-bottom:#11283f;--nav-active:#8fd5f8;--nav-text:#d8eef8}
.theme-night{--nav-top:#423065;--nav-bottom:#18192e;--nav-active:#b4a1ef;--nav-text:#e7def9}
.theme-ancient{--nav-top:#655039;--nav-bottom:#32281f;--nav-active:#cfa377;--nav-text:#eedfc9}
.theme-sunrise{--nav-top:#6a6643;--nav-bottom:#364534;--nav-active:#efb987;--nav-text:#fbe4c9}
.storeGroup,.addForm,.completed,.emptyState,.panel,.authCard,.modal{border-radius:14px}
.storeGroup,.completed,.addForm{
 background-color:var(--paper-base);
 background-image:
  radial-gradient(circle at 18% 14%, color-mix(in srgb,var(--paper-light) 96%,#fff), transparent 28%),
  radial-gradient(circle at 82% 84%, color-mix(in srgb,var(--paper-shadow) 88%,#b68343), transparent 33%),
  repeating-linear-gradient(8deg, rgba(112,71,28,.05) 0 1px, transparent 1px 9px),
  repeating-linear-gradient(96deg, rgba(255,255,255,.035) 0 2px, transparent 2px 18px),
  linear-gradient(180deg, color-mix(in srgb,var(--paper-light) 78%,#fff4d4), color-mix(in srgb,var(--paper-base) 88%,#d8b377) 72%, color-mix(in srgb,var(--paper-shadow) 82%,#c0894f));
 border:4px solid color-mix(in srgb,var(--ornament) 90%,#d5b06f);
 box-shadow:inset 0 1px 0 #fff9ea,inset 0 0 0 2px #f8ebc9,inset 0 0 0 6px rgba(130,88,37,.44),inset 0 12px 18px rgba(255,248,230,.48),inset 0 -14px 22px rgba(103,62,24,.24),0 10px 24px rgba(0,0,0,.22);
}
.storeGroup:before,.completed:before,.addForm:before{inset:10px;border:1px solid rgba(125,84,38,.34);border-radius:9px;box-shadow:inset 0 0 0 1px rgba(255,246,218,.35)}
.storeGroup:after{
 background:
  linear-gradient(135deg,var(--ornament) 0 11px,transparent 11px) top left/28px 28px no-repeat,
  linear-gradient(225deg,var(--ornament) 0 11px,transparent 11px) top right/28px 28px no-repeat,
  linear-gradient(45deg,var(--ornament) 0 11px,transparent 11px) bottom left/28px 28px no-repeat,
  linear-gradient(315deg,var(--ornament) 0 11px,transparent 11px) bottom right/28px 28px no-repeat,
  linear-gradient(180deg,rgba(255,255,255,.18),transparent 16%,transparent 84%,rgba(70,40,8,.08));
 border-radius:11px;
}
.storeHeading{padding-bottom:14px;border-bottom:2px solid rgba(123,83,36,.34)}
.storeHeading h2{font-size:19px;text-shadow:0 1px 0 #fff8e2, 0 2px 8px rgba(76,42,9,.12)}
.storeGroup .item{padding:12px 6px;border-bottom:1px solid rgba(127,93,47,.22)}
.addBtn,.goldButton,.equipBtn,.store,.tab,.nav.active{
 box-shadow:inset 0 1px 0 rgba(255,244,197,.42), inset 0 -4px 8px rgba(8,19,14,.48), 0 3px 0 #8f6b3a, 0 8px 14px rgba(0,0,0,.18);
}
.store:not(.active),.tab:not(.active){box-shadow:inset 0 2px 1px rgba(255,248,216,.9), inset 0 -4px 6px rgba(101,67,28,.18), 0 2px 0 rgba(143,104,57,.85), 0 6px 10px rgba(0,0,0,.14)}
.xpPopup{position:fixed;z-index:120;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,380px);padding:18px 18px 16px;text-align:center;color:#4c331f;background:linear-gradient(180deg,#fff1ca,#ecd09c 70%,#dcb174);border:4px solid #c79a4f;border-radius:18px;box-shadow:inset 0 0 0 2px #fff4d3,inset 0 0 0 6px rgba(133,88,39,.35),0 22px 60px rgba(0,0,0,.42)}
.xpPopup:before{content:'';position:absolute;inset:10px;border:1px solid rgba(136,94,46,.35);border-radius:11px;pointer-events:none}
.xpPopup .tinyGold{display:block;margin-bottom:4px}
.xpPopup h3{font-size:27px;margin:5px 0 7px;color:#2f4128}
.xpPopup .gain{font:700 32px Cinzel,Georgia,serif;color:#b1781e;text-shadow:0 1px 0 #fff7d5,0 0 12px rgba(214,173,80,.35);margin:8px 0}
.xpPopup .sub{font-size:13px;color:#6a5138;margin:8px 0 12px}
.xpPopup .xpBar{margin-top:8px;height:18px;border-radius:999px;overflow:hidden;background:#173326;border:2px solid #aa8542;box-shadow:inset 0 2px 5px rgba(0,0,0,.35)}
.xpPopup .xpFill{transition:none}
.xpPopup .levelLine{display:flex;justify-content:space-between;font-size:12px;color:#644d34;margin-top:7px}
.xpPopup .closeReward{margin-top:14px;min-width:140px}
.overlay.showReward{background:rgba(7,23,16,.72);backdrop-filter: blur(2px)}

/* v1.7 mobile reward layout: preserve fixed centering during all animations */
.xpPopup{position:fixed!important;top:50%!important;left:50%!important;right:auto!important;transform:translate(-50%,-50%)!important;width:min(360px,calc(100vw - 32px))!important;max-width:calc(100vw - 32px)!important;max-height:calc(100dvh - 44px);overflow-y:auto;overflow-x:hidden;box-sizing:border-box;z-index:120;padding:18px 16px 15px;overscroll-behavior:contain}
.xpPopup .rewardInner{width:100%;min-width:0;transform-origin:center;overflow-wrap:anywhere}
.xpPopup h3{font-size:clamp(22px,6.2vw,30px);line-height:1.17;margin:9px 0;color:#325136}
.xpPopup .rewardRank{font:700 17px Cinzel,Georgia,serif;color:#ac792d;margin:4px 0}
.xpPopup .rewardTitle{font:700 clamp(16px,5vw,22px) Cinzel,Georgia,serif;color:#624721;margin:5px 0 16px;overflow-wrap:anywhere}
.xpPopup .levelLine{gap:10px;white-space:normal}
.xpPopup .sub{line-height:1.45;overflow-wrap:anywhere}
.xpPopup .closeReward{min-height:44px;margin:13px auto 1px}
@media(max-height:660px){.xpPopup{padding:12px}.xpPopup .rewardTitle{margin-bottom:8px}.xpPopup .sub{margin:5px 0 7px}}


/* SHOPONA 1.8 textured UI */
body{background:
 radial-gradient(circle at 50% -10%,rgba(255,226,155,.06),transparent 28%),
 linear-gradient(180deg,#173125 0%,#10261e 100%),
 url('assets/ui/foliage-bg.webp') center/420px 420px repeat fixed}
.appShell{background:
 linear-gradient(180deg,rgba(25,55,40,.92),rgba(18,39,29,.95)),
 url('assets/ui/foliage-bg.webp') center/360px 360px repeat}
.appShell:before{background:
 radial-gradient(circle at 15% 8%,rgba(255,224,160,.09),transparent 25%),
 radial-gradient(circle at 85% 18%,rgba(255,224,160,.05),transparent 18%),
 linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.04));opacity:.9}
.appHeader{background:
 linear-gradient(180deg,rgba(34,71,52,.76),rgba(21,48,35,.88)),
 url('assets/ui/foliage-bg.webp') center/360px 360px repeat;border-bottom:4px solid color-mix(in srgb,var(--gold) 75%,#8a6630)}
.storeGroup,.completed,.addForm,.panel,.emptyState,.authCard,.modal,.reward,.stat,.favorite,.suggestions{
 background:
  linear-gradient(180deg,rgba(255,250,236,.55),rgba(193,146,78,.04) 14%,rgba(83,52,19,.07) 100%),
  url('assets/ui/parchment-bg.webp') center/340px 340px repeat,
  linear-gradient(180deg,#f3e0b6,#e5c98f 76%,#d2ab6d);
 border:14px solid transparent;
 border-image:url('assets/ui/parchment-frame.png') 24 round;
 box-shadow:0 10px 26px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,249,229,.5),inset 0 12px 16px rgba(255,255,255,.18),inset 0 -10px 14px rgba(102,68,29,.12);
}
.panel:before,.item:before,.storeGroup:before,.completed:before,.addForm:before{display:none}
.storeGroup{padding:18px 18px 14px}
.completed,.panel,.emptyState{padding:18px}
.addForm{padding:16px}
.suggestions,.favorite,.reward,.stat{border-width:10px}
.storeHeading{border-bottom:2px solid rgba(121,83,36,.35);padding-bottom:12px;margin-bottom:6px}
.storeHeading h2{font-size:20px;letter-spacing:.06em}
.item{padding:13px 8px;border-bottom:1px solid rgba(116,80,37,.22)}
.addForm>input,.authCard label input:not([type=checkbox]){background:rgba(255,250,236,.84);border:2px solid rgba(170,132,76,.45);box-shadow:inset 0 1px 6px rgba(104,72,35,.12)}
.addBtn,.goldButton,.equipBtn,.nav.active,.store.active,.tab.active{
 background:
  linear-gradient(180deg,rgba(255,255,255,.18),rgba(0,0,0,.06)),
  url('assets/ui/button-green.webp') center/220px 220px repeat,
  linear-gradient(180deg,#2d6047,#123226);
 border:2px solid color-mix(in srgb,var(--gold) 85%,#f2d18c);
 box-shadow:inset 0 1px 0 rgba(255,244,197,.42), inset 0 -5px 10px rgba(10,23,17,.44), 0 4px 0 rgba(115,83,39,.9), 0 10px 16px rgba(0,0,0,.18);
 text-shadow:0 1px 0 rgba(0,0,0,.25)
}
.store,.tab,.check,.favorite button{
 background:
  linear-gradient(180deg,rgba(255,255,255,.3),rgba(0,0,0,.04)),
  url('assets/ui/button-cream.webp') center/220px 220px repeat,
  linear-gradient(180deg,#ead9b3,#d8b77c);
 border:2px solid rgba(170,132,76,.55);
 box-shadow:inset 0 1px 0 rgba(255,250,228,.85), inset 0 -4px 8px rgba(121,81,37,.14), 0 3px 0 rgba(137,101,56,.7), 0 8px 14px rgba(0,0,0,.12);
}
.check{background:
  linear-gradient(180deg,rgba(255,255,255,.3),rgba(0,0,0,.04)),
  url('assets/ui/button-cream.webp') center/120px 120px repeat,
  linear-gradient(180deg,#f6ecd0,#e2c794)}
.done .check{background:
  linear-gradient(180deg,rgba(255,255,255,.18),rgba(0,0,0,.05)),
  url('assets/ui/button-green.webp') center/120px 120px repeat,
  linear-gradient(180deg,#2d6047,#123226)}
.bottomNav{background:
  linear-gradient(180deg,rgba(39,83,62,.96),rgba(16,41,31,.98)),
  url('assets/ui/foliage-bg.webp') center/260px 260px repeat;border-top:3px solid color-mix(in srgb,var(--gold) 72%,#775725)}
.nav{border-radius:12px}
.reward img{filter:drop-shadow(0 2px 2px rgba(0,0,0,.14))}
.frameAvatar img.frameArt{filter:drop-shadow(0 6px 8px rgba(0,0,0,.18))}
@media(max-width:430px){.storeGroup,.completed,.addForm,.panel,.emptyState,.authCard,.modal,.reward,.stat,.favorite,.suggestions{border-width:12px}.storeGroup{padding:16px 16px 12px}.completed,.panel,.emptyState{padding:16px}}


/* SHOPONA v1.8 CLEAN — coherent themes, smooth connected header, plain parchment */
body.theme-forest{--ui-top:#2b5940;--ui-mid:#204735;--ui-bottom:#122c22;--ui-nav-top:#244d3a;--ui-nav-bottom:#132c23;--ui-accent:#d6ac62}
body.theme-temple{--ui-top:#455940;--ui-mid:#31432f;--ui-bottom:#1c2e24;--ui-nav-top:#3d513b;--ui-nav-bottom:#1b2d24;--ui-accent:#bdc98d}
body.theme-royal{--ui-top:#1b6350;--ui-mid:#124939;--ui-bottom:#082a24;--ui-nav-top:#14513f;--ui-nav-bottom:#092b24;--ui-accent:#eed17b}
body.theme-ruby{--ui-top:#863f52;--ui-mid:#5f2b3b;--ui-bottom:#351923;--ui-nav-top:#713546;--ui-nav-bottom:#351a27;--ui-accent:#e9a0a6}
body.theme-fairy{--ui-top:#34758e;--ui-mid:#244d6b;--ui-bottom:#142d49;--ui-nav-top:#28617b;--ui-nav-bottom:#122e49;--ui-accent:#a6dffa}
body.theme-night{--ui-top:#594879;--ui-mid:#352c57;--ui-bottom:#1a1b36;--ui-nav-top:#453462;--ui-nav-bottom:#1b1a36;--ui-accent:#bdabea}
body.theme-ancient{--ui-top:#786349;--ui-mid:#584936;--ui-bottom:#33291f;--ui-nav-top:#68533e;--ui-nav-bottom:#31281f;--ui-accent:#d6b68c}
body.theme-sunrise{--ui-top:#8e7654;--ui-mid:#6b6546;--ui-bottom:#344a39;--ui-nav-top:#776c4a;--ui-nav-bottom:#344737;--ui-accent:#f2c99b}
html{background:#10261e}
body{background:linear-gradient(180deg,var(--ui-top) 0%,var(--ui-mid) 36%,var(--ui-bottom) 100%) fixed !important}
.appShell{background:linear-gradient(180deg,var(--ui-top) 0%,var(--ui-mid) 34%,var(--ui-bottom) 100%) !important;box-shadow:0 0 70px #0003}
.appShell:before{display:none!important}
.appHeader,.theme-temple .appHeader,.theme-royal .appHeader,.theme-ruby .appHeader,.theme-fairy .appHeader,.theme-night .appHeader,.theme-ancient .appHeader,.theme-sunrise .appHeader{
 background:transparent!important;border:0!important;box-shadow:none!important;margin-bottom:4px!important;
}
.sectionTitle{margin-top:0!important;padding-top:0!important}
.sectionTitle h1{color:#f9edcf}
.tinyGold{color:var(--ui-accent)!important}
.bottomNav{background:linear-gradient(180deg,var(--ui-nav-top),var(--ui-nav-bottom))!important;border-top:2px solid var(--ui-accent)!important;box-shadow:0 -5px 16px #0004!important}
.nav{color:#e7dabb!important}.nav.active{color:#fff4d0!important;background:color-mix(in srgb,var(--ui-accent) 17%,transparent)!important;box-shadow:inset 0 1px 0 #fff4b74d!important}
.addBtn,.goldButton,.equipBtn,.store.active,.tab.active{background:linear-gradient(180deg,color-mix(in srgb,var(--ui-top) 94%,#fff),var(--ui-mid) 52%,var(--ui-bottom))!important;border-color:var(--ui-accent)!important;color:#fff0ce!important}
.addBtn,.goldButton,.equipBtn,.store.active,.tab.active{box-shadow:inset 0 2px 3px #ffffff24,inset 0 -3px 5px #0004,0 3px 0 #59472e80,0 5px 10px #0002!important}
/* Remove textures and embossed image overlays from cards; preserve themed flat parchment colors */
.storeGroup,.completed,.addForm,.panel,.emptyState,.authCard,.modal,.reward,.stat,.favorite,.suggestions{
 background-image:none!important;background:var(--paper-base)!important;
 border:2px solid var(--ornament)!important;border-radius:12px!important;
 box-shadow:inset 0 1px 0 #fff9e58a,0 6px 16px #0002!important;
}
.storeGroup:before,.storeGroup:after,.completed:before,.addForm:before,.panel:before{display:none!important}
.storeGroup .item{background:transparent!important;border-bottom:1px solid #6d523228!important;box-shadow:none!important}
.addForm>input,.authCard label input:not([type=checkbox]){background:#fff8e8!important;border:1px solid var(--ornament)!important}
.store:not(.active),.tab:not(.active){background:var(--paper-light)!important;border-color:var(--ornament)!important;box-shadow:inset 0 1px #fff9e0,0 2px 3px #0002!important}
.theme-temple .panel,.theme-temple .item,.theme-ruby .panel,.theme-ruby .item,.theme-sunrise .panel,.theme-sunrise .item{background-image:none!important}
.frameAvatar img.frameArt{object-fit:contain}