:root{
  --bg:#0b1210; --panel:rgba(10,18,15,.92); --line:rgba(217,182,74,.25);
  --gold:#d9b64a; --gold-dim:#8f7a3a; --txt:#e9e4d2; --txt-dim:#9aa08e; --chip:#16241d;
  --own:#d9b64a; --opp:#e8e8e8; --owngk:#58b7d6; --oppgk:#e08a3a;
  --danger:#ff8080;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:var(--bg);color:var(--txt);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  overflow:hidden;overscroll-behavior:none}
button,input,select{font-family:inherit;font-size:13px;color:var(--txt)}
button{cursor:pointer}
button:disabled{opacity:.35;cursor:default}

/* 行も同じ理由で minmax(0,1fr): 高さが足りないとき、縮むのは真ん中の盤で、ヘッダーとタイムラインは潰さない。
   列は minmax(0,1fr)。ただの 1fr だと、中身（ヘッダーの入力欄など）の最小幅が画面より広いときに列ごと広がり、
   ヘッダーの ☰ も盤もタイムラインも画面の外へ出てしまう（スマホの 390px で実際に起きた） */
#app{position:fixed;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr)}
/* 行番号を固定: ヘッダを display:none にしても main/timeline の行がずれない */
#header{grid-row:1}#main{grid-row:2}#timeline{grid-row:3}
/* 列も 1 に固定: 鍵の板（#playLock）が 1 列目の 2〜3 行目を取るので、列の指定がないと盤とタイムラインが 2 列目に回り、1 列目が縮んで板が細い帯になる（2026-10-22 点検 A-01） */
#header,#main,#timeline{grid-column:1}
/* 同時に使える端末（session.js）: ほかの端末で開かれて「見るだけ」のとき、上に帯を出し、アプリ全体をそのぶん下げる。
   道具（2D の左の列）は押せなくする。見る・再生・3D はそのまま */
#sessionBar{position:fixed;left:0;right:0;top:0;z-index:90;display:flex;align-items:center;justify-content:center;gap:10px 14px;flex-wrap:wrap;
  padding:calc(8px + env(safe-area-inset-top)) 12px 8px;background:#3a2a08;color:#ffe9b0;border-bottom:1px solid #d9b64a;font-size:13px;font-weight:700;line-height:1.4;text-align:center}
#sessionBar .sb-btn{flex:none;background:#d9b64a;color:#12200f;border:0;border-radius:999px;padding:8px 18px;font-size:13px;font-weight:800;min-height:40px;min-width:120px;white-space:nowrap;cursor:pointer}
#sessionBar .sb-btn:disabled{opacity:.6}
body.session-ro #app{top:var(--session-h,52px)}
body.session-ro #toolbar{pointer-events:none;opacity:.4}

/* ===== ヘッダ ===== */
/* z-index: ☰ メニューが本体（#main）より前に出るように */
#header{position:relative;z-index:20;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 10px;
  background:var(--panel);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.hcollapse{display:contents}      /* 広い画面ではそのまま横並び */
.only-narrow{display:none}        /* ☰ と 3D はスマホだけ */
.narrow-item{display:none}        /* 広い画面では右端の ☰ の中（スマホでは ☰ のパネルに並ぶ） */
.hcollapse .hsec,.hcollapse .hhead{display:none}   /* 広い画面では出さない（👤 のメニューに入っている） */
/* ブランド: ロゴは白地で作ってあるので、白い小さな板に載せる */
.brand{display:flex;align-items:center;background:#fff;border-radius:9px;padding:3px 8px;flex:0 0 auto;border:0;margin:0;font:inherit;cursor:pointer;transition:box-shadow .15s,transform .1s}
/* ロゴ＝ホーム（「何から作りますか?」）へのボタン */
.brand:hover{box-shadow:0 0 0 2px var(--gold)}
.brand:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.brand:active{transform:scale(.96)}
.brand .logo-h{height:30px;width:auto;display:block}
.brand .logo-m{display:none;height:30px;width:30px}
#header .name{flex:1 1 140px;min-width:120px;background:var(--chip);border:1px solid var(--line);border-radius:8px;
  padding:7px 10px;font-size:14px;font-weight:700}
.hgroup{display:flex;align-items:center;gap:6px}
.fpair{display:flex;align-items:center;gap:6px}
.hgroup.right{margin-left:auto}
.tag{font-size:10px;font-weight:700;padding:4px 7px;border-radius:5px}
.tag.own{background:var(--gold);color:#12200f}.tag.opp{background:#e9e9e9;color:#222}
.hsel{appearance:none;background:var(--chip);border:1px solid var(--line);border-radius:8px;padding:7px 8px;font-weight:700;min-width:88px}
.chip,.hbtn{border:1px solid var(--line);background:var(--chip);color:var(--txt);border-radius:8px;
  padding:7px 11px;font-size:12px;font-weight:700;min-height:36px}
.chip.on,.hbtn.on{background:var(--gold);border-color:var(--gold);color:#12200f}
.hbtn.primary{background:var(--gold);border-color:var(--gold);color:#12200f}
/* 保存のようす: ふだんは目立たない ✓。保存できていないときだけ赤く出す */
/* 💾 保存: ボタンとして見える。変更が無いときは薄く、変更があるときは金色 */
.savestate{border:1px solid var(--line);background:none;color:var(--txt-dim);font-size:12px;font-weight:700;border-radius:8px;padding:7px 11px;min-height:36px;min-width:18px;cursor:pointer;white-space:nowrap;opacity:.7;transition:opacity .15s}
.savestate:hover{opacity:1}
.savestate[data-kind="fresh"]{color:var(--txt);opacity:1}
.savestate[data-kind="unsaved"]{color:#12200f;border:1px solid var(--gold);font-weight:800;background:var(--gold);opacity:1}
.dcol{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.dcol .hbtn{min-height:44px;justify-content:center}
.dcol a.hbtn{display:flex;align-items:center;text-decoration:none}
.acnote{margin:-4px 0 0;font-size:11px}
.dnote{margin:6px 0 0;font-size:12px;color:var(--txt-dim);line-height:1.6}
.savestate[data-kind="error"]{color:#fff;background:#b3261e;border-color:#b3261e;opacity:1;font-weight:800}
/* お試しの残り日数（残り 3 日から。押すとアカウント） */
.trialbadge{border:1px solid rgba(217,182,74,.5);background:rgba(217,182,74,.08);color:var(--gold);border-radius:999px;padding:3px 9px;font-size:11px;font-weight:700;white-space:nowrap;cursor:pointer}
.trialbadge[hidden]{display:none}
.trialbadge .tb-short{display:none}
@media (max-width:700px){.trialbadge .tb-long{display:none}.trialbadge .tb-short{display:inline}.trialbadge{padding:3px 7px;min-height:32px}}
.hbtn.danger{color:var(--danger);border-color:rgba(255,128,128,.35)}

/* ===== 本体 ===== */
#main{display:grid;grid-template-columns:auto minmax(0,1fr);min-height:0}
#toolbar{display:flex;flex-direction:column;gap:6px;padding:8px;background:var(--panel);border-right:1px solid var(--line);width:120px;overflow-y:auto;min-height:0;scrollbar-width:none}
.tool{border:1px solid var(--line);background:var(--chip);color:var(--txt);border-radius:10px;padding:10px 6px;font-size:12px;font-weight:700;min-height:44px}
.tool.on{background:var(--gold);border-color:var(--gold);color:#12200f}
.tool.sub{font-size:11px;min-height:36px;color:var(--txt-dim)}
.tool.sub[hidden]{display:none}
.tsep{height:1px;background:var(--line);margin:4px 0}
.thint{font-size:13px;color:var(--txt-dim);line-height:1.5;margin-top:auto}
#stage{position:relative;min-height:0;min-width:0;background:#0a1410;transition:background-color .3s cubic-bezier(.2,.8,.2,1)}
/* 盤の色（表示 ▾ → 盤の色）。盤の外の余白も合わせる */
body[data-pitch="night"] #stage{background:#040907}
body[data-pitch="board"] #stage{background:#10231b}
body[data-pitch="paper"] #stage{background:#dcd7c8}
#stage2d{width:100%;height:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none}

/* ===== SVG 盤面 ===== */
#stage2d text{font-family:inherit;text-anchor:middle;pointer-events:none;user-select:none}
/* 選手とボールの当たり判定は「見た目より少し大きい、塗りの丸」。下の線用の .hit（太い線の上だけ反応）が効くと、
   半径 1.6〜4.2m の輪になって、隣の選手の中心でのタップまで奪ってしまう */
.player .hit{fill:transparent;stroke:none;pointer-events:fill}
.player .body{stroke:rgba(0,0,0,.6);stroke-width:.16}
/* 立体感: 盤に落ちる柔らかい影と、左上からのつや（どちらも当たり判定なし） */
.player .shadow{fill:url(#pShadow);pointer-events:none;transform-origin:0 0;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .22s cubic-bezier(.2,.8,.2,1);opacity:.85}
.player .gloss{fill:url(#pGloss);pointer-events:none}
.player .lift{transform-origin:0 0;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
/* 状態の輪: ふだんは出さない。保持＝光の輪＋広がる波紋、選択＝回る破線（両方のときは両方） */
.player .ring,.player .pulse{fill:none;stroke:none;pointer-events:none;transform-origin:0 0}
.player.holder .ring{stroke:#fff6d6;stroke-width:.26;filter:drop-shadow(0 0 .5px rgba(255,240,190,.9))}
.player.holder .pulse{stroke:#fff6d6;stroke-width:.22;animation:pPulse 1.8s cubic-bezier(.2,.7,.3,1) infinite}
.player.sel .ring{stroke:#37d67a;stroke-width:.34;stroke-dasharray:.95 .55;filter:none;animation:pMarch 1.4s linear infinite}
@keyframes pPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.55);opacity:0}}
@keyframes pMarch{to{stroke-dashoffset:-3}}
/* つまむ: 少し浮いて（大きく）、影が広がって遠ざかる。離す: 少し沈んで戻る（着地） */
.player.lifting{cursor:grabbing}
.player.lifting .lift{transform:scale(1.14)}
.player.lifting .shadow{transform:translate(.55px,1px) scale(1.35);opacity:.6}
.player.drop .lift{animation:pDrop .38s cubic-bezier(.34,1.56,.64,1)}
.player.drop .shadow{animation:pDropShadow .38s cubic-bezier(.2,.8,.2,1)}
@keyframes pDrop{0%{transform:scale(1.14)}45%{transform:scale(.95)}100%{transform:scale(1)}}
@keyframes pDropShadow{0%{transform:translate(.55px,1px) scale(1.35);opacity:.6}100%{transform:none;opacity:.85}}
/* 長押し（ボールを持つ人）: 押している間に輪がふくらみ、パスの準備ができたら水色の輪に。受け手は吸い付く所が光る */
.player.charging .ring{stroke:#9fd8ff;stroke-width:.3;animation:pCharge .45s linear forwards}
.player.armed .ring{stroke:#9fd8ff;stroke-width:.5;filter:drop-shadow(0 0 .6px rgba(159,216,255,.95))}
.player.armed .lift{transform:scale(1.1)}
.player.snap .ring{stroke:#9fd8ff;stroke-width:.45;animation:none}
.armedRing{fill:none;stroke:#9fd8ff;stroke-width:.3;stroke-dasharray:.9 .5;pointer-events:none;animation:pMarch 1.4s linear infinite}
@keyframes pCharge{0%{transform:scale(1.5);opacity:.2}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){
  .player.charging .ring,.armedRing{animation:none}
  .player .lift,.player .shadow{transition:none}
  .player.holder .pulse,.player.sel .ring,.player.drop .lift,.player.drop .shadow{animation:none}
}
.player.own .body{fill:var(--own)}
.player.opp .body{fill:var(--opp)}
.player.own.gk .body{fill:var(--owngk)}
.player.opp.gk .body{fill:var(--oppgk)}
.player .num{font-size:1.9px;font-weight:800;fill:#12200f}
.player.opp .num{fill:#1d1d1d}
.player .name{font-size:1.25px;font-weight:700;fill:#fff;paint-order:stroke;stroke:rgba(0,0,0,.75);stroke-width:.35}
.player{cursor:grab}
.ballG .hit{fill:transparent;stroke:none;pointer-events:fill}
.ball{fill:#fff;stroke:#111;stroke-width:.14}
.ghost circle{fill:none;stroke-width:.25;stroke-dasharray:.6 .4;opacity:.55}
.ghost.own circle{stroke:var(--own)}
.ghost.opp circle{stroke:var(--opp)}
.ghost .implicit{stroke:rgba(255,255,255,.45);stroke-width:.22;stroke-dasharray:.8 .5}
.run{fill:none;stroke:#f5e9b5;stroke-width:.38;stroke-linecap:round;stroke-linejoin:round}
.run.dribble{stroke-dasharray:.9 .6}
/* 駆け引き（緩急）のある走る線: 歩く＝細い点線、ジョグ＝細い、スプリント＝太い。タメ＝小さな点 */
.run.lv0{stroke-width:.24;stroke-dasharray:.3 .5;opacity:.8}
.run.lv1{stroke-width:.26;opacity:.9}
.run.lv2{stroke-width:.58}
.run.dribble.lv1,.run.dribble.lv2{stroke-dasharray:.9 .6}
.run.tip{stroke-opacity:0}
.runDot{fill:#f5e9b5;stroke:rgba(0,0,0,.55);stroke-width:.14;pointer-events:none}
.pass{fill:none;stroke:#fff;stroke-width:.3;stroke-dasharray:1 .6;stroke-linecap:round}
/* 補助線: ファイブレーンとトライアングル */
.lane5.half{fill:rgba(255,255,255,.11);pointer-events:none}
.lane5.line{stroke:rgba(255,255,255,.65);stroke-width:.32;stroke-dasharray:1.4 .9;pointer-events:none}
.tri{fill:rgba(159,216,255,.14);stroke:rgba(159,216,255,.9);stroke-width:.3;stroke-linejoin:round;pointer-events:none}
.lane{fill:none;stroke-linecap:round;pointer-events:none}
.lane.open{stroke:#37d67a;stroke-width:.3;opacity:.9}
.lane.blocked{stroke:#ff5c5c;stroke-width:.22;stroke-dasharray:.9 .6;opacity:.8}
.lane.away{stroke:#bac2cb;stroke-width:.12;opacity:.5}
.lanex{fill:none;stroke:#ff5c5c;stroke-width:.28;pointer-events:none}
.pass.lob{stroke:#9fd8ff}
.preview{opacity:.8}
/* ワンツー（一筆書き）: 味方まで伸ばして折り返している間、返しのパス（水色）と走る線を見せる。まだ近すぎるうちは薄く */
.pass.otRet{stroke:#9fd8ff;stroke-width:.34}
.otRet.wait,.otRun.wait{opacity:.35}
.otLabel{fill:#9fd8ff;font-size:2.1px;font-weight:800;text-anchor:middle;paint-order:stroke;stroke:rgba(8,14,12,.85);stroke-width:.5px;pointer-events:none}
/* パスの線をタップしたときの「ワンツーにする」 */
.otPop{position:absolute;transform:translate(-50%,-50%);z-index:5}
.otPop button{font:inherit;font-size:13px;font-weight:800;color:#0b1a14;background:#9fd8ff;border:0;border-radius:999px;padding:8px 14px;min-height:36px;
  box-shadow:0 6px 18px rgba(0,0,0,.45);cursor:pointer;white-space:nowrap}
.otPop button:active{transform:scale(.97)}
/* 「3人目を足す」（ワンツーの隣）と、そのあとの「受ける選手をタップ」 */
.otPop{display:flex;gap:6px}
.otPop button.tmBtn{background:#ffd479}
.tmAsk{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:5;max-width:calc(100% - 32px);
  display:flex;flex-wrap:wrap;justify-content:center;gap:2px 6px;padding:8px 14px;border-radius:14px;
  background:rgba(8,14,12,.9);color:#fff;font-size:13px;box-shadow:0 6px 18px rgba(0,0,0,.45);pointer-events:none;text-align:center}
.tmAsk b{color:#ffd479}
.tmAsk span{color:var(--txt-dim);font-size:11px}
.armedRing.tmCand{stroke:#ffd479}
.band{fill:rgba(217,182,74,.12);stroke:rgba(217,182,74,.8);stroke-width:.18;stroke-dasharray:.9 .6;pointer-events:none}
.hit{fill:none;stroke:transparent;stroke-width:2.6;pointer-events:stroke}
[data-tool="erase"] .hit{cursor:pointer}
/* 消しゴム中は選手やゴーストが上に乗っていても、下の線・図形を消せるようにする */
[data-tool="erase"] .player *,[data-tool="erase"] .ghost *,[data-tool="erase"] .ballG *{pointer-events:none}
.shape.area{fill:rgba(217,182,74,.16);stroke:rgba(217,182,74,.7);stroke-width:.2}
.shape.space{fill:rgba(55,214,122,.22);stroke:#37d67a;stroke-width:.3}
.shape.draw{fill:none;stroke:#ff8a5c;stroke-width:.45;stroke-linecap:round;stroke-linejoin:round}
/* 体の向き: 指定された選手だけ、円の外側に小さなくさびを出す */
.faceM path{fill:#9fe8ff;stroke:#0b1210;stroke-width:.12}
.player.opp .faceM path{fill:#ffd9a0}
/* 動き出しのタイミング: 先/遅 の小さな印。相手の反応の遅れは輪郭を破線に */
.timeM circle{fill:#0b1210;stroke:#9fe8ff;stroke-width:.14}
.timeM text{font-size:1px;font-weight:800;fill:#9fe8ff;text-anchor:middle}
.timeM.late circle{stroke:#ffb37a}.timeM.late text{fill:#ffb37a}
.timeM.at rect{fill:#0b1210;stroke:#9fe8ff;stroke-width:.14}.timeM.at text{font-size:.9px;letter-spacing:.02em}
.tval{font-size:11px;color:#9fe8ff;padding:2px 6px;white-space:nowrap}.tval[hidden]{display:none}
.player.react .body{stroke-dasharray:.5 .3;stroke:#ffb37a;stroke-width:.3}
#selBox{display:flex;flex-direction:column;gap:6px;padding:6px;border:1px solid var(--gold);border-radius:10px;background:rgba(217,182,74,.08)}
#selBox[hidden]{display:none}
#selTitle{color:#f3e9c8;font-size:11px}
.tgroup{display:flex;flex-direction:column;gap:4px}
.tgroup[hidden]{display:none}

/* ===== タイムライン ===== */
#timeline{background:var(--panel);border-top:1px solid var(--line);padding:6px 10px 8px;display:flex;flex-direction:column;gap:6px}
/* 場面の帯: チップは横に流れる（指でスワイプ・ホイール・ドラッグ）。「＋」は帯の外の右端で、いつも見える */
.tl-stepsrow{display:flex;align-items:flex-start;gap:6px;min-width:0;flex:0 0 auto}
.tl-steps{display:flex;flex:0 1 auto;min-width:0;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;overscroll-behavior-x:contain;user-select:none;-webkit-user-select:none}
.tl-steps::-webkit-scrollbar{display:none}
.tl-steps.dragging{cursor:grabbing}.tl-steps.dragging .step{pointer-events:none}
.tl-steps>.sc-more{font-size:22px}
.step{flex:0 0 auto;min-width:56px;height:46px;border:1px solid var(--line);background:var(--chip);border-radius:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.step b{font-size:16px}.step small{font-size:9px;color:var(--txt-dim)}
.step.on{background:var(--gold);border-color:var(--gold);color:#12200f}
.step.on small{color:#12200f}
.step.add{min-width:46px;font-size:20px;border-style:dashed;color:var(--txt-dim)}
.tl-ctrl{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tbtn{border:1px solid var(--line);background:var(--chip);border-radius:8px;min-width:40px;min-height:36px;padding:0 10px;font-weight:700}
.tbtn.primary{background:var(--gold);border-color:var(--gold);color:#12200f;min-width:56px;font-size:16px}
.tbtn.on{background:var(--gold);border-color:var(--gold);color:#12200f}
.tbtn.danger{color:var(--danger)}
.tbtn.frame{min-width:44px;padding:0 6px;font-size:13px;display:inline-flex;align-items:center;gap:2px;touch-action:none;user-select:none}
.tbtn.frame small{font-size:9px;color:var(--txt-dim);font-weight:600}
/* 「⋯」の中（コマ送り・秒・ゴースト・複製・削除）。タイムラインの上に浮かせる */
#timeline{position:relative}
.tl-more{position:absolute;right:10px;bottom:calc(100% + 6px);z-index:30;display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  max-width:min(380px,calc(100vw - 20px));padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.tl-more[hidden]{display:none!important}
.tbtn.tl-morebtn{font-size:18px;line-height:1}
/* 場面をまとめて削除（timeline.js）: 選んでいる間は、再生の列・コメント・「＋」を隠して、選ぶための列を出す。選んだチップは赤に ✓ */
.tl-selbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tl-selbar[hidden]{display:none!important}
.tl-selmsg{flex:1 1 auto;min-width:0;font-size:12px;color:var(--txt-dim)}
.tl-selbar .tbtn{min-height:40px}
#bulkGo:not(:disabled){background:#c0474a;border-color:#c0474a;color:#fff}
#timeline.selecting .tl-ctrl,#timeline.selecting .tl-notein,#timeline.selecting .tl-note,#timeline.selecting #addStep,#timeline.selecting #tlHint{display:none!important}
#timeline.selecting .step.on:not(.picked){background:var(--chip);color:inherit;border-color:var(--gold)}
#timeline.selecting .step.on:not(.picked) small{color:var(--txt-dim)}
.step.picked{position:relative;background:#c0474a;border-color:#ff8080;color:#fff}
.step.picked small{color:#fff}
.step.picked::after{content:"✓";position:absolute;top:1px;right:4px;font-size:10px;font-weight:800}
.step.nopick{opacity:.4;cursor:not-allowed}
@media (max-width:700px){.tl-selmsg{flex-basis:100%}.tl-selbar .tbtn{flex:1 1 0}}
/* AI に言葉で指示（試作。ai-panel.js）: タイムラインの一番上に 1 行。実験中の端末で、印の付いた人だけ。3D では出さない */
.ai-bar{display:flex;align-items:center;gap:6px;min-width:0}
.ai-bar[hidden]{display:none!important}
.ai-tag{flex:0 0 auto;font-size:10px;font-weight:800;letter-spacing:.04em;color:#12200f;background:var(--gold);border-radius:6px;padding:3px 6px}
.ai-in{flex:1 1 auto;min-width:0;height:36px;border:1px solid var(--line);background:#0e1814;border-radius:8px;padding:0 10px;font-size:16px}  /* 16px 未満だと iPhone が入力のたびに拡大する */
.ai-in::placeholder{color:var(--txt-dim);font-size:12px}
.ai-send{flex:0 0 auto;min-width:64px;height:36px;border:1px solid var(--gold);background:var(--gold);color:#12200f;border-radius:8px;font-weight:800;padding:0 10px}
.ai-bar.busy .ai-in{opacity:.6}
body.present .ai-bar{display:none!important}
#timeline.paused .tbtn.primary{background:#f0d98a;box-shadow:0 0 0 2px rgba(240,217,138,.35)}
#timeline.paused .tl-time{color:var(--gold)}
#scrub{flex:1 1 160px;min-width:120px;accent-color:var(--gold)}
.tl-time{font-size:11px;color:var(--txt-dim);min-width:74px;font-variant-numeric:tabular-nums}
.tsel{background:var(--chip);border:1px solid var(--line);border-radius:8px;padding:6px}
.tlab{font-size:11px;color:var(--txt-dim);display:flex;align-items:center;gap:4px}
.tlab input{width:58px;background:var(--chip);border:1px solid var(--line);border-radius:8px;padding:6px;text-align:center}

/* ===== ダイアログ / トースト ===== */
/* ログイン画面（全画面）。背景は俯瞰のピッチ。スマホ=1列、PC(横)=左ブランド・右フォームの2枚組 */
#loginScreen{position:fixed;inset:0;z-index:80;background:radial-gradient(ellipse at 50% 25%,#15341f 0%,#0b1210 62%);display:flex;align-items:flex-start;justify-content:center;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));overflow:auto}
.lgpitch{position:absolute;inset:0;width:100%;height:100%;opacity:.13;pointer-events:none}
.lgcard{position:relative;margin:auto;width:min(94vw,400px);background:#0f1a13;border:1px solid rgba(255,255,255,.08);border-radius:22px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(217,182,74,.12);display:grid;grid-template-columns:1fr;animation:lgIn .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes lgIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.lgbrand{background:#fff;display:flex;align-items:center;justify-content:center;padding:14px 18px}
.lgbrand .lgwide{display:block;width:min(100%,300px);height:auto}
.lgform{display:flex;flex-direction:column;gap:10px;padding:20px 20px 16px}
.lgkicker{font-size:10px;letter-spacing:.32em;color:var(--gold);font-weight:800}
.lgtitle{margin:0;font-size:20px;font-weight:800;color:#f3e9c8;letter-spacing:.02em}
.lghelp{margin:0 0 4px;font-size:12px;color:var(--txt-dim);line-height:1.6}
/* ログイン画面の「FUQAN BOARD とは？」（サービスの紹介＝LP へ。Instagram のプロフィールからアプリに来た人向け） */
.lgabout{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 12px;padding:10px 14px;border:1px solid rgba(217,182,74,.55);border-radius:10px;color:var(--gold);font-size:14px;font-weight:700;text-decoration:none;background:rgba(217,182,74,.08)}
.lgabout:hover{background:rgba(217,182,74,.16)}
.lgabout .t{display:flex;flex-direction:column;gap:2px;white-space:nowrap}
.lgabout small{font-size:11px;font-weight:600;color:var(--txt-dim)}
.lgabout .ar{font-size:18px}
.lgfield{display:flex;flex-direction:column;gap:5px;font-size:11px;color:#9fb3a6;letter-spacing:.06em}
.lgfield input{background:#0b1210;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px 14px;font-size:16px;color:var(--txt);width:100%;transition:border-color .15s,box-shadow .15s}
.lgfield input::placeholder{color:#5f7367}
.lgfield input:focus{outline:none;border-color:#37d67a;box-shadow:0 0 0 3px rgba(55,214,122,.18)}
.lgfield input:-webkit-autofill,.lgfield input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #0b1210 inset;-webkit-text-fill-color:var(--txt);caret-color:var(--txt);transition:background-color 9999s}
.lgpw{position:relative;display:block}
.lgpw input{padding-right:46px}
.lgeye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;color:#7f9488;font-size:16px;padding:8px;cursor:pointer;border-radius:8px;opacity:.6}
.lgeye.on{opacity:1;color:#37d67a}
.lgbtn{min-height:48px;border-radius:12px;font-size:14px;font-weight:800;border:1px solid var(--line);background:var(--chip);color:var(--txt);display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:transform .08s,filter .15s}
.lgbtn:active{transform:scale(.985)}
.lgbtn:disabled{opacity:.5}
.lgbtn.primary{background:linear-gradient(180deg,#e8c65a,#d9b64a);border-color:#d9b64a;color:#12200f;box-shadow:0 8px 20px rgba(217,182,74,.22)}
.lgbtn.primary:hover{filter:brightness(1.05)}
.lgbtn.google{background:#fff;color:#1f1f1f;border-color:#fff}
.gicon{width:18px;height:18px}
.lgor{display:flex;align-items:center;gap:10px;color:#5f7367;font-size:11px}
.lgor::before,.lgor::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.08)}
.lglink{background:none;border:none;color:#9fb3a6;font-size:12px;text-decoration:underline;text-underline-offset:3px;padding:8px;cursor:pointer}
.lgfoot{font-size:11px;color:#6f8477;text-align:center;letter-spacing:.24em;margin-top:2px}
.err{color:#ff8a8a;font-size:12px}
/* ログイン画面のタブ（ログイン／新規登録）と同意・お知らせ（S2） */
.lgtabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#0b1210;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:4px}
.lgtab{min-height:40px;border:none;border-radius:9px;background:none;color:#9fb3a6;font-size:13px;font-weight:800;cursor:pointer}
.lgtab.on{background:var(--chip);color:#f3e9c8;box-shadow:0 0 0 1px rgba(217,182,74,.35)}
.lgpane{display:flex;flex-direction:column;gap:10px}
.lgpane[hidden]{display:none}
.lgagree{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--txt-dim);line-height:1.6;cursor:pointer}
.lgagree input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:#37d67a}
.lgagree a,.lgnote a{color:#e8c65a}
.lgnote{margin:0;font-size:11px;color:#7f9488;line-height:1.6}
.lgnote.lgiab{color:#e8c36a;font-weight:700}
.lginfo{color:#9fe3b8;font-size:12px;line-height:1.6}
.lglink.small{align-self:center;padding:2px 8px;font-size:11px}
/* アカウント（account.js） */
.acct dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:6px 0 10px;font-size:13px}
.acct dt{color:var(--txt-dim)}
.acct dd{margin:0;word-break:break-all}
.acct .warn{color:#ffcf7a;font-size:12px;line-height:1.6}
.acct input[type=password]{width:100%;background:#0b1210;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:10px 12px;font-size:16px;color:var(--txt)}
/* 契約する・お申し込み内容の確認・アカウントのプラン欄（billing.js） */
.acbill .dcol{margin-top:8px}
/* プランを選ぶ窓（openSubscribe）: 上で月額・年額、その下にプランの札（スタンダード・プロ・チーム） */
.dlg.subscribe-dlg .dbox{max-width:720px}
.bp-seg{display:flex;width:max-content;max-width:100%;margin:0 auto;gap:0;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:3px;background:#0b1210}
.dbox .bp-seg label{flex-direction:row;cursor:pointer;color:var(--txt);font-size:13px}
.bp-seg input{position:absolute;opacity:0;pointer-events:none}
.bp-seg span{display:flex;align-items:center;gap:6px;padding:7px 16px;border-radius:999px}
.bp-seg small{font-size:11px;color:#9fe3b8}
.bp-seg input:checked+span{background:var(--gold);color:#101b14;font-weight:700}
.bp-seg input:checked+span small{color:#1d4a2c}
.bp-seg input:focus-visible+span{outline:1px solid rgba(159,227,184,.6);outline-offset:-2px}
.bp-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bp-card{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:#0b1210;min-width:0}
.bp-card.need{border-color:var(--gold);box-shadow:0 0 0 1px rgba(217,182,74,.35)}
.bp-card.cur{border-color:#37d67a}
.bp-card[data-status=contact]{opacity:.85}
.bp-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bp-name{font-size:15px;color:var(--txt)}
.bp-tag{font-size:10px;padding:2px 7px;border-radius:999px;background:rgba(217,182,74,.18);color:#e8c65a}
.bp-tag.cur{background:rgba(55,214,122,.18);color:#9fe3b8}
.bp-pitch{margin:0;font-size:12px;color:var(--txt-dim);line-height:1.5}
.bp-price{display:flex;flex-direction:column;gap:2px;color:var(--txt)}
.bp-amt b{font-size:20px}
.bp-amt small,.bp-seats{font-size:11px;color:var(--txt-dim)}
.bp-amt[hidden],.bp-save[hidden]{display:none}
.bp-save{font-size:11px;color:#9fe3b8}
.bp-act{margin-top:auto;padding-top:4px;display:flex}
.bp-act .hbtn{flex:1;justify-content:center;text-align:center}
.bp-warn{color:#ffcf7a}
@media (max-width:560px){
  .bp-list{grid-template-columns:1fr;gap:8px}
  .bp-card{display:grid;grid-template-columns:1fr auto;column-gap:10px;row-gap:2px;align-items:center}
  .bp-head,.bp-pitch{grid-column:1/-1}
  .bp-price{grid-column:1}
  .bp-save{grid-column:1}
  .bp-act{grid-column:2;grid-row:3/span 2;margin:0;padding:0}
}
.billtbl{width:100%;border-collapse:collapse;font-size:12px;line-height:1.6;margin:6px 0 4px}
.billtbl th{width:7.5em;text-align:left;vertical-align:top;color:var(--txt-dim);font-weight:700;padding:6px 8px 6px 0;border-top:1px solid rgba(255,255,255,.08)}
.billtbl td{padding:6px 0;border-top:1px solid rgba(255,255,255,.08)}
.bill .dnote a{color:#e8c65a}
/* PC（横長）: 2枚組。左は正方形ロゴを背景として敷く */
@media (min-width:820px) and (orientation:landscape){
  .lgcard{width:min(92vw,880px);grid-template-columns:1fr 1fr}
  .lgbrand{padding:28px;background:#fff url("/app/img/logo.png") center/contain no-repeat;background-origin:content-box}
  .lgbrand .lgwide{display:none}
  .lgform{padding:34px 36px 28px;gap:12px;justify-content:center}
  .lgtitle{font-size:24px}
}

.dlg{border:none;background:transparent;padding:0;max-width:92vw;color:var(--txt);margin:auto}   /* <dialog> の既定色は黒なので明示する。margin: 全体の * {margin:0} で消える中央寄せを戻す */
.dlg::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(3px)}
/* 開くときの動き: ふわっと出す（ダイアログ・メニュー・お知らせ共通の曲線） */
@keyframes fqIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fqFade{from{opacity:0}to{opacity:1}}
.dlg[open]{animation:fqIn .24s cubic-bezier(.2,.8,.2,1)}
.dlg[open]::backdrop{animation:fqFade .24s ease}
.vmenu{animation:fqIn .18s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){
  .dlg[open],.dlg[open]::backdrop,.vmenu{animation:none}
  .pbtn,.hbtn,.tbtn,.step,.vm-opt{transition:none}
}
/* 📥 追跡データの取り込み */
.ti-opts{display:flex;flex-direction:column;gap:10px}
.ti-opts[hidden]{display:none}
.ti-opts .row{flex-wrap:wrap}
.ti-chips{display:inline-flex;gap:6px;flex-wrap:wrap}
.ti-prev{display:block;width:100%;max-height:40vh;background:#0c160f;border-radius:10px}
.ti-dot circle{stroke:#0b120e;stroke-width:.25}
.ti-dot.own circle{fill:var(--gold)}
.ti-dot.opp circle{fill:#f2f2f2}
.ti-dot.off{opacity:.35}
.ti-dot text{font-size:1.8px;font-weight:800;fill:#0b120e;text-anchor:middle;dominant-baseline:central}
.ti-ball{fill:#fff;stroke:#000;stroke-width:.3}
.ti-lab{font-size:2.6px;fill:#cfe3d5;text-anchor:middle}
.ti-err{color:#ffb3a8;font-size:12px}
.ti-err[hidden]{display:none}
.dbox{background:#101b14;border:1px solid var(--line);border-radius:14px;padding:18px;min-width:280px;max-width:520px;
  display:flex;flex-direction:column;gap:10px;font-size:13px}
.dbox h3{color:var(--gold);font-size:13px;letter-spacing:.1em}
.dbox label{display:flex;flex-direction:column;gap:4px;color:var(--txt-dim);font-size:11px}
.dbox input[type=text],.dbox input[type=number]{background:var(--chip);border:1px solid var(--line);border-radius:8px;padding:10px;font-size:15px;color:var(--txt)}
.dbox .row{display:flex;gap:6px;align-items:center;font-size:11px;color:var(--txt-dim)}
.dbtns{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.plist{max-height:50vh;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.plist[hidden]{display:none}   /* display:flex は [hidden] の既定より強いので明示する */
.prow{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--line);border-radius:10px}
.prow.cur{border-color:var(--gold)}
.prow.trash .pname{opacity:.75}
details[data-trash]{margin-top:6px;border-style:dashed}
/* 選手の名前と背番号（teamroster.js）: 番号と名前の行 */
.trlist{display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow-y:auto;margin-top:8px}
.trrow{display:flex;align-items:center;gap:6px}
.trrow input[type=number]{width:64px;flex:0 0 64px;text-align:center}
.trrow input[type=text]{flex:1;min-width:0}
.trrow small{font-size:11px;color:var(--txt-dim);white-space:nowrap}
.trrow.dup input[type=number]{border-color:var(--danger);color:var(--danger)}
.dlg-roster .row .chip{min-height:36px}
.dlg-roster .row .thelp{margin-left:auto}
.pname{flex:1;font-weight:700;font-size:14px;display:flex;flex-direction:column}
.pname small{font-size:10px;color:var(--txt-dim);font-weight:600}
.empty{color:var(--txt-dim);text-align:center;padding:20px}
.lhint{font-size:11px;color:#9fb3a6;margin-top:4px}
/* テンプレートのタブの上の一言（home.js の TEMPLATE_NOTE） */
.lhint.tpl-note{margin:0 0 8px}
.prow.lib{flex-wrap:wrap}
.prow.lib .pname{min-width:180px;color:#fff}
.prow.lib .pname small{white-space:normal;line-height:1.45;color:#c9d6cc;font-size:11px;margin-top:2px}
.prow .pname small{color:#b8c6bc}
.pbtns{display:flex;gap:6px;margin-left:auto}
/* フォルダ */
.fold{border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02)}
.fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:10px 12px;font-weight:700;font-size:14px;color:#f3e9c8;user-select:none}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary .fico{font-size:16px}
.fold>summary .fname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fold>summary small{font-size:11px;color:#9fb3a6;font-weight:600}
.fmenu{border:1px solid var(--line);background:var(--chip);color:var(--txt-dim);border-radius:8px;min-width:34px;min-height:30px;font-size:16px;line-height:1;padding:0 6px}
.fmenu:hover{color:var(--txt);border-color:var(--gold)}
.fopts{display:flex;flex-direction:column;gap:8px;margin:12px 0 4px}
/* 一覧のドラッグ＆ドロップ */
.dragh{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;color:var(--txt-dim);font-size:18px;line-height:1;padding:6px 4px;min-width:26px;text-align:center;flex:0 0 auto}
.dragh:active{cursor:grabbing}
.dghost{position:fixed;left:0;top:0;transform:translate(-50%,-130%);background:var(--gold);color:#12200f;padding:6px 14px;border-radius:999px;font-weight:800;font-size:13px;pointer-events:none;z-index:100;box-shadow:0 6px 18px rgba(0,0,0,.5);white-space:nowrap}
.dropline{height:3px;background:var(--gold);border-radius:2px;margin:2px 6px;pointer-events:none}
.fold.dropon{outline:2px solid var(--gold);background:rgba(217,182,74,.14)}
.dropout{border:1px dashed var(--line);border-radius:10px;padding:14px;text-align:center;color:var(--txt-dim);font-size:12px;margin-top:4px}
.dropout.dropon{outline:2px solid var(--gold);background:rgba(217,182,74,.14);color:var(--txt)}
#plTree.dragging{user-select:none;-webkit-user-select:none}
.forder{display:flex;align-items:center;gap:8px;margin-top:12px}.forder .hbtn{min-width:84px}
.fold[open]>summary{border-bottom:1px solid var(--line)}
.fold .fbody{display:flex;flex-direction:column;gap:6px;padding:8px}
.fold.d1{background:rgba(255,255,255,.03)}
.fold.d1>summary{font-size:13px;padding:8px 10px;color:#e6dcb4}
.plist{max-height:60vh}
.dbox{max-width:640px}
/* お知らせ: 画面の上から降りてくる帯。長い文でも角丸の四角のまま（丸いかたまりにしない）。盤の下の操作にかぶらない */
#toast{position:fixed;left:50%;top:calc(64px + env(safe-area-inset-top));transform:translateX(-50%) translateY(-12px) scale(.98);opacity:0;
  width:max-content;max-width:min(560px,calc(100vw - 24px));text-align:center;line-height:1.5;
  background:rgba(16,27,20,.96);border:1px solid rgba(217,182,74,.45);color:var(--txt);padding:10px 18px;border-radius:14px;
  font-size:13px;font-weight:700;pointer-events:none;z-index:60;box-shadow:0 12px 32px rgba(0,0,0,.45);backdrop-filter:blur(8px);
  transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
#toast.show{opacity:1;transform:translateX(-50%)}
@media (max-width:700px){#toast{top:calc(112px + env(safe-area-inset-top))}
  /* パターンの A・B… のボタンが盤の上に出ているあいだは、長い知らせがそれに重ならないよう下（タイムラインの上）へ出す（点検 C-02） */
  body:has(#stage.haspat) #toast{top:auto;bottom:calc(200px + env(safe-area-inset-bottom))}}
/* 3D で道案内（映像から作る）が出ている間は、知らせを下（タイムラインの上）に出す。上だと手順の帯に重なって読めない */
body.present:has(#pbFlow:not([hidden])) #toast{top:auto;bottom:calc(150px + env(safe-area-inset-bottom))}
/* 3D の右上の「60fps」は開発用。localStorage の gtb.debug.fps を "1" にしたときだけ出す */
#pbFps{display:none}
body.show-fps #pbFps{display:inline}   /* スマホは上に 2 段のバーがあるので、その下に出す */

/* スマホ向けの調整はファイル末尾の @media にまとめてある（後勝ちで確実に効かせるため） */

/* ===== 3D ステージ / プレゼンモード ===== */
#stage3d{position:relative;display:none;min-height:0;min-width:0;background:#0a0f14;overflow:hidden}
#stage3d canvas{display:block;position:relative;z-index:1;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
/* 3D の後ろに置いた試合映像 */
#stage3d video.vd-bgfull{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:0;background:#000;pointer-events:none}
#stage3d canvas:active{cursor:grabbing}
#stage3d canvas.pen,#stage3d canvas.pen:active{cursor:crosshair}
.pb-pen{display:inline-flex;gap:6px}.pb-pen[hidden]{display:none}
.pb-stage{display:inline-flex;gap:6px}.pb-stage[hidden]{display:none}
/* つなぐ: 攻撃はオレンジ・守備は青（盤に描く色と同じ） */
.pb-link{display:inline-flex;gap:6px}.pb-link[hidden]{display:none}
.pbtn.link-atk{border-color:rgba(255,146,30,.7)}.pbtn.link-atk.on{background:#ff921e;border-color:#ff921e;color:#1d1204}
.pbtn.link-def{border-color:rgba(64,140,255,.7)}.pbtn.link-def.on{background:#408cff;border-color:#408cff;color:#fff}
.pb-rec{display:inline-flex;gap:6px}.pb-rec[hidden]{display:none}
/* 3D で見ている間も、場面の「＋」は出す（続きを足せることが分かるように。押すと収録に入る）。
   収録中は、秒・複製・削除も出す（ゴーストは 2D 用なので出さない） */
body.present #timeline .step.edit-only{display:flex!important}
.pbtn.save{color:var(--gold);border-color:var(--gold);background:rgba(217,182,74,.1);font-weight:800}
.pbtn.save[hidden]{display:none}
body.present.recording #timeline .tl-ctrl .edit-only{display:inline-flex!important;align-items:center;justify-content:center}
body.present.recording #timeline #ghostBtn{display:none!important}
.pbtn:disabled{opacity:.4}
/* スポットライト（説明時に1人を目立たせる） */
#stage2d .player.spot .body{stroke:#37d67a;stroke-width:.55;filter:drop-shadow(0 0 1.4px #37d67a)}
#stage2d.spotting .player:not(.spot){opacity:.5}
#stage2d.spotting .player.holder:not(.spot){opacity:.75}
.pbtn.spot{background:rgba(55,214,122,.18);border-color:#37d67a;color:#c9ffdc}
.pbtn.whatif{background:rgba(217,182,74,.16);border-color:var(--gold);color:#f3e9c8}
/* 相手を出さないプレー（自チームだけを見せる）。3D の本体とタグは JS 側で消す */
body[data-opp="hide"] #stage2d .player.opp,
body[data-opp="hide"] #stage2d .ghost.opp,
body[data-opp="hide"] #stage2d .run.opp,
body[data-opp="hide"] #stage2d .runDot.opp,
body[data-opp="hide"] #stage2d .pass.opp,
body[data-opp="hide"] #stage2d .hit.opp,
body[data-opp="hide"] #stage2d .mark,
body[data-opp="hide"] .pchip.opp,
body[data-opp="hide"] #toolbar [data-assist="tidyOpp"],
body[data-opp="hide"] #toolbar [data-assist="tidyOwn"],
body[data-opp="hide"] #toolbar [data-assist="bind"],
body[data-opp="hide"] #toolbar [data-assist="half"]{display:none}
.fpair[hidden]{display:none}
/* 選手タグの表示切替（2D の <text> と 3D の HTML ラベルを同じ属性で制御） */
body[data-tags="num"] .lbl span,body[data-tags="num"] #stage2d text.name{display:none}
body[data-tags="none"] .lbl,body[data-tags="none"] #stage2d text.name,body[data-tags="none"] #stage2d text.num{display:none}
.lgroup{font-size:11px;color:var(--gold);letter-spacing:.06em;margin-top:6px}
/* プレーのタグ（分類）と一覧の検索 */
.psearch{background:var(--chip);border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  font-size:14px;color:var(--txt);width:100%}
.psearch::placeholder{color:#8fa295}
.tchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.tchip{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;
  padding:3px 8px;border-radius:999px;border:1px solid var(--line);background:var(--chip);color:#e6dcb4}
button.tchip{cursor:pointer;min-height:32px;padding:4px 10px}
.tchip.on{background:var(--gold);border-color:var(--gold);color:#12200f}
.tcur,.tsug{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tsug{margin-top:2px}
.thelp{font-size:11px;color:#9fb3a6}
.dbox .row input[type=text]{flex:1;background:var(--chip);border:1px solid var(--line);border-radius:8px;padding:10px;font-size:15px;color:var(--txt)}
.tl-notein{width:100%;background:#0b1210;border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:13px;color:#f0d98a;min-width:0}
.tl-notein::placeholder{color:#6f8477}
.tl-notein:focus{outline:none;border-color:var(--gold)}
.tl-notein[hidden]{display:none}
@media (pointer:coarse){.tl-notein{font-size:16px}}   /* 16px 未満だと iPhone が入力のたびに画面を拡大する */
.tl-note{font-size:12px;color:#f0d98a;padding:2px 4px 0;min-height:0;line-height:1.4}
.tl-note:empty{display:none}
body.present .tl-note{font-size:15px}
/* 「映像から作る」の道案内: いまどの段か（上）と、その段で押すボタン（下） */
.pb-flow{display:flex;flex-direction:column;gap:6px;padding:6px 10px 8px;pointer-events:auto;background:rgba(10,15,12,.86);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pb-flow[hidden]{display:none}
.pf-steps{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;font-size:12px;color:var(--txt-dim);white-space:nowrap}
.pf-steps::-webkit-scrollbar{display:none}
.pf-step{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 4px;border-radius:999px;border:1px solid transparent;background:none;color:inherit;font:inherit;cursor:pointer}
.pf-step:hover{border-color:var(--line)}
.pf-step:disabled{cursor:default;border-color:transparent}
.pf-step b{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--chip);border:1px solid var(--line);font-size:11px}
.pf-step.now{color:#12200f;background:var(--gold);font-weight:800}
.pf-step.now b{background:#12200f;color:var(--gold);border-color:#12200f}
.pf-step.done{color:#9fd8b0}
.pf-step.done b{background:#1d4a2d;border-color:#2f7a4a;color:#d5f5df}
.pf-step.skip{opacity:.35;text-decoration:line-through}
.pf-sep{opacity:.4}
.pf-act{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pf-act .pbtn.go{background:var(--gold);border-color:var(--gold);color:#12200f;font-weight:800}
.pf-act .pbtn.done{border-color:#2f7a4a;color:#bff0cd}
.pf-sec{background:var(--chip);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:6px 4px;font-size:13px;font-weight:700;min-height:36px}
.pf-paren{font-size:12px;color:var(--txt-dim);margin-right:4px}
.pf-tip{font-size:11px;color:var(--txt-dim);flex:1 1 200px;min-width:0}
/* 説明の行: モードに入った直後の数秒だけ出して、ふわっと消す（present.js の flashHint）。消えている間も場所は取るが、見えず押せない */
.pb-hint{width:max-content;max-width:calc(100% - 20px);margin:0 10px 6px;padding:5px 10px;border-radius:8px;
  font-size:12px;line-height:1.5;color:var(--txt);background:rgba(8,14,11,.82);border:1px solid var(--line);
  pointer-events:none;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s linear .4s}
.pb-hint.show{opacity:1;visibility:visible;transition:opacity .25s}
.pb-hint:empty{display:none}
.pbtn.pb-help{min-height:34px;min-width:34px;padding:0 8px;font-size:13px;color:var(--txt-dim)}
/* ペン・つなぐ・試しに動かす の小ボタン: 上のバーの下の細い 2 段目（上のバーの並びを変えない） */
.pb-sub{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:0 10px 6px;pointer-events:auto}
.pb-sub[hidden]{display:none}
.pb-sub .pbtn{min-height:34px;padding:5px 11px;font-size:13px}
.pb-sub .pb-lab{margin-right:2px}
body.present.pbmin .pb-sub,body.present.pbmin .pb-hint{display:none!important}
/* z-index で 1 つの層にまとめる: タグどうしの前後はこの中だけで決まり、上のバー（z-index:5）や目線の列の上には出ない */
#labels3d{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
/* 3D でボールを伸ばしている間の「ワンツー」「3人目」（view3d.js の showComboLabel。2D の .otLabel と同じ色） */
.combo3d{position:absolute;transform:translate(-50%,-150%);padding:2px 9px;border-radius:999px;font-size:13px;font-weight:800;
  color:#9fd8ff;background:rgba(8,14,12,.85);border:1px solid rgba(159,216,255,.5);pointer-events:none;z-index:3;white-space:nowrap}
.combo3d[hidden]{display:none}
.lbl{position:absolute;left:0;top:0;pointer-events:auto;cursor:pointer;white-space:nowrap;
  display:flex;flex-direction:column;align-items:center;gap:1px;transform-origin:50% 100%;
  font-weight:800;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.lbl b{font-size:15px;line-height:1;padding:3px 7px;border-radius:7px;background:rgba(23,53,33,.85);color:#e9c85a;border:1px solid rgba(217,182,74,.5)}
.lbl.opp b{background:rgba(241,241,241,.9);color:#1d1d1d;border-color:rgba(0,0,0,.25)}
.lbl.gk b{background:rgba(88,183,214,.9);color:#0a1a22}
.lbl.opp.gk b{background:rgba(224,138,58,.95);color:#221305}
.lbl span{font-size:11px;color:#fff}
.lbl.on b{outline:2px solid #37d67a}
/* 重なったときの奥の選手（labels.js）: 名前を消して番号だけ。近い選手のタグが読めるように */
.lbl.far span{display:none}
.lbl.tiny{opacity:.6}
#presentBar{display:none}
body.present #header,body.present #toolbar,body.present #stage{display:none}
body.present #main{grid-template-columns:1fr;grid-template-rows:1fr}
body.present #stage3d{display:block}
body.present #presentBar{display:block;position:absolute;left:0;right:0;top:0;pointer-events:none;z-index:5}
body.present .edit-only{display:none!important}
body.present .lbl b{font-size:19px;padding:4px 9px}
body.present .lbl span{font-size:14px}
body.present #timeline{padding:8px 14px 12px}
body.present .tbtn{min-height:44px;min-width:48px;font-size:16px}
body.present .tbtn.primary{min-width:72px;font-size:22px}
body.present .step{min-width:64px;height:52px}
body.present .step b{font-size:20px}
.pb-top,.pb-pov{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 10px;pointer-events:auto}
/* 目線の列: 広く見る ｜ 味方（背番号順）｜ 相手も ▸ */
.pb-pov{padding-top:0}
.pb-pov .pb-lab.own{color:var(--gold);margin-left:6px}
.pb-pov .pb-lab.opp{color:#e6e6e6;margin-left:8px}
.pb-pov .pchip.opp{border-color:rgba(230,230,230,.35)}
.pbtn.pb-scan,.pbtn.pb-oppt{min-height:36px;padding:6px 11px;font-size:13px}
.pb-pov[hidden]{display:none}
/* カメラの切り替えは 1 つのまとまり（セグメント）に。ほかのボタンと見分けやすく、横幅も詰まる */
.pb-cams{display:flex;gap:2px;flex-wrap:wrap;padding:3px;border:1px solid var(--line);border-radius:12px;
  background:rgba(10,18,15,.85);backdrop-filter:blur(6px)}
.pb-cams .pbtn{border-color:transparent;background:transparent;backdrop-filter:none;min-height:34px;padding:6px 11px;border-radius:9px}
.pb-cams .pbtn.on{background:var(--gold);color:#12200f}
.pbtn{border:1px solid var(--line);background:rgba(10,18,15,.85);color:var(--txt);border-radius:10px;
  padding:9px 13px;font-size:14px;font-weight:800;min-height:42px;backdrop-filter:blur(6px)}
.pbtn.on{background:var(--gold);border-color:var(--gold);color:#12200f}
.pbtn[hidden]{display:none}
.pbtn,.hbtn,.tbtn,.step,.vm-opt{transition:background-color .15s,border-color .15s,color .15s,transform .12s}
.pbtn:active,.hbtn:active,.tbtn:active,.step:active,.vm-opt:active{transform:scale(.96)}
.pb-fps{margin-left:auto;font-size:11px;color:var(--txt-dim)}
.pb-top .pb-help{margin-left:auto}
.pb-lab{font-size:12px;color:var(--gold);font-weight:800;white-space:nowrap;flex:0 0 auto}
.pchip{border:1px solid var(--line);background:rgba(10,18,15,.85);color:var(--txt);border-radius:999px;
  padding:6px 10px;font-size:12px;font-weight:800;display:flex;gap:5px;align-items:center;min-height:38px}
.pchip.own b{color:var(--gold)}.pchip.opp b{color:#ddd}
.pchip span{font-weight:700;font-size:11px;color:#fff}
.pchip.on{background:var(--gold);border-color:var(--gold);color:#12200f}
.pchip.on b,.pchip.on span{color:#12200f}

.tlabel{font-size:10px;letter-spacing:.12em;color:var(--gold);font-weight:800;padding:2px 4px}
#kitBox{display:flex;flex-direction:column;gap:10px}
.mark{fill:none;stroke:#ff6b6b;stroke-width:.22;stroke-dasharray:.5 .5;opacity:.85}
.err{color:#ff6b6b;font-size:11px}
.dbox input[type=password]{background:var(--chip);border:1px solid var(--line);border-radius:8px;padding:10px;font-size:15px;color:var(--txt)}

/* ===== 狭い画面（スマホ）: 盤を最大化し、操作は1行に収める =====
   他のルールを確実に上書きするため、ファイルの最後に置く */
@media (max-width:700px){
  /* ヘッダ: [プレー名][↩][↪][3D][☰] の1行。残りは ☰ のメニューへ */
  #header{flex-wrap:nowrap;gap:3px;padding:6px 5px}
  .wide-only{display:none}
  .brand{padding:2px 3px;border-radius:8px;min-height:40px;min-width:34px;justify-content:center}   /* ロゴ＝ホームのボタン。指で押せる大きさ */
  .brand .logo-h{display:none}.brand .logo-m{display:block;height:28px;width:28px}
  .only-narrow{display:inline-flex;align-items:center;justify-content:center}
  .narrow-item{display:inline-flex;align-items:center;justify-content:center}
  #header .name{flex:1 1 0;width:0;min-width:0;font-size:14px;padding:8px}   /* 残った幅だけ使う。名前が長くてもボタンを押し出さない */
  #header>.hbtn{padding:8px 8px;min-height:40px;flex:0 0 auto}
  .hcollapse{display:none;position:absolute;top:100%;left:0;right:0;z-index:40;
    flex-direction:column;align-items:stretch;gap:8px;padding:10px;
    background:var(--panel);border-bottom:1px solid var(--line);backdrop-filter:blur(10px);
    box-shadow:0 12px 24px rgba(0,0,0,.5)}
  #header.open .hcollapse{display:flex}
  .hcollapse .hgroup{flex-wrap:wrap;gap:8px}
  .hcollapse .hgroup.right{margin-left:0}
  .hcollapse .hsec{display:flex}
  .hcollapse #playSetBtn{flex:1 1 100%;max-width:none}
  .hcollapse .hhead{display:block}
  .hcollapse .hgroup .hbtn,.hcollapse .hgroup .chip{flex:1 1 auto;min-height:44px}
  .fpair{flex:1 1 100%}
  .fpair .tag{flex:0 0 auto;min-width:34px;text-align:center;padding:6px 7px}
  .hcollapse .hsel{flex:1 1 auto;min-width:0;min-height:44px}

  /* ツール: 横スクロールの1行 */
  #main{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  #toolbar{flex-direction:row;align-items:center;width:auto;border-right:none;
    border-bottom:1px solid var(--line);overflow-x:auto;padding:5px 6px;gap:5px}
  .tool{min-width:58px;padding:7px 5px;font-size:11px;min-height:42px;flex:0 0 auto}
  .tool.sub{min-height:42px;font-size:10px;min-width:64px;padding:6px 4px}
  .tsep{flex:0 0 1px;width:1px;height:26px;margin:0 2px}
  .tlabel{flex:0 0 auto;font-size:9px}
  #selBox{flex-direction:row;align-items:center;gap:6px;flex:0 0 auto;padding:4px 6px}
  .tgroup{flex-direction:row;align-items:center;gap:4px;flex:0 0 auto}
  .tgroup .tool.sub{min-width:48px}
  .tval{flex:0 0 auto;font-size:10px}
  .thint{display:none}

  /* タイムライン: ステップ / メモ / 再生 / スライダー */
  #timeline{padding:5px 8px calc(6px + env(safe-area-inset-bottom));gap:5px}
  .step{min-width:48px;height:40px}
  .step b{font-size:15px}
  .step.add{min-width:40px}
  .tl-note{font-size:11px;padding:0 2px}
  .tl-ctrl{gap:5px}
  .tbtn{min-height:40px;min-width:38px;padding:0 8px}
  .tbtn.primary{min-width:52px}
  .tbtn.frame{min-width:40px;font-size:12px}
  #scrub{flex:1 1 100%;order:10;min-width:0}
  .tl-time{order:11;min-width:0;font-size:10px}
  .tsel{order:12;padding:5px}
  .tlab{order:13}
  .tlab input{width:48px}
  #ghostBtn,#dupStep,#delStep{order:14;font-size:11px;padding:0 8px}

  /* 3D 提示: 上のバーは折り返さず横スクロールの1行に */
  .pb-fps,.pb-help{display:none!important}
  body:not(.recsimple) .pb-hint{display:none!important}   /* 場面を足している間の「場面 N。…」だけは数秒出す */
  .pb-wide{display:none}   /* 「✕ もどる」「↩」「▶ 次の場面」: 縦のスマホでも 1 行目に 完成 まで入るように */
  .pb-flow{padding:5px 8px 6px;gap:5px}
  .pf-tip{flex:1 1 100%}
  .pf-tip.place{display:none}
  .pf-min{margin-left:0}   /* 置いている間は、盤を広く見せる */
  .pbtn{padding:7px 10px;font-size:12px;min-height:38px;flex:0 0 auto}
  .pb-top,.pb-pov,.pb-sub{padding:6px 8px;gap:5px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .pb-sub,.pb-pov{padding-top:0}
  .pb-top::-webkit-scrollbar,.pb-pov::-webkit-scrollbar,.pb-sub::-webkit-scrollbar{display:none}
  /* 横に流れる 1 行の中で、チップが縦に折れないように（名前が 1 文字ずつ縦になり、番号チップの列はバーを 1000px に伸ばしていた） */
  .pchip{flex:0 0 auto;white-space:nowrap}
  /* ペン・試しに動かす・映像から作る の小ボタンのまとまりは縮めない（縮むと中のボタンが隣に重なる） */
  .pb-pen,.pb-stage,.pb-link,.pb-rec,.pb-cams{flex:0 0 auto}
  /* 指で押せる大きさに（戻す・やり直す・☰ は 40px 角。名前の欄がそのぶん縮む） */
  .savestate{min-width:36px;min-height:40px;padding:0 4px;flex:0 0 auto}
  .savestate .ss-lab{display:none}
  #undoBtn,#redoBtn,#moreBtn{min-width:34px;min-height:40px;padding:0;justify-content:center}
  #pbUndo,#pbRecUndo{min-width:40px}
  /* 一覧の下のボタン: 4 つを 1 行に並べると 2 行に折れるので、書き出す・読み込む と 閉じる・新しいプレー の 2 段にする */
  .dbtns-list{flex-wrap:wrap}
  .dbtns-list>span{display:none}
  .dbtns-list .hbtn{flex:1 1 40%;white-space:nowrap}
  .dbox select,.dbox .hsel{min-height:44px}
  #videoDock .pbtn{min-height:40px}
  /* 映像から作る の間: 置く作業に要るボタンだけ残し、番号チップはその下の横に流れる 1 行にする */
  /* 映像なしで場面を足している間（recsimple）は、ほかと同じ横に流れる 1 行（↩・次の場面へ・完成 が左の先頭） */
  body.recording:not(.recsimple) .pb-top{flex-wrap:wrap;overflow-x:visible}
  body.recording:not(.recsimple) #pbCams,body.recording:not(.recsimple) .pb-top [data-vm],body.recording:not(.recsimple) #pbPen,body.recording:not(.recsimple) #pbLink,body.recording:not(.recsimple) #pbLinkOpts,body.recording:not(.recsimple) #pbStage,body.recording:not(.recsimple) #pbExport,body.recording:not(.recsimple) #pbShareMenu,body.recording:not(.recsimple) #pbMore,body.recording:not(.recsimple) #pbHelp{display:none}
  .pb-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:0 8px 4px}
  .pb-chips::-webkit-scrollbar{display:none}
  .pb-cams{flex-wrap:nowrap;flex:0 0 auto}
  body.present .lbl b{font-size:16px;padding:3px 7px}
  body.present .lbl span{font-size:12px}
  body.present #timeline{padding:6px 8px calc(8px + env(safe-area-inset-bottom))}
  body.present .tbtn{min-height:42px;min-width:44px;font-size:15px}
  body.present .tbtn.primary{min-width:60px;font-size:19px}
  body.present .step{min-width:52px;height:44px}
  body.present .step b{font-size:17px}

  /* ダイアログを画面いっぱいに */
  .dlg{max-width:96vw}
  .dbox{padding:14px;min-width:0;width:96vw;max-width:96vw}
  .plist{max-height:58vh}
  .psearch{font-size:16px;padding:11px 12px}   /* iOS の自動ズーム防止 */
  .dbox .row input[type=text]{font-size:16px}
  button.tchip{min-height:36px}
  /* 保存したプレーの行: ボタンが 3 つ（開く・複製・削除）あるので、名前の下の段に並べる（横に並べると名前が 3 行に折れる） */
  .prow:not(.lib){flex-wrap:wrap}
  .prow:not(.lib) .pname{flex:1 1 calc(100% - 44px);min-width:0}
  .prow:not(.lib)>.hbtn{flex:1 1 0;min-height:40px}
  .prow:not(.lib)>.hbtn[data-open]{margin-left:0}
  /* 種類を分けた一覧: 名前を 1 段目いっぱいに、ボタン（開く・複製して新規作成・共有・削除）は 2 段目に並べる */
  .pl-scoped .prow:not(.lib) .pname{flex:1 1 100%}
  .pl-scoped .prow:not(.lib)>.hbtn{flex:1 1 auto;white-space:nowrap;padding:0 8px}
  .prow.trash .pname{flex:1 1 100%}/* ゴミ箱の行は「開く」が無いので、ボタンは 2 段目に 2 つ並べる */
  .prow.lib .pbtns{margin-left:0;width:100%}
  .prow.lib .pbtns .hbtn{flex:1 1 0;min-height:42px}
}
/* 3D（プレゼン）の右上の動画: 映像を見ながら自分で動きを作る */
#videoDock{position:absolute;right:10px;top:60px;z-index:6;width:min(340px,calc(100% - 20px));background:rgba(8,14,11,.92);border:1px solid var(--line);border-radius:12px;padding:6px;display:flex;flex-direction:column;gap:6px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
#videoDock.big{width:min(620px,calc(100% - 20px))}
#videoDock[hidden],body:not(.present) #videoDock{display:none}
.vd-head{display:flex;align-items:center;gap:4px}
.vd-name{flex:1 1 auto;min-width:0;font-size:11px;color:var(--txt-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:2px}
#videoDock .pbtn{min-height:32px;min-width:0;padding:0 8px;font-size:12px}
#videoDock .pbtn:disabled,.vd-rate:disabled{opacity:.4}
.vd-screen{position:relative;aspect-ratio:16/9;max-height:60vh;background:#000;border-radius:8px;overflow:hidden}
.vd-screen video{display:block;width:100%;height:100%;object-fit:contain;cursor:pointer}
.vd-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:transparent;border:none;color:var(--gold);font-size:15px;font-weight:800;cursor:pointer}
.vd-empty small{font-size:10px;font-weight:400;color:var(--txt-dim);padding:0 14px;line-height:1.5}
.vd-empty[hidden]{display:none}
.vd-rate{height:30px;border:1px solid var(--line);background:rgba(10,18,15,.85);color:var(--txt);border-radius:8px;font-size:12px}
/* 📥 取り込み画面は縦に長いので、枠の中だけでスクロールし、幅は画面に収める */
.dlg.ti-dlg{max-width:none;overflow:hidden}
.ti-dlg .dbox{width:min(520px,calc(100vw - 24px));min-width:0;max-height:calc(100dvh - 32px);overflow-y:auto;overflow-x:hidden}
.ti-dlg .dbox select,.ti-dlg .dbox input{width:100%;max-width:100%;min-width:0}
.ti-dlg .row{flex-wrap:wrap}
.ti-dlg .row>span:first-child{flex:0 0 100%}
.ti-dlg .chip{white-space:normal;text-align:left}
.ti-dlg #tiName{flex:1 1 0;min-width:0;overflow-wrap:anywhere}
.dlg.ti-dlg{margin:auto}   /* 全体の * {margin:0} で <dialog> の中央寄せが消えるので戻す */
#videoDock.bg .vd-screen{display:none}
#videoDock.bg{width:min(420px,calc(100% - 20px))}
.vd-alpha{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--txt-dim);flex-wrap:wrap}
.vd-alpha input{flex:1 1 80px;min-width:60px;accent-color:var(--gold)}
.vd-alpha[hidden]{display:none}
.vd-pan{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--txt-dim);flex-wrap:wrap}
.vd-pan .pbtn{min-width:34px}
.vd-pan .vd-hint{flex:1 1 100%;font-size:10px}
.vd-pan[hidden]{display:none}
/* 📐 4 点で合わせる（3D の上に重ねるタップ用の層） */
#camAlign{position:absolute;inset:0;z-index:4;touch-action:none;cursor:crosshair}
#camAlign .ca-marks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* 4 点で合わせている間は、上のバーを消して映像を全部見せる（目印はコートの奥＝画面の上のほうにある） */
body.cam-aligning #presentBar{display:none!important}
/* 何もない所をタップ → 上の表示（バー・置く番号・次の場面へ）を消す。下の再生バーと場面は残す。もう一度タップで戻る */
body.present.clean #presentBar,body.present.clean #videoDock{display:none!important}
/* 映像の道案内（合わせる・のせる）の間の最小表示: 保存・カメラ固定・動かした選手を戻す だけ残す */
body.present.pbmin .pb-top>*:not(#pbSave):not(#pbCamLock):not(#pbWhatIf){display:none!important}
/* 置いている間（上をしまっているとき）: 保存・↩ は道案内の行へ。番号の列は「⋯ → 番号から置く」のときだけ（present.js）。
   上のバーに何も残らなければ、その行ごと消して盤を広く見せる */
body.present.pbmin.recording #pbSave{display:none!important}
body.present.pbmin.recording .pb-top:not(:has(> #pbCamLock:not([hidden]), > #pbWhatIf:not([hidden]))){display:none}
#pfSave[hidden]{display:none}
/* 「▼ 全部の操作」で上のバーを出しているときは、保存は上のバーの 1 つだけ（道案内の行の保存は出さない） */
body.present:not(.pbmin) #pfSave{display:none!important}
/* 閲覧ページだけのボタン（表示 ▾・？）。アプリでは「その他 ▾」の中にある */
body:not(.viewer) .pb-vonly{display:none!important}
/* 映像なしで場面を足している間の ↩・次の場面へ・完成（上のバーの中） */
.pb-rec .pbtn.go{background:var(--gold);border-color:var(--gold);color:#12200f}
.pb-rec .pbtn.done{border-color:#2f7a4a;color:#bff0cd}
body.present.pbmin:not(.flow-early) .pf-head{display:none}   /* 置いている間は、盤を広く見せる（完成で抜ける） */
.pf-min{margin-left:auto;font-size:11px;min-height:32px;color:var(--txt-dim)}
#camAlign .ca-top{position:absolute;left:10px;right:10px;top:10px;display:flex;justify-content:center;pointer-events:none}
#camAlign .ca-hint{background:rgba(8,14,11,.9);border:1px solid var(--gold);color:var(--gold);border-radius:10px;padding:8px 14px;font-size:13px;font-weight:700;max-width:90%}
#camAlign .ca-side{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;gap:6px;background:rgba(8,14,11,.92);border:1px solid var(--line);border-radius:12px;padding:6px;cursor:default}
#camAlign .ca-map{display:block;max-width:min(480px,60vw);border-radius:8px;cursor:pointer}
#camAlign .ca-btns{display:flex;gap:4px}
#camAlign .ca-btns .pbtn{min-height:32px;padding:0 8px;font-size:12px}
body.cam-aligning #videoDock{display:none}
#camAlign .ca-top{top:8px}
/* 収録中の番号チップ（押して映像の上をタップすると置く） */
.pb-chips{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:0 10px 6px;pointer-events:auto}
.pb-chips[hidden]{display:none}
.pchip{min-width:34px;height:32px;border-radius:999px;border:1px solid var(--line);background:rgba(10,18,15,.85);font-weight:800;font-size:13px}
.pchip.own{color:var(--gold)}.pchip.opp{color:#eee}
.pchip.bench{opacity:.5;border-style:dashed}
/* 置くチップ: 番号の下に役割（GK/DF/MF/FW）。番号だけだと、映像の誰かが分からない */
#pbRecChips .pchip{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:0;line-height:1;height:38px;min-width:38px;padding:2px 6px}
#pbRecChips .pchip i{font-style:normal;font-size:8px;font-weight:800;letter-spacing:.04em;opacity:.8;margin-top:2px}
#pbRecChips .pchip.on i{opacity:1}
#pbRecChips .pchip.ball{height:38px}
.pchip.ball{color:#fff;font-size:15px;margin-right:4px}
.pchip.on{background:var(--gold);color:#12200f;opacity:1;border-color:var(--gold)}
/* 背景の映像の小さな再生バー */
.vd-note{font-size:11px;line-height:1.5;color:#ffe9b0;background:rgba(179,120,20,.25);border:1px solid rgba(217,182,74,.5);border-radius:8px;padding:6px 8px}
.vd-note[hidden]{display:none}
#vdMini{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:7;display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:4px 6px;background:rgba(8,14,11,.85);border:1px solid var(--line);border-radius:12px;max-width:calc(100% - 20px)}
#vdMini[hidden]{display:none}
#vdMini .pbtn{min-height:30px;min-width:0;padding:0 8px;font-size:12px}
#vdMini .vd-play{min-width:40px;font-size:14px}
#vdMini input[type=range]{width:min(220px,30vw);accent-color:var(--gold)}
#vdMini span{font-size:10px;color:var(--txt-dim);font-variant-numeric:tabular-nums;white-space:nowrap}
/* 映像の濃さ（背景にしている間だけ、下のバーの 2 段目に） */
.vd-alpha-mini{flex:1 1 100%;display:flex;align-items:center;gap:6px;padding:0 4px}
.vd-alpha-mini[hidden]{display:none}
#vdMini .vd-alpha-mini input[type=range]{flex:1 1 auto;width:auto;min-width:0}
#vdMini .vd-row{display:flex;align-items:center;gap:4px}
#vdMini{touch-action:none;cursor:move}
#vdMini button,#vdMini input,#vdMini select{cursor:pointer}
#vdMini input[type=range]{cursor:ew-resize}
.vd-grip{position:absolute;left:3px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--txt-dim);letter-spacing:-2px;cursor:move;user-select:none;-webkit-user-select:none;padding:6px 2px}
#vdMini{padding-left:16px}
#vdMini.moved{max-width:min(calc(100% - 20px),560px)}
body.cam-aligning #vdMini{display:none}

/* はじめてのガイド: 指している所だけ明るく残して周りを暗くする。操作は止めない（pointer-events:none） */
.guide{position:fixed;inset:0;z-index:80;pointer-events:none}
.guide-ring{position:fixed;border:2px solid var(--gold);border-radius:12px;box-shadow:0 0 0 9999px rgba(0,0,0,.55);transition:all .2s ease}
.guide-ring[hidden]{display:none}
.guide-card{position:fixed;pointer-events:auto;width:min(340px,calc(100vw - 16px));background:#101b14;border:1px solid var(--gold);border-radius:14px;padding:14px 16px;
  box-shadow:0 12px 36px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:8px}
.guide-title{color:var(--gold);font-weight:800;font-size:15px}
.guide-text{font-size:13px;line-height:1.7;color:var(--txt)}
.guide-foot{display:flex;align-items:center;gap:6px;margin-top:2px}
.guide-dots{margin-right:auto;font-size:11px;color:var(--txt-dim);font-variant-numeric:tabular-nums}
.guide-foot .hbtn{min-height:36px}
.guide-foot .hbtn:disabled{opacity:.35}
/* 「表示 ▾」「補助線 ▾」のメニュー（編集のツールバーと 3D のバーで共通） */
.vmenu{position:fixed;z-index:60;display:flex;flex-direction:column;gap:8px;padding:10px;min-width:180px;max-height:calc(100vh - 12px);overflow-y:auto;
  background:#101b14;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.vm-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.vm-lab{font-size:11px;color:var(--txt-dim);min-width:52px}
.vm-opt{border:1px solid var(--line);background:var(--chip);color:var(--txt);border-radius:8px;padding:8px 10px;font-size:12px;font-weight:700;min-height:40px}
.vm-opt.wide{text-align:left}
.vm-opt.wide small{display:block;font-size:11px;font-weight:600;color:var(--txt-dim);margin-top:2px}
.vm-opt.wide.on small{color:#2b3a24}
.vm-note{font-size:11px;color:var(--txt-dim);line-height:1.5;max-width:260px;padding:4px 2px 0}
.vm-check{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 6px;font-size:12px;font-weight:700;cursor:pointer;border-top:1px solid var(--line)}
.vm-check input{width:18px;height:18px;accent-color:var(--gold);margin:0}
.vm-check small{flex:1 1 100%;font-size:11px;font-weight:600;color:var(--txt-dim);padding-left:24px}
/* 書き出しの枠（縦・正方形で録っている間）: 絵の外は暗く */
#stage3d canvas.exporting{box-shadow:0 0 0 2000px rgba(6,10,8,.9)}
.vm-opt.on{background:var(--gold);border-color:var(--gold);color:#12200f}
/* 狭い画面では動画の再生バーを 2 段に折り返す（時間・速さ・⚙ が切れないように） */
@media (max-width:700px){
  #vdMini{width:calc(100% - 20px)}
  #vdMini .vd-row{flex-wrap:wrap;justify-content:center;row-gap:4px}
  #vdMini input[type=range]{flex:1 1 120px;width:auto;min-width:0}
}

/* 高さの低い横長の画面（スマホを横にしたとき。幅は 700px を超えるので PC 用の配置になる）。
   そのままだとヘッダーが 2 段・タイムラインが 3 段になり、盤が 120px ほどしか残らない。縦を詰めて、盤を広く取る */
@media (max-height:520px) and (min-width:701px){
  #header{flex-wrap:nowrap;gap:6px;padding:4px 8px}
  .brand{padding:2px 4px;min-height:34px;min-width:34px;justify-content:center}
  .brand .logo-h{display:none}.brand .logo-m{display:block;height:26px;width:26px}
  #header .name{flex:1 1 0;width:0;min-width:70px;font-size:13px;padding:6px 8px}
  .hcollapse .hgroup{gap:4px}
  .hbtn{padding:6px 9px;min-height:34px;font-size:12px}
  .hsel{padding:5px;font-size:12px}
  /* 道具は 2 列に。1 列だと「表示 ▾」「その他 ▾」が画面の下に隠れて、あることに気づけない（盤は高さで決まるので、横幅は余っている） */
  #toolbar{width:148px;padding:4px;gap:4px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:start}
  #toolbar>#selBox,#toolbar>.tsep,#toolbar>#penBox,#toolbar>.thint{grid-column:1/-1}
  #toolbar>.tsep{display:none}
  #selBox{gap:3px;padding:4px}
  #toolbar .tgroup:not([hidden]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}
  #toolbar #timingBox{grid-template-columns:repeat(3,minmax(0,1fr))}
  #toolbar .tgroup>.tlabel,#toolbar .tgroup>.tval{grid-column:1/-1}
  .tool{min-height:34px;padding:5px 4px;font-size:11px;border-radius:8px}
  .tool.sub{min-height:30px;font-size:10px}
  .thint{display:none}
  /* タイムライン: 場面のチップと操作を 1 行に */
  #timeline{gap:4px;padding:4px 8px calc(4px + env(safe-area-inset-bottom))}
  /* 3D で見せるときは操作が少ないので、場面のチップと操作を 1 行に。編集は 2 行（ボタンが多く、1 行だと文字が縦に折れる） */
  body.present:not(.recording) #timeline{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 8px}
  body.present:not(.recording) .tl-stepsrow{flex:0 1 auto;max-width:44%}
  body.present:not(.recording) .tl-ctrl{flex:1 1 300px}
  .tl-steps,.tl-stepsrow{gap:4px}
  .step,body.present .step{min-width:40px;height:36px;border-radius:8px}
  .step b,body.present .step b{font-size:14px}.step small{font-size:8px}
  .tl-ctrl{flex-wrap:nowrap;gap:4px;min-width:0}
  .tbtn,body.present .tbtn{min-height:34px;min-width:34px;padding:0 7px;font-size:12px;white-space:nowrap;flex:0 0 auto}
  .tbtn.primary,body.present .tbtn.primary{min-width:46px;font-size:15px}
  .tbtn.frame{min-width:36px;font-size:11px}
  #scrub{flex:1 1 60px;min-width:50px}
  .tl-time{min-width:0;font-size:10px}
  .tsel{padding:4px;font-size:12px}.tlab input{width:44px;padding:4px}
  .tl-notein{order:8;flex:1 1 100%;padding:4px 8px}
  .tl-note,body.present .tl-note{order:9;flex:1 1 100%;font-size:11px;padding:0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pf-steps{display:none}   /* 横向きのスマホは高さが無いので、段の帯は出さず、押すボタンだけにする */
  .pb-flow{padding:3px 8px 4px;background:none;border:none;pointer-events:none}   /* 帯の地を消して、ボタンだけを盤の上に浮かせる */
  .pb-flow .pf-act>*{pointer-events:auto}
  .pf-tip{display:none}
  /* 3D のバー: 折り返さず、横に流れる 1 行 */
  .pb-top,.pb-pov,.pb-sub{padding:4px 8px;gap:5px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .pb-sub,.pb-pov{padding-top:0}
  .pb-top::-webkit-scrollbar,.pb-pov::-webkit-scrollbar,.pb-sub::-webkit-scrollbar{display:none}
  .pbtn{flex:0 0 auto;min-height:34px;padding:0 10px;font-size:12px;white-space:nowrap}
  .pb-pen,.pb-stage,.pb-link,.pb-rec,.pb-cams{flex:0 0 auto}
  .pchip{flex:0 0 auto;white-space:nowrap;min-height:32px;padding:4px 8px}
  .pb-help{display:none!important}
  body:not(.recsimple) .pb-hint{display:none!important}
  /* 映像から作る の間は、スマホの縦と同じ: 置く作業に要るボタンだけ残し、番号チップはその下の横に流れる 1 行 */
  body.recording:not(.recsimple) .pb-top{flex-wrap:wrap;overflow-x:visible}
  body.recording:not(.recsimple) #pbCams,body.recording:not(.recsimple) .pb-top [data-vm],body.recording:not(.recsimple) #pbPen,body.recording:not(.recsimple) #pbLink,body.recording:not(.recsimple) #pbLinkOpts,body.recording:not(.recsimple) #pbStage,body.recording:not(.recsimple) #pbExport,body.recording:not(.recsimple) #pbShareMenu,body.recording:not(.recsimple) #pbMore{display:none}
  .pb-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:0 8px 4px}
  .pb-chips::-webkit-scrollbar{display:none}
}

/* ===== 盤の色「紙」: 白地では明るい線・印が見えないので、濃い色に置き換える ===== */
body[data-pitch="paper"] #stage2d .run{stroke:#3a4640}
body[data-pitch="paper"] #stage2d .runDot{fill:#3a4640;stroke:#fff}
body[data-pitch="paper"] #mkRun path{fill:#3a4640}
body[data-pitch="paper"] #stage2d .pass{stroke:#1f5fa8}
body[data-pitch="paper"] #mkPass path{fill:#1f5fa8}
body[data-pitch="paper"] #stage2d .pass.lob{stroke:#1a8fd0}
body[data-pitch="paper"] #stage2d .ghost .implicit{stroke:rgba(0,0,0,.4)}
body[data-pitch="paper"] #mkGhost path{fill:rgba(0,0,0,.45)}
body[data-pitch="paper"] #stage2d .ghost.opp circle{stroke:#7d7d7d}
body[data-pitch="paper"] #stage2d .lane5.half{fill:rgba(0,0,0,.05)}
body[data-pitch="paper"] #stage2d .lane5.line{stroke:rgba(0,0,0,.45)}
body[data-pitch="paper"] #stage2d .lane.away{stroke:#8a939c}
body[data-pitch="paper"] #stage2d .player.opp .body{stroke:rgba(0,0,0,.75)}
body[data-pitch="paper"] #stage2d .player.holder .ring,body[data-pitch="paper"] #stage2d .player.holder .pulse{stroke:#c4912a;filter:none}

/* リンクで共有（share.js のダイアログ）: このプレーのリンクの一覧と、名前を載せるかの選択 */
.shlist{display:flex;flex-direction:column;gap:8px;margin-top:10px;max-height:40vh;overflow-y:auto}
.shrow{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.03)}
.shrow .shurl{width:100%;background:var(--chip);border:1px solid var(--line);border-radius:8px;padding:9px 10px;font-size:13px;color:var(--txt);font-family:ui-monospace,Menlo,Consolas,monospace}
.shrow small{font-size:11px;color:var(--txt-dim)}
.shbtns{display:flex;flex-wrap:wrap;gap:6px}
.shbtns .hbtn{min-height:38px}
.dbox .vm-check.shnames{border-top:none;margin-top:8px;padding:8px 0}
/* コートの追従: 再生バーの上の、コートを合わせた時刻（キー）の印 */
#vdMini .vd-seek{position:relative;display:inline-flex;align-items:center}
#vdMini .vd-keys{position:absolute;left:8px;right:8px;top:0;bottom:0;pointer-events:none}
#vdMini .vd-keys i{position:absolute;top:1px;width:2px;height:6px;margin-left:-1px;background:#37d67a;border-radius:1px}
/* コートの目印を引っぱって合わせる面（映像と 3D の上。再生バーの下） */
#courtTrack{position:absolute;inset:0;z-index:4;touch-action:none;cursor:grab}
#courtTrack:active{cursor:grabbing}
#courtTrack .ct-marks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
body.cam-aligning #courtTrack{display:none}
/* 映像の時刻で置く: 足すチームの切り替え（選んでいる方を金色に） */
.pf-add.on{background:var(--gold);color:#12200f;border-color:var(--gold);font-weight:800}
/* 新規作成の道案内（newflow.js）: 大きな画面 1 枚に、いまの手順のものだけ */
.dlg.nw-dlg{max-width:none;max-height:none;margin:auto;overflow:hidden}
.nw-dlg .dbox{width:min(900px,calc(100vw - 24px));max-width:none;min-width:0;height:min(760px,calc(100dvh - 24px));padding:0;overflow:hidden}
.nw{display:flex;flex-direction:column;height:100%;min-height:0}
.nw-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.nw-head>span{width:1px}
/* 右上: ✕ と、その左の空き場所（最初の画面だけ。受け取り箱の数などの印を入れる。何も無ければ場所を取らない） */
.nw-hright{display:flex;align-items:center;gap:8px;justify-self:end}
.nw-slot{display:inline-flex;align-items:center;gap:6px}
.nw-slot:empty{display:none}
.nw-title{font-size:17px;font-weight:800;color:var(--txt);text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
.nw-title small{font-size:11px;font-weight:700;color:var(--gold);letter-spacing:.08em}
.nw-back,.nw-x{min-height:36px}
.nw-body{flex:1;min-height:0;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.nw-foot{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid var(--line)}
.nw-foot .hbtn.primary{margin-left:auto;min-height:44px;padding:0 20px;font-size:15px;font-weight:800}
.nw-note{font-size:12px;color:var(--txt-dim)}
.nw-lab{font-size:12px;color:var(--txt-dim);font-weight:700;margin-top:4px}
.nw-lab b{color:var(--txt);font-size:14px;margin-left:6px}
.nw-lab.own b{color:var(--own)}
.nw-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nw-row .chip{min-height:38px;padding:0 16px;font-size:14px}
/* コーナーキックを作る: 配置の図と、たたんだ形の 1 行 */
.nw-ckfig{display:flex;justify-content:center}
.nw-ckfig .nw-ckpitch{max-width:300px;width:100%}
@media (max-width:560px){.nw-ckfig .nw-ckpitch{max-width:250px}}
.nw-cards{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;padding:16px;align-content:center}
.nw-body .nw-cards{padding:0;align-content:start}
.nw-cards.start{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:720px;margin:0 auto;min-height:0;overflow-y:auto}
.nw-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px;text-align:left;border:1px solid var(--line);border-radius:14px;background:var(--chip);color:var(--txt);transition:border-color .15s,transform .15s}
.nw-card.big{min-height:150px;justify-content:center}
.nw-card b{font-size:16px}
.nw-card small{font-size:12px;color:var(--txt-dim);line-height:1.6}
.nw-card:hover,.nw-tcard:hover:not(:disabled),.nw-fcard:hover{border-color:var(--gold)}
.nw-card:active{transform:scale(.98)}
.nw-ico{font-size:28px;line-height:1}
/* ホームの最初の画面: 入口は 2 つだけ。大きく、真ん中に */
.nw-cards.start.home .nw-card.big{min-height:200px;align-items:center;text-align:center;gap:10px}
.nw-cards.start.home .nw-ico{font-size:44px}
.nw-cards.start.home .nw-card b{font-size:22px}
.nw-cards.start.home .nw-card small{font-size:13px}
.nw-card.hub b{font-size:17px}
/* 2 枚目の下の、控えめな 1 行（一覧を見る など） */
.nw-subs{width:100%;max-width:720px;margin:0 auto;padding:0 16px 16px;box-sizing:border-box;display:flex;flex-direction:column;gap:8px}
.nw-sub{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--txt);font-size:14px;font-weight:700;text-align:left;cursor:pointer}
.nw-sub:hover{border-color:var(--gold)}
.nw-sub .nw-chev{margin-left:auto;color:var(--txt-dim);font-size:18px}
/* ホームの最初の画面: 入口の大きいカードの下に、小さめのカード 2 枚（👥 メンバー表・📓 練習ノート）。PC もスマホも横に 2 つ */
.nw-minis{width:100%;max-width:720px;margin:0 auto;padding:0 16px 16px;box-sizing:border-box;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.nw-mini{display:flex;align-items:center;gap:10px;min-height:64px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--chip);color:var(--txt);text-align:left;cursor:pointer;min-width:0}
.nw-mini:hover{border-color:var(--gold)}
.nw-mini:active{transform:scale(.98)}
.nw-mini .nw-ico{font-size:26px;flex:0 0 auto}
.nw-mtxt{display:flex;flex-direction:column;gap:2px;min-width:0}
.nw-mtxt b{font-size:15px}
.nw-mtxt small{font-size:11.5px;color:var(--txt-dim);line-height:1.4}
.nw-mini .nw-chev{margin-left:auto;color:var(--txt-dim);font-size:18px;flex:0 0 auto}
/* 種類を分けた一覧（戦術一覧／練習メニュー・指導案の一覧）: 見出しの「← もどる」と、自分のもの／テンプレートのタブ */
.pl-head{display:flex;align-items:center;gap:10px}
.pl-head .pl-back{min-height:34px;font-size:13px;font-weight:700}
.pl-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.pl-tabs .chip{min-height:38px;padding:0 14px;font-size:14px}
.pl-tabs .chip small{opacity:.75;font-weight:700;margin-left:2px}
.plist[data-tab="mine"]>details[data-fold^="lib/"],.plist[data-tab="mine"]>.lhint{display:none}
.plist[data-tab="lib"]>details:not([data-fold^="lib/"]){display:none}
/* 低い画面（スマホの横向き）: タブの分だけ一覧を低くして、下のボタンまで 1 画面に収める */
@media (max-height:520px){.pl-scoped .plist{max-height:max(110px,calc(100dvh - 270px))}}
.nw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.nw-fcard{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--chip);color:var(--txt);font-size:12px;font-weight:700}
.nw-fcard.on{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold) inset;color:var(--gold)}
.nw-fcard.none{justify-content:center}
.nw-none{font-size:26px;color:var(--txt-dim);line-height:62px}
.nw-form{width:100%;max-width:74px;height:auto;background:#1d4a2e;border-radius:4px}
.nw-lines{fill:none;stroke:rgba(255,255,255,.55)}
.nw-dot.own{fill:var(--own)}.nw-dot.own.gk{fill:var(--owngk)}
.nw-dot.opp{fill:var(--opp)}.nw-dot.opp.gk{fill:var(--oppgk)}
.nw-dot{stroke:rgba(0,0,0,.45);stroke-width:.5}
.nw-ball{fill:#fff;stroke:#000;stroke-width:.5}
.nw-tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.nw-tcard{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--chip);color:var(--txt);text-align:center}
.nw-tcard b{font-size:14px}
.nw-tcard small{font-size:11px;color:var(--txt-dim);line-height:1.5}
.nw-tcard.on{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold) inset}
.nw-tcard.on b{color:var(--gold)}
.nw-tcard.sp{justify-content:center;border-style:dashed}
.nw-pitch{width:100%;max-width:110px;height:auto;background:#1d4a2e;border-radius:6px}
.nw-lrow{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--line);border-radius:10px}
.nw-lrow .pbtns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
/* ホームの「続きから」（最近のプレー・練習メニュー）。カードの上に 1 列、はみ出したら横に流す */
.nw-start{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column}
.nw-start .nw-cards.start{flex:0 0 auto;overflow:visible;padding-top:10px}
.nw-recent{width:100%;max-width:720px;margin:0 auto;padding:14px 16px 0;box-sizing:border-box;display:flex;flex-direction:column;gap:6px}
.nw-recent .nw-lab{margin:0}
.nw-rlist{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.nw-rcard{flex:1 1 0;min-width:124px;max-width:220px;display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--line);border-radius:12px;background:var(--chip);color:var(--txt);text-align:left;cursor:pointer}
.nw-rcard:hover{border-color:var(--gold)}
.nw-rcard.cur{border-color:rgba(217,182,74,.55)}
.nw-rico{font-size:20px;line-height:1;flex:0 0 auto}
.nw-rtxt{display:flex;flex-direction:column;min-width:0;gap:2px}
.nw-rtxt b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nw-rtxt small{font-size:11px;color:var(--txt-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nw-rtxt small.u{color:var(--gold)}
/* 「続きから」は 1 つだけ: 横いっぱいの小さな 1 行（印・名前・種類 · いつ・保存していない変更・›） */
.nw-rcard.one{flex:1 1 auto;max-width:none;min-height:46px;padding:6px 12px}
.nw-rcard.one .nw-rtxt{flex:1 1 auto;flex-direction:row;align-items:baseline;flex-wrap:wrap;column-gap:10px;row-gap:0}
.nw-rcard.one .nw-rtxt b{font-size:14px;max-width:100%}
.nw-rcard.one .nw-chev{margin-left:auto;color:var(--txt-dim);font-size:18px;flex:0 0 auto}
@media (max-width:700px){
  .dlg.nw-dlg{margin:0;width:100vw;height:100dvh}
  .nw-dlg .dbox{width:100vw;height:100dvh;border-radius:0;border:none;padding:0 0 env(safe-area-inset-bottom)}
  .nw-cards.start{grid-template-columns:1fr}
  .nw-cards{grid-template-columns:1fr;padding:12px;gap:10px;align-content:start}
  .nw-card.big{min-height:0;flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:12px}
  .nw-card.big small{flex-basis:100%}
  .nw-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .nw-tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nw-title{font-size:15px}
  .nw-lrow{flex-direction:column;align-items:stretch}
  .nw-recent{padding:10px 12px 0}
  .nw-minis{padding:0 12px 12px;gap:8px}
  .nw-mini{flex-direction:column;align-items:flex-start;gap:4px;min-height:0;padding:10px 12px}
  .nw-mini .nw-ico{font-size:22px}
  .nw-mini .nw-chev{display:none}
  .nw-mtxt b{font-size:14px}
  .nw-mtxt small{font-size:11px}
  .nw-rcard{flex:0 0 auto;width:150px;min-width:0}
  .nw-rtxt .k{display:none}   /* 狭い画面では種類は印（🏃 など）だけ */
  .nw-rcard.one{width:auto;flex:1 1 auto}
  .nw-rcard.one .nw-rtxt .k{display:inline}   /* 1 つだけのときは種類の名前も出す（場所がある） */
  .nw-start .nw-cards.start{padding-top:8px}
  .nw-cards.start.home .nw-card.big{min-height:132px;flex-direction:column;flex-wrap:nowrap;row-gap:6px}
  .nw-cards.start.home .nw-card.big small{flex-basis:auto}
  .nw-cards.start.home .nw-ico{font-size:36px}
  .nw-cards.start.home .nw-card b{font-size:20px}
  .nw-cards.start:not(.home) .nw-card.big{justify-content:flex-start;align-content:center;min-height:84px}
  .nw-subs{padding:0 12px 12px}
}
/* ⚙ 設定（このプレーの設定） */
.dbox label[hidden]{display:none}
.dlg-ps .row .tag{flex:0 0 auto}
.dlg-ps .pscol{flex-wrap:wrap}
.dlg-ps .psopp .chip{min-height:34px;padding:0 14px}
#playSetBtn{white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis}
.dlg-ps .psarea .chip{min-height:34px;padding:0 14px}
/* タイムライン: 場面が 1 つのうちは「＋ 次の場面」だけ（timeline.js の single） */
#timeline [hidden]{display:none!important}
#timeline.single .tl-ctrl{display:none}
#timeline.single .step.add{width:auto;padding:0 16px;flex-direction:row;gap:6px;border-style:solid;border-color:var(--gold);color:var(--gold);font-weight:800;font-size:18px}
#timeline.single .step.add span{font-size:13px}
.tl-hint{align-self:center;font-size:12px;color:var(--txt-dim);margin-left:6px;line-height:1.5;flex:1 1 0;min-width:160px;white-space:normal}
body.present .tl-hint{display:none}
@media (max-width:700px){.tl-hint{font-size:11px}}
#presentBar [hidden]{display:none!important}
/* 使う区間: 再生バーの下に金色の帯（videodock.js の drawRange） */
#vdMini .vd-rangebox{position:absolute;left:8px;right:8px;bottom:0;height:4px;pointer-events:none}
#vdMini .vd-range{position:absolute;top:0;bottom:0;background:var(--gold);border-radius:2px;opacity:.85}
/* 道案内の帯の頭: 段の並びと「✕ やめる」 */
.pf-head{display:flex;align-items:center;gap:8px}
.pf-head .pf-steps{flex:1;min-width:0}
.pf-quit{flex:0 0 auto;min-height:32px;font-size:12px}
/* 選手をのせるまでは、下の場面のバーを出さない（道案内の段のボタンだけ） */
body.present.flow-early #timeline{display:none}
.pb-flow .pf-quit{pointer-events:auto}
/* 高さの低い画面（横向きのスマホ）: 道案内のカードを詰めて、はみ出したら中でスクロール */
@media (max-height:520px){
  .nw-dlg .dbox{height:calc(100dvh - 12px)}
  .nw-head{padding:6px 10px}
  .nw-foot{padding:6px 10px}
  .nw-cards{align-content:start;padding:10px;gap:8px}
  .nw-card.big{min-height:0;padding:10px 12px;flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:10px}
  .nw-card.big small{flex-basis:100%}
  .nw-ico{font-size:22px}
  .nw-recent{padding:8px 12px 0}
  .nw-rcard{padding:6px 10px}
}
/* 狭い画面: 段の帯は「いまの段」だけ名前を出し、ほかは番号だけ（「✕ やめる」と並べて 1 行に収める） */
@media (max-width:700px){
  .pf-step:not(.now){font-size:0;gap:0;padding-left:4px;padding-right:4px}
  .pf-step:not(.now) b{font-size:11px}
  .pf-sep{display:none}
}
/* チーム設定の色見本 */
.kitrow{display:flex;flex-direction:column;gap:4px}
.kitlab{font-size:12px;font-weight:700;color:var(--txt)}
.kitsw{display:flex;flex-wrap:wrap;gap:6px}
.sw{width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,.18);padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:15px;position:relative}
.sw.on{border-color:#fff;box-shadow:0 0 0 2px var(--gold)}
.sw.custom{background:var(--chip);overflow:hidden}
.sw.custom input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
@media (pointer:coarse){.sw{width:36px;height:36px}}
@media (max-width:700px){.pf-min .pf-min-l{display:none}.pf-min{min-width:40px}}
/* ダイアログが画面より高いとき（横向きのスマホのチーム設定など）は、中でスクロール */
.dbox{max-height:calc(100dvh - 24px);overflow-y:auto}
@media (max-height:520px){.sw{width:28px;height:28px}.kitsw{gap:4px}#kitBox{gap:6px}}

/* 横に流れる 1 行のバーの右端の「›」（js/scrollhint.js）。画面の外にもボタンがあると分かるように。押すと右へ送る */
.sc-more{position:sticky;right:0;flex:0 0 auto;align-self:stretch;min-width:40px;margin-left:-10px;padding:0 6px 0 22px;border:none;border-radius:0;
  background:linear-gradient(to right,rgba(16,26,22,0),var(--panel) 55%);color:var(--gold);font-size:24px;font-weight:800;line-height:1;cursor:pointer;z-index:2;pointer-events:auto}
.sc-more[hidden]{display:none}
.pb-top>.sc-more{background:linear-gradient(to right,rgba(10,18,15,0),rgba(10,18,15,.94) 50%);border-radius:0 10px 10px 0}
.sc-left{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 22px);mask-image:linear-gradient(to right,transparent 0,#000 22px)}
/* スマホの 3D: 「📤 共有 ▾」をバーの前のほうへ（スマホで作ってそのまま LINE に送る人が探さなくてよいように） */
@media (max-width:700px){
  body.present #pbExit,body.present #pbSave{order:-2}
  body.present #pbShareMenu{order:-1}
}

/* ===== 練習メニュー（drill.js / drill2d.js / drillui.js / drillcard.js） ===== */
/* 盤: ピッチは薄く、エリアと置いたものが主役。盤の下にパレット（#stage を縦に並べ、盤だけが縮む） */
#stage.drill{display:flex;flex-direction:column}
#stage.drill #stage2d{flex:1 1 auto;min-height:0;height:auto}
#stage2d.drill #pitchLayer{opacity:.42}
#stage2d[data-tool^="d:"]{cursor:crosshair}
.player.free .body{fill:#b6e34a}
.ghost.free circle{stroke:#b6e34a}
.dAreaBody{fill:rgba(255,255,255,.07);stroke:#fff;stroke-width:.2;cursor:move}
.dArea.on .dAreaBody{stroke:#9fe3b8;fill:rgba(159,227,184,.12)}
.dZone{stroke:rgba(255,255,255,.85);stroke-width:.16;stroke-dasharray:.9 .6;pointer-events:none}
.dSize{fill:#fff;font-weight:800;text-anchor:middle;paint-order:stroke;stroke:rgba(8,14,12,.85);stroke-width:.3px;pointer-events:none}
.dSize.live{fill:#ffe082}
.dItem{cursor:grab}
.dhit{fill:transparent;stroke:none;pointer-events:fill}
.dhitL{stroke:transparent;stroke-width:2.2;pointer-events:stroke}
.dShadow{fill:rgba(0,0,0,.35);pointer-events:none}
.dCone{stroke:rgba(0,0,0,.6);stroke-width:.08;pointer-events:none}
.dConeTip{fill:rgba(255,255,255,.7);pointer-events:none}
.dMarker{fill:none;pointer-events:none}
.dNet{fill:rgba(255,255,255,.22);pointer-events:none}
.dGoal{fill:none;stroke:#fff;stroke-width:.2;stroke-linejoin:round;pointer-events:none}
.dMouth{stroke:rgba(255,255,255,.45);stroke-width:.1;stroke-dasharray:.25 .2;pointer-events:none}
.dBall{fill:#fff;stroke:#111;stroke-width:.08;pointer-events:none}
.dBadge{fill:rgba(8,14,12,.85);pointer-events:none}
#stage2d text.dBadgeT{fill:#fff;font-weight:800;pointer-events:none;text-anchor:start}
.dLabelBg{fill:rgba(8,14,12,.82);stroke:rgba(255,255,255,.55);stroke-width:.08;pointer-events:none}
.dLabelT{fill:#fff;font-weight:800;pointer-events:none}
.dLine{stroke:#fff;stroke-width:.18;stroke-dasharray:.9 .6;stroke-linecap:round;pointer-events:none}
.dLine.prev{stroke:#ffe082}
.dItem.on .dCone,.dItem.on .dGoal{filter:drop-shadow(0 0 .35px #9fe3b8)}
.dSelRing{fill:none;stroke:#9fe3b8;stroke-width:.2;stroke-dasharray:.6 .4;pointer-events:none;animation:pMarch 1.4s linear infinite}
.dSelLine{stroke:#9fe3b8;stroke-width:.5;opacity:.5;pointer-events:none}
.dHandle{cursor:nwse-resize}
.dHandleDot{fill:#9fe3b8;stroke:#0b1210;stroke-width:.12}
.dAreaPrev{fill:rgba(255,224,130,.12);stroke:#ffe082;stroke-width:.2;stroke-dasharray:.8 .5;pointer-events:none}
.dGuide{stroke:rgba(255,224,130,.7);stroke-width:.12;stroke-dasharray:.5 .4;pointer-events:none}
.dPrevDot{stroke:rgba(0,0,0,.6);stroke-width:.08;opacity:.9;pointer-events:none}
.dPrevDot.ghost{fill:rgba(255,224,130,.35);stroke:#ffe082;stroke-width:.12}
/* コーチ（C の丸。どのチームの色とも違う濃い灰色） */
.dCoach{fill:#2f353b;stroke:#fff;pointer-events:none}
.dCoachT{fill:#fff;font-weight:800;pointer-events:none}
.dItem.on .dCoach{filter:drop-shadow(0 0 .35px #9fe3b8)}
/* 引いている間の道案内: 区切り線の 1/2・1/3・1/4 の印、真ん中の線、等間隔（ドラッグ中だけ出る） */
.dGuideMark{stroke:rgba(255,224,130,.75);stroke-width:.14;stroke-linecap:round;pointer-events:none}
.dGuideMark.on{stroke:#ffe082;stroke-width:.3}
.dGuideT{fill:rgba(255,224,130,.8);font-weight:700;paint-order:stroke;stroke:rgba(8,14,12,.85);stroke-width:.25px;pointer-events:none}
.dGuideT.on{fill:#ffe082;font-weight:800}
.dGuide.on{stroke:#ffe082;stroke-width:.14}
.dGuideDot{fill:#ffe082;stroke:rgba(8,14,12,.8);stroke-width:.05;pointer-events:none}
.dLine.prev.snap{stroke-width:.26;stroke-dasharray:none}
.dAreaPrev.sq{stroke-dasharray:none;stroke-width:.26}
@media (prefers-reduced-motion:reduce){.dSelRing{animation:none}}

/* パレット（盤の下）: 置くものは大きなボタン 1 列。選んだ道具の上に、色・ビブス・まとめて などの 1 行 */
#dpal{order:2;flex:0 0 auto;display:flex;flex-direction:column;gap:6px;padding:6px 8px 8px;background:var(--panel);border-top:1px solid var(--line);z-index:3;min-width:0}
#dpal[hidden]{display:none}
.dpal-row{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-width:0;justify-content:safe center}
.dpal-row::-webkit-scrollbar{display:none}
.dp-btn{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:64px;height:58px;padding:4px 6px;
  border:1px solid var(--line);background:var(--chip);color:var(--txt);border-radius:12px;font-size:11px;font-weight:700}
.dp-btn svg{width:26px;height:26px}
.dp-btn.on{background:var(--gold);border-color:var(--gold);color:#12200f}
.dpal-opt{display:flex;align-items:center;gap:6px;justify-content:center;flex-wrap:wrap;min-height:36px}
.dpal-opt[hidden]{display:none}
.dp-chip{min-width:40px;min-height:36px;border-radius:10px;border:1px solid var(--line);background:var(--chip);color:var(--txt);font-weight:800;font-size:13px;padding:0 10px}
.dp-chip.sw{min-width:36px;width:36px;height:36px;border-radius:50%;border:2px solid rgba(255,255,255,.25);padding:0}
.dp-chip.sw.on{border-color:#fff;box-shadow:0 0 0 2px var(--gold)}
.dp-chip.on{outline:2px solid #fff;outline-offset:1px}
.dp-chip.many{border-color:var(--gold);color:var(--gold)}
.dp-hint{font-size:12px;color:var(--txt-dim)}
.dp-count{font-size:13px;font-weight:700;white-space:nowrap}
.dp-btn.dp-lock{margin-left:10px;border-style:dashed}
.dp-btn.dp-lock.on{background:rgba(232,184,74,.16);border:1px solid var(--gold);color:var(--gold)}
#stage2d.dlocked .dItem,#stage2d.dlocked .dArea{cursor:default}
.dp-count b{color:var(--gold);font-size:15px}
.dp-sep{width:1px;height:24px;background:var(--line);margin:0 2px}
.bib-A{background:var(--own)!important;color:#12200f!important;border-color:var(--own)!important}
.bib-B{background:var(--opp)!important;color:#1d1d1d!important;border-color:var(--opp)!important}
.bib-F{background:#b6e34a!important;color:#14240b!important;border-color:#b6e34a!important}
.bib-GK{background:var(--owngk)!important;color:#0b1a22!important;border-color:var(--owngk)!important}
.tool.bib{min-width:0;font-weight:800}
.tool.bib.on{outline:2px solid #fff;outline-offset:1px}
.tool.sub.danger{color:var(--danger)}
.tool.drillcard{border-color:var(--gold);color:var(--gold)}
.tool.drillcard[hidden]{display:none}
/* 置いたもののメニュー（タップ・長押しで出る） */
.dmenu{position:absolute;z-index:6;display:flex;flex-direction:column;gap:6px;padding:8px;min-width:180px;max-width:calc(100% - 12px);
  background:rgba(12,22,17,.97);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 26px rgba(0,0,0,.55);animation:fqIn .16s cubic-bezier(.2,.8,.2,1)}
.dm-title{font-size:12px;font-weight:800;color:var(--gold)}
.dm-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dm-lab{font-size:11px;color:var(--txt-dim)}
.dm-b{min-height:40px;min-width:40px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--chip);color:var(--txt);font-weight:800;font-size:13px}
.dm-b.on{background:var(--gold);border-color:var(--gold);color:#12200f}
.dm-b.danger{color:var(--danger);border-color:rgba(255,128,128,.4)}
.dm-sw{width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,.25);padding:0}
.dm-sw.on{border-color:#fff;box-shadow:0 0 0 2px var(--gold)}
.dm-n{min-width:38px;text-align:center;font-size:15px}
.dsize{align-items:flex-end!important;gap:10px!important}
.dsize label{flex:1}
.dlab{min-width:64px;font-weight:700}
/* 型の見本（新規作成の道案内・練習カード） */
.dprev{width:100%;max-width:140px;height:auto;aspect-ratio:1;background:#1d4a2e;border-radius:8px}
.dprev.big{max-width:none;aspect-ratio:auto;width:100%;max-height:34vh;display:block;margin:0 auto}
.dpv{stroke:rgba(0,0,0,.5);stroke-width:.3}
.dpv.A{fill:var(--own)}.dpv.B{fill:var(--opp)}.dpv.F{fill:#b6e34a}.dpv.GK{fill:var(--owngk)}.dpv.C{fill:#2f353b;stroke:#fff}
.nw-tcard.dt{justify-content:flex-start}
.nw-tcard small.src{font-size:10px;opacity:.8;line-height:1.3}
.nw-tcard.blank{justify-content:center;border-style:dashed}
.nw-card.drill{border-color:rgba(182,227,74,.45)}
/* 練習カード */
.dcard-dlg .dbox{padding:0;max-width:560px;width:min(560px,94vw)}
.dcard{display:flex;flex-direction:column;min-height:0;max-height:calc(100dvh - 24px)}
.dc-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line)}
.dc-body{display:flex;flex-direction:column;gap:8px;padding:12px 14px;overflow-y:auto;min-height:0}
.dc-body textarea,.dc-body input[type=text],.dc-body input[type=number]{background:var(--chip);border:1px solid var(--line);border-radius:8px;padding:9px 10px;font-size:15px;color:var(--txt);font-family:inherit;width:100%;resize:vertical}
.dc-lab{font-size:11px;color:var(--txt-dim);margin-top:2px}
.dc-src{font-size:11px;color:var(--txt-dim);text-align:right;margin-top:-2px}
.dc-time{display:flex;align-items:center;gap:6px;font-size:13px}
.dc-time input{width:64px!important;text-align:center}
.dc-auto{font-size:13px;color:#cfe8d6;background:rgba(159,227,184,.08);border:1px dashed rgba(159,227,184,.35);border-radius:8px;padding:8px 10px;line-height:1.6}
.dc-foot{display:flex;gap:8px;justify-content:flex-end;padding:10px 14px;border-top:1px solid var(--line)}
.dc-foot .hbtn{min-height:44px}
.dc-foot .hbtn[hidden]{display:none}
@media (max-width:700px){
  .dp-btn{min-width:58px;height:54px;font-size:10px}
  .dp-btn svg{width:24px;height:24px}
  .dp-hint{font-size:11px}
  .dp-hint.short{display:none}
  /* <dialog> の既定の max-height（100% − 2em）を外して、画面いっぱいに（新規の道案内も下が切れていた） */
  .dlg.nw-dlg{max-height:100dvh}
  .dlg.dcard-dlg{margin:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh}
  .dcard-dlg .dbox{width:100%;max-width:100%;height:100%;max-height:100%;border-radius:0;border:none}
  .dcard{max-height:100%;height:100%}
  .dc-foot{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
}
/* ---------- 作成済み練習メニュー一覧（js/drillgrid.js）: 図つきのカード・上のタブ・ジャンルのチップ ---------- */
/* ホームの 2 枚目（練習メニュー）: 同じ大きさのカード 3 枚。PC は横に 3 つ、スマホは縦に（上の .nw-cards.start の 1 列のまま） */
@media (min-width:701px){
  .nw-cards.start.three{grid-template-columns:repeat(3,minmax(0,1fr));max-width:860px}
}
.nw-card.list{border-color:rgba(217,182,74,.5)}
.dlg.dg-dlg{max-width:none;max-height:none;margin:auto;overflow:hidden}
.dg-dlg .dbox{width:min(1040px,calc(100vw - 24px));max-width:none;min-width:0;height:min(820px,calc(100dvh - 24px));padding:0;overflow:hidden}
.dg{display:flex;flex-direction:column;height:100%;min-height:0}
.dg-tabs{display:flex;padding:10px 14px 0;align-items:stretch;flex:none}
.dg-tab{flex:1 1 0;min-width:0;min-height:42px;border:1px solid var(--line);background:var(--chip);color:var(--txt);font-size:14px;font-weight:800;margin-left:-1px;white-space:nowrap;cursor:pointer}
.dg-tab:first-child{border-radius:10px 0 0 10px;margin-left:0}
.dg-tab:nth-child(3){border-radius:0 10px 10px 0}
.dg-tab.trash{flex:0 0 auto;margin-left:8px;border-radius:10px;padding:0 12px;font-weight:700;color:var(--txt-dim)}
.dg-tab.on{background:var(--gold);border-color:var(--gold);color:#12200f}
.dg-tab small{opacity:.75;font-weight:700;margin-left:2px}
.dg-q{margin:10px 14px 0;width:calc(100% - 28px);flex:none}
.dg-genres{display:flex;gap:6px;padding:10px 14px 0;flex-wrap:wrap;flex:none}
.dg-genres[hidden],.dg-q[hidden]{display:none}
.dg-gc{min-height:34px;padding:0 12px;font-size:13px;white-space:nowrap;flex:0 0 auto}
.dg-gc small{opacity:.7;font-weight:700}
.dg-gc.zero:not(.on){opacity:.5}
.dg-body{flex:1;min-height:0;overflow-y:auto;padding:12px 14px 14px}
.dg-body .empty{line-height:2}
.dg-body .empty small{font-size:12px}
.dg-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.dg-card{position:relative;display:flex;min-width:0}
.dg-card>.dg-open{flex:1}
.dg-card.cur>.dg-open{border-color:var(--gold)}
.dg-open{cursor:pointer;min-width:0}
.dg-open[hidden]{display:none}
.dg-open b{max-width:100%;overflow-wrap:anywhere;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dg-thumb{display:block;width:100%;max-width:150px;aspect-ratio:1;background:#1d4a2e;border-radius:8px;overflow:hidden;flex:none}
.dg-thumb .dg-svg{display:block;width:100%;max-width:none;height:100%;aspect-ratio:auto;border-radius:0;background:none}
.dg-thumb.p4{background:transparent}
/* プランで開けないテンプレート（plan.js の markLibrary）: 図を少し暗くして右上に 🔒。押すと上のプランの案内 */
.dg-open.locked,.nw-tcard.locked{position:relative}
.dg-open.locked .dg-thumb,.nw-tcard.locked .dprev{opacity:.45;filter:saturate(.6)}
.dg-lock{position:absolute;top:6px;right:6px;z-index:1;font-size:15px;line-height:1;padding:4px 5px;border-radius:8px;background:rgba(8,14,12,.72);pointer-events:none}
.nw-lrow.locked .pname{opacity:.6}
.dg-p4{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px;width:100%;height:100%}
.dg-p4c{position:relative;display:block;background:#1d4a2e;border-radius:5px;overflow:hidden;min-width:0;min-height:0}
.dg-p4c.empty{background:rgba(255,255,255,.05);border:1px dashed var(--line)}
.dg-p4c.none{background:transparent}
.dg-p4c i{position:absolute;left:2px;top:2px;font-style:normal;font-size:9px;font-weight:800;line-height:1;padding:2px 3px;border-radius:3px;background:rgba(8,14,12,.7);color:#fff}
.dg-p4c.empty i{position:static;display:flex;align-items:center;justify-content:center;height:100%;padding:0;background:none;color:var(--txt-dim)}
.dg-p4more{position:absolute;right:2px;bottom:2px;font-size:10px;font-weight:800;line-height:1;background:rgba(8,14,12,.85);color:var(--gold);border-radius:4px;padding:2px 4px}
.dg-badges{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:2px;max-width:100%}
.dg-badge{font-size:10px;font-weight:700;line-height:1;padding:3px 6px;border-radius:999px;border:1px solid var(--line);color:var(--txt-dim);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.dg-badge.genre{color:var(--gold);border-color:rgba(217,182,74,.5)}
.dg-badge.motion{color:#cfe8d6;border-color:rgba(159,227,184,.35)}
/* ⋯ はカードの右下（図の角の選手にかぶらないように）。下に 1 つ分の余白をとって、名前にもかぶらない */
.dg-card>.dg-open{padding-bottom:40px}
.dg-more{position:absolute;bottom:5px;right:5px;width:34px;height:34px;padding:0;border-radius:50%;border:1px solid var(--line);background:rgba(10,18,15,.88);color:var(--txt);font-size:18px;font-weight:800;line-height:1;cursor:pointer}
.dg-more:hover{border-color:var(--gold)}
.dg-foot{display:flex;gap:8px;align-items:center;padding:10px 14px;border-top:1px solid var(--line);flex:none}
.dg-foot .hbtn{min-height:40px}
.dg-trash{max-height:none;overflow:visible}
.dg-gpick{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.dg-mg{display:flex;flex-direction:column;gap:2px;padding:4px 0}
.dg-menu-dlg .dbox h3{font-size:15px;letter-spacing:0;overflow-wrap:anywhere}
/* 練習カードの「ジャンル」 */
.dc-genre{display:flex;flex-wrap:wrap;gap:6px}
@media (max-width:700px){
  .dlg.dg-dlg{margin:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh}
  .dg-dlg .dbox{width:100vw;height:100dvh;border-radius:0;border:none;padding:0 0 env(safe-area-inset-bottom)}
  .dg-tabs{padding:8px 10px 0}
  .dg-tab{font-size:13px;padding:0 4px}
  .dg-tab.trash{margin-left:6px;padding:0 10px}
  .dg-q{margin:8px 10px 0;width:calc(100% - 20px)}
  /* ジャンルは横に流す（右端に「›」。js/scrollhint.js） */
  .dg-genres{flex-wrap:nowrap;overflow-x:auto;padding:8px 10px 0;scrollbar-width:none}
  .dg-genres::-webkit-scrollbar{display:none}
  .dg-gc{min-height:38px}
  .dg-body{padding:10px}
  .dg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .dg-more{width:38px;height:38px}
  .dg-card>.dg-open{padding-bottom:44px}
  .dg-foot{padding:8px 10px}
  .dg-foot .hbtn{flex:1 1 30%;white-space:nowrap;padding:0 6px}
  /* 練習カードのジャンルも横に流れる 1 行（ねらい・ルールの欄を下へ押しやらない） */
  .dc-genre{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;flex:none}
  .dc-genre::-webkit-scrollbar{display:none}
}
/* 高さの低い画面（横向きのスマホ）: タブ・検索・チップも一緒にスクロールさせて、カードの見える所を広く。下のボタンは貼り付ける */
@media (max-height:520px){
  .dg-dlg .dbox{height:calc(100dvh - 12px)}
  .dg{overflow-y:auto}
  .dg .nw-head{padding:6px 10px;flex:none}
  .dg-tabs,.dg-genres{padding-top:6px}
  .dg-tab{min-height:36px}
  .dg-q{margin-top:6px}
  .dg-genres{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .dg-genres::-webkit-scrollbar{display:none}
  .dg-body{flex:none;overflow:visible}
  .dg-foot{position:sticky;bottom:0;margin-top:auto;padding:6px 10px;background:#101b14}
  .dg-foot .hbtn{min-height:36px}
}
/* 印刷（練習カードの画像だけを A4 縦に） */
#drillPrint{display:none}
@media print{
  html,body{height:auto;overflow:visible;background:#fff}
  body.printing-card #app,body.printing-card dialog,body.printing-card #toast,body.printing-card .vmenu{display:none!important}
  body.printing-card #drillPrint{display:block}
  body.printing-card #drillPrint img{width:100%;height:auto;display:block}
  @page{size:A4 portrait;margin:8mm}
}

/* ===== いまの画面（戦術ボード／練習メニュー）の印: ロゴの横に小さく。押すとホーム（ui.js の #modeLab） ===== */
.modelab{display:inline-flex;align-items:stretch;flex:0 0 auto;margin:0 0 0 -4px;border-radius:999px;overflow:hidden;border:1px solid rgba(217,182,74,.55)}
.modelab .ml-seg{display:inline-flex;align-items:center;gap:0;padding:3px 10px;border:0;background:transparent;color:var(--txt-dim);cursor:pointer;
  font:inherit;font-size:11px;font-weight:800;line-height:1.15;white-space:nowrap;letter-spacing:.02em}
.modelab .ml-seg+.ml-seg{border-left:1px solid rgba(217,182,74,.35)}
.modelab .ml-seg:hover{color:var(--txt)}
.modelab .ml-seg.on{background:var(--gold);color:#12200f}
.modelab[data-mode="training"]{border-color:rgba(159,227,184,.5)}
.modelab[data-mode="training"] .ml-seg+.ml-seg{border-left-color:rgba(159,227,184,.35)}
.modelab[data-mode="training"] .ml-seg.on{background:#9fe3b8;color:#10261a}
/* スマホの ☰ のパネルの見出し（アカウント／チーム／ヘルプ） */
.hhead{font-size:11px;font-weight:800;color:var(--txt-dim);letter-spacing:.06em;margin:4px 2px -2px}
#header .hbtn[hidden]{display:none}
/* 戦術一覧（tacticgrid.js）: 作成済み練習メニュー一覧（drillgrid.js）と同じ部品。タブは 2 つ（自分の戦術／テンプレート）＋ 🗑 */
.tg-tabs .dg-tab:nth-child(2){border-radius:0 10px 10px 0}
.tg-card .dg-thumb{background:#2c7a41}
.tg-tags .dg-gc{max-width:none}   /* タグの名前は切らずに全部出す（PC は折り返し、スマホは横に流れる 1 行） */
.dlg-tags .tsug{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
@media (max-width:700px){
  /* スマホはヘッダが 1 行なので短く（「戦術」「練習」）。プレー名の欄を狭めない */
  .modelab{margin:0 0 0 -2px;min-height:40px;border-radius:8px}
  .modelab .ml-seg{padding:0 3px;font-size:10px;min-width:34px;justify-content:center}
  .modelab .ml-b{display:none}
}
@media (max-height:520px) and (min-width:701px){
  .modelab .ml-seg{padding:2px 6px;font-size:10px}
}

/* プランの体験（planpreview.js。プレビューチャンネル・localhost・?e2e=1 だけ）: 右下の小さな切り替え。盤の下の道具の上に置く（bottom は JS） */
#planPreview{position:fixed;right:8px;bottom:8px;z-index:70;max-width:calc(100vw - 16px);font-size:12px;color:var(--txt)}
#planPreview .pp-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:999px;border:1px dashed #e0b84a;background:rgba(10,18,15,.9);color:#f0d98a;font-size:12px;font-weight:700;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.4);white-space:nowrap}
#planPreview .pp-chip b{color:#fff}
#planPreview.open{width:min(300px,calc(100vw - 16px));padding:10px;border-radius:14px;border:1px dashed #e0b84a;background:#101b14;box-shadow:0 8px 24px rgba(0,0,0,.55)}
#planPreview .pp-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;color:#f0d98a}
#planPreview .pp-x{border:0;background:none;color:var(--txt);font-size:16px;cursor:pointer;padding:2px 6px}
#planPreview .pp-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
#planPreview .pp-t{padding:8px 2px;border-radius:8px;border:1px solid var(--line);background:var(--chip);color:var(--txt);font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
#planPreview .pp-t.on{background:var(--gold);border-color:var(--gold);color:#12200f}
#planPreview .pp-t[data-pp="trial"]{grid-column:1/-1}   /* お試し（スタンダードの機能＋お試し中の決まり）は 2 行目に横いっぱい */
#planPreview .pp-off{margin-top:6px;width:100%;padding:6px;border-radius:8px;border:1px solid var(--line);background:none;color:var(--txt-dim);font-size:11px;cursor:pointer}
#planPreview .pp-off.on{color:var(--txt);border-color:var(--txt-dim)}
#planPreview .pp-note{margin-top:6px;color:var(--txt-dim);font-size:11px;text-align:center}
@media print{#planPreview{display:none}}

/* ===== パターンの切り替え（patternbar.js。2026-10-21）: パターンを 2 つ以上持つ戦術だけ。2D は盤の上、3D は上のバーの下 ===== */
#stage.haspat{display:flex;flex-direction:column}
#stage.haspat #stage2d{flex:1 1 auto;min-height:0;height:auto}
.patbar{display:flex;gap:6px;align-items:center;overflow-x:auto;scrollbar-width:none;padding:6px 8px;flex:0 0 auto;position:relative}
.patbar::-webkit-scrollbar{display:none}
.patbar[hidden]{display:none}
.pat2d{background:var(--panel);border-bottom:1px solid var(--line)}
.pat3d{padding:0 10px 6px;pointer-events:auto}
.patchip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--chip);color:var(--txt);
  border-radius:10px;padding:6px 12px;font-size:13px;font-weight:700;min-height:38px;white-space:nowrap}
.pat3d .patchip{background:rgba(10,18,15,.85);backdrop-filter:blur(6px)}
.patchip b{font-size:12px;color:var(--txt-dim);font-weight:800}
.patchip.on{background:var(--gold);border-color:var(--gold);color:#12200f}
.patchip.on b{color:#12200f}
.patchip.locked{opacity:.62}
.patchip i{font-style:normal;font-size:11px}
.patchip.patmore{min-width:40px;justify-content:center;font-size:16px;padding:6px 10px}
body.present.pbmin .pat3d{display:none!important}
.pat-dlg .patlist{list-style:none;display:grid;gap:8px;margin:10px 0;max-height:min(60vh,520px);overflow:auto}
.patrow{border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:grid;gap:6px}
.patrow.on{border-color:var(--gold);background:rgba(217,182,74,.1)}
.pat-top{display:flex;gap:8px;align-items:center;min-width:0}
.pat-key{font-weight:800;color:var(--gold);flex:0 0 auto}
.pat-nm{font-weight:700;min-width:0;overflow-wrap:anywhere}
.pat-meta{margin-left:auto;font-size:11px;color:var(--txt-dim);white-space:nowrap;flex:0 0 auto}
.pat-ren{flex:1 1 auto;min-width:0;background:var(--chip);border:1px solid var(--gold);border-radius:8px;padding:6px 8px;font-weight:700}
.pat-acts{display:flex;flex-wrap:wrap;gap:6px}
.pat-acts .hbtn{min-height:34px;padding:5px 10px}
.pat-acts .hbtn.arm{background:var(--danger);border-color:var(--danger);color:#1a0b0b}
.patnote{font-size:12px}
@media (pointer:coarse){.pat-ren{font-size:16px}}
/* テンプレートの写しの鍵の板（playlock.js。2026-10-21）: 盤・3D・タイムラインを隠す。ヘッダーは使える */
#playLock{grid-row:2/4;grid-column:1;z-index:30;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:#0a1410;overflow:auto}
#playLock[hidden]{display:none}
.pl-box{max-width:440px;text-align:center;display:grid;gap:10px}
.pl-icon{font-size:40px;line-height:1}
.pl-box h2{font-size:18px;color:var(--gold)}
.pl-box p{font-size:13px;color:var(--txt-dim);line-height:1.7}
.pl-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:6px}
.pl-btns .hbtn{min-height:44px}
/* ===== 練習メニュー: ルールの札と場面のポイントの字幕（drillrule.js。2D は #stage、3D は #stage3d） ===== */
#stage.drill.rule-on #stage2d{margin-left:236px;width:calc(100% - 236px)}
.drule{position:absolute;left:10px;top:10px;width:216px;box-sizing:border-box;overflow:auto;z-index:4;
  background:rgba(12,22,17,.94);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:12px 14px 14px;color:#e9efe9;font-size:13px;line-height:1.6}
.drule.float{width:min(300px,calc(100% - 20px));box-shadow:0 8px 24px rgba(0,0,0,.45)}
.drule .dr-head{display:flex;align-items:flex-start;gap:6px}
.drule h2{flex:1;margin:0;font-size:17px;font-weight:800;line-height:1.35;color:#fff;overflow-wrap:anywhere}
.drule .dr-x{flex:none;width:28px;height:28px;border:0;border-radius:6px;background:transparent;color:#9fb0a5;font-size:18px;line-height:1;cursor:pointer}
.drule .dr-x:hover{background:rgba(255,255,255,.08);color:#fff}
.drule .dr-meta{margin:6px 0 0;color:#aebdb3;font-size:12px}
.drule h3{margin:12px 0 2px;font-size:11px;font-weight:800;letter-spacing:.08em;color:#f0d98a}
.drule p{margin:0;overflow-wrap:anywhere}
.drule .dr-rules{white-space:pre-line}
.drule .dr-edit{margin-top:12px;width:100%;text-align:left;font:inherit;font-size:12px;color:#cdd8d0;background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.25);border-radius:8px;padding:8px 10px;cursor:pointer}
.drule-pill{position:absolute;left:10px;top:10px;z-index:4;max-width:calc(100% - 20px);display:flex;align-items:center;gap:8px;
  background:rgba(12,22,17,.9);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:5px 12px;color:#fff;font:inherit;font-size:13px;cursor:pointer}
.drule-pill b{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.drule-pill span{flex:none;color:#f0d98a;font-size:12px;font-weight:700}
.dcap{position:absolute;z-index:3;display:flex;justify-content:center;pointer-events:none;box-sizing:border-box;padding:0 12px}
.dcap[hidden],.drule-pill[hidden],.drule[hidden]{display:none}
.dcap span{max-width:min(720px,100%);background:rgba(8,14,12,.86);color:#fff;border-radius:10px;padding:8px 16px;font-size:17px;font-weight:800;line-height:1.45;text-align:center;overflow-wrap:anywhere}
.dcap b{color:#f0d98a;margin-right:.6em}
@media (max-width:700px){.dcap span{font-size:14px;padding:6px 12px}.drule{font-size:12.5px}}
#stage3d .drule,#stage3d .drule-pill{z-index:6;background:rgba(12,22,17,.82)}
#stage3d .dcap{z-index:6}
body.present.drill-cap .tl-note{display:none}
/* そろえやすくする点線（snap.js） */
.alignGuide{stroke:#9fd8ff;stroke-width:.22;stroke-dasharray:.7 .5;stroke-linecap:round;opacity:.85;pointer-events:none}

/* 👤（アプリ全体のメニュー）: 線の人の形。暗い背景でも見えるよう文字の色で（2026-10-22） */
#pcMore{color:var(--txt)}
#pcMore .acct-ico{width:20px;height:20px;vertical-align:-4px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* ===== 2026-10-22 点検の直し（ui-fixes） ===== */
/* 場面のコメントは複数行の欄（スマホでタップすると 2〜3 行に広がる。timeline.js）。ふだんは 1 行の高さ */
textarea.tl-notein{resize:none;display:block;overflow:hidden;font-family:inherit;line-height:1.4}
/* アカウントの行: 名前の下に「プラン・お支払い・書き出し」を小さく（☰ と 👤 のメニュー） */
.hbtn.has-sub,.vm-opt.has-sub{display:inline-flex;flex-direction:column;align-items:center;gap:1px;line-height:1.3;text-align:center}
.vm-opt.has-sub{display:flex;width:100%;align-items:flex-start;text-align:left}
.am-s{font-size:11px;font-weight:400;color:var(--txt-dim)}
.vm-opt.on .am-s,.hbtn.on .am-s{color:#2b3a1c}
/* 💾 の小さな雲（ui.js refreshCloudMark）: 保存済みのときだけ。緑=クラウドにも、うす=圏外で待っている */
.savestate[data-kind="saved"][data-cloud="cloud"] .ss-ico::after,.savestate[data-kind="saved"][data-cloud="wait"] .ss-ico::after{content:"☁";font-size:10px;vertical-align:super;margin-left:1px}
.savestate[data-kind="saved"][data-cloud="cloud"] .ss-ico::after{color:#5fd68a}
.savestate[data-kind="saved"][data-cloud="wait"] .ss-ico::after{color:#e8c36a;opacity:.7}
@media (max-width:700px){
  /* ↪（やり直し）は ☰ の中へ。プレー名の幅を広げる */
  #redoBtn{display:none}
  /* ☰ の中が画面より高いときは、中でスクロールして全部押せる */
  .hcollapse{max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;overscroll-behavior:contain}
}
/* 設定のボタン（「4-4-2 対 4-3-3 ▾」）は、ヘッダーが混んでも縮めて切らない（タブレット 1024。点検 C-04） */
#playSetBtn{flex-shrink:0}