/* Clean 16-bit (SNES/GBA-era) flavour: Pixelify Sans headings, bevelled window borders, small rich palette. Body = system font. */
@font-face{font-family:"Pixelify Sans";src:url(/fonts/PixelifySans.ttf?v=2) format("truetype");font-weight:400 700;font-display:swap}
:root{--ink:#2a3348;--dark:#3d5a9e;--mid:#6b8fd4;--gold:#f5d76e;--gold-d:#c9a227;--light:#eef3fb;--paper:#e8eef6;--teal:#2fb6a3;--px:"Pixelify Sans",system-ui,sans-serif;--pill:#ff5fa2;--card-shadow:0 2px 8px rgba(42,51,72,.08),0 8px 24px rgba(42,51,72,.06)}
*{box-sizing:border-box}
body{margin:0;font:17px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--paper);color:var(--ink)}
header{background:linear-gradient(180deg,#4a62c4,var(--dark));color:#fff;padding:12px 16px;display:flex;align-items:center;gap:10px;border-bottom:0;box-shadow:0 2px 8px rgba(42,51,72,.12)}
.logo{color:#fff;text-decoration:none;font:600 22px/1 var(--px);display:flex;align-items:center;gap:10px}
.logo b{color:var(--gold);font-weight:600}.logo svg{width:30px;height:30px}
.by{font-size:12px;opacity:.85;margin-left:auto}
main{max-width:520px;margin:auto;padding:24px 18px}
h1,h2{font-family:var(--px);font-weight:600;line-height:1.25;color:var(--ink)}
h1{font-size:20px;margin:4px 0 14px;letter-spacing:0}h2{font-size:15px;margin:0 0 10px}
p{margin:0 0 16px}
footer{font-size:13px;color:#4a5070;text-align:center;padding:32px 18px;max-width:520px;margin:auto}
footer a{color:var(--dark)}
/* RPG dialog window: double pixel border */
.card{background:#fff;border:0;border-radius:16px;box-shadow:var(--card-shadow);padding:18px;margin:0 0 18px}
.btn{display:block;width:100%;padding:14px;margin:12px 0;font:600 18px/1.2 var(--px);text-align:center;text-decoration:none;cursor:pointer;background:linear-gradient(180deg,#ffe08a,var(--gold));color:var(--ink);border:0;border-radius:14px;box-shadow:0 3px 0 var(--gold-d),0 6px 14px rgba(201,162,39,.25)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--gold-d)}
.btn:focus-visible,input:focus-visible,.link:focus-visible,.chip:focus-visible,.res button:focus-visible{outline:3px solid var(--mid);outline-offset:3px}
.btn.alt{background:linear-gradient(180deg,#fff,#eef3fb);box-shadow:0 3px 0 #c9d1ef,0 6px 14px rgba(42,51,72,.08)}
.link{background:none;border:0;padding:8px 0;margin-right:16px;color:var(--dark);font:inherit;font-size:15px;text-decoration:underline;cursor:pointer}
label{display:block;font-weight:600;font-size:15px}
input{width:100%;padding:12px;font:inherit;border:2px solid #d0d8e8;background:#fff;margin:6px 0 18px;border-radius:10px}
.chips{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:2px solid var(--light)}.row .nm{flex:1;font-size:15px;min-width:0}.row .nm>b{display:block;font-weight:700}.row .nm>small{display:block;font-size:12px;color:var(--muted,#4a5070)}
.row .rm{margin:0;font-size:14px}.q{font-weight:400;font-size:14px;display:flex;align-items:center;gap:4px}
select{font:inherit;font-size:15px;padding:4px;border:2px solid var(--ink);background:#fff}
.art{width:36px;height:50px;image-rendering:pixelated;image-rendering:crisp-edges;border:2px solid var(--ink);background:var(--light);flex:none;vertical-align:middle}
.res .art{margin-right:10px}.pair{display:flex;gap:4px;flex:none}.tx{flex:1}
.badge{display:inline-block;font:600 13px/1 var(--px);border-radius:3px;background:var(--ink);color:var(--light);padding:4px 5px;margin-left:4px;vertical-align:2px}
.chip{background:var(--light);border:2px solid var(--dark);padding:6px 10px;font:inherit;font-size:14px;color:var(--ink)}
button.chip{cursor:pointer}.chip.x:after{content:" ×";font-weight:700}
.res{max-height:240px;overflow:auto}.res:not(:empty){border:0;border-radius:12px;margin-bottom:8px;box-shadow:var(--card-shadow)}
.res button{display:block;width:100%;text-align:left;background:#fff;border:0;border-bottom:2px solid var(--light);padding:12px;font:inherit;font-size:15px;cursor:pointer}
.r{font-size:13px;color:#4a5070}
.trade{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-top:2px solid var(--light);font-size:15px}
.trade .link{margin:0;white-space:nowrap}
.err{color:#9b1c1c;font-weight:700}.muted{color:#4a5070;font-size:15px}
.fid{font:600 22px/1.4 var(--px);letter-spacing:1px;margin:8px 0}
.icon{width:16px;height:16px;vertical-align:-2px;image-rendering:pixelated;margin-right:6px}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--light);padding:12px 16px;border:3px solid var(--gold);border-radius:6px;font-size:15px;opacity:0;pointer-events:none;max-width:90vw}
#toast.on{opacity:1}
@media (prefers-reduced-motion:reduce){.btn:active{transform:none}}
.icon8{width:36px;height:36px;padding:6px;color:var(--dark)}
.thumb{position:relative;display:inline-flex;flex-direction:column;align-items:center;flex:none;width:44px;border:2px solid var(--ink);background:var(--light);vertical-align:middle}
.thumb .art{border:0;width:40px;height:55px}.thumb .icon8{width:40px;height:40px;padding:8px}
.rar{display:block;width:100%;background:var(--ink);color:#fff;font:700 10px/1 system-ui,sans-serif;text-align:center;padding:3px 0;letter-spacing:-1px;white-space:nowrap}
.res .thumb{margin-right:10px}
/* 16-bit mode: larger thumbnail */
.thumb.m-48{width:56px}.thumb.m-48 .art{width:52px;height:72px}
/* Holo shimmer on high rarities: a soft diagonal sheen sliding across the art (not the rarity strip). */
.thumb.holo{overflow:hidden}
.thumb.holo::after{content:"";position:absolute;left:0;right:0;top:0;bottom:16px;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(115deg,transparent 30%,rgba(255,120,220,.35) 42%,rgba(140,255,240,.45) 50%,rgba(255,250,150,.35) 58%,transparent 70%);
  background-size:300% 100%;animation:holo 3.5s ease-in-out infinite}
@keyframes holo{0%{background-position:100% 0}60%,100%{background-position:-50% 0}}
@media (prefers-reduced-motion:reduce){.thumb.holo::after{animation:none;background-position:40% 0}}
.res .dym{background:var(--light);font-size:15px;border-bottom:3px solid var(--ink)}
.res .dym b{text-decoration:underline}
.res button:not(.dym){display:flex;align-items:center;gap:10px}.res button .thumb{margin-right:0}
.res{max-height:340px}
.tools{display:flex;flex-wrap:wrap;gap:4px 16px;margin:-8px 0 8px}.tools .link{white-space:nowrap}.tools .link[aria-pressed=true]{font-weight:700}
.res button.sub{padding-left:40px;background:#f3f6ff}
.filters{display:flex;gap:12px;flex-wrap:wrap}.filters label{font-weight:400}.filters select{max-width:200px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px;max-height:380px;overflow:auto;margin-bottom:12px}
.gcell{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px;background:#fff;border:2px solid var(--light);font:inherit;font-size:12px;cursor:pointer;text-align:center}
.gcell.on{border-color:var(--ink);background:var(--light);box-shadow:inset 0 0 0 2px var(--mid)}
textarea{width:100%;font:inherit;padding:10px;border:3px solid var(--ink);margin:6px 0 4px;border-radius:0}
.prow{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-top:2px dashed var(--light)}.pick{display:flex;gap:8px;font-weight:400}.pick input{width:auto;margin:3px 0 0}
.prow select{max-width:100%}.acts{display:flex;flex-direction:column}.acts .link{margin:0 0 4px}.st{font-size:14px;color:#4a5070;white-space:nowrap}
.ok{color:var(--dark);font-weight:700}
.tut{border:3px solid var(--ink);border-radius:8px;padding:18px;max-width:420px;width:92vw;box-shadow:0 6px 0 var(--ink)}
.tut::backdrop{background:#1b1f3b99}.tut-art{display:block;width:150px;margin:6px auto 12px}
.tabs{display:flex;gap:6px;margin-bottom:8px}.tabs button{flex:1;font:600 14px var(--px);padding:8px;border:0;border-radius:10px;background:#eef3fb;cursor:pointer;box-shadow:0 1px 2px rgba(42,51,72,.06)}
.tabs button[aria-selected=true]{background:var(--fill,var(--dark));color:var(--on-fill,#fff)}
.tut-nav{display:flex;align-items:center;gap:12px}.tut-nav .btn{margin:0;flex:1}
.scan{border-color:var(--dark)}.scan .btn{margin-top:4px}.scan input[type=file]{display:none}
.srow{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:2px solid var(--light);flex-wrap:wrap}.srow .nm{flex:1;min-width:120px}
.srow .conf{font-size:13px;padding:2px 6px;border-radius:4px;background:var(--light)}.srow .conf.low{background:#fff1cc}
.srow select{font-size:14px}.seg{display:flex;gap:0;margin:8px 0}.seg label{flex:1;font-weight:600;text-align:center;border:2px solid var(--ink);padding:8px;cursor:pointer;background:#fff}
.seg label:first-child{border-radius:6px 0 0 6px}.seg label:last-child{border-radius:0 6px 6px 0;border-left:0}.seg input{display:none}.seg label:has(input:checked){background:var(--fill,var(--dark));color:var(--on-fill,#fff)}
.srow{display:grid;grid-template-columns:auto auto 1fr;align-items:start;column-gap:10px;row-gap:6px}
.srow input.ck{width:22px;height:22px;margin:14px 0 0}.srow .nm,.srow .kd,.srow .q{grid-column:3}.srow select{max-width:100%}
.srow .pv{width:100%;margin-top:4px}.srow .kd{justify-self:start}
.warn{background:#fff1cc;border:2px solid var(--gold-d);border-radius:6px;padding:10px;font-weight:600}
.note{border-color:var(--dark);background:#f3f6ff}.gph{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:18px}
.gpc{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}.rep{font-size:13px;color:#4a5070}
.tips{padding-left:20px;margin:0}.tips li{margin:0 0 12px}.src{display:block;font-size:13px;color:#4a5070}.src a{color:var(--dark)}
h1 .icon{width:24px;height:24px;vertical-align:-3px;margin-right:8px}
.ev{padding:12px 0;border-top:2px solid var(--light)}.ev:first-of-type{border-top:0}.ev p{margin:2px 0}.evh{display:flex;justify-content:space-between;gap:8px;align-items:center}
.tag{font:600 13px/1 var(--px);padding:4px 8px;border-radius:4px;background:var(--light);white-space:nowrap}.tag.live{background:var(--gold);color:var(--ink);border-radius:999px}.tag.upcoming{background:#5eead4;color:#0f766e;border-radius:999px}.tag.ended{background:#dde1ee;color:#4a5070;border-radius:999px}
.rk{width:100%;border-collapse:collapse;margin:8px 0;font-size:15px}.rk th,.rk td{text-align:left;padding:6px;border-bottom:2px solid var(--light)}.rk td:last-child,.rk th:last-child{text-align:right}
.plist{max-height:50vh;overflow:auto;margin-bottom:12px}.plist .pick{padding:6px 0}.builder{border:2px dashed var(--mid);border-radius:6px;padding:10px;margin:8px 0}
.more{padding:12px 4px;border-top:2px solid var(--light)}.more h3{margin:0 0 4px;font:600 17px var(--px)}.more p{margin:0 0 6px}
.pv{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.pv figure{margin:0;text-align:center}.pv figcaption{font-size:13px;line-height:1.2;margin-top:4px}
/* pixel16 icon: our own 16-bit frame (bevelled navy border + gold inner line), name in our font, rarity strip */
.thumb.ico{width:72px;border:3px solid var(--ink);border-radius:3px;background:var(--ink);box-shadow:inset 0 0 0 1px var(--gold)}
.thumb.ico .art{width:64px;height:88px;margin:4px 4px 0;border:2px solid var(--gold);image-rendering:auto;background:#2a2f57}
.thumb.ico .tn{display:block;width:100%;color:#fff;font:600 9px/1.3 var(--px);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:1px 2px 0}
.thumb.ico .rar{background:var(--gold);color:var(--ink)}
.thumb.ico.holo::after{inset:4px 4px auto 4px;height:88px}
/* pixel rarity icons */
.ri{display:inline-block;vertical-align:middle;image-rendering:pixelated}.ris{image-rendering:auto}.rar .ri+.ri{margin-left:2px}.r .ri+.ri,.lg .ri+.ri{margin-left:3px}
.rar{display:flex;align-items:center;justify-content:center;gap:0;min-height:16px;padding:2px 0;background:var(--ink)!important;letter-spacing:0}
.rn{font:700 11px/1 var(--px);color:#fff;margin-right:2px}
.lg{display:flex;align-items:center;gap:12px;padding:6px 0}.lg .rar{width:84px;border-radius:3px}
.thumb.ico .icon8{width:64px;height:88px;margin:4px 4px 0;padding:10px;border:2px solid var(--gold);background:var(--light)}
/* meta decks */
.deck .dh{display:flex;align-items:center;gap:8px}.deck .dh h2{margin:0;font:600 19px var(--px)}
.deck .dnum{flex:none;width:auto;font:600 16px var(--px);background:var(--ink);color:#fff;padding:2px 7px;border-radius:4px}
.deck .stats{margin:6px 0;font-size:14px}.deck .have{margin:8px 0 0;font-size:15px}
.dl{list-style:none;margin:6px 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px}
.dl li label{display:flex;align-items:center;gap:6px;padding:4px;border:2px solid var(--light);border-radius:6px;font-size:13px;opacity:.75}
.dl li.own label{opacity:1;border-color:var(--mid)}.dl input{margin:0;width:auto;flex:none}.dl li label{justify-content:flex-start;text-align:left}.dl .cn{flex:1}.dl .dart{width:28px;flex:none}.dl .dart>*{width:28px;height:auto}
.dact{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.dact .btn{width:auto;flex:1;margin:8px 0;font-size:16px;padding:10px}
.qr{margin-top:10px;padding-top:10px;border-top:2px solid var(--light);text-align:center}
.qr svg{display:block;width:220px;max-width:100%;margin:0 auto 4px;image-rendering:pixelated}
.qr .dact{justify-content:center}.qr .dact .btn{flex:1;max-width:280px;margin:6px 0 4px}
.qr .small{margin:0}.small{font-size:12px}
/* rarity filter chips (picker) */
.rchips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
.rchip{display:inline-flex;align-items:center;gap:1px;min-height:36px;min-width:40px;padding:4px 7px;border:2px solid #c9d1ef;border-radius:6px;background:#fff;opacity:.45;cursor:pointer}
.rchip[aria-pressed=true]{opacity:1;border-color:var(--dark);background:#eef2ff}
.rchip .ri{width:auto;height:14px}
.rfline{margin:4px 0 8px;font-size:13px}
.rfline .link{font-size:13px;padding:0}
/* Shinedust planner */
.dust{padding:12px 14px}.dust .dl{display:flex;align-items:center;gap:8px;font-size:15px;margin:0}
.dust .dl input{width:110px;margin:0;padding:6px 8px;border-width:2px}
.dust .plan{margin:8px 0 0;font-size:15px}.dust p{margin:6px 0 0}
.pl{flex:none;display:flex;align-items:center}.pl input{width:22px;height:22px;margin:0;accent-color:var(--dark)}
.free{color:#16805f}.cost{color:var(--ink)}
.match .trade{flex-wrap:wrap;justify-content:flex-start}.match .tx{flex:1;min-width:0}
.match .acts2{flex-basis:100%;display:flex;justify-content:flex-end;gap:18px}.match .acts2 .link{margin:0;padding:4px 0}
/* activity badges */
.act{display:inline-block;font:600 12px/1 var(--px);padding:4px 6px;border:2px solid #c9d1ef;border-radius:3px;color:#4a5070;background:#fff;vertical-align:1px}
.act.now{border-color:transparent;color:var(--ink);background:var(--gold);border-radius:999px;padding:4px 10px}.act.old{opacity:.7}
.center{text-align:center}
/* trade plan card */
.tcard h2{margin:0 0 10px}.tc-row{display:flex;align-items:center;justify-content:center;gap:10px}.tc-row figure{margin:0;text-align:center;font-size:14px;flex:1}
.tc-row .thumb{margin:0 auto 6px}.tc-arrow{font:600 28px var(--px)}
.tc-meta{text-align:center;font-size:15px;margin:10px 0}.tc-meta .ri{vertical-align:-2px}
.tc-fid{text-align:center;border-top:2px solid var(--light);border-bottom:2px solid var(--light);padding:6px 0}.tc-fid .fid{margin:2px 0}
.tc-steps{font-size:14px;padding-left:22px;margin:10px 0 14px}.tc-steps li{margin:4px 0}
/* trade queue */
.queue h2{margin-top:0}.qrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 0;border-top:2px solid var(--light);font-size:15px}
.qrow .tx{flex:1;min-width:0}.qn{font:600 16px var(--px);width:22px;text-align:center;flex:none}
.qrow.active{background:#fff8e1;margin:0 -10px;padding:10px;border:2px solid var(--gold);border-radius:4px}
.qacts{flex-basis:100%;display:flex;justify-content:flex-end;gap:16px}.qacts .link{margin:0;padding:4px 0}
.cd{font:600 13px/1.6 var(--px);color:var(--dark)}.cd.half{color:#b9620f}.cd.exp{color:#b3261e}.small{font-size:13px}
.rel{display:inline-block;font:600 12px/1 var(--px);padding:4px 6px;border:2px solid #c9d1ef;border-radius:3px;background:#fff;color:#4a5070;vertical-align:1px}
.rel.good{border-color:var(--dark);color:var(--dark)}.rel.warn{border-color:#b9620f;color:#b9620f}
.alerts{padding:12px 14px}.alerts p{margin:6px 0}.alerts .btn{margin:8px 0 4px}
.age{border:3px solid var(--light);border-radius:6px;padding:8px 12px;margin:10px 0}.age legend{font:600 15px var(--px);padding:0 4px}
.age .pick,.card>.pick{display:flex;gap:10px;align-items:center;padding:8px 0;font-size:16px}.age input,.card>.pick input{width:22px;height:22px;margin:0;flex:none;accent-color:var(--dark)}
.privacy h2{font-size:18px;margin:16px 0 4px}.privacy ul{padding-left:20px}.privacy li{margin:4px 0}
#testmail .small{overflow-wrap:anywhere}


/* ── Home pop (Pocket-inspired vibe; original CSS only) ── */
body:has(.home){
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 12%, rgba(255,255,255,.45) 0 1.5px, transparent 3px),
    radial-gradient(circle at 30% 70%, rgba(255,255,255,.4) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 62%, rgba(255,255,255,.5) 0 1.5px, transparent 3px),
    radial-gradient(circle at 55% 40%, rgba(255,255,255,.35) 0 2px, transparent 3px),
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,.06) 18px 19px),
    linear-gradient(165deg, #b8d9ff 0%, #d4c4ff 42%, #ffe9a8 100%);
  background-attachment: fixed;
  min-height: 100vh;
}
body:has(.home)::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 120px 80px at 20% 30%, rgba(255,255,255,.25), transparent),
    radial-gradient(ellipse 160px 100px at 80% 20%, rgba(255,200,255,.2), transparent),
    radial-gradient(ellipse 140px 90px at 70% 75%, rgba(255,255,200,.22), transparent);
}
body:has(.home) header,
body:has(.home) #theme-bar,
body:has(.home) main,
body:has(.home) footer{position:relative;z-index:1}
body:has(.home) header{
  background:linear-gradient(180deg,#5b7ae8,#3d5a9e);
  box-shadow:0 4px 16px rgba(61,90,158,.25);
}
body:has(.home) main{max-width:560px;padding:20px 16px 32px}
.home{display:flex;flex-direction:column;gap:14px}
.home .card{
  border-radius:20px;padding:20px 18px 18px;margin:0;
  box-shadow:0 4px 6px rgba(42,51,72,.04),0 12px 28px rgba(42,51,72,.1);
  border:0;position:relative;overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.home .card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:5px;
  background:var(--accent-bar, #f5d76e);
}
.home .accent-yellow{--accent-bar:linear-gradient(90deg,#ffe566,#ff9ecd)}
.home .accent-blue{--accent-bar:linear-gradient(90deg,#6b8fd4,#a78bfa)}
.home .accent-teal{--accent-bar:linear-gradient(90deg,#2fb6a3,#5eead4)}
.home .accent-pink{--accent-bar:linear-gradient(90deg,#ff5fa2,#f9a8d4)}
.home .accent-violet{--accent-bar:linear-gradient(90deg,#8b5cf6,#c4b5fd)}

.home-hero{text-align:center;padding-top:22px!important;padding-bottom:22px!important;
  background:linear-gradient(180deg,#fffef8 0%,#fff 55%)}
.home-kicker{
  display:inline-block;margin:0 0 10px;padding:5px 12px;
  font:700 11px/1 system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;
  color:#5a3d9e;background:linear-gradient(90deg,#ede9fe,#fce7f3);
  border-radius:999px;
}
.home-hero h1{
  font-size:clamp(22px,5.5vw,28px);margin:0 0 10px;line-height:1.25;
  background:linear-gradient(120deg,#2a3348 0%,#4c1d95 50%,#1d4ed8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.home-tag{font-size:16px;color:#4a5070;margin:0 0 18px;line-height:1.45}
.home-sub{margin:4px 0 0!important}

.steps{display:flex;flex-direction:column;gap:8px;margin:0 0 18px;text-align:left}
.step{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-radius:16px;background:#f6f8ff;
  box-shadow:inset 0 0 0 1px rgba(107,143,212,.2);
}
.step-num{
  flex:none;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  font:700 16px/1 var(--px);color:#fff;
  box-shadow:0 3px 0 rgba(0,0,0,.12),0 4px 10px rgba(0,0,0,.1);
}
.s1 .step-num{background:linear-gradient(180deg,#7dd3fc,#3b82f6)}
.s2 .step-num{background:linear-gradient(180deg,#c4b5fd,#7c3aed)}
.s3 .step-num{background:linear-gradient(180deg,#f9a8d4,#ec4899)}
.s1{background:linear-gradient(135deg,#eff6ff,#f8fafc)}
.s2{background:linear-gradient(135deg,#f5f3ff,#f8fafc)}
.s3{background:linear-gradient(135deg,#fdf2f8,#f8fafc)}
.step-txt{font:600 15px/1.3 system-ui,sans-serif;color:var(--ink)}

.home .btn-pulse{
  border-radius:999px;padding:16px 20px;font-size:18px;margin:8px 0 0;
  background:linear-gradient(180deg,#ffe566 0%,#f5c518 55%,#eab308 100%);
  box-shadow:0 4px 0 #b9811a,0 10px 24px rgba(234,179,8,.35),inset 0 2px 0 rgba(255,255,255,.55);
  animation:cta-pulse 2.2s ease-in-out infinite;
}
.home .btn-pulse:hover{filter:brightness(1.03)}
.home .btn-pulse:active{
  transform:scale(.97) translateY(3px);
  box-shadow:0 1px 0 #b9811a,0 4px 12px rgba(234,179,8,.3);
  animation:none;
}
@keyframes cta-pulse{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
@media (prefers-reduced-motion:reduce){
  .home .btn-pulse{animation:none}
  .home .card,.home .ev-tile,.home .btn{transition:none}
}

.sec-head{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.sec-head h2,.sec-head h3{margin:0;font-size:16px}
.sec-ico{
  flex:none;width:40px;height:40px;border-radius:14px;
  display:grid;place-items:center;color:#fff;
}
.sec-ico .hi{width:24px;height:24px}
.c-blue{background:linear-gradient(145deg,#60a5fa,#3b82f6);color:#fff}
.c-teal{background:linear-gradient(145deg,#2dd4bf,#0d9488);color:#fff}
.c-pink{background:linear-gradient(145deg,#f472b6,#db2777);color:#fff}
.c-violet{background:linear-gradient(145deg,#a78bfa,#7c3aed);color:#fff}
.c-blue .hi,.c-teal .hi,.c-pink .hi,.c-violet .hi{color:#fff}

.rar-strip{
  display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:10px;
  background:linear-gradient(135deg,#f0f4ff,#faf5ff);border-radius:14px;
}
.rar-chip{
  display:inline-flex;align-items:center;gap:2px;padding:6px 8px;
  background:#fff;border-radius:10px;
  box-shadow:0 1px 3px rgba(42,51,72,.08);
}

.news-tiles{display:flex;flex-direction:column;gap:8px;margin:0 0 10px}
.ev-tile{
  display:block;text-decoration:none;color:inherit;
  padding:12px 14px;border-radius:14px;
  background:linear-gradient(135deg,#fff,#f8fafc);
  box-shadow:0 1px 3px rgba(42,51,72,.06), inset 0 0 0 1px rgba(42,51,72,.05);
  transition:transform .15s ease, box-shadow .15s ease;
}
.ev-tile:hover,.ev-tile:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(42,51,72,.12);
  outline:none;
}
.ev-tile:active{transform:scale(.98)}
.ev-tile .tag{
  border-radius:999px;padding:4px 9px;font-size:11px;
  box-shadow:0 2px 6px rgba(201,162,39,.25);
}
.ev-tile .tag.live{background:var(--gold);color:var(--ink)}
.ev-tile .tag.soon,.ev-tile .tag.upcoming{background:#5eead4;color:#0f766e}

.home .btn{transition:transform .12s ease, box-shadow .12s ease, filter .12s ease}
.home .link{font-weight:600}

@media (min-width:520px){
  .steps{flex-direction:row;gap:10px}
  .step{flex:1;flex-direction:column;text-align:center;padding:14px 10px;gap:8px}
  .step-txt{font-size:13px}
}

/* Home tip callout (replaces long rules card) */
.home-tip{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:12px 14px;margin:0;border-radius:18px;
  background:rgba(255,255,255,.72);
  box-shadow:0 4px 14px rgba(42,51,72,.08);
  backdrop-filter:blur(6px);
}
.tip-pill{
  margin:0;padding:8px 14px;border-radius:999px;
  font:700 14px/1.3 system-ui,sans-serif;color:#3d5a9e;text-align:center;
  background:linear-gradient(90deg,#e0e7ff,#fce7f3);
  box-shadow:0 2px 6px rgba(61,90,158,.12);
}
.home-tip .rar-strip{
  margin:0;width:100%;justify-content:center;
  background:transparent;padding:4px 0;
}

/* Competitive / crown decks card */
.home .accent-crown{--accent-bar:linear-gradient(90deg,#f5d76e,#a78bfa,#f5d76e)}
.home-crown{
  background:linear-gradient(165deg,#fffef5 0%,#faf5ff 55%,#fff 100%)!important;
  box-shadow:0 4px 6px rgba(167,139,250,.08),0 14px 32px rgba(245,215,110,.2)!important;
}
.comp-pill{
  display:inline-block;margin:0 0 10px;padding:5px 11px;border-radius:999px;
  font:700 11px/1 system-ui,sans-serif;letter-spacing:.03em;text-transform:uppercase;
  color:#7c5e10;background:linear-gradient(90deg,#fde68a,#fef3c7);
  box-shadow:0 2px 0 #eab308;
}
.crown-head{gap:12px}
.crown-head h2{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:18px!important;
}
.crown-flank{image-rendering:pixelated;vertical-align:middle;flex:none}
.c-crown{
  background:linear-gradient(145deg,#fde68a,#f59e0b 55%,#a78bfa)!important;
  box-shadow:0 3px 0 #b45309,0 4px 12px rgba(245,158,11,.35);
}
.crown-img{image-rendering:pixelated;width:22px;height:22px}
.btn-crown{
  display:block;width:100%;text-align:center;text-decoration:none;
  margin:12px 0 0;padding:14px 18px;border-radius:999px;
  font:600 17px/1.2 var(--px);color:#3b2a08;
  background:linear-gradient(180deg,#ffe566,#f5c518 60%,#eab308);
  box-shadow:0 4px 0 #b9811a,0 10px 22px rgba(234,179,8,.3),inset 0 2px 0 rgba(255,255,255,.5);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn-crown:active{transform:scale(.97) translateY(2px);box-shadow:0 1px 0 #b9811a}
.btn-crown:focus-visible{outline:3px solid #a78bfa;outline-offset:3px}
.savebox { margin: 12px 0; padding: 12px; border: 3px solid #f5c400; border-radius: 12px; background: #fffbe6; }
.savebox h3 { margin: 0 0 4px; }
.savebox input, .restore input { width: 100%; box-sizing: border-box; margin: 6px 0; padding: 8px; font-size: 14px; border: 2px solid #ccd; border-radius: 8px; }
.savebox .btn { margin: 4px 6px 4px 0; }
.restore { margin-top: 14px; text-align: left; }
.scanbar{position:sticky;bottom:0;z-index:5;padding:10px 0;background:linear-gradient(transparent,var(--paper,#fff) 30%)}
.scanbar .btn{width:100%;font-size:18px;padding:14px}.scanbar .btn:disabled{opacity:.5}
.btn.mini{font-size:13px;padding:4px 8px;margin-left:4px}
.ow{padding:10px 0;border-top:2px solid var(--light)}
.vscan{border:2px solid var(--accent,#3b82f6)}
.vscan progress{width:100%;height:14px}
.vscan .vhow ol{padding-left:1.2em;margin:.4em 0}
.vscan .allmiss{display:block;margin:.6em 0}
.vscan .sets .chk{display:inline-block;margin:.2em .8em .2em 0}
.vscan .next{margin-top:.6em;padding:.6em;border-radius:8px;background:rgba(59,130,246,.12)}
.btn.big{font-size:1.1em;padding:.8em 1.4em}
.card.scan.glow{box-shadow:0 0 0 3px var(--accent,#3b82f6)}
.vscan .vset{display:block;margin:.3em 0}.vscan .warn{color:#b45309}
/* Look-alikes of Pocket's My Cards switches (drawn here, not Pocket assets) */
.vhow .steps li{margin:.45em 0}
.pk-ui{display:inline-flex;align-items:center;gap:.45em;vertical-align:middle;padding:.25em .4em .25em .35em;border-radius:999px;background:#f4f7fb;border:1px solid #dbe3ee;box-shadow:inset 0 1px 0 #fff,0 1px 3px rgba(40,60,90,.15);color:#3c4a5e;font:600 .9em system-ui,sans-serif}
.pk-ico{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#fff;border:1px solid #d3dbe7;color:#4a5870}
.pk-lbl{padding:0 .3em 0 .5em}
.pk-tog{position:relative;display:inline-block;width:44px;height:24px;border-radius:999px;background:linear-gradient(#3fc3a8,#2aa58c);box-shadow:inset 0 1px 2px rgba(0,0,0,.2)}
.pk-tog i{position:absolute;right:2px;top:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.vscan .vtips{margin:.6em 0;padding:.5em .8em;border-radius:8px;background:rgba(59,130,246,.08)}.vscan .vtips ul{margin:.3em 0;padding-left:1.2em}
.vprog{padding-top:58px}.vprog .vbar{position:relative;height:18px;margin:0 0 8px;border-radius:9px;background:rgba(127,127,127,.22);box-shadow:inset 0 1px 2px rgba(0,0,0,.2)}
.vprog .vfill{height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,#3fc3a8,#3b82f6)}
.vprog .walker{position:absolute;bottom:14px;left:0;width:44px;height:50px;pointer-events:none;background-size:100% 100%;background-repeat:no-repeat;image-rendering:pixelated}
.vprog .vline{margin:.2em 0}
[data-theme=pikachu] .vprog .vfill{background:linear-gradient(90deg,#ffd43b,#f59f00)}
/* f315 no red on the scan screens (Will): the Team Rocket bar fills gold/holo like the scan HUD; scan error lines are the page
   text with a gold rule instead of dark red */
[data-theme=team-rocket] .vprog .vfill{background:linear-gradient(90deg,#c9a227,#f5d76e 40%,#fff3b0 55%,#bdf2ff 62%,#f5d76e 75%)}
.vprog .err,.vres .err,.scanres .err{color:inherit;border-left:4px solid #f5d76e;padding-left:8px}
html[data-theme=team-rocket] :is(.vprog,.vlinger) .btn:not(.alt){--btn-hi:#ffe08a;--btn-lo:#f5d76e;--btn-ink:#1b1f3b;--btn-shine:#fff8d6;color:#1b1f3b;box-shadow:inset 0 1px 0 #fff8d6,0 3px 0 #000}
[data-theme=team-rocket] .vprog .vbar{background:rgba(255,255,255,.12)}
@media (prefers-reduced-motion: reduce){.vprog .walker{transition:none}}
[data-theme=team-rocket] .vprog .walker{filter:drop-shadow(0 0 1px rgba(255,255,255,.7))}
.vgame { margin-top: 10px; }
.vgame canvas { width: 100%; max-width: 420px; aspect-ratio: 320/96; display: block; border-radius: 10px; background: color-mix(in srgb, currentColor 6%, transparent); image-rendering: pixelated; touch-action: manipulation; cursor: pointer; }
.vgs { font-size: 12px; margin: 4px 0 0; }
.dash-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dash-top h1 { margin: 0; }
.gear { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; padding: 6px 10px; border-radius: 999px; border: 1px solid currentColor; color: inherit; text-decoration: none; white-space: nowrap; }
/* phone fit: the long 'Hi, <nickname>!' title shrinks/wraps instead of pushing ⚙︎ Edit profile past the right edge; under ~360px the button drops to its own line */
.dash-top{flex-wrap:wrap;min-width:0}.dash-top h1{flex:1 1 11em;min-width:0;overflow-wrap:anywhere}.dash-top .gear{flex:none;margin-left:auto;max-width:100%;min-height:36px}
.btn.add-big { display: block; width: 100%; font-size: 20px; padding: 16px; margin: 14px 0 6px; text-align: center; box-sizing: border-box; }
.alerts-row { margin: 10px 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.alerts-btn { width: 100%; }
.alerts-on { cursor: default; background: #2e9d63 !important; color: #fff !important; }
.sheet-bg { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; justify-content: center; z-index: 50; }
.sheet { width: min(480px, 100%); margin: 0; border-radius: 18px 18px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.phone-ill { width: 92px; margin: 6px auto 10px; border: 3px solid currentColor; border-radius: 16px; padding: 6px; opacity: .9; }
.pi-screen { height: 92px; display: grid; place-items: center; }
.pi-icon { width: 34px; height: 34px; border-radius: 9px; background: #f5c518; color: #222; font: 800 13px system-ui; display: grid; place-items: center; }
.pi-bar { display: flex; justify-content: center; border-top: 2px solid currentColor; padding-top: 4px; }
.phone-ill.top .pi-bar { border-top: 0; border-bottom: 2px solid currentColor; padding: 0 0 4px; font-size: 9px; gap: 4px; align-items: center; }
.phone-ill.top .pi-bar svg { width: 14px; height: 14px; flex: none; }

.logo-icon{width:36px;height:36px;image-rendering:pixelated;border-radius:8px}.logo .wm{height:22px;width:auto;image-rendering:pixelated}.logo .wm-light{display:none}
html[data-theme=pikachu] .logo .wm-dark{display:none}html[data-theme=pikachu] .logo .wm-light{display:inline}
@media(max-width:380px){.logo .wm{height:18px}}

.scanbar.sticky{position:sticky;top:0;z-index:5;background:var(--card,#fff);padding:8px 0;border-bottom:1px solid #0002}.scanbar.sticky .vsum{margin:0 0 6px}
.vset-d{border:1px solid #0002;border-radius:8px;margin:6px 0;padding:6px 10px}.vset-d summary{cursor:pointer;padding:4px 0}.srow.mini{display:flex;align-items:center;gap:8px;padding:4px 0;border-top:1px solid #0001}.srow.mini span{flex:1}select.pv.sm{font-size:12px;max-width:42%}

.vgame canvas{width:100%;max-width:640px;image-rendering:pixelated;border-radius:8px;display:block}.lb{margin:8px 0}.lbl{max-height:320px;overflow:auto;padding-left:28px}.lbl li{display:flex;justify-content:space-between;gap:8px;padding:2px 4px}.lbl li.mine{background:#ffe28a;border-radius:4px}

.gfs{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;position:fixed;inset:0;z-index:1000;background:#000;display:flex;align-items:center;justify-content:center}.gfs{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);box-sizing:border-box;height:100vh;height:100dvh}.gfs canvas{max-width:none;flex:none;image-rendering:crisp-edges;image-rendering:pixelated;display:block}
.gbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:6px;padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 6px max(8px,env(safe-area-inset-left));pointer-events:none}.gbar>*{pointer-events:auto}.gsp{flex:1}
.gbtn{font:18px/1 system-ui;width:40px;height:40px;border-radius:10px;border:2px solid #fff8;background:#0006;color:#fff;cursor:pointer}.gfs .vhi{color:#fff;font:600 13px system-ui;text-shadow:0 1px 2px #000}
.gfs .lb{position:absolute;top:56px;right:8px;left:8px;max-width:420px;margin:0 auto;max-height:70vh;overflow:auto;background:#fff;color:#1b1f3b;border-radius:12px;padding:10px 14px;box-shadow:0 6px 24px #0008}
.playgame{display:inline-flex;align-items:center;gap:8px;margin-top:10px}

header .logo{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}header .logo img{-webkit-user-drag:none;pointer-events:none}

.restore-d{margin-top:14px}.restore-d summary{cursor:pointer;font-weight:600}.welcome{text-align:center}
.lookpick{position:fixed;inset:0;z-index:900;background:#0008;display:flex;align-items:center;justify-content:center;padding:12px}
.lp-card{background:var(--card,#fff);color:inherit;border-radius:16px;max-width:440px;width:100%;padding:16px;text-align:center;box-shadow:0 10px 40px #0008}
.lp-lab{position:relative;margin:10px auto 4px;max-width:380px;image-rendering:pixelated}
.lp-wall{height:54px;background:repeating-linear-gradient(90deg,#dfe6f0 0 16px,#d3dbe8 16px 32px);border:3px solid #14121c;border-bottom:0;border-radius:6px 6px 0 0;position:relative}
.lp-shelf{position:absolute;left:12%;top:16px;width:30%;height:6px;background:#9aa3b5;box-shadow:0 3px 0 #14121c}.lp-shelf.s2{left:58%;top:30px;width:28%}
.lp-table{display:flex;justify-content:space-around;align-items:flex-end;gap:4px;padding:10px 6px 8px;background:#b07a45;border:3px solid #14121c;box-shadow:inset 0 -6px 0 #8a5a2e,inset 0 4px 0 #c9945c}
.lp-legs{height:22px;margin:0 8%;background:linear-gradient(90deg,#14121c 0 10px,transparent 10px calc(100% - 10px),#14121c calc(100% - 10px))}
.lp-cap{background:none;border:0;padding:4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;font:600 12px system-ui;color:#fff;text-shadow:0 1px 0 #000;border-radius:10px}
.lp-cap canvas{width:96px;max-width:26vw;image-rendering:pixelated;filter:drop-shadow(0 4px 0 #0005)}
.lp-cap.on canvas{filter:drop-shadow(0 0 6px #ffe680) drop-shadow(0 0 3px #fff) drop-shadow(0 4px 0 #0005)}
.lp-cap.bounce canvas{animation:lpb .5s ease-out}@keyframes lpb{0%{transform:translateY(0)}30%{transform:translateY(-14px) scale(1.06)}55%{transform:translateY(0) scale(1,.94)}75%{transform:translateY(-5px)}100%{transform:none}}
.lp-desc{min-height:1.4em;margin:8px 0}.lp-ok{width:100%}.lp-skip{margin-top:8px}
html[data-theme=team-rocket] .lp-card{background:#16161c;color:#eee}html[data-theme=pikachu] .lp-card{background:#fffbe8}

/* Tablet/desktop: Duplicates left, Wishlist right. Phones stay one column. */
@media(min-width:880px){main:has(.hw-cols){max-width:1080px}.hw-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}.hw-cols>.card{margin:0;min-width:0}}
/* Account switcher (top right) */
header .acct{margin-left:auto;position:relative}header .acct summary{list-style:none;cursor:pointer;font:600 14px system-ui;color:#fff;padding:6px 10px;border-radius:999px;background:#ffffff22;max-width:44vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}header .acct summary::-webkit-details-marker{display:none}
header .acct-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;background:#fff;color:#1b1f3b;border-radius:12px;box-shadow:0 8px 28px #0006;min-width:220px;padding:6px;display:flex;flex-direction:column}
header .acct-menu>*{all:unset;cursor:pointer;padding:10px 12px;border-radius:8px;font:500 15px system-ui}header .acct-menu>*:hover{background:#eef1f8}header .acct-menu .acct-rm{color:#b3261e}
.addacct form{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px}.addacct input{flex:1 1 200px;font-size:20px}#paircode{letter-spacing:.3em;font-size:26px;text-align:center;max-width:220px}
.pairbox{margin-top:10px}.paircode{font-size:28px;letter-spacing:.15em;font-family:ui-monospace,monospace}

/* Game: play-while-you-wait header + inline top riders */
.vplay{margin:14px 0 6px;padding:8px 12px;border-radius:10px;background:#ffe680;color:#1b1f3b;font-size:14px;text-align:center;border:2px dashed #1b1f3b55}
.lbmini{margin:6px auto 2px;max-width:420px;font-size:13px}.lbm-h{display:block;margin-bottom:2px}.lbm{margin:0;padding-left:24px}.lbm li{display:flex;justify-content:space-between;gap:8px;padding:1px 4px}.lbm li.mine{background:#ffe28a;border-radius:4px}.lbm-me{margin:2px 0 0;font-weight:600}
.gfs .lbmini{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:min(320px,86vw);background:#000a;color:#fff;border-radius:10px;padding:8px 12px}.gfs .lbmini .lbm li.mine{color:#1b1f3b}.gfs.playing .lbmini{display:none}.lbmini:empty{display:none}
.lp-scene{position:relative;margin:10px auto 2px;max-width:380px;width:100%;aspect-ratio:120/66;border:3px solid #14121c;border-radius:8px;overflow:hidden}
.lp-scene .lp-bg,.lp-spot{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;display:block}.lp-spot{opacity:0;transition:opacity .25s ease;pointer-events:none}.lp-spot.on{opacity:1}
.lp-scene .lp-cap{position:absolute;top:calc(19 / 66 * 100%);width:calc(14 / 120 * 100%);transition:filter .25s ease;aspect-ratio:1;padding:0;transform:translateX(-50%);border-radius:50%}
.lp-scene .lp-cap :is(img,canvas){width:100%;height:100%;max-width:none;image-rendering:pixelated;display:block;filter:drop-shadow(0 2px 0 #0004)}
.lp-scene .lp-cap :is(img,canvas){transition:filter .25s ease}.lp-scene.lit .lp-cap:not(.on) :is(img,canvas){filter:brightness(.45) saturate(.7)}.lp-scene .lp-cap.on :is(img,canvas){filter:brightness(1.25) drop-shadow(0 0 3px #fff4c0) drop-shadow(0 0 1px #fff)}.lp-cap.bounce :is(img,canvas){animation:lpb .5s ease-out}
.lp-names{position:relative;height:18px;max-width:380px;margin:0 auto;font:600 12px system-ui}.lp-names span{position:absolute;transform:translateX(-50%);white-space:nowrap}

/* Header nav: ☰ menu + Back (Home Screen app) */
header{position:relative}header .navmenu{position:relative}header .navmenu{margin-left:6px}header:not(:has(.acct)) .navmenu{margin-left:auto}
header .navmenu summary{list-style:none;cursor:pointer;font:700 20px/1 system-ui;color:#fff;width:38px;height:38px;display:grid;place-items:center;border-radius:8px;background:#ffffff22;border:2px solid #ffffff55;box-shadow:0 3px 0 #0004}header .navmenu summary::-webkit-details-marker{display:none}
header .navlist{position:absolute;right:0;top:calc(100% + 8px);z-index:70;min-width:240px;background:var(--card,#fff);color:var(--ink,#1b1f3b);border:3px solid var(--ink,#1b1f3b);border-radius:8px;box-shadow:0 6px 0 var(--ink,#1b1f3b),0 10px 30px #0005;padding:6px;display:flex;flex-direction:column}
header .navlist button{all:unset;cursor:pointer;display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:6px;font:600 15px system-ui}header .navlist button:hover,header .navlist button:focus-visible{background:color-mix(in srgb,var(--gold,#ffd84a) 45%,transparent)}
header .navlist .ni{width:22px;text-align:center}
header .navback{all:unset;cursor:pointer;color:#fff;font:700 15px system-ui;padding:6px 10px;border-radius:8px;background:#ffffff22;border:2px solid #ffffff55;margin-right:2px}

#theme-bar .tb-look{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font:700 13px system-ui;padding:5px 12px 5px 8px;border-radius:999px;border:2px solid currentColor;background:transparent;color:inherit}#theme-bar .tb-look :is(img,canvas){image-rendering:pixelated;width:18px;height:18px}

/* Logo: soft glow on hover / touch; long-press shines brighter, white flash into the game */
header .logo .logo-icon{transition:filter .3s ease,transform .3s ease}
header .logo:hover .logo-icon,header .logo.touch .logo-icon{filter:drop-shadow(0 0 5px #fffa) drop-shadow(0 0 10px #ffe68088)}
header .logo.egg .logo-icon{transition:filter 1s ease-in,transform 1s ease-in;transform:scale(1.18);filter:brightness(2.2) drop-shadow(0 0 14px #fff) drop-shadow(0 0 30px #ffe680)}
.eggflash{position:fixed;inset:0;z-index:2000;background:#fff;opacity:0;pointer-events:none;transition:opacity .15s ease-out}.eggflash.on{opacity:1}.eggflash.out{opacity:0;transition:opacity .6s ease-in}
@media (prefers-reduced-motion:reduce){header .logo.egg .logo-icon{transform:none}}

.alerts-nudge{margin:10px 0 4px;font-weight:600}.inbox{border:3px solid var(--gold,#ffd84a)}.inbox .pair{display:flex;gap:6px}.sentbtn[disabled]{opacity:.7}
.todo{background:#fff7d6;border:2px solid #f2b631;border-radius:10px;padding:8px 12px;margin:10px 0;color:#1b1f3b;text-align:left}.todo>b{display:block;margin-bottom:2px}.todo ol{margin:4px 0 0 18px;padding:0}.todo li{margin:3px 0}

.binder .bpk{border:2px solid #0002;border-radius:12px;margin:8px 0;overflow:hidden;background:#fff8}.binder .bpk.on{border-color:var(--accent,#5b6cff)}
.binder .bh{all:unset;box-sizing:border-box;cursor:pointer;display:flex;gap:10px;align-items:center;width:100%;padding:10px 12px}
.binder .bt{flex:1 1 0;min-width:0;display:flex;flex-direction:column}.binder .bt b{font-size:15px}.binder .bt small{opacity:.65;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.binder .bp{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:0 1 50%;min-width:0}.binder .bn{font-weight:800}.binder .bn i{font-style:normal;opacity:.6;font-weight:600}
.binder .bbar{width:100%;height:6px;background:#0001;border-radius:4px;overflow:hidden}.binder .bbar i{display:block;height:100%;background:linear-gradient(90deg,#ffcf4a,#ff8a3d)}
.binder .bc{font-size:12px;color:var(--muted,#4a5070);text-align:right}.binder .bc em{color:#b84500;font-style:normal;font-weight:700;white-space:nowrap}html[data-theme=team-rocket] .binder .bc em{color:#fb923c}
.binder .chev{font-size:22px;transition:transform .2s;opacity:.6}.binder .bpk.on .chev{transform:rotate(90deg)}
.binder .bgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:4px 10px 12px}
.binder .bs{all:unset;box-sizing:border-box;position:relative;aspect-ratio:5/7;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;content-visibility:auto;contain-intrinsic-size:60px 84px}
.binder .bs.e{background:#0000000d;border:2px dashed #0002;color:#0005}.binder .bs.w{background:#fff3;border:2px solid #ff8fb1;color:#c2416b}
.binder .bs.d{background:#fff;border:2px solid #0003}.binder .bs .thumb{width:100%;height:100%}.binder .bs .thumb .art{width:100%;height:100%;object-fit:cover}
.binder .bnum{font:800 16px/1 system-ui}.binder .bnm{font-size:9px;line-height:1.1;text-align:center;padding:0 2px;max-height:2.2em;overflow:hidden;opacity:.8}.binder .bs:is(.d,.o) .bnm{display:none}
.binder .bq{position:absolute;right:2px;bottom:2px;background:#1b1f3b;color:#fff;font:700 10px/1 system-ui;padding:2px 4px;border-radius:5px}
.binder .bw{position:absolute;left:0;right:0;bottom:0;font:700 9px/1.4 system-ui;text-align:center;background:#ff8fb122}
.binder .bs.tn{border-color:#ffb300;box-shadow:0 0 0 2px #ffd54a,0 0 12px 3px #ffb300a0;animation:tnp 1.6s ease-in-out infinite;color:#8a5200}.binder .bs.tn .bw{background:#ffb300;color:#fff}
@keyframes tnp{50%{box-shadow:0 0 0 2px #ffd54a,0 0 18px 6px #ffb300c0}}
.binder .bs[disabled]{cursor:default}
@media(min-width:760px){.binder .bgrid{grid-template-columns:repeat(5,minmax(0,110px));justify-content:center;gap:10px}}
.fbadge{display:inline-block;background:#2fd65a;color:#fff;font:700 11px/1 system-ui;padding:3px 7px;border-radius:6px;margin-right:4px}.card.match.isfriend{border:2px solid #2fd65a}
.fadd{display:flex;gap:8px;flex-wrap:wrap}.fadd input{flex:1;min-width:180px}.flink{font-size:12px;word-break:break-all}
.flist{list-style:none;padding:0;margin:6px 0}.frow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #0001}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}.scard{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.scard .sacts{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}

.gin{background:#000;width:100%;aspect-ratio:16/9;max-height:70vh;display:flex;align-items:center;justify-content:center;border-radius:10px;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.gin canvas{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;display:block;max-width:none}
.vgame .gin canvas{max-width:none;aspect-ratio:auto;width:100%;height:100%;border-radius:0;background:none}
.gin{position:relative}.gstart{position:absolute;left:0;right:0;bottom:12%;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:0 10px;z-index:3}.gstart .btn{min-width:0;padding:10px 14px;font-size:14px;width:auto}.gstart .last{outline:3px solid #ffe680;outline-offset:2px;box-shadow:0 0 14px #ffe680a0}
.gtog{position:absolute;top:6px;right:6px;display:flex;gap:6px;z-index:2}.gtog .gbtn{width:32px;height:32px;font-size:15px}.gbtn.gmus.off{opacity:.45;text-decoration:line-through}
.gfs .gstart{bottom:auto;top:62%}
.gstart{bottom:5%}.gstart .btn{font-size:12px;padding:7px 10px;margin:0}.vgame>.lbopen{display:none}
@media(min-width:600px){.gstart .btn{font-size:14px;padding:10px 14px}}
.navlist button{align-items:center}.navlist .nt{display:flex;flex-direction:column;text-align:left;line-height:1.2}.navlist .nt small{font-weight:400;opacity:.75;font-size:11.5px;margin-top:1px}
.gctrl{pointer-events:none;list-style:none;margin:6px 0 0;padding:6px 10px;width:100%;max-width:360px;background:#000a;border-radius:8px;color:#fff;font-size:11px;line-height:1.5;text-align:left}.gctrl li{display:flex;align-items:center;gap:6px}.gc-i{width:12px;height:12px;image-rendering:pixelated;flex:none}

.garage{position:absolute;inset:0;z-index:6;background:#0b0f24e8;display:flex;align-items:center;justify-content:center;padding:8px;overflow:auto}.garage[hidden]{display:none}
.gar-box{background:#1b2140;border:3px solid #ffe680;border-radius:6px;padding:10px 12px;max-width:640px;width:100%;color:#fff;font-family:system-ui;text-align:center}
.gar-box h3{margin:0 0 6px;color:#ffe680}.gar-box h4{margin:8px 0 4px;text-align:left}.gar-box h4 small{font-weight:400;color:#bfe6ff;font-size:11px}
.gar-g{display:grid;grid-template-columns:repeat(9,1fr);gap:4px}.gar-i{background:#2a3266;border:2px solid #3a4280;border-radius:4px;padding:3px 1px;color:#fff;font-size:9px;display:flex;flex-direction:column;align-items:center;cursor:pointer;min-width:0}
.gar-i img{width:100%;max-width:44px;image-rendering:pixelated;aspect-ratio:22/25}.gar-i.on{border-color:#ffe680;box-shadow:0 0 8px #ffe680}.gar-i.locked img{filter:grayscale(1) brightness(.35)}.gar-i small{font-size:10px;font-weight:600;color:#ffc4c4;line-height:1.15}
.gar-done{margin-top:8px}
.gar-box{max-width:860px}.gar-i{font-size:11px}.gar-body{display:flex;gap:10px;align-items:stretch}.gar-lists{flex:1;min-width:0}
.gar-pv{flex:0 0 190px;background:#0b0f24;border:3px solid #ffe680;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px;box-shadow:inset 0 0 0 3px #2a3266}
.gar-pv canvas{aspect-ratio:auto!important;border-radius:0!important;width:170px!important;height:auto!important;max-height:none!important;max-width:none!important;image-rendering:pixelated;image-rendering:crisp-edges}.gar-pv p{margin:6px 0 0;font-size:12px;line-height:1.3;color:#bfe6ff}.gar-pv b{color:#ffe680}
.gar-again{position:absolute;right:12px;bottom:12px;z-index:5;width:auto}.gar-again[hidden]{display:none}
@media (orientation:portrait),(max-width:520px){.gar-body{flex-direction:column-reverse}.gar-pv{flex:none;flex-direction:row;gap:10px;padding:6px}.gar-pv canvas{width:120px!important}.gar-pv p{text-align:left}}
@media (max-width:520px){.gar-g{grid-template-columns:repeat(5,1fr)}}

/* Rider start screen: controls hint + rotate tip in the letterbox above/below the canvas (portrait) */
.gfs .gpre{position:absolute;color:#fff;font:600 11px/1.5 var(--px);text-shadow:0 2px 0 #000;pointer-events:none;z-index:2;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s}
.gfs.pre .gpre{opacity:1;visibility:visible;transition:none}
/* landscape / desktop: small list in the left letterbox, bottom corner, never over the canvas */
.gfs .gpre-top{left:8px;bottom:10px;max-width:calc((100% - var(--cvw, 100vw)) / 2 - 14px);text-align:left;font-size:9px}
.gfs .gpre-bot{display:none}
/* portrait: short list above the canvas, rotate tip (touch only) below */
.gfs.portrait .gpre-top{left:14px;right:14px;max-width:none;bottom:calc(50% + var(--cvh, 56vw) / 2 + 14px);text-align:center;font-size:14px}
.gfs.portrait.touch .gpre-bot{display:block;left:14px;right:14px;text-align:center;top:calc(50% + var(--cvh, 56vw) / 2 + 14px);color:#ffffffc0;font-size:12px}
.gfs.pre .vhi,.gfs.pre .lbmini{display:none!important} /* minimal start screen: logo + Tap to start only */
/* Header (and its dropdowns) always paints above page content; home sets z-index:1 on header+main, which let main cover the menu. */
header,body:has(.home) header{z-index:80}
header .hrider{flex:none;width:40px;height:50px;margin:-8px 0 -6px -4px;padding:0;border:0;background:none;cursor:pointer;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
header .hrider canvas{display:block;width:40px;height:50px;image-rendering:pixelated;image-rendering:crisp-edges;pointer-events:none}
header .hrider:focus-visible{outline:2px solid #ffe680;outline-offset:2px;border-radius:4px}
.hrider-hint{position:fixed;z-index:85;width:180px;text-align:center;padding:6px 8px;background:#1b1f3b;color:#ffe680;border:2px solid #ffe680;border-radius:6px;font:600 11px/1.3 var(--px,monospace);text-decoration:none;box-shadow:0 3px 0 #000;animation:hrh .2s ease-out}
@keyframes hrh{from{opacity:0;transform:translateY(-4px)}}
/* Header menu controls: solid dark fill, bold border, 44px tap targets, same on every theme; never overflow a 375px phone. */
header{flex-wrap:nowrap;min-width:0}header .logo{min-width:0;flex:0 1 auto}
header .acct{flex:0 1 auto;min-width:0}
html header .acct summary,html header .navmenu summary{box-sizing:border-box;height:44px;min-width:44px;background:#1b1f3b!important;color:#fff!important;border:3px solid #fff!important;border-radius:6px!important;box-shadow:0 3px 0 #000,0 0 0 2px #1b1f3b!important;text-shadow:none!important;opacity:1!important;-webkit-tap-highlight-color:transparent}
html header .acct summary{display:flex;align-items:center;gap:4px;padding:0 10px;font:700 14px/1 system-ui;max-width:40vw}
html header .acct summary .acct-nm{overflow:hidden;text-overflow:ellipsis;min-width:0}
html header .navmenu summary{width:44px;font-size:22px;flex:none}
header .navmenu{flex:none}
html header .acct summary:active,html header .navmenu summary:active,html header details[open]>summary{transform:translateY(2px);box-shadow:0 1px 0 #000,0 0 0 2px #1b1f3b!important;background:#2f3768!important}
@media (max-width:440px){header{padding:8px 10px;gap:6px}header .hrider{margin-left:-2px}header:has(.acct) .logo .wm{display:none}}
/* Trade plans (incoming / sent) */
.plans-h{display:flex;align-items:center;gap:8px;margin:8px 0}.nbadge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#e5243b;color:#fff;font:700 12px/1 system-ui,sans-serif}
.navmenu summary{position:relative}.navmenu summary .nbadge{position:absolute;top:-6px;right:-6px}
.plan .ph{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.plan .exact{display:flex;align-items:center;justify-content:center;gap:12px;margin:10px 0;text-align:center}.plan .exact>div{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:45%}
.pacts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.sug{margin-top:8px}.sug select{max-width:100%;padding:6px}
.pst{display:inline-block;padding:2px 8px;border-radius:10px;font-size:12px;font-weight:700;background:#e3e6f0;color:#1b1f3b}.pst.good{background:#d4f5dc;color:#11622a}.pst.bad{background:#fde0e0;color:#8c1d1d}.pst.warn{background:#fff1c2;color:#6b4b00}
.warnbox{display:block;background:#fff1c2;color:#4a3500;border-radius:6px;padding:6px 8px;margin:6px 0}

/* start screen: one controls list (gpre-top), buttons never over the logo/Tap to start */
.gfs .gstart .gctrl{display:none}
.gfs .gstart{top:auto;bottom:8px}
.gfs.portrait .gstart{bottom:auto;top:calc(50% + var(--cvh, 56vw) / 2 + 12px)}
.gfs.portrait.touch .gpre-bot{top:calc(50% + var(--cvh, 56vw) / 2 + 66px)}

/* Legibility pass (375-390px): readable minimum ~11px, AA contrast, no text under icons */
.rn{font:800 12px/1 system-ui,sans-serif;color:#fff;margin-right:3px}
.rar{gap:2px;flex-wrap:nowrap}.rar .ri+.ri{margin-left:1px}
.thumb.ico .tn{font:700 10.5px/1.3 system-ui,sans-serif;letter-spacing:0}
.binder .bnm{font-size:11px;opacity:1}.binder .bq{font-size:11px}.binder .bw{font-size:11px;background:#ffe3ec;color:#7a1238}
.phone-ill.top .pi-bar{font-size:11px}
.act.old{opacity:1;color:#5a6080}
.fbadge{background:#137a35;font-size:12px}
/* friends + presence */
.fact{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:6px}
.addf{font-size:14px;padding:6px 12px}
.fok{display:inline-block;font:700 13px/1 system-ui,sans-serif;color:#0f6b2e;background:#e3f7e9;border:2px solid #137a35;border-radius:6px;padding:5px 9px}
.fpend{display:inline-block;font:600 13px/1 system-ui,sans-serif;color:#4a5070;border:2px dashed #8a90b0;border-radius:6px;padding:5px 9px}
.seen{display:inline-flex;align-items:center;gap:5px;font:600 13px/1 system-ui,sans-serif;color:#4a5070}
.seen.on{color:#0f6b2e}.seen .dot{width:9px;height:9px;border-radius:50%;background:#1fbf4f;box-shadow:0 0 0 2px #1fbf4f44}
html[data-theme=team-rocket] .fok,html[data-theme=team-rocket] .seen.on{color:#6ee79a;background:#0f2a18}
html[data-theme=team-rocket] .seen,html[data-theme=team-rocket] .fpend{color:#c8c8c8}
html[data-theme=team-rocket] .act.old{color:#b5b5b5}
/* friend IDs: the pixel font draws 5 like S and 7 like 1, so use a clear monospace for digits */
.fid{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;font-weight:700;letter-spacing:.5px}
.flist .fid,.muted.fid{font-size:15px;letter-spacing:0;margin:0;white-space:nowrap}
.tcard .tut-nav{flex-wrap:wrap;justify-content:space-between}.tcard .tut-nav .btn{flex:1 1 100%;order:-1}
.flash{animation:flashp 1.2s ease-out 2;outline:3px solid #f2b631;outline-offset:2px}@keyframes flashp{0%{box-shadow:0 0 0 0 #f2b631aa}100%{box-shadow:0 0 0 14px #f2b63100}}
.mbadge{display:inline-block;min-width:20px;padding:3px 6px;margin-left:6px;border-radius:999px;background:#d1242f;color:#fff;font:800 12px/14px system-ui,sans-serif;text-align:center;vertical-align:1px;box-shadow:0 0 0 2px #fff}
/* unseen-item NEW dots (Garage button + unlocked items) */
.gs-g.isnew,.gar-again.isnew,.gar-i.isnew{position:relative}
.gs-g.isnew::after,.gar-again.isnew::after{content:"";position:absolute;top:-5px;right:-5px;width:14px;height:14px;border-radius:50%;background:#d1242f;box-shadow:0 0 0 2px #fff}
.gar-i.isnew::after{content:"NEW";position:absolute;top:-6px;right:-6px;background:#d1242f;color:#fff;font:800 10px/1 system-ui,sans-serif;padding:3px 4px;border-radius:6px;box-shadow:0 0 0 2px #fff;z-index:1}
#toast.on{z-index:1000}#toast.act{pointer-events:auto}#toast .undo{color:var(--gold);margin-left:8px;font-weight:700}.confirmq{font-weight:600}
/* Header v2: bigger, bolder logo + bigger rider with a padded invisible hit zone (finger beside/below him still triggers) */
header .logo{gap:8px}
header .logo .logo-icon{width:52px;height:52px;margin:-6px 0;border-radius:10px;filter:drop-shadow(0 3px 0 #0b0f2a) drop-shadow(0 0 6px #ffe68055)}
/* H6 holo badge (xp-holo.js): the box keeps the sizes above; the art inside is drawn at a crisp whole-pixel scale, centered */
header .logo .logo-icon.xp-holo{position:relative;display:block;flex:none;border-radius:0}.xp-holo>i{position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%);background:url(/icons/xp-holo-sprite.png?v=h6) 0 0/3300% 100% no-repeat;image-rendering:pixelated;pointer-events:none}
header .logo .wm{height:28px;filter:drop-shadow(0 3px 0 #0b0f2a)}
header .hrider{width:auto;height:auto;margin:-12px 0 -14px 0;padding:6px 30px 8px 18px;box-sizing:content-box;position:relative}
header .hrider canvas{width:60px;height:75px}
header .hrider:focus-visible{outline-offset:-4px}
@media (max-width:440px){header .logo{gap:6px}header .logo .logo-icon{width:46px;height:46px;margin:-5px 0}header .logo .wm{height:20px}
  header .hrider{margin:-10px 0 -12px 0;padding:6px 24px 8px 12px}header .hrider canvas{width:50px;height:62px}}
@media (max-width:380px){header .logo .wm{height:19px}header .hrider{padding:6px 18px 8px 8px}}
.hint{display:block;font-size:13px;font-weight:400;margin:4px 0 12px}.pocketask{background:#fff7d6;color:#3a2a00;border:2px solid #e0b000;border-radius:8px;padding:8px 10px}
/* Card search + Filter/Sort sheets (cardfilter.js): chunky pixel borders, 44px targets */
.cfbar{position:sticky;top:0;z-index:30;background:inherit;padding:8px 0 4px;margin:0 0 6px}
.binder .cfbar,.hw-cols .cfbar{background:var(--vb-card,var(--surf,#fff))}
.cf-row{display:flex;gap:6px;align-items:stretch}
.cf-q{flex:1;min-width:0;display:flex;align-items:center;gap:4px;border:3px solid var(--ink);background:var(--vb-card,var(--surf,#fff));padding:0 4px 0 8px;min-height:44px;box-shadow:3px 3px 0 var(--ink)}
.cf-q input{flex:1;min-width:0;border:0;outline:0;font:600 16px/1 system-ui,sans-serif;background:transparent;color:var(--ink);padding:10px 0}
.cf-q input::-webkit-search-cancel-button{display:none}
html .cf-q input,html[data-theme] .cf-q input{margin:0;border:0!important;background:transparent!important;border-radius:0;box-shadow:none} /* colfix: theme input rules (dark pill + margin) made the box 76 px tall */
.cf-q:focus-within{border-color:var(--dark)}
.cf-mag{font:700 20px/1 var(--px);color:var(--dark)}
.cf-x{border:0;background:none;font:700 16px/1 system-ui;min-width:36px;min-height:40px;color:var(--ink);cursor:pointer}
.cf-btn{position:relative;min-height:44px;height:44px;align-self:center;min-width:60px;padding:0 10px;border:3px solid var(--ink);background:var(--fill,var(--dark));color:var(--on-fill,#fff);font:600 14px/1 var(--px);box-shadow:3px 3px 0 var(--ink);cursor:pointer}
.cf-btn:active,.cf-ok:active,.cf-clear:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.cf-badge{position:absolute;top:-9px;right:-9px;min-width:22px;height:22px;padding:0 5px;background:#ffd75e;color:#3a2a00;border:2px solid #fff;font:700 12px/18px var(--px);text-align:center}
.cfbar .cf-sum{margin:6px 0 0;font-size:14px}.cfbar .cf-sum:empty{display:none}
.cf-res{padding-top:8px}.cf-more{display:block;margin:6px auto 12px}.cf-none{padding:16px 4px}
body.cf-lock{overflow:hidden}
.cf-sheet{position:fixed;inset:0;z-index:1000;background:rgba(20,22,40,.55);display:flex;align-items:flex-end;justify-content:center}
.cf-panel{width:100%;max-width:520px;max-height:88vh;display:flex;flex-direction:column;background:var(--light);border:4px solid var(--ink);border-bottom:0;box-shadow:0 -4px 0 var(--dark)}
.cf-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--fill,var(--dark));color:var(--on-fill,#fff)}
.cf-head h2{margin:0;color:#fff;font-size:18px}
.cf-close{min-width:44px;min-height:44px;border:3px solid #fff;background:transparent;color:#fff;font:700 18px/1 system-ui;cursor:pointer}
.cf-body{overflow:auto;padding:4px 12px 12px;-webkit-overflow-scrolling:touch}
.cf-body h3{font:600 14px/1.2 var(--px);margin:14px 0 8px;color:var(--ink);text-transform:uppercase;letter-spacing:.5px}
.cf-chips{display:flex;flex-wrap:wrap;gap:6px}
.cf-chip{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:44px;min-width:52px;padding:4px 9px;border:3px solid #9aa6c8;background:var(--surf);color:var(--on-surf);font:600 14px/1.1 system-ui,sans-serif;cursor:pointer}
.cf-chip[aria-pressed=true]{border-color:var(--ink);background:var(--gold);color:#1b1f3b;box-shadow:inset 0 -3px 0 var(--gold-d)}html[data-vibe] .cf-chip[aria-pressed=true]{background:var(--fill);color:var(--on-fill)}
.cf-chip:disabled{opacity:.3;cursor:default}
.cf-types .cf-chip{min-width:calc(50% - 3px);justify-content:flex-start}
.cf-sets .cf-chip{flex-direction:column;align-items:flex-start;min-width:calc(50% - 3px);text-align:left}
.cf-sets .cf-chip b{font:600 13px/1 var(--px)}.cf-sets .cf-chip span{font-size:13px}
.cf-promo{font:700 12px/1 var(--px);letter-spacing:.5px;color:#fff;background:#d23c7a;padding:4px 5px}
.cf-radio{display:flex;flex-direction:column;gap:6px}.cf-two{flex-direction:row}.cf-two .cf-opt{flex:1}
.cf-opt{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border:3px solid #9aa6c8;background:var(--surf);font:600 15px/1.1 system-ui,sans-serif;color:var(--on-surf);text-align:left;cursor:pointer}
.cf-opt i{width:16px;height:16px;border:3px solid var(--on-surf);background:var(--surf);flex:none}
.cf-opt[aria-checked=true]{border-color:var(--ink)}.cf-opt[aria-checked=true] i{background:var(--dark);box-shadow:inset 0 0 0 2px #fff}
.cf-foot{display:flex;align-items:center;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:3px solid var(--ink);background:#fff}
.cf-cnt{flex:1;font-size:14px}
.cf-clear,.cf-ok{min-height:44px;min-width:92px;border:3px solid var(--ink);font:600 15px/1 var(--px);box-shadow:3px 3px 0 var(--ink);cursor:pointer}
.cf-clear{background:var(--surf);color:var(--on-surf)}.cf-ok{background:var(--teal);color:#fff}
.ti{display:block;flex:none}

/* Email privacy reassurance (Add email, Edit profile, Lost access): a gold pixel padlock + gold rule, never red (f297) */
.email-safe{position:relative;margin:8px 0 10px;padding:8px 10px 8px 38px;border:0;border-left:4px solid #f5d76e;border-radius:0 6px 6px 0;background:color-mix(in srgb,#f5d76e 14%,transparent);color:inherit;font:400 14px/1.4 var(--px);box-shadow:none}
.email-safe::before{content:'';position:absolute;left:10px;top:9px;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath fill='%231b1f3b' d='M3 0h6v1H3zM2 1h1v1H2zM9 1h1v1H9zM1 2h1v3H1zM10 2h1v3h-1zM0 5h12v1H0zM0 6h1v5H0zM11 6h1v5h-1zM0 11h12v1H0zM5 7h2v2H5zM6 9h1v1H6z'/%3E%3Cpath fill='%23c9a227' d='M3 1h6v1H3zM2 2h1v3H2zM9 2h1v3H9zM1 10h10v1H1z'/%3E%3Cpath fill='%23f5d76e' d='M1 6h10v4H1z'/%3E%3Cpath fill='%23fff6c8' d='M2 6h1v1H2z'/%3E%3Cpath fill='%231b1f3b' d='M5 7h2v2H5zM6 9h1v1H6z'/%3E%3C/svg%3E") center/contain no-repeat;image-rendering:pixelated}
.rec-acts{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}.rec-acts .btn{flex:1 1 140px;min-height:44px;margin:0}
.emailcard .emailalerts{margin-top:16px;padding-top:12px;border-top:3px dashed var(--ink)}.emailcard h3{margin:0 0 4px}.ealert{display:flex!important;flex-direction:row;gap:10px;align-items:flex-start;margin:10px 0}.ealert input{width:22px;height:22px;flex:none;margin:2px 0 0}
/* Protect your profile = Will's option 228 key card (recover.js protectGate, f297). Pixelify regular, gold, no red. The DONE state is the
   resting style; the click / sparkles / stamp / text swap are stepped animations with fill-mode both, so reduced motion just shows it finished. */
.pk{position:relative;text-align:center;padding:18px 16px 12px}
.pk,.pk button,.pk p,.pk h1,.pk-sheet,.pk-sheet h2,.pk-sheet p,.pk-row{font-family:var(--px);font-weight:400}
.pk svg,.pk-row svg,.pk-sheet svg{image-rendering:pixelated;shape-rendering:crispEdges;flex:none}
html[data-theme] .pk .pk-h{font:400 27px/1.2 var(--px);letter-spacing:0;margin:0 0 12px;white-space:nowrap;overflow:hidden;color:var(--ink)}
.pk-sw{display:grid}.pk-sw>*{grid-area:1/1}
.pk .pk-big{font:400 20px/1.3 var(--px);margin:10px 0 2px;color:var(--ink)}
.pk-hero{position:relative;display:inline-block;margin:2px auto 0;min-height:60px}
.pk-kc{display:block;height:290px;width:auto;image-rendering:pixelated;border-radius:4px;box-shadow:0 0 0 2px #1b1f3b,0 0 0 6px color-mix(in srgb,#f5d76e 35%,transparent),0 8px 0 rgba(0,0,0,.25)}
.pk-lock{position:absolute;right:-22px;top:-18px;z-index:3}
.pk-lk{position:relative;display:block;width:48px;height:60px;transform-origin:50% 100%}.pk-lk>span{position:absolute;inset:0}.pk-lk svg{display:block}
.pk .btn.pk-go{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px 0 10px;font-weight:400}
.pk .btn.pk-go:disabled{opacity:.45;box-shadow:none;filter:grayscale(.6);cursor:default}
.pk-alt{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:0 0 4px}
.pk-chip{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:6px 12px;font:400 15px/1 var(--px);color:var(--ink);background:transparent;border:2px solid #c9a227;border-radius:10px;cursor:pointer;text-decoration:none}
.pk-chip.on{background:#f5d76e;color:#1b1f3b;border-color:#1b1f3b;box-shadow:0 3px 0 #c9a227}
/* not available yet: flat, dashed, faded, a "Soon" tag, never looks tappable */
.pk-chip.off{border-style:dashed;border-color:color-mix(in srgb,var(--ink) 28%,transparent);color:var(--muted);opacity:.7;box-shadow:none;cursor:default}
.pk-chip i{font:400 12px/1 var(--px);font-style:normal;padding:3px 5px 2px;border-radius:4px;background:color-mix(in srgb,var(--ink) 14%,transparent)}
.pk-skip{display:block;margin:2px auto 0;min-height:44px;padding:8px 18px;background:none;border:0;font:400 15px/1 var(--px);color:var(--muted);text-decoration:underline;text-underline-offset:4px;opacity:.85;cursor:pointer}
.pk-why{margin:4px 0 0}.pk-why summary{list-style:none;cursor:pointer;padding:6px 2px;font:400 15px/1.5 var(--px);color:var(--ink);min-height:44px}
.pk-why summary::-webkit-details-marker{display:none}.pk-rule{display:inline-flex;align-items:center;gap:6px;vertical-align:middle}
.pk-wl{color:#f5d76e;text-decoration:underline;text-underline-offset:3px}.pk-wl::after{content:' \25BE'}.pk-why[open] .pk-wl::after{content:' \25B4'}
html[data-theme=pikachu] .pk-wl{color:#8a6a00}
.pk-how{margin:6px 0 4px;padding:10px 12px;text-align:left;background:color-mix(in srgb,#f5d76e 14%,var(--panel,#fff));border-left:4px solid #f5d76e;border-radius:0 6px 6px 0;font:400 15px/1.4 var(--px);color:var(--ink)}
.pk-how p{margin:0 0 6px}.pk-how p:last-child{margin:0}.pk-how b{font-weight:600}
.pk-err{margin:4px 0 0;font:400 14px/1.3 var(--px);color:#c9a227}.pk-err:empty{display:none}
.pk-stamp{position:absolute;left:50%;bottom:74px;z-index:4;display:inline-flex;align-items:center;gap:8px;padding:7px 12px 6px;white-space:nowrap;font:400 21px/1 var(--px);color:#1b1f3b;background:#f5d76e;border:3px solid #1b1f3b;box-shadow:inset 0 0 0 2px #fff6c8,3px 3px 0 #1b1f3b;transform:translateX(-50%)}
.pk-spk{position:absolute;left:50%;top:60%;width:0;height:0;z-index:5;pointer-events:none}
.pk-spk i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;background:#f5d76e;box-shadow:0 0 0 2px #1b1f3b;opacity:0}
.pk-spk i:nth-child(even){width:6px;height:6px;left:-3px;top:-3px;background:#fff6c8}
.pk-done .pk-a,.pk-done .pk-o{visibility:hidden;opacity:0}
.pk-end{margin-top:2px}
/* the "protected" moment (ms): card pops 0-300, lock clicks shut at 650, sparkles 650-1100, stamp lands 900-1160, words swap at 1150, buttons at 1300 */
@keyframes pkShow{from{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}@keyframes pkHide{from{opacity:1;visibility:visible}to{opacity:0;visibility:hidden}}
@keyframes pkPop{from{transform:translateY(46px) scale(.82)}to{transform:none}}
@keyframes pkSquash{0%{transform:scale(1.3,.72)}50%{transform:scale(.9,1.12)}100%{transform:scale(1)}}
@keyframes pkStamp{0%{opacity:0;transform:translateX(-50%) scale(2.3)}1%{opacity:1}70%{opacity:1;transform:translateX(-50%) scale(.9)}100%{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes pkSpk{0%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
.pk-done .pk-hero{animation:pkPop 300ms steps(4,jump-none) both}
.pk-done .pk-o{animation:pkHide 1ms steps(1,start) 650ms both}.pk-done .pk-c{animation:pkShow 1ms steps(1,start) 650ms both}
.pk-done .pk-lk{animation:pkSquash 240ms steps(4,jump-none) 650ms both}
.pk-done .pk-spk i{animation:pkSpk 450ms steps(5,jump-none) 650ms both}
.pk-spk i:nth-child(1){--dx:0px;--dy:-46px}.pk-spk i:nth-child(2){--dx:33px;--dy:-33px}.pk-spk i:nth-child(3){--dx:46px;--dy:0px}.pk-spk i:nth-child(4){--dx:33px;--dy:33px}
.pk-spk i:nth-child(5){--dx:0px;--dy:46px}.pk-spk i:nth-child(6){--dx:-33px;--dy:33px}.pk-spk i:nth-child(7){--dx:-46px;--dy:0px}.pk-spk i:nth-child(8){--dx:-33px;--dy:-33px}
.pk-done .pk-stamp{animation:pkStamp 260ms steps(5,jump-none) 900ms both}
.pk-done .pk-a{animation:pkHide 1ms steps(1,start) 1150ms both}.pk-done .pk-b{animation:pkShow 1ms steps(1,start) 1150ms both}
.pk-done .pk-end{animation:pkShow 1ms steps(1,start) 1300ms both}
@media (prefers-reduced-motion:reduce){.pk-done *,.pk-done .pk-hero{animation:none!important}.pk-done .pk-spk{display:none}}
/* gentle skip check: a bottom sheet, gold top edge, no warning signs */
.pk-scrim{position:fixed;inset:0;z-index:9999;background:rgba(5,5,15,.55);display:flex;align-items:flex-end;justify-content:center}
.pk-sheet{width:100%;max-width:520px;background:var(--panel,#fff);color:var(--ink);border-radius:18px 18px 0 0;padding:20px 20px calc(22px + env(safe-area-inset-bottom));text-align:center;border-top:3px solid #f5d76e}
html[data-theme] .pk-sheet h2{font:400 25px/1.2 var(--px);letter-spacing:0;margin:8px 0 6px;color:var(--ink)}
.pk-sheet p{font:400 16px/1.4 var(--px);margin:0 0 4px}.pk-sheet .btn{margin:14px 0 4px;font-weight:400}.pk-fine{font-size:13px!important;color:var(--muted)}
/* Edit profile: the Key card row */
.pk-row{padding:12px 14px}.pk-rowm{display:flex;align-items:center;gap:10px;font:400 17px/1.2 var(--px)}.pk-rown{flex:1;text-align:left}
.pk-ok{font-size:14px;color:var(--teal)}
.pk-more{margin:4px 0 0}.pk-more summary{cursor:pointer;font:400 14px/1.5 var(--px);color:var(--muted);min-height:36px;display:flex;align-items:center}.pk-more .pk-alt{justify-content:flex-start;margin:4px 0}
.pk-more .link{font:400 13px/1.3 var(--px);color:var(--muted);text-align:left;min-height:36px}
label.btn{cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
/* Friend QR (invite.js / qrstyle.js) */
.qrholo{display:inline-block;padding:6px;border-radius:14px;background:conic-gradient(from var(--qa,0deg),#ff5fa2,#ffb347,#f5d76e,#7ee081,#5fd3ff,#9b7fe0,#ff5fa2);animation:qrholo 4s linear infinite;max-width:100%}
.qrholo img{display:block;max-width:100%;height:auto;border-radius:10px;image-rendering:pixelated}
@property --qa{syntax:'<angle>';inherits:false;initial-value:0deg}@keyframes qrholo{to{--qa:360deg}}
@media (prefers-reduced-motion:reduce){.qrholo{animation:none}}
.fqr-acts{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.fqr-video{width:100%;max-width:360px;border-radius:12px;border:3px solid #f5d76e}
.inv-joined{background:#fff4c2;border:3px solid #f5d76e;border-radius:10px;padding:8px 10px;margin:8px 0}
/* 8-bit trainer avatars (builder, no uploads) */
:is(img,canvas).av{width:30px;height:30px;image-rendering:pixelated;border-radius:7px;vertical-align:middle;margin-right:6px;background:#e9f3ff;box-shadow:0 0 0 2px rgba(0,0,0,.55);flex:none}
:is(img,canvas).av.av-sm{width:22px;height:22px;border-radius:5px;margin-right:4px}
:is(img,canvas).av.av-lg{width:52px;height:52px;border-radius:10px;margin-right:10px}
:is(img,canvas).av.av-full{width:112px;height:144px;border-radius:12px;background:#aed0ba;box-shadow:0 0 0 3px #1b1a2e}
.avfull{float:right;margin:0 0 6px 10px}
h1.avh{display:flex;align-items:center}
.frow{align-items:center}.frow :is(img,canvas).av{margin-right:10px}.frow-main{flex:1}
header .acct summary :is(img,canvas).av{margin-right:5px}
.avfield{margin:12px 0}
/* Customize avatar picker (avatar-editor.js): sticky preview (figure zoomed to fill the stage, crossfade/pop) + 5 tabs
   Character / Skin & Hair / Outfit / Eyes / Background; one panel at a time, uniform swatches, pixel-styled */
.avp{display:flex;flex-direction:column;gap:12px;margin-top:8px;-webkit-tap-highlight-color:transparent}
.avp button,.avp input{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.avp-top{position:sticky;top:var(--avp-top,0px);z-index:6;display:flex;flex-direction:column;gap:8px;padding:6px;margin:-6px -6px 0;border-radius:10px;background:var(--card,#fff);box-shadow:0 6px 10px -6px #0004}
.avp-stage{position:relative;height:calc(var(--h,296px) + 12px);border:4px solid #1b1a2e;border-radius:6px;box-shadow:4px 4px 0 #1b1a2e;overflow:hidden;
  background:radial-gradient(ellipse 30% 4% at 50% calc(100% - 8px),rgba(27,26,46,.18) 0 98%,transparent),#ffffff}
.avp-img{position:absolute;left:50%;bottom:6px;width:var(--w,152px);height:var(--h,296px);margin-left:calc(var(--w,152px) / -2);image-rendering:pixelated;opacity:0;transition:opacity .14s linear;pointer-events:none;-webkit-user-drag:none}
.avp-img.on{opacity:1}
.avp-img:not([src]){visibility:hidden}
.avp-stage.pop .avp-img.on{animation:avppop .18s steps(3,end)}
@keyframes avppop{0%{transform:translateY(6px)}60%{transform:translateY(-4px)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.avp-img{transition:none}.avp-stage.pop .avp-img.on{animation:none}}
.avp-bg{position:absolute;inset:0;pointer-events:none}
.avp-bg:not([data-bgk=""])[data-bgk]::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 30% 4% at 50% calc(100% - 8px),rgba(15,30,15,.28) 0 98%,transparent)}
.avp-tabs4{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:3px;border:3px solid #1b1a2e;border-radius:6px;background:#1b1a2e}
.avp-tabs4 button{min-height:40px;padding:2px;border:0;border-radius:3px;background:#e6f1ea;color:#1b1a2e;font:600 10px/1.2 var(--px);cursor:pointer}
.avp-tabs4 button.on{background:#ffd23c}
.avp-tabs4 button:active{transform:translateY(1px)}
.avp-p{display:flex;flex-direction:column;gap:8px;min-height:250px}
.avp-p[hidden]{display:none}
.avp-h{margin:4px 0 0;font:600 12px/1 var(--px);letter-spacing:.02em;opacity:.85}
.avp-hint{margin:-2px 0 0;font-size:12px;opacity:.7}
.avp-hrow{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.avp-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.avp-seg button{min-height:40px;border:3px solid #1b1a2e;border-radius:6px;background:#e6f1ea;color:#1b1a2e;font:600 13px/1 var(--px);cursor:pointer;box-shadow:0 3px 0 #1b1a2e;transition:transform .06s,box-shadow .06s}
.avp-seg button.on,.avp-seg button:active{background:#ffd23c;transform:translateY(2px);box-shadow:0 1px 0 #1b1a2e}
.avp-chars{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.avp-ch{aspect-ratio:1;padding:0;border:3px solid #1b1a2e;border-radius:6px;background:#f2f4f0;cursor:pointer;overflow:hidden;display:grid;place-items:center;box-shadow:0 3px 0 #1b1a2e;transition:transform .06s,box-shadow .06s}
.avp-ch[hidden]{display:none}
.avp-ch img{width:100%;height:100%;image-rendering:pixelated;display:block;pointer-events:none}
.avp-ch:active{transform:translateY(2px) scale(.96);box-shadow:0 1px 0 #1b1a2e}
.avp-ch.on{background:#ffd23c;box-shadow:0 0 0 3px #ffd23c,0 0 0 6px #1b1a2e}
.avp-soon{grid-column:1/-1;margin:0;text-align:center;font:600 14px/1 var(--px);opacity:.75}
.avp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;max-width:340px}
.avp-c{position:relative;width:100%;aspect-ratio:1;border-radius:6px;border:3px solid #1b1a2e;background:var(--c);cursor:pointer;box-shadow:0 3px 0 #1b1a2e;padding:0;transition:transform .06s,box-shadow .06s}
.avp-c:active{transform:translateY(2px) scale(.94);box-shadow:0 1px 0 #1b1a2e}
.avp-c.on{transform:translateY(2px);box-shadow:0 0 0 3px #ffd23c,0 0 0 6px #1b1a2e}
.avp-c.locked{cursor:not-allowed;box-shadow:none;border-style:dashed;opacity:.45}
.avp-c.locked:active{transform:none}
.avp-c.nope{animation:avpnope .24s steps(4)}
@keyframes avpnope{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.avp-o::before{content:"";position:absolute;inset:0;margin:auto;width:20px;height:16px;image-rendering:pixelated;opacity:.85;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' shape-rendering='crispEdges'%3E%3Cpath fill='%231b1a2e' d='M2 0h2v1h2V0h2v1h1v1h1v2H8v4H2V4H0V2h1V1h1z'/%3E%3C/svg%3E") center/contain no-repeat}
.avp-o[data-o="-2"]::before,.avp-o[data-o="-1"]::before{filter:invert(1)}
.avp input.avp-range{-webkit-appearance:none;appearance:none;display:block;width:100%;max-width:340px;height:36px;min-height:0;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;outline-offset:4px;background:transparent;cursor:pointer;touch-action:pan-y}
.avp-range::-webkit-slider-runnable-track{height:16px;border:3px solid #1b1a2e;border-radius:4px;background:var(--track,linear-gradient(90deg,#3a2a1a,#e8d8a8))}
.avp-range::-moz-range-track{height:10px;border:3px solid #1b1a2e;border-radius:4px;background:var(--track,linear-gradient(90deg,#3a2a1a,#e8d8a8))}
.avp-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:30px;margin-top:-10px;border:3px solid #1b1a2e;border-radius:3px;background:#ffd23c;box-shadow:0 3px 0 #1b1a2e}
.avp-range::-moz-range-thumb{width:16px;height:24px;border:3px solid #1b1a2e;border-radius:3px;background:#ffd23c}
.avp-range:disabled{opacity:.4;cursor:not-allowed}
.avp-hb{--track:linear-gradient(90deg,#1b1a2e,#8a8a96 50%,#f4f0e0)}
.avp-custom{display:block;overflow:hidden;background:conic-gradient(#d8343c 0 25%,#ffd84a 0 50%,#3a5fcd 0 75%,#9bbc0f 0)}
.avp-custom.on{background:var(--c)}
.avp-custom::after{content:"+";position:absolute;inset:0;display:grid;place-items:center;font:700 15px/1 var(--px);color:#fff;text-shadow:1px 0 #1b1a2e,-1px 0 #1b1a2e,0 1px #1b1a2e,0 -1px #1b1a2e;pointer-events:none}
.avp-custom input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.avp-plain{display:grid;place-items:center}.avp-px{font:600 8px/1 var(--px);color:#1b1a2e;background:#fff;padding:2px;border-radius:2px;pointer-events:none}
.avp-toggle{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 10px 0 4px;border:3px solid #1b1a2e;border-radius:6px;background:#e6f1ea;color:#1b1a2e;font:600 12px/1 var(--px);cursor:pointer;box-shadow:0 3px 0 #1b1a2e}
.avp-knob{width:34px;height:20px;border:3px solid #1b1a2e;border-radius:3px;background:#8a8a96;position:relative}
.avp-knob::after{content:"";position:absolute;top:1px;left:1px;width:12px;height:12px;background:#fff;transition:left .1s steps(2)}
.avp-toggle.on .avp-knob{background:linear-gradient(90deg,#ff8fd8,#8ec5ff)}.avp-toggle.on .avp-knob::after{left:17px}
.avp-holo{display:flex;flex-direction:column;gap:10px}.avp-holo.off{opacity:.5}
.avp-hi button{font-size:11px}
.avp-save-row{display:flex;align-items:center;gap:10px}.avp-save{min-height:44px;flex:1;margin:0;touch-action:manipulation}.avp-msg{font-weight:700;min-width:70px}
:is(img,canvas).av.av-img{image-rendering:auto;object-fit:cover;object-position:50% 0;background:#ffffff}
:is(img,canvas).av.av-full.av-img{object-fit:contain;object-position:50% 100%;background:#ffffff}
/* Avatar backgrounds (code.bg, public/avatar-bg.js): crisp pixel tiles inline; the holo sheen layer drifts slowly (static for reduced motion) */
.av-holo{animation:avholo 8s linear infinite alternate}
@keyframes avholo{from{background-position:0% 50%,0 0,0 0,0 0}to{background-position:100% 50%,0 0,0 0,0 0}} /* f864b: sheen is the top layer (no glint stars); pattern/frame stay put */
@media (prefers-reduced-motion:reduce){.av-holo{animation:none}}

/* XPshare Rider thumb pad (portrait phones): the whole screen is the jump/trick zone; this pad below the canvas shows where to rest your thumb so it never covers the road */
.gfs .gpad{display:none;position:absolute;left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));top:calc(50% + var(--cvh, 56vw) / 2 + 12px);bottom:max(14px,env(safe-area-inset-bottom));max-height:150px;margin:0 auto;max-width:420px;border:2px dashed #ffffff40;border-radius:18px;background:#ffffff0d;pointer-events:none;align-items:center;justify-content:center;transition:background .08s,border-color .08s}
.gfs .gpad span{color:#ffffffa8;font:600 13px/1 var(--px, system-ui);letter-spacing:.08em;text-shadow:0 2px 0 #000}.gfs .gpad i{font-style:normal;opacity:.6}
.gfs.portrait.touch.playing .gpad{display:flex}.gfs .gpad.on{background:#ffe68026;border-color:#ffe680a0}

/* Home header: much bigger logo (pixel art at integer scales), bigger rider pushed right with clear space. */
.logo .wm-2l{display:none}
body:has(.home) header{padding-top:10px;padding-bottom:10px}
body:has(.home) header .logo-icon{width:64px;height:64px;border-radius:12px}
body:has(.home) header .logo .wm{height:33px}
/* rider 4/3 of the old size (50x62 -> 66.67x83.33 = exactly 5 device px per art px on 3x phones), hit-zone padding mostly on the left so he sits further right */
body:has(.home) header .hrider{margin:-12px 0 -14px auto;padding:6px 6px 8px 24px}
body:has(.home) header .hrider canvas{width:66.667px;height:83.333px}
@media (min-width:600px){body:has(.home) header .hrider{padding:6px 18px 8px 30px}body:has(.home) header .hrider canvas{width:80px;height:100px}}
body:has(.home) header .navmenu{margin-left:0}
@media (max-width:599px){
  body:has(.home) header .logo{gap:8px}
  body:has(.home) header .logo .wm-1l{display:none!important}
  body:has(.home) header .logo .wm-2l{display:flex;flex-direction:column;align-items:flex-start;gap:0}
  body:has(.home) header .logo .wm-2l img{height:33px;width:auto;image-rendering:pixelated;display:block;filter:drop-shadow(0 3px 0 #0b0f2a)}
  body:has(.home) header .logo .wm-2l .wm-light{display:none}
  html[data-theme=pikachu] body:has(.home) header .logo .wm-2l .wm-dark{display:none}html[data-theme=pikachu] body:has(.home) header .logo .wm-2l .wm-light{display:block}
}
@media (max-width:359px){body:has(.home) header .logo-icon{width:48px;height:48px}body:has(.home) header .logo .wm-2l img{height:22px}body:has(.home) header .hrider{padding-left:10px;padding-right:2px}body:has(.home) header .hrider canvas{width:53.333px;height:66.667px}}
@media (min-width:600px){body:has(.home) header .logo-icon{width:96px;height:96px;border-radius:16px}body:has(.home) header .logo .wm-1l{height:44px}}
/* Privacy note under 'Add your email': always readable (dark ink on cream; dark panel on the dark theme) */
@media (max-width:440px){body:has(.home) header:has(.acct) .logo .wm-2l{display:none!important}body:has(.home) header:has(.acct) .hrider{margin-right:4px}}
/* Trade alerts (#/alerts) + header bell */
.ta-list{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.ta-item{display:flex;gap:12px;padding:12px;border-radius:12px;background:var(--card2,#fff);border:2px solid rgba(0,0,0,.08);color:inherit;text-decoration:none}
.ta-item.unread{border-color:#e8833a;box-shadow:0 0 0 2px rgba(232,131,58,.2)}
.ta-av{width:48px;height:48px;border-radius:50%;background:#e8f6ef;image-rendering:pixelated;flex:none;object-fit:cover}
.ta-main{flex:1;min-width:0}.ta-top{display:flex;justify-content:space-between;gap:8px}.ta-title{margin:2px 0 6px;font-weight:600}
.ta-trade{display:flex;flex-wrap:wrap;gap:12px;margin:6px 0}.ta-lbl{display:block;font-size:12px;opacity:.7;margin-bottom:2px}
.ta-cards{display:flex;gap:6px;flex-wrap:wrap}.ta-card{margin:0;width:64px;text-align:center}.ta-card img{width:60px;height:84px;border-radius:4px;background:#ddd;object-fit:cover}
.ta-card figcaption{font-size:11px;line-height:1.2;overflow-wrap:anywhere}.ta-go{display:inline-block;margin-top:4px}
.navbell{position:relative;display:grid;place-items:center;flex:none;text-decoration:none;padding:6px 0;margin-left:auto;line-height:0;-webkit-tap-highlight-color:transparent}.navbell .nbadge{position:absolute;top:-2px;right:-8px;line-height:1;box-shadow:0 0 0 2px #000}
.pxbell{image-rendering:crisp-edges;image-rendering:pixelated;display:block;flex:none;-webkit-user-select:none;user-select:none}
.navbell{width:40px;box-sizing:content-box}.navbell .b-ring{width:40px;height:32px}.navbell .b-idle{width:32px;height:32px}.navbell:active .pxbell{transform:translateY(1px)}
.navbell.ringing .b-ring{animation:bellshake 3s steps(1,end) infinite}
@keyframes bellshake{0%,24%,100%{transform:translateX(0)}3%,9%,15%{transform:translateX(-2px)}6%,12%,18%{transform:translateX(2px)}21%{transform:translateX(-2px)}}
@media (prefers-reduced-motion:reduce){.navbell.ringing .b-ring{animation:none}}
header .navlist .ni .b-idle{width:16px;height:16px}
header .navlist .ni .pxbell{width:20px;height:16px;margin:0 auto}
.ta-h{display:flex;align-items:center;gap:10px}.ta-h .pxbell{width:40px;height:32px}
/* Add cards page tidy: 'How to record' steps as separated numbered blocks (never the home-page row layout), nothing wider than the screen */
.cardsetup{min-width:0;overflow-wrap:anywhere}.cardsetup .card{min-width:0;max-width:100%;box-sizing:border-box}.cardsetup .card h2{line-height:1.35}
.vscan .vhow summary{font-weight:700;cursor:pointer;padding:4px 0}
.vscan .vhow ol.steps{display:flex;flex-direction:column;gap:10px;list-style:none;counter-reset:vs;padding:0;margin:10px 0 14px}
.vscan .vhow ol.steps li{counter-increment:vs;position:relative;flex:none;margin:0;padding:10px 12px 10px 50px;min-height:34px;border:2px solid rgba(127,127,127,.35);border-radius:10px;background:rgba(127,127,127,.08);text-align:left;line-height:1.45}
.vscan .vhow ol.steps li::before{content:counter(vs);position:absolute;left:10px;top:9px;width:28px;height:28px;display:grid;place-items:center;box-sizing:border-box;border:2px solid #1b1f3b;border-radius:7px;background:var(--gold,#f5d76e);color:#1b1f3b;font:700 16px/1 var(--px)}
.vscan .vhow ol.steps .pk-ui{display:flex;width:max-content;max-width:100%;margin:6px 0 2px}
.vscan .vhow ol.steps .muted{display:block;margin-top:4px}.vscan .vhow ol.steps br{display:none}
.vscan .ps-link{display:inline-block;margin:0 0 10px}.vscan .vtips{margin:4px 0 12px}.vscan .vtips li{margin:4px 0}
.cardsetup .scan .howto{display:block;margin:8px 0 2px;text-align:left}

/* Avatar profile icons v4: zoomed head-and-shoulders crop (avatar.js crop 'face'), bigger, nearest-neighbour. The picker keeps the full figure. */
:is(img,canvas).av{width:44px;height:44px;border-radius:8px}
:is(img,canvas).av.av-sm{width:32px;height:32px;border-radius:6px;margin-right:5px}
:is(img,canvas).av.av-lg{width:76px;height:76px;border-radius:12px;margin-right:12px;box-shadow:0 0 0 3px #1b1a2e}
:is(img,canvas).av.av-xl{width:132px;height:132px;border-radius:14px;margin:0;box-shadow:0 0 0 3px #1b1a2e,4px 4px 0 3px #1b1a2e55}
:is(img,canvas).av.av-img{image-rendering:pixelated;object-fit:cover;object-position:50% 50%}
html header .acct summary :is(img,canvas).av{width:32px;height:32px;margin:0 4px 0 -6px;border-radius:4px;box-shadow:0 0 0 2px #fff}
.avfull{float:right;margin:0 0 8px 12px}
.inv-av :is(img,canvas).av.av-xl{display:block;margin:0 auto 10px}
.frow :is(img,canvas).av,.sfriend h2 :is(img,canvas).av,.gph :is(img,canvas).av{width:48px;height:48px}
.avp-rand{position:absolute;left:6px;bottom:6px;z-index:3;border:3px solid #1b1a2e;border-radius:4px;background:#ffd84a;box-shadow:2px 2px 0 #1b1a2e;padding:7px 10px;min-height:36px;cursor:pointer;touch-action:manipulation}
.avp-rand .avp-px{background:none;font-size:12px;line-height:1.2;padding:0}
.avp-rand:active{transform:translate(2px,2px);box-shadow:none}
.avp-rand.roll{animation:avproll .3s steps(4,end)}
@keyframes avproll{0%{transform:rotate(0)}50%{transform:rotate(-8deg) scale(1.08)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.avp-rand.roll{animation:none}}

/* === Legibility pass (numbers + contrast) ===
   Pixelify Sans' own numerals are stylised (2 reads as S/e, 5 as S, 7 as a hook). This extra face for the same
   family covers ONLY 0-9 (unicode-range), so every pixel-font number site-wide (step badges, counts, "2 spare",
   SVG/canvas text) uses clean chunky 6x7 arcade digits (fonts/XPDigits.ttf, scripts/build-xpdigits.py); letters stay Pixelify. */
@font-face{font-family:"Pixelify Sans";src:url(/fonts/XPDigits.ttf?v=2) format("truetype");font-weight:400 700;unicode-range:U+0030-0039;font-display:swap}
/* step-number squares: bold, centred, never faint */
.qa-steps li::before,.vscan .vhow ol.steps li::before{font-weight:700;font-size:17px;line-height:1;padding-top:1px;text-shadow:none}
html[data-theme=team-rocket] .qa-steps li::before{background:#dc2626;color:#fff;border-color:#fff;box-shadow:2px 2px 0 #7f1d1d}
html[data-theme=team-rocket] .qa-steps li{border-color:#3a3a3e}
html[data-theme=team-rocket] .vscan .vhow ol.steps li::before{background:#fff;color:#111;border-color:#fff}
/* small captions: less fade */
.binder .bt small{opacity:1;font-size:12px;color:var(--muted,#4a5070)}.binder .bn i{opacity:.75}
html[data-theme=team-rocket] .binder .bpk{background:#1c1c1e;border-color:#3a3a3e}
html[data-theme=team-rocket] .binder .bpk.on{border-color:#ffd75e}
html[data-theme=team-rocket] .binder .bbar{background:#ffffff22}
/* white-on-pink pills were 2.8:1 */
/* f373: 'Active today' is gold with ink text (no red UI); was #d02670. Theme overrides below/in themes.css stay. */
.tag.live,.ev-tile .tag.live{background:var(--gold);color:var(--ink)} /* f371: 'Now' is gold (no red UI); ink on gold is 10:1 */
html[data-theme=pikachu] body .act.now{color:#0f5f46;border-color:#0f5f46}
html[data-theme=team-rocket] body .act.now{background:#3b0a0a}
/* Team Rocket: red buttons start a shade darker so white text clears 4.5:1; warnings readable on black; acct menu links dark on its white sheet */
html[data-theme=team-rocket] .btn{--btn-hi:#dc2626}
html[data-theme=team-rocket] header .acct-menu>a{color:#1b1f3b}
html[data-theme=team-rocket] header .acct-menu .acct-rm{color:#b3261e}

/* === Legibility pass 2: avatar builder ===
   Pixelify Sans has fi/fl ligature glyphs that read as "A" ("Outfit" -> "OutAt"): common ligatures off everywhere. */
html{font-variant-ligatures:no-common-ligatures}
.avp-tabs4 button{font-size:12px;font-weight:700;line-height:1.15;letter-spacing:.01em;font-variant-ligatures:none;padding:3px 2px;color:#1b1a2e;background:#e6f1ea}
.avp-tabs4 button.on{background:#ffd23c;color:#1b1a2e;box-shadow:inset 0 0 0 2px #1b1a2e,inset 0 -4px 0 #c99a00}
.avp-tabs4 button:not(.on){opacity:1}
/* 5 tabs: one row when there's room, otherwise 3 + 2 (two even rows, every label whole at 12px) */
@media (max-width:560px){.avp-tabs4{grid-template-columns:repeat(6,1fr)}.avp-tabs4 button{grid-column:span 2;min-height:38px}.avp-tabs4 button:nth-child(n+4){grid-column:span 3}}
.avp-h{opacity:1;font-size:13px}
/* any-colour eye swatch (same look as the background + swatch) */
.avp-ecust{display:block;overflow:hidden;background:conic-gradient(#ec1313 0 17%,#ecec13 0 33%,#13ec13 0 50%,#13ecec 0 67%,#1313ec 0 83%,#ec13ec 0)}
.avp-ecust.on{background:var(--c)}
.avp-ecust::after{content:"+";position:absolute;inset:0;display:grid;place-items:center;font:700 15px/1 var(--px);color:#fff;text-shadow:1px 0 #1b1a2e,-1px 0 #1b1a2e,0 1px #1b1a2e,0 -1px #1b1a2e;pointer-events:none}
.avp-ecust input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
/* Team Rocket: dark swatches (as-drawn eyes, dark shirt) vanished into the black panel; give every swatch a light rim */
html[data-theme=team-rocket] .avp-c{border-color:#d8d8d8;box-shadow:0 3px 0 #000}
html[data-theme=team-rocket] .avp-c.on{box-shadow:0 0 0 3px #ffd23c,0 0 0 6px #000}
/* Report a bug dialog (bug.js) + secret Bug Hunter avatar base (avatar-editor.js .avp-sec) */
#bugdlg{position:fixed;inset:0;background:rgba(10,12,30,.66);display:flex;align-items:center;justify-content:center;z-index:10030;padding:12px} /* f334: above the top bar (80), the Hall (950) and the Arcade (10000); Glitch Quest (10040) stays on top */
#bugdlg .bugf{max-width:440px;width:100%;margin:0;max-height:calc(100dvh - 24px);overflow:auto;color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:12px;box-shadow:0 6px 0 var(--ink)}
#bugdlg h2{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-family:var(--px);color:var(--ink)}
#bugdlg .bug-sub{color:#3a4060;font-size:15px;margin:0 0 10px}
#bugdlg .bug-l{display:block;font:700 15px/1.3 var(--px);color:var(--ink);margin-top:8px}
#bugdlg .bug-req{color:#9b1c1c;font-weight:700;font-size:13px}#bugdlg .bug-opt{color:#4a5070;font-weight:600;font-size:13px}
#bugdlg textarea{box-sizing:border-box;font-size:16px;background:#fff;color:var(--ink)}
#bugdlg .bug-ctx{margin:8px 0;font-size:14px;color:#3a4060}#bugdlg .bug-ctx summary{cursor:pointer;font-weight:700;color:var(--dark);padding:6px 0}
#bugdlg .bug-ctx ul{margin:4px 0;padding-left:18px;word-break:break-word}
#bugdlg .bug-hp{position:absolute;left:-9999px;width:1px;height:1px}
#bugdlg .btn{margin:10px 0 0}
.bug-ico{width:24px;height:24px;flex:none;image-rendering:pixelated;background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath fill='%230b2a10' d='M3 0h1v1H3zM8 0h1v1H8zM4 1h1v1H4zM7 1h1v1H7zM4 2h4v1H4zM3 3h1v1H3zM8 3h1v1H8zM2 4h1v5H2zM9 4h1v5H9zM0 5h2v1H0zM10 5h2v1h-2zM0 7h2v1H0zM10 7h2v1h-2zM3 9h1v1H3zM8 9h1v1H8zM4 10h4v1H4z'/%3E%3Cpath fill='%238cff3c' d='M4 3h4v1H4zM3 4h6v5H3zM4 9h4v1H4z'/%3E%3Cpath fill='%233fae1c' d='M6 4h1v6H6z'/%3E%3Cpath fill='%23fff' d='M4 4h1v1H4z'/%3E%3C/svg%3E") center/24px 24px no-repeat}
.bug-prize{text-align:center}.bug-prize h2{justify-content:center;text-align:center}
.bug-tile{display:block;width:96px;height:96px;margin:4px auto 10px;border-radius:14px;background:#1a1726;box-shadow:0 0 0 3px #ffcc38;padding:12px;box-sizing:border-box;image-rendering:pixelated;object-fit:contain;animation:bugpop .5s steps(4) both}
@keyframes bugpop{0%{transform:scale(.4) rotate(-8deg)}60%{transform:scale(1.12) rotate(3deg)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.bug-tile{animation:none}}
html[data-theme=team-rocket] #bugdlg .bugf{background:#15121f;color:#f4f1ff;border-color:#e8384f;box-shadow:0 6px 0 #e8384f}
html[data-theme=team-rocket] #bugdlg h2,html[data-theme=team-rocket] #bugdlg .bug-l{color:#fff}
html[data-theme=team-rocket] #bugdlg .bug-sub,html[data-theme=team-rocket] #bugdlg .bug-ctx,html[data-theme=team-rocket] #bugdlg .bug-opt{color:#d8d2ea}
html[data-theme=team-rocket] #bugdlg .bug-ctx summary{color:#ffd84a}html[data-theme=team-rocket] #bugdlg .bug-req{color:#ff8a9a}
html[data-theme=team-rocket] #bugdlg textarea{background:#fff;color:#15121f}
.avp-sec{position:relative}.avp-sec .avp-lock{display:none}
.avp-sec.locked{filter:grayscale(.85) brightness(.75)}.avp-sec.locked .avp-lock{display:flex;position:absolute;inset:0;align-items:center;justify-content:center;font-size:18px;filter:none;text-shadow:0 1px 0 #000}
.avp-sechint{opacity:1!important;font-weight:600;margin-top:6px}.avp-sechint .avp-bugrep{padding:2px 0;margin:0 0 0 4px;font-weight:700}
/* secret characters (Bug Catchers b07/b08/g11/g12): locked head tile + hint under the Boys/Girls grid */
.avp-chhint{opacity:1!important;font-weight:600;margin-top:8px}.avp-chhint[hidden]{display:none}.avp-chhint .avp-bugrep{padding:2px 0;margin:0 0 0 4px;font-weight:700}
.avp-ch.avp-sec.locked .avp-lock{font-size:22px}
/* Report a bug: screenshot attachment + shake to report (bug.js, shake.js) */
#bugdlg .bug-shook{background:#fff4c2;color:#3a2a00;border:2px solid #c9a227;border-radius:8px;padding:8px 10px;margin:0 0 10px;font-size:15px;font-weight:600}
#bugdlg .bug-att{margin:6px 0 4px}
#bugdlg .bug-pick{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:8px 12px;border:3px dashed var(--ink);border-radius:8px;background:#eef3fb;color:var(--ink);font:700 16px/1.2 var(--px);cursor:pointer}
#bugdlg .bug-pick input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
#bugdlg .bug-pick:focus-within{outline:3px solid var(--mid);outline-offset:3px}
#bugdlg .bug-pick.busy{opacity:.6;pointer-events:none}#bugdlg .bug-pick.busy::after{content:'…'}
#bugdlg .bug-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 8px;padding:0;list-style:none}#bugdlg .bug-thumbs:empty,#bugdlg .bug-pick[hidden]{display:none}
#bugdlg .bug-thumb{position:relative;width:52px;height:52px;flex:none;border:3px solid var(--ink);border-radius:6px;background:#fff}
#bugdlg .bug-thumb img{display:block;width:100%;height:100%;object-fit:cover;border-radius:3px}
#bugdlg .bug-thumb .bug-n{position:absolute;left:-3px;bottom:-3px;min-width:20px;padding:2px 4px;border-radius:0 6px 0 6px;background:var(--ink);color:#fff;font:700 12px/1 var(--px);text-align:center}
#bugdlg .bug-rm{position:absolute;top:-12px;right:-12px;width:32px;height:32px;padding:0;border:3px solid var(--ink);border-radius:50%;background:#d8343c;color:#fff;font:700 15px/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 2px 0 var(--ink)}
#bugdlg .bug-rm:active{transform:translateY(2px);box-shadow:none}
#bugdlg .bug-cnt{display:block;margin:4px 0 0;font-size:14px;font-weight:600;color:#3a4060}#bugdlg .bug-cnt:empty{display:none}
#bugdlg .bug-shake{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0;padding:8px 10px;border:2px solid #c9d1ef;border-radius:8px;font-size:15px;color:var(--ink)}
#bugdlg .bug-shake[hidden]{display:none}
html[data-theme=team-rocket] #bugdlg .bug-pick{background:#241e33;color:#fff;border-color:#e8384f}
html[data-theme=team-rocket] #bugdlg .bug-thumb{background:#241e33;border-color:#e8384f}html[data-theme=team-rocket] #bugdlg .bug-cnt{color:#d8d2ea}
html[data-theme=team-rocket] #bugdlg .bug-thumb .bug-n{background:#e8384f}html[data-theme=team-rocket] #bugdlg .bug-rm{border-color:#fff;box-shadow:none}
html[data-theme=team-rocket] #bugdlg .bug-shake{border-color:#4a3f66;color:#fff}
/* Report a bug: urgency = three colour buttons (bug.js): green No big deal (low) / yellow Important (medium) / red Urgent (critical) */
#bugdlg .bug-urg{border:0;padding:0;margin:8px 0 4px;min-width:0}#bugdlg .bug-urg legend{padding:0;margin-bottom:6px}
#bugdlg .bug-ug{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#bugdlg .bug-u{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:76px;padding:8px 4px;border:3px solid var(--ink);border-radius:10px;cursor:pointer;text-align:center;box-shadow:0 4px 0 var(--ink);transition:transform .08s}
#bugdlg .bug-u input{position:absolute;opacity:0;width:1px;height:1px}
#bugdlg .bug-dot{width:22px;height:22px;border-radius:50%;border:3px solid currentColor;background:var(--uc)}
#bugdlg .bug-ub{font:700 14px/1.15 var(--px)}
#bugdlg .u-low{--uc:#2fb35a;background:#e3f6e9;color:#0f4a24}#bugdlg .u-medium{--uc:#ffcc1a;background:#fff6cc;color:#3a2a00}#bugdlg .u-critical{--uc:linear-gradient(135deg,#ffcc38,#b5f1ff,#d8b8ff);background:linear-gradient(135deg,#fff3c4,#e6f8ff,#f1e6ff);color:#3a2a00}
#bugdlg .bug-u:has(input:checked){transform:translateY(3px);box-shadow:0 1px 0 var(--ink);outline:4px solid var(--uc);outline-offset:2px}
#bugdlg .u-low:has(input:checked){background:#1e8f45;color:#fff}#bugdlg .u-medium:has(input:checked){background:#ffcc1a;color:#2a1d00}#bugdlg .u-critical:has(input:checked){background:linear-gradient(135deg,#f0b020,#ffcc38 45%,#b5f1ff 80%,#d8b8ff);color:#241204}
#bugdlg .bug-u:has(input:checked) .bug-dot{background:#fff;border-color:#fff;position:relative}
#bugdlg .u-medium:has(input:checked) .bug-dot{border-color:#2a1d00}
#bugdlg .bug-u:has(input:checked) .bug-dot::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:900 13px/1 system-ui,sans-serif;color:var(--ucd,#1e8f45)}
#bugdlg .u-medium{--ucd:#7a5a00}#bugdlg .u-critical{--ucd:#9a6400}
#bugdlg .bug-u:has(input:focus-visible){outline:3px dashed var(--mid);outline-offset:3px}
#bugdlg .bug-uh{margin:10px 0 2px;font-size:14px;line-height:1.3;font-weight:600;color:#2a3348}
#bugdlg .bug-urgent{background:linear-gradient(135deg,#ffcc38,#fff3b0 55%,#b5f1ff);color:#241204;border:2px solid #241204;font-weight:700;border-radius:8px;padding:8px 10px;margin:0 0 10px;text-align:center}
html[data-theme=team-rocket] #bugdlg .bug-u{border-color:#f4f1ff;box-shadow:0 4px 0 #f4f1ff}
html[data-theme=team-rocket] #bugdlg .u-low{background:#123a22;color:#c9f5d6}html[data-theme=team-rocket] #bugdlg .u-medium{background:#3d3208;color:#ffe98a}html[data-theme=team-rocket] #bugdlg .u-critical{background:#3d3208;color:#fff3b0}
html[data-theme=team-rocket] #bugdlg .u-low:has(input:checked){background:#1e8f45;color:#fff}html[data-theme=team-rocket] #bugdlg .u-medium:has(input:checked){background:#ffcc1a;color:#2a1d00}html[data-theme=team-rocket] #bugdlg .u-critical:has(input:checked){background:linear-gradient(135deg,#f0b020,#ffcc38 45%,#b5f1ff 80%,#d8b8ff);color:#241204}
html[data-theme=team-rocket] #bugdlg .bug-u:has(input:checked){box-shadow:0 1px 0 #f4f1ff}
html[data-theme=team-rocket] #bugdlg .bug-uh{color:#e6e0f5}
/* ── Dashboard v2: tabs (For you / Friends / Browse / My cards), compact trade lines + detail sheet ── */
.dash-top h1.avh{flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow:hidden}
.dash-nm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-hd .btn.add-big{margin:14px 0 10px}
.dash-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.dash-acts .btn.dash-share{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:auto;flex:1 1 12em;margin:0;padding:10px 12px;font-size:15px}
.dash-acts .btn.dash-share .icon{width:16px;height:16px}
.dash-acts .gear{flex:0 0 auto;min-height:40px;margin:0}
.share-help{font-size:13px;line-height:1.4;margin:8px 0 0}
.dtabs-wrap{margin:6px 0 0}
.dtabs{display:flex;gap:2px;position:sticky;top:0;z-index:25;background:var(--paper);margin:0 -4px 12px;padding:4px 4px 0;border-bottom:2px solid rgba(42,51,72,.14)}
.dtab-b{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 2px 6px;margin:0 0 -2px;background:none;border:0;border-bottom:3px solid transparent;color:var(--ink);font:600 13px/1.15 var(--px);cursor:pointer;opacity:.78;position:relative}
.dtab-b .ic{font-size:18px;line-height:1}.dtab-b .lb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.dtab-b .n{position:absolute;top:2px;right:calc(50% - 26px);min-width:18px;padding:1px 5px;border-radius:9px;background:var(--fill,var(--dark));color:var(--on-fill,#fff);font:700 11px/1.3 system-ui,sans-serif}
.dtab-b.on{opacity:1;border-bottom-color:var(--dark)}
.dtab-b:focus-visible{outline:3px solid var(--mid);outline-offset:-3px}
.dt-intro{font-size:14px;margin:0 2px 10px}
.fy-side{display:none}
.tl-list{display:flex;flex-direction:column;border:2px solid rgba(42,51,72,.14);border-radius:12px;overflow:hidden;margin:8px 0}
.tt-line,.fr-line{display:flex;align-items:center;gap:10px;width:100%;padding:9px 8px 9px 10px;margin:0;background:none;border:0;border-top:1px solid rgba(42,51,72,.12);border-radius:0;color:var(--ink);font:inherit;font-size:15px;text-align:left;cursor:pointer;min-height:56px}
.tt-line:first-child,.fr-line:first-child{border-top:0}
.tt-line:hover,.fr-line:hover{background:rgba(61,90,158,.06)}
.tt-line.hasfr{box-shadow:inset 4px 0 0 #2fd65a}
.tt-line .tt-art .thumb.ico{width:48px;border-width:2px}.tt-line .tt-art .thumb.ico .art{width:42px;height:58px;margin:2px 2px 0;border-width:1px}
.tt-line .tt-art .thumb.ico .tn{display:none}
.tt-line .tx,.fr-line .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.3}
.tl-give{display:flex;align-items:center;gap:6px;min-width:0}.tl-give b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tl-give .tt-lab{flex:none;color:var(--dark)}
.tl-get{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tl-arr{font-weight:700;color:#16805f}
.tl-more{font-size:12px;opacity:.75}.tt-line .r{font-size:12px;display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.tt-line .fbadge{font-size:10px;padding:2px 5px;margin:0}
.tl-plan{font:700 11px system-ui;color:#16805f}
.tl-meta{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:12px;text-align:right}
.tl-free{background:#e7f7ef;color:#0f6b4d;border:1px solid #16805f55;border-radius:999px;padding:1px 8px;font-weight:700}
.tl-dust{background:#fff4d1;color:#7a5a00;border:1px solid #c9a22755;border-radius:999px;padding:1px 8px;font-weight:700}
.tl-ppl{opacity:.75;white-space:nowrap}
.tl-chev{flex:none;font-size:22px;line-height:1;opacity:.5}
.tt-addmore{margin:10px 0 2px;font-size:15px;padding:11px}
.toptrades .tt-sub{margin-bottom:2px}
.fr-line :is(img,canvas).av{width:40px;height:40px;margin:0;border-radius:9px}
.fl-nm{display:flex;align-items:center;gap:6px;min-width:0}.fl-nm b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fl-tw{flex:none;font:700 11px/1.4 system-ui;background:#e7f7ef;color:#0f6b4d;border-radius:6px;padding:0 6px}
.fl-sub{font-size:13px;opacity:.9}.fl-seen{font-size:12px}.fl-seen .seen{font-size:12px}
.fl-peek{flex:none;display:flex;gap:2px}.fl-peek .thumb.ico{width:22px;border-width:1px}.fl-peek .thumb.ico .art{width:20px;height:28px;margin:0;border:0}.fl-peek .tn,.fl-peek .rar{display:none!important}
.frtrades h2{margin-bottom:4px}.fr-idle summary{cursor:pointer;font-size:14px;padding:8px 0;min-height:40px}.fr-links{display:flex;flex-wrap:wrap;gap:4px 18px;margin:8px 0 0}.fr-links .link{margin:0}
.side-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.side-h h3{margin:12px 0 0;font:600 14px var(--px)}.side-h .link{margin:0;font-size:13px;padding:4px 0}
.mc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 10px}.mc-stats div{display:flex;flex-direction:column;align-items:center;padding:8px 4px;border:2px solid rgba(42,51,72,.14);border-radius:10px}
.mc-stats b{font:600 20px/1.2 var(--px)}.mc-stats span{font-size:12px;opacity:.8;text-align:center}
.mycards .btn.alt{margin-top:12px}
dialog.tt-sheet{max-width:520px;padding:16px 14px 14px;max-height:88vh;overflow:auto}
.tt-sheet .ts-head{display:flex;gap:12px;align-items:flex-start;padding-right:30px}.tt-sheet .ts-id{min-width:0}.tt-sheet h2{margin:2px 0;font-size:17px}
.tt-sheet .ts-head .r{margin:0}.tt-sheet .ts-sub{font-size:13px;margin:4px 0 0}
.tt-sheet .tt-body{margin:10px 0;border:2px solid rgba(42,51,72,.14);border-radius:10px}
.tt-sheet .tt-row{border-top:1px solid rgba(42,51,72,.12)}.tt-sheet .tt-row:first-child{border-top:0}
@media (max-width:360px){.dtab-b{font-size:12px}.tt-line{gap:8px;padding-left:8px}.tl-give .tt-lab{display:none}.tl-meta{font-size:11px}.fl-peek{display:none}}
@media (min-width:900px){
  main:has(.dtabs-wrap){max-width:1060px}
  .dash-hd{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:6px 24px;align-items:center}
  .dash-hd .dash-top{grid-column:1}.dash-hd .btn.add-big{grid-column:2;grid-row:1;margin:0}.dash-hd .dash-acts{grid-column:2}.dash-hd .share-help{grid-column:2;margin:0}.dash-hd .pairbox{grid-column:1/-1}
  .dtabs{justify-content:flex-start;gap:4px;margin:0 0 16px}
  .dtab-b{flex:0 0 auto;flex-direction:row;gap:7px;padding:10px 16px 9px;font-size:14px}.dtab-b .n{position:static}
  .fy-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;align-items:start}
  .fy-side{display:block;position:sticky;top:64px}
  #dt-browse,#dt-mine,#dt-friends{max-width:720px}
}
/* Theme colours for the new pieces */
html[data-theme=pikachu] .dtabs,html[data-theme=team-rocket] .dtabs{border-bottom-color:var(--border)}
html[data-theme] .dtab-b.on{border-bottom-color:var(--accent)}
html[data-theme] .dtab-b .n{background:var(--accent);color:#fff}
html[data-theme] .tl-list,html[data-theme] .mc-stats div,html[data-theme] .tt-sheet .tt-body{border-color:var(--border)}
html[data-theme] .tt-line,html[data-theme] .fr-line,html[data-theme] .tt-sheet .tt-row{border-top-color:var(--border)}
html[data-theme] .tt-line:first-child,html[data-theme] .fr-line:first-child{border-top:0}
html[data-theme=team-rocket] .tt-line:hover,html[data-theme=team-rocket] .fr-line:hover{background:#ffffff0d}
html[data-theme=pikachu] .tl-give .tt-lab{color:#b45309}
html[data-theme=team-rocket] .tl-give .tt-lab{color:#fca5a5}
html[data-theme=team-rocket] .tl-arr{color:#6ee79a}html[data-theme=team-rocket] .tl-plan{color:#6ee79a}
html[data-theme=team-rocket] .tl-free,html[data-theme=team-rocket] .fl-tw{background:#0f2a18;color:#6ee79a;border-color:#6ee79a55}
html[data-theme=team-rocket] .tl-dust{background:#2a2207;color:#ffd84a;border-color:#ffd84a55}
html[data-theme=team-rocket] .tt-sheet .tt-row.isfriend{background:#2fd65a14}
/* Trade alerts / reward notices: follow the active theme (were hard-coded white) */
.ta-item{background:#f6f8fd;border-color:#dfe6f3;color:var(--ink)}
.ta-item .ta-top b,.ta-item .ta-title{color:var(--ink)}
.ta-item .muted{color:#5a6578}.ta-item .ta-lbl{opacity:.8}
.ta-item.unread{border-color:var(--dark);box-shadow:0 0 0 2px rgba(61,90,158,.18)}
html[data-theme=pikachu] .ta-item{background:#fff8e7;border-color:var(--border)}
html[data-theme=pikachu] .ta-item .muted{color:var(--muted)}
html[data-theme=pikachu] .ta-item.unread{border-color:var(--dark);box-shadow:0 0 0 2px rgba(180,83,9,.18)}
html[data-theme=team-rocket] .ta-item{background:#1c1c1e;border-color:#333;color:#f5f5f5}
html[data-theme=team-rocket] .ta-item .ta-top b,html[data-theme=team-rocket] .ta-item .ta-title{color:#fff}
html[data-theme=team-rocket] .ta-item .muted{color:#b5b5b5}
html[data-theme=team-rocket] .ta-item .ta-lbl{color:#fca5a5;opacity:1}
html[data-theme=team-rocket] .ta-item .ta-card figcaption{color:#e5e5e5}
html[data-theme=team-rocket] .ta-item.unread{border-color:#ef4444;box-shadow:0 0 0 2px rgba(239,68,68,.25)}
.tl-give b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25}
.tl-qty{font:700 11px/1.4 system-ui;border:1px solid currentColor;border-radius:6px;padding:0 5px;opacity:.85;white-space:nowrap}
.tl-cols{display:flex;gap:6px;font:400 9px/1.4 "Press Start 2P",var(--px);text-transform:uppercase;margin:10px 2px -2px 66px;opacity:.75}.tl-cols span:first-child{color:var(--dark)}
html[data-theme=team-rocket] .tl-cols span:first-child{color:#fca5a5}html[data-theme=pikachu] .tl-cols span:first-child{color:#b45309}
.dtab-b .n{top:1px;right:auto;left:calc(50% + 6px);min-width:16px;padding:0 4px;font-size:10px;line-height:15px;box-shadow:0 0 0 2px var(--paper)}
.dtabs{top:var(--tbh,0px)}
@media (min-width:900px){.fy-side{top:calc(var(--tbh,0px) + 62px)}}
.dust .dl{flex-wrap:nowrap;white-space:nowrap}
@media (max-width:360px){.dust .dl input{width:92px}}
.dash-nm{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25}
.dash-nm .hi{font-size:13px;opacity:.75}
.dash-nm .nm{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tt-sheet .pm-x{position:absolute;top:8px;right:8px;width:40px;height:40px;border:2px solid var(--ink);border-radius:6px;background:var(--light);color:var(--ink);font:700 16px/1 var(--px);cursor:pointer;z-index:1}
dialog.tt-sheet{position:fixed}
.tl-list button.fr-line{padding:9px 8px 9px 10px;text-decoration:none;font-size:15px}
.fl-nm{flex-wrap:wrap;row-gap:2px}.fl-nm b{white-space:normal;overflow-wrap:anywhere}
.tt-sheet .ts-head .tt-lab{color:var(--dark)}html[data-theme=team-rocket] .tt-sheet .ts-head .tt-lab{color:#fca5a5}html[data-theme=pikachu] .tt-sheet .ts-head .tt-lab{color:#b45309}

/* Bug #21: account switcher avatars are <canvas> (devaccts.js) so browser Auto Dark can't invert them; same box as img.av / av-sm / header rule. */
canvas.av{width:44px;height:44px;image-rendering:pixelated;border-radius:8px;vertical-align:middle;margin-right:6px;box-shadow:0 0 0 2px rgba(0,0,0,.55);flex:none}canvas.av.av-sm{width:32px;height:32px;border-radius:6px;margin-right:5px}
html header .acct summary canvas.av{width:32px;height:32px;margin:0 4px 0 -6px;border-radius:4px;box-shadow:0 0 0 2px #fff}

/* Rarity icons are <canvas class="ri ris"> (rarity.js, Auto Dark-proof); box = the old <img width/height>. */
canvas.ris{width:var(--rw);height:var(--rh)}

/* f347 (Will, iPhone: holding a card on Home showed the iOS image menu + blurry preview "Share… / Save to Photos / Copy Subject"):
   card art never gets the browser's long-press image menu, drag or text selection, anywhere (Home grids, My cards, binders,
   Wishlist, matches, sheets). Inside tappable tiles the picture lets touches through to the tile, so iOS has no image to preview
   and the app's own hold menus / taps get the press. Plain text elsewhere stays selectable. JS half: nocallout.js. */
img[src*="/thumbs/"],img[src*="/art/"],img.art,img.hc-art,img.dl-img,img.hw-card,.thumb,.thumb *{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
:is(button,a,label,[role=button],[data-id],.bs,.row,.hc-nc,.hc-shart,.thumb) img:is([src*="/thumbs/"],[src*="/art/"]){pointer-events:none}
:is(button,a,label,[role=button],.bs):has(img[src*="/thumbs/"],img[src*="/art/"],.thumb){-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
/* f472 (Will: every card picture is the same card component): the size option of app.js art(id, { w }) = the SAME tile scaled (CSS zoom);
   below 40 px wide the name strip drops (unreadable), frame + rarity strip always stay;
   a page can scale a context with an inherited --tzk (e.g. a 1fr grid at 320 px): zoom = --tz x --tzk */
.thumb.sz{zoom:calc(var(--tz,1) * var(--tzk,1))}
.thumb.sz-tiny .tn{display:none}

/* f560 PC Widescreen layouts across main app routes (mobile <900px untouched) */
@media (min-width:900px){
  main:has(.lo){max-width:1180px;padding:16px 24px 36px}
  main:has(.lp5),main:has(.f4),main:has(.ev),main:has(.md-page),main:has(.bd-page),main:has(.dl-page),main:has(.ms-page),main:has(.gd-page){max-width:1080px;padding:28px 28px 40px}
  footer{max-width:1080px}
  #dt-browse,#dt-mine,#dt-friends{max-width:1060px}
  #dt-browse .tl-list,#dt-friends .tl-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  #dt-browse .tt-line,#dt-friends .fr-line{border-right:1px solid rgba(42,51,72,.12)}
  .f4 .f4-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .lp5{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:22px 28px;align-items:start}
  .lp5 .lp5-hero{grid-column:1;grid-row:1 / span 3;position:sticky;top:24px}
  .lp5 .lp5-s{grid-column:2;margin:0}
  .lp5 .lp5-also,.lp5 .lp5-cl,.lp5 .lp5-fan,.lp5 .lp5-barw,.lp5 .lp5-legal{grid-column:1 / -1}
  .lp5 .lp5-barw{max-width:640px;margin:18px auto 0;width:100%;border-radius:22px}
}

/* f567 (Will, Oct 23: "a simple diamond with x4 would look cleaner... no boring white boxes"): the ONE card tile, same in every look.
   Dark slate frame with a thin gold line (never the theme's --ink/--light, which turned it white in dark looks), the name on the
   frame, and the rarity as one icon + ×N on the frame itself: no bar, no box. */
html body .thumb.ico{border-color:#171b30;background:linear-gradient(180deg,#232845,#171b30);box-shadow:inset 0 0 0 1px #d9b45a88,0 2px 0 #0006}
html body .thumb.ico .tn{color:#f4f1e6!important;background:none!important;text-shadow:0 1px 0 #000a}
html body .thumb.ico .rar,html body .thumb .rar{display:flex;align-items:center;justify-content:center;gap:3px;min-height:15px;padding:1px 0 3px;background:none!important;border:0;box-shadow:none}
html body .thumb.ico .rar .ri{filter:drop-shadow(0 1px 0 #000c)}
.rx{font:700 12px/1 "Pixelify Sans",system-ui,sans-serif;color:#f4f1e6;letter-spacing:.3px;text-shadow:0 1px 0 #000c}
/* ---- f732 clean card art (config.js SHOW_CARD_ART 'clean'; Will: "make all the cards look better than they do in the game") ----
   The official art, smooth-scaled (never nearest-neighbour), rounded like a real card, lifted off the page with a soft shadow. Same outer box as the pixel
   tile, so no layout shift. f732b (Will 11:51 PM: "make the cards pop even more ... add some glistening"): cardfx.js tilts the card under the mouse / finger
   (one tile at a time) and gives ONE visible rare a glisten every few seconds; the foil differs per rarity (fx-<code>). Everything is transform / opacity /
   background-position on one tile at a time (GPU, no layout); prefers-reduced-motion = no tilt, no glisten, only the still glow. */
img[data-cid],img[src*="assets.tcgdex.net/"],img[src*="limitlesstcg."]{image-rendering:auto!important;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
:is(button,a,label,[role=button],[data-id],.bs,.row,.hc-nc,.hc-shart,.thumb) img[data-cid]{pointer-events:none}
img[data-cid]{background-color:#232845;border-radius:4.5%/3.3%}
.thumb.ico.cl:not(.lo-b){border-radius:7px;border-color:#171b30;box-shadow:0 3px 9px rgba(12,16,44,.38),0 1px 2px rgba(0,0,0,.45);transition:transform .2s cubic-bezier(.2,.8,.3,1.2),box-shadow .2s;transform-style:preserve-3d}
.thumb.ico.cl:not(.lo-b) .art.cart{width:68px;height:92px;margin:2px 2px 0;border:0;border-radius:4px;object-fit:cover;background:#2a2f57;box-shadow:0 1px 3px rgba(0,0,0,.6)}
/* rares: a still glow edge in the colour of their foil */
.thumb.ico.cl.holo:not(.lo-b) .art.cart{box-shadow:0 0 0 1px rgba(255,255,255,.55),0 0 7px rgba(190,225,255,.55),0 1px 3px rgba(0,0,0,.6)}
.thumb.ico.cl.fx-UR:not(.lo-b) .art.cart,.thumb.ico.cl.fx-IM:not(.lo-b) .art.cart{box-shadow:0 0 0 1px rgba(255,226,140,.9),0 0 9px rgba(255,205,90,.7),0 1px 3px rgba(0,0,0,.6)}
.thumb.ico.cl:is(.fx-S,.fx-SSR):not(.lo-b) .art.cart{box-shadow:0 0 0 1px rgba(235,225,255,.85),0 0 9px rgba(200,170,255,.7),0 1px 3px rgba(0,0,0,.6)}
/* the foil layer (::after) and the glint (::before), both over the art only */
.thumb.ico.cl.holo:not(.lo-b)::after,.thumb.ico.cl.holo:not(.lo-b)::before{content:"";position:absolute;inset:2px 2px auto 2px;height:92px;border-radius:4px;pointer-events:none;opacity:0;animation:none}
.thumb.ico.cl.holo:not(.lo-b)::after{mix-blend-mode:color-dodge;background-size:260% 260%;background-position:var(--mx,100%) var(--my,0%);transition:opacity .25s;
  background-image:linear-gradient(115deg,transparent 30%,rgba(255,140,225,.55) 41%,rgba(140,255,240,.6) 50%,rgba(255,245,150,.55) 59%,transparent 70%)}
.thumb.ico.cl.fx-RR:not(.lo-b)::after{mix-blend-mode:overlay;background-image:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.75) 50%,transparent 66%)}
.thumb.ico.cl:is(.fx-UR,.fx-IM):not(.lo-b)::after{mix-blend-mode:color-dodge;background-image:linear-gradient(115deg,transparent 28%,rgba(255,200,90,.6) 42%,rgba(255,248,215,.85) 50%,rgba(255,190,80,.6) 58%,transparent 72%)}
.thumb.ico.cl:is(.fx-S,.fx-SSR):not(.lo-b)::after{mix-blend-mode:color-dodge;background-size:260% 260%,46px 46px;
  background-image:linear-gradient(115deg,transparent 30%,rgba(200,170,255,.5) 44%,rgba(170,240,255,.55) 52%,transparent 68%),radial-gradient(circle at 20% 30%,#fff 0 1px,transparent 1.6px),radial-gradient(circle at 70% 65%,#fff 0 .8px,transparent 1.4px)}
.thumb.ico.cl.fx-SAR:not(.lo-b)::after,.thumb.ico.cl.fx-SR:not(.lo-b)::after{background-image:linear-gradient(115deg,transparent 26%,rgba(255,120,220,.6) 38%,rgba(120,255,240,.65) 47%,rgba(255,250,150,.6) 56%,rgba(150,170,255,.55) 64%,transparent 74%)}
.thumb.ico.cl.holo:not(.lo-b)::before{z-index:1;inset:auto;top:var(--gy,22px);left:var(--gx,52px);width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M13 0C14 9 17 12 26 13 17 14 14 17 13 26 12 17 9 14 0 13 9 12 12 9 13 0Z' fill='%23fff'/%3E%3C/svg%3E") 50%/contain no-repeat;filter:drop-shadow(0 0 3px #fff)}
.thumb.ico.cl.fx-UR:not(.lo-b)::before,.thumb.ico.cl.fx-IM:not(.lo-b)::before{filter:drop-shadow(0 0 3px #ffd36a)}
@media (prefers-reduced-motion:no-preference){
  .thumb.ico.cl.tilt:not(.lo-b){transform:perspective(420px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg)) translateY(-3px) scale(1.05);box-shadow:0 12px 24px rgba(12,16,44,.45),0 2px 4px rgba(0,0,0,.4);z-index:3;transition:transform .08s linear,box-shadow .2s}
  .thumb.ico.cl.holo.tilt:not(.lo-b)::after{opacity:.9}
  .thumb.ico.cl.holo.gl:not(.lo-b)::after{animation:gl732 1.25s ease-in-out both}
  .thumb.ico.cl.holo.gl:not(.lo-b)::before{animation:tw732 1.1s ease-in-out .2s both}}
@keyframes gl732{0%{opacity:0;background-position:110% 0}25%{opacity:.85}75%{opacity:.85}100%{opacity:0;background-position:-30% 100%}}
@keyframes tw732{0%{opacity:0;transform:scale(.2) rotate(0)}45%{opacity:1;transform:scale(1) rotate(45deg)}100%{opacity:0;transform:scale(.3) rotate(90deg)}}
@keyframes holo732{0%{background-position:100% 0}100%{background-position:-60% 0}}
.cz732{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;background:rgba(8,10,24,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);perspective:900px;touch-action:none;animation:czIn .18s ease-out}
.cz732 .cz-card{position:relative;width:min(86vw,62vh,460px);aspect-ratio:600/825;border-radius:4.5%/3.3%;transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));transition:transform .12s ease-out;box-shadow:0 18px 50px #000c,0 0 0 1px #fff2;overflow:hidden;will-change:transform}
.cz732 .cz-card img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(1.06) contrast(1.03)}
.cz732 .cz-card::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:.55;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.75),rgba(255,255,255,0) 45%)}
.cz732 .cz-card.holo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:color-dodge;opacity:.38;
  background:linear-gradient(115deg,transparent 20%,rgba(255,120,220,.5) 36%,rgba(120,255,240,.55) 46%,rgba(255,250,150,.5) 56%,transparent 72%);background-size:260% 260%;background-position:var(--gx,50%) var(--gy,50%)}
.cz732 .cz-x{position:absolute;top:max(12px,env(safe-area-inset-top));right:14px;width:44px;height:44px;border-radius:50%;border:2px solid #fff6;background:#171b30cc;color:#fff;font:600 22px/1 var(--px,system-ui);cursor:pointer}
.cz732 .cz-nm{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));left:0;right:0;text-align:center;color:#f4f1e6;font:600 16px/1.3 var(--px,system-ui);text-shadow:0 1px 2px #000}
@keyframes czIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.cz732{animation:none}.cz732 .cz-card{transition:none}}
.q5-card:has(img[data-cid]),[data-zoom]{cursor:zoom-in}
.cz732 .cz-card.fx-RR.holo::before{mix-blend-mode:overlay;opacity:.5;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.8) 50%,transparent 70%);background-size:260% 260%;background-position:var(--gx,50%) var(--gy,50%)}
.cz732 .cz-card:is(.fx-UR,.fx-IM).holo::before{opacity:.5;background:linear-gradient(115deg,transparent 20%,rgba(255,196,80,.6) 38%,rgba(255,250,220,.85) 50%,rgba(255,190,70,.6) 62%,transparent 80%);background-size:260% 260%;background-position:var(--gx,50%) var(--gy,50%)}
.cz732 .cz-card:is(.fx-S,.fx-SSR).holo::before{opacity:.45;background:linear-gradient(115deg,transparent 25%,rgba(200,170,255,.6) 42%,rgba(170,240,255,.6) 55%,transparent 75%),radial-gradient(circle at 30% 40%,#fff 0 1.2px,transparent 2px) 0 0/38px 38px,radial-gradient(circle at 70% 70%,#fff 0 1px,transparent 1.8px) 0 0/53px 53px;background-size:260% 260%,38px 38px,53px 53px;background-position:var(--gx,50%) var(--gy,50%),0 0,0 0}
.cz732 .cz-gl{position:absolute;z-index:2;width:34px;height:34px;margin:-17px 0 0 -17px;pointer-events:none;opacity:0;filter:drop-shadow(0 0 4px #fff);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M13 0C14 9 17 12 26 13 17 14 14 17 13 26 12 17 9 14 0 13 9 12 12 9 13 0Z' fill='%23fff'/%3E%3C/svg%3E") 50%/contain no-repeat;animation:tw732 1.2s ease-in-out var(--d,0s) infinite;animation-duration:3.6s}
@media (prefers-reduced-motion:reduce){.cz732 .cz-gl{display:none}}
/* ---- f739 the whole card, true shape (Will Oct 25 12:10 AM: "I don't want the cards to be zoomed in ... literally the same as the card looks just better.
   The holos should have more shine in the right places so reverse holos glow along the borders"). Clean art only (SHOW_CARD_ART 'clean'; 'off' / 'pixel16' untouched).
   - Every card picture shows the FULL print at its own shape (245:337 TCGdex / 367:512 Limitless, contain = never cropped, never stretched); no dark frame, thin
     card-rounded corners, soft shadow. Lore (.lo-b art windows) is left alone.
   - Foil sits where real foil sits (one ::after per tile, masked): C/U/R = reverse holo on the frame (everything but the art window); RR (ex) = the art;
     AR/SR/SAR/IM = full-surface textured foil; UR = gold; S/SSR = glitter. Still: a soft rest glow. Mouse / finger (cardfx.js --mx/--my) and the periodic
     glisten move the light. color-dodge keeps black text black. prefers-reduced-motion: rest glow only. */
img[data-cid]:not(.lo-b *):not(.sz-win *):not(.lo-hi),img[src*="assets.tcgdex.net/"]:not(.lo-b *):not(.sz-win *),img[src*="limitlesstcg."]:not(.lo-b *):not(.sz-win *){object-fit:contain!important;object-position:50% 50%!important;background-color:transparent!important}
html body .thumb.ico.cl:not(.lo-b):not(.sz-win){border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;position:relative}
html body .thumb.ico.cl:not(.lo-b):not(.sz-win) .art.cart{display:block;width:72px;max-width:100%;height:auto;aspect-ratio:245/337;margin:0;border:0;border-radius:4.2%/3.05%;object-fit:contain;
  box-shadow:0 .5px 1px rgba(10,14,40,.45),0 3px 8px -1px rgba(10,14,40,.38)}
html body .thumb.ico.cl:not(.lo-b):not(.sz-win) .tn{color:inherit!important;text-shadow:none;padding-top:2px}
html body .thumb.ico.cl:not(.lo-b):not(.sz-win) .rar{padding-top:1px}
html body .thumb.ico.cl:not(.lo-b):not(.sz-win) .rx{color:inherit;text-shadow:none;opacity:.85}
/* the foil layer: exactly over the card picture */
html body .thumb.ico.cl:not(.lo-b):not(.sz-win)::after{content:"";position:absolute;inset:0 auto auto 0;width:72px;max-width:100%;height:auto;aspect-ratio:245/337;border-radius:4.2%/3.05%;pointer-events:none;z-index:1;
  mix-blend-mode:color-dodge;opacity:var(--rest,.32);animation:none;transition:opacity .3s;background-size:320% 320%;background-position:var(--mx,82%) var(--my,18%);
  background-image:linear-gradient(115deg,transparent 22%,rgba(255,110,200,.55) 34%,rgba(110,235,255,.6) 43%,rgba(255,248,160,.6) 52%,rgba(150,130,255,.5) 61%,transparent 74%)}
/* C / U / R: reverse holo = the frame and border, never the art window (art window x 7.5-92.5 %, y 9.5-49 % of a Pocket card) */
html body .thumb.ico.cl:not(.holo):not(.lo-b):not(.sz-win)::after{--rest:.3;
  -webkit-mask:linear-gradient(#000 0 0) 0 0/100% 100% no-repeat,linear-gradient(#000 0 0) 50% 15.7%/85% 39.5% no-repeat;-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) 0 0/100% 100% no-repeat exclude,linear-gradient(#000 0 0) 50% 15.7%/85% 39.5% no-repeat}
/* RR (ex): the big art */
html body .thumb.ico.cl.fx-RR:not(.lo-b):not(.sz-win)::after{--rest:.28;-webkit-mask:linear-gradient(transparent 4%,#000 9%,#000 52%,transparent 61%);mask:linear-gradient(transparent 4%,#000 9%,#000 52%,transparent 61%);
  background-image:linear-gradient(115deg,transparent 24%,rgba(200,235,255,.6) 38%,rgba(255,255,255,.85) 47%,rgba(255,220,250,.6) 56%,transparent 72%)}
/* AR / SR / SAR / IM: full-surface textured foil (a fixed fine etch + the moving rainbow) */
html body .thumb.ico.cl:is(.fx-AR,.fx-SR,.fx-SAR,.fx-IM):not(.lo-b):not(.sz-win)::after{--rest:.34;background-size:320% 320%,5px 5px;background-position:var(--mx,82%) var(--my,18%),0 0;
  background-image:linear-gradient(115deg,transparent 18%,rgba(255,110,210,.6) 31%,rgba(110,240,255,.65) 41%,rgba(255,250,150,.62) 51%,rgba(140,160,255,.58) 61%,rgba(255,140,220,.5) 70%,transparent 82%),
    repeating-linear-gradient(45deg,rgba(255,255,255,0) 0 2px,rgba(255,255,255,.22) 2px 3px)}
/* UR (crown): gold */
html body .thumb.ico.cl.fx-UR:not(.lo-b):not(.sz-win)::after{--rest:.4;background-size:320% 320%,4px 4px;background-position:var(--mx,82%) var(--my,18%),0 0;
  background-image:linear-gradient(115deg,transparent 16%,rgba(255,190,70,.6) 32%,rgba(255,246,200,.9) 46%,rgba(255,200,90,.65) 58%,rgba(220,150,40,.5) 68%,transparent 82%),
    repeating-linear-gradient(-45deg,rgba(255,230,160,0) 0 2px,rgba(255,230,160,.25) 2px 3px)}
/* S / SSR (shiny): glitter */
html body .thumb.ico.cl:is(.fx-S,.fx-SSR):not(.lo-b):not(.sz-win)::after{--rest:.42;background-size:320% 320%,17px 17px,23px 23px,11px 11px;background-position:var(--mx,82%) var(--my,18%),0 0,5px 9px,3px 2px;
  background-image:linear-gradient(115deg,transparent 22%,rgba(210,170,255,.55) 38%,rgba(170,240,255,.6) 50%,rgba(255,240,200,.5) 60%,transparent 76%),
    radial-gradient(circle at 30% 30%,#fff 0 .7px,transparent 1.3px),radial-gradient(circle at 60% 70%,#fff 0 .9px,transparent 1.5px),radial-gradient(circle at 50% 50%,rgba(255,255,255,.7) 0 .5px,transparent 1px)}
/* the glint star (rares only): anywhere on the card */
html body .thumb.ico.cl.holo:not(.lo-b):not(.sz-win)::before{z-index:2;inset:auto;top:var(--gy,30%);left:var(--gx,50%);height:26px;width:26px}
/* rest glow edge in the rarity's colour (thin, outside the card) */
html body .thumb.ico.cl.holo:not(.lo-b):not(.sz-win) .art.cart{box-shadow:0 0 0 .5px rgba(255,255,255,.7),0 0 6px rgba(170,215,255,.55),0 3px 8px -1px rgba(10,14,40,.38)}
html body .thumb.ico.cl.fx-UR:not(.lo-b):not(.sz-win) .art.cart{box-shadow:0 0 0 .5px rgba(255,226,140,.95),0 0 8px rgba(255,200,80,.65),0 3px 8px -1px rgba(10,14,40,.38)}
html body .thumb.ico.cl:is(.fx-S,.fx-SSR):not(.lo-b):not(.sz-win) .art.cart{box-shadow:0 0 0 .5px rgba(240,230,255,.9),0 0 8px rgba(200,170,255,.65),0 3px 8px -1px rgba(10,14,40,.38)}
@media (prefers-reduced-motion:no-preference){
  html body .thumb.ico.cl.tilt:not(.lo-b):not(.sz-win){box-shadow:none}
  html body .thumb.ico.cl.tilt:not(.lo-b):not(.sz-win) .art.cart{box-shadow:0 0 0 .5px rgba(255,255,255,.6),0 12px 22px -4px rgba(10,14,40,.5)}
  html body .thumb.ico.cl.tilt:not(.lo-b):not(.sz-win)::after{opacity:.95}
  html body .thumb.ico.cl.gl:not(.lo-b):not(.sz-win)::after{animation:gl739 1.3s ease-in-out both}
  html body .thumb.ico.cl.holo.gl:not(.lo-b):not(.sz-win)::before{animation:tw732 1.1s ease-in-out .25s both}}
@keyframes gl739{0%{background-position:120% 0%}35%{opacity:.95}70%{opacity:.95}100%{opacity:var(--rest,.32);background-position:-20% 100%}}
/* binder (My cards / a player's cards): the slot is the card's shape; the count sits UNDER the card, never on it */
.binder .bgrid{row-gap:21px;grid-template-columns:repeat(5,minmax(0,1fr))}
.binder .bs .thumb.cl :is(.tn,.rar){display:none!important}
@media(min-width:760px){.binder .bgrid{grid-template-columns:repeat(5,minmax(0,110px));row-gap:25px}}
.binder .bs{aspect-ratio:245/337;border-radius:6px}
html body .binder .bs:is(.d,.o){background:none;border:0;overflow:visible;content-visibility:visible;justify-content:flex-start}
.binder .bs .thumb.cl{display:block;width:100%;height:auto}
html body .binder .bs .thumb.ico.cl .art.cart,html body .binder .bs .thumb.ico.cl::after{width:100%}
.binder .bs.d .bq{top:calc(100% + 3px);bottom:auto;right:50%;transform:translateX(50%);z-index:2;background:#1b1f3b;color:#fff;font:700 10.5px/1 system-ui;padding:2px 6px 3px;border-radius:999px;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.binder .bs.o .bq{top:calc(100% + 3px);bottom:auto;right:50%;transform:translateX(50%);z-index:2;background:#1b1f3b;color:#fff;font:700 10.5px/1 system-ui;padding:2px 6px 3px;border-radius:999px;box-shadow:0 1px 2px rgba(0,0,0,.25)}
/* My cards > Spares: the clean print at its own shape (it was the old pixel thumb, cropped to 5:7) */
.s7-img:is([src*="assets.tcgdex.net/"],[src*="limitlesstcg."]){aspect-ratio:245/337;border-radius:4.2%/3.05%;box-shadow:0 .5px 1px rgba(0,0,0,.5),0 4px 10px -2px rgba(0,0,0,.5)}
/* landing / top trades: the "×N" chip off the card's corner */
.t3-x{top:-11px;right:-8px}
/* hold menu big card: no box ring around the tile now that the card has its own edge */
.q5-card:has(>.q5-tw .thumb.cl){box-shadow:none;border-radius:0;background:none}
.q5-card:has(>.q5-tw .thumb.cl) .q5-sh{border-radius:3%/2.2%;bottom:auto;aspect-ratio:245/337}
/* full-size view: the whole card (no crop), the same foil placement, stronger */
.cz732 .cz-card{border-radius:4.2%/3.05%;overflow:visible;background:none}
.cz732 .cz-card img{object-fit:contain;border-radius:4.2%/3.05%}
.cz732 .cz-card::after{border-radius:4.2%/3.05%}
.cz732 .cz-card:not(.holo)::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:4.2%/3.05%;mix-blend-mode:color-dodge;opacity:.42;background-size:300% 300%;background-position:var(--gx,50%) var(--gy,50%);
  background-image:linear-gradient(115deg,transparent 20%,rgba(255,110,200,.55) 33%,rgba(110,235,255,.6) 43%,rgba(255,248,160,.6) 52%,rgba(150,130,255,.5) 61%,transparent 75%);
  -webkit-mask:linear-gradient(#000 0 0) 0 0/100% 100% no-repeat,linear-gradient(#000 0 0) 50% 15.7%/85% 39.5% no-repeat;-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) 0 0/100% 100% no-repeat exclude,linear-gradient(#000 0 0) 50% 15.7%/85% 39.5% no-repeat}
.cz732 .cz-card.holo::before{border-radius:4.2%/3.05%}
.cz732 .cz-card.fx-RR.holo::before{mix-blend-mode:color-dodge;opacity:.45;-webkit-mask:linear-gradient(transparent 4%,#000 9%,#000 52%,transparent 61%);mask:linear-gradient(transparent 4%,#000 9%,#000 52%,transparent 61%)}
.cz732 .cz-card:is(.fx-AR,.fx-SR,.fx-SAR,.fx-IM).holo::before{opacity:.45;background-size:300% 300%,6px 6px;background-position:var(--gx,50%) var(--gy,50%),0 0;
  background-image:linear-gradient(115deg,transparent 18%,rgba(255,110,210,.6) 31%,rgba(110,240,255,.65) 41%,rgba(255,250,150,.62) 51%,rgba(140,160,255,.58) 61%,transparent 80%),repeating-linear-gradient(45deg,rgba(255,255,255,0) 0 3px,rgba(255,255,255,.2) 3px 4px)}

/* f811 binder: every card you own shows its art (d = with spares, o = no spares) + the real copies under it; 'u' = a card the scan
   couldn't settle (Will: no per-card confirm list): a plain numbered slot like Pocket's own empty slot, no chip, not on the Wishlist */
.binder .bs.u{background:linear-gradient(180deg,#f6f8ff,#eef1fb);border:2px solid #dde2f2;color:#7a82a8}
html[data-theme=team-rocket] .binder .bs.u{background:linear-gradient(180deg,#26262c,#1f1f24);border-color:#3a3d4f;color:#9ea3c4}
/* f825: stale edit key on save -> a clear sign-in path under the Save button (never a dead-end 'Bad edit link') */
.avp-save-row:has(.avp-stale){flex-wrap:wrap}.avp-msg.avp-stale{flex-basis:100%;font:600 14px/1.4 system-ui,sans-serif;color:inherit}.avp-msg .avp-signin{display:inline-flex;margin-top:8px;min-height:44px;align-items:center}

/* f868: a name can change but never be blank: a friendly gold line, a small shake, the field outlined */
.name-err{display:block;margin-top:8px;padding:8px 12px;border-radius:12px;background:#fff4cc!important;color:#6b4200!important;font-weight:600;box-shadow:inset 0 0 0 1.5px #ffd75e}
input[aria-invalid=true]:not(.a4-inick){outline:2px solid #ffd75e;outline-offset:1px}
.name-shake{animation:nmshk .32s ease}@keyframes nmshk{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){.name-shake{animation:none}}