/* ===== Boot ===== */
.boot{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:1rem;color:var(--cream);font-family:var(--font-display);font-size:1.3rem}
.boot-lamp{width:70px;height:90px;border-radius:30px 30px 12px 12px;background:var(--gold);border:4px solid var(--ink);box-shadow:0 0 50px 12px rgba(246,185,59,.5);animation:pulse 1.6s ease-in-out infinite}

/* ===== Shared screen decor ===== */
.bd-wrap{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bd-wrap.dim{opacity:.5}
.veil.lite{background:linear-gradient(180deg,rgba(18,14,53,.1),rgba(18,14,53,.55))}
.veil.heavy{background:rgba(18,14,53,.82)}
.wrap.narrow{max-width:680px}
.wrap.center{text-align:center}
.kicker{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:1.5px;font-size:.85rem;color:var(--teal-dd)}
.sec{font-size:1.2rem;margin:1.1rem 0 .5rem;color:var(--gold-l)}
.ref-line{display:flex;align-items:center;gap:.35rem;font-size:.82rem;font-weight:800;opacity:.8;margin-top:.5rem}
.ref-line .ref-ico{display:inline-flex}
.text-input{width:100%;min-height:56px;border-radius:16px;border:3px solid var(--ink);background:var(--cream);color:var(--ink);font:800 1.3rem var(--font-body);padding:.4rem 1rem;user-select:text;-webkit-user-select:text}
.text-input::placeholder{color:#8d82b8;font-weight:700}
.text-input:focus-visible{outline:4px solid var(--gold-l)}
.field{display:block;margin:1rem 0;border:0;padding:0;min-width:0}
.field>span,.field>legend{display:block;font-family:var(--font-display);font-weight:800;font-size:1.1rem;margin-bottom:.4rem;color:var(--gold-l);padding:0}
.field-hint{font-size:.88rem;font-weight:700;opacity:.85;margin-top:.4rem}
.field-hint.bad{color:var(--coral);opacity:1}
.float-text{font-family:var(--font-display);font-weight:800;color:var(--gold-l);background:var(--ink);padding:.02em .55em;border-radius:99px;border:2px solid var(--gold);font-size:1.3rem;white-space:nowrap}
.float-text.xp{color:#9ff0a6}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
@keyframes popAnim{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.pop{animation:popAnim .45s var(--ease-bounce)}
.shake{animation:shake .45s}

/* ===== Welcome ===== */
.welcome{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;padding:var(--sat) var(--sar) var(--sab) var(--sal)}
.welcome-top{display:flex;justify-content:flex-end;padding:.7rem .9rem}
.welcome-main{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:0 1.2rem}
.hero{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.2rem}
.logo{display:flex;gap:.35em;font-size:clamp(3.4rem,15vw,6.4rem);line-height:.9;color:var(--gold);-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:0 8px 0 var(--ink),0 14px 30px rgba(0,0,0,.4);letter-spacing:1px}
.logo span:last-child{color:var(--teal)}
.ribbon{margin-top:.8rem;background:#c43628;color:#fff;font-family:var(--font-display);font-weight:800;font-size:clamp(1.1rem,4.2vw,1.6rem);padding:.15em 1.4em;border:3px solid var(--ink);border-radius:10px;box-shadow:0 5px 0 var(--ink);letter-spacing:.5px;position:relative}
.welcome-actions{display:flex;flex-direction:column;align-items:center;gap:.8rem;width:min(100%,420px)}
.welcome-actions .btn.block{font-size:1.35rem}
.who{font-weight:800;opacity:.9;margin-top:.4rem}
.pcards{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}
.pcard{display:flex;flex-direction:column;align-items:center;gap:2px;padding:.55rem .7rem;border-radius:18px;background:rgba(18,14,53,.72);border:3px solid rgba(255,255,255,.28);min-width:104px;transition:transform .12s,border-color .12s}
.pcard:hover{border-color:var(--gold);background:rgba(36,27,99,.9)}
.pcard.last{border-color:var(--gold)}
.pname{font-family:var(--font-display);font-weight:800;font-size:1.1rem;max-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plv{font-size:.72rem;font-weight:800;opacity:.8}
.notice{background:rgba(18,14,53,.85);border:2px solid var(--gold);border-radius:14px;padding:.55rem .8rem;font-size:.9rem;font-weight:700;max-width:440px;text-align:center}
.welcome-foot{text-align:center;font-size:.8rem;font-weight:800;opacity:.85;padding:.5rem 1rem .8rem;text-shadow:0 1px 4px #000}

/* ===== Create ===== */
.create{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden}
.cp-noor{display:flex;align-items:flex-end;gap:.6rem;margin-bottom:.4rem}
.cp-noor .bubble{position:relative;background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:20px 20px 20px 6px;padding:.6rem .9rem;font-weight:800;box-shadow:var(--shadow)}
.cp-preview{display:grid;place-items:center;margin:.4rem auto}
.cp-preview svg{filter:drop-shadow(0 8px 0 rgba(0,0,0,.3));animation:float 3.4s ease-in-out infinite}
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:.6rem}
.pick{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:.45rem .3rem .4rem;border-radius:16px;background:rgba(255,255,255,.08);border:3px solid rgba(255,255,255,.2);font-weight:800;font-size:.8rem;transition:transform .1s,border-color .1s,background .1s}
.pick:hover:not(:disabled){background:rgba(255,255,255,.16)}
.pick[aria-pressed="true"]{border-color:var(--gold);background:rgba(246,185,59,.18);box-shadow:0 0 0 3px rgba(246,185,59,.25)}
.pick.locked{opacity:.65}
.pick .lock{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;background:var(--indigo-700);display:grid;place-items:center;font-style:normal}
.pick small{font-size:.66rem;opacity:.85;text-align:center;line-height:1.1}
.swatches{display:flex;gap:.6rem;flex-wrap:wrap}
.swatch{width:54px;height:54px;border-radius:50%;background:var(--sw);border:4px solid var(--ink);box-shadow:0 4px 0 rgba(0,0,0,.4);transition:transform .1s}
.swatch[aria-pressed="true"]{outline:4px solid var(--gold-l);outline-offset:2px;transform:scale(1.08)}

/* ===== Map ===== */
.map-screen{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden}
.hud{flex:none;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:calc(.45rem + var(--sat)) .7rem .45rem;background:linear-gradient(180deg,rgba(18,14,53,.96),rgba(18,14,53,.78));border-bottom:3px solid var(--indigo-700)}
.hud-me{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:inherit;min-width:0}
.hud-name{display:flex;flex-direction:column;min-width:0;gap:1px}
.hud-name b{font-family:var(--font-display);font-size:1.1rem;line-height:1;max-width:11ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hud-name small{font-weight:800;opacity:.8;font-size:.72rem;line-height:1}
.xpbar{display:flex;align-items:center;gap:6px;margin-top:2px}
.xp-lv{font-weight:800;font-size:.68rem;background:var(--gold);color:var(--ink);border-radius:8px;padding:0 6px;line-height:1.5}
.xpbar .bar{flex:1;height:9px;min-width:64px;border-width:1px}
.hud-right{display:flex;align-items:center;gap:.4rem}
.hud .chip{padding:.2em .6em;font-size:.85rem}
@media (max-width:520px){.hud-right .chip:nth-child(2){display:none}}
.map-scroll{background:var(--indigo-950);background-image:radial-gradient(900px 500px at 50% 0,#2c2175 0,transparent 70%)}
.map-stage{position:relative;width:100%;max-width:900px;margin:0 auto;aspect-ratio:900/2400;container-type:inline-size;box-shadow:0 0 80px rgba(0,0,0,.65);background:#1c1650}
.map-art,.map-road,.map-fog{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.map-road .seg-done{filter:drop-shadow(0 0 6px rgba(246,185,59,.8))}
.fog{transition:opacity 1.1s ease,transform 1.4s ease}
.fog.lifting{opacity:0;transform:translateY(-60px)}
.region-tag{position:absolute;left:3%;z-index:2;pointer-events:none;white-space:nowrap}
.region-tag span{display:inline-block;background:var(--indigo-900);color:var(--gold-l);font-family:var(--font-display);font-weight:800;font-size:clamp(.85rem,3.4cqw,1.45rem);padding:.1em .9em;border:3px solid var(--gold);border-radius:99px;box-shadow:0 4px 0 rgba(0,0,0,.4)}
.region-tag.locked{opacity:0}
.node{position:absolute;transform:translate(-50%,-50%);width:clamp(62px,11cqw,100px);aspect-ratio:1;border-radius:50%;z-index:3;display:block;transition:transform .12s}
.node:hover:not(.fogged){transform:translate(-50%,-50%) scale(1.07)}
.node:active:not(.fogged){transform:translate(-50%,-50%) scale(.95)}
.node.fogged{visibility:hidden;pointer-events:none}
.node-disc{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;background:var(--cream);border:4px solid var(--ink);box-shadow:0 6px 0 var(--ink),0 10px 18px rgba(0,0,0,.35)}
.node.open .node-disc{background:var(--gold)}
.node.done .node-disc{background:var(--teal)}
.node.locked .node-disc{background:var(--stone-500,#8b7fa8);color:#fff}
.node.locked{filter:saturate(.7)}
.node.final{width:clamp(88px,17cqw,150px)}
.node.final .node-disc{box-shadow:0 6px 0 var(--ink),0 0 40px 10px rgba(246,185,59,.55)}
.node.bonus .node-disc{background:var(--indigo-500);color:#fff}
.node.bonus.done .node-disc{background:var(--indigo-300)}
.node.crowned .node-disc{outline:4px solid var(--gold-l);outline-offset:3px}
.node-disc .ico-wrap svg{width:68%;height:68%;margin:auto}
.node-disc>.ico-wrap,.node-disc>span{display:grid;place-items:center;width:100%;height:100%}
.node-disc svg.ico{width:62%;height:62%}
.node-num::before{content:attr(data-n)}
.node-go::before{content:"Play!"}
.node-num{position:absolute;left:-4px;top:-4px;width:28px;height:28px;border-radius:50%;background:var(--indigo-900);color:#fff;border:3px solid var(--ink);display:grid;place-items:center;font:800 .85rem var(--font-display)}
.node-label{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;background:rgba(18,14,53,.92);color:var(--cream);border:2px solid rgba(255,255,255,.3);border-radius:99px;padding:.05em .7em;font-weight:800;font-size:clamp(.68rem,2.5cqw,.9rem);pointer-events:none}
.node.done .node-label{top:calc(100% + 22px)}
.node-stars{position:absolute;left:50%;top:calc(100% - 4px);transform:translateX(-50%);display:flex;pointer-events:none}
.node-stars .star{filter:drop-shadow(0 2px 0 var(--ink))}
.node-go{position:absolute;left:50%;top:-34px;transform:translateX(-50%);background:var(--coral-dd);color:#fff;border:3px solid var(--ink);border-radius:99px;font:800 .95rem var(--font-display);padding:0 .7em;box-shadow:0 3px 0 var(--ink);animation:bob 1.1s ease-in-out infinite;pointer-events:none}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-8px)}}
.node.next::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:4px solid var(--gold-l);animation:ring 1.6s ease-out infinite;pointer-events:none}
@keyframes ring{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.35);opacity:0}}
.pop-in{animation:popIn .6s var(--ease-bounce) both}
@keyframes popIn{from{opacity:0;transform:translate(-50%,-50%) scale(.3)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.lantern{position:absolute;transform:translate(-50%,-50%);z-index:3;pointer-events:none}
.lantern svg{width:clamp(26px,5cqw,40px);height:auto}
.marker{position:absolute;transform:translate(-125%,-92%);transition:left 1.7s ease-in-out,top 1.7s ease-in-out;z-index:5;pointer-events:none;width:clamp(48px,9cqw,66px)}
.marker-bob{animation:float 2.4s ease-in-out infinite}
.marker svg{width:100%;height:auto;filter:drop-shadow(0 6px 0 rgba(0,0,0,.3))}
.spot{position:absolute;transform:translate(-50%,-50%);width:clamp(44px,8cqw,64px);aspect-ratio:1;border-radius:50%;z-index:3}
.spot-ring{position:absolute;inset:6%;border-radius:50%;border:3px dashed rgba(255,255,255,.75);box-shadow:0 0 14px 3px rgba(255,236,160,.65),inset 0 0 12px rgba(255,236,160,.45);transition:transform .15s}
.spot:hover .spot-ring{transform:scale(1.15)}
.spot.found .spot-ring{border-style:solid;border-color:rgba(127,214,139,.9);box-shadow:none}
.spot.fogged{visibility:hidden;pointer-events:none}
.spot-check{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;background:var(--leaf);color:#fff;display:grid;place-items:center;border:2px solid var(--ink)}
.map-tip{position:absolute;left:0;right:0;top:calc(var(--sat) + 78px);display:flex;justify-content:center;padding:0 1rem;pointer-events:none;transform:translateY(-160%);transition:transform .5s var(--ease-bounce);z-index:6}
.map-tip.in{transform:none}
.map-tip{align-items:flex-end;gap:.5rem}
.map-tip .bubble{position:relative;background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:20px 20px 20px 6px;padding:.6rem .9rem;font-weight:800;box-shadow:var(--shadow);max-width:26ch}
.disc{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.disc-ico{width:128px;height:128px;border-radius:50%;background:var(--gold-l);border:4px solid var(--ink);display:grid;place-items:center;box-shadow:0 6px 0 var(--ink);margin-top:-.2rem;animation:popIn2 .6s var(--ease-bounce)}
@keyframes popIn2{from{transform:scale(.4) rotate(-12deg)}to{transform:none}}
.disc-kicker{font-family:var(--font-display);font-weight:800;color:var(--teal-dd);text-transform:uppercase;letter-spacing:1.5px;font-size:.85rem}
.disc-fact{font-size:1.08rem;font-weight:700;line-height:1.45;max-width:34ch}
.disc .ref-line{justify-content:center}
.disc-reward{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center}
.disc-reward .chip{color:var(--ink);background:#e9e0ff}
.disc-reward .chip.gold{background:var(--gold)}
.disc .actions{width:100%}

/* ===== Level intro ===== */
.intro,.complete,.celebrate,.collection,.progress,.settings,.play{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden}
.intro-card{text-align:center;margin-top:3.4rem;padding-top:4.4rem;position:relative;display:flex;flex-direction:column;align-items:center;gap:.7rem}
.intro-card h2{font-size:2rem}
.intro-disc{position:absolute;top:-52px;left:50%;transform:translateX(-50%);width:108px;height:108px;border-radius:50%;background:var(--gold);border:4px solid var(--ink);display:grid;place-items:center;box-shadow:0 6px 0 var(--ink)}
.intro-stars{display:flex;gap:.6rem;align-items:center}
.intro-stars .chip{color:var(--ink)}
.intro-noor{text-align:left;width:100%;justify-content:center}
.intro-noor .bubble{border-color:var(--ink);background:#fff;font-size:1rem}
.trials{list-style:none;margin:0;padding:0;display:grid;gap:.3rem;text-align:left;width:100%;max-width:340px;font-weight:800}
.trials li{display:flex;gap:.6rem;align-items:center}
.trials span{width:26px;height:26px;border-radius:50%;background:var(--indigo-700);color:#fff;display:grid;place-items:center;font-size:.85rem;flex:none}
.mech-chips{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}
.mech-chips .chip{background:#e9e0ff;color:var(--ink)}
.mech-chips .chip svg{width:24px;height:24px}
.reward-row{display:flex;align-items:center;gap:.6rem;font-weight:700;text-align:left;font-size:.95rem}
.reward-ico{width:52px;height:52px;border-radius:14px;background:var(--gold-l);border:3px solid var(--ink);display:grid;place-items:center;flex:none;color:var(--indigo-700)}
.reward-ico.locked{background:#e1d9f7}
.check{display:flex;gap:.7rem;align-items:flex-start;text-align:left;background:#efe6ff;border:3px solid var(--ink);border-radius:16px;padding:.6rem .8rem;width:100%;cursor:pointer}
.check input{width:26px;height:26px;margin-top:2px;accent-color:var(--indigo-500);flex:none}
.check small{display:block;font-weight:700;opacity:.8}
.intro-card .btn.block{margin-top:.4rem}

/* ===== Play ===== */
.play-top{flex:none;display:flex;align-items:center;gap:.7rem;padding:calc(.55rem + var(--sat)) .8rem .3rem}
.play-heads{flex:1;min-width:0}
.play-title{font-size:1.3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.play-sub{font-size:.85rem;font-weight:800;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pips{flex:none;list-style:none;margin:0;padding:.2rem 1rem .5rem;display:flex;gap:6px;justify-content:center}
.pips li{flex:1;max-width:80px;height:10px;border-radius:99px;background:rgba(255,255,255,.2);border:2px solid rgba(0,0,0,.3);transition:background .3s}
.pips li.done{background:var(--teal)}
.pips li.now{background:var(--gold);animation:pulse 1.6s infinite}
.stage{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;width:min(100%,760px);margin:0 auto;padding:.4rem 1rem calc(1.2rem + var(--sab));scrollbar-width:thin}
.splash{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem;background:var(--cream);color:var(--ink);border:4px solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:1.4rem 1.2rem;margin-top:1rem;animation:splashIn .5s var(--ease-bounce) both}
@keyframes splashIn{from{transform:scale(.8) translateY(20px);opacity:0}to{transform:none;opacity:1}}
.splash h2{font-size:1.9rem}
.splash-ico{width:130px;height:130px;border-radius:50%;background:var(--gold-l);border:4px solid var(--ink);display:grid;place-items:center;margin-top:-4rem;box-shadow:0 6px 0 var(--ink)}
.splash-mech{font-weight:800;color:var(--indigo-500)}
.splash-how{font-weight:700;max-width:36ch}
.splash.reveal .m-picture{width:min(100%,360px)}
.m-clue.big{font-size:1.05rem}

/* ===== Level complete ===== */
.cpanel{text-align:center;margin-top:3.6rem;padding-top:4.6rem;position:relative;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.c-ico{position:absolute;top:-52px;left:50%;transform:translateX(-50%);width:104px;height:104px;border-radius:50%;background:var(--gold);border:4px solid var(--ink);display:grid;place-items:center;box-shadow:0 6px 0 var(--ink)}
.cpanel h1{font-size:2.4rem;color:var(--indigo-700)}
.c-sub{font-weight:800;opacity:.75}
.big-stars{display:flex;gap:.3rem;justify-content:center;margin:.2rem 0}
.big-star{display:inline-block;transform:scale(.85);transition:transform .3s}
.big-star:not(.earned){opacity:.5}
.big-star svg path{fill:#d9d0f5!important;stroke:#a395d8!important}
.big-star.earned.pop svg path{fill:#f6b93b!important;stroke:#b8741a!important}
.big-star.pop{animation:starPop .7s var(--ease-bounce) both;opacity:1}
@keyframes starPop{0%{transform:scale(.2) rotate(-40deg)}60%{transform:scale(1.25) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
.cstats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;width:100%}
.cstat{background:#efe6ff;border:3px solid var(--ink);border-radius:14px;padding:.4rem .2rem;display:flex;flex-direction:column;align-items:center}
.cstat span:first-child{font-size:.72rem;font-weight:800;opacity:.75;text-transform:uppercase;letter-spacing:.5px}
.cstat span:last-child{font:800 1.5rem var(--font-display)}
.card-host{width:100%;perspective:900px}
.flipcard{width:100%}
.fc-inner{position:relative;transform-style:preserve-3d;transition:transform .8s var(--ease-bounce);min-height:210px}
.flipped .fc-inner{transform:rotateY(180deg)}
.fc-back,.fc-front{position:absolute;inset:0;backface-visibility:hidden;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;padding:.8rem}
.fc-back{background:repeating-linear-gradient(45deg,var(--indigo-700),var(--indigo-700) 10px,var(--indigo-500) 10px,var(--indigo-500) 20px);border:4px solid var(--ink)}
.fc-front{transform:rotateY(180deg);background:#fff8e1;border:4px solid var(--gold-dd)}
.flipped .fc-front{position:relative}
.flipped .fc-back{display:none}
.fc-text{font-weight:700;max-width:34ch}
.cextra{display:flex;flex-direction:column;gap:.5rem;width:100%}
.level-up,.unlock{display:flex;align-items:center;gap:.7rem;background:var(--gold-l);border:3px solid var(--ink);border-radius:16px;padding:.5rem .8rem;text-align:left;animation:splashIn .5s var(--ease-bounce) both}
.level-up b,.unlock b{display:block;font-family:var(--font-display);font-size:1.15rem}
.level-up small,.unlock small{font-weight:800;opacity:.8}
.actions.col{flex-direction:column;width:100%}
.actions.col .btn{width:100%}

/* ===== Celebration ===== */
.cel-stage{position:relative;display:grid;place-items:center;min-height:260px;margin-top:1rem}
.rays{position:absolute;width:520px;height:520px;max-width:140vw;background:repeating-conic-gradient(from 0deg,rgba(255,224,138,.5) 0 8deg,transparent 8deg 24deg);border-radius:50%;mask-image:radial-gradient(circle,#000 10%,transparent 68%);-webkit-mask-image:radial-gradient(circle,#000 10%,transparent 68%);opacity:0;transition:opacity 1s;animation:spin 24s linear infinite}
.cel-stage.open .rays{opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}
.chest-btn{position:relative;display:grid;place-items:center;gap:.4rem;z-index:1;border-radius:30px}
.chest-art{filter:drop-shadow(0 12px 0 rgba(0,0,0,.35));animation:float 2.8s ease-in-out infinite}
.chest-tip{font:800 1.2rem var(--font-display);background:var(--coral-d);color:#fff;border:3px solid var(--ink);padding:.1em .9em;border-radius:99px;box-shadow:0 4px 0 var(--ink)}
.chest-btn.opening .chest-art{animation:shake .5s 2}
.cel-stage.open .chest-btn .chest-art{animation:float 3s ease-in-out infinite;filter:drop-shadow(0 0 30px rgba(255,224,138,.9))}
.cel-stage.open .chest-tip{display:none}
.cel-text{margin-top:.6rem;display:flex;flex-direction:column;align-items:center;gap:.7rem;animation:splashIn .7s var(--ease-bounce) both}
.cel-text h1{font-size:clamp(2rem,8vw,3.2rem);color:var(--gold);-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:0 6px 0 var(--ink)}
.cel-verse{font-size:1.15rem;font-weight:800;max-width:30ch}
.cel-me{display:flex;align-items:center;gap:.8rem;background:rgba(18,14,53,.75);border-radius:20px;padding:.5rem 1rem;text-align:left}
.cel-me b{font:800 1.4rem var(--font-display);display:block}
.cel-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;width:100%}
.cel-stats>div{background:rgba(18,14,53,.8);border:2px solid var(--indigo-500);border-radius:14px;padding:.5rem .2rem;display:flex;flex-direction:column}
.cel-stats b{font:800 1.4rem var(--font-display);color:var(--gold-l)}
.cel-stats small{font-weight:800;opacity:.8;font-size:.72rem}
.cel-gift,.cel-next{background:rgba(18,14,53,.8);border-radius:14px;padding:.5rem .8rem;font-weight:700;display:flex;align-items:center;gap:.4rem;text-align:left}
.cel-text .actions{width:100%;margin-top:.4rem}
.light-burst{position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.9),rgba(255,224,138,.5) 40%,transparent 70%);animation:pulse 2s infinite;z-index:-1}

/* ===== Collection / progress / settings ===== */
.tabs{display:flex;gap:.4rem;margin-bottom:.8rem;background:rgba(0,0,0,.3);padding:.3rem;border-radius:18px}
.tab{flex:1;min-height:48px;border-radius:14px;font:800 1.05rem var(--font-display);display:flex;align-items:center;justify-content:center;gap:.4rem;color:var(--indigo-300);transition:background .15s}
.tab.on{background:var(--gold);color:var(--ink)}
.tab small{font:800 .75rem var(--font-body);opacity:.8}
.coll-intro{font-weight:700;opacity:.9;margin-bottom:.8rem}
.kgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.7rem}
.kbtn{display:block;border-radius:18px;transition:transform .12s}
.kbtn:not(:disabled):hover .kcard{box-shadow:var(--shadow),0 0 0 4px rgba(246,185,59,.5)}
.kbtn:disabled{cursor:default}
.kcard{height:100%;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;padding:.7rem .4rem;background:#fff8e1;color:var(--ink);border:3px solid var(--gold-dd);border-radius:18px;box-shadow:var(--shadow);text-align:center}
.kcard.locked{background:#3a2f7a;border-color:#5b46c9;color:var(--indigo-300);box-shadow:none}
.kc-disc{width:76px;height:76px;border-radius:50%;background:var(--gold-l);display:grid;place-items:center;border:3px solid var(--ink)}
.kcard.locked .kc-disc{background:#2c2175;border-color:#5b46c9}
.kc-title{font:800 1rem var(--font-display);line-height:1.1}
.kc-hint{font-size:.72rem;font-weight:800;opacity:.85}
.card-detail{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.cd-disc{width:150px;height:150px;border-radius:50%;background:var(--gold-l);border:4px solid var(--ink);display:grid;place-items:center;box-shadow:0 6px 0 var(--ink)}
.cd-text{font-weight:700;font-size:1.08rem;max-width:34ch}
.bgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.6rem}
.badge-card{display:flex;gap:.7rem;align-items:center;padding:.6rem .8rem;border-radius:18px;background:rgba(255,255,255,.06);border:3px solid rgba(255,255,255,.14);opacity:.78}
.badge-card.got{background:rgba(246,185,59,.14);border-color:var(--gold);opacity:1}
.b-ico{width:62px;height:62px;border-radius:16px;background:rgba(0,0,0,.3);display:grid;place-items:center;flex:none;color:var(--indigo-300)}
.badge-card.got .b-ico{background:var(--gold-l)}
.b-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.b-text b{font:800 1.1rem var(--font-display)}
.b-text small{font-weight:700;opacity:.85;line-height:1.3}
.b-reward{color:var(--teal);opacity:1!important}
.closet-preview{display:grid;place-items:center;margin:.5rem 0}
.closet-preview svg{filter:drop-shadow(0 8px 0 rgba(0,0,0,.3))}
.picks.acc{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
.me-card{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.me-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.3rem}
.me-info h2{font-size:1.8rem}
.me-info .xpbar .bar{height:14px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.6rem}
.stat{background:rgba(255,255,255,.07);border:3px solid rgba(255,255,255,.14);border-radius:18px;padding:.6rem;display:flex;flex-direction:column;align-items:center;gap:2px}
.stat b{font:800 1.5rem var(--font-display);color:var(--gold-l)}
.stat small{font-weight:800;opacity:.8;font-size:.78rem}
.lvl-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:.6rem}
.lvl-chip{display:flex;flex-direction:column;align-items:center;gap:3px;padding:.5rem .3rem;background:rgba(255,255,255,.07);border:3px solid rgba(255,255,255,.14);border-radius:16px;text-decoration:none;color:inherit;text-align:center}
.lvl-chip b{font-size:.78rem;line-height:1.1;min-height:2.2em;display:grid;place-items:center}
.lvl-chip.done{border-color:var(--teal)}
.lvl-chip.open{border-color:var(--gold)}
.lvl-chip.locked{opacity:.55}
.skills{display:grid;gap:.7rem}
.skill-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.skill-top b{font:800 1.1rem var(--font-display)}
.skill-top small{font-weight:800;opacity:.85}
.skill .bar{height:18px}
.practice{margin-top:1rem}
.practice p{font-weight:700;margin:.3rem 0 .7rem}
.p-links{display:flex;gap:.5rem;flex-wrap:wrap}
.settings-body{display:grid;gap:1rem}
.settings-body .panel h3{margin-bottom:.4rem;color:var(--gold-l)}
.row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 0;border-top:2px solid rgba(255,255,255,.08)}
.row:first-of-type{border-top:0}
.row.col{flex-direction:column;align-items:stretch}
.row-text{display:flex;flex-direction:column;gap:2px}
.row-text b{font-weight:800;font-size:1.05rem}
.row-text small{opacity:.8;font-weight:700;line-height:1.35}
.switch{position:relative;flex:none;width:72px;height:46px;border-radius:99px;background:#3a2f7a;border:3px solid var(--ink);transition:background .2s}
.switch::after{content:"";position:absolute;top:4px;left:4px;width:30px;height:30px;border-radius:50%;background:#fff;border:2px solid var(--ink);transition:transform .2s var(--ease-bounce)}
.switch[aria-checked="true"]{background:var(--leaf)}
.switch[aria-checked="true"]::after{transform:translateX(26px)}
.switch:disabled{opacity:.4}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;background:rgba(0,0,0,.3);padding:4px;border-radius:16px}
.seg button{min-height:46px;border-radius:12px;font:800 1rem var(--font-display);color:var(--indigo-300)}
.seg button.on{background:var(--gold);color:var(--ink)}
.plist{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.prow{display:flex;align-items:center;gap:.7rem;padding:.4rem;border-radius:16px;background:rgba(255,255,255,.05)}
.prow.me{background:rgba(246,185,59,.12);border:2px solid var(--gold)}
.pr-name{flex:1;display:flex;flex-direction:column;min-width:0}
.pr-name small{opacity:.8;font-weight:700}
.icon-btn.del{width:44px;height:44px;color:var(--coral)}
.row-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.7rem}
.small{font-size:.9rem;font-weight:700;opacity:.85}
.about details{border-top:2px solid rgba(255,255,255,.08);padding:.5rem 0}
.about summary{font-weight:800;cursor:pointer;min-height:40px;display:flex;align-items:center}
.about p{font-weight:600;line-height:1.5;opacity:.92;padding:.2rem 0 .4rem}
.gate-input{margin-top:.5rem;width:100%;min-height:56px;border-radius:14px;border:3px solid var(--ink);padding:.3rem 1rem;font:800 1.5rem var(--font-body);text-align:center;background:#fff}
.gate-msg{color:var(--coral-dd);font-weight:800;min-height:1.4em;margin-top:.3rem}

@media (min-width:900px){
  .wrap{padding:1.4rem 1.2rem 2rem}
  .intro-card{margin-top:3rem}
}
@media (max-height:640px){.splash-ico{width:90px;height:90px;margin-top:-3rem}}

.topbar{padding-inline:max(.9rem,calc((100% - 980px)/2 + .9rem))}

.sticky-cta{position:sticky;bottom:0;padding:.8rem 0 calc(.2rem + var(--sab));margin-top:.6rem;background:linear-gradient(180deg,transparent,rgba(18,14,53,.85) 40%)}
@media (max-height:860px){.cp-preview svg{width:110px;height:110px}.create .field{margin:.6rem 0}.create .cp-noor{margin-bottom:0}}