/*
 * 色分け: エリア(固定の7色)・カード(白・黒・推理)・プレイヤー(席順に10色、固定)。
 * 色だけに頼らない(名前・ラベル・枠も出している)。選べる設定はない。
 */
:root {
  --area-city_hall: #f58a1f;           /* 市庁舎: オレンジ */
  --area-underground_passage: #9b5de5; /* 地下通路: 紫 */
  --area-cathedral: #f4f1ea;           /* 大聖堂: 白 */
  --area-black_mist_district: #14141c; /* ブラックミスト地区: 黒 */
  --area-detective_office: #2fb36a;    /* 探偵事務所: 緑 */
  --area-olivers_hideout: #3f7be0;     /* オリバーの隠れ家: 青 */
  --area-queens_airship: #6fd0f5;      /* 女王陛下の飛空艇: 空 */

  /* プレイヤー: 席順(1〜10)に、順番に割り当てる */
  --seat-1: #ff4d4d; --seat-2: #ffb000; --seat-3: #c6e03a; --seat-4: #2ecc71; --seat-5: #1fd1c4;
  --seat-6: #3da5ff; --seat-7: #7a7aff; --seat-8: #c77dff; --seat-9: #ff6fb5; --seat-10: #b08968;
}

/* ---- エリア ---- */
[data-area="city_hall"] { --ac: var(--area-city_hall); --ac-ink: #2b1500; }
[data-area="underground_passage"] { --ac: var(--area-underground_passage); --ac-ink: #fff; }
[data-area="cathedral"] { --ac: var(--area-cathedral); --ac-ink: #222; }
[data-area="black_mist_district"] { --ac: var(--area-black_mist_district); --ac-ink: #f3eee0; }
[data-area="detective_office"] { --ac: var(--area-detective_office); --ac-ink: #062414; }
[data-area="olivers_hideout"] { --ac: var(--area-olivers_hideout); --ac-ink: #fff; }
[data-area="queens_airship"] { --ac: var(--area-queens_airship); --ac-ink: #07202c; }

.area[data-area], .airship[data-area] {
  background: linear-gradient(color-mix(in srgb, var(--ac) 42%, var(--panel-2)), color-mix(in srgb, var(--ac) 22%, var(--panel)));
  border-color: var(--ac);
}
.area[data-area="cathedral"] { background: linear-gradient(#d9dbe6, #aeb4cc); }
.area[data-area="cathedral"] .area__name, .area[data-area="cathedral"] .area__action, .area[data-area="cathedral"] .area__dice { color: #1b1f33; }
.area[data-area="black_mist_district"] { background: linear-gradient(#1a1a24, #0a0a10); border-color: #6c6c80; }
.airship[data-area] { background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--ac) 65%, #1b2557), color-mix(in srgb, var(--ac) 25%, #1b2557)); }
.airship[data-area] .airship__name, .airship[data-area] .airship__note { color: #04141d; }
.area[data-reach="self"] { border-color: var(--ok); }
.area[data-reach="range"], .airship[data-reach="range"] { border-color: var(--danger); }
.area[data-reach="self"], .airship[data-reach="self"] { border-color: var(--ok); }

/* ほかの場所に出る、エリアの名前の色つきの印 */
.dchip__area[data-area], .pl__area[data-area] { position: relative; padding-left: 12px; }
.dchip__area[data-area]::before, .pl__area[data-area]::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; border-radius: 3px; transform: translateY(-50%);
  background: var(--ac); border: 1px solid rgba(255, 255, 255, .6);
}

/* ---- カード ---- */
.card--kind-white { background: linear-gradient(160deg, #ffffff, #e4e4ea); color: #1c1c24; border-color: #c8c8d4; }
.card--kind-black { background: linear-gradient(160deg, #34343e, #14141a); color: #ececf4; border-color: #6a6a7c; }
.card--kind-deduction { background: linear-gradient(160deg, #cfeedd, #8fd1aa); color: #0c2a19; border-color: #2fb36a; }
.card--kind-white .card__name, .card--kind-black .card__name { font-weight: 800; }
.card--back-deduction { background: repeating-linear-gradient(45deg, #2fb36a 0 10px, #23935a 10px 20px); border-color: #b9ecd0; color: #08331c; }
.card--back-white { background: repeating-linear-gradient(45deg, #ffffff 0 10px, #e6e6ee 10px 20px); color: #333; border-color: #c8c8d4; }
.card--back-black { background: repeating-linear-gradient(45deg, #2b2b33 0 10px, #15151b 10px 20px); border-color: #6a6a7c; }

/* ---- プレイヤー(席順の色) ---- */
[data-seat="1"] { --pc: var(--seat-1); } [data-seat="2"] { --pc: var(--seat-2); } [data-seat="3"] { --pc: var(--seat-3); }
[data-seat="4"] { --pc: var(--seat-4); } [data-seat="5"] { --pc: var(--seat-5); } [data-seat="6"] { --pc: var(--seat-6); }
[data-seat="7"] { --pc: var(--seat-7); } [data-seat="8"] { --pc: var(--seat-8); } [data-seat="9"] { --pc: var(--seat-9); }
[data-seat="10"] { --pc: var(--seat-10); }

.piece[data-seat] { background: color-mix(in srgb, var(--pc) 28%, rgba(0, 0, 0, .35)); border-color: var(--pc); }
.piece[data-seat] .piece__avatar { background: var(--pc); color: #10142a; box-shadow: 0 0 0 2px #10142a; }
.piece[data-turn="true"] { border-color: var(--turn); }
.piece[data-targetable="true"] { border-color: var(--danger); }
.pl[data-seat] { border-left: 6px solid var(--pc); }
.pl[data-seat] .pl__avatar { background: var(--pc); color: #10142a; }
.pl[data-turn="true"] { border-color: var(--turn); border-left-color: var(--pc); }
.dchip[data-seat] { background: color-mix(in srgb, var(--pc) 30%, #111a40); border-color: var(--pc); }
.dchip[data-turn="true"] { box-shadow: 0 0 0 2px var(--turn); }
.dchip[data-me="true"] .dchip__name { text-decoration: underline; }