/* 再生で見る/自分で打つ(js/sim/kajiPlayback.js)の見た目。kaji_simulator.html と kaji_challenge.html(スマホ向け)で共通 */
/* ---------- 再生で見る(kajiPlayback.js)。カードはアシスタントの緑ライン判定のカード(css/style.css、はちみつ配色)を写したもの ---------- */
.pb-wrap {
  --bg2: #fbf4dd; --border2: #ecdcae; --text2: #2c241c; --text-dim2: #6e5f4f;
  --card-bg: #fffaea; --chip-bg: #f6ebc9; --c-orange: #C2410C; --state-below: #C9A227; --lit: #B8860B;
  --track: #f2e6c2; --track-tech: #f7efd6; --fill: #8f836a; --fill-inside: #43A047; --zone-line: #2E7D32;
  --zone-bg: rgba(46,125,50,.22); --zone-bg-tech: rgba(46,125,50,.12); --band-normal: #4A8FD6; --band-true: #2EAD4B; --band-fake: #E8890B;
  --g-green: #2E7D32; --g-red: #C62828; --g-yellow: #9A6400;
  background: var(--bg2); color: var(--text2); border-radius: 10px; padding: 12px; position: relative; overflow: clip; /* hidden だと下に固定する技の欄(sticky)が効かない */
}
.pb-wrap button, .pb-wrap select { background: #fffdf3; color: var(--text2); border-color: var(--border2); }
.pb-wrap button.primary { background: #ff2f92; border-color: #ff2f92; color: #fff; }
.pb-wrap label { color: var(--text-dim2); }
.pb-top { display: flex; gap: 24px; align-items: baseline; flex-wrap: wrap; }
.pb-top b { font-size: 30px; font-variant-numeric: tabular-nums; margin: 0 2px; }
.pb-label { font-size: 12px; color: var(--text-dim2); margin-right: 4px; }
.pb-unit, .pb-max { color: var(--text-dim2); }
.pb-phase { margin-left: 8px; font-size: 13px; font-weight: 700; color: var(--lit); }
.pb-seed { margin-left: auto; font-size: 12px; color: var(--text-dim2); }
.pb-cost { margin-left: 8px; color: var(--g-red); font-weight: 700; }
.pb-banner { margin: 8px 0; min-height: 40px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 12px;
  background: #fffdf3; border: 1px solid var(--border2); border-radius: 8px; }
.pb-banner.show { animation: pbBanner .35s ease-out; }
.pb-tech { font-size: 22px; font-weight: 800; }
.pb-tech.ok { color: var(--g-green); } .pb-tech.ng { color: var(--g-red); }
.pb-arrow { color: var(--text-dim2); font-size: 18px; } .pb-tg { font-size: 18px; font-weight: 700; }
.pb-cr { margin-left: auto; font-size: 13px; color: var(--text-dim2); } .pb-muted { color: var(--text-dim2); font-size: 13px; }
.pb-litnote { color: var(--lit); font-weight: 700; }
@keyframes pbBanner { from { transform: translateY(-6px); opacity: .2; } to { transform: none; opacity: 1; } }
.pb-board { position: relative; }
.pb-cards { display: grid; gap: 6px; }
.pb-pop { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) scale(.6); font-size: 46px; font-weight: 900; opacity: 0;
  pointer-events: none; text-shadow: 0 2px 0 #fff, 0 0 18px rgba(255,255,255,.9); }
.pb-pop.show { animation: pbPop 1.1s ease-out forwards; }
.pb-pop.true { color: #1e9a3c; } .pb-pop.crit { color: #E8890B; }
@keyframes pbPop { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.5); } 15% { opacity: 1; transform: translate(-50%,-50%) scale(1.15); }
  70% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-60%) scale(1); } }
.pb-ctrl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.pb-inline { flex-direction: row !important; align-items: center; gap: 4px !important; font-size: 13px !important; }
.pb-log { margin-top: 8px; font-size: 12px; line-height: 1.7; color: var(--text-dim2); max-height: 320px; overflow-y: auto; border-top: 1px solid var(--border2); padding-top: 4px; }
.pb-logline.now { color: var(--text2); font-weight: 600; }
.pb-log .true { color: var(--g-green); font-weight: 700; } .pb-log .fake { color: #A84E00; } .pb-log .over { color: var(--g-red); font-weight: 700; }
.pb-log .lit { color: var(--lit); } .pb-log .back { color: #7B1FA2; }
.pb-wrap .green-line-card { background: var(--card-bg); border: 1px solid var(--border2); border-left: 4px solid var(--border2); padding: 4px 8px 6px; position: relative; transition: box-shadow .2s; }
.pb-wrap .green-line-card.below { border-left-color: var(--state-below); }
.pb-wrap .green-line-card.inside { border-left-color: var(--g-green); }
.pb-wrap .green-line-card.over { border-left-color: var(--g-red); }
.pb-wrap .green-line-card.lit { box-shadow: 0 0 0 2px rgba(240,190,40,.7), 0 0 14px rgba(255,200,40,.55); }
.pb-wrap .green-line-card.pb-target { outline: 2px solid #4A8FD6; outline-offset: 1px; animation: pbTarget .8s ease-in-out infinite alternate; }
@keyframes pbTarget { from { outline-color: rgba(74,143,214,.35); } to { outline-color: rgba(74,143,214,1); } }
.pb-wrap .green-line-card.pb-hit { animation: pbShake .35s; }
.pb-wrap .green-line-card.pb-hit::after { content: ""; position: absolute; inset: 0; pointer-events: none; animation: pbFlash .5s ease-out forwards; }
.pb-wrap .green-line-card.pb-true::after { background: radial-gradient(circle, rgba(80,220,110,.75), rgba(255,255,255,0) 70%); animation-duration: .9s; }
.pb-wrap .green-line-card.pb-crit::after { background: radial-gradient(circle, rgba(255,170,40,.7), rgba(255,255,255,0) 70%); animation-duration: .8s; }
.pb-wrap .green-line-card.pb-normal::after { background: rgba(255,255,255,.85); }
.pb-wrap .green-line-card.pb-over::after { background: rgba(230,60,60,.45); }
.pb-wrap .green-line-card.pb-litflash { animation: pbLit 1s ease-out; }
@keyframes pbShake { 0%,100% { transform: none; } 20% { transform: translateX(-5px) rotate(-.6deg); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } }
@keyframes pbFlash { from { opacity: 1; } to { opacity: 0; } }
@keyframes pbLit { 0% { box-shadow: 0 0 0 0 rgba(255,210,40,.9); } 40% { box-shadow: 0 0 0 6px rgba(255,210,40,.8), 0 0 30px rgba(255,210,40,.9); } 100% { box-shadow: 0 0 0 2px rgba(240,190,40,.7), 0 0 14px rgba(255,200,40,.55); } }
.pb-wrap .card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; }
.pb-wrap .letter { font-size: 15px; font-weight: 700; line-height: 18px; }
.pb-wrap .green-line-card.lit .letter { color: var(--lit); }
.pb-wrap .zone { font-size: 11px; color: var(--text-dim2); white-space: nowrap; }
.pb-wrap .chips { margin-left: auto; display: flex; gap: 4px; }
.pb-wrap .chip { font-size: 11px; background: var(--chip-bg); padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.pb-wrap .chip.hot { color: var(--c-orange); font-weight: 600; }
.pb-wrap .green-line-row { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; flex-wrap: wrap; }
.pb-wrap .pb-value { font-size: 22px; font-weight: 700; min-width: 48px; font-variant-numeric: tabular-nums; }
.pb-wrap .remain { font-size: 13px; font-weight: 600; white-space: nowrap; }
.pb-wrap .below .remain { color: var(--g-yellow); } .pb-wrap .inside .remain { color: var(--g-green); } .pb-wrap .over .remain { color: var(--g-red); }
.pb-wrap .crit-judge { font-size: 12px; font-weight: 700; padding: 0 6px; border-radius: 4px; }
.pb-wrap .crit-judge.true { background: #d9f0d8; color: #1e6b2c; } .pb-wrap .crit-judge.fake { background: #fbe2c4; color: #934400; }
.pb-wrap .pb-plus { font-size: 13px; color: #1565C0; font-weight: 700; }
.pb-wrap .gauge { margin-top: 4px; }
.pb-wrap .gauge .g-bar { margin-left: 98px; margin-right: 46px; position: relative; height: 14px; }
.pb-wrap .gauge .pb-act, .pb-wrap .gauge .pb-rec { margin-top: 3px; }
/* カードの高さは固定(段の数で変わらない) */
.pb-wrap .green-line-card { height: 226px; overflow: hidden; }
.pb-wrap .gauge .pb-adj { margin-top: 3px; }
.pb-wrap .g-band.target { background: #7B4FC4; opacity: .85; }
.pb-wrap .g-lane-label .n.target { color: #7B4FC4; font-weight: 600; }
.pb-wrap .g-lane-label .t { color: #7B4FC4; }
.pb-wrap .g-lane-label .num { color: #1565C0; font-weight: 600; }
.pb-wrap .g-now-line { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--text2); z-index: 2; }
.pb-wrap .pb-note { margin-left: 98px; font-size: 10px; line-height: 13px; height: 13px; color: #a31b1b; white-space: nowrap; overflow: hidden; }
.pb-wrap .g-track { position: absolute; inset: 0; background: var(--track); border-radius: 3px; overflow: hidden; }
.pb-wrap .g-tech .g-track { background: var(--track-tech); }
.pb-wrap .g-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--fill); transition: width 1s cubic-bezier(.22, .7, .3, 1); } /* ゆっくり伸びる(kajiPlayback.js の BAR_MS と同じ1秒) */
.pb-wrap .g-fill.inside { background: var(--fill-inside); } .pb-wrap .g-fill.over { background: var(--g-red); }
/* 緑ゾーン: 上限・下限に細い線(1px)、間は薄い緑の透過(下のバーが透ける。ユーザー「太くて範囲がよくわからない」2026-11-04) */
.pb-wrap .g-zone { position: absolute; top: -3px; bottom: -3px; margin-left: -.5px; background: rgba(76, 175, 80, .16);
  border-left: 1px solid #2E7D32; border-right: 1px solid #2E7D32; box-sizing: content-box; z-index: 1; pointer-events: none; }
.pb-wrap .g-tech .g-zone { background: rgba(76, 175, 80, .10); }
.pb-wrap .g-band { position: absolute; border-radius: 2px; }
.pb-wrap .g-band.normal { background: var(--band-normal); } .pb-wrap .g-band.normal.over { background: var(--g-red); }
.pb-wrap .g-band.crit.true_crit { background: var(--band-true); } .pb-wrap .g-band.crit.fake_crit { background: var(--band-fake); }
.pb-wrap .g-pin { position: absolute; left: 3px; top: 0; font-size: 10px; line-height: 14px; color: var(--text-dim2); }
.pb-wrap .g-lane-label { position: absolute; left: -98px; width: 94px; text-align: right; font-size: 10px; color: var(--text-dim2); white-space: nowrap; overflow: hidden; }
.pb-wrap .g-lane-label.act { color: #1565C0; } .pb-wrap .g-lane-label.dim { color: rgba(110,95,79,.5); }
.pb-wrap .g-lane-label .n.ok { color: var(--g-green); font-weight: 600; } .pb-wrap .g-lane-label .true_crit { color: var(--g-green); font-weight: 600; } .pb-wrap .g-lane-label .fake_crit { color: #A84E00; font-weight: 600; }
.pb-wrap .g-lane-label.mine { background: rgba(74,143,214,.18); border-radius: 3px; color: var(--text2); }
.pb-wrap .g-lane-prob { position: absolute; left: calc(100% + 4px); width: 44px; font-size: 10px; font-weight: 600; color: #1565C0; white-space: nowrap; }
.pb-wrap .g-best-lane { position: absolute; left: 0; right: 0; background: rgba(46,125,50,.10); }
.pb-wrap .pb-mine { margin-left: auto; background: #fff3d6; border-color: #e0b44a; font-weight: 600; }
.pb-ch { margin-top: 10px; padding: 10px; background: #fffdf3; border: 2px solid #e0b44a; border-radius: 8px; }
.pb-ch-techs { display: flex; flex-wrap: wrap; gap: 6px; }
.pb-ch-techs button { min-width: 74px; padding: 5px 8px; font-weight: 600; display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.pb-ch-techs button small { font-weight: 400; font-size: 10px; color: var(--text-dim2); }
.pb-ch-techs button.on { background: #4A8FD6; border-color: #4A8FD6; color: #fff; }
.pb-ch-techs button.on small { color: #e8f0ff; }
.pb-ch-techs .pb-stop { background: #fde7e7; border-color: #e6a3a3; }
.pb-ch-groups { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.pb-ch-groups button { background: #e8f0fb; border-color: #4A8FD6; font-weight: 600; }
.pb-ch-foot { margin-top: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pb-ch-result { font-size: 18px; font-weight: 800; }
.pb-ch-result.ok { color: var(--g-green); } .pb-ch-result.ng { color: var(--g-red); }
.pb-cards.pb-picking .green-line-card { cursor: pointer; }
.pb-cards.pb-picking .green-line-card.below:hover { outline: 3px solid #4A8FD6; }
.pb-log .pb-mine-mark { margin-right: 2px; } .pb-log .pb-would { color: #7B4FC4; }
.pb-wrap .pb-ideal { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px dashed #7B4FC4; z-index: 2; }

/* ---------- スマホ(幅640px以下)。2列のマスを画面幅に収め、技のボタンは親指で押せる大きさで画面の下に固定 ---------- */
@media (max-width: 640px) {
  .pb-wrap { padding: 8px 6px; border-radius: 0; }
  .pb-top { gap: 4px 12px; }
  .pb-top b { font-size: 22px; }
  .pb-seed { width: 100%; margin-left: 0; }
  .pb-banner { min-height: 34px; padding: 4px 8px; margin: 6px 0; }
  .pb-tech { font-size: 17px; }
  .pb-tg, .pb-arrow { font-size: 14px; }
  .pb-pop { font-size: 34px; }
  .pb-cards { gap: 4px; }
  .pb-wrap .green-line-card { padding: 3px 5px 4px; }
  .pb-wrap .letter { font-size: 14px; }
  .pb-wrap .zone { font-size: 9px; }
  .pb-wrap .chip { font-size: 9px; padding: 0 3px; }
  .pb-wrap .pb-value { font-size: 18px; min-width: 34px; }
  .pb-wrap .remain { font-size: 11px; }
  .pb-wrap .crit-judge { font-size: 10px; padding: 0 3px; }
  .pb-wrap .gauge .g-bar { margin-left: 72px; margin-right: 4px; }
  .pb-wrap .g-lane-label { left: -72px; width: 70px; font-size: 8.5px; letter-spacing: -0.02em; }
  .pb-wrap .g-lane-prob { display: none; }
  .pb-wrap .pb-note { margin-left: 4px; font-size: 9px; }
  .pb-wrap .chips { display: none; }
  .pb-wrap .green-line-card { height: 186px; }
  .pb-ctrl { gap: 4px; }
  .pb-ctrl button { padding: 6px 10px; }
  .pb-wrap .pb-mine { margin-left: 0; width: 100%; padding: 10px; font-size: 15px; }
  .pb-ch { position: sticky; bottom: 0; z-index: 5; margin: 8px -6px 0; border-radius: 10px 10px 0 0; border-width: 2px 0 0;
    box-shadow: 0 -4px 14px rgba(80, 60, 10, .18); padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .pb-ch-techs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .pb-ch-techs button { min-width: 0; padding: 6px 2px; font-size: 11.5px; letter-spacing: -0.03em; }
  .pb-ch-foot { margin-top: 4px; gap: 6px; font-size: 10px; flex-wrap: nowrap; }
  .pb-ch-foot .pb-muted { font-size: 10px; flex: 1; }
  .pb-ch-foot button { padding: 4px 10px; font-size: 12px; flex-shrink: 0; }
  .pb-ch-groups button { padding: 8px 10px; }
  .pb-ch-result { font-size: 16px; }
  .pb-log { max-height: 220px; }
}

/* 自分で打っている間は再生の操作ボタンを隠す(使えないため) */
.pb-wrap.pb-mode-mine .pb-ctrl { display: none; }

/* ゲーム(kaji_challenge.html): 理想値の切り替えは出さない。アシストなしは今の値のバーだけなのでカードを低く */
.pb-game .pb-ctrl label:has(#pbIdeal) { display: none; }
.pb-wrap.pb-assist-none .green-line-card { height: 96px !important; }
/* ゲームでは技の欄の下の「○手目から自分で打っています・やめる」は出さない(画面上の「やめる」と重なるため。結果は結果画面で出す) */
.pb-game .pb-ch-foot { display: none; }
/* アシストあり(ゲーム): 今の値と、選んだ技の範囲の段だけ */
.pb-wrap.pb-assist-bars .green-line-card { height: 112px !important; }

/* ---------- ゲーム(kaji_challenge.html)はふんわり可愛い見た目に(2026-11-04、ユーザー指定)。ゾーンや会心の色はそのまま ---------- */
.pb-game.pb-wrap { --bg2: rgba(255, 255, 255, .55); --border2: #f7dbe5; --card-bg: #fff; --text-dim2: #a08d97; --text2: #5b4a53;
  border-radius: 22px; font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif; }
.pb-game .pb-top b { color: #ff6f9f; }
.pb-game .pb-banner { border: none; border-radius: 18px; background: #fff; box-shadow: 0 3px 10px rgba(240, 160, 190, .2); }
.pb-game .pb-tech { color: #d0668d; }
.pb-game .green-line-card { border-radius: 14px; border: none; border-left: 5px solid #f3dce5; box-shadow: 0 2px 8px rgba(240, 160, 190, .18); }
.pb-game .green-line-card.lit { box-shadow: 0 0 0 3px rgba(255, 210, 80, .75), 0 0 16px rgba(255, 200, 60, .6); }
.pb-game .pb-value { color: #5b4a53; }
.pb-game .g-track { border-radius: 999px; }
.pb-game .g-fill { border-radius: 999px; }
.pb-game .pb-ch { background: rgba(255, 255, 255, .96); border: none; border-radius: 22px 22px 0 0; box-shadow: 0 -6px 18px rgba(240, 160, 190, .25); }
.pb-game .pb-ch-techs button { border-radius: 16px; background: #fff; border: 1px solid #f7dbe5; box-shadow: 0 2px 0 #f6dfe7; font-family: inherit; }
.pb-game .pb-ch-techs button.on { background: linear-gradient(180deg, #ffa7c4, #ff6f9f); border-color: #ff7fab; color: #fff; }
.pb-game .pb-ch-techs .pb-stop { background: #f1ecff; border-color: #d9cfff; color: #7a64c9; }
.pb-game .pb-ch-groups button { border-radius: 999px; background: #eef6ff; border-color: #a9d5ff; }
.pb-game .pb-ctrl button { border-radius: 999px; }
.pb-game .pb-ctrl button.primary { background: linear-gradient(180deg, #ffa7c4, #ff6f9f); border-color: #ff7fab; }
.pb-game .pb-mine { background: linear-gradient(180deg, #fff, #ffeef4); border: 2px solid #ffc0d4; color: #d0668d; border-radius: 999px; }
.pb-game .pb-pop.true { color: #ff6f9f; } .pb-game .pb-pop.crit { color: #ffad33; }
.pb-game .pb-log { border-top-color: #f7dbe5; }
.pb-game.pb-wrap { --fill: #d9a7bd; --track: #fbeef2; --track-tech: #fdf5f8; }
.pb-game .pb-ch-techs .pb-stop { grid-column: span 4; }
/* ゲームはバーをカードの横幅いっぱいに(左の文字欄「現在」「技名」をなくす。技名は上の帯に出る。ユーザー「マスの半分しかバーを表示していない」) */
.pb-wrap.pb-game .gauge .g-bar { margin-left: 0 !important; margin-right: 0 !important; }
.pb-wrap.pb-game .g-lane-label, .pb-wrap.pb-game .g-lane-prob { display: none !important; }
.pb-wrap.pb-game .pb-note { margin-left: 0 !important; }

/* ---------- ゲームはスマホで1画面に収める(2026-11-04、ユーザー「スクロールなしで1ページに」「あなたの番の表示いらない」) ---------- */
.pb-game .pb-banner, .pb-game .pb-log, .pb-game .pb-seed { display: none !important; }
@media (max-width: 640px) {
  .pb-game.pb-wrap { padding: 6px 6px 0; }
  .pb-game .pb-top { flex-wrap: nowrap; gap: 10px; align-items: baseline; margin: 0 0 5px 2px; white-space: nowrap; font-size: 11px; }
  .pb-game .pb-top b { font-size: 19px; }
  .pb-game .pb-label { margin-right: 2px; font-size: 11px; }
  .pb-game .pb-phase { margin-left: 3px; font-size: 11px; }
  .pb-game .pb-max, .pb-game .pb-unit { font-size: 11px; }
  .pb-game #pbTurnMax { display: none; }
  /* マスの高さは画面の高さに合わせる(上の欄・技の欄を引いた残りを3段で分ける) */
  .pb-wrap.pb-game.pb-assist-bars .green-line-card { height: clamp(78px, calc((100dvh - 292px) / 3), 112px) !important; }
  .pb-wrap.pb-game.pb-assist-none .green-line-card { height: clamp(66px, calc((100dvh - 292px) / 3), 96px) !important; }
  .pb-game .pb-ch { margin: 6px -6px 0; padding: 6px 5px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .pb-game .pb-ch-techs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
  .pb-game .pb-ch-techs button { padding: 4px 1px; font-size: 10.5px; border-radius: 12px; }
  .pb-game .pb-ch-techs button small { font-size: 9px; }
  .pb-game .pb-ch-techs .pb-stop { grid-column: span 3; }
}
/* ゲームのバーの色: 緑ゾーンの手前=黄色、ゾーンに入ったら緑、はみ出したら赤(2026-11-04、ユーザー指定) */
.pb-game.pb-wrap { --fill: #f5c542; --fill-inside: #3fae6a; }
.pb-wrap.pb-game .g-fill.over { background: #e5484d; }

/* 鍛冶チャレンジの練習(アシストあり): おすすめ特技・レンジ調整の段も出すので、カードの高さは中身に合わせる(2026-11-06) */
.pb-wrap.pb-game.pb-lanes.pb-assist-bars .green-line-card { height: auto !important; }
/* 段のラベル(技の名前・レンジ調整の目標)は、段の左端に小さく重ねて出す(ゲームはゲージを横幅いっぱいに使うため) */
.pb-wrap.pb-game.pb-lanes .pb-rec .g-lane-label, .pb-wrap.pb-game.pb-lanes .pb-adj .g-lane-label {
  display: block !important; left: 1px; width: auto; max-width: 70%; text-align: left; font-size: 8.5px; letter-spacing: -0.02em;
  padding: 0 3px; border-radius: 3px; background: rgba(255, 255, 255, .82); z-index: 2;
}
/* 帯(技の範囲・目標)はラベルより上に出す(値が小さいマスで帯がラベルに隠れないように) */
.pb-wrap.pb-game.pb-lanes .pb-rec .g-lane-label, .pb-wrap.pb-game.pb-lanes .pb-adj .g-lane-label { background: none; }
.pb-wrap.pb-game.pb-lanes .pb-rec .g-band, .pb-wrap.pb-game.pb-lanes .pb-adj .g-band { z-index: 3; }
.pb-wrap.pb-game.pb-lanes .pb-adj .g-band.target { opacity: .5; }
/* 練習: 段のラベルはバーの左の余白に出し、帯と重ならないようにする(ユーザー「バーと倍率かぶらないように」2026-11-06)。
   余白はすべてのバーに同じだけ取り、目盛りをそろえる */
.pb-wrap.pb-game.pb-lanes .gauge:has(.pb-rec, .pb-adj) .g-bar { margin-left: 34px !important; }
.pb-wrap.pb-game.pb-lanes .pb-rec .g-lane-label, .pb-wrap.pb-game.pb-lanes .pb-adj .g-lane-label {
  left: -34px; width: 33px; max-width: none; padding: 0; font-size: 8px; letter-spacing: -0.05em; overflow: hidden;
}
/* 練習: 選んだ技の段にも左の余白に「選んだ技」と出す(ユーザー「選択した特技だとわからないので文字追加」2026-11-06) */
.pb-wrap.pb-game.pb-lanes .pb-act .g-lane-label {
  display: block !important; left: -34px; width: 33px; text-align: left; font-size: 8px; letter-spacing: -0.05em; overflow: hidden; background: none; padding: 0;
}
/* 練習の調整レンジ: 下半分=光った時に等倍(通常)の技で本会心が確定する位置(2026-11-06) */
.pb-wrap .g-band.target.eq { background: #1f9e8f; }
.pb-wrap .g-lane-label .n.target.eq { color: #1f9e8f; }
.pb-wrap.pb-game.pb-lanes .pb-adj .g-lane-label.adj-half { line-height: 9px; font-size: 7.5px; }
/* 練習は注意書きを出さないので、その欄も取らない(調整レンジの段を上下2段にした分の高さに回す) */
.pb-wrap.pb-game.pb-lanes .pb-note { display: none; }
/* 練習(アシストあり)は段が多いので、カード・技ボタンの余白を詰めて画面に収める(ユーザー「スマホ画面だと解説が次の一手あたりまでしか
   見えません」「Xで開くと下1cmくらいが見えなくなります」2026-11-06) */
.pb-wrap.pb-game.pb-lanes.pb-assist-bars .green-line-card { padding: 2px 5px 3px; }
.pb-wrap.pb-game.pb-lanes.pb-assist-bars .card-head { line-height: 1.15; }
.pb-wrap.pb-game.pb-lanes.pb-assist-bars .green-line-row { margin: 0; line-height: 1.15; }
.pb-wrap.pb-game.pb-lanes.pb-assist-bars .pb-value { font-size: 16px; }
.pb-wrap.pb-game.pb-lanes.pb-assist-bars .gauge { margin-top: 2px; }
.pb-wrap.pb-game.pb-lanes.pb-assist-bars .gauge .pb-act, .pb-wrap.pb-game.pb-lanes.pb-assist-bars .gauge .pb-rec, .pb-wrap.pb-game.pb-lanes.pb-assist-bars .gauge .pb-adj { margin-top: 1px; }
.pb-wrap.pb-game.pb-lanes.pb-assist-bars .pb-ch-techs button { padding-top: 3px; padding-bottom: 3px; line-height: 1.1; }
/* ゲーム: 組を選ぶボタン(超4連打ち等)は技ボタンの欄の上に重ねて出し、ページの高さを変えない(高さが変わると、下までスクロールして
   いる時に表示位置が上に戻り、Xのアプリ内ブラウザでは下のツールバーが出てくる。ユーザー「打つたびにXの下の画面が上がってくる」2026-11-06) */
.pb-wrap.pb-game .pb-ch { position: sticky; bottom: 0; }
.pb-wrap.pb-game .pb-ch-groups { position: absolute; left: 4px; right: 4px; bottom: 100%; margin: 0 0 6px; padding: 6px 8px; z-index: 6;
  background: rgba(255, 255, 255, .97); border-radius: 16px; box-shadow: 0 -2px 14px rgba(240, 160, 190, .35); }
/* ゲーム: 打った時の「+26」「会心 +34」はカードの右上に重ねる(行に入れると折り返してカードが一瞬高くなり、ページの高さが変わっていた) */
.pb-wrap.pb-game .green-line-row { flex-wrap: nowrap; }
.pb-wrap.pb-game .green-line-row .pb-plus, .pb-wrap.pb-game .green-line-row .crit-judge { position: absolute; right: 6px; top: 18px; z-index: 4; white-space: nowrap; }