:root{--bg1: #efe8ff;--bg2: #fde9f3;--card: #fffffffa;--ink: #3a2f5c;--muted: #8a80a8;--line: #e6defa;--purple: #7b5cd6;--yellow: #ffc83d;--green: #3fcf8e;--red: #ff6b7d;--blue: #5aa2ff;--pink: #ff8fb0;--r0: #b9c3d6;--r1: #5fb0ff;--r2: #b07cf0;--r3: #ffb52e;--r4: #ff5f8f;--radius: 1.1em;--shadow: 0 .25em .9em #6a4fc81f, 0 .1em .2em #6a4fc814}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden}body{font:600 clamp(11px,min(2.2vh,3.6vw),20px) / 1.25 ui-rounded,"SF Pro Rounded","Nunito",system-ui,sans-serif;color:var(--ink);background:radial-gradient(circle at 20% 0%,#fff6 0 20%,transparent 50%),linear-gradient(160deg,var(--bg1),var(--bg2));user-select:none;-webkit-user-select:none;touch-action:manipulation}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}button:disabled{cursor:default}svg{display:block;width:100%;height:100%;overflow:visible}small{font-size:.78em;color:var(--muted);font-weight:600}h1,h2,h3{margin:0}#app{position:fixed;top:0;right:0;bottom:0;left:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.scene{height:100%;display:flex;flex-direction:column;min-height:0}.scene.enter>main,.scene.enter>nav{animation:rise .35s ease-out both}.topbar{display:flex;align-items:center;gap:.5em;padding:.55em .8em;flex-shrink:0}.topbar h1{font-size:1.3em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.spacer{flex:1}.logo-sm{font-size:1.35em;font-weight:900;color:var(--purple)}.logo-sm b{color:#ff8a3d}.icon-btn{width:2.4em;height:2.4em;flex-shrink:0;border-radius:50%;background:var(--card);box-shadow:var(--shadow);font-size:1em;display:grid;place-items:center}.icon-btn:active{transform:scale(.92)}.chip{display:flex;align-items:center;gap:.35em;background:var(--card);padding:.3em .7em;border-radius:99em;box-shadow:var(--shadow);white-space:nowrap}.chip.lvl .avatar{width:1.8em;height:1.8em}.chip.lvl .bar{width:4em;height:.4em;margin-top:.15em}.hotchip{font-size:.85em}.bar{height:.55em;border-radius:99em;background:#ece6fb;overflow:hidden}.bar i{display:block;height:100%;border-radius:inherit;background:var(--purple);transition:width .4s}.bar.green i{background:var(--green)}.bar.gold i{background:linear-gradient(90deg,#ffb52e,#ffd86a)}.bar.pink i{background:var(--pink)}.bar.red i{background:var(--red)}.bar.purple i{background:linear-gradient(90deg,#8f6cf0,#c09cff)}.btn{padding:.7em 1.2em;border-radius:1em;font-weight:800;color:#fff;text-shadow:0 .08em 0 #0002;box-shadow:inset 0 -.25em #0002,var(--shadow);transition:transform .08s,filter .15s;white-space:nowrap}.btn:active:not(:disabled){transform:translateY(.12em) scale(.98);box-shadow:inset 0 -.1em #0002}.btn:disabled{filter:grayscale(.8) opacity(.55)}.btn.big{font-size:1.35em;padding:.8em 1.2em;border-radius:1.1em}.btn.tiny{padding:.35em .6em;font-size:.85em;border-radius:.7em}.btn.wide{width:100%}.btn.yellow{background:linear-gradient(#ffd75e,#ffb72e);color:#6b3f00;text-shadow:0 .08em 0 #fff8}.btn.green{background:linear-gradient(#5ee0a2,#2fbf7c)}.btn.red{background:linear-gradient(#ff8796,#ff5a6e)}.btn.blue{background:linear-gradient(#7db7ff,#4f8ff7)}.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:.8em 1em;text-align:left;display:block;width:100%}.row{display:flex;justify-content:space-between;align-items:center;gap:.5em;margin-bottom:.4em}.pill{display:inline-block;padding:.2em .8em;border-radius:99em;color:#fff;font-weight:800;font-size:.9em}.note{color:var(--muted);font-size:.85em;text-align:center;margin:.8em 0 0}.dot{position:absolute;top:.3em;right:22%;width:.6em;height:.6em;border-radius:50%;background:var(--red);box-shadow:0 0 0 .15em #fff}.r0{--rc: var(--r0)}.r1{--rc: var(--r1)}.r2{--rc: var(--r2)}.r3{--rc: var(--r3)}.r4{--rc: var(--r4)}.pill.r0,.pill.r1,.pill.r2,.pill.r3,.pill.r4{background:var(--rc)}.gem{display:inline-block;width:.7em;height:.7em;transform:rotate(45deg);border-radius:.15em;background:var(--rc, var(--r0));box-shadow:0 0 0 .12em #fff}.tile{position:relative;aspect-ratio:1;border-radius:.9em;padding:.35em .35em .9em;background:linear-gradient(160deg,#fff,color-mix(in srgb,var(--rc) 22%,#fff));box-shadow:inset 0 0 0 .14em color-mix(in srgb,var(--rc) 55%,#fff),var(--shadow);transition:transform .1s}button.tile:active{transform:scale(.92)}button.tile:hover{transform:translateY(-.1em)}.tile .gem{position:absolute;left:.45em;top:.45em}.tile.v1{background:linear-gradient(160deg,#fffbe6,#ffe08a)}.tile.v2{background:linear-gradient(160deg,#e8e0ff,#b9a6ff)}.tile .count{position:absolute;right:.3em;top:.25em;font-size:.75em;font-weight:900;color:var(--ink);background:#fff;padding:0 .35em;border-radius:99em;box-shadow:var(--shadow)}.tile .badge{position:absolute;right:.15em;bottom:1em;font-size:.9em;filter:drop-shadow(0 .05em .1em #0003)}.tile .tval{position:absolute;left:0;right:0;bottom:.15em;text-align:center;font-size:.65em;font-weight:800}.tile.used{opacity:.35}.coins-tile{display:grid;place-items:center;align-content:center;padding:.3em;background:linear-gradient(160deg,#fffbe6,#ffe9a8);--rc: var(--r3);font-size:1.1em}.coins-tile span{font-size:1.8em}.slot{aspect-ratio:1;border-radius:.9em;border:.14em dashed #d7cdf3;display:grid;place-items:center;color:#c9bdf0;font-size:1.4em}@keyframes rise{0%{opacity:0;transform:translateY(.8em)}}@keyframes bob{50%{transform:translateY(-6%) scale(1.02,.98)}}@keyframes pop{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes shake{20%,60%{transform:translate(-4%)}40%,80%{transform:translate(4%)}}@keyframes hop{40%{transform:translateY(-12%) scale(1.05,.95)}}@keyframes pulse{50%{transform:scale(1.04)}}@keyframes glow{50%{box-shadow:0 0 0 .3em #ffc83d,var(--shadow)}}.bob{animation:bob 2.4s ease-in-out infinite}.bob.d1{animation-delay:-.8s}.bob.d2{animation-delay:-1.6s}.pop{animation:pop .45s cubic-bezier(.3,1.6,.5,1) both}.pulse{animation:pulse 1.6s ease-in-out infinite}.glow{animation:glow 1.2s ease-in-out infinite;border-radius:var(--radius)}.home{flex:1;min-height:0;display:grid;grid-template-columns:1.25fr 1fr;gap:1em;padding:0 1em 1em;overflow:auto}.hero{position:relative;border-radius:1.4em;overflow:hidden;min-height:14em;background:linear-gradient(#bfe3ff 0,#bfe3ff 55%,#c9f0c0 55%);box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:1em}.hero:before{content:"";position:absolute;left:8%;top:12%;width:22%;height:9%;border-radius:99em;background:#fff;box-shadow:14em 2em 0 -.4em #fff;opacity:.8}.logo{position:relative;font-size:2.6em;font-weight:900;line-height:.95;text-align:center;color:#fff;-webkit-text-stroke:.06em #7b5cd6;paint-order:stroke fill;text-shadow:0 .08em 0 #5a3fb0}.logo span{display:block;color:#ffc83d}.bubble{position:relative;background:#fff;padding:.5em .9em;border-radius:1em;box-shadow:var(--shadow);font-size:.9em}.mascots{position:relative;display:flex;align-items:flex-end;justify-content:center;width:100%;flex:1;max-height:16em;min-height:6em}.mascots>div{height:100%;aspect-ratio:1}.mascots .m1{height:100%}.mascots .m2,.mascots .m3{height:55%;margin:0 -4%}.side{display:flex;flex-direction:column;gap:.8em;min-height:0}.side .btn.big{font-size:1.6em}.hot{display:flex;gap:.8em;align-items:center;background:linear-gradient(120deg,#fff,#fff1dd)}.big-ico{font-size:2em}.hot small{display:block}.mission{display:grid;grid-template-columns:1fr auto auto;gap:.6em;align-items:center;padding:.4em 0;border-top:1px solid var(--line)}.mission .mtext span{display:block;font-size:.88em;margin-bottom:.25em}.mission .bar{height:.4em}.mission .pay{font-size:.85em;color:#b07a00}.mission.done .mtext span{color:#26a56c}.dock{flex-shrink:0;display:flex;justify-content:center;gap:.6em;padding:0 1em .8em}.dock button{position:relative;flex:1;max-width:8em;background:var(--card);border-radius:1em;padding:.45em;box-shadow:var(--shadow);font-size:.85em;display:flex;flex-direction:column;align-items:center}.dock .ico{font-size:1.6em}.select{flex:1;min-height:0;display:flex;flex-direction:column;gap:1em;padding:0 1em 1em;align-items:center}.traders{flex:1;min-height:0;width:100%;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(9em,1fr));gap:.8em;align-content:start;padding:.3em}.trader{position:relative;background:var(--card);border-radius:1.2em;padding:.8em .6em;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:.2em;text-align:center;transition:transform .12s}.trader .portrait{width:70%;aspect-ratio:1;background:radial-gradient(#fff,#f1ebff);border-radius:50%;padding:8%}.trader b{font-size:1.15em}.trader .diff{color:#ffb52e;letter-spacing:.1em}.trader.sel{box-shadow:0 0 0 .22em var(--green),var(--shadow);transform:translateY(-.2em)}.trader.locked{filter:grayscale(1);opacity:.55}.trader .lock{position:absolute;top:.5em;right:.5em;font-size:.75em;background:#fff;padding:.15em .5em;border-radius:99em}.trade{flex:1;min-height:0;display:grid;gap:.6em;padding:0 .8em .8em;position:relative;grid-template-columns:minmax(0,1fr) minmax(14em,1.15fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"you npc them" "inv inv inv" "act act act"}.panel{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:.6em .7em;min-width:0}.panel h3{font-size:1.05em;display:flex;justify-content:space-between;align-items:baseline;gap:.4em;margin-bottom:.45em}.panel h3 em{font-style:normal;font-size:.7em;background:var(--yellow);color:#6b3f00;padding:.1em .5em;border-radius:99em}.you{grid-area:you}.them{grid-area:them}.npc{grid-area:npc}.inv{grid-area:inv;display:flex;flex-direction:column;min-height:0}.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:.4em}.npc{display:flex;flex-direction:column;gap:.45em;background:linear-gradient(170deg,#fff,#f6f0ff)}.npc-row{display:flex;gap:.6em;align-items:center}.npc .portrait{position:relative;width:5.5em;flex-shrink:0;aspect-ratio:1;transition:opacity .5s,transform .5s}.npc .portrait.gone{opacity:.25;transform:translate(30%) scale(.8)}.npc .face{position:absolute;right:-.2em;bottom:-.1em;font-size:1.6em;background:#fff;border-radius:50%;width:1.4em;height:1.4em;display:grid;place-items:center;box-shadow:var(--shadow)}.npc.shake .portrait{animation:shake .4s}.npc.hop .portrait{animation:hop .45s}.speech{position:relative;flex:1;background:#fff;border:.12em solid var(--line);border-radius:1em;padding:.5em .7em;font-size:.92em;min-height:3.2em;display:flex;align-items:center}.speech:before{content:"";position:absolute;left:-.5em;top:50%;width:.8em;height:.8em;background:#fff;border-left:.12em solid var(--line);border-bottom:.12em solid var(--line);transform:translateY(-50%) rotate(45deg)}.patience{display:flex;align-items:center;gap:.5em;font-size:.8em}.patience .bar{flex:1}.meter .track{position:relative;height:.9em;border-radius:99em;background:linear-gradient(90deg,#ff5a6e,#ffb04a 30%,#ffe35a,#8fe36a 70%,#2fbf7c);box-shadow:inset 0 .1em .2em #0002}.meter .track i{position:absolute;top:50%;width:1.4em;height:1.4em;border-radius:50%;background:#fff;border:.25em solid var(--ink);transform:translate(-50%,-50%);transition:left .35s cubic-bezier(.3,1.4,.5,1)}.meter .labels{display:flex;justify-content:space-between;align-items:center;font-size:.78em;margin-top:.3em;color:var(--muted)}.meter .labels b{font-size:1.25em;color:var(--ink)}.cls0{color:#e8384f!important}.cls1{color:#f08a2e!important}.cls2{color:#c9a400!important}.cls3{color:#3fb36a!important}.cls4{color:#1f9d6a!important}.inv .grid{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(4.2em,1fr));gap:.45em;align-content:start;padding:.2em}.empty{grid-column:1 / -1;text-align:center;color:var(--muted)}.actions{grid-area:act;display:grid;grid-template-columns:repeat(3,1fr);gap:.6em}.actions .btn{font-size:1.15em}.actions .btn.wide{grid-column:1 / -1}.hint{position:absolute;left:50%;bottom:4.6em;transform:translate(-50%);width:min(92%,34em);z-index:5;background:var(--ink);color:#fff;padding:.7em 1em;border-radius:1em;box-shadow:0 .4em 1.2em #0004;font-size:.92em;text-align:center;animation:rise .3s both;pointer-events:none}.tut-inv .hint{bottom:auto;top:46%}.result{position:relative;flex:1;min-height:0;overflow:hidden auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1em;padding:1em;background:radial-gradient(circle at 50% 45%,#fff7d6,#ffd9ec 45%,#c9b6ff)}.result.shake{animation:shake .35s .35s}.rays{position:absolute;left:50%;top:45%;width:160vmax;height:160vmax;transform:translate(-50%,-50%);background:repeating-conic-gradient(#fff6 0 8deg,transparent 8deg 20deg);animation:spin 18s linear infinite;pointer-events:none}@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}.confetti{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.confetti i{position:absolute;top:-5%;width:.6em;height:1em;border-radius:.15em;animation:fall linear infinite}@keyframes fall{to{transform:translateY(115vh) rotate(720deg)}}.result .title{position:relative;font-size:2.4em;font-weight:900;color:#fff;-webkit-text-stroke:.06em #e08a00;paint-order:stroke fill;text-shadow:0 .08em 0 #c06a00;text-align:center}.result-body{position:relative;display:flex;gap:1.5em;align-items:center;justify-content:center;flex-wrap:wrap}.prize{display:flex;flex-direction:column;align-items:center;gap:.4em}.prize .big{width:11em;aspect-ratio:1;filter:drop-shadow(0 0 1.2em color-mix(in srgb,var(--rc, #fff) 70%,transparent))}.coinbig{font-size:6em;width:auto!important;display:grid;place-items:center}.prize h2{font-size:1.5em}.new{background:#fff;color:var(--purple);padding:.2em .7em;border-radius:99em;font-weight:800;animation:pulse 1.2s infinite}.others{display:flex;gap:.4em}.others .tile{width:3.6em}.gains{width:auto;min-width:13em;display:flex;flex-direction:column;gap:.35em}.gains .g{display:flex;justify-content:space-between;gap:1em}.up{color:#26a56c}.down{color:#e8384f}.hl{background:#fff3c4;border-radius:.6em;padding:.25em .6em;font-size:.9em}.hl.green{background:#dcf7e9}.result-actions{position:relative;display:flex;gap:.8em;flex-wrap:wrap;justify-content:center}.result-actions .btn{font-size:1.2em}.collection{flex:1;min-height:0;display:grid;grid-template-columns:11em 1fr;gap:.8em;padding:0 1em 1em}.filters{display:flex;flex-direction:column;gap:.35em;overflow:auto;min-height:0}.fchip{display:flex;align-items:center;gap:.5em;padding:.45em .8em;border-radius:99em;background:var(--card);box-shadow:var(--shadow);white-space:nowrap;font-size:.9em}.fchip small{margin-left:auto}.fchip.on{background:var(--purple);color:#fff}.fchip.on small{color:#fffc}.col-main{display:flex;flex-direction:column;gap:.7em;min-height:0}.col-head{display:flex;gap:.8em;align-items:center}.prog{flex:1}.prog .bar{margin-top:.3em}.col-head input{font:inherit;border:0;border-radius:99em;padding:.55em 1em;background:var(--card);box-shadow:var(--shadow);width:13em;max-width:45%;color:var(--ink);outline-color:var(--purple);-webkit-user-select:text;user-select:text}.cgrid{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(6.5em,1fr));gap:.6em;align-content:start;padding:.2em}.ccard{position:relative;background:linear-gradient(170deg,#fff,color-mix(in srgb,var(--rc, #ddd) 20%,#fff));border-radius:1em;padding:.5em .5em .4em;box-shadow:inset 0 0 0 .14em color-mix(in srgb,var(--rc, #ddd) 50%,#fff),var(--shadow);display:flex;flex-direction:column;align-items:center;gap:.2em}.ccard svg{width:85%;aspect-ratio:1;height:auto}.ccard b{font-size:.78em;text-align:center}.ccard .gem{position:absolute;left:.5em;top:.5em}.ccard .count{position:absolute;right:.4em;top:.35em;font-size:.75em;font-weight:900}.ccard.unknown svg,.variant.unknown svg{filter:brightness(0);opacity:.15}.ccard.unknown{background:#f4f1fb;box-shadow:inset 0 0 0 .14em #e6e0f5}.ccard.unknown b{color:var(--muted)}.shop{flex:1;min-height:0;overflow:auto;padding:0 1em 1em}.boxes{display:grid;grid-template-columns:repeat(auto-fill,minmax(10em,1fr));gap:.8em}.boxcard{background:var(--card);border-radius:1.2em;box-shadow:var(--shadow);padding:.8em;display:flex;flex-direction:column;align-items:center;gap:.35em;text-align:center}.boxcard.free{background:linear-gradient(170deg,#fff,#e3fbe9)}.boxart{width:6em;aspect-ratio:1}.boxcard small{display:flex;gap:.4em;min-height:1.2em;align-items:center}.boxcard .btn{width:100%}.boxcard.opening .boxart{animation:shake .25s infinite}.modal-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;background:#2a1f4a66;display:grid;place-items:center;padding:1em;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.modal{position:relative;background:#fff;border-radius:1.4em;padding:1.2em 1.3em;width:min(30em,100%);max-height:92%;overflow:auto;box-shadow:0 1em 3em #0003}.modal h2{margin-bottom:.6em;font-size:1.3em}.modal .close{position:absolute;right:.6em;top:.6em;box-shadow:none;background:#f2eefc}.setting{display:flex;justify-content:space-between;align-items:center;gap:1em;padding:.6em 0;border-bottom:1px solid var(--line)}.setting input[type=range]{width:50%;accent-color:var(--purple)}.setting input[type=checkbox]{width:1.4em;height:1.4em;accent-color:var(--green)}.modal .btn.wide{margin-top:1em}.help{padding-left:1.2em;margin:0;display:flex;flex-direction:column;gap:.6em;font-weight:500}.detail{display:flex;flex-direction:column;align-items:center;gap:.4em;text-align:center}.detail .big{width:9em;aspect-ratio:1}.detail p{margin:.2em 0;color:var(--muted)}.variants{display:flex;gap:.8em}.variant{width:5em;display:flex;flex-direction:column;align-items:center;gap:.2em}.variant svg{width:4em;height:4em}#toasts{position:fixed;top:4em;left:50%;transform:translate(-50%);z-index:30;display:flex;flex-direction:column;gap:.4em;align-items:center;pointer-events:none}.toast{background:var(--ink);color:#fff;padding:.55em 1.1em;border-radius:99em;box-shadow:0 .3em 1em #0003;animation:rise .3s both,rise .3s 2.5s reverse both}#pause{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#2a1f4acc;color:#fff;place-items:center;font-size:2em}body.paused #pause{display:grid}body.paused *,body.paused *:before,body.paused *:after{animation-play-state:paused!important}@media (max-aspect-ratio: 13/10){.home{grid-template-columns:1fr}.hero{min-height:16em}.trade{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"npc npc" "you them" "inv inv" "act act"}}@media (max-aspect-ratio: 4/5){.trade{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(6em,1fr) auto;grid-template-areas:"npc" "them" "you" "inv" "act";gap:.45em}.trade .slots{grid-template-columns:repeat(4,minmax(0,4.2em))}.actions{gap:.4em}.actions .btn{font-size:1em;padding:.7em .3em}.panel h3 small{white-space:nowrap}.collection{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}.filters{flex-direction:row;overflow-x:auto;padding-bottom:.3em}.chip.lvl .bar,.chip.lvl .avatar{display:none}.hotchip{font-size:.75em}.topbar h1{font-size:1.1em}}@media (min-aspect-ratio: 2/1){.trade .slots{grid-template-columns:repeat(4,minmax(0,4.6em))}.npc .portrait{width:4.2em}.hero{min-height:0}}.coin{display:inline-block;width:1em;height:1em;border-radius:50%;vertical-align:-.15em;background:radial-gradient(circle at 35% 30%,#fff6c2,#ffcc3d 40%,#e8a200);box-shadow:inset 0 0 0 .09em #d08a00,inset 0 0 0 .2em #ffd86a}.streak{background:linear-gradient(120deg,#fff1dd,#ffd9b0);font-weight:800}.favs{font-size:1.1em}.complete{background:linear-gradient(120deg,#fff3c4,#ffe0f0);border-radius:1em;padding:.6em 1em;text-align:center;font-weight:800}.speech i{font-style:normal;color:var(--muted);font-size:.85em}.setting select{font:inherit;color:var(--ink);border:0;border-radius:.7em;padding:.35em .6em;background:#f2eefc}
