/* ハロウィン調の色目と飾り(10/21。本人「サイトのデザインをハロウィン調にして」)。
   選び: 色は「夜の紫とかぼちゃ」= 昼は薄い藤色の地にかぼちゃ色のボタン、夜は濃い紫と黒にかぼちゃ色が光る。言葉は目立つ所だけハロウィンに。
   絵は本人の画像(assets/halloween。仕様 docs/halloween-art-spec.md)と、仮装した海の生きもの(assets/seapuzzle)。
   10/31 まで。11/1 0時(日本時間)に VPS の仕掛けがノーマルへ戻す。
   文字と地の比は、本文・補足・薄い文字・ボタンの字まで 4.5:1 以上。画面の字は台帳(wd)のまま。ここで足すのは絵と飾りだけ */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700;800&display=swap');

:root {
  --bg: #f3eefa;
  --bg-card: #ffffff;
  --bg-card-hover: #efe6fa;
  --accent: #b84a0c;
  --accent-hover: #9c3e08;
  --accent2: #6b3fa0;
  --on-accent: #ffffff;
  --gold: #f0a030;
  --gold-soft: #ffe9c8;
  --gold-ink: #6b3a05;
  --seal: #2c1a44;
  --seal-text: #fff3e2;
  --text: #251a36;
  --text-dim: #54466a;
  --text-faint: #625478;
  --border: #e2d6f0;
  --border-strong: #8a6bb5;
  --live: #c2361f;
  --live-bg: #d9483f;
  --stem: #3f7a2e;
  --focus: #6b3fa0;
  --hw-dot1: rgba(240, 140, 40, 0.28);
  --hw-dot2: rgba(107, 63, 160, 0.22);
  --hw-board: linear-gradient(180deg, #221242 0%, #62348a 100%);
}

/* 夜は、濃い紫と黒に、かぼちゃ色が光る */
:root[data-theme="dark"] {
  --bg: #140c21;
  --bg-card: #221634;
  --bg-card-hover: #2d1e44;
  --accent: #ff9a3c;
  --accent-hover: #ffb066;
  --accent2: #a37be0;
  --on-accent: #1a0e05;
  --gold: #ff9a3c;
  --gold-soft: #3a2614;
  --gold-ink: #ffb066;
  --seal: #fff0dc;
  --seal-text: #140c21;
  --text: #f4ecff;
  --text-dim: #d3c4ec;
  --text-faint: #bba9d8;
  --border: #3a2a55;
  --border-strong: #8a6bb5;
  --live: #ff7a72;
  --live-bg: #d9483f;
  --stem: #a7d38b;
  --focus: #ffb066;
  --hw-dot1: rgba(255, 154, 60, 0.22);
  --hw-dot2: rgba(163, 123, 224, 0.2);
}

/* 地: かぼちゃ色と紫の小さな丸を、ところどころに */
body {
  background:
    radial-gradient(circle 5px at 12% 18%, var(--hw-dot1) 0 100%, transparent 101%),
    radial-gradient(circle 4px at 86% 30%, var(--hw-dot2) 0 100%, transparent 101%),
    radial-gradient(circle 6px at 70% 78%, var(--hw-dot1) 0 100%, transparent 101%),
    radial-gradient(circle 4px at 26% 64%, var(--hw-dot2) 0 100%, transparent 101%),
    radial-gradient(ellipse at 6% 4%, rgba(240, 140, 40, 0.16), transparent 46%),
    radial-gradient(ellipse at 96% 12%, rgba(107, 63, 160, 0.18), transparent 48%),
    var(--bg);
  background-attachment: fixed;
}
:root[data-theme="dark"] body {
  background:
    radial-gradient(circle 5px at 12% 18%, var(--hw-dot1) 0 100%, transparent 101%),
    radial-gradient(circle 4px at 86% 30%, var(--hw-dot2) 0 100%, transparent 101%),
    radial-gradient(circle 6px at 70% 78%, var(--hw-dot1) 0 100%, transparent 101%),
    radial-gradient(ellipse at 50% -10%, rgba(163, 123, 224, 0.22), transparent 55%),
    linear-gradient(180deg, #1e1230 0%, var(--bg) 60%);
  background-attachment: fixed;
}

/* 地に、コウモリ・おばけ・星・キャンディ・クモの巣を薄く(本人のステッカー)。字の後ろに置き、押しても何も起きない */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.16;
  background:
    url('/skin/assets/halloween/web.png') right -10px top 60px / 130px auto no-repeat,
    url('/skin/assets/halloween/bat.png') 4% 26% / 70px auto no-repeat,
    url('/skin/assets/halloween/ghost.png') 94% 52% / 56px auto no-repeat,
    url('/skin/assets/halloween/star.png') 10% 78% / 44px auto no-repeat,
    url('/skin/assets/halloween/candy.png') 86% 90% / 56px auto no-repeat;
}
:root[data-theme="dark"] body::after { opacity: 0.22; }

/* 上の帯: 下の縁に紫の線と、かぼちゃ色の点 */
.topbar {
  position: relative;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 2px solid var(--accent2);
}
.topbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 6px;
  background: radial-gradient(circle at 12px 3px, var(--gold) 0 3px, transparent 3.5px) 0 0 / 24px 6px repeat-x;
  opacity: 0.8;
  pointer-events: none;
}
/* 左上の印は、魔女の帽子のヒトデ(本人の丸いアイコン)。名前の字はロゴの絵に(字は読み上げ用に残し、見えなくする) */
.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #2c1a44 url('/skin/assets/halloween/icon.png') center / cover no-repeat;
  box-shadow: 0 0 0 2px var(--gold), 0 3px 8px rgba(44, 26, 68, 0.3);
}
.brand-mark svg { opacity: 0; }
.brand-text { width: 100px; height: 48px; background: url('/skin/assets/halloween/logo.png') left center / contain no-repeat; }
.brand-text > span { opacity: 0; }
@media (max-width: 640px) { .brand-text { width: 76px; height: 36px; } }

/* 上のメニュー: かぼちゃ色の札 */
.nav-pill.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 3px 10px rgba(184, 74, 12, 0.3); }

/* 見出し: 丸い字に、小さなかぼちゃの印 */
h1, h2 { font-family: 'M PLUS Rounded 1c', 'Zen Kaku Gothic New', sans-serif; font-weight: 800; }
.section-label,
.home-head .section-label {
  font-family: 'M PLUS Rounded 1c', 'Zen Kaku Gothic New', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
}
.section-label::before,
.container .home-head .section-label::before {
  content: '';
  -webkit-mask: none;
  mask: none;
  display: inline-block;
  width: 0.95em;
  height: 0.9em;
  margin-right: 0.45em;
  vertical-align: -0.1em;
  background:
    url('/skin/assets/halloween/pumpkin.png') center / contain no-repeat;
}

/* ボタン: ふわっと丸く、かぼちゃ色 */
.btn { border-radius: 999px; font-weight: 800; }
.btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, #ffffff), var(--accent));
  box-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 60%, #000), 0 6px 14px rgba(184, 74, 12, 0.25);
  transition: transform 0.08s, box-shadow 0.08s;
}
.btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 60%, #000); }
.btn-secondary { border-radius: 999px; border: 2px solid var(--border-strong); }

/* カード: 丸くて、紫のふち */
.channel-card,
.game-card {
  border: 2px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 6px 16px rgba(44, 26, 68, 0.08);
}
.channel-card:hover,
.game-card:hover { border-color: var(--accent2); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(44, 26, 68, 0.16); }

/* トップのいちばん上に、ハロウィンの看板(本人の絵「かわいいハロウィンの海の仲間たち２」)。トップの時だけ */
.container:has(> #channelGrid)::before {
  content: '';
  display: block;
  aspect-ratio: 3 / 1;
  max-height: 280px;
  margin: 8px 0 18px;
  border-radius: 24px;
  border: 2px solid var(--accent2);
  box-shadow: 0 8px 22px rgba(44, 26, 68, 0.2);
  background: url('/skin/assets/halloween/banner.jpg') center bottom / cover no-repeat, var(--hw-board);
}

/* 配信していない時の絵は、かぼちゃのベッドで眠るタコ(本人の絵) */
.empty-art[data-art="empty-live"] { background: url('/skin/assets/halloween/sleep.png') center / contain no-repeat; }
.empty-art[data-art="empty-live"] .art { visibility: hidden; }

/* 江戸の臙脂で書かれていた所を、この風味の色に */
.display-name-banner {
  background: linear-gradient(90deg, rgba(240, 140, 40, 0.18), rgba(107, 63, 160, 0.16));
}
@keyframes tapToPlayPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 74, 12, 0.35); }
  50% { box-shadow: 0 0 0 12px rgba(184, 74, 12, 0); }
}