:root{--y:#f2b721;--k:#111;--r:#c8102e}*{box-sizing:border-box}body{margin:0;background:#1a1a1a;font-family:Archivo,sans-serif;color:var(--k)}
.frame{margin:14px;border:14px solid var(--k);border-radius:34px;background:var(--y);min-height:95vh;padding:18px;box-shadow:0 0 0 3px #888}
header{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.logo{font-family:Bungee;font-size:34px;color:var(--y);-webkit-text-stroke:2px #000;text-shadow:3px 3px 0 #000;letter-spacing:2px}
h1{font-family:'Archivo Black';margin:0;font-size:clamp(20px,3vw,34px)}h1 span{font-size:.6em}
.htag{margin:0;font-family:'Archivo Black',sans-serif;font-size:clamp(11px,2.4vw,15px);font-weight:400;letter-spacing:.18em;text-transform:uppercase;text-align:center;color:#fff;line-height:1.2;width:100%}
.hrow{display:grid;grid-template-columns:minmax(64px,1fr) auto minmax(64px,1fr);align-items:center;gap:10px 16px;width:100%}
.hside{display:flex;align-items:center;min-width:0}
.hside-l{justify-self:start;justify-content:flex-start}
.hside-r{justify-self:end;justify-content:flex-end}
.hbrand{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;justify-self:center;text-align:center}
.hyears{font-family:Bungee,sans-serif;font-size:11px;letter-spacing:.2em;color:var(--y);opacity:.95}
.prog{font-family:'Archivo Black';font-size:20px}.bar{width:200px;height:10px;background:#0002;border:2px solid #000;border-radius:6px;overflow:hidden}.bar i{display:block;height:100%;background:var(--r);width:0}
nav{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}nav button{font-family:Bungee;background:#000;color:var(--y);border:0;border-radius:20px;padding:8px 14px;cursor:pointer;font-size:13px}
nav button.on{background:var(--r);color:#fff}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}.filters input#q{flex:1;min-width:200px}
.filters input,.filters select,.filters button{padding:8px;border:2px solid #000;border-radius:8px;font:inherit;background:#fff8e0}
#grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.card{background:#ffd75a;border:2px solid #000;border-radius:12px;padding:8px;cursor:pointer;position:relative;transition:transform .12s}.card:hover{transform:translateY(-3px) rotate(-1deg)}
.card.own{background:#fff1b8;outline:3px solid var(--r)}.sil{height:140px;display:flex;align-items:center;justify-content:center;background:radial-gradient(#ffe48f,#e9a90f);border-radius:8px;overflow:hidden}
.sil img{max-height:100%;max-width:100%}.sil svg{height:110px;opacity:.75}.num{font-family:Bungee;font-size:14px}.nm{font-size:12px;font-weight:700;line-height:1.2}
.tag{font-size:10px;background:#000;color:var(--y);border-radius:4px;padding:1px 4px;margin-right:3px}.tag.v{background:var(--r);color:#fff}.tag.q{background:#fff;color:#000;border:1px solid #000}
.chk{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;border:2px solid #000;background:#fff;font-weight:900}.own .chk{background:var(--r);color:#fff}
dialog{border:8px solid #000;border-radius:24px;background:var(--y);max-width:760px;width:95%;padding:20px}dialog::backdrop{background:#000a}
.dgrid{display:grid;grid-template-columns:220px 1fr;gap:16px}@media(max-width:600px){.dgrid{grid-template-columns:1fr}.frame{margin:4px;border-width:8px;padding:10px}}
dt{font-weight:700}dd{margin:0 0 6px}.accs{display:flex;flex-wrap:wrap;gap:8px}.acc{width:90px;text-align:center;font-size:11px}.acc .sil{height:70px}
.tv{background:#fff;border:1px dashed #000;padding:0 4px;border-radius:3px;font-size:.85em}button.b{font-family:Bungee;background:#000;color:var(--y);border:0;border-radius:16px;padding:8px 12px;cursor:pointer;margin:4px 4px 0 0}
footer{margin-top:20px;font-size:12px}textarea{width:100%;min-height:80px}
.mascot{height:70px;width:auto;filter:drop-shadow(2px 2px 0 #0003)}
.hside-l{gap:10px}
.vswc{display:inline-flex;flex:0 0 auto;line-height:0;border-radius:50%;outline:none}
.vswc img{height:70px;width:70px;object-fit:contain;border-radius:50%;display:block}
.vswc:hover{opacity:.9}.vswc:focus-visible{box-shadow:0 0 0 2px var(--y)}.sil img.m{opacity:.35;height:80px}.want{font-family:Bungee;font-size:10px;position:absolute;bottom:6px;opacity:.6}.sil{position:relative;flex-direction:column}
.cut{background:conic-gradient(#eee 25%,#fff 0 50%,#eee 0 75%,#fff 0) 0 0/16px 16px;border:2px solid #000;border-radius:8px;max-width:100%;height:220px;object-fit:contain}
.ba{display:flex;gap:10px;flex-wrap:wrap}.ba figure{margin:0;text-align:center;font-size:12px}.row{display:flex;gap:8px;align-items:center;border-bottom:1px solid #0003;padding:6px 0}.row img{height:60px}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#000;color:var(--y);padding:10px 16px;border-radius:30px;display:none;align-items:center;gap:10px;font-family:Bungee;z-index:9}#toast img{height:40px;filter:invert(1) sepia(1) saturate(5) hue-rotate(5deg)}
.empty{text-align:center;grid-column:1/-1}.empty img{height:140px}.sale{font-size:12px;background:#fff8e0;border:2px solid #000;border-radius:8px;padding:6px;margin:4px 0}
.brand{height:64px;max-width:min(440px,52vw);width:auto;object-fit:contain;display:block;margin:0 auto}
/* black cardback-style header */
.frame{padding-top:0;overflow:hidden}
header{background:#000;color:#fff;margin:0 -18px;padding:16px 22px 10px}
nav#tabs{background:#000;margin:0 -18px 14px;padding:4px 22px 14px}
header .prog{color:#fff}.bar{border-color:#fff;background:#fff2}
nav button{background:transparent;color:#fff;border:2px solid #fff}nav button.on{background:var(--y);color:#000;border-color:var(--y)}nav button:hover{border-color:var(--y);color:var(--y)}
.mascot{filter:invert(1)}
@media(max-width:600px){
header,nav#tabs{margin-left:-10px;margin-right:-10px}
header{padding:12px 12px 8px}
.htag{letter-spacing:.1em;font-size:clamp(9px,3.1vw,12px);padding:0 2px}
.hrow{grid-template-columns:1fr auto 1fr;gap:6px 6px}
.brand{height:40px;max-width:min(200px,46vw)}
.mascot{height:38px}
.vswc img{height:38px;width:38px}
.hside-l{gap:6px}
.prog{font-size:11px;text-align:right;line-height:1.15}.bar{width:100%;max-width:96px;margin-left:auto;height:8px}
.hyears{font-size:9px;letter-spacing:.12em}
.hside-r .prog{max-width:100%}
.hside-l .mascot,.hside-l .vswc{max-width:100%}
}
nav#tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;gap:5px}nav button{white-space:nowrap;flex:0 0 auto;font-size:11px;padding:6px 10px}
.b.big{font-size:18px;padding:14px 22px;width:100%;margin:8px 0}.b:disabled{opacity:.4}
.drop{display:block;border:4px dashed #000;border-radius:18px;padding:22px;text-align:center;cursor:pointer;background:#fff8e0;font-size:18px}.drop img{height:70px;display:block;margin:0 auto 6px}.drop.over{background:#fff;border-color:var(--r)}
.cam{display:inline-block}
.cam{font-family:Bungee;background:#000;color:var(--y);border-radius:16px;padding:10px 16px;cursor:pointer;margin:8px 0}
.coosum{background:#000;color:var(--y);padding:10px 14px;border-radius:12px;font-size:13px}
.coogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.coo{background:#ffd75a;border:3px solid #000;border-radius:14px;padding:8px;font-size:12px}.coo .sil{height:110px}
.coohd{display:flex;align-items:center;gap:8px;margin-bottom:6px}.coohd b{font-family:'Archivo Black';font-size:14px}
.fam{font-family:Bungee;background:#000;color:var(--y);border-radius:8px;padding:2px 7px;font-size:11px}
.stamp{font-family:ui-monospace,Menlo,monospace;font-weight:700;letter-spacing:.5px}.coo dl{margin:6px 0}.coo dt{font-size:11px;text-transform:uppercase;opacity:.7}.addc{font-size:11px}
.tag.rare{background:linear-gradient(90deg,#c8102e,#ff7a00);color:#fff;font-weight:900;letter-spacing:.5px}
.card.israre{border-color:#c8102e;box-shadow:0 0 0 3px #c8102e,0 0 18px #ff7a0088}.card.israre .num::after{content:" ★";color:#c8102e}
.rarebar{display:inline-block;font-family:Bungee;background:#c8102e;color:#fff;padding:4px 10px;border-radius:10px;margin:0 0 6px}
.igl{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}.igw{background:#000;color:#fff;border-radius:12px;padding:8px 10px;font-size:12px}.igw b{color:var(--y);font-family:Bungee;font-weight:400}.igw a{color:#9fd3ff}

.igw .sil.igph{height:90px;margin-bottom:6px;background:radial-gradient(#ffe48f,#e9a90f);border:2px solid #000}
.igw .sil.igph .want{color:#000;opacity:.55}
.igw .addc{color:var(--y)}
/* Admin / any bare accessory preview: same mustard tile as figure .sil */
.row .sil,.row img.accprev{background:radial-gradient(#ffe48f,#e9a90f);border-radius:8px}
.row .sil{height:70px;width:70px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;overflow:hidden}
.row .sil img{max-height:100%;max-width:100%;height:auto}
.row img.accprev{height:60px;width:60px;object-fit:contain;padding:4px;box-sizing:border-box;border:2px solid #000}
.igref{margin-top:6px;padding:8px 10px;background:#fff8e0;border:2px solid #000;border-radius:10px;font-size:12px;color:#000}
.igref b{font-family:Bungee;font-size:11px;color:#c8102e}
.igref a{color:#0645ad;font-weight:700}