/* ==========================================================================
   base.css — reset, element defaults, and Japanese text handling
   --------------------------------------------------------------------------
   The JP text rules in here are the difference between a site that merely
   contains Japanese and one that handles it. They are commented heavily
   because each exists to prevent a specific, visible failure.
   ========================================================================== */

/* --------------------------------------------------------------------------
   RESET — minimal. A full normalize.css would be ~350 lines of defending
   against browsers we do not support.
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Reserve the scrollbar track ALWAYS. Without this, opening any overlay
     locks body scroll, the scrollbar disappears, and the entire page jumps
     sideways. That is the single most common version of the layout-shift
     bug this design explicitly forbids. */
  scrollbar-gutter: stable;

  /* iOS inflates Japanese text in landscape without this. */
  -webkit-text-size-adjust: 100%;

  /* 禁則処理: proper Japanese line-breaking, so 、。」』 never begin a line
     and 「『（ never end one. Browsers default to a looser mode. */
  line-break: strict;

  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--tcg-color-bg);
  color: var(--tcg-color-text);
  font-family: var(--tcg-font-sans);
  font-size: var(--tcg-fs-base);

  /* Weight 500, not 400. Pairs with "Yu Gothic Medium" being named ahead of
     "Yu Gothic" in the stack: Yu Gothic Regular is spindly and washed out on
     Windows, which is most of this audience. */
  font-weight: 500;

  line-height: var(--tcg-lh-base);
  letter-spacing: var(--tcg-ls-base);

  /* anywhere + normal, NOT word-break: break-all.
     break-all would shred Latin product names mid-word — "Pokémon Cen
     ter Online". This combination lets Japanese wrap freely (it has no
     spaces) while Latin only breaks at real opportunities. */
  overflow-wrap: anywhere;
  word-break: normal;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   HEADINGS
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  line-height: var(--tcg-lh-tight);
  font-weight: 700;

  /* palt = proportional alternates. Tightens the loose metal-type spacing
     around Japanese punctuation and brackets, which looks slack at heading
     sizes. Deliberately NOT applied to body text: palt in long-form ruins
     the vertical rhythm that makes Japanese scannable. */
  font-feature-settings: "palt" 1;

  /* Progressive enhancement: trims the leading half-width of 「 and （ at
     the start of a heading. No-op where unsupported. */
  text-spacing-trim: trim-start;
}

h1 { font-size: var(--tcg-fs-2xl); letter-spacing: var(--tcg-ls-tight); }
h2 { font-size: var(--tcg-fs-xl); }
h3 { font-size: var(--tcg-fs-lg); }
h4 { font-size: var(--tcg-fs-base); }

@media (min-width: 900px) {
  h1 { font-size: var(--tcg-fs-3xl); }
}

p, ul, ol, dl, dd, figure, blockquote, pre, table { margin: 0; }

/* --------------------------------------------------------------------------
   LINKS
   -------------------------------------------------------------------------- */

a {
  color: var(--tcg-color-brand);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--tcg-color-brand-strong); }

/* One visible focus style everywhere, in a colour distinct from brand so
   "focused" is never confused with "is a link". */
:focus-visible {
  outline: 3px solid var(--tcg-color-focus);
  outline-offset: 2px;
  border-radius: var(--tcg-radius-sm);
}

/* --------------------------------------------------------------------------
   FORM CONTROLS
   -------------------------------------------------------------------------- */

button, input, select, textarea {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* 16px MINIMUM on anything focusable, or iOS Safari zooms the whole viewport
   when the field receives focus and the user has to pinch back out. This is
   a hard floor, not a preference. */
input, select, textarea { font-size: max(1rem, var(--tcg-fs-base)); }

button { cursor: pointer; background: none; border: none; padding: 0; }

/* --------------------------------------------------------------------------
   MEDIA & TABLES
   -------------------------------------------------------------------------- */

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }

table { border-collapse: collapse; width: 100%; }

code, pre, kbd, samp {
  font-family: var(--tcg-font-mono);
  font-size: 0.9em;
}

hr {
  border: 0;
  border-top: 1px solid var(--tcg-color-border);
  margin: var(--tcg-space-lg) 0;
}

/* --------------------------------------------------------------------------
   UTILITIES
   -------------------------------------------------------------------------- */

/* Tabular figures on every date, time and countdown. Deadlines are this
   product; digits must not jitter when a relative label is recomputed.
   A mono stack would also solve it but reads clunky beside 月 / 日 / 時. */
.tcg-num { font-variant-numeric: tabular-nums; }

/* Visually hidden but available to assistive tech. */
.tcg-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link: off-screen until focused, then pinned top-left. */
.tcg-skiplink {
  position: absolute;
  left: var(--tcg-space-xs);
  top: -100vh;
  z-index: calc(var(--tcg-z-overlay) + 1);
  padding: var(--tcg-space-xs) var(--tcg-space-md);
  background: var(--tcg-color-brand);
  color: var(--tcg-color-brand-contrast);
  border-radius: var(--tcg-radius-sm);
  font-size: var(--tcg-fs-sm);
  font-weight: 700;
  text-decoration: none;
}
.tcg-skiplink:focus { top: var(--tcg-space-xs); }

/* Any wide thing — a table, a code block, a diagram — scrolls inside its own
   box. The page body must never scroll horizontally at any width. */
.tcg-scrollx {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Progressive enhancement. An inline script in <head> strips .no-js from
   <html>, so controls that would be dead without JS never render at all
   rather than rendering and doing nothing. */
.no-js [data-tcg-requires-js] { display: none !important; }

[hidden] { display: none !important; }