/* 着せかえ: バイオレット（GENESIS 用。2026-10-22）
 * 新しい作る画面（ui/style.css）の上に重ねる。トップのロゴ「CHARAT GENESIS」の紫と、角ばった幅の広い文字の雰囲気から、
 * 紫を主役に、少し角の立った形・細い線・幅を広くとった英字（GENESIS）。ページの地は淡い紫だけ（斜めの線を左上・右下に置いたら、右下がパネルの裏に隠れて左上だけに見えたのでやめた。ユーザーの指摘 2026-10-22）。
 * キャラの後ろ（.stage）には模様を置かない（完成の画像は透過で紛らわしいため。DRESSUP と同じ決まり）。
 * 使い方: メーカーの create/index.php の $ui['theme'] = 'genesis-violet'（ローカルでは ?theme=genesis-violet で試せる）
 * GENESIS2（2026-10-27〜）は形は同じで色だけ水色とミント（ユーザー依頼「水色っぽく」「もう少し可愛い感じ」→ 候補 C。下の html[data-maker="genesis2"]、page.php が data-maker を付ける） */
:root {
  --violet: #6b2fc0;       /* 主の色（ロゴの紫） */
  --violet-2: #55229e;     /* 主の色の上で触ったとき */
  --violet-ink: #5a2aa8;   /* 文字にするときの紫（白の上で 8:1） */
  --violet-pale: 238, 232, 250; /* 地の淡い紫（r, g, b） */
  --ink: #2a2338;
  --sub: #776f86;
  --line: rgba(60, 30, 110, .12);
  --tile: #f4f1fa;
  --glass: rgba(255, 255, 255, .92);
  --glass-line: rgba(60, 30, 110, .12);
  --accent: #8a4fe0;
  --accent-2: #b48af0;
  --accent-mid: #9f6be8;
  --accent-soft: #f1eafd;
  --accent-rgb: 138, 79, 224; /* --accent の r, g, b（style.css の半透明のアクセント） */
  --shadow-sm: 0 6px 18px -10px rgba(50, 20, 100, .42);
  --shadow-lg: 0 26px 56px -30px rgba(50, 20, 100, .4);
  --scroll-thumb: rgba(107, 47, 192, .36);
  --scroll-thumb-hover: var(--violet);
}

/* GENESIS2: 水色とミント（色の名前は紫のままだが、値を替える。ユーザーが候補から「C 水色＋ミント」→ 濃くしたミントは濁るので「C1」を選んだ、2026-10-27）。
   ボタンは明るい水色 #39aee0 → ミント #62d3c4 のまま（濃くすると濁る）。白い字は地との差が小さいので、下でうっすら影を付けて読みやすく */
html[data-maker="genesis2"] {
  --violet: #39aee0;
  --violet-2: #2a99cc;
  --violet-ink: #17779f;
  --violet-pale: 224, 246, 252;
  --ink: #26404a;
  --sub: #6f8791;
  --line: rgba(30, 140, 170, .14);
  --tile: #ecf9fb;
  --glass-line: rgba(30, 140, 170, .14);
  --accent: #62d3c4;
  --accent-2: #a7ebe1;
  --accent-mid: #4cc2d4;
  --accent-soft: #e3f8f5;
  --accent-rgb: 98, 211, 196;
  --shadow-sm: 0 6px 18px -10px rgba(30, 120, 150, .4);
  --shadow-lg: 0 26px 56px -30px rgba(30, 120, 150, .36);
  --scroll-thumb: rgba(57, 174, 224, .38);
}
html[data-maker="genesis2"] .cta, html[data-maker="genesis2"] .cat-ind, html[data-maker="genesis2"] .tool.on, html[data-maker="genesis2"] .ptn-swap.on,
html[data-maker="genesis2"] .fa-main, html[data-maker="genesis2"] .view-btn, html[data-maker="genesis2"] .cat.sel { text-shadow: 0 1px 2px rgba(10, 70, 90, .45); }
html[data-maker="genesis2"] .cat { color: rgba(38, 64, 74, .6); }
html[data-maker="genesis2"] .cat.sel { color: #fff; }
html[data-maker="genesis2"] .finish { background: rgba(38, 64, 74, .34); }

/* BIGBANG（2026-10-28〜）: ロゴの星の紺 #232a80 と、少し明るい紺の 2 色だけ（色数は絞る） */
html[data-maker="boys"] {
  --violet: #232a80;
  --violet-2: #1a2066;
  --violet-ink: #232a80;
  --violet-pale: 232, 234, 248;
  --ink: #1f2238;
  --sub: #6c7088;
  --line: rgba(30, 36, 110, .13);
  --tile: #f0f1f8;
  --glass-line: rgba(30, 36, 110, .13);
  --accent: #4450b8;
  --accent-2: #8e96dc;
  --accent-mid: #3a44a4;
  --accent-soft: #e9ebf8;
  --accent-rgb: 68, 80, 184;
  --shadow-sm: 0 6px 18px -10px rgba(20, 26, 90, .42);
  --shadow-lg: 0 26px 56px -30px rgba(20, 26, 90, .4);
  --scroll-thumb: rgba(35, 42, 128, .36);
}
html[data-maker="boys"] .cat { color: rgba(31, 34, 56, .6); }
html[data-maker="boys"] .cat.sel { color: #fff; }
html[data-maker="boys"] .finish { background: rgba(31, 34, 56, .34); }

/* 地はメーカーにかかわらず全体の TOP と同じ生成り #F5F3EF（style.css の body。2026-10-28 ユーザー決定）。メーカーの色は箱・ボタンで出す（前は白から淡い紫へ、GENESIS2 は淡い水色とミント） */

/* ---- 浮いているボタン: 白に細い線 ---- */
.glass, .brand, .pad { border: 1px solid var(--line); box-shadow: var(--shadow-sm); }

/* 完成: 紫。角に小さな菱形（ロゴの角ばった感じ） */
.cta {
  position: relative;
  background: linear-gradient(135deg, var(--violet), var(--accent));
  box-shadow: 0 10px 22px -12px var(--violet);
}
.cta::after { content: ""; position: absolute; top: 8px; right: 11px; width: 6px; height: 6px; background: #fff; opacity: .9; transform: rotate(45deg); pointer-events: none; }
.cta:hover { filter: none; background: linear-gradient(135deg, var(--violet-2), var(--violet)); }
.tool.on, .ptn-swap.on { background: linear-gradient(135deg, var(--violet), var(--accent)); }
.first-terms a, .slots p.slots-msg, .rnd h3 .lock-n, .tour-step, .name-chip:hover { color: var(--violet-ink); }

/* ---- キャラの箱: 白のまま（模様は置かない）、少し角の立った形 ---- */
.stage { border-radius: 18px; box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); }
.view-btn { background: var(--violet); }
.history, .rail { border-color: var(--line); box-shadow: var(--shadow-sm); }

/* ---- パーツのパネル ---- */
.panel { border-radius: 20px; border-color: var(--line); box-shadow: var(--shadow-lg); }
.cat { color: rgba(42, 35, 56, .62); }
.cat.sel { color: #fff; }
.cat-ind { border-radius: 14px; background: linear-gradient(135deg, var(--violet), var(--accent)); box-shadow: 0 10px 20px -12px var(--violet); }
.cat-name { color: var(--violet-ink); letter-spacing: .06em; }
.part { border-radius: 14px; background: var(--tile); }
.part:hover { background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); }
.part.sel { background: #fff; }
.part.sel::before { box-shadow: inset 0 0 0 2.5px var(--violet); }
.part.sel::after { background-color: var(--accent); } /* 選んだしるしは紫 */

/* ---- ダイアログ ---- */
.sheet { box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); }
.pill { background: var(--tile); }

/* ---- 完成画面: 題字は紫、字の間を広く ---- */
.finish { background: rgba(42, 35, 56, .34); }
.finish-head h2 { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--violet-ink); letter-spacing: .16em; }
.fa { border-radius: 14px; }
.fa-main { background: linear-gradient(135deg, var(--violet), var(--accent)); box-shadow: 0 12px 24px -14px var(--violet); }
.fa-main:hover { filter: none; background: linear-gradient(135deg, var(--violet-2), var(--violet)); }

/* ---- 読み込み中の画面・はじめての人の同意の画面: 淡い紫の地に、字の間を広くとった「GENESIS」 ---- */
html #boot { background: radial-gradient(560px 420px at 50% 42%, rgba(var(--violet-pale), 1) 0%, transparent 70%), #fff; color: var(--ink); }
html #boot .boot-name, .first-maker { font-size: 20px; font-weight: 800; letter-spacing: .5em; padding-left: .5em; color: var(--violet); }
html #boot .boot-rule.wait { background: rgba(var(--violet-pale), 1); }
html #boot .boot-rule.wait::before { background: linear-gradient(to right, transparent, var(--violet), transparent); }
html.first-visit #first { background: radial-gradient(640px 480px at 50% 40%, rgba(var(--violet-pale), 1) 0%, transparent 70%), #fff; }

/* スマホ: 影は控えめに。全身を大きく映すとき（.app.tall）は、角と線をキャラの段の枠に（DRESSUP と同じ） */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .stage { border-radius: 16px; }
  .panel { border-radius: 20px 20px 0 0; }
  .cta::after { top: 7px; right: 9px; width: 5px; height: 5px; }
  .app.tall .stage { box-shadow: none; }
  .app.tall .stage-box { border-radius: 16px; box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); }
  /* 全身のスマホのパーツの地（style.css は淡い紫の決め打ち）を GENESIS2 は淡い水色に */
  html[data-maker="genesis2"] .app.tall .part { background-color: rgba(228, 247, 250, .82); }
}

/* PC の整理用のタブ（style.css の .panel.has-groups）: 紙は地の淡い色（GENESIS は紫・GENESIS2 は水色。--violet-pale を data-maker で替えている）、帯はアクセント（2026-10-28） */
.panel.has-groups { --tab-paper: rgb(var(--violet-pale)); --tab-rule: var(--glass-line); --tab-ink: var(--ink); --tab-mute: var(--sub); --tab-mark: var(--accent); }