/* ==========================================================================
   ハロウィン・ノート展 — 「月夜のメリーゴーランド美術館」
   DESIGN-BRIEF.md v1 準拠。主役は参加者のサムネとアイコン、装飾は脇役。
   構成：1.トークン 2.ベース 3.装飾レイヤー 4.ヘッダー 5.ヒーロー 6.ボタン
         7.セクション共通 8.メリーゴーランド 9.クリエイターカード 10.美術館
         11.ツール・参加方法 12.フッター 13.レスポンシブ 14.reduced-motion
         15.ハイブリッド構成（ビュー切替・タブナビ・入口カード・展示室ヘッダー帯）
   ========================================================================== */

/* ---------- 1. トークン ---------- */
:root {
  color-scheme: dark;
  --bg: #1a1030;
  --bg-deep: #0f0a1a;
  --surface: #2b1b4a;
  --surface-2: #3b2a5e;
  --accent: #f4a340;
  --accent-deep: #ff7a1a;
  --gold: #d9b45b;
  --mint: #8fd3b6;
  --text: #fff4e3;
  --muted: #c9bde0;
  --line: #4a3a70;
  --on-accent: #1f1436;              /* 橙ボタンの文字色（濃紫） */
  --gold-soft: rgb(217 180 91 / 40%); /* 金の細枠 */
  --shadow: 0 12px 32px rgb(15 10 26 / 55%);
  --radius: 14px;
  --nav-h: 60px;
  --display: "Mochiy Pop One", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", "Noto Sans CJK JP", sans-serif;
  --body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans CJK JP", Meiryo, sans-serif;
}

/* ---------- 2. ベース ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); background: var(--bg-deep); }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  color: var(--text);
  font-family: var(--body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 100%);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; }
img { display: block; }
button, input { font: inherit; color: inherit; }
a { color: inherit; text-underline-offset: .2em; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.3; margin: 0; overflow-wrap: anywhere; }
p { margin: 0 0 .8em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { color: var(--on-accent); background: var(--accent); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.wrap.narrow { max-width: 820px; }
main, .site-footer, .site-header, .demo-notice { position: relative; z-index: 1; }

.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 16px; border-radius: 8px; transform: translateY(-160%); color: var(--on-accent); background: var(--accent); font-weight: 700; text-decoration: none; }
.skip-link:focus { transform: none; }

/* ---------- 3. 装飾レイヤー（浮遊物・蜘蛛の巣） ---------- */
.floaties { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.floaties span { position: absolute; font-size: 30px; opacity: .55; animation: bob 8s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgb(15 10 26 / 60%)); }
.floaties span:nth-child(1) { left: 3%; top: 34%; animation-duration: 9s; }
.floaties span:nth-child(2) { left: 41%; top: 14%; animation-duration: 7s; animation-delay: -2s; font-size: 34px; } /* かぼちゃ：h1 の右肩 */
.floaties span:nth-child(3) { right: 4%; top: 58%; animation-duration: 10s; animation-delay: -4s; font-size: 24px; }
.floaties span:nth-child(4) { left: 5%; top: 84%; animation-duration: 8s; animation-delay: -1s; font-size: 22px; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-18px) rotate(5deg); } }

.web { position: fixed; z-index: 0; width: 120px; height: 120px; color: var(--text); opacity: .12; pointer-events: none; }
.web.tl { top: var(--nav-h); left: 0; }
.web.tr { top: var(--nav-h); right: 0; transform: scaleX(-1); }
.web.bl { bottom: 0; left: 0; transform: scaleY(-1); }
.web.br { bottom: 0; right: 0; transform: rotate(180deg); }

/* ---------- 4. ヘッダー・デモ帯 ---------- */
.site-header { position: sticky; top: 0; z-index: 30; background: rgb(15 10 26 / 86%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.nav.wrap { display: flex; align-items: center; gap: 16px; min-height: var(--nav-h); }
.brand { font-family: var(--display); font-size: 17px; color: var(--accent); text-decoration: none; white-space: nowrap; text-shadow: 0 2px 0 var(--bg-deep); }
.nav-list { display: flex; gap: 2px; margin: 0 0 0 auto; padding: 0; list-style: none; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav-list::-webkit-scrollbar { display: none; }
@media (max-width: 599px) { .nav-list { -webkit-mask: linear-gradient(90deg, #000 88%, transparent); mask: linear-gradient(90deg, #000 88%, transparent); } }
.nav-list a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 12px; border-radius: 999px; color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: color .15s, background-color .15s; }
.nav-list a:hover, .nav-list a:focus-visible { color: var(--text); background: var(--surface); }

.demo-notice { padding: 10px 16px; border-bottom: 1px solid var(--gold-soft); background: var(--surface); color: var(--text); font-size: 14px; font-weight: 500; text-align: center; }
.demo-notice[hidden] { display: none; }

/* ---------- 5. ヒーロー（三日月・星・ドリップ） ---------- */
.hero.block {
  position: relative;
  padding: 56px 0 112px;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 18%, rgb(244 163 64 / var(--moon-glow, 22%)) 0, rgb(244 163 64 / 8%) 9%, transparent 22%), /* 月の光：満ちるほど強く（fx.js） */
    radial-gradient(ellipse 120% 70% at 50% -10%, #3b1f6b 0%, transparent 60%);
}
/* 三日月：金の円を、背景色の円でくり抜く（mask） */
.hero::before {
  content: "";
  position: absolute; top: 9%; right: 8%; width: clamp(64px, 9vw, 110px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff2c8, #f4c56a 60%, #d9b45b);
  /* くり抜きの円を右へずらすほど月が満ちる（--moon-cut は fx.js が開幕までの日数から決める） */
  -webkit-mask: radial-gradient(circle at var(--moon-cut, 68%) 34%, transparent 0 46%, #000 48%);
  mask: radial-gradient(circle at var(--moon-cut, 68%) 34%, transparent 0 46%, #000 48%);
  opacity: .95; pointer-events: none;
}
/* 星：1つの点を box-shadow で増やす。twinkle は opacity のみ */
.hero::after {
  content: "";
  position: absolute; top: 0; left: 0; width: 2px; height: 2px; border-radius: 50%; background: var(--text);
  pointer-events: none; opacity: .8;
  box-shadow:
    6vw 60px 0 0 var(--text), 14vw 140px 0 0 rgb(255 244 227 / 70%), 22vw 40px 0 0 var(--text),
    31vw 200px 0 0 rgb(255 244 227 / 60%), 40vw 90px 0 0 var(--text), 47vw 30px 0 0 rgb(255 244 227 / 70%),
    55vw 160px 0 0 var(--text), 62vw 70px 0 0 rgb(255 244 227 / 60%), 70vw 240px 0 0 var(--text),
    76vw 120px 0 0 rgb(255 244 227 / 70%), 90vw 50px 0 0 var(--text), 95vw 190px 0 0 rgb(255 244 227 / 60%),
    12vw 300px 0 0 rgb(255 244 227 / 50%), 50vw 330px 0 0 var(--text), 84vw 320px 0 0 rgb(255 244 227 / 50%),
    27vw 380px 0 0 var(--text), 66vw 400px 0 0 rgb(255 244 227 / 50%), 3vw 440px 0 0 var(--text);
  animation: twinkle 3.2s ease-in-out infinite;
}
@keyframes twinkle { 0%, 100% { opacity: .85; } 50% { opacity: .35; } }

.hero-layout { position: relative; z-index: 1; display: grid; gap: 32px; align-items: center; }
.hero-copy { display: grid; gap: 10px; justify-items: start; min-width: 0; }
.hero h1 {
  font-size: clamp(2.2rem, 6vw, 4.4rem); /* 「ハロウィンアート」（8字）が右の主催者カードに重ならない大きさ */
  line-height: 1.2;
  max-width: 100%;
  color: var(--text);
  text-wrap: balance;
  word-break: keep-all;        /* 語の途中では折らない */
  overflow-wrap: anywhere;     /* それでも列幅を超えるときだけ折り返す（はみ出し防止） */
  text-shadow: 0 0 22px rgb(244 163 64 / 55%), 3px 4px 0 var(--on-accent);
}
#siteLead { max-width: 34em; margin: 4px 0 0; color: var(--text); font-size: clamp(1rem, 2.2vw, 1.15rem); font-weight: 500; }
.status { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 0; padding: 6px 14px; border: 1px solid var(--gold-soft); border-radius: 999px; background: var(--surface); font-family: var(--display); font-size: 14px; color: var(--accent); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent-deep); }
#eventDates { margin: 0; color: var(--muted); font-size: 15px; }
.countdown { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; color: var(--muted); font-size: 14px; }
.countdown[hidden] { display: none; }
.countdown > span:first-child { color: var(--accent); font-weight: 700; margin-right: 4px; }
.countdown strong { font-family: var(--display); font-weight: 400; font-size: clamp(1.3rem, 3vw, 1.7rem); color: var(--text); font-variant-numeric: tabular-nums; margin-right: 2px; }
.status-note { margin: 0; color: var(--muted); font-size: 14px; }
.status-note[hidden] { display: none; }
.participant-summary { margin: 4px 0 0; color: var(--muted); }
.participant-summary #participantCount { font-family: var(--display); font-size: 2rem; color: var(--accent); margin-right: 4px; font-variant-numeric: tabular-nums; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.credit-line { margin: 4px 0 0; color: var(--muted); font-size: 12px; opacity: .85; }

/* 主催者カード */
.organizer-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; align-items: center; overflow: hidden; }
.organizer-card .moon { position: absolute; top: 6px; right: 10px; font-size: 22px; line-height: 1; color: var(--gold); opacity: .55; pointer-events: none; }
.organizer-card .organizer-character { grid-row: 1 / span 3; }
.organizer-character { display: grid; place-items: center; width: clamp(80px, 18vw, 120px); aspect-ratio: 1; overflow: hidden; border: 3px solid var(--gold); border-radius: 50%; background: radial-gradient(circle at 40% 30%, var(--surface-2), var(--bg) 75%); font-size: 44px; box-shadow: 0 0 0 4px var(--surface), 0 8px 18px rgb(15 10 26 / 50%); }
.organizer-character img { width: 100%; height: 100%; object-fit: cover; }
.hero .organizer-card h2 { font-size: 1.15rem; margin: 0; text-shadow: none; }
.hero .organizer-card h2::after { display: none; }
.organizer-card h2::before { content: "案内役"; display: block; font-family: var(--body); font-size: 12px; font-weight: 700; color: var(--mint); letter-spacing: .04em; }
.organizer-card > p { margin: 0; color: var(--muted); font-size: 14px; }
.organizer-card .statement-placeholder { font-size: 13px; }
.organizer-card .crow { position: absolute; right: 18px; bottom: 10px; color: var(--gold); font-size: 14px; opacity: .8; pointer-events: none; }
#organizerProfile[aria-disabled="true"] { text-decoration: none; }

/* キャラメル色ドリップ（ヒーロー下端）: 橙〜金の楕円（幅24〜36px）＋先端の丸を18本並べて垂らす。赤は使わない */
.magic-drip {
  position: absolute; left: 0; right: 0; bottom: 0; height: 96px; z-index: 2; pointer-events: none;
  background-image: radial-gradient(ellipse 50% 50% at 50% 0, var(--accent) 0 98%, transparent 100%),
    radial-gradient(circle at 50% 50%, var(--accent) 0 48%, transparent 52%),
    radial-gradient(ellipse 50% 50% at 50% 0, var(--gold) 0 98%, transparent 100%),
    radial-gradient(circle at 50% 50%, var(--gold) 0 48%, transparent 52%),
    radial-gradient(ellipse 50% 50% at 50% 0, var(--accent) 0 98%, transparent 100%),
    radial-gradient(circle at 50% 50%, var(--accent) 0 48%, transparent 52%),
    radial-gradient(ellipse 50% 50% at 50% 0, var(--accent) 0 98%, transparent 100%),
    radial-gradient(circle at 50% 50%, var(--accent) 0 48%, transparent 52%),
    radial-gradient(ellipse 50% 50% at 50% 0, var(--gold) 0 98%, transparent 100%),
    radial-gradient(circle at 50% 50%, var(--gold) 0 48%, transparent 52%),
    radial-gradient(ellipse 50% 50% at 50% 0, var(--accent) 0 98%, transparent 100%),
    radial-gradient(circle at 50% 50%, var(--accent) 0 48%, transparent 52%),
    radial-gradient(ellipse 50% 50% at 50% 0, var(--accent) 0 98%, transparent 100%),
    radial-gradient(circle at 50% 50%, var(--accent) 0 48%, transparent 52%),
    radial-gradient(ellipse 50% 50% at 50% 0, var(--gold) 0 98%, transparent 100%),
    radial-gradient(circle at 50% 50%, var(--gold) 0 48%, transparent 52%),
    radial-gradient(ellipse 50% 50% at 50% 0, var(--accent) 0 98%, transparent 100%),
    radial-gradient(circle at 50% 50%, var(--accent) 0 48%, transparent 52%),
    radial-gradient(ellipse 50% 50% at 50% 0, var(--accent) 0 98%, transparent 100%),
    radial-gradient(circle at 50% 50%, var(--accent) 0 48%, transparent 52%),
    radial-gradient(ellipse 50% 50% at 50% 0, var(--gold) 0 98%, transparent 100%),
    radial-gradient(circle at 50% 50%, var(--gold) 0 48%, transparent 52%),
    radial-gradient(ellipse 50% 50% at 50% 0, var(--accent) 0 98%, transparent 100%),
    radial-gradient(circle at 50% 50%, var(--accent) 0 48%, transparent 52%),
    radial-gradient(ellipse 50% 50% at 50% 0, var(--accent) 0 98%, transparent 100%),
    radial-gradient(circle at 50% 50%, var(--accent) 0 48%, transparent 52%),
    radial-gradient(ellipse 50% 50% at 50% 0, var(--gold) 0 98%, transparent 100%),
    radial-gradient(circle at 50% 50%, var(--gold) 0 48%, transparent 52%),
    radial-gradient(ellipse 50% 50% at 50% 0, var(--accent) 0 98%, transparent 100%),
    radial-gradient(circle at 50% 50%, var(--accent) 0 48%, transparent 52%),
    radial-gradient(ellipse 50% 50% at 50% 0, var(--accent) 0 98%, transparent 100%),
    radial-gradient(circle at 50% 50%, var(--accent) 0 48%, transparent 52%),
    radial-gradient(ellipse 50% 50% at 50% 0, var(--gold) 0 98%, transparent 100%),
    radial-gradient(circle at 50% 50%, var(--gold) 0 48%, transparent 52%),
    radial-gradient(ellipse 50% 50% at 50% 0, var(--accent) 0 98%, transparent 100%),
    radial-gradient(circle at 50% 50%, var(--accent) 0 48%, transparent 52%),
    linear-gradient(90deg, var(--accent), var(--gold) 30%, var(--accent-deep) 55%, var(--gold) 80%, var(--accent));
  background-size: 26px 60px, 26px 26px, 32px 104px, 32px 32px, 24px 52px, 24px 24px, 36px 132px, 36px 36px, 28px 80px, 28px 28px, 34px 140px, 34px 34px, 24px 56px, 24px 24px, 30px 116px, 30px 30px, 26px 72px, 26px 26px, 36px 128px, 36px 36px, 24px 52px, 24px 24px, 30px 96px, 30px 30px, 28px 88px, 28px 28px, 34px 136px, 34px 34px, 24px 64px, 24px 24px, 32px 112px, 32px 32px, 26px 76px, 26px 26px, 30px 100px, 30px 30px, 100% 12px;
  background-position: 1% 0, 1% 17px, 7% 0, 7% 36px, 13% 0, 13% 14px, 18% 0, 18% 48px, 24% 0, 24% 26px, 30% 0, 30% 53px, 35% 0, 35% 16px, 41% 0, 41% 43px, 47% 0, 47% 23px, 52% 0, 52% 46px, 58% 0, 58% 14px, 63% 0, 63% 33px, 69% 0, 69% 30px, 75% 0, 75% 51px, 80% 0, 80% 20px, 86% 0, 86% 40px, 92% 0, 92% 25px, 98% 0, 98% 35px, 0 0;
  background-repeat: no-repeat;
  filter: drop-shadow(0 4px 6px rgb(15 10 26 / 45%));
}
.magic-drip::after { content: none; }

/* カラス：小さなSVGシルエットが月の近くをゆっくり横切る（1羽のみ） */
.flying-crow { position: absolute; top: 5%; left: -80px; width: 56px; z-index: 0; color: var(--bg-deep); pointer-events: none; animation: fly 25s linear infinite; }
.flying-crow svg { display: block; width: 100%; height: auto; fill: currentColor; opacity: .95; filter: drop-shadow(0 0 2px rgb(217 180 91 / 55%)); }
@keyframes fly {
  0%   { transform: translate(0, 0) scaleX(1); }
  50%  { transform: translate(55vw, -14px) scaleX(1); }
  100% { transform: translate(110vw, 4px) scaleX(1); }
}

/* ---------- 6. ボタン・チップ ---------- */
.btn, .act, .seg button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 10px 20px; border-radius: 999px; border: 1.5px solid var(--accent);
  background: var(--accent); color: var(--on-accent);
  font-family: var(--body); font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: transform .15s, box-shadow .15s, background-color .15s, border-color .15s;
}
.btn:hover, .act:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgb(255 122 26 / 35%); }
.btn.secondary, .act { border-color: var(--gold); background: transparent; color: var(--text); }
.btn.secondary:hover { background: var(--surface-2); }
.btn.text-link { border-color: transparent; background: transparent; color: var(--text); text-decoration: underline; text-underline-offset: .25em; }
.btn.text-link:hover { box-shadow: none; color: var(--accent); }
.btn.disabled, .btn[aria-disabled="true"], button:disabled { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn.disabled, .btn[aria-disabled="true"] { opacity: 1; border-color: var(--gold-soft); background: transparent; color: var(--muted); }
.act { min-height: 44px; padding: 8px 14px; border-color: var(--line); background: var(--surface-2); font-size: 14px; font-weight: 500; }
.act:hover { border-color: var(--accent); }
.act.hot { border-color: var(--accent); background: var(--accent); color: var(--on-accent); font-weight: 700; }
.act.hot:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.act.demo-pill { border-style: dashed; border-color: var(--gold-soft); background: transparent; color: var(--muted); cursor: default; }
.act.demo-pill:hover { transform: none; box-shadow: none; }
.link-placeholder { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1.5px dashed var(--line); border-radius: 999px; color: var(--muted); font-size: 14px; text-decoration: none; }
.actions, .links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* セグメントボタン（絞り込み・部屋タブ） */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; max-width: 100%; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.seg button { min-height: 44px; padding: 6px 14px; border-color: transparent; background: transparent; color: var(--muted); font-size: 14px; font-weight: 500; }
.seg button span { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--text); font-family: var(--display); font-size: 12px; }
.seg button:hover { color: var(--text); transform: none; box-shadow: none; }
.seg button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.seg button[aria-pressed="true"] span { background: var(--on-accent); color: var(--accent); }
.seg button:disabled { opacity: .4; }

/* ---------- 7. セクション共通 ---------- */
.block { position: relative; padding: 48px 0; }
.block h2 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); line-height: 1.3; margin: 0 0 8px; text-shadow: 0 2px 0 var(--bg-deep); }
/* 見出し下の小さなドリップ */
.block h2::after {
  content: ""; display: block; width: 120px; height: 20px; margin-top: 6px;
  background:
    linear-gradient(var(--accent), var(--accent)) 6px 0 / 6px 10px no-repeat,
    radial-gradient(circle, var(--accent) 0 6.5px, transparent 7.5px) 2px 6px / 14px 14px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 36px 0 / 5px 7px no-repeat,
    radial-gradient(circle, var(--gold) 0 4.5px, transparent 5.5px) 33.5px 4px / 10px 10px no-repeat,
    linear-gradient(var(--accent-deep), var(--accent-deep)) 62px 0 / 7px 12px no-repeat,
    radial-gradient(circle, var(--accent-deep) 0 7.5px, transparent 8.5px) 57.5px 4px / 16px 16px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 90px 0 / 5px 8px no-repeat,
    radial-gradient(circle, var(--gold) 0 5.5px, transparent 6.5px) 86.5px 4px / 12px 12px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 110px 0 / 5px 6px no-repeat,
    radial-gradient(circle, var(--accent) 0 4.5px, transparent 5.5px) 107.5px 3px / 10px 10px no-repeat,
    linear-gradient(90deg, var(--accent), var(--gold), var(--accent-deep)) 0 0 / 100% 4px no-repeat;
}
.section-intro { max-width: 46em; margin: 0 0 16px; color: var(--muted); font-size: 15px; }
.list-title { margin: 24px 0 12px; font-size: 1.25rem; color: var(--text); }
.panel { position: relative; padding: 24px; border: 1px solid var(--gold-soft); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.prose { max-width: 66ch; line-height: 1.95; }
.prose p { margin: 0 0 1em; }
.prose p:last-child { margin: 0; }
.empty-note { grid-column: 1 / -1; margin: 0; padding: 24px 16px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); font-size: 14px; text-align: center; }
/* JS は .in を付けないので、読み込み時に一度だけ薄くフェードイン（opacity のみ） */
.reveal { animation: reveal .5s ease both; }
@keyframes reveal { from { opacity: .4; } to { opacity: 1; } }

/* about */
.organizer-character-about { width: clamp(88px, 22vw, 128px); margin: 0 0 20px; }

/* ---------- 8. メリーゴーランド ---------- */
.carousel.panel { display: flex; flex-direction: column; max-width: 900px; margin: 0 auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: hidden; }
/* HTML順は 見出し→屋根→ステージ→操作。屋根を最上段に見せるため order で見出しを屋根の下へ */
.carousel .canopy { order: 0; }
.carousel .carousel-heading { order: 1; padding: 6px 20px 0; text-align: center; }
.carousel .stage { order: 2; }
.carousel .carousel-controls { order: 3; }
.carousel-heading h3 { margin: 0; font-family: var(--body); font-weight: 700; font-size: 15px; color: var(--accent); }
.carousel-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.canopy { display: block; width: 100%; height: 48px; filter: drop-shadow(0 4px 6px rgb(15 10 26 / 45%)); }
.stage {
  position: relative; height: 300px; perspective: 1100px; perspective-origin: 50% 30%;
  touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
}
.stage:active { cursor: grabbing; }
.pole { position: absolute; left: 50%; top: 0; bottom: 30px; width: 6px; margin-left: -3px; border-radius: 3px; background: linear-gradient(var(--gold), #7d6230); opacity: .6; pointer-events: none; }
.floor { position: absolute; left: 8%; right: 8%; bottom: 8px; height: 40px; border-radius: 50%; border: 1px solid var(--gold-soft); background: radial-gradient(ellipse at center, rgb(244 163 64 / 30%) 0%, rgb(217 180 91 / 8%) 55%, transparent 72%); pointer-events: none; }
.carousel-ring, .ring { position: absolute; left: 50%; top: 28px; width: 0; height: 0; transform-style: preserve-3d; }
.carousel-ring > .empty-note { position: absolute; left: 50%; top: 100px; width: min(80vw, 360px); transform: translateX(-50%); background: var(--surface-2); }
.cc { position: absolute; width: var(--cw, 160px); height: 210px; left: calc(var(--cw, 160px) / -2); top: 0; transform-style: preserve-3d; }
.cc .face {
  position: absolute; inset: 0; margin: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: var(--radius); border: 1.5px solid var(--gold);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 14px 10px; text-align: center; color: var(--text); font-family: var(--body);
  box-shadow: 0 8px 18px rgb(15 10 26 / 45%);
}
.cc button.face { appearance: none; cursor: pointer; }
.cc .face.back { transform: rotateY(180deg); background: repeating-linear-gradient(45deg, #2a1a45 0 10px, #22153a 10px 20px); font-size: 40px; }
.cc .name { font-weight: 700; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.cc .catch { font-size: 12px; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cc.dummy .face.front { border-style: dashed; border-color: var(--line); }
.cc.dummy .face.front::before { content: "🕯️"; font-size: 30px; }
.carousel-controls { display: flex; justify-content: center; gap: 12px; padding: 8px 20px 0; }
.carousel.is-empty .stage { height: 180px !important; }
.carousel.is-empty .pole, .carousel.is-empty .floor { display: none; }

/* ---------- 9. クリエイターカード ---------- */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.creator-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 20px; }
.creator-tools > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.creator-tools input { flex: 1 1 200px; min-width: 0; min-height: 44px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); }
.creator-tools input::placeholder { color: var(--muted); }
.creator-tools input:focus-visible { border-color: var(--accent); }
.card {
  position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px;
  border: 1px solid var(--gold-soft); border-radius: var(--radius); background: var(--surface);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.card:hover, .card:focus-within { transform: translateY(-4px); box-shadow: 0 10px 28px rgb(255 122 26 / 25%); border-color: var(--accent); }
.card .top { display: flex; gap: 14px; align-items: center; min-width: 0; }
.card .top > div { min-width: 0; }
.card h3 { font-family: var(--body); font-weight: 700; font-size: 16px; line-height: 1.4; }
.card .catch { margin: 2px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
/* 一言紹介の長さをそろえる：3行で切って「…」。短い人も3行分の高さを取り、カードの高さをそろえる */
.card .catch {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  min-height: calc(1.6em * 3); cursor: pointer;
}
.card .catch.is-open { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.avatar { display: grid; place-items: center; flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: 50%; background: var(--surface-2); font-size: 28px; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--gold); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.image-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: var(--text); }
.avatar.image-placeholder, .avatar .image-placeholder { font-size: 28px; }
.avatar.image-placeholder { width: 64px; height: 64px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 14px; border: 1px solid rgb(143 211 182 / 50%); border-radius: 999px; background: rgb(143 211 182 / 12%); color: var(--mint); font-size: 12px; line-height: 1; cursor: pointer; transition: background-color .15s; }
button.tag:hover { background: rgb(143 211 182 / 26%); }
.tag.more { cursor: default; background: transparent; color: var(--muted); }
.card .actions { margin-top: auto; }
.badge-new { position: absolute; top: -10px; right: 14px; z-index: 2; padding: 5px 10px; border-radius: 999px; background: linear-gradient(160deg, var(--accent), var(--accent-deep)); color: var(--on-accent); font-family: var(--display); font-size: 11px; line-height: 1; box-shadow: 0 3px 8px rgb(15 10 26 / 40%); }
.card.dummy { align-items: center; justify-content: center; min-height: 180px; border-style: dashed; border-color: var(--line); color: var(--muted); text-align: center; font-size: 14px; }
.card.dummy > span { font-size: 30px; }
.card.dummy p { margin: 0; }
.card.dummy:hover { transform: none; box-shadow: none; border-color: var(--line); }
.flash { animation: flash 1s ease; }
@keyframes flash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 4px var(--accent), 0 0 36px rgb(244 163 64 / 55%); } }
.card[id^="creator-"], .frame[id^="work-"] { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* ---------- 10. 美術館（額縁＋ランタン） ---------- */
.hall { background: radial-gradient(ellipse at 50% 0%, rgb(255 217 160 / 10%) 0%, transparent 55%), #140d24; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.room-tabs { margin-bottom: 20px; }
.work-grid { margin-top: 8px; }
.works { row-gap: 32px; }
.frame {
  position: relative; min-width: 0; padding: 8px; border: 6px double var(--gold); border-radius: 6px;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--bg-deep), inset 0 0 18px rgb(15 10 26 / 60%), var(--shadow);
  transition: transform .3s, box-shadow .3s;
}
.frame:hover { transform: rotate(-.6deg) translateY(-3px); box-shadow: inset 0 0 0 2px var(--bg-deep), inset 0 0 18px rgb(15 10 26 / 60%), 0 14px 32px rgb(255 122 26 / 22%); }
/* 吊りランタン：1枚おき。transform-origin を上にして揺らす */
.frame:nth-child(odd)::before {
  content: ""; position: absolute; top: -30px; right: 10px; z-index: 2; width: 20px; height: 40px; pointer-events: none;
  transform-origin: 50% 0; animation: sway 4s ease-in-out infinite;
  /* 吊り紐（金の細線）＋ 提灯本体（橙〜金の楕円）＋ 底の金具 */
  background:
    linear-gradient(var(--gold), var(--gold)) 50% 0 / 2px 12px no-repeat,
    radial-gradient(ellipse at 50% 40%, #ffd48a 0, var(--accent) 45%, var(--accent-deep) 100%) 50% 11px / 20px 24px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 50% 35px / 8px 4px no-repeat;
  border-radius: 50%;
  filter: drop-shadow(0 0 8px rgb(244 163 64 / 60%)) drop-shadow(0 4px 6px rgb(15 10 26 / 50%));
}
@keyframes sway { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
.frame .inner { display: flex; flex-direction: column; height: 100%; border-radius: 3px; overflow: hidden; background: var(--bg); }
.frame .thumb { position: relative; display: block; aspect-ratio: 1.91 / 1; overflow: hidden; background: #221638; color: inherit; text-decoration: none; }
.frame .thumb img, .work-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.frame .thumb img { transition: transform .3s; }
.frame .thumb:hover img { transform: scale(1.03); }
.frame .play { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgb(15 10 26 / 70%); border: 1.5px solid var(--gold); color: var(--text); font-size: 18px; pointer-events: none; }
.frame .cap { display: flex; flex-direction: column; flex: 1; padding: 12px 14px 14px; }
.frame .cap h3 { font-family: var(--body); font-weight: 700; font-size: 15px; line-height: 1.5; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* 長い記事タイトルは3行まで */
.frame .by { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--gold); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.frame .by:hover { color: var(--accent); }
.frame .cap .badge-new { position: static; align-self: flex-start; margin-top: 6px; }
.frame .cap .actions { margin-top: auto; padding-top: 10px; }
.frame.dummy { border-style: double; border-color: var(--line); background: repeating-linear-gradient(45deg, #3a2d5c 0 8px, #2a2045 8px 16px); }
.frame.dummy .thumb { display: grid; place-items: center; padding: 12px; color: var(--muted); font-size: 14px; text-align: center; }
.frame.dummy::before { display: none; }

/* ---------- 11. ポスターツール・参加方法 ---------- */
.tool-panel { display: grid; gap: 20px; align-items: center; }
.tool-panel p { margin: 0 0 12px; color: var(--muted); }
#posterToolStatus { display: inline-block; padding: 2px 12px; border: 1px solid var(--gold-soft); border-radius: 999px; color: var(--accent); font-family: var(--display); font-size: 13px; }
.poster-placeholder { display: grid; place-items: center; width: min(100%, 180px); aspect-ratio: 3 / 4; border-radius: 8px; border: 1px solid var(--gold-soft); background: linear-gradient(160deg, var(--accent), #8b3d0a 55%, var(--surface)); color: var(--text); font-size: 40px; box-shadow: var(--shadow); }
.steps { display: grid; gap: 14px; margin: 0 0 8px; padding: 0; list-style: none; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; counter-increment: s; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(160deg, var(--accent), var(--accent-deep)); color: var(--on-accent); font-family: var(--display); font-size: 18px; box-shadow: 0 3px 8px rgb(15 10 26 / 40%); }
.steps strong { display: block; font-weight: 700; }
.steps span { display: block; color: var(--muted); font-size: 14px; }

/* ---------- 12. フッター ---------- */
.site-footer { padding: 28px 0 48px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; background: var(--bg-deep); }
.site-footer p { margin: 4px 0; }

/* ---------- 13. レスポンシブ ---------- */
@media (min-width: 768px) {
  #creatorGrid, .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero.block { padding: 64px 0 120px; }
  .tool-panel { grid-template-columns: 180px minmax(0, 1fr); }
}
@media (min-width: 900px) {
  .hero-layout { grid-template-columns: minmax(0, 1.25fr) minmax(300px, .8fr); gap: 48px; }
  .organizer-card { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 32px 28px; }
  .organizer-card .organizer-character { grid-row: auto; margin-bottom: 8px; }
}
@media (min-width: 1024px) {
  #creatorGrid, .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .works { row-gap: 36px; }
}
@media (max-width: 599px) {
  .nav.wrap { flex-wrap: wrap; gap: 0 8px; padding-block: 6px; }
  .brand { font-size: 15px; }
  .hero h1 { font-size: clamp(1.75rem, 9.4vw, 2.6rem); } /* 狭い画面でも「ハロウィンアート」が1行に収まる幅 */
  .nav-list { flex: 0 0 100%; margin: 0; }
  .nav-list a { padding: 4px 8px; font-size: 13px; min-height: 44px; }
  :root { --nav-h: 84px; }
  .hero.block { padding: 36px 0 116px; }
  .hero::before { top: 3%; right: 6%; }
  .organizer-card .moon { display: none; }
  .web { width: 80px; height: 80px; }
  .floaties span { font-size: 18px; opacity: .35; }
  /* SP は雫を細く短くして密集を防ぐ */
  .magic-drip { height: 72px; background-size: 14px 44px, 14px 14px, 18px 78px, 18px 18px, 14px 40px, 14px 14px, 20px 100px, 20px 20px, 15px 60px, 15px 15px, 19px 104px, 19px 19px, 14px 42px, 14px 14px, 16px 88px, 16px 16px, 14px 54px, 14px 14px, 20px 96px, 20px 20px, 14px 40px, 14px 14px, 16px 72px, 16px 16px, 15px 66px, 15px 15px, 19px 102px, 19px 19px, 14px 48px, 14px 14px, 18px 84px, 18px 18px, 14px 56px, 14px 14px, 16px 76px, 16px 16px, 100% 10px; background-position: 1% 0, 1% 15px, 7% 0, 7% 30px, 13% 0, 13% 13px, 18% 0, 18% 40px, 24% 0, 24% 23px, 30% 0, 30% 43px, 35% 0, 35% 14px, 41% 0, 41% 36px, 47% 0, 47% 20px, 52% 0, 52% 38px, 58% 0, 58% 13px, 63% 0, 63% 28px, 69% 0, 69% 26px, 75% 0, 75% 42px, 80% 0, 80% 17px, 86% 0, 86% 33px, 92% 0, 92% 21px, 98% 0, 98% 30px, 0 0; }
  .floaties span:nth-child(1) { left: auto; right: 1%; top: 13%; }
  .floaties span:nth-child(2) { left: 1%; top: 41%; font-size: 20px; }
  .floaties span:nth-child(3) { right: 1%; top: 67%; }
  .floaties span:nth-child(4) { left: 1%; top: 91%; }
  .block { padding: 40px 0; }
  .panel { padding: 18px; }
  .frame:nth-child(odd)::before { right: 4px; }
  .seg { border-radius: 24px; }
  .seg button { flex: 1 1 auto; padding: 6px 10px; font-size: 13px; }
  .creator-tools > .btn { flex: 1 1 100%; }
  .hero-actions .btn { flex: 1 1 auto; }
}

/* ---------- 14. 動きを減らす設定：全アニメ停止、カルーセルは静止表示 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; }
  .card:hover, .frame:hover, .btn:hover, .act:hover, .door:hover { transform: none; }
  body.is-switching::after { display: none; }
}

/* ---------- 15. ハイブリッド構成：入口はスクロール／展示室は画面切り替え ---------- */
/* ビュー：1つだけ表示。hidden は display:none で確実に消す */
.view { position: relative; }
.view[hidden] { display: none !important; }

/* タブナビ：現在ビューは橙の下線＋クリーム文字 */
.nav-list a { position: relative; }
.nav-list a[aria-current="page"] { color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--gold-soft); }
.nav-list a[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--gold)); }

/* 展示室ヘッダー帯：入口へ戻る＋参加者数の写し */
.view-bar { position: sticky; top: var(--nav-h); z-index: 20; border-bottom: 1px solid var(--line); background: rgb(43 27 74 / 88%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.view-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding-block: 4px; }
.view-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px 6px 10px; border: 1px solid var(--gold-soft); border-radius: 999px; color: var(--text); font-size: 14px; font-weight: 700; text-decoration: none; transition: background-color .15s, border-color .15s; }
.view-back::before { content: "🚪"; font-size: 16px; line-height: 1; }
.view-back:hover, .view-back:focus-visible { background: var(--surface-2); border-color: var(--accent); }
.view-count { color: var(--muted); font-size: 13px; white-space: nowrap; }
.view-count strong { font-family: var(--display); font-weight: 400; font-size: 1.25rem; color: var(--accent); font-variant-numeric: tabular-nums; margin-right: 2px; }

/* 入口カード：金縁の小さな扉。上がアーチ、下が角丸。ホバーで浮く */
.doors-block { padding-top: 0; }
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 300px)); justify-content: center; gap: 24px; }
.door {
  position: relative; display: grid; justify-items: center; gap: 6px; padding: 34px 18px 24px;
  border: 6px double var(--gold); border-radius: 150px 150px 14px 14px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface) 70%);
  box-shadow: inset 0 0 0 2px var(--bg-deep), inset 0 0 22px rgb(15 10 26 / 55%), var(--shadow);
  color: var(--text); text-align: center; text-decoration: none;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.door::after { content: ""; position: absolute; right: 22px; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px var(--accent); opacity: .8; } /* ドアノブ */
.door:hover, .door:focus-visible { transform: translateY(-6px); box-shadow: inset 0 0 0 2px var(--bg-deep), inset 0 0 22px rgb(15 10 26 / 55%), 0 16px 34px rgb(255 122 26 / 28%); }
.door-icon { font-size: 40px; line-height: 1; filter: drop-shadow(0 4px 8px rgb(15 10 26 / 55%)); }
.door-title { font-family: var(--display); font-size: 1.15rem; line-height: 1.3; text-shadow: 0 2px 0 var(--bg-deep); }
.door-note { color: var(--muted); font-size: 13px; line-height: 1.5; }

/* 切り替え演出：紫の暗転→フェードイン（固定オーバーレイ、ホラーにしない） */
body.is-switching::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, #2b1b4a 0%, var(--bg-deep) 70%);
  animation: curtain .4s ease both;
}
@keyframes curtain { 0% { opacity: 0; } 35% { opacity: 1; } 55% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 599px) {
  .doors { gap: 14px; }
  .door { padding: 20px 16px 18px; border-radius: 90px 90px 14px 14px; }
  .view-bar-inner { min-height: 44px; }
  .view-count { font-size: 12px; }
}

/* ---------- 16. 運営チーム・協賛（site-config.js の team / sponsors） ---------- */
.team { margin: 28px 0 8px; }
.team[hidden] { display: none; }
.team-title { margin: 0 0 14px; font-family: var(--body); font-weight: 700; font-size: 15px; color: var(--accent); letter-spacing: .04em; }
.team-list { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; padding: 0; list-style: none; }
/* メンバー：丸アイコン＋役割チップ＋名前。主催は橙、運営はミント */
.member {
  display: grid; justify-items: center; gap: 6px; width: 132px; padding: 16px 10px 14px;
  border: 1px solid var(--gold-soft); border-radius: var(--radius); background: var(--surface);
  color: var(--text); text-align: center; text-decoration: none;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.member:hover, .member:focus-visible { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 10px 24px rgb(255 122 26 / 22%); }
.member .avatar { width: 64px; height: 64px; }
.member-role { padding: 2px 10px; border: 1px solid rgb(143 211 182 / 50%); border-radius: 999px; background: rgb(143 211 182 / 12%); color: var(--mint); font-size: 11px; font-weight: 700; line-height: 1.6; }
.member-role.is-host { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.member-name { font-size: 14px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
/* 協賛：マガジンの表紙＋金縁。展示の「額縁」と同じ言葉で揃える */
.sponsor-list { display: grid; gap: 12px; max-width: 66ch; margin-top: 16px; } /* 上の企画趣旨パネルと幅を揃える */
.sponsor-list:empty { display: none; }
.sponsor-card {
  display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); align-items: center; gap: 16px; padding: 10px;
  border: 4px double var(--gold); border-radius: 8px; background: var(--surface);
  color: var(--text); text-decoration: none; transition: transform .2s, box-shadow .2s;
}
.sponsor-card:hover, .sponsor-card:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 28px rgb(255 122 26 / 22%); }
.sponsor-media { display: grid; place-items: center; aspect-ratio: 1.91 / 1; overflow: hidden; border-radius: 4px; background: #221638; }
.sponsor-media .work-image, .sponsor-media img { width: 100%; height: 100%; object-fit: cover; }
.sponsor-mark { font-size: 32px; color: var(--gold); }
.sponsor-body { display: grid; gap: 2px; min-width: 0; padding-right: 6px; }
.sponsor-role { justify-self: start; margin-bottom: 4px; padding: 2px 10px; border-radius: 999px; background: var(--gold); color: var(--on-accent); font-size: 11px; font-weight: 700; line-height: 1.6; }
.sponsor-name { font-family: var(--display); font-size: 1.05rem; line-height: 1.4; overflow-wrap: anywhere; }
.sponsor-title { color: var(--muted); font-size: 13px; line-height: 1.5; }
.sponsor-cta { margin-top: 6px; color: var(--accent); font-size: 13px; font-weight: 700; }
.sponsor-cta::after { content: " →"; }
/* クレジット行（入口・フッター） */
.credit-line { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.credit-label { color: var(--muted); }
.credit-link { color: var(--text); text-underline-offset: .2em; }
.credit-link:hover { color: var(--accent); }
.site-footer p[hidden] { display: none; }
@media (max-width: 599px) {
  /* 人数に合わせて列数が変わる（4人なら4列、狭い端末では2列×2段） */
  .team-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 8px; }
  .member { width: auto; padding: 12px 4px 10px; gap: 4px; }
  .member .avatar { width: 48px; height: 48px; }
  .member-name { font-size: 12px; }
  .sponsor-card { grid-template-columns: 1fr; }
}
/* 主催キャラ画像が読めないときの代替文字が丸枠からはみ出さないように */
.organizer-character .image-placeholder { padding: 8px; font-size: 12px; line-height: 1.4; text-align: center; }

/* ---------- 17. 見出しの行分け・日本語の改行 ---------- */
/* 見出し：「ハロウィンアート」「2026」を行ごとに出す。年号はアクセント色 */
.hero h1 .title-line { display: block; }
.hero h1 .title-year { color: var(--accent); text-shadow: 0 0 22px rgb(255 122 26 / 55%), 3px 4px 0 var(--on-accent); }
/* 文節で折り返す（対応ブラウザのみ。非対応でも通常の折り返しになるだけ） */
.prose, .section-intro, .steps span, .tool-panel p, .organizer-card > p, .sponsor-title { word-break: auto-phrase; text-wrap: pretty; }

/* ---------- 18. 展示物（告知記事の画像を金の額縁で見せる） ---------- */
/* 企画について：スマホは 文章→キービジュアル→運営、PCは左に文章と運営・右にキービジュアル */
.about-layout { display: grid; gap: 28px; grid-template-areas: "text" "kv" "more"; }
.about-text { grid-area: text; min-width: 0; }
.about-more { grid-area: more; min-width: 0; }
.exhibit-kv { grid-area: kv; justify-self: center; width: min(100%, 400px); }
@media (min-width: 900px) {
  .about-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); grid-template-areas: "text kv" "more kv"; column-gap: 48px; align-items: start; }
  .exhibit-kv { position: sticky; top: calc(var(--nav-h) + 24px); width: 100%; }
}
.exhibit { margin: 0; }
.exhibit-frame {
  display: block; padding: 8px; border: 6px double var(--gold); border-radius: 6px; background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--bg-deep), var(--shadow); transition: transform .3s, box-shadow .3s;
}
.exhibit-frame:hover, .exhibit-frame:focus-visible { transform: rotate(-.6deg) translateY(-3px); box-shadow: inset 0 0 0 2px var(--bg-deep), 0 14px 32px rgb(255 122 26 / 22%); }
.exhibit-frame img { width: 100%; height: auto; border-radius: 3px; }
.exhibit figcaption { margin-top: 8px; color: var(--muted); font-size: 13px; text-align: center; }
.exhibit figcaption::after { content: "（押すと原寸で開きます）"; font-size: 11px; opacity: .8; }
/* 参加方法：図解2枚。PCは横並び、スマホは縦に */
.exhibit-pair { display: grid; gap: 24px; margin: 28px 0 8px; }
@media (min-width: 700px) { .exhibit-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   19. ハロウィンの仕掛け（fx.js と対）
   いつも動く＝月・霧・おばけ（控えめ）／1回だけ＝扉・コウモリ／押すと動く＝ランタン・Trick・懐中電灯
   ========================================================================== */

/* --- 1. 扉の入場演出（初回だけ） --- */
.door-intro {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; align-content: center; gap: 22px;
  background: radial-gradient(ellipse at 50% 45%, #2b1b4a 0%, var(--bg-deep) 70%); cursor: pointer;
  transition: opacity .5s ease;
}
.door-intro.is-leaving { opacity: 0; }
.door-intro-text { order: -1; display: grid; gap: 4px; margin: 0; text-align: center; }
.door-intro-small { color: var(--muted); font-size: 14px; letter-spacing: .1em; }
.door-intro-title { font-family: var(--display); font-size: clamp(1.6rem, 6vw, 2.4rem); color: var(--accent); text-shadow: 0 0 22px rgb(244 163 64 / 55%); }
.door-intro-frame {
  position: relative; width: min(56vw, 240px); aspect-ratio: 2 / 3; overflow: hidden; perspective: 900px;
  border: 8px double var(--gold); border-radius: 999px 999px 12px 12px;
  background: radial-gradient(ellipse at 50% 60%, #ffd48a 0%, var(--accent) 30%, #6b2a10 75%); /* 扉の奥の灯り */
  box-shadow: 0 0 60px rgb(244 163 64 / 35%);
}
.door-leaf {
  position: absolute; top: 0; bottom: 0; width: 50%;
  background: repeating-linear-gradient(90deg, #3b2a5e 0 14px, #33234f 14px 28px);
  transition: transform 1.1s cubic-bezier(.6, .05, .3, 1) .5s;
}
.door-leaf.left { left: 0; transform-origin: left center; border-right: 1px solid var(--bg-deep); }
.door-leaf.right { right: 0; transform-origin: right center; }
.door-leaf::after { content: ""; position: absolute; top: 55%; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--accent); }
.door-leaf.left::after { right: 10px; } .door-leaf.right::after { left: 10px; }
.door-intro.is-open .door-leaf.left { transform: rotateY(-100deg); }
.door-intro.is-open .door-leaf.right { transform: rotateY(100deg); }
.door-intro-skip { margin: 0; color: var(--muted); font-size: 12px; opacity: .7; }

/* --- 2. 満ちていく月：満月の日は少し脈打つ --- */
.hero.is-full-moon::before { animation: moon-pulse 4s ease-in-out infinite; }
@keyframes moon-pulse { 0%, 100% { filter: none; } 50% { filter: brightness(1.12); } }

/* --- 3. コウモリの群れ（月から左上へ飛び去る） --- */
.bat-flock { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.bat {
  position: absolute; top: 14%; right: 11%; width: var(--size, 28px); color: var(--bg-deep);
  filter: drop-shadow(0 0 2px rgb(217 180 91 / 60%)); opacity: 0;
  animation: bat-fly 2.8s cubic-bezier(.4, .1, .6, 1) forwards;
}
.bat svg { display: block; width: 100%; height: auto; fill: currentColor; animation: bat-flap .16s ease-in-out infinite alternate; transform-origin: center 40%; }
@keyframes bat-fly { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 12% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); } }
@keyframes bat-flap { from { transform: scaleY(1); } to { transform: scaleY(.45); } }

/* --- 4. おばけの配達便（参加者アイコンを抱えて横切る） --- */
.courier-lane { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.courier {
  position: absolute; top: var(--y, 20%); left: 100%; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto;
  animation: courier-fly var(--dur, 16s) linear forwards;
}
.courier:hover { animation-play-state: paused; }
.courier-body { position: relative; display: block; width: 52px; animation: courier-bob 2.4s ease-in-out infinite alternate; }
.courier-body svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgb(15 10 26 / 55%)); }
.gh-body { fill: #fff4e3; opacity: .92; } .gh-eye, .gh-mouth { fill: var(--on-accent); }
.courier-parcel {
  position: absolute; left: 50%; bottom: -8px; display: grid; place-items: center; width: 30px; height: 30px; overflow: hidden;
  transform: translateX(-50%); border: 2px solid var(--gold); border-radius: 50%; background: var(--surface); font-size: 16px;
}
.courier-parcel img { width: 100%; height: 100%; object-fit: cover; }
.courier-name {
  position: absolute; bottom: calc(100% + 6px); left: 50%; padding: 3px 10px; transform: translateX(-50%);
  border: 1px solid var(--gold-soft); border-radius: 999px; background: var(--surface); color: var(--text);
  font-size: 12px; font-weight: 700; white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none;
}
.courier:hover .courier-name, .courier:focus-visible .courier-name { opacity: 1; }
@keyframes courier-fly { from { transform: translateX(0); } to { transform: translateX(calc(-100vw - 180px)); } }
@keyframes courier-bob { from { transform: translateY(-6px) rotate(-4deg); } to { transform: translateY(6px) rotate(4deg); } }

/* --- 5. ランタン飾り（入口の扉の上） --- */
.garland { position: relative; max-width: 760px; margin: 0 auto 36px; padding-top: 4px; text-align: center; }
.garland-rope { position: absolute; top: 0; left: 0; width: 100%; height: 44px; color: var(--gold-soft); }
.lanterns { position: relative; display: flex; justify-content: space-around; }
.lantern {
  --h: 16px; position: relative; width: 60px; padding: var(--h) 0 0; border: 0; background: none; cursor: pointer;
  transform-origin: 50% 0; animation: sway 4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.7s);
}
.lantern:nth-child(2) { --h: 30px; } .lantern:nth-child(3) { --h: 24px; } .lantern:nth-child(4) { --h: 18px; } .lantern:nth-child(5) { --h: 8px; } /* 縄のたるみに合わせる */
.lantern::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: calc(var(--h) + 4px); background: var(--gold-soft); }
.lantern svg { display: block; width: 100%; height: auto; transition: filter .3s; }
.lantern .pk-stem { stroke: #6b8f3a; } .lantern .pk-body { fill: #4a2f52; } .lantern .pk-mid { fill: #573a60; } .lantern .pk-face { fill: #241532; }
.lantern[aria-pressed="true"] .pk-body { fill: #e8650f; } .lantern[aria-pressed="true"] .pk-mid { fill: #ff9a36; } .lantern[aria-pressed="true"] .pk-face { fill: #ffe08a; }
.lantern[aria-pressed="true"] svg { filter: drop-shadow(0 0 10px rgb(255 170 60 / 75%)); }
.garland.is-complete .lantern svg { filter: drop-shadow(0 0 16px rgb(255 190 80 / 90%)); }
.garland-hint { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.garland-hint span { color: var(--accent); font-family: var(--display); }
.garland-reward { display: grid; justify-items: center; gap: 8px; margin-top: 12px; animation: reward-in .5s ease both; }
.garland-reward[hidden] { display: none; }
.garland-reward p { margin: 0; color: var(--text); font-weight: 700; }
@keyframes reward-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.candy-burst { position: absolute; top: 40px; left: 50%; pointer-events: none; }
.candy-burst span { position: absolute; font-size: 22px; animation: candy 1.2s ease-out forwards; }
@keyframes candy { from { opacity: 1; transform: rotate(var(--a)) translateX(0) rotate(calc(var(--a) * -1)); } to { opacity: 0; transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1)); } }

/* --- 6. Trick or Create ボタン --- */
.trick-btn { gap: 8px; }
.trick-btn small { font-size: 11px; font-weight: 500; opacity: .8; }
.trick-icon { display: inline-block; font-size: 1.15em; }
.trick-btn.is-spinning .trick-icon { animation: trick-spin .65s ease-in-out; }
@keyframes trick-spin { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(200deg) scale(1.4); } 100% { transform: rotate(360deg) scale(1); } }
.hall-tools { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 8px; }

/* --- 7. 懐中電灯モード（美術館） --- */
.torch-dark {
  position: fixed; inset: 0; z-index: 45; pointer-events: none;
  background: radial-gradient(circle 170px at var(--x, 50%) var(--y, 50%), rgb(8 5 16 / 0%) 0 45%, rgb(8 5 16 / 94%) 100%);
}
.torch-pill {
  position: fixed; left: 50%; bottom: 16px; z-index: 46; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px);
  padding: 6px 6px 6px 16px; transform: translateX(-50%); border: 1px solid var(--gold-soft); border-radius: 999px;
  background: var(--surface); box-shadow: var(--shadow); font-size: 14px; white-space: nowrap;
}
.torch-found { color: var(--accent); font-weight: 700; }
.torch-pill .btn { min-height: 40px; padding: 6px 14px; font-size: 13px; }
.hidden-ghost { position: absolute; z-index: 3; width: 42px; opacity: .45; pointer-events: none; transition: opacity .3s; }
.hidden-ghost svg { display: block; width: 100%; height: auto; }
.hidden-ghost .gh-body { fill: #e9e4ff; }
.hidden-ghost.is-found { opacity: 1; animation: ghost-pop .6s ease; filter: drop-shadow(0 0 12px rgb(233 228 255 / 80%)); }
@keyframes ghost-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.25) translateY(-8px); } 100% { transform: none; } }
body.is-torch .frame:nth-child(odd)::before { filter: drop-shadow(0 0 14px rgb(244 163 64 / 90%)); } /* 消灯中は吊りランタンが目立つ */

/* --- 8. 霧と墓地の奥行き（フッターの上・全ページ） --- */
.fog-scene {
  position: relative; z-index: 1; height: clamp(110px, 15vw, 180px); overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--bg-deep) 92%);
}
.fog-far { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; fill: #0c0716; transform: translateY(calc((1 - var(--fog-t, .6)) * 16px)); }
.fog { position: absolute; left: -10%; right: -10%; bottom: -10px; height: 75%; background-repeat: repeat-x; animation: fog-drift 60s linear infinite; }
.fog-back {
  background-image: radial-gradient(ellipse 22% 55% at 25% 75%, rgb(201 189 224 / 16%), transparent 70%), radial-gradient(ellipse 28% 50% at 75% 85%, rgb(201 189 224 / 12%), transparent 70%);
  background-size: 900px 100%; transform: translateY(calc((1 - var(--fog-t, .6)) * 28px));
}
.fog-front {
  height: 55%; animation-duration: 38s; animation-direction: reverse;
  background-image: radial-gradient(ellipse 30% 60% at 40% 90%, rgb(233 228 255 / 14%), transparent 70%), radial-gradient(ellipse 24% 55% at 85% 95%, rgb(244 163 64 / 6%), transparent 70%);
  background-size: 700px 100%; transform: translateY(calc((1 - var(--fog-t, .6)) * 44px));
}
@keyframes fog-drift { from { background-position-x: 0; } to { background-position-x: 900px; } }

@media (max-width: 599px) {
  .lantern { width: 46px; }
  .garland { margin-bottom: 24px; }
  .courier-body { width: 44px; }
  .torch-pill { gap: 8px; font-size: 12px; }
}

/* ---------- 20. 高速回転ルーレット（メリーゴーランド） ---------- */
.carousel-controls { flex-wrap: wrap; }
.turbo-btn { min-width: 130px; }
.speed-row { order: 3; display: flex; justify-content: center; padding: 10px 16px 0; }
.carousel .carousel-controls { order: 4; }
.speed-seg button[data-speed="3"][aria-pressed="true"] { background: var(--accent-deep); border-color: var(--accent-deep); animation: turbo-throb .4s ease-in-out infinite alternate; }
.turbo-btn.is-hot { background: var(--accent-deep); border-color: var(--accent-deep); animation: turbo-throb .4s ease-in-out infinite alternate; }
@keyframes turbo-throb { from { box-shadow: 0 0 0 0 rgb(255 122 26 / 50%); } to { box-shadow: 0 0 0 8px rgb(255 122 26 / 0%); } }
/* 速さの段階ごとに：ブレ→揺れ→床が光る */
.stage.turbo-2 .cc .face, .stage.is-braking .cc .face { filter: blur(.6px); }
.stage.turbo-3 .cc .face { filter: blur(1.6px) brightness(1.15); }
.stage.turbo-3 { animation: stage-shake .09s linear infinite; }
.stage.turbo-3 .floor, .stage.is-braking .floor { background: radial-gradient(ellipse at center, rgb(255 122 26 / 70%) 0%, rgb(244 163 64 / 25%) 55%, transparent 72%); }
.stage.turbo-3 .pole { opacity: 1; box-shadow: 0 0 16px var(--accent); }
@keyframes stage-shake { 0% { transform: translate(0, 0); } 25% { transform: translate(1.5px, -1px); } 50% { transform: translate(-1px, 1.5px); } 75% { transform: translate(1px, 1px); } 100% { transform: translate(0, 0); } }
/* 止まった人 */
.cc.is-winner .face.front { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent), 0 0 36px rgb(244 163 64 / 70%); }
.spin-result { order: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 12px auto 0; padding: 8px 8px 8px 18px; width: fit-content; max-width: 100%; border: 1px solid var(--gold-soft); border-radius: 999px; background: var(--surface); animation: reward-in .4s ease both; }
.spin-result[hidden] { display: none; }
.spin-result-text { font-weight: 700; }
.spin-result .act { min-height: 40px; }
@media (max-width: 599px) {
  .speed-row { padding-inline: 0; }
  .speed-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } /* スマホは2列（超速は3段目を横いっぱい：28節） */
}

/* ---------- 21. 「参加する」を開くたびの演出（fx.js の 9・6種類） ---------- */
.jfx { position: fixed; inset: 0; z-index: 90; display: grid; place-content: center; justify-items: center; gap: 14px; overflow: hidden; cursor: pointer; }
.jfx.is-fading { opacity: 0 !important; transition: opacity 1.1s ease; }
.jfx-line { position: relative; z-index: 2; margin: 0; color: var(--text); font-family: var(--display); font-size: clamp(1.1rem, 4vw, 1.5rem); text-align: center; text-shadow: 0 0 16px rgb(244 163 64 / 45%); opacity: 0; transform: translateY(6px); transition: opacity .6s ease, transform .6s ease; }
.jfx-line.is-on { opacity: 1; transform: none; }
.jfx-line.is-accent { color: var(--accent); }
.jfx-line.is-big { font-size: clamp(3rem, 14vw, 7rem); color: var(--text); text-shadow: 0 0 30px rgb(233 228 255 / 60%), 4px 5px 0 var(--on-accent); }
/* 明かりが戻ったあと、中身を順に出す */
.fx-hidden { opacity: 0; transform: translateY(14px); filter: blur(4px); }
.fx-hidden.fx-shown { opacity: 1; transform: none; filter: none; transition: opacity .9s ease, transform .9s ease, filter .9s ease; }

/* 1. 目が光る */
.jfx-eyes { background: #050308; opacity: 0; }
.jfx-eyes.is-flicker { animation: lights-out 1.1s steps(1, end) forwards; }
@keyframes lights-out { 0% { opacity: 0; } 12% { opacity: .85; } 20% { opacity: .1; } 34% { opacity: 1; } 42% { opacity: .35; } 56%, 100% { opacity: 1; } }
.jfx-eyepair { display: flex; gap: 34px; opacity: 0; transition: opacity .6s ease; }
.jfx-eyepair.is-on { opacity: 1; }
.jfx-eyepair span { width: 26px; height: 14px; border-radius: 50%; background: radial-gradient(ellipse at 50% 60%, #fff3c4 0 20%, var(--accent) 45%, var(--accent-deep) 80%); box-shadow: 0 0 18px var(--accent), 0 0 42px rgb(255 122 26 / 60%); }
.jfx-eyepair.is-on span { animation: eye-blink 2.4s ease-in-out .9s infinite; }
@keyframes eye-blink { 0%, 44%, 52%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.1); } }

/* 2. 停電とろうそく：--r（光の輪の半径）を fx.js が広げる */
.jfx-candle { --r: 0px; background: radial-gradient(circle at 50% 50%, rgb(5 3 8 / 0%) 0 var(--r), #050308 calc(var(--r) + 90px)); opacity: 0; transition: opacity .6s ease; }
.jfx-candle.is-on { opacity: 1; }
.jfx-candlestick { position: relative; display: grid; justify-items: center; width: 40px; height: 110px; transition: opacity .8s ease; }
.jfx-candle.is-spreading .jfx-candlestick, .jfx-candle.is-spreading .jfx-line { opacity: 0; transition: opacity .6s ease; }
.jfx-candlestick .wax { position: absolute; bottom: 0; width: 26px; height: 64px; border-radius: 4px 4px 2px 2px; background: linear-gradient(90deg, #efe4cf, #fff7e8 45%, #d8c9ae); }
.jfx-candlestick .flame { position: absolute; bottom: 62px; width: 14px; height: 30px; border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%; background: radial-gradient(ellipse at 50% 75%, #fff 0 20%, #ffd54a 45%, var(--accent-deep) 80%); opacity: .15; transform-origin: 50% 90%; transition: opacity .4s ease; }
.jfx-candlestick.is-lit .flame { opacity: 1; box-shadow: 0 0 30px 12px rgb(255 190 80 / 45%), 0 0 90px 40px rgb(255 150 50 / 18%); animation: flame 0.9s ease-in-out infinite alternate; }
@keyframes flame { from { transform: scale(1, 1) rotate(-3deg); } to { transform: scale(.9, 1.12) rotate(3deg); } }

/* 3. おばけの幕 */
.jfx-ghost { background: none; }
.jfx-sheet { position: absolute; inset: 0; background: #050308; transform: translateX(-100%); transition: transform 1s cubic-bezier(.3, .7, .3, 1); }
.jfx-sheet.is-in { transform: translateX(0); }
.jfx-sheet.is-out { transform: translateX(110%); transition: transform 1.1s cubic-bezier(.6, 0, .8, .4); }
.jfx-bigghost { position: absolute; top: 50%; right: 4vmin; width: 30vmin; transform: translateY(-50%); /* 幕の先頭（右端）で幕を引っぱる */ filter: drop-shadow(0 0 30px rgb(233 228 255 / 45%)); animation: courier-bob 1.4s ease-in-out infinite alternate; }
.jfx-bigghost svg { display: block; width: 100%; height: auto; }

/* 4. コウモリの大群 */
.jfx-bats { background: rgb(5 3 8 / 0%); transition: background-color .8s ease; }
.jfx-bats.is-on { background: rgb(5 3 8 / 94%); }
.jfx-swarm { position: absolute; inset: 0; pointer-events: none; }
.jfx-bat { position: absolute; left: 100%; width: var(--size, 40px); color: #3b2a5e; filter: drop-shadow(0 0 1px var(--gold)) drop-shadow(0 0 6px rgb(244 163 64 / 55%)); animation: swarm-fly 1.8s linear both; }
.jfx-bat svg { display: block; width: 100%; height: auto; fill: currentColor; animation: bat-flap .14s ease-in-out infinite alternate; }
@keyframes swarm-fly { from { transform: translate(0, 0); } to { transform: translate(calc(-100vw - 120px), -8vh); } }

/* 5. かぼちゃ大王 */
.jfx-pumpkin { background: #050308; opacity: 0; transition: opacity .5s ease; }
.jfx-pumpkin.is-on { opacity: 1; }
.jfx-king { display: block; width: min(56vmin, 360px); transform: scale(.4); opacity: 0; transition: transform .9s cubic-bezier(.2, 1.4, .4, 1), opacity .6s ease; }
.jfx-king svg { display: block; width: 100%; height: auto; }
.jfx-king .pk-stem { stroke: #6b8f3a; } .jfx-king .pk-body { fill: #e8650f; } .jfx-king .pk-mid { fill: #ff9a36; } .jfx-king .pk-face { fill: #ffe08a; }
.jfx-king.is-lit { transform: scale(1); opacity: 1; filter: drop-shadow(0 0 40px rgb(255 170 60 / 70%)); animation: king-flicker 1.6s steps(1, end) .9s infinite; }
@keyframes king-flicker { 0%, 100% { filter: drop-shadow(0 0 40px rgb(255 170 60 / 70%)); } 40% { filter: drop-shadow(0 0 16px rgb(255 170 60 / 40%)) brightness(.8); } 45% { filter: drop-shadow(0 0 50px rgb(255 190 80 / 90%)); } }
.jfx-king.is-burst { transform: scale(3); opacity: 0; transition: transform 1s ease-in, opacity .9s ease-in; animation: none; }

/* 6. ハロウィン放送局 */
.jfx-tv { background: #111; opacity: 0; transition: opacity .15s linear; transform-origin: center; }
.jfx-tv.is-on { opacity: 1; }
.jfx-noise { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: .55; transition: opacity .8s ease; }
.jfx-tv.is-tuned .jfx-noise { opacity: .12; }
.jfx-tv.is-tuned { background: #0f0a1a; }
.jfx-scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgb(0 0 0 / 35%) 0 2px, transparent 2px 4px); pointer-events: none; }
.jfx-tv .jfx-line { padding: 6px 16px; background: rgb(0 0 0 / 72%); font-family: var(--body); font-weight: 700; letter-spacing: .06em; text-shadow: 2px 0 rgb(255 60 60 / 60%), -2px 0 rgb(60 200 255 / 60%); }
.jfx-tv.is-off { animation: tv-off .7s ease-in forwards; }
@keyframes tv-off { 0% { transform: scale(1, 1); opacity: 1; filter: brightness(1); } 55% { transform: scale(1, .004); filter: brightness(3); opacity: 1; } 100% { transform: scale(0, .004); filter: brightness(3); opacity: 0; } }

/* ---------- 22. 参加ページの注釈（演出のほのめかし） ---------- */
.join-hint {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 16px; padding: 6px 14px 6px 10px;
  border: 1px dashed var(--gold-soft); border-radius: 999px; background: rgb(43 27 74 / 60%);
  color: var(--muted); font-size: 13px; line-height: 1.5;
}
/* 導火線：開くとジリジリ燃えて、燃え切ると演出が始まる */
.join-hint-fuse { position: relative; flex: 0 0 64px; height: 4px; border-radius: 2px; background: rgb(201 189 224 / 18%); overflow: visible; }
.join-hint-fuse > span { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 2px; background: linear-gradient(90deg, var(--gold), var(--accent-deep)); }
.join-hint.is-burning .join-hint-fuse > span { animation: fuse-burn var(--fuse, 6s) linear forwards; }
.join-hint.is-burning .join-hint-fuse > span::after { content: ""; position: absolute; right: -4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #ffe08a; box-shadow: 0 0 8px 2px var(--accent); animation: spark .2s steps(2) infinite; }
@keyframes fuse-burn { to { width: 100%; } }
@keyframes spark { 50% { transform: scale(.6); opacity: .7; } }
.join-hint-icon { display: inline-block; font-size: 18px; animation: hint-peek 3.6s ease-in-out infinite; }
@keyframes hint-peek { 0%, 70%, 100% { transform: translateY(0) rotate(0); opacity: 1; } 78% { transform: translateY(-3px) rotate(-10deg); } 86% { transform: translateY(0) rotate(8deg); opacity: .6; } }
/* 動きを減らす設定では演出が出ないので、注釈も出さない */
@media (prefers-reduced-motion: reduce) { .join-hint { display: none; } }
/* 注釈は「参加する」の上帯の中に置く（小さめ・中央寄せ） */
.view-bar .join-hint { margin: 0 auto; padding: 4px 12px 4px 8px; font-size: 12px; background: rgb(15 10 26 / 45%); }
.view-bar .join-hint-icon { font-size: 16px; }
@media (max-width: 599px) {
  .view-bar-inner:has(.join-hint) { flex-wrap: wrap; row-gap: 4px; padding-bottom: 6px; }
  /* スマホ：左にアイコン、右に文字、その下に導火線 */
  .view-bar .join-hint { order: 3; flex: 1 1 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; align-items: center; border-radius: 14px; font-size: 11px; }
  .view-bar .join-hint-icon { grid-row: 1 / span 2; }
  .view-bar .join-hint-fuse { width: 100%; }
}

/* ---------- 23. ルーレットの記録（止まった回数・連続・好きすぎ） ---------- */
.cc .face.front { position: absolute; }
.spin-badge { position: absolute; top: 6px; right: 6px; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-family: var(--display); font-size: 11px; line-height: 1.5; box-shadow: 0 2px 6px rgb(15 10 26 / 45%); }
.cc.is-king .face.front { border-color: #ffd54a; box-shadow: 0 0 0 2px #ffd54a, 0 0 22px rgb(255 213 74 / 45%); }
.cc.is-king .face.front::before { content: "👑"; position: absolute; top: -18px; left: 50%; transform: translateX(-50%) rotate(-8deg); font-size: 26px; filter: drop-shadow(0 2px 4px rgb(15 10 26 / 60%)); }
.spin-burst { position: absolute; top: 40%; left: 50%; z-index: 5; pointer-events: none; }
.spin-burst span { position: absolute; font-size: 24px; animation: candy 1.3s ease-out forwards; }
.stage.is-jolt { animation: stage-jolt .5s ease; }
@keyframes stage-jolt { 0%, 100% { transform: none; } 15% { transform: translate(-6px, 2px) rotate(-1deg); } 35% { transform: translate(6px, -2px) rotate(1deg); } 55% { transform: translate(-4px, 1px); } 75% { transform: translate(3px, 0); } }
.spin-result { flex-direction: column; gap: 6px; padding: 10px 18px; border-radius: 18px; text-align: center; }
.spin-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.spin-result-foot { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; }
.spin-reset { padding: 0; border: 0; background: none; color: var(--muted); font-size: 11px; text-decoration: underline; cursor: pointer; }
.spin-reset:hover { color: var(--accent); }
.spin-result.is-love, .spin-result.is-follow { border-color: #ff7fa8; box-shadow: 0 0 24px rgb(255 127 168 / 30%); }
.spin-result.is-love .spin-result-text, .spin-result.is-follow .spin-result-text { color: #ffb3c9; }
.spin-result.is-king { border-color: #ffd54a; box-shadow: 0 0 24px rgb(255 213 74 / 35%); }
.spin-result.is-king .spin-result-text { color: #ffe08a; }
.spin-result.is-streak .spin-result-text { color: var(--accent); }
/* ありえん連続：金と橙で派手に */
.spin-result.is-miracle { border-color: var(--accent); box-shadow: 0 0 28px rgb(255 122 26 / 45%); }
.spin-result.is-miracle .spin-result-text { color: #ffd48a; }
/* 通算回数への節目ツッコミ（セリフの下に小さく1行） */
.spin-result-tsukkomi { color: var(--mint); font-size: 13px; font-weight: 700; }

/* ---------- 24. ツール一覧（参加ページ） ---------- */
.tool-list { display: grid; gap: 20px; }
@media (min-width: 820px) { .tool-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tool-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 6px double var(--gold); border-radius: 8px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--bg-deep), var(--shadow); transition: transform .25s, box-shadow .25s; }
.tool-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 2px var(--bg-deep), 0 14px 32px rgb(255 122 26 / 22%); }
.tool-media { display: grid; place-items: center; aspect-ratio: 1.91 / 1; overflow: hidden; background: linear-gradient(160deg, var(--accent), #8b3d0a 55%, var(--surface)); }
.tool-media img { width: 100%; height: 100%; object-fit: cover; }
.tool-icon { font-size: clamp(56px, 10vw, 84px); filter: drop-shadow(0 6px 14px rgb(15 10 26 / 55%)); }
.tool-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.tool-en { margin: 0; color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.tool-body h3 { font-size: 1.1rem; }
.tool-text { margin: 0; color: var(--muted); font-size: 14px; word-break: auto-phrase; }
.tool-open { align-self: flex-start; margin-top: auto; }
.tool-open::after { content: " ↗"; }

/* ---------- 25. 参加受付（受付記事リンク・共通タグ・おやくそく・入口バッジ） ---------- */
.entry-articles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.entry-articles .act { min-height: 40px; font-size: 13px; }
.entry-articles .act.hot::after { content: " ↗"; }
.entry-pending { border-style: dashed; background: transparent; color: var(--muted); cursor: default; }
.entry-pending:hover { transform: none; box-shadow: none; }
.hashtag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.hashtag { padding: 6px 14px; border: 1px solid var(--accent); border-radius: 999px; background: rgb(244 163 64 / 12%); color: var(--accent); font-family: var(--display); font-size: 15px; }
.hashtag-copy { min-height: 36px; padding: 4px 12px; font-size: 12px; }
.join-rules { margin: 24px 0 8px; padding: 18px 22px; }
.join-rules h3 { margin: 0 0 8px; font-family: var(--body); font-weight: 700; font-size: 15px; color: var(--accent); }
.join-rules ul { margin: 0; padding-left: 1.2em; color: var(--muted); font-size: 14px; line-height: 1.8; }
.join-rules li { word-break: auto-phrase; }
.join-rules li + li { margin-top: 4px; }
.entry-badge { display: inline-flex; align-items: center; gap: 4px; margin: 2px 0 0; padding: 6px 14px; border-radius: 999px; background: linear-gradient(160deg, var(--accent), var(--accent-deep)); color: var(--on-accent); font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: 0 0 0 0 rgb(255 122 26 / 50%); animation: entry-pulse 2.4s ease-in-out infinite; }
.entry-badge[hidden] { display: none; }
.entry-badge span { font-weight: 500; font-size: 12px; }
@keyframes entry-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(255 122 26 / 45%); } 50% { box-shadow: 0 0 0 8px rgb(255 122 26 / 0%); } }
/* 手順の説明文（.steps span）の縦並びがボタンに効かないように */
.steps .entry-articles .act { display: inline-flex; width: auto; color: inherit; font-size: 13px; }
.steps .entry-articles .entry-pending { color: var(--muted); }

/* ---------- 26. 特別賞（協賛者が選ぶ賞：award.js） ---------- */
/* 協賛カードと同じ「金の二重枠」で揃え、右に受賞作を入れる額縁を置く。スマホは額縁→説明の順 */
.award-section[hidden] { display: none; }
.award-list { display: grid; gap: 24px; }
.award-card {
  position: relative; display: grid; gap: 24px; grid-template-areas: "frame" "body"; padding: 20px;
  border: 4px double var(--gold); border-radius: var(--radius);
  /* 天井からのスポットライト（金） */
  background: radial-gradient(ellipse 70% 60% at 75% -10%, rgb(217 180 91 / 22%), transparent 70%), var(--surface);
  box-shadow: var(--shadow);
}
@media (min-width: 760px) {
  .award-card { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); grid-template-areas: "body frame"; align-items: center; padding: 28px 32px; column-gap: 40px; }
}
.award-body { grid-area: body; min-width: 0; display: grid; gap: 12px; justify-items: start; }
.award-status { padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.6; color: var(--on-accent); background: var(--accent); }
.award-status.is-judging { background: var(--mint); }
.award-status.is-announced { background: var(--gold); }
.award-name { font-size: clamp(1.4rem, 3.6vw, 1.9rem); color: var(--gold); text-shadow: 0 0 18px rgb(217 180 91 / 35%), 2px 3px 0 var(--bg-deep); }
.award-selectors { display: grid; gap: 6px; }
.award-selectors-label { color: var(--muted); font-size: 12px; }
.award-selector-list { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 0; padding: 0; list-style: none; }
.award-selector { display: flex; align-items: center; gap: 10px; min-width: 0; }
.award-sponsor-face { display: grid; place-items: center; width: 52px; height: 52px; flex: none; overflow: hidden; border-radius: 50%; border: 2px solid var(--gold); background: var(--surface-2); box-shadow: 0 0 0 3px var(--bg-deep); }
.award-sponsor-face img { width: 100%; height: 100%; object-fit: cover; }
.award-face-fallback { font-size: 26px; }
.award-sponsor-name { font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
a.award-sponsor-name:hover { color: var(--accent); }
.award-message { margin: 0; max-width: 40em; color: var(--text); word-break: auto-phrase; text-wrap: pretty; }
.award-facts { display: grid; gap: 6px; margin: 0; width: 100%; max-width: 40em; }
.award-facts div { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); gap: 12px; padding: 8px 12px; border-radius: 8px; background: rgb(15 10 26 / 35%); border: 1px solid var(--line); }
.award-facts dt { color: var(--accent); font-weight: 700; font-size: 14px; }
.award-facts dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.award-comment { box-sizing: border-box; width: 100%; margin: 0; padding: 12px 16px; border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; background: rgb(15 10 26 / 35%); max-width: 40em; }
.award-comment p { margin: 0 0 6px; word-break: auto-phrase; text-wrap: pretty; }
.award-comment cite { color: var(--muted); font-size: 13px; font-style: normal; }
.award-body .actions { margin-top: 4px; }

/* 額縁：美術館の .frame と同じ金の二重枠。上にリボン（賞の名前）を掛ける */
.award-frame { position: relative; justify-self: center; width: min(100%, 400px); margin: 14px 0 0; }
@media (max-width: 759px) { .award-frame { width: min(100%, 280px); } .award-frame.has-visual { width: 100%; } }
.award-frames { grid-area: frame; display: grid; gap: 24px; justify-items: center; min-width: 0; }
.award-frames.is-multi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.award-frames.is-multi .award-frame { width: 100%; }
.award-frames.is-multi .award-ribbon { padding: 5px 18px; font-size: 12px; }
.award-frame.has-visual .award-frame-inner { aspect-ratio: 16 / 9; padding: 6px; }
.award-frame-link { display: block; width: 100%; height: 100%; } /* スマホでは額縁が画面を占めすぎないように */
.award-frame-inner {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; padding: 8px;
  border: 6px double var(--gold); border-radius: 6px; background: var(--bg-deep);
  box-shadow: inset 0 0 0 2px var(--bg-deep), inset 0 0 24px rgb(15 10 26 / 80%), var(--shadow);
}
.award-winner-img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.award-frame-mark { position: relative; z-index: 1; font-size: 44px; }
.award-q { font-family: var(--display); font-size: 72px; color: var(--gold); text-shadow: 0 0 24px rgb(217 180 91 / 55%); animation: award-glow 2.8s ease-in-out infinite; }
@keyframes award-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
/* 選考中：懐中電灯の光が額縁の中を左右に動く */
.award-beam { position: absolute; inset: 0; background: radial-gradient(circle 70px at var(--x, 30%) 45%, rgb(255 228 170 / 35%), transparent 70%); animation: award-beam 5s ease-in-out infinite; }
@keyframes award-beam { 0%, 100% { --x: 25%; } 50% { --x: 75%; } }
@property --x { syntax: "<percentage>"; inherits: false; initial-value: 30%; }
.award-frame-cap { display: grid; gap: 2px; margin-top: 10px; color: var(--muted); font-size: 13px; text-align: center; line-height: 1.5; }
.award-winner-title { color: var(--text); font-weight: 700; font-size: 14px; }
.award-frame.is-announced .award-frame-inner { box-shadow: inset 0 0 0 2px var(--bg-deep), 0 0 0 1px var(--gold), 0 0 36px rgb(217 180 91 / 45%), var(--shadow); }
/* リボン：両端を切り欠いた金の帯 */
.award-ribbon {
  position: absolute; top: -14px; left: 50%; z-index: 2; transform: translateX(-50%);
  max-width: calc(100% + 16px); padding: 5px 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--display); font-size: 13px; line-height: 1.4; color: var(--on-accent);
  background: linear-gradient(180deg, #f0d48a, var(--gold));
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%, 10px 50%);
  filter: drop-shadow(0 3px 4px rgb(15 10 26 / 60%));
}

/* 参加ページの帯：「特別賞あり」 */
.award-banner {
  display: flex; align-items: center; gap: 12px; margin: 0 0 20px; padding: 12px 16px;
  border: 1px solid var(--gold); border-radius: var(--radius);
  background: linear-gradient(90deg, rgb(217 180 91 / 22%), rgb(217 180 91 / 6%)); color: var(--text); text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.award-banner[hidden] { display: none; }
.award-banner:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgb(217 180 91 / 22%); }
.award-banner-icon { font-size: 28px; flex: none; }
.award-banner-body { display: grid; min-width: 0; line-height: 1.5; }
.award-banner-body strong { color: var(--gold); font-family: var(--display); font-weight: 400; }
.award-banner-body span { font-size: 14px; word-break: auto-phrase; }
.award-banner-go { margin-left: auto; color: var(--accent); font-weight: 700; }

/* 受賞者のカード・額縁に付くリボン */
.is-award { box-shadow: 0 0 0 2px var(--gold), 0 0 28px rgb(217 180 91 / 40%), var(--shadow) !important; }
.award-rosette {
  position: absolute; top: -12px; left: 12px; z-index: 3; padding: 4px 10px; border-radius: 999px;
  background: linear-gradient(180deg, #f0d48a, var(--gold)); color: var(--on-accent);
  font-size: 11px; font-weight: 700; line-height: 1.4; white-space: nowrap; box-shadow: 0 3px 8px rgb(15 10 26 / 45%);
}
@media (prefers-reduced-motion: reduce) {
  .award-q, .award-beam { animation: none; }
}

/* ---------- 27. しかけ探し（secrets.js）・押せる月 ---------- */
/* 押せる月：.hero::before の月と同じ位置・大きさの透明ボタン */
.moon-hit {
  position: absolute; top: 9%; right: 8%; z-index: 3; width: clamp(64px, 9vw, 110px); aspect-ratio: 1;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer; padding: 0;
}
.moon-hit:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.moon-talk {
  position: absolute; top: calc(9% + clamp(64px, 9vw, 110px) + 10px); right: 8%; z-index: 3;
  padding: 6px 12px; border: 1px solid var(--gold); border-radius: 12px; background: var(--surface);
  color: var(--text); font-size: 13px; font-weight: 700; white-space: nowrap; animation: reward-in .3s ease both;
}
@media (max-width: 599px) {
  .moon-hit { top: 3%; right: 6%; }
  .moon-talk { top: calc(3% + 74px); right: 4%; }
}

/* 入口とフッターの「しかけ探し」入り口 */
.secrets-open {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 6px 14px;
  border: 1px dashed var(--gold); border-radius: 999px; background: rgb(217 180 91 / 8%);
  color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer;
}
.secrets-open:hover { border-style: solid; background: rgb(217 180 91 / 16%); }
.secrets-open.is-footer { margin-top: 6px; font-size: 12px; }
.secrets-count { padding: 0 8px; border-radius: 999px; background: var(--gold); color: var(--on-accent); font-family: var(--display); font-size: 12px; font-variant-numeric: tabular-nums; }

/* 発見の通知：画面の下にぽんと出る */
.secret-toast {
  position: fixed; left: 0; right: 0; margin-inline: auto; width: fit-content; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 95; /* 中央寄せは margin で（transform はアニメが使う） */
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 10px;
  max-width: calc(100% - 32px); padding: 10px 18px; border: 1px solid var(--accent); border-radius: 16px;
  background: var(--surface); box-shadow: 0 10px 30px rgb(15 10 26 / 60%), 0 0 24px rgb(244 163 64 / 30%);
  animation: reward-in .35s ease both; pointer-events: none;
}
.secret-toast[hidden] { display: none; } /* display:flex が hidden を上書きして、空の枠が出っぱなしになるのを防ぐ */
.secret-toast-head { color: var(--accent); font-family: var(--display); }
.secret-toast-name { font-weight: 700; }
.secret-toast-count { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.secret-toast.is-bonus { border-color: #ffd54a; box-shadow: 0 10px 30px rgb(15 10 26 / 60%), 0 0 28px rgb(255 213 74 / 40%); }
.secret-toast.is-bonus .secret-toast-head, .secret-toast.is-complete .secret-toast-head { color: #ffe08a; }

/* 謎かけの一覧（ダイアログ） */
.secrets-dialog {
  width: min(720px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 0;
  border: 4px double var(--gold); border-radius: 14px; background: var(--bg); color: var(--text);
}
.secrets-dialog::backdrop { background: rgb(10 6 20 / 72%); }
.secrets-inner { display: grid; gap: 12px; padding: 18px 18px 16px; }
.secrets-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.secrets-head h2 { margin: 0; font-size: 1.4rem; }
.secrets-close { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--text); cursor: pointer; }
.secrets-lead { margin: 0; color: var(--muted); font-size: 14px; }
.secrets-meter { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-variant-numeric: tabular-nums; }
.secrets-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.secrets-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s ease; }
.secrets-done { margin: 0; padding: 8px 12px; border-radius: 10px; background: rgb(244 163 64 / 14%); color: var(--accent); font-weight: 700; }
.secrets-list { display: grid; gap: 14px; }
.secrets-room { display: grid; gap: 8px; }
.secrets-room h3 { margin: 0; display: flex; align-items: baseline; gap: 8px; font-size: 1rem; }
.secrets-room h3 small { color: var(--muted); font-family: var(--body); font-size: 12px; font-variant-numeric: tabular-nums; }
.secrets-room.is-bonus { padding-top: 10px; border-top: 1px dashed var(--line); }
.secret-card { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.secret-card.is-found { border-color: var(--accent); }
.secret-stamp { display: grid; place-items: center; width: 38px; height: 38px; border: 2px dashed var(--gold); border-radius: 50%; color: var(--gold); font-family: var(--display); }
.secret-card.is-found .secret-stamp { border-style: solid; border-color: var(--accent); background: var(--accent); color: var(--on-accent); transform: rotate(-12deg); }
.secret-body { display: grid; gap: 4px; min-width: 0; }
.secret-body p { margin: 0; }
.secret-name { color: var(--accent); font-weight: 700; }
.secret-riddle { font-weight: 700; font-size: 14px; }
.secret-riddle.is-dim { color: var(--muted); font-weight: 400; font-size: 13px; }
.secret-note { color: var(--muted); font-size: 12px; }
.secret-hint-btn { justify-self: start; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; }
.secret-hint { padding: 6px 10px; border-radius: 8px; background: var(--bg); color: var(--muted); font-size: 13px; }
.secrets-foot { margin: 0; color: var(--muted); font-size: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.secrets-reset { padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .secret-toast, .moon-talk { animation: none; }
  .secrets-bar span { transition: none; }
}

/* ==========================================================================
   28. テーマ曲：金の額縁に飾ったスクリーン。押すまではサムネイルだけ
   ========================================================================== */
.song-section[hidden] { display: none; }
.song-exhibit { margin: 0 auto; width: min(100%, 720px); }
.song-screen {
  position: relative; aspect-ratio: 16 / 9; padding: 8px; border: 6px double var(--gold); border-radius: 6px;
  background: var(--bg-deep); box-shadow: inset 0 0 0 2px var(--bg-deep), var(--shadow);
}
.song-frame, .song-iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 3px; }
.song-frame { position: relative; padding: 0; overflow: hidden; background: var(--surface); cursor: pointer; color: var(--text); font: inherit; }
.song-thumb { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .3s, transform .4s; }
.song-frame:hover .song-thumb, .song-frame:focus-visible .song-thumb { opacity: 1; transform: scale(1.02); }
.song-frame:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.song-play {
  position: absolute; inset: 50% auto auto 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 6px rgb(244 163 64 / 28%), 0 10px 24px rgb(15 10 26 / 60%);
}
.song-play::after {
  content: ""; position: absolute; inset: 50% auto auto 50%; margin: -14px 0 0 -9px;
  border-style: solid; border-width: 14px 0 14px 24px; border-color: transparent transparent transparent var(--on-accent);
}
.song-frame:hover .song-play { background: var(--accent-deep); }
.song-hint {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 4px 14px; border-radius: 999px;
  background: rgb(15 10 26 / 72%); font-size: 13px; white-space: nowrap;
}
.song-cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px; margin-top: 10px; text-align: center; }
.song-title { font-family: var(--display); font-size: 1.05rem; }
.song-by { color: var(--muted); font-size: 13px; }
.song-link { color: var(--mint); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .song-thumb { transition: none; } .song-frame:hover .song-thumb { transform: none; } }
@media (max-width: 520px) {
  /* スマホは額縁が低いので、再生ボタンを小さくして「押すと再生」と重ならないようにする */
  .song-play { width: 56px; height: 56px; margin: -28px 0 0 -28px; box-shadow: 0 0 0 4px rgb(244 163 64 / 28%), 0 8px 18px rgb(15 10 26 / 60%); }
  .song-play::after { margin: -10px 0 0 -6px; border-width: 10px 0 10px 17px; }
  .song-hint { bottom: 8px; font-size: 12px; }
}

/* ==========================================================================
   29. 運営チーム：入口の顔ならびと、クリエイターカードの「主催／運営」の印
   ========================================================================== */
.hero-team { grid-column: 1 / -1; margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--line); }
.hero-team[hidden] { display: none; }
.hero-team-label { margin: 0 0 8px; color: var(--mint); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.hero-team-label::after { content: " →"; }
.hero-team-list { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 0; padding: 0; list-style: none; }
.hero-face { display: grid; justify-items: center; gap: 4px; width: 64px; color: var(--text); text-decoration: none; }
.hero-face .avatar { width: 48px; height: 48px; border: 2px solid var(--gold); border-radius: 50%; overflow: hidden; transition: transform .25s, border-color .25s, box-shadow .25s; }
.hero-face .avatar img { width: 100%; height: 100%; object-fit: cover; }
.hero-face:hover .avatar, .hero-face:focus-visible .avatar { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 6px 16px rgb(255 122 26 / 30%); }
.hero-face:focus-visible { outline: none; }
.hero-face:focus-visible .hero-face-name { text-decoration: underline; }
.hero-face-name { max-width: 100%; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.3; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.staff-mark { display: inline-block; margin-bottom: 2px; padding: 2px 8px; border: 1px solid var(--gold-soft); border-radius: 999px; background: rgb(217 180 91 / 12%); color: var(--gold); font-size: 11px; font-weight: 700; line-height: 1.5; }
.card.is-staff { border-color: var(--gold-soft); }
@media (prefers-reduced-motion: reduce) { .hero-face .avatar { transition: none; } .hero-face:hover .avatar { transform: none; } }

/* ---------- 28. 超速と故障（止めないとカードが散らばる：app.js の crashCarousel） ---------- */
:root { --danger: #ff4d5e; --danger-deep: #c81e3a; }
.speed-seg { justify-content: center; }
/* スマホの2列並びでは、超速だけ横いっぱいの「危険な段」にする */
@media (max-width: 599px) { .speed-seg button[data-speed="4"] { grid-column: 1 / -1; color: #ffb3bb; } }
.speed-seg button[data-speed="4"][aria-pressed="true"] { background: var(--danger-deep); border-color: var(--danger-deep); color: #fff; animation: danger-throb .25s ease-in-out infinite alternate; }
@keyframes danger-throb { from { box-shadow: 0 0 0 0 rgb(255 77 94 / 60%); } to { box-shadow: 0 0 0 9px rgb(255 77 94 / 0%); } }
/* 超速：爆速よりさらにブレて、床と柱が赤く光る */
.stage.turbo-4 .cc .face { filter: blur(2.4px) brightness(1.25) saturate(1.3); }
.stage.turbo-4 { animation: stage-shake .06s linear infinite; }
.stage.turbo-4 .floor { background: radial-gradient(ellipse at center, rgb(255 77 94 / 75%) 0%, rgb(255 122 26 / 30%) 55%, transparent 72%); }
.stage.turbo-4 .pole { opacity: 1; box-shadow: 0 0 18px var(--danger); }
/* 軋み1段目：揺れが大きくなる／2段目：柱がぐらつき、カードの縁が赤くなる */
.stage.overload-1 { animation: stage-shake-hard .05s linear infinite; }
.stage.overload-2 { animation: stage-shake-crazy .045s linear infinite; }
.stage.overload-2 .pole { transform-origin: 50% 100%; animation: pole-wobble .14s ease-in-out infinite alternate; }
.stage.overload-2 .cc .face { border-color: var(--danger); }
@keyframes stage-shake-hard { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(3px, -2px); } 50% { transform: translate(-3px, 2px) rotate(-.3deg); } 75% { transform: translate(2px, 2px) rotate(.3deg); } }
@keyframes stage-shake-crazy { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(5px, -3px) rotate(.6deg); } 40% { transform: translate(-6px, 2px) rotate(-.8deg); } 60% { transform: translate(4px, 4px) rotate(.5deg); } 80% { transform: translate(-3px, -4px) rotate(-.4deg); } }
@keyframes pole-wobble { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
/* 警告の札（舞台の上） */
.overload-warn { position: absolute; top: 4px; left: 50%; z-index: 300; margin: 0; padding: 4px 14px; transform: translateX(-50%); border: 1px solid var(--danger); border-radius: 999px; background: rgb(40 8 16 / 88%); color: #ffd0d5; font-size: 13px; font-weight: 700; white-space: nowrap; pointer-events: none; animation: warn-blink .35s steps(2, jump-none) infinite; }
.overload-warn[hidden] { display: none; }
.stage.overload-2 .overload-warn { background: var(--danger-deep); color: #fff; animation-duration: .18s; }
@keyframes warn-blink { from { opacity: 1; } to { opacity: .55; } }
/* ブレーキボタン：ネジが飛んだら「はよ押せ」と震える */
.turbo-btn.is-panic { background: var(--danger-deep); border-color: var(--danger-deep); color: #fff; animation: brake-panic .12s linear infinite; }
@keyframes brake-panic { 0%, 100% { transform: translate(0, 0) scale(1.06); } 25% { transform: translate(-2px, 1px) scale(1.06); } 75% { transform: translate(2px, -1px) scale(1.06); } }
/* 壊れた：カードが飛び散って床に寝転ぶ。柱は傾き、天幕もずれる */
.stage.is-broken .cc { transition: transform .9s cubic-bezier(.2, .8, .35, 1.15) var(--fly-delay, 0ms); pointer-events: none; }
.stage.is-broken .cc .face { filter: grayscale(.35) brightness(.85); }
.stage.is-broken .pole { transform-origin: 50% 100%; transform: rotate(16deg); opacity: .8; transition: transform .6s cubic-bezier(.3, 1.6, .5, 1); }
.stage.is-broken .floor { background: radial-gradient(ellipse at center, rgb(120 100 140 / 25%) 0%, transparent 70%); }
.carousel.is-broken .canopy { transform: rotate(-2deg) translateY(4px); transition: transform .5s ease; }
/* 直す：カードがふだんの位置へ組み上がる */
.stage.is-repairing .cc { transition: transform 1s cubic-bezier(.5, 0, .2, 1); }
.stage.is-repairing .pole { transform: none; transition: transform .8s ease; }
.spin-result.is-crash { border-color: var(--danger); box-shadow: 0 0 28px rgb(255 77 94 / 40%); }
.spin-result.is-crash .spin-result-text { color: #ffc2c8; }
@media (prefers-reduced-motion: reduce) {
  .stage.is-broken .cc, .stage.is-repairing .cc { transition: none; }
}