/* ===================================================================
   SNS のハロウィンの色（2026-10-31 0:00〜11/1 0:00 日本時間）
   public/theme-init.js が <html> に data-halloween を付けたときだけ効く。
   段階 1: 色と上の帯だけ（絵の飾り・カード化・波の形は段階 2 以降）。

   キャストの世界（body.cast-world-active など）には効かせない。色の変数も
   body の上で上書きし、キャストの画面は body の印で外す（キャストは :root の
   既定の色のまま。:root には触らない）。
   =================================================================== */

/* ---------- ライト ---------- */

/* SNS の画面（キャストの世界・キャストの会話・作成の body では効かない） */
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) {
  --bg: #fdf8f2;
  --bg-hover: #f6eef4;
  --bg-secondary: #f6eef4;
  --bg-overlay: rgba(253, 248, 242, 0.92);
  --border: #efe3ef;
  --post-divider: #efe3ef;
  --text: #2a1d33;
  --text-secondary: rgba(42, 29, 51, 0.62);
  --text-soft: rgba(42, 29, 51, 0.62);
  --type-muted: rgba(42, 29, 51, 0.62);
  --post-topic-color: #7a4fa3;
  --like: #e8701a;
  --like-bg: rgba(232, 112, 26, 0.12);
  --primary: #5a2d82;
  --accent: #e8701a;
}

/* 上の帯（ヘッダー）: 地は絵（無いときは紫）。ぼかしと下の線は消す */
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .main-header {
  /* 53px の高さに収まるよう組んだ絵。おばけたちは真ん中の絵（左右のアイコンとロゴを避けた位置）、空と丘は横に繰り返す */
  background:
    url("/halloween/header-fg.webp") center top / auto 100% no-repeat,
    url("/halloween/header-bg.webp") left top / auto 100% repeat-x,
    #5a2d82;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 0;
}

/* Z のロゴは黒のまま（ダークでも反転しない）。白いふちで絵の上でも読めるようにする */
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .header-brand-logo {
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
}

/* 左のアイコン・右のキャストの丸に白い輪 2px */
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .header-profile-btn,
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .header-cast-switch-btn img {
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff;
}

/* タブ（おすすめ・推し・みんな・キャスト）: 地はクリーム。選んでいないのはくすんだ紫、選んでいるのはオレンジ */
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .timeline-tabs {
  background: #fdf8f2;
  border-bottom-color: #efe3ef;
}
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .timeline-tab-wrap {
  color: #8a6aa0;
}
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .timeline-tab-wrap.active {
  color: #e8701a;
}
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .timeline-tab-wrap.active::after {
  background: #e8701a;
}

/* 投稿のアイコンにオレンジの輪 2px */
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .post-item > .avatar-link .avatar-img,
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .post-item > .avatar-link .avatar-sm {
  box-shadow: 0 0 0 2px #e8701a;
}

/* 下のナビ: 地は紫、線は消す。選んでいないアイコンは白、選んでいるのはオレンジ */
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .bottom-nav {
  background: #4b2470;
  border-top: 0;
}
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .bnav-item .icon,
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .bnav-item .nav-fa,
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .bnav-item .nav-icon {
  color: #fff;
  opacity: 0.86;
}
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .bnav-item.active .icon,
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .bnav-item.active .nav-fa,
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .bnav-item.active .nav-icon {
  color: #f39a2b;
  opacity: 1;
}
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .bnav-item.active .nav-icon .nav-svg-fill {
  fill: #f39a2b;
}
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .bnav-item .badge {
  background: #e8701a;
  color: #2a1d33;
}

/* 新規ポストの丸いボタン・PC の左の「投稿」ボタン: オレンジに白い＋ */
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .fab {
  background: #e8701a;
}
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .fab:hover {
  background: #d9641a;
}
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .fab .icon {
  fill: #fff;
}
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .compose-btn-large {
  background: #e8701a;
  color: #fff;
}
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .compose-btn-large:hover {
  background: #d9641a;
}

/* ---------- ダーク（夜の色） ---------- */

:root[data-halloween][data-theme="dark"] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) {
  --bg: #170f1e;
  --bg-hover: #22172b;
  --bg-secondary: #22172b;
  --bg-overlay: rgba(23, 15, 30, 0.92);
  --border: #34243f;
  --post-divider: #34243f;
  --text: #f6eefa;
  --text-secondary: rgba(246, 238, 250, 0.68);
  --text-soft: rgba(246, 238, 250, 0.68);
  --type-muted: rgba(246, 238, 250, 0.68);
  --post-topic-color: #c4a3ec;
  --like: #f39a2b;
  --like-bg: rgba(243, 154, 43, 0.14);
  --primary: #f39a2b;
  --accent: #f39a2b;
}
:root[data-halloween][data-theme="dark"] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .timeline-tabs {
  background: #170f1e;
  border-bottom-color: #34243f;
}
:root[data-halloween][data-theme="dark"] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .timeline-tab-wrap {
  color: #a98fc4;
}
:root[data-halloween][data-theme="dark"] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .timeline-tab-wrap.active {
  color: #f39a2b;
}
:root[data-halloween][data-theme="dark"] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .timeline-tab-wrap.active::after {
  background: #f39a2b;
}
:root[data-halloween][data-theme="dark"] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .post-item > .avatar-link .avatar-img,
:root[data-halloween][data-theme="dark"] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .post-item > .avatar-link .avatar-sm {
  box-shadow: 0 0 0 2px #f39a2b;
}
:root[data-halloween][data-theme="dark"] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .bottom-nav {
  background: #2c1740;
}
:root[data-halloween][data-theme="dark"] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .bnav-item .badge {
  background: #f39a2b;
  color: #170f1e;
}
:root[data-halloween][data-theme="dark"] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .fab {
  background: #f39a2b;
}
:root[data-halloween][data-theme="dark"] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .fab:hover {
  background: #e08a22;
}
:root[data-halloween][data-theme="dark"] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .fab .icon {
  fill: #170f1e;
}
:root[data-halloween][data-theme="dark"] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .compose-btn-large {
  background: #f39a2b;
  color: #170f1e;
}
:root[data-halloween][data-theme="dark"] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .compose-btn-large:hover {
  background: #e08a22;
}

/* ---------- 段階 2（取り下げ後）: 投稿の飾り（投稿の見え方は段階 1 のまま）----------
   左の列（アイコンの下）に 40px の飾りを置く。投稿は position を変えず、飾りは ::after の abspos で、
   inset を指定せずに static position を使う（flex の align-self: flex-end で投稿の下の余白の内側に寄る）。
   投稿の中の要素の位置は変わらない。対象は #timeline-list（SNS のタイムラインの一覧）だけ。 */
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) #timeline-list > .post-item::after {
  content: "";
  position: absolute;
  align-self: flex-end;
  width: 40px;
  height: 40px;
  background: url("/halloween/pumpkin.webp") center / contain no-repeat;
  pointer-events: none;
}
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) #timeline-list > .post-item:nth-of-type(5n+2)::after {
  background-image: url("/halloween/ghost-wave.webp");
  filter: drop-shadow(0 0 1.5px rgba(90, 45, 130, 0.5));
}
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) #timeline-list > .post-item:nth-of-type(5n+3)::after {
  background-image: url("/halloween/lollipop.webp");
}
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) #timeline-list > .post-item:nth-of-type(5n+4)::after {
  background-image: url("/halloween/pumpkins.webp");
}
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) #timeline-list > .post-item:nth-of-type(5n)::after {
  background-image: url("/halloween/ghost-hat.webp");
  filter: drop-shadow(0 0 1.5px rgba(90, 45, 130, 0.5));
}

/* 新規ポストの丸いボタンの右上に、おばけを乗せる（押せる所は変えない） */
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .fab::after {
  content: "";
  position: absolute;
  top: -16px;
  right: -8px;
  width: 30px;
  height: 30px;
  background: url("/halloween/ghost-hat.webp") center / contain no-repeat;
  filter: drop-shadow(0 0 1.5px rgba(90, 45, 130, 0.5));
  pointer-events: none;
}

/* 下のナビの真ん中（ZYN の Z）のアイコンの右下に、小さなかぼちゃ */
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .bnav-chat-item::after {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 14px;
  height: 14px;
  background: url("/halloween/pumpkin.webp") center / contain no-repeat;
  pointer-events: none;
}

/* 投稿が無いとき: 猫（タイムラインの一覧の中だけ） */
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) #timeline-list > .empty-state::before {
  content: "";
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto 8px;
  background: url("/halloween/cat.webp") center / contain no-repeat;
  pointer-events: none;
}

/* 出た知らせ（トースト）の左に、小さなおばけ（文字の位置は変えない） */
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .toast {
  position: relative;
}
:root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .toast::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  background: url("/halloween/ghost.webp") center / contain no-repeat;
  filter: drop-shadow(0 0 1.5px rgba(90, 45, 130, 0.5));
  pointer-events: none;
}

/* ---------- PC（2026-10-30 オーナー「スマホ版に比べて PC 版がちょっと寂しい」）----------
   PC の判定は styles.css の PC 側（スマホの @media の逆）と同じ。スマホ（390×844 など）には効かない。 */
@media (min-width: 701px) and (orientation: landscape), (min-width: 1101px) {
  /* 左のメニュー: スマホの下のナビと同じ紫。文字とアイコンは白。選んでいる項目はオレンジ */
  :root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .sidebar {
    background: #4b2470;
  }
  :root[data-halloween][data-theme="dark"] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .sidebar {
    background: #2c1740;
  }
  :root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .sidebar .logo-wordmark,
  :root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .sidebar .snav-item,
  :root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .sidebar .snav-label,
  :root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .sidebar .snav-item .icon,
  :root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .sidebar .snav-item .nav-fa,
  :root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .sidebar .snav-item .nav-icon {
    color: #fff;
  }
  :root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .sidebar .snav-item:hover,
  :root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .sidebar .logo-link:hover {
    background: rgba(255, 255, 255, 0.1);
  }
  :root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .sidebar .snav-item.active .snav-label,
  :root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .sidebar .snav-item.active .nav-icon {
    color: #f39a2b;
  }
  :root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .sidebar .snav-item.active .nav-svg-fill,
  :root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .sidebar .snav-item.active .nav-svg-fill path {
    fill: #f39a2b;
  }
  /* 通知の数の印: 紫の上で読めるように、オレンジの地に濃い文字 */
  :root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .sidebar #sidebar-badge {
    background: #f39a2b;
    color: #2c1740;
  }

  /* 真ん中の列のいちばん上: スマホの上の帯と同じ絵（高さ 64px） */
  :root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .main::before {
    content: "";
    display: block;
    height: 64px;
    background:
      url("/halloween/header-fg.webp") center top / auto 100% no-repeat,
      url("/halloween/header-bg.webp") left top / auto 100% repeat-x,
      #5a2d82;
  }

  /* ZYN の欄のいちばん上（≡ ZYN 新しいチャット と右の 2 つのボタン）: 左のメニューと同じ紫。文字・アイコンは白 */
  :root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .rsidebar .zeta-chat-topbar {
    background: #4b2470;
    border-bottom-color: rgba(255, 255, 255, 0.12);
    color: #fff;
  }
  :root[data-halloween][data-theme="dark"] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .rsidebar .zeta-chat-topbar {
    background: #2c1740;
  }
  :root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .rsidebar .zeta-chat-topbar-tt,
  :root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .rsidebar .zeta-chat-topbar-name,
  :root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .rsidebar .zeta-chat-topbar-sub,
  :root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .rsidebar .zeta-chat-topbar button {
    color: #fff;
  }
  :root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .rsidebar .zeta-chat-topbar button:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  /* 広い画面で左右にできる余白も紫にして、左のメニューとつなげる（オーナー「横に余白ができちゃっててダサい」）。
     真ん中の列と ZYN の欄は今の地の色のままにし、紫の額縁の中に置く形にする */
  :root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) {
    background: #4b2470;
  }
  :root[data-halloween][data-theme="dark"] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) {
    background: #2c1740;
  }
  :root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .main {
    background: var(--bg);
  }
  :root[data-halloween] body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell) .rsidebar {
    background: var(--bg);
    background-clip: content-box;
  }
}

/* 引っぱったときや、ブラウザの上のバーが出入りするときに、上の帯の外（html の地）が白く見えないよう、
   ハロウィン中の SNS だけ html の地も紫にする（キャストの世界では今のまま）。 */
:root[data-halloween]:has(body:not(.cast-world-active):not(.cast-header-active):not(.cast-tabbar-active):not(.cast-studio-active):not(.ops-talk-cast-shell)) {
  background-color: #5a2d82;
}