/* Pocket Glyphs look: dotted paper, single-weight line glyphs, one type colour per screen. Fonts are bundled for offline use. */
@font-face{font-family:"Bricolage Grotesque";font-weight:600;font-display:swap;src:url(fonts/bricolage-grotesque-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-weight:800;font-display:swap;src:url(fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:400;font-display:swap;src:url(fonts/figtree-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:500;font-display:swap;src:url(fonts/figtree-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:600;font-display:swap;src:url(fonts/figtree-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2")}
:root{
  --bg:#eef0f5; --paper:#fbfcfe; --ink:#1b2030; --muted:#5d6478; --line:#d9dce6; --ball:#d6403a;
  --electric:#b8860b; --grass:#3f8a4a; --fire:#d2552a; --water:#2f74b8; --normal:#8a6a43;
  --fairy:#c4507f; --ghost:#6a4cb4; --psychic:#c23d6e; --poison:#8b45a6;
  --display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif; --body:"Figtree","Helvetica Neue",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --shadow:0 1px 0 rgba(20,24,40,.04),0 10px 30px -18px rgba(20,24,40,.25); --t:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#11131a;--paper:#191c26;--ink:#e8eaf2;--muted:#9aa1b5;--line:#2b3040;--ball:#ef5a52;
  --electric:#f2c94c;--grass:#6cc47a;--fire:#ff8a5c;--water:#6aaef0;--normal:#d1ad7f;--fairy:#f08bb5;--ghost:#a990f0;--psychic:#f2729f;--poison:#c58ae0;
  --shadow:0 1px 0 rgba(0,0,0,.3),0 14px 34px -20px rgba(0,0,0,.8);color-scheme:dark}}
:root[data-theme=dark]{
  --bg:#11131a;--paper:#191c26;--ink:#e8eaf2;--muted:#9aa1b5;--line:#2b3040;--ball:#ef5a52;
  --electric:#f2c94c;--grass:#6cc47a;--fire:#ff8a5c;--water:#6aaef0;--normal:#d1ad7f;--fairy:#f08bb5;--ghost:#a990f0;--psychic:#f2729f;--poison:#c58ae0;
  --shadow:0 1px 0 rgba(0,0,0,.3),0 14px 34px -20px rgba(0,0,0,.8);color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.55;
  padding:env(safe-area-inset-top,0) max(16px,env(safe-area-inset-right,0)) env(safe-area-inset-bottom,0) max(16px,env(safe-area-inset-left,0));
  background-image:radial-gradient(var(--line) 1px,transparent 1.2px);background-size:22px 22px}
.wrap{max-width:760px;margin:0 auto;padding-block:28px 56px;display:flex;flex-direction:column;gap:22px}
.hide,[hidden]{display:none!important}
h1{font-family:var(--display);font-weight:800;font-size:clamp(38px,9vw,64px);line-height:.95;letter-spacing:-.03em;margin:6px 0 10px;text-wrap:balance}
h1 em{font-style:normal;color:var(--ball)}
h2{font-family:var(--display);font-weight:800;font-size:clamp(24px,5vw,32px);letter-spacing:-.02em;margin:0;line-height:1.05}
h3{font-family:var(--display);font-weight:600;font-size:18px;margin:0}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted);font-size:14px}.ok{color:var(--grass)}.warn{color:var(--fire)}.bad{color:var(--ball)}
.lede{max-width:54ch;color:var(--muted);margin:0}

/* glyphs */
.g{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;color:var(--ink)}
.g .a{stroke:var(--t)}.g .f{fill:currentColor;stroke:none}
.g .af{fill:color-mix(in srgb,var(--t) 28%,transparent);stroke:var(--t)}.g .af2{fill:var(--t);stroke:none}
.draw .s{stroke-dasharray:1;stroke-dashoffset:1;animation:trace 1.3s cubic-bezier(.6,.05,.3,1) forwards;animation-delay:calc(var(--i,0)*70ms)}
.draw .f,.draw .af2{opacity:0;animation:pop .4s ease forwards;animation-delay:calc(var(--i,0)*70ms + 700ms)}
@keyframes trace{to{stroke-dashoffset:0}}@keyframes pop{to{opacity:1}}

/* home */
.hero{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:var(--shadow)}
.hero svg{width:96px;height:96px;--t:var(--ball)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tile{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:16px 16px 18px;display:flex;flex-direction:column;gap:8px;cursor:pointer;text-align:left;color:inherit;font:inherit;
  box-shadow:var(--shadow);transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .25s;min-height:210px}
.tile:hover{transform:translateY(-4px);border-color:var(--t)}
.tile .stage{aspect-ratio:1.5;display:grid;place-items:center;border-radius:12px;background:radial-gradient(circle at 50% 55%,color-mix(in srgb,var(--t) 13%,transparent),transparent 68%)}
.tile .stage svg{width:64%;height:100%}
.tile h3{font-family:var(--display);font-weight:600;font-size:24px;letter-spacing:-.01em}
.tile .sub{font-family:var(--mono);font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.homefoot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px}
.homefoot a{color:var(--muted)}

/* inner screens */
.top{display:flex;align-items:center;gap:12px}
.back{font:600 14px/1 var(--body);border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:10px 14px;cursor:pointer;min-height:40px}
.top .eyebrow{margin-left:auto}
.screen-title{display:flex;align-items:center;gap:14px}
.screen-title svg{width:54px;height:54px;flex:0 0 54px}
.panel,.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow)}
.card{margin-bottom:0}
.stack{display:flex;flex-direction:column;gap:14px}

/* controls */
button,.btn{font:600 14px/1 var(--body);padding:12px 16px;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
button.primary,.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
button:hover:not(:disabled),.btn:hover{opacity:.92}button:disabled{opacity:.5}
button:focus-visible,.btn:focus-visible,.tile:focus-visible,.chip:focus-visible,.thumb:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--ball);outline-offset:3px}
input,select{font:500 15px var(--body);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-height:44px;width:100%}
label{display:block;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:14px 0 8px}
label.btn{text-transform:none;letter-spacing:0;font:600 14px/1 var(--body);color:var(--paper);margin:0}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}.row>*{flex:1 1 auto}.row .fit{flex:0 0 auto}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font:500 13px/1 var(--body);border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:10px 14px;border-radius:999px;cursor:pointer;display:inline-flex;gap:7px;align-items:center;min-height:40px;user-select:none;transition:border-color .2s,transform .2s}
.chip:hover{transform:translateY(-1px)}
.chip.on{border-color:var(--t,var(--ink));box-shadow:inset 0 0 0 1px var(--t,var(--ink));background:color-mix(in srgb,var(--t,var(--ink)) 9%,var(--paper))}
.thumbs{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;-webkit-overflow-scrolling:touch}
.thumb{flex:0 0 116px;border:1px solid var(--line);border-radius:12px;padding:6px;cursor:pointer;background:var(--paper);text-align:center;transition:border-color .2s,transform .2s}
.thumb:hover{transform:translateY(-2px)}.thumb.on{border-color:var(--ink)}
.thumb img{width:100%;border-radius:6px;display:block;aspect-ratio:63/88;object-fit:cover;background:var(--bg)}
.thumb small{display:block;font:11.5px/1.3 var(--mono);color:var(--muted);margin-top:6px}
.pick{display:flex;gap:16px}.pick img{width:132px;border-radius:10px;flex:0 0 132px;align-self:flex-start;aspect-ratio:63/88;object-fit:cover;background:var(--bg)}
.price{font:500 17px var(--mono);font-variant-numeric:tabular-nums}
.item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.item:last-child{border:0}
.item img{width:58px;border-radius:6px;flex:0 0 58px;align-self:flex-start;aspect-ratio:63/88;object-fit:cover;background:var(--bg)}.item .grow{flex:1;min-width:0}
.item a{color:var(--muted)}.item a.bad{color:var(--ball)}
.bar{height:6px;background:var(--line);border-radius:6px;overflow:hidden}.bar>i{display:block;height:100%;background:var(--ball);width:0;transition:width .2s}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:28px;background:var(--ink);color:var(--paper);padding:11px 18px;border-radius:999px;font:500 12.5px var(--mono);z-index:9;max-width:92vw}
a{color:var(--water)}
.totals{font:500 12.5px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}

/* quiz */
.mystery{aspect-ratio:1;max-width:260px;width:100%;margin:0 auto;border-radius:16px;display:grid;place-items:center;color:var(--ink);overflow:hidden;
  background:repeating-linear-gradient(45deg,transparent 0 10px,color-mix(in srgb,var(--line) 50%,transparent) 10px 11px)}
.mystery svg{width:80%;height:80%}.mystery img{width:100%;height:100%;object-fit:cover;transition:filter .3s}.mystery img.blur{filter:blur(18px) saturate(.4)}
.mystery.hid .g .a,.mystery.hid .g .af{stroke:currentColor;fill:none}.mystery.hid .g .af2{fill:currentColor}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{font:600 16px/1.2 var(--display);padding:14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);text-align:left;justify-content:flex-start}
.opt.right{border-color:var(--grass);background:color-mix(in srgb,var(--grass) 14%,var(--bg))}.opt.wrong{border-color:var(--ball);background:color-mix(in srgb,var(--ball) 12%,var(--bg))}
.verdict{font:600 20px var(--display);min-height:1.4em;margin:0}
.score{display:flex;gap:18px;align-items:center;font:12.5px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums;flex-wrap:wrap}.score b{color:var(--ink);font-weight:500}
@media (max-width:520px){.opts{grid-template-columns:1fr}.hero{grid-template-columns:1fr}.hero svg{width:72px;height:72px}.pick img{width:104px;flex-basis:104px}.tile{min-height:190px}}
@media (prefers-reduced-motion:reduce){.draw .s{animation:none;stroke-dashoffset:0}.draw .f,.draw .af2{animation:none;opacity:1}.tile,.chip,.thumb{transition:none}}

#tab-scan{--t:var(--water)}#tab-binder{--t:var(--grass)}#tab-simulate{--t:var(--fire)}#tab-quiz{--t:var(--psychic)}#tab-settings{--t:var(--ball)}

/* ---- binder redesign: cover, pill stats, sleeved pages, sets, badges, card sheet ---- */
.grow{flex:1 1 auto;min-width:0}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{font:500 13px/1 var(--body);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:8px 12px;color:var(--muted)}
.pill b{font-family:var(--mono);font-weight:500;color:var(--ink);margin-right:3px}
.pills.home{margin:14px 0 4px}
.cover{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:20px;border-radius:22px;color:#fff;
  background:linear-gradient(135deg,color-mix(in srgb,var(--grass) 70%,#10202a),color-mix(in srgb,var(--water) 75%,#10202a));box-shadow:var(--shadow);position:relative;overflow:hidden}
.cover::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 0%,rgba(255,255,255,.28),transparent 55%);pointer-events:none}
.cover svg{width:72px;height:72px;color:#fff;--t:#fff}
.cover .eyebrow{color:rgba(255,255,255,.8)}.cover h2{color:#fff;margin:2px 0 10px}
.cover .pill{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35);color:rgba(255,255,255,.85)}.cover .pill b{color:#fff}
.seg{position:sticky;top:0;z-index:5;background:var(--bg);padding:6px 0}
.seg .chip{flex:1;justify-content:center;--t:var(--ink)}
.totals{font:500 12px var(--mono);color:var(--muted)}
.pagewrap{perspective:900px}
.page{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px;border-radius:20px;background:color-mix(in srgb,var(--ink) 7%,var(--paper));border:1px solid var(--line);box-shadow:inset 0 0 0 5px var(--paper),var(--shadow)}
.pocket{position:relative;aspect-ratio:63/88;border-radius:8px;padding:0;border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);background:color-mix(in srgb,var(--paper) 60%,transparent);overflow:hidden;min-height:0;display:block;transition:transform .2s}
.pocket:hover{transform:translateY(-3px)}
.pocket img{width:100%;height:100%;object-fit:cover;display:block}
.pocket .gloss{position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.28),transparent 35%,transparent 70%,rgba(255,255,255,.12));pointer-events:none}
.pocket.holo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:color-dodge;opacity:.35;background:linear-gradient(115deg,transparent 20%,#ff7ad9 35%,#7af0ff 50%,#fff48a 65%,transparent 80%);background-size:250% 100%;animation:sheen 4.5s ease-in-out infinite}
@keyframes sheen{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.pocket .qty{position:absolute;top:4px;right:4px;z-index:2;background:var(--ink);color:var(--paper);font:500 11px var(--mono);padding:3px 6px;border-radius:999px}
.pocket .pin{position:absolute;top:4px;left:4px;z-index:2;background:var(--electric);color:#1b2030;font-size:11px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center}
.pocket .ptag{position:absolute;bottom:4px;left:4px;z-index:2;background:rgba(0,0,0,.65);color:#fff;font:500 11px var(--mono);padding:3px 6px;border-radius:6px}
.pocket.empty{display:grid;place-items:center;border-style:dashed;color:var(--muted);font:500 13px var(--mono);cursor:default}
.pocket.empty:hover{transform:none}
.pocket.mini{border-radius:5px}.pocket.mini.empty{font-size:10px;opacity:.7}
.pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.pager button{width:48px;padding:0;font-size:22px;border-radius:999px}.pager button:disabled{opacity:.35}
.dots{display:flex;gap:5px}.dots i{width:7px;height:7px;border-radius:50%;background:var(--line)}.dots i.on{background:var(--ball)}
.setgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
.setrow{display:flex;gap:14px;align-items:center;text-align:left;padding:14px;border-radius:18px;background:var(--paper);min-height:0;width:100%}
.setrow:hover{border-color:var(--t)}
.setrow h3,.panel h3{font-size:17px}.setrow .pct{font:500 15px var(--mono)}
.ring{width:56px;height:56px;flex:0 0 auto}
.bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:8px}.bar i{display:block;height:100%;border-radius:99px;transition:width .6s}
.badges{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:640px){.badges{grid-template-columns:repeat(3,1fr)}}
.badge{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:14px;text-align:center;display:flex;flex-direction:column;gap:4px;align-items:center}
.badge svg{width:64px;height:64px;color:var(--muted);opacity:.5;filter:grayscale(1)}
.badge .bar{width:100%}
.badge.got{border-color:var(--t);background:color-mix(in srgb,var(--t) 8%,var(--paper))}
.badge.got svg{color:var(--t);opacity:1;filter:none}
.badge h3{font-size:15px}
.empty{text-align:center;padding:26px 12px;display:flex;flex-direction:column;align-items:center;gap:10px}
.empty svg{width:90px;height:90px}
.scrim{position:fixed;inset:0;background:rgba(10,12,20,.55);z-index:50;display:flex;align-items:flex-end;justify-content:center;backdrop-filter:blur(4px)}
.sheet{position:relative;background:var(--paper);width:min(560px,100%);max-height:92vh;overflow:auto;border-radius:24px 24px 0 0;padding:20px;display:grid;gap:16px;animation:rise .28s cubic-bezier(.2,.8,.2,1)}
@media(min-width:700px){.scrim{align-items:center}.sheet{border-radius:24px}}
@keyframes rise{from{transform:translateY(40px);opacity:0}}
.sheet .close{position:absolute;top:12px;right:12px;z-index:3;padding:0;width:40px}
.big{perspective:800px;display:grid;place-items:center}
.tilt{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;position:relative;width:min(240px,60vw);aspect-ratio:63/88;border-radius:12px;overflow:hidden;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .15s;box-shadow:0 20px 40px -18px rgba(0,0,0,.5)}
.tilt img{width:100%;height:100%;object-fit:cover;display:block}
.tilt .shine{position:absolute;inset:0;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.45),transparent 55%);mix-blend-mode:soft-light;pointer-events:none}
.tilt.holo .shine{background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.5),transparent 40%),linear-gradient(115deg,transparent 25%,rgba(255,122,217,.4),rgba(122,240,255,.4),rgba(255,244,138,.4),transparent 75%);mix-blend-mode:color-dodge}
.info{display:grid;gap:12px}
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:var(--bg);border-radius:12px;padding:10px;display:grid;gap:6px}.stat span{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.stepper{display:flex;align-items:center;justify-content:space-between}.stepper button{width:44px;padding:0;font-size:20px}.stepper b{font:500 18px var(--mono)}
button.danger{color:var(--ball)}
#fx{position:fixed;left:50%;top:40%;z-index:60;pointer-events:none}
#fx i{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--c);animation:burst 1s ease-out forwards}
@keyframes burst{from{transform:translate(0,0) scale(1);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
@media(prefers-reduced-motion:reduce){.pocket.holo::before,.sheet{animation:none}.tilt,.bar i{transition:none}}

/* ---- Pokedex ---- */
:root{--fighting:#b5452f;--flying:#6d8fd6;--ground:#a9802f;--rock:#8d8460;--bug:#7a9a1f;--steel:#6f8796;--ice:#3aa6b8;--dragon:#4a52c4;--dark:#4e4640}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--fighting:#e0765f;--flying:#90aef0;--ground:#d4a95a;--rock:#bdb48a;--bug:#a6c94a;--steel:#9bb3c2;--ice:#6fd0e0;--dragon:#8088f0;--dark:#a79c92}}
:root[data-theme=dark]{--fighting:#e0765f;--flying:#90aef0;--ground:#d4a95a;--rock:#bdb48a;--bug:#a6c94a;--steel:#9bb3c2;--ice:#6fd0e0;--dragon:#8088f0;--dark:#a79c92}
.dexhead{display:grid;gap:12px}
.gens{flex-wrap:nowrap;overflow-x:auto;padding:2px 0 6px;scrollbar-width:thin}
.gens .chip{flex:0 0 auto;--t:var(--ball)}.gens .chip b{font-weight:600}
.dexgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media(min-width:560px){.dexgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:860px){.dexgrid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:360px){.dexgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dx{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px 10px;border-radius:18px;min-height:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--t) 10%,var(--paper)),var(--paper));border:1px solid var(--line);transition:transform .2s,border-color .2s;content-visibility:auto;contain-intrinsic-size:150px}
.dx:hover{transform:translateY(-3px);border-color:var(--t)}
.dx .no{font:500 11px var(--mono);color:var(--muted);align-self:flex-start;padding-left:4px}
.dx .art{width:100%;aspect-ratio:1;display:grid;place-items:center;border-radius:14px;background:radial-gradient(circle at 50% 55%,color-mix(in srgb,var(--t) 20%,transparent),transparent 70%)}
.dx .art img{width:86%;height:86%;object-fit:contain;filter:brightness(0) contrast(1.2);opacity:.78}
.dark .dx .art img,:root[data-theme=dark] .dx .art img{filter:brightness(0) invert(.3) contrast(1.2);opacity:1}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .dx .art img{filter:brightness(0) invert(.3);opacity:1}}
.dx .art b{font:700 30px var(--display);color:var(--muted)}
.dx .nm{font:600 13px/1.15 var(--body);text-align:center;color:var(--muted);letter-spacing:.04em}
.dx.got{border-color:color-mix(in srgb,var(--t) 55%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--t) 22%,var(--paper)),var(--paper))}
.dx.got .art img{filter:drop-shadow(0 6px 8px rgba(0,0,0,.25));opacity:1;animation:dexpop .45s cubic-bezier(.2,1.4,.4,1)}
.dx.got .nm{color:var(--ink)}
.dx .cnt{position:absolute;top:6px;right:6px;min-width:22px;height:22px;border-radius:99px;background:var(--t);color:#fff;font:600 12px/22px var(--mono);text-align:center;padding:0 6px}
@keyframes dexpop{from{transform:scale(.6);filter:brightness(0)}}
.dsheet{width:min(720px,100%);max-height:94vh}
.dhead{display:flex;gap:16px;align-items:center;padding-right:44px}
.dart{width:96px;height:96px;flex:0 0 auto;border-radius:20px;display:grid;place-items:center;background:radial-gradient(circle,color-mix(in srgb,var(--t) 28%,transparent),transparent 70%)}
.dart img{width:90%;height:90%;object-fit:contain;filter:brightness(0) invert(.3);opacity:.9}
.dart.got img{filter:drop-shadow(0 6px 8px rgba(0,0,0,.25));opacity:1}
.dcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.dset{grid-column:1/-1;font:600 14px var(--body);margin-top:8px}.dset span{font:500 12px var(--mono);color:var(--muted);margin-left:6px}
.dc{position:relative;padding:0;border:2px solid transparent;border-radius:8px;aspect-ratio:63/88;min-height:0;overflow:hidden;background:var(--bg);display:block}
.dc img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);opacity:.55;transition:filter .2s,opacity .2s}
.dc:hover img{filter:none;opacity:1}
.dc.own{border-color:var(--grass)}.dc.own img{filter:none;opacity:1}
.dc small{position:absolute;left:3px;bottom:3px;background:rgba(0,0,0,.65);color:#fff;font:500 10px var(--mono);padding:2px 5px;border-radius:5px}
.dc .tick{position:absolute;top:3px;right:3px;background:var(--grass);color:#fff;font-style:normal;font-size:11px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center}
@media(prefers-reduced-motion:reduce){.dx.got .art img{animation:none}}

.dx,.dx>*{min-width:0}.dx .nm{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc .pr{position:absolute;left:3px;top:3px;background:var(--ink);color:var(--paper);font:600 10px var(--mono);padding:2px 5px;border-radius:5px}
.dc.own .pr{display:none}
.pricebox{display:grid;gap:8px;background:var(--bg);border-radius:14px;padding:12px}
.pricebox .pl{display:flex;justify-content:space-between;gap:10px;font:500 13px var(--mono)}.pricebox .pl b{font-weight:600}
.pricebox .pl.on{color:var(--ink)}.pricebox .pl:not(.on){color:var(--muted)}
.pricebox .pbig,.pbig{font:700 26px var(--display);color:var(--ink)}
.dsheet .pick{display:flex;gap:14px;align-items:flex-start}.dsheet .pick img{width:120px;max-width:34%;border-radius:8px;flex:0 0 auto}
.dsheet .statgrid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.dsheet,.sheet{max-width:100%}.dsheet label{display:block;margin:10px 0 6px}
.dhead>div:last-child{min-width:0}.dhead h3{overflow-wrap:anywhere}
.dtools{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.dtools button{min-height:36px;padding:8px 12px}
@media(max-width:420px){.cover{grid-template-columns:1fr}.cover svg{width:56px;height:56px}}
html,body{overflow-x:hidden}img,svg{max-width:100%}

/* ======== Kanto anime Pokedex skin (binder screen + entry sheet). Icons/glyphs are untouched. ======== */
@font-face{font-family:"Pixelify Sans";font-weight:400;font-display:swap;src:url(fonts/pixel-400.woff2) format("woff2")}
@font-face{font-family:"Pixelify Sans";font-weight:700;font-display:swap;src:url(fonts/pixel-700.woff2) format("woff2")}
@font-face{font-family:"KantoDex";font-weight:400;font-display:swap;src:url(fonts/pixel-400.woff2) format("woff2")}
@font-face{font-family:"KantoDex";font-weight:700;font-display:swap;src:url(fonts/pixel-700.woff2) format("woff2")}
@font-face{font-family:"KantoDex";font-weight:400;font-display:swap;src:url(fonts/pixel-digits.woff2) format("woff2");unicode-range:U+0030-0039}
@font-face{font-family:"KantoDex";font-weight:700;font-display:swap;src:url(fonts/pixel-digits.woff2) format("woff2");unicode-range:U+0030-0039}
:root{--pix:"KantoDex","Pixelify Sans",ui-monospace,monospace}
.dexdev{position:relative;background:linear-gradient(180deg,#e43c3a,#c9222b 60%,#b11a24);border:3px solid #6f0d14;border-radius:22px;padding:12px;color:#fff;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.3),inset 0 -8px 0 rgba(0,0,0,.18),0 16px 30px -16px rgba(0,0,0,.55);display:grid;gap:12px}
.dd-lid{display:flex;align-items:center;gap:10px;padding:2px 2px 10px;border-bottom:3px solid rgba(0,0,0,.22)}
.lens{width:54px;height:54px;flex:0 0 auto;border-radius:50%;border:4px solid #f2f2f2;background:radial-gradient(circle at 35% 30%,#d4f1ff,#47a0ee 42%,#1b57ad);display:grid;place-items:center;box-shadow:0 3px 0 rgba(0,0,0,.35),inset 0 -4px 6px rgba(0,0,0,.25)}
.lens svg{width:30px;height:30px;color:#fff;--t:#fff}
.led{width:12px;height:12px;border-radius:50%;border:2px solid rgba(0,0,0,.45);flex:0 0 auto}
.led.r{background:#ff5a5a;box-shadow:0 0 8px #ff5a5a}.led.y{background:#ffd23f;box-shadow:0 0 8px #ffd23f;animation:blink 2.2s steps(2,end) infinite}.led.gr{background:#58e27a;box-shadow:0 0 8px #58e27a}
@keyframes blink{50%{opacity:.45}}
.dd-title{margin-left:auto;font:700 22px var(--pix);letter-spacing:.08em;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.dd-cols{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.dd-right{display:grid;gap:10px;align-content:start;min-width:0}.dd-left{min-width:0}.hinge{display:none}
.lcd{background:#18211c;border:3px solid #0a100d;border-radius:6px;padding:10px 12px;display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;box-shadow:inset 0 0 0 2px #2a3a30;font-family:var(--pix);min-height:60px}
.lcd .pill{background:none;border:0;padding:0;border-radius:0;color:#8dffa0;font:400 14px/1.3 var(--pix);white-space:nowrap}.lcd .pill b{font:700 15px var(--pix);color:#fff;margin-right:4px}
.keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(66px,1fr));gap:6px;background:#0f1b2c;padding:6px;border-radius:6px;border:2px solid #07101c}
.keys .chip{justify-content:center;min-height:40px;padding:4px 2px;border-radius:4px;border:2px solid #0b2a52;background:linear-gradient(#58bbff,#1f8df0);color:#fff;font:700 13px var(--pix);box-shadow:inset 0 2px 0 rgba(255,255,255,.4);text-shadow:0 1px 0 rgba(0,0,0,.4)}
.keys .chip.on{background:linear-gradient(#ffe36a,#f1b81f);color:#3a2a00;text-shadow:none;box-shadow:inset 0 3px 0 rgba(0,0,0,.25);transform:translateY(1px);border-color:#6b4d00}
#tab-binder #bTools{display:grid;gap:8px}
#bTools .chips{gap:6px}
#bTools .chip{border-radius:4px;border:2px solid #4a4a4a;background:linear-gradient(#fff,#d6d6d6);color:#222;font:700 13px var(--pix);min-height:36px;padding:6px 14px;box-shadow:none}
#bTools .chip.on{background:linear-gradient(#ffe36a,#f1b81f);border-color:#6b4d00;box-shadow:inset 0 3px 0 rgba(0,0,0,.2)}
#bTools input{font-family:var(--pix);background:#18211c;color:#8dffa0;border:3px solid #0a100d;border-radius:6px;min-height:42px}
#bTools input::placeholder{color:#4f9b61}
#bTools .totals{color:#ffe9a6;font:400 13px var(--pix)}
.deco{display:none;align-items:center;gap:14px;padding:6px 4px}
.deco .rnd{width:26px;height:26px;border-radius:50%;background:#1a2a24;border:2px solid #000}
.deco .grn{width:76px;height:26px;border-radius:3px;background:#59b86a;border:2px solid #1d4a27}
.deco .dpad{width:50px;height:50px;position:relative;margin-left:auto}
.deco .dpad::before,.deco .dpad::after{content:"";position:absolute;background:#1a2a24;border-radius:4px;border:2px solid #000}
.deco .dpad::before{left:17px;top:0;width:16px;height:50px}.deco .dpad::after{left:0;top:17px;width:50px;height:16px}
.bezel{background:#d9dbd5;border:3px solid #8b8e86;border-radius:10px;padding:8px;box-shadow:inset 0 2px 0 #fff}
.sc-head{background:#f4d33c;border:2px solid #9c8118;color:#4a3b00;font:700 16px var(--pix);padding:6px 10px;border-radius:4px 4px 0 0;letter-spacing:.04em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.screen{--paper:#fbfbf0;--bg:#e6f1cd;--ink:#1f2a24;--muted:#4c6a4a;--line:#8bb070;--shadow:none;background:#cfe8a8;border:3px solid #2a2f2a;border-top:0;border-radius:0 0 4px 4px;padding:10px;min-height:340px;color:#1f2a24;font-family:var(--pix);display:grid;gap:10px;align-content:start}
.screen *{font-family:var(--pix)}
.screen .stack{gap:8px}
.screen h3,.screen h4{font-weight:700;letter-spacing:.02em}
.screen .muted,.screen .totals{color:#4c6a4a;font-size:13px}
.screen .panel,.screen .setrow,.screen .badge,.screen .stat{border:3px solid #cdbf6a;background:#f5f2c1;border-radius:8px;box-shadow:none;padding:10px}
.screen .page{border-radius:8px;background:#b9d78f;border:3px solid #5b7f4a;box-shadow:none}
.screen .pocket{border-radius:4px}
.screen .chip{border-radius:4px;border:2px solid #3a5a3a;background:#fff;font:700 13px var(--pix);box-shadow:none;min-height:36px}
.screen .chip.on{background:#f4d33c;border-color:#6b5a10;box-shadow:inset 0 3px 0 rgba(0,0,0,.15)}
.screen button:not(.dx):not(.pocket):not(.dc):not(.setrow){border-radius:4px;border:2px solid #0b2a52;background:linear-gradient(#58bbff,#1f8df0);color:#fff;font:700 13px var(--pix);text-shadow:0 1px 0 rgba(0,0,0,.4);min-height:40px}
.screen button.primary{background:linear-gradient(#ffe36a,#f1b81f);color:#3a2a00;border-color:#6b4d00;text-shadow:none}
.screen button:disabled{opacity:.45}
.screen input{font-family:var(--pix);background:#fff;border:3px solid #3a5a3a;border-radius:4px;color:#1f2a24}
.screen .bar{height:10px;border-radius:2px;border:2px solid #3a5a3a;background:#fff}.screen .bar i{border-radius:0}
.screen .dexhead{gap:10px}
.screen .gens{gap:6px;padding-bottom:4px}.screen .gens .chip{min-height:32px;padding:4px 10px;font-size:12px}
.screen .gens .chip.on{background:#f4d33c}
/* tiles: like the sprite frame + name card in the game */
.screen .dexgrid{gap:8px}
.screen .dx{background:#fff;border:3px solid #d9c18c;border-radius:10px;padding:5px 5px 8px;box-shadow:inset 0 0 0 2px #f6ecd0;gap:3px}
.screen .dx:hover{border-color:#e39b2e;transform:translateY(-2px)}
.screen .dx .no{display:flex;align-items:center;gap:5px;font:700 13px var(--pix);color:#3b3b2a;padding-left:2px}
.mb{display:inline-block;width:13px;height:13px;border-radius:50%;border:2px solid #222;background:linear-gradient(#e8403a 0 42%,#222 42% 58%,#fff 58%);flex:0 0 auto;vertical-align:middle}
.screen .dx .art{background:repeating-linear-gradient(180deg,#e7f0f7 0 4px,#fff 4px 8px);border:2px solid #c9d9e6;border-radius:6px}
#bBody .dx .art img{filter:brightness(0);opacity:.9}
#bBody .dx.got .art img{filter:drop-shadow(0 3px 3px rgba(0,0,0,.25));opacity:1}
.screen .dx .nm{font:700 13px var(--pix);text-transform:uppercase;color:#1f2a24;letter-spacing:.02em}
.screen .dx .ty{font:700 10px var(--pix);text-transform:uppercase;background:var(--t);color:#fff;border:2px solid rgba(0,0,0,.28);border-radius:3px;padding:0 6px;line-height:1.5;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.screen .dx .cnt{border-radius:3px;font:700 11px/20px var(--pix);background:#d3232b;border:2px solid #7a0f15}
.screen .dx.got{border-color:#e3a437;background:#fffdf3}
.screen .dc.own{border-color:#3f8a4a}
.screen .dset{background:#f4d33c;border:2px solid #9c8118;padding:3px 8px;border-radius:3px;color:#4a3b00}
.screen .empty p{font-size:15px}
.screen .setrow:hover{border-color:#e39b2e}
.screen .badge svg{width:56px;height:56px}
@media(min-width:820px){
  .dd-cols{grid-template-columns:minmax(0,1.45fr) 22px minmax(0,1fr);gap:0}
  .dd-left{order:1}.hinge{order:2;display:block;border-radius:6px;margin:-6px 0;background:linear-gradient(90deg,#7a0f15,#e24a4a 40%,#9b141b 70%,#5e0a10);box-shadow:0 0 0 2px rgba(0,0,0,.3)}
  .dd-right{order:3;padding-left:14px}.deco{display:flex}
  .keys{grid-template-columns:repeat(3,1fr)}
}
/* entry sheet = the game's Pokedex entry screen */
.dsheet{--paper:#fbfbf0;--bg:#e6f1cd;--ink:#1f2a24;--muted:#4c6a4a;--line:#8bb070;background:#cfe8a8;border:4px solid #2a2f2a;border-radius:12px 12px 0 0;padding:0;color:#1f2a24;font-family:var(--pix);gap:0;overflow-x:hidden}
@media(min-width:700px){.dsheet{border-radius:12px}}
.dsheet *{font-family:var(--pix)}
.dsheet .close{top:5px;right:6px;width:34px;min-height:34px;height:34px;padding:0;border-radius:4px;background:#d3232b;border:2px solid #7a0f15;color:#fff;font-size:15px;z-index:4}
.eh{background:#f4d33c;border-bottom:3px solid #9c8118;color:#4a3b00;font:700 18px var(--pix);padding:9px 48px 9px 12px;letter-spacing:.03em;position:sticky;top:0;z-index:3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ebody{padding:12px;display:grid;gap:12px;min-width:0}
.entry{display:grid;grid-template-columns:minmax(110px,38%) minmax(0,1fr);gap:12px;align-items:stretch}
.eframe{background:#dcc99a;border:3px solid #b79c5a;border-radius:10px;padding:6px;align-self:start}
.eframe .dart{width:100%;height:auto;aspect-ratio:1;border-radius:4px;background:repeating-linear-gradient(180deg,#e7f0f7 0 5px,#fff 5px 10px);border:2px solid #c9d9e6}
.eframe .dart img{width:92%;height:92%;filter:brightness(0);opacity:.9}.eframe .dart.got img{filter:drop-shadow(0 4px 4px rgba(0,0,0,.3));opacity:1}
.einfo{background:#f4f2c6;border:3px solid #cdc888;border-radius:6px 16px 6px 6px;padding:10px 12px;display:grid;gap:6px;align-content:start;min-width:0}
.ename{display:flex;align-items:center;gap:7px;font:700 clamp(17px,5vw,26px)/1.1 var(--pix);text-transform:uppercase;overflow-wrap:anywhere}.ename .mb{width:20px;height:20px}
.egenus{font:700 clamp(14px,3.8vw,19px) var(--pix);color:#46563f}
.etype{justify-self:start;font:700 15px var(--pix);text-transform:uppercase;color:#fff;background:var(--t);padding:2px 14px;border-radius:4px;border:3px solid rgba(255,255,255,.85);box-shadow:0 0 0 2px #cdb86a;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.etype.unk{background:#8a8f84}
.emeas{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;font:400 clamp(14px,3.8vw,18px) var(--pix);margin-top:2px}.emeas b{font-weight:700}
.etext{background:#fff;border:5px solid #6d9de0;outline:3px solid #bcd3f3;outline-offset:0;border-radius:10px;padding:12px 14px;font:400 clamp(15px,4vw,19px)/1.55 var(--pix);min-height:5.8em}
.etools{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.dsheet .etools button,.dsheet .dtools button,.dsheet #p-add,.dsheet #p-back,.dsheet #d-retry{border-radius:4px;border:2px solid #0b2a52;background:linear-gradient(#58bbff,#1f8df0);color:#fff;font:700 13px var(--pix);text-shadow:0 1px 0 rgba(0,0,0,.4);min-height:38px;padding:6px 12px}
.dsheet #p-add{background:linear-gradient(#ffe36a,#f1b81f);color:#3a2a00;border-color:#6b4d00;text-shadow:none}
.dsheet .chip{border-radius:4px;border:2px solid #3a5a3a;background:#fff;font:700 13px var(--pix);min-height:34px}.dsheet .chip.on{background:#f4d33c;border-color:#6b5a10;box-shadow:inset 0 3px 0 rgba(0,0,0,.15)}
.dsheet .pricebox,.dsheet .stat{background:#f5f2c1;border:3px solid #cdbf6a;border-radius:8px}
.dsheet input{background:#fff;border:3px solid #3a5a3a;border-radius:4px;color:#1f2a24}
.dsheet .dset{background:#f4d33c;border:2px solid #9c8118;padding:3px 8px;border-radius:3px;color:#4a3b00}
.dsheet .dc.own{border-color:#3f8a4a}
.dsheet .totals,.dsheet .muted{color:#3d5538;font-size:13px}
.dsheet .pick img{border-radius:4px}
@media(max-width:380px){.entry{grid-template-columns:1fr}.eframe{max-width:200px}}
@media(prefers-reduced-motion:reduce){.led.y{animation:none}}
.dexgrid{grid-template-columns:repeat(auto-fill,minmax(98px,1fr))}
.screen .dx .nm{white-space:normal;overflow-wrap:anywhere;line-height:1.1}

/* ---- softer palette pass: no black boxes, no blue/orange buttons ---- */
.lcd{background:#d3e4b6;border:3px solid #8f1620;box-shadow:inset 0 0 0 2px #eef5dc;min-height:0}
.lcd .pill{color:#35502f}.lcd .pill b{color:#1b2d19}
.keys{background:#9c1822;border:2px solid #6f0d14;box-shadow:inset 0 2px 0 rgba(0,0,0,.18)}
.keys .chip,#bTools .chip,.screen .chip,.dsheet .chip{background:linear-gradient(#fffaf0,#efe4cd);border:2px solid #7a1219;color:#4a0d12;box-shadow:inset 0 -2px 0 rgba(0,0,0,.1);text-shadow:none}
.keys .chip.on,#bTools .chip.on,.screen .chip.on,.dsheet .chip.on,.screen .gens .chip.on{background:linear-gradient(#c92631,#a3161f);color:#fff6e8;border-color:#5e0a10;box-shadow:inset 0 3px 0 rgba(0,0,0,.25);transform:none}
#bTools input{background:#fffaf0;color:#2c3b27;border:3px solid #7a1219}#bTools input::placeholder{color:#8a8f78}
#bTools .totals{color:#ffe9d2}
.deco .rnd,.deco .dpad::before,.deco .dpad::after{background:#7a1219;border-color:#4a0a10}.deco .grn{background:#cfe0b0;border-color:#7a1219}
.sc-head,.eh{background:#e9dfae;border-color:#a89a55;color:#4b4420}
.screen .dset,.dsheet .dset{background:#e9dfae;border-color:#a89a55;color:#4b4420}
.screen button:not(.dx):not(.pocket):not(.dc):not(.setrow),.dsheet .etools button,.dsheet .dtools button,.dsheet #p-back,.dsheet #d-retry{background:linear-gradient(#fffaf0,#efe4cd);border:2px solid #7a1219;color:#4a0d12;text-shadow:none}
.screen button.primary,.dsheet #p-add{background:linear-gradient(#c92631,#a3161f);color:#fff6e8;border-color:#5e0a10;text-shadow:none}
.screen .dx{border-color:#d9c9a0}.screen .dx.got{border-color:#c9a45c;background:#fffdf6}.screen .dx:hover{border-color:#c9a45c}
.screen .dx .cnt{background:#a3161f}
.screen .dexhead{background:#eef3de;border-color:#b9c99a}
.screen .panel,.screen .setrow,.screen .badge,.screen .stat,.dsheet .pricebox,.dsheet .stat{background:#eef3de;border-color:#b9c99a}
.einfo{background:#eef3de;border-color:#b9c99a}
.etype{box-shadow:0 0 0 2px #b9c99a}
.eframe{background:#d9cfae;border-color:#b3a272}
.dsheet .close{background:#a3161f;border-color:#5e0a10}
.led.y{background:#f3d36a;box-shadow:0 0 8px #f3d36a}
.keys{grid-template-columns:repeat(auto-fit,minmax(58px,1fr))}.keys .chip{font-size:12px;padding:4px 1px}
.dc .pr,.dc small,.pocket .ptag,.pocket .qty{background:#fffaf0;color:#4a0d12;border:1px solid #7a1219}

/* ---- Glint: dynamic card motion ---- */
.tilt{overflow:visible;transform-style:preserve-3d;transform:perspective(720px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--sc,1));transition:none;will-change:transform;touch-action:pan-y;cursor:grab;
  box-shadow:none;filter:drop-shadow(calc(var(--ry,0deg) * -1) calc(14px + var(--rx,0deg) * .6) 18px rgba(0,0,0,.38))}
.tilt:active{cursor:grabbing}
.tilt .face{position:absolute;inset:0;border-radius:inherit;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d}
.tilt .backface{transform:rotateY(180deg);background:radial-gradient(circle at 50% 50%,#fff 0 9%,#222 9% 12%,#e8403a 12% 24%,transparent 24%),repeating-linear-gradient(45deg,#1f4ea0 0 8px,#2a5fb8 8px 16px);border:6px solid #f4d33c;border-radius:12px}
.tilt .backface i{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 48%,transparent 66%);background-size:260% 100%;background-position:var(--hp,50%) 0}
.tilt .face img{width:100%;height:100%;object-fit:cover;display:block;transform:translate(var(--px,0),var(--py,0)) scale(1.06);max-width:none}
.tilt .shine{position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,calc(.18 + var(--ga,.3) * .4)),transparent 52%);mix-blend-mode:soft-light;pointer-events:none}
.tilt .foil{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:color-dodge;
  background:linear-gradient(115deg,transparent 18%,#ff7ad9 32%,#7af0ff 46%,#fff48a 58%,#9dff9d 70%,transparent 84%),
  radial-gradient(circle at 20% 30%,#fff 0 1.4px,transparent 2px),radial-gradient(circle at 70% 60%,#fff 0 1.2px,transparent 2px),radial-gradient(circle at 45% 80%,#fff 0 1.3px,transparent 2px);
  background-size:260% 100%,34px 34px,41px 41px,29px 29px;background-position:var(--hp,50%) 0,var(--px,0) var(--py,0),calc(var(--px,0) * -1.6) var(--py,0),calc(var(--py,0) * 2) var(--px,0)}
.tilt.holo .foil{opacity:calc(.25 + var(--ga,.3) * .5)}
.tilt.holo .shine{background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 42%)}
.dsheet .pick .tilt{width:min(130px,36%);flex:0 0 auto}.dsheet .pick .tilt img{width:100%;max-width:none;border-radius:0}
.hintline{font:500 12px var(--mono);color:var(--muted);text-align:center;margin-top:26px}
.dsheet .hintline{display:none}
.pocket{--rx:0deg;--ry:0deg;transform:perspective(500px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .18s ease-out,border-color .2s}
.pocket:hover{transform:perspective(500px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-3px) scale(1.03);z-index:2}
.pocket.holo::before{background-position:var(--hp,100%) 0;animation:none}
.dc{--rx:0deg;--ry:0deg;transform:perspective(500px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .18s ease-out}
@media(prefers-reduced-motion:reduce){.tilt{transform:none;filter:none}.pocket,.pocket:hover,.dc{transform:none}}

/* card popup uses the same entry-screen look */
.cardsheet .cframe{background:repeating-linear-gradient(180deg,#e7f0f7 0 5px,#fff 5px 10px);border:2px solid #c9d9e6;border-radius:4px;padding:12px 10px;display:grid;place-items:center}
.cardsheet .cframe .tilt{width:100%;max-width:200px}
.cardsheet .entry{grid-template-columns:minmax(120px,42%) minmax(0,1fr)}
.cardsheet .ename{font-size:clamp(15px,4.2vw,22px)}
.cardsheet .emeas{align-items:center;gap:8px 12px}
.cardsheet .emeas input{width:100%;min-height:38px;padding:4px 8px;font:700 16px var(--pix)}
.cardsheet .stepper{display:flex;align-items:center;justify-content:space-between;gap:6px}
.cardsheet .stepper button{width:36px;min-height:36px;padding:0;font-size:18px;border-radius:4px;border:2px solid #7a1219;background:linear-gradient(#fffaf0,#efe4cd);color:#4a0d12}
.cardsheet .stepper b{font:700 18px var(--pix)}
.cardsheet .etext{min-height:0;font-size:clamp(14px,3.6vw,17px)}
.cardsheet .hintline{display:block;margin-top:6px}
.cardsheet .row button{border-radius:4px;border:2px solid #7a1219;background:linear-gradient(#fffaf0,#efe4cd);color:#4a0d12;font:700 13px var(--pix);min-height:40px}
.cardsheet .row button.danger{background:linear-gradient(#c92631,#a3161f);color:#fff6e8;border-color:#5e0a10}
@media(max-width:380px){.cardsheet .entry{grid-template-columns:1fr}}
.cardsheet .ename{display:block;overflow-wrap:break-word;word-break:normal}.cardsheet .ename .mb{margin-right:6px;vertical-align:-3px}
.cardsheet .etype{background:#b8963f;color:#fffaf0}