/* ==============================
   Theme: Sakura (パステルピンク / ライト / 可愛い丸文字)
   ============================== */
body.theme-sakura {
  --bg: rgb(255, 240, 245);
  --border: rgba(220, 120, 160, 0.25);
  --border-subtle: rgba(200, 100, 140, 0.12);
  --accent: #e06090;
  --accent2: #b060d0;
  --text: #4a2038;
  --text-muted: rgba(100, 40, 70, 0.55);
  --text-dim: rgba(120, 60, 90, 0.4);
  --rank-label: #c05080;
  --bar-glow: rgba(224, 96, 144, 0.35);
  --session-accent: rgba(200, 80, 130, 0.7);
  --score-up: #2e8b57;
  --score-down: #d04060;
  --bar-track: rgba(0, 0, 0, 0.06);
  --font-display: "M PLUS Rounded 1c", sans-serif;
  --font-body: "M PLUS Rounded 1c", sans-serif;
}

/* ==============================
   Theme: Emerald (グリーン / ゴールド / エレガント)
   ============================== */
body.theme-emerald {
  --bg: rgb(8, 24, 16);
  --border: rgba(0, 200, 120, 0.18);
  --border-subtle: rgba(0, 200, 120, 0.06);
  --accent: #00e676;
  --accent2: #ffd740;
  --text: #d8f0e0;
  --text-muted: rgba(200, 255, 220, 0.55);
  --text-dim: rgba(180, 240, 200, 0.4);
  --rank-label: #69f0ae;
  --bar-glow: rgba(0, 230, 118, 0.4);
  --session-accent: rgba(0, 230, 118, 0.7);
  --font-display: "Cinzel", serif;
  --font-body: "Noto Serif JP", serif;
}

/* ==============================
   Theme: Crimson (レッド / ダーク / 力強い)
   ============================== */
body.theme-crimson {
  --bg: rgb(28, 8, 8);
  --border: rgba(255, 80, 60, 0.18);
  --border-subtle: rgba(255, 80, 60, 0.06);
  --accent: #ff5252;
  --accent2: #ff9100;
  --text: #f0dada;
  --text-muted: rgba(255, 200, 200, 0.55);
  --text-dim: rgba(255, 180, 180, 0.4);
  --rank-label: #ff8a80;
  --bar-glow: rgba(255, 82, 82, 0.4);
  --session-accent: rgba(255, 82, 82, 0.7);
  --font-display: "Bebas Neue", sans-serif;
  --font-body: "Noto Sans JP", sans-serif;
}

/* ==============================
   Theme: Retro (レトロゲーム / ドット絵風)
   ============================== */
body.theme-retro {
  --bg: rgb(16, 16, 32);
  --border: rgba(100, 255, 100, 0.2);
  --border-subtle: rgba(100, 255, 100, 0.06);
  --accent: #64ff64;
  --accent2: #ffff00;
  --text: #d0ffd0;
  --text-muted: rgba(200, 255, 200, 0.6);
  --text-dim: rgba(160, 255, 160, 0.4);
  --rank-label: #80ff80;
  --bar-glow: rgba(100, 255, 100, 0.5);
  --session-accent: rgba(100, 255, 100, 0.7);
  --font-display: "DotGothic16", sans-serif;
  --font-body: "DotGothic16", sans-serif;
}

/* ==============================
   Theme: Brush (和風 / 筆文字 / 明朝)
   ============================== */
body.theme-brush {
  --bg: rgb(20, 16, 12);
  --border: rgba(200, 170, 120, 0.2);
  --border-subtle: rgba(200, 170, 120, 0.08);
  --accent: #d4a574;
  --accent2: #a08060;
  --text: #e8dcc8;
  --text-muted: rgba(220, 200, 170, 0.6);
  --text-dim: rgba(200, 180, 150, 0.45);
  --rank-label: #d4a574;
  --bar-glow: rgba(212, 165, 116, 0.4);
  --session-accent: rgba(212, 165, 116, 0.7);
  --font-display: "Shippori Mincho", serif;
  --font-body: "Yuji Mai", serif;
}

/* ==============================
   Theme: Vivilant (赤紫 × 青紫 / ヴィラン / ダーク)
   ============================== */
body.theme-vivilant {
  --bg: rgb(12, 4, 20);
  --border: rgba(160, 40, 200, 0.2);
  --border-subtle: rgba(140, 30, 180, 0.08);
  --accent: #c040e0;
  --accent2: #6020d0;
  --text: #e0d0f0;
  --text-muted: rgba(220, 200, 240, 0.55);
  --text-dim: rgba(200, 170, 230, 0.4);
  --rank-label: #d060ff;
  --bar-glow: rgba(180, 50, 220, 0.5);
  --session-accent: rgba(160, 40, 200, 0.7);
  --score-up: #a0ff60;
  --score-down: #ff3060;
  --bar-track: rgba(255, 255, 255, 0.06);
  --font-display: "Rajdhani", sans-serif;
  --font-body: "Noto Sans JP", sans-serif;
}

/* ==============================
   Theme: Ocean (深海ブルー / ティール / 落ち着いた)
   ============================== */
body.theme-ocean {
  --bg: rgb(6, 18, 32);
  --border: rgba(0, 180, 216, 0.18);
  --border-subtle: rgba(0, 180, 216, 0.06);
  --accent: #00b4d8;
  --accent2: #0077b6;
  --text: #caf0f8;
  --text-muted: rgba(202, 240, 248, 0.55);
  --text-dim: rgba(144, 224, 239, 0.4);
  --rank-label: #48cae4;
  --bar-glow: rgba(0, 180, 216, 0.4);
  --session-accent: rgba(0, 180, 216, 0.7);
  --font-display: "Orbitron", sans-serif;
  --font-body: "Noto Sans JP", sans-serif;
}

/* ==============================
   Theme: Plain (ライト / シンプル)
   ============================== */
body.theme-plain {
  --bg: rgb(245, 245, 245);
  --border: rgba(0, 0, 0, 0.1);
  --border-subtle: rgba(0, 0, 0, 0.06);
  --accent: #333333;
  --accent2: #888888;
  --text: #222222;
  --text-muted: rgba(0, 0, 0, 0.45);
  --text-dim: rgba(0, 0, 0, 0.3);
  --rank-label: #555555;
  --bar-glow: rgba(0, 0, 0, 0.1);
  --session-accent: rgba(0, 0, 0, 0.5);
  --score-up: #2e7d32;
  --score-down: #c62828;
  --bar-track: rgba(0, 0, 0, 0.08);
  --font-display: "Noto Sans JP", sans-serif;
  --font-body: "Noto Sans JP", sans-serif;
}

/* クリア: 背景・枠を透過し、文字とバーだけを配信画面に重ねる。
   パネル背景が無いので #overlay に drop-shadow を掛け、どんな配信背景でも読めるようにする
   (gradientクリップ文字にも効かせるため text-shadow ではなく filter を使う)。 */
body.theme-clear {
  --bg: transparent;
  --border: transparent;
  --border-subtle: transparent;
  --accent: #ffffff;
  --accent2: #a8e6ff;
  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.72);
  --text-dim: rgba(255, 255, 255, 0.5);
  --rank-label: #ffffff;
  --bar-glow: rgba(255, 255, 255, 0.35);
  --session-accent: rgba(255, 255, 255, 0.85);
  --score-up: #86ffa0;
  --score-down: #ff9a9a;
  --bar-track: rgba(255, 255, 255, 0.16);
  --font-display: "Rajdhani", "Noto Sans JP", sans-serif;
  --font-body: "Noto Sans JP", sans-serif;
}
body.theme-clear #overlay {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 5px rgba(0, 0, 0, 0.55));
}

/* Big Three Dragon (大三元): 白發中 の三色をダーク配色で。發=#226074(背景) / 白=文字 / 中=赤(ワンポイント)。
   濃い水色の地に白い文字、赤は暗背景でも読めるよう明度を上げて段位ラベル等のワンポイントのみ。 */
body.theme-bigthree {
  --bg: #226074;                /* 背景 = 濃い水色 */
  --border: rgba(255, 255, 255, 0.3);
  --border-subtle: rgba(255, 255, 255, 0.12);
  --accent: #ffffff;            /* メーター右端・見出し = 白 */
  --accent2: #a9dbe6;           /* メーター左端 = 明るい水色 (グラデーション) */
  --text: #ffffff;              /* 文字 = 白 */
  --text-muted: rgba(255, 255, 255, 0.68);
  --text-dim: rgba(255, 255, 255, 0.45);
  --rank-label: #ff8a8f;        /* 段位ラベル = 赤 (ワンポイント) */
  --bar-glow: rgba(255, 255, 255, 0.4);
  --session-accent: #ff8a8f;
  --score-up: #a9dbe6;
  --score-down: #ff8a8f;
  --bar-track: rgba(255, 255, 255, 0.15);
  --font-display: "Mochiy Pop One", sans-serif;
  --font-body: "Noto Sans JP", sans-serif;
}