/* ============================================================================
   LIVE EDITION 2026 — くるみ割り人形 ／ 出演者募集
   ----------------------------------------------------------------------------
   意匠：漆黒のアリーナ × スポットライトの帯 × 深紅のベルベット × 黄金の箔押し
   狙い：かわいい絵本の世界から、「大人の女性がかっこいいと思えるライブ」へ。
   使い方：各ページの inline <style> の"あと"に読み込むこと（後勝ちで上書きする）。
   childish な演出（サンタ／踊る人形）を戻したい場合は §9 の1行を消せばよい。
   ========================================================================== */

/* ── §1 パレット ───────────────────────────────────────────────────────────
   3ページで変数名の体系が2つある（wine/cream 系と paper/ink 系）ので両方に流す。
   天気クラス（w-*）は「照明のキュー」に読みかえて、色だけを差し替える。      */
:root,
body,
body.w-snow, body.w-clear, body.w-rain,
body.w-day,  body.w-dusk,  body.w-shower,
body.summer{
  /* 舞台の地 */
  --stage:        #07070a;
  --stage-2:      #100c14;
  --stage-3:      #17111b;
  /* ベルベットの深紅 */
  --velvet:       #7d0d1e;
  --velvet-br:    #c8152f;
  /* 照明の帯（既定は琥珀。キューごとに §2 で差し替わる） */
  --beam:         #ffb43a;
  --beam-2:       #ff3ea5;
  --beam-3:       #a6f04b;
  /* 箔と紙 */
  --foil:         #e7c169;
  --foil-light:   #fff2cd;
  --foil-deep:    #8a6a22;
  --cream:        #f4efe7;
  --cream-soft:   rgba(244,239,231,.66);
  --hair:         rgba(244,239,231,.14);
  --hair-strong:  rgba(244,239,231,.30);

  /* ↓ 既存ページの変数を舞台の色へ写像する（HTML 側は無改修で追従する） */
  --wine-deep: var(--stage);
  --wine:      var(--stage-2);
  --crimson:      #8f1023;
  --crimson-bright: var(--velvet-br);
  --rose:      #f0aab7;
  --rose-soft: var(--cream-soft);
  --gold:       var(--foil);
  --gold-light: var(--foil-light);
  --gold-deep:  var(--foil-deep);

  /* paper/ink 系（夏ページ）— 明るい紙地の役割を、そのまま舞台の闇に置きかえる。
     --ink は「文字」、--paper は「面」の役だったので、両方を暗転側へ寄せる。
     --ink を面に使っていた marquee／footer は §7 で個別に黒へ固定してある。 */
  /* --paper と --ink は「暗い面の上の文字」にも使われているので、
     どちらも明るいままにしておく。明るい"面"として使っている数か所
     （.perform / .ensemble / .btn）だけ §7 で黒へ落とす。 */
  --paper:      #f4efe7;
  --paper-warm: #f4efe7;
  --foam:       var(--stage-2);
  --sky:        var(--stage-3);
  --aqua:       #2a2030;
  --sea:        #100c14;
  --sea-deep:   #0b0910;
  --sea-abyss:  var(--stage);
  --ink:        #f4efe7;
  --ink-soft:   var(--cream-soft);
  --coral:      var(--velvet-br);
  --coral-deep: #8f1023;
  --line:       var(--hair);
  --gold-line:  rgba(231,193,105,.34);
}

/* ── §2 照明キュー ────────────────────────────────────────────────────────
   もとの「ゆき／はれ／あめ」「まなつ／ゆうやけ／ゆうだち」の3循環を、
   AMBER → LIME → MAGENTA の3灯に読みかえる。地は常に漆黒のまま。        */
body.w-snow, body.w-day    { --beam:#ffb43a; --beam-2:#ff8a3a; }  /* AMBER   */
body.w-clear, body.w-dusk  { --beam:#a6f04b; --beam-2:#4de0b0; }  /* LIME    */
body.w-rain, body.w-shower { --beam:#ff3ea5; --beam-2:#9b6bff; }  /* MAGENTA */

/* 魔法モードは「客電が落ちて金の紙吹雪」— 既存の演出をそのまま活かす */
body.spell{
  --crimson:#1a1512; --crimson-bright:#2a221a;
  --wine:#0d0b09; --wine-deep:#000; --ink:#000;
  --paper:#f6e6b8; --foam:#0d0b09; --sky:#141009;
  --beam:#ffe08a; --beam-2:#ffc94f;
}

/* ── §3 地の設計 ──────────────────────────────────────────────────────── */
body{
  background:
    radial-gradient(120% 70% at 50% -8%, color-mix(in srgb, var(--beam) 16%, transparent), transparent 62%),
    radial-gradient(90% 60% at 8% 12%,  rgba(200,21,47,.14), transparent 60%),
    radial-gradient(90% 60% at 92% 78%, color-mix(in srgb, var(--beam-2) 12%, transparent), transparent 62%),
    linear-gradient(180deg, var(--stage) 0%, var(--stage-2) 46%, var(--stage) 100%)
    !important;
  color:var(--cream);
}
/* 客席のざわめき＝細かなノイズ。粒立ちを上げて写真と質感をそろえる */
.grain{opacity:.30 !important; mix-blend-mode:soft-light}
/* 全面ティントは照明の色で統一する */
.weather-tint{
  background:radial-gradient(60% 40% at 50% 0%,
    color-mix(in srgb, var(--beam) 42%, transparent), transparent 70%) !important;
  opacity:.22 !important; mix-blend-mode:screen !important;
}

/* ── §4 ステージ写真（ヒーロー背面） ─────────────────────────────────── */
.stage-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
/* 縦位置は「照明のトラスと光の帯」が来る上端寄り。人物は右のフレームで見せ、
   背面はあくまで会場の空気（ボケた光）として敷く。 */
.stage-bg img{
  width:100%;height:100%;object-fit:cover;object-position:50% 7%;
  filter:saturate(1.1) contrast(1.04) brightness(.62) blur(3px);
  transform:scale(1.08);
  animation:stageDrift 26s ease-in-out infinite alternate;
}
@keyframes stageDrift{to{transform:scale(1.14) translate3d(-1.6%,-1.2%,0)}}
/* 文字を置くための暗幕。左は濃く、右は写真を見せる */
.stage-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(5,5,8,.94) 0%, rgba(5,5,8,.80) 34%, rgba(5,5,8,.34) 66%, rgba(5,5,8,.62) 100%),
    linear-gradient(180deg, rgba(5,5,8,.72) 0%, transparent 26%, rgba(5,5,8,.55) 78%, var(--stage) 100%);
}
/* 天井から降りるスポットの帯 */
.beams{position:absolute;inset:-10% -20% 0;z-index:1;pointer-events:none;
  mix-blend-mode:screen;opacity:.55;filter:blur(2px);
  background:
    linear-gradient(178deg, color-mix(in srgb,var(--beam) 55%,transparent) 0%, transparent 46%) 6% 0/9% 100% no-repeat,
    linear-gradient(184deg, color-mix(in srgb,var(--beam) 40%,transparent) 0%, transparent 52%) 26% 0/7% 100% no-repeat,
    linear-gradient(176deg, color-mix(in srgb,var(--beam-2) 45%,transparent) 0%, transparent 44%) 52% 0/8% 100% no-repeat,
    linear-gradient(186deg, color-mix(in srgb,var(--beam) 50%,transparent) 0%, transparent 50%) 74% 0/6% 100% no-repeat,
    linear-gradient(174deg, color-mix(in srgb,var(--beam-2) 38%,transparent) 0%, transparent 48%) 92% 0/8% 100% no-repeat;
  animation:beamSway 9s ease-in-out infinite alternate;
  transform-origin:50% 0;
}
@keyframes beamSway{
  0%  {transform:skewX(-2.2deg) scaleY(1);   opacity:.42}
  50% {transform:skewX(0deg)    scaleY(1.03);opacity:.62}
  100%{transform:skewX(2.4deg)  scaleY(1);   opacity:.46}
}
header.hero{background:transparent !important;color:var(--cream)}
/* 写真より前に出す。position は上書きしない（.scroll-hint は absolute のまま） */
header.hero > .hero-copy,
header.hero > .hero-stage{position:relative;z-index:3}
header.hero > .scroll-hint{z-index:5}
.hero::before{opacity:.35}

/* ── §5 ヒーローの文字組み ───────────────────────────────────────────── */
.crown{
  color:var(--cream) !important;border-color:var(--hair-strong) !important;
  background:rgba(10,9,12,.42) !important;backdrop-filter:blur(6px);
  letter-spacing:.3em !important;
}
.hero .lead{
  color:var(--cream-soft) !important;text-shadow:0 2px 18px rgba(0,0,0,.7);
  max-width:min(34rem,100%) !important;line-height:2.05;
}
/* 舞い落ちる雪 → ステージの金の紙吹雪へ */
.flake{color:var(--foil) !important;opacity:.5;
  text-shadow:0 0 10px rgba(231,193,105,.75) !important;filter:blur(.2px)}
.hero h1 .en{filter:drop-shadow(0 2px 14px rgba(0,0,0,.75))}
/* 「出演者募集」＝チケットの半券のような箔押しのバー */
.hero .call{
  color:#120a0c !important;
  background:linear-gradient(100deg,var(--foil-deep),var(--foil) 34%,var(--foil-light) 50%,var(--foil) 66%,var(--foil-deep)) !important;
  background-size:220% auto !important;
  box-shadow:0 14px 44px rgba(0,0,0,.6), 0 0 0 1px rgba(255,242,205,.35) inset !important;
}


/* ロゴタイプは3ページとも「黒地に金の箔押し」で統一する
   （夏ページだけ面が臙脂のままだと、漆黒の地に沈んで読めない） */
.hero h1 .l>i{
  background:linear-gradient(114deg,
    #8a6a22 0%,#c49a3f 14%,#e7c169 27%,#ffe6a8 38%,
    #fff6d8 47%,#ffffff 50%,#fff6d8 53%,#ffe6a8 62%,
    #e7c169 73%,#c49a3f 86%,#8a6a22 100%) !important;
  background-size:340% auto !important;
  /* background ショートハンドは background-clip も初期化するので必ず添える */
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
  -webkit-text-stroke:1.3px rgba(28,12,4,.9) !important;
  text-shadow:
    2px 2px 0 #3a1e05,4px 4px 0 #211103,6px 6px 0 #0c0703,
    0 0 24px rgba(255,214,120,.6),
    0 0 64px rgba(255,170,60,.34),
    9px 14px 26px rgba(0,0,0,.62) !important;
}
/* 写真を主役にするため、ヒーロー右の飾り罫は一段うしろへ下げる */
.hero-stage .stage-orn{opacity:.5}
.hero-stage .glow-ring{opacity:.5}

/* ── §6 LIVE セクション（2枚目の写真） ───────────────────────────────── */
.live{
  position:relative;padding:0 !important;min-height:0;
  display:grid;place-items:center;overflow:hidden;background:var(--stage);
}
/* 背面：同じ写真を強くぼかして「会場の熱」だけを残す */
.live .live-bg{position:absolute;inset:0;overflow:hidden}
.live .live-bg img{
  width:100%;height:100%;object-fit:cover;object-position:50% 70%;
  filter:saturate(.9) contrast(1.05) brightness(.42) blur(26px);
  transform:scale(1.16);animation:stageDrift 34s ease-in-out infinite alternate;
}
.live .live-bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(80% 60% at 50% 40%, transparent 0%, rgba(5,5,8,.6) 70%, rgba(5,5,8,.94) 100%),
    linear-gradient(180deg, var(--stage) 0%, transparent 16%, transparent 78%, var(--stage) 100%);
}
/* 前面：縦位置のパネルで人物を全身のまま見せる */
.live .live-inner{
  position:relative;z-index:2;width:min(78rem,92vw);
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  align-items:center;gap:clamp(2rem,5vw,4.5rem);
  padding:clamp(4.5rem,9vw,8rem) 0;
}
.live .live-shot{position:relative;margin:0}
.live .live-shot img{
  display:block;width:100%;aspect-ratio:9/16;object-fit:cover;object-position:50% 96%;
  filter:saturate(1.06) contrast(1.05);
  box-shadow:0 40px 90px rgba(0,0,0,.7), 0 0 0 1px var(--hair);
}
.live .live-shot::before{
  content:"";position:absolute;inset:-14px;pointer-events:none;
  border:1px solid color-mix(in srgb,var(--beam) 34%,transparent);
}
.live .live-shot figcaption{
  margin-top:1rem;font-family:"Cormorant Garamond",serif;
  font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;color:var(--cream-soft);
}
.live .live-shot figcaption b{
  display:block;font-family:"Shippori Mincho",serif;font-weight:800;
  font-size:.95rem;letter-spacing:.14em;text-transform:none;color:var(--foil);margin-bottom:.2rem;
}
.live .live-copy{position:relative;z-index:2}
.live .live-eyebrow{
  display:inline-block;font-family:"Cormorant Garamond",serif;font-weight:600;
  font-size:clamp(.6rem,1.4vw,.78rem);letter-spacing:.5em;text-transform:uppercase;
  color:var(--beam);padding:.5rem 1.1rem;border:1px solid color-mix(in srgb,var(--beam) 45%,transparent);
  background:rgba(6,6,9,.5);backdrop-filter:blur(6px);
}
.live h2{
  margin-top:1.6rem;font-family:"Shippori Mincho",serif;font-weight:800;
  font-size:clamp(1.9rem,6.2vw,4.4rem);line-height:1.28;letter-spacing:.04em;color:var(--cream);
  text-shadow:0 6px 40px rgba(0,0,0,.85), 0 0 90px color-mix(in srgb,var(--beam) 28%,transparent);
}
.live h2 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--velvet-br),var(--foil) 46%,var(--beam) 78%,var(--velvet-br));
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:shimmer 7s linear infinite;
}
.live p{
  margin:1.7rem 0 0;max-width:40rem;color:var(--cream-soft);
  font-size:clamp(.95rem,2.1vw,1.12rem);line-height:2.1;
  text-shadow:0 2px 16px rgba(0,0,0,.8);
}
.live .live-meta{
  margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:1.6rem 2.6rem;
  font-family:"Cormorant Garamond",serif;letter-spacing:.28em;text-transform:uppercase;
  font-size:.7rem;color:var(--cream-soft);
}
.live .live-meta span{position:relative;padding-left:1.2rem}
.live .live-meta span::before{
  content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;
  background:var(--beam);box-shadow:0 0 12px var(--beam);
}

/* ── §7 セクション全体を舞台の質感に ─────────────────────────────────── */
section{background-color:transparent}
/* 夏ページで「明るい紙の面」だった3か所を、舞台の闇に落とす */
.perform,.ensemble,.gallery-sec,.mouse-sec{background:transparent !important}
/* あらすじの面。夏モードでは var(--paper) で白くなり、白い本文が
   読めなくなっていた（--paper は「暗い面の上の文字」にも使う色なので
   明るいまま残してある）。面だけを舞台の闇に固定する。 */
.story{
  background:
    radial-gradient(ellipse at 12% 0%, rgba(200,21,47,.18), transparent 56%),
    linear-gradient(180deg, var(--stage) 0%, var(--stage-2) 62%, var(--stage) 100%) !important;
}
.story .story-body,.story .story-body p{color:var(--cream-soft) !important}
.story h2,.story h2.title{color:var(--cream)}
/* 募集の面もベルベットの緞帳に（明るい朱赤のままだと写真と喧嘩する） */
.roles{
  background:
    radial-gradient(80% 60% at 50% 0%, color-mix(in srgb,var(--beam) 14%,transparent), transparent 60%),
    linear-gradient(180deg,#4c0812 0%,#2b0510 58%,var(--stage) 100%) !important;
  color:var(--cream) !important;
}
/* 稽古場のスナップは、舞台の暗さに馴染むよう一段落として金の罫で締める */
.ens-photos img,.ens-photos video,.gallery-sec img{
  filter:brightness(.78) contrast(1.1) saturate(.94);
}
.ens-photos>*{box-shadow:0 24px 60px rgba(0,0,0,.5), 0 0 0 1px var(--hair)}
.photo-card .cap .t{color:var(--foil) !important;opacity:1 !important}
.photo-card .cap .d{color:var(--cream) !important}
/* 絵本調のイラスト（ねずみの王・人形カード）は、パステルのままだと
   子ども向けに見えるので、ブロンズの影絵に寄せて舞台の小道具に見せる */
.mouse-art svg,.char-card svg{
  filter:grayscale(.7) sepia(.55) saturate(1.7) hue-rotate(-16deg) brightness(.82)
         drop-shadow(0 18px 34px rgba(0,0,0,.6));
}
.mouse-glow{background:radial-gradient(circle,color-mix(in srgb,var(--beam) 26%,transparent),transparent 66%) !important}
.btn{background:linear-gradient(100deg,var(--foil-deep),var(--foil) 40%,var(--foil-light) 52%,var(--foil) 64%,var(--foil-deep)) !important;
  background-size:220% auto;border-color:transparent !important;color:#160a0c !important}
/* 出演者一覧は、細い罫で仕切った黒のセルに */
.cast-list{background:var(--hair) !important;border-color:var(--hair) !important}
.cast-item{background:rgba(8,7,11,.78) !important;box-shadow:none}
.cast-item .role{color:var(--foil) !important}
.info-card,.cast-item,.char-card,.role-row,.tl li,.step,.foot-cols .col{
  border-color:var(--hair) !important;
}
.info-card,.char-card,.step{
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015)) !important;
  backdrop-filter:blur(3px);
  box-shadow:0 22px 60px rgba(0,0,0,.45);
}
h2.title,section h2{color:var(--cream)}
/* 見出しの箔押し */
.gold-text{
  background:linear-gradient(100deg,var(--foil-deep),var(--foil) 30%,var(--foil-light) 50%,var(--foil) 70%,var(--foil-deep)) !important;
  background-size:240% auto !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
}
/* 応募ブロックはベルベットの緞帳に */
.apply{
  background:
    radial-gradient(80% 60% at 50% 0%, color-mix(in srgb,var(--beam) 18%,transparent), transparent 62%),
    linear-gradient(180deg,#5e0a17 0%,var(--velvet) 42%,#3d0611 100%) !important;
}
.apply .btn{
  background:linear-gradient(100deg,var(--foil-deep),var(--foil) 40%,var(--foil-light) 52%,var(--foil) 64%,var(--foil-deep)) !important;
  background-size:220% auto;border-color:transparent !important;color:#160a0c !important;
  box-shadow:0 16px 44px rgba(0,0,0,.5);
}
.apply .btn:hover{filter:brightness(1.08);transform:translateY(-5px)}
.marquee{background:#050508 !important;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.marquee span{color:var(--cream-soft)}
footer{background:#050508 !important;border-top:1px solid var(--hair)}

/* ── §8 照明キューのバッジ（旧・天気バッジ） ─────────────────────────── */
.weather-badge{
  font-family:"Cormorant Garamond",serif !important;
  letter-spacing:.34em !important;text-transform:uppercase;
  background:rgba(6,6,9,.62) !important;
  border:1px solid var(--hair-strong) !important;border-radius:0 !important;
  color:var(--cream) !important;box-shadow:none !important;
}
.weather-badge .ic{
  font-size:0 !important;width:7px;height:7px;border-radius:50%;
  background:var(--beam);box-shadow:0 0 10px var(--beam),0 0 22px var(--beam);
}

/* ── §9 子ども向けの演出を落とす（この行を消せば元に戻る） ───────────── */
.santa,#dancers,.umbrella,.sun{display:none !important}

/* ── §10 レスポンシブ ─────────────────────────────────────────────────── */
@media(max-width:860px){
  .stage-bg img{object-position:52% 18%}
  .stage-bg::after{
    background:
      linear-gradient(180deg, rgba(5,5,8,.62) 0%, rgba(5,5,8,.42) 30%, rgba(5,5,8,.88) 74%, var(--stage) 100%);
  }
  .live{min-height:0}
  .live .live-inner{grid-template-columns:1fr;gap:2.4rem;text-align:center;
    padding:clamp(3.5rem,11vw,6rem) 0}
  .live .live-shot{width:min(20rem,74vw);margin:0 auto}
  .live .live-meta{justify-content:center}
  .live p{margin-left:auto;margin-right:auto}
}
@media(prefers-reduced-motion:reduce){
  .stage-bg img,.live .live-photo img,.beams{animation:none !important}
}

/* ── §11 MAGIC CATCHER（UFOキャッチャー） ───────────────────────────────
   走ってきたねずみを指でつかまえると、この筐体がせり上がってくる。
   ロジックとマークアップは ufo-catcher.js 側。ここは見た目だけ。        */
.crane{
  position:fixed;inset:0;z-index:90;display:none;place-items:center;
  padding:12px;touch-action:none;
  background:radial-gradient(70% 60% at 50% 30%,rgba(24,10,30,.86),rgba(4,4,7,.96));
  backdrop-filter:blur(6px);
}
.crane.on{display:grid}
.cr-cab{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:.7rem;
  padding:1rem 1rem 1.2rem;max-width:100%;
  background:linear-gradient(180deg,#1a1220,#0a0810);
  border:1px solid var(--hair-strong);
  box-shadow:0 40px 100px rgba(0,0,0,.8), 0 0 0 1px rgba(231,193,105,.18) inset;
}
.cr-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.cr-title{
  font-family:"Cormorant Garamond",serif;font-weight:600;
  font-size:.82rem;letter-spacing:.36em;text-transform:uppercase;color:var(--foil);
  text-shadow:0 0 18px rgba(231,193,105,.5);
}
.cr-hud{display:flex;gap:1.2rem;font-family:"Cormorant Garamond",serif;
  font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--cream-soft)}
.cr-hud .n{margin-left:.5em;font-size:1.5em;color:var(--foil-light);letter-spacing:0}
.cr-mute{cursor:pointer;width:2rem;height:2rem;font-size:.9rem;line-height:1;
  border:1px solid var(--hair-strong);background:rgba(255,255,255,.05);color:var(--cream)}
.cr-mute.off{opacity:.45}
.cr-mute:hover{background:rgba(255,255,255,.12)}
.cr-glass{position:relative;line-height:0;
  box-shadow:0 0 0 1px var(--hair), 0 0 60px rgba(255,62,165,.18) inset}
.cr-glass canvas{display:block;max-width:100%}
/* ガラスの映り込み */
.cr-glass::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,.14) 0%,transparent 26%,transparent 72%,rgba(255,255,255,.07) 100%);
}
.cr-msg{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  pointer-events:none;opacity:0;transition:.35s;line-height:1.7}
.cr-msg.on{opacity:1}
.cr-msg b{display:block;font-family:"Shippori Mincho",serif;font-weight:800;
  font-size:clamp(1.4rem,5vw,2.2rem);letter-spacing:.1em;color:var(--foil-light);
  text-shadow:0 4px 30px rgba(0,0,0,.9),0 0 40px rgba(255,180,58,.5)}
.cr-msg span{display:block;margin-top:.5rem;font-family:"Shippori Mincho",serif;
  font-size:.82rem;letter-spacing:.08em;color:var(--cream);text-shadow:0 2px 14px rgba(0,0,0,.9)}
.cr-shelf{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;min-height:1.4rem}
.cr-chip{font-family:"Shippori Mincho",serif;font-size:.66rem;letter-spacing:.08em;
  color:#160a0c;padding:.2rem .6rem;
  background:linear-gradient(100deg,var(--foil-deep),var(--foil) 45%,var(--foil-light) 60%,var(--foil-deep))}
.cr-tip{font-family:"Shippori Mincho",serif;font-size:.7rem;letter-spacing:.06em;
  color:var(--cream-soft);text-align:center}
.cr-pad{display:flex;align-items:center;gap:.6rem;width:100%;justify-content:center}
.cr-key,.cr-drop{
  font-family:"Shippori Mincho",serif;cursor:pointer;user-select:none;
  border:1px solid var(--hair-strong);background:rgba(255,255,255,.05);color:var(--cream);
  transition:.2s;
}
.cr-key{width:3.4rem;height:3rem;font-size:1.1rem}
.cr-drop{
  flex:1;max-width:14rem;height:3rem;font-weight:800;letter-spacing:.3em;
  color:#160a0c;border-color:transparent;
  background:linear-gradient(100deg,var(--foil-deep),var(--foil) 40%,var(--foil-light) 52%,var(--foil) 64%,var(--foil-deep));
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.cr-key:active{background:rgba(255,255,255,.14);transform:translateY(1px)}
.cr-drop:active{filter:brightness(1.12);transform:translateY(1px)}
.cr-quit{
  position:absolute;top:-14px;right:-14px;width:2.4rem;height:2.4rem;cursor:pointer;
  border:1px solid var(--hair-strong);border-radius:50%;
  background:rgba(8,7,11,.92);color:var(--cream);font-size:.9rem;
}
.cr-quit:hover{background:var(--velvet);border-color:var(--foil)}
@media(max-width:560px){
  .cr-head{flex-direction:column;gap:.3rem}
  .cr-key{width:3rem}
  .cr-tip{font-size:.62rem}
}

/* ── §12 緊急修正 ──────────────────────────────────────────────────────
   ① タイトル消失
      index.html の文字は class="l gold-text" を併せ持つ。夏モードに入ると
      .gold-text 側の `animation: shimmer_sm`（fill-mode なし）が
      `.hero h1 .l` の `letterIn … forwards` を丸ごと置きかえてしまい、
      文字が初期値 opacity:0 / translateY(60px) へ戻って消えていた。
      → 登場アニメと箔の照りを1本のリストに束ね、!important で固定する。
   ② 稲妻の白飛び
      全画面フラッシュが純白のままで、漆黒の地＋白文字を読めなくしていた。
      → 舞台のストロボらしい琥珀寄りに変え、最大でも地が飛ばない濃度に抑える。
   ────────────────────────────────────────────────────────────────────── */
.hero h1 .l{
  animation:letterIn .9s cubic-bezier(.2,1.3,.4,1) forwards,
            liveSheen 6s linear infinite !important;
}
@keyframes liveSheen{to{background-position:240% center}}
/* 夏ページ（.l>i 構造）は内側が照りを持つので、外側は登場だけでよい */
.hero h1 .l:has(>i){animation:letterIn .95s cubic-bezier(.2,1.35,.35,1) forwards !important}

.lightning{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--beam) 70%,#fff) 0%,
    color-mix(in srgb,var(--beam) 30%,transparent) 46%,
    transparent 78%) !important;
  mix-blend-mode:screen;
}
/* 明滅の山を下げる（元は .9 → 白飛びしていた） */
.lightning.strike{animation:liveStrobe .7s ease-out !important}
@keyframes liveStrobe{
  0%{opacity:0}6%{opacity:.34}12%{opacity:.06}18%{opacity:.30}
  30%{opacity:.03}40%{opacity:.20}100%{opacity:0}
}
.bolt{filter:drop-shadow(0 0 16px color-mix(in srgb,var(--beam) 80%,#fff)) !important;
  max-width:150px;opacity:0}
.bolt.strike{animation:liveBolt .7s ease-out !important}
@keyframes liveBolt{0%{opacity:0}8%{opacity:.85}22%{opacity:.25}34%{opacity:.8}55%{opacity:0}100%{opacity:0}}
/* 煙は白い塊にせず、照明を透かすもやに */
.smoke,.puff{mix-blend-mode:screen;opacity:.42 !important;filter:blur(10px)}

/* ── §13 PINBALL（pinball.js の見た目）─────────────────────────────────
   もとは index.html に直書きだった台のCSS。3ページ共通へ移し、
   配色だけ LIVE EDITION の黒＋箔に寄せてある。                       */
  /* ============================================================
     ★ ピンボール台（踊り子をつかまえると、サイトが台になる）
     ============================================================ */
  .pin{position:fixed;inset:0;z-index:80;display:none;touch-action:none;
    background:radial-gradient(ellipse at 50% 20%,rgba(90,12,26,.55),rgba(8,3,6,.94) 70%),rgba(6,2,4,.96);
    backdrop-filter:blur(3px);
    align-items:center;justify-content:center;
    -webkit-tap-highlight-color:transparent;user-select:none}
  .pin.on{display:flex}
  .pin canvas{display:block;border-radius:14px;
    box-shadow:0 0 0 2px rgba(217,178,90,.75),0 0 0 9px rgba(44,4,11,.9),
      0 34px 80px rgba(0,0,0,.85),0 0 70px rgba(217,178,90,.28)}
  .pin-hud{position:absolute;top:max(18px,env(safe-area-inset-top));left:0;right:0;
    display:flex;justify-content:center;gap:clamp(.8rem,4vw,2.4rem);
    font-family:"Cinzel Decorative",serif;color:var(--gold-light);
    font-size:clamp(.62rem,2.4vw,.86rem);letter-spacing:.14em;pointer-events:none;
    text-shadow:0 2px 10px rgba(0,0,0,.9)}
  .pin-hud .n{font-family:"Cormorant Garamond",serif;font-size:1.7em;color:#fff6d8;
    margin-left:.45em;vertical-align:-.06em}
  .pin-btn{position:absolute;border:1px solid rgba(217,178,90,.6);border-radius:30px;
    background:rgba(44,4,11,.75);color:var(--gold-light);
    font-family:"Shippori Mincho",serif;font-weight:700;letter-spacing:.12em;
    cursor:pointer;backdrop-filter:blur(4px);transition:.25s;
    -webkit-tap-highlight-color:transparent;touch-action:none}
  .pin-btn:hover{background:rgba(139,14,34,.8);border-color:var(--gold-light)}
  .pin-quit{top:max(14px,env(safe-area-inset-top));right:16px;
    width:40px;height:40px;font-size:1rem;padding:0;line-height:1}
  .pin-mute{top:max(14px,env(safe-area-inset-top));right:64px;
    width:40px;height:40px;font-size:1rem;padding:0;line-height:1}
  .pin-mute.off{opacity:.5}
  .pin-push{bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
    padding:.85rem 2rem;font-size:clamp(.85rem,3.4vw,1.05rem);
    background:linear-gradient(100deg,var(--gold-deep),var(--gold-light),var(--gold-deep));
    background-size:200% auto;color:#25060c;border-color:transparent;
    box-shadow:0 10px 30px rgba(217,178,90,.45);animation:shimmerbg 3s linear infinite}
  .pin-push.charging{transform:translateX(-50%) scale(.94);box-shadow:0 4px 14px rgba(217,178,90,.6)}
  .pin-push[hidden]{display:none}
  .pin-tip{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:0;right:0;
    text-align:center;color:#e7c9b8;font-size:clamp(.6rem,2.6vw,.8rem);letter-spacing:.1em;
    pointer-events:none;text-shadow:0 2px 8px rgba(0,0,0,.9)}
  .pin-msg{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
    text-align:center;padding:1.5rem;opacity:0;transition:opacity .4s}
  .pin-msg.on{opacity:1}
  .pin-msg b{display:block;font-family:"Cinzel Decorative",serif;font-weight:900;
    font-size:clamp(2rem,10vw,5rem);line-height:1.05;
    background:linear-gradient(178deg,#fffdf2,#ffe9a8 32%,#e8bf62 56%,#9c7524 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    -webkit-text-stroke:2px #2a0a06;paint-order:stroke fill;
    filter:drop-shadow(0 4px 0 rgba(42,10,6,.85)) drop-shadow(0 14px 30px rgba(0,0,0,.8))}
  .pin-msg span{display:block;margin-top:.9rem;font-family:"Shippori Mincho",serif;
    font-weight:700;letter-spacing:.2em;color:#ffeec2;font-size:clamp(.8rem,3.2vw,1.15rem);
    text-shadow:0 2px 10px rgba(0,0,0,.9)}
  @media(max-width:560px){.pin-hud{gap:.9rem}}
/* LIVE EDITION 寄せ */
.pin{background:radial-gradient(70% 60% at 50% 20%,rgba(30,10,26,.86),rgba(4,4,7,.96) 70%) !important}
.pin canvas{box-shadow:0 40px 100px rgba(0,0,0,.8),0 0 0 1px var(--hair) !important}
.pin-btn{border-color:var(--hair-strong) !important;border-radius:0 !important;
  background:rgba(8,7,11,.9) !important;color:var(--cream) !important}
.pin-btn:hover{background:var(--velvet) !important;border-color:var(--foil) !important}
.pin-push{
  color:#160a0c !important;border-color:transparent !important;
  background:linear-gradient(100deg,var(--foil-deep),var(--foil) 40%,var(--foil-light) 52%,var(--foil) 64%,var(--foil-deep)) !important}
.pin-hud .n{color:var(--foil-light) !important}

/* ── §14 ごほうび：赤毛のアンの後ろ姿 ────────────────────────────────── */
.anne-veil{
  position:fixed;inset:0;z-index:95;display:grid;place-items:center;
  opacity:0;pointer-events:none;transition:opacity .6s ease;
  background:radial-gradient(60% 60% at 50% 40%,rgba(28,12,6,.82),rgba(3,3,5,.96));
  backdrop-filter:blur(4px);
}
.anne-veil.on{opacity:1;pointer-events:auto;cursor:pointer}
.anne-stage{display:grid;justify-items:center;gap:1.2rem;text-align:center;padding:1.4rem}
.anne-fig{width:min(46vh,300px);height:auto;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.75));
  transform:translateY(40px) scale(.94);opacity:0}
.anne-veil.on .anne-fig{animation:anneRise 1.1s cubic-bezier(.2,.9,.25,1) forwards}
@keyframes anneRise{to{transform:none;opacity:1}}
.anne-copy{display:grid;gap:.5rem;opacity:0}
.anne-veil.on .anne-copy{animation:anneRise .9s .55s cubic-bezier(.2,.9,.25,1) forwards}
.anne-eyebrow{font-family:"Cormorant Garamond",serif;font-size:.66rem;
  letter-spacing:.5em;text-transform:uppercase;color:var(--beam)}
.anne-copy b{font-family:"Shippori Mincho",serif;font-weight:800;
  font-size:clamp(1.3rem,4.4vw,2.1rem);letter-spacing:.1em;color:var(--foil-light);
  text-shadow:0 0 40px rgba(255,180,58,.45)}
.anne-sub{font-family:"Cormorant Garamond",serif;font-size:.74rem;
  letter-spacing:.26em;color:var(--cream-soft)}

/* ── §15 アーケードの選択画面 ───────────────────────────────────────── */
.arcade{
  position:fixed;inset:0;z-index:88;display:none;place-items:center;padding:1.2rem;
  background:radial-gradient(70% 60% at 50% 30%,rgba(24,10,30,.88),rgba(4,4,7,.97));
  backdrop-filter:blur(6px);
}
.arcade.on{display:grid}
.ar-box{width:min(40rem,94vw);text-align:center;
  border:1px solid var(--hair-strong);padding:clamp(1.6rem,5vw,2.8rem);
  background:linear-gradient(180deg,#1a1220,#0a0810);
  box-shadow:0 40px 100px rgba(0,0,0,.8)}
.ar-eyebrow{font-family:"Cormorant Garamond",serif;font-size:.66rem;
  letter-spacing:.5em;text-transform:uppercase;color:var(--beam)}
.ar-box h3{margin-top:.7rem;font-family:"Shippori Mincho",serif;font-weight:800;
  font-size:clamp(1.2rem,4.2vw,1.8rem);letter-spacing:.08em;color:var(--cream)}
.ar-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.8rem}
@media(max-width:560px){.ar-grid{grid-template-columns:1fr}}
.ar-card{
  cursor:pointer;padding:1.5rem 1rem;text-align:center;transition:.25s;
  border:1px solid var(--hair);background:rgba(255,255,255,.04);color:var(--cream);
  font-family:"Shippori Mincho",serif;
}
.ar-card:hover{background:rgba(255,255,255,.1);border-color:var(--foil);transform:translateY(-4px)}
.ar-card .ic{display:block;font-size:2rem;line-height:1;margin-bottom:.7rem}
.ar-card b{display:block;font-weight:800;font-size:1.05rem;letter-spacing:.08em}
.ar-card span{display:block;margin-top:.4rem;font-size:.72rem;color:var(--cream-soft);line-height:1.8}
.ar-close{margin-top:1.6rem;cursor:pointer;font-family:"Cormorant Garamond",serif;
  font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;
  background:none;border:0;color:var(--cream-soft)}
.ar-close:hover{color:var(--cream)}



/* ── §16 ヒーローの背面映像と、LIVE の写真送り（index ページだけ）──────
     ① ヒーロー背面 .stage-video … 会場の空気。ぼかして敷くだけの地。
     ② ヒーロー右の額縁 .char-frame … 写真。最初からずっと出したまま。
     ③ LIVE の縦パネル .shot-slides … 写真2枚 → 実写ループ1本の順ぐり。
        切り替えの合図に舞台の煙がひと吹きする。送りは live-stage.js。
   クラス名が .smoke でなく .fog なのは、ページに同名の全画面スモークが
   すでにいるため（§12 の .smoke,.puff と衝突する）。
   夏・冬ページはこの節を一切使わない。                                    */

/* ── ① ヒーロー背面 ─────────────────────────────────────────────────── */
/* 縦位置：上端寄りだとクララの「頭だけ」が浮いて見えて据わりが悪いので、
   胴から舞台の床までが入る高さまで映像を上へ送る。明るいコマでもタイトルが
   沈まないよう、写真より一段暗く落としてある。                            */
.stage-bg .stage-video{
  display:block;background:var(--stage);
  width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  filter:saturate(1.14) contrast(1.05) brightness(.46) blur(3px);
  transform:scale(1.1) translateZ(0);
  animation:stageDrift 26s ease-in-out infinite alternate;
}
@media(max-width:820px){
  .stage-bg .stage-video{object-position:52% 54%;filter:saturate(1.1) contrast(1.04) brightness(.42) blur(4px)}
}

/* ── ② ヒーロー右の額縁（写真は出しっぱなし）──────────────────────── */
.char-frame{isolation:isolate}
/* 枠のふちを光がゆっくり回る（スポットが当たりつづけている感じ） */
.char-frame::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;
  box-shadow:
    0 0 0 1px color-mix(in srgb,var(--foil) 55%,transparent) inset,
    0 0 34px color-mix(in srgb,var(--beam) 40%,transparent) inset;
  animation:frameBreath 5.4s ease-in-out infinite;
}
@keyframes frameBreath{0%,100%{opacity:.35} 50%{opacity:.9}}
/* 客席のライトが写真をなめる。sheen（::after）より遅く、逆向きに流す。 */
.frame-glare{
  position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(200deg,
    transparent 42%,
    color-mix(in srgb,var(--beam-2) 60%,transparent) 50%,
    transparent 58%);
  background-size:300% 300%;
  animation:glareSweep 11s ease-in-out infinite;
  opacity:.55;
}
@keyframes glareSweep{
  0%{background-position:120% 0%}
  55%,100%{background-position:-20% 100%}
}

/* ── ③ LIVE の縦パネル：写真2枚 → 実写ループ1本を順ぐりに ──────────── */
.live .live-shot{overflow:visible}
.live .live-shot .shot-slides{
  position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;
  background:var(--stage);
  box-shadow:0 40px 90px rgba(0,0,0,.7), 0 0 0 1px var(--hair);
}
.live .live-shot .shot-slide{
  position:absolute;inset:0;aspect-ratio:auto;
  width:100%;height:100%;object-fit:cover;
  filter:saturate(1.06) contrast(1.05);
  opacity:0;transform:scale(1.02);
  transition:opacity 1.5s ease, transform 7s linear;
  box-shadow:none;
}
/* 見えているあいだ、ごくゆっくり寄っていく（止まった絵に見えないように） */
.live .live-shot .shot-slide.is-on{opacity:1;transform:scale(1.075)}
/* 3面それぞれ寄りが違うので、見せたい高さを個別に決める */
.live .live-shot .shot-slide[src*="idol-stage"]{object-position:50% 92%}
.live .live-shot .shot-slide[src*="idol-mic"]  {object-position:50% 42%}
.live .live-shot .shot-slide-video{
  object-position:50% 62%;
  background:var(--stage);
}
/* 実写の面が出ているあいだだけ、パネルの外に会場の色がにじむ。
   :has() が使えないブラウザでは、にじみが出ないだけで見た目は成立する。 */
.live .live-shot .shot-slides{transition:box-shadow 1.5s ease}
.live .live-shot:has(.shot-slide-video.is-on) .shot-slides{
  box-shadow:0 40px 90px rgba(0,0,0,.7), 0 0 0 1px var(--hair),
             0 0 90px color-mix(in srgb,var(--beam) 26%,transparent);
}

/* 箔押しの光が斜めに一度だけ走る、を繰り返す */
.shot-sheen{
  position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(118deg,
    transparent 38%,
    rgba(255,244,214,.42) 47%,
    rgba(255,255,255,.6) 50%,
    rgba(255,244,214,.42) 53%,
    transparent 62%);
  background-size:260% 260%;
  animation:shotSheen 7.5s cubic-bezier(.5,0,.2,1) infinite;
}
@keyframes shotSheen{
  0%{background-position:140% -40%;opacity:0}
  12%{opacity:.9}
  46%,100%{background-position:-40% 140%;opacity:0}
}
/* 生放送の赤ランプ */
.shot-onair{
  position:absolute;top:-14px;right:-14px;z-index:5;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.42rem .8rem;
  font-family:"Cormorant Garamond",serif;font-weight:600;
  font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--cream);background:rgba(8,6,10,.72);backdrop-filter:blur(6px);
  border:1px solid color-mix(in srgb,#e2394f 55%,transparent);
}
.shot-onair::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:#ff3b53;box-shadow:0 0 10px #ff3b53;
  animation:onAirBlink 2.4s ease-in-out infinite;
}
@keyframes onAirBlink{0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.25;transform:scale(.8)}}

/* ── 写真が入れかわる合図の煙 ───────────────────────────────────────────
   3つのふくらみ＋うすい幕。ふくらみが外へ広がって消えるあいだに、下で
   写真が入れかわっている。既定では出ていない（.fog-puff が付いたときだけ）。*/
.fog{
  position:absolute;inset:0;bottom:auto;aspect-ratio:9/16;
  z-index:4;pointer-events:none;overflow:hidden;opacity:0;
}
.fog::before{
  content:"";position:absolute;inset:-12%;
  background:
    radial-gradient(78% 62% at 50% 68%, #fff, rgba(255,238,248,.94) 46%, rgba(243,205,229,.62) 72%, rgba(243,205,229,0) 88%),
    linear-gradient(180deg, rgba(255,248,252,.72), rgba(255,255,255,.92));
  filter:blur(14px);opacity:0;
}
.fog i{
  position:absolute;left:50%;top:64%;width:150%;aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%) scale(.26);
  background:radial-gradient(circle,
    rgba(255,255,255,.95) 0%, rgba(255,236,247,.78) 30%,
    rgba(255,192,226,.4) 55%, rgba(255,192,226,0) 72%);
  filter:blur(12px);opacity:0;
}
.fog i:nth-child(2){left:24%;top:76%;width:125%}
.fog i:nth-child(3){left:78%;top:70%;width:135%}

/* ひと吹き（2.4秒）。live-stage.js がクラスを付け直すたびに頭から流れる。 */
.fog.fog-puff        {animation:fogStage 2.4s ease-out}
.fog.fog-puff::before{animation:fogVeil  2.4s cubic-bezier(.42,.02,.28,1)}
.fog.fog-puff i      {animation:fogPuff  2.4s cubic-bezier(.2,.7,.3,1)}
.fog.fog-puff i:nth-child(2){animation-delay:.14s}
.fog.fog-puff i:nth-child(3){animation-delay:.28s}
@keyframes fogStage{0%,72%{opacity:1} 100%{opacity:0}}
@keyframes fogVeil{
  0%  {transform:scale(.96) translateY(4%);opacity:0}
  18% {transform:scale(1)   translateY(0); opacity:.92}
  46% {opacity:.8}
  100%{transform:scale(1.34) translateY(-8%);opacity:0}
}
@keyframes fogPuff{
  0%  {transform:translate(-50%,-50%) scale(.26);opacity:0}
  10% {opacity:1}
  55% {opacity:.85}
  100%{transform:translate(-50%,-50%) scale(2.4);opacity:0}
}

@media(max-width:820px){
  .shot-onair{top:-10px;right:-8px;font-size:.55rem;padding:.34rem .62rem}
}

/* ── 動きを減らす設定のとき ─────────────────────────────────────────── */
/* 煙は焚かない。写真の入れかわりは、ゆっくりした溶暗だけにする。 */
@media (prefers-reduced-motion: reduce){
  .fog{display:none}
  .live .live-shot .shot-slide{transition:opacity 2s ease;transform:none}
  .live .live-shot .shot-slide.is-on{transform:none}
  .stage-bg .stage-video{animation:none;transform:scale(1.06)}
  .char-frame::before,.frame-glare,.shot-sheen,.shot-onair::before{animation:none}
  .frame-glare,.shot-sheen{opacity:0}
}