/* themes.css — overrides for each theme via [data-theme="X"] on <body>.
   The default theme (mexican) lives in base.css :root. */

/* ============================================================
   THEME: izakaya — 昭和居酒屋・赤提灯
   藍紺の地にカドミウム朱、和紙の白、半化粧の暖色
   ============================================================ */
body[data-theme="izakaya"] {
  --font-display: "Reggae One", "Zen Maru Gothic", "Noto Sans JP", "Hiragino Sans", serif;
  --font-body:    "DotGothic16", "Zen Maru Gothic", "Noto Sans JP", "Hiragino Sans", monospace;

  --bg-grad-1: #0e1a2e;
  --bg-grad-2: #1d3550;
  --bg-grad-3: #ad1f2c;
  --bg-grad-4: #d8a45a;
  --bg-overlay-noise: 0.14;

  --accent-1: #d72b3a;   /* 朱 */
  --accent-2: #efd084;   /* 障子の色 */
  --accent-3: #234e74;   /* 藍 */
  --accent-4: #f5e6c8;   /* 半紙 */

  --text:        #f8eedd;
  --text-dim:    rgba(248, 238, 221, 0.7);
  --text-shadow: 0 2px 12px rgba(215, 43, 58, 0.5);

  --player-1: #d72b3a;
  --player-2: #efd084;
  --player-3: #234e74;
  --player-4: #f5e6c8;
  --player-5: #b56b3d;
  --player-6: #62a18a;
  --player-7: #c63d62;
  --player-8: #4a3856;

  --wheel-rim-inner: #efd084;
  --wheel-rim-outer: #1c0d10;
  --wheel-rim-glow:  rgba(215, 43, 58, 0.6);

  --center-bg-1: #f8eedd;
  --center-bg-2: #d72b3a;
  --center-glow: rgba(215, 43, 58, 0.7);

  --commentary-color:    #efd084;
  --commentary-shadow-1: #d72b3a;
  --commentary-shadow-2: #1d3550;

  --winner-ring: rgba(239, 208, 132, 0.95);

  --modal-bg:     rgba(14, 26, 46, 0.94);
  --modal-border: rgba(248, 238, 221, 0.18);
  --modal-card:   rgba(248, 238, 221, 0.05);

  --confetti-1: #d72b3a;
  --confetti-2: #efd084;
  --confetti-3: #234e74;
  --confetti-4: #f5e6c8;
  --confetti-5: #b56b3d;
  --confetti-6: #ffffff;

  --tap-glow: rgba(239, 208, 132, 0.55);

  --unit: "杯";
}

/* izakaya: 提灯チョーチン格子の床仕上げ */
body[data-theme="izakaya"]::before {
  background-image:
    radial-gradient(2px 2px at 22% 18%, var(--accent-1) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 70% 30%, var(--accent-2) 50%, transparent 51%),
    radial-gradient(2px 2px at 40% 78%, var(--accent-1) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 70%, var(--accent-4) 50%, transparent 51%),
    radial-gradient(1px 1px at 12% 55%, var(--accent-2) 50%, transparent 51%);
  background-size: 320px 320px, 280px 280px, 380px 380px, 240px 240px, 200px 200px;
}

/* ============================================================
   THEME: neon — 80s シティポップ・ネオンナイト
   ヴェイパーウェイブ的なシアン × マゼンタ、深紫宇宙
   ============================================================ */
body[data-theme="neon"] {
  --font-display: "Monoton", "Bebas Neue", "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  --font-body:    "Russo One", "Zen Maru Gothic", "Noto Sans JP", "Hiragino Sans", sans-serif;

  --bg-grad-1: #0a0224;
  --bg-grad-2: #1a0838;
  --bg-grad-3: #ff2bc6;
  --bg-grad-4: #00e5ff;
  --bg-overlay-noise: 0.12;

  --accent-1: #ff2bc6;   /* magenta */
  --accent-2: #00e5ff;   /* cyan */
  --accent-3: #ffe600;   /* electric yellow */
  --accent-4: #f7e8ff;   /* moonlight */

  --text:        #f7e8ff;
  --text-dim:    rgba(247, 232, 255, 0.7);
  --text-shadow: 0 0 20px rgba(255, 43, 198, 0.7);

  --player-1: #ff2bc6;
  --player-2: #00e5ff;
  --player-3: #ffe600;
  --player-4: #b94aff;
  --player-5: #4afff7;
  --player-6: #ff5b3a;
  --player-7: #84ff5b;
  --player-8: #ff85c1;

  --wheel-rim-inner: #00e5ff;
  --wheel-rim-outer: #0a0224;
  --wheel-rim-glow:  rgba(0, 229, 255, 0.7);

  --center-bg-1: #f7e8ff;
  --center-bg-2: #ff2bc6;
  --center-glow: rgba(255, 43, 198, 0.7);

  --commentary-color:    #00e5ff;
  --commentary-shadow-1: #ff2bc6;
  --commentary-shadow-2: #ffe600;

  --winner-ring: rgba(0, 229, 255, 0.95);

  --modal-bg:     rgba(10, 2, 36, 0.94);
  --modal-border: rgba(0, 229, 255, 0.22);
  --modal-card:   rgba(247, 232, 255, 0.04);

  --confetti-1: #ff2bc6;
  --confetti-2: #00e5ff;
  --confetti-3: #ffe600;
  --confetti-4: #b94aff;
  --confetti-5: #4afff7;
  --confetti-6: #ffffff;

  --tap-glow: rgba(0, 229, 255, 0.6);

  --unit: "杯";
}

/* neon: グリッド地面 + ネオン点滅 */
body[data-theme="neon"]::before {
  background-image:
    linear-gradient(transparent 95%, rgba(0, 229, 255, 0.2) 95%),
    linear-gradient(90deg, transparent 95%, rgba(255, 43, 198, 0.2) 95%),
    radial-gradient(2px 2px at 18% 25%, var(--accent-1) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 80% 18%, var(--accent-2) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 45% 80%, var(--accent-3) 50%, transparent 51%);
  background-size: 40px 40px, 40px 40px, 320px 320px, 280px 280px, 380px 380px;
  opacity: var(--bg-overlay-noise);
}

/* mexican is the default — already in base.css.
   Define a marker just so themes.js can detect default mode if it wants to. */
body[data-theme="mexican"] {
  /* explicit values reaffirmed for clarity */
  --unit: "杯";
}