/* ═════════════════════════════════════════════════════════
   DARK THEATER — 暗転した劇場・緞帳の真紅・金箔・スポットライト
   stage.css の上に重ねて、サイト全体を「開演直前の劇場」にする
   ═════════════════════════════════════════════════════════ */

:root{
  --ink:#fff3dc;
  --text:#efe3cf;
  --muted:rgba(239,227,207,.76);
  --faint:rgba(239,227,207,.5);
  --paper:rgba(24,12,18,.72);
  --line:rgba(231,193,105,.22);
  --gline:rgba(231,193,105,.42);
  --gold:#d9b25e;
  --gold-lit:#f6dd98;
  --gold-deep:#a7802f;
  --amber:#ffb43a;
  --crimson-hi:#e2213f;
  --night:#07070a;
  --glass:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  --foil:linear-gradient(100deg,#8a6a22 0%,#e7c169 22%,#fff2cd 46%,#e7c169 62%,#b8862f 78%,#8a6a22 100%);
}

body{
  background:
    radial-gradient(120% 70% at 50% -8%,rgba(255,180,58,.16),transparent 62%),
    radial-gradient(90% 60% at 8% 12%,rgba(200,21,47,.16),transparent 60%),
    radial-gradient(90% 60% at 92% 78%,rgba(255,138,58,.1),transparent 62%),
    linear-gradient(180deg,#07070a 0%,#100c14 46%,#07070a 100%);
  background-attachment:fixed;color:var(--text)}
/* 周辺減光 */
body::before{background:radial-gradient(120% 90% at 50% 40%,transparent 50%,rgba(0,0,0,.6) 100%)}
/* フィルムの粒子 */
html::after{content:"";position:fixed;inset:-50%;z-index:44;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(5) infinite}
@keyframes grain{20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}}
/* 画面の金の額縁 */
body::after{border-color:rgba(231,193,105,.45);box-shadow:inset 0 0 0 3px rgba(7,7,10,.6),inset 0 0 0 4px rgba(231,193,105,.18)}

::selection{background:var(--crimson-hi);color:#fff}

/* ───── ヘッダ ───── */
.masthead{background:rgba(7,7,10,.72);box-shadow:0 1px 0 rgba(231,193,105,.4),0 10px 30px rgba(0,0,0,.4)}
.masthead__ja{background:var(--foil);-webkit-background-clip:text;background-clip:text}
.masthead__en{color:var(--gold)}
.masthead__nav a{color:var(--text)}
.masthead__nav a:hover{color:var(--gold-lit)}

/* ═════════ 開幕の緞帳 ═════════ */
.intro{position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow:hidden;cursor:pointer;background:#07070a}
.intro.is-open{background:transparent;pointer-events:none}
.intro.is-gone{display:none}
.intro__curtain{position:absolute;top:0;bottom:0;width:51%;z-index:1;
  background:
    radial-gradient(120% 60% at 50% 0,rgba(255,160,120,.18),transparent 60%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.45) 0 3%,rgba(255,90,110,.16) 6%,rgba(0,0,0,.5) 10%),
    linear-gradient(180deg,#b3152d,#7a0b1d 55%,#3a040c);
  box-shadow:inset 0 -40px 60px rgba(0,0,0,.5);
  transition:transform 2.2s cubic-bezier(.7,0,.2,1),filter 2.2s}
.intro__curtain::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22px;
  background:repeating-linear-gradient(90deg,#f3d58f 0 2px,#a8802f 2px 4px,transparent 4px 7px)}
.intro__curtain--l{left:0;transform-origin:left center}
.intro__curtain--r{right:0;transform-origin:right center}
.intro.is-open .intro__curtain--l{transform:translateX(-96%) scaleX(.55);filter:brightness(.7)}
.intro.is-open .intro__curtain--r{transform:translateX(96%) scaleX(.55);filter:brightness(.7)}
.intro__title{position:relative;z-index:2;text-align:center;transition:opacity .8s,transform 1.4s cubic-bezier(.16,1,.3,1)}
.intro.is-open .intro__title{opacity:0;transform:scale(1.25);filter:blur(6px)}
.intro__pre{font-family:"Cinzel Decorative",serif;font-weight:700;font-size:clamp(.8rem,1.6vw,1.1rem);letter-spacing:.3em;color:var(--gold-lit);
  opacity:0;animation:introIn 1.2s .2s forwards}
.intro__ja{font-family:var(--title);font-weight:900;font-size:clamp(3rem,10vw,8.5rem);line-height:1.2;letter-spacing:.04em;margin:.1em 0;
  background:var(--foil);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 30px rgba(255,200,110,.45)) drop-shadow(0 6px 12px rgba(0,0,0,.6));
  opacity:0;animation:introIn 1.4s .5s forwards,foil 5s linear infinite}
.intro__date{font-family:"Cinzel Decorative",serif;font-weight:700;font-size:clamp(1rem,2.2vw,1.6rem);letter-spacing:.3em;color:#fff;
  opacity:0;animation:introIn 1.2s .9s forwards}
@keyframes introIn{from{opacity:0;transform:translateY(20px);letter-spacing:.6em}to{opacity:1;transform:none}}
.intro__skip{position:absolute;bottom:6vh;left:0;right:0;z-index:2;text-align:center;font-family:"Cinzel Decorative",serif;font-size:.75rem;letter-spacing:.3em;color:rgba(246,221,152,.7);
  animation:blink 1.8s ease-in-out infinite}
.intro.is-open .intro__skip{opacity:0}
@keyframes blink{50%{opacity:.25}}

/* ═════════ キービジュアル：暗転した舞台に、金の額縁のクララ ═════════ */
.key{background:
    radial-gradient(34% 55% at 72% 44%,rgba(255,190,100,.26),transparent 70%),
    radial-gradient(60% 30% at 50% 100%,rgba(200,21,47,.35),transparent 70%),
    linear-gradient(180deg,#0b080c 0%,#140a10 60%,#1d0710 100%)}
.key__room{display:none}
.key__spot{opacity:1;mix-blend-mode:screen;filter:blur(8px);
  background:
    linear-gradient(170deg,rgba(255,180,58,.55) 0%,transparent 55%) 62% 0/12% 100% no-repeat,
    linear-gradient(182deg,rgba(255,220,150,.5) 0%,transparent 60%) 74% 0/10% 100% no-repeat,
    linear-gradient(192deg,rgba(255,138,58,.45) 0%,transparent 52%) 86% 0/10% 100% no-repeat,
    linear-gradient(176deg,rgba(226,33,63,.4) 0%,transparent 45%) 18% 0/12% 100% no-repeat,
    linear-gradient(186deg,rgba(255,180,58,.3) 0%,transparent 45%) 36% 0/9% 100% no-repeat}
.key__rays{mix-blend-mode:screen;opacity:.35}
.curtain{filter:drop-shadow(0 0 30px rgba(0,0,0,.8)) brightness(.85)}

.key__art{top:112px;bottom:auto;right:clamp(90px,12vw,220px);width:min(33vw,500px);aspect-ratio:.64;perspective:1200px;pointer-events:auto}
.key__arch{position:relative;height:100%;border-radius:999px 999px 10px 10px;overflow:hidden;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .5s cubic-bezier(.16,1,.3,1);
  border:2px solid var(--gold);
  box-shadow:0 0 0 7px rgba(7,7,10,.85),0 0 0 8px var(--gold-deep),0 0 0 13px rgba(7,7,10,.6),0 0 0 14px rgba(231,193,105,.35),
    0 0 80px rgba(255,180,58,.35),0 60px 120px rgba(0,0,0,.85);
  animation:frameBreath 6s ease-in-out infinite}
@keyframes frameBreath{50%{box-shadow:0 0 0 7px rgba(7,7,10,.85),0 0 0 8px var(--gold-deep),0 0 0 13px rgba(7,7,10,.6),0 0 0 14px rgba(231,193,105,.35),0 0 120px rgba(255,180,58,.55),0 60px 120px rgba(0,0,0,.85)}}
.key__art img{mask-image:none;-webkit-mask-image:none;height:100%;object-position:50% 10%;animation:none}
.key__arch::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,242,205,.55),inset 0 0 60px rgba(0,0,0,.45)}
.key__glare{display:block;position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,transparent 38%,rgba(255,244,214,.35) 47%,rgba(255,255,255,.6) 50%,rgba(255,244,214,.35) 53%,transparent 62%) -200% 0/300% 100% no-repeat;
  animation:glare 6.5s ease-in-out infinite}
@keyframes glare{0%,55%{background-position:-200% 0}100%{background-position:200% 0}}
.key__art figcaption{display:block;text-align:center;margin-top:22px;font-family:"Cinzel Decorative",serif;font-size:.8rem;letter-spacing:.4em;color:var(--gold)}
.key__art::before{content:"";position:absolute;left:50%;top:-24px;width:46px;height:46px;transform:translateX(-50%);z-index:3;
  background:radial-gradient(circle at 40% 35%,#fff6d6,#e7c169 40%,#8a6a22 75%);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  filter:drop-shadow(0 0 12px rgba(255,200,110,.9))}

.key__season{color:var(--gold-lit);text-shadow:0 0 18px rgba(255,190,90,.5)}
.key__kind{color:#fff;text-shadow:0 0 14px rgba(255,190,90,.4)}
.key__kind span{color:var(--gold)}
.key__title{font-size:clamp(2.8rem,6vw,6rem);
  background:linear-gradient(180deg,#ff6b82 0%,#e2213f 40%,#a50f29 75%,#6e0818 100%),linear-gradient(100deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);
  -webkit-background-clip:text;background-clip:text;
  filter:
    drop-shadow(1.6px 0 0 #fff) drop-shadow(-1.6px 0 0 #fff) drop-shadow(0 1.6px 0 #fff) drop-shadow(0 -1.6px 0 #fff)
    drop-shadow(1.4px 0 0 #e7c169) drop-shadow(-1.4px 0 0 #e7c169) drop-shadow(0 1.4px 0 #e7c169) drop-shadow(0 -1.4px 0 #e7c169)
    drop-shadow(0 0 26px rgba(255,70,100,.55)) drop-shadow(0 10px 18px rgba(0,0,0,.7))}
.key__date{background:var(--foil);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;
  animation:foil 7s linear infinite;filter:drop-shadow(0 0 16px rgba(255,190,90,.35))}
.key__runs li,.key__fee{background:var(--glass),rgba(12,8,12,.6);border-color:rgba(231,193,105,.6);color:#fff;
  box-shadow:0 0 0 3px rgba(7,7,10,.8),0 0 0 4px rgba(231,193,105,.3),0 10px 24px rgba(0,0,0,.5)}
.key__runs small{color:var(--gold-lit)}
.key__venue{color:#fff;text-shadow:none}
.key__fee dl div+div{border-top-color:rgba(231,193,105,.3)}
.key__motto{color:var(--gold-lit);text-shadow:0 0 14px rgba(255,190,90,.6);right:clamp(40px,5vw,90px);top:4%}

/* ═════════ 見出し ═════════ */
.head__en{color:var(--crimson-hi);background:none;-webkit-text-fill-color:currentColor;animation:none;filter:none;
  font-size:clamp(.8rem,1.5vw,1rem);letter-spacing:.4em}
.head__en::before,.head__en::after{content:"✦";margin:0 .8em;color:var(--gold);font-size:.8em}
.head__ja{font-size:clamp(2.2rem,5.4vw,4rem);background:var(--foil);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;
  animation:foil 8s linear infinite;
  filter:drop-shadow(0 0 24px rgba(255,190,90,.3)) drop-shadow(0 4px 8px rgba(0,0,0,.7))}
.head__lead{color:var(--muted)}
.head__lead b{color:var(--gold-lit)}
/* 一文字ずつ立ち上がる */
.head__ja .ch{display:inline-block;opacity:0;transform:translateY(.5em) rotateX(70deg);filter:blur(6px);
  background:inherit;-webkit-background-clip:text;background-clip:text;
  transition:opacity .9s,transform 1s cubic-bezier(.16,1,.3,1),filter .9s;transition-delay:calc(var(--i)*55ms)}
.head.in .head__ja .ch{opacity:1;transform:none;filter:none}
.head__ja:has(.ch){background:none;animation:none}
.head__ja .ch{background:var(--foil);background-size:400% 100%;background-position:calc(var(--i)*-12%) 0;color:transparent;-webkit-background-clip:text;background-clip:text}

/* 区切りの金の線 */
.house::before,.making::before,.info::before,.cast::before,.tchai::before{background:linear-gradient(90deg,transparent,rgba(231,193,105,.6) 30%,#fff2cd 50%,rgba(231,193,105,.6) 70%,transparent)}

/* ═════════ ピンボール ═════════ */
.house{background:radial-gradient(60% 50% at 50% 30%,rgba(255,180,58,.1),transparent 70%)}
.acts,.score,.ledger,.ensemble{background:var(--glass),rgba(14,9,13,.7);border:1px solid rgba(231,193,105,.45);
  box-shadow:0 0 0 4px rgba(7,7,10,.8),0 0 0 5px rgba(231,193,105,.22),0 24px 50px rgba(0,0,0,.5)}
.acts__head span{color:var(--gold-lit)}
.acts__list li{color:rgba(239,227,207,.45)}
.score dd{background:var(--foil);-webkit-background-clip:text;background-clip:text}
.keys b{background:rgba(255,255,255,.06);color:var(--gold-lit);border-color:rgba(231,193,105,.5);box-shadow:0 2px 0 rgba(231,193,105,.4)}
.chip{background:rgba(255,255,255,.05);color:var(--text);border-color:rgba(231,193,105,.5)}
.chip:hover{color:var(--gold-lit);border-color:var(--gold-lit)}
.table__frame{box-shadow:0 0 0 3px #7a0b1d,0 0 0 6px #07070a,0 0 0 7px var(--gold),0 0 90px rgba(255,180,58,.28),0 40px 90px rgba(0,0,0,.8)}
.callout,.intermission{--ink:#2e1a12;--text:#3b2418;--muted:#6e5140;--faint:#9a7f6b}

/* ═════════ メイキング ═════════ */
.reel__row li{border:1px solid var(--gold);padding:5px;background:#0d0a0e;
  box-shadow:0 0 0 4px rgba(7,7,10,.8),0 0 0 5px rgba(231,193,105,.25),0 18px 40px rgba(0,0,0,.6)}
.reel__row li img{filter:saturate(.9) contrast(1.05)}
.reel__row li:hover{box-shadow:0 0 0 4px rgba(7,7,10,.8),0 0 0 5px rgba(231,193,105,.6),0 0 40px rgba(255,180,58,.35)}
.making__end{color:#fff}
.making__end span{background:var(--foil);-webkit-background-clip:text;background-clip:text}

/* ═════════ 公演情報：真紅のビロード ═════════ */
.info{background:
  radial-gradient(80% 60% at 50% 0%,rgba(255,180,58,.18),transparent 62%),
  linear-gradient(180deg,#5e0a17 0%,#7d0d1e 42%,#3d0611 100%)}
.info .ledger{background:rgba(20,4,9,.55)}
.ledger__title{color:#fff}
.ledger dt{background:linear-gradient(180deg,#f6dd98,#b8862f);color:#3a0610;box-shadow:none}
.run i{border-color:var(--gold-lit);color:var(--gold-lit)}
.fee b{background:var(--foil);-webkit-background-clip:text;background-clip:text}
.poster img{border:1px solid var(--gold);padding:6px;background:#0d0a0e;box-shadow:0 0 0 5px rgba(7,7,10,.7),0 0 0 6px rgba(231,193,105,.3),0 40px 90px rgba(0,0,0,.7)}
.info__contact b{background:var(--gold);color:#2a0409}

/* ═════════ 出演者 ═════════ */
.tier figure{border:1px solid var(--gold);padding:4px;background:#0d0a0e;
  box-shadow:0 0 0 3px rgba(7,7,10,.8),0 0 0 4px rgba(231,193,105,.22),0 16px 34px rgba(0,0,0,.6)}
.tier li:hover figure{box-shadow:0 0 0 3px rgba(7,7,10,.8),0 0 0 4px rgba(231,193,105,.6),0 0 34px rgba(255,180,58,.35)}
.p__role{color:var(--gold)}
.p__name{color:#fff}
.band{color:var(--gold-lit)}
.credits__head{color:var(--gold-lit)}
.credits dt{color:var(--gold)}
.ensemble b{color:var(--gold-lit)}
.tchai__sign{color:var(--gold)}
.tchai__portrait img{border:1px solid var(--gold);padding:6px;background:#0d0a0e;box-shadow:0 0 0 5px rgba(7,7,10,.7),0 0 0 6px rgba(231,193,105,.3),0 40px 90px rgba(0,0,0,.7)}
.tchai{background:radial-gradient(70% 40% at 80% 10%,rgba(255,180,58,.1),transparent 70%)}

/* ═════════ 応援ソング ═════════ */
.songs::before{box-shadow:0 -3px 0 var(--gold)}
.tracks{--ink:#2e1a12;--text:#3b2418;--muted:#6e5140}
.sleeve{border:1px solid var(--gold);padding:5px;background:#0d0a0e}

/* ═════════ 奥付 ═════════ */
.colophon{background:linear-gradient(180deg,#140a10,#07070a);box-shadow:0 -1px 0 rgba(231,193,105,.5)}
.colophon__body b{color:var(--gold)}

/* ═════════ レスポンシブ ═════════ */
@media(max-width:1100px){
  .key__art{position:relative;top:auto;right:auto;width:min(78vw,440px);height:auto;aspect-ratio:.64;margin:100px auto 0}
  .key__art img{mask-image:none;-webkit-mask-image:none}
  .key__inner{margin-top:48px}
}
@media(max-width:700px){
  .key__art{width:min(80vw,360px);margin-top:92px}
  .intro__ja{font-size:clamp(2.6rem,13vw,4rem)}
}
@media(prefers-reduced-motion:reduce){
  .intro{display:none}
  .head__ja .ch{opacity:1;transform:none;filter:none}
  html::after{animation:none}
}
.key__motto{display:none}
@media(max-width:700px){.tier--friends{max-width:calc(5*var(--u)*.65 + 4*var(--g) + 2*var(--gut) + 2px)}}