/* ======================================================================
   【ファイル】css/effects.css
   【概要】画面全体の演出：中央の大きな文字、波のカウントダウン、フラッシュ、画面ごと斬る演出、ボス討伐の黒い帯、集中線、開始の魔法陣。
     どれも JS（effects.js / hud.js / lobby.js）がクラス（.show / .go / .on / .in / .out）を付けて動かす。
   【主な内容】
     ・#big / #phase … 中央の大きな文字と、次のステージまでの表示
     ・#flash / #cut / #bars / #speed … 画面の光・画面ごと斬る・黒い帯・集中線
     ・#warp        … 開始の魔法陣（.in で描かれて光り、.out で広がって消える）
     ・@media (prefers-reduced-motion:reduce) … 動きを減らす設定の端末では、アニメーションを短く・無くする
   ====================================================================== */
/* 中央の大きな文字（.show で弾んで出る、.red で赤） */
#big{position:fixed;left:0;right:0;top:30%;text-align:center;pointer-events:none;font-family:var(--f-display);font-size:clamp(40px,9vw,76px);color:var(--gold);text-shadow:0 0 24px rgba(242,193,78,.6),0 2px 0 #3a2508;opacity:0}
#big.show{animation:big 1.3s ease-out forwards}
#big.red{color:var(--shu);text-shadow:0 0 24px rgba(229,83,59,.6)}
/* 大きな文字の出方（大きく出て → 落ち着き → 上へ消える） */
@keyframes big{0%{opacity:0;transform:scale(1.6)}12%{opacity:1;transform:scale(1)}75%{opacity:1}100%{opacity:0;transform:translateY(-16px)}}
/* 自分のキャラは画面のまん中あたりに立つので、重ならないよう少し上に出す */
#phase{position:fixed;left:0;right:0;top:30%;text-align:center;pointer-events:none;font-size:18px;color:var(--paper);text-shadow:0 2px 8px #000}
/* みんなで：ホストのタブが裏に回っている間の札（pause.js） */
#hostAway{position:fixed;left:50%;top:22%;transform:translateX(-50%);z-index:30;pointer-events:none;max-width:calc(100% - 32px);box-sizing:border-box;padding:8px 18px;border-radius:999px;background:rgba(13,11,31,.82);border:2px solid var(--gold);color:var(--paper);font-size:16px;font-weight:700;text-align:center}
#phase b{font-family:var(--f-display);font-weight:400;font-size:30px;color:var(--gold);margin:0 4px}

/* 画面全体の光（.go で一瞬光る） */
#flash{position:fixed;inset:0;pointer-events:none;opacity:0;background:var(--gold);mix-blend-mode:screen}
#flash.go{animation:flash .55s ease-out}
@keyframes flash{0%{opacity:.6}100%{opacity:0}}
/* 画面ごと斬る（旋風斬）：割れた画面の写しと、斜めの斬撃の線 */
/* 画面ごと斬る演出の入れ物と、割れた画面の写し */
.song-get{position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:16px;background:radial-gradient(ellipse at center,rgba(60,30,0,.82),rgba(10,4,0,.94));animation:sgIn .5s ease-out both;overflow:hidden}
.song-get .sg-rays{position:absolute;left:50%;top:50%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;background:repeating-conic-gradient(rgba(255,215,90,.22) 0 8deg,transparent 8deg 20deg);animation:sgSpin 14s linear infinite}
.song-get .sg-sparks i{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff3b0;box-shadow:0 0 10px #ffd23a;opacity:0;animation:sgTw 2s ease-in-out infinite}
.song-get .sg-card{position:relative;max-width:min(460px,100%);text-align:center;padding:22px 20px;border-radius:20px;background:linear-gradient(160deg,#3a2400,#1a0e00);border:3px solid #ffd23a;box-shadow:0 0 40px rgba(255,200,60,.7),inset 0 0 30px rgba(255,200,60,.25);animation:sgPop .7s cubic-bezier(.2,1.6,.4,1) .15s both}
.song-get .sg-new{margin:0;font-weight:900;font-size:clamp(26px,6vw,40px);letter-spacing:.06em;color:#fff6c8;text-shadow:0 0 12px #ffb020,0 3px 0 #a05a00;animation:sgPulse 1.2s ease-in-out infinite}
.song-get .sg-disc{width:84px;height:84px;margin:12px auto;border-radius:50%;display:grid;place-items:center;font-size:40px;color:#3a2400;background:conic-gradient(#ffe58a,#ffb020,#fff3c0,#ffb020,#ffe58a);box-shadow:0 0 30px #ffd23a;animation:sgSpin 3s linear infinite}
.song-get .sg-name{margin:4px 0;font-size:clamp(22px,5vw,30px);color:#ffe58a}
.song-get .sg-desc,.song-get .sg-how{margin:6px 0;color:#fff2d0;font-size:14px;line-height:1.6}
.song-get .sg-how{color:#ffd88a;font-size:13px}
.song-get .actions{margin-top:14px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
@keyframes sgIn{from{opacity:0}to{opacity:1}}
@keyframes sgSpin{to{transform:rotate(360deg)}}
@keyframes sgPop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
@keyframes sgPulse{50%{transform:scale(1.06)}}
@keyframes sgTw{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1.2)}}
@media (prefers-reduced-motion:reduce){.song-get .sg-rays,.song-get .sg-disc,.song-get .sg-new,.song-get .sg-sparks i{animation:none}}
#cut{position:fixed;inset:0;pointer-events:none;overflow:hidden}
#cut .cut-half{position:absolute;inset:0;width:100%;height:100%;will-change:transform}
/* 斬撃の線 */
#cut .cut-line{position:absolute;left:-5%;height:6px;margin-top:-3px;transform-origin:0 50%;border-radius:3px;
    background:linear-gradient(90deg,rgba(255,255,255,0),#fff 12%,#fff 88%,rgba(255,255,255,0));
    box-shadow:0 0 12px 3px #fff,0 0 34px 10px rgba(255,179,107,.85),0 0 80px 24px rgba(255,120,60,.45)}
/* 割れ目の光 */
#cut .cut-seam{position:absolute;left:-5%;height:22px;margin-top:-11px;transform-origin:0 50%;border-radius:11px;mix-blend-mode:screen;
    background:linear-gradient(180deg,rgba(255,140,60,0),rgba(255,200,120,.75) 30%,#fff 50%,rgba(255,200,120,.75) 70%,rgba(255,140,60,0));
    box-shadow:0 0 30px 12px rgba(255,170,90,.7),0 0 90px 30px rgba(255,110,50,.35)}
/* たまよせ（以津真天）：画面を真っ黒にする幕、時が止まる間の灰色（::before）、刀の斬撃（svg）、血しぶき（canvas） */
#cut .zan-crack{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#f4faff;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;filter:drop-shadow(0 0 3px #8fd0ff) drop-shadow(0 0 8px #fff)}
#cut .zan-crack.big{stroke:#ffe9a0;filter:drop-shadow(0 0 4px #ffb020) drop-shadow(0 0 12px #fff3c0)}
#cut .zan-ring.big{border-color:rgba(255,214,90,.95);box-shadow:0 0 60px #ffb020,inset 0 0 60px #ffd23a}
#zanFx.big .zan-vig{background:radial-gradient(ellipse at center,transparent 32%,rgba(255,180,40,.45) 60%,rgba(255,20,50,.7) 82%,rgba(120,0,10,.95) 100%)}
#cut .zan-shard{position:absolute;will-change:transform,opacity}
#cut .zan-ring{position:absolute;width:160vmax;height:160vmax;border-radius:50%;border:18px solid rgba(255,255,255,.85);box-shadow:0 0 40px #9fd8ff,inset 0 0 40px #9fd8ff}
#zanFx{position:fixed;inset:0;pointer-events:none;z-index:24;display:none}
#zanFx.on{display:block}
#zanFx .zan-vig{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at center,transparent 38%,rgba(255,20,50,.55) 72%,rgba(140,0,20,.92) 100%)}
#zanFx .zan-safe{position:absolute;left:50%;top:31%;transform:translateX(-50%);padding:.35em 1.1em;border-radius:999px;font-weight:900;font-size:clamp(18px,3.4vw,30px);letter-spacing:.06em;white-space:nowrap;color:#fff;text-shadow:0 2px 6px #000}
#zanFx .zan-safe.ok{background:rgba(20,170,120,.85);box-shadow:0 0 24px #5affc8}
#zanFx .zan-safe.ng{background:rgba(220,20,50,.88);box-shadow:0 0 24px #ff3050;animation:zanBlink .35s steps(2) infinite}
@keyframes zanBlink{50%{opacity:.45}}
#tamaFx{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:25}
#tamaFx .tama-dark{position:absolute;inset:0;background:#000;opacity:0;transition:opacity .3s}
#tamaFx.dark .tama-dark{opacity:1;transition:opacity .12s}
#tamaFx::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .15s;
    -webkit-backdrop-filter:grayscale(1) contrast(1.25) brightness(.85);backdrop-filter:grayscale(1) contrast(1.25) brightness(.85)}
#tamaFx.still::before{opacity:1}
#tamaFx svg,#tamaFx .tama-blood{position:absolute;inset:0;width:100%;height:100%}
/* ボス討伐の見せ場：画面の上下に出る映画のような黒い帯 */
/* 黒い帯（.on で上下から出る） */
#bars{position:fixed;inset:0;pointer-events:none}
#bars::before,#bars::after{content:'';position:absolute;left:0;right:0;height:0;background:#000;transition:height .35s cubic-bezier(.2,.8,.3,1)}
#bars::before{top:0}#bars::after{bottom:0}
#bars.on::before,#bars.on::after{height:9vh}
/* 条件：動きを減らす設定なら、帯は一瞬で出す */
@media (prefers-reduced-motion:reduce){#bars::before,#bars::after{transition:none}}
/* 集中線：画面のふちから中心へ走る白い線。中心は抜いて、ふちほど濃く */
/* 集中線（.go で一瞬出る） */
#speed{position:fixed;inset:-15%;pointer-events:none;opacity:0;mix-blend-mode:screen;
    background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,0) 0deg 3.2deg,rgba(255,255,255,.7) 3.6deg 4deg,rgba(255,255,255,0) 4.4deg 7deg,rgba(255,255,255,.35) 7.3deg 7.6deg,rgba(255,255,255,0) 7.9deg 11deg);
    -webkit-mask:radial-gradient(circle at 50% 50%,transparent 26%,#000 62%);mask:radial-gradient(circle at 50% 50%,transparent 26%,#000 62%)}
#speed.go{animation:speed .5s ease-out}
@keyframes speed{0%{opacity:.95;transform:scale(1.18) rotate(0deg)}100%{opacity:0;transform:scale(1) rotate(5deg)}}
/* ゲーム中の大きな文字：ポップなフォントと縁取りで上書きする */
#big{font-family:var(--f-pop);text-shadow:var(--ol3),0 0 40px rgba(242,193,78,.9),0 0 80px rgba(255,95,168,.6)}
#big.show{animation:bigpop 1.4s cubic-bezier(.2,1.4,.4,1) forwards}
/* 赤い大きな文字も黒い縁取りを付けて、背景に溶けないようにする（上の #big.red は縁取りが無かった） */
#big.red{color:#ff6448;text-shadow:var(--ol3);filter:drop-shadow(0 0 14px rgba(255,60,40,.55))}
/* 大きな文字の弾み方（大きく傾いて出て、跳ねて落ち着く） */
@keyframes bigpop{0%{opacity:0;transform:scale(2.2) rotate(-6deg)}14%{opacity:1;transform:scale(.92) rotate(2deg)}22%{transform:scale(1.05)}30%{transform:none}78%{opacity:1}100%{opacity:0;transform:translateY(-24px) scale(1.05)}}
/* 次のステージまでの表示も、ポップなフォントにする */
#phase{font-family:var(--f-pop);font-size:22px;text-shadow:var(--ol3)}
#phase b{font-family:var(--f-pop);font-size:40px}
/* 長い知らせ（※時間によるエリア収縮！）：1行に収まる大きさにし、少し長く出す */
#big.long{font-size:clamp(26px,6.4vw,64px);white-space:nowrap}
/* ボスの登場：顔にかぶらないよう、画面の下のほうに出す */
#big.low{top:auto;bottom:19%} /* 小さいボス（ステージ1・2）の顔にもかぶらず、下のHPバーよりは上（登場のときは操作の案内を出さない） */
#big.show.long{animation-duration:2.4s}
/* 条件：動きを減らす設定なら、大きな文字のアニメーションをほぼ無くす */
@media (prefers-reduced-motion:reduce){#big.show,#big.show.long{animation-duration:.01s}}

/* 開始の演出：魔法陣が描かれて光り（.in）、ステージに切り替わったら広がって消える（.out） */
/* 開始の魔法陣の画面（最初は透明） */
#warp{position:fixed;inset:0;z-index:40;display:grid;place-items:center;pointer-events:all;overflow:hidden;
    background:radial-gradient(circle at 50% 50%,rgba(60,30,110,.55),rgba(13,11,31,.92) 70%);opacity:0}
/* 魔法陣の絵と、その線（.ring）・色違いの輪（.r2 / .r3）・文字・中心の光 */
#warp .circle{width:min(78vmin,620px);height:auto;overflow:visible;filter:drop-shadow(0 0 6px var(--gold)) drop-shadow(0 0 22px rgba(255,95,168,.7))}
#warp .ring{fill:none;stroke:var(--gold);stroke-width:1.2;transform-origin:0 0}
#warp .ring circle,#warp .ring polygon{stroke-dasharray:700;stroke-dashoffset:700}
#warp .r2{stroke:var(--cyan)}
#warp .r3{stroke:var(--pink);stroke-width:1.6}
#warp text{fill:var(--gold);stroke:none;font-family:var(--f-display);font-size:7.5px;letter-spacing:.6px;opacity:0}
#warp .r2 text{fill:var(--cyan);font-size:6.5px}
#warp .burst{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#fff 0,rgba(255,240,200,.9) 25%,rgba(242,193,78,0) 60%);opacity:0;pointer-events:none}
/* .in：背景を出し、魔法陣を大きくしながら線を描き、文字を出し、輪を回す */
#warp.in{animation:warpBg .9s ease-out forwards}
#warp.in .circle{animation:warpGrow .9s cubic-bezier(.2,1.2,.4,1) forwards}
#warp.in .ring circle,#warp.in .ring polygon{animation:warpDraw .75s ease-out forwards}
#warp.in .r2 circle,#warp.in .r2 polygon{animation-delay:.12s}
#warp.in .r3 circle,#warp.in .r3 polygon{animation-delay:.24s}
#warp.in text{animation:warpRune .5s ease-out .35s forwards}
#warp.in .r1{animation:warpSpin 9s linear infinite}
#warp.in .r2{animation:warpSpin 6s linear infinite reverse}
#warp.in .r3{animation:warpSpin 4s linear infinite}
/* .out：背景を消し、魔法陣を大きくして消し、中心を光らせる */
#warp.out{animation:warpBgOut .9s ease-in forwards}
#warp.out .circle{animation:warpBlow .9s ease-in forwards}
#warp.out .burst{animation:warpBurst .7s ease-out forwards}
/* アニメーションの中身（背景・出る・消える・線を描く・文字・回る・光） */
@keyframes warpBg{to{opacity:1}}
@keyframes warpBgOut{from{opacity:1}to{opacity:0}}
@keyframes warpGrow{from{transform:scale(.3) rotate(-90deg);opacity:0}to{transform:none;opacity:1}}
@keyframes warpBlow{from{transform:none;opacity:1}to{transform:scale(2.6) rotate(40deg);opacity:0}}
@keyframes warpDraw{to{stroke-dashoffset:0}}
@keyframes warpRune{to{opacity:1}}
@keyframes warpSpin{to{transform:rotate(360deg)}}
@keyframes warpBurst{0%{opacity:1}100%{opacity:0;transform:scale(1.4)}}

/* ===== ボスの名前の看板（js の bossTitle）：紅の墨の帯に、筆の字で白い名前。上に金の肩書き、下に金の一言 ===== */
#bossTitle{position:fixed;left:0;right:0;bottom:24%;z-index:30;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:2px;opacity:0;text-align:center}
#bossTitle .bt-band{position:absolute;left:50%;top:50%;width:min(860px,96vw);height:calc(100% + 18px);transform:translate(-50%,-50%) scaleX(0);
  background:linear-gradient(90deg,transparent 0,rgba(90,0,8,.9) 14%,rgba(140,8,16,.92) 50%,rgba(90,0,8,.9) 86%,transparent 100%);
  border-top:2px solid rgba(242,193,78,.85);border-bottom:2px solid rgba(242,193,78,.85);
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
#bossTitle small{position:relative;font-family:var(--f-display);font-size:clamp(14px,1.8vw,20px);letter-spacing:.5em;color:#f2c14e;text-shadow:0 2px 0 #000}
#bossTitle small:empty,#bossTitle em:empty{display:none}
#bossTitle b{position:relative;font-family:"Yuji Syuku",var(--f-display);font-weight:400;font-size:clamp(46px,8vw,92px);line-height:1.05;letter-spacing:.12em;color:#fff;
  text-shadow:var(--ol3),0 0 26px rgba(255,40,40,.75)}
#bossTitle em{position:relative;font-style:normal;font-family:var(--f-display);font-size:clamp(14px,1.7vw,19px);letter-spacing:.3em;color:#f2c14e;text-shadow:0 2px 0 #000}
#bossTitle.show{animation:btin 2.3s ease-out forwards}
#bossTitle.show .bt-band{animation:btband 2.3s cubic-bezier(.2,.9,.3,1) forwards}
#bossTitle.show b{animation:btname 2.3s ease-out forwards}
@keyframes btin{0%{opacity:1}82%{opacity:1}100%{opacity:0}}
@keyframes btband{0%{transform:translate(-50%,-50%) scaleX(0)}18%{transform:translate(-50%,-50%) scaleX(1)}100%{transform:translate(-50%,-50%) scaleX(1)}}
@keyframes btname{0%,12%{opacity:0;filter:blur(10px);transform:scale(1.25)}30%{opacity:1;filter:blur(0);transform:scale(1)}100%{opacity:1;transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){#bossTitle.show,#bossTitle.show .bt-band,#bossTitle.show b{animation-duration:.01s}#bossTitle.show{animation:btfade 2.3s linear forwards}}
@keyframes btfade{0%,85%{opacity:1}100%{opacity:0}}