:root{
  --ally:#ff5a3c; --ally-d:#c8341d;
  --enemy:#3a6df0; --enemy-d:#244bb0;
  --green:#2ec16b; --yellow:#ffd23c; --ink:#1a2030;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; width:100%; height:100%; overflow:hidden;
  background:#0e1320; font-family:-apple-system,"Hiragino Maru Gothic ProN","Rounded Mplus 1c",sans-serif;
  color:#fff; user-select:none; -webkit-user-select:none; touch-action:manipulation; }
#gl{ position:fixed; inset:0; width:100vw; height:100vh; display:block; }

#overlay{ position:fixed; inset:0; z-index:5; pointer-events:none; }
#overlay .screen, #overlay .hud, #overlay button{ pointer-events:auto; }
.hidden{ display:none !important; }

/* ---------- 上部 HUD ---------- */
#hud-top{ position:absolute; top:calc(8px + var(--safe-t)); left:0; right:0;
  display:flex; align-items:center; justify-content:space-between; padding:0 14px; }
.score-box{ display:flex; align-items:center; gap:8px; background:rgba(8,12,24,.6);
  padding:6px 14px; border-radius:20px; font-size:26px; font-weight:800; backdrop-filter:blur(4px); }
.score-sep{ opacity:.6; }
.team-dot{ width:16px; height:16px; border-radius:50%; display:inline-block; }
.team-dot.ally{ background:var(--ally); }
.team-dot.enemy{ background:var(--enemy); }
.phase-label{ background:rgba(8,12,24,.6); padding:6px 14px; border-radius:20px;
  font-size:15px; font-weight:700; }
/* 機能9: スコア＋試合時計の縦積み（中央） */
.score-stack{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.match-clock{ background:rgba(8,12,24,.6); padding:3px 12px; border-radius:14px;
  font-size:14px; font-weight:800; letter-spacing:.5px; backdrop-filter:blur(4px);
  white-space:nowrap; }
.match-clock.pulse{ animation:clockPulse .6s ease-out; }
.match-clock.over{ background:var(--ally-d); }
@keyframes clockPulse{ 0%{transform:scale(1)} 40%{transform:scale(1.25);filter:brightness(1.5)}
  100%{transform:scale(1)} }

/* ---------- 共通ボタン ---------- */
.big-btn{ border:none; border-radius:18px; font-weight:800; color:#fff;
  font-size:22px; padding:16px 22px; min-height:60px; box-shadow:0 4px 0 rgba(0,0,0,.3);
  active:translateY(2px); cursor:pointer; }
.big-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.3); }
.big-btn:disabled{ filter:grayscale(.7) brightness(.7); box-shadow:none; }

/* ---------- 編成画面 ---------- */
.screen{ position:absolute; inset:0; display:flex; flex-direction:column; }
.screen.bottom{ inset:auto 0 0 0; display:flex; flex-direction:column; align-items:center;
  padding:0 12px calc(18px + var(--safe-b)); }
#formation{ background:linear-gradient(180deg,rgba(14,19,32,.2) 0%,rgba(14,19,32,.85) 60%);
  justify-content:flex-end; padding:0 12px calc(16px + var(--safe-b)); }
.title{ font-size:20px; text-align:center; margin:0 0 8px; text-shadow:0 2px 6px #000; }
.title b{ color:var(--yellow); font-size:26px; }
.picked-slots{ display:flex; gap:8px; justify-content:center; margin-bottom:10px; }
.slot{ width:62px; height:78px; border-radius:12px; border:3px dashed rgba(255,255,255,.4);
  background:rgba(0,0,0,.3); display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; }
.slot.filled{ border-style:solid; }
.slot-num{ position:absolute; top:2px; left:5px; font-size:12px; opacity:.7; z-index:2; }
.slot .mini-card{ width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; }
.slot .mini-card .nm{ font-size:9px; line-height:1.1; text-align:center; padding:0 2px; }

.card-list{ display:flex; gap:8px; overflow-x:auto; padding:6px 2px 10px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.card-list::-webkit-scrollbar{ display:none; }
.card{ flex:0 0 auto; width:78px; height:108px; border-radius:12px; background:#222b3d;
  border:3px solid #333; display:flex; flex-direction:column; align-items:center;
  padding:6px 4px; position:relative; transition:transform .1s; }
.card:active{ transform:scale(.94); }
.card.selected{ outline:3px solid var(--yellow); opacity:.55; }
.card.red{ border-color:var(--ally); }
.card.blue{ border-color:var(--enemy); }
.card.green{ border-color:var(--green); }
.card .avatar{ width:42px; height:42px; border-radius:50%; margin-top:4px;
  display:flex; align-items:center; justify-content:center; font-size:20px; }
.card.red .avatar{ background:var(--ally); }
.card.blue .avatar{ background:var(--enemy); }
.card.green .avatar{ background:var(--green); }
.card .cname{ font-size:10px; line-height:1.15; text-align:center; margin-top:5px; }
.card .stats{ font-size:9px; opacity:.8; margin-top:auto; display:flex; gap:5px; }
.card .pos{ position:absolute; top:3px; right:5px; font-size:9px; font-weight:800;
  background:rgba(0,0,0,.4); padding:1px 4px; border-radius:6px; }
.card .rar{ position:absolute; top:3px; left:5px; font-size:9px; font-weight:800; color:var(--yellow); }

.big-btn.kickoff{ background:var(--green); margin-top:6px; align-self:center; width:90%; max-width:340px; }

/* ---------- 3択 ---------- */
.choice-row{ display:flex; gap:10px; width:100%; max-width:420px; }
.choice-btn{ flex:1; border:none; border-radius:18px; color:#fff; padding:14px 4px;
  display:flex; flex-direction:column; align-items:center; gap:4px; font-weight:800;
  box-shadow:0 4px 0 rgba(0,0,0,.3); cursor:pointer; min-height:84px; }
.choice-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.3); }
.choice-btn .ico{ font-size:30px; }
.choice-btn .lbl{ font-size:15px; }
.choice-btn.feint{ background:#9b5de5; }
.choice-btn.pass{ background:#00bbf9; }
.choice-btn.shoot{ background:#f15bb5; }

/* ---------- リズム ---------- */
.rhythm-hits{ display:flex; gap:14px; margin-bottom:14px; }
.hit-dot{ width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.25);
  border:2px solid rgba(255,255,255,.5); }
.hit-dot.perfect{ background:var(--yellow); border-color:#fff; box-shadow:0 0 12px var(--yellow); }
.hit-dot.good{ background:#7CFC8A; border-color:#fff; }
.hit-dot.miss{ background:#888; }
.rhythm-ring{ width:120px; height:120px; position:relative; margin-bottom:8px;
  display:flex; align-items:center; justify-content:center; }
.rhythm-ring::after{ content:""; position:absolute; width:54px; height:54px; border-radius:50%;
  border:3px solid var(--yellow); }
.ring-shrink{ width:120px; height:120px; border-radius:50%; border:4px solid #fff;
  position:absolute; transform:scale(2); opacity:.9; }
.judge-flash{ position:absolute; top:40%; left:0; right:0; text-align:center; font-size:40px;
  font-weight:900; pointer-events:none; opacity:0; text-shadow:0 3px 8px #000; }
.judge-flash.show{ animation:pop .45s ease-out; }
.judge-flash.perfect{ color:var(--yellow); }
.judge-flash.good{ color:#7CFC8A; }
.judge-flash.miss{ color:#ff5a5a; }
@keyframes pop{ 0%{opacity:0;transform:scale(.5)} 30%{opacity:1;transform:scale(1.2)}
  100%{opacity:0;transform:scale(1)} }
.big-btn.rhythm-btn{ background:var(--ally); width:90%; max-width:340px; font-size:26px; }

/* ---------- 応援 ---------- */
.cheer-label{ font-size:20px; font-weight:800; margin-bottom:8px; text-shadow:0 2px 6px #000; }
.cheer-gauge{ width:90%; max-width:340px; height:26px; background:rgba(0,0,0,.5);
  border-radius:14px; overflow:hidden; margin-bottom:12px; border:2px solid rgba(255,255,255,.3); }
.cheer-fill{ height:100%; width:0%; background:linear-gradient(90deg,#ffd23c,#ff7b00);
  transition:width .06s linear; }
.cheer-fill.full{ animation:flash .4s infinite; }
@keyframes flash{ 50%{ filter:brightness(1.6); } }
.big-btn.cheer-btn{ background:var(--yellow); color:var(--ink); width:90%; max-width:340px;
  font-size:28px; }

/* ---------- 結果 ---------- */
.result-msg{ font-size:24px; font-weight:900; margin-bottom:14px; text-align:center;
  text-shadow:0 3px 8px #000; }
.big-btn.next-btn{ background:var(--green); width:90%; max-width:340px; }

/* ---------- カットイン ---------- */
.cutin{ position:fixed; inset:0; z-index:20; pointer-events:none; overflow:hidden;
  display:flex; align-items:center; justify-content:center; }
.cutin-flash{ position:absolute; inset:0; background:radial-gradient(circle,#fff,transparent 70%);
  opacity:0; animation:cflash 1.5s ease-out; }
.cutin-lines{ position:absolute; inset:0;
  background:repeating-conic-gradient(from 0deg, rgba(255,210,60,.0) 0deg 6deg, rgba(255,210,60,.35) 6deg 9deg);
  animation:spin 1.5s linear; }
.cutin-name{ font-size:40px; font-weight:900; color:#fff; -webkit-text-stroke:2px var(--ally);
  text-shadow:0 0 24px var(--yellow); transform:scale(.4); animation:cname 1.5s ease-out; z-index:2; }
@keyframes cflash{ 0%{opacity:1} 20%{opacity:.3} 100%{opacity:0} }
@keyframes spin{ to{ transform:rotate(180deg); } }
@keyframes cname{ 0%{transform:scale(.2) rotate(-12deg);opacity:0}
  25%{transform:scale(1.3) rotate(4deg);opacity:1} 70%{transform:scale(1) rotate(0);opacity:1}
  100%{transform:scale(1.1);opacity:0} }

/* ============================================================
   ============   FX レイヤー（fx.js が動的生成）   ============
   ============================================================ */
#fx-layer{ position:fixed; inset:0; z-index:30; pointer-events:none; overflow:hidden; }
#fx-layer > *{ pointer-events:none; }

/* ---- 画面フラッシュ（汎用） ---- */
.fx-flash{ position:absolute; inset:0;
  background:radial-gradient(circle at 50% 45%, #fff, rgba(255,255,255,.2) 55%, transparent 75%);
  opacity:0; animation:fxFlash .36s ease-out; }
@keyframes fxFlash{ 0%{opacity:var(--i,.7)} 100%{opacity:0} }

/* ---- ヒットストップ（画面の微振動） ---- */
body.fx-hitstop #gl, body.fx-hitstop #overlay{ animation:fxShake .14s linear; }
@keyframes fxShake{ 0%{transform:translate(0,0)} 25%{transform:translate(2px,-2px)}
  50%{transform:translate(-2px,1px)} 75%{transform:translate(1px,2px)} 100%{transform:translate(0,0)} }

/* ---- フィーチャー暗転ビネット（2体以外をうっすら落とす・主役は明るく保つ） ---- */
.fx-vignette{ position:absolute; inset:0; opacity:0; transition:opacity .35s ease;
  background:radial-gradient(ellipse 70% 64% at 50% 54%, transparent 0%, transparent 56%, rgba(6,12,26,.18) 80%, rgba(3,7,16,.42) 100%); }
.fx-vignette.on{ opacity:1; }

/* ---- スローモーション演出（色トーン＋効果線＋残像風） ---- */
.fx-slowtone{ position:absolute; inset:0; opacity:0; transition:opacity .25s ease;
  background:linear-gradient(180deg, rgba(40,90,200,.10), rgba(10,20,50,.04) 50%, rgba(40,90,200,.10));
  mix-blend-mode:screen; }
.fx-slowtone.on{ opacity:1; }
.fx-slowtone.on::after{ /* 周辺に軽いブラー風の暗ふち（残像感） */
  content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 120px 30px rgba(8,14,30,.5); }
.fx-slowtone.pulse{ animation:fxSlowPulse .3s ease-out; }
@keyframes fxSlowPulse{ 0%{filter:brightness(1.5) saturate(1.4)} 100%{filter:brightness(1) saturate(1)} }
.fx-speedlines{ position:absolute; inset:-30%; opacity:0; transition:opacity .25s ease;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,0) 0px, rgba(255,255,255,0) 26px,
    rgba(255,255,255,.16) 27px, rgba(255,255,255,.16) 29px);
  animation:fxSpeed 1.6s linear infinite; }
.fx-slowtone.on .fx-speedlines{ opacity:.7; }
@keyframes fxSpeed{ to{ background-position:300px 0; } }

/* ---- リズム判定スタンプ ---- */
.fx-stamp{ position:absolute; top:32%; left:0; right:0; text-align:center;
  font-size:54px; font-weight:900; letter-spacing:2px; font-style:italic;
  -webkit-text-stroke:3px #1a2030; text-shadow:0 6px 0 rgba(0,0,0,.35);
  opacity:0; animation:fxStamp .56s cubic-bezier(.2,1.4,.3,1) forwards; }
.fx-stamp.perfect{ color:var(--yellow); }
.fx-stamp.good{ color:#7CFC8A; }
.fx-stamp.miss{ color:#ff6a6a; -webkit-text-stroke:3px #401010; }
@keyframes fxStamp{ 0%{opacity:0;transform:scale(2) rotate(-14deg)}
  18%{opacity:1;transform:scale(.92) rotate(-8deg)} 30%{transform:scale(1.06) rotate(-8deg)}
  75%{opacity:1;transform:scale(1) rotate(-8deg)} 100%{opacity:0;transform:scale(1) rotate(-8deg)} }

/* ---- PERFECT のスパーク ---- */
.fx-spark{ position:absolute; top:36%; left:50%; }
.fx-spark-p{ position:absolute; width:7px; height:7px; border-radius:50%;
  background:var(--yellow); box-shadow:0 0 8px var(--yellow);
  animation:fxSpark .45s ease-out forwards; }
@keyframes fxSpark{ 0%{transform:translate(0,0) scale(1);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0} }

/* ============   必殺カットイン（fx-layer 側の派手版）   ============ */
.fx-cutin{ position:absolute; inset:0; overflow:hidden;
  --cc:#ffd23c; animation:fxCutFade .2s ease-out; }
.fx-cutin.out{ animation:fxCutOut .32s ease-in forwards; }
@keyframes fxCutFade{ from{opacity:0} to{opacity:1} }
@keyframes fxCutOut{ to{opacity:0; transform:scale(1.04)} }

.fx-cutin-flash{ position:absolute; inset:0; background:#fff; opacity:0;
  animation:fxCutFlash 1.5s ease-out; }
@keyframes fxCutFlash{ 0%{opacity:1} 14%{opacity:.15} 100%{opacity:0} }

/* 斜め帯（背景を割る） */
.fx-cutin-band{ position:absolute; left:-20%; right:-20%; top:34%; height:34%;
  background:linear-gradient(100deg, var(--cc), #1a2030 70%);
  transform:skewY(-12deg) scaleX(0); transform-origin:left center;
  box-shadow:0 0 40px rgba(0,0,0,.5);
  animation:fxBand 1.5s cubic-bezier(.1,.8,.2,1) forwards; }
@keyframes fxBand{ 0%{transform:skewY(-12deg) scaleX(0)} 18%{transform:skewY(-12deg) scaleX(1)}
  82%{transform:skewY(-12deg) scaleX(1)} 100%{transform:skewY(-12deg) scaleX(1)} }

/* 集中線 */
.fx-cutin-lines{ position:absolute; inset:-30%;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255,255,255,0) 0deg 5deg, rgba(255,255,255,.28) 5deg 8deg);
  opacity:.0; animation:fxCutLines 1.5s ease-out; }
@keyframes fxCutLines{ 0%{opacity:.7;transform:scale(.6) rotate(0)} 100%{opacity:0;transform:scale(1.4) rotate(40deg)} }

/* キャラ大写し（プリミティブ） */
.fx-cutin-figure{ position:absolute; left:8%; bottom:0; width:46vw; max-width:260px; height:78%;
  display:flex; align-items:flex-end; justify-content:center;
  transform:translateX(-30%) scale(.7); opacity:0;
  animation:fxFigure 1.5s cubic-bezier(.1,.8,.2,1) forwards; }
.fx-cutin-figure .silho{ position:absolute; bottom:0; width:70%; height:92%;
  background:linear-gradient(180deg, var(--cc), rgba(0,0,0,.4));
  border-radius:46% 46% 28% 28% / 60% 60% 12% 12%;
  box-shadow:0 0 50px var(--cc), inset 0 -20px 40px rgba(0,0,0,.4); }
.fx-cutin-figure .face{ position:relative; font-size:64px; margin-bottom:46%;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
@keyframes fxFigure{ 0%{transform:translateX(-30%) scale(.7);opacity:0}
  20%{transform:translateX(0) scale(1.05);opacity:1} 100%{transform:translateX(0) scale(1);opacity:1} }

/* 二つ名＋キャッチコピー */
.fx-cutin-copy{ position:absolute; right:6%; top:38%; max-width:60%; text-align:right;
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  transform:translateX(40%); opacity:0; animation:fxCopy 1.5s cubic-bezier(.1,.8,.2,1) forwards; }
.fx-cutin-copy .super-tag{ font-size:18px; font-weight:900; color:#fff;
  background:var(--cc); padding:1px 10px; border-radius:10px; transform:rotate(-4deg);
  box-shadow:0 3px 0 rgba(0,0,0,.4); }
.fx-cutin-copy .tag{ font-size:17px; font-weight:800; color:var(--cc); text-shadow:0 2px 4px #000; }
.fx-cutin-copy .name{ font-size:30px; font-weight:900; color:#fff;
  -webkit-text-stroke:1.5px var(--cc); text-shadow:0 0 18px var(--cc); line-height:1.05; }
.fx-cutin-copy .copy{ font-size:24px; font-weight:900; color:var(--yellow);
  -webkit-text-stroke:1px #1a2030; text-shadow:0 3px 8px #000; margin-top:4px; }
@keyframes fxCopy{ 0%{transform:translateX(40%);opacity:0}
  28%{transform:translateX(-4%);opacity:1} 36%{transform:translateX(0);opacity:1}
  100%{transform:translateX(0);opacity:1} }

.fx-cutin.super .fx-cutin-lines{ animation-duration:1.5s; }
.fx-cutin.super .silho{ animation:fxSuperGlow .5s ease-in-out infinite alternate; }
@keyframes fxSuperGlow{ from{box-shadow:0 0 50px var(--cc),inset 0 -20px 40px rgba(0,0,0,.4)}
  to{box-shadow:0 0 90px #fff,inset 0 -20px 40px rgba(0,0,0,.4)} }

/* ============   覚醒（かくせい）ソロシュート専用カットイン   ============ */
/* 虹/金バンド・必殺コピー・延長スロー・他選手dim（main 側で setDim）。transform/opacity のみ。 */
.fx-cutin.awaken{ animation:fxCutFade .2s ease-out; }
.fx-cutin.awaken .fx-cutin-band{
  background:linear-gradient(100deg,#ffe14a 0%,#ff7a1c 32%,#ff3cae 58%,#3a6df0 80%,#1a2030 100%);
  background-size:200% 100%; animation:fxBand 1.5s cubic-bezier(.1,.8,.2,1) forwards, fxAwakenHue 1.1s linear infinite; }
@keyframes fxAwakenHue{ from{background-position:0% 0} to{background-position:200% 0} }
.fx-cutin.awaken .silho{ background:linear-gradient(180deg,#ffe14a,#ff7a1c 60%,rgba(0,0,0,.4));
  animation:fxAwakenGlow .42s ease-in-out infinite alternate; }
@keyframes fxAwakenGlow{ from{box-shadow:0 0 60px #ffd23c,inset 0 -20px 40px rgba(0,0,0,.4)}
  to{box-shadow:0 0 120px #fff,0 0 60px #ff7a1c,inset 0 -20px 40px rgba(0,0,0,.4)} }
.fx-cutin.awaken .fx-cutin-lines{ animation-duration:1.1s;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255,226,74,0) 0deg 5deg, rgba(255,200,80,.4) 5deg 8deg); }
.fx-cutin.awaken .face{ animation:fxAwakenFace .5s ease-in-out infinite alternate; }
@keyframes fxAwakenFace{ from{transform:scale(1)} to{transform:scale(1.12)} }
.fx-cutin-copy .awaken-tag{ font-size:20px; font-weight:900; color:#1a2030;
  background:linear-gradient(90deg,#ffe14a,#ff9a3c); padding:2px 12px; border-radius:11px;
  transform:rotate(-5deg); box-shadow:0 3px 0 rgba(0,0,0,.45),0 0 18px #ffd23c;
  animation:fxAwakenTag .4s ease-in-out infinite alternate; }
@keyframes fxAwakenTag{ from{transform:rotate(-5deg) scale(1)} to{transform:rotate(-5deg) scale(1.08)} }
/* オーラリング（金の同心円が広がる） */
.fx-cutin-aura{ position:absolute; left:50%; top:54%; width:40px; height:40px; margin:-20px;
  border-radius:50%; border:5px solid #ffe14a; opacity:0;
  box-shadow:0 0 30px #ffd23c; animation:fxAura 1.1s ease-out infinite; }
@keyframes fxAura{ 0%{transform:scale(.4);opacity:.9} 100%{transform:scale(7);opacity:0} }

/* DOM側カットイン(#cutin)の覚醒装飾 */
.cutin.awaken .cutin-name{ color:#ffe14a; -webkit-text-stroke:2px #ff7a1c;
  text-shadow:0 0 24px #ffd23c; animation:fxAwakenFace .45s ease-in-out infinite alternate; }
.cutin.awaken .cutin-flash{ background:radial-gradient(circle,#fff,#ffd23c 40%,transparent 72%); }

/* ============   覚醒バッジ（CUTIN中の「かくせい！」点滅）   ============ */
.awaken-badge{ position:absolute; top:18%; left:50%; transform:translate(-50%,-8px) scale(.6);
  z-index:24; pointer-events:none; opacity:0;
  display:flex; align-items:center; gap:6px;
  padding:6px 16px; border-radius:18px;
  background:linear-gradient(90deg,#ff7a1c,#ffd23c,#ff3cae); background-size:200% 100%;
  box-shadow:0 4px 14px rgba(0,0,0,.5),0 0 26px #ffd23c;
  font-weight:900; font-size:22px; color:#fff; -webkit-text-stroke:1px #1a2030;
  white-space:nowrap; }
.awaken-badge.show{ animation:fxAwakenBadgeIn .3s cubic-bezier(.2,1.4,.4,1) forwards, fxAwakenHue 1.1s linear infinite; }
.awaken-badge.show .ab-txt{ animation:fxAwakenBadgeBlink .5s ease-in-out infinite alternate; }
@keyframes fxAwakenBadgeIn{ to{ transform:translate(-50%,0) scale(1); opacity:1; } }
@keyframes fxAwakenBadgeBlink{ from{opacity:1} to{opacity:.55} }
.awaken-badge .ab-spark{ font-size:18px; animation:fxAwakenFace .4s ease-in-out infinite alternate; }

/* ============   覚醒チャンス予告（リズム3PERFECT直後・率を見せる）   ============ */
.awaken-chance{ position:absolute; top:30%; left:50%; transform:translate(-50%,8px) scale(.7);
  z-index:24; pointer-events:none; opacity:0;
  display:flex; align-items:center; gap:8px;
  padding:8px 18px; border-radius:16px;
  background:linear-gradient(135deg,rgba(40,30,10,.92),rgba(70,40,10,.92));
  border:2px solid #ffd23c; box-shadow:0 0 30px rgba(255,210,60,.7);
  font-weight:900; color:#ffe14a; white-space:nowrap; }
.awaken-chance.show{ animation:fxChanceIn .34s cubic-bezier(.2,1.5,.4,1) forwards; }
@keyframes fxChanceIn{ 0%{transform:translate(-50%,8px) scale(.7);opacity:0}
  60%{transform:translate(-50%,0) scale(1.06);opacity:1} 100%{transform:translate(-50%,0) scale(1);opacity:1} }
.awaken-chance .ac-ico{ font-size:20px; animation:fxAwakenFace .35s ease-in-out infinite alternate; }
.awaken-chance .ac-txt{ font-size:16px; }
.awaken-chance .ac-rate{ font-size:24px; color:#fff; -webkit-text-stroke:1px #ff7a1c; }

/* ============   応援盛り上がり   ============ */
.fx-cheer{ position:absolute; inset:0; opacity:0; transition:opacity .12s linear;
  background:linear-gradient(0deg, rgba(255,180,40,.35), transparent 42%); }
.fx-cheer.max{ animation:fxCheerMax .3s infinite; }
@keyframes fxCheerMax{ 50%{ filter:brightness(1.4) saturate(1.3); } }
.fx-cheer-p{ position:absolute; bottom:-6vh; line-height:1;
  animation:fxCheerRise var(--dur,1200ms) ease-out forwards; }
@keyframes fxCheerRise{ 0%{transform:translate(0,0) scale(.6) rotate(0);opacity:0}
  15%{opacity:1} 100%{transform:translate(var(--drift,0),-105vh) scale(1.1) rotate(40deg);opacity:0} }

/* ============   ゴール演出   ============ */
.fx-goal-banner{ position:absolute; top:30%; left:0; right:0; text-align:center;
  font-size:64px; font-weight:900; color:var(--yellow); font-style:italic;
  -webkit-text-stroke:4px var(--ally-d); text-shadow:0 8px 0 rgba(0,0,0,.4), 0 0 30px var(--yellow);
  animation:fxGoalBan .5s cubic-bezier(.2,1.5,.3,1) forwards; }
.fx-goal-banner.out{ animation:fxGoalOut .4s ease-in forwards; }
@keyframes fxGoalBan{ 0%{transform:scale(.2) rotate(-12deg);opacity:0}
  60%{transform:scale(1.15) rotate(3deg);opacity:1} 100%{transform:scale(1) rotate(0);opacity:1} }
@keyframes fxGoalOut{ to{transform:scale(1.3);opacity:0} }

.fx-confetti{ position:absolute; inset:0; top:-10vh; }
.fx-conf-p{ position:absolute; top:0; display:block; border-radius:2px;
  animation:fxConf var(--dur,2000ms) var(--delay,0ms) linear forwards; }
@keyframes fxConf{ 0%{transform:translate(0,-10vh) rotate(0);opacity:1}
  100%{transform:translate(var(--sx,0),115vh) rotate(var(--rot,360deg));opacity:1} }

/* スコア強調パルス */
.fx-score-pop{ animation:fxScorePop .9s cubic-bezier(.2,1.4,.3,1); }
@keyframes fxScorePop{ 0%{transform:scale(1)} 30%{transform:scale(1.35);filter:brightness(1.6)}
  100%{transform:scale(1)} }

/* ============================================================
   ============   Phase2 インゲーム HUD レイヤー   ============
   ============================================================ */
.hud-game{ position:absolute; inset:0; pointer-events:none; z-index:6; }
.hud-game > *{ pointer-events:none; }
/* 操作可能なのは🎥ボタンのみ。3択の.rateは#select(.screen)が auto） */
.hud-game .cam-toggle{ pointer-events:auto; }

/* ---------- 機能6: 保持者情報パネル（左上） ---------- */
.hud-owner{ position:absolute; top:calc(8px + var(--safe-t)); left:8px;
  width:132px; height:56px; display:flex; align-items:center; gap:7px;
  background:rgba(8,12,24,.62); border-radius:14px; padding:6px 8px;
  border:2px solid rgba(255,255,255,.18); backdrop-filter:blur(4px); }
.ow-avatar{ width:40px; height:40px; flex:0 0 40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:20px;
  background:#888; box-shadow:0 0 0 2px rgba(255,255,255,.35) inset; }
.ow-info{ display:flex; flex-direction:column; min-width:0; }
.ow-name{ font-size:12px; font-weight:800; line-height:1.15; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:78px; }
.ow-stats{ font-size:11px; font-weight:700; opacity:.85; margin-top:2px; }
.ow-stats .pw{ color:var(--yellow); }
.ow-stats .sh{ color:#7CFC8A; }

/* ---------- 機能8: 20秒ショットクロック（保持者直下） ---------- */
.hud-shotclock{ position:absolute; top:calc(72px + var(--safe-t)); left:8px;
  width:54px; height:54px; }
.sc-ring{ width:54px; height:54px; border-radius:50%;
  background:conic-gradient(var(--green) calc(var(--p,1) * 360deg), rgba(255,255,255,.12) 0deg);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.4); }
.sc-ring::before{ content:""; position:absolute; width:42px; height:42px;
  border-radius:50%; background:rgba(8,12,24,.92); }
.sc-num{ position:relative; font-size:20px; font-weight:900; z-index:1; }
.hud-shotclock.paused{ opacity:.42; }
.hud-shotclock.warn .sc-ring{
  background:conic-gradient(#ff4d4d calc(var(--p,1) * 360deg), rgba(255,255,255,.12) 0deg);
  animation:scWarn .5s infinite; }
.hud-shotclock.warn .sc-num{ color:#ff8585; }
@keyframes scWarn{ 50%{ filter:brightness(1.6); transform:scale(1.06); } }

/* ---------- 機能5: ミニマップ（右上・縦長） ---------- */
.hud-minimap{ position:absolute; top:calc(8px + var(--safe-t)); right:8px;
  width:96px; height:120px; border-radius:10px; overflow:hidden;
  background:rgba(8,12,24,.55); border:2px solid rgba(255,255,255,.22);
  box-shadow:0 2px 8px rgba(0,0,0,.4); }
.hud-minimap canvas{ display:block; width:96px; height:120px; }

/* ---------- 機能7: 敵情報（SELECT時・字幕直上） ---------- */
.hud-enemy{ position:absolute; left:8px; right:8px; bottom:calc(140px + var(--safe-b));
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:13px; font-weight:800; }
.hud-enemy .en-dot{ width:14px; height:14px; border-radius:50%; background:var(--enemy);
  box-shadow:0 0 0 2px rgba(255,255,255,.4) inset; }
.hud-enemy .en-name,.hud-enemy .en-stat{ background:rgba(8,12,24,.66);
  padding:3px 10px; border-radius:12px; backdrop-filter:blur(4px); }
.hud-enemy .en-stat{ color:#ff9b9b; }

/* ---------- 機能4: 実況字幕（下帯） ---------- */
.hud-commentary{ position:absolute; left:8px; right:8px; bottom:calc(100px + var(--safe-b));
  display:flex; justify-content:center; }
.cm-text{ display:inline-block; max-width:100%; text-align:center;
  background:linear-gradient(90deg, rgba(8,12,24,.2), rgba(8,12,24,.82) 18%, rgba(8,12,24,.82) 82%, rgba(8,12,24,.2));
  padding:7px 16px; border-radius:14px; font-size:15px; font-weight:800;
  line-height:1.2; text-shadow:0 2px 6px #000; opacity:0; transform:translateY(8px);
  transition:opacity .22s ease, transform .22s ease; }
.cm-text.show{ opacity:1; transform:translateY(0); }

/* ---------- 機能1: 🎥カメラ切替ボタン（右下隅） ---------- */
.cam-toggle{ position:absolute; right:10px; bottom:calc(150px + var(--safe-b));
  display:flex; flex-direction:column; align-items:center; gap:1px;
  background:rgba(8,12,24,.7); border:2px solid rgba(255,255,255,.3);
  border-radius:16px; padding:7px 9px; color:#fff; cursor:pointer;
  box-shadow:0 3px 0 rgba(0,0,0,.35); }
.cam-toggle:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.35); }
.cam-toggle .cam-ico{ font-size:22px; line-height:1; }
.cam-toggle .cam-lbl{ font-size:10px; font-weight:800; }

/* ---------- 機能7: 3択ボタンの成功率バッジ ---------- */
.choice-btn{ position:relative; }
.choice-btn .rate{ display:flex; flex-direction:column; align-items:center; gap:3px;
  margin-top:4px; width:100%; }
.choice-btn .rate-num{ font-size:14px; font-weight:900; line-height:1;
  text-shadow:0 1px 3px rgba(0,0,0,.5); }
.choice-btn .rate-bar{ width:80%; height:6px; border-radius:4px;
  background:rgba(0,0,0,.35); overflow:hidden; }
.choice-btn .rate-bar i{ display:block; height:100%; width:0%; border-radius:4px;
  background:#7CFC8A; transition:width .3s ease; }
.choice-btn .rate.lo .rate-bar i{ background:#ff6a6a; }
.choice-btn .rate.mid .rate-bar i{ background:var(--yellow); }
.choice-btn .rate.hi .rate-bar i{ background:#7CFC8A; }
.choice-btn.best{ outline:3px solid var(--yellow);
  box-shadow:0 4px 0 rgba(0,0,0,.3), 0 0 16px var(--yellow); }
.choice-btn.best .lbl::after{ content:" ⭐"; }

/* ---------- 320幅 縮小（0.82倍相当） ---------- */
@media (max-width:360px){
  .hud-owner{ width:108px; height:48px; }
  .ow-avatar{ width:34px; height:34px; flex-basis:34px; font-size:17px; }
  .ow-name{ font-size:11px; max-width:62px; }
  .ow-stats{ font-size:10px; }
  .hud-shotclock{ top:calc(62px + var(--safe-t)); width:46px; height:46px; }
  .sc-ring{ width:46px; height:46px; }
  .sc-ring::before{ width:36px; height:36px; }
  .sc-num{ font-size:17px; }
  .hud-minimap{ width:80px; height:100px; }
  .hud-minimap canvas{ width:80px; height:100px; }
  .match-clock{ font-size:12px; padding:2px 9px; }
  .cm-text{ font-size:13px; padding:6px 12px; }
  .choice-btn .rate-num{ font-size:12px; }
  .cam-toggle .cam-ico{ font-size:18px; }
}

/* 小型端末 320幅 */
@media (max-width:340px){
  .card{ width:68px; height:96px; }
  .choice-btn .ico{ font-size:24px; }
  .title{ font-size:17px; }
  .fx-stamp{ font-size:42px; }
  .fx-cutin-copy .name{ font-size:24px; }
  .fx-goal-banner{ font-size:48px; }
}