: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;
  /* pan-x pan-y: スクロールは許可しつつページ自体のピンチ/ダブルタップズームを禁止。
     iOSは user-scalable=no を無視するため、ズームが起きると以後の全タップ座標がずれる。 */
  touch-action:pan-x pan-y; -webkit-touch-callout:none; overscroll-behavior:none; }
/* 100dvh: URLバー伸縮に追従する動的ビューポート。100vh だとバー表示中に
   キャンバスが縦に引き伸ばされ、タップ/線引きの座標が指からずれる。 */
#gl{ position:fixed; inset:0; width:100vw; height:100vh; height:100dvh; display:block; }

#overlay{ position:fixed; inset:0; z-index:5; pointer-events:none; }
#overlay .screen, #overlay .hud, #overlay button{ pointer-events:auto; }
#overlay.replay-skip{ pointer-events:auto; touch-action:none; }
body.replay-active #hud-top,
body.replay-active .hud-game > *:not(.hud-commentary),
body.replay-active #overlay .screen,
body.replay-active #save-ui,
body.replay-active #btn-tactics{ visibility:hidden !important; pointer-events:none !important; }
/* 奪取の一瞬は作戦盤より選手を主役にし、完了後に同じPLAN画面を改めて開く。 */
body.steal-seq-active #hud-top,
body.steal-seq-active .hud-game > *:not(.hud-commentary),
body.steal-seq-active #overlay .screen,
body.steal-seq-active #save-ui,
body.steal-seq-active #btn-tactics{ visibility:hidden !important; pointer-events:none !important; }
.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:grid; grid-template-columns:repeat(6,minmax(0,62px)); gap:8px;
  justify-content:center; width:min(100%,412px); margin:0 auto 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.bench{ border-color:rgba(102,208,255,.68); background:rgba(35,94,137,.3); }
.slot.bench.filled{ border-color:#66d0ff; }
.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:114px; 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; margin-bottom:25px; 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); }
.card-detail{ position:absolute; left:5px; right:5px; bottom:3px; min-height:24px; padding:1px 3px;
  border:1px solid rgba(255,255,255,.55); border-radius:7px; color:#fff; background:rgba(7,14,29,.8);
  font-size:9px; font-weight:900; line-height:1.2; cursor:pointer; }
.card-detail:focus-visible{ outline:2px solid var(--yellow); outline-offset:1px; }

.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; }

/* PK攻撃: 位置は既存の描画ループから直接更新し、見た目とタップ判定の位相を一致させる。 */
.pk-mode .rhythm-only{ display:none; }
.pk-gauge-ui{ width:90%; max-width:360px; margin-bottom:12px; padding:12px 13px 11px;
  border-radius:18px; background:rgba(8,12,24,.84); border:2px solid rgba(255,255,255,.28);
  box-shadow:0 5px 18px rgba(0,0,0,.38); backdrop-filter:blur(5px); }
.pk-gauge-guide{ margin-bottom:8px; text-align:center; color:#fff; font-size:21px; font-weight:900;
  text-shadow:0 2px 6px #000; }
.pk-gauge-row{ opacity:.42; margin-top:8px; }
.pk-gauge-row.active,.pk-gauge-row.done{ opacity:1; }
.pk-gauge-head{ min-height:24px; display:flex; align-items:center; gap:7px; margin-bottom:4px;
  font-size:15px; font-weight:900; }
.pk-step-num{ width:23px; height:23px; border-radius:50%; display:inline-flex; align-items:center;
  justify-content:center; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.5); }
.pk-gauge-row.active .pk-step-num{ background:var(--yellow); color:var(--ink); border-color:#fff; }
.pk-gauge-lock{ margin-left:auto; padding:2px 8px; border-radius:10px; font-size:12px;
  background:rgba(255,255,255,.13); }
.pk-gauge-lock.perfect{ color:#ffe76a; box-shadow:0 0 9px rgba(255,226,70,.45); }
.pk-gauge-lock.good{ color:#7CFC8A; }
.pk-gauge-lock.warn{ color:#ffd27a; }
.pk-gauge-lock.miss{ color:#ff8585; }
.pk-gauge-track{ position:relative; width:100%; height:30px; border-radius:8px;
  border:2px solid rgba(255,255,255,.72);
  background:linear-gradient(90deg,#d94848 0 14%,#f09a3e 27%,#ffe05a 40%,#66e88a 47%,
    #66e88a 53%,#ffe05a 60%,#f09a3e 73%,#d94848 86% 100%);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.38); overflow:visible; }
.pk-gauge-center{ position:absolute; top:-3px; bottom:-3px; left:50%; width:3px;
  transform:translateX(-50%); background:#fff; box-shadow:0 0 7px #fff; opacity:.9; }
.pk-gauge-cursor{ position:absolute; z-index:2; top:-7px; bottom:-7px; left:0; width:5px;
  transform:translateX(-50%); border-radius:3px; background:#fff;
  box-shadow:0 0 0 2px rgba(15,24,45,.82),0 0 12px #fff; pointer-events:none;
  /* transitionを付けると判定位置より遅れて見えるため、毎フレームのleftをそのまま描画する。 */
  transition:none; }
.pk-gauge-cursor::before{ content:""; position:absolute; left:50%; top:-8px; transform:translateX(-50%);
  border-left:6px solid transparent; border-right:6px solid transparent; border-top:7px solid #fff; }
.pk-gauge-cursor.locked{ background:var(--yellow); box-shadow:0 0 0 2px rgba(15,24,45,.82),0 0 12px var(--yellow); }
.pk-gauge-cursor.locked::before{ border-top-color:var(--yellow); }
.pk-gauge-axis{ display:flex; justify-content:space-between; margin-top:4px; padding:0 1px;
  color:rgba(255,255,255,.72); font-size:10px; font-weight:800; }
.pk-gauge-axis b{ color:#eaffef; font-size:10px; }
.pk-mode.pk-step-power .rhythm-btn{ background:linear-gradient(180deg,#ff9c38,#e85a24); }
.pk-mode.pk-step-aim .rhythm-btn{ background:linear-gradient(180deg,#36bdf4,#276de5); }

/* PK攻撃の軌跡入力。HUDより下、3Dキャンバスより上でポインターを受け取る。 */
#pk-trace-layer{ position:fixed; inset:0; z-index:4; display:none; pointer-events:none; }
#pk-trace-layer.active{ display:block; }
#pk-trace-canvas{ position:absolute; inset:0; width:100%; height:100%;
  pointer-events:auto; touch-action:none; cursor:crosshair; }
#pk-trace-layer.locked #pk-trace-canvas{ pointer-events:none; }
#pk-trace-label{ position:absolute; top:calc(68px + var(--safe-t)); left:50%;
  max-width:min(88vw,390px); transform:translateX(-50%); padding:9px 18px;
  border:2px solid rgba(255,255,255,.75); border-radius:20px;
  background:rgba(8,12,24,.84); color:#fff; font-size:17px; font-weight:900;
  text-align:center; white-space:nowrap; text-shadow:0 2px 5px #000;
  box-shadow:0 5px 16px rgba(0,0,0,.38); pointer-events:none; }
#pk-trace-layer.locked #pk-trace-label{ color:var(--yellow); border-color:var(--yellow); }
body.replay-active #pk-trace-layer{ display:none !important; pointer-events:none !important; }

/* ---------- 応援 ---------- */
.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; }

/* ---------- 試合終了ハイライト ---------- */
#result.matchend{ bottom:calc(96px + var(--safe-b)); padding-bottom:8px; }
.match-highlights{ width:min(380px,94vw); padding:10px; border-radius:18px;
  background:rgba(8,12,24,.82); backdrop-filter:blur(8px); box-shadow:0 6px 20px rgba(0,0,0,.35); }
.mh-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:7px; }
.mh-count{ font-size:15px; font-weight:900; }
.mh-play{ min-height:44px; border:0; border-radius:14px; padding:8px 15px; color:#fff;
  background:linear-gradient(160deg,#ff9a3c,#ff5a3c); font-size:16px; font-weight:900; }
.mh-play:disabled{ filter:grayscale(1); opacity:.55; }
.mh-list{ display:flex; flex-direction:column; gap:6px; max-height:min(25vh,190px); overflow-y:auto;
  overscroll-behavior:contain; }
.mh-row{ width:100%; }
.mh-item{ min-height:44px; width:100%; display:grid; grid-template-columns:30px 1fr 18px;
  align-items:center; gap:7px; border:1px solid rgba(255,255,255,.18); border-radius:12px;
  padding:7px 9px; color:#fff; background:rgba(255,255,255,.08); font-size:14px;
  font-weight:800; text-align:left; }
.mh-item[aria-current="true"]{ border-color:var(--yellow); background:rgba(255,210,60,.16); }
.mh-number{ width:26px; height:26px; display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.16); }
.mh-empty{ min-height:44px; display:grid; place-items:center; opacity:.75; font-size:14px; }
.mh-play:focus-visible,.mh-item:focus-visible,.mrv-control:focus-visible{ outline:3px solid var(--yellow); outline-offset:2px; }

/* #overlayの外側で画面タップを受け、既存の自動リプレイスキップと操作を分離する。 */
.match-replay-viewer{ position:fixed; inset:0; z-index:70; pointer-events:auto; touch-action:manipulation; }
.mrv-top,.mrv-bottom{ position:absolute; left:10px; right:10px; display:flex; gap:8px; align-items:center; }
.mrv-top,.mrv-bottom{ transform:translateZ(0); backface-visibility:hidden; }
.mrv-top{ top:calc(10px + var(--safe-t)); }
.mrv-bottom{ bottom:calc(14px + var(--safe-b)); display:grid; grid-template-columns:1fr 1fr; }
.mrv-status{ flex:1; min-height:44px; display:flex; align-items:center; padding:8px 13px;
  border-radius:15px; background:rgba(8,12,24,.82); font-size:14px; font-weight:900;
  text-shadow:0 2px 5px #000; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mrv-control{ min-height:48px; border:0; border-radius:15px; padding:9px 13px;
  color:#fff; font-size:15px; font-weight:900; box-shadow:0 3px 0 rgba(0,0,0,.35); }
.mrv-control.close{ flex:0 0 auto; background:rgba(45,55,75,.92); }
.mrv-control.camera{ background:linear-gradient(160deg,#5b7fd0,#3a52a0); }
.mrv-control.next{ background:linear-gradient(160deg,#ff9a3c,#ff5a3c); }
.mrv-hint{ grid-column:1/-1; justify-self:center; padding:5px 12px; border-radius:12px;
  background:rgba(8,12,24,.72); font-size:12px; font-weight:800; pointer-events:none; }

@media (max-height:620px){
  #result.matchend{ bottom:calc(84px + var(--safe-b)); }
  .result-msg{ margin-bottom:6px; font-size:19px; }
  .match-highlights{ padding:7px; }
  .mh-list{ max-height:92px; }
}

/* ---------- カットイン ---------- */
.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)} }

/* ---- ターンオーバーの負フィードバック（成功時より荒く、短く） ---- */
.fx-negative-flash{ position:absolute; inset:0;
  background:radial-gradient(circle at 50% 48%, rgba(255,120,105,.82), rgba(190,8,28,.6) 48%, rgba(65,0,12,.18) 78%);
  opacity:0; mix-blend-mode:screen; animation:fxNegativeFlash .32s ease-out; }
@keyframes fxNegativeFlash{ 0%{opacity:.92} 38%{opacity:.42} 100%{opacity:0} }
body.fx-negative-hit #gl, body.fx-negative-hit #overlay{
  animation:fxNegativeShake .18s steps(1,end); }
@keyframes fxNegativeShake{ 0%{transform:translate(0,0)} 16%{transform:translate(-5px,2px)}
  34%{transform:translate(4px,-3px)} 54%{transform:translate(-3px,-1px)}
  76%{transform:translate(2px,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部品を再利用）   ============ */
.fx-turnover-cutin .fx-cutin-band{
  background:linear-gradient(100deg,#ff4c4c 0%,#b30f27 52%,#270914 100%);
  animation-duration:.9s; box-shadow:0 0 46px rgba(255,30,48,.55); }
.fx-turnover-cutin .fx-cutin-lines,
.fx-turnover-cutin .fx-cutin-flash,
.fx-turnover-cutin .fx-cutin-figure,
.fx-turnover-cutin .fx-cutin-copy,
.fx-turnover-cutin .fx-cutin-figure .cutin-art{ animation-duration:.9s; }
.fx-turnover-cutin .fx-cutin-flash{ background:#ffb0a8; }
.fx-turnover-cutin .fx-cutin-figure{ left:4%; width:50vw; }
.fx-turnover-cutin .fx-cutin-figure .cutin-art{
  filter:drop-shadow(0 0 28px #ff3344) drop-shadow(0 8px 12px rgba(0,0,0,.65)); }
.fx-turnover-cutin .fx-cutin-figure .cutin-art-glow{
  background:radial-gradient(closest-side,#ff3f4a,transparent 72%); }
.fx-turnover-cutin .turnover-tag{ font-size:17px; font-weight:900; color:#fff;
  background:#b30f27; padding:2px 11px; border-radius:10px; transform:rotate(-4deg);
  box-shadow:0 3px 0 rgba(0,0,0,.45); }
.fx-turnover-cutin .turnover-lead{ font-size:18px; font-weight:900; color:#ffd2d2;
  -webkit-text-fill-color:#ffd2d2; text-shadow:0 2px 5px #28030a; }
.fx-turnover-cutin .fx-cutin-copy .name{
  color:#fff; -webkit-text-fill-color:#fff; -webkit-text-stroke:.6px #740817;
  text-shadow:0 2px 3px #24030a,0 0 18px #ff3f4a; }
.fx-turnover-cutin .fx-cutin-copy .copy{ color:#fff;
  -webkit-text-fill-color:#fff; -webkit-text-stroke:.6px #5b0612;
  text-shadow:0 3px 8px #24030a,0 0 18px #ff3f4a; }

/* 自軍奪取は青緑で成功を即読できるよう、赤い被奪取カットインと対称にする。 */
.fx-steal-cutin .fx-cutin-band{
  background:linear-gradient(100deg,#34e7d0 0%,#087fa0 52%,#062b4c 100%);
  box-shadow:0 0 48px rgba(52,231,208,.58); }
.fx-steal-cutin .fx-cutin-lines,
.fx-steal-cutin .fx-cutin-flash,
.fx-steal-cutin .fx-cutin-figure,
.fx-steal-cutin .fx-cutin-copy,
.fx-steal-cutin .fx-cutin-figure .cutin-art{ animation-duration:var(--steal-dur,1.4s); }
.fx-steal-cutin .fx-cutin-flash{ background:#d8fffb; }
.fx-steal-cutin .fx-cutin-figure{ left:4%; width:50vw; }
.fx-steal-cutin .fx-cutin-figure .cutin-art{
  filter:drop-shadow(0 0 30px #38d9c5) drop-shadow(0 8px 12px rgba(0,0,0,.62)); }
.fx-steal-cutin .fx-cutin-figure .cutin-art-glow{
  background:radial-gradient(closest-side,#38d9c5,transparent 72%); }
.fx-steal-cutin .steal-tag{ font-size:17px; font-weight:900; color:#fff;
  background:#087fa0; padding:2px 11px; border-radius:10px; transform:rotate(-4deg);
  box-shadow:0 3px 0 rgba(0,0,0,.42); }
.fx-steal-cutin .steal-lead{ font-size:18px; font-weight:900; color:#cffff8;
  -webkit-text-fill-color:#cffff8; text-shadow:0 2px 5px #031b31; }
.fx-steal-cutin .fx-cutin-copy .name{
  color:#fff; -webkit-text-fill-color:#fff; -webkit-text-stroke:.6px #075a70;
  text-shadow:0 2px 3px #031b31,0 0 18px #38d9c5; }
.fx-steal-cutin .fx-cutin-copy .copy{ color:#fff;
  -webkit-text-fill-color:#fff; -webkit-text-stroke:.6px #064861;
  text-shadow:0 3px 8px #031b31,0 0 18px #38d9c5; }

.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-points-banner{ position:absolute; top:45%; left:50%; transform:translate(-50%,0) scale(.2) rotate(-7deg);
  padding:7px 24px; border-radius:22px; background:linear-gradient(135deg,#ff7a1c,#ffd23c);
  border:3px solid #fff; box-shadow:0 6px 0 rgba(90,35,0,.55),0 0 34px #ffd23c;
  color:#fff; font-size:42px; font-weight:900; white-space:nowrap;
  -webkit-text-stroke:2px var(--ally-d); text-shadow:0 3px 0 rgba(0,0,0,.3);
  animation:fxPointsIn .48s .12s cubic-bezier(.2,1.55,.3,1) forwards; opacity:0; }
.fx-points-banner.out{ animation:fxPointsOut .4s ease-in forwards; }
@keyframes fxPointsIn{ to{transform:translate(-50%,0) scale(1) rotate(-3deg);opacity:1} }
@keyframes fxPointsOut{ to{transform:translate(-50%,0) scale(1.3) rotate(-3deg);opacity:0} }

/* ---- リプレイ（白ワイプ＋上下レターボックス） ---- */
.fx-replay-bars{ position:absolute; inset:0; z-index:12; }
.fx-replay-bars i{ position:absolute; left:0; right:0; height:10vh; min-height:36px;
  background:#05070c; box-shadow:0 0 18px rgba(0,0,0,.75); transition:transform .24s ease; }
.fx-replay-bars .top{ top:0; transform:translateY(-105%); }
.fx-replay-bars .bottom{ bottom:0; transform:translateY(105%); }
.fx-replay-bars.on .top,.fx-replay-bars.on .bottom{ transform:translateY(0); }
.fx-replay-wipe{ position:absolute; inset:0; z-index:13; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.98) 40%,#fff 55%,transparent 100%);
  transform:translateX(-110%); animation:fxReplaySweep .52s cubic-bezier(.2,.75,.25,1) forwards; }
.fx-replay-wipe.out{ opacity:0; transition:opacity .18s ease; }
.fx-replay-title{ color:#18223a; font-size:44px; font-weight:1000; font-style:italic; letter-spacing:5px;
  -webkit-text-stroke:1px #fff; text-shadow:4px 4px 0 #ffd23c; }
@keyframes fxReplaySweep{ 0%{transform:translateX(-110%)} 48%,64%{transform:translateX(0)} 100%{transform:translateX(110%)} }
.fx-replay-mini{ position:absolute; z-index:14; top:14vh; left:50%; transform:translate(-50%,-16px) scale(.75);
  padding:7px 20px; border-radius:18px; border:2px solid #fff;
  background:linear-gradient(135deg,#2a78ff,#64d8ff); color:#fff; font-size:24px; font-weight:900;
  box-shadow:0 4px 0 rgba(0,25,90,.55),0 0 24px rgba(100,216,255,.75);
  opacity:0; animation:fxReplayMini .28s .18s cubic-bezier(.2,1.5,.3,1) forwards; white-space:nowrap; }
.fx-replay-mini.out{ opacity:0; transition:opacity .25s ease; }
@keyframes fxReplayMini{ to{transform:translate(-50%,0) scale(1);opacity:1} }

/* ---- カット者なしのマイボール転換（短く、操作を止めない） ---- */
.fx-possession-gain{ position:absolute; inset:0; z-index:15; overflow:hidden;
  animation:fxPossessionGainIn .2s ease-out both; }
.fx-possession-gain.out{ animation:fxPossessionGainOut .24s ease-in forwards; }
.fx-possession-gain-flash{ position:absolute; inset:0;
  background:radial-gradient(circle at 50% 50%,rgba(216,255,251,.78),rgba(52,231,208,.32) 44%,transparent 76%);
  mix-blend-mode:screen; animation:fxPossessionGainFlash var(--gain-dur,.9s) ease-out both; }
.fx-possession-gain-banner{ position:absolute; top:28%; left:50%;
  min-width:min(82vw,360px); transform:translate(-50%,-10px) scale(.82);
  display:flex; flex-direction:column; align-items:center; gap:1px; padding:9px 24px 11px;
  border:2px solid rgba(255,255,255,.92); border-radius:22px;
  background:linear-gradient(115deg,rgba(5,87,117,.94),rgba(31,205,183,.94));
  box-shadow:0 5px 0 rgba(2,44,72,.62),0 0 30px rgba(52,231,208,.72);
  color:#fff; text-align:center; white-space:nowrap;
  animation:fxPossessionGainBanner var(--gain-dur,.9s) cubic-bezier(.2,1.35,.3,1) both; }
.fx-possession-gain-reason{ font-size:16px; font-weight:800; color:#d8fffb; }
.fx-possession-gain-lead{ font-size:32px; line-height:1.05; font-weight:1000; font-style:italic;
  -webkit-text-stroke:1px #064861; text-shadow:0 3px 0 rgba(2,44,72,.58),0 0 18px #38d9c5; }
@keyframes fxPossessionGainIn{ from{opacity:0} to{opacity:1} }
@keyframes fxPossessionGainOut{ to{opacity:0;transform:scale(1.02)} }
@keyframes fxPossessionGainFlash{ 0%{opacity:0} 12%{opacity:1} 55%{opacity:.28} 100%{opacity:0} }
@keyframes fxPossessionGainBanner{
  0%{transform:translate(-50%,-10px) scale(.82);opacity:0}
  22%,72%{transform:translate(-50%,0) scale(1);opacity:1}
  100%{transform:translate(-50%,-4px) scale(1.03);opacity:0} }
@media (max-width:640px){
  .fx-possession-gain-banner{ top:24%; min-width:min(88vw,340px); padding:8px 16px 10px; }
  .fx-possession-gain-lead{ font-size:27px; }
}

.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-enemy-dark{ position:absolute; inset:0; opacity:0;
  background:radial-gradient(ellipse 90% 80% at 50% 46%, rgba(6,10,22,.30), rgba(2,4,12,.55));
  animation:fxEnemyDark .4s ease-out forwards; }
.fx-enemy-dark.out{ animation:fxEnemyDarkOut .5s ease-in forwards; }
@keyframes fxEnemyDark{ from{opacity:0} to{opacity:1} }
@keyframes fxEnemyDarkOut{ to{opacity:0} }
.fx-enemy-goal{ position:absolute; top:34%; left:0; right:0; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  animation:fxEnemyGoal .45s cubic-bezier(.2,1.2,.3,1) forwards; }
.fx-enemy-goal.out{ animation:fxEnemyGoalOut .5s ease-in forwards; }
.fx-enemy-goal .egoal-head{ font-size:40px; font-weight:900; font-style:italic;
  color:#c9d4ec; -webkit-text-stroke:3px rgba(10,16,34,.9);
  text-shadow:0 6px 0 rgba(0,0,0,.5), 0 0 24px rgba(90,120,200,.6); }
.fx-enemy-goal .egoal-score{ font-size:56px; font-weight:900;
  color:#e8eefc; -webkit-text-stroke:3px var(--enemy-d, #244bb0);
  text-shadow:0 6px 0 rgba(0,0,0,.5); }
@keyframes fxEnemyGoal{ 0%{transform:translateY(-14px) scale(.9);opacity:0}
  100%{transform:translateY(0) scale(1);opacity:1} }
@keyframes fxEnemyGoalOut{ to{transform:scale(1.08);opacity:0} }
@media (max-width:640px){ .fx-enemy-goal .egoal-head{ font-size:30px; }
  .fx-enemy-goal .egoal-score{ font-size:42px; } }

/* スコア強調パルス */
.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:1; 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:10px; font-weight:700; opacity:.85; margin-top:1px; line-height:1; }
.ow-stats .pw{ color:var(--yellow); }
.ow-stats .sh{ color:#7CFC8A; }
.ow-condition,.condition-row{ display:flex; align-items:center; gap:4px; min-width:0; }
.ow-condition{ margin-top:3px; }
.stamina-meter{ display:block; width:55px; height:5px; overflow:hidden; border-radius:5px;
  background:rgba(255,255,255,.18); box-shadow:0 0 0 1px rgba(255,255,255,.14) inset; }
.stamina-meter i{ display:block; width:100%; height:100%; border-radius:inherit;
  background:linear-gradient(90deg,#33cc7a,#a9ef63); transition:width .24s linear; }
.stamina-meter.low i,.hud-owner.fatigued .stamina-meter i{
  background:linear-gradient(90deg,#ff6b55,#ffc04b); }
.morale-icon{ font-size:12px; line-height:1; }

/* ---------- 機能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; }
.hud-enemy .en-role{ color:#ffe46d; font-size:11px; letter-spacing:.08em; }
/* PK守備中だけ中央上部の対戦カードへ拡張し、操作UIと重ならずキッカー情報を見続けられる。 */
.hud-enemy.save-duel-card{ top:calc(82px + var(--safe-t)); bottom:auto; left:50%; right:auto;
  width:min(88vw,430px); transform:translateX(-50%); flex-wrap:wrap; gap:5px 8px;
  padding:8px 12px; border-radius:16px; border:2px solid rgba(255,220,95,.72);
  background:linear-gradient(135deg,rgba(76,17,24,.92),rgba(11,19,40,.94));
  box-shadow:0 8px 24px rgba(0,0,0,.46),0 0 18px rgba(255,80,80,.18); }
.hud-enemy.save-duel-card .en-role{ flex-basis:100%; text-align:center; }
.hud-enemy.save-duel-card .en-name,.hud-enemy.save-duel-card .en-stat{
  background:transparent; padding:1px 3px; font-size:15px; }
.hud-enemy.save-duel-card .en-stat{ color:#ffcf6a; }

/* ---------- 機能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){
  #formation .title{ font-size:16px; white-space:nowrap; }
  #formation .title b{ font-size:21px; }
  .picked-slots{ gap:5px; }
  .slot{ width:100%; height:68px; border-width:2px; }
  .slot .mini-card .avatar{ width:25px !important; height:25px !important; font-size:12px !important; }
  .substitution-toggle{ top:122px; font-size:12px; padding:7px 10px; }
  .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:9px; }
  .ow-condition .stamina-meter{ width:42px; }
  .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; }
  .pk-gauge-ui{ width:94%; padding:9px 10px 8px; margin-bottom:8px; }
  .pk-gauge-guide{ font-size:18px; margin-bottom:5px; }
  .pk-gauge-row{ margin-top:5px; }
  .pk-gauge-head{ min-height:20px; font-size:13px; margin-bottom:3px; }
  .pk-step-num{ width:20px; height:20px; }
  .pk-gauge-track{ height:25px; }
  .pk-gauge-lock{ font-size:10px; padding:1px 6px; }
  .pk-mode .big-btn.rhythm-btn{ min-height:54px; padding:12px 18px; font-size:23px; }
}

/* 小型端末 320幅 */
@media (max-width:340px){
  .card{ width:68px; height:114px; }
  .card .avatar{ width:36px; height:36px; margin-top:2px; font-size:18px; }
  .card .cname{ max-height:18px; overflow:hidden; margin-top:3px; font-size:8px; line-height:1.05; }
  .card .stats{ gap:3px; font-size:8px; }
  .card-detail{ left:3px; right:3px; padding:1px; font-size:8px; white-space:nowrap; }
  .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; }
  .fx-points-banner{ font-size:34px; }
  .fx-replay-title{ font-size:34px; }
}

/* ============ 生成AIカットインイラスト（docs/19・fx.js CUTIN_IMG） ============ */
.fx-cutin-figure .cutin-art{ position:relative; width:100%; max-height:100%; object-fit:contain;
  filter:drop-shadow(0 0 24px var(--cc)) drop-shadow(0 8px 12px rgba(0,0,0,.55));
  animation:fxArtBob 1.5s ease-in-out; z-index:1; }
.fx-cutin-figure .cutin-art-glow{ position:absolute; inset:10% 6% 0 6%; border-radius:50%;
  background:radial-gradient(closest-side, var(--cc), transparent 72%); opacity:.5;
  animation:fxArtGlow .5s ease-in-out infinite alternate; }
@keyframes fxArtBob{ 0%{transform:scale(.94) rotate(-2deg)} 22%{transform:scale(1.04) rotate(1deg)}
  100%{transform:scale(1) rotate(0)} }
@keyframes fxArtGlow{ from{opacity:.32} to{opacity:.6} }
.fx-cutin.awaken .cutin-art{ filter:drop-shadow(0 0 34px #ffe14a) drop-shadow(0 8px 12px rgba(0,0,0,.55)); }

/* ============ 作戦ボード（docs/19・tactics.js） ============ */
#board-layer{ position:fixed; inset:0; z-index:24; pointer-events:none; display:none; }
#board-layer.active,#board-layer.condition-visible{ display:block; }
#board-input{ position:absolute; inset:0; pointer-events:none; touch-action:none; }
#board-bubble{ position:absolute; left:0; top:0; width:64px; height:64px; border-radius:50%;
  background:rgba(20,30,50,.85); border:3px solid #ffd24a; display:flex; align-items:center;
  justify-content:center; font-size:34px; opacity:0; transition:opacity .12s; will-change:transform;
  box-shadow:0 0 18px rgba(255,210,74,.5); }
#board-bubble.show{ opacity:1; }
#board-stamp{ position:fixed; z-index:25; left:50%; top:40%; transform:translate(-50%,-50%) scale(.4) rotate(-8deg);
  font-size:52px; font-weight:900; color:#fff; -webkit-text-stroke:2.5px #e8452c;
  text-shadow:0 0 26px rgba(255,210,74,.9), 0 6px 0 rgba(0,0,0,.35); opacity:0;
  /* body直下+z25のため必須: 無いと透明のまま画面中央のタップ/線引きを吸い続ける
     （スマホは相対的にスタンプが大きく、中央が広範囲の死に領域になる） */
  pointer-events:none; }
#board-stamp.show{ animation:boardStamp .6s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes boardStamp{ 0%{opacity:0; transform:translate(-50%,-50%) scale(.4) rotate(-8deg)}
  30%{opacity:1; transform:translate(-50%,-50%) scale(1.15) rotate(-8deg)}
  70%{opacity:1; transform:translate(-50%,-50%) scale(1) rotate(-8deg)}
  100%{opacity:0; transform:translate(-50%,-50%) scale(1.05) rotate(-8deg)} }
#board-toast{ position:absolute; left:50%; bottom:26%; transform:translateX(-50%);
  background:rgba(20,30,50,.9); color:#fff; font-size:20px; font-weight:800;
  padding:10px 22px; border-radius:22px; border:2px solid #ffd24a; opacity:0; transition:opacity .25s; }
#board-toast.show{ opacity:1; }
#board-flash{ position:fixed; z-index:25; inset:0; background:#fff; opacity:0; pointer-events:none; }
#board-flash.show{ animation:boardFlash .28s ease-out forwards; }
@keyframes boardFlash{ 0%{opacity:.9} 100%{opacity:0} }
#board-badges .board-badge{ position:absolute; left:0; top:0; min-width:56px; text-align:center;
  background:rgba(16,24,40,.82); color:#fff; font-size:14px; font-weight:900;
  padding:3px 8px; border-radius:14px; border:1.5px solid rgba(255,255,255,.55);
  max-width:calc(100vw - 16px); box-sizing:border-box; white-space:nowrap;
  opacity:0; transition:opacity .2s; will-change:transform; pointer-events:none; }
#board-badges .board-badge.show{ opacity:1; }
#board-ghost{ position:absolute; left:0; top:0; font-size:44px; opacity:0; transition:opacity .2s;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); will-change:transform; pointer-events:none; }
#board-ghost.show{ opacity:.85; }

/* 初回キックオフ前の得点ガイド。ゴールの得点バナーと同じ橙→金を学習色にする。 */
#rule-guide{ position:fixed; z-index:90; inset:0; width:auto; height:auto;
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  padding:0; border:0; border-radius:0; appearance:none;
  background:rgba(5,10,22,.58); color:#fff;
  font:900 20px/1.25 system-ui,sans-serif; text-align:center;
  text-shadow:0 2px 0 rgba(70,30,0,.5); -webkit-tap-highlight-color:transparent;
  touch-action:none; cursor:pointer; opacity:0; overflow:hidden; }
#rule-guide::before{ content:''; position:absolute; z-index:0; left:50%; top:50%;
  width:min(350px,calc(100vw - 32px)); height:270px;
  transform:translate(-50%,-50%) scale(.9); border:3px solid #fff; border-radius:24px;
  background:linear-gradient(135deg,#ff7a1c,#ffd23c);
  box-shadow:0 8px 0 rgba(90,35,0,.55),0 0 34px rgba(255,210,60,.8); }
#rule-guide > *{ position:relative; z-index:1; width:min(310px,calc(100vw - 68px)); box-sizing:border-box; }
#rule-guide.show{ display:flex; animation:ruleGuideBackdropIn .2s ease-out forwards; }
#rule-guide.show::before{ animation:ruleGuideCardIn .28s cubic-bezier(.2,1.4,.3,1) forwards; }
#rule-guide .rule-guide-title{ font-size:28px; letter-spacing:.03em; }
#rule-guide span:not(.rule-guide-title){ padding:7px 8px; border-radius:13px;
  background:rgba(75,35,0,.24); }
#rule-guide span.gold{ background:rgba(255,247,184,.92); color:#593000;
  text-shadow:none; box-shadow:inset 0 0 0 2px rgba(255,255,255,.7); }
#rule-guide b{ font-size:1.22em; }
#rule-guide small{ margin-top:3px; font-size:15px; letter-spacing:.04em; }
#rule-guide:focus-visible{ outline:4px solid #fff; outline-offset:-8px; }
@keyframes ruleGuideBackdropIn{ to{ opacity:1; } }
@keyframes ruleGuideCardIn{ to{ transform:translate(-50%,-50%) scale(1); } }

/* ============ 監督モード（docs/20） ============ */
/* 危険割込み: 盤面の赤パルス */
#board-layer.danger::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(255,60,40,.35) 100%);
  animation:dangerPulse .9s ease-in-out 2; }
@keyframes dangerPulse{ 0%,100%{opacity:.2} 50%{opacity:1} }
/* 難易度トグル（編成画面） */
.difficulty-row{ display:flex; align-items:center; justify-content:center; gap:8px; margin:10px 0 4px; }
.diff-label{ font-size:14px; font-weight:800; color:#cfe0ff; }
.diff-btn{ font-size:14px; font-weight:900; padding:8px 16px; border-radius:16px;
  border:2px solid rgba(255,255,255,.35); background:rgba(20,32,56,.8); color:#dfe8ff; }
.diff-btn.on{ background:#ffd24a; color:#3a2405; border-color:#fff; box-shadow:0 2px 0 rgba(0,0,0,.35); }

/* ============ 指示UI明確化（ユーザーFB 2026-07-12） ============ */
/* ジェスチャー凡例バー */
#board-hint{ position:absolute; left:50%; bottom:calc(12px + var(--safe-b)); transform:translateX(-50%) translateY(20px);
  width:max-content; max-width:calc(100vw - 16px); white-space:normal; text-align:center; line-height:1.4;
  word-break:keep-all;   /* 折返しは空白区切りのみ（「うて/ない」のような語中分断を防ぐ） */
  background:rgba(12,20,38,.88); color:#e8f0ff; font-size:13px; font-weight:800;
  padding:8px 14px; border-radius:18px; border:1.5px solid rgba(255,255,255,.35);
  opacity:0; transition:opacity .25s, transform .25s; pointer-events:none; }
#board-hint.show{ opacity:1; transform:translateX(-50%) translateY(0); }
#board-hint b{ font-size:15px; }
#board-hint.defense{ white-space:normal; width:max-content; max-width:calc(100vw - 20px);
  text-align:center; line-height:1.35; }
/* 選手チップの種別色 */
#board-badges .board-badge.owner{ background:rgba(255,190,40,.95); color:#3a2405;
  border-color:#fff; font-size:13px; }
#board-badges .board-badge.carrier{ background:rgba(255,70,50,.95); color:#fff;
  border-color:#ffd0c8; animation:carrierPulse .8s ease-in-out infinite; }
#board-badges .board-badge.mark{ background:rgba(32,78,128,.94); color:#e8f5ff;
  border-color:#9ad7ff; box-shadow:0 0 10px rgba(100,190,255,.4); }
#board-badges .board-badge.fatigued{ background:rgba(116,49,28,.94); color:#fff2c7;
  border-color:#ffb34f; box-shadow:0 2px 7px rgba(0,0,0,.5),0 0 12px rgba(255,145,55,.52); }
#board-badges .board-badge.zone{ background:rgba(93,57,4,.9); border-color:#ffd23c;
  color:#fff2bd; font-size:13px; box-shadow:0 2px 8px rgba(65,33,0,.6),0 0 12px rgba(255,210,60,.3); }
@keyframes carrierPulse{ 0%,100%{opacity:.85} 50%{opacity:1} }

/* スマホ幅: 選手チップが密集して重なるため一回り小さくして視認性を確保 */
@media(max-width:480px){
  #board-badges .board-badge{ font-size:11px; min-width:44px; padding:2px 6px; border-width:1px; }
  #board-badges .board-badge.owner,
  #board-badges .board-badge.zone{ font-size:11px; }
  #board-hint{ font-size:12px; padding:7px 10px; }
  #board-hint b{ font-size:13px; }
}

@media(max-width:380px),(max-height:620px){
  #rule-guide{ gap:6px; font-size:17px; }
  #rule-guide::before{ width:min(330px,calc(100vw - 22px)); height:220px; border-radius:20px; }
  #rule-guide > *{ width:min(292px,calc(100vw - 48px)); }
  #rule-guide .rule-guide-title{ font-size:23px; }
  #rule-guide span:not(.rule-guide-title){ padding:5px 6px; }
  #rule-guide small{ font-size:13px; }
}

/* ============ 作戦メニュー（rules-v3・DQ式プリセット） ============ */
#btn-tactics{ position:fixed; top:132px; right:8px; z-index:40; font-size:13px; font-weight:900;
  padding:8px 12px; border-radius:16px; border:2px solid rgba(255,255,255,.5);
  background:rgba(16,26,48,.88); color:#ffe9a8; box-shadow:0 2px 8px rgba(0,0,0,.4); }
#tactics-menu{ position:fixed; inset:0; z-index:60; display:none;
  background:rgba(8,12,24,.72); align-items:center; justify-content:center; }
#tactics-menu.open{ display:flex; }
.tm-sheet{ width:min(92vw,420px); max-height:88vh; overflow-y:auto;
  background:linear-gradient(180deg,#17233f,#0f1830); border:2px solid rgba(255,255,255,.25);
  border-radius:18px; padding:14px 16px; color:#eaf2ff; }
.tm-title{ font-size:19px; font-weight:900; text-align:center; margin-bottom:6px; }
.tm-sub{ font-size:13px; font-weight:800; color:#9fc0ff; margin:10px 0 6px; }
.tm-row{ display:flex; flex-wrap:wrap; gap:7px; }
.tac-chip{ font-size:13px; font-weight:900; padding:9px 12px; border-radius:14px;
  border:2px solid rgba(255,255,255,.3); background:rgba(255,255,255,.06); color:#dfe8ff; }
.tac-chip.on{ background:#ffd24a; color:#3a2405; border-color:#fff; }
.tac-chip.rec{ box-shadow:0 0 10px rgba(255,220,80,.45); }
#tm-pitch{ display:block; margin:4px auto; border-radius:10px; touch-action:none;
  width:min(80vw,300px); }
.tm-actions{ display:flex; gap:10px; justify-content:center; margin-top:10px; }
.tm-actions button{ font-size:14px; font-weight:900; padding:10px 16px; border-radius:14px;
  border:2px solid rgba(255,255,255,.35); background:rgba(255,255,255,.08); color:#fff; }
#tm-close{ background:#ffd24a !important; color:#3a2405 !important; border-color:#fff !important; }

/* ============ リッチ選手交代（issue #173） ============ */
.substitution-toggle{ position:fixed; top:132px; left:8px; z-index:45; font-size:14px; font-weight:900;
  padding:9px 13px; border-radius:17px; border:2px solid rgba(255,255,255,.7);
  background:linear-gradient(180deg,#35c9a0,#168567); color:#fff;
  box-shadow:0 3px 9px rgba(0,0,0,.42); }
.substitution-toggle.reserved{ border-color:#fff0a0; color:#302100;
  background:linear-gradient(180deg,#ffe46e,#f0a72e); animation:subReservationPulse 1.1s ease-in-out infinite; }
@keyframes subReservationPulse{ 50%{ box-shadow:0 0 18px rgba(255,221,92,.72); } }
/* ベンチ0: 消さずに「ある機能」だと分かる薄い見た目にする（タップで作り方トースト） */
.substitution-toggle.no-bench{ opacity:.55; filter:saturate(.35);
  background:linear-gradient(180deg,#5a7c90,#39536b); border-color:rgba(255,255,255,.4); }

/* 画面下部のヒント吹き出し（ui.showHintToast） */
.ui-hint-toast{ position:fixed; left:50%; bottom:calc(84px + var(--safe-b)); transform:translate(-50%, 8px);
  z-index:96; max-width:min(86vw, 460px); padding:9px 16px; border-radius:16px;
  background:rgba(10,20,40,.92); border:1.5px solid #8fd8ff; color:#eaf6ff;
  font-size:14px; font-weight:800; text-align:center; pointer-events:none;
  opacity:0; transition:opacity .22s ease, transform .22s ease; }
.ui-hint-toast.show{ opacity:1; transform:translate(-50%, 0); }
.substitution-menu{ position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center;
  padding:calc(12px + var(--safe-t)) 12px calc(12px + var(--safe-b));
  background:rgba(3,8,20,.88); backdrop-filter:blur(5px); pointer-events:auto; }
.substitution-menu.open{ display:flex; }
.substitution-sheet{ width:min(96vw,1120px); max-height:calc(100dvh - 24px - var(--safe-t) - var(--safe-b));
  overflow-y:auto; padding:17px;
  border:2px solid rgba(255,255,255,.36); border-radius:20px; color:#eef7ff;
  background:linear-gradient(155deg,#183f68,#111c35 55%,#241947); box-shadow:0 12px 38px rgba(0,0,0,.64); }
.substitution-title{ font-size:22px; font-weight:900; text-align:center; }
.substitution-guide{ margin:5px 0 13px; color:#b9d7ef; font-size:13px; font-weight:800; text-align:center; }
.substitution-workspace{ display:grid; grid-template-columns:minmax(190px,.8fr) minmax(430px,1.7fr) minmax(190px,.8fr);
  grid-template-areas:"field compare bench"; align-items:start; gap:12px; }
.substitution-roster{ min-width:0; padding:10px; border:1px solid rgba(143,220,255,.3); border-radius:16px;
  background:rgba(3,12,28,.35); }
.substitution-roster.field{ grid-area:field; }
.substitution-roster.bench{ grid-area:bench; }
.substitution-label{ margin:0 0 7px; color:#8fdcff; font-size:13px; font-weight:900; letter-spacing:.05em; }
.substitution-cards{ display:grid; gap:7px; }
.substitution-card{ min-width:0; min-height:86px; padding:7px; border-radius:13px;
  border:2px solid rgba(255,255,255,.28); background:rgba(255,255,255,.07); color:#fff;
  display:flex; align-items:center; gap:8px; text-align:left; cursor:pointer; }
.substitution-card:hover{ background:rgba(255,255,255,.12); }
.substitution-card.selected{ border-color:#ffe466; background:rgba(255,210,60,.2);
  box-shadow:0 0 13px rgba(255,220,80,.38); }
.substitution-card .sub-face{ flex:0 0 38px; width:38px; height:38px; display:grid; place-items:center;
  border:2px solid rgba(255,255,255,.68); border-radius:50%; font-size:19px; box-shadow:0 3px 8px rgba(0,0,0,.3); }
.substitution-card .sub-card-body{ min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
.substitution-card .sub-name{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:12px; font-weight:900; }
.substitution-card .sub-pos{ color:#b8ccec; font-size:10px; font-weight:800; }
.substitution-card .sub-condition{ width:100%; justify-content:flex-start; gap:4px; }
.substitution-card .sub-condition .stamina-meter{ width:min(68px,58%); height:7px; }
.substitution-card .stamina-value{ min-width:18px; color:#e8f6ff; font-size:9px; font-weight:900; text-align:right; }
.substitution-card .morale-icon{ font-size:15px; }
.substitution-card .sub-tags{ min-height:17px; display:flex; gap:3px; justify-content:flex-start; flex-wrap:wrap; }
.substitution-card .sub-tag{ padding:2px 5px; border-radius:8px; font-size:9px; font-weight:900;
  color:#24334b; background:#8edfff; }
.substitution-card .sub-tag.owner{ color:#402900; background:#ffd84d; }
.substitution-comparison{ grid-area:compare; min-width:0; min-height:420px; padding:10px;
  border:1px solid rgba(255,224,103,.38); border-radius:17px; background:rgba(5,10,25,.36); }
.substitution-comparison-placeholder{ min-height:390px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:10px; color:#bed6ee; text-align:center; font-size:13px; }
.substitution-comparison-placeholder span{ font-size:34px; }
.substitution-comparison-content{ display:grid; gap:9px; }
.substitution-preview-frame{ position:relative; overflow:hidden; border:1px solid rgba(130,203,255,.46);
  border-radius:14px; background:linear-gradient(180deg,#17385b,#08152a); }
.substitution-preview-host{ position:relative; width:100%; height:210px; }
.substitution-preview-host #char-popup-canvas{ display:block; width:100%; height:210px; min-height:210px; }
.substitution-preview-loading{ position:absolute; inset:0; z-index:2; display:grid; place-items:center;
  color:#dff5ff; font-size:13px; font-weight:900; background:rgba(6,16,34,.28); pointer-events:none; }
.substitution-preview-labels{ position:absolute; left:8px; right:8px; bottom:7px; z-index:3;
  display:grid; grid-template-columns:1fr 1fr; gap:34px; pointer-events:none; }
.substitution-preview-labels span{ overflow:hidden; padding:3px 7px; border-radius:9px;
  background:rgba(4,10,23,.78); color:#fff; font-size:10px; font-weight:900; text-align:center;
  text-overflow:ellipsis; white-space:nowrap; }
.substitution-detail-grid{ display:grid; grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr); gap:7px; align-items:stretch; }
.substitution-direction{ display:grid; place-items:center; color:#ffe36a; font-size:22px; font-weight:900; }
.substitution-detail{ min-width:0; padding:9px; border-radius:13px; background:rgba(255,255,255,.065); }
.substitution-detail.incoming{ box-shadow:inset 0 0 0 1px rgba(255,225,100,.25); }
.substitution-detail header h4{ overflow:hidden; margin:0; color:#fff; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.sub-comparison-meta{ margin-top:2px; color:#b9d7ef; font-size:9px; font-weight:900; }
.sub-comparison-traits{ display:flex; flex-wrap:wrap; gap:3px; min-height:21px; margin:6px 0; }
.sub-comparison-traits span{ padding:2px 5px; border:1px solid rgba(255,224,98,.38); border-radius:8px;
  color:#fff0a4; background:rgba(255,210,65,.1); font-size:8px; font-weight:900; }
.sub-comparison-stats{ display:grid; gap:5px; }
.sub-comparison-metric-head{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:4px;
  color:#dcecff; font-size:9px; font-weight:900; }
.sub-comparison-metric-head strong{ color:#fff5ad; font-size:11px; }
.sub-comparison-meter{ display:block; height:5px; overflow:hidden; border-radius:5px; background:rgba(0,0,0,.45); }
.sub-comparison-meter i{ display:block; height:100%; border-radius:inherit;
  background:linear-gradient(90deg,#3bd7ff,#75f4b9); }
.sub-comparison-meter.shoot i{ background:linear-gradient(90deg,#ff776c,#ffd25d); }
.sub-comparison-meter.save i{ background:linear-gradient(90deg,#789fff,#9d7dff); }
.sub-comparison-meter.stamina i{ background:linear-gradient(90deg,#28c77c,#9aef5b); }
.sub-comparison-meter.morale i{ background:linear-gradient(90deg,#ff9f43,#ffe66d); }
.sub-diff{ min-width:25px; padding:1px 4px; border-radius:7px; font-size:9px; text-align:center; }
.sub-diff.up{ color:#b9ffd0; background:rgba(42,195,108,.25); }
.sub-diff.down{ color:#ffd0cc; background:rgba(255,85,76,.24); }
.sub-diff.same{ color:#cbd7e5; background:rgba(255,255,255,.1); }
.substitution-status{ min-height:21px; margin:10px 0 5px; text-align:center; color:#ffe787;
  font-size:13px; font-weight:900; }
/* 確定/キャンセルはシート内スクロールでも常に見える位置に固定する。
   低い横長ビューポート（例: 高さ577px）で比較ビューが伸びると、
   ボタンが画面外に落ちて「交代できない」ように見えるのを防ぐ（実プレイレビューで検出）。 */
.substitution-actions{ display:flex; justify-content:center; gap:10px;
  position:sticky; bottom:-17px; margin:0 -17px; padding:10px 17px calc(10px + var(--safe-b));
  background:linear-gradient(180deg, rgba(17,28,53,0), rgba(17,28,53,.96) 34%); }
.substitution-actions button{ flex:1; min-height:44px; padding:11px 12px; border-radius:14px; font-size:14px; font-weight:900;
  border:2px solid rgba(255,255,255,.4); background:rgba(255,255,255,.08); color:#fff; }
#substitution-confirm{ background:#27aa7f; }
#substitution-confirm:disabled{ opacity:.42; filter:grayscale(.7); }
body.replay-active #btn-substitution{ visibility:hidden !important; pointer-events:none !important; }

@media (max-width:920px){
  .substitution-menu{ align-items:flex-start; padding:calc(7px + var(--safe-t)) 7px calc(7px + var(--safe-b)); }
  .substitution-sheet{ width:100%; max-height:calc(100dvh - 14px - var(--safe-t) - var(--safe-b)); padding:11px; }
  .substitution-workspace{ grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"field bench" "compare compare"; gap:8px; }
  .substitution-roster{ padding:7px; }
  .substitution-card{ min-height:82px; padding:6px; gap:6px; }
  .substitution-card .sub-face{ flex-basis:32px; width:32px; height:32px; font-size:16px; }
  .substitution-comparison{ min-height:0; padding:7px; }
  .substitution-comparison-placeholder{ min-height:116px; }
  .substitution-preview-host,.substitution-preview-host #char-popup-canvas{ height:190px; min-height:190px; }
}

@media (max-width:420px){
  .substitution-title{ font-size:18px; }
  .substitution-guide{ font-size:11px; }
  .substitution-label{ font-size:11px; }
  .substitution-card{ min-height:91px; flex-direction:column; align-items:center; gap:3px; text-align:center; }
  .substitution-card .sub-face{ flex-basis:30px; width:30px; height:30px; }
  .substitution-card .sub-card-body{ width:100%; align-items:center; }
  .substitution-card .sub-condition,.substitution-card .sub-tags{ justify-content:center; }
  .substitution-card .sub-condition .stamina-meter{ width:min(54px,55%); }
  .substitution-preview-host,.substitution-preview-host #char-popup-canvas{ height:175px; min-height:175px; }
  .substitution-detail{ padding:7px 5px; }
  .substitution-detail-grid{ grid-template-columns:minmax(0,1fr) 17px minmax(0,1fr); gap:3px; }
  .substitution-direction{ font-size:17px; }
  .sub-comparison-metric-head{ font-size:8px; }
  .sub-comparison-metric-head strong{ font-size:10px; }
  .sub-diff{ min-width:20px; padding:1px 2px; font-size:8px; }
}

/* ============ 選手詳細ポップアップ（issue #172） ============ */
.char-popup{ position:fixed; inset:0; z-index:110; display:none; align-items:center; justify-content:center;
  padding:calc(12px + var(--safe-t)) 12px calc(12px + var(--safe-b));
  background:rgba(3,8,19,.84); backdrop-filter:blur(5px); pointer-events:auto; }
.char-popup.open{ display:flex; }
.char-popup-dialog{ position:relative; width:min(860px,96vw); max-height:calc(100dvh - 24px - var(--safe-t) - var(--safe-b));
  overflow:auto; border:2px solid rgba(137,208,255,.7); border-radius:24px; color:#eef7ff;
  background:linear-gradient(155deg,#183a61 0%,#111c35 56%,#241947 100%);
  box-shadow:0 18px 60px rgba(0,0,0,.65),0 0 34px rgba(67,170,255,.2); }
.char-popup-dialog:focus{ outline:none; }
.char-popup-dialog:focus-visible{ outline:3px solid #ffe36a; outline-offset:2px; }
.char-popup-close{ position:absolute; top:10px; right:10px; z-index:3; width:40px; height:40px;
  border:2px solid rgba(255,255,255,.55); border-radius:50%; color:#fff; background:rgba(5,12,28,.74);
  font-size:27px; font-weight:900; line-height:1; cursor:pointer; }
.char-popup-close:focus-visible{ outline:3px solid #ffe36a; }
.char-popup-layout{ display:flex; align-items:stretch; gap:18px; padding:18px; }
.char-popup-preview{ position:relative; flex:0 0 43%; min-width:280px; min-height:410px; overflow:hidden;
  border:1px solid rgba(147,219,255,.35); border-radius:18px;
  background:radial-gradient(circle at 50% 35%,rgba(82,187,255,.32),rgba(10,24,52,.92) 64%); }
#char-popup-canvas{ display:block; width:100%; height:min(58vh,430px); min-height:410px; }
.char-popup-loading{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%); white-space:nowrap;
  padding:5px 10px; border-radius:12px; color:#d9efff; background:rgba(4,11,25,.68);
  font-size:11px; font-weight:900; pointer-events:none; }
.char-popup-params{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.char-popup-head{ padding:5px 52px 7px 0; border-bottom:1px solid rgba(255,255,255,.15); }
.char-popup-head h2{ margin:0; font-size:25px; line-height:1.15; color:#fff; }
.char-popup-meta{ display:flex; gap:7px; margin-top:7px; }
.char-popup-meta span{ padding:3px 9px; border-radius:10px; background:rgba(255,255,255,.12);
  color:#d9efff; font-size:12px; font-weight:900; }
#char-popup-rarity[data-rarity="SR"]{ color:#ffd36e; background:rgba(255,173,55,.18); }
#char-popup-rarity[data-rarity="UR"]{ color:#ff9ec9; background:rgba(255,62,144,.2); }
.char-popup-section-title{ margin:13px 0 6px; color:#8fdcff; font-size:12px; font-weight:900; letter-spacing:.08em; }
.char-popup-stats{ display:grid; gap:7px; }
.char-popup-stat,.char-popup-condition-row{ display:grid; grid-template-columns:minmax(105px,1fr) auto;
  align-items:center; gap:3px 8px; font-size:12px; font-weight:900; }
.char-popup-stat b,.char-popup-condition-row b{ color:#fff2a3; font-size:14px; }
.char-popup-meter{ grid-column:1/-1; display:block; width:100%; height:8px; overflow:hidden;
  border-radius:8px; background:rgba(0,0,0,.4); box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); }
.char-popup-meter i{ display:block; width:0; height:100%; border-radius:inherit;
  background:linear-gradient(90deg,#39d5ff,#7cffbd); transition:width .18s ease; }
.char-popup-stat[data-stat="shoot"] .char-popup-meter i{ background:linear-gradient(90deg,#ff806e,#ffd35c); }
.char-popup-stat[data-stat="save"] .char-popup-meter i{ background:linear-gradient(90deg,#739dff,#9a7cff); }
.char-popup-traits{ display:flex; flex-wrap:wrap; gap:7px; min-height:30px; }
.char-popup-trait{ padding:6px 10px; border:1px solid rgba(255,226,98,.5); border-radius:13px;
  background:rgba(255,210,65,.13); color:#fff4b0; font-size:12px; font-weight:900; }
.char-popup-condition{ display:grid; gap:10px; padding:10px; border-radius:14px; background:rgba(0,0,0,.18); }
.char-popup-meter.stamina i{ width:100%; background:linear-gradient(90deg,#28c77c,#9aef5b); }
.char-popup-condition-row.morale{ grid-template-columns:1fr auto auto; }
.char-popup-morale-icon{ min-width:38px; text-align:center; font-size:25px; }
body.char-popup-open{ overflow:hidden; }

@media (max-width:640px){
  .char-popup{ align-items:flex-start; padding:calc(8px + var(--safe-t)) 8px calc(8px + var(--safe-b)); }
  .char-popup-dialog{ width:100%; max-height:calc(100dvh - 16px - var(--safe-t) - var(--safe-b)); border-radius:19px; }
  .char-popup-layout{ flex-direction:column; gap:10px; padding:12px; }
  .char-popup-preview{ flex:none; width:100%; min-width:0; min-height:215px; height:215px; }
  #char-popup-canvas{ height:215px; min-height:215px; }
  .char-popup-head{ padding-top:0; }
  .char-popup-head h2{ font-size:21px; }
  .char-popup-section-title{ margin-top:10px; }
}

@media (max-width:340px){
  .char-popup-preview,#char-popup-canvas{ height:185px; min-height:185px; }
  .char-popup-layout{ padding:9px; }
  .char-popup-trait{ font-size:11px; padding:5px 8px; }
}

/* ============ セーブイベント（通常SAVE／PK守備 共用） ============ */
#save-ui{ position:fixed; left:0; right:0; bottom:11vh; z-index:35; display:none;
  flex-direction:column; align-items:center; gap:10px; pointer-events:none; }
#save-ui.show{ display:flex; }
#save-ui .save-mode-label{ padding:4px 14px; border-radius:14px; color:#ffe56b;
  background:rgba(8,14,31,.86); border:1px solid rgba(255,229,107,.7);
  font-size:13px; font-weight:900; letter-spacing:.08em; }
#save-ui .save-q{ font-size:19px; font-weight:900; color:#fff; text-align:center;
  background:rgba(200,40,30,.9); padding:8px 20px; border-radius:20px;
  border:2px solid #ffd0c8; animation:carrierPulse .7s ease-in-out infinite; }
#save-ui.pk-defense .save-q{ background:linear-gradient(135deg,rgba(192,34,43,.96),rgba(35,72,170,.96));
  border-color:#ffe56b; box-shadow:0 0 20px rgba(255,222,80,.28); }
#save-ui .save-btns{ display:flex; gap:18px; pointer-events:auto; }
#save-ui .save-btns button{ font-size:22px; font-weight:900; padding:18px 26px;
  border-radius:20px; border:3px solid #fff; background:rgba(20,32,60,.92); color:#fff;
  box-shadow:0 4px 0 rgba(0,0,0,.4); min-width:130px; touch-action:manipulation; }
#save-ui .save-btns button:active{ transform:translateY(3px); box-shadow:none; }
#save-ui .save-btns button.selected{ opacity:1; color:#1a2442; background:#ffe151;
  border-color:#fff7bd; box-shadow:0 0 20px rgba(255,225,81,.64); }
#save-ui .save-btns button.not-selected{ opacity:.3; filter:grayscale(.7); }
#save-ui .save-lock{ padding:5px 14px; border-radius:14px; background:rgba(9,17,38,.9);
  color:#ffe56b; border:1px solid rgba(255,229,107,.6); font-size:14px; font-weight:900; }
#cheer.pk-defense-mode .cheer-label{ color:#ffe56b; }
#cheer.pk-defense-mode .cheer-fill{ background:linear-gradient(90deg,#3aa7ff,#ffe45d,#ff5b5b); }
@media (max-width:360px){
  .hud-enemy.save-duel-card{ top:calc(75px + var(--safe-t)); padding:6px 9px; }
  .hud-enemy.save-duel-card .en-name,.hud-enemy.save-duel-card .en-stat{ font-size:13px; }
  #save-ui{ bottom:calc(7vh + var(--safe-b)); gap:7px; }
  #save-ui .save-q{ max-width:94vw; padding:7px 12px; font-size:16px; }
  #save-ui .save-btns{ gap:9px; }
  #save-ui .save-btns button{ min-width:0; width:44vw; padding:14px 8px; font-size:18px; }
}