/* Plumplings · "Plum Pop" brand. Night-carnival plum backdrop so the holo cards and candy letters glow.
   Layout: sticky top bar, one centred column per view (max 1040px), cards in responsive grids. Single dark look by design. */
:root{
  --bg:#1a0e24; --bg2:#2a1638; --panel:#2f1a3f; --panel2:#3b2350; --line:#5a3973;
  --ink:#fff4fb; --muted:#cdb4dc;
  --berry:#E0457B; --yellow:#FFC93C; --mint:#3DD6A6; --purple:#8E4BC9; --plum:#6B2D7B; --outline:#2A1638;
  --display:"Fredoka","Arial Rounded MT Bold",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}[hidden]{display:none!important}
html,body{background:var(--bg);color:var(--ink);height:auto}
body{margin:0;font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
  background:radial-gradient(1200px 600px at 50% -200px,#4a1f5f 0%,transparent 70%),radial-gradient(900px 500px at 100% 40%,rgba(224,69,123,.12),transparent 70%),var(--bg);background-attachment:fixed}
a{color:var(--yellow)}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;line-height:1.05;text-wrap:balance}
h1{font-size:clamp(34px,7vw,60px)}h2{font-size:clamp(26px,5vw,38px)}h3{font-size:22px}
p{margin:0}
.muted{color:var(--muted)}
.eyebrow{font-family:var(--body);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.gutter{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.col{max-width:1040px;margin:0 auto;width:100%}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* top bar */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg2)}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(42,22,56,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .col{display:flex;align-items:center;gap:12px;min-height:60px;padding-block:6px}
.brand{display:flex;align-items:center;gap:8px;cursor:pointer;background:none;border:0;padding:0}
.brand svg{height:40px;width:auto;display:block}
.nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.nav button{background:none;border:0;color:var(--muted);font:700 14px var(--body);padding:8px 10px;border-radius:999px;cursor:pointer}
.nav button.on,.nav button:hover{color:var(--ink);background:var(--panel2)}
.nav .acct{color:var(--yellow)}
@media (max-width:720px){.nav{display:none}.brand svg{height:34px}}
.tabbar{display:none}
@media (max-width:720px){
  .tabbar{display:grid;grid-template-columns:repeat(6,1fr);position:fixed;left:0;right:0;bottom:0;z-index:20;background:rgba(42,22,56,.97);border-top:1px solid var(--line);
    padding:6px max(6px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px))}
  .tabbar button{background:none;border:0;color:var(--muted);font:700 11px var(--body);display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px;cursor:pointer}
  .tabbar button.on{color:var(--yellow)}
  .tabbar svg{width:22px;height:22px}
  main{padding-bottom:84px}
}

/* buttons, inputs */
.btn{font:700 16px var(--display);letter-spacing:.02em;border:0;border-radius:999px;padding:12px 22px;cursor:pointer;color:var(--outline);background:var(--yellow);box-shadow:0 4px 0 #b88a12;transition:transform .08s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #b88a12}
.btn.berry{background:var(--berry);color:#fff;box-shadow:0 4px 0 #9b2350}
.btn.mint{background:var(--mint);box-shadow:0 4px 0 #22906f}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--line);box-shadow:none}
.btn.small{font-size:14px;padding:8px 14px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
button:focus-visible,input:focus-visible,a:focus-visible,.hcard:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.field{font:600 17px var(--body);background:var(--bg);color:var(--ink);border:2px solid var(--line);border-radius:14px;padding:12px 14px;min-width:0;flex:1 1 220px}
.field.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:20px}
.msg{font-weight:700;min-height:1.4em}.msg.ok{color:var(--mint)}.msg.err{color:#ff8fb1}
.chip{display:inline-flex;align-items:center;gap:6px;font:800 12px var(--body);letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:var(--panel2);color:var(--muted)}
.chip.gold{background:var(--yellow);color:var(--outline)}
.chip.mint{background:rgba(61,214,166,.15);color:var(--mint)}
.demo-note{border:2px dashed var(--yellow);border-radius:16px;padding:12px 14px;font-size:14px;color:var(--yellow);background:rgba(255,201,60,.06)}
details.demo summary{cursor:pointer;color:var(--yellow);font-weight:700}
details.demo code{font-family:ui-monospace,Menlo,monospace;cursor:pointer;color:var(--ink);background:var(--bg);padding:2px 6px;border-radius:6px}

main{padding-block:24px 48px}
.view{display:flex;flex-direction:column;gap:28px}

/* home */
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center}
.hero .logo-big svg{width:100%;max-width:560px;height:auto;display:block}
.hero .show{display:flex;justify-content:center;perspective:900px}
.hero .show .hcard{width:min(270px,70vw)}
@media (max-width:760px){.hero{grid-template-columns:1fr}.hero .show{order:-1}}
.tagline{font:700 clamp(22px,4vw,30px) var(--display);color:var(--yellow)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.step{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:8px;min-width:0}
.step .n{font:700 34px var(--display);color:var(--berry);line-height:1}
@media (max-width:720px){.steps{grid-template-columns:1fr}}
.series-rail{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.srail{border-radius:18px;padding:12px;background:var(--panel);border:1px solid var(--line);text-align:center;display:flex;flex-direction:column;gap:4px;min-width:0}
.srail b{font:700 20px var(--display)}
.srail.on{background:linear-gradient(160deg,#5b2a7a,#2f1a3f);border-color:var(--yellow)}
.srail.off{opacity:.65}
@media (max-width:720px){.series-rail{grid-template-columns:repeat(3,1fr)}}

/* holo card */
.hcard{display:block;width:100%;border:0;font:inherit;color:inherit;text-align:left;margin:0;--mx:50%;--my:50%;--rx:0deg;--ry:0deg;container-type:inline-size;position:relative;aspect-ratio:5/7;border-radius:7%/5%;padding:0;transform-style:preserve-3d;
  background:linear-gradient(135deg,#e6ebf8,#9aa0c4 50%,#e0e4f4);transform:perspective(800px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .2s ease-out, filter .3s;
  box-shadow:0 10px 24px rgba(0,0,0,.45);user-select:none;-webkit-user-select:none;cursor:pointer}
.hcard.special{background:linear-gradient(135deg,#fff3b8,#e2a62a 40%,#fff0a0 60%,#c98a12)}
.hcard.special::before{content:"";position:absolute;inset:-6%;border-radius:10%/7%;background:radial-gradient(closest-side,rgba(255,201,60,.55),transparent);z-index:-1;animation:glow 2.4s ease-in-out infinite alternate}
@keyframes glow{to{opacity:.4;transform:scale(1.04)}}
.hcard.lv3{background:linear-gradient(135deg,#fff,#ffd6ea 30%,#b8f3e0 60%,#d8c4ff)}
.hcard.lv5{background:conic-gradient(from 0deg,#ff7fb6,#ffc93c,#3dd6a6,#8e9bff,#ff7fb6)}
.hcard .in{position:absolute;inset:2.6cqw;border-radius:5cqw;background:linear-gradient(180deg,#2c1b3d,#1f1229);overflow:hidden;display:flex;flex-direction:column}
.hcard.special .in{background:linear-gradient(180deg,#3a1d54,#14352c)}
.hcard .top-l{display:flex;justify-content:space-between;align-items:center;height:9cqw;flex:none;padding:0 4cqw;font:800 5.2cqw var(--body);letter-spacing:.06em;color:var(--muted)}
.hcard.special .top-l{color:var(--yellow)}
.hcard .art{margin:0 3.5cqw;flex:none;border-radius:4cqw;background:radial-gradient(circle at 50% 40%,#5a3a7a,#2a1a3a 75%);overflow:hidden}
.hcard.special .art{background:radial-gradient(circle at 50% 40%,#7a4ab0,#1d4a3d 80%)}
.hcard .art canvas{display:block;width:100%;aspect-ratio:1.18}
.hcard .nm{font:700 10.5cqw var(--display);padding:2cqw 4cqw 0;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcard .pips{display:grid;grid-template-columns:auto 1fr;gap:.6cqw 3cqw;padding:2cqw 4cqw;font:800 4.6cqw var(--body);color:var(--muted);letter-spacing:.05em;align-items:center}
.hcard .pp{display:flex;gap:1.6cqw}.hcard .pp i{width:4.6cqw;height:4.6cqw;border-radius:50%;background:#4a3260}.hcard .pp i.on{background:var(--berry)}.hcard .pp i.tr{background:var(--mint);box-shadow:0 0 0 .6cqw rgba(61,214,166,.35)}
.hcard.special .pp i.on{background:var(--yellow)}
.hcard .sp{margin-top:auto;padding:0 4cqw 3.5cqw;font:800 5.6cqw var(--body);color:var(--yellow);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcard::after{content:"";position:absolute;inset:0;border-radius:7%/5%;pointer-events:none;mix-blend-mode:color-dodge;opacity:.65;
  background:linear-gradient(115deg,transparent 25%,rgba(255,90,170,.5) 36%,rgba(255,220,90,.5) 44%,rgba(90,255,200,.5) 52%,rgba(110,140,255,.5) 60%,transparent 72%);
  background-size:260% 260%;background-position:var(--mx) var(--my);animation:sheen 6s ease-in-out infinite alternate}
.hcard.touch::after{animation:none}
@keyframes sheen{0%{background-position:0% 0%}100%{background-position:100% 100%}}
.hcard.plain{background:linear-gradient(135deg,#8a8098,#5e566b)}
.hcard.plain::after{display:none}
.hcard.plain .art{filter:saturate(.35)}
.hcard .practice{position:absolute;z-index:5;top:54%;left:50%;transform:translateZ(60px) translate(-50%,-50%) rotate(-8deg);font:800 6cqw var(--body);letter-spacing:.1em;background:#2a1638;color:#fff;padding:1cqw 3cqw;border-radius:2cqw;opacity:.9}
.hcard.locked{background:linear-gradient(135deg,#3e2c50,#2a1d38);cursor:default;box-shadow:none}
.hcard.locked::after{display:none}
.hcard.locked .art canvas{filter:brightness(0) opacity(.55)}
.hcard.locked .nm,.hcard.locked .sp{color:var(--muted)}
.hcard.locked.special{background:linear-gradient(135deg,#6a5420,#3a2d10)}
.hcard .lockbadge{position:absolute;z-index:5;top:54%;left:50%;transform:translateZ(60px) translate(-50%,-50%);font:800 6cqw var(--body);background:rgba(26,14,36,.85);color:var(--ink);border-radius:999px;padding:1.5cqw 4cqw;white-space:nowrap}
.hcard.special .lockbadge{color:var(--yellow)}
.hcard.secret .art canvas{filter:brightness(0) opacity(.6)}
/* battle meter */
.hcard .meter{position:absolute;left:4cqw;right:4cqw;bottom:3cqw;height:5cqw;border-radius:99px;background:rgba(0,0,0,.55);overflow:hidden}
.hcard .meter i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--mint),#a6ffe0);border-radius:99px;transition:width .4s}
.hcard .meter.low i{background:linear-gradient(90deg,var(--berry),#ff9ec1)}
.hcard .meter b{position:absolute;inset:0;font:800 4.2cqw var(--body);display:flex;align-items:center;justify-content:center;color:#fff;text-shadow:0 1px 2px #000}

/* collection */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.series-head{display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap}
.progress{height:12px;background:var(--panel2);border-radius:99px;overflow:hidden;min-width:180px;flex:1}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--berry),var(--yellow));border-radius:99px}
.special-callout{display:flex;gap:16px;align-items:center;background:linear-gradient(120deg,rgba(255,201,60,.16),rgba(142,75,201,.18));border:1px solid rgba(255,201,60,.5);border-radius:20px;padding:14px 16px;flex-wrap:wrap}
.special-callout .t{flex:1 1 240px;min-width:0}

/* modal + reveal */
.modal{position:fixed;inset:0;z-index:50;background:rgba(14,6,20,.88);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;
  padding:calc(20px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));overflow:auto;text-align:center}
.modal .hcard{width:min(300px,72vw);flex:none}
#fx{position:fixed;inset:0;pointer-events:none;z-index:60;width:100%;height:100%}
.pack{width:min(240px,62vw);aspect-ratio:5/7;border-radius:20px;position:relative;cursor:pointer;
  background:linear-gradient(135deg,#E0457B,#8E4BC9 55%,#3DD6A6);box-shadow:0 0 0 6px var(--outline),0 0 60px rgba(255,201,60,.5);animation:wob 1.2s ease-in-out infinite;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px}
.pack.gold{background:linear-gradient(135deg,#fff1b0,#e2a62a 50%,#8E4BC9)}
.pack::after{content:"";position:absolute;inset:0;border-radius:20px;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 45%,transparent 60%);background-size:250% 250%;animation:sheen 1.8s linear infinite}
.pack span{font:700 26px var(--display);color:#fff;text-shadow:0 3px 0 var(--outline)}
@keyframes wob{0%,100%{transform:rotate(-3deg) scale(1)}50%{transform:rotate(3deg) scale(1.04)}}
.pack.burst{animation:burst .45s ease-in forwards}
@keyframes burst{to{transform:scale(1.6);opacity:0;filter:brightness(3)}}
.flipin{animation:flipin .8s cubic-bezier(.2,.8,.2,1.1) both}
@keyframes flipin{from{transform:perspective(800px) rotateY(540deg) scale(.3);opacity:0}to{transform:perspective(800px) rotateY(0) scale(1);opacity:1}}

/* battle */
.arena{display:flex;flex-direction:column;gap:12px;border-radius:26px;padding:14px;background:radial-gradient(circle at 50% 50%,#43205a,#1d0f28 70%);border:1px solid var(--line);position:relative;overflow:hidden}
.arena.flash::before{content:"";position:absolute;inset:0;background:rgba(255,201,60,.35);animation:fl .5s ease-out forwards;pointer-events:none;z-index:5}
@keyframes fl{to{opacity:0}}
.side{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,2.5vw,18px);max-width:560px;margin:0 auto;width:100%}
.side .slot{position:relative}
.side .hcard.sel{transform:perspective(800px) translateY(-8px) scale(1.04);box-shadow:0 0 0 3px var(--yellow),0 14px 30px rgba(0,0,0,.5)}
.side .hcard.target{box-shadow:0 0 0 3px var(--berry),0 10px 24px rgba(0,0,0,.45);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px var(--berry),0 10px 24px rgba(0,0,0,.45)}}
.side .hcard.dizzy{filter:grayscale(1) brightness(.5);transform:perspective(800px) rotate(-6deg) scale(.94)}
.side .hcard.frozen{filter:hue-rotate(160deg) saturate(.6) brightness(1.1)}
.side .hcard.slip{opacity:.55}
.side .hcard.braced{box-shadow:0 0 0 3px var(--mint)}
.lunge-up{animation:lu .45s ease}.lunge-down{animation:ld .45s ease}
@keyframes lu{40%{transform:perspective(800px) translateY(-40%) scale(1.08)}}
@keyframes ld{40%{transform:perspective(800px) translateY(40%) scale(1.08)}}
.wobble{animation:wb .5s ease}
@keyframes wb{20%{transform:perspective(800px) rotate(-7deg)}40%{transform:perspective(800px) rotate(6deg)}60%{transform:perspective(800px) rotate(-4deg)}80%{transform:perspective(800px) rotate(2deg)}}
.float{position:absolute;left:50%;top:30%;transform:translate(-50%,0);font:700 clamp(18px,5vw,28px) var(--display);color:#fff;text-shadow:0 3px 0 var(--outline),0 0 12px rgba(0,0,0,.6);pointer-events:none;animation:up 1.1s ease-out forwards;white-space:nowrap;z-index:6}
.float.heal{color:var(--mint)}.float.gold{color:var(--yellow)}.float.pink{color:#ff9ec1}
@keyframes up{to{transform:translate(-50%,-90%);opacity:0}}
.banner{text-align:center;font:700 clamp(18px,4vw,24px) var(--display);min-height:1.5em}
.banner.you{color:var(--yellow)}.banner.rival{color:var(--mint)}
.actbar{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;min-height:52px;text-align:center}
.actbar .hint{color:var(--muted);font-size:14px;max-width:420px}
.vs-strip{display:flex;justify-content:space-between;align-items:center;gap:10px;font:700 15px var(--display);color:var(--muted);max-width:560px;margin:0 auto;width:100%}
.ladder{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.stage{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:6px;text-align:left;color:var(--ink);font:inherit;cursor:pointer}
.stage.lock{opacity:.45;cursor:not-allowed}
.stage .stars{color:var(--yellow);letter-spacing:2px;font-size:18px}
.stage b{font:700 19px var(--display)}
.pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px}
.pickgrid .hcard.sel{box-shadow:0 0 0 4px var(--yellow),0 10px 24px rgba(0,0,0,.45)}
.daily{background:linear-gradient(120deg,#E0457B,#8E4BC9);border-radius:22px;padding:18px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.daily .t{flex:1 1 240px;min-width:0}
.daily .btn{background:#fff;color:var(--outline);box-shadow:0 4px 0 #cbb6d8}

/* verify */
.seal{display:inline-flex;align-items:center;gap:8px;font:700 18px var(--display);color:var(--mint)}
.seal svg{width:28px;height:28px}
.vcard{display:grid;grid-template-columns:220px 1fr;gap:22px;align-items:center}
@media (max-width:640px){.vcard{grid-template-columns:1fr;justify-items:center;text-align:center}}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:15px}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}

footer{border-top:1px solid var(--line);padding-block:22px 40px;color:var(--muted);font-size:13px}
footer .col{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between}

/* 3D pop-out Plumpling: sits in front of the card and moves with the tilt */
.hcard .pop{position:absolute;left:6.1cqw;width:87.8cqw;top:.4cqw;aspect-ratio:236/230;pointer-events:none;z-index:3;
  transform:translateZ(46px) translateX(calc(var(--ry) * -.35)) translateY(calc(var(--rx) * .35));filter:drop-shadow(0 6px 6px rgba(0,0,0,.45))}
.hcard .pop canvas{display:block;width:100%;height:100%}
.hcard .in .art{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 -10px 24px rgba(0,0,0,.35)}
.hcard .nm,.hcard .pips,.hcard .sp{transform:translateZ(0)}
.hcard.touch{transition:transform .08s linear,filter .3s}
.hcard.touch{box-shadow:calc(var(--ry) * -1.2) calc(var(--rx) * 1.2 + 16px) 34px rgba(0,0,0,.5)}
.hcard::before{content:"";position:absolute;inset:0;border-radius:7%/5%;pointer-events:none;z-index:4;
  background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.35),transparent 45%);opacity:0;transition:opacity .25s}
.hcard.touch::before{opacity:1}
.hcard.special::before{inset:0;z-index:4;animation:none;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,240,180,.45),transparent 45%)}
.hcard.special{box-shadow:0 0 28px rgba(255,201,60,.55),0 10px 24px rgba(0,0,0,.45);animation:goldglow 2.4s ease-in-out infinite alternate}
@keyframes goldglow{to{box-shadow:0 0 44px rgba(255,201,60,.85),0 10px 24px rgba(0,0,0,.45)}}
.hcard.locked .pop canvas,.hcard.secret .pop canvas{filter:brightness(0) opacity(.55)}
.hcard.plain .pop{filter:saturate(.4) drop-shadow(0 6px 6px rgba(0,0,0,.45))}
.side .hcard.dizzy .pop{opacity:.8}

/* page entrances and site-wide motion */
.view.enter>*{animation:rise .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
.enter .grid>*,.enter .pickgrid>*,.enter .ladder>*,.enter .series-rail>*,.enter .steps>*{animation:popin .5s cubic-bezier(.2,.9,.3,1.3) both;animation-delay:calc(var(--j,0) * 45ms + 120ms)}
@keyframes popin{from{opacity:0;transform:translateY(14px) scale(.9)}}
.logo-big{animation:floaty 5s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-8px) rotate(-.6deg)}}
.brand img{transition:transform .3s cubic-bezier(.2,.9,.3,1.6)}.brand:hover img{transform:rotate(-4deg) scale(1.06)}
.btn{transition:transform .15s cubic-bezier(.2,.9,.3,1.6),box-shadow .15s,filter .15s}
.btn:hover:not(:disabled){transform:translateY(-2px) scale(1.03);filter:brightness(1.06)}
.btn:active:not(:disabled){transform:translateY(3px) scale(.98)}
.btn.glow{animation:btnglow 1.8s ease-in-out infinite}
@keyframes btnglow{50%{box-shadow:0 4px 0 #b88a12,0 0 22px rgba(255,201,60,.7)}}
.step,.srail,.stage,.panel{transition:transform .25s cubic-bezier(.2,.9,.3,1.4),border-color .25s}
.step:hover,.srail:hover,.stage:not(.lock):hover{transform:translateY(-4px)}
.step .n{display:inline-block;animation:bobn 2.6s ease-in-out infinite}
.step:nth-child(2) .n{animation-delay:.4s}.step:nth-child(3) .n{animation-delay:.8s}
@keyframes bobn{50%{transform:translateY(-5px) rotate(-6deg)}}
.srail.on{animation:railglow 2.2s ease-in-out infinite alternate}
@keyframes railglow{to{box-shadow:0 0 22px rgba(255,201,60,.45)}}
.srail.off b{background:linear-gradient(90deg,var(--muted),#fff,var(--muted));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shim 2.4s linear infinite}
@keyframes shim{to{background-position:-200% 0}}
.progress i{animation:fillin 1.1s cubic-bezier(.2,.8,.2,1) both .3s;transform-origin:left}
@keyframes fillin{from{transform:scaleX(0)}}
.tabbar button.on svg{animation:tabpop .45s cubic-bezier(.2,.9,.3,1.8)}
@keyframes tabpop{40%{transform:translateY(-5px) scale(1.2)}}
.nav button{transition:color .2s,background .2s,transform .2s}.nav button:hover{transform:translateY(-1px)}
.seal svg{animation:stamp .7s cubic-bezier(.2,.9,.3,1.6) both .2s}
@keyframes stamp{from{transform:scale(2.4) rotate(-30deg);opacity:0}}
.field.code:focus{animation:fieldglow 1.6s ease-in-out infinite}
@keyframes fieldglow{50%{box-shadow:0 0 0 4px rgba(255,201,60,.25)}}
.chip.gold{animation:chipshine 2.8s linear infinite;background:linear-gradient(100deg,var(--yellow) 40%,#fff6cf 50%,var(--yellow) 60%);background-size:250% 100%}
@keyframes chipshine{from{background-position:120% 0}to{background-position:-120% 0}}
main,footer{position:relative;z-index:1}
#ambient{position:fixed;inset:0;z-index:0;pointer-events:none;width:100%;height:100%}
.modal .pair{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap;flex:none}
.modal .power{width:min(300px,72vw);aspect-ratio:5/7;flex:none;animation:flipin .8s cubic-bezier(.2,.8,.2,1.1) both .25s}
/* quests */
.hcard.powered{box-shadow:0 0 0 3px var(--mint),0 0 26px rgba(61,214,166,.6),0 10px 24px rgba(0,0,0,.45)}
.bag{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.bagi{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:12px}
.bagi>div{display:flex;flex-direction:column;min-width:0}.bagi .muted{font-size:13px}.bagi.none{opacity:.55}
.ic{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:24px;color:#fff;font-weight:800;box-shadow:inset 0 -4px 0 rgba(0,0,0,.2)}
.trips{display:grid;gap:12px}
.trip{display:grid;grid-template-columns:minmax(0,360px) 1fr;gap:16px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:12px}
.trip canvas,.place canvas{display:block;width:100%;aspect-ratio:360/200;border-radius:14px}
.trip.ready{border-color:var(--yellow);animation:railglow 1.6s ease-in-out infinite alternate}
@media (max-width:640px){.trip{grid-template-columns:1fr}}
.places{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.place{background:var(--panel);border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s cubic-bezier(.2,.9,.3,1.4)}
.place canvas{border-radius:0}.place:not(.lock):hover{transform:translateY(-4px)}.place.lock canvas{filter:grayscale(.8) brightness(.6)}
.place>.btn{margin-top:auto!important}
.shelf{display:flex;flex-wrap:wrap;gap:8px}
.loot{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;text-align:left}
.loot li{display:flex;gap:12px;align-items:center;font:700 18px var(--display);animation:popin .5s cubic-bezier(.2,.9,.3,1.5) both}
.pbar.armed{border-color:var(--mint)}
.prow{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.pslot{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:6px}
.pon{color:var(--mint);font-weight:800}
.btn.big{font-size:20px;padding:16px 28px;touch-action:manipulation}
.acts{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.actb{display:flex;gap:12px;align-items:center;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:10px 12px;color:var(--ink);font:inherit;cursor:pointer;transition:transform .2s cubic-bezier(.2,.9,.3,1.5)}
.actb:hover:not(:disabled){transform:translateY(-3px)}.actb>span:last-child{display:flex;flex-direction:column}.actb .muted{font-size:13px}
.choose{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(460px,100%)}
.pick{background:var(--c);color:#fff;border:0;border-radius:18px;padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;font:inherit;box-shadow:inset 0 -5px 0 rgba(0,0,0,.2);transition:transform .15s cubic-bezier(.2,.9,.3,1.6)}
.pick:hover{transform:translateY(-4px) scale(1.04)}.pick b{font:700 34px var(--display)}.pick span{font:700 18px var(--display)}.pick small{opacity:.9}
.shopbtn{margin-left:auto;flex:none;background:var(--berry);color:#fff;box-shadow:0 3px 0 #9b2350;text-decoration:none}
.nav+.shopbtn{margin-left:4px}
@media (max-width:720px){.nav+.shopbtn{margin-left:auto}}
.shopstrip{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;border:1px dashed var(--line);border-radius:18px;padding:12px 14px;background:rgba(255,255,255,.02)}
.shopstrip .t{min-width:0;flex:1 1 260px}.shopstrip .mini{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.shopstrip .mini a:hover{transform:translateY(-3px)}.shopstrip .mini a{text-decoration:none;transition:transform .2s cubic-bezier(.2,.9,.3,1.6);display:flex;flex-direction:column;align-items:center;width:52px}.shopstrip canvas{width:44px;height:44px}.shopstrip small{font-size:11px;color:var(--muted)}
/* no tap flash on phones; smooth modal entrance */
*{-webkit-tap-highlight-color:transparent}
canvas{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.modal{animation:modalin .22s ease-out both}
@keyframes modalin{from{opacity:0}}
.sndbtn{flex:none;background:none;border:2px solid var(--line);border-radius:999px;width:40px;height:40px;font-size:18px;cursor:pointer;color:var(--ink);margin-left:auto}
.nav+.sndbtn{margin-left:6px}.sndbtn+.shopbtn{margin-left:6px}
@media (max-width:720px){.nav+.sndbtn{margin-left:auto}}
/* limited edition finish (seasonal series): red, green and gold foil with drifting snow */
.hcard.limited{background:linear-gradient(135deg,#d1362f,#f6d27a 30%,#2f8f4e 55%,#f6d27a 75%,#d1362f);background-size:220% 220%;animation:ltdfoil 6s ease-in-out infinite alternate}
@keyframes ltdfoil{to{background-position:100% 100%}}
.hcard.limited .in{background:linear-gradient(180deg,#3a1420,#123222)}
.hcard.limited::after{background:linear-gradient(115deg,transparent 22%,rgba(255,80,80,.55) 34%,rgba(255,220,120,.6) 44%,rgba(80,220,140,.55) 54%,rgba(255,255,255,.5) 60%,transparent 72%);background-size:260% 260%;opacity:.75}
.hcard .ltd{position:absolute;z-index:5;right:5cqw;bottom:13cqw;transform:translateZ(30px) rotate(-6deg);font:800 4.4cqw var(--body);letter-spacing:.08em;color:#2A1638;background:linear-gradient(90deg,#f6d27a,#fff6cf,#f6d27a);padding:1cqw 2.6cqw;border-radius:1.6cqw;box-shadow:0 0 0 .5cqw #d1362f}
.hcard .snowfx{position:absolute;inset:2.6cqw;border-radius:5cqw;pointer-events:none;z-index:4;overflow:hidden;
  background-image:radial-gradient(circle,#fff 0 1.1cqw,transparent 1.3cqw),radial-gradient(circle,rgba(255,255,255,.8) 0 .7cqw,transparent .9cqw),radial-gradient(circle,rgba(255,255,255,.9) 0 .9cqw,transparent 1.1cqw);
  background-size:22cqw 26cqw,15cqw 19cqw,31cqw 33cqw;background-position:0 0,7cqw 5cqw,13cqw 11cqw;animation:snowfall 9s linear infinite;opacity:.8}
@keyframes snowfall{to{background-position:6cqw 104cqw,-4cqw 76cqw,10cqw 132cqw}}
.hcard.limited.special{background:conic-gradient(from 0deg,#fff3b8,#e2a62a,#ff7fb6,#fff0a0,#3dd6a6,#e2a62a,#8e9bff,#fff3b8);animation:ltdspin 8s linear infinite;box-shadow:0 0 34px rgba(255,201,60,.8),0 0 60px rgba(209,54,47,.35),0 10px 24px rgba(0,0,0,.45)}
@keyframes ltdspin{to{filter:hue-rotate(25deg)}}
.hcard.limited.special .ltd{background:linear-gradient(90deg,#FFC93C,#fffbe6,#FFC93C);box-shadow:0 0 0 .5cqw #fff,0 0 4cqw rgba(255,201,60,.9)}
.hcard.limited.locked .snowfx,.hcard.limited.secret .snowfx{opacity:.35}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
#vCard{width:min(220px,62vw)}
/* battle states from limited-edition moves */
.side .hcard.hugged{box-shadow:0 0 0 3px #FBC4D4,0 0 18px rgba(251,196,212,.7)}
.side .hcard.wrapped{box-shadow:0 0 0 3px #f6d27a,0 0 0 7px #d1362f}
.side .hcard.sure{box-shadow:0 0 0 3px #ff6b5e,0 0 22px rgba(255,107,94,.75)}
/* limited edition section */
.ltdsec{position:relative;overflow:hidden;border-radius:28px;padding:22px;background:linear-gradient(135deg,rgba(209,54,47,.28),rgba(47,143,78,.24) 55%,rgba(246,210,122,.22));border:2px solid rgba(246,210,122,.55)}
.ltdsec>.snowfx{position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:.5;
  background-image:radial-gradient(circle,#fff 0 3px,transparent 4px),radial-gradient(circle,rgba(255,255,255,.8) 0 2px,transparent 3px);background-size:90px 110px,60px 80px;animation:ltdsnow 14s linear infinite}
@keyframes ltdsnow{from{background-position:0 0,30px 20px}to{background-position:40px 440px,0 340px}}
.ltdsec>*{position:relative}
.srail.ltdrail{background:linear-gradient(135deg,#7a1f22,#1f5a35);border-color:#f6d27a}
.hcard .nm.long{font-size:8.2cqw;padding-top:3.4cqw}
/* ★ Holo Special (edition Specials only, e.g. Santa): Silk Rainbow frame above the normal Special gold */
.hcard.limited.special.holospecial{background:conic-gradient(from var(--hsa,0deg),#E53935,#FDD835,#1E88E5,#E53935,#FDD835,#1E88E5,#E53935);animation:holospin 5s linear infinite;
  box-shadow:0 0 0 2px rgba(255,255,255,.7),0 0 26px rgba(229,57,53,.55),0 0 40px rgba(30,136,229,.5),0 0 56px rgba(253,216,53,.45),0 10px 24px rgba(0,0,0,.45)}
@property --hsa{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes holospin{to{--hsa:360deg}}
.hcard.holospecial::after{background:linear-gradient(115deg,transparent 18%,rgba(229,57,53,.6) 30%,rgba(253,216,53,.65) 40%,rgba(30,136,229,.6) 50%,rgba(255,255,255,.6) 56%,transparent 70%);background-size:260% 260%;opacity:.9}
.hcard.holospecial .top-l,.hcard.holospecial .nm,.hcard.holospecial .sp{color:#D9AF0B}
.hcard.holospecial .top-l span:last-child{background:linear-gradient(90deg,#E53935,#FDD835,#1E88E5);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.hcard.limited.special.holospecial .ltd{background:linear-gradient(90deg,#E53935,#FDD835,#1E88E5);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:0 0 0 .5cqw #fff,0 0 4cqw rgba(253,216,53,.8)}