/* Beycentral theme base
   - Dark-mode colour tokens (light mode is untouched: it is the pages' own CSS)
   - The light/dark switch component
   Dark idea: the white surfaces of light mode become brand blue, every blue
   stroke/text becomes white, and blue elements get a white outline so they
   stay crisp against the near-black navy page. */

:root{--brand:#2a63f6}

/* One typeface site-wide: Arial. Form controls, dialogs and SVG text do not inherit the page font by default, so set it explicitly. */
html,body,button,input,select,textarea,optgroup,option,dialog,svg text,svg textPath{font-family:Arial,Helvetica,sans-serif}

html[data-theme="dark"]{
  color-scheme:dark;
  --brand:#2a63f6;           /* fills: buttons, chips, markers, icons */
  --blue:#fff;               /* strokes + text (what blue was in light mode) */
  --bg:#1e2023;              /* page, header, footer */
  --panel:#1f4fcb;           /* cards / panels (brand blue, a touch deeper for text contrast) */
  --well:#0b1d63;            /* inputs, inactive buttons sitting on a panel */
  --ink:#fff;
  --line:rgba(255,255,255,.28);
  --tint:rgba(255,255,255,.14);
  --gain:#a8ffc8;
  --loss:#ffc7bf;
  background:var(--bg);
}

/* ---------- switch ---------- */
.theme-toggle{
  --h:clamp(26px,2.6vw,34px);
  --k:calc(var(--h) - 10px);
  position:absolute;left:clamp(14px,4vw,56px);top:50%;
  transform:translateY(-50%);
  width:calc(var(--h)*1.9);height:var(--h);
  padding:0;margin:0;border:0;border-radius:99px;background:none;
  color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .15s;
}
.theme-toggle:hover{transform:translateY(-50%) scale(1.08)}
.theme-toggle:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.tt-track{
  position:absolute;inset:0;border:2px solid var(--blue);border-radius:inherit;
  background:#fff;transition:background-color .35s,border-color .35s;
}
.tt-hint{
  position:absolute;top:50%;width:calc(var(--k)*.6);height:calc(var(--k)*.6);
  transform:translate(-50%,-50%);color:var(--blue);opacity:.75;
}
.tt-hint.sun{left:calc(3px + var(--k)/2)}
.tt-hint.moon{left:calc(100% - 3px - var(--k)/2)}
.tt-knob{
  position:absolute;top:50%;left:5px;width:var(--k);height:var(--k);
  margin-top:calc(var(--k)/-2);border-radius:50%;
  background:var(--brand);color:#fff;display:grid;place-items:center;
  transition:left .45s cubic-bezier(.34,1.4,.5,1),box-shadow .35s;
}
/* "Try me!" prompt under the switch (part of the button, so it flips the theme too) */
.theme-toggle::after{
  content:"\2196\FE0E  Try me!";position:absolute;top:calc(100% + 2px);left:62%;
  transform:rotate(18deg);transform-origin:0 0;
  font-size:16px;font-weight:700;line-height:1;letter-spacing:.02em;text-transform:none;white-space:pre;
  color:var(--brand);text-shadow:0 0 6px #fff,0 0 2px #fff;pointer-events:none;
}
@media(max-width:700px){.theme-toggle::after{font-size:13px}}
html[data-theme="dark"] .theme-toggle::after{color:#7ee3ff;text-shadow:0 0 8px rgba(8,12,40,.9)}

/* the icon inside the knob spins like a launched Beyblade */
.tt-spin{position:relative;width:68%;height:68%;transition:transform .7s cubic-bezier(.25,1.1,.4,1)}
.tt-spin svg{position:absolute;inset:0;width:100%;height:100%;transition:opacity .25s}
.tt-spin .m{opacity:0}

html[data-theme="dark"] .tt-track{background:var(--well);border-color:#fff}
html[data-theme="dark"] .tt-hint{color:#fff}
html[data-theme="dark"] .tt-knob{left:calc(100% - var(--k) - 5px);box-shadow:0 0 0 2px #fff}
html[data-theme="dark"] .tt-spin{transform:rotate(360deg)}
html[data-theme="dark"] .tt-spin .s{opacity:0}
html[data-theme="dark"] .tt-spin .m{opacity:1}

@media(max-width:700px){
  .theme-toggle{--h:26px;left:10px}
}

/* fade colours (not layout) for a moment while the theme flips */
/* Only cheap colour properties fade, and never inside live animations (the home page stadium redraws every
   frame, so fading its parts would restart thousands of transitions) or SVG drawings. Shadows and opacity
   switch instantly: animating those on every element at once made the switch stutter. */
html.theme-anim :not(.theme-toggle):not(.theme-toggle *):not(svg):not(svg *):not(.portal *),
html.theme-anim :not(.theme-toggle):not(.theme-toggle *):not(svg):not(svg *):not(.portal *)::before,
html.theme-anim :not(.theme-toggle):not(.theme-toggle *):not(svg):not(svg *):not(.portal *)::after{
  transition:background-color .35s ease,color .35s ease,border-color .35s ease!important;
}
@media(prefers-reduced-motion:reduce){
  .theme-toggle,.tt-track,.tt-knob,.tt-spin,.tt-spin svg{transition:none!important}
}

/* ---------- light mode: blue borders on gallery items ----------
   collection header tiles = 2px, individual beyblade photo frames = 1px.
   (dark mode keeps its own white strokes via theme.css / page rules) */
html:not([data-theme="dark"]) .frame,
html:not([data-theme="dark"]) .pframe{border:2px solid var(--brand)}
html:not([data-theme="dark"]) .cframe{border:1px solid var(--brand)}