@layer base {

/* ╔═══════════════════════════════════════════════════════════════════╗
     BASE — body / header / footer / toast / a11y / utilities / banner / hint — 集約 (Tier 3 Step 5)
     styles.css から切出。 cascade: tokens → animations → base → styles → modals → responsive → dark → light
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ── Global reset + typography (元 styles.css L255-267、 Step 1 残置分) ── */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg-0);
  color: var(--paper);
  font-family: var(--f-body);
  font-size: var(--text-md);
  line-height: 1.55;
  font-feature-settings: 'palt';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ╔═══════════════════════════════════════════════════════════════════╗
     SECTION 02 — BODY & BRAND HEADER
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* Body texture: ink wash + paper grain + 公式 home_main 背景 */
body {
  background:
    radial-gradient(ellipse 60% 35% at 50% 0%, var(--vermilion-soft-light), transparent 65%),
    radial-gradient(ellipse 50% 25% at 0% 0%, var(--gold-faint), transparent 70%),
    radial-gradient(ellipse 50% 25% at 100% 0%, var(--gold-faint), transparent 70%),
    radial-gradient(ellipse 60% 70% at 100% 100%, var(--gold-trace), transparent 55%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n1'><feTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.85  0 0 0 0 0.65  0 0 0 0.08 0'/></filter><filter id='n2'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.9  0 0 0 0 0.8  0 0 0 0 0.6  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n1)'/><rect width='100%25' height='100%25' filter='url(%23n2)'/></svg>"),
    linear-gradient(var(--overlay-mid-2), var(--overlay-mid-2)),
    url("https://www.wherewindsmeetgame.com/m/zt/20251121182818/img/bg-b74e3a33.png") center top / cover no-repeat fixed,
    var(--bg-0);
  min-height: 100vh;
}

.container { max-width: 1280px; margin: 0 auto; padding: var(--space-4) var(--space-5) var(--space-8); }

/* ─────────────────────────────────────────────────────────────────
   HEADER
   ───────────────────────────────────────────────────────────────── */

.sticky-header {
  position: sticky; top: 0; z-index: var(--z-overlay);
  background: transparent;
  padding: 0;
  margin-bottom: var(--space-4);
}

header.topbar {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background:
    radial-gradient(ellipse 60% 100% at 50% 50%, var(--vermilion-soft), rgba(15,12,14,0.78) 80%),
    url("https://www.wherewindsmeetgame.com/m/zt/20251121182818/img/wq-bg-99758f80.png") center / cover no-repeat;
  border: 1px solid var(--ink-2);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
header.topbar::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--vermilion-bright), var(--vermilion-deep));
}
header.topbar::after {
  content: ''; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 280px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink-3), transparent);
  pointer-events: none; opacity: 0.6;
}

.title-block { flex: 1; min-width: 0; }
.title-block h1 {
  font-family: var(--f-display);
  font-weight: var(--fw-black); font-size: var(--text-xl); letter-spacing: 0.12em;
  color: var(--paper); line-height: 1.1;
}
.title-block h1 .accent { color: var(--c-h1-accent-fg); }
.title-block p {
  font-size: var(--text-sm); color: var(--c-h1-sub-fg);
  letter-spacing: 0.08em; margin-top: var(--space-1);
  text-transform: uppercase; font-family: var(--f-mono); font-weight: var(--fw-medium);
}
/* WWM Brand (D案: 縦書き漢字 + 横英字 + 朱印章) */
.wwm-brand { display: flex; align-items: center; gap: var(--space-4); }
.wwm-brand-vert {
  font-family: 'Noto Serif JP', var(--f-display), serif;
  font-weight: var(--fw-black);
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: var(--text-18); letter-spacing: 0.18em;
  color: var(--c-fg-accent);
  padding: var(--space-half) var(--space-1);
  border-left: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
  text-shadow: 0 0 10px var(--gold-bright-mid);
  line-height: 1;
}
.wwm-brand-right { display: flex; flex-direction: column; gap: var(--space-half); }
.wwm-brand-en {
  font-family: var(--f-latin), serif;
  font-weight: var(--fw-extra); font-size: var(--text-20); letter-spacing: 0.22em;
  color: var(--c-brand-en-fg);
  opacity: var(--c-brand-en-opacity);
}
.wwm-brand-sub {
  font-family: var(--f-mono);
  font-size: var(--text-sm); color: var(--c-brand-sub-fg);
  letter-spacing: 0.3em; opacity: 0.85;
  text-shadow: var(--c-brand-sub-text-shadow);
}
.wwm-brand-seal {
  position: relative;
  width: 48px; height: 48px;
  background: var(--vermilion);
  border: 3px solid var(--vermilion);
  border-radius: 8%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Noto Serif JP', serif; font-weight: var(--fw-black);
  font-size: var(--text-24); color: #fff;
  line-height: 1;
  box-shadow: 0 0 16px var(--vermilion-strong);
  transform: rotate(-8deg);
  flex-shrink: 0;
  opacity: var(--c-brand-seal-opacity);
}
.wwm-brand-seal::after {
  content: '';
  position: absolute; inset: 3px;
  border: 1.5px solid rgba(255,255,255,0.55);
  border-radius: 5%;
}
/* light: hero::before「斬」watermark 視認性up (vermilion-trace 0.05 → 濃化) */

/* Top right controls */
.top-controls { display: flex; align-items: center; gap: var(--space-1-5); flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

/* 2行レイアウト (lang 2x2 + controls 1行目/2行目)、各btn幅統一 */
.top-controls-2row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  align-items: stretch;
}
.topbar-row {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  justify-content: flex-end;
  height: 32px;
}
/* ko の한글文字行高で 行が伸びるのを防止 */
.top-controls-2row .topbar-row .icon-btn,
.top-controls-2row .topbar-row .lang-btn {
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  line-height: 1;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
  vertical-align: middle;
  overflow: hidden;
}
.top-controls-2row .topbar-row { height: 32px; min-height: 32px; max-height: 32px; flex: 0 0 32px; }
.top-controls-2row { height: 72px; min-height: 72px; max-height: 72px; flex: 0 0 auto; }
/* 同幅化: lang-switcher 両行とも同width、各テキストiconBtn 同min-width */
.top-controls-2row .lang-switcher-row { width: 96px; }
.top-controls-2row .lang-switcher-row .lang-btn { flex: 1; padding: var(--space-1) 0; text-align: center; }
.top-controls-2row .topbar-row .icon-btn:not(.icon-btn-x):not(#themeToggle):not(.note-btn) {
  min-width: 66px;
  width: 66px;
  padding: 0 var(--space-2);
  justify-content: center;
  text-align: center;
}
/* zh = 2字短訳 余裕、 ko = 4字長め なので 個別調整 */
html[lang="zh"] .top-controls-2row .icon-btn,
html[lang="zh-CN"] .top-controls-2row .icon-btn {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
}
html[lang="ko"] .top-controls-2row .icon-btn {
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}
/* NOTE = X+☀ width相当 - 3px */
.top-controls-2row .topbar-row .icon-btn.note-btn {
  width: 66px;
  min-width: 0;
  padding: 0 var(--space-2);
  justify-content: center;
  text-align: center;
}
.icon-btn.reset-btn,
.icon-btn.note-btn {
  width: auto; padding: 0 var(--space-3);
  font-family: var(--f-mono); font-weight: var(--fw-bold);
  font-size: var(--text-sm); letter-spacing: 0.12em;
}
.icon-btn.reset-btn { color: var(--paper-2); border-color: var(--ink-3); }
.icon-btn.reset-btn:hover { color: var(--vermilion-bright); border-color: var(--vermilion); background: var(--vermilion-faint); }
.icon-btn.note-btn { color: var(--gold); border-color: var(--gold-deep); }
.icon-btn.note-btn:hover { color: var(--gold-bright); border-color: var(--gold); background: var(--gold-faint); }

.lang-switcher { display: flex; gap: 0; padding: var(--space-half); background: var(--surf-shade-2); border: 1px solid var(--ink-2); border-radius: 2px; }
.lang-btn {
  padding: var(--space-1) var(--space-2-5); border: none; background: transparent;
  color: var(--paper-mute); font-family: var(--f-mono); font-weight: var(--fw-semibold);
  font-size: var(--text-sm); letter-spacing: 0.08em; cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.lang-btn:hover { color: var(--paper-2); }
/* critique P1 (2026-06-07): 旧 gold-bright on vermilion-mid ≈ 3.4-3.7:1 fail →
   朱影地金文字 (SS badge 語彙、 6.2:1)。 token = theme constant で light 側 override 不要 */
.lang-btn.active {
  color: var(--c-lang-active-fg);
  background: var(--c-lang-active-bg);
  box-shadow: inset 0 -2px 0 var(--c-lang-active-fg);
}

/* theme toggle = opt-sort-group 流用の [☀ライト][☾ダーク] 2アイコンセグメント (2026-06-08 兄貴指示、 X 抜けズレ解消)。
   非active = opt-sort-btn base (transparent)、 active = 現 theme (data-theme 連動)、 setTheme('light'/'dark') で明示切替 */
.wwm-theme-toggle { align-self: center; height: 30px; width: 66px; box-sizing: border-box; }
.wwm-theme-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; opacity: 0.4; transition: opacity 0.15s, background 0.15s, color 0.15s; }
.wwm-theme-btn:hover { opacity: 0.75; }
.wwm-theme-btn svg { display: block; }
/* 選択中 = 金背景 + くっきり (opacity 1)、 非選択は沈めて差を明確化 */
html[data-theme="light"] .wwm-theme-btn[data-theme-set="light"],
html[data-theme="dark"]  .wwm-theme-btn[data-theme-set="dark"] {
  opacity: 1;
  background: var(--c-opt-sort-btn-active-bg);
  color: var(--c-opt-sort-btn-active-fg);
}

.icon-btn {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--surf-shade);
  border: 1px solid var(--ink-2);
  color: var(--paper-dim); border-radius: 2px; cursor: pointer;
  font-size: var(--text-md);
  transition: all 0.15s;
}
.icon-btn:hover { color: var(--gold-bright); border-color: var(--gold-deep); background: var(--gold-tint); }
a.icon-btn { text-decoration: none; }
.icon-btn-x svg { display: block; }
.icon-btn.export-btn,
.icon-btn.import-btn,
.icon-btn.share-btn {
  width: auto; padding: 0 var(--space-3);
  font-family: var(--f-mono); font-weight: var(--fw-bold); font-size: var(--text-sm); letter-spacing: 0.12em;
}
.icon-btn.export-btn {
  color: var(--vermilion-bright); border-color: var(--c-icon-btn-export-btn-border);
}
.icon-btn.import-btn {
  color: var(--gold-bright); border-color: var(--gold-deep);
}
.icon-btn.import-btn:hover {
  background: var(--gold); color: var(--bg-0); border-color: var(--gold);
  box-shadow: 0 0 16px var(--gold-glow);
}
.icon-btn.export-btn:hover {
  background: var(--vermilion); color: var(--c-on-vermilion); border-color: var(--vermilion); /* audit P2: bg-0 3.98 → white 5.08 */
  box-shadow: 0 0 16px var(--vermilion-glow);
}

/* ─────────────────────────────────────────────────────────────────
   PRESET RAIL
   ───────────────────────────────────────────────────────────────── */

.preset-bar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3-5); margin-top: var(--space-2);
  background: var(--c-preset-bar-bg);
  border: 1px solid var(--ink-2);
  border-radius: 2px;
}
/* ╔═══════════════════════════════════════════════════════════════════╗
     SECTION 06 — A11Y / REDUCED MOTION
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ── prefers-reduced-motion: 動きの軽減 ─────────────────── */

/* ── :focus-visible — キーボード操作可視化 ─────────────── */
.lang-btn:focus-visible,
.preset-btn:focus-visible,
.icon-btn:focus-visible,
.preset-name-input:focus-visible,
.hero:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
  box-shadow: var(--c-focus-ring-shadow);
  outline-color: var(--c-lang-btn-focus-outline);
}
.hero:focus-visible { outline-offset: -2px; outline-color: var(--c-hero-focus-outline); }


/* ╔═══════════════════════════════════════════════════════════════════╗
     SECTION 07 — FOOTER + TOAST
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ─────────────────────────────────────────────────────────────────
   FOOTER + TOAST
   ───────────────────────────────────────────────────────────────── */

footer {
  text-align: center; padding: var(--space-5) 0 var(--space-1-5);
  font-family: var(--f-mono); font-size: var(--text-xs);
  color: var(--paper-mute); letter-spacing: 0.2em; text-transform: uppercase;
}
footer strong { color: var(--c-footer-strong-fg); }

#toast {
  position: fixed; bottom: 28px; right: 28px;
  background: var(--c-toast-bg); color: var(--paper);
  padding: 11px 18px;
  border: 1px solid var(--gold-deep); border-left: 3px solid var(--gold);
  font-family: var(--f-body); font-size: var(--text-12); font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  box-shadow: 0 8px 32px var(--overlay-heavy), 0 0 24px var(--gold-tint);
  z-index: var(--z-modal); opacity: 0; transform: translateY(8px);
  transition: opacity 0.22s, transform 0.22s;
  pointer-events: none; white-space: nowrap;
  border-radius: 1px;
}
#toast.show { opacity: 1; transform: translateY(0); }
/* audit P2 (2026-06-07): error toast 視覚区別 — 朱枠 (三彩分業: 朱 = 警告)。 寿命 7s は app.js showToast 側 */
#toast.toast-error {
  border-color: var(--vermilion); border-left-color: var(--vermilion-bright);
  box-shadow: 0 8px 32px var(--overlay-heavy), 0 0 24px var(--vermilion-glow);
  white-space: normal; max-width: min(420px, 80vw);
}

#export-card { display: none; position: fixed; top: -9999px; left: -9999px; }


/* ╔═══════════════════════════════════════════════════════════════════╗
     SECTION 09 — COUNT-UP FLASH
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* Count-up flash */

/* ╔═══════════════════════════════════════════════════════════════════╗
     SECTION 30 — IMPORT POSITION HINT
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ── IMPORT位置ヒント (初回言語選択後) ─────────── */
.wwm-import-hint {
  position: fixed;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  z-index: var(--z-tooltip);
  pointer-events: none;
  animation: wwm-hint-in 0.4s cubic-bezier(.22,1,.36,1);
}
.wwm-import-hint-arrow {
  font-size: var(--text-2xl);
  color: var(--vermilion-bright);
  text-shadow: 0 0 12px rgba(232,81,58,.8), 0 0 22px rgba(232,81,58,.5);
  animation: wwm-hint-bounce 1.2s ease-in-out infinite;
  line-height: 1;
}
.wwm-import-hint-label {
  margin-top: var(--space-1-5);
  padding: var(--space-2) var(--space-3-5);
  background: linear-gradient(135deg, rgba(180,40,28,.95), rgba(100,20,14,.92));
  border: 1px solid rgba(240,210,138,.6);
  border-radius: 4px;
  color: var(--gold-bright);
  font-family: var(--f-body);
  font-size: var(--text-12);
  font-weight: var(--fw-bold);
  letter-spacing: .05em;
  white-space: nowrap;
  box-shadow: 0 4px 18px var(--overlay-mid), 0 0 24px var(--vermilion-bright-soft-mid);
}
.wwm-import-hint-out { animation: wwm-hint-out 0.3s forwards; }

/* ╔═══════════════════════════════════════════════════════════════════╗
     SECTION 31 — POLISH PRIMITIVES
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ── Polish primitives (将来再利用用、CSS-only) ─────────── */

/* tooltip — native title= の代替、JS付与 data-tooltip="..." で発火 */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-1) var(--space-2);
  background: var(--overlay-heavy);
  color: var(--paper);
  font-size: var(--text-xs);
  white-space: nowrap;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: var(--z-tooltip);
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
}

/* empty-state — データ無し共通表示 */

/* skeleton — ロード中表示 */

/* error-banner — エラー通知共通 */

/* ╔═══════════════════════════════════════════════════════════════════╗
     SECTION 32 — SCORE UPDATE BANNER
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ── スコア計算更新バナー (baseline 鮮度切れ scoreVer不一致 → 再import促し) ── */
.wwm-score-update-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-2) var(--space-4);
  background: var(--c-score-update-banner-bg);
  border-bottom: 1px solid var(--vermilion-strong);
  color: var(--c-score-update-banner-fg);
  font-size: var(--text-13, 13px);
  position: relative;
  z-index: 50;
  animation: wwm-banner-in .45s cubic-bezier(.22,1,.36,1), wwm-banner-glow 2.2s ease-in-out .45s infinite;
  border-bottom-color: var(--c-score-update-banner-border-bot);
}
.wwm-score-update-icon { flex: 0 0 auto; font-size: var(--text-lg); color: var(--vermilion-strong); animation: wwm-banner-icon-pulse 1.4s ease-in-out infinite; }
.wwm-score-update-arrow {
  flex: 0 0 auto;
  font-size: var(--text-15);
  color: var(--vermilion-bright);
  text-shadow: 0 0 10px var(--vermilion-bright-strong);
  animation: wwm-banner-arrow-bounce 1.1s ease-in-out infinite;
}
.wwm-score-update-msg  { flex: 1 1 auto; line-height: 1.4; }
.wwm-score-update-btn {
  flex: 0 0 auto;
  padding: var(--space-1-5) var(--space-4);
  background: var(--vermilion-strong);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-weight: 700;
  font-size: var(--text-12);
  cursor: pointer;
  white-space: nowrap;
  transition: filter .15s;
}
.wwm-score-update-btn:hover { filter: brightness(1.15); }
.wwm-score-update-btn { animation: wwm-banner-btn-pulse 1.6s ease-in-out infinite; }

/* ╔═══════════════════════════════════════════════════════════════════╗
     SECTION 33 — MIGRATION BANNER
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ── 移転案内バナー (旧URL アクセス時のみ表示、 OBS view非表示) ── */
.wwm-migration-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-2) var(--space-4);
  background: var(--c-migration-banner-bg);
  border-bottom: 1px solid #4a78b8;
  color: var(--c-migration-banner-fg);
  font-size: var(--text-13, 13px);
  position: relative;
  z-index: 50;
  animation: wwm-banner-in .45s cubic-bezier(.22,1,.36,1);
  border-bottom-color: var(--c-migration-banner-border-bot);
}
.wwm-migration-icon { flex: 0 0 auto; font-size: var(--text-lg); }
.wwm-migration-arrow { flex: 0 0 auto; font-size: var(--text-15); color: #7fb0e8; animation: wwm-banner-arrow-bounce 1.1s ease-in-out infinite; }
.wwm-migration-msg { flex: 1 1 auto; line-height: 1.4; }
.wwm-migration-msg strong { color: var(--c-migration-strong-fg); font-weight: 700; }
.wwm-migration-btn {
  flex: 0 0 auto;
  padding: var(--space-1-5) var(--space-4);
  background: var(--c-migration-btn-bg);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-weight: 700;
  font-size: var(--text-12);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: filter .15s;
}
.wwm-migration-btn:hover { filter: brightness(1.15); }
/* OBS view banner hide は styles-obs.css へ移動済 (2026-06-05 @layer Step 1) */

/* ╔═══════════════════════════════════════════════════════════════════╗
     SECTION 39 — A11Y :focus-visible (global)
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ─────────────────────────────────────────────────────────────────
   A11y: global :focus-visible (キーボード操作時のみ outline)
   既存個別 :focus は維持、 未カバーの interactive 要素を補完
   ───────────────────────────────────────────────────────────────── */
:where(button, [role="button"], a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
  outline-color: var(--c-focus-ring);
}



/* ╔═══════════════════════════════════════════════════════════════════╗
     RESPONSIVE — co-location (@layer Step 3, 2026-06-06)
     styles-responsive.css から移設。 cascade 同値性は responsive-dissolve-audit.cjs で機械証明
   ╚═══════════════════════════════════════════════════════════════════╝ */

@media (max-width: 600px) {
  header.topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-overlay);
    background: var(--bg-0);
    border-bottom: 1px solid var(--ink-2);
    flex-wrap: wrap;
    /* padding left/right 成分は削除済 (2026-06-05 @layer Step 1):
       components.css の .sticky-header > .topbar (padding-left/right: space-4) に spec 負けで dead */
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    gap: var(--space-1-5);
    margin-bottom: 0;
  }
  header.topbar::after { display: none; }
  /* ── タイトル ── */
  .title-block h1 { font-size: var(--text-15); letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .title-block p { display: none; }
  /* ─────────────────────────────────────────────────────────────────
     STAT CARDS
     ───────────────────────────────────────────────────────────────── */
  /* ─────────────────────────────────────────────────────────────────
     TOAST
     ───────────────────────────────────────────────────────────────── */
  #toast {
    bottom: 14px;
    right: 10px;
    left: 10px;
    text-align: center;
    white-space: normal;
    font-size: var(--text-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wwm-import-hint, .wwm-import-hint-arrow { animation: none; }
  .wwm-score-update-banner, .wwm-score-update-icon, .wwm-score-update-btn, .wwm-score-update-arrow { animation: none; }
  .wwm-migration-banner, .wwm-migration-icon, .wwm-migration-btn, .wwm-migration-arrow { animation: none; }
}

@media (max-width: 480px) {
  .wwm-mobile-topbar .wwm-brand-seal {
    width: 28px; height: 28px;
    font-size: var(--text-lg);
    border-width: 2px;
    box-shadow: 0 0 10px var(--vermilion-strong);
    flex: 0 0 auto;
  }
  .wwm-mobile-topbar .wwm-brand-seal::after {
    inset: 2px;
    border-width: 1px;
  }
}

} /* end @layer base */