/*
 * 期間限定のお祝い演出（DreamCoreアプリ1周年 2026-10 など）の見た目。JS は public/js/modules/celebration.js。
 *
 * 読み込み先: app-shell.html / v3/index.html / editor.html。v3 は style.css を読まない（「全部作り直す」方針）ので、
 * このファイルは **自分の変数だけで完結**させる（--red や --s-16 など、ページ側のトークンに頼らない。
 * v3 のトークン（--font-display）は在れば使い、無ければ既定にフォールバック）。
 *
 * DreamCore の言語（memory: feedback_dreamcore_visual_language）:
 *   - 器は既存のもの: 白いカード・薄い線か線なし・やわらかい影・既存の角丸（24px のモーダル・pill のボタン）。
 *   - 太い枠・ハードシャドウ・独自の地色は使わない。
 *   - 赤（#E7352B）はボタンと「粒」（ロゴの肩の印）。赤い**面**は、お題バナーと同じ「赤ベタ地 + イラスト」の
 *     言語として、ポップアップの絵の段と祝い帯にだけ使う（2026-10-07 PL「地味」→ founder の注文「もっと派手に」。
 *     初版は白カード + 墨の 1 + 赤い炎の粒だったが、1周年のアピールとして弱かった）。
 *   - 遊び心は「絵（キャラとケーキ）」「開いた瞬間に画面全体へ弾ける紙吹雪」「弾んで出るカード」に置く。
 * 動きを減らす設定（prefers-reduced-motion）では、紙吹雪を作らず（JS）、出現の動きも止める（下）。
 */

:root {
  --dc-cel-red: #E7352B;
  --dc-cel-ink: #171717;
  --dc-cel-ink-2: #525252;
  --dc-cel-line: #ECECEC;
  --dc-cel-paper: #FFFFFF;
  --dc-cel-ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dc-cel-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* お題 celebrate のヒーロー画像の地の赤（実測 rgb(189,35,30)）。絵と同じ地にして継ぎ目を消す */
  --dc-cel-hero-red: #BD231E;
}

/* ======================================================================
 * 2. ロゴの肩の「1st」
 * ----------------------------------------------------------------------
 * DOM を足さず ::after で描く（WHY: ナビ・ドロワー・v3 のレールは何度も描き直されるので、
 * 要素を差し込むと描き直しのたびに付け直しが要る。CSS なら html.dc-cel-on がある間は自動で付く）。
 * 文字は JS が --dc-cel-mark-text に入れる（定義 JSON の mark.text。ここに直書きしない = 次のお祝いでも使える）。
 * 読み上げは `content: <文字> / <代替>` の代替で 6 言語の markLabel を読ませる（「1st」とだけ読まれても意味が無い）。
 * ロゴ画像（/icons/icon-192.png）は差し替えない: PWA のアイコン・ホーム画面・WEBLOX のブランド差し替え（fileOverrides）
 * が同じファイルを参照していて、期間限定の飾りがアプリのアイコンにまで波及するため。
 * ====================================================================== */
html.dc-cel-on .brand-mark,
html.dc-cel-on .drawer-brand-mark {
  position: relative;
  overflow: visible;
}

html.dc-cel-on .brand-mark::after,
html.dc-cel-on .drawer-brand-mark::after,
html.dc-cel-on #app > .tabbar .rail-brand::after,
html.dc-cel-on .view.pl .pl-head .brand[data-brand]::after {
  content: var(--dc-cel-mark-text, "");
  display: inline-block;
  box-sizing: border-box;
  min-width: 18px;
  padding: 0 4px;
  height: 14px;
  border-radius: 999px;
  background: var(--dc-cel-red);
  color: #fff;
  font: 800 9px/14px 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
  /* やわらかい影だけ（ロゴの上でも粒が浮いて見える程度）。ハードシャドウ・白フチの太線は使わない */
  box-shadow: 0 2px 6px rgba(231, 53, 43, 0.28);
  pointer-events: none;
  animation: dc-cel-mark-pop 560ms var(--dc-cel-ease-pop) 240ms 1 both;
}

/*
 * 読み上げの代替（`content: 文字 / 代替`）は対応ブラウザだけ（Safari 17.4+ / Chrome 77+ / Firefox 128+）。
 * WHY @supports で囲うか: var() を含む宣言は「解析時は常に有効・計算時に無効なら unset」になるので、
 * 未対応ブラウザで後ろに並べるだけだと前の宣言に戻らず content が消える（= 古い iOS で印が出ない）。
 */
@supports (content: "x" / "y") {
  html.dc-cel-on .brand-mark::after,
  html.dc-cel-on .drawer-brand-mark::after,
  html.dc-cel-on #app > .tabbar .rail-brand::after,
  html.dc-cel-on .view.pl .pl-head .brand[data-brand]::after {
    content: var(--dc-cel-mark-text, "") / var(--dc-cel-mark-alt, "");
  }
}

/* 28px のロゴ（/create の見出し・ドロワー）の右肩に乗せる */
html.dc-cel-on .brand-mark::after,
html.dc-cel-on .drawer-brand-mark::after {
  position: absolute;
  top: -6px;
  right: -12px;
}
/* 完成画面の小さいロゴ（.brand-mark.small）では少し内側に寄せる */
html.dc-cel-on .brand-mark.small::after {
  top: -7px;
  right: -14px;
}

/* v3 の あそぶ の見出し（ブランド名の文字）: 文字の右肩に小さく添える */
html.dc-cel-on .view.pl .pl-head .brand[data-brand]::after {
  position: relative;
  top: -0.85em;
  margin-left: 4px;
  vertical-align: baseline;
}
/* 名前が届く前（空の span）は印だけ浮かないように出さない */
html.dc-cel-on .view.pl .pl-head .brand[data-brand]:empty::after {
  display: none;
}

/* v3 の PC の左レール（1024px 以上で出る。携帯では .rail-brand 自体が display:none） */
html.dc-cel-on #app > .tabbar .rail-brand {
  position: relative;
}
html.dc-cel-on #app > .tabbar .rail-brand::after {
  position: absolute;
  top: 2px;
  /* 1024〜1279px: ロゴは段の中央（34px の画像）→ 画像の右肩 = 中央 + 17px - 8px */
  left: calc(50% + 9px);
}
@media (min-width: 1280px) {
  /* 1280px 以上: 左寄せ（padding 12px）+ 34px の画像 → 右肩 = 12 + 34 - 8 */
  html.dc-cel-on #app > .tabbar .rail-brand::after { left: 38px; }
}

@keyframes dc-cel-mark-pop {
  0%   { transform: scale(0) rotate(-12deg); opacity: 0; }
  60%  { transform: scale(1.18) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ======================================================================
 * 1. お祝いポップアップ
 * ----------------------------------------------------------------------
 * 構成（2026-10-07 作り直し）: [赤ベタ地の絵（4:3）+ 特大の見出し「1周年」] / [白: ありがとう・本文・ボタン]
 * 絵の段がカードの約 6 割（390px の携帯で画面の高さの 40% 前後）。絵が無い定義では白いカード + ろうそくの「1」。
 * ====================================================================== */
.dc-cel-pop {
  position: fixed;
  inset: 0;
  /* 下ナビ・ドロワー・ヘッダー（100〜1000 台）より前。他のモーダルとは JS が重ならないよう待つ */
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* MOBILE-ONLY: アプリではノッチ・ホームバーの分だけ内側に（Web の Safari でも env は非ゼロになりうるので native だけで分ける） */
html.native-app .dc-cel-pop {
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

/* 数字と助数詞を割らない（JS の setText が包む。「1歳」「1周年」「20%OFF」「1 año」） */
.dc-cel-nb { white-space: nowrap; }

.dc-cel-pop-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  animation: dc-cel-fade 260ms ease both;
  touch-action: none;
}

.dc-cel-pop-card {
  position: relative;
  z-index: 1;
  width: min(380px, 100%);
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  border-radius: 28px;
  background: var(--dc-cel-paper);
  color: var(--dc-cel-ink);
  text-align: center;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.28);
  outline: none;
  /* 弾んで出る（下から縮んだ状態 → 少し大きく → 落ち着く） */
  animation: dc-cel-card-in 640ms var(--dc-cel-ease-pop) both;
}
.dc-cel-pop-card:not(.has-hero) { padding-top: 28px; }

/* ---- 絵の段（赤ベタ地 + 絵 + 特大の見出し） */
.dc-cel-hero {
  position: relative;
  background: var(--dc-cel-hero-red);
  color: #fff;
  padding-bottom: 18px;
}
.dc-cel-hero-img {
  display: block;
  width: 100%;
  /* 4:3 に中央で切り抜く（キャラとケーキは元画像の中央 57% に収まっている）。
     高さは画面の 34% を上限にする: 背の低い横向きの携帯でも本文とボタンが見える */
  aspect-ratio: 4 / 3;
  max-height: 34vh;
  object-fit: cover;
  object-position: 50% 60%;
  animation: dc-cel-hero-in 700ms var(--dc-cel-ease-pop) 80ms both;
}
.dc-cel-hero-head {
  /* position+z-index: 絵は出現の動き（transform）で独自の重なりの層になり、後ろの兄弟より前に描かれる。
     見出しを必ず絵より前にする（無いと「DreamCoreアプリ」の行が絵の下に潜って切れた・2026-10-07 ハーネスで確認） */
  position: relative;
  z-index: 1;
  margin-top: 4px;
  padding: 0 20px;
}
.dc-cel-hero-kicker {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
  overflow-wrap: break-word;
}
.dc-cel-hero-big {
  margin: 2px 0 0;
  font: 900 3.25rem/1 var(--font-display, 'Inter'), -apple-system, BlinkMacSystemFont, 'Hiragino Sans', sans-serif;
  letter-spacing: -0.04em;
  color: #fff;
  overflow-wrap: break-word;
  animation: dc-cel-big-in 720ms var(--dc-cel-ease-pop) 220ms both;
}
/* 長い言語（es「cumple 1 año」/ pt「faz 1 ano」/ en「turns 1」）は 1 段小さく。狭い携帯で 2 行に割れないように */
.dc-cel-hero-big:lang(es), .dc-cel-hero-big:lang(pt), .dc-cel-hero-big:lang(en) { font-size: 2.75rem; }

/* 閉じる: 絵の上では白い半透明の丸（赤地で見える）。絵が無いカードでは灰色 */
.dc-cel-pop-x {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #A3A3A3;
  cursor: pointer;
}
.dc-cel-pop-x.is-on-hero { background: rgba(0, 0, 0, 0.22); color: #fff; }
.dc-cel-pop-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .dc-cel-pop-x:hover { background: #F5F5F5; color: var(--dc-cel-ink-2); }
  .dc-cel-pop-x.is-on-hero:hover { background: rgba(0, 0, 0, 0.36); color: #fff; }
}

/* ---- 絵が無いときの「1」（1 本のろうそく。数字は墨・炎は赤い粒） */
.dc-cel-one {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 2px auto 4px;
}
.dc-cel-one-flame {
  display: block;
  width: 14px;
  height: 18px;
  margin-bottom: 4px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: var(--dc-cel-red);
  box-shadow: 0 0 18px rgba(231, 53, 43, 0.45);
  transform-origin: 50% 100%;
  animation: dc-cel-flame 1.6s ease-in-out 600ms infinite alternate;
}
.dc-cel-one-num {
  display: block;
  font: 900 112px/0.86 var(--font-display, 'Inter'), -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.06em;
  color: var(--dc-cel-ink);
  animation: dc-cel-big-in 640ms var(--dc-cel-ease-pop) 120ms both;
}
.dc-cel-pop-title {
  margin: 10px 20px 0;
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

/* ---- 白い段 */
.dc-cel-pop-inner { padding: 16px 22px 22px; }
.dc-cel-pop-eyebrow {
  margin: 0 0 4px;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--dc-cel-red);
}
.dc-cel-pop-body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--dc-cel-ink-2);
  overflow-wrap: break-word;
  line-break: strict;
}

.dc-cel-pop-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}
.dc-cel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 20px;
  box-sizing: border-box;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  overflow-wrap: break-word;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
/* 文字は 1 つの span に入れる（ボタンは flex なので、文字と nowrap の span が別々の flex 項目に割れて並ぶのを防ぐ） */
.dc-cel-btn-l { display: block; min-width: 0; }
.dc-cel-btn:active { transform: scale(0.97); }
.dc-cel-btn:focus-visible { outline: 2px solid var(--dc-cel-red); outline-offset: 3px; }
.dc-cel-btn.is-primary {
  background: var(--dc-cel-red);
  color: #fff;
  box-shadow: 0 6px 16px rgba(231, 53, 43, 0.38);
}
.dc-cel-btn.is-quiet {
  min-height: 46px;
  font-size: 0.9375rem;
  font-weight: 700;
  background: var(--dc-cel-paper);
  color: var(--dc-cel-ink);
  border: 1px solid #E5E5E5;
}
@media (hover: hover) and (pointer: fine) {
  .dc-cel-btn.is-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(231, 53, 43, 0.38); }
  .dc-cel-btn.is-quiet:hover { background: #F5F5F5; }
}

/* ---- 紙吹雪（カードより前面・押せない。JS が 4.2 秒後に層ごと外す） */
.dc-cel-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
.dc-cel-confetti i {
  position: absolute;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  will-change: transform, opacity;
}
.dc-cel-confetti i.is-round { width: 10px; height: 10px; border-radius: 50%; }
.dc-cel-confetti i.is-long { width: 5px; height: 20px; }
/* 弾ける波: 画面の中央やや上（カードの絵のあたり）から全方向へ → 重力で落ちる */
.dc-cel-confetti i.is-burst {
  left: 50%;
  top: 38%;
  animation: dc-cel-burst var(--t, 2.6s) cubic-bezier(0.15, 0.7, 0.35, 1) var(--d, 0s) 1 forwards;
}
/* 降る波: 上端の外から全幅に */
.dc-cel-confetti i.is-rain {
  left: var(--x, 50%);
  top: -24px;
  animation: dc-cel-rain var(--t, 2.8s) cubic-bezier(0.3, 0.5, 0.5, 1) var(--d, 0.4s) 1 forwards;
}
@keyframes dc-cel-burst {
  0%   { transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)) scale(0.4); opacity: 0; }
  6%   { opacity: 1; }
  28%  { transform: translate3d(var(--bx, 0), var(--by, 0), 0) rotate(calc(var(--r, 0deg) + 220deg)) scale(1); opacity: 1; }
  100% { transform: translate3d(calc(var(--bx, 0) * 1.25), calc(var(--by, 0) + 75vh), 0) rotate(calc(var(--r, 0deg) + 720deg)) scale(1); opacity: 0; }
}
@keyframes dc-cel-rain {
  0%   { transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)); opacity: 0; }
  8%   { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate3d(var(--sx, 0px), 110vh, 0) rotate(calc(var(--r, 0deg) + 600deg)); opacity: 0; }
}

/* 閉じる（JS が is-closing を付けて 200ms 後に外す） */
.dc-cel-pop.is-closing .dc-cel-pop-backdrop { animation: dc-cel-fade-out 180ms ease both; }
.dc-cel-pop.is-closing .dc-cel-pop-card { animation: dc-cel-card-out 180ms ease both; }
.dc-cel-pop.is-closing .dc-cel-confetti { opacity: 0; transition: opacity 160ms ease; }

@keyframes dc-cel-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dc-cel-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes dc-cel-card-in {
  0%   { opacity: 0; transform: translateY(40px) scale(0.7) rotate(-2deg); }
  55%  { opacity: 1; transform: translateY(-6px) scale(1.04) rotate(0.6deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes dc-cel-card-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.94); }
}
@keyframes dc-cel-hero-in {
  0%   { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes dc-cel-big-in {
  0%   { opacity: 0; transform: translateY(14px) scale(0.5); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes dc-cel-flame {
  from { transform: scale(1, 1) rotate(-3deg); }
  to   { transform: scale(0.9, 1.08) rotate(3deg); }
}

/* ======================================================================
 * 3. ホームの祝い帯
 * ----------------------------------------------------------------------
 * 既存のお題バナー（challenge-entry.js .dc-chal: 深い赤のベタ面 + 白タイポ）と同じ系統の赤い帯。
 * 右にお題 celebrate の絵（キャラとケーキ）、左に白い太字。地は絵の地の赤（継ぎ目を出さない）。
 * 見出しの直下に流れの中で 1 本（position:fixed / sticky にしない = 何にも重ならない）。
 * 高さ約 96px（お題バナーの約 280px よりずっと低い = 作業場を広告面にしない）。
 * ====================================================================== */
.dc-cel-band {
  position: relative;
  display: flex;
  align-items: stretch;
  margin: 12px 32px 0;
  min-height: 92px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--dc-cel-hero-red);
  color: #fff;
  box-shadow: 0 8px 24px rgba(189, 35, 30, 0.22);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', sans-serif;
  animation: dc-cel-band-in 560ms var(--dc-cel-ease-pop) both;
  min-width: 0;
  isolation: isolate;
}
.dc-cel-band-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}
a.dc-cel-band-main:focus-visible { outline: 2px solid #fff; outline-offset: -4px; border-radius: 20px; }
.dc-cel-band-txt {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 8px 14px 18px;
}
.dc-cel-band-title {
  font-size: 1.1875rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.02em;
  /* 語の途中で折らない（ja「DreamCoreアプ / リ1周年」と割れた・2026-10-07）。折れる場所は JS が数字の前に置く
     <wbr> と空白だけ。それでも入りきらない極端に狭い幅では overflow-wrap が最後の手段で折る */
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.dc-cel-band-sub {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.86);
  /* 文言側の改行（\n）で「お題名」と「日付」を別の行にする。自動の折り返しに任せると
     「おいわいするゲー / ム」「10/ / 10」と割れた（2026-10-07 PL 実測）。各行は語の途中で折らない */
  white-space: pre-line;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* 絵: 右寄せ・高さいっぱい。左端は地の赤へ溶かさず、地が同じ色なので切れ目は見えない */
.dc-cel-band-art {
  flex: none;
  align-self: stretch;
  width: 44%;
  max-width: 260px;
  margin-right: 34px;   /* × の場所をあける */
  overflow: hidden;
}
.dc-cel-band-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 46% 70%;
  transition: transform 0.4s var(--dc-cel-ease-pop);
}
.dc-cel-band-x {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  color: #fff;
  cursor: pointer;
}
.dc-cel-band-x svg { width: 15px; height: 15px; }
.dc-cel-band-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  a.dc-cel-band-main:hover .dc-cel-band-img { transform: scale(1.05); }
  .dc-cel-band-x:hover { background: rgba(0, 0, 0, 0.32); }
}
.dc-cel-band:not(.has-hero) .dc-cel-band-txt { padding-right: 44px; }

/* PC（広い枠）: 帯が横に長いぶん文字を大きくし、絵も高くして「お祝い」が遠目に分かるようにする */
@media (min-width: 900px) {
  .dc-cel-band { min-height: 112px; }
  .dc-cel-band-txt { padding-left: 28px; gap: 6px; }
  .dc-cel-band-title { font-size: 1.5rem; }
  .dc-cel-band-sub { font-size: 0.9375rem; }
}
/* /create のスマホ幅（style.css の 768px 以下でヘッダーの左右が 16px になるのに合わせる） */
@media (max-width: 768px) {
  .dc-cel-band { margin: 10px 16px 0; }
}
@media (max-width: 400px) {
  /* 375px 幅で見出しの列が 141px しかなく「DreamCoreアプリ」(17px で 142px) が入らずに割れた（2026-10-07 実測）。
     文字を小さくすると派手さが落ちるので、絵の列を細くして見出しの列を約 165px にする（18px でも 150px で収まる） */
  .dc-cel-band-title { font-size: 1.125rem; }
  .dc-cel-band-art { width: 34%; margin-right: 30px; }
  /* ja「お題「おいわいするゲーム」」が 13px だと 169px で列（約 165px）に入らない。12px なら 156px */
  .dc-cel-band-sub { font-size: 0.75rem; }
}
/* /projects は /create と同じ DOM（.projects-list-mode）を使い回す。帯はホームだけ */
.project-list-view.projects-list-mode .dc-cel-band { display: none; }
/* v3 の あそぶ: 見出しと同じ左右（.pl-head の 6px）にそろえ、なかまの列との間をあける */
.view.pl .dc-cel-band { margin: 0 6px 14px; }

@keyframes dc-cel-band-in {
  0%   { opacity: 0; transform: translateY(-8px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ======================================================================
 * 動きを減らす設定: 出現の動き・炎の揺れ・印の弾みを止める（紙吹雪は JS が作らない）
 * ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  .dc-cel-pop-backdrop,
  .dc-cel-pop-card,
  .dc-cel-hero-img,
  .dc-cel-hero-big,
  .dc-cel-one-num,
  .dc-cel-one-flame,
  .dc-cel-band,
  .dc-cel-confetti i,
  html.dc-cel-on .brand-mark::after,
  html.dc-cel-on .drawer-brand-mark::after,
  html.dc-cel-on #app > .tabbar .rail-brand::after,
  html.dc-cel-on .view.pl .pl-head .brand[data-brand]::after {
    animation: none !important;
  }
  .dc-cel-confetti { display: none; }
}
.dc-cel-pop.is-reduced .dc-cel-pop-card,
.dc-cel-pop.is-reduced .dc-cel-hero-img,
.dc-cel-pop.is-reduced .dc-cel-hero-big,
.dc-cel-pop.is-reduced .dc-cel-one-num,
.dc-cel-pop.is-reduced .dc-cel-one-flame { animation: none; }