/* Beycentral dark mode: public pages (index, gallery, shop, grading, portfolio).
   Loaded after each page's own <style>; light mode is not touched.
   Tokens (--blue = white here, --brand, --bg, --panel, --well ...) live in theme-base.css. */

html[data-theme="dark"] body,
html[data-theme="dark"] header,
html[data-theme="dark"] footer{background:var(--bg)}

/* logo: spins while hovered (hover is on the link, so the hit area never rotates) */
@keyframes logo-spin{to{transform:rotate(360deg)}}
.logo-link:hover .logo,
.logo-link:focus-visible .logo{animation:logo-spin 1.125s linear infinite}
@media(prefers-reduced-motion:reduce){
  .logo-link:hover .logo,
  .logo-link:focus-visible .logo{animation:none}
}

/* ---------- hero cards (home, shop, grading) ---------- */
html[data-theme="dark"] .hero{background:var(--well)}
html[data-theme="dark"] .hero img{opacity:.62}
html[data-theme="dark"] .overlay h1,
html[data-theme="dark"] .enter{
  background:var(--brand);color:#fff;box-shadow:0 0 0 2px #fff;
}
html[data-theme="dark"] .enter:hover,
html[data-theme="dark"] .enter:focus-visible{background:#fff;color:var(--brand)}

/* ---------- gallery ---------- */
html[data-theme="dark"] .frame{background:#fdfdfd;border-color:#fff;box-shadow:none}
/* dark mode: a dark-grey veil over every "coming soon" banner and card until a real photo replaces it.
   Tune --soon-veil to make it lighter or darker. It disappears on its own once the image is not coming-soon.png. */
html[data-theme="dark"]{--soon-veil:rgba(36,39,44,.92)}
html[data-theme="dark"] .frame img[src*="coming-soon"]{filter:none;mix-blend-mode:normal}
html[data-theme="dark"] .frame:has(> img[src*="coming-soon"]),
html[data-theme="dark"] .cframe.soon{position:relative}
html[data-theme="dark"] .frame:has(> img[src*="coming-soon"])::after,
html[data-theme="dark"] .cframe.soon::after{content:"";position:absolute;inset:0;background:var(--soon-veil);border-radius:inherit;pointer-events:none;z-index:1}

/* ---------- footer icons ---------- */
html[data-theme="dark"] .contact a.ic{background:var(--brand);color:#fff;box-shadow:0 0 0 2px #fff}

/* ---------- portfolio ---------- */
html[data-theme="dark"] .panel{background:var(--panel)}

/* chart */
html[data-theme="dark"] .grid{stroke:rgba(255,255,255,.22)}
html[data-theme="dark"] .area{fill:rgba(255,255,255,.14)}
html[data-theme="dark"] .area-f{fill:rgba(255,255,255,.07)}
html[data-theme="dark"] .mk,
html[data-theme="dark"] .mk-f,
html[data-theme="dark"] .hvdot{fill:var(--brand);stroke:#fff}
html[data-theme="dark"] .chart-empty{border-color:rgba(255,255,255,.55)}
html[data-theme="dark"] .chart-tip{background:var(--bg);color:#fff;box-shadow:0 0 0 2px #fff}

/* buttons / controls sitting on a panel: navy well + white outline;
   hover / selected flips to white with brand-blue text */
html[data-theme="dark"] .range button,
html[data-theme="dark"] .rm,
html[data-theme="dark"] .hist,
html[data-theme="dark"] .back,
html[data-theme="dark"] .input,
html[data-theme="dark"] .list{background:var(--well)}
html[data-theme="dark"] .range button:hover,
html[data-theme="dark"] .range button:focus-visible,
html[data-theme="dark"] .range button[aria-pressed=true],
html[data-theme="dark"] .rm:hover,
html[data-theme="dark"] .rm:focus-visible,
html[data-theme="dark"] .hist:hover,
html[data-theme="dark"] .hist:focus-visible,
html[data-theme="dark"] .hist[aria-pressed=true],
html[data-theme="dark"] .back:hover,
html[data-theme="dark"] .back:focus-visible,
html[data-theme="dark"] .opt[aria-selected=true],
html[data-theme="dark"] .seg input:checked+span{background:#fff;color:var(--brand)}

html[data-theme="dark"] .input::placeholder{color:rgba(255,255,255,.62)}
html[data-theme="dark"] .seg span{background:var(--well)}

html[data-theme="dark"] .add{background:var(--brand);color:#fff;border-color:#fff}
html[data-theme="dark"] .add:hover,
html[data-theme="dark"] .add:focus-visible{background:#fff;color:var(--brand)}

/* table */
html[data-theme="dark"] td{border-bottom-color:rgba(255,255,255,.28)}
html[data-theme="dark"] tr.viewing td{background:rgba(255,255,255,.14)}
html[data-theme="dark"] .gain,
html[data-theme="dark"] .loss{font-weight:700}

/* ---------- grading ---------- */
html[data-theme="dark"] .gsec{background:rgba(31,79,203,.3)}
html[data-theme="dark"] .tier{background:var(--well)}
html[data-theme="dark"] .tier.priority{background:var(--tint);border-color:#fff}
html[data-theme="dark"] .insure{background:var(--tint)}
html[data-theme="dark"] .gallery,
html[data-theme="dark"] .dimgs img{border-color:#fff}
html[data-theme="dark"] .gdot{border-color:#fff}
html[data-theme="dark"] dialog{background:rgba(11,29,99,.94);border-color:#fff}
html[data-theme="dark"] dialog::backdrop{background:rgba(0,0,0,.45)}
html[data-theme="dark"] .gx{border-color:#fff}
html[data-theme="dark"] .checkout{border-color:#fff}
html[data-theme="dark"] .checkout:hover,
html[data-theme="dark"] .checkout:focus-visible{background:#fff;color:var(--brand)}
html[data-theme="dark"] .ghead h1{background:var(--tint);color:#fff;border-color:#fff}
html[data-theme="dark"] .pbox{background:rgba(31,79,203,.3)}
html[data-theme="dark"] .pbox:hover,
html[data-theme="dark"] .pbox:focus-visible{background:var(--tint)}
html[data-theme="dark"] .dtier{background:var(--well);border-color:#fff}
html[data-theme="dark"] .dtier[aria-pressed="true"]{background:var(--tint);color:#fff;border-color:#fff}
html[data-theme="dark"] .qb,
html[data-theme="dark"] .dback{border-color:#fff}
html[data-theme="dark"] .dback:hover,
html[data-theme="dark"] .dback:focus-visible{background:#fff;color:var(--brand)}
html[data-theme="dark"] .checkout{background:var(--tint)}
html[data-theme="dark"] .gnav{background:rgba(11,29,99,.85);color:#fff;border-color:#fff}
/* ---------- shop ---------- */
html[data-theme="dark"] .shead h1{background:var(--tint);color:#fff;border-color:#fff}
html[data-theme="dark"] .disc{background:var(--tint)}
html[data-theme="dark"] .toolbar,
html[data-theme="dark"] .card{background:rgba(31,79,203,.3)}
html[data-theme="dark"] .in{background:var(--well);color:#fff;border-color:#fff}
html[data-theme="dark"] .in::placeholder{color:#fff}
html[data-theme="dark"] .btn,
html[data-theme="dark"] .add{background:var(--tint);border-color:#fff}
html[data-theme="dark"] .btn:hover,html[data-theme="dark"] .btn:focus-visible,
html[data-theme="dark"] .add:hover:not(:disabled),html[data-theme="dark"] .add:focus-visible{background:#fff;color:var(--brand)}
html[data-theme="dark"] .cartbtn .n{background:#fff;color:var(--brand)}
html[data-theme="dark"] .opt[aria-pressed="true"],
html[data-theme="dark"] .pg[aria-current="page"]{background:var(--tint);box-shadow:inset 0 0 0 2px #fff}
html[data-theme="dark"] .opt,
html[data-theme="dark"] .pg,
html[data-theme="dark"] .qb,
html[data-theme="dark"] .cimg,
html[data-theme="dark"] .cline img{border-color:#fff}
html[data-theme="dark"] .cimg{opacity:.92}
html[data-theme="dark"] .gx{background:rgba(11,29,99,.9);color:#fff;border-color:#fff}
html[data-theme="dark"] .empty{background:transparent}

/* contact page: panel keeps its translucent blue in dark mode too */
html[data-theme="dark"] .panel:has(#contact-form){background:rgba(42,99,246,.5)}

/* ---------- shared header + footer (one definition for every page that loads theme.css) ---------- */
header{position:relative;display:flex;align-items:center;justify-content:center;padding:24px clamp(60px,8vw,120px);padding-top:calc(24px + env(safe-area-inset-top,0px));background:#fff}
header::after{content:"";position:absolute;left:50%;bottom:0;width:75%;height:2px;transform:translateX(-50%);background:var(--blue)}
.logo-link{position:absolute;right:clamp(14px,4vw,56px);top:50%;transform:translateY(-50%)}
header nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px clamp(14px,2.4vw,40px);font-size:min(var(--fs),clamp(14px,1.75vw,25px))}
/* account links: "My account" only while signed in (assets/account.js adds html.bc-in); "Log in" is a pill (it reads "Log out" while signed in, see assets/account.js) */
html:not(.bc-in) header nav a[href="account.html"]{display:none}
header nav .nav-login{padding:.3em .95em;border:2px solid var(--blue);border-radius:99px;font-size:.7em;letter-spacing:.12em;line-height:1.2;white-space:nowrap;transition:background .2s,color .2s}
header nav .nav-login:hover,header nav .nav-login:focus-visible{text-decoration:none;background:var(--blue);color:#fff}
html[data-theme="dark"] header nav .nav-login:hover,html[data-theme="dark"] header nav .nav-login:focus-visible{color:var(--bg)}
header a:hover{text-decoration:underline;text-underline-offset:6px}
.logo{display:block;height:clamp(32px,4vw,54px);width:auto}
footer{padding:clamp(32px,4vw,64px) 24px calc(clamp(40px,5vw,64px) + env(safe-area-inset-bottom,0px));background:#fff}
footer hr{border:0;border-top:2px solid var(--blue);width:75%;margin:0 auto clamp(36px,5vw,64px)}
.contact{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;font-size:var(--fs)}
.contact a:not(.ic):not(.fbtn){margin-right:clamp(8px,3vw,40px)}
.contact a.fbtn{display:inline-flex;align-items:center;gap:.5em;margin-right:clamp(8px,2vw,28px);padding:.45em 1.1em;font-size:.72em;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:linear-gradient(120deg,#5a8cff,#2a63f6 45%,#1238a8);border-radius:99px;white-space:nowrap;transition:transform .15s,box-shadow .15s}
.contact a.fbtn svg{width:1.15em;height:1.15em}
.contact a.fbtn:hover,.contact a.fbtn:focus-visible{text-decoration:none;transform:translateY(-2px);box-shadow:0 10px 20px -10px rgba(18,56,168,.8)}
html[data-theme="dark"] .contact a.fbtn{box-shadow:0 0 0 2px #fff}
.contact a:not(.ic):not(.fbtn):hover{text-decoration:underline;text-underline-offset:6px}
.contact a.ic{width:calc(var(--fs)*2);height:calc(var(--fs)*2);display:grid;place-items:center;background:var(--blue);color:#fff;border-radius:6px;transition:transform .15s;margin-inline:clamp(3px,.7vw,9px)}
.contact a.ic:hover{transform:translateY(-3px)}
.contact svg{width:55%;height:55%}

/* shop: item popup */
html[data-theme="dark"] #prod-dlg{background:#0b1d63;border-color:#fff}
html[data-theme="dark"] .pimg,
html[data-theme="dark"] .thumb{border-color:#fff}
html[data-theme="dark"] .pdl,
html[data-theme="dark"] .pdl>div{border-color:var(--line)}

/* ---------- app store badges (footer + home banner) ---------- */
.stores{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(20px,2.6vw,32px)}
.store{display:inline-flex;align-items:center;gap:.7em;min-width:10.5em;padding:.5em 1.1em .5em .9em;color:#fff;background:#000;border:2px solid #fff;border-radius:.7em;box-shadow:0 0 0 2px #08090c;text-transform:none;font-size:clamp(15px,1.5vw,20px);line-height:1.05;transition:transform .15s}
.store:hover,.store:focus-visible{transform:translateY(-3px);text-decoration:none}
.store svg{flex:none;width:1.9em;height:1.9em}
.store span{display:flex;flex-direction:column;font-size:1.15em;letter-spacing:0;white-space:nowrap}
.store small{font-size:.5em;letter-spacing:.02em;opacity:.85}
html:not([data-theme="dark"]) footer .store{border-color:#000;box-shadow:none}

/* ---------- counters for sections outside the Beyblade totals (launchers, grips, layers, stadiums, new-in-box) ----------
   Same place and shape as the other counters, but grey and dashed, and labelled, so they don't read as part of the total. */
.tcount.extra{color:#6b7280;border-color:#9ca3af;border-style:dashed;background:#fff}
.tcount.extra::after{content:" \00b7  not in total";font-size:.78em;letter-spacing:.1em}
.count[data-own] b{color:#6b7280}
.count[data-own] span{color:#6b7280}
html[data-theme="dark"] .tcount.extra{color:#c9ced6;border-color:#9ca3af;background:var(--bg,#1e2023)}
html[data-theme="dark"] .count[data-own] b,html[data-theme="dark"] .count[data-own] span{color:#b9bec7}

/* ---------- variant subtitle: a second title line on cards whose name is shared with another card ----------
   <span class="cvar"> under the name (card also carries data-variant="..."). Only variant cards have it. */
.ctitle:has(.cvar){flex-direction:column;gap:4px}
.cvar{display:block;font-size:clamp(9px,.78vw,13px);letter-spacing:.14em;line-height:1.15;text-align:center;opacity:.72}
html[data-theme="dark"] .cvar{color:#fff}
/* title boxes in a row share the tallest one's height, so photos stay lined up when a card has a subtitle */
article.card > .ctitle{flex:1 0 auto}

/* ---------- simulated (AI placeholder) cards: shown, but not yet collected ----------
   Cards with data-status="simulated" use an AI-generated stand-in image until the real Beyblade is photographed.
   Grey and dashed, like the "not in total" counters above, so they read as not collected. The image is muted
   until hovered or focused. Counters already ignore them (only data-status="photo" counts). */
article.card[data-status="simulated"] > .ctitle{border:1px dashed #9ca3af;background:#f6f7f9}
article.card[data-status="simulated"] .cname{color:#6b7280}
article.card[data-status="simulated"] .cname::after{content:"Not yet collected";display:block;margin-top:3px;font-size:.72em;letter-spacing:.14em;color:#9ca3af}
html:not([data-theme="dark"]) article.card[data-status="simulated"] .cframe,
article.card[data-status="simulated"] .cframe{border:1px dashed #9ca3af}
article.card[data-status="simulated"] .cframe img{filter:saturate(.45) opacity(.85);transition:filter .3s}
article.card[data-status="simulated"]:hover .cframe img,
article.card[data-status="simulated"]:focus-within .cframe img{filter:none}
html[data-theme="dark"] article.card[data-status="simulated"] > .ctitle{border-color:#6b7280;background:#2a2d33}
html[data-theme="dark"] article.card[data-status="simulated"] .cname{color:#c9ced6}
html[data-theme="dark"] article.card[data-status="simulated"] .cname::after{color:#9ca3af}
html[data-theme="dark"] article.card[data-status="simulated"] .cframe{border-color:#6b7280}