/* 誕生日限定の「夜B・深夜の星空」モード。認証不要の全公開画面（管理者限定画面は対象外）から
   共通で読み込む（tabbar.cssと同じ「複数画面から読み込む共通CSS」という既存パターンを踏襲）。
   body.night-modeは各画面のルーターがidol_service.get_todays_birthday_idol()で判定し、
   該当するアイドルがいる日だけJinja側で付与する。

   各画面のCSSが元々参照しているトークン名（--ink/--bg/--bg-soft/--line/--accent/--badge-bg）を
   ここで上書きするだけで、カード・ボタン・フッター等の個別実装は無改修のまま反転する
   （events.htmlの夜Bモードで確立した手法。各画面固有の追加トークン、例:
   スポット完了ページの--warn、削除確認・マイページの--dangerは、それぞれの画面のCSS側で
   個別にbody.night-modeブロックを追加して対応する）。 */

body.night-mode {
	--ink: #EAF1FA;
	--ink-soft: #93A2C2;
	--bg: #0b1120;
	--bg-soft: #141d30;
	--line: #263149;
	--accent: #9FD1AF;
	--badge-bg: #1c2740;
}

/* ヘッダーの星空グラデーション＋固定の星ドット。全画面共通の.header-area/.header-inner/.brand構成に対して適用 */
.header-area { position: relative; overflow: hidden; }
body.night-mode .header-area {
	background: radial-gradient(140% 180% at 20% 0%, #1c2a45 0%, #0b1120 60%);
}
.header-stars { position: absolute; inset: 0; pointer-events: none; }
body.night-mode .header-stars {
	background:
		radial-gradient(1.5px 1.5px at 12% 25%, rgba(255,255,255,.7), transparent 60%),
		radial-gradient(1.5px 1.5px at 28% 65%, rgba(255,255,255,.5), transparent 60%),
		radial-gradient(2px 2px at 46% 20%, rgba(255,255,255,.65), transparent 60%),
		radial-gradient(1.5px 1.5px at 62% 55%, rgba(255,255,255,.55), transparent 60%),
		radial-gradient(2px 2px at 80% 30%, rgba(255,255,255,.7), transparent 60%),
		radial-gradient(1.5px 1.5px at 92% 68%, rgba(255,255,255,.45), transparent 60%);
}
body.night-mode .header-confetti { display: none; }

/* 「本日◯◯生誕祭」リボン（_macros.htmlのbirthday_ribbonマクロが出力する構造に対応） */
.birthday-ribbon {
	max-width: 1000px;
	margin: 0 auto 16px;
	padding: 12px 16px;
	border-radius: 14px;
	background: var(--badge-bg);
	border: 1px solid var(--line);
	display: flex;
	align-items: center;
	gap: 14px;
}
.ribbon-badge {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	flex: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--idol-color) 35%, transparent);
}
.ribbon-badge img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.ribbon-text .ribbon-title { font-size: 13.5px; font-weight: 700; color: var(--idol-color); }
.ribbon-text .ribbon-sub { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }