/* 色はすべてこの2つのブロックで決まる(画面の右上でダーク⇄ライトを切り替える)。既定はダーク。
   点灯中のタブやバッジは「明るい面＋濃い文字」なので、どちらのテーマでも同じものを使う */
:root{
  --bg:#0c1122; --bg2:#131a33; --panel:#1a2342; --line:#2a3560;
  --ink:#eef1fb; --sub:#8b96c2; --cy:#43e0ff; --gl:#4d8dff; --ml:#b06cff;
  --win:#3ddc84; --lose:#ff6b81; --gold:#ffd54a;
  --tab:linear-gradient(180deg,#1e2850,#151d38); --tabsh:rgba(0,0,0,.4); --tabin:rgba(255,255,255,.05);
  --deep:#0a0f22; --line2:#3b4a86; --onml:#140a26;
  --mcS:#c396ff; --mcM:#f58fc2;   /* 絞り込みタブの未選択文字色(火力チェッカーと同じ値) */
  --goldc:#e8c56a;                /* 金系タブの未選択文字色 */
  --rklink:#ff8f8f; --rklinkbg:linear-gradient(180deg,#2a1c2e,#1d1526);
  --rkkindbg:linear-gradient(180deg,#241c33,#191428);
  --bgimg:#0c1122; --cardsh:none;
  --tcolor:#0c1122;   /* スマホのアドレスバーの色(theme.js が読む) */
  --r:14px;
  font-size:16px;
}
:root.light{
  --bg:#eef2fb; --bg2:#fbfcff; --panel:rgba(255,255,255,.88); --line:#dfe6f5;
  --ink:#20263a; --sub:#5f6a92; --cy:#0b8fa8; --gl:#2f5fd0; --ml:#8b5cf6;
  --win:#1f9d55; --lose:#d63a52; --gold:#a8760a;
  --tab:linear-gradient(180deg,#fff,#eff3fc); --tabsh:rgba(30,40,90,.13); --tabin:#fff;
  --deep:#e8edf7; --line2:#b9c6e4; --onml:#ffffff;
  --mcS:#7a3cc4; --mcM:#c02c76;
  --goldc:#a8760a;
  --rklink:#c62b46; --rklinkbg:linear-gradient(180deg,#fff,#ffeef1);
  --rkkindbg:linear-gradient(180deg,#fff,#fff2f4);
  /* 白一色にせず、このツールの色(青・紫・水色)を淡くにじませる */
  --bgimg:
    radial-gradient(900px 520px at -10% -10%, rgba(59,110,240,.17), transparent 62%),
    radial-gradient(820px 540px at 112% 6%, rgba(139,92,246,.16), transparent 62%),
    radial-gradient(950px 620px at 50% 115%, rgba(8,180,201,.15), transparent 62%),
    linear-gradient(165deg,#e9f1ff 0%,#efe9ff 50%,#e6f6fb 100%);
  --cardsh:0 14px 30px -18px rgba(59,110,240,.32), 0 1px 0 rgba(255,255,255,.8) inset;
  --tcolor:#eef2fb;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bgimg);background-attachment:fixed;min-height:100vh;color:var(--ink);font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;line-height:1.55;padding-bottom:64px}
.wrap{max-width:760px;margin:0 auto;padding:14px}
header{padding:18px 0 6px}
.eyebrow{font-family:"Oswald",sans-serif;font-size:.68rem;letter-spacing:.34em;color:var(--ebc,#8b96c2);text-transform:uppercase;display:flex;align-items:center;gap:10px;margin-bottom:8px}
.eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--ebc,#8b96c2),transparent);opacity:.55}
.eb-gbl{--ebc:#2773ff}
.eb-rocket{--ebc:#ff2424}
.eb-blog{--ebc:#d99a11}
h1{font-size:1.45rem;letter-spacing:.03em}
h1 b{background:linear-gradient(92deg,var(--gl),var(--ml));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--sub);font-size:.8rem;margin-top:4px}
/* リーグ */
/* リーグごとに色を持たせる(スーパー=青 / ハイパー=黄 / マスター=紫 / 特殊カップ=白っぽいグレー)。
   選んでいないときは色を控えめに、押すとその色のグラデーションで点灯して立体的に浮き上がる */
.leagues{display:flex;gap:6px;margin-top:12px}
.lgbtn{flex:1;padding:11px 6px;font-size:.9rem;font-weight:800;letter-spacing:.02em;cursor:pointer;
  color:var(--lu,var(--lc));opacity:.72;background:var(--tab);
  border:1px solid var(--line);border-radius:12px;
  box-shadow:0 3px 0 rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease}
.lgbtn:hover{opacity:1;transform:translateY(-1px);
  box-shadow:0 4px 0 rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.1)}
.lgbtn[data-cap="1500"]{--lu:#7aa8ff;--lc:#2f6fe0;--l1:#6fa3ff;--l2:#12409e;--lt:#ffffff;--lg:rgba(47,111,224,.48)}
.lgbtn[data-cap="2500"]{--lc:#ffd54a;--l1:#fff0b8;--l2:#e0a020;--lt:#33260a;--lg:rgba(255,213,74,.38)}
.lgbtn[data-cap="0"]{--lc:#b06cff;--l1:#e3b6ff;--l2:#7d3fd6;--lt:#1c0a33;--lg:rgba(176,108,255,.42)}
#cupTab{--lc:#e6ebfa;--l1:#ffffff;--l2:#b9c3de;--lt:#141b33;--lg:rgba(220,230,255,.35)}
/* ライトのときは、選んでいないタブの文字(--lu/--lc)を白い土台でも読める濃さにする。
   点灯中のグラデーション(--l1/--lc/--l2)はどちらのテーマでも同じ */
:root.light .lgbtn[data-cap="1500"]{--lu:#2f6fe0}
:root.light .lgbtn[data-cap="2500"]{--lu:#a8760a}
:root.light .lgbtn[data-cap="0"]{--lu:#7a3cc4}
:root.light #cupTab{--lu:#5f6a92}
:root.light .lgbtn{opacity:.85}
.lgbtn[aria-pressed="true"]{opacity:1;color:var(--lt);border-color:var(--l1);transform:translateY(-1px);
  background:linear-gradient(160deg,var(--l1) 0%,var(--lc) 45%,var(--l2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.cupwin{margin-top:8px}
.cupslots button{flex:1 0 46%;font-size:.8rem;padding:9px 4px;font-weight:700}
.cupslots button small{display:block;font-weight:400;font-size:.64rem;color:var(--sub);margin-top:2px}
.cupslots button[aria-pressed="true"]{background:var(--ml);border-color:var(--ml);color:var(--onml)}
.cupslots button[aria-pressed="true"] small{color:var(--onml)}
/* 過去のカップ(そのカップが最後に開催されたときの環境)。使う頻度が低いので畳んでおく */
.pasttab{display:block;width:100%;margin-top:8px;padding:7px 6px;font-size:.72rem;font-weight:700;
  background:var(--tab);border:1px solid var(--line);border-radius:9px;color:var(--gold);cursor:pointer;
  box-shadow:0 2px 0 var(--tabsh),inset 0 1px 0 var(--tabin)}
.pasttab:hover{transform:translateY(-1px)}
.pasttab[aria-expanded="true"]{background:linear-gradient(160deg,#ffe89a 0%,var(--gold) 45%,#b8860b 100%);
  border-color:var(--gold);color:#2a1e00;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.pastslots{margin-top:6px;max-height:46vh;overflow-y:auto}
.pastyear{flex:1 0 100%;font-size:.64rem;font-weight:700;color:var(--sub);margin:6px 0 0;padding-left:2px}
.pastyear:first-child{margin-top:0}
.pastload{flex:1 0 100%;font-size:.72rem;color:var(--sub);padding:8px 2px}
@media (max-width:430px){.lgbtn{font-size:.76rem;padding:10px 2px}}
/* 2カラム */
.duel{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.duel.solo{grid-template-columns:1fr}
.side{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px;min-width:0;box-shadow:var(--cardsh)}
.side h2{font-size:.78rem;color:var(--sub);letter-spacing:.08em;margin-bottom:6px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px}
/* シャドウマークのタブ(文字なし・押すとシャドウ補正ON) */
.shadowtab{display:inline-flex;align-items:center;justify-content:center;width:38px;height:30px;padding:0;font-size:1rem;background:var(--bg2);border:1px solid var(--line);border-radius:99px;color:#7d5ca8;cursor:pointer;flex-shrink:0}
.shadowtab[aria-pressed="true"]{background:linear-gradient(135deg,#7c3aed,#b06cff);border-color:#b06cff;color:#fff}
.side.mine h2{color:var(--cy)}
.side.foe h2{color:var(--lose)}
.sugg{position:relative}
.sugg input{width:100%;padding:9px 10px;font-size:.95rem;background:var(--bg2);border:1px solid var(--line);border-radius:10px;color:var(--ink);outline:none}
.sugg input:focus{border-color:var(--gl)}
.sugg-list{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);background:var(--bg2);border:1px solid var(--line);border-radius:10px;max-height:250px;overflow:auto;display:none;box-shadow:0 14px 30px rgba(0,0,0,.5)}
.sugg-list div{display:flex;align-items:center;gap:6px;padding:8px 10px;cursor:pointer;font-size:.86rem}
.sugg-list div:hover{background:#212b52}
/* 名前・タイプ・SCP・★登録が1行に収まらない狭い画面では折り返す(はみ出し防止) */
.pkhead{display:flex;align-items:center;gap:6px;margin-top:8px;min-width:0;flex-wrap:wrap}
.pkhead .nm{font-weight:700;font-size:.98rem;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pkhead .tpair{flex-shrink:0}
.pkhead .scp{font-weight:800;font-size:.9rem;color:var(--gold);flex-shrink:0;white-space:nowrap}
.ivline{color:var(--sub);font-size:.72rem;margin-top:2px}
label.f{display:block;font-size:.7rem;color:var(--sub);margin:8px 0 3px;font-weight:600}
select{width:100%;font:inherit;font-size:.84rem;padding:6px 8px;background:var(--bg2);border:1px solid var(--line);border-radius:8px;color:var(--ink)}
/* わざ欄: 見出しラベルを置かず、選ぶ前は欄の中に薄くわざの種類を出す(選ぶとわざ名に変わる) */
.pkview > select{margin-top:6px}
/* SPアタック2の行: 選んでいるときだけ右に「×」(2本目を外して1本に戻す) */
.c2row{display:flex;align-items:center;gap:6px;margin-top:6px}
.c2row select{flex:1;min-width:0;margin-top:0}
.c2clear{flex-shrink:0;width:30px;height:30px;font-size:.9rem;color:var(--sub);cursor:pointer;
  background:var(--bg2);border:1px solid var(--line);border-radius:8px}
.c2clear:hover{color:var(--lose);border-color:var(--lose)}
/* パーティ枠・模擬戦のわざ欄は小さめなので、×もそれに合わせる */
.pmv .c2row{margin-top:4px;gap:4px}
.pmv .c2clear{width:24px;height:24px;font-size:.78rem;border-radius:6px}
select.ph{color:var(--sub)}
select.ph option{color:var(--ink)}
select option[value=""]{color:var(--sub)}
.opts{display:flex;gap:4px}
.opts button{flex:1;padding:6px 4px;font-size:.78rem;background:var(--bg2);border:1px solid var(--line);border-radius:8px;color:var(--sub);cursor:pointer}
/* タイミングは「溜め打ち」で5タブになる。狭い画面では文字を縦に潰さず行を折り返す */
.opts.timing{flex-wrap:wrap}
.opts.timing button{white-space:nowrap}
.opts button[aria-pressed="true"]{background:var(--ml);border-color:var(--ml);color:var(--onml);font-weight:700}
/* CPブースト(イベントボーナス)の2行組み。イベント限定だと分かる添え書きを小さく出す。
   語の途中で折り返さないよう keep-all＋<wbr>(iOS対応の恒久ルールどおり) */
.opts.smax button{word-break:keep-all}
.opts.smax button small{display:block;font-size:.55rem;font-weight:600;line-height:1.3;opacity:.85}
.opts.sh button[aria-pressed="true"]{background:var(--cy);border-color:var(--cy)}
/* メガLv(＋わざの威力倍率)。見た目は共通部品 mega-lv.css。1対1パネルは1行、3枠の中は小さめ */
.mlvwrap{margin:6px 0 4px}
/* 検索候補の「未実装」札(データ元にはあるがゲーム未実装のポケモン) */
.sugg-list .unrel{font-style:normal;font-size:.58rem;font-weight:800;letter-spacing:.04em;margin-left:6px;padding:1px 5px;border-radius:5px;
  color:#ffb36b;border:1px solid rgba(255,179,107,.55);vertical-align:1px;white-space:nowrap}
:root.light .sugg-list .unrel{color:#a85a12;border-color:rgba(168,90,18,.5)}
.pmeta .megalv,.gmlv .megalv{flex:1 0 100%;margin-top:3px;gap:5px}
.pmeta .megalv .mlvseg button,.gmlv .megalv .mlvseg button{min-width:26px;padding:4px 6px;font-size:.72rem}
.gmlv{margin-top:4px}
/* 結果 */
.result{margin-top:12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px;display:none}
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}
.fighter{min-width:0}
.fighter .top{display:flex;align-items:center;gap:6px;min-width:0}
.fighter .top .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.badge{font-size:.85rem;font-weight:800;border-radius:7px;padding:2px 10px;flex-shrink:0}
.badge.win{background:var(--win);color:#052613}
.badge.lose{background:var(--lose);color:#2b070d}
.badge.draw{background:var(--gold);color:#2b2305}
.hpbar{height:10px;border-radius:99px;background:var(--deep);overflow:hidden;margin-top:6px;border:1px solid var(--line)}
.hpbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--win),#a5f3c0)}
.hpbar i.low{background:linear-gradient(90deg,var(--lose),#ffb3bd)}
.subline{color:var(--sub);font-size:.72rem;margin-top:3px}
.enbar{height:8px;border-radius:99px;background:var(--deep);overflow:hidden;margin-top:8px;border:1px solid var(--line)}
.enbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--ml),#d8b4fe)}
.subline b{color:var(--ink)}
.shline .sh{font-size:1.1rem;margin-right:2px}
.shline .usedsh{filter:grayscale(1);opacity:.3}
.vsmark{color:var(--sub);font-weight:800;font-size:.8rem}
/* 技詳細 */
.savepk{margin-left:auto;flex-shrink:0;background:none;border:1px solid var(--line);border-radius:8px;color:var(--gold);font-size:.7rem;padding:3px 8px;cursor:pointer}
.savepk:active{background:var(--bg2)}
.mypkbar{margin-top:8px}
.mypkbar .mypktab{color:var(--gold)}
.mypkbar .mypktab[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#2b2305;font-weight:700}
.mypkrow{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:7px 4px;border-bottom:1px solid var(--line);font-size:.8rem;cursor:pointer}
.mypkrow:last-child{border-bottom:none}
.mypkrow i{font-style:normal;color:var(--sub);font-size:.68rem;margin-left:6px}
.mypkrow .del{color:var(--sub);font-weight:700;padding:2px 8px;flex-shrink:0}
.mypkempty{color:var(--sub);font-size:.72rem}
.ivgrid{display:grid;grid-template-columns:1fr 1fr 1fr 1.4fr;gap:6px}
.ivgrid label{color:var(--sub);font-size:.66rem;display:block}
.ivgrid input{width:100%;margin-top:2px;background:var(--bg2);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:5px 3px;font-size:.85rem;outline:none;text-align:center}
.ivgrid input:focus{border-color:var(--gl)}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cgrid label{color:var(--sub);font-size:.66rem;display:block}
.cgrid input{width:100%;margin-top:2px;background:var(--bg2);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:5px 3px;font-size:.85rem;outline:none;text-align:center}
.cgrid input:focus{border-color:var(--gl)}
.cpre{margin-top:6px}
.cpre button{flex:1 0 22%;font-size:.66rem}
.cnote{margin-top:6px;font-size:.64rem;color:var(--sub)}
.bluffnote{margin-top:4px;font-size:.62rem;color:var(--sub);line-height:1.5}
.bluffnote b{color:var(--ink)}
.opts.bluff button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#2b2305}
.carrytag{font-size:.66rem;color:var(--gold);margin-top:2px}
.ivnote{margin-top:6px;font-size:.72rem;color:var(--sub)}
/* 「⚠リーグ上限超え」。1対1のパネルだけでなく、パーティ3枠・模擬戦のあいて枠・
   対策さがしの行にも出すので、場所を限定せずに効かせる(2026-09-05) */
.over{color:#ff7b8e;font-weight:700;white-space:nowrap}
/* ブレイクポイント専用ページ(/breakpoint/)へのリンク。旧details版は2026-08-21に専用ページへ移行 */
.bplink{display:flex;align-items:center;gap:8px;margin-top:12px;padding:11px 14px;border-radius:12px;
  font-size:.82rem;font-weight:800;text-decoration:none;color:var(--ongold,#3a2a00);
  background:linear-gradient(160deg,#ffe27a 0%,#f0a827 45%,#c47f10 100%);
  box-shadow:0 4px 14px rgba(240,168,39,.35),inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .12s ease,box-shadow .12s ease}
.bplink:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(240,168,39,.45),inset 0 1px 0 rgba(255,255,255,.55)}
.bplink small{font-size:.64rem;font-weight:700;opacity:.8;flex:1;text-align:left}
.bplink b{font-size:.9rem}
.ivstats{margin-top:3px;font-size:.7rem;color:var(--sub)}
.ivstats b{color:var(--ink);font-weight:700}
.modes{display:flex;gap:6px;margin-top:10px}
.modes button{flex:1;padding:9px 4px;font-size:.85rem;font-weight:800;color:var(--sub);cursor:pointer;
  background:var(--tab);border:1px solid var(--line);border-radius:11px;
  box-shadow:0 2px 0 var(--tabsh),inset 0 1px 0 var(--tabin);
  transition:transform .12s ease,box-shadow .12s ease,color .12s ease}
.modes button:hover{color:var(--ink);transform:translateY(-1px)}
.modes button[aria-pressed="true"]{color:#042330;border-color:#d5f2ff;transform:translateY(-1px);
  background:linear-gradient(160deg,#d5f2ff 0%,#8bd8f5 45%,#4fb0dd 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.modes{flex-wrap:wrap}
.modes button{flex:1 1 auto}
@media (max-width:520px){.modes{gap:4px}.modes button{font-size:.76rem;padding:8px 2px;flex:1 1 45%}}
/* 別ページへのリンク(GBL⇄ロケット団対策)。タブと同じ見た目で置く */
.modes a.modelink{flex:1 1 auto;padding:9px 4px;font-size:.85rem;font-weight:800;text-align:center;text-decoration:none;
  color:var(--rklink);background:var(--rklinkbg);border:1px solid rgba(255,107,129,.3);border-radius:11px;
  box-shadow:0 2px 0 var(--tabsh);transition:transform .12s ease,border-color .12s ease}
.modes a.modelink:hover{transform:translateY(-1px);border-color:#ff6b6b}
/* メガの＋わざ(3本目・自動で持つ)の1行。SP欄のすぐ下に、選べない情報として控えめに出す(2026-09-11 B5) */
.plusnote{margin-top:5px;font-size:.72rem;color:var(--sub);line-height:1.5;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px}
.plusnote b{font-size:.66rem;font-weight:900;color:#fff;background:linear-gradient(160deg,#ff8fd6,#d63aa0);padding:1px 7px;border-radius:999px}
.plusnote small{font-size:.64rem;opacity:.85}
:root.light .plusnote b{background:linear-gradient(160deg,#e2559f,#b3237d)}
@media (max-width:520px){.modes a.modelink{font-size:.76rem;padding:8px 2px;flex:1 1 45%}}

/* モードの並び(2026-09-11タダシさん選択・D案): 1行目=分析4つ／2行目=模擬戦(横長)＋対戦記録・ロケット団戦の小さな四角いリンク。
   旧「じっくり分析する」「実戦を戦う」の見出しは廃止(模擬戦・リンクの横長ボタンが場所を取りすぎていたため)。
   模擬戦はこのツールの目玉なので、ほかのモード(水色)とは別格の見た目のまま(色・▶・光の帯は変えない) */
#modes>button{flex:1 1 0;min-width:0}
#modes .mrow2{flex:1 0 100%;display:flex;gap:6px}
#modes .mrow2 button.mockhero{flex:2.2 1 0;min-width:0}
#modes .mrow2 a.modelink,#modes .mrow2>button:not(.mockhero){flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;padding:7px 2px;font-size:.74rem}
#modes .mrow2 .mk{font-style:normal;font-size:1.05rem;line-height:1}
/* ロケット団は絵文字に合うものが無いので、専用アイコンと同じ「赤いR」の丸で示す */
#modes .mrow2 .mk.rkr{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:.72rem;font-weight:900;
  color:#ff5a6b;background:#1a0b12;border:1px solid rgba(255,90,107,.65)}
:root.light #modes .mrow2 .mk.rkr{color:#fff;background:#c8324a;border-color:#c8324a}
@media (max-width:520px){
  #modes>button{flex:1 1 0;font-size:.74rem;padding:9px 2px}
  #modes .mrow2{gap:4px}
  #modes .mrow2 a.modelink,#modes .mrow2>button:not(.mockhero){flex:1 1 0;font-size:.68rem;padding:6px 2px}
  #modes .mrow2 button.mockhero{padding:10px 11px;gap:9px}
  #modes .mrow2 .mockhero .pl{width:32px;height:32px}
}
.modes button.mockhero,.rkmode button.mockhero{flex:1 0 100%;display:flex;align-items:center;gap:12px;
  padding:13px 16px;border:none;border-radius:16px;text-align:left;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#241a5c 0%,#6d28d9 42%,#c026d3 78%,#f59e0b 130%);
  box-shadow:0 8px 22px rgba(139,92,246,.45),inset 0 1px 0 rgba(255,255,255,.35)}
.modes button.mockhero:hover,.rkmode button.mockhero:hover{transform:translateY(-1px)}
.modes button.mockhero[aria-pressed="true"],.rocket .rkmode button.mockhero[aria-pressed="true"]{color:inherit;border:none;transform:translateY(-1px);
  box-shadow:0 8px 26px rgba(192,38,211,.6),inset 0 1px 0 rgba(255,255,255,.5),0 0 0 2px #ffd54a}
.mockhero .pl{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-size:1.05rem;color:#fff;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4)}
.mockhero .tx{flex:1;min-width:0}
.mockhero .t1{display:block;font-size:1.02rem;font-weight:900;color:#fff;letter-spacing:.02em;
  text-shadow:0 1px 2px rgba(0,0,0,.3)}
.mockhero .t2{display:block;font-size:.68rem;font-weight:600;color:rgba(255,255,255,.88);margin-top:2px}
/* 光の帯がゆっくり流れて「ここが主役」だと形で分かるようにする */
.mockhero::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  transform:skewX(-20deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);
  animation:mockshine 3.4s ease-in-out infinite}
@keyframes mockshine{0%{left:-60%}55%{left:130%}100%{left:130%}}
@media (prefers-reduced-motion:reduce){.mockhero::after{animation:none}}
@media (max-width:520px){
  .modes button.mockhero{padding:11px 13px;gap:10px}
  .mockhero .t1{font-size:.94rem}
  .mockhero .pl{width:34px;height:34px}
}
/* 見出しの配置(タイトル→#themeswの順・重ならず折り返る)は共通ファイル
   assets/pageheader.css が持つ(2026-09-04)。ここではタイトル内部の見た目
   (「GOバトルリーグ / 対面シミュレーター」の切れ目での折り返し・グラデ)と
   pagelinkの質感だけを持つ */
header h1{display:flex;flex-wrap:wrap;gap:0 .35em}
header h1>span,header h1>b{white-space:nowrap}
header .pagelink{font-size:.78rem;color:var(--sub);text-decoration:none;border:1px solid var(--line);border-radius:8px;padding:4px 8px;white-space:nowrap}
/* パーティ診断 */
.pslots{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:10px}
.pslot{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:7px;min-width:0}
.phd{display:flex;align-items:center;gap:3px;margin-bottom:5px}
.phd .pnum{font-size:.68rem;color:var(--cy);font-weight:700;margin-right:auto}
.phd button{background:var(--panel);border:1px solid var(--line);border-radius:7px;color:var(--sub);font-size:.6rem;padding:2px 5px;cursor:pointer}
.phd .pshadow{display:inline-flex;align-items:center;justify-content:center;color:#7d5ca8;font-size:.8rem;padding:2px 6px}
.phd .pshadow[aria-pressed="true"]{background:linear-gradient(135deg,#7c3aed,#b06cff);border-color:#b06cff;color:#fff}
.phd .pstar{color:var(--gold)}
.pslot input{width:100%;padding:6px 7px;font-size:.8rem;background:var(--panel);border:1px solid var(--line);border-radius:8px;color:var(--ink);outline:none}
.pslot input:focus{border-color:var(--gl)}
.pmeta{margin-top:5px;display:flex;flex-wrap:wrap;align-items:center;gap:3px}
.pmeta .pt2{font-size:.62rem;color:var(--sub);flex:1 0 100%;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pmeta .pempty{font-size:.66rem;color:var(--sub);opacity:.7}
.pstarwin .mypkrow{cursor:pointer}
/* 全モード共通の計算設定 */
/* 能力変化わざの設定。ラベル・タブ・いまの前提の一言を1つの枠にまとめる */
.gopt{display:flex;align-items:center;gap:10px;margin-top:8px;padding:8px 10px;
  background:var(--bg2);border:1px solid var(--line);border-radius:10px}
.gopt .lbl{font-size:.7rem;color:var(--ink);font-weight:700;flex-shrink:0}
.goptmain{flex:1;min-width:0}
.gopt .opts{min-width:0}
.gopt .opts button{padding:5px 2px;font-size:.72rem}
.gopt .opts button[aria-pressed="true"]{background:var(--cy);border-color:var(--cy);color:#06202b}
/* 選んだタブの真下に、その前提を短く出す(枠の外に離れて置かない) */
.goptnote{font-size:.64rem;color:var(--sub);line-height:1.4;margin-top:5px;text-align:center}
.goptnote b{color:var(--ink)}
/* ロケット団戦の設定 */
.rocket{margin-top:8px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px}
.rkrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rkrow+.rkrow{margin-top:6px}
/* 設定のかたまり(あいて / 敵硬直 / 対策)を区切って、続きものに見えないようにする */
.rkrow.rksep{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.rocket .lbl,.rkentbox .lbl{font-size:.68rem;color:var(--sub);font-weight:600;flex-shrink:0}
.rocket .opts{flex:1;min-width:160px}
/* 対策(火力/高火力＋安定/シミュレート)と敵硬直(開幕/撃破後/交代後)は金系の立体タブ。
   ベタ塗りのフォールバックはやめて、他の行と同じ「立体＋選択中はグラデーションで点灯」にそろえる。
   敵硬直はランキング枠内の詳細ボックス(.rkentbox)へ移動することがあるのでIDで当てる */
#rkviewbtns button,#rkenter button{flex:1;padding:9px 4px;font-size:.82rem;font-weight:800;
  color:var(--goldc);background:var(--tab);border:1px solid var(--line);border-radius:11px;cursor:pointer;
  box-shadow:0 2px 0 var(--tabsh),inset 0 1px 0 var(--tabin);
  transition:transform .12s ease,box-shadow .12s ease,color .12s ease}
#rkviewbtns button:hover,#rkenter button:hover{transform:translateY(-1px);
  box-shadow:0 4px 0 var(--tabsh),inset 0 1px 0 var(--tabin)}
#rkviewbtns button[aria-pressed="true"],#rkenter button[aria-pressed="true"]{
  color:#2b2305;border-color:transparent;transform:translateY(-1px);
  background:linear-gradient(160deg,#ffe38f 0%,#ffd54a 45%,#c99b1f 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
/* いちばん上のモード切替(1対1 / 模擬戦)はこのツールの主役なので、大きく立体的に見せる */
.rkmoderow{margin-bottom:2px}
.rkmode{gap:8px;flex-wrap:wrap}
.rkmode button{flex:1;padding:12px 6px;font-size:.95rem;font-weight:800;letter-spacing:.03em;
  color:var(--sub);background:var(--tab);
  border:1px solid var(--line);border-radius:12px;cursor:pointer;
  box-shadow:0 3px 0 rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .12s ease,box-shadow .12s ease,color .12s ease}
.rkmode button:hover{color:var(--ink);transform:translateY(-1px);
  box-shadow:0 4px 0 rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.1)}
.rocket .rkmode button[data-v="0"][aria-pressed="true"]{
  color:#03212c;background:linear-gradient(160deg,#8df3ff 0%,#43e0ff 45%,#1b9fd0 100%);border-color:#9df5ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);transform:translateY(-1px)}
/* 模擬戦モードはGBLと同じ主役ボタン(.mockhero・2026-08-23タダシさん指示)。点灯は金のリング */
/* あいての種別はロケット団らしく赤系。したっぱ→サカキで赤が濃くなる */
.rkkind{gap:6px}
.rkkind button{flex:1;padding:9px 4px;font-size:.86rem;font-weight:800;color:var(--rc);
  background:var(--rkkindbg);border:1px solid rgba(255,107,129,.3);border-radius:11px;
  box-shadow:0 2px 0 var(--tabsh);transition:transform .12s ease,box-shadow .12s ease}
.rkkind button:hover{transform:translateY(-1px);border-color:var(--rc)}
.rkkind button[data-v="grunt"]{--rc:#ffa8a8;--rd:#e05a5a}
.rkkind button[data-v="leader"]{--rc:#ff7676;--rd:#c62828}
.rkkind button[data-v="boss"]{--rc:#ff4d4d;--rd:#8e0000}
/* ライトのときは、選んでいない種別の土台を白系にして文字も読める濃さにする
   (強敵になるほど濃い赤、という並びはそのまま) */
:root.light .rkkind button[data-v="grunt"]{--rc:#d9636e}
:root.light .rkkind button[data-v="leader"]{--rc:#c62828}
:root.light .rkkind button[data-v="boss"]{--rc:#8e0000}
.rocket .rkkind button[aria-pressed="true"]{color:#2c0406;border-color:var(--rc);
  background:linear-gradient(160deg,#ffd0d0 0%,var(--rc) 45%,var(--rd) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);transform:translateY(-1px)}
.rocket input{width:64px;padding:5px 6px;font-size:.78rem;background:var(--bg2);border:1px solid var(--line);border-radius:8px;color:var(--ink);outline:none}
.rocket input:focus{border-color:var(--gl)}
/* ロケット団戦: リーダー・サカキの手持ち */
.rkroster{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.rklineup{margin-top:6px}
.rkslot{display:flex;align-items:flex-start;gap:8px}
.rkslot+.rkslot{margin-top:5px}
.rkslbl{font-size:.66rem;color:var(--sub);font-weight:600;flex-shrink:0;width:58px;padding-top:6px;line-height:1.3}
.rkslbl i{font-style:normal;font-size:.72rem}
.rkcands{flex:1;display:flex;flex-wrap:wrap;gap:5px;min-width:0}
/* 「だれと」(シエラ/クリフ/アルロ/サカキ)は、種別の赤と区別できるよう金系の立体ボタンに */
.rkwho{gap:6px}
.rkwho button{flex:1;padding:9px 6px;font-size:.86rem;font-weight:800;color:#e8c56a;
  background:linear-gradient(180deg,#2a2440,#1c1830);border:1px solid rgba(255,213,74,.32);border-radius:11px;
  box-shadow:0 2px 0 var(--tabsh);transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.rkwho button:hover{transform:translateY(-1px);border-color:#ffd54a}
.rocket .rkwho button[aria-pressed="true"]{color:#33260a;border-color:#ffe89a;
  background:linear-gradient(160deg,#fff0b8 0%,#ffd54a 45%,#e0a020 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);transform:translateY(-1px)}
/* 手持ちのポケモンチップ。選ぶと金色に光り、押した感じが出るようにする */
.rkchip{display:inline-flex;align-items:center;gap:3px;padding:5px 10px;font-size:.72rem;font-weight:700;
  background:var(--tab);border:1px solid var(--line);border-radius:99px;
  color:var(--ink);cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,.35);
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.rkchip:hover{transform:translateY(-1px);border-color:rgba(255,213,74,.6)}
.rkchip .shadowmark{color:#b06cff}
.rkchip.on{color:#33260a;border-color:#ffe89a;
  background:linear-gradient(160deg,#fff0b8 0%,#ffd54a 45%,#e8b32c 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);transform:translateY(-1px)}
.rkchip.on .shadowmark{color:#5b21b6}
.rkchip:disabled{opacity:.4;cursor:default;box-shadow:none;transform:none}
/* 何匹目かのラベル(📌固定 / 🎲ランダム)を少し読みやすく */
.rkslbl{color:var(--sub)}
.rkslbl i{opacity:.9}
/* ロケット団戦: 決着までの時間と「あいてのわざ全通り」 */
.rktime{margin-top:10px;padding:6px 10px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  font-size:.78rem;color:var(--ink);text-align:center}
.rktime b{color:var(--cy);font-size:.94rem}
.rktime small{display:block;font-size:.62rem;color:var(--sub);margin-top:1px}
.rkmoves{margin-top:12px}
.rkmvsum{font-size:.74rem;color:var(--ink);line-height:1.6;margin-bottom:6px}
.rkmvsum .ok{color:var(--win)}
.rkmvsum .ng{color:var(--lose)}
.rkmoves table{width:100%;border-collapse:separate;border-spacing:3px}
.rkmoves th{font-size:.62rem;color:var(--sub);font-weight:600;text-align:center}
.rkmoves td{background:var(--deep);border:1px solid var(--line);border-radius:8px;padding:5px 6px;
  font-size:.7rem;color:var(--sub);text-align:center;cursor:pointer}
.rkmoves td:first-child{text-align:left;color:var(--ink)}
.rkmoves td.w b{color:var(--win)}
.rkmoves td.l b{color:var(--lose)}
.rkmoves tr.cur td{border-color:var(--cy);box-shadow:0 0 0 1px var(--cy)}
.mvhead small{font-size:.6rem;font-weight:400;color:var(--sub);margin-left:6px}
.rkdanger{display:inline-block;margin-left:6px;font-size:.66rem;font-weight:600;color:var(--lose)}
.rkmvsum small{font-size:.66rem;font-weight:400;color:var(--sub)}
.foepct{color:var(--gold)}
.rktime{font-size:.9rem}
.rktime b{font-size:1.15rem}
.rkmvsp{margin-left:4px}
.rkmvnote{font-size:.62rem;color:var(--sub);line-height:1.5;margin-top:4px}
.rkworst{margin-top:6px;padding:7px 10px;border-radius:10px;border:1px solid var(--line);
  background:var(--bg2);font-size:.78rem;font-weight:700;text-align:center}
.rkworst.ok{color:var(--win);border-color:rgba(74,222,128,.4)}
.rkworst.ng{color:var(--lose);border-color:rgba(255,107,129,.4)}
.rkworst small{display:block;font-size:.62rem;font-weight:400;color:var(--sub);line-height:1.5;margin-top:3px}
@media (max-width:520px){.rkmoves td{padding:4px;font-size:.66rem}.rkmvsp{display:block;margin-left:0}}
@media (max-width:520px){.rkslbl{width:46px;font-size:.6rem}.rkchip{padding:4px 6px;font-size:.68rem}}
.stallbox{opacity:.85;font-size:.66rem;color:var(--gold)}
.cmpnote{margin-top:8px;padding:6px 8px;background:var(--bg2);border:1px solid var(--line);border-radius:8px;font-size:.72rem;color:var(--sub);line-height:1.5}
.cmpnote b{color:var(--cy)}
@media (max-width:520px){.gopt{gap:8px;padding:7px 8px}.gopt .lbl{font-size:.64rem;line-height:1.3}}
.pctl{display:flex;align-items:center;gap:8px;margin-top:10px}
.pctl .lbl{font-size:.68rem;color:var(--sub);font-weight:600;flex-shrink:0}
.pctl .opts{flex:1}
.pctl .opts button[aria-pressed="true"]{background:var(--cy);border-color:var(--cy);color:#06202b}
.pteam{font-size:.74rem;color:var(--ink);margin-top:10px}
.pteam b{color:var(--cy)}
.ptbl td.opname{width:34%}
.ptbl th{font-size:.6rem;line-height:1.3}
.pcolnum{display:inline-block;background:var(--line);border-radius:5px;padding:0 4px;margin-right:3px;color:var(--ink)}
/* じぶんを選ぶ前の環境一覧(顔ぶれとわざ構成だけ) */
.mttbl.metaonly td.opname{width:46%;max-width:none;white-space:normal}
.mttbl.metaonly td.opname .tpair{margin-right:3px;vertical-align:-2px}
.mttbl td.mometa{text-align:left;font-size:.7rem;line-height:1.35}
.mttbl td.mometa b{font-weight:700;color:var(--ink)}
.mttbl td.mometa i{display:block;font-style:normal;font-size:.64rem;color:var(--sub)}
.mttbl td.pcnt{font-weight:800;font-size:.9rem}
.mttbl td.pcnt small{display:inline;font-size:.6rem;color:var(--sub);font-weight:600}
.mttbl td.pcnt.c0{color:var(--lose);background:rgba(255,107,129,.14)}
.mttbl td.pcnt.c1{color:var(--gold)}
.mttbl td.pcnt.c2,.mttbl td.pcnt.c3{color:var(--win)}
.holehead{color:var(--lose);font-weight:700;font-size:.82rem}
.holehead small{font-size:.62rem;font-weight:400;color:var(--sub);margin-left:4px}
.holeok{color:var(--win);font-weight:700;font-size:.82rem}
.holelist{color:var(--ink);font-size:.74rem;line-height:1.6;margin-top:2px}
.holesub{font-size:.7rem;margin-top:4px}
.holenote{font-size:.68rem;color:var(--sub);line-height:1.5;margin-bottom:5px}
/* ---- 説明ありモード用の目印 ----
   文字を減らすために画面から外した「補足」は消さずに class="expl" を付けて隠しておく。
   のちに作る切り替えで、ルート要素に class="explain" を付ければ一斉に出せる
   (2026-08-13タダシさん指示で仕組みだけ先に用意) */
.expl{display:none}
.enote{font-size:.7rem;color:var(--sub);line-height:1.75;margin:6px 2px 4px}
.explain .expl{display:revert}   /* 行の途中に置く補足もあるので、元の表示種別へ戻す */
/* ---- パーティ診断のまとめ ----
   相性の図・診断・3匹の働きの3枚を、同じ作りのパネルにそろえる(ゲーム画面のような質感) */
.ptcard{position:relative;margin:0 0 10px;padding:11px 13px 12px;border-radius:14px;
  background:linear-gradient(160deg,rgba(38,50,98,.5),rgba(18,24,52,.5));
  border:1px solid rgba(120,150,255,.18);
  box-shadow:0 6px 18px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06)}
/* 見出しのバッジ。どのパネルも同じ水色で「ここが節の頭」と分かるようにする
   (状態を表す赤・黄・緑とは役割が別なので、色はぶつけない)。押すと中身が開く */
.ptsec{display:inline-flex;align-items:center;gap:6px;padding:3px 12px 3px 11px;
  font-size:.84rem;font-weight:800;letter-spacing:.04em;color:#06243a;border:none;border-radius:99px;
  cursor:pointer;background:linear-gradient(160deg,#9ef2ff,var(--cy));
  box-shadow:0 3px 10px rgba(67,224,255,.35),inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .08s}
.ptsec:hover{transform:translateY(-1px)}
/* 開いているかどうかを示す小さな三角(閉じているとき下向き) */
.ptsecarw{width:0;height:0;margin-left:2px;border-left:4px solid transparent;
  border-right:4px solid transparent;border-top:5px solid #06243a;
  transition:transform .12s}
.ptsec[aria-expanded="true"] .ptsecarw{transform:rotate(180deg)}
/* 閉じているときは枠を消してバッジだけにする。3枚を同じ入れ物に入れてあるので、
   閉じたタブは横に並び、開いたものだけ全幅になる(タブが1行に収まってスッキリする) */
/* タブは縦に並べる(2026-08-13タダシさん指示)。横並びだと3枚が1行に詰まって窮屈だった */
.ptcards{display:flex;flex-direction:column;align-items:flex-start;gap:9px;margin:12px 0 14px}
.ptcards>[data-sec]{margin:0;align-self:stretch}
/* 閉じているカードはバッジぶんの幅だけにする(縦に並んだタブに見える) */
.ptcards>[data-sec][aria-expanded="false"]{align-self:flex-start}
.ptcbody{margin-top:7px}
/* 「.ptcards>」で必ずカードに限定する。バッジ(.ptsec)も data-sec と aria-expanded を持つので、
   限定しないとバッジの水色まで消えて文字が読めなくなる */
.ptcards>[data-sec][aria-expanded="false"]>.ptcbody{display:none}
.ptcards>[data-sec][aria-expanded="false"]{padding:0;background:none;border:none;box-shadow:none}
.ptdic{font-size:1.2rem;line-height:1}
/* パネルの副題。軸の意味など「これが分からないと図が読めない」ことはここに書く */
.ptgsub{font-size:.72rem;line-height:1.6;color:var(--sub);margin-bottom:7px}
.ptgsub b{color:var(--ink);font-weight:800}
.ptgsub b.e{color:var(--cy)}
.ptgsub b.l{color:var(--ml)}
.ptgsub small{display:block;font-size:.62rem;color:var(--sub);opacity:.85;margin-top:3px;line-height:1.9}
.ptgsub small b{color:var(--ink);font-weight:800}
/* 役割の基準を書く行に、表の行と同じバッジをそのまま並べる(色で対応が取れる) */
.ptgsub .ptwrole{display:inline-block;padding:1px 8px;margin:0 2px;vertical-align:middle;font-size:.6rem}
.ptchart{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
/* 順位のグループごとに1本の帯。左から右へ読むだけなので折り返しの説明が要らない。
   帯の長さはそろえ、1匹あたりの大きさで重みを示す(よく当たるグループほどマスが大きい) */
.ptgwrap{width:min(340px,100%)}
.ptgrow{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.ptglb{flex-shrink:0;width:50px;text-align:right;font-size:.6rem;color:var(--sub);font-weight:700}
.ptgline{display:flex;align-items:center;gap:3px;flex:1;min-width:0}
.ptgc{flex:1;min-width:0;aspect-ratio:1;border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 2px rgba(0,0,0,.3)}
.ptgc.g3{border-radius:2px}
.ptglegend{display:flex;flex-direction:column;gap:4px;min-width:190px}
.ptglegend button{display:flex;align-items:center;gap:7px;padding:4px 10px;font-size:.72rem;color:var(--ink);
  background:rgba(9,14,36,.5);border:1px solid var(--line);border-radius:9px;cursor:pointer;text-align:left}
.ptglegend button i{width:11px;height:11px;border-radius:3px;flex-shrink:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.ptglegend button .ptglbl{font-weight:700;width:48px;flex-shrink:0}
.ptglegend button b{font-weight:800;width:24px;text-align:right}
.ptglegend button small{font-size:.6rem;color:var(--sub)}
.ptglegend button[aria-pressed="true"]{border-color:var(--cy);box-shadow:0 0 0 1px var(--cy) inset}
/* 診断文: 数字を並べるより、状況と次の一手を言い切るほうが頭に入る。
   枠の色は「穴」を基準にした深刻度に連動する(赤=上位10位に穴 / 黄=下位だけ / 緑=穴なし) */
.ptdiag{--dc:61,220,132;margin:0 0 10px;padding:11px 13px 12px;max-width:560px;border-radius:14px;
  background:linear-gradient(160deg,rgba(var(--dc),.1),rgba(18,24,52,.5));
  border:1px solid rgba(var(--dc),.4);
  box-shadow:0 6px 18px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06)}
.ptdiag.warn{--dc:255,213,74}
.ptdiag.bad{--dc:255,107,129}
/* ⚠リストの枠だけは「そこに並んでいるものの色」で固定する(相性の図の凡例と同じ色) */
.ptwhead.t-hole,.ptwchips.t-hole{--dc:255,107,129}
.ptwhead.t-n1,.ptwchips.t-n1{--dc:255,213,74}
.ptdtext{font-size:.78rem;line-height:1.65;color:var(--ink);margin:0}
.ptdtext b{font-weight:800}
.ptdnext{font-size:.74rem;line-height:1.6;color:var(--cy);margin:7px 0 0}
.ptdnext b{font-weight:800}
.ptwhead{display:block;width:100%;margin-top:8px;text-align:left;padding:5px 10px;font-size:.76rem;
  font-weight:700;color:rgb(var(--dc));background:rgba(var(--dc),.1);
  border:1px solid rgba(var(--dc),.5);border-radius:9px;cursor:pointer}
.ptwhead[aria-pressed="true"]{background:rgba(var(--dc),.2);box-shadow:0 0 0 1px rgba(var(--dc),.8) inset}
.ptwhead b{font-weight:800}
.ptwhead small{float:right;font-size:.58rem;color:var(--sub);font-weight:400;padding-top:3px}
.ptwchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.ptwchip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;font-size:.7rem;color:var(--ink);
  background:rgba(9,14,36,.5);border:1px solid rgba(var(--dc),.42);border-radius:99px}
.ptwchip em{font-style:normal;font-size:.58rem;color:rgb(var(--dc));font-weight:700}
.ptwmore{align-self:center;font-size:.66rem;color:var(--sub)}
/* 3匹の働き: 1行1匹。散布図(4象限)は「3点しかないのに2次元を辿らせる」ため廃止し、
   役割を言葉のバッジで出す形にした(2026-08-13)。視線が上から下の一方向で済む */
/* 型で探すボタンは表の下に2つ並べる(現状を見てから、どちらへ寄せるかを使う人が決める) */
.ptwfindwrap{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.ptwfind{display:inline-block;vertical-align:middle;
  padding:3px 12px;font-size:.68rem;font-weight:800;color:#3a2a00;border:none;border-radius:999px;
  cursor:pointer;background:linear-gradient(160deg,#ffe9a8 0%,#f5c33c 45%,#c98f10 100%);
  box-shadow:0 2px 0 rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.6)}
.ptwk{display:grid;grid-template-columns:118px 56px 1fr 62px;align-items:center;gap:9px;
  width:100%;padding:5px 9px;margin-bottom:4px;border-radius:9px;cursor:pointer;text-align:left;
  background:linear-gradient(160deg,rgba(60,78,140,.28),rgba(14,20,46,.4));
  border:1px solid var(--line);border-left:3px solid rgba(var(--rc,139,150,194),.85)}
.ptwk[aria-pressed="true"]{border-color:var(--cy);border-left-color:var(--cy);
  box-shadow:0 0 0 1px var(--cy) inset}
/* 列の見出し。ここに「序盤🛡⭕ / 終盤🛡❌」を出すことで、軸の意味が横棒の真上で分かる。
   行と同じ枠線ぶんの余白を透明で入れて、列の位置をぴったり合わせる */
.ptwk.head,.ptwk.cap{margin-bottom:2px;padding:0 9px;background:none;cursor:default;
  border:1px solid transparent;border-left:3px solid transparent;
  font-size:.62rem;color:var(--sub);font-weight:700}
.ptwk.cap{margin-bottom:1px}
.ptwk.head{padding-bottom:2px}
.ptwcap{text-align:center;font-size:.62rem;font-weight:800;color:var(--ink);
  padding:2px 0;border-radius:6px;background:rgba(120,150,255,.12)}
.ptwcap small{font-weight:400;color:var(--sub);margin-left:5px}
.ptwk.head .ptwb em{display:flex;align-items:baseline;justify-content:center;gap:3px;flex:1;min-width:0}
.ptwk.head .ptwb em b{font-size:.72rem;font-weight:800}
.ptwk.head .ptwb.e em{color:var(--cy)}
.ptwk.head .ptwb.l em{color:var(--ml)}
.ptwnm{display:flex;align-items:center;gap:4px;min-width:0;font-size:.75rem;font-weight:700;color:var(--ink);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* 役割のバッジ。色は状態の3色(赤・黄・緑)とぶつからない水色(序盤)・紫(終盤)にする。
   万能は「どちらも」なので水色→紫のグラデーション(緑にすると図の「2匹勝ち」と紛れる) */
.ptwrole{font-size:.62rem;font-weight:800;text-align:center;padding:2px 0;border-radius:99px;
  color:rgb(var(--rc));background:rgba(var(--rc),.14);border:1px solid rgba(var(--rc),.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.ptwrole.r-all{color:#dbe9ff;border-color:rgba(140,170,255,.6);
  background:linear-gradient(120deg,rgba(67,224,255,.24),rgba(176,108,255,.24))}
.ptwrole.wait{color:var(--sub);background:none;border-color:var(--line)}
.ptwbars{display:flex;align-items:center;gap:10px;min-width:0}
.ptwb{display:flex;align-items:center;gap:5px;flex:1;min-width:0}
.ptwb>em{font-style:normal;font-size:.58rem;flex-shrink:0}
.ptwb.e>em{color:var(--cy)}
.ptwb.l>em{color:var(--ml)}
/* 真ん中の線＝半分(50匹なら25勝)。役割はここを超えたかで決まるので、基準がそのまま図に出る */
.ptwb i{position:relative;flex:1;min-width:0;height:9px;border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.07);box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.ptwb i::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:rgba(255,255,255,.45)}
.ptwb i b{display:block;height:100%;border-radius:99px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.ptwb.e i b{background:linear-gradient(90deg,rgba(67,224,255,.65),var(--cy))}
.ptwb.l i b{background:linear-gradient(90deg,rgba(176,108,255,.65),var(--ml))}
/* 数字は「25/50」の形。序盤と終盤は別々に50匹と戦った結果なので、
   数字だけだと「2本足して50のはず」と誤読される(/50 が付いていれば単体で読める) */
.ptwb>u{flex-shrink:0;width:46px;text-align:right;text-decoration:none;
  font-size:.78rem;font-weight:800;color:var(--ink)}
.ptwb>u small{font-size:.6rem;font-weight:400;color:var(--sub)}
.ptwsub{text-align:right;font-size:.64rem;color:var(--sub)}
.ptwsub b{font-size:.82rem;font-weight:800;color:var(--lose);margin-left:2px}
.ptwsub.dup{color:var(--gold)}
/* 狭い画面は2行組み。1行目に 名前・役割・抜くと、2行目に 2本の横棒を置く。
   列見出しは並びが合わなくなるので隠し、代わりに行ごとの小さなラベルを出す */
/* iOSは**文字が16px未満の入力欄**にふれると画面を自動で拡大し、**そのまま戻らない**。
   拡大させないため、狭い画面では入力欄の文字を16pxにする(2026-08-13タダシさん報告) */
@media (max-width:540px){
  .pslot input,.sugg input,.ivgrid input,.cgrid input{font-size:16px}
}
@media (max-width:540px){
  /* 名前の列を内容ぶんに縮めて、役割バッジが**名前のすぐ右**に来るようにする
     (1fr のままだと名前の列が伸びて、バッジが右端まで離れてしまう・2026-08-13タダシさん指摘)。
     余った幅は「抜くと」の列が受けて右端にそろう */
  .ptwk{grid-template-columns:minmax(0,auto) 56px 1fr;gap:7px}
  .ptwnm{grid-area:1/1}.ptwrole{grid-area:1/2}.ptwsub{grid-area:1/3}
  .ptwbars{grid-area:2/1/3/4;margin-top:4px}
  .ptwk.head{display:none}
  /* 列見出しが出せないぶん、「勝ち数の内訳」は全幅のラベルとして残す */
  .ptwk.cap{display:block;padding:0;border:none;margin-bottom:4px}
  .ptwcap{display:block}
}
@media (min-width:541px){.ptwk:not(.head) .ptwb>em{display:none}}
/* シールドのボタンに出す、その枚数での穴の数 */
.ptsh button .shhole{margin-left:5px;padding:0 5px;border-radius:99px;font-size:.62rem;font-weight:800;
  color:#fff;background:var(--lose)}
.ptsh button .shhole.zero{background:var(--win);color:#08210f}
/* 入れ替え候補: 穴を埋められるポケモンの提案(タップで枠に入る) */
.ptswap{margin:0 0 8px}
.ptswbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ptswbtn{padding:6px 14px;font-size:.74rem;font-weight:800;color:#3a2a00;border:none;border-radius:999px;cursor:pointer;
  background:linear-gradient(160deg,#ffe9a8 0%,#f5c33c 45%,#c98f10 100%);
  box-shadow:0 3px 0 rgba(0,0,0,.4),0 5px 16px rgba(245,195,60,.32),inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .08s,box-shadow .08s}
.ptswbtn:hover{transform:translateY(-1px)}
.ptswbtn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--tabsh)}
.ptswbtn:disabled{opacity:.5;cursor:default;transform:none}
.ptswundo{margin-left:auto;padding:5px 11px;font-size:.7rem;color:var(--ink);background:var(--bg2);
  border:1px solid var(--line);border-radius:999px;cursor:pointer}
.ptswmsg{font-size:.72rem;color:var(--sub);margin-top:6px}
.ptswlist{margin-top:6px;max-width:520px}
/* 「①マリルリを替えるなら A / B / C」と枠ごとにまとめる */
.ptswgrp{margin-bottom:9px;display:flex;flex-direction:column;gap:4px}
.ptswgh{display:flex;align-items:center;gap:5px;font-size:.72rem;color:var(--sub)}
.ptswgh b{font-weight:800;color:var(--ink)}
.ptswrow{display:flex;align-items:center;gap:10px;width:100%;padding:5px 8px;cursor:pointer;
  background:var(--bg2);border:1px solid var(--line);border-radius:9px;text-align:left}
.ptswrow:hover{border-color:var(--gold)}
.ptswnm{flex:1;min-width:0;display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:.76rem;color:var(--ink)}
.ptswnm s{color:var(--sub);text-decoration-color:var(--lose)}
.ptswnm b{font-weight:800}
.ptswnm small{width:100%;font-size:.62rem;color:var(--sub)}
/* 候補にも「3匹の働き」と同じ役割バッジを出す(どの型を補えるかが一目で分かる) */
.ptswrow .ptwrole{flex-shrink:0;width:52px}
.ptswwant{padding:4px 11px;font-size:.68rem;font-weight:800;cursor:pointer;border-radius:999px;
  color:rgb(var(--rc));background:rgba(var(--rc),.14);border:1px solid rgba(var(--rc),.55)}
.ptswd{flex-shrink:0;font-size:.76rem;color:var(--sub);white-space:nowrap}
.ptswd small{font-size:.6rem;margin-right:3px}
.ptswd em{font-style:normal;margin:0 2px;color:var(--sub)}
.ptswd b{font-weight:800;color:var(--ink)}
.ptswd b.good{color:var(--win)}
.ptswnote{font-size:.64rem;color:var(--sub);line-height:1.5}
/* もう入れ替えなくてよい状態 */
.ptswdone{margin-top:6px;padding:8px 12px;max-width:520px;border-radius:10px;
  background:linear-gradient(160deg,rgba(63,214,128,.16),rgba(63,214,128,.06));
  border:1px solid rgba(63,214,128,.45)}
.ptswdone b{display:block;font-size:.82rem;color:var(--win)}
.ptswdone small{display:block;margin-top:2px;font-size:.66rem;color:var(--sub)}
/* 入れ替えの記録(はじめの状態からどう良くなったか) */
.ptswlog{margin-top:8px;padding:7px 10px;max-width:520px;background:var(--bg2);
  border:1px solid var(--line);border-radius:10px}
.ptswlogrow{display:flex;align-items:center;gap:5px;font-size:.72rem;color:var(--ink);margin-bottom:2px}
.ptswlogrow s{color:var(--sub);text-decoration-color:var(--lose)}
.ptswlogrow b{font-weight:800}
.ptswlogsum{margin-top:4px;padding-top:4px;border-top:1px solid var(--line);font-size:.76rem;color:var(--sub)}
.ptswlogsum small{font-size:.62rem;margin-right:3px}
.ptswlogsum b{font-weight:800;color:var(--ink)}
.ptswlogsum b.good{color:var(--win)}
.ptswlogsum em{font-style:normal;margin:0 2px}
.ptswlogsum .sep{margin:0 7px;opacity:.5}
@media (max-width:420px){.ptchart{gap:10px}
  .ptgline{gap:2px}.ptglb{width:44px}
  .ptglegend{min-width:100%}
  .ptcard{padding:10px}
  .ptswrow{gap:6px}.ptswnm{font-size:.72rem}.ptswd{font-size:.7rem}}
/* パーティ診断の見出し行(右上に「わざ｜オート」を置く) */
/* 狭い画面では、見出しを潰さずにボタンを次の行へ送る(2択にしてボタンが広くなったため) */
.phead{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
.phead h3{flex:1 1 175px;min-width:0}
/* 「わざ｜マニュアル｜オート」ボタン。左=見出し(濃紺)＋2択を並べ、オンの側だけ白く点灯させる */
.ptauto{flex-shrink:0;display:inline-flex;align-items:stretch;padding:0;border:2px solid #131c63;border-radius:999px;
  overflow:hidden;cursor:pointer;background:#0f1856;font-weight:800;letter-spacing:.03em;
  box-shadow:0 3px 0 rgba(0,0,0,.45),0 4px 12px rgba(19,28,99,.35);transition:transform .08s,box-shadow .08s}
.ptauto:hover{transform:translateY(-1px);box-shadow:0 4px 0 rgba(0,0,0,.45),0 7px 16px rgba(19,28,99,.45)}
.ptauto:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.45)}
.ptauto .k{padding:5px 10px;font-size:.72rem;color:#dbe9ff;
  background:linear-gradient(180deg,#233098,#101a5e);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
/* 2択はどちらも消灯が既定。選ばれている側だけ白く点灯する */
.ptauto .v{padding:5px 10px;font-size:.72rem;color:#8f9ec2;
  background:linear-gradient(180deg,#2a3566,#1b2450);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.ptauto[aria-pressed="false"] .m,.ptauto[aria-pressed="true"] .a{color:#2b3a8f;
  background:linear-gradient(180deg,#f2f8ff,#cfe2fa);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
/* 「⚙ 詳細」: ブラフ・能力変化わざを畳んでおくタブ(パーティ診断は「わざ｜オート」の右) */
.mdet{margin-top:8px;text-align:right}
.mdetbody{text-align:left}
.mdettab{flex-shrink:0;padding:6px 13px;font-size:.74rem;font-weight:800;color:var(--ink);
  background:var(--tab);border:1px solid var(--line);border-radius:10px;
  cursor:pointer;box-shadow:0 2px 0 var(--tabsh);transition:transform .08s,box-shadow .08s}
.mdettab:hover{transform:translateY(-1px);box-shadow:0 3px 0 var(--tabsh)}
.mdettab:active{transform:translateY(1px);box-shadow:0 1px 0 var(--tabsh)}
.mdettab[aria-expanded="true"]{color:var(--cy);border-color:var(--cy)}
/* ⚙の絵文字は文字サイズのままだと小さすぎるので大きくする */
.mdettab .gear,.rkdetailtab .gear{font-style:normal;font-size:1.35em;line-height:1;vertical-align:-.1em;display:inline-block}
.mdetbody .gopt{margin-top:6px}
.holeword{color:var(--lose)}
@media (max-width:520px){.pslots{grid-template-columns:1fr;gap:5px}.pslot{padding:6px}.pmeta .pt2{flex:0 1 auto}}
/* ロケット団戦: 模擬戦(3匹の通し) */
.pmv{display:flex;flex-direction:column;gap:4px;margin-top:5px}
.pmv select{font-size:.72rem;padding:4px 6px}
.pmv .pt2{font-size:.64rem;color:var(--sub)}
.frand{margin-top:4px;padding:4px 8px;font-size:.68rem;font-weight:700;background:var(--panel);
  border:1px solid var(--line);border-radius:8px;color:var(--gold);cursor:pointer}
.frand:hover{border-color:var(--gold)}
/* じぶん・あいての枠は「同じ順番どうしが同じ行」のグリッドに置き、行の高さ=左右の高いほうに揃える
   (display:contents で列の入れ物を透過させ、data-i で行を明示する) */
.rkteams{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;margin-top:10px}
.rkteams .rkteamcol,.rkteams .pslots{display:contents}
.rkteams .rkcolttl{grid-row:1;grid-column:1;align-self:end}
.rkteams .rkcolttl.foe{grid-column:2}
.rkteams .myslots .pslot{grid-column:1}
.rkteams .foeslots .pslot{grid-column:2}
.rkteams .pslot[data-i="0"]{grid-row:2}
.rkteams .pslot[data-i="1"]{grid-row:3}
.rkteams .pslot[data-i="2"]{grid-row:4}
.rkcolttl{font-size:.72rem;font-weight:700;color:var(--cy)}
.rkcolttl.foe{color:var(--gold)}
.rkcolttl small{display:block;font-size:.62rem;font-weight:400;color:var(--sub);margin-top:1px}
.fslot .fshadow{display:inline-flex;align-items:center;justify-content:center;width:26px;height:21px;border-radius:99px;background:linear-gradient(135deg,#7c3aed,#b06cff);color:#fff;font-size:.72rem;flex-shrink:0}
.fslot select{width:100%;margin-top:4px;padding:5px 6px;font-size:.72rem;background:var(--panel);border:1px solid var(--line);border-radius:8px;color:var(--ink);outline:none}
.fstat{font-size:.62rem;color:var(--sub);margin-top:4px;line-height:1.4}
.rkstallnote{flex:1 0 100%;font-size:.62rem;color:var(--sub);line-height:1.5}
/* ロケット団戦: 模擬戦(分岐タイムライン) */
.rbctlbar{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.rbctl{width:fit-content;max-width:100%;padding:8px 12px;background:var(--bg2);border:1px solid var(--line);border-radius:10px}
.rbrow1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rbrow1 .lbl{font-size:.68rem;color:var(--sub);font-weight:600}
.rbrow1 .opts{flex:0 1 200px}
.rbrow1 .opts button[aria-pressed="true"]{background:var(--cy);border-color:var(--cy);color:#06202b}
.rbclear{padding:5px 9px;font-size:.68rem;background:var(--panel);border:1px solid var(--line);border-radius:8px;color:var(--sub);cursor:pointer}
.rbfind{margin-top:0;padding-top:0;border-top:none}
.rbgo{padding:5px 11px;font-size:.72rem;font-weight:700;background:var(--panel);border:1px solid var(--cy);
  border-radius:8px;color:var(--cy);cursor:pointer}
.rbgo[aria-pressed="true"]{background:var(--cy);color:#06202b}
.rbfindnote{flex:1 0 100%;font-size:.6rem;color:var(--sub);line-height:1.5}
.rbfound{margin-top:7px;padding:6px 9px;background:rgba(122,162,255,.1);border:1px solid var(--gl);
  border-radius:8px;font-size:.68rem;color:var(--ink);line-height:1.6}
.rbfound .ok{color:var(--win)}
.rbfound .ng{color:var(--lose)}
/* ---- 模擬戦: 流れるタイムライン ---- */
.rbfeed{margin-top:12px;min-height:100px}
.fi.future{display:none}
.fi.in>*{animation:fdup .28s ease-out}
@keyframes fdup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.flg{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px 0 8px;padding:9px 12px;
  background:linear-gradient(90deg,rgba(67,224,255,.13),transparent 35%,transparent 65%,rgba(255,213,74,.13));
  border:1px solid var(--line);border-radius:12px;font-weight:800;font-size:.85rem}
.flg .me{color:var(--cy)}
.flg .foe{color:var(--gold)}
/* 名前の横のタイプアイコン(2026-09-01): VSカードと場に出る演出の帯 */
/* ⚠ 名前との間隔は「タイプの組(.tpair)」に付ける。1つ1つの .tbadge に付けると
   **アイコン同士まで離れる**(2026-09-07タダシさん指摘)。組の中は .tpair の gap だけで詰める */
.flg .tbadge{margin-left:4px;vertical-align:-2px}
.fxitem .tx .tbadge,.fxvs .pn .tbadge{margin-left:4px;vertical-align:-2px}
.flg .tpair .tbadge,.fxitem .tx .tpair .tbadge,.fxvs .pn .tpair .tbadge{margin-left:0}
.flg .tpair,.fxitem .tx .tpair,.fxvs .pn .tpair{margin-left:4px}
.flg em{font-style:normal;font-size:.6rem;color:var(--sub);letter-spacing:.12em}
.ft{display:grid;grid-template-columns:1fr 38px 1fr;align-items:center;gap:4px;padding:2px 0;min-height:25px}
.ft.q{min-height:12px;padding:0}
.ft .tn{grid-column:2;text-align:center;font-size:.55rem;color:#5a6a9c;font-variant-numeric:tabular-nums}
/* ターンごとの2色の縞(2026-09-09タダシさん指示「控えめに」): 奇数ターンの行(.ft)だけにごく薄い帯。
   同じターンの続きの行(SP解決の行など)も同じ色になるので、1ターンが1つの帯として読める。
   VSカード・決断のチップ・KOのバナーには付けない(行の種別が違うことが分かるように) */
.fi.g1>.ft{background:rgba(255,255,255,.035);border-radius:7px}
:root.light .fi.g1>.ft{background:rgba(20,40,90,.05)}
:root.light .ft .tn{color:#7a86ad}
.ft .c{display:flex;flex-wrap:wrap;gap:3px;align-items:center}
.ft .c.me{grid-column:1}
.ft .c.foe{grid-column:3;justify-content:flex-end}
.ev{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;background:var(--bg2);
  border:1px solid var(--line);border-radius:9px;font-size:.67rem;white-space:nowrap}
.ev .dmg{font-weight:800;font-size:.72rem}
.c.me .ev .dmg{color:var(--gold)}
.c.foe .ev .dmg{color:var(--lose)}
.ev.sp{border-color:var(--gold);background:rgba(255,213,74,.1);font-weight:700}
/* 🛡ブロック: シールドを**使った側**の列に出すチップ(2026-08-20タダシさん指示) */
.ev.shd{border-color:rgba(67,224,255,.55);background:rgba(67,224,255,.1)}
/* 0.5秒(1ターン)何も打たずに待ったターン(2026-09-08タダシさん指示)。
   何も起きない行になって訳が分からなくなるので、どちらが待ったのかを必ず出す */
.ev.wt{border-color:rgba(255,216,115,.5);background:rgba(255,216,115,.09)}
.ev.wt .blk{color:var(--gold)}
.ev.wt .blk b{font-weight:900;opacity:.85;margin-right:3px}
/* ウッウ: 獲物を咥えた／吐き出した(みず色でSPアタックの金と分ける) */
.ev.gulp{border-color:rgba(67,224,255,.5);background:rgba(67,224,255,.1);color:var(--cy);font-weight:700}
.ev.gulp.spit{border-color:rgba(255,107,129,.5);background:rgba(255,107,129,.1);color:var(--lose)}
.evbox.gulp{border-color:rgba(67,224,255,.5);background:rgba(67,224,255,.1);color:var(--cy);font-weight:700}
.bf.gulp{color:var(--cy);background:rgba(67,224,255,.14)}
.gulpbox{display:inline-block;color:var(--cy);font-size:.72rem;font-weight:700;white-space:nowrap}
.fi.in .dmg{animation:dpop .4s}
@keyframes dpop{0%{transform:scale(.5)}55%{transform:scale(1.3)}100%{transform:scale(1)}}
.blk{font-style:normal;font-size:.78rem;color:var(--cy);font-weight:800}
.stall{font-style:normal;font-size:.62rem;color:var(--sub);opacity:.7}
.bf{font-style:normal;font-size:.56rem;font-weight:800;padding:1px 4px;border-radius:6px}
.bf.up{color:var(--win);background:rgba(61,220,132,.13)}
.bf.dn{color:var(--lose);background:rgba(255,107,129,.13)}
.fko{margin:8px auto;text-align:center;font-weight:800;font-size:.82rem;padding:7px;border-radius:10px;max-width:340px}
.fko.win{color:var(--win);background:rgba(61,220,132,.08);border:1px solid rgba(61,220,132,.35)}
.fko.lose{color:var(--lose);background:rgba(255,107,129,.07);border:1px solid rgba(255,107,129,.35)}
.fko i{font-style:normal;font-size:.66rem;color:var(--sub);margin-left:6px}
.fc{text-align:center;margin:3px 0}
.fchip{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;font-size:.68rem;color:var(--sub);
  background:var(--bg2);border:1px solid rgba(255,213,74,.55);border-radius:99px;cursor:pointer}
.fchip b{color:var(--ink);font-size:.7rem}
.fchip.auto{border-color:var(--line);border-style:dashed}
.fchip:hover{border-color:var(--cy)}
.rbfin{margin-top:12px}
/* ---- 下部の常駐フレーム(HUD)と選択ウィンドウ ---- */
.rbdock{position:sticky;bottom:6px;z-index:6;margin-top:10px}
.rbwinbox:empty{display:none}
.rbwin{margin:0 auto 8px;max-width:520px;background:rgba(19,26,51,.97);border:1px solid var(--gold);
  border-radius:14px;padding:10px 12px;box-shadow:0 6px 30px rgba(0,0,0,.55),0 0 0 1px rgba(255,213,74,.15);
  animation:winup .22s ease-out}
@keyframes winup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rwt{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.84rem;color:var(--gold);margin-bottom:8px}
.rwt span{margin-left:auto;font-size:.62rem;font-weight:600;color:var(--sub)}
.rwt .wx{background:none;border:0;color:var(--sub);font-size:.8rem;cursor:pointer;padding:0 2px}
.rwb{display:flex;flex-wrap:wrap;gap:6px}
/* 「読まれない」=交代受けを外すタイミングで撃つ(2026-09-07)。わざのフレームの3行目に横いっぱいで置く */
.mvopt button.safe{flex:1 1 100%;border-color:#7fd7a6;color:#7fd7a6;background:rgba(127,215,166,.07);box-shadow:none}
.mvopt button.safe .need{color:#7fd7a6}
:root.light .mvopt button.safe{border-color:#1f7a4d;color:#1f7a4d;background:rgba(31,122,77,.08)}
:root.light .mvopt button.safe .need{color:#1f7a4d}
/* 交代受けを狙うための目安(2026-09-07): あいてのSPまであとノーマルアタック何発か。
   数える手間を省くだけで、合わせるかどうかは使う人が決める */
.mswnote{flex:1 1 100%;font-size:.68rem;color:var(--sub);line-height:1.5;margin:-1px 0 1px}
.mswnote b{color:var(--gold);font-weight:800}
/* HUDの⇄交代ボタンの上に出す「あいてのSPまで あと◯発」(2026-09-07タダシさん報告で追加)。
   交代受けは**あいてが撃てるようになった瞬間に交代する**技なので、その目安を常に見せる */
.mswtip{font-size:.7rem;color:var(--sub);text-align:center;line-height:1.4;margin:2px 0 -2px;min-height:1em}
.mswtip:empty{display:none}
.mswtip b{color:var(--gold);font-weight:800}
.mswtip b.rdy{color:#ff9f5a}
:root.light .mswtip b.rdy{color:#c1490a}   /* 明るい地では濃いオレンジにする(白の上で読める濃さ) */
.rwb button{min-height:38px;padding:6px 13px;font-size:.78rem;font-weight:800;background:var(--panel);
  border:1px solid var(--gl);border-radius:11px;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.rwb button.fire{border-color:var(--cy);box-shadow:inset 0 0 12px rgba(67,224,255,.08)}
.rwb button.wait,.rwb button.hold{border-color:var(--line);color:var(--sub);font-weight:700}
.rwb button.on{background:var(--cy);border-color:var(--cy);color:#06202b}
/* ⭐最適: いちばん効率のよいタイミングにまかせる(金色でいちばん目立たせる・2026-08-20) */
.rwb button.best{border-color:var(--gold);background:rgba(255,213,74,.12);color:var(--gold);
  box-shadow:inset 0 0 12px rgba(255,213,74,.1)}
.rwb button.best .need{color:inherit;opacity:.85}
.rwb button.best.on{background:var(--gold);border-color:var(--gold);color:#2b2305}
/* 「撃たない」がおすすめの場面は緑に点灯(2026-08-20タダシさん指示。
   ノーマルアタックだけで倒しきれて相手のSPも飛んでこない=撃つのはもったいない) */
.rwb button.reco{border-color:var(--win);color:var(--win);background:rgba(61,220,132,.13);
  font-weight:800;box-shadow:0 0 14px rgba(61,220,132,.25),inset 0 0 10px rgba(61,220,132,.08)}
.rwb .rtag{font-style:normal;font-size:.56rem;font-weight:800;padding:1px 6px;border-radius:99px;
  background:var(--win);color:#06341a;margin-left:2px}
/* わざごとのフレーム(2026-08-20タダシさん指示): 見出し=わざ名＋ゲージ、
   中に「⭐最適」「即打ち」の2大ボタン(最適が左)。
   SPが2本あるときは実際の戦闘画面と同じ横並び(.mvrow・2026-08-31タダシさん指示・
   左か右かどっちを撃つかの形)。狭い幅ではフレーム内のボタンが縦に折り返す */
.rwb .mvrow{flex-basis:100%;display:flex;gap:7px;align-items:stretch}
.rwb .mvopt{flex:1 1 0;min-width:0;border:1px solid var(--line2);border-radius:12px;
  padding:7px 9px 9px;background:rgba(255,255,255,.03);display:flex;flex-direction:column;gap:7px}
.rwb .mvopt .mh{display:flex;align-items:center;gap:5px 6px;font-size:.78rem;font-weight:800;
  flex-wrap:wrap;min-width:0}
.rwb .mvopt .mb{display:flex;gap:7px;flex-wrap:wrap;margin-top:auto}
.rwb .mvopt .mb button{flex:1 1 84px;min-width:0}
.rwb .cost{font-style:normal;font-size:.58rem;font-weight:800;color:#06202b;background:var(--gold);border-radius:99px;padding:1px 6px}
/* シールドの質問はゲーム画面を再現(2026-08-31タダシさん指示):
   六角形タイルの結晶＋残り枚数(タップ=使う)を中央に、下に「あとで」(=受ける) */
/* 結晶と「あとで」は離す(2026-09-02タダシさん指摘: 近すぎて誤タップしそうになる) */
.rwb .shwin{flex-basis:100%;display:flex;flex-direction:column;align-items:center;gap:14px;padding:0}
.rwb .shwin .shuse{position:relative;background:none;border:0;box-shadow:none;padding:2px 10px;min-height:0}
.rwb .shwin .shuse .shcry{display:block;width:84px;height:auto;
  filter:drop-shadow(0 0 20px rgba(176,108,255,.55)) drop-shadow(0 4px 10px rgba(0,0,0,.4));
  transition:transform .12s ease}
.rwb .shwin .shuse:hover .shcry{transform:scale(1.06)}
.rwb .shwin .shcry polygon{fill:url(#shcg);stroke:rgba(255,255,255,.55);stroke-width:1.2}
.rwb .shwin .shx{position:absolute;top:-2px;right:-4px;font-style:normal;font-weight:900;font-size:.78rem;
  color:#fff;background:rgba(10,14,28,.94);border:1px solid var(--gl);border-radius:99px;padding:1px 8px;
  box-shadow:0 3px 10px rgba(0,0,0,.4)}
.rwb .shwin .shlater{background:none;border:0;box-shadow:none;color:var(--sub);font-size:.8rem;
  font-weight:700;padding:9px 26px;min-height:0}
.rwb .shwin .shlater:hover{color:var(--ink)}
/* スタート前は「VSカードと両者の状態」だけ見せる。開幕交代のチップや打ちかけの1発は
   ▶を押すまで隠す(2026-09-02タダシさん報告: 押す前に交代・攻撃が見えていた) */
.rbfeed .fi.prehide{display:none}
/* ためてブラフ(2026-08-30タダシさん指示): 2行組み(1行目=名前＋N・2行目=具体のわざ) */
.rwb button.bluffbtn{flex-direction:column;gap:1px;padding:5px 12px;line-height:1.25}
.rwb button.bluffbtn small{display:block;font-size:.56rem;font-weight:700;opacity:.8;white-space:nowrap}
.rwb .need{font-style:normal;font-size:.6rem;font-weight:700;color:var(--sub)}
.rwb .dmg{color:var(--lose)}
.rbhud{display:grid;grid-template-columns:1fr 74px 1fr;gap:8px;align-items:start;
  background:rgba(12,17,34,.96);backdrop-filter:blur(8px);border:1px solid var(--gl);
  border-radius:14px;padding:9px 10px 8px;box-shadow:0 -6px 28px rgba(0,0,0,.45),0 0 0 1px rgba(77,141,255,.12)}
.hs{min-width:0}
.hs .hn{display:flex;align-items:baseline;gap:6px;min-width:0}
.hs .nm{font-size:.72rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hs.me .nm{color:var(--cy)}
.hs.foe .nm{color:var(--gold)}
.hs .cp{font-size:.56rem;color:var(--sub);font-weight:700;flex:0 0 auto}
.hs.foe .hn{justify-content:flex-end}
/* 残りHPの実数値(バーだけでは残りわずかが読み取れないため。色はバーと同じ基準) */
.hs .hpn{font-size:.62rem;font-weight:800;flex:0 0 auto;white-space:nowrap;letter-spacing:.02em}
.hs.me .hpn{margin-left:auto}
.hs.foe .hpn{margin-right:auto}
.hs .hpn.g{color:#7ef0af}
.hs .hpn.y{color:#ffd54a}
.hs .hpn.r{color:#ff9d9d}
.hb{height:7px;background:var(--deep);border:1px solid var(--line);border-radius:99px;margin:4px 0 5px;overflow:hidden;position:relative}
/* HPが減る動き(2026-08-31): 本体はすぐ減り、うしろの白い残像がゆっくり追いかける(hpGhost) */
.hb em{position:absolute;left:0;top:0;height:100%;width:100%;border-radius:99px;background:rgba(255,255,255,.5)}
.hb i{display:block;position:relative;height:100%;width:100%;border-radius:99px;transition:width .39s ease}
.hb i.g{background:linear-gradient(90deg,#2bd97c,#7ef0af)}
.hb i.y{background:linear-gradient(90deg,#e8a93d,#ffd54a)}
.hb i.r{background:linear-gradient(90deg,#ff6b81,#ff9d9d)}
.hx{display:flex;align-items:center;gap:6px;min-height:24px;flex-wrap:wrap}
/* あいて側は鏡写し。DOMはじぶんと同じ並びにして row-reverse で反転させる
   (justify-content:flex-end だと折り返す位置がじぶん側とずれて左右で並びが変わる) */
.hs.foe .hx{flex-direction:row-reverse}
.hs.foe .gq b{right:auto;left:-4px}
.balls{display:inline-flex;gap:3px}
.pb{width:12px;height:12px;border-radius:50%;position:relative;display:inline-block;
  background:linear-gradient(#ff5d5d 0 43%,#0c1122 43% 57%,#eef1fb 57% 100%);box-shadow:0 1px 2px rgba(0,0,0,.6)}
.pb::after{content:'';position:absolute;left:50%;top:50%;width:4px;height:4px;transform:translate(-50%,-50%);
  border-radius:50%;background:#eef1fb;box-shadow:0 0 0 1px #0c1122}
.pb.off{filter:grayscale(1) brightness(.4)}
.shd{font-style:normal;font-size:1.15rem;line-height:1}
.shd.off{filter:grayscale(1) brightness(.4)}
/* 交代マーク(黄色い循環矢印)。「⇄」の文字の代わりに全箇所で使う(2026-08-09ユーザー支給デザイン) */
.swapmark{display:inline-block;width:1em;height:1em;vertical-align:-.12em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23FFC107' stroke-width='15'%3E%3Cpath d='M80.9 41.7 A32 32 0 0 0 22.3 34'/%3E%3Cpath d='M19.1 58.3 A32 32 0 0 0 77.7 66'/%3E%3C/g%3E%3Cg fill='%23FFC107'%3E%3Cpath d='M35.3 41.5 L10.3 54.8 L9.3 26.5 Z'/%3E%3Cpath d='M64.7 58.5 L89.7 45.2 L90.7 73.5 Z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
/* 交代のクールタイム表示(じぶん側・ボールの下)。見落とさないよう大きめに出す */
.hswap{display:flex;align-items:center;gap:3px;margin-top:3px;color:var(--gold);font-weight:900;font-size:.95rem;line-height:1}
.hswap b{font-size:1.25rem;line-height:1}
.hswap small{font-size:.62rem;color:var(--sub);font-weight:700}
.hswap:empty{display:none}
.hswap.fswap{justify-content:flex-end}
/* バトル中の全画面ロック(2026-09-01タダシさん指示): ▶を押した瞬間に
   「タイムライン＋下に固定のHUDだけ」の画面に切り替える(スタート前は通常の流れ=空白を作らない)。
   HUDはバトル中1pxも動かず、下のURLコピーや上の入力へはスクロールできない。決着で解除 */
.bfull{position:fixed;inset:0;z-index:320;display:flex;flex-direction:column;
  padding:10px 10px 8px;background:var(--bg)}
.bfull .rbctlbar{display:none}
.bfull .rbfeed{flex:1 1 0;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.bfull .rbdock{position:static;margin-top:6px}
/* ⚠ ドックは sticky なので、**スタート前**は上にある「オートバトル」「結果だけ見る」の行に
   浮いて重なる(2026-09-06タダシさん報告)。スタート前だけ通常の流れに戻して下に置く
   (バトル中は .bfull、決着後は従来どおり sticky のまま) */
.prestart .rbdock{position:static;margin-top:12px}
/* 見せ合いのHUDに出す「3匹の枠」。名前が分かった匹だけ出し、たおれた匹は暗くする
   (未判明は「？」の細い枠にして、分かっている名前に幅を回す) */
.hteam{display:flex;gap:3px;margin-top:4px;width:100%}
.hteam .hpk{flex:1 1 0;min-width:0;padding:2px 3px;border-radius:5px;
  font-size:.56rem;font-weight:800;line-height:1.3;text-align:center;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--ink)}
.hteam .hpk.unk{flex:0 0 17px;padding:2px 0;color:var(--sub)}
.hteam .hpk.ko{opacity:.35}
.hs.me .hteam .hpk{border-color:rgba(67,224,255,.28)}
.hs.foe .hteam .hpk{border-color:rgba(255,213,74,.28)}
/* ⚠ 3匹の枠は**鏡写しにしない**。並びに「1匹目→3匹目」の意味があるので、
   逆順にすると名前を読む向きと食い違う(鏡にするのは要素の並びであって読み順ではない) */
:root.light .hteam .hpk{background:rgba(40,60,120,.07)}
@media (max-width:360px){
  .hteam{gap:2px}
  .hteam .hpk{font-size:.48rem;padding:2px 1px}
  .hteam .hpk.unk{flex:0 0 14px}
}
/* 見せ合いのスタート前は、VSカードのあいてを伏せる(場に出るまで分からないルール) */
.sdmask .flg .foe .fnm{display:none}
.sdmask .flg .foe::after{content:'？？？';font-weight:800;color:var(--sub);letter-spacing:.06em}
/* スタート前（バトル中でないとき）は固定しない＝上の行に重ならない */
.gbbody:not(.bfull) .rbdock,.rkbody:not(.bfull) .rbdock{position:static;margin-top:12px}
/* 読み返し中(自動スクロールを止めている間)だけ出る「⬇ 最新へ」。押すと下端へ戻って追従を再開する */
.hfollow{display:none;margin:0 auto 6px;padding:5px 16px;border:0;border-radius:999px;cursor:pointer;
  font:inherit;font-size:.74rem;font-weight:800;color:#042330;
  background:linear-gradient(160deg,#7de9ff 0%,#08b4c9 45%,#046b7a 100%);
  box-shadow:0 2px 0 rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.6)}
.hfollow.on{display:block}
/* ばけのかわ(ミミッキュ)は🛡ブロックと同じ形の紫のチップ */
.ev.shd.dg{border-color:rgba(176,108,255,.55);background:rgba(176,108,255,.1)}
.ev.shd.dg .blk{color:#d9b3ff}
/* ⇄いつでも交代(2026-09-01): 位置が動かない再生コントロールの並びに置く
   (HUDの左右は数字の更新で常に動くので押せない=タダシさん指摘)。
   デザインはゲームの交代ボタン風の金のピル(同日タダシさん指示・絵文字だけでなくボタンらしく)。
   押せるときは共通のタブ言語=金のグラデーションで点灯(位置は動かさない)。
   マークは点灯の金地で沈まないよう、マスク方式で文字色に追従させる */
/* ⇄交代は独立した大きな行(2026-09-07タダシさん指示)。
   **交代受けは自分でタイミングを見極めて押す練習**なので、いちばん押しやすい大きさにする */
.hswaprow{margin-top:6px}
/* 控え2匹ぶんを横に並べる(2026-09-07タダシさん指示)。押した瞬間に交代＝再生は止めない */
.hswaprow.two{display:flex;gap:6px}
.hswaprow.two .hmsw{flex:1 1 0;min-width:0;letter-spacing:.02em;font-size:.82rem;gap:5px;padding:0 6px}
.hswaprow.two .hmsw b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:900}
.hswaprow.two .hmsw .swapmark{flex:0 0 auto;width:18px;height:18px}
.hswaprow.two .hmsw .tpair{flex:0 0 auto}
.hswaprow .hmsw.dead{opacity:.28}
.hswaprow .hmsw{width:100%;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  gap:7px;font-size:.92rem;font-weight:900;letter-spacing:.1em;color:var(--sub);
  background:linear-gradient(180deg,#1e2850,#151d38);border:1px solid var(--line);
  box-shadow:0 2px 0 rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06)}
.hswaprow .hmsw .swapmark{width:22px;height:22px;background:none;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23000' stroke-width='15'%3E%3Cpath d='M80.9 41.7 A32 32 0 0 0 22.3 34'/%3E%3Cpath d='M19.1 58.3 A32 32 0 0 0 77.7 66'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Cpath d='M35.3 41.5 L10.3 54.8 L9.3 26.5 Z'/%3E%3Cpath d='M64.7 58.5 L89.7 45.2 L90.7 73.5 Z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23000' stroke-width='15'%3E%3Cpath d='M80.9 41.7 A32 32 0 0 0 22.3 34'/%3E%3Cpath d='M19.1 58.3 A32 32 0 0 0 77.7 66'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Cpath d='M35.3 41.5 L10.3 54.8 L9.3 26.5 Z'/%3E%3Cpath d='M64.7 58.5 L89.7 45.2 L90.7 73.5 Z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.hswaprow .hmsw:disabled{opacity:.34;cursor:default}
@media (max-width:400px){.hswaprow.two .hmsw{font-size:.74rem;gap:3px}.hswaprow.two .hmsw .swapmark{width:15px;height:15px}}
.hswaprow .hmsw.rdy{cursor:pointer;color:#4a3200;border-color:transparent;
  background:linear-gradient(160deg,#ffe08a 0%,#ffd54a 45%,#c9931a 100%);
  box-shadow:0 3px 0 rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.6)}
.hswaprow .hmsw.rdy:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.6)}
/* ⚠ 模擬戦のボタンは連打しても拡大しない(2026-09-08タダシさん報告: 実戦の癖で2〜3回連打すると
   スマホの「2回タップ＝拡大」が働いてしまう)。touch-action:manipulation で2回タップの拡大だけを切る
   (ピンチの拡大は残る)。バトル中の全画面(.bfull)とHUD・質問ウィンドウ・SP/交代ボタンに付ける。
   連打で文字が選択されるのも防ぐ(user-select:none) */
.bfull,.rbdock,.rbdock *,.rbwinbox,.rbwinbox *,.rbctlbar button{touch-action:manipulation}
.rbdock button,.rbwinbox button,.rbctlbar button{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
/* リアルタイム操作のSPボタン(2026-09-08タダシさん指示)。実戦のSPボタンと同じく2つ横並び。
   ゲージがたまると そのわざのタイプ色で点灯する */
.hsprow{display:flex;gap:6px;margin-top:6px}
.hsprow .hsp{flex:1 1 0;min-width:0;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:0 8px;font-size:.84rem;font-weight:900;letter-spacing:.02em;color:var(--sub);
  background:linear-gradient(180deg,#1e2850,#151d38);border:1px solid var(--line);
  box-shadow:0 2px 0 rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);opacity:.42;cursor:default}
.hsprow .hsp b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hsprow .hsp small{flex:0 0 auto;font-size:.66rem;font-weight:800;opacity:.8;padding:1px 5px;border-radius:999px;border:1px solid currentColor}
.hsprow .hsp .tico{flex:0 0 auto;display:inline-flex}
.hsprow .hsp.rdy{opacity:1;cursor:pointer;color:#fff;border-color:transparent;
  background:linear-gradient(160deg,var(--tc) 0%,var(--tc2) 100%);
  box-shadow:0 3px 0 rgba(0,0,0,.35),0 0 16px var(--tc),inset 0 1px 0 rgba(255,255,255,.45);
  animation:hspglow 1.1s ease-in-out infinite alternate}
.hsprow .hsp.rdy small{border-color:rgba(255,255,255,.7)}
.hsprow .hsp.rdy:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.45)}
@keyframes hspglow{from{box-shadow:0 3px 0 rgba(0,0,0,.35),0 0 8px var(--tc),inset 0 1px 0 rgba(255,255,255,.45)}to{box-shadow:0 3px 0 rgba(0,0,0,.35),0 0 20px var(--tc),inset 0 1px 0 rgba(255,255,255,.45)}}
@media (prefers-reduced-motion:reduce){.hsprow .hsp.rdy{animation:none}}
@media (max-width:400px){.hsprow .hsp{font-size:.74rem;gap:4px;padding:0 5px}}
/* 制限時間(4:30)の残り。1分を切ったら赤 */
.rbhud .hm .clk.low{color:#ff6b6b}
/* タイムアップの行と決着の添え書き */
.fko.tup{background:linear-gradient(90deg,rgba(255,213,74,.16),rgba(255,213,74,.04));border:1px solid rgba(255,213,74,.5);color:#ffe08a}
.rkverdict .tup{display:block;font-size:.72rem;font-weight:800;color:#ffe08a;margin-top:2px;letter-spacing:.04em}
.fxend .ebig small{display:block;font-size:.42em;letter-spacing:.3em;margin-top:.15em;opacity:.9}
/* リアルタイムの猶予(10秒)の残り。シールド・次のポケモン選びの見出しの右 */
.rwcd{margin-left:auto;min-width:44px;text-align:center;font-size:.86rem;font-weight:900;font-variant-numeric:tabular-nums;
  color:#0d1730;background:linear-gradient(160deg,#ffe08a,#ffd54a 45%,#c9931a);border-radius:999px;padding:2px 9px;
  box-shadow:0 2px 0 rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.6)}
.rwcd.low{background:linear-gradient(160deg,#ff9a8a,#ff5a5a 45%,#b52020);color:#fff}
/* SPゲージの円とその残量の数字は1つのまとまり(折り返しでばらけさせない) */
.gqg{display:inline-flex;align-items:center;gap:6px}
.hs.foe .gqg{flex-direction:row-reverse}
.gqs{display:inline-flex;gap:4px}
.gq{position:relative;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--gqc) var(--p,0%),rgba(255,255,255,.09) 0)}
.gq i{width:18px;height:18px;border-radius:50%;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-style:normal}
.gq b{position:absolute;right:-4px;bottom:-4px;min-width:13px;height:13px;border-radius:99px;background:var(--gold);
  color:#06202b;font-size:.55rem;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 2px;
  box-shadow:0 1px 3px rgba(0,0,0,.6)}
.gq b:empty{display:none}
.gq.on{animation:gqp 1.1s infinite;box-shadow:0 0 8px var(--gqc,var(--gold))}
@keyframes gqp{50%{transform:scale(1.12)}}
.plead{margin-left:2px;padding:2px 8px;font-size:.6rem;font-weight:700;background:var(--bg2);
  border:1px solid var(--line);border-radius:99px;color:var(--sub);cursor:pointer}
.plead[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#2b2305}
.rbstart{display:block;margin:0 auto 8px;padding:13px 34px;font-size:1rem;font-weight:800;letter-spacing:.04em;
  color:#2b2305;background:linear-gradient(180deg,#ffe27a,#ffc93a);border:1px solid #ffd54a;border-radius:99px;
  cursor:pointer;box-shadow:0 4px 20px rgba(255,213,74,.35),0 0 0 1px rgba(255,213,74,.2);animation:stpl 1.6s infinite}
@keyframes stpl{50%{transform:scale(1.04);box-shadow:0 4px 26px rgba(255,213,74,.55),0 0 0 1px rgba(255,213,74,.3)}}
.hm{text-align:center}
.hm .clk{display:block;font-size:1.05rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.hm .trn{display:block;font-style:normal;font-size:.55rem;color:var(--sub);font-variant-numeric:tabular-nums}
/* たまにしか押さないボタンは、HUDの下に**文字つき**で並べる(2026-09-02タダシさん指摘)。
   ⏹＝やり直し・✨＝演出・⏭＝コマ送り が、マークだけでは何のボタンか分からなかったため。
   真ん中の列は幅60〜74pxしかないので文字が入らない。ここは横いっぱい使える */
.hbtns{display:flex;gap:5px;margin-top:6px}
.hbtns button{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:5px 2px;font-size:.74rem;line-height:1;background:var(--bg2);border:1px solid var(--line);
  border-radius:8px;color:var(--ink);cursor:pointer;transition:transform .08s}
.hbtns button b{font-size:.56rem;font-weight:700;color:var(--sub);white-space:nowrap}
.hbtns button:hover{transform:translateY(-1px)}
.hbtns button:active{transform:translateY(1px)}
.hbtns .hend,.hbtns .hend b{color:#ff8f8f}
:root.light .hbtns .hend,:root.light .hbtns .hend b{color:#c92a2a}
.hbtns .hfx[aria-pressed="false"]{opacity:.45;filter:grayscale(1)}
@media (max-width:380px){.hbtns{gap:3px}.hbtns button b{font-size:.52rem}}
.hctl{display:flex;justify-content:center;gap:4px;margin-top:4px;flex-wrap:wrap;max-width:66px;margin-left:auto;margin-right:auto}
.hctl button{width:26px;height:22px;font-size:.6rem;background:var(--bg2);border:1px solid var(--line);
  border-radius:7px;color:var(--ink);cursor:pointer;padding:0}
.hctl .hspd{width:30px}
@media (max-width:520px){.rbhud{grid-template-columns:1fr 60px 1fr;padding:7px 7px 6px}.hs .nm{font-size:.63rem}
  .gq{width:21px;height:21px}.gq i{width:16px;height:16px}.ft{grid-template-columns:1fr 30px 1fr}
  .ev{font-size:.6rem;padding:2px 5px}.rwb button{font-size:.72rem;padding:6px 10px}}
/* ロケット団戦 1対1: おすすめランキング */
.rkfilt button .shadowmark{margin-right:3px}
/* 絞り込みチップはランキングの枠内(火力チェッカーと同じ形)。右端の「⚙ 詳細」で敵硬直を開く。
   見た目も火力チェッカーの絞り込みタブと同じ(立体に浮かせ、選択中は役割色のグラデーションで点灯。
   点灯グラデは両テーマ共通なので直書き・未選択の文字色だけテーマ変数--mcS/--mcM) */
.rkfrow{display:flex;align-items:center;gap:6px;margin:2px 0 10px}
.rkfrow .rkfilt{flex:1;min-width:0;gap:6px}
.rkfrow .rkfilt button{flex:0 1 auto;font-size:.86rem;font-weight:800;padding:8px 16px;
  background:var(--tab);border:1px solid var(--line);border-radius:11px;color:var(--mcS);
  box-shadow:0 2px 0 var(--tabsh),inset 0 1px 0 var(--tabin);
  transition:transform .12s ease,box-shadow .12s ease,color .12s ease}
.rkfrow .rkfilt button:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--tabsh),inset 0 1px 0 var(--tabin)}
.rkfrow .rkfilt button[data-f="mega"]{color:var(--mcM)}
.rkfrow .rkfilt button[aria-pressed="true"]{color:#fff;border-color:transparent;transform:translateY(-1px);
  background:linear-gradient(160deg,#c9a7ff 0%,#8b5cf6 45%,#6d28d9 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.rkfrow .rkfilt button[data-f="mega"][aria-pressed="true"]{
  background:linear-gradient(160deg,#f795c8 0%,#d63384 45%,#9c1a5e 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.rkfrow .mdettab{margin-left:auto}
.rkentbox{margin:0 0 8px;padding:9px 10px;border:1px dashed var(--line);border-radius:10px}
.rkentbox .opts{flex:1;min-width:160px}
#rkrank{padding:10px 12px}
#rkranktitle{text-align:center}
#rkranktitle small{font-size:.62rem;font-weight:400;color:var(--sub);margin-left:7px}
/* 自分のポケモンを追加(CP＋個体値) */
.rkmy{margin-bottom:8px}
.rkmytab{width:100%;padding:7px;font-size:.72rem;font-weight:700;background:var(--bg2);
  border:1px solid var(--line);border-radius:10px;color:var(--gold);cursor:pointer}
.rkmytab[aria-expanded="true"]{border-color:var(--gold)}
.rkmybody{margin-top:7px;padding:9px 10px;background:var(--bg2);border:1px solid var(--line);border-radius:10px}
.rkmysugg{position:relative}
.rkmysel{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:.82rem;color:var(--ink)}
.rkmyshadow{padding:2px 8px;background:var(--panel);border:1px solid var(--line);border-radius:99px;
  color:var(--sub);cursor:pointer}
.rkmyshadow[aria-pressed="true"]{background:linear-gradient(135deg,#7c3aed,#b06cff);border-color:#b06cff;color:#fff}
.rkmyrow{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:8px}
.rkmyrow label{font-size:.68rem;color:var(--sub);font-weight:600}
.rkmyrow input{width:70px;padding:5px 6px;font-size:.78rem;background:var(--panel);
  border:1px solid var(--line);border-radius:8px;color:var(--ink);outline:none}
.rkmyrow input:focus{border-color:var(--gl)}
.rkmyrow input[type="number"]:not(#rkmCP){width:52px}
.rkmylv{margin-top:6px;font-size:.72rem;color:var(--sub)}
.rkmylv b{color:var(--cy);font-size:.88rem}
.rkmylv .ng{color:var(--lose)}
.rkmyadd{margin-top:8px;padding:7px 14px;font-size:.74rem;font-weight:700;background:var(--gold);
  border:1px solid var(--gold);border-radius:8px;color:#2b2305;cursor:pointer}
.rkmyadd:disabled{background:var(--panel);border-color:var(--line);color:var(--sub);cursor:default}
.rkmylist{margin-top:9px;padding-top:8px;border-top:1px dashed var(--line)}
.rkmyrowsaved{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:3px 0;font-size:.74rem;color:var(--ink)}
.rkmyrowsaved i{font-style:normal;font-size:.62rem;color:var(--sub);margin-left:6px}
.rkmydel{color:var(--lose);cursor:pointer;padding:0 6px}
.rkrcard{display:flex;align-items:center;gap:9px;padding:7px 9px;margin-top:5px;cursor:pointer;
  background:var(--bg2);border:1px solid var(--line);border-radius:10px}
.rkrcard:hover{border-color:var(--gl)}
.rkrcard.warn{border-color:rgba(255,107,129,.45)}
.rkrank{flex:0 0 26px;text-align:center;font-size:.8rem;font-weight:800;color:var(--sub)}
.rkrank.r1{color:#ffd76a}.rkrank.r2{color:#d6dee8}.rkrank.r3{color:#e0a06a}
.rkrmain{flex:1;min-width:0}
.rkrname{display:flex;align-items:center;gap:4px;font-size:.94rem;font-weight:700;color:var(--ink);flex-wrap:wrap}
.rkrname .shadowmark{color:#b06cff}
/* 名前の頭に付けるシャドウマーク（.shadowmark.nmk）は assets/shadow-icon.css に置いてある（全ツール共通） */
.rkrmine{color:var(--gold)}
.rkrmv{display:flex;align-items:center;gap:5px;margin-top:2px;font-size:.8rem;flex-wrap:wrap}
.rkrdim{font-size:.62rem;color:var(--sub);font-weight:400}
.rkrnum{flex:0 0 auto;text-align:right}
.rkrnum b{font-size:1rem;color:var(--cy)}
.rkrnum b.ng{color:var(--lose)}
.rkrnum b.warn{color:var(--gold)}
.rkrnum small{display:block;font-size:.6rem;color:var(--sub);white-space:nowrap}
.rkrnum small .ng{color:var(--lose)}
.rkrnum .rkrdps{display:block;font-style:normal;font-size:.6rem;color:var(--sub);opacity:.8}
@media (max-width:520px){.rkrcard{gap:6px;padding:6px}.rkrname{font-size:.87rem}}
/* 模擬戦のおすすめ提案(タブを押してから枠の入力欄をタップすると対策トップ5が出る) */
.rksuggbar{display:flex;align-items:center;gap:5px;margin:6px 0 2px;flex-wrap:wrap}
/* ⚙詳細: 使う頻度の低い設定をまとめて隠すタブ(右端・少し大きめ) */
.rkdetailtab{margin-left:auto;padding:5px 14px;font-size:.78rem;font-weight:800;color:var(--ink);
  background:var(--bg2);border:1px solid var(--line);border-radius:10px;cursor:pointer}
.rkdetailtab[aria-expanded="true"]{color:var(--cy);border-color:var(--cy)}
.rkdetail{margin:6px 0 8px;padding:9px 11px;background:var(--bg2);border:1px solid var(--line);border-radius:12px}
.rkdttl{font-size:.68rem;font-weight:700;color:var(--sub);margin:8px 0 4px}
.rkdttl:first-child{margin-top:0}
.rkdrow{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:4px}
.rkdrow .lbl{font-size:.72rem;font-weight:700;color:var(--ink);min-width:44px}
.rkdiv label{display:inline-flex;align-items:center;gap:3px;font-size:.66rem;color:var(--sub)}
.rkdiv input{width:44px;padding:4px 5px;font-size:.78rem;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:8px;text-align:center}
.rkdideal{padding:4px 9px;font-size:.68rem;font-weight:700;color:var(--sub);
  background:var(--bg);border:1px solid var(--line);border-radius:999px;cursor:pointer}
.rkdideal[aria-pressed="true"]{color:var(--cy);border-color:var(--cy)}
.rkdrand{padding:5px 11px;font-size:.72rem;font-weight:700;color:var(--gold);
  background:var(--bg);border:1px solid var(--line);border-radius:10px;cursor:pointer}
.rkdrand:disabled{opacity:.35;cursor:default}
.rkdprob .gopt{margin-top:8px}
/* 「結果だけ見る」: オートバトルのフレームの外に置く独立ボタン(丸い金色で雰囲気を変える) */
.rbonly{margin-left:auto;padding:9px 18px;font-size:.74rem;font-weight:800;letter-spacing:.02em;
  color:var(--gold);background:transparent;border:1.5px solid var(--gold);border-radius:999px;cursor:pointer}
.rbonly[aria-pressed="true"]{background:var(--gold);color:#241a00}
.rksuggbar .lbl{font-size:.66rem;color:var(--sub)}
.rksuggbar button{padding:3px 9px;font-size:.68rem;font-weight:700;color:var(--sub);
  background:var(--bg2);border:1px solid var(--line);border-radius:999px;cursor:pointer}
.rksuggbar button[aria-pressed="true"]{color:var(--gold);border-color:var(--gold)}
.rksgnote{padding:7px 10px;font-size:.68rem;color:var(--sub);line-height:1.5}
.rksgrow{display:flex;align-items:center;gap:6px;padding:7px 10px;cursor:pointer;
  border-top:1px solid var(--line);flex-wrap:wrap}
.rksgrow:hover{background:var(--bg2)}
.rksgno{flex:0 0 14px;text-align:center;font-size:.74rem;color:var(--sub)}
.rksgnm{font-size:.88rem;font-weight:700;color:var(--ink)}
.rksgnm .shadowmark{color:#b06cff}
.rksgmv{font-size:.74rem}
.rksgdps{margin-left:auto;font-size:.72rem;color:var(--cy);white-space:nowrap}
.rksgdps small{font-size:.58rem;color:var(--sub);margin-right:2px}
/* ページ最下部の「使い方」タブ。説明の文章はすべてここに集める */
.helpwrap{margin-top:18px}
#helptab{width:100%;padding:10px;font-size:.8rem;font-weight:700;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);color:var(--sub);cursor:pointer}
#helptab[aria-expanded="true"]{color:var(--ink);border-color:var(--gl)}
#helpbody{margin-top:8px;padding:16px 18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
#helpbody h4{margin:26px 0 10px;padding-top:14px;border-top:1px solid var(--line,#2e3a47);font-size:.82rem;color:var(--cy)}
#helpbody h4:first-child{margin-top:0;padding-top:0;border-top:0}
#helpbody p,#helpbody li{font-size:.76rem;color:var(--sub,#93a3b3);line-height:1.9;margin:0 0 12px}
#helpbody p:last-child,#helpbody li:last-child{margin-bottom:0}
#helpbody ul{margin:0 0 12px;padding-left:1.2em}
#helpbody ul:last-child{margin-bottom:0}
#helpbody li{margin-bottom:9px}
#helpbody b{color:var(--ink)}
.hlegend{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px 10px;margin:2px 0}
.hlegend div{font-size:.7rem;color:var(--sub);line-height:1.7}
.hlegend i{font-style:normal;display:inline-block;min-width:2.2em;color:var(--ink);font-weight:700}
.rkverdict{margin-top:12px;padding:8px 10px;border-radius:10px;font-size:.86rem;font-weight:700;text-align:center;border:1px solid var(--line)}
.rkverdict.win{color:var(--win);background:rgba(74,222,128,.12);border-color:rgba(74,222,128,.4)}
.rkverdict.lose{color:var(--lose);background:rgba(255,107,129,.12);border-color:rgba(255,107,129,.4)}
.rkverdict small{display:block;font-size:.68rem;font-weight:500;color:var(--sub);margin-top:3px}
.rksum{margin-top:12px}
.rksum table{border-collapse:separate;border-spacing:3px;width:100%;max-width:430px;margin:6px auto 0}
.rksum th{color:var(--sub);font-weight:600;font-size:.66rem;padding:2px}
.rksum td{background:var(--deep);border:1px solid var(--line);border-radius:8px;text-align:center;padding:5px 2px;cursor:pointer}
.rksum td b{font-size:.82rem}
.rksum td.w b{color:var(--win)}
.rksum td.l b{color:var(--lose)}
.rksum td.d b{color:var(--gold)}
.rksum td small{display:block;color:var(--sub);font-size:.62rem;margin-top:1px}
.rksum td.cur{border-color:var(--cy);box-shadow:0 0 0 1px var(--cy)}
@media (max-width:520px){
  .rkteams{display:block}
  .rkteams .rkteamcol{display:block;margin-top:8px}
  .rkteams .pslots{display:grid;grid-template-columns:1fr;gap:5px;margin-top:6px}
}
.cnsub{display:block;font-size:.68rem;font-weight:400;color:var(--sub);margin-top:2px}
.multi{margin-top:12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.multi h3{font-size:.92rem}
.mtnote{color:var(--sub);font-size:.7rem;margin-top:4px;line-height:1.6}
.mtctl{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px 10px}
.mtctlrow{display:flex;align-items:center;gap:6px;flex:1 1 220px;min-width:0}
.mtctlrow .lbl{font-size:.68rem;color:var(--sub);font-weight:600;flex-shrink:0}
.mtctl .opts{flex:1;min-width:0}
.mtctl .opts button{padding:5px 2px;font-size:.72rem}
.mtctl .opts button[aria-pressed="true"]{background:var(--cy);border-color:var(--cy);color:#06202b}
.mtctl .opts button:disabled{opacity:.45;cursor:default}
.mtcnt{flex:1 1 100%;font-size:.66rem;color:var(--sub)}
/* 全ポケモンから探すときは、その相手に合わせて選んだわざを名前の下に小さく出す */
.opname .cnmv{display:block;font-size:.62rem;color:var(--sub);font-weight:400;margin-top:1px}
.mtempty{color:var(--sub);font-size:.72rem;text-align:center!important;cursor:default!important}
.mttbl{width:100%;border-collapse:separate;border-spacing:0 4px;margin-top:8px;font-size:.78rem}
.mttbl th{color:var(--sub);font-weight:600;font-size:.66rem;padding:2px}
.mttbl td{padding:6px 4px;background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center;cursor:pointer}
.mttbl td.opname{text-align:left;border-left:1px solid var(--line);border-radius:8px 0 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:0;width:42%}
.mttbl td:last-child{border-right:1px solid var(--line);border-radius:0 8px 8px 0}
.mttbl td.w{color:var(--win);font-weight:700}
.mttbl td.l{color:var(--lose);font-weight:700}
.mttbl td.d{color:var(--gold);font-weight:700}
.mttbl td small{display:block;font-weight:400;color:var(--sub);font-size:.6rem}
.mtprog{color:var(--sub);font-size:.74rem;margin-top:8px;line-height:1.9}
/* 環境勝率(2026-09-02): 満点が実質存在しない(1位でも65%前後)ので、
   高いか低いかを文字色で示す。低い順に 水色 → 黄 → 赤 → 金 */
.mtscore{font-size:1.05rem;font-weight:800;color:var(--gold)}
.mtscore.cy{color:#3fd0e8}
.mtscore.yel{color:#f0c53a}
.mtscore.red{color:#ff6b6b}
.mtscore.gold{color:#ffd54a;text-shadow:0 0 10px rgba(255,213,74,.45)}
:root.light .mtscore.cy{color:#0a8ea6}
:root.light .mtscore.yel{color:#a67c00}
:root.light .mtscore.red{color:#c92a2a}
:root.light .mtscore.gold{color:#a36f00;text-shadow:none}
.mtscore small{font-size:.7rem;font-weight:600}
.mtscorenote{font-size:.66rem;margin-left:6px;color:var(--sub)}
.shmtx{margin-top:12px}
.shmtx table{border-collapse:separate;border-spacing:3px;width:100%;max-width:430px;margin:6px auto 0}
.shmtx th{color:var(--sub);font-weight:600;font-size:.68rem;padding:2px}
.shmtx th.corner{font-size:.62rem}
.shmtx td{background:var(--deep);border:1px solid var(--line);border-radius:8px;text-align:center;padding:5px 2px;cursor:pointer}
.shmtx td b{font-size:.82rem}
.shmtx td.w b{color:var(--win)}
.shmtx td.l b{color:var(--lose)}
.shmtx td.d b{color:var(--gold)}
.shmtx td small{display:block;color:var(--sub);font-size:.62rem;margin-top:1px}
.shmtx td.cur{border-color:var(--cy);box-shadow:0 0 0 1px var(--cy)}
.mvcols{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;margin-top:10px;align-items:start}
.mvside{min-width:0}
.mvhead{color:var(--sub);font-size:.68rem;padding-bottom:4px;border-bottom:1px solid var(--line)}
.mvside .mvrow{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:2px 6px;padding:5px 0;border-bottom:1px solid var(--line);font-size:.76rem;min-width:0}
.mvside .mvrow .mvname{white-space:nowrap}
.mvside .mvrow .num{color:var(--sub);white-space:nowrap;font-size:.72rem;margin-left:auto}
.mvname{display:inline-flex;align-items:center;gap:4px}
/* タイムライン */
.tl{margin-top:12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px;display:none}
.tl h3{font-size:.85rem;margin-bottom:8px;color:var(--sub)}
.tltbl{width:100%;border-collapse:collapse;font-size:.76rem}
.tltbl th{color:var(--sub);font-weight:600;font-size:.68rem;padding:2px 4px;border-bottom:1px solid var(--line)}
.tltbl td{padding:2px 4px;border-bottom:1px solid #1d264a;text-align:center}
.tltbl td.ev{text-align:left}
.tltbl td.ev.r{text-align:right}
.tltbl tr.charged{background:rgba(176,108,255,.10)}
.tltbl tr.charged td{border-bottom-color:#33265c}
.tn{color:var(--sub)}
.shield{color:var(--cy)}
.buffup{color:var(--gold)}
.buffdown{color:#ff8f6b}
.extra{color:var(--cy);font-weight:700}
.note{margin-top:12px;color:var(--sub);font-size:.72rem}
.share{margin-top:12px;display:flex;gap:8px}
.share button{padding:9px 14px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;color:var(--ink);font-size:.82rem;cursor:pointer}
.share button:hover{border-color:var(--gl)}
.loading{margin-top:22px;color:var(--sub);text-align:center}
footer{margin-top:26px;color:#5b6690;font-size:.68rem;text-align:center}
/* 結論の要約 */
.concl{font-size:.95rem;font-weight:700;margin-bottom:10px;line-height:1.5}
.concl .w{color:var(--win)}
.concl small{display:block;font-weight:400;color:var(--sub);font-size:.74rem;margin-top:2px}
.tltbl tr.gap td{color:var(--sub);font-size:.7rem;padding:4px;border-bottom:1px dashed var(--line)}
.tltbl td.ko{color:var(--lose);font-weight:700}
.tltbl td.hpg{color:#4be08e;font-weight:700}
.tltbl td.hpy{color:#ffd54a;font-weight:700}
.tltbl td.hpr{color:#ff7b8e;font-weight:700}
.tltbl td.ensp{color:#f472b6;font-weight:700}
.tlhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:8px}
.tlhead h3{margin:0;font-size:.8rem;white-space:nowrap}
.tlhead h3 small{font-size:.62rem;font-weight:400;color:var(--sub);margin-left:6px}
.tlmode{display:flex;gap:4px;flex-shrink:0}
.tlmode button{padding:4px 10px;font-size:.72rem;background:var(--bg2);border:1px solid var(--line);border-radius:8px;color:var(--sub);cursor:pointer;white-space:nowrap}
.tltbl .mvname{white-space:nowrap}
.popwin{margin-top:6px;border:1px solid var(--gl);border-radius:10px;padding:8px;background:var(--bg2)}
.popttl{font-size:.7rem;color:var(--sub);font-weight:600;margin-bottom:6px}
/* 発ごとのSP設定の折りたたみ(SPアタック2選択時の既定)。見出しタップで開閉 */
.custSp .popttl{cursor:pointer;user-select:none}
.custSp .popttl::after{content:'▾';margin-left:6px;opacity:.7}
.custSp.fold .popttl::after{content:'▸'}
.custSp.fold .popttl{margin-bottom:0}
.custSp.fold .legend,.custSp.fold .sprows{display:none}
.slots{display:flex;flex-wrap:wrap;gap:4px}
.slots button{flex:1 0 30%;padding:5px 2px;font-size:.7rem;background:var(--panel);border:1px solid var(--line);border-radius:8px;color:var(--sub);cursor:pointer;white-space:nowrap}
.slots button[aria-pressed="true"]{background:var(--cy);border-color:var(--cy);color:#06202b;font-weight:700}
.legend{font-size:.68rem;color:var(--sub);margin-bottom:6px;line-height:1.7}
.legend .autonote{font-size:.64rem;opacity:.85}
.sprow{display:flex;align-items:center;gap:6px;margin-top:4px}
.sprow .lbl{font-size:.7rem;color:var(--sub);width:3.6em;flex-shrink:0}
.sprow button{flex:1;padding:4px 2px;font-size:.7rem;background:var(--panel);border:1px solid var(--line);border-radius:8px;color:var(--sub);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sprow button[aria-pressed="true"]{background:var(--ml);border-color:var(--ml);color:var(--onml);font-weight:700}
.sprow select.tsel{flex:1 1 5em;min-width:4.6em;background:var(--panel);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:4px 2px;font-size:.72rem;outline:none}
.sprow select.tsel:focus{border-color:var(--gl)}
.custSp .sprow{flex-wrap:wrap;row-gap:4px}
.custSp .sprow button{flex:0 0 2.4em;min-width:2.4em}
/* 全ターン表示: わざ1発を所要ターン分の枠で表示 */
.mvblock{border:2px solid var(--line2);background:rgba(19,26,51,.5);font-size:.72rem;vertical-align:middle;padding:2px 4px}
/* 行結合セルは下線が描かれないことがあるため内側シャドウで四辺を確実に描く */
.mvblock:not(.pendingblock){box-shadow:inset 0 0 0 2px var(--line2)}
.mvblock.spblock:not(.pendingblock){box-shadow:inset 0 0 0 2px var(--ml)}
.mvblock.l{text-align:left}
.mvblock.r{text-align:right}
.mvblock.spblock{border-color:var(--ml);background:rgba(176,108,255,.14)}
.mvblock.pendingblock{border-style:dashed;color:var(--sub)}
.mvblock.vbottom{vertical-align:bottom;padding-bottom:5px}
.mvblock.vtop{vertical-align:top;padding-top:5px}
.mvblock .shield{display:block;font-size:.82rem}
.mvblock .mvname{white-space:normal}
.evbox{display:inline-block;border:1px solid #35406e;border-radius:8px;padding:1px 6px;margin:1px 0;background:rgba(19,26,51,.7)}
.tlmode button[aria-pressed="true"]{background:var(--gl);border-color:var(--gl);color:#06122b;font-weight:700}
@media (max-width:430px){
  .duel{gap:6px}
  .side{padding:8px}
  h1{font-size:1.28rem}
  select{font-size:.76rem;padding:6px 4px}
  .tltbl{font-size:.68rem}
  .tltbl td{padding:2px}
  .evbox{padding:1px 4px}
}

/* ==== GBL模擬戦(/gbl/ モード 'mock')。作りはロケット団の模擬戦と共通で、ここは差分だけ ==== */
.gbaibar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 2px}
.gbaibar .lbl{font-size:.7rem;color:var(--sub);font-weight:700}
/* あいて難易度(EASY/NORMAL/HARD)。他のタブよりひと目立ちさせる特別デザイン(2026-08-20タダシさん指示):
   3色のグラデーションの縁取りで1つのまとまりに見せ、選択中はその難易度の色で点灯して光の帯が流れる */
.gbai{flex:0 1 auto;min-width:0;gap:4px;padding:4px;border-radius:14px;
  border:1px solid transparent;
  background:linear-gradient(var(--bg2),var(--bg2)) padding-box,
    linear-gradient(120deg,#3ddc84 0%,#43e0ff 50%,#ff5470 100%) border-box;
  box-shadow:0 3px 10px rgba(0,0,0,.25)}
.gbai button{flex:0 1 auto;display:flex;flex-direction:column;align-items:center;gap:0;
  padding:5px 14px 6px;border-radius:10px;color:var(--dc);opacity:.8;
  background:var(--tab);border:1px solid var(--line);
  box-shadow:0 2px 0 var(--tabsh),inset 0 1px 0 var(--tabin);
  transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease}
.gbai button b{font-size:.76rem;font-weight:900;letter-spacing:.1em;line-height:1.25}
.gbai button small{font-size:.55rem;font-weight:700;letter-spacing:.06em;opacity:.8;line-height:1.2}
.gbai button:hover{opacity:1;transform:translateY(-1px)}
/* 難易度ごとの色: EASY=緑(やさしい) / NORMAL=水色(標準・バトルの基調色) / HARD=赤(最強・危険) */
.gbai button[data-v="easy"]{--dc:#7fe6a8;--d1:#c8ffdd;--dm:#2fcf72;--d2:#0d7a3e;--dt:#06341a;--dg:rgba(61,220,132,.42)}
.gbai button[data-v="normal"]{--dc:#7fd7ff;--d1:#c9f4ff;--dm:#17b0dd;--d2:#0a6c94;--dt:#042330;--dg:rgba(67,224,255,.42)}
.gbai button[data-v="hard"]{--dc:#ff8f9e;--d1:#ffc2a1;--dm:#e6373f;--d2:#66103a;--dt:#fff;--dg:rgba(255,84,112,.5)}
:root.light .gbai button[data-v="easy"]{--dc:#168a4a}
:root.light .gbai button[data-v="normal"]{--dc:#0b7fa0}
:root.light .gbai button[data-v="hard"]{--dc:#c62b46}
.gbai button[aria-pressed="true"]{opacity:1;color:var(--dt);border-color:var(--d1);transform:translateY(-1px);
  background:linear-gradient(160deg,var(--d1) 0%,var(--dm) 45%,var(--d2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  position:relative;overflow:hidden}
.gbai button[aria-pressed="true"] small{opacity:1}
/* 選択中は光の帯がひとすじ流れる(派手にしすぎない) */
.gbai button[aria-pressed="true"]::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);animation:gdshine 3.4s ease-in-out infinite;pointer-events:none}
@keyframes gdshine{0%{left:-70%}55%,100%{left:135%}}
@media (prefers-reduced-motion:reduce){.gbai button[aria-pressed="true"]::after{animation:none;display:none}}
@media (max-width:560px){.gbai{flex:1 1 100%;display:flex}.gbai button{flex:1;padding:5px 4px}}
/* 模擬戦のあいて列: 見出しの右に「わざ えらぶ｜オート」(2026-08-20)。
   オート中はわざの選択欄を隠す(環境の定番構成で戦い、何が飛んでくるかは分からない) */
#mock .gfhead{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap}
#mock .gfhead>span{flex:0 0 auto}
/* 「🎲 おまかせ3匹」(2026-09-02): 入れ替え候補と同じ金のピル。見出しに収まるよう少し小さく。
   狭い画面では2つのボタンで1行を分け合う(見出しは上の行に残す) */
#mock .gfrand{padding:5px 10px;font-size:.7rem;white-space:nowrap;word-break:keep-all}
@media (max-width:430px){#mock .gfhead>span{flex:1 0 100%}#mock .gfrand,#mock .sdrand,#mock .sdrandmy{flex:1 1 auto}}
#mock .gfoeslots.auto .fbody select{display:none}
/* HUDのゲージ残量の数字(2026-08-20タダシさん指示・ゲージ管理の要なので大きめに) */
.rbhud .gqn{font-size:1.06rem;font-weight:900;color:var(--cy);min-width:2ch;text-align:center;line-height:1}
.rbhud .hs.foe .gqn{color:var(--gold)}
/* あいての行動のチップ・決断ウィンドウは金色(あいて側の色)で見分ける */
/* 両者の決断が同じターンに並ぶときの統合フレーム(2026-08-31タダシさん指示):
   じぶん=左・あいて=右(タイムラインの列と同じ向き)。SPどうしは真ん中に「同時発動」の札 */
.fc.pair{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.ft.simul{display:grid;grid-template-columns:1fr 38px 1fr;min-height:16px;padding:1px 0}
.ft.simul .pmid{grid-column:1/4;justify-self:center}
.ft.simul .tn{grid-column:2;grid-row:1}
.fc.pair .pmid,.ft.simul .pmid{font-style:normal;font-size:.58rem;font-weight:900;color:var(--gold);letter-spacing:.08em;
  white-space:nowrap;padding:2px 8px;border:1px solid rgba(255,213,74,.55);border-radius:99px;
  background:rgba(255,213,74,.12);text-shadow:0 0 10px rgba(255,213,74,.55)}
.fc.pair .pdiv{width:14px;height:1px;background:var(--line2)}
.fchip.foe{border-color:rgba(255,213,74,.45)}
.fchip.foe:hover{border-color:var(--gold)}
/* チップの「じぶん／あいて」の札。色だけでは伝わらないので必ず文字でも出す */
.fchip .who{font-style:normal;font-size:.58rem;font-weight:800;letter-spacing:.02em;
  padding:1px 5px;border-radius:99px;background:rgba(67,224,255,.16);color:var(--cy)}
.fchip.foe .who{background:rgba(255,213,74,.16);color:var(--gold)}
.rbwin.foe{border-color:var(--gold)}
.rbwho{font-style:normal;font-weight:900;color:var(--gold);font-size:.72rem}

/* ---- かんたん案内(初心者向けの入り口・2026-08-26) ---- */
/* 常設ボタン: 若葉マークのピル。初回は自動で開くので、ここは「開き直す」用 */
.easyrow{margin:2px 0 8px}
.easybtn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid var(--line2);
  border-radius:999px;background:var(--tab);color:var(--ink);font-size:.8rem;font-weight:700;cursor:pointer;
  box-shadow:0 2px 0 var(--tabsh),inset 0 1px 0 var(--tabin)}
.easybtn:hover{transform:translateY(-1px)}
.easybtn .lf{font-size:.95rem}
/* オーバーレイと窓 */
.easyov{position:fixed;inset:0;background:rgba(5,8,20,.6);z-index:200;display:flex;
  align-items:flex-start;justify-content:center;padding:7vh 14px 14px;overflow:auto}
.easywin{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--line2);
  border-radius:16px;padding:16px;box-shadow:0 24px 60px rgba(0,0,0,.55)}
:root.light .easywin{box-shadow:0 24px 60px rgba(30,40,90,.35)}
.easyhd{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.easyhd b{font-size:1.02rem}
.easyx{margin-left:auto;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;
  background:var(--bg2);color:var(--sub);font-size:.95rem;cursor:pointer;line-height:1}
.easyx:hover{color:var(--ink)}
.easyq{font-size:.92rem;font-weight:700;margin:2px 0 10px}
.easycards{display:flex;flex-direction:column;gap:8px}
.easycard{display:flex;align-items:center;gap:12px;text-align:left;padding:11px 12px;background:var(--tab);
  border:1px solid var(--line2);border-radius:12px;color:var(--ink);cursor:pointer;
  box-shadow:0 2px 0 var(--tabsh),inset 0 1px 0 var(--tabin)}
.easycard:hover{transform:translateY(-1px);border-color:var(--gl)}
.easycard .ic{font-size:1.35rem;flex:0 0 30px;text-align:center}
.easycard .tx{flex:1;min-width:0}
.easycard .tx b{display:block;font-size:.93rem}
.easycard .tx small{display:block;color:var(--sub);font-size:.75rem;line-height:1.55;margin-top:1px}
.easyback{margin-top:10px;background:none;border:none;color:var(--sub);font-size:.8rem;cursor:pointer;padding:4px 2px}
.easyback:hover{color:var(--ink)}
.easynote{font-size:.84rem;line-height:1.8;color:var(--ink);background:var(--bg2);
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:10px}
.easygo{width:100%;padding:11px;border:none;border-radius:12px;font-size:.95rem;font-weight:800;cursor:pointer;
  background:linear-gradient(160deg,#7ce7ff 0%,#08b4c9 45%,#0a7f96 100%);color:#042330;
  box-shadow:0 5px 16px rgba(8,180,201,.4),inset 0 1px 0 rgba(255,255,255,.6)}
.easygo:hover{transform:translateY(-1px)}
.easywin .sugg input{font-size:16px}

/* ---- ふきだしツアー(かんたん案内の続き。次に見るものへ目線を誘導する) ---- */
.gtip{position:absolute;z-index:220;background:var(--panel);border:2px solid var(--cy);border-radius:12px;
  padding:10px 12px;box-shadow:0 12px 32px rgba(0,0,0,.5);font-size:.84rem;line-height:1.75}
:root.light .gtip{box-shadow:0 12px 32px rgba(30,40,90,.3)}
.gtip::before{content:"";position:absolute;top:-8px;left:var(--ax,24px);width:13px;height:13px;
  background:var(--panel);border-left:2px solid var(--cy);border-top:2px solid var(--cy);transform:rotate(45deg)}
.gtip.noarrow::before{display:none}
.gtip .nav{display:flex;align-items:center;gap:8px;margin-top:8px}
.gtip .n{color:var(--sub);font-size:.74rem;margin-right:auto}
/* ひとつ前のふきだしへ戻る(読み返せるように・2026-09-01) */
.gtip .tprev{background:none;border:1px solid var(--line);border-radius:999px;padding:6px 11px;
  color:var(--sub);cursor:pointer;font-size:.76rem;font-weight:700;font-family:inherit}
.gtip .tprev:hover{color:var(--ink)}
.gtip .tnext{padding:6px 14px;border:none;border-radius:999px;font-weight:800;font-size:.8rem;
  cursor:pointer;background:linear-gradient(160deg,#7ce7ff 0%,#08b4c9 45%,#0a7f96 100%);color:#042330;
  box-shadow:0 3px 10px rgba(8,180,201,.4)}
.gtip .tnext:hover{transform:translateY(-1px)}
.gtip .tskip{background:none;border:1px solid var(--line);border-radius:50%;width:26px;height:26px;
  color:var(--sub);cursor:pointer;line-height:1}
.gtip-hi{box-shadow:0 0 0 3px var(--cy),0 0 22px rgba(67,224,255,.55)!important;border-radius:10px}

/* ---- 対戦記録(mode 'blog')。自分の土俵の環境を記録・分析する(2026-08-27) ---- */
#blog h3{margin:2px 0 8px}
.blentry{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px;margin-bottom:10px}
.blhd{display:flex;align-items:baseline;gap:8px;margin-bottom:7px}
.blhd .blhint{color:var(--sub);font-size:.7rem}
.blquick{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:8px}
.blquick .blqlbl{color:var(--sub);font-size:.7rem;flex:0 0 auto}
.blchip{background:var(--tab);border:1px solid var(--line2);border-radius:999px;color:var(--ink);
  font-size:.72rem;padding:4px 9px;cursor:pointer;box-shadow:0 2px 0 var(--tabsh),inset 0 1px 0 var(--tabin)}
.blchip:hover{transform:translateY(-1px)}
.blctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.bladd{margin-left:auto;background:linear-gradient(160deg,#7ce7ff 0%,#08b4c9 45%,#0a7f96 100%);
  border:none;border-radius:10px;color:#042330;font-weight:700;font-size:.86rem;padding:9px 16px;cursor:pointer;
  box-shadow:0 5px 16px rgba(8,180,201,.4),inset 0 1px 0 rgba(255,255,255,.6)}
.bladd:hover{transform:translateY(-1px)}
.blmine{color:var(--sub);font-size:.72rem;margin-top:8px;line-height:1.6}
.blmine b{color:var(--ink);font-weight:600}
.blmsg{color:var(--cy);font-size:.76rem;margin-top:5px;min-height:1em}
.blsum{font-size:.82rem;margin:10px 0;line-height:1.9}
.blsum small{color:var(--sub);margin-left:4px}
.blusecup{display:block;margin-top:6px;background:var(--tab);border:1px solid var(--goldc);border-radius:10px;
  color:var(--goldc);font-weight:700;font-size:.78rem;padding:8px 13px;cursor:pointer;
  box-shadow:0 2px 0 var(--tabsh),inset 0 1px 0 var(--tabin)}
.blusecup:hover{transform:translateY(-1px)}
.blviews{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.blviews .blperiod{margin-left:auto}
.blviews .blperiod button{font-size:.7rem}
/* 採用率の表 */
.bltbl{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.blth,.bltr{display:grid;grid-template-columns:30px 1fr 74px 40px 48px 52px;align-items:center;gap:4px;padding:6px 8px}
.blth{background:var(--bg2);color:var(--sub);font-size:.66rem;text-align:center}
.blth span:nth-child(2){text-align:left}
.bltr{border-top:1px solid var(--line);font-size:.8rem}
.bltr:nth-child(even){background:rgba(77,141,255,.05)}
.blrank{color:var(--sub);font-size:.72rem;text-align:center}
.bltr:nth-child(2) .blrank,.blhitrow:nth-child(2) .blrank{color:var(--gold);font-weight:800}
.blnm{display:flex;align-items:center;gap:5px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:600}
.blcell{text-align:center;font-variant-numeric:tabular-nums}
.blcell small{display:block;color:var(--sub);font-size:.62rem}
.blcell.ok{color:var(--win)}
.blcell.bad{color:var(--lose)}
.blcell.dim{color:var(--sub)}
.blcnt{background:var(--tab);border:1px solid var(--line2);border-radius:8px;color:var(--cy);
  font-size:.7rem;font-weight:700;padding:5px 4px;cursor:pointer;box-shadow:0 2px 0 var(--tabsh)}
.blcnt:hover{transform:translateY(-1px)}
/* 履歴 */
.blhist{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.blhrow{display:flex;align-items:center;gap:8px;padding:7px 9px;border-top:1px solid var(--line);font-size:.78rem}
.blhrow:first-child{border-top:none}
.blhrow:nth-child(even){background:rgba(77,141,255,.05)}
.bldate{color:var(--sub);font-size:.68rem;flex:0 0 34px}
.blfoes{flex:1;min-width:0;line-height:1.5}
.blfoes .blvs{display:block;color:var(--sub);font-size:.66rem}
.blwl{flex:0 0 auto;font-size:.72rem;font-weight:700;color:var(--sub)}
.blwl.w{color:var(--win)}
.blwl.l{color:var(--lose)}
.bldel{flex:0 0 auto;background:none;border:1px solid var(--line);border-radius:8px;color:var(--sub);
  font-size:.7rem;padding:4px 7px;cursor:pointer}
.bldel.arm{background:var(--lose);border-color:var(--lose);color:#fff;font-weight:700}
/* 刺さるポケモン */
.blhit{border:1px solid var(--line);border-radius:12px;padding:6px 8px}
.blhit .enote{margin:4px 2px 8px}
.blhitrow{display:grid;grid-template-columns:30px minmax(0,42%) 1fr 44px 54px;align-items:center;gap:6px;
  padding:6px 2px;border-top:1px dashed var(--line);font-size:.8rem}
.blhitrow:first-of-type{border-top:none}
.blbar{height:9px;border-radius:999px;background:var(--bg2);border:1px solid var(--line);overflow:hidden}
.blbar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gl),var(--cy))}
.blpct{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;color:var(--cy)}
.blbeat{text-align:right;color:var(--sub);font-size:.7rem;font-variant-numeric:tabular-nums}
/* カップ一覧のマイ環境ボタン */
.cupslots .mycup{border-color:var(--goldc)}
.cupslots .mycup small{color:var(--goldc)}
@media (max-width:560px){
  .blth,.bltr{grid-template-columns:24px 1fr 62px 34px 44px 46px;padding:6px 5px}
  .bltr{font-size:.74rem}
  .blviews .blperiod{margin-left:0}
}
.blslot .bllead{margin-left:5px;color:var(--sub);font-size:.62rem;font-weight:400}
/* レート入力とグラフ・全削除(2026-08-27) */
.blrate{width:110px;font-size:16px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  color:var(--ink);padding:8px 10px;outline:none}
.blrate:focus{border-color:var(--gl)}
.blgraph{border:1px solid var(--line);border-radius:12px;padding:10px 8px 4px}
.blghead{font-size:.82rem;margin:0 4px 6px}
.blghead b{font-size:1.05rem;color:var(--cy)}
.blghead span{color:var(--sub);font-size:.74rem}
.blghead i{font-style:normal;font-weight:700}
.blghead i.up{color:var(--win)}
.blghead i.down{color:var(--lose)}
.blgsvg{width:100%;height:auto;display:block}
.blggrid{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
.blgy,.blgx{fill:var(--sub);font-size:11px}
.blgy{text-anchor:end}
.blgline{fill:none;stroke:var(--cy);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.blgarea{fill:rgba(67,224,255,.09);stroke:none}
.blgdot{fill:var(--cy);stroke:var(--bg2);stroke-width:1.5}
.blgdot.cur{fill:var(--gold)}
.blreset{display:block;margin:14px auto 4px;background:none;border:1px solid var(--line);border-radius:10px;
  color:var(--sub);font-size:.74rem;padding:8px 14px;cursor:pointer}
.blreset:hover{color:var(--lose);border-color:var(--lose)}
.blbackup{display:block;width:max-content;margin:16px auto 0;border:1px solid var(--line2);border-radius:10px;
  background:var(--tab);color:var(--ink);font-size:.78rem;font-weight:700;padding:8px 16px;text-decoration:none;
  box-shadow:0 2px 0 var(--tabsh)}
.blbackup:hover{transform:translateY(-1px)}
.blconfirm{margin:14px 0 4px;border:1px solid var(--lose);border-radius:12px;padding:12px;
  font-size:.8rem;line-height:1.8;background:rgba(255,107,129,.07)}
.blcbtns{display:flex;gap:10px;margin-top:8px}
.blcyes{background:var(--lose);border:none;border-radius:10px;color:#fff;font-weight:700;
  font-size:.8rem;padding:9px 16px;cursor:pointer}
.blcno{background:var(--tab);border:1px solid var(--line2);border-radius:10px;color:var(--ink);
  font-size:.8rem;padding:9px 16px;cursor:pointer;box-shadow:0 2px 0 var(--tabsh)}
@media (max-width:560px){.blrate{width:96px}}
/* タイプ相性の4グラフ(対戦記録・2026-08-27) */
.bltysec{font-size:.84rem;font-weight:700;margin:12px 2px 8px}
.bltysec small{color:var(--sub);font-weight:400;font-size:.7rem;margin-left:6px}
.bltysec:first-of-type{margin-top:4px}
.bltygrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bltyg{border:1px solid var(--line);border-radius:12px;padding:9px 10px}
.bltyt{font-size:.78rem;font-weight:700}
.bltys{color:var(--sub);font-size:.66rem;margin:1px 0 7px}
.bltyr{display:grid;grid-template-columns:20px 1fr 38px;align-items:center;gap:7px;padding:2.5px 0}
.bltyb{height:8px;border-radius:999px;background:var(--bg2);border:1px solid var(--line);overflow:hidden}
.bltyb i{display:block;height:100%;border-radius:999px}
.bltyb i.good{background:linear-gradient(90deg,var(--gl),var(--cy))}
.bltyb i.bad{background:linear-gradient(90deg,#ff9f43,var(--lose))}
.bltyr b{font-size:.7rem;text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:640px){.bltygrid{grid-template-columns:1fr}}
/* 相性グラフの切り替えボタン(1つずつ表示・2026-08-27) */
.bltysel{margin-bottom:10px;flex-wrap:wrap}
.bltysel button{font-size:.72rem}
.bltype .bltyg{max-width:560px}

/* 交代受けが決まった瞬間(2026-09-07タダシさん指示・2026-09-08「もう少し大きく、見栄えよく」で作り直し)。
   SPのカットインと同じ「横いっぱいの帯」に、回る⇄(輪と光の粒つき)＋大きな見出しを横に並べる。
   色は じぶんが決めた=水色／あいてに決められた=金。⇄マーク自体は確定仕様の金の画像なので変えない。
   ⚠ 見出しの塗り(background-clip:text)と filter は文字だけの .ttl に限定する(中に要素を入れない・iPhone対策の恒久ルール) */
.fxitem.fxpivot{--pc:#43e0ff;--pc2:#0f8fb8;--pcd:rgba(67,224,255,.6)}
.fxitem.fxpivot.foe{--pc:#ffd54a;--pc2:#c98a12;--pcd:rgba(255,213,74,.6)}
.fxpivot .pvband{position:absolute;left:-12%;right:-12%;top:calc(50% - var(--fxup));height:156px;margin-top:-78px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;gap:22px;
  background:linear-gradient(100deg,transparent 0%,rgba(8,12,30,.9) 12%,rgba(10,16,38,.97) 50%,rgba(8,12,30,.9) 88%,transparent 100%);
  box-shadow:0 0 40px rgba(0,0,0,.5);animation:fxpvband var(--fxd) ease both}
.fxpivot.foe .pvband{animation-name:fxpvbandR}
/* 上下の光る細い線 */
.fxpivot .pvband::before,.fxpivot .pvband::after{content:'';position:absolute;left:8%;right:8%;height:3px;
  background:linear-gradient(90deg,transparent,var(--pc) 22%,#fff 50%,var(--pc) 78%,transparent);
  box-shadow:0 0 16px var(--pcd)}
.fxpivot .pvband::before{top:0}.fxpivot .pvband::after{bottom:0}
/* 帯を横切る光のすじ */
.fxpivot .pvshine{position:absolute;top:0;bottom:0;left:-30%;width:26%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.26),transparent);animation:fxpvshine var(--fxd) ease-out both}
/* 回る⇄と、広がる輪・光の粒 */
.fxpivot .pvmk{position:relative;flex:0 0 auto;width:96px;height:96px;display:flex;align-items:center;justify-content:center}
.fxpivot .pvspin{display:block;font-size:4.2rem;line-height:1;
  filter:drop-shadow(0 0 14px var(--pcd)) drop-shadow(0 3px 3px rgba(0,0,0,.6));
  animation:fxpvspin var(--fxd) cubic-bezier(.2,.9,.25,1) both}
.fxpivot .pvspin .swapmark{width:1em;height:1em;vertical-align:0}
.fxpivot .ring{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;
  border-radius:50%;border:3px solid var(--pc);opacity:0;animation:fxpvring var(--fxd) ease-out both}
.fxpivot .ring.r2{border-width:2px;border-color:#fff;animation-delay:calc(var(--fxd)*.05)}
.fxpivot .spark{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:#fff;box-shadow:0 0 10px var(--pc);opacity:0;animation:fxpvspark var(--fxd) ease-out both}
.fxpivot .s1{--dx:-64px;--dy:-50px}.fxpivot .s2{--dx:66px;--dy:-44px}.fxpivot .s3{--dx:-78px;--dy:10px}
.fxpivot .s4{--dx:78px;--dy:16px}.fxpivot .s5{--dx:-36px;--dy:64px}.fxpivot .s6{--dx:40px;--dy:62px}
/* 見出し: 上が白・下がその側の色のグラデーション文字＋押し出し。下に「◯◯ が受けた」 */
/* ⚠ 汎用の .fxitem .tx(丸いピル・後ろで定義)に詳細度で勝つため .fxitem.fxpivot で限定する */
.fxitem.fxpivot .tx{background:none;border:0;box-shadow:none;padding:0;border-radius:0;white-space:nowrap;text-align:left;
  animation:fxpvtx var(--fxd) cubic-bezier(.2,.9,.25,1) both}
.fxpivot .tx .ttl{display:block;font-size:2.1rem;font-weight:900;font-style:italic;letter-spacing:.06em;line-height:1.1;
  padding-right:.06em;
  background-image:linear-gradient(180deg,#fff 0%,#fff 44%,var(--pc) 58%,var(--pc2) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.55)) drop-shadow(0 0 18px var(--pcd))}
.fxpivot .tx .who{display:block;margin-top:7px;font-size:.86rem;font-weight:800;color:#e4ecff;letter-spacing:.03em;
  text-shadow:0 2px 8px rgba(0,0,0,.8)}
.fxpivot .flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,var(--pcd),transparent 62%);
  animation:fxpvflash var(--fxd) ease both}
@keyframes fxpvband{0%{opacity:0;transform:translateX(-40%)}12%{opacity:1;transform:translateX(0)}80%{opacity:1;transform:translateX(2%)}100%{opacity:0;transform:translateX(16%)}}
@keyframes fxpvbandR{0%{opacity:0;transform:translateX(40%)}12%{opacity:1;transform:translateX(0)}80%{opacity:1;transform:translateX(-2%)}100%{opacity:0;transform:translateX(-16%)}}
@keyframes fxpvshine{0%,50%{left:-30%}84%,100%{left:110%}}
/* ⇄は3回転しながら減速して「カチッ」と止まる(2026-09-08タダシさん指示)。止まった瞬間(約55%)に
   輪と光の粒がはじけ、閃光が走り、見出しが出る。80%(静止に切り替える位置)までに姿勢を rotate(0) scale(1) へ戻す */
@keyframes fxpvspin{0%{opacity:0;transform:scale(.45) rotate(-1080deg);animation-timing-function:cubic-bezier(.15,.6,.25,1)}
  8%{opacity:1}
  54%{transform:scale(1.14) rotate(14deg);animation-timing-function:ease-out}
  63%{transform:scale(.98) rotate(-5deg);animation-timing-function:ease-out}
  71%{transform:scale(1) rotate(0deg)}100%{opacity:1;transform:scale(1) rotate(0deg)}}
@keyframes fxpvring{0%,52%{opacity:0;transform:scale(.3)}60%{opacity:.95}80%,100%{opacity:0;transform:scale(2.3)}}
@keyframes fxpvspark{0%,53%{opacity:0;transform:none}60%{opacity:1}80%,100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
@keyframes fxpvtx{0%,50%{opacity:0;transform:translateX(-28px) scale(.86)}62%{opacity:1;transform:translateX(0) scale(1.08)}72%{transform:scale(1)}100%{opacity:1;transform:none}}
@keyframes fxpvflash{0%,50%{opacity:0}57%{opacity:.7}76%{opacity:0}100%{opacity:0}}
@media (max-width:540px){
  .fxpivot .pvband{height:124px;margin-top:-62px;gap:12px}
  .fxpivot .pvmk{width:70px;height:70px}
  .fxpivot .pvspin{font-size:2.9rem}
  .fxpivot .ring{width:70px;height:70px;margin:-35px 0 0 -35px}
  .fxpivot .tx .ttl{font-size:1.55rem;letter-spacing:.04em}
  .fxpivot .tx .who{font-size:.78rem}
}

/* ---- 模擬戦の演出(FX・2026-08-30タダシさん指示「ゲームっぽく動きのある演出を」) ----
   くりだした/交代/SP発動/たおれた/フォルムチェンジのカットイン。見た目だけの層(#fxlayer)で、
   バトルの計算には影響しない。時間は--fxd(再生速度で短縮)で全アニメを同期させる */
#fxlayer{position:fixed;inset:0;pointer-events:none;z-index:400;overflow:hidden}
/* ⚠ 演出は画面の中央より**上**に出す(2026-09-08タダシさん指示)。中央だとHUDのすぐ上＝最新のタイムラインに
   重なって、いま何が起きているかが読めなくなる。--fxup のぶん上へ寄せる(下に余白を取って中央を上げる) */
.fxitem{--fxup:17vh;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-bottom:calc(var(--fxup) * 2)}
/* SPの着弾でタイムラインとHUDを揺らす */
.fxquake{animation:fxq .68s ease}
@keyframes fxq{0%,100%{transform:none}15%{transform:translate(3px,-4px)}30%{transform:translate(-4px,3px)}45%{transform:translate(3px,2px)}60%{transform:translate(-2px,-2px)}75%{transform:translate(1px,1px)}}
/* 共通: 名前の帯 */
.fxitem .tx{font-weight:900;font-size:1.02rem;color:#fff;background:rgba(12,17,34,.94);
  border:1px solid var(--cy);border-radius:99px;padding:8px 18px;white-space:nowrap;
  box-shadow:0 6px 24px rgba(0,0,0,.5);animation:fxtx var(--fxd) ease both}
.fxitem.foe .tx{border-color:var(--gold)}
@keyframes fxtx{0%,30%{opacity:0;transform:translateY(14px)}45%{opacity:1;transform:none}85%{opacity:1}100%{opacity:0}}
/* VS(バトル開始): 左右から名前が飛び込んでVSがズームイン */
.fxvs .vswrap{display:flex;align-items:center;gap:14px;font-weight:900;max-width:96vw}
.fxvs .pn{font-size:1.02rem;color:#fff;background:rgba(12,17,34,.94);border:1px solid var(--gl);
  border-radius:12px;padding:8px 14px;box-shadow:0 6px 24px rgba(0,0,0,.5);
  max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fxvs .pn.me{border-color:var(--cy);animation:fxslideL var(--fxd) ease both}
.fxvs .pn.foe{border-color:var(--gold);animation:fxslideR var(--fxd) ease both}
.fxvs em{font-style:italic;font-size:2rem;color:var(--gold);text-shadow:0 0 18px rgba(255,213,74,.8);
  animation:fxzoom var(--fxd) ease both}
@keyframes fxslideL{0%{opacity:0;transform:translateX(-60vw)}22%{opacity:1;transform:translateX(0)}82%{opacity:1}100%{opacity:0}}
@keyframes fxslideR{0%{opacity:0;transform:translateX(60vw)}22%{opacity:1;transform:translateX(0)}82%{opacity:1}100%{opacity:0}}
@keyframes fxzoom{0%{opacity:0;transform:scale(3)}25%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0}}
/* くりだした: モンスターボールが開いて閃光と光の粒→名前の帯 */
.fxin .inwrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px}
.fxin .fball{width:46px;height:46px;border-radius:50%;position:relative;
  background:linear-gradient(180deg,#e8404b 0 46%,#16204a 46% 54%,#f5f6fa 54% 100%);
  box-shadow:0 4px 14px rgba(0,0,0,.5),inset 0 2px 4px rgba(255,255,255,.35);
  animation:fxballin var(--fxd) ease both}
.fxin .fball::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:12px;
  margin:-6px 0 0 -6px;border-radius:50%;background:#fff;border:3px solid #16204a}
.fxin .burst{position:absolute;top:23px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;
  animation:fxburst var(--fxd) ease both}
.fxin .spark{position:absolute;top:23px;left:50%;width:6px;height:6px;border-radius:50%;background:#fff;
  opacity:0;animation:fxspark var(--fxd) ease both}
.fxin .s1{--dx:-74px;--dy:-44px}.fxin .s2{--dx:74px;--dy:-40px}.fxin .s3{--dx:-88px;--dy:8px}
.fxin .s4{--dx:88px;--dy:12px}.fxin .s5{--dx:-40px;--dy:-70px}.fxin .s6{--dx:44px;--dy:-66px}
@keyframes fxballin{0%{opacity:0;transform:translateY(-42px) scale(.5)}25%{opacity:1;transform:none}45%{transform:scale(1.15)}60%{opacity:0;transform:scale(1.7)}100%{opacity:0}}
@keyframes fxburst{0%,40%{box-shadow:0 0 0 0 rgba(255,255,255,.95);opacity:0}46%{opacity:1}78%{box-shadow:0 0 0 72px rgba(255,255,255,0);opacity:0}100%{opacity:0}}
@keyframes fxspark{0%,36%{opacity:0;transform:none}46%{opacity:1}82%{opacity:0;transform:translate(var(--dx),var(--dy))}100%{opacity:0}}
/* 交代(2段・2026-08-31タダシさん指示「あっけない」で作り直し):
   ①いまのポケモンをボールに戻して飛び去る ②⇄が回る ③新しいボールが飛び込んで弾け開く(閃光＋光の粒)。
   じぶんは 戻る=左へ・入る=右から。あいては--ox/--ixの符号だけ反転して鏡写し */
.fxswapfx .swwrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.fxswapfx .stage{position:relative;width:230px;height:96px}
/* じぶん=右へ戻して左から入る・あいては鏡写し(2026-08-31タダシさん指示で向きを反転) */
.fxswapfx{--ox:96px;--ix:-100px}
.fxswapfx.foe{--ox:-96px;--ix:100px}
.fxswapfx .fball{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  background:linear-gradient(180deg,#e8404b 0 46%,#16204a 46% 54%,#f5f6fa 54% 100%);
  box-shadow:0 4px 14px rgba(0,0,0,.5),inset 0 2px 4px rgba(255,255,255,.35)}
.fxswapfx .fball::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:12px;
  margin:-6px 0 0 -6px;border-radius:50%;background:#fff;border:3px solid #16204a}
.fxswapfx .fball.out{animation:fxswout var(--fxd) ease both}
.fxswapfx .fball.in{opacity:0;animation:fxswin var(--fxd) cubic-bezier(.3,.9,.4,1.15) both}
.fxswapfx .swspin{position:absolute;left:50%;top:50%;width:44px;margin:-22px 0 0 -22px;font-size:2.2rem;line-height:1;
  animation:fxswspin var(--fxd) ease both}
.fxswapfx .burst{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  animation:fxswburst var(--fxd) ease both}
.fxswapfx .spark{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:#fff;opacity:0;animation:fxswspark var(--fxd) ease both}
.fxswapfx .s1{--dx:-74px;--dy:-44px}.fxswapfx .s2{--dx:74px;--dy:-40px}.fxswapfx .s3{--dx:-88px;--dy:8px}
.fxswapfx .s4{--dx:88px;--dy:12px}.fxswapfx .s5{--dx:-40px;--dy:-70px}.fxswapfx .s6{--dx:44px;--dy:-66px}
/* ①戻す: 中央で一瞬ふくらんでから飛び去る(吸い込んだ感) */
@keyframes fxswout{0%{opacity:0;transform:scale(.7)}8%{opacity:1;transform:none}
  15%{transform:scale(1.1)}34%,100%{opacity:0;transform:translate(var(--ox),-58px) scale(.3)}}
/* ②⇄: ボールの入れ替わりに合わせて1回転 */
@keyframes fxswspin{0%,8%{opacity:0;transform:rotate(0) scale(.5)}
  20%{opacity:1;transform:rotate(180deg) scale(1.15)}44%{opacity:1;transform:rotate(360deg) scale(1)}
  56%,100%{opacity:0;transform:rotate(360deg) scale(.7)}}
/* ③出す: 上から弧を描いて飛び込み、着地でひと弾みして開く */
@keyframes fxswin{0%,30%{opacity:0;transform:translate(var(--ix),-62px) scale(.4)}
  40%{opacity:1;transform:translate(calc(var(--ix)*.45),-30px) scale(.7)}
  56%{opacity:1;transform:none}64%{opacity:1;transform:scale(1.14)}
  76%,100%{opacity:0;transform:scale(1.7)}}
@keyframes fxswburst{0%,60%{box-shadow:0 0 0 0 rgba(255,255,255,.95);opacity:0}66%{opacity:1}
  92%{box-shadow:0 0 0 74px rgba(255,255,255,0);opacity:0}100%{opacity:0}}
@keyframes fxswspark{0%,58%{opacity:0;transform:none}66%{opacity:1}
  94%{opacity:0;transform:translate(var(--dx),var(--dy))}100%{opacity:0}}
/* 名前の帯はボールが開いてから出す */
.fxswapfx .tx{animation-name:fxswtx}
@keyframes fxswtx{0%,52%{opacity:0;transform:translateY(14px)}66%{opacity:1;transform:none}90%{opacity:1}100%{opacity:0}}
/* SP発動: タイプ色の斜め帯のカットイン＋閃光 */
.fxsp .band{position:absolute;left:-14%;right:-14%;top:calc(50% - var(--fxup));height:82px;margin-top:-41px;
  display:flex;align-items:center;justify-content:center;--rot:4deg;
  background:linear-gradient(100deg,transparent 0%,var(--fc1) 16%,var(--fc2) 50%,var(--fc1) 84%,transparent 100%);
  box-shadow:0 0 46px var(--fc2);animation:fxband var(--fxd) ease both}
.fxsp.foe .band{--rot:-4deg;animation-name:fxbandR}
.fxsp.foe .mvn{animation-name:fxmvnR}
/* あいてのSPカットインは右から入る(2026-08-31タダシさん指示) */
@keyframes fxbandR{0%{opacity:0;transform:rotate(var(--rot)) translateX(36%)}14%{opacity:1;transform:rotate(var(--rot)) translateX(0)}80%{opacity:1;transform:rotate(var(--rot)) translateX(-6%)}100%{opacity:0;transform:rotate(var(--rot)) translateX(-26%)}}
@keyframes fxmvnR{0%{opacity:0;transform:translateX(46px) skewX(8deg)}18%{opacity:1;transform:skewX(8deg)}80%{opacity:1;transform:skewX(8deg)}100%{opacity:0;transform:skewX(8deg)}}
.fxsp .mvn{font-size:1.5rem;font-weight:900;font-style:italic;color:#fff;letter-spacing:.05em;white-space:nowrap;
  max-width:92vw;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 2px 12px rgba(0,0,0,.6),0 0 18px rgba(255,255,255,.35);animation:fxmvn var(--fxd) ease both}
.fxsp .flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.5),transparent 65%);
  animation:fxflash var(--fxd) ease both}
@keyframes fxband{0%{opacity:0;transform:rotate(var(--rot)) translateX(-36%)}14%{opacity:1;transform:rotate(var(--rot)) translateX(0)}80%{opacity:1;transform:rotate(var(--rot)) translateX(6%)}100%{opacity:0;transform:rotate(var(--rot)) translateX(26%)}}
@keyframes fxmvn{0%{opacity:0;transform:translateX(-46px) skewX(-8deg)}18%{opacity:1;transform:skewX(-8deg)}80%{opacity:1;transform:skewX(-8deg)}100%{opacity:0;transform:skewX(-8deg)}}
@keyframes fxflash{0%{opacity:0}8%{opacity:1}30%{opacity:0}52%{opacity:.7}72%{opacity:0}100%{opacity:0}}
/* シールドのドーム(ゲームのブロック画面を六角形の光の面で再現・2026-08-31タダシさん指示) */
.fxshd .shwrap{position:relative;display:flex;align-items:center;justify-content:center}
.fxshd svg{width:min(520px,92vw);height:auto;
  filter:drop-shadow(0 0 26px rgba(124,92,255,.75));animation:fxdome var(--fxd) ease both}
.fxshd polygon{stroke:rgba(255,255,255,.8);stroke-width:2;fill:url(#fxshg);fill-opacity:.5;
  animation:fxhex var(--fxd) ease both}
.fxshd .shcap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
@keyframes fxdome{0%{opacity:0;transform:scale(.55) translateY(40px)}28%{opacity:1;transform:none}55%{transform:scale(1.03)}82%{opacity:1;transform:none}100%{opacity:0}}
@keyframes fxhex{0%{fill-opacity:0}30%{fill-opacity:.62}60%{fill-opacity:.45}82%{fill-opacity:.55}100%{fill-opacity:0}}
/* たおれた/たおした(2026-08-31タダシさん指示で強化):
   たおした=白閃光→二重の衝撃波リング→金の破片→💥がズドン(＋画面の揺れはJS側)
   たおれた=赤い被弾フラッシュ→暗転→💀が傾きながら沈み、足元に土煙 */
.fxko .kowrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px}
.fxko .mk{font-size:2.6rem;font-style:normal;filter:drop-shadow(0 4px 14px rgba(0,0,0,.6))}
.fxko.win .mk{animation:fxkomkW var(--fxd) ease both}
.fxko.lose .mk{animation:fxkomkL var(--fxd) ease both}
.fxko.lose{background:radial-gradient(circle,transparent 40%,rgba(0,0,0,.5) 100%);animation:fxdim var(--fxd) ease both}
.fxko.lose::before{content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 45%,rgba(255,60,80,.3),transparent 62%);
  animation:fxkred var(--fxd) ease both}
.fxko.lose .tx{border-color:var(--lose);color:var(--lose)}
.fxko.win .tx{border-color:var(--win)}
/* 💥はズドンと入る(大→ひと弾み→静止)。💀は傾きながら沈む(崩れ落ちる) */
@keyframes fxkomkW{0%{opacity:0;transform:scale(2.8) rotate(-14deg)}14%{opacity:1;transform:scale(.92) rotate(3deg)}
  24%{transform:scale(1.14)}32%{transform:scale(1) rotate(0)}85%{opacity:1}100%{opacity:0}}
@keyframes fxkomkL{0%{opacity:0;transform:translateY(-34px) scale(1.2)}18%{opacity:1;transform:none}
  55%{transform:translateY(10px) rotate(12deg)}80%{opacity:.95;transform:translateY(14px) rotate(16deg)}
  100%{opacity:0;transform:translateY(16px) rotate(16deg)}}
@keyframes fxdim{0%{opacity:0}25%{opacity:1}85%{opacity:1}100%{opacity:0}}
@keyframes fxkred{0%{opacity:0}8%{opacity:1}34%{opacity:0}100%{opacity:0}}
/* たおしたの衝撃波(閃光・リング・破片)。中心は💥マークのあたり(上から30px) */
.fxko .kflash{position:absolute;top:30px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;
  animation:fxkfl var(--fxd) ease both}
@keyframes fxkfl{0%{box-shadow:0 0 0 0 rgba(255,255,255,.95);opacity:0}6%{opacity:1}
  32%{box-shadow:0 0 0 92px rgba(255,255,255,0);opacity:0}100%{opacity:0}}
.fxko .kring{position:absolute;top:30px;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
  border:3px solid rgba(255,213,74,.85);opacity:0;animation:fxkring var(--fxd) ease-out both}
.fxko .kring.r2{border-color:rgba(255,255,255,.7);animation-delay:calc(var(--fxd)*.07)}
@keyframes fxkring{0%{opacity:0;transform:scale(.3)}10%{opacity:1}44%{opacity:0;transform:scale(7)}100%{opacity:0}}
.fxko .kshard{position:absolute;top:30px;left:50%;width:7px;height:7px;margin:-3px 0 0 -3px;border-radius:2px;
  background:#ffd54a;opacity:0;animation:fxkshard var(--fxd) cubic-bezier(.2,.7,.4,1) both}
.fxko .kshard:nth-child(2n){background:#fff;width:5px;height:5px}
.fxko .k1{--dx:-104px;--dy:-56px;--rz:220deg}.fxko .k2{--dx:104px;--dy:-50px;--rz:-200deg}
.fxko .k3{--dx:-122px;--dy:6px;--rz:160deg}.fxko .k4{--dx:122px;--dy:12px;--rz:-170deg}
.fxko .k5{--dx:-64px;--dy:-92px;--rz:240deg}.fxko .k6{--dx:66px;--dy:-88px;--rz:-230deg}
.fxko .k7{--dx:-84px;--dy:52px;--rz:190deg}.fxko .k8{--dx:88px;--dy:46px;--rz:-180deg}
@keyframes fxkshard{0%,4%{opacity:0;transform:none}12%{opacity:1}
  58%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rz)) scale(.4)}100%{opacity:0}}
/* たおれたの土煙(足元で3つ、時間差でふわっと広がる) */
.fxko .kdust{position:absolute;top:60px;left:50%;width:11px;height:11px;margin-left:-5px;border-radius:50%;
  background:rgba(200,205,220,.5);opacity:0;filter:blur(1px);animation:fxkdust var(--fxd) ease-out both}
.fxko .d1{--dx:-28px}.fxko .d2{--dx:0px;animation-delay:calc(var(--fxd)*.05)}.fxko .d3{--dx:28px;animation-delay:calc(var(--fxd)*.09)}
@keyframes fxkdust{0%,42%{opacity:0;transform:translate(var(--dx),0) scale(.5)}54%{opacity:.8}
  90%{opacity:0;transform:translate(calc(var(--dx)*1.8),-16px) scale(2)}100%{opacity:0}}
/* フォルムチェンジ: 紫の光の輪＋マーク */
.fxform .fmwrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px}
.fxform .ring{position:absolute;top:8px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;
  border:3px solid rgba(176,108,255,.9);opacity:0;animation:fxring var(--fxd) ease both}
.fxform .mk{font-size:2.2rem;font-style:normal;animation:fxzoom var(--fxd) ease both}
.fxform .tx{border-color:#b06cff}
@keyframes fxring{0%{opacity:0;transform:scale(.4)}30%{opacity:1}80%{opacity:0;transform:scale(6)}100%{opacity:0}}
/* HUDの✨トグル(OFFのときは消灯) */


/* ── 自由設定のわざ（性能を自分で決める・2026-09-03タダシさん指示） ──
   わざ欄のいちばん下の「＋ 自由設定」を選ぶと出る入力ウィンドウ。
   入力欄の文字は16px（iOSが画面を勝手に拡大しないようにする恒久ルール） */
.custwrap{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(4,8,20,.62);backdrop-filter:blur(2px)}
.custwin{width:100%;max-width:330px;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:15px 16px 13px;box-shadow:0 22px 50px rgba(0,0,0,.5)}
.custwin h4{margin:0 0 12px;font-size:.92rem;color:var(--ink)}
.custwin label{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:.74rem;color:var(--sub);margin-bottom:9px}
.custwin input,.custwin select{flex:0 1 190px;min-width:0;font-size:16px;padding:6px 8px;
  border-radius:9px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);outline:none}
.custwin input:focus,.custwin select:focus{border-color:var(--cy)}
.custbtns{display:flex;gap:8px;justify-content:flex-end;margin-top:13px}
.custbtns button{font:inherit;font-size:.76rem;font-weight:800;padding:7px 13px;border-radius:999px;
  cursor:pointer;border:1px solid var(--line);background:var(--bg2);color:var(--ink)}
.custbtns .cok{border-color:transparent;color:#03212c;
  background:linear-gradient(160deg,#8df3ff 0%,#43e0ff 45%,#1b9fd0 100%)}
.custbtns .cdel{margin-right:auto;color:var(--lose);border-color:rgba(255,120,120,.4)}
.custnote{margin:9px 0 0;font-size:.62rem;color:var(--sub);line-height:1.6}
/* 入れ替え候補の「メガなし」(メガカップのときだけ出す) */
.ptswnomega{padding:4px 11px;font-size:.68rem;font-weight:800;cursor:pointer;border-radius:999px;
  color:var(--mcM,#f795c8);background:var(--bg2);border:1px solid var(--line)}
.ptswnomega[aria-pressed="true"]{color:#fff;border-color:transparent;
  background:linear-gradient(160deg,#f795c8 0%,#d63384 45%,#9c1a5e 100%)}

/* ================= 見せ合いルール(6匹→3匹選出)  2026-09-05 ================= */
/* ルール(ふつう／見せ合い)と操作(選択式／リアルタイム)の切替(2026-09-08タダシさん指示「模擬戦や難易度ボタンのように綺麗に」)。
   難易度タブ(.gbai)と同じ作り: 2色のグラデーションの縁取りで1つのまとまりに見せ、2行の札(大＋小)、
   選択中はその選択肢の色で点灯して光の帯が流れる。色は縁取り --f1/--f2(段ごと)と、ボタンの data-c で決める */
.sdrulebar{margin:6px 0 2px}
.gbaibar .mkseg{flex:1 1 auto;min-width:0;display:flex;gap:4px;padding:4px;border-radius:14px;
  border:1px solid transparent;
  background:linear-gradient(var(--bg2),var(--bg2)) padding-box,
    linear-gradient(120deg,var(--f1) 0%,var(--f2) 100%) border-box;
  box-shadow:0 3px 10px rgba(0,0,0,.25)}
.gbaibar .mkseg button{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:0;
  padding:5px 8px 6px;border-radius:10px;color:var(--dc);opacity:.8;line-height:1.2;
  background:var(--tab);border:1px solid var(--line);
  box-shadow:0 2px 0 var(--tabsh),inset 0 1px 0 var(--tabin);
  transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease}
.gbaibar .mkseg button b{display:block;font-size:.76rem;font-weight:900;letter-spacing:.08em;line-height:1.25;white-space:nowrap}
.gbaibar .mkseg button small{display:block;font-size:.55rem;font-weight:700;letter-spacing:.04em;opacity:.8;line-height:1.2;white-space:nowrap}
.gbaibar .mkseg button:hover{opacity:1;transform:translateY(-1px)}
.gbaibar .mkseg button[data-c="cyan"]{--dc:#7fd7ff;--d1:#c9f4ff;--dm:#17b0dd;--d2:#0a6c94;--dt:#042330}
.gbaibar .mkseg button[data-c="violet"]{--dc:#cdb0ff;--d1:#e9dcff;--dm:#9b5cff;--d2:#4b1f9a;--dt:#fff}
.gbaibar .mkseg button[data-c="magenta"]{--dc:#ff9ad8;--d1:#ffd3ee;--dm:#ff4fb0;--d2:#8a1a6a;--dt:#fff}
:root.light .gbaibar .mkseg button[data-c="cyan"]{--dc:#0b7fa0}
:root.light .gbaibar .mkseg button[data-c="violet"]{--dc:#6a34c9}
:root.light .gbaibar .mkseg button[data-c="magenta"]{--dc:#c0227e}
.gbaibar .mkseg button[aria-pressed="true"]{opacity:1;color:var(--dt);border-color:var(--d1);transform:translateY(-1px);
  background:linear-gradient(160deg,var(--d1) 0%,var(--dm) 45%,var(--d2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);position:relative;overflow:hidden}
.gbaibar .mkseg button[aria-pressed="true"] small{opacity:1}
.gbaibar .mkseg button[aria-pressed="true"]::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);animation:gdshine 3.4s ease-in-out infinite;pointer-events:none}
@media (prefers-reduced-motion:reduce){.gbaibar .mkseg button[aria-pressed="true"]::after{animation:none;display:none}}
/* ラベル(ルール／操作／あいて難易度)の幅をそろえて、右の枠の左端が縦に並ぶようにする */
#mock .gbaibar .lbl{flex:0 0 auto;min-width:4.2em}
/* 6匹の入力は畳めるようにする(選出がそろったら自動で閉じる) */
.sdentry{margin-top:8px;border:1px solid var(--line);border-radius:12px;background:var(--bg2);padding:6px 10px}
.sdentry>summary{cursor:pointer;font-size:.74rem;font-weight:700;color:var(--cy);padding:3px 0;list-style:none}
.sdentry>summary::-webkit-details-marker{display:none}
.sdentry>summary::before{content:'▸ ';font-size:.8rem}
.sdentry[open]>summary::before{content:'▾ '}
.sdentry .rkteams{margin-top:6px}
/* 6匹ぶんの行(3枠のときの2〜4行に、5〜7行を足す) */
.rkteams .pslot[data-i="3"]{grid-row:5}
.rkteams .pslot[data-i="4"]{grid-row:6}
.rkteams .pslot[data-i="5"]{grid-row:7}
/* ---- 6匹の登録は「2列×3行のカード」(2026-09-06タダシさん指示) ----
   旧版は1匹ずつ縦に12枠並べていて、登録だけで3画面ぶん(2407px)あった。
   じぶん・あいてを上下に置き、それぞれ2列×3行にする(広い画面だけ左右に並べる) */
.sdteams{display:block!important;margin-top:2px}
.sdteams .rkteamcol{display:block}
.sdteams .rkteamcol+.rkteamcol{margin-top:15px}
.sdteams .sdslots{display:grid!important;grid-template-columns:1fr 1fr;gap:11px 9px;margin-top:8px}
.sdteams .sdslot{grid-column:auto!important;grid-row:auto!important}
.sdteams .rkcolttl{font-size:.78rem;font-weight:800;padding-left:9px;position:relative}
.sdteams .rkcolttl::before{content:'';position:absolute;left:0;top:3px;height:15px;width:3px;border-radius:2px;
  background:linear-gradient(180deg,var(--cy),rgba(34,199,224,.15))}
.sdteams .rkcolttl.foe::before{background:linear-gradient(180deg,var(--gold),rgba(255,216,115,.15))}
.sdteams .gfhead{flex-wrap:nowrap;gap:8px}
.sdteams .gfhead>span{flex:0 1 auto!important}
.sdteams .sdrand,.sdteams .sdrandmy{flex:0 0 auto!important;margin-left:auto;white-space:nowrap}
.sdteams .gfauto{flex:0 0 auto}
/* 6匹まるごとの保存と呼び出し(2026-09-11)。枠は増やさず、罫線と余白だけでまとめる */
.sdsave{margin-top:9px}
.sdsvtab{padding:5px 12px;font-size:.72rem;font-weight:700;color:var(--ink);background:var(--tab);
  border:1px solid var(--line2);border-radius:999px;cursor:pointer;box-shadow:0 2px 0 var(--tabsh)}
.sdsvtab b{color:var(--gold);margin-left:2px}
.sdsvtab[aria-expanded="true"]{border-color:var(--cy)}
.sdsvbody{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.sdsvsave{display:flex;gap:6px;align-items:center;margin-bottom:4px}
.sdsvsave input{flex:1 1 auto;min-width:0;font-size:16px;padding:6px 10px;border-radius:9px;
  border:1px solid var(--line);background:var(--bg2);color:var(--ink)}
.sdsvsave .ptswbtn{flex:0 0 auto;white-space:nowrap}
.sdsvrow{display:flex;align-items:center;gap:6px;padding:7px 0;border-bottom:1px solid var(--line)}
.sdsvrow:last-child{border-bottom:0}
.sdsvrow .nm{flex:1 1 auto;min-width:0}
.sdsvrow .nm b{display:block;font-size:.78rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sdsvrow .nm b i{font-style:normal;font-size:.62rem;font-weight:700;color:var(--sub);margin-left:6px}
.sdsvrow .nm small{display:block;font-size:.66rem;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sdsvld{flex:0 0 auto;padding:5px 11px;font-size:.72rem;font-weight:800;color:var(--ink);background:var(--tab);
  border:1px solid var(--cy);border-radius:999px;cursor:pointer;box-shadow:0 2px 0 var(--tabsh)}
.sdsvdl{flex:0 0 auto;min-width:26px;padding:5px 8px;font-size:.72rem;color:var(--sub);background:none;
  border:1px solid var(--line);border-radius:999px;cursor:pointer}
.sdsvdl.arm{color:#fff;background:var(--lose);border-color:var(--lose);font-weight:700}
.sdsvempty{font-size:.72rem;color:var(--sub);padding:6px 0}
.sdsvmsg{font-size:.72rem;color:var(--cy);margin-top:5px}
@media (max-width:430px){
  .sdteams .gfhead{flex-wrap:wrap}
  .sdteams .gfauto{margin-left:auto}
}
@media (min-width:760px){
  .sdteams{display:grid!important;grid-template-columns:1fr 1fr;gap:18px}
  .sdteams .rkteamcol+.rkteamcol{margin-top:0}
}
/* カード本体。**そのポケモンのタイプの色**を地・ふち・上端の帯に使う＝ゲームらしい見た目にする
   (--tc1/--tc2 は syncSdSlots が typeColorOf から入れる) */
.sdslot{position:relative;padding:0;border-radius:14px;min-width:0;
  border:1px solid var(--line);background:linear-gradient(180deg,var(--bg2),var(--panel));
  box-shadow:0 2px 0 var(--tabsh),inset 0 1px 0 rgba(255,255,255,.05)}
/* 入っているカードだけ少し浮かせる(2026-09-06タダシさん指示)。
   色つきのにじみは使わない(恒久ルール)ので、**黒のぼかし影＋上の光沢＋下端の締め**だけで立体にする。
   空の枠は浮かせない——「まだ入っていない」を沈んだ見た目で示すため */
/* 暗い背景では黒い影が効きにくいので、影を強めにして**上端の光**も一段上げる */
/* 入っているカードの地は**青**にする。カードを置いている面(--bg2)と同じ色だと、
   フレームの中と外が地続きに見えてカードに見えない(2026-09-06タダシさん指摘) */
.sdslot.filled{background:linear-gradient(180deg,#1f3573 0%,#162654 100%);border-color:#3a55a3}
:root.light .sdslot.filled{background:linear-gradient(180deg,#e3edff 0%,#cddffb 100%);border-color:#b0cbf0}
/* 青の地に沈まないよう、うすい文字だけ一段明るくする(実測でコントラスト4.5:1以上) */
.sdslot.filled .mvsum .mvc{color:#a9b4dc}
:root.light .sdslot.filled .mvsum .mvc{color:#4d5a85}
.sdslot.filled .sdmv>summary{color:#b4bee2}
:root.light .sdslot.filled .sdmv>summary{color:#4d5a85}
/* 淡い青の地では金と水色が沈むので、ライトだけ濃くする(実測でコントラスト4.5:1以上) */
:root.light .sdslot.filled .sdcp{color:#855700}
:root.light .sdslot.filled .sdmv>summary i{color:#086a7d}
.sdslot.filled .sdops button{background:rgba(10,16,38,.42);border-color:#3b4f92;color:#b9c4e8}
:root.light .sdslot.filled .sdops button{background:rgba(255,255,255,.75);border-color:#c6d8f4;color:#5f6a92}
.sdslot.filled{box-shadow:
  0 7px 16px rgba(0,0,0,.46),
  0 2px 0 var(--tabsh),
  inset 0 1px 0 rgba(255,255,255,.13),
  inset 0 -1px 0 rgba(0,0,0,.32)}
:root.light .sdslot.filled{box-shadow:
  0 6px 13px rgba(70,80,120,.17),
  0 2px 0 var(--tabsh),
  inset 0 1px 0 rgba(255,255,255,.9),
  inset 0 -1px 0 rgba(70,80,120,.09)}
.sdslot:not(.filled){border-style:dashed}
.sdslot .sdbar{display:block;height:4px;border-radius:14px 14px 0 0;background:var(--line)}
.sdslot.filled .sdbar{background:linear-gradient(90deg,var(--tc1,var(--line)),var(--tc2,var(--line)))}
/* 上部の光沢(ゲームのカードらしい艶) */
.sdslot .sdin{position:relative;padding:6px 5px 7px}
.sdslot .sdin::before{content:'';position:absolute;left:0;right:0;top:0;height:38%;pointer-events:none;
  border-radius:0 0 60% 60%/0 0 18px 18px;
  background:linear-gradient(180deg,rgba(255,255,255,.075),transparent)}
:root.light .sdslot .sdin::before{background:linear-gradient(180deg,rgba(255,255,255,.5),transparent)}
.sdslot.filled:active{transform:translateY(2px);box-shadow:
  0 2px 5px rgba(0,0,0,.3),0 1px 0 var(--tabsh),inset 0 1px 0 rgba(255,255,255,.06)}
:root.light .sdslot.filled:active{box-shadow:
  0 2px 5px rgba(70,80,120,.14),0 1px 0 var(--tabsh),inset 0 1px 0 rgba(255,255,255,.8)}
/* 上段: タイプアイコン(左)と操作ボタン(右) */
.sdslot .sdtop{display:flex;align-items:center;gap:4px;min-height:20px}
.sdslot .sdty{display:flex;gap:2px;min-width:0}
.sdslot .sdops{margin-left:auto;display:flex;gap:3px;flex:0 0 auto}
.sdslot .sdops button{width:20px;height:20px;padding:0;display:inline-flex;align-items:center;justify-content:center;
  font-size:.66rem;line-height:1;border-radius:7px;cursor:pointer;font-family:inherit;
  color:var(--sub);background:var(--bg2);border:1px solid var(--line)}
.sdslot .sdops .pshadow[aria-pressed="true"]{background:linear-gradient(135deg,#7c3aed,#b06cff);border-color:transparent;color:#fff}
.sdslot .sdops .pstar{color:var(--gold)}
.sdslot .sdops button:hover{border-color:var(--cy);color:var(--ink)}
/* 名前(入力欄そのもの)とCPを同じ行に。埋まっているときは枠を消して**名前の見出しのように**見せる */
.sdslot .sdname{display:flex;align-items:baseline;gap:3px;min-width:0}
.sdslot .sdname .sugg{flex:1 1 auto;min-width:0}
.sdslot .sdcp{flex:0 0 auto;font-size:.7rem;font-weight:900;color:var(--gold);letter-spacing:0;
  white-space:nowrap;text-shadow:0 1px 0 rgba(0,0,0,.45)}
.sdslot .sdcp i{font-style:normal;font-size:.56rem;font-weight:800;margin-right:1px;opacity:.85}
:root.light .sdslot .sdcp{color:#a06a00;text-shadow:0 1px 0 rgba(255,255,255,.7)}
/* 名前を打ちかえるときはCPを隠して、入力欄に幅をぜんぶ渡す */
.sdslot.editing .sdname .sdcp,.sdslot .sdname:focus-within .sdcp{display:none}
.sdslot .sugg input{padding:5px 6px;font-weight:700}
/* 埋まっているときの入力欄は「名前の見出し」に見せる。
   ⚠ 表示は小さくしてよいが、**フォーカス時は必ず16px**にすること——
   iOSは触れた時点の文字が16px未満だと画面を勝手に拡大して戻らない(恒久ルール) */
.sdslot.filled .sugg input{background:transparent;border-color:transparent;font-weight:800;
  padding:3px 1px;font-size:.92rem;letter-spacing:-.02em}
.sdslot.filled .sugg input[data-len="5"]{font-size:.84rem}
.sdslot.filled .sugg input[data-len="6"]{font-size:.72rem}
.sdslot.filled .sugg input[data-len="7"]{font-size:.64rem}
.sdslot.filled .sugg input[data-len="8"]{font-size:.58rem}
.sdslot.filled .sugg input[data-len="9"],
.sdslot.filled .sugg input[data-len="10"]{font-size:.56rem}
/* 入力中は欄を2列ぶんに広げる。iOSは触れた時点の字が16px未満だと画面を勝手に拡大して
   戻らないので**16pxは外せない**——そのぶん欄を広げて、長い名前でも読めるようにする */
.sdslot .sugg{position:relative}
.sdslot.filled.editing .sugg input,
.sdslot.filled .sugg input:focus{position:absolute;top:0;left:0;z-index:30;
  width:calc(200% + 9px);background:var(--panel);border-color:var(--gl);
  padding:6px 8px;font-size:16px;letter-spacing:0;
  box-shadow:0 6px 18px rgba(0,0,0,.45)}
.sdteams .sdslots .sdslot:nth-child(even).editing .sugg input,
.sdteams .sdslots .sdslot:nth-child(even) .sugg input:focus{left:auto;right:0}
.sdslot .sugg-list{min-width:215px;font-size:.8rem}
.sdteams .sdslots .sdslot:nth-child(even) .sugg-list{left:auto;right:0}
/* 選出済み(じぶん側)は水色のリングと丸数字 */
.sdslot.picked{border-color:transparent;box-shadow:
  0 0 0 2px var(--cy),
  0 8px 18px rgba(0,0,0,.5),
  0 2px 0 var(--tabsh),
  inset 0 1px 0 rgba(255,255,255,.14)}
:root.light .sdslot.picked{box-shadow:
  0 0 0 2px var(--cy),
  0 7px 15px rgba(70,80,120,.2),
  0 2px 0 var(--tabsh),
  inset 0 1px 0 rgba(255,255,255,.9)}
.sdslot.picked::after{content:attr(data-no);position:absolute;top:-8px;left:-7px;z-index:2;
  width:23px;height:23px;display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:900;color:#04222e;border-radius:50%;
  background:linear-gradient(160deg,#bdf4ff 0%,#4bd9f2 42%,#0e86a0 100%);
  box-shadow:0 2px 5px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 1px rgba(0,0,0,.25);
  text-shadow:0 1px 0 rgba(255,255,255,.45)}
@media (max-width:360px){
  .sdteams .sdslots{gap:6px}
  .sdslot .sdin{padding:5px 6px 7px}
  .sdslot .sdops{gap:2px}
  .sdslot .sdops button{width:18px;height:18px;font-size:.6rem}
  .sdslot .sdcp{font-size:.58rem}
  .sdslot .sdcp i{font-size:.5rem}
  .sdslot .sdname{gap:2px}
  .sdslot.filled .sugg input{font-size:.8rem}
  .sdslot.filled .sugg input[data-len="5"]{font-size:.68rem}
  .sdslot.filled .sugg input[data-len="6"]{font-size:.58rem}
  .sdslot.filled .sugg input[data-len="7"]{font-size:.52rem}
  .sdslot.filled .sugg input[data-len="8"]{font-size:.48rem}
  .sdslot.filled .sugg input[data-len="9"],
  .sdslot.filled .sugg input[data-len="10"]{font-size:.46rem}
}
.sdteams .sdslots[data-s="my"] .pslot{grid-column:1}
.sdteams .sdslots[data-s="foe"] .pslot{grid-column:2}
#mock .sdslots.auto .fbody select{display:none}
/* 12枠が縦に並ぶので、わざの3欄は畳んでおく(見出しに選んでいるわざ名を出す) */
.sdslot .sdmv{margin-top:4px}
.sdslot .sdmv>summary{cursor:pointer;list-style:none;font-size:.62rem;color:var(--sub);
  padding:2px 13px 2px 1px;position:relative;line-height:1.5}
.sdslot .sdmv>summary::-webkit-details-marker{display:none}
.sdslot .mvsum .mvf,.sdslot .mvsum .mvc{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sdslot .mvsum .mvc{color:var(--sub);opacity:.9;font-size:.55rem;letter-spacing:-.02em}
.sdslot .sdmv>summary i{font-style:normal;font-weight:800;color:var(--cy);margin-right:4px}
.sdslot .sdmv>summary::after{content:'▸';position:absolute;right:0;top:50%;transform:translateY(-50%);
  color:var(--cy);font-weight:800}
.sdslot .sdmv[open]>summary::after{content:'▾'}
.sdslot .sdmv>select{margin-top:4px}
#mock .sdslots.auto .sdmv{display:none}
/* 編成のルールで入れられないポケモン(同じポケモン・メガは1匹まで)は、
   候補に残したままグレーにして押せなくする(消すと「検索しても出てこない」に見えるため) */
.sugg-list .dup,.pstarwin .mypkrow.dup{opacity:.45;cursor:default;pointer-events:none}
.sugg-list .dupn,.pstarwin .dupn{font-style:normal;font-size:.6rem;color:var(--sub);margin-left:auto;padding-left:6px;white-space:nowrap}
.sdslot.picked{border-color:var(--cy);box-shadow:0 0 0 1px var(--cy)}
/* 選出パネル */
.sdpickbox{margin-top:10px;padding:2px 0 0}
.sdrow+.sdrow{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
/* ---- 相性表(見せ合いの主役・2026-09-06) ----
   じぶん6匹×あいて6匹のマス目。**行がそのまま選出のボタン**になっていて、
   いちばん下の行に「選んだ3匹で、その相手に勝てる味方の数」が並ぶ(列がそろうので穴が縦に見える) */
.sdglbl{font-size:.76rem;font-weight:800;color:var(--cy)}
.sdglbl small{display:block;font-size:.62rem;font-weight:400;color:var(--sub);margin-top:2px;line-height:1.55}
.sdgwrap{margin-top:8px;padding:0}
/* 広い画面で表を横いっぱいに伸ばしても読みやすさは増えない(マスがスカスカになるだけ)ので上限をつける */
@media (min-width:520px){
  .sdtbl{max-width:460px}
  .sdtbl thead tr.sdhh th:first-child,
  .sdtbl thead th.sdch{width:160px}
}
.sdtbl{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0 3px;font-size:.72rem}
.sdtbl th,.sdtbl td{padding:0}
.sdtbl thead tr.sdhh th:first-child{width:45%}
.sdtbl thead th.sdch{width:45%;padding:0 5px 5px 1px!important;vertical-align:bottom}
/* ---- 表の左上の「6対6の相性」(2026-09-06タダシさん指示で**枠に入れない**形へ) ----
   枠を足すと入れ子が増えて野暮ったくなるので、**余白・字の大小・1pxの罫線**だけで見せる。
   状態(有利/互角/不利)は**数字の色と、その下の罫線の色**で伝える */
.sdix{display:block;text-align:center;padding:2px 4px 0}
.sdix i{display:block;font-style:normal;font-size:.54rem;font-weight:800;color:var(--sub);
  letter-spacing:.1em;text-indent:.1em}
.sdix b{display:block;font-size:2.1rem;font-weight:900;letter-spacing:-.04em;line-height:1;
  margin:3px 0 0;text-shadow:0 2px 6px rgba(0,0,0,.4)}
:root.light .sdix b{text-shadow:0 1px 0 rgba(255,255,255,.9)}
.sdix b small{font-size:.66rem;font-weight:800;margin-left:2px;letter-spacing:0}
/* 数字の下の1本の罫線。中央が濃く、両端へ消える(状態の色) */
.sdix b::after{content:'';display:block;height:1px;width:74%;margin:5px auto 0}
.sdix.good b::after{background:linear-gradient(90deg,transparent,var(--win),transparent)}
.sdix.even b::after{background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.sdix.bad b::after{background:linear-gradient(90deg,transparent,var(--lose),transparent)}
.sdix em{display:block;font-style:normal;font-size:.62rem;font-weight:800;margin-top:5px;
  letter-spacing:.02em}
.sdix.good b,.sdix.good em{color:var(--win)}
.sdix.even b,.sdix.even em{color:var(--gold)}
.sdix.bad b,.sdix.bad em{color:var(--lose)}
/* 列の見出しが「あいての6匹」なので、行の側も対で示す */
/* 能力変化わざのウィンドウ。中の #gopt は移動して使い回すので、見た目だけここで整える */
.sdoptwin{margin-top:8px;padding:10px 12px}
.sdsugbox:empty{display:none}
/* 提案は選出パネルの外に出したので、区切りの1本線と余白はここで付ける */
.sdsugbox .sdsug{margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}
.sdoptwin .gopt{margin:0}
.sdoptwin .gopt .lbl{display:none}
.sdixyou{display:block;margin-top:9px;text-align:center;font-size:.56rem;font-weight:800;
  color:var(--cy);letter-spacing:.04em}
.sdyou{display:none}
/* あいての見出しは**縦書き**。1マス40px前後しか取れないので横書きでは名前が入らない */
.sdhh th{padding:0 0 4px!important}
.sdfg{text-align:center;font-size:.6rem;font-weight:800;color:var(--gold);
  border-bottom:1px solid rgba(255,216,115,.35);padding-bottom:3px!important}
.sdfg i{font-style:normal;font-weight:400;font-size:.56rem;color:var(--sub)}
.sdfh{vertical-align:bottom;padding:4px 1px 3px!important;font-weight:600}
.sdfh .ic{display:flex;justify-content:center;gap:1px;margin-top:4px}
.sdfh .nm{display:block;margin:0 auto;font-size:.6rem;font-weight:700;line-height:1.08;
  color:var(--sub);text-align:center}
.sdfh .nm i{display:block;font-style:normal}
.sdfh .nm i.r{transform:rotate(90deg)}
.sdfh .nm[data-len="7"],.sdfh .nm[data-len="8"]{font-size:.54rem}
.sdfh .nm[data-len="9"]{font-size:.5rem}
.sdfh .nm[data-len="10"],.sdfh .nm[data-len="11"],.sdfh .nm[data-len="12"]{font-size:.44rem}
.sdfh .nm .shadowmark{margin:0 auto 1px;display:block}
/* じぶんの行(押すと選出) */
.sdmr{cursor:pointer}
.sdmr:focus-visible{outline:2px solid #8b5cf6;outline-offset:2px}
.sdmh{text-align:left;background:var(--bg2);border:1px solid var(--line);border-right:none;
  border-radius:9px 0 0 9px;padding:4px 2px 4px 5px!important;font-weight:700}
.sdmh .in{display:flex;align-items:center;gap:2px;min-width:0}
/* 並び順(1〜3)のバッジ。真っ白の数字だと素っ気ないので、**水色の球のような立体**にする。
   選出中の行は名前列が水色に塗られるので、そこでは**濃紺に反転**させて沈まないようにする */
.sdmh .no,.sdchip .no{display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 17px;width:17px;height:17px;border-radius:50%;font-style:normal;
  font-size:.64rem;font-weight:900;line-height:1;color:#04222e;
  background:linear-gradient(160deg,#bdf4ff 0%,#4bd9f2 42%,#0e86a0 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 1px rgba(0,0,0,.25);
  text-shadow:0 1px 0 rgba(255,255,255,.45)}
.sdmh .no:empty{background:none;box-shadow:none}
/* 選出中の行は名前列が水色に塗られるので、球は**白く**して数字を濃紺で抜く
   (暗い球にすると数字が沈んで「黒い穴」に見えた) */
.sdmr.on .sdmh .no{color:#04222e;
  background:linear-gradient(160deg,#fff 0%,#e4faff 45%,#96dcee 100%);
  box-shadow:0 1px 3px rgba(0,0,0,.38),inset 0 1px 0 #fff,inset 0 -1px 1px rgba(0,0,0,.18);
  text-shadow:none}
.sdmh b{font-weight:700;font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sdmh .tbadge{flex:0 0 auto;width:12px;height:12px}
.sdfh .tbadge{width:12px;height:12px}
.sdmr:hover .sdmh{border-color:var(--cy)}
.sdmr.on .sdmh{border-color:transparent;color:#0d2547;
  background:linear-gradient(160deg,#7fe9f7 0%,#22c7e0 45%,#0b8ba3 100%)}
.sdmr.on .sdmh b{font-weight:900;color:#0d2547}
.sdmr.on .sdmh .no{color:#042330}
.sdmr.on .sdw{border-color:rgba(34,199,224,.55)}
.sdmr.dim .sdmh{opacity:.5}
/* 勝ち負けのマス。◎◯△✕＋薄い色の面(面だけだと勝ちの程度が読めない) */
.sdw{text-align:center;font-weight:900;font-size:.9rem;line-height:2;
  border:1px solid var(--line);border-left:none;background:var(--bg2)}
.sdtbl tbody tr td:last-child{border-radius:0 9px 9px 0}
.sdw.w0{color:var(--lose);background:rgba(255,107,129,.22)}
.sdw.w1{color:var(--gold);background:rgba(255,216,115,.2)}
.sdw.w2{color:var(--win);background:rgba(61,220,132,.16)}
.sdw.w3{color:var(--win);background:rgba(61,220,132,.38)}
:root.light .sdw.w0{background:rgba(214,45,71,.13)}
:root.light .sdw.w1{background:rgba(176,122,0,.14)}
:root.light .sdw.w2{background:rgba(14,145,86,.13)}
:root.light .sdw.w3{background:rgba(14,145,86,.34)}
/* いちばん下＝選んだ3匹で、その相手に勝てる味方の数(穴チェックと同じ色) */
.sdft .sdmh{border-radius:9px 0 0 9px;background:none;border-color:transparent}
.sdft .sdmh b{font-size:.66rem;color:var(--sub);font-weight:800}
.sdft .sdmh small{font-size:.58rem;color:var(--sub);font-weight:400;margin-left:3px}
.sdft .sdmh .in{gap:0;justify-content:flex-end;padding-right:5px}
.sdt{text-align:center;font-weight:900;font-size:.78rem;line-height:1.75;color:#06121f;
  border-radius:6px;border:1px solid transparent}
.sdt.hole{background:var(--lose)}
.sdt.n1{background:var(--gold)}
.sdt.safe{background:var(--win)}
.sdftn{text-align:center!important;font-size:.64rem;font-weight:400;color:var(--sub);
  padding:5px 4px!important;border:1px dashed var(--line);border-radius:9px}
.sdftn b{color:var(--ink);font-weight:800}
/* 選んだ3匹の要約と凡例 */
.sdsum{margin-top:9px;padding:5px 0 5px 10px;font-size:.68rem;color:var(--sub);
  border:none;border-left:3px solid var(--line2);border-radius:0}
.sdsum.ok{border-left-color:var(--win)}
.sdsum.bad{border-left-color:var(--lose)}
.sdsum b{color:var(--ink);font-size:.76rem;font-weight:800}
.sdsum.ok b{color:var(--win)}
.sdsum.bad b{color:var(--lose)}
.sdsum i{display:block;font-style:normal;font-size:.62rem;margin-top:2px}
.sdleg{display:flex;flex-wrap:wrap;align-items:center;gap:3px 9px;margin-top:6px;
  font-size:.6rem;color:var(--sub)}
/* ⚠ .sdleg の display:flex は .expl{display:none} と詳細度が同じで後勝ちしてしまう。
   説明モードの出し入れは、この2行で明示する(このサイトで何度も踏んでいる落とし穴) */
.sdleg.expl{display:none}
.explain .sdleg.expl{display:flex}
.sdleg span{display:inline-flex;align-items:center;gap:3px}
.sdleg i{font-style:normal;font-weight:900;font-size:.74rem}
.sdleg .w0 i{color:var(--lose)}
.sdleg .w1 i{color:var(--gold)}
.sdleg .w2 i,.sdleg .w3 i{color:var(--win)}
.sdleg small{flex:1 0 100%;font-size:.58rem;opacity:.85}
@media (max-width:400px){
  .sdtbl{font-size:.68rem}
  .sdtbl thead tr.sdhh th:first-child,
  .sdtbl thead th.sdch{width:41%}
  .sdmh b{font-size:.66rem}
  .sdw{font-size:.82rem}
}
/* 320px級では名前が切れる。**タイプより名前を優先**して、行のアイコンだけ落とす
   (あいての見出しのアイコンは縦書きの上なので幅を食わない＝そのまま残す) */
@media (max-width:360px){
  .sdtbl thead tr.sdhh th:first-child,
  .sdtbl thead th.sdch{width:46%}
  .sdmh .tbadge,.sdmh .tpair{display:none}
  .sdmh b{font-size:.68rem}
}
.sdlbl{font-size:.74rem;font-weight:800;color:var(--cy)}
.sdlbl.foe{color:var(--gold)}
.sdlbl small{display:block;font-size:.62rem;font-weight:400;color:var(--sub);margin-top:1px}
.sdchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.sdchip{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:999px;
  border:1px solid var(--line);background:var(--bg2);font-size:.72rem;color:var(--ink)}
.sdchip b{font-weight:700}
button.sdchip{cursor:pointer;font-family:inherit;
  box-shadow:0 2px 0 var(--tabsh),inset 0 1px 0 rgba(255,255,255,.06)}
button.sdchip:hover{transform:translateY(-1px)}
button.sdchip:active{transform:translateY(2px);box-shadow:0 1px 0 var(--tabsh)}
button.sdchip.on{border-color:transparent;color:#042330;font-weight:800;
  background:linear-gradient(160deg,#7fe9f7 0%,#22c7e0 45%,#0b8ba3 100%);
  box-shadow:0 2px 0 rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.6)}
button.sdchip.on .tbadge{filter:none}
.sdchip .no{margin-right:2px;flex:0 0 15px;width:15px;height:15px;font-size:.58rem}
.sdlead{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:10px}
/* 開幕交代・選び直す・能力変化わざは**同じ大きさ**にそろえる(2026-09-06タダシさん指示) */
.sdbtn{display:inline-flex;align-items:center;justify-content:center;gap:3px;
  padding:8px 14px;font-size:.72rem;font-weight:700;line-height:1.2;border-radius:999px;cursor:pointer;
  font-family:inherit;color:var(--sub);background:linear-gradient(180deg,var(--bg2),var(--panel));
  border:1px solid var(--line);box-shadow:0 2px 0 var(--tabsh),inset 0 1px 0 rgba(255,255,255,.05)}
.sdbtn:hover{color:var(--ink);border-color:var(--cy);transform:translateY(-1px)}
.sdbtn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--tabsh)}
.sdbtn .gear{font-size:.86rem;line-height:1}
.sdbtn em{font-style:normal;font-size:.62rem;font-weight:800;color:var(--cy);margin-left:1px}
/* 開幕交代は「入」を色で示す(押している状態が分かるように) */
.sdlead .plead{margin-left:0}
.sdlead .plead[aria-pressed="true"]{background:linear-gradient(160deg,#ffe9a8 0%,#ffd54a 45%,#c69a12 100%);
  border-color:transparent;color:#2b2305}
.sdlead .plead[aria-pressed="true"] .swapmark{background-color:#2b2305}
.sdopt[aria-expanded="true"]{border-color:var(--cy);color:var(--ink)}
@media (max-width:520px){
  .sdentry{padding:5px 8px}
  .sdpickbox{padding:9px 9px}
  .sdchip{font-size:.68rem;padding:5px 8px}
}

/* URLの自動コピーができなかったときに、手でコピーするための欄 */
.share{flex-wrap:wrap}
#copyfall{flex:1 1 100%;margin-top:8px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg2)}
#copyfall .cfnote{font-size:.68rem;color:var(--sub);margin-bottom:5px;line-height:1.6}
#copyfall .cfurl{width:100%;padding:7px 8px;font-size:16px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);color:var(--ink);outline:none}

/* 選出の提案(見せ合い) */
.sdsug .sdlbl{display:flex;flex-direction:column;gap:2px}
.sdsugtab{align-self:flex-start;padding:0;border:none;background:none;font-family:inherit;cursor:pointer;
  font-size:.74rem;font-weight:800;color:var(--cy)}
.sdsugtab::after{content:' ▾';font-size:.7rem}
.sdsugtab[aria-expanded="false"]::after{content:' ▸'}
.sdcur{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:8px;padding:6px 9px;border-radius:9px;
  background:var(--bg2);border:1px solid var(--line);font-size:.68rem;color:var(--sub)}
.sdcur .sdcurh{color:var(--ink);font-size:.72rem;font-weight:800}
.sdcur .sdsgn{flex:1 0 100%}
.sdbar{display:inline-flex;gap:2px}
.sdbar i{width:11px;height:11px;border-radius:3px;display:block}
.sdsgs{display:flex;flex-direction:column;gap:6px;margin-top:7px}
.sdsg{display:flex;flex-direction:column;gap:5px;padding:8px 9px;border-radius:11px;cursor:pointer;
  font-family:inherit;text-align:left;color:var(--ink);
  border:1px solid var(--line);background:linear-gradient(180deg,var(--bg2),var(--panel));
  box-shadow:0 2px 0 var(--tabsh),inset 0 1px 0 rgba(255,255,255,.06)}
.sdsg:hover{transform:translateY(-1px);border-color:var(--cy)}
.sdsg:active{transform:translateY(2px);box-shadow:0 1px 0 var(--tabsh)}
.sdsgh{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.sdsgl{font-size:.72rem;font-weight:800;color:var(--cy)}
.sdsgn{font-style:normal;font-size:.64rem;color:var(--sub)}
.sdsg.on{border-color:var(--cy);box-shadow:0 0 0 1px var(--cy),0 2px 0 var(--tabsh)}
.sdsgnow{font-style:normal;font-size:.6rem;font-weight:800;color:#042330;background:var(--cy);
  padding:2px 7px;border-radius:999px;white-space:nowrap}
/* 3匹は**1行3列**に並べる(2行に折り返さない)。名前を読ませたいので、
   タイプアイコンは出さずに幅を名前へ回す */
.sdsgp{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.sdsgp .sdchip{padding:5px 7px;font-size:.64rem;min-width:0;justify-content:flex-start;gap:4px}
.sdsgp .sdchip b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sdsgp .sdchip .shadowmark{flex:0 0 auto}
@media (max-width:400px){
  .sdsgp{gap:4px}
  .sdsgp .sdchip{font-size:.58rem;padding:5px 5px;gap:3px}
  .sdsgp .sdchip .no{flex:0 0 13px;width:13px;height:13px;font-size:.54rem}
}
@media (max-width:360px){
  .sdsgp{gap:3px}
  .sdsgp .sdchip{font-size:.52rem;padding:5px 3px;gap:2px}
  .sdsgp .sdchip .no{flex:0 0 12px;width:12px;height:12px;font-size:.5rem}
}

/* 演出の帯の「じぶん／あいて」(2026-09-07タダシさん指示・どちらの出来事か一目で分かるように)。
   タイムラインの決断チップの札(.who)と同じ考え方で、名前の前に小さく出す */
.fxitem .tx .wh{font-size:.74em;font-weight:800;letter-spacing:.04em;opacity:.9;
  padding:1px 7px;border-radius:999px;margin-right:2px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28)}
.fxitem.foe .tx .wh,.fxitem.fxko.win .tx .wh{background:rgba(255,213,74,.2);border-color:rgba(255,213,74,.45);color:#ffe6a3}
.fxitem.me .tx .wh,.fxitem.fxko.lose .tx .wh{background:rgba(67,224,255,.18);border-color:rgba(67,224,255,.42);color:#bdf0ff}

/* 演出のアニメが終わったあと、片づけられるまで「主役の文字」を出したままにする
   (2026-09-07タダシさん指示。キーフレームはどれも最後に opacity:0 で消えるので、
    そのままだと一呼吸のあいだ画面が空になり「フリーズ?」と思われる) */
.fxitem.fxhold,.fxitem.fxhold *{animation:none !important;transition:none !important}
.fxitem.fxhold{opacity:1 !important}
.fxitem.fxhold .inwrap,.fxitem.fxhold .swwrap,.fxitem.fxhold .kowrap,
.fxitem.fxhold .fmwrap,.fxitem.fxhold .vswrap{opacity:1 !important;transform:none !important}
/* 飾り(ボール・閃光・破片・煙・ドーム)は消して、文字だけ残す */
.fxitem.fxhold .fball,.fxitem.fxhold .burst,.fxitem.fxhold .spark,
.fxitem.fxhold .stage,.fxitem.fxhold .kflash,.fxitem.fxhold .kring,
.fxitem.fxhold .kshard,.fxitem.fxhold .kdust,.fxitem.fxhold .ring,
.fxitem.fxhold .flash,.fxitem.fxhold .dim,.fxitem.fxhold .kred,
.fxitem.fxhold .dome,.fxitem.fxhold .hex{opacity:0 !important}
/* 主役(名前の帯・VSカードの中身・SPの帯・💥💀のマーク)は出したまま */
.fxitem.fxhold .tx,.fxitem.fxhold .tx *,
.fxitem.fxhold .vswrap > *,.fxitem.fxhold .band,.fxitem.fxhold .band *{opacity:1 !important;transform:none !important}
/* 💥💀のマークは傾いたり沈んだりする動きなので、姿勢は戻さず表示だけ保つ */
.fxitem.fxhold .mk{opacity:1 !important}

/* ⚠ 静止表示にするとき、**姿勢(傾き・位置)は保つ**(2026-09-07タダシさん報告)。
   SPのカットインは斜めに流れる演出で、transform:none にすると水平に戻って「カクッと動く」。
   キーフレームの80%(=静止に切り替える位置)と同じ姿勢に固定する */
/* 交代受けの帯: 帯・⇄・見出しは出したまま(80%の姿勢)、輪・粒・光のすじは消す */
.fxitem.fxhold .pvshine{opacity:0 !important}
.fxitem.fxhold .pvband,.fxitem.fxhold .pvmk,.fxitem.fxhold .pvspin{opacity:1 !important;transform:none !important}
.fxitem.fxhold.fxpivot .pvband{transform:translateX(2%) !important}
.fxitem.fxhold.fxpivot.foe .pvband{transform:translateX(-2%) !important}
.fxitem.fxhold.fxsp .band{transform:rotate(var(--rot)) translateX(6%) !important}
.fxitem.fxhold.fxsp.foe .band{transform:rotate(var(--rot)) translateX(-6%) !important}
.fxitem.fxhold.fxsp .mvn{transform:skewX(-8deg) !important}
.fxitem.fxhold.fxsp.foe .mvn{transform:skewX(8deg) !important}
/* 💀(たおれた)は沈みながら傾く動きなので、静止させるときも80%の姿勢に合わせる
   (何も指定しないと元の位置へ戻ってピクッと動く・2026-09-07タダシさん報告) */
.fxitem.fxhold.fxko.lose .mk{transform:translateY(14px) rotate(16deg) !important}


/* ---- ② HPが残りわずかのときの鼓動(2026-09-07タダシさん指示) ---- */
.hb i.r{animation:hplow 1.15s ease-in-out infinite}
@keyframes hplow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.5) saturate(1.2)}}
.hpn.r{animation:hplown 1.15s ease-in-out infinite}
@keyframes hplown{0%,100%{opacity:1}50%{opacity:.62}}
@media (prefers-reduced-motion: reduce){.hb i.r,.hpn.r{animation:none}}

/* ---- ③ 決着のバナー(2026-09-07タダシさん指示) ---- */
.fxend{--ec1:#ffd54a;--ec2:#ff9750}
.fxend.lose{--ec1:#8b9ac4;--ec2:#4a5680}
.fxend .endwrap{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.fxend .eflash{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.9),rgba(255,255,255,0) 62%);
  opacity:0;animation:fxefl calc(var(--fxd)) ease-out forwards}
.fxend.lose .eflash{background:radial-gradient(circle at 50% 50%,rgba(10,14,28,.92),rgba(10,14,28,.4) 70%)}
@keyframes fxefl{0%{opacity:0}10%{opacity:1}42%{opacity:.25}100%{opacity:0}}
.fxend .ering{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  border:3px solid var(--ec1);opacity:0;animation:fxering calc(var(--fxd)) cubic-bezier(.2,.7,.3,1) forwards}
.fxend .ering.e2{border-color:var(--ec2);animation-delay:calc(var(--fxd) * .12)}
@keyframes fxering{0%{opacity:0;transform:scale(1)}12%{opacity:.95}70%{opacity:0;transform:scale(34)}100%{opacity:0;transform:scale(34)}}
.fxend .ebig{position:relative;font-size:3.6rem;font-weight:900;letter-spacing:.14em;line-height:1;
  background:linear-gradient(180deg,#fff,var(--ec1) 46%,var(--ec2));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.5)) drop-shadow(0 0 22px rgba(255,213,74,.5));
  opacity:0;animation:fxebig calc(var(--fxd)) cubic-bezier(.2,.8,.25,1) forwards}
.fxend.lose .ebig{filter:drop-shadow(0 3px 0 rgba(0,0,0,.6))}
@keyframes fxebig{0%{opacity:0;transform:scale(2.4)}14%{opacity:1;transform:scale(.94)}22%{transform:scale(1.04)}30%{transform:scale(1)}
  84%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
/* 静止表示のときは大きな文字だけ残す */
.fxitem.fxhold.fxend .ering,.fxitem.fxhold.fxend .eflash{opacity:0 !important}
.fxitem.fxhold.fxend .ebig{opacity:1 !important;transform:scale(1) !important}

/* パーティの「型」(ABC/ABB/ABA・2026-09-07。タダシさん提供の考え方を診断に出したもの) */
.ptform{display:flex;align-items:center;gap:9px;margin:2px 0 8px;padding:8px 10px;border-radius:11px;
  background:linear-gradient(180deg,rgba(90,120,220,.17),rgba(90,120,220,.06));border:1px solid rgba(120,150,240,.3)}
.ptform b{flex:0 0 auto;font-size:1rem;font-weight:900;letter-spacing:.1em;color:#c6d8ff;
  padding:3px 10px;border-radius:8px;background:rgba(120,150,240,.24);border:1px solid rgba(150,180,255,.42)}
.ptform span{font-size:.72rem;color:var(--sub);line-height:1.6}
.ptform span b{all:unset;font-weight:800;color:var(--ink)}
.ptformx{font-size:.7rem;color:var(--sub);line-height:1.85;margin:0 0 9px}
:root.light .ptform{background:linear-gradient(180deg,rgba(90,120,220,.12),rgba(90,120,220,.05));border-color:rgba(90,120,200,.3)}
:root.light .ptform b{color:#2b3f8a;background:rgba(120,150,240,.18);border-color:rgba(90,120,200,.35)}

/* ---- ノーマルアタックの打ち始めの点(2026-09-10タダシさん選択・線と点の2案を見比べて点に決定) ----
   2ターン以上のわざだけ、打ち始めのターンに、その側の列の外側へ小さな点を置く(色はわざのタイプ色)。
   1ターンわざには出さない(打ち始めと当たるのが同じターンで、毎行に並んでうるさくなるため)。
   印は gbRender が行に付ける fs0/fs1(じぶん/あいて)と --flc0/--flc1(色) */
/* ⚠ 点は**行の内側の左右の端**に置く(行の左右に12pxの余白を取り、そこへ置く)。
   行の外(left:-9px)に置くと、バトル中の全画面表示(.bfull)ではタイムラインがはみ出しを切る作り(overflow:auto)で
   余白も0なので、**点が切り取られて見えなかった**(2026-09-10タダシさん報告「点が反映されていない」)。
   見比べのスクショは「結果だけ見る」画面(はみ出しを切らない)で撮っていたため気づけなかった */
.rbfeed .ft{position:relative;padding-left:12px;padding-right:12px}
.ft.fs0::before,.ft.fs1::after{content:"";position:absolute;top:50%;width:7px;height:7px;
  border-radius:50%;transform:translateY(-50%);opacity:.8;pointer-events:none}
.ft.fs0::before{left:2px;background:var(--flc0)}
.ft.fs1::after{right:2px;background:var(--flc1)}