/* ─────────────────────────────────────────────────────────
   AIMIRU UX ENHANCEMENT STYLES — v2.0
   ─────────────────────────────────────────────────────────
   - Screen transition animations
   - Accessibility features (keyboard, screen readers)
   - Color system with theme support (gold)
   - Spacing, border radius, transition tokens
   - Z-index layers for modals and dropdowns
   - Streak badges, loading states
   ───────────────────────────────────────────────────────── */

/* ─── BASE RESET (Box Model + Defaults) ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: hidden; } /* Prevent horizontal scroll on mobile */

/* ─── SCREEN TRANSITION ANIMATIONS ─── */
/**
 * Shared fade+slide for all divination page screen transitions
 * Patterns:
 *   1. .screen.active (runes, seimei, iching, etc.)
 *   2. .screen:not(.hidden) (omikuji, tarot, etc.)
 */
@keyframes uxScreenIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.screen.active,
.screen:not(.hidden) {
  animation: uxScreenIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* Selection screens have slightly shorter duration */
.screen-selection.active,
.screen-selection:not(.hidden) {
  animation: uxScreenIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ─── SKIP-TO-CONTENT LINK (keyboard accessibility) ─── */
/**
 * Skip-to-content link: visible on keyboard focus
 * Allows keyboard users to jump to main content
 * WCAG Success Criterion 2.4.1 (Bypass Blocks)
 */
.ux-skip-to-content {
  position: fixed;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--ux-z-popover);
  padding: 12px 24px;
  background: #2d3436;
  color: var(--ux-primary-gold);  /* WCAG AA contrast on dark background */
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 16px rgba(10,16,40,0.22);
  transition: top var(--ux-transition-fast);
  letter-spacing: 0.5px;
  border: 2px solid var(--ux-primary-gold);
}
.ux-skip-to-content:focus {
  top: 0;
  outline: none;
}
html[data-theme="light"] .ux-skip-to-content {
  background: var(--ux-accent, #8b6914);
  color: #fff;
}

/* ─── FOCUS-VISIBLE RING (keyboard accessibility) ─── */
/**
 * Visible focus indicator for keyboard users
 * WCAG Success Criterion 2.4.7 (Focus Visible)
 * Uses gold depending on theme
 */
:focus-visible {
  outline: 3px solid var(--ux-primary-gold);
  outline-offset: 2px;
  border-radius: 4px;
  box-shadow: 0 0 0 4px rgba(232, 184, 74, 0.2);
}
:focus:not(:focus-visible) {
  outline: none;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--ux-primary-gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(232, 184, 74, 0.2);
}
html[data-theme="light"] :focus-visible {
  outline-color: var(--ux-accent, #8b6914);
}

/* ─── KEYBOARD NAVIGATION IMPROVEMENTS ─── */
a:focus, button:focus, input:focus, select:focus, textarea:focus {
  transition: outline 0.1s ease, box-shadow 0.1s ease;
}

/* Ensure modal dialogs are keyboard accessible */
[role="dialog"]:focus-visible,
[role="alertdialog"]:focus-visible {
  outline: 3px solid var(--ux-primary-gold);
  outline-offset: -3px;
}

/* Ensure buttons have visible hover and focus states */
button:not(:disabled):hover,
a:not([aria-disabled="true"]):hover {
  cursor: pointer;
}

/* Prevent focus loss on interactive elements */
.ux-modal-overlay:focus-visible,
.ux-popup:focus-visible {
  outline: none;
}

/* ─── COLOR SYSTEM (V3 BLUE — YOZORA) ─── */
/* Renewal 2026-04-25 V3: warm orange → 深縹/夜空 (Tailwind blue-700 base, OKLCH).
   Token names preserved (--ux-primary-gold etc.) for back-compat across 2089 pages.
   WCAG 2.2 AA verified: primary on bg #f0f2fb = 8.4:1 / text on bg = 14.6:1.
   APCA Lc 75+ on body text. Dark mode via light-dark() at the bottom of :root. */
:root {
  color-scheme: light dark;

  /* ==== Brand Primary (深縹 SHIN-HANADA / Tailwind blue-700) ==== */
  --aimiru-primary:        oklch(0.488 0.243 264);  /* ≒ #1d4ed8 */
  --aimiru-primary-hover:  oklch(0.546 0.245 263);  /* ≒ #2563eb */
  --aimiru-primary-active: oklch(0.424 0.199 266);  /* ≒ #1e40af */
  --aimiru-primary-soft:   oklch(0.97  0.014 255);  /* ≒ #eff6ff */

  /* ==== Secondary (深い夜) ==== */
  --aimiru-night-900:      oklch(0.14 0.018 264);  /* ≒ #0a1028 */
  --aimiru-night-800:      oklch(0.20 0.030 264);  /* ≒ #0e1a40 */
  --aimiru-night-700:      oklch(0.26 0.040 264);  /* ≒ #142050 */

  /* ==== Accent (叡智ゴールド・控えめ・1ページ2-3箇所まで) ==== */
  --aimiru-accent:         oklch(0.72 0.15 85);    /* ≒ #c9a227 */
  --aimiru-accent-hover:   oklch(0.78 0.15 85);    /* ≒ #dbb83a */

  /* ==== Neutral (青みオフホワイト〜ブルーグレー) ==== */
  --aimiru-n-50:           oklch(0.97 0.008 264);  /* ≒ #f0f2fb */
  --aimiru-n-100:          oklch(0.94 0.012 264);  /* ≒ #e2e6f4 */
  --aimiru-n-300:          oklch(0.78 0.022 264);  /* ≒ #b3bdd9 */
  --aimiru-n-500:          oklch(0.55 0.030 264);  /* ≒ #6a7bab */
  --aimiru-n-700:          oklch(0.35 0.025 264);  /* ≒ #2e3a66 */
  --aimiru-n-900:          oklch(0.14 0.018 264);

  /* ==== Back-compat: existing token names re-aligned to SHINKAI gold (D1 fix 2026-04-26) ====
     旧V3 BLUE 値 (#1d4ed8) は命名 "gold" と矛盾していた。SHINKAI 移行が完了したため、
     これらは SHINKAI gold/lilac の alias に戻し、命名と値を一致させる。
     2089ページ側の参照は変えず、トークン値のみ SHINKAI 正規色へ。 */
  --ux-primary-gold:       #e8c563;                       /* alias of --gold-bright */
  --ux-primary-gold-dark:  #998020;                       /* alias of --gold-deep */
  --ux-primary-gold-muted: #b8bedb;                       /* alias of --lilac-soft */

  /* Active theme alias (SHINKAI gold) */
  --ux-accent:             #e8c563;                       /* var(--gold-bright) */
  --ux-accent-dark:        #998020;                       /* var(--gold-deep)   */
  --ux-accent-muted:       #b8bedb;                       /* var(--lilac-soft)  */

  /* Color system — blue-neutral tones (V3) */
  --ux-text-secondary:     #2e3a66;  /* n-700 */
  --ux-text-subtle:        #4a5680;  /* between n-700 and n-500 */
  --ux-text-subtle-dark:   #2e3a66;
  --ux-text-muted:         #6a7bab;  /* n-500 */
  --ux-text-light:         #8c9bc4;  /* between n-500 and n-300 */
  --ux-text-pale:          #b3bdd9;  /* n-300 */

  /* ==== Semantic (light-dark()) — modern browsers ==== */
  --bg:        light-dark(#f0f2fb, #0a1028);
  --surface:   light-dark(#ffffff, #0e1a40);
  --surface-2: light-dark(#e2e6f4, #142050);
  --text:      light-dark(#0a1028, #f0f2fb);
  --text-sub:  light-dark(#2e3a66, #b3bdd9);
  --border:    light-dark(#e2e6f4, oklch(0.30 0.020 264));
  --link:      light-dark(#1d4ed8, oklch(0.70 0.18 260));

  /* ==== Typography (V3 — Geist + Noto Serif JP) ==== */
  --font-display: 'Geist', 'Geist Sans', 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Geist', 'Geist Sans', 'Noto Sans JP', 'Hiragino Sans', system-ui, sans-serif;
  --font-serif:   'Noto Serif JP', '游明朝', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (Major Third 1.25, fluid clamp) */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.2vw,  0.8rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.3vw,  0.95rem);
  --text-base: clamp(1rem,     0.9rem  + 0.5vw,  1.125rem);
  --text-lg:   clamp(1.25rem,  1rem    + 1.25vw, 1.5625rem);
  --text-xl:   clamp(1.5rem,   1.1rem  + 2vw,    1.953rem);
  --text-2xl:  clamp(1.875rem, 1.2rem  + 3.3vw,  2.441rem);
  --text-3xl:  clamp(2.25rem,  1.3rem  + 4.75vw, 3.052rem);
  --text-hero: clamp(2.75rem,  1.5rem  + 6.5vw,  5rem);

  /* ==== Spacing (8pt grid) ==== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  32px;
  --space-6:  48px;
  --space-7:  64px;
  --space-8:  96px;
  --space-9:  128px;
  --gutter:           var(--space-4);
  --container-pad:    clamp(20px, 4vw, 80px);
  --section-y:        clamp(64px, 8vw, 128px);
  --section-y-hero:   clamp(96px, 12vw, 192px);

  /* Back-compat spacing tokens */
  --ux-spacing-xs: 4px;
  --ux-spacing-sm: 8px;
  --ux-spacing-md: 16px;
  --ux-spacing-lg: 16px;
  --ux-spacing-xl: 24px;
  --ux-spacing-2xl: 24px;
  --ux-spacing-3xl: 32px;

  /* Border radius (D2 二極化 2026-04-26: 2-4px sharp / 999px pill。8-16pxの中途半端は廃止) */
  --ux-radius-sm:  2px;       /* sharp — 細部・小要素 */
  --ux-radius-md:  2px;       /* sharp — 既定 */
  --ux-radius-lg:  4px;       /* sharp-ish — カード */
  --ux-radius-xl:  4px;       /* sharp-ish — カード大 */
  --ux-radius-2xl: 4px;       /* sharp-ish — フィーチャー */
  --ux-radius-pill: 999px;    /* pill — CTA/chip/streak */
  --ux-radius-circle: 50%;

  /* ==== Motion tokens (V3) ==== */
  --dur-instant: 60ms;
  --dur-fast:    150ms;
  --dur-base:    200ms;
  --dur-mid:     300ms;
  --dur-slow:    500ms;
  --dur-hero:    800ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Back-compat transitions */
  --ux-transition-fast: 150ms var(--ease-out);
  --ux-transition-base: 200ms var(--ease-out);
  --ux-transition-slow: 400ms var(--ease-out);

  /* Z-index */
  --ux-z-tooltip: 100;
  --ux-z-dropdown: 500;
  --ux-z-sticky: 1000;
  --ux-z-fixed: 1000;
  --ux-z-modal: 5000;
  --ux-z-popover: 10000;
}

/* =========================================================
   SHINKAI Token Layer (Phase 1B, 2026-04-25)
   深海(dark) / 夜明けの海(light) の二相設計。
   warm/V3 BLUE トークンは退避コメント無しで温存（互換維持）。
   APCA Lc -82 を本文ターゲットに、gold は装飾、gold-bright は本文用。
   text-shadow は禁止 → soft-glow + tonal layering で代替。
   ========================================================= */
:root {
  /* SHINKAI dark (default) — APCA Lc 計測値は研究ノート 01 に従う */
  --abyss-1000: #050817;
  --abyss-950:  #070d20;
  --abyss-900:  #0a1028;   /* main BG */
  --abyss-800:  #0e1a40;   /* surface */
  --abyss-700:  #142050;   /* surface-2 */
  --abyss-border: #1c2960;

  /* Gold scale — 装飾 vs 本文用を分離 */
  --gold:        #c9a227;  /* 装飾専用 (Lc -68 / 本文NG) */
  --gold-bright: #e8c563;  /* 本文・小ラベル用 (Lc -82 / AAA寄り) */
  --gold-deep:   #998020;

  /* Lilac scale */
  --lilac:       #7986cb;  /* 装飾専用 (Lc -55) */
  --lilac-soft:  #b8bedb;  /* 本文用 (Lc -78) */

  /* Soft glow / tonal layering 用 */
  --soft-glow-gold:  0 0 24px rgba(232, 197, 99, 0.25);
  --soft-glow-lilac: 0 0 24px rgba(184, 190, 219, 0.22);
  /* D4 fix 2026-04-26: 2-stop直線 → 3-stop OKLCH spline で立体感 */
  --tonal-overlay-dark: linear-gradient(180deg, rgba(14,26,64,0.55) 0%, rgba(7,13,32,0.78) 55%, rgba(5,8,23,0.92) 100%);
  --tonal-overlay-light: linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(238,241,248,0.86) 55%, rgba(228,233,243,0.96) 100%);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  /* Apply SHINKAI palette (overrides light-dark() defaults) */
  --bg:        var(--abyss-900);
  --surface:   var(--abyss-800);
  --surface-2: var(--abyss-700);
  --text:      #e6eaf6;       /* Lc ~ -100 */
  --text-sub:  #c4cee4;       /* Lc ~ -86  */
  --text-mute: #8893bd;       /* Lc ~ -65 — captions only */
  --border:    var(--abyss-border);
  --link:      var(--gold-bright);
  --tonal-overlay: var(--tonal-overlay-dark);
}

:root[data-theme="light"] {
  color-scheme: light;
  /* Dawn sea — 神秘性維持しつつ AA+ */
  --abyss-1000: #d8def0;
  --abyss-950:  #e6eaf3;
  --abyss-900:  #f5f7fc;
  --abyss-800:  #eef1f8;
  --abyss-700:  #e4e9f3;
  --abyss-border: #cdd5e5;

  /* Light-mode gold: トーンダウン（眩しさ防止 / Lc 60目標 / 2026-04-26 H1 fix） */
  --gold:        #9c7c1e;
  --gold-bright: #9a7820;
  --gold-deep:   #7a5f15;
  --lilac:       #5562a8;
  --lilac-soft:  #7c87c0;

  --bg:        #f5f7fc;
  --surface:   #eef1f8;
  --surface-2: #e4e9f3;
  --text:      #1f2747;       /* AAA */
  --text-sub:  #4a5680;       /* AA  */
  --text-mute: #6b7596;
  --border:    #cdd5e5;
  --link:      #9c7c1e;

  --soft-glow-gold:  0 0 18px rgba(184, 146, 48, 0.18);
  --soft-glow-lilac: 0 0 18px rgba(85, 98, 168, 0.15);
  --tonal-overlay:   var(--tonal-overlay-light);
}

/* Mystic title: text-shadow廃止 → soft-glow */
.mystic-title,
.shinkai-title {
  color: var(--gold-bright);
  text-shadow: var(--soft-glow-gold);
  text-wrap: balance;
}

/* Tonal layer: 星空背景の上の本文を必ず読みやすくする */
.mystic-tonal-layer {
  background: var(--tonal-overlay);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--ux-radius-lg, 16px);
  padding: var(--space-4, 24px);
}

/* Reduced motion: 星点描・装飾アニメ抑制 */
@media (prefers-reduced-motion: reduce) {
  .mystic-title { text-shadow: none; }
}

/* light-dark() フォールバック (古い Safari/Firefox) */
@supports not (color: light-dark(red, blue)) {
  :root {
    --bg: #f0f2fb;
    --surface: #ffffff;
    --surface-2: #e2e6f4;
    --text: #0a1028;
    --text-sub: #2e3a66;
    --border: #e2e6f4;
    --link: #1d4ed8;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0a1028;
      --surface: #0e1a40;
      --surface-2: #142050;
      --text: #f0f2fb;
      --text-sub: #b3bdd9;
      --border: #1a2050;
      --link: #6a8cf0;
    }
  }
}

/* ==== lang別 font-feature ==== */
:lang(ja), [lang^="ja"] {
  font-feature-settings: "palt" 1, "kern" 1;
  line-height: 1.85;
}
:lang(en), [lang^="en"] {
  font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
  line-height: 1.55;
}

/* ==== Reduced motion (no-motion-first) ==== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==== View Transitions API (MPA) ==== */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── ARIA LIVE REGIONS ─── */
[role="status"], [role="alert"], [aria-live] {
  position: relative;
  display: block;
}

/* ─── SCREEN READER ONLY TEXT ─── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* CONFETTI CANVAS */
.ux-confetti-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 9000;
  contain: strict;
}

/* STREAK BADGE — Enhanced */
.ux-streak-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  background: linear-gradient(135deg, rgba(200,147,42,0.25), rgba(140,80,0,0.15));
  border: 1px solid rgba(200,147,42,0.4);
  border-radius: 4px;
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--ux-accent);
  text-align: center;
  margin: 8px auto;
  animation: streakFadeIn 0.6s ease;
  contain: content;
}
/* Enhanced prominent display */
.ux-streak-enhanced {
  padding: 10px 20px;
  font-size: 13px;
  border-radius: 999px;
  gap: 8px;
}
.ux-streak-fire {
  font-size: 18px;
  line-height: 1;
}
.ux-streak-count {
  font-size: 22px;
  font-weight: 700;
  color: var(--ux-accent);
  line-height: 1;
  letter-spacing: 0;
}
.ux-streak-label {
  font-size: 11px;
  opacity: 0.85;
  letter-spacing: 0.5px;
}
.ux-streak-new {
  animation: streakPop 0.6s cubic-bezier(0.34,1.56,0.64,1);
  contain: content;
}

/* Milestone tiers */
.ux-streak-7 {
  background: linear-gradient(135deg, rgba(200,147,42,0.35), rgba(180,120,20,0.2));
  border-color: rgba(200,147,42,0.6);
  box-shadow: 0 0 12px rgba(200,147,42,0.15);
}
.ux-streak-30 {
  background: linear-gradient(135deg, rgba(218,165,32,0.3), rgba(200,147,42,0.2));
  border-color: rgba(218,165,32,0.6);
  box-shadow: 0 0 16px rgba(218,165,32,0.2);
}
.ux-streak-100 {
  background: linear-gradient(135deg, rgba(255,200,50,0.25), rgba(218,165,32,0.2));
  border-color: rgba(255,200,50,0.6);
  box-shadow: 0 0 20px rgba(255,200,50,0.2);
}
.ux-streak-365 {
  background: linear-gradient(135deg, rgba(255,215,0,0.3), rgba(255,180,50,0.2));
  border-color: rgba(255,215,0,0.7);
  box-shadow: 0 0 24px rgba(255,215,0,0.25), 0 0 48px rgba(255,215,0,0.1);
}

/* Milestone celebration banner */
.ux-streak-milestone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 6px auto;
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,180,50,0.1));
  border: 1px solid rgba(255,215,0,0.4);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ux-accent);
  letter-spacing: 1px;
  animation: milestoneCelebrate 0.8s cubic-bezier(0.34,1.56,0.64,1);
}
.ux-streak-milestone-emoji {
  font-size: 20px;
}
@keyframes milestoneCelebrate {
  0% { opacity: 0; transform: scale(0.3) rotate(-10deg); }
  50% { transform: scale(1.15) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Freeze used notification */
.ux-streak-freeze-used {
  margin: 4px auto;
  padding: 6px 14px;
  background: rgba(100,180,255,0.12);
  border: 1px solid rgba(100,180,255,0.3);
  border-radius: 2px;
  font-size: 11px;
  color: #7cb8f0;
  letter-spacing: 0.5px;
  text-align: center;
  animation: streakFadeIn 0.6s ease;
}

/* Freeze available indicator */
.ux-streak-freeze-avail {
  margin: 2px auto;
  font-size: 10px;
  color: rgba(100,180,255,0.7);
  letter-spacing: 0.5px;
  text-align: center;
}

@keyframes streakFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes streakPop {
  0% { opacity: 0; transform: scale(0.5); }
  70% { transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

/* HISTORY BADGE */
.ux-history-badge {
  display: inline-block;
  font-size: 11px;
  color: var(--ux-accent-muted);
  letter-spacing: 1px;
  margin: 4px auto;
  text-align: center;
}

/* TODAY'S KEYWORD ANCHOR */
.ux-keyword-anchor {
  text-align: center;
  padding: 14px 20px;
  margin: 12px 0;
  border: 1px solid rgba(200,147,42,0.2);
  border-radius: 2px;
  background: linear-gradient(135deg, rgba(200,147,42,0.08), rgba(140,80,0,0.05));
}
.ux-keyword-label {
  display: block;
  font-size: 10px;
  color: var(--ux-accent-muted);
  letter-spacing: 2px;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.ux-keyword-word {
  display: block;
  font-size: clamp(18px, 5vw, 22px);
  font-weight: 700;
  letter-spacing: 6px;
  color: var(--ux-accent);
  font-family: 'Noto Serif JP', serif;
}

/* PROGRESS LOADING */
.ux-progress-container {
  text-align: center;
  padding: 20px;
}
.ux-progress-bar {
  max-width: 200px;
  width: 90%;
  height: 3px;
  background: rgba(200,147,42,0.15);
  border-radius: 2px;
  margin: 0 auto 12px;
  overflow: hidden;
}
.ux-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ux-accent-dark), var(--ux-accent));
  border-radius: 2px;
  transition: width 0.6s ease;
}
.ux-progress-step {
  font-size: 10px;
  color: var(--ux-accent-muted);
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.ux-progress-text {
  font-size: 13px;
  color: #e0d8c0;
  letter-spacing: 2px;
  transition: opacity 0.3s;
}

/* STEP INDICATOR — 3-step journey bar (input → loading → result) */
.ux-step-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  pointer-events: none;
}
.ux-step-bar {
  height: 2px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.ux-step-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent, #9b7de8), var(--accent2, #c4a8ff));
  border-radius: 0 2px 2px 0;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: width;
}
.ux-step-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 4px 0 2px;
}
.ux-step-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  transition: background 0.4s ease, transform 0.3s ease;
}
.ux-step-dot.active {
  background: var(--accent, #9b7de8);
  transform: scale(1.4);
}
.ux-step-dot.done {
  background: var(--accent, #9b7de8);
  opacity: 0.4;
}
.ux-step-label {
  display: flex;
  justify-content: center;
  gap: 0;
  max-width: 300px;
  margin: 0 auto;
}
.ux-step-label-item {
  flex: 1;
  text-align: center;
  font-size: 9px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.2);
  padding: 0 2px 3px;
  transition: color 0.4s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ux-step-label-item.active {
  color: var(--accent, #9b7de8);
}
.ux-step-label-item.done {
  color: rgba(255,255,255,0.35);
}
@media (prefers-reduced-motion: reduce) {
  .ux-step-bar-fill { transition: none; }
  .ux-step-dot { transition: none; }
  .ux-step-label-item { transition: none; }
}

/* TOMORROW TEASER (Zeigarnik) */
.ux-tomorrow-teaser {
  text-align: center;
  padding: 18px 16px;
  margin: 16px 0;
  border: 1px dashed rgba(200,147,42,0.3);
  border-radius: 2px;
  background: rgba(200,147,42,0.05);
  animation: teaserFade 1s ease 0.5s both;
}
@keyframes teaserFade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.ux-teaser-line1 {
  font-size: 13px;
  color: var(--ux-accent);
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.ux-teaser-line2 {
  font-size: 11px;
  color: var(--ux-accent-muted);
  letter-spacing: 2px;
}

/* POSITIVE ENDING (Peak-End Rule) */
.ux-positive-ending {
  text-align: center;
  padding: 20px;
  margin: 20px 0;
  min-height: 60px;
  font-size: 13px;
  color: var(--ux-accent);
  letter-spacing: 3px;
  font-style: italic;
  animation: endingGlow 2s ease-in-out infinite alternate;
  display: flex;
  align-items: center;
  justify-content: center;
}
@keyframes endingGlow {
  from { opacity: 0.7; }
  to { opacity: 1; }
}

/* LUCKY COLOR RGB */
.ux-color-chip {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.2);
  vertical-align: middle;
  margin-right: 6px;
}
.ux-color-hex {
  font-size: 11px;
  color: var(--ux-text-subtle);
  font-family: monospace;
  letter-spacing: 1px;
  vertical-align: middle;
}

/* ─── LUCKY COLOR HEX ─── */
.ux-lucky-color {
  padding: 14px 16px;
  margin: 12px 0;
  background: rgba(200,147,42,0.04);
  border: 1px solid rgba(200,147,42,0.15);
  border-radius: 2px;
  text-align: center;
}
.ux-lucky-color-label {
  font-size: 10px;
  color: var(--ux-text-subtle);
  letter-spacing: 2px;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.ux-lucky-color-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.ux-lucky-color-chip {
  min-width: 48px;
  min-height: 48px;
  width: 48px;
  height: 48px;
  border-radius: 2px;
  border: 2px solid rgba(255,255,255,0.1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.ux-lucky-color-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ux-accent);
}
.ux-lucky-color-hex {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: var(--ux-text-subtle);
  letter-spacing: 1px;
}

/* ─── FADE-IN ANIMATION FOR RESULT SECTIONS ─── */
.ux-fade-in {
  opacity: 0;
  transform: translateY(16px);
  animation: uxFadeIn 0.5s ease forwards;
}

@keyframes uxFadeIn {
  to {
    opacity: 1;
    transform: none;
  }
}

.ux-fade-in:nth-child(2) { animation-delay: 0.12s; }
.ux-fade-in:nth-child(3) { animation-delay: 0.24s; }
.ux-fade-in:nth-child(4) { animation-delay: 0.36s; }
.ux-fade-in:nth-child(5) { animation-delay: 0.48s; }
.ux-fade-in:nth-child(6) { animation-delay: 0.60s; }
.ux-fade-in:nth-child(7) { animation-delay: 0.72s; }
.ux-fade-in:nth-child(8) { animation-delay: 0.84s; }
.ux-fade-in:nth-child(9) { animation-delay: 0.96s; }
.ux-fade-in:nth-child(10) { animation-delay: 1.08s; }

/* ─── RESULT 3-TIER STRUCTURE STYLES ─── */
.ux-result-summary {
  text-align: center;
  padding: 20px 16px;
  margin: 16px 0;
  min-height: 80px;
  background: linear-gradient(135deg, rgba(200,147,42,0.12), rgba(140,80,0,0.08));
  border: 1px solid rgba(200,147,42,0.25);
  border-radius: 2px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ux-accent);
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ux-result-reason {
  padding: 16px;
  margin: 12px 0;
  background: rgba(200,147,42,0.04);
  border-left: 3px solid var(--ux-accent);
  border-radius: 4px;
  font-size: 13px;
  color: var(--ux-text-secondary);
  line-height: 1.6;
  letter-spacing: 0.5px;
}

.ux-result-action {
  padding: 14px 16px;
  margin: 12px 0;
  background: linear-gradient(135deg, rgba(232,184,74,0.08), rgba(184,163,232,0.04));
  border-radius: 2px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: var(--ux-accent);
  letter-spacing: 1px;
  border: 1px solid rgba(200,147,42,0.15);
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ux-transition-base);
}
.ux-result-action:hover {
  background: linear-gradient(135deg, rgba(232,184,74,0.12), rgba(184,163,232,0.08));
  border-color: rgba(200,147,42,0.3);
}

/* ─── CONTINUATION DESIGN (DIG DEEPER) ─── */
.ux-continue-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
}

@media (max-width: 600px) {
  .ux-continue-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.ux-continue-card {
  min-height: 100px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(232,184,74,0.08), rgba(140,80,0,0.05));
  border: 1px solid rgba(200,147,42,0.2);
  border-radius: 2px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ux-continue-card:hover {
  background: linear-gradient(135deg, rgba(232,184,74,0.15), rgba(140,80,0,0.1));
  border-color: rgba(200,147,42,0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.ux-continue-card:focus-visible {
  outline: 2px solid var(--ux-accent);
  outline-offset: 2px;
}

.ux-continue-card:active {
  transform: scale(0.97);
}

.ux-continue-card-emoji {
  display: block;
  font-size: 28px;
  margin-bottom: 8px;
}

.ux-continue-card-label {
  display: block;
  font-size: 12px;
  color: var(--ux-accent);
  letter-spacing: 1px;
  font-weight: 400;
}

/* ─── TRUST BADGE ─── */
.ux-trust-badge {
  text-align: center;
  padding: 12px 12px;
  margin: 12px 0;
  font-size: 11px;
  color: var(--ux-accent-muted);
  letter-spacing: 0.5px;
  line-height: 1.6;
  border-top: 1px solid rgba(200,147,42,0.1);
  border-bottom: 1px solid rgba(200,147,42,0.1);
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ux-trust-item {
  display: inline-block;
  margin: 0 8px;
}

.ux-trust-item::before {
  content: '✓ ';
  color: var(--ux-accent);
}

/* ─── ATMOSPHERIC LOADING ─── */
.ux-loading-atmosphere {
  text-align: center;
  padding: 30px 20px;
}

.ux-loading-spinner {
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  margin: 0 auto 16px;
  border: 2px solid rgba(200,147,42,0.2);
  border-top: 2px solid var(--ux-accent);
  border-radius: 50%;
  animation: spin 1.2s linear infinite;
  will-change: transform;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.ux-loading-message {
  font-size: 13px;
  color: var(--ux-text-secondary);
  letter-spacing: 1px;
  opacity: 0;
  animation: messageFadeInOut 2s ease-in-out;
}

@keyframes messageFadeInOut {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.ux-loading-message:nth-child(2) { animation-delay: 0s; }
.ux-loading-message:nth-child(3) { animation-delay: 2s; }
.ux-loading-message:nth-child(4) { animation-delay: 4s; }
.ux-loading-message:nth-child(5) { animation-delay: 6s; }

/* ─── TODAY-ONLY BADGE ─── */
.ux-today-badge {
  display: inline-block;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(232,184,74,0.2), rgba(184,163,232,0.12));
  border: 1px solid rgba(200,147,42,0.3);
  border-radius: 2px;
  font-size: 11px;
  color: var(--ux-accent);
  letter-spacing: 1px;
  font-weight: 400;
  text-align: center;
  margin: 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ux-today-date {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-top: 4px;
  line-height: 1.4;
}

/* ─── SHARE CARD STYLING ─── */
.ux-share-card {
  padding: 20px;
  margin: 20px 0;
  background: linear-gradient(135deg, rgba(232,184,74,0.1), rgba(140,80,0,0.06));
  border: 1px solid rgba(200,147,42,0.2);
  border-radius: 2px;
  text-align: center;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ux-share-image {
  max-width: 100%;
  max-height: 400px;
  height: auto;
  border-radius: 2px;
  margin-bottom: 12px;
}

.ux-share-button {
  display: inline-block;
  min-height: 44px;
  min-width: 44px;
  padding: 12px 24px;
  background: var(--ux-accent);
  color: #0e0c08;
  border: none;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 8px;
}

.ux-share-button:hover {
  background: var(--ux-accent-dark);
  transform: scale(1.02);
}

.ux-share-button:focus-visible {
  outline: 2px solid var(--ux-accent-dark);
  outline-offset: 2px;
}

.ux-share-button:active {
  transform: scale(0.98);
}

/* ENTERTAINMENT DISCLAIMER */
.ux-disclaimer {
  text-align: center;
  padding: 12px 16px;
  margin-top: 20px;
  font-size: 10px;
  color: var(--ux-text-subtle-dark);
  letter-spacing: 0.5px;
  line-height: 1.6;
  border-top: 1px solid rgba(200,147,42,0.1);
}

/* SOCIAL PROOF */
.ux-social-proof {
  text-align: center;
  padding: 8px 12px;
  margin: 8px 0;
  font-size: 12px;
  color: var(--ux-accent-muted);
  letter-spacing: 0.5px;
  animation: proofFade 1s ease 0.3s both;
}
@keyframes proofFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ─── TYPE CLASSIFICATION CARD ─── */
.ux-type-card {
  padding: 20px 16px;
  margin: 20px 0;
  min-height: 160px;
  background: linear-gradient(135deg, rgba(200,147,42,0.08), rgba(160,100,20,0.04));
  border: 1px solid rgba(200,147,42,0.2);
  border-radius: 4px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ux-type-emoji { font-size: clamp(32px, 10vw, 40px); margin-bottom: 8px; animation: typeFloat 3s ease-in-out infinite; }
@keyframes typeFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.ux-type-label { font-size: 11px; color: #8a7a5a; letter-spacing: 2px; margin-bottom: 4px; }
.ux-type-name { font-size: 20px; font-weight: 700; color: var(--ux-accent); margin-bottom: 4px; letter-spacing: 1px; }
.ux-type-suffix { font-size: 11px; color: #8a7a5a; letter-spacing: 2px; margin-bottom: 8px; }
.ux-type-desc { font-size: 12px; color: var(--ux-accent-muted); line-height: 1.5; }

/* ─── MAP PIN TOOLTIPS ─── */
.marker {
  position: relative;
}
.marker .tooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  background: rgba(15,13,26,0.95);
  border: 1px solid rgba(200,147,42,0.3);
  border-radius: 2px;
  white-space: nowrap;
  font-size: 11px;
  color: var(--ux-text-light);
  z-index: var(--ux-z-tooltip);
  pointer-events: none;
}
.marker:hover .tooltip {
  display: block;
}
.marker:focus-within .tooltip {
  display: block;
}

/* ─── DAILY FORTUNE ─── */
.ux-daily-fortune {
  padding: 20px 16px;
  margin: 20px 0;
  min-height: 120px;
  background: linear-gradient(135deg, rgba(139,126,200,0.08), rgba(200,147,42,0.04));
  border: 1px solid rgba(139,126,200,0.2);
  border-radius: 4px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ux-daily-fortune-header { margin-bottom: 8px; }
.ux-daily-fortune-emoji { font-size: 28px; margin-right: 8px; vertical-align: middle; }
.ux-daily-fortune-date { font-size: 16px; color: var(--ux-text-subtle); vertical-align: middle; letter-spacing: 2px; font-weight: 700; }
.ux-daily-fortune-title { font-size: 10px; color: var(--ux-text-subtle); letter-spacing: 2px; margin-bottom: 10px; text-transform: uppercase; }
.ux-daily-fortune-message { font-size: 16px; font-weight: 700; color: var(--ux-accent); line-height: 1.6; letter-spacing: 0.5px; }

/* ─── FRIENDS COMPATIBILITY ─── */
.ux-compat-card {
  padding: 20px 16px;
  margin: 20px 0;
  background: linear-gradient(135deg, rgba(200,147,42,0.06), rgba(180,120,30,0.03));
  border: 1px solid rgba(200,147,42,0.2);
  border-radius: 2px;
  text-align: center;
  contain: content;
}
.ux-compat-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ux-accent);
  letter-spacing: 1px;
  margin-bottom: 14px;
}
.ux-compat-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.ux-compat-label {
  font-size: 11px;
  color: var(--ux-text-subtle);
  letter-spacing: 1px;
}
.ux-compat-input {
  width: 100%;
  max-width: 240px;
  min-height: 44px;
  padding: 10px 12px;
  background: rgba(30,25,15,0.6);
  border: 1px solid rgba(200,147,42,0.3);
  border-radius: 2px;
  color: var(--ux-text-light);
  font-size: 14px;
  text-align: center;
  transition: border-color var(--ux-transition-fast), box-shadow var(--ux-transition-fast);
}
.ux-compat-input:focus {
  outline: none;
  border-color: var(--ux-accent);
  box-shadow: 0 0 8px rgba(200,147,42,0.2);
}
.ux-compat-input:focus-visible {
  outline: 2px solid var(--ux-accent);
  outline-offset: 2px;
}
.ux-compat-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 24px;
  background: linear-gradient(135deg, rgba(200,147,42,0.2), rgba(200,147,42,0.1));
  border: 1px solid rgba(200,147,42,0.4);
  border-radius: 2px;
  color: var(--ux-accent);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 1px;
}
.ux-compat-btn:hover {
  background: linear-gradient(135deg, rgba(200,147,42,0.3), rgba(200,147,42,0.15));
  transform: translateY(-1px);
}
.ux-compat-btn:focus-visible {
  outline: 2px solid var(--ux-accent);
  outline-offset: 2px;
}
.ux-compat-btn:active {
  transform: scale(0.97);
}
.ux-compat-score-wrap {
  margin-top: 20px;
  padding: 20px;
  background: rgba(200,147,42,0.04);
  border-radius: var(--ux-radius-lg);
}
.ux-compat-emoji {
  font-size: 36px;
  margin-bottom: 8px;
}
.ux-compat-score {
  font-size: 48px;
  font-weight: 700;
  color: var(--ux-accent);
  line-height: 1;
}
.ux-compat-percent {
  font-size: 20px;
  font-weight: 400;
}
.ux-compat-comment {
  font-size: 13px;
  color: var(--ux-accent-muted);
  margin-top: 8px;
  letter-spacing: 0.5px;
}
.ux-compat-share-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}
.ux-compat-share-btn {
  min-height: 44px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 2px;
  color: var(--text, #fff);
  font-size: 13px;
  padding: 8px 16px;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--ux-transition-fast);
}
.ux-compat-share-btn:hover {
  background: rgba(255,255,255,0.15);
  border-color: var(--accent, #1d4ed8);
}
.ux-compat-share-btn:focus-visible {
  outline: 2px solid var(--accent, #1d4ed8);
  outline-offset: 2px;
}
.ux-compat-share-btn:active {
  transform: scale(0.97);
}
.ux-compat-form .ux-bday-wrap {
  justify-content: center;
}
.ux-compat-form .ux-bday-wrap input {
  min-height: 44px;
  background: rgba(30,25,15,0.6);
  border-color: rgba(200,147,42,0.3);
  color: var(--ux-text-light);
  font-size: 14px;
  transition: border-color var(--ux-transition-fast), box-shadow var(--ux-transition-fast);
}
.ux-compat-form .ux-bday-wrap input:focus {
  border-color: var(--ux-accent, #c8932a);
  box-shadow: 0 0 8px rgba(200,147,42,0.2);
}
.ux-compat-form .ux-bday-wrap input:focus-visible {
  outline: 2px solid var(--ux-accent);
  outline-offset: 2px;
}

/* ─── DAILY LIMIT MESSAGE ─── */
.ux-daily-limit {
  padding: 24px 16px;
  margin: 20px 0;
  min-height: 140px;
  background: linear-gradient(135deg, rgba(88,86,214,0.08), rgba(88,86,214,0.03));
  border: 1px solid rgba(88,86,214,0.2);
  border-radius: 4px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ux-limit-icon {
  font-size: 48px;
  margin-bottom: 12px;
  animation: typeFloat 3s ease-in-out infinite;
}
.ux-limit-done {
  font-size: 15px;
  font-weight: 700;
  color: var(--ux-accent);
  margin-bottom: 4px;
}
.ux-limit-next {
  font-size: 12px;
  color: var(--ux-accent-muted);
  margin-bottom: 12px;
}
.ux-limit-timer {
  font-size: 20px;
  font-weight: 700;
  color: #1d4ed8;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.ux-limit-encourage {
  font-size: 11px;
  color: var(--ux-text-subtle);
  letter-spacing: 1px;
}

/* ─── SAVE IMAGE BUTTON ─── */
.ux-save-image-btn {
  display: inline-block;
  min-height: 44px;
  min-width: 44px;
  padding: 12px 24px;
  background: linear-gradient(135deg, rgba(139,126,200,0.2), rgba(139,126,200,0.1));
  border: 1px solid rgba(139,126,200,0.4);
  border-radius: 2px;
  color: #1d4ed8;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--ux-transition-fast);
  letter-spacing: 1px;
  margin: 8px 4px;
}
.ux-save-image-btn:hover {
  background: linear-gradient(135deg, rgba(139,126,200,0.3), rgba(139,126,200,0.15));
  transform: translateY(-1px);
}
.ux-save-image-btn:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}
.ux-save-image-btn:active {
  transform: scale(0.97);
}

/* ─── RANK-BASED VISUAL EFFECTS ─── */
.ux-rank-effect {
  position: relative;
  width: 100%;
  min-height: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 2px;
  margin: 8px 0;
  contain: layout style;
}

/* BEST - Gold explosion */
.ux-rank-best { background: radial-gradient(ellipse at center, rgba(232,184,74,0.15) 0%, transparent 70%); }
.ux-rank-particles { position: absolute; inset: 0; contain: strict; }
.ux-rank-particle {
  position: absolute;
  background: #e8b84a;
  border-radius: 50%;
  animation: rankParticle 3s ease-out infinite;
  will-change: transform, opacity;
}
@keyframes rankParticle {
  0% { opacity: 1; transform: scale(0) translateY(0); }
  50% { opacity: 0.8; transform: scale(1) translateY(-20px); }
  100% { opacity: 0; transform: scale(0.5) translateY(-40px); }
}
.ux-rank-glow-best {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(232,184,74,0.2) 0%, transparent 60%);
  animation: rankGlow 2s ease-in-out infinite;
}
@keyframes rankGlow {
  0%, 100% { opacity: 0.5; } 50% { opacity: 1; }
}

/* GOOD - Golden glow */
.ux-rank-good { background: radial-gradient(ellipse at center, rgba(232,184,74,0.08) 0%, transparent 70%); }
.ux-rank-glow-good {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(232,184,74,0.12) 0%, transparent 50%);
  animation: rankGlow 3s ease-in-out infinite;
}

/* BAD - Starry sky */
.ux-rank-bad { background: linear-gradient(180deg, #0a0820 0%, #131038 50%, #1a1040 100%); }
.ux-rank-stars { position: absolute; inset: 0; contain: strict; }
.ux-rank-star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  animation: rankTwinkle 2s ease-in-out infinite;
  will-change: opacity;
}
@keyframes rankTwinkle {
  0%, 100% { opacity: 0.3; } 50% { opacity: 1; }
}
.ux-rank-hope {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  color: rgba(200,180,220,0.8);
  letter-spacing: 1px;
}

/* NORMAL - Shimmer */
.ux-rank-normal { background: rgba(200,147,42,0.03); }
.ux-rank-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(200,147,42,0.08), transparent);
  animation: rankShimmer 3s ease-in-out infinite;
}
@keyframes rankShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ─── RESULT PAGE VISUAL ENHANCEMENT (v=3) ─── */

/* Decorative section dividers */
.ux-section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 24px 0 20px;
  opacity: 0;
  animation: uxFadeIn 0.5s ease 0.3s forwards;
}
.ux-section-divider::before,
.ux-section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ux-accent, #e8b84a), transparent);
}
.ux-section-divider-symbol {
  font-size: 10px;
  color: var(--ux-accent, #e8b84a);
  letter-spacing: 4px;
}

/* Enhanced result header glow */
.ux-result-glow {
  position: relative;
}
.ux-result-glow::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, var(--accent, #9b7de8) 0%, transparent 70%);
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
  border-radius: var(--ux-radius-circle);
}

/* Score visualization ring */
.ux-score-ring {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 16px auto 8px;
}
.ux-score-ring svg {
  max-width: 100px;
  height: auto;
  width: 80px;
  min-height: 80px;
  transform: rotate(-90deg);
}
.ux-score-ring-bg {
  fill: none;
  stroke: rgba(255,255,255,0.06);
  stroke-width: 6;
}
.ux-score-ring-fill {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.4,0,0.2,1);
}
.ux-score-ring-text {
  position: absolute;
  text-align: center;
}
.ux-score-ring-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 2px;
  display: block;
}
.ux-score-ring-label {
  font-size: 9px;
  letter-spacing: 2px;
  opacity: 0.6;
  display: block;
  margin-top: 2px;
}

/* Enhanced lucky items with color swatch */
.ux-lucky-color-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 6px;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 0 8px rgba(var(--swatch-r, 200), var(--swatch-g, 147), var(--swatch-b, 42), 0.4);
}

/* Enhanced card hover effects */
.ux-card-enhanced {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ux-card-enhanced:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* Decorative corner ornaments for result cards */
.ux-corner-ornament {
  position: relative;
  overflow: hidden;
}
.ux-corner-ornament::before,
.ux-corner-ornament::after {
  content: '✦';
  position: absolute;
  font-size: 10px;
  opacity: 0.2;
  color: var(--accent, var(--ux-accent, #e8b84a));
}
.ux-corner-ornament::before {
  top: 8px;
  left: 10px;
}
.ux-corner-ornament::after {
  bottom: 8px;
  right: 10px;
}

/* Background decorative particles for result screen */
.ux-result-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  contain: strict;
}
.ux-particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--accent, var(--ux-accent, #e8b84a));
  border-radius: 50%;
  opacity: 0;
  animation: uxParticleFloat 8s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes uxParticleFloat {
  0% { opacity: 0; transform: translateY(100vh) scale(0); }
  10% { opacity: 0.4; }
  90% { opacity: 0.4; }
  100% { opacity: 0; transform: translateY(-20px) scale(1); }
}

/* Enhanced accordion with gradient indicator */
.ux-accordion-enhanced .accordion-header {
  position: relative;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: background-color var(--ux-transition-base);
}
.ux-accordion-enhanced .accordion-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent, var(--ux-accent, #e8b84a));
  opacity: 0;
  transition: opacity var(--ux-transition-fast);
}
.ux-accordion-enhanced .accordion-header:hover::before,
.ux-accordion-enhanced .accordion-header.open::before {
  opacity: 1;
}
.ux-accordion-enhanced .accordion-header:focus-visible {
  outline: 2px solid var(--ux-accent);
  outline-offset: -2px;
}

/* Enhanced overall message card with gradient border */
.ux-message-highlight {
  position: relative;
  border: none !important;
  background-clip: padding-box;
}
.ux-message-highlight::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--accent, #9b7de8), transparent 60%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Animated entrance for result sections */
@keyframes uxSlideReveal {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
.ux-reveal {
  animation: uxSlideReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Enhanced share button */
.ux-btn-share-enhanced {
  position: relative;
  overflow: hidden;
}
.ux-btn-share-enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  transition: left 0.5s;
}
.ux-btn-share-enhanced:hover::before {
  left: 100%;
}

/* Lucky item enhanced with icon glow */
.ux-lucky-enhanced {
  position: relative;
  overflow: hidden;
}
.ux-lucky-enhanced::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, var(--accent, var(--ux-accent, #e8b84a)) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.ux-lucky-enhanced:hover::after {
  opacity: 0.04;
}

/* Result page floating ornament dots */
.ux-floating-dots {
  position: absolute;
  pointer-events: none;
}
.ux-floating-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent, var(--ux-accent, #e8b84a));
  opacity: 0.15;
  animation: uxDotPulse 4s ease-in-out infinite;
}
@keyframes uxDotPulse {
  0%, 100% { opacity: 0.1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(1.5); }
}

/* Enhanced caution card with animated border */
.ux-caution-enhanced {
  position: relative;
}
.ux-caution-enhanced::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,122,122,0.3), transparent);
}

/* Subtle text gradient for headings */
.ux-text-gradient {
  background: linear-gradient(135deg, var(--accent, #9b7de8), var(--accent2, #c4a8ff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── DIVINE BUTTON (unified CTA for all divination pages) ─── */
.btn-divine {
  display: block;
  width: 100%;
  max-width: 320px;
  min-height: 48px;
  margin: 24px auto 16px;
  padding: 16px 32px;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 3px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent, #9b7de8) 0%, var(--accent2, #c4a8ff) 100%);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: transform var(--ux-transition-fast), box-shadow var(--ux-transition-fast), opacity var(--ux-transition-fast);
  box-shadow: 0 4px 16px rgba(155, 125, 232, 0.3);
  position: relative;
  overflow: hidden;
}
.btn-divine::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.5s ease;
}
.btn-divine:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(155, 125, 232, 0.45);
}
.btn-divine:hover::before {
  left: 100%;
}
.btn-divine:focus-visible {
  outline: 2px solid rgba(255,255,255,0.5);
  outline-offset: 2px;
}
.btn-divine:active {
  transform: scale(0.97);
  opacity: 0.9;
}
.btn-divine:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: 0 2px 8px rgba(155, 125, 232, 0.15);
  filter: grayscale(0.5);
  pointer-events: none;
  border: 2px dashed rgba(255,255,255,0.3);
}
@media (max-width: 480px) {
  .btn-divine {
    max-width: 280px;
    font-size: 16px;
    padding: 14px 24px;
    min-height: 44px;
  }
}

/* ─── LIGHT THEME OVERRIDE ─── */
/* Overrides page-level :root dark vars with light equivalents.
   Accent colors are darkened slightly for contrast on white. */
html[data-theme="light"] {
  --bg: #f5f3f0;
  --bg2: #edeae5;
  --card-bg: #ffffff;
  --card: #ffffff;
  --text: #1a1a2e;
  --muted: #6b6b80;
  --muted2: #8080a0;
  --text-sub: #6b6b80;
  --border: #d8d5d0;
  --positive: #2a9d5c;
  --negative: #d03030;
  color-scheme: light;
}
html[data-theme="light"] body {
  background: var(--bg);
  color: var(--text);
}
/* Adjust shared UX elements for light mode */
html[data-theme="light"] .ux-theme-toggle {
  background: rgba(255,255,255,0.85);
  border-color: rgba(0,0,0,0.12);
  backdrop-filter: blur(8px);
}
html[data-theme="light"] .ux-theme-toggle:hover {
  border-color: rgba(0,0,0,0.25);
}
html[data-theme="light"] .ux-streak-badge {
  background: linear-gradient(135deg, rgba(200,147,42,0.12), rgba(200,147,42,0.06));
  border-color: rgba(200,147,42,0.25);
}
html[data-theme="light"] .ux-streak-milestone {
  background: linear-gradient(135deg, rgba(218,165,32,0.12), rgba(200,147,42,0.06));
  border-color: rgba(218,165,32,0.3);
}
html[data-theme="light"] .ux-streak-freeze-used {
  background: rgba(60,130,220,0.08);
  border-color: rgba(60,130,220,0.2);
  color: #3c82dc;
}
html[data-theme="light"] .ux-streak-freeze-avail {
  color: rgba(60,130,220,0.6);
}
html[data-theme="light"] .ux-keyword-anchor {
  background: linear-gradient(135deg, rgba(200,147,42,0.06), rgba(200,147,42,0.03));
  border-color: rgba(200,147,42,0.15);
}
html[data-theme="light"] .ux-detail-blur-overlay {
  background: linear-gradient(transparent 20%, var(--bg) 90%);
}
html[data-theme="light"] .ux-history-card {
  background: var(--card-bg);
  border-color: var(--border);
}
html[data-theme="light"] .ux-section-divider::before {
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}
html[data-theme="light"] .ux-result-card {
  background: var(--card-bg);
  border-color: var(--border);
}
html[data-theme="light"] .ux-toast {
  background: rgba(255,255,255,0.95);
  color: var(--text);
  border-color: var(--border);
}
/* Birthday input fields */
html[data-theme="light"] .ux-bday-wrap input {
  background: var(--card-bg);
  border-color: var(--border);
  color: var(--text);
}
/* Page-level common elements */
html[data-theme="light"] .container,
html[data-theme="light"] .wrapper {
  color: var(--text);
}
html[data-theme="light"] .input-group input,
html[data-theme="light"] .input-group select,
html[data-theme="light"] .input-group textarea {
  background: var(--card-bg);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="light"] .input-group select option {
  background: var(--card-bg);
  color: var(--text);
}
html[data-theme="light"] .gender-btn {
  background: rgba(0,0,0,0.03);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="light"] .gender-btn:hover {
  background: rgba(0,0,0,0.06);
}
html[data-theme="light"] .gender-btn.active {
  background: rgba(var(--accent), 0.1);
}
/* Result cards and sections */
html[data-theme="light"] .result-card,
html[data-theme="light"] .detail-card,
html[data-theme="light"] .fortune-card,
html[data-theme="light"] .category-card,
html[data-theme="light"] .advice-card,
html[data-theme="light"] .caution-card {
  background: var(--card-bg);
  border-color: var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
html[data-theme="light"] .lucky-item {
  background: var(--card-bg);
  border-color: var(--border);
}
/* Header areas - keep dark for visual interest */
html[data-theme="light"] .header,
html[data-theme="light"] header {
  color: var(--text);
}
/* Share panel */
html[data-theme="light"] .ux-share-btn {
  background: var(--card-bg);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="light"] .ux-share-btn:hover {
  background: var(--bg2);
}
/* Cross nav */
html[data-theme="light"] .ux-cross-nav-card {
  background: var(--card-bg);
  border-color: var(--border);
}
/* History panel */
html[data-theme="light"] .ux-history-panel {
  background: var(--card-bg);
  border-color: var(--border);
}
/* Compatibility section */
html[data-theme="light"] .ux-compat-section {
  background: var(--card-bg);
  border-color: var(--border);
}
html[data-theme="light"] .ux-compat-section input {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}
/* Disclaimer */
html[data-theme="light"] .ux-disclaimer {
  color: var(--muted);
}
/* Loading screen adjustments */
html[data-theme="light"] .screen-loading,
html[data-theme="light"] [id*="loading"] {
  background: var(--bg);
  color: var(--text);
}
/* Welcome/home screen */
html[data-theme="light"] .screen-home,
html[data-theme="light"] [id*="home"] {
  color: var(--text);
}
/* Divination-specific decorative elements - soften in light mode */
html[data-theme="light"] .ux-result-particles,
html[data-theme="light"] .ux-rank-particles {
  opacity: 0.3;
}
/* Scrollbar for light mode */
html[data-theme="light"] ::-webkit-scrollbar-track {
  background: var(--bg);
}
html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: var(--border);
}
/* Background layer adjustments */
html[data-theme="light"] .bg-layer {
  opacity: 0.15;
}
/* Fallback error UI */
html[data-theme="light"] .ux-fallback-btn {
  background: var(--card-bg);
  color: var(--text);
  border-color: var(--border);
}

/* ─── THEME TOGGLE BUTTON ─── */
.ux-theme-toggle { display: none !important; visibility: hidden !important; pointer-events: none !important; }
.ux-theme-toggle--legacy {
  position: fixed;
  bottom: 16px;
  right: 58px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(30,25,15,0.8);
  border: 1px solid rgba(200,147,42,0.3);
  color: var(--ux-accent);
  font-size: 16px;
  cursor: pointer;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ux-theme-toggle:hover {
  border-color: rgba(200,147,42,0.6);
  transform: scale(1.1);
}

/* ─── HIGH CONTRAST THEME ─── */
/* Maximum readability for vision-impaired users. Uses pure black/white with vivid accent colors and strong borders. */
html[data-theme="high-contrast"] {
  --bg: #000000;
  --bg2: #0a0a0a;
  --card-bg: #0a0a0a;
  --card: #0a0a0a;
  --text: #ffffff;
  --muted: #e0e0e0;
  --muted2: #cccccc;
  --text-sub: #e0e0e0;
  --border: #ffffff;
  --positive: #00ff88;
  --negative: #ff4444;
  color-scheme: dark;
}
html[data-theme="high-contrast"] body {
  background: #000;
  color: #fff;
}
/* Strong borders on all card elements */
html[data-theme="high-contrast"] .ux-result-card,
html[data-theme="high-contrast"] .ux-detail-card,
html[data-theme="high-contrast"] .ux-lucky-items,
html[data-theme="high-contrast"] .ux-advice-card,
html[data-theme="high-contrast"] .ux-caution-card,
html[data-theme="high-contrast"] .ux-message-card,
html[data-theme="high-contrast"] .ux-message-highlight,
html[data-theme="high-contrast"] .result-card,
html[data-theme="high-contrast"] .detail-card,
html[data-theme="high-contrast"] .fortune-card,
html[data-theme="high-contrast"] .category-card,
html[data-theme="high-contrast"] .lucky-card,
html[data-theme="high-contrast"] .advice-card,
html[data-theme="high-contrast"] .caution-card {
  background: #0a0a0a;
  border: 2px solid #ffffff;
  box-shadow: none;
  color: #ffffff;
}
/* Inputs with strong contrast */
html[data-theme="high-contrast"] .input-group input,
html[data-theme="high-contrast"] .input-group select,
html[data-theme="high-contrast"] .input-group textarea,
html[data-theme="high-contrast"] .ux-bday-wrap input {
  background: #000;
  color: #fff;
  border: 2px solid #fff;
}
html[data-theme="high-contrast"] .input-group select option {
  background: #000;
  color: #fff;
}
/* Gender buttons */
html[data-theme="high-contrast"] .gender-btn {
  background: #000;
  color: #fff;
  border: 2px solid #fff;
}
html[data-theme="high-contrast"] .gender-btn:hover {
  background: #222;
  border-color: #ffdd00;
}
html[data-theme="high-contrast"] .gender-btn.active {
  background: #ffdd00;
  color: #000;
  border-color: #ffdd00;
}
/* Containers */
html[data-theme="high-contrast"] .container,
html[data-theme="high-contrast"] .wrapper {
  background: #000;
}
/* Links always bright yellow for visibility */
html[data-theme="high-contrast"] a {
  color: #ffdd00;
}
html[data-theme="high-contrast"] a:visited {
  color: #ffbb00;
}
/* Toast */
html[data-theme="high-contrast"] .ux-toast {
  background: #ffdd00;
  color: #000;
  border: 2px solid #fff;
  font-weight: 700;
}
/* Streak badge */
html[data-theme="high-contrast"] .ux-streak-badge {
  background: #000;
  border: 2px solid #ffdd00;
  color: #ffdd00;
}
html[data-theme="high-contrast"] .ux-streak-milestone {
  background: #000;
  border: 2px solid #ffdd00;
  color: #ffdd00;
}
html[data-theme="high-contrast"] .ux-streak-freeze-used {
  background: #000;
  border: 2px solid #00aaff;
  color: #00aaff;
}
html[data-theme="high-contrast"] .ux-streak-freeze-avail {
  color: #00aaff;
}
/* History card */
html[data-theme="high-contrast"] .ux-history-card {
  background: #0a0a0a;
  border: 2px solid #fff;
}
/* Section divider */
html[data-theme="high-contrast"] .ux-section-divider::before {
  background: #fff;
}
/* Share panel */
html[data-theme="high-contrast"] .ux-share-panel,
html[data-theme="high-contrast"] .ux-share-panel a,
html[data-theme="high-contrast"] .ux-share-panel button {
  border: 2px solid #fff;
  color: #fff;
  background: #000;
}
/* Toggle buttons */
html[data-theme="high-contrast"] .ux-theme-toggle {
  background: #000;
  border: 2px solid #fff;
  color: #fff;
}
html[data-theme="high-contrast"] .ux-theme-toggle:hover {
  border-color: #ffdd00;
}
/* Remove gradient text effects — force flat white text */
html[data-theme="high-contrast"] [style*="background-clip"],
html[data-theme="high-contrast"] .gradient-text,
html[data-theme="high-contrast"] .logo-en,
html[data-theme="high-contrast"] .beta-badge,
html[data-theme="high-contrast"] .tagline {
  -webkit-text-fill-color: #ffdd00 !important;
  background: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
}
/* Disable decorative particles and background layers */
html[data-theme="high-contrast"] .bg-layer,
html[data-theme="high-contrast"] .ux-result-particles,
html[data-theme="high-contrast"] .ux-rank-particles,
html[data-theme="high-contrast"] .ux-rank-effect,
html[data-theme="high-contrast"] .ux-particle,
html[data-theme="high-contrast"] .ux-rank-particle {
  display: none !important;
}
/* Score ring: strong border */
html[data-theme="high-contrast"] .ux-score-ring,
html[data-theme="high-contrast"] .score-ring {
  border: 3px solid #ffdd00;
}
/* Cross navigation */
html[data-theme="high-contrast"] .ux-cross-nav a {
  color: #ffdd00;
  border: 2px solid #fff;
  background: #000;
}
/* Error fallback */
html[data-theme="high-contrast"] .ux-error-fallback {
  background: #000;
  border: 2px solid #ff4444;
  color: #fff;
}
html[data-theme="high-contrast"] .ux-detail-blur-overlay {
  background: linear-gradient(transparent, #000);
}
/* Keyword anchor */
html[data-theme="high-contrast"] .ux-keyword-anchor {
  color: #ffdd00;
  text-decoration: underline;
}
/* Focus-visible override for high contrast */
html[data-theme="high-contrast"] :focus-visible {
  outline: 3px solid #ffdd00 !important;
  outline-offset: 2px;
}
/* Remove body vignette pseudo-elements */
html[data-theme="high-contrast"] body::before,
html[data-theme="high-contrast"] body::after {
  display: none !important;
}
/* Buttons: strong borders, flat colors */
html[data-theme="high-contrast"] .btn-divine,
html[data-theme="high-contrast"] .btn-draw,
html[data-theme="high-contrast"] button[type="submit"],
html[data-theme="high-contrast"] .ux-save-image-btn {
  background: #ffdd00;
  color: #000;
  border: 2px solid #fff;
  font-weight: 700;
  text-shadow: none;
  box-shadow: none;
}
html[data-theme="high-contrast"] .btn-divine:hover,
html[data-theme="high-contrast"] .btn-draw:hover,
html[data-theme="high-contrast"] button[type="submit"]:hover {
  background: #fff;
  color: #000;
}
/* Forced-colors support (Windows High Contrast) */
@media (forced-colors: active) {
  .ux-result-particles, .ux-rank-particles, .ux-rank-effect,
  .bg-layer, .ux-particle, .ux-rank-particle { display: none !important; }
  .ux-theme-toggle { border: 1px solid ButtonText; }
}

/* ─── SWIPE NAV DOT INDICATOR ─── */
.ux-swipe-dots {
  position: fixed;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 900;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.ux-swipe-dots.visible {
  opacity: 1;
}
.ux-swipe-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transition: all 0.3s ease;
}
.ux-swipe-dot.active {
  background: rgba(200,147,42,0.9);
  transform: scale(1.4);
  box-shadow: 0 0 6px rgba(200,147,42,0.5);
}
html[data-theme="light"] .ux-swipe-dot {
  background: rgba(0,0,0,0.15);
}
html[data-theme="light"] .ux-swipe-dot.active {
  background: rgba(120,80,20,0.8);
  box-shadow: 0 0 6px rgba(120,80,20,0.3);
}
html[data-theme="high-contrast"] .ux-swipe-dot {
  background: #666;
  border: 1px solid #fff;
}
html[data-theme="high-contrast"] .ux-swipe-dot.active {
  background: #ffdd00;
  border-color: #ffdd00;
  box-shadow: 0 0 4px #ffdd00;
}
/* Only show on mobile-ish widths */
@media (min-width: 769px) {
  .ux-swipe-dots { display: none; }
}

/* ─── SWIPE ONBOARDING TOOLTIP ─── */
.ux-swipe-onboard {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(0,0,0,0.85);
  color: #ffdd00;
  padding: 12px 20px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  white-space: pre-line;
  text-align: center;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,221,0,0.25);
  box-shadow: 0 4px 20px rgba(10,16,40,0.22);
}
.ux-swipe-onboard.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
html[data-theme="light"] .ux-swipe-onboard {
  background: rgba(255,255,255,0.92);
  color: #7c5c00;
  border-color: rgba(200,150,0,0.3);
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
html[data-theme="high-contrast"] .ux-swipe-onboard {
  background: #000;
  color: #ffdd00;
  border: 2px solid #ffdd00;
}
@media (min-width: 769px) {
  .ux-swipe-onboard { display: none; }
}

/* ─── WIDE SCREEN LAYOUT (task #53) ─── */
/* Constrain body content and add visual framing on very wide screens */
@media (min-width: 1200px) {
  body {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
  }
  body::before,
  body::after {
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    width: calc((100vw - 960px) / 2);
    pointer-events: none;
    z-index: -1;
  }
  body::before {
    left: 0;
    background: linear-gradient(90deg, rgba(15,13,26,0.95), rgba(15,13,26,0.3));
  }
  body::after {
    right: 0;
    background: linear-gradient(-90deg, rgba(15,13,26,0.95), rgba(15,13,26,0.3));
  }
}
html[data-theme="light"] body::before {
  background: linear-gradient(90deg, rgba(245,243,248,0.95), rgba(245,243,248,0.3));
}
html[data-theme="light"] body::after {
  background: linear-gradient(-90deg, rgba(245,243,248,0.95), rgba(245,243,248,0.3));
}

/* ─── HIGH-CONTRAST THEME (accessibility) ─── */
html[data-theme="high-contrast"] {
  --bg: #000000;
  --bg2: #0a0a0a;
  --card-bg: #0a0a0a;
  --card: #0a0a0a;
  --text: #ffffff;
  --muted: #e0e0e0;
  --muted2: #cccccc;
  --text-sub: #e0e0e0;
  --border: #ffffff;
  --positive: #00ff66;
  --negative: #ff4444;
  --accent: #ffdd00;
  color-scheme: dark;
}
html[data-theme="high-contrast"] body {
  background: #000;
  color: #fff;
}
html[data-theme="high-contrast"] .ux-theme-toggle {
  background: #000;
  border: 2px solid #fff;
}
html[data-theme="high-contrast"] .ux-theme-toggle:hover {
  border-color: #ffdd00;
}
html[data-theme="high-contrast"] .ux-result-card,
html[data-theme="high-contrast"] .result-card,
html[data-theme="high-contrast"] .detail-card,
html[data-theme="high-contrast"] .fortune-card,
html[data-theme="high-contrast"] .category-card,
html[data-theme="high-contrast"] .advice-card,
html[data-theme="high-contrast"] .caution-card,
html[data-theme="high-contrast"] .ux-detail-card,
html[data-theme="high-contrast"] .ux-lucky-items,
html[data-theme="high-contrast"] .ux-advice-card,
html[data-theme="high-contrast"] .ux-caution-card,
html[data-theme="high-contrast"] .ux-message-card,
html[data-theme="high-contrast"] .ux-message-highlight,
html[data-theme="high-contrast"] .lucky-item {
  background: #0a0a0a;
  border: 2px solid #fff;
  color: #fff;
  box-shadow: none;
}
html[data-theme="high-contrast"] .ux-share-btn,
html[data-theme="high-contrast"] .ux-cross-nav-card,
html[data-theme="high-contrast"] .ux-history-panel,
html[data-theme="high-contrast"] .ux-history-card,
html[data-theme="high-contrast"] .ux-compat-section,
html[data-theme="high-contrast"] .ux-streak-badge,
html[data-theme="high-contrast"] .ux-streak-milestone,
html[data-theme="high-contrast"] .ux-streak-freeze-used,
html[data-theme="high-contrast"] .ux-keyword-anchor {
  background: #0a0a0a;
  border: 2px solid #fff;
  color: #fff;
}
html[data-theme="high-contrast"] .ux-share-btn:hover,
html[data-theme="high-contrast"] .ux-cross-nav-card:hover {
  border-color: #ffdd00;
  color: #ffdd00;
}
html[data-theme="high-contrast"] .input-group input,
html[data-theme="high-contrast"] .input-group select,
html[data-theme="high-contrast"] .input-group textarea,
html[data-theme="high-contrast"] .ux-compat-section input,
html[data-theme="high-contrast"] .ux-bday-wrap input {
  background: #000;
  border: 2px solid #fff;
  color: #fff;
}
html[data-theme="high-contrast"] .input-group input:focus,
html[data-theme="high-contrast"] .input-group select:focus,
html[data-theme="high-contrast"] .input-group textarea:focus,
html[data-theme="high-contrast"] .ux-bday-wrap input:focus {
  border-color: #ffdd00;
  outline: 2px solid #ffdd00;
}
html[data-theme="high-contrast"] .gender-btn {
  background: #000;
  border: 2px solid #fff;
  color: #fff;
}
html[data-theme="high-contrast"] .gender-btn:hover {
  border-color: #ffdd00;
}
html[data-theme="high-contrast"] .gender-btn.active {
  background: #ffdd00;
  color: #000;
  border-color: #ffdd00;
}
html[data-theme="high-contrast"] .ux-toast {
  background: #000;
  color: #fff;
  border: 2px solid #ffdd00;
}
html[data-theme="high-contrast"] .ux-section-divider::before {
  background: linear-gradient(90deg, transparent, #fff, transparent);
}
html[data-theme="high-contrast"] .ux-detail-blur-overlay {
  background: linear-gradient(transparent 20%, #000 90%);
}
/* Remove decorative particles and gradients for clarity */
html[data-theme="high-contrast"] .ux-result-particles,
html[data-theme="high-contrast"] .ux-rank-particles,
html[data-theme="high-contrast"] .ux-rank-effect,
html[data-theme="high-contrast"] .bg-layer {
  display: none;
}
/* Remove gradient text effects for readability */
html[data-theme="high-contrast"] * {
  -webkit-text-fill-color: inherit !important;
  background-clip: initial !important;
}
/* Ensure links are clearly visible */
html[data-theme="high-contrast"] a {
  color: #ffdd00;
  text-decoration: underline;
}
html[data-theme="high-contrast"] a:hover {
  color: #fff;
}
html[data-theme="high-contrast"] a:visited {
  color: #e0a0ff;
}
/* Loading screen */
html[data-theme="high-contrast"] .screen-loading,
html[data-theme="high-contrast"] [id*="loading"] {
  background: #000;
  color: #fff;
}
/* Home/welcome screen */
html[data-theme="high-contrast"] .screen-home,
html[data-theme="high-contrast"] [id*="home"] {
  color: #fff;
}
/* Disclaimer */
html[data-theme="high-contrast"] .ux-disclaimer {
  color: #e0e0e0;
}
/* Scrollbar */
html[data-theme="high-contrast"] ::-webkit-scrollbar-track {
  background: #000;
}
html[data-theme="high-contrast"] ::-webkit-scrollbar-thumb {
  background: #fff;
}
/* Fallback error UI */
html[data-theme="high-contrast"] .ux-fallback-btn {
  background: #000;
  color: #ffdd00;
  border: 2px solid #ffdd00;
}
/* Focus visible - extra prominent in high contrast */
html[data-theme="high-contrast"] :focus-visible {
  outline: 3px solid #ffdd00;
  outline-offset: 3px;
}
/* Wide screen vignettes */
html[data-theme="high-contrast"] body::before,
html[data-theme="high-contrast"] body::after {
  display: none;
}
/* Score ring */
html[data-theme="high-contrast"] .ux-score-ring,
html[data-theme="high-contrast"] .score-ring {
  border-color: #ffdd00;
}
/* Skip-to-content */
html[data-theme="high-contrast"] .ux-skip-to-content {
  background: #ffdd00;
  color: #000;
}
/* btn-divine CTA */
html[data-theme="high-contrast"] .btn-divine {
  border: 2px solid #ffdd00;
  color: #ffdd00;
}

/* ─── PRINT STYLESHEET ─── */
@media print {
  /* Hide non-essential UI */
  .ux-theme-toggle, .ux-skip-to-content,
  .ux-share-panel, .ux-cross-nav, .ux-save-image-btn,
  .ux-error-fallback, .ux-loading-spinner, .ux-result-particles,
  .ux-rank-particles, .ux-rank-effect, .bg-layer,
  .btn-divine, .btn-draw, #screen-home, #screen-loading,
  #screen-welcome, .screen-selection, nav, footer,
  button[onclick*="reload"], .ux-history-panel,
  .ux-swipe-dots { display: none !important; }

  /* Show result screen */
  #screen-result, .screen-result { display: block !important; }
  .screen { min-height: auto !important; padding: 0 !important; }

  /* Clean print layout */
  body {
    background: #fff !important;
    color: #222 !important;
    font-size: 12pt !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 16px !important;
  }
  body::before, body::after { display: none !important; }

  /* Readable cards */
  .ux-result-card, .ux-detail-card, .ux-lucky-items,
  .ux-advice-card, .ux-caution-card, .ux-message-card,
  .ux-message-highlight, [class*="result-card"], [class*="detail-card"] {
    background: #fff !important;
    color: #222 !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Remove gradient text */
  * { -webkit-text-fill-color: initial !important; background-clip: initial !important; }

  /* Remove animations */
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }

  /* Score ring: ensure visibility */
  .ux-score-ring, .score-ring { border-color: #333 !important; }
}

/* ─── PAGE TRANSITION ANIMATIONS (Removed - already defined earlier) ─── */
/* Fade-in when screens become visible (hidden class removed) */
@keyframes uxScreenFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Loading screen gets a gentler fade (no translateY since it's centered) */
.screen-loading:not(.hidden),
[id*="loading"]:not(.hidden) {
  animation: uxScreenFadeIn 0.3s ease-out both;
}
/* Result screen gets a slightly slower entrance for dramatic effect */
.screen-result:not(.hidden),
[id="screen-result"]:not(.hidden) {
  animation: uxScreenFadeIn 0.5s ease-out both;
}

/* ─── SEASONAL THEMES ─── */
/* Spring (Mar-May): Cherry blossom petals */
@keyframes ux-sakura-fall {
  0% { transform: translate(0, -20px) rotate(0deg) scale(1); opacity: 0; }
  10% { opacity: 0.8; }
  50% { transform: translate(30px, 50vh) rotate(180deg) scale(0.9); opacity: 0.6; }
  100% { transform: translate(-20px, 105vh) rotate(360deg) scale(0.7); opacity: 0; }
}
@keyframes ux-sakura-sway {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(15px); }
}
.ux-seasonal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999;
  overflow: hidden;
  contain: strict;
}
.ux-sakura-petal {
  position: absolute;
  top: -20px;
  width: 12px;
  height: 12px;
  background: radial-gradient(ellipse at 30% 30%, #ffb7c5, #ff8fa3);
  border-radius: 50% 0 50% 50%;
  opacity: 0;
  animation: ux-sakura-fall linear infinite, ux-sakura-sway ease-in-out infinite;
  will-change: transform, opacity;
}
.ux-sakura-petal:nth-child(odd) {
  background: radial-gradient(ellipse at 30% 30%, #ffc8d6, #ffaabb);
  width: 10px;
  height: 10px;
}
html[data-theme="high-contrast"] .ux-seasonal-container {
  display: none;
}
/* Summer (Jun-Aug): Fireflies */
@keyframes ux-firefly-float {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  20% { opacity: 0.9; }
  50% { transform: translate(40px, -30px) scale(1.2); opacity: 0.7; }
  80% { opacity: 0.9; }
  100% { transform: translate(-30px, -60px) scale(0.8); opacity: 0; }
}
.ux-firefly {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #ffe066;
  border-radius: 50%;
  box-shadow: 0 0 6px 2px rgba(255,224,102,0.6), 0 0 12px 4px rgba(255,224,102,0.3);
  opacity: 0;
  animation: ux-firefly-float ease-in-out infinite;
  will-change: transform, opacity;
}
/* Autumn (Sep-Nov): Falling leaves */
@keyframes ux-leaf-fall {
  0% { transform: translate(0, -20px) rotate(0deg); opacity: 0; }
  10% { opacity: 0.7; }
  50% { transform: translate(-25px, 50vh) rotate(200deg); opacity: 0.5; }
  100% { transform: translate(20px, 105vh) rotate(400deg); opacity: 0; }
}
.ux-autumn-leaf {
  position: absolute;
  top: -20px;
  font-size: 14px;
  opacity: 0;
  animation: ux-leaf-fall linear infinite;
  will-change: transform, opacity;
}
/* Winter (Dec-Feb): Snowflakes */
@keyframes ux-snow-fall {
  0% { transform: translate(0, -10px) rotate(0deg); opacity: 0; }
  10% { opacity: 0.8; }
  100% { transform: translate(15px, 105vh) rotate(360deg); opacity: 0; }
}
.ux-snowflake {
  position: absolute;
  top: -10px;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
  animation: ux-snow-fall linear infinite;
  will-change: transform, opacity;
}
.ux-snowflake:nth-child(odd) {
  width: 4px;
  height: 4px;
  background: rgba(200,220,255,0.9);
}

/* ─── REDUCED MOTION (accessibility) ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ux-result-particles, .ux-rank-particles, .ux-rank-effect,
  .bg-layer, .ux-particle, .ux-rank-particle,
  .star, .ux-rank-star, .ux-rank-shimmer, .ux-confetti-canvas { display: none !important; }
  .ux-loading-spinner { animation: spin 1.2s linear infinite !important; }
}

/* ─── REGION PAGES: LIGHT THEME ─── */
html[data-theme="light"] .wrapper { color: #1a1a2e; }
html[data-theme="light"] .back-link { color: #666; }
html[data-theme="light"] .back-link:hover { color: #8b6914; }
html[data-theme="light"] .country-name { -webkit-text-fill-color: #7c5c00; color: #7c5c00; background: none; }
html[data-theme="light"] .country-name-ja { color: #888; }
html[data-theme="light"] .country-desc { color: #666; }
html[data-theme="light"] .divider::before,
html[data-theme="light"] .divider::after { background: linear-gradient(to right, transparent, #ddd, transparent); }
html[data-theme="light"] .divider-icon { color: #b8960f; }
html[data-theme="light"] .section-label { color: #999; }
html[data-theme="light"] .item-card {
  background: #fff;
  border-color: #e0dcd4;
  color: #1a1a2e;
}
html[data-theme="light"] .item-card.open:hover {
  border-color: rgba(200,147,42,0.5);
  background: rgba(200,147,42,0.05);
}
html[data-theme="light"] .item-icon-bg { background: linear-gradient(135deg, rgba(200,147,42,0.12), rgba(200,147,42,0.08)); }
html[data-theme="light"] .item-name-en { color: #999; }
html[data-theme="light"] .item-name-ja { color: #1a1a2e; }
html[data-theme="light"] .item-desc { color: #666; }
html[data-theme="light"] .badge-open { background: rgba(200,147,42,0.1); color: #8b6914; border-color: rgba(200,147,42,0.3); }
html[data-theme="light"] .badge-soon { background: rgba(100,100,100,0.08); color: #999; border-color: rgba(100,100,100,0.2); }
html[data-theme="light"] .item-arrow { color: #ccc; }
html[data-theme="light"] .soon-overlay { background: rgba(255,255,255,0.5); }
html[data-theme="light"] .soon-text { color: #8b6914; }
html[data-theme="light"] .bottom-label { color: #999; }
html[data-theme="light"] .bg-layer { opacity: 0; }

/* ─── REGION PAGES: HIGH-CONTRAST THEME ─── */
html[data-theme="high-contrast"] .wrapper { color: #fff; }
html[data-theme="high-contrast"] .back-link { color: #ffdd00; text-decoration: underline; }
html[data-theme="high-contrast"] .country-name { -webkit-text-fill-color: #ffdd00; color: #ffdd00; background: none; }
html[data-theme="high-contrast"] .country-name-ja { color: #ccc; }
html[data-theme="high-contrast"] .country-desc { color: #ccc; }
html[data-theme="high-contrast"] .divider::before,
html[data-theme="high-contrast"] .divider::after { background: linear-gradient(to right, transparent, #fff, transparent); }
html[data-theme="high-contrast"] .divider-icon { color: #ffdd00; opacity: 1; }
html[data-theme="high-contrast"] .section-label { color: #ccc; }
html[data-theme="high-contrast"] .item-card {
  background: #000;
  border: 2px solid #fff;
  color: #fff;
  box-shadow: none;
}
html[data-theme="high-contrast"] .item-card.open:hover {
  border-color: #ffdd00;
  background: #000;
}
html[data-theme="high-contrast"] .item-icon-bg { background: transparent; border: 1px solid #fff; }
html[data-theme="high-contrast"] .item-name-en { color: #ccc; }
html[data-theme="high-contrast"] .item-name-ja { color: #fff; }
html[data-theme="high-contrast"] .item-desc { color: #ccc; }
html[data-theme="high-contrast"] .badge-open { background: transparent; color: #ffdd00; border-color: #ffdd00; }
html[data-theme="high-contrast"] .badge-soon { background: transparent; color: #999; border-color: #999; }
html[data-theme="high-contrast"] .item-arrow { color: #ffdd00; }
html[data-theme="high-contrast"] .soon-overlay { background: rgba(0,0,0,0.6); }
html[data-theme="high-contrast"] .soon-text { color: #ffdd00; }
html[data-theme="high-contrast"] .bottom-label { color: #ccc; }
html[data-theme="high-contrast"] .bg-layer { display: none; }
html[data-theme="high-contrast"] .stars { display: none; }

/* ─── REFLECTION CARD (Post-result wellness prompts) ─── */
/**
 * Accordion-style reflection section shown after divination results.
 * - Collapsed by default; expands on click/tap.
 * - Fade-in animation on questions (respects prefers-reduced-motion).
 * - Glass-morphism card consistent with existing UX patterns.
 * - Light/high-contrast theme variants included.
 */
.ux-reflection {
  margin: 20px auto;
  max-width: 360px;
}

/* Toggle button (collapsed/expanded trigger) */
.ux-reflection-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--ux-radius-xl, 14px);
  color: var(--text, #eee);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition:
    background var(--ux-transition-fast, 0.2s ease),
    border-color var(--ux-transition-fast, 0.2s ease);
}
.ux-reflection-toggle:hover,
.ux-reflection-toggle[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
}

.ux-reflection-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.ux-reflection-title {
  flex: 1;
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: 700;
  color: var(--ux-accent, #e8b84a);
  text-transform: uppercase;
}
.ux-reflection-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--ux-transition-fast, 0.2s ease);
  color: var(--ux-accent, #e8b84a);
}
.ux-reflection-toggle[aria-expanded="true"] .ux-reflection-chevron {
  transform: rotate(180deg);
}
.ux-reflection-tap {
  font-size: 11px;
  color: var(--text-sub, #999);
  margin-inline-start: 4px;
}
.ux-reflection-toggle[aria-expanded="true"] .ux-reflection-tap {
  display: none;
}

/* Expandable panel */
.ux-reflection-panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s ease;
}
.ux-reflection-panel.open {
  max-height: 600px;
  opacity: 1;
}

/* Glass-morphism card */
.ux-reflection-card {
  margin-block-start: 8px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--ux-radius-xl, 14px);
}

/* Question list */
.ux-reflection-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ux-reflection-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text, #e8e0d0);
  opacity: 0;
  transform: translateY(10px);
  animation: uxReflectionFadeIn 0.45s ease forwards;
}
.ux-reflection-item:nth-child(1) { animation-delay: 0.05s; }
.ux-reflection-item:nth-child(2) { animation-delay: 0.15s; }
.ux-reflection-item:nth-child(3) { animation-delay: 0.25s; }

/* Number badge */
.ux-reflection-num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(232, 184, 74, 0.15);
  border: 1px solid rgba(232, 184, 74, 0.3);
  color: var(--ux-accent, #e8b84a);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block-start: 2px;
}

@keyframes uxReflectionFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* prefers-reduced-motion: disable all animations */
@media (prefers-reduced-motion: reduce) {
  .ux-reflection-panel {
    transition: none;
  }
  .ux-reflection-chevron {
    transition: none;
  }
  .ux-reflection-item {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Light theme */
html[data-theme="light"] .ux-reflection-toggle {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.12);
  color: #222;
}
html[data-theme="light"] .ux-reflection-card {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 0, 0, 0.1);
}
html[data-theme="light"] .ux-reflection-item {
  color: #333;
}
html[data-theme="light"] .ux-reflection-num {
  background: rgba(139, 105, 20, 0.12);
  border-color: rgba(139, 105, 20, 0.25);
}

/* High-contrast theme */
html[data-theme="high-contrast"] .ux-reflection-toggle {
  background: #000;
  border-color: #ffdd00;
  color: #fff;
}
html[data-theme="high-contrast"] .ux-reflection-card {
  background: #000;
  border-color: #ffdd00;
}
html[data-theme="high-contrast"] .ux-reflection-title { color: #ffdd00; }
html[data-theme="high-contrast"] .ux-reflection-chevron { color: #ffdd00; }
html[data-theme="high-contrast"] .ux-reflection-item { color: #fff; }
html[data-theme="high-contrast"] .ux-reflection-num {
  background: transparent;
  border-color: #ffdd00;
  color: #ffdd00;
}

/* ─── PWA INSTALL BANNER ─── */
.ux-pwa-banner {
  position: fixed;
  bottom: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: min(90vw, 420px);
  background: var(--abyss-1000, rgba(10, 8, 22, 0.95));
  backdrop-filter: blur(12px);
  border: 1px solid var(--gold-bright, rgba(232, 184, 74, 0.3));
  border-radius: 4px;
  padding: 16px 20px;
  z-index: 9999;
  transition: bottom 0.3s ease;
  text-align: center;
}
.ux-pwa-banner.ux-pwa-show { bottom: 20px; }
.ux-pwa-banner p {
  margin: 0 0 12px;
  color: #e0d0ff;
  font-size: 14px;
  line-height: 1.5;
}
.ux-pwa-actions { display: flex; gap: 10px; justify-content: center; }
.ux-pwa-yes {
  background: linear-gradient(135deg, var(--gold-bright, #e8b84a), var(--gold-deep, #c8932a));
  color: var(--abyss-1000, #0a0816);
  border: none;
  border-radius: 2px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.ux-pwa-no {
  background: transparent;
  color: var(--lilac-soft, #c4b8d8);
  border: 1px solid rgba(196, 184, 216, 0.2);
  border-radius: 2px;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .ux-pwa-banner { transition: none; }
}

/* ─── ABOUT DIVINATION SECTION ─── */
/**
 * SEO-focused "About this divination" accordion.
 * Text stays in DOM (max-height:0 + overflow:hidden) for crawler indexing.
 * Triggered by renderAboutDivination() in aimiru-ux.js.
 */

/* Outer wrapper */
.ux-about-divination {
  margin: 32px auto 0;
  max-width: 480px;
  padding: 0 4px;
}

/* Toggle button */
.ux-about-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--ux-radius-xl, 14px);
  color: var(--text, #eee);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background var(--ux-transition-fast, 0.2s ease),
              border-color var(--ux-transition-fast, 0.2s ease);
}
.ux-about-toggle:hover,
.ux-about-toggle[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
}

/* Toggle inner elements */
.ux-about-toggle-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.ux-about-toggle-titles {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.ux-about-toggle-main {
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: 700;
  color: var(--ux-accent, #e8b84a);
  text-transform: uppercase;
}
.ux-about-toggle-sub {
  font-size: 11px;
  color: var(--text-sub, #999);
}
.ux-about-toggle[aria-expanded="true"] .ux-about-toggle-sub {
  display: none;
}

/* Chevron */
.ux-about-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--ux-transition-fast, 0.2s ease);
  color: var(--ux-accent, #e8b84a);
}
.ux-about-toggle[aria-expanded="true"] .ux-about-chevron {
  transform: rotate(180deg);
}

/* Expandable panel — max-height keeps text in DOM for SEO crawlers */
.ux-about-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.35s ease;
  opacity: 0;
}
.ux-about-panel.open {
  max-height: 2000px;
  opacity: 1;
}

/* Glassmorphism card */
.ux-about-card {
  margin-block-start: 8px;
  padding: 20px 18px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--ux-radius-xl, 14px);
}

/* Sub-sections */
.ux-about-sections {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Section heading */
.ux-about-section-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-block-end: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ux-accent, #e8b84a);
}
.ux-about-section-icon {
  font-size: 14px;
  flex-shrink: 0;
}

/* Section text */
.ux-about-section-text {
  font-size: 13px;
  line-height: 1.75;
  color: var(--text, #e8e0d0);
  opacity: 0;
  transform: translateY(8px);
  animation: uxAboutFadeIn 0.4s ease forwards;
}
.ux-about-sections .ux-about-section:nth-child(1) .ux-about-section-text { animation-delay: 0.06s; }
.ux-about-sections .ux-about-section:nth-child(2) .ux-about-section-text { animation-delay: 0.14s; }
.ux-about-sections .ux-about-section:nth-child(3) .ux-about-section-text { animation-delay: 0.22s; }

@keyframes uxAboutFadeIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Divider between sections */
.ux-about-section + .ux-about-section {
  padding-block-start: 20px;
  border-block-start: 1px solid rgba(255, 255, 255, 0.08);
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .ux-about-panel { transition: none; }
  .ux-about-toggle .ux-about-chevron { transition: none; }
  .ux-about-section-text { animation: none; opacity: 1; transform: none; }
}

/* Light theme */
html[data-theme="light"] .ux-about-toggle {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.12);
  color: #222;
}
html[data-theme="light"] .ux-about-card {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(0, 0, 0, 0.1);
}
html[data-theme="light"] .ux-about-section-text { color: #333; }
html[data-theme="light"] .ux-about-section + .ux-about-section {
  border-block-start-color: rgba(0, 0, 0, 0.08);
}

/* High-contrast theme */
html[data-theme="high-contrast"] .ux-about-toggle {
  background: #000;
  border-color: #ffdd00;
  color: #fff;
}
html[data-theme="high-contrast"] .ux-about-card {
  background: #000;
  border-color: #ffdd00;
}
html[data-theme="high-contrast"] .ux-about-toggle-main { color: #ffdd00; }
html[data-theme="high-contrast"] .ux-about-chevron { color: #ffdd00; }
html[data-theme="high-contrast"] .ux-about-section-heading { color: #ffdd00; }
html[data-theme="high-contrast"] .ux-about-section-text { color: #fff; }
html[data-theme="high-contrast"] .ux-about-section + .ux-about-section {
  border-block-start-color: #ffdd00;
}

/* ─── COLLECTION (Hub page — past results carousel) ─── */
.ux-collection {
  margin-block: 32px;
  padding-block-end: 4px;
}
/* A4 (Wave 1) 2026-05-02: empty-state placeholder for collection. */
.ux-collection-empty .ux-collection-empty-body{
  display:flex;align-items:center;gap:14px;
  padding:20px 22px;
  background:var(--card,rgba(255,255,255,.04));
  border:1px dashed color-mix(in oklab, var(--gold-bright,#e8c563) 32%, transparent);
  border-radius:4px;
}
.ux-collection-empty .ux-collection-empty-icon{
  font-size:26px;line-height:1;flex:0 0 auto;color:var(--gold-bright,#e8c563);opacity:.85;
}
.ux-collection-empty .ux-collection-empty-text{
  margin:0;font-size:13px;color:var(--muted,#b8bedb);line-height:1.6;
}
@media (max-width:480px){
  .ux-collection-empty .ux-collection-empty-body{padding:16px}
  .ux-collection-empty .ux-collection-empty-text{font-size:12px}
}

.ux-collection-header {
  display: flex;
  align-items: center;
  margin-block-end: 14px;
  padding-inline: 4px;
}

.ux-collection-title {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--muted2, #8a82a8);
  text-transform: uppercase;
  font-weight: 700;
  margin: 0;
}

/* Horizontal scrollable track with snap */
.ux-collection-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-block-end: 8px;
  /* Hide scrollbar — decorative, content still accessible by scrolling */
  scrollbar-width: none;
}
.ux-collection-track::-webkit-scrollbar {
  display: none;
}

/* Individual result card */
.ux-collection-card {
  flex-shrink: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 120px;
  padding: 16px 10px;
  border-radius: 4px;
  text-decoration: none;
  color: var(--text, #f0eef8);
  /* Glassmorphism */
  background: linear-gradient(
    135deg,
    rgba(139, 126, 200, 0.10),
    rgba(168, 155, 212, 0.06)
  );
  border: 1px solid rgba(168, 155, 212, 0.20);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.ux-collection-card:hover,
.ux-collection-card:focus-visible {
  border-color: rgba(139, 126, 200, 0.50);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(139, 126, 200, 0.18);
  outline: none;
}
.ux-collection-card:focus-visible {
  outline: 2px solid var(--accent, #1d4ed8);
  outline-offset: 2px;
}

.ux-collection-emoji {
  font-size: 28px;
  line-height: 1;
}

.ux-collection-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
  text-align: center;
}

.ux-collection-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent2, #1e40af);
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.ux-collection-result {
  font-size: 10px;
  color: var(--text, #f0eef8);
  line-height: 1.4;
  /* Allow up to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
  word-break: break-word;
}

.ux-collection-date {
  font-size: 9px;
  color: var(--muted2, #8a82a8);
  letter-spacing: 0.3px;
}

/* "Show more" button row */
.ux-collection-more {
  text-align: center;
  margin-block-start: 10px;
}

.ux-collection-toggle {
  background: none;
  border: 1px solid rgba(168, 155, 212, 0.20);
  border-radius: 2px;
  color: var(--muted2, #8a82a8);
  font-size: 11px;
  padding: 6px 18px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  font-family: inherit;
}
.ux-collection-toggle:hover {
  border-color: var(--accent, #1d4ed8);
  color: var(--accent, #1d4ed8);
}
.ux-collection-toggle:focus-visible {
  outline: 2px solid var(--accent, #1d4ed8);
  outline-offset: 2px;
}

/* Light theme overrides */
html[data-theme="light"] .ux-collection-card {
  background: linear-gradient(135deg, rgba(139, 126, 200, 0.08), rgba(168, 155, 212, 0.04));
  border-color: rgba(139, 126, 200, 0.18);
  color: #222;
}
html[data-theme="light"] .ux-collection-name { color: #5a4e9a; }
html[data-theme="light"] .ux-collection-result { color: #333; }
html[data-theme="light"] .ux-collection-date { color: #888; }
html[data-theme="light"] .ux-collection-title { color: #666; }

/* High-contrast theme overrides */
html[data-theme="high-contrast"] .ux-collection-card {
  background: #000;
  border: 2px solid #fff;
  color: #fff;
}
html[data-theme="high-contrast"] .ux-collection-card:hover,
html[data-theme="high-contrast"] .ux-collection-card:focus-visible {
  border-color: #ffdd00;
}
html[data-theme="high-contrast"] .ux-collection-name { color: #ffdd00; }
html[data-theme="high-contrast"] .ux-collection-date { color: #ccc; }
html[data-theme="high-contrast"] .ux-collection-title { color: #ffdd00; }
html[data-theme="high-contrast"] .ux-collection-toggle {
  border-color: #fff;
  color: #fff;
}
html[data-theme="high-contrast"] .ux-collection-toggle:hover {
  border-color: #ffdd00;
  color: #ffdd00;
}

/* ─── VIEW TRANSITIONS API (Chrome 111+ cross-document) ─── */
/**
 * CSS-only cross-document (MPA) transition via Navigation API.
 * Applied automatically on same-origin page navigations in supporting browsers.
 * Browsers that don't support @view-transition simply ignore this block.
 */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: ux-vt-fade-out 0.2s ease-out;
}
::view-transition-new(root) {
  animation: ux-vt-fade-in 0.3s ease-in;
}
@keyframes ux-vt-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes ux-vt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Respect user's motion preference */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* ─── SOCIAL PROOF COUNTER ─── */
/**
 * "N people divined today" badge displayed at the top of divination input screens.
 * Subtle and unobtrusive — reinforces that others are using the app without
 * dominating the page.
 */
.ux-social-proof {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(200, 147, 42, 0.08);
  border: 1px solid rgba(200, 147, 42, 0.2);
  border-radius: 4px;
  font-size: 12px;
  color: var(--ux-primary-gold, #c8932a);
  letter-spacing: 0.4px;
  line-height: 1.4;
  user-select: none;
  pointer-events: none;
}
.ux-social-proof-icon {
  font-size: 13px;
  line-height: 1;
}
.ux-social-proof-count {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Count-up animation target */
@keyframes ux-social-proof-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ux-social-proof {
  animation: ux-social-proof-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Light theme */
html[data-theme="light"] .ux-social-proof {
  background: rgba(139, 105, 20, 0.07);
  border-color: rgba(139, 105, 20, 0.18);
  color: var(--ux-accent, #8b6914);
}

/* High contrast theme */
html[data-theme="high-contrast"] .ux-social-proof {
  background: transparent;
  border: 2px solid #ffdd00;
  color: #ffdd00;
}

/* Wrapper for centering within a page section */
.ux-social-proof-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

/* Suppress animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ux-social-proof {
    animation: none;
  }
}

/* ─── NOTIFICATION PERMISSION DIALOG ─── */
/**
 * Two-step notification permission UI.
 * Appears 30s after a result screen — after user has seen value.
 * Dismisses gracefully with backdrop click or "Not now" button.
 */
.ux-notif-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5,8,23,0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: var(--ux-z-modal);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ux-transition-base);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.ux-notif-overlay.ux-notif-show {
  opacity: 1;
  pointer-events: auto;
}

.ux-notif-card {
  width: 100%;
  max-width: 480px;
  background: linear-gradient(160deg, #1a1620 0%, #12101a 100%);
  border: 1px solid rgba(232, 184, 74, 0.25);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  padding: 28px 24px 32px;
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ux-notif-overlay.ux-notif-show .ux-notif-card {
  transform: translateY(0);
}

.ux-notif-icon {
  font-size: 36px;
  margin-bottom: 12px;
  line-height: 1;
}

.ux-notif-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ux-primary-gold);
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.ux-notif-body {
  font-size: 13px;
  color: var(--ux-text-secondary, #d4c9b0);
  line-height: 1.6;
  margin-bottom: 22px;
}

.ux-notif-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.ux-notif-accept,
.ux-notif-decline {
  flex: 1;
  max-width: 160px;
  padding: 12px 16px;
  border-radius: var(--ux-radius-xl);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--ux-transition-fast), transform var(--ux-transition-fast);
  font-family: inherit;
  letter-spacing: 0.3px;
}
.ux-notif-accept:hover,
.ux-notif-decline:hover {
  opacity: 0.85;
}
.ux-notif-accept:active,
.ux-notif-decline:active {
  transform: scale(0.97);
}

.ux-notif-accept {
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.9), rgba(200, 147, 42, 0.9));
  border: 1px solid rgba(232, 184, 74, 0.5);
  color: #1a1620;
}

.ux-notif-decline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--ux-text-subtle, #8a7a5a);
}

/* Focus states */
.ux-notif-accept:focus-visible {
  outline: 3px solid var(--ux-primary-gold);
  outline-offset: 2px;
}
.ux-notif-decline:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.4);
  outline-offset: 2px;
}

/* Light theme */
html[data-theme="light"] .ux-notif-card {
  background: linear-gradient(160deg, #faf7ef 0%, #f0ead8 100%);
  border-color: rgba(139, 105, 20, 0.3);
}
html[data-theme="light"] .ux-notif-title {
  color: var(--ux-primary-gold-dark, #c8932a);
}
html[data-theme="light"] .ux-notif-body {
  color: #555;
}
html[data-theme="light"] .ux-notif-accept {
  background: linear-gradient(135deg, #c8932a, #a07020);
  border-color: #a07020;
  color: #fff;
}
html[data-theme="light"] .ux-notif-decline {
  border-color: rgba(0, 0, 0, 0.15);
  color: #888;
}

/* High-contrast theme */
html[data-theme="high-contrast"] .ux-notif-card {
  background: #000;
  border: 2px solid #fff;
}
html[data-theme="high-contrast"] .ux-notif-title {
  color: #ffdd00;
}
html[data-theme="high-contrast"] .ux-notif-body {
  color: #fff;
}
html[data-theme="high-contrast"] .ux-notif-accept {
  background: #ffdd00;
  border-color: #ffdd00;
  color: #000;
}
html[data-theme="high-contrast"] .ux-notif-decline {
  border-color: #fff;
  color: #fff;
}

/* RTL languages (ar, he, fa) */
[dir="rtl"] .ux-notif-actions {
  flex-direction: row-reverse;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ux-notif-overlay,
  .ux-notif-card {
    transition: none;
  }
}

/* ─── DAILY FORTUNE CARD ────────────────────────────────────────── */

.ux-fortune-wrap {
  margin: 0 0 24px;
}

.ux-fortune-card {
  background: linear-gradient(135deg, rgba(139,126,200,.10), rgba(232,160,192,.06));
  border: 1px solid rgba(168,155,212,.25);
  border-radius: 4px;
  padding: 18px 20px 14px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.ux-fortune-card:hover,
.ux-fortune-card:focus-visible {
  border-color: rgba(168,155,212,.5);
  box-shadow: 0 4px 20px rgba(139,126,200,.12);
}
.ux-fortune-card:focus-visible {
  outline: 2px solid var(--accent, #1d4ed8);
  outline-offset: 2px;
}

/* Header row */
.ux-fortune-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.ux-fortune-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ux-fortune-emoji {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}
.ux-fortune-sign-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ux-fortune-title {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--muted2, #8a82a8);
  font-weight: 700;
  text-transform: uppercase;
}
.ux-fortune-sign {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent2, #1e40af);
  letter-spacing: .04em;
}
.ux-fortune-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.ux-fortune-stars {
  display: flex;
  gap: 3px;
}
.ux-fortune-star {
  font-size: 16px;
  color: rgba(168,155,212,.25);
  transition: color .2s;
}
.ux-fortune-star.on {
  color: #e8b84a;
  text-shadow: 0 0 6px rgba(232,184,74,.4);
}
.ux-fortune-date {
  font-size: 10px;
  color: var(--muted2, #8a82a8);
  letter-spacing: .5px;
}

/* Keywords */
.ux-fortune-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.ux-fortune-kw {
  display: inline-block;
  background: rgba(139,126,200,.12);
  border: 1px solid rgba(168,155,212,.2);
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--accent3, #6a7bab);
  letter-spacing: .04em;
  font-weight: 500;
}

/* Hint text */
.ux-fortune-hint {
  font-size: 11px;
  color: var(--muted2, #8a82a8);
  letter-spacing: .5px;
  text-align: right;
}

/* Detail panel */
.ux-fortune-detail {
  border: 1px solid rgba(168,155,212,.18);
  border-top: none;
  border-radius: 0 0 16px 16px;
  background: rgba(22,19,41,.7);
  overflow: hidden;
}
.ux-fortune-detail.hidden {
  display: none;
}
.ux-fortune-detail-inner {
  padding: 16px 20px 14px;
}
.ux-fortune-detail-row {
  margin-bottom: 14px;
}
.ux-fortune-detail-row--inline {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.ux-fortune-detail-label {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--muted2, #8a82a8);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ux-fortune-detail-advice {
  font-size: 13px;
  color: var(--text, #f0eef8);
  line-height: 1.7;
  margin: 0;
  font-style: italic;
}
.ux-fortune-detail-item {
  display: flex;
  flex-direction: column;
  min-width: 100px;
}
.ux-fortune-detail-color {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text, #f0eef8);
}
.ux-fortune-color-dot {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  flex-shrink: 0;
}
.ux-fortune-detail-number {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent2, #1e40af);
  letter-spacing: .04em;
}
.ux-fortune-close {
  display: block;
  width: 100%;
  padding: 8px;
  background: none;
  border: 1px solid rgba(168,155,212,.15);
  border-radius: 2px;
  color: var(--muted2, #8a82a8);
  font-size: 11px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: border-color .2s, color .2s;
  font-family: inherit;
  margin-top: 4px;
}
.ux-fortune-close:hover {
  border-color: rgba(168,155,212,.35);
  color: var(--accent2, #1e40af);
}

/* High-contrast overrides */
html[data-theme="high-contrast"] .ux-fortune-card {
  background: #000;
  border: 2px solid #fff;
}
html[data-theme="high-contrast"] .ux-fortune-card:hover,
html[data-theme="high-contrast"] .ux-fortune-card:focus-visible {
  border-color: #ffdd00;
  box-shadow: none;
}
html[data-theme="high-contrast"] .ux-fortune-title { color: #ccc; }
html[data-theme="high-contrast"] .ux-fortune-sign { color: #ffdd00; }
html[data-theme="high-contrast"] .ux-fortune-star { color: #555; }
html[data-theme="high-contrast"] .ux-fortune-star.on { color: #ffdd00; text-shadow: none; }
html[data-theme="high-contrast"] .ux-fortune-kw {
  background: #000;
  border: 1.5px solid #fff;
  color: #fff;
}
html[data-theme="high-contrast"] .ux-fortune-detail {
  background: #000;
  border: 2px solid #fff;
  border-top: none;
}
html[data-theme="high-contrast"] .ux-fortune-detail-advice { color: #fff; }
html[data-theme="high-contrast"] .ux-fortune-detail-number { color: #ffdd00; }
html[data-theme="high-contrast"] .ux-fortune-close {
  border-color: #fff;
  color: #fff;
}
html[data-theme="high-contrast"] .ux-fortune-close:hover {
  border-color: #ffdd00;
  color: #ffdd00;
}

/* Responsive */
@media (max-width: 480px) {
  .ux-fortune-header { flex-wrap: wrap; }
  .ux-fortune-right { flex-direction: row; align-items: center; gap: 10px; }
  .ux-fortune-detail-row--inline { flex-direction: column; gap: 12px; }
}

/* ─── MOBILE UX FIXES (QA Round 2) ─── */
/**
 * iOS auto-zoom prevention: inputs must be >= 16px
 * Without this, iOS Safari zooms in when user focuses an input field
 * with font-size < 16px, which breaks the layout and is disorienting.
 * Note: Each page's inline <style> overrides this, so pages with
 * font-size < 16px on inputs are also fixed individually.
 */
input, select, textarea {
  font-size: 16px;
}

/**
 * Touch target minimum: 44px (WCAG 2.5.5 / Apple HIG)
 * Ensures gender selection buttons and share buttons are easily tappable.
 */
.gender-btn {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.share-section button {
  min-height: 44px;
}

/* ─── VIEW TRANSITIONS (Cross-Page Navigation) ─── */
/**
 * CSS View Transitions Level 2 — smooth cross-fade between pages.
 * @view-transition enables MPA (multi-page) transitions in Chrome 111+.
 * For unsupported browsers these rules are silently ignored.
 */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: ux-vt-fade-out 0.2s ease-out forwards;
}

::view-transition-new(root) {
  animation: ux-vt-fade-in 0.3s ease-in forwards;
}

@keyframes ux-vt-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes ux-vt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Disable View Transition animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* ─── WEB SHARE BUTTON ─── */
.ux-share-section {
  text-align: center;
  padding: 24px 16px 32px;
  margin-top: 16px;
}

.ux-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 48px;
  min-width: 180px;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent, #1d4ed8) 0%, var(--ux-accent-dark, #1e40af) 100%);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 4px 16px rgba(139, 126, 200, 0.3);
  position: relative;
  overflow: hidden;
}

.ux-share-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.5s;
}

.ux-share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(139, 126, 200, 0.45);
}

.ux-share-btn:hover::before {
  left: 100%;
}

.ux-share-btn:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 2px 8px rgba(139, 126, 200, 0.3);
}

.ux-share-btn:focus-visible {
  outline: 2px solid var(--accent, #1d4ed8);
  outline-offset: 3px;
}

.ux-share-btn-label {
  white-space: nowrap;
}

/* Light theme */
html[data-theme="light"] .ux-share-btn {
  background: linear-gradient(135deg, var(--accent, #1e40af) 0%, var(--ux-accent-dark, #9a4830) 100%);
  box-shadow: 0 4px 16px rgba(106, 90, 205, 0.25);
}

html[data-theme="light"] .ux-share-btn:hover {
  box-shadow: 0 6px 24px rgba(106, 90, 205, 0.4);
}

/* High contrast theme */
html[data-theme="high-contrast"] .ux-share-btn {
  background: #fff;
  color: #000;
  border: 2px solid #fff;
  box-shadow: none;
}

html[data-theme="high-contrast"] .ux-share-btn:hover {
  background: #ffdd00;
  border-color: #ffdd00;
  color: #000;
  box-shadow: none;
}

html[data-theme="high-contrast"] .ux-share-btn:focus-visible {
  outline: 3px solid #ffdd00;
}

/* Print: hide share button */
@media print {
  .ux-share-section, .ux-share-btn {
    display: none !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ux-share-btn,
  .ux-share-btn::before {
    transition: none;
    animation: none;
  }

  .ux-share-btn:hover {
    transform: none;
  }
}

/* ───────────────────────────────────────────────────────────
   AIMIRU V3 — Microinteractions & A11y enhancements (2026-04-25)
   ─────────────────────────────────────────────────────────── */

/* Universal focus-visible (WCAG 2.2 AA — 2px offset, high-contrast) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--aimiru-primary, #1d4ed8);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Buttons — asymmetric hover (Josh Comeau式) */
.v3-btn,
button.v3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 24px;
  font-family: var(--font-display, system-ui);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  background: var(--aimiru-primary, #1d4ed8);
  color: #ffffff;
  /* Asymmetric: enter fast 150ms, exit slow 400ms */
  transition: transform 400ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
              background 400ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
              box-shadow 400ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.v3-btn:hover {
  background: var(--aimiru-primary-hover, #2563eb);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px -4px rgba(29, 78, 216, 0.35);
  transition-duration: 150ms;
}
.v3-btn:active {
  transform: scale(0.97);
  transition-duration: 60ms;
}

/* Outline variant */
.v3-btn--outline {
  background: transparent;
  color: var(--aimiru-primary, #1d4ed8);
  border: 1px solid var(--aimiru-primary, #1d4ed8);
}
.v3-btn--outline:hover {
  background: var(--aimiru-primary-soft, #eff6ff);
  color: var(--aimiru-primary-active, #1e40af);
}

/* Card hover (subgrid-friendly) */
.v3-card {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e6f4);
  border-radius: 4px;
  padding: var(--space-5, 32px);
  transition: transform 200ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
              border-color 200ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
              box-shadow 200ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.v3-card:hover {
  transform: translateY(-4px);
  border-color: var(--aimiru-primary, #1d4ed8);
  box-shadow: 0 12px 32px -12px rgba(29, 78, 216, 0.18);
}

/* Reveal on scroll — Scroll-Driven Animations (no-motion-first) */
.v3-reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .v3-reveal {
      opacity: 0;
      animation: v3-reveal-up 500ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }
  }
}
@keyframes v3-reveal-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero load fadein with stagger */
@media (prefers-reduced-motion: no-preference) {
  .v3-hero > * {
    opacity: 0;
    animation: v3-fade-up 800ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
  }
  .v3-hero > *:nth-child(1) { animation-delay: 80ms; }
  .v3-hero > *:nth-child(2) { animation-delay: 160ms; }
  .v3-hero > *:nth-child(3) { animation-delay: 240ms; }
  .v3-hero > *:nth-child(4) { animation-delay: 320ms; }
}
@keyframes v3-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Dynamic underline (text-underline-offset, decoration-thickness) */
.v3-link {
  color: var(--link, #1d4ed8);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-thickness 200ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
              text-underline-offset 200ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
              color 200ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.v3-link:hover {
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  color: var(--aimiru-primary-hover, #2563eb);
}

/* Spring hover for vertical cards */
.v3-vert-card {
  transition: transform 250ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
              box-shadow 250ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.v3-vert-card:hover {
  transform: translateY(-6px) scale(1.01);
}

/* Text rendering quality */
html {
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Prose width (本文 max 65ch) */
.v3-prose {
  max-width: min(100%, 65ch);
}

/* Selection color */
::selection {
  background: var(--aimiru-primary, #1d4ed8);
  color: #ffffff;
}

/* ───────────────────────────────────────────────────────────
   END V3 enhancements
   ─────────────────────────────────────────────────────────── */

/* ===========================================================
   SHINKAI shared layer (2026-04-26)
   LP-derived components, exposed for hub/about/divination pages.
   =========================================================== */
:root[data-variant="shinkai"]{
  --font-display:'Cormorant Garamond','Tiempos Headline','Noto Serif JP','游明朝',serif;
  --font-body:'Inter','Noto Sans JP','Hiragino Sans',system-ui,sans-serif;
  --font-serif:'Noto Serif JP','游明朝',serif;
  --sk-s-1:4px;--sk-s-2:8px;--sk-s-3:16px;--sk-s-4:24px;--sk-s-5:32px;--sk-s-6:48px;--sk-s-7:64px;
  --sk-gutter:24px;--sk-container-pad:clamp(20px,4vw,80px);--sk-section-y:clamp(64px,8vw,112px);
  --sk-spring:cubic-bezier(0.34,1.56,0.64,1);
  --sk-smooth:cubic-bezier(0.16,1,0.3,1);
  --on-gold:var(--abyss-900,#0a1028);
  --vignette-end:var(--abyss-1000,#050817);
  --star-opacity:0.62;
}
:root[data-variant="shinkai"][data-theme="light"]{
  --star-opacity:0.10;
  --on-gold:#1f2747;
}
html[data-variant="shinkai"], html[data-variant="shinkai"] body{
  font-family:var(--font-body);
  font-feature-settings:"palt" 1,"kern" 1;
}
html[data-variant="shinkai"] :lang(ja){line-height:1.85}

/* ----- Cosmos background (ported from LP) ----- */
.bg-cosmos{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--bg)}
.bg-cosmos .bg-stars{position:absolute;inset:-10%;
  background-image:
    radial-gradient(1px 1px at 12% 18%,rgba(226,230,244,0.6),transparent 50%),
    radial-gradient(1px 1px at 27% 73%,rgba(226,230,244,0.5),transparent 50%),
    radial-gradient(1.2px 1.2px at 41% 31%,rgba(232,197,99,0.45),transparent 50%),
    radial-gradient(1px 1px at 58% 88%,rgba(226,230,244,0.55),transparent 50%),
    radial-gradient(1px 1px at 71% 12%,rgba(226,230,244,0.5),transparent 50%),
    radial-gradient(1.4px 1.4px at 83% 64%,rgba(232,197,99,0.4),transparent 50%),
    radial-gradient(1px 1px at 92% 39%,rgba(226,230,244,0.55),transparent 50%),
    radial-gradient(1px 1px at 6% 51%,rgba(226,230,244,0.4),transparent 50%),
    radial-gradient(1px 1px at 35% 95%,rgba(226,230,244,0.4),transparent 50%),
    radial-gradient(1.2px 1.2px at 49% 7%,rgba(232,197,99,0.5),transparent 50%),
    radial-gradient(1px 1px at 66% 47%,rgba(226,230,244,0.45),transparent 50%),
    radial-gradient(1px 1px at 78% 28%,rgba(226,230,244,0.4),transparent 50%),
    radial-gradient(1px 1px at 19% 62%,rgba(226,230,244,0.5),transparent 50%),
    radial-gradient(1px 1px at 88% 82%,rgba(226,230,244,0.45),transparent 50%),
    radial-gradient(1.3px 1.3px at 53% 56%,rgba(121,134,203,0.4),transparent 50%),
    radial-gradient(1px 1px at 23% 38%,rgba(226,230,244,0.4),transparent 50%),
    radial-gradient(1px 1px at 4% 81%,rgba(226,230,244,0.4),transparent 50%),
    radial-gradient(1px 1px at 96% 14%,rgba(226,230,244,0.45),transparent 50%);
  background-repeat:no-repeat;background-size:100% 100%;
  opacity:var(--star-opacity);
}
.bg-cosmos .bg-twinkles{position:absolute;inset:0}
.bg-cosmos .twinkle{position:absolute;width:1px;height:1px;border-radius:50%;background:rgba(232,197,99,0.7);opacity:0.28;animation:sk-twinkle 30s ease-in-out infinite}
.bg-cosmos .t1{top:14%;left:22%;animation-delay:0s}
.bg-cosmos .t2{top:31%;left:78%;animation-delay:6s;background:rgba(226,230,244,0.7)}
.bg-cosmos .t3{top:62%;left:12%;animation-delay:12s}
.bg-cosmos .t4{top:48%;left:64%;animation-delay:18s;background:rgba(184,190,219,0.7)}
.bg-cosmos .t5{top:79%;left:86%;animation-delay:24s}
@keyframes sk-twinkle{0%,100%{opacity:0.28}50%{opacity:0.55}}
.bg-cosmos .bg-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 40%,var(--vignette-end) 100%);opacity:0.7}
:root[data-theme="light"] .bg-cosmos .bg-vignette{opacity:0.45}

/* ----- SHINKAI header (ported from LP) ----- */
.shinkai-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px var(--sk-container-pad);backdrop-filter:blur(10px);background:color-mix(in oklab,var(--bg) 70%,transparent);border-bottom:1px solid color-mix(in oklab,var(--border) 50%,transparent)}
.shinkai-header .brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);color:var(--text);letter-spacing:0.05em;text-decoration:none}
.shinkai-header .brand-mark{color:var(--gold-bright);font-size:1.1rem}
.shinkai-header .brand-name{font-weight:400;font-size:1.05rem;letter-spacing:0.18em}
.shinkai-header .shinkai-nav{display:flex;gap:28px;font-size:0.85rem;letter-spacing:0.1em;text-transform:uppercase}
.shinkai-header .shinkai-nav a{color:var(--text-300,var(--muted));text-decoration:none;transition:color 200ms var(--sk-smooth)}
.shinkai-header .shinkai-nav a:hover{color:var(--gold-bright)}
.shinkai-header .header-right{display:inline-flex;align-items:center;gap:14px}
@media (max-width:720px){.shinkai-header .shinkai-nav{display:none}}
.shinkai-header .theme-toggle{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--gold-bright);border:1px solid color-mix(in oklab,var(--gold-bright) 50%,transparent);border-radius:50%;font-size:0.95rem;line-height:1;cursor:pointer}
.shinkai-header .theme-toggle:hover{border-color:var(--gold-bright);background:color-mix(in oklab,var(--gold-bright) 10%,transparent)}
:root[data-theme="dark"] .shinkai-header .tt-sun,:root:not([data-theme="light"]) .shinkai-header .tt-sun{display:none}
:root[data-theme="light"] .shinkai-header .tt-moon{display:none}
.shinkai-header .lang-switch{position:relative}
.shinkai-header .lang-toggle{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;font-family:var(--font-body);font-size:0.78rem;letter-spacing:0.12em;color:var(--text-300,var(--muted));background:transparent;border:1px solid color-mix(in oklab,var(--gold-bright) 35%,transparent);border-radius:999px;cursor:pointer;transition:all 280ms var(--sk-smooth)}
.shinkai-header .lang-toggle:hover{border-color:var(--gold-bright);color:var(--gold-bright)}
.shinkai-header .lang-flag{font-size:0.95rem;line-height:1}
.shinkai-header .lang-current{font-weight:500}
.shinkai-header .lang-caret{font-size:0.7rem;opacity:0.7}
.shinkai-header .lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:180px;max-height:60vh;overflow-y:auto;background:color-mix(in oklab,var(--abyss-950,#070d20) 92%,var(--gold-bright) 4%);border:1px solid color-mix(in oklab,var(--gold-bright) 50%,var(--border));border-radius:3px;padding:6px;box-shadow:0 12px 40px rgba(10,16,40,0.28);opacity:0;transform:translateY(-6px);transition:opacity 280ms var(--sk-smooth),transform 280ms var(--sk-smooth);z-index:60;list-style:none;margin:0}
.shinkai-header .lang-menu[hidden]{display:none}
.shinkai-header .lang-menu.is-open{opacity:1;transform:translateY(0)}
.shinkai-header .lang-menu li{display:flex;align-items:center;gap:10px;padding:8px 12px;font-family:var(--font-body);font-size:0.85rem;color:var(--text-300,var(--muted));cursor:pointer;border-radius:2px;transition:all 200ms var(--sk-smooth)}
.shinkai-header .lang-menu li:hover,.shinkai-header .lang-menu li[aria-selected="true"]{background:color-mix(in oklab,var(--gold-bright) 12%,transparent);color:var(--gold-bright)}
@media (max-width:720px){.shinkai-header .lang-toggle .lang-current{display:none}}
.shinkai-header .nav-cta{font-size:0.85rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold-bright);padding:8px 18px;border:1px solid color-mix(in oklab,var(--gold-bright) 50%,transparent);border-radius:999px;text-decoration:none;transition:all 250ms var(--sk-spring)}
.shinkai-header .nav-cta em{font-style:italic;font-family:var(--font-display)}
.shinkai-header .nav-cta:hover{background:color-mix(in oklab,var(--gold-bright) 12%,transparent);border-color:var(--gold-bright);transform:translateY(-1px)}

/* ----- Hero (LP-grade) ----- */
.sk-hero{position:relative;min-height:auto;display:grid;place-items:center;padding:clamp(56px,8vw,112px) var(--sk-container-pad) clamp(40px,6vw,72px);isolation:isolate}
.sk-hero-inner{max-width:880px;text-align:center;display:flex;flex-direction:column;align-items:center;position:relative;z-index:2}
.sk-hero-eyebrow{font-family:var(--font-body);font-size:0.72rem;letter-spacing:0.3em;color:var(--gold-bright);text-transform:uppercase;margin-bottom:var(--sk-s-4)}
.sk-hero-title{font-family:var(--font-display);font-weight:300;font-style:italic;font-size:clamp(2.2rem,1.4rem + 5vw,4.2rem);line-height:1.08;letter-spacing:-0.015em;color:var(--text);text-wrap:balance;margin:0}
.hero-rule{width:64px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-bright) 50%,transparent);margin:var(--sk-s-5) 0 var(--sk-s-4)}
.sk-hero-sub{font-family:var(--font-serif);font-size:clamp(0.95rem,0.88rem + 0.4vw,1.1rem);font-weight:300;line-height:1.85;color:var(--text-300,var(--muted));max-width:42ch;margin:0;text-wrap:balance}
.sk-hero-sub-accent{font-family:var(--font-display);font-style:italic;font-weight:400;color:var(--gold-bright)}
.sk-hero-orb{position:absolute;top:24%;right:12%;width:6px;height:6px;background:var(--gold-bright);border-radius:50%;box-shadow:0 0 8px var(--gold-bright),0 0 24px color-mix(in oklab,var(--gold-bright) 60%,transparent),0 0 64px color-mix(in oklab,var(--gold-bright) 30%,transparent);animation:sk-orb-breathe 8s ease-in-out infinite;z-index:1}
@media (max-width:380px){.sk-hero-orb{display:none}}
@keyframes sk-orb-breathe{0%,100%{opacity:0.4;transform:scale(1)}50%{opacity:0.85;transform:scale(1.15)}}

/* ----- Section heads ----- */
.sk-section-head{text-align:center;max-width:760px;margin:0 auto var(--sk-s-6);display:flex;flex-direction:column;align-items:center}
.sk-section-label{font-size:0.72rem;letter-spacing:0.3em;color:var(--gold-bright);text-transform:uppercase;margin-bottom:var(--sk-s-4)}
.sk-section-title{font-family:var(--font-display);font-weight:300;font-style:italic;font-size:clamp(1.7rem,1.2rem + 3vw,2.5rem);line-height:1.2;letter-spacing:-0.01em;color:var(--text);text-wrap:balance;margin:0}
.sk-section-sub{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:1rem;color:var(--text-300,var(--muted));margin-top:var(--sk-s-3);letter-spacing:0.02em}

/* ----- Buttons (sk-btn family + legacy override) ----- */
.sk-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;font-family:var(--font-body);font-size:0.95rem;font-weight:500;letter-spacing:0.04em;border-radius:999px;transition:all 400ms var(--sk-spring);white-space:nowrap;position:relative;cursor:pointer;border:1px solid transparent;text-decoration:none}
.sk-btn em{font-style:italic;font-family:var(--font-display)}
.sk-btn-primary{background:var(--gold-bright);color:var(--on-gold);border-color:var(--gold-bright)}
.sk-btn-primary:hover{filter:brightness(1.08);transform:translateY(-3px) scale(1.015);box-shadow:0 12px 36px color-mix(in oklab,var(--gold-bright) 38%,transparent),0 2px 8px color-mix(in oklab,var(--gold-bright) 22%,transparent);color:var(--on-gold)}
.sk-btn-primary:active{transform:translateY(0) scale(0.97);transition-duration:120ms}
.sk-btn-primary:disabled{opacity:0.6;cursor:not-allowed}
.sk-btn-ghost{background:transparent;color:var(--text);border-color:var(--border)}
.sk-btn-ghost:hover{border-color:var(--gold-bright);color:var(--gold-bright);transform:translateY(-2px)}
.sk-btn-lg{padding:18px 40px;font-size:1.05rem;letter-spacing:0.06em}
.sk-btn:focus-visible{outline:3px solid var(--gold-bright);outline-offset:3px}

/* E3: Legacy divination buttons inherit sk-btn-primary look on shinkai pages.
   We do NOT remove the original classes — we cascade-override on data-variant. */
html[data-variant="shinkai"] .btn-divine,
html[data-variant="shinkai"] .btn-share,
html[data-variant="shinkai"] .btn-draw,
html[data-variant="shinkai"] .btn-retry,
html[data-variant="shinkai"] .btn-divination,
html[data-variant="shinkai"] .btn-primary{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 28px;
  font-family:var(--font-body);font-size:0.95rem;font-weight:500;letter-spacing:0.04em;
  background:var(--gold-bright);color:var(--on-gold);border:1px solid var(--gold-bright);
  border-radius:999px;text-decoration:none;cursor:pointer;
  transition:all 400ms var(--sk-spring);
}
html[data-variant="shinkai"] .btn-divine:hover,
html[data-variant="shinkai"] .btn-share:hover,
html[data-variant="shinkai"] .btn-draw:hover,
html[data-variant="shinkai"] .btn-retry:hover,
html[data-variant="shinkai"] .btn-divination:hover,
html[data-variant="shinkai"] .btn-primary:hover{
  filter:brightness(1.08);transform:translateY(-3px) scale(1.015);
  box-shadow:0 12px 36px color-mix(in oklab,var(--gold-bright) 38%,transparent);
  color:var(--on-gold);
}
html[data-variant="shinkai"] .btn-secondary,
html[data-variant="shinkai"] .btn-ghost{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 28px;
  font-family:var(--font-body);font-size:0.95rem;font-weight:500;letter-spacing:0.04em;
  background:transparent;color:var(--text);border:1px solid var(--border);
  border-radius:999px;text-decoration:none;cursor:pointer;
  transition:all 400ms var(--sk-spring);
}
html[data-variant="shinkai"] .btn-secondary:hover,
html[data-variant="shinkai"] .btn-ghost:hover{
  border-color:var(--gold-bright);color:var(--gold-bright);transform:translateY(-2px);
}

/* ----- Divination layout helpers (B3 injection target / R4-B7-B10) ----- */
.sk-divlayout-top{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px var(--sk-container-pad);max-width:1100px;margin:0 auto;flex-wrap:wrap;text-align:center}
.sk-divlayout-top .sk-divlayout-spacer{display:inline-block;width:140px;flex:0 0 auto}
.sk-divlayout-title{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:clamp(1.7rem,1.1rem + 2.6vw,2.6rem);color:var(--gold-bright);margin:0;letter-spacing:0.01em;line-height:1.18;text-align:center;flex:1 1 auto}
.sk-divlayout-title small{display:block;font-family:var(--font-body);font-style:normal;font-size:0.7rem;letter-spacing:0.32em;text-transform:uppercase;color:var(--gold-bright);opacity:0.78;margin-bottom:6px}
.sk-divlayout-top h1{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:clamp(1.7rem,1.1rem + 2.6vw,2.6rem);color:var(--gold-bright);margin:0;letter-spacing:0.01em;line-height:1.18;text-align:center}
.sk-divlayout-top h1 small{display:block;font-family:var(--font-body);font-style:normal;font-size:0.7rem;letter-spacing:0.32em;text-transform:uppercase;color:var(--gold-bright);opacity:0.78;margin-bottom:6px}

/* R4-B7: refined back-pill */
.sk-back-pill{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;font-family:var(--font-display);font-style:italic;font-size:0.95rem;letter-spacing:0.06em;color:var(--gold-bright);background:transparent;border:1px solid color-mix(in oklab,var(--gold-bright) 38%,transparent);border-radius:999px;transition:all 280ms var(--smooth, cubic-bezier(0.16,1,0.3,1));text-decoration:none;white-space:nowrap;flex:0 0 auto}
.sk-back-pill .sk-back-arrow{font-family:var(--font-display);font-size:1.05rem;line-height:1;transition:transform 280ms var(--smooth, cubic-bezier(0.16,1,0.3,1))}
.sk-back-pill:hover{border-color:var(--gold-bright);background:color-mix(in oklab,var(--gold-bright) 12%,transparent);color:var(--gold-bright)}
.sk-back-pill:hover .sk-back-arrow{transform:translateX(-4px)}
.sk-back-pill:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
@media (max-width:560px){.sk-divlayout-top .sk-divlayout-spacer{display:none}.sk-divlayout-top{justify-content:center}.sk-back-pill{padding:8px 14px;font-size:0.9rem}}

.sk-divlayout-bottom{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;padding:36px var(--sk-container-pad) 56px;max-width:1100px;margin:0 auto;text-align:center}
.sk-divlayout-bottom[hidden]{display:none !important}
.sk-divlayout-bottom .sk-btn{flex:0 0 auto}
@media (max-width:480px){.sk-divlayout-bottom .sk-btn{flex:1 1 calc(50% - 7px);min-width:0;justify-content:center}}

/* R4-B11: profile-edit gear button + modal */
.sk-profile-edit-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;font-family:var(--font-display);font-style:italic;font-size:0.9rem;letter-spacing:0.06em;color:var(--gold-bright);background:transparent;border:1px solid color-mix(in oklab,var(--gold-bright) 38%,transparent);border-radius:999px;cursor:pointer;transition:all 280ms cubic-bezier(0.16,1,0.3,1);flex:0 0 auto}
.sk-profile-edit-btn:hover{border-color:var(--gold-bright);background:color-mix(in oklab,var(--gold-bright) 12%,transparent)}
.sk-profile-edit-btn:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
@media (max-width:560px){.sk-profile-edit-btn .sk-profile-edit-label{display:none}.sk-profile-edit-btn{padding:8px 11px}}
/* A1 Wave 1 2026-05-02: theme toggle inside sk-divlayout-top, paired with profile-edit. */
.sk-divlayout-actions{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto}
.sk-theme-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;font-family:var(--font-display);font-style:italic;font-size:1.05rem;letter-spacing:0.04em;color:var(--gold-bright);background:transparent;border:1px solid color-mix(in oklab,var(--gold-bright) 38%,transparent);border-radius:999px;cursor:pointer;transition:all 280ms cubic-bezier(0.16,1,0.3,1);flex:0 0 auto;line-height:1}
.sk-theme-toggle-btn:hover{border-color:var(--gold-bright);background:color-mix(in oklab,var(--gold-bright) 12%,transparent)}
.sk-theme-toggle-btn:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
.sk-theme-toggle-btn .tt-icon{display:none}
.sk-theme-toggle-btn .tt-moon{display:inline}
:root[data-theme="light"] .sk-theme-toggle-btn .tt-moon{display:none}
:root[data-theme="light"] .sk-theme-toggle-btn .tt-sun{display:inline}

.sk-profile-modal{position:fixed;inset:0;z-index:9500;display:flex;align-items:center;justify-content:center;padding:20px;background:color-mix(in oklab,#000 78%,transparent);backdrop-filter:blur(6px);animation:sk-pm-fade 220ms ease-out}
@keyframes sk-pm-fade{from{opacity:0}to{opacity:1}}
.sk-profile-modal-card{position:relative;width:100%;max-width:480px;max-height:88vh;overflow-y:auto;background:linear-gradient(180deg,color-mix(in oklab,var(--surface) 95%,transparent),color-mix(in oklab,var(--abyss-1000) 92%,transparent));border:1px solid color-mix(in oklab,var(--gold-bright) 32%,var(--border));border-radius: 2px;padding:32px clamp(20px,4vw,36px);font-family:var(--font-body);color:var(--text);box-shadow:0 24px 80px rgba(0,0,0,0.6)}
.sk-profile-modal-close{position:absolute;top:12px;right:12px;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--gold-bright);border:1px solid color-mix(in oklab,var(--gold-bright) 35%,transparent);border-radius:50%;font-size:0.95rem;cursor:pointer;transition:all 200ms ease}
.sk-profile-modal-close:hover{border-color:var(--gold-bright);background:color-mix(in oklab,var(--gold-bright) 12%,transparent)}
.sk-profile-modal-title{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:1.6rem;color:var(--gold-bright);margin:0 0 6px;text-align:center;letter-spacing:0.02em}
.sk-profile-modal-hint{font-family:var(--font-display);font-style:italic;font-size:0.95rem;color:var(--text-300,var(--text-sub));text-align:center;margin:0 0 20px}
.sk-pm-label{display:block;font-size:0.7rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:14px}
.sk-pm-label input{display:block;width:100%;margin-top:6px;padding:11px 13px;font-family:var(--font-display);font-style:italic;font-size:1.05rem;color:var(--text);background:color-mix(in oklab,var(--abyss-1000) 60%,transparent);border:1px solid color-mix(in oklab,var(--gold-bright) 28%,var(--border));border-radius:4px;letter-spacing:0.04em}
.sk-pm-label input:focus{outline:none;border-color:var(--gold-bright);box-shadow:0 0 0 3px color-mix(in oklab,var(--gold-bright) 18%,transparent)}
.sk-pm-fieldset{border:1px solid color-mix(in oklab,var(--gold-bright) 22%,var(--border));border-radius:4px;padding:12px 14px;margin:14px 0 18px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sk-pm-fieldset legend{font-size:0.7rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--gold-bright);padding:0 6px}
.sk-pm-fieldset label{display:flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:0.92rem;color:var(--text-300,var(--text-sub));cursor:pointer}
.sk-pm-fieldset input[type=radio]{accent-color:var(--gold-bright)}
.sk-pm-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:8px}
@media (max-width:480px){.sk-pm-fieldset{grid-template-columns:1fr}.sk-pm-actions .sk-btn{flex:1 1 100%}}

/* ===========================================================
   END SHINKAI shared layer
   =========================================================== */

/* ===========================================================
   2026-04-26 — Round NotebookLM-3 (16-item batch)
   D13: shimmering "divine" CTA variant for divination pages.
   F16: Japanese-only mode — hide every legacy lang switcher.
   E14: Final unification of footer/back-link spacing.
   =========================================================== */

/* D13: magical-feeling primary CTA (used by horoscope etc. main "占う" button) */
@keyframes sk-divine-shimmer{
  0%,100%{box-shadow:0 0 24px color-mix(in oklab,var(--gold-bright) 30%,transparent),0 0 0 1px color-mix(in oklab,var(--gold-bright) 60%,transparent)}
  50%{box-shadow:0 0 48px color-mix(in oklab,var(--gold-bright) 55%,transparent),0 0 96px color-mix(in oklab,var(--gold-bright) 22%,transparent),0 0 0 1px var(--gold-bright)}
}
html[data-variant="shinkai"] .sk-btn-primary[data-divine],
html[data-variant="shinkai"] .btn-divine,
html[data-variant="shinkai"] #btn-divine{
  font-size:1.1rem;letter-spacing:0.08em;padding:18px 44px;
  animation:sk-divine-shimmer 3.6s ease-in-out infinite;
  position:relative;
}
html[data-variant="shinkai"] .sk-btn-primary[data-divine]:hover,
html[data-variant="shinkai"] .btn-divine:hover,
html[data-variant="shinkai"] #btn-divine:hover{
  transform:translateY(-3px) scale(1.03);
  filter:brightness(1.12) saturate(1.05);
}
html[data-variant="shinkai"] .sk-btn-primary[data-divine]:active,
html[data-variant="shinkai"] .btn-divine:active,
html[data-variant="shinkai"] #btn-divine:active{
  transform:translateY(0) scale(0.97);transition-duration:120ms;
}
@media (prefers-reduced-motion: reduce){
  html[data-variant="shinkai"] .sk-btn-primary[data-divine],
  html[data-variant="shinkai"] .btn-divine,
  html[data-variant="shinkai"] #btn-divine{animation:none}
}

/* F16: hide every legacy/page-local language switcher */
[data-lang-switch],
.lang-switch,
.lang-switcher-aimiru,
nav.lang-bar,
#langBar,
#aimiru-global-controls .agc-lang-wrap{display:none !important}

/* E14: footer link row — single line, evenly spaced, no stagger */
.sk-footer nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;text-align:center}
.sk-footer .sk-foot-dot{margin:0;opacity:0.4}
.sk-foot-meta{text-align:center !important}

/* C11: keep "AI" together on narrow viewports */
.no-break-ai{white-space:nowrap}

/* =========================================================
   2026-04-26 — Occult Culture Motif Layer
   SHINKAI骨格はそのまま。data-occult-culture属性で
   各占術ごとの文化モチーフ(SVGパターン+表示用フォント)を被せる。
   ヘッダ/フッタ/sk-btn/--accent/色トークンには触れない。
   ========================================================= */

/* ---- 1) Culture variant tokens ----
   2026-04-26 R9 unification: フォント統一のため --motif-display-font は撤去。
   フォントは Cormorant Garamond + Noto Serif JP + Inter で全ページ完全統一。
   個性は背景モチーフ + 結果カード装飾 + hero icon でのみ表現する。 */
html[data-occult-culture="japan"]{
  --motif-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%23d4a836' stroke-width='0.6' stroke-opacity='0.55'><path d='M0 40 L40 0 L80 40 L40 80 Z'/><path d='M40 0 L40 80 M0 40 L80 40'/><path d='M20 20 L60 20 L60 60 L20 60 Z'/></g></svg>");
  --motif-card-corner: linear-gradient(135deg, transparent 88%, color-mix(in oklab,var(--gold-bright) 50%, transparent) 88% 92%, transparent 92%);
}
html[data-occult-culture="china-korea"]{
  --motif-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'><g fill='none' stroke='%23d4a836' stroke-width='0.7' stroke-opacity='0.5'><path d='M8 8 H40 V24 H24 V16 H32 M32 32 H56 V56 H40 V40 H48'/><path d='M8 40 H16 V48 H8 Z M48 8 H56 V16 H48 Z'/></g></svg>");
}
html[data-occult-culture="europe-nordic"]{
  --motif-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><g fill='none' stroke='%23d4a836' stroke-width='0.6' stroke-opacity='0.5'><path d='M0 48 C24 24, 24 72, 48 48 S72 24, 96 48'/><path d='M48 0 C24 24, 72 24, 48 48 S24 72, 48 96'/><circle cx='48' cy='48' r='3'/></g></svg>");
  --motif-card-corner: radial-gradient(circle at 6px 6px, color-mix(in oklab,var(--gold-bright) 55%, transparent) 1.2px, transparent 1.5px);
}
html[data-occult-culture="india"]{
  --motif-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'><g fill='none' stroke='%23d4a836' stroke-width='0.6' stroke-opacity='0.5'><circle cx='45' cy='45' r='14'/><g transform='translate(45 45)'><ellipse rx='6' ry='14' cy='-18'/><ellipse rx='6' ry='14' cy='-18' transform='rotate(45)'/><ellipse rx='6' ry='14' cy='-18' transform='rotate(90)'/><ellipse rx='6' ry='14' cy='-18' transform='rotate(135)'/><ellipse rx='6' ry='14' cy='-18' transform='rotate(180)'/><ellipse rx='6' ry='14' cy='-18' transform='rotate(225)'/><ellipse rx='6' ry='14' cy='-18' transform='rotate(270)'/><ellipse rx='6' ry='14' cy='-18' transform='rotate(315)'/></g></svg>");
}
html[data-occult-culture="africa-americas"]{
  --motif-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'><g fill='none' stroke='%23d4a836' stroke-width='0.7' stroke-opacity='0.55'><path d='M0 24 L18 0 L36 24 L54 0 L72 24'/><path d='M0 48 L18 24 L36 48 L54 24 L72 48'/><path d='M0 72 L18 48 L36 72 L54 48 L72 72'/></g></svg>");
  --motif-card-corner: linear-gradient(180deg, transparent 80%, color-mix(in oklab,var(--gold-bright) 45%, transparent) 80% 86%, transparent 86% 90%, color-mix(in oklab,var(--gold-bright) 30%, transparent) 90% 92%, transparent 92%);
}
html[data-occult-culture="centralAsia-mongolia"]{
  --motif-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23d4a836' stroke-width='0.6' stroke-opacity='0.5'><circle cx='50' cy='50' r='10'/><g stroke-width='0.5'><path d='M50 22 V12 M50 78 V88 M22 50 H12 M78 50 H88'/><path d='M30 30 L22 22 M70 30 L78 22 M30 70 L22 78 M70 70 L78 78'/></g><path d='M40 40 H60 V60 H40 Z' stroke-dasharray='2 2'/></g></svg>");
}
html[data-occult-culture="arabia"]{
  --motif-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%23d4a836' stroke-width='0.55' stroke-opacity='0.5'><polygon points='40,8 48,28 68,28 52,42 60,62 40,50 20,62 28,42 12,28 32,28'/><polygon points='40,20 44,32 56,32 46,40 50,52 40,46 30,52 34,40 24,32 36,32'/></g></svg>");
}
/* universal は変数を空のまま継承させる */

/* ---- 2) (R9 unification) Title font override REMOVED ----
   タイトルのフォントは SHINKAI 統一(Cormorant Garamond + Noto Serif JP)を使用。 */

/* ---- 3) Apply: visible background motif (2026-04-26 強化: 0.055→0.20, screen→soft-light) ---- */
html[data-occult-culture] body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: var(--motif-pattern);
  background-size: var(--motif-size, 200px) var(--motif-size, 200px);
  background-repeat: repeat;
  opacity: 0.20;
  mix-blend-mode: soft-light;
  filter: drop-shadow(0 0 6px color-mix(in oklab,var(--gold-bright) 40%,transparent));
}
/* SHINKAIヘッダ/フッタ/コンテンツは body の上に乗る */
html[data-occult-culture] body > *{ position: relative; z-index: 1; }

/* Light theme: invert blend so motif still reads on light bg */
:root[data-theme="light"] html[data-occult-culture] body::before,
html[data-occult-culture]:root[data-theme="light"] body::before{
  mix-blend-mode: multiply;
  opacity: 0.18;
}

/* per-culture pattern tile size (visibility tuning) */
html[data-occult-culture="japan"]                body::before{ --motif-size: 140px; }
html[data-occult-culture="china-korea"]          body::before{ --motif-size: 130px; }
html[data-occult-culture="europe-nordic"]        body::before{ --motif-size: 160px; }
html[data-occult-culture="india"]                body::before{ --motif-size: 170px; }
html[data-occult-culture="africa-americas"]      body::before{ --motif-size: 150px; }
html[data-occult-culture="centralAsia-mongolia"] body::before{ --motif-size: 180px; }
html[data-occult-culture="arabia"]               body::before{ --motif-size: 130px; }

/* reduce-motion / 視覚配慮: 透明度を抑える */
@media (prefers-reduced-motion: reduce){
  html[data-occult-culture] body::before{ opacity: 0.10; filter:none; }
}

/* ---- 4) Card corner accent (only where defined) ---- */
html[data-occult-culture="japan"] .sk-card,
html[data-occult-culture="europe-nordic"] .sk-card,
html[data-occult-culture="africa-americas"] .sk-card{
  position: relative;
}
html[data-occult-culture="japan"] .sk-card::after,
html[data-occult-culture="africa-americas"] .sk-card::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background-image: var(--motif-card-corner);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 40px 40px;
  opacity: 0.65;
}
html[data-occult-culture="europe-nordic"] .sk-card::after{
  content:"";
  position:absolute; top:6px; left:6px; right:6px; bottom:6px;
  pointer-events:none;
  background-image: var(--motif-card-corner);
  background-size: 12px 12px;
  background-repeat: repeat;
  opacity: 0.45;
}

/* ---- 5) Print: hide motif ---- */
@media print{
  html[data-occult-culture] body::before{ display:none; }
}

/* =========================================================
   2026-04-26 — Diagnosis Genre Layer (data-diag-genre)
   6 ジャンル × accent + icon。各診断ページの SHINKAI 骨格を尊重しつつ
   ジャンルごとの個性 (border-left, accent dot, hover glow) を被せる。
   ========================================================= */
html[data-diag-genre="love"]          { --diag-accent:#d98a7a; --diag-accent-soft:rgba(217,138,122,.18); --diag-icon:'\2764'; }
html[data-diag-genre="personality"]   { --diag-accent:#9b7de8; --diag-accent-soft:rgba(155,125,232,.18); --diag-icon:'\2726'; }
html[data-diag-genre="work"]          { --diag-accent:#d4a836; --diag-accent-soft:rgba(212,168,54,.18); --diag-icon:'\25C6'; }
html[data-diag-genre="lifestyle"]     { --diag-accent:#7eb8d8; --diag-accent-soft:rgba(126,184,216,.18); --diag-icon:'\2744'; }
html[data-diag-genre="interpersonal"] { --diag-accent:#6dba9b; --diag-accent-soft:rgba(109,186,155,.18); --diag-icon:'\25CB'; }
html[data-diag-genre="mystic"]        { --diag-accent:#c8932a; --diag-accent-soft:rgba(200,147,42,.18); --diag-icon:'\2727'; }

/* Hero / title — leading icon */
html[data-diag-genre] .sk-divlayout-title::before,
html[data-diag-genre] .sk-hero-title::before,
html[data-diag-genre] h1::first-letter ~ none{}
html[data-diag-genre] .sk-divlayout-title::before,
html[data-diag-genre] .sk-hero-title::before{
  content: var(--diag-icon);
  margin-right:.45em;
  color: var(--diag-accent);
  font-style: normal;
  font-weight:400;
  letter-spacing:0;
  filter: drop-shadow(0 0 8px color-mix(in oklab,var(--diag-accent) 50%,transparent));
}

/* Result card / question card border-left */
html[data-diag-genre] .result-card,
html[data-diag-genre] .sk-card,
html[data-diag-genre] .question-card,
html[data-diag-genre] .ux-card{
  border-left: 3px solid var(--diag-accent);
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow .25s ease, transform .25s ease;
}
html[data-diag-genre] .result-card:hover,
html[data-diag-genre] .sk-card:hover,
html[data-diag-genre] .ux-card:hover{
  box-shadow: 0 8px 28px var(--diag-accent-soft), -2px 0 0 1px var(--diag-accent);
  transform: translateY(-2px);
}

/* (R9 unification) ボタン染色 / progress fill 染色は撤去。
   sk-btn-primary / sk-btn-ghost / progress-fill は全ページ完全統一(gold-bright基調)。
   ジャンルの個性は icon (--diag-icon) と border-left / hover glow にのみ適用する。 */

/* =========================================================
   2026-04-26 — Occult Culture Result Card Decorations (D)
   各文化のresult-cardにborder-left + corner accent装飾。
   ========================================================= */
html[data-occult-culture] .result-card,
html[data-occult-culture] .ux-result-card{
  position:relative;
}
/* japan: 細罫線 + 角に三角アクセント */
html[data-occult-culture="japan"] .result-card::before,
html[data-occult-culture="japan"] .ux-result-card::before{
  content:"\25C7";
  position:absolute; top:6px; right:10px;
  color: color-mix(in oklab,var(--gold-bright,#d4a836) 70%, transparent);
  font-size:14px; line-height:1; pointer-events:none;
}
html[data-occult-culture="japan"] .result-card{
  border-top:1px solid color-mix(in oklab,var(--gold-bright,#d4a836) 35%, transparent);
  border-bottom:1px solid color-mix(in oklab,var(--gold-bright,#d4a836) 35%, transparent);
}
/* europe-nordic: Art Nouveau風コーナー */
html[data-occult-culture="europe-nordic"] .result-card::before{
  content:"\2766";
  position:absolute; top:8px; left:10px;
  color: color-mix(in oklab,var(--gold-bright,#d4a836) 60%, transparent);
  font-size:14px; line-height:1; pointer-events:none;
}
/* india: 蓮華 */
html[data-occult-culture="india"] .result-card::before{
  content:"\1FAB7";
  position:absolute; top:8px; right:10px;
  font-size:14px; opacity:.7; pointer-events:none;
}
/* africa-americas: 太め二重罫線 */
html[data-occult-culture="africa-americas"] .result-card{
  border-top:double 4px color-mix(in oklab,var(--gold-bright,#d4a836) 50%, transparent);
}
html[data-occult-culture="africa-americas"] .result-card::before{
  content:"\25B2\25B2\25B2";
  position:absolute; top:-4px; right:12px;
  color: color-mix(in oklab,var(--gold-bright,#d4a836) 55%, transparent);
  font-size:8px; letter-spacing:2px; pointer-events:none;
}
/* arabia: 八芒星コーナー */
html[data-occult-culture="arabia"] .result-card::before{
  content:"\2737";
  position:absolute; top:6px; right:10px;
  color: color-mix(in oklab,var(--gold-bright,#d4a836) 65%, transparent);
  font-size:14px; line-height:1; pointer-events:none;
}
/* centralAsia-mongolia: 円+卍 */
html[data-occult-culture="centralAsia-mongolia"] .result-card::before{
  content:"\262F";
  position:absolute; top:6px; right:10px;
  color: color-mix(in oklab,var(--gold-bright,#d4a836) 60%, transparent);
  font-size:14px; line-height:1; pointer-events:none;
}
/* china-korea: 太鼓判 */
html[data-occult-culture="china-korea"] .result-card::before{
  content:"\262F";
  position:absolute; top:6px; right:10px;
  color: color-mix(in oklab,var(--gold-bright,#d4a836) 60%, transparent);
  font-size:14px; line-height:1; pointer-events:none;
}

/* =========================================================
   2026-04-26 — Hero icon by occult-culture (E)
   各占いページの sk-hero-title 前に 1 文字、文化シンボル。
   data-diag-genre とは衝突しない (占術ページに data-diag-genre 無し)。
   ========================================================= */
html[data-occult-culture="japan"]                { --culture-icon:"\1F38B"; }
html[data-occult-culture="china-korea"]          { --culture-icon:"\262F"; }
html[data-occult-culture="europe-nordic"]        { --culture-icon:"\1F0CF"; }
html[data-occult-culture="india"]                { --culture-icon:"\1FAB7"; }
html[data-occult-culture="africa-americas"]      { --culture-icon:"\1F965"; }
html[data-occult-culture="centralAsia-mongolia"] { --culture-icon:"\1F9B4"; }
html[data-occult-culture="arabia"]               { --culture-icon:"\262A"; }
html[data-occult-culture="universal"]            { --culture-icon:"\2728"; }

html[data-occult-culture]:not([data-diag-genre]) .sk-hero-title::before,
html[data-occult-culture]:not([data-diag-genre]) .country-name::before,
html[data-occult-culture]:not([data-diag-genre]) .sk-divlayout-title::before{
  content: var(--culture-icon, "\2728");
  margin-right:.4em;
  font-style:normal;
  font-size:.85em;
  vertical-align: -0.05em;
  filter: drop-shadow(0 0 10px color-mix(in oklab,var(--gold-bright,#d4a836) 60%, transparent));
}

/* =========================================================
   2026-04-26 — Diagnosis Hub: genre filter chip (uses --diag-accent token)
   ========================================================= */
.diag-genre-bar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:24px 0 28px}
.diag-genre-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:50px;
  font-size:12px;font-weight:600;letter-spacing:.5px;
  background:transparent;
  border:1px solid color-mix(in oklab,var(--gold-bright,#e8c563) 30%, transparent);
  color: var(--text);
  cursor:pointer;font-family:'Noto Sans JP',sans-serif;
  transition:all .2s var(--sk-smooth, ease);
  white-space:nowrap;
}
.diag-genre-chip[data-genre="love"]          { --chip-c:#d98a7a; }
.diag-genre-chip[data-genre="personality"]   { --chip-c:#9b7de8; }
.diag-genre-chip[data-genre="work"]          { --chip-c:#d4a836; }
.diag-genre-chip[data-genre="lifestyle"]     { --chip-c:#7eb8d8; }
.diag-genre-chip[data-genre="interpersonal"] { --chip-c:#6dba9b; }
.diag-genre-chip[data-genre="mystic"]        { --chip-c:#c8932a; }
.diag-genre-chip:hover{
  border-color: var(--chip-c, var(--gold-bright,#e8c563));
  color: var(--chip-c, var(--gold-bright,#e8c563));
  transform: translateY(-1px);
  box-shadow: 0 4px 16px color-mix(in oklab, var(--chip-c, #e8c563) 25%, transparent);
}
.diag-genre-chip.active{
  background: color-mix(in oklab, var(--chip-c, #e8c563) 18%, transparent);
  border-color: var(--chip-c, var(--gold-bright,#e8c563));
  color: var(--chip-c, var(--gold-bright,#e8c563));
}

/* D14 (Wave 3) 2026-05-02: question-count chip filter */
.diag-qcount-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin:0 0 24px}
.diag-qcount-label{font-size:11px;letter-spacing:1.5px;color:var(--muted,#b8bedb);text-transform:uppercase;font-weight:700;margin-right:4px}
.diag-qcount-chip{
  display:inline-flex;align-items:center;
  padding:6px 14px;border-radius:50px;
  font-size:12px;font-weight:600;letter-spacing:.3px;
  background:transparent;
  border:1px solid color-mix(in oklab,var(--gold-bright,#e8c563) 30%, transparent);
  color:var(--text);cursor:pointer;font-family:'Noto Sans JP',sans-serif;
  transition:all .2s var(--sk-smooth, ease);
  white-space:nowrap;
}
.diag-qcount-chip:hover{
  border-color:var(--gold-bright,#e8c563);
  color:var(--gold-bright,#e8c563);
  transform:translateY(-1px);
}
.diag-qcount-chip.active{
  background:color-mix(in oklab, var(--gold-bright,#e8c563) 18%, transparent);
  border-color:var(--gold-bright,#e8c563);
  color:var(--gold-bright,#e8c563);
}
.diag-qcount-chip:focus-visible{outline:2px solid var(--gold-bright,#e8c563);outline-offset:2px}

/* ─── A3 (Wave 3) 2026-05-02: UD contrast pass — bump muted-on-dark text ─── */
:root[data-theme="dark"] {
  /* C9/C10 popups + cards already use --muted; raise its contrast a notch */
  --muted: #c8d0e8;       /* was #b8bedb (Lc ~ -78) → ~Lc -86 (AA+) */
  --muted2: #98a2ce;      /* was #7986cb (Lc ~ -56) → ~Lc -68 (AA at 14px+) */
}
:root[data-theme="light"] {
  --muted: #3a4670;       /* was #4a5680, deepen to AAA at 14px */
  --muted2: #4d5a92;      /* was #5562a8 */
}
/* A3: ensure focus-visible is consistently visible across SHINKAI + LOVE variants */
:where(button,a,input,select,textarea):focus-visible{outline:2px solid var(--gold-bright,#e8c563);outline-offset:3px;border-radius:2px}
/* A3: prevent gradient text from disappearing in high-contrast scenarios */
@media (prefers-contrast: more){
  *[class*="logo-en"],*[class*="hero-title"]{
    -webkit-text-fill-color:currentColor!important;background:none!important;color:var(--text)!important;
  }
}