/* ==========================================================================
   ハロウィン・ノート展 — 「月夜のメリーゴーランド美術館」
   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 / 22%) 0, rgb(244 163 64 / 8%) 9%, transparent 22%),
    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);
  -webkit-mask: radial-gradient(circle at 68% 34%, transparent 0 46%, #000 48%);
  mask: radial-gradient(circle at 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, 7vw, 4.4rem);
  line-height: 1.2;
  max-width: 100%;
  color: var(--text);
  text-wrap: balance;
  word-break: keep-all;        /* 「ハロウィン・」「ノート展」の境目だけで折る */
  overflow-wrap: normal;
  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; }
.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; }
.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; }
  .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; }
}