/* PrismLane
   画面いっぱいの舞台。メニューは盤面の上に浮かぶ半透明の板。
   ボタンとノーツは同じ「六角形の帯」の形で揃える。 */
:root {
  --bg: #0b0a19;
  --bg-2: #12112b;
  --panel: rgba(22, 20, 50, 0.88);
  --panel-2: rgba(36, 34, 78, 0.9);
  --line: rgba(170, 180, 255, 0.18);
  --line-2: rgba(170, 180, 255, 0.34);
  --fg: #eef0ff;
  --fg-dim: #a9addb;
  --fg-mute: #7c80ad;
  --accent: #7fe6ff;
  --accent-2: #ff8ad8;
  --gold: #ffc23a;
  --danger: #ff5f7a;
  --prism: linear-gradient(90deg, #5ad1ff 0%, #8b7bff 22%, #ff6fd0 45%, #ffb36b 68%, #ffe86b 84%, #6dffc2 100%);
  --d-easy: #49d97b;
  --d-normal: #4fb6ff;
  --d-hard: #ffb340;
  --d-expert: #ff5470;
  --d-master: #b26bff;
  --d-append: #ff7fd6;
  --font-display: "Chakra Petch", "Zen Kaku Gothic New", system-ui, sans-serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --hex: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
  --hex-s: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 15px/1.6 var(--font-body);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-user-select: none; user-select: none; }
.mono { font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.muted { color: var(--fg-dim); }
.small { font-size: 12.5px; }
#safe-probe {
  position: fixed; visibility: hidden; pointer-events: none; inset: 0 auto auto 0; width: 0; height: 0;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- 画面の土台 ---------- */
.screen { position: fixed; inset: 0; }
.screen.menu {
  overflow-y: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: max(10px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(130, 100, 255, 0.25), transparent 60%),
    linear-gradient(180deg, #140f30, var(--bg) 60%);
}

/* ---------- ボタン（六角形） ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px 28px;
  border: 0; cursor: pointer;
  background: linear-gradient(180deg, rgba(70, 66, 140, 0.95), rgba(40, 38, 92, 0.95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -2px 0 rgba(0, 0, 0, 0.25);
  clip-path: var(--hex);
  font-weight: 700; letter-spacing: 0.04em;
  transition: filter 0.12s, transform 0.08s;
}
.btn:hover { filter: brightness(1.18); }
.btn:active { transform: translateY(1px); filter: brightness(0.95); }
.btn:focus-visible { outline: none; filter: brightness(1.3); box-shadow: inset 0 0 0 2px var(--accent); }
.btn:disabled { opacity: 0.45; cursor: default; filter: none; }
.btn.primary { background: var(--prism); color: #120f2a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.btn.ghost { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--line-2); font-weight: 500; }
.btn.danger { background: linear-gradient(180deg, #a83552, #7a2340); }
.btn.ghost.danger { background: rgba(255, 95, 122, 0.08); color: #ff9aac; }
.btn.big { min-height: 56px; font-size: 18px; padding: 10px 40px; }
.btn.small { min-height: 36px; padding: 4px 18px; font-size: 13.5px; clip-path: var(--hex-s); }
.mini {
  min-width: 32px; min-height: 30px; padding: 2px 8px;
  border: 1px solid var(--line-2); border-radius: 6px;
  background: rgba(255, 255, 255, 0.06); cursor: pointer; font-weight: 700;
}
.mini:hover { background: rgba(255, 255, 255, 0.12); }
.mini.on, .mini.toggle.on { background: rgba(127, 230, 255, 0.2); border-color: var(--accent); color: #fff; }
.mini.danger { color: #ff9aac; }
.badge {
  display: inline-block; padding: 0 7px; margin-left: 6px; border-radius: 4px;
  font: 700 11px/18px var(--font-display); letter-spacing: 0.08em; vertical-align: middle;
}
.badge.fc { background: linear-gradient(90deg, #8ae9ff, #ff9de6); color: #170f2c; }
.badge.ap { background: linear-gradient(90deg, #fff2a8, #ffc23a); color: #2b1d00; }
.badge.new { background: var(--accent-2); color: #2a0b22; }
.badge.big { font-size: 13px; line-height: 24px; padding: 0 10px; margin: 0 8px 0 0; }

/* スイッチ */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; min-height: 40px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw-track { position: relative; width: 44px; height: 24px; border-radius: 12px; background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px var(--line-2); transition: background 0.15s; flex: none; }
.sw-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #d9dcff; transition: transform 0.15s; }
.switch input:checked + .sw-track { background: linear-gradient(90deg, #5ad1ff, #ff6fd0); }
.switch input:checked + .sw-track::after { transform: translateX(20px); background: #fff; }
.switch input:focus-visible + .sw-track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- タイトル ---------- */
#scr-title { overflow: hidden; }
#title-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.title-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 7, 22, 0.92) 0%, rgba(8, 7, 22, 0.7) 38%, rgba(8, 7, 22, 0.15) 70%, rgba(8, 7, 22, 0.35) 100%); }
.title-wrap {
  position: relative; height: 100%;
  display: flex; flex-direction: column; justify-content: center; gap: 28px;
  padding-left: max(28px, env(safe-area-inset-left, 0px) + 12px);
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-bottom, 0px));
  max-width: 620px;
}
.logo-kicker { margin: 0; font: 600 13px var(--font-display); letter-spacing: 0.42em; color: var(--accent); }
.logo-main { margin: 4px 0 6px; font: 700 clamp(56px, 12vw, 120px)/0.86 var(--font-display); letter-spacing: 0.02em; display: flex; flex-direction: column; }
.logo-main .l1 { background: var(--prism); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 22px rgba(160, 120, 255, 0.45)); }
.logo-main .l2 { color: transparent; -webkit-text-stroke: 2px rgba(238, 240, 255, 0.92); letter-spacing: 0.16em; }
.logo-sub { margin: 0; color: var(--fg-dim); font-size: 15px; }
.title-menu { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.title-menu .btn.big { min-width: 260px; }
.title-note { margin: 0; color: var(--fg-mute); font-size: 12.5px; }
@media (max-height: 460px) {
  .title-wrap { gap: 14px; }
  .logo-main { font-size: clamp(44px, 16vh, 88px); }
  .title-menu { flex-direction: row; flex-wrap: wrap; }
  .title-menu .btn.big { min-width: 0; }
}

/* ---------- 上の帯（各画面共通） ---------- */
.bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-block: 4px 12px; }
.bar-title { margin: 0; font: 700 22px var(--font-body); letter-spacing: 0.06em; }
.bar-right { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- 曲えらび ---------- */
.select-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 20px; align-items: start; }
.song-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.song {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; align-items: center; gap: 14px;
  width: 100%; padding: 10px 18px 10px 10px; text-align: left; cursor: pointer;
  border: 0; background: var(--panel); clip-path: var(--hex-s);
  box-shadow: inset 0 0 0 1px var(--line);
}
.song:hover { background: var(--panel-2); }
.song.on { background: linear-gradient(90deg, rgba(90, 209, 255, 0.22), rgba(255, 111, 208, 0.18)); box-shadow: inset 0 0 0 2px rgba(127, 230, 255, 0.7); }
.song-jacket { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 8px; font: 700 26px var(--font-display); }
.j-demo { background: var(--prism); color: #120f2a; }
.j-user { background: linear-gradient(135deg, #3b2f8a, #8b3c8f); color: #fff; }
/* 2 曲目からの内蔵曲（1 曲目の虹色と、自作譜面の紫と見分けがつく色） */
.j-demo.j-alt1 { background: linear-gradient(135deg, #ff7a3d 0%, #e8173f 45%, #6d0a2a 100%); color: #fff; }
.j-demo.j-alt2 { background: linear-gradient(135deg, #ffe45c 0%, #ff9a3d 50%, #e8457a 100%); color: #120f2a; } /* 3 曲目（明るいゴムまり） */
.j-demo.j-alt3 { background: linear-gradient(135deg, #c8ff5a 0%, #2fcf7a 50%, #0b5a4a 100%); color: #0e0c22; }
.song-main { display: flex; flex-direction: column; min-width: 0; }
.song-title { font-weight: 700; font-size: 16.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-artist { font-size: 12.5px; color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-diffs { display: flex; gap: 4px; }
.chip { min-width: 28px; padding: 0 6px; border-radius: 5px; font: 700 13px/22px var(--font-display); text-align: center; color: #0e0c22; background: #aaa; }
.d-easy { --dc: var(--d-easy); } .d-normal { --dc: var(--d-normal); } .d-hard { --dc: var(--d-hard); }
.d-expert { --dc: var(--d-expert); } .d-master { --dc: var(--d-master); } .d-append { --dc: var(--d-append); }
.chip[class*="d-"] { background: var(--dc, #aaa); }
.song-detail {
  position: sticky; top: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
.eyebrow { margin: 0; font: 600 11.5px var(--font-display); letter-spacing: 0.28em; color: var(--accent); }
.det-title { margin: 2px 0 0; font-size: 24px; line-height: 1.3; text-wrap: balance; }
.det-artist { margin: 0; color: var(--fg-dim); }
.diff-row { display: flex; gap: 8px; flex-wrap: wrap; }
.diff {
  flex: 1 1 0; min-width: 84px; display: flex; flex-direction: column; align-items: center; padding: 6px 4px 8px;
  border: 0; cursor: pointer; clip-path: var(--hex-s);
  background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 -3px 0 var(--dc, #888);
}
.diff-name { font: 700 12px var(--font-display); letter-spacing: 0.12em; color: var(--dc, #ccc); }
.diff-lv { font: 700 26px/1.1 var(--font-display); }
.diff.on { background: var(--dc, #888); }
.diff.on .diff-name, .diff.on .diff-lv { color: #0e0c22; }
.det-stats { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; margin: 0; }
.det-stats dt { color: var(--fg-dim); font-size: 13px; }
.det-stats dd { margin: 0; overflow-wrap: anywhere; }
.quick { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; padding-top: 6px; border-top: 1px solid var(--line); }
.speed { display: flex; align-items: center; gap: 8px; }
.q-label { color: var(--fg-dim); font-size: 13px; }
.q-val { min-width: 36px; text-align: center; font-size: 18px; font-weight: 700; }
.det-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.det-actions .btn { flex: 1 1 auto; }
.btn.start { width: 100%; }
/* 詳細の頭: 曲名などの塊 ＋ 右上の試聴ボタン。ボタンは右に浮かせ、曲名はボタンの下で全幅に戻る（狭い詳細でも曲名が細長くならない） */
.det-head { display: flow-root; }
/* balance だと、ボタンの横の短い行に合わせて全部の行が短くなる。pretty は最後の行が 1 文字だけ、を避ける。
   曲名は app.js の App.phrases で「・」や空白ごとの塊（.det-ph）に分ける。塊の途中では折らず、入らなければ塊ごと次の行へ
   （「スペクトラ／ム・ランナー」にしない。カタカナの複合語は auto-phrase でも途中で折れる）。1 行に入りきらない長い塊だけ途中で折る */
.det-head .det-title { text-wrap: pretty; word-break: auto-phrase; overflow-wrap: anywhere; }
.det-ph { display: inline-block; max-width: 100%; vertical-align: top; }
.mini.pv-btn {
  float: right; margin: 0 0 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 96px; min-height: 40px; padding: 4px 10px; font-size: 13px; white-space: nowrap; color: var(--fg-dim);
}
.mini.pv-btn[data-state="play"] { border-color: var(--accent); background: rgba(127, 230, 255, 0.16); color: #fff; }
.mini.pv-btn[data-state="wait"] { color: var(--fg); }
.mini.pv-btn[data-state="off"], .mini.pv-btn[data-state="none"] { color: var(--fg-mute); background: rgba(255, 255, 255, 0.03); }
/* 音源なし: 押せない見た目（押すと入れ方のお知らせだけ） */
.mini.pv-btn[data-state="none"] { border-style: dashed; opacity: 0.6; cursor: default; }
.mini.pv-btn[data-state="none"]:hover { background: rgba(255, 255, 255, 0.03); }
.pv-spin { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.18); border-top-color: #ff6fd0; border-right-color: #5ad1ff; animation: spin 0.8s linear infinite; }
/* 「内蔵曲の譜面を複製」ダイアログ */
.bcopy { display: flex; flex-direction: column; }
.bc-song { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.bc-song:last-child { border-bottom: 0; }
.bc-title { font-size: 14px; }
@media (max-width: 760px) {
  .select-body { grid-template-columns: minmax(0, 1fr); }
  .song-detail { position: static; order: -1; }
}
@media (max-height: 520px) and (min-width: 600px) {
  .select-body { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
  .song-detail { gap: 10px; padding: 12px 16px; max-height: calc(100dvh - 76px); overflow-y: auto; }
  .det-title { font-size: 19px; }
  .diff { padding: 3px 4px 5px; }
  .diff-lv { font-size: 21px; }
  .bar { padding-block: 0 8px; }
}
/* 2 列のときは画面ごと流さず、一覧と詳細がそれぞれの中で流れる（上の帯は動かない。012 G4）。1 列（幅 760 以下で高さもある）は今のまま。
   [hidden] は上の !important で消える。一覧は列の高さいっぱいに伸ばして中で流す（カードは縮めない）。
   詳細は sticky をやめるが relative にする（中の見えないチェックボックス（position: absolute）を詳細の中に収める。static だと画面の箱まではみ出す） */
@media (min-width: 761px), (max-height: 520px) and (min-width: 600px) {
  #scr-select { display: flex; flex-direction: column; overflow: hidden; }
  #scr-select .bar { flex: none; }
  #scr-select .select-body { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  #scr-select .song-list { align-self: stretch; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  #scr-select .song { flex: none; }
  #scr-select .song-detail { position: relative; top: auto; align-self: start; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
}

/* ---------- 設定 ---------- */
.settings-body { max-width: 680px; display: flex; flex-direction: column; gap: 6px; padding-bottom: 24px; }
.set-h { margin: 18px 0 4px; font: 600 12px var(--font-display); letter-spacing: 0.3em; color: var(--accent); }
.set-row { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; }
.set-label { display: block; font-weight: 700; }
.set-ctl { display: flex; align-items: center; gap: 14px; }
.set-ctl input[type="range"] { flex: 1; min-width: 0; accent-color: #ff6fd0; height: 32px; }
.set-ctl output { min-width: 72px; text-align: right; font-size: 17px; font-weight: 700; }
.set-note { margin: 2px 0 0; color: var(--fg-dim); font-size: 12.5px; }

/* ---------- プレイ ---------- */
.screen.play { background: #000; touch-action: none; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.overlay { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(6, 5, 18, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 20; }
.pause-box { display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: min(320px, 86vw); }
.pause-title { margin: 0 0 6px; text-align: center; font: 700 26px var(--font-body); letter-spacing: 0.2em; }
.pause-sub { display: flex; gap: 12px; margin-top: 26px; }
.pause-sub .btn { flex: 1 1 0; min-height: 48px; padding-inline: 14px; white-space: nowrap; font-size: 14.5px; }
.btn.armed { background: linear-gradient(180deg, #a83552, #7a2340); color: #fff; box-shadow: inset 0 0 0 2px #ff9aac; flex-direction: column; gap: 0; line-height: 1.15; }
.btn.armed .arm-hint { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: #ffd6de; }
/* 設定の上の帯（← もどる）は、下までスクロールしても見えるように貼り付ける */
#scr-settings .bar { position: sticky; top: calc(-1 * max(10px, env(safe-area-inset-top, 0px))); z-index: 2; padding-top: max(10px, env(safe-area-inset-top, 0px)); margin-top: calc(-1 * max(10px, env(safe-area-inset-top, 0px))); background: linear-gradient(180deg, #140f30 80%, rgba(20, 15, 48, 0)); }
@media (max-height: 500px) {
  .pause-box { gap: 8px; }
  .pause-title { font-size: 20px; margin: 0; }
  .pause-sub { margin-top: 20px; }
}
.countdown { position: fixed; inset: 0; display: grid; place-items: center; font: 700 min(30vh, 200px) var(--font-display); color: #fff; text-shadow: 0 0 40px rgba(160, 120, 255, 0.8); pointer-events: none; z-index: 21; }
.busy { z-index: 50; gap: 14px; align-content: center; }
.spinner { width: 46px; height: 46px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.15); border-top-color: #ff6fd0; border-right-color: #5ad1ff; animation: spin 0.8s linear infinite; }
.busy-msg { margin: 0; color: var(--fg-dim); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 結果 ---------- */
.result-wrap { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; padding-top: 8px; }
.res-title { margin: 2px 0 0; font-size: 24px; text-wrap: balance; }
.res-main { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.rank { font: 700 clamp(72px, 16vw, 128px)/1 var(--font-display); background: var(--prism); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 24px rgba(180, 120, 255, 0.5)); }
.rank.r-c, .rank.r-d { background: linear-gradient(180deg, #c9ccff, #7c80ad); -webkit-background-clip: text; background-clip: text; filter: none; }
.res-score { display: flex; flex-direction: column; }
.res-score .lbl { font: 600 12px var(--font-display); letter-spacing: 0.3em; color: var(--fg-dim); }
.res-score .num { font-size: clamp(40px, 9vw, 64px); font-weight: 700; line-height: 1.05; }
.res-badges { margin-top: 6px; }
.jtable { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.jrow { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.jk { font: 700 13px var(--font-display); letter-spacing: 0.1em; }
.jv { font-size: 20px; font-weight: 700; }
.j-perfect .jk { background: linear-gradient(90deg, #7fe6ff, #ff9de6, #ffe98a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.j-great .jk { color: #ff8ad8; } .j-good .jk { color: #5fd8ff; } .j-bad .jk { color: #9aa8d8; } .j-miss .jk { color: #8d8da6; }
.j-combo .jk, .j-fl .jk { color: var(--fg-dim); }
.res-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.res-actions .btn { flex: 1 1 200px; }
.res-actions .btn.ghost { flex: 0 1 auto; padding-inline: 22px; }
.res-tune { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; margin-top: 10px; color: var(--fg-dim); font-size: 13.5px; }
/* 横持ちのスマホ（高さが低い）: 左に順位と点数、右に内訳。ボタンが画面の外に出ないように詰める */
@media (max-height: 500px) {
  .result-wrap { gap: 10px; padding-top: 0; max-width: 900px; }
  #result-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2px 22px; align-items: center; }
  .res-head { grid-column: 1; }
  .res-head .eyebrow { margin: 0; }
  .res-title { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .res-main { grid-column: 1; gap: 16px; flex-wrap: nowrap; }
  .rank { font-size: 64px; }
  .res-score .num { font-size: 38px; }
  .jtable { grid-column: 2; grid-row: 1 / span 3; grid-template-columns: 1fr 1fr; gap: 5px; }
  .jrow { padding: 3px 10px; }
  .jk { font-size: 11.5px; }
  .jv { font-size: 16px; }
  .res-tune { grid-column: 1; margin-top: 4px; font-size: 12.5px; }
  .res-actions { gap: 10px; flex-wrap: nowrap; }
  .res-actions .btn { flex: 1 1 0; }
  .res-actions .btn.big { min-height: 48px; font-size: 16px; padding-inline: 14px; }
  .res-actions .btn.ghost { flex: 0 0 auto; }
}
/* 設定の −/＋ ボタン */
.set-ctl .nudge { min-width: 44px; min-height: 40px; font-size: 18px; line-height: 1; }

/* ---------- ダイアログ・お知らせ ---------- */
.dlg-back { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(4, 3, 14, 0.66);
  /* ノッチ・角の丸みの内側に（013） */
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.dlg { width: min(440px, 100%); max-height: calc(100% - 16px); overflow-y: auto; background: #18163a; border: 1px solid var(--line-2); border-radius: 14px; padding: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.dlg.wide { width: min(720px, 100%); }
.dlg-title { margin: 0 0 10px; font-size: 19px; }
.dlg-body p { margin: 0 0 8px; }
.dlg-buttons { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.btn-col { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 10px; }
textarea.json { width: 100%; min-height: 180px; font: 12.5px/1.5 ui-monospace, "Cascadia Code", Consolas, monospace; background: #0d0c22; border: 1px solid var(--line-2); border-radius: 8px; padding: 10px; resize: vertical; }
#toast, #toast-old {   /* #toast-old（上に残す知らせ。015 T）も同じ見た目。位置と出入りは 015 の節で上書き */
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 200;
  transform: translate(-50%, 30px); opacity: 0; pointer-events: none;
  /* left: 50% のままだと幅が画面の半分までに縮むので、文の長さに合わせる（画面の幅 −32px まで） */
  width: max-content; max-width: calc(100% - 32px); padding: 10px 18px; border-radius: 10px;
  /* 真ん中に置くので、左右とも切り欠きの広い方（無ければ 16px）をあける（015 G2。max() が使えない端末は上の −32px） */
  max-width: calc(100% - 2 * max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)));
  background: #24214f; border: 1px solid var(--line-2); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  transition: opacity 0.2s, transform 0.2s;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
.clist { display: flex; flex-direction: column; gap: 8px; }
.citem { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 8px; }
.citem.on { border-color: var(--accent); }
.cmain { display: flex; flex-direction: column; min-width: 0; }
.cmain b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 譜面パックの小窓（013）。題・上の行・下のボタンは流さず、一覧だけが小窓の中で流れる */
.dlg.pk-dlg { display: flex; flex-direction: column; }
.dlg.pk-dlg > .dlg-title, .dlg.pk-dlg > .dlg-buttons { flex: none; }
.dlg.pk-dlg > .dlg-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pk-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.pk-top { flex: none; display: flex; flex-direction: column; gap: 4px; }
.pk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pk-tools .btn { min-height: 40px; padding: 4px 18px; font-size: 13.5px; }
.pk-tools .pk-note { flex: 1 1 12em; min-width: 0; font-size: 12.5px; }
.dlg-body p.pk-sum, .dlg-body p.pk-note, .dlg-body p.pk-warn, .dlg-body p.pk-file, .dlg-body p.pk-head, .dlg-body p.pk-all { margin: 0; }
.pk-head { font-size: 16px; font-weight: 700; color: var(--fg); }
.pk-sum { font-size: 13.5px; color: var(--fg-dim); }
.pk-file b { overflow-wrap: anywhere; }
.pk-warn { color: #ff9aac; font-size: 13.5px; font-weight: 700; }
.pk-all { color: var(--accent); font-size: 13.5px; font-weight: 700; }
.pk-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.pk-list { flex: 1 1 auto; min-height: 110px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 6px; }
.pk-row { flex: none; display: flex; align-items: center; gap: 12px; min-height: 52px; padding-right: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 8px; }
/* 行の左側全体がチェックの押せる所（選ぶ欄の上は除く） */
.pk-pick { flex: 1 1 auto; min-width: 0; min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 12px; cursor: pointer; }
.pk-cb { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.pk-main { min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.pk-title, .pk-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-sub { font-size: 12.5px; color: var(--fg-dim); }
.pk-state { font-size: 13px; font-weight: 700; }
.pk-row[data-state="new"] .pk-state { color: #6dffc2; }
.pk-row[data-state="audio"] .pk-state, .pk-row[data-state="newer"] .pk-state { color: var(--accent); }
.pk-row[data-state="changed"] .pk-state, .pk-row[data-state="older"] .pk-state { color: var(--gold); }
.pk-row[data-state="same"] .pk-state, .pk-row[data-state="skip"] .pk-state { color: var(--fg-mute); }
.pk-row[data-state="skip"] .pk-title { color: var(--fg-dim); }
/* 上書きすると端末で直した所が消える行（設計 15）: 赤い ⚠ */
.pk-row[data-state="risk"] { border-color: rgba(255, 110, 135, 0.7); background: rgba(255, 80, 110, 0.08); }
.pk-row[data-state="risk"] .pk-state { color: #ff8095; }
.pk-act { flex: none; width: 7.5em; min-height: 40px; padding: 4px 8px; background: #17163a; border: 1px solid var(--line-2); border-radius: 6px; }
.pk-notes { margin: 0; padding-left: 1.2em; font-size: 13px; max-height: 40vh; overflow-y: auto; overscroll-behavior: contain; }
.pk-notes li + li { margin-top: 4px; }
.pk-save { margin-top: 0; }
/* 「譜面を読み込む」: ファイルを選ぶボタンが上、貼り付けの欄は下（低い画面では 3 行ほどに） */
.dlg-body p.imp-hint { margin: 0; }
.imp-pick { margin-top: 8px; }
.imp-pick .btn { min-height: 44px; }
.imp-or { display: block; margin: 12px 0 4px; }
@media (max-height: 500px) {
  .dlg.pk-dlg { padding: 12px; max-height: 100%; }
  .dlg.pk-dlg .dlg-title { font-size: 16px; margin-bottom: 6px; }
  .dlg.pk-dlg .dlg-buttons { margin-top: 8px; }
  .pk-body { gap: 6px; }
  textarea.json#import-json { min-height: 0; height: 78px; }
  .imp-pick { margin-top: 6px; }
  .imp-or { margin: 6px 0 2px; }
}
table.help { border-collapse: collapse; width: 100%; font-size: 13.5px; }
table.help th { text-align: left; white-space: nowrap; color: var(--accent); padding: 6px 12px 6px 0; vertical-align: top; }
table.help td { padding: 6px 0; border-bottom: 1px solid var(--line); }

/* ---------- エディタ ---------- */
.screen.editor {
  /* 安全な領域（ノッチ・角の丸み・下のバー）。詳細パネルも同じ値を使う。editor.js はこの余白を読んでメニューを内側に置く */
  --sa-t: env(safe-area-inset-top, 0px); --sa-r: env(safe-area-inset-right, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px); --sa-l: env(safe-area-inset-left, 0px);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--bg);
  padding: var(--sa-t) var(--sa-r) var(--sa-b) var(--sa-l);
}
.ed-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 10px; background: #100f26; border-bottom: 1px solid var(--line); }
.tb {
  min-height: 34px; padding: 4px 12px; border: 1px solid var(--line-2); border-radius: 7px;
  background: rgba(255, 255, 255, 0.05); cursor: pointer; font-size: 13.5px; font-weight: 500; white-space: nowrap;
}
.tb:hover { background: rgba(255, 255, 255, 0.11); }
.tb.icon { min-width: 34px; padding: 4px 8px; font-weight: 700; }
.tb.on, .tb.toggle.on { background: rgba(127, 230, 255, 0.18); border-color: var(--accent); }
.tb.play.on { background: rgba(255, 111, 208, 0.25); border-color: var(--accent-2); }
.tb.accent { background: var(--prism); color: #120f2a; border: 0; font-weight: 700; }
.tb-group { display: flex; align-items: center; gap: 4px; padding: 0 4px; border-left: 1px solid var(--line); }
.tb-label { font-size: 12px; color: var(--fg-dim); padding: 0 2px; }
.tb-sel { min-height: 34px; border: 1px solid var(--line-2); border-radius: 7px; background: #17163a; padding: 2px 6px; font-size: 13px; }
.ed-time { min-width: 76px; text-align: center; font-size: 14px; }
.ed-name { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 6px; flex: 1 1 72px; overflow: hidden; }
.ed-name .nm { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diff-chip { flex: none; padding: 0 8px; border-radius: 5px; font: 700 12px/20px var(--font-display); background: var(--dc, #888); color: #0e0c22; }
.ed-name.no-chip .diff-chip { display: none; }  /* 題名が 4〜5 文字も見えないときは難易度の印を隠す（editor.js の fitChip） */
.panel-toggle { display: none; }
.tb.more { display: none; }  /* 上の帯に入りきらないときだけ出す（下の .fold-1） */
.ed-scrim { display: none; }
/* 上の帯の「保存」。右上の印で状態（editor.js の refreshStatus が data-state を付ける） */
.tb.save { position: relative; min-width: 52px; }
.tb.save .sv-mark { position: absolute; top: 1px; right: 2px; font: 700 12.5px/1 var(--font-display); }
.tb.save[data-state="1"] .sv-mark { color: #6dffc2; }
.tb.save[data-state="0"] .sv-mark { color: var(--gold); }
.tb.save[data-state="x"] { background: rgba(255, 95, 122, 0.28); border-color: var(--danger); color: #fff; }
.popmenu button.danger { color: #ff9aac; }
/* 低い画面で縦に入りきらないメニューは 2 列に（editor.js の menuCols） */
.popmenu.cols { flex-direction: row; align-items: flex-start; gap: 6px; }
.pm-col { display: flex; flex-direction: column; flex: none; min-width: 0; }
.pm-col > * { flex: none; }
.pm-col + .pm-col { border-left: 1px solid var(--line); padding-left: 6px; }
/* 上の帯が 1 行に入りきらないとき（editor.js の fitTop が fold-1〜6 を順に足す）:
   速さ → メトロノーム → ノーツ音 → 題名 → 先頭へ → やり直す の順に「⋯」へ。fold-1 で間隔を詰め、▾ も外す */
.ed-top.fold-1 { gap: 3px; padding-inline: 4px; }
.ed-top.fold-1 .tb .caret { display: none; }
.ed-top.fold-1 .tb.more { display: inline-block; }
.ed-top.fold-1 [data-fold="1"], .ed-top.fold-2 [data-fold="2"],
.ed-top.fold-3 [data-fold="3"], .ed-top.fold-4 [data-fold="4"],
.ed-top.fold-5 [data-fold="5"], .ed-top.fold-6 [data-fold="6"] { display: none; }

.ed-body { display: grid; grid-template-columns: 92px minmax(0, 1fr) 340px; min-height: 0; }
.ed-tools { display: flex; flex-direction: column; gap: 4px; padding: 8px 6px; overflow-y: auto; background: #0f0e24; border-right: 1px solid var(--line); }
.tool {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 5px;
  border: 1px solid transparent; border-radius: 8px; background: transparent; cursor: pointer;
}
.tool:hover { background: rgba(255, 255, 255, 0.06); }
.tool.on { background: rgba(127, 230, 255, 0.14); border-color: rgba(127, 230, 255, 0.6); }
.tool-lbl { font-size: 11.5px; font-weight: 700; }
.tool-ico { position: relative; width: 44px; height: 16px; display: block; }
.ico-tap, .ico-flick, .ico-trace { clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%); }
.ico-tap { background: #27c6ff; }
.ico-flick { background: #ff4f95; }
.ico-flick::after { content: "↑"; position: absolute; inset: -3px 0 0; text-align: center; font: 700 14px/1 var(--font-display); color: #fff; }
.ico-trace { background: #d9e4ff; height: 9px; margin: 3px 0 4px; }
.ico-hold { width: 18px; height: 22px; margin-top: -3px; background: rgba(51, 221, 138, 0.45); border-top: 5px solid #33dd8a; border-bottom: 4px solid #33dd8a; }
.ico-slide { width: 22px; height: 22px; margin-top: -3px; background: linear-gradient(135deg, transparent 30%, rgba(156, 108, 255, 0.85) 30%, rgba(156, 108, 255, 0.85) 70%, transparent 70%); }
.ico-select, .ico-eraser, .ico-hand { height: 20px; margin-top: -2px; }
.ico-select { width: 22px; border: 2px dashed #cfd3ff; border-radius: 3px; }
.ico-eraser::after, .ico-hand::after { position: absolute; inset: 0; text-align: center; font: 700 18px/20px var(--font-display); color: #cfd3ff; }
.ico-eraser::after { content: "✕"; color: #ff8aa0; }
.ico-hand::after { content: "⇕"; }
.tool-opts { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.opt-title { font-size: 11px; color: var(--fg-dim); text-align: center; }
.wrow { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; }
.wval { min-width: 20px; text-align: center; font-size: 16px; font-weight: 700; }
.wval.of-sel { color: var(--accent); }  /* 選んでいるノーツの幅を表示中 */
.mini.wide { width: 100%; font-size: 11.5px; padding: 4px 2px; }
.crit-ico, .crit-s { display: none; }  /* 低い画面だけ（道具の並びに入るとき） */
#scr-editor .mini.wide.on { background: rgba(255, 194, 58, 0.25); border-color: var(--gold); color: #ffe7a6; }
.dirs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }  /* 1 段目 ↖ ↑ ↗、2 段目 ← ↓ → */
.mini.dir { font-size: 15px; padding: 2px 0; min-width: 0; }
.mini.dir.on { background: rgba(255, 79, 149, 0.28); border-color: #ff4f95; }
/* PC・タブレット（横 641px 以上・高さ 501px 以上）: 道具の列を少し広げて詰め、1280x720・1024x768 で
   フリックの向き 6 つまでスクロールせずに見え、1 つ 24px 以上になるようにする（レビュー R2・テスト T2）。
   列の幅は横 1101px 以上はここ、1100px 以下は下の @media (max-width: 1100px) の後で決める */
@media (min-width: 1101px) and (min-height: 501px) {
  .ed-body { grid-template-columns: 104px minmax(0, 1fr) 340px; }
}
@media (min-width: 641px) and (min-height: 501px) {
  .ed-tools { gap: 3px; }
  .ed-tools .tool { padding: 4px 2px 3px; }
  .ed-tools .tool-opts { margin-top: 4px; padding-top: 6px; gap: 5px; }
  .ed-tools .opt-title { white-space: nowrap; }
  .ed-tools .wrow { flex-wrap: nowrap; gap: 3px; }
  .ed-tools .wrow .mini { flex: 1 1 0; min-width: 0; padding-inline: 0; }
  .ed-tools .mini.dir { min-height: 30px; }
}

.ed-canvas-wrap { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.ed-canvas { position: absolute; inset: 0; display: block; touch-action: none; outline: none; }
.ed-hint {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: min(380px, 86%);
  padding: 16px 18px; border-radius: 12px; background: rgba(20, 19, 46, 0.92); border: 1px solid var(--line-2); text-align: center;
  pointer-events: none;  /* 案内の上でもタップ・クリックは盤面へ（ノーツを置ける）。中のボタンだけ押せる */
}
.ed-hint button { pointer-events: auto; }
.ed-hint p { margin: 0 0 10px; font-size: 13.5px; color: var(--fg-dim); }
.ed-hint .h-title { color: var(--fg); font-weight: 700; font-size: 15px; }

.ed-side { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; background: #0f0e24; border-left: 1px solid var(--line); }
.pv-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 6px; }
.side-cap { font-size: 12px; color: var(--fg-dim); }
.ed-preview { display: block; width: 100%; aspect-ratio: 16 / 10; flex: none; background: #000; }
.tabs { display: flex; border-bottom: 1px solid var(--line); flex: none; }
.tab { flex: 1; padding: 9px 4px; border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--fg-dim); }
.tab.on { color: var(--fg); border-bottom-color: var(--accent); }
/* 詳細パネルを閉じる ✕（パネルが盤面に重なる幅だけ出す） */
.side-close { display: none; flex: none; width: 46px; border: 0; border-left: 1px solid var(--line); background: transparent; cursor: pointer; font-size: 17px; color: var(--fg-dim); }
.side-close:hover { color: var(--fg); background: rgba(255, 255, 255, 0.06); }
.panel { padding: 10px 14px 24px; display: flex; flex-direction: column; gap: 8px; }
.ph { margin: 10px 0 2px; font-size: 14px; color: var(--accent); }
.fld { display: flex; flex-direction: column; gap: 2px; }
.fld-l { font-size: 12px; color: var(--fg-dim); }
.fld-n { font-size: 11.5px; color: var(--fg-mute); }
.fld input, .fld select, .pt input, .pt select, .ev input, .ev select {
  min-height: 34px; width: 100%; min-width: 0; padding: 4px 8px;
  background: #17163a; border: 1px solid var(--line-2); border-radius: 6px;
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chk { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-size: 13.5px; }   /* 指で押せる高さ（008） */
.chk input { width: 18px; height: 18px; accent-color: #ff6fd0; }
.pt-head, .pt { display: grid; grid-template-columns: 44px 70px 52px 46px minmax(0, 1fr); gap: 4px; align-items: center; }
.pt { padding: 4px; border-radius: 6px; border: 1px solid transparent; grid-template-columns: 44px 70px 52px 46px minmax(0, 1fr); }
.pt .chk, .pt .mini { grid-column: span 1; }
.pt.on { border-color: #ffe36b; background: rgba(255, 227, 107, 0.07); }
.pt-name { border: 0; background: transparent; color: var(--accent); cursor: pointer; font-weight: 700; padding: 0; text-align: left; }
.pts { display: flex; flex-direction: column; gap: 4px; }
.evs { display: flex; flex-direction: column; gap: 4px; }
.ev { display: grid; grid-template-columns: 96px minmax(0, 1fr) 40px; gap: 6px; align-items: center; }
.ev-pos { border: 0; background: transparent; color: var(--accent); cursor: pointer; text-align: left; padding: 0; }
table.stats { border-collapse: collapse; font-size: 13.5px; }
table.stats th { text-align: left; font-weight: 500; color: var(--fg-dim); padding: 2px 18px 2px 0; }
table.stats td { text-align: right; }
.audio-name { margin: 0; overflow-wrap: anywhere; }
.ed-status { display: flex; gap: 16px; justify-content: space-between; padding: 4px 12px; font-size: 12px; background: #100f26; border-top: 1px solid var(--line); color: var(--fg-dim); white-space: nowrap; overflow: hidden; }
.ed-status .st-tip { overflow: hidden; text-overflow: ellipsis; color: var(--fg-mute); font-family: var(--font-body); }
.popmenu { position: fixed; z-index: 90; min-width: 230px; padding: 6px; background: #1b1942; border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
/* 中でスクロールできるときだけ、続きのある側（上・下）に影が出る */
.popmenu {
  background:
    linear-gradient(#1b1942 30%, rgba(27, 25, 66, 0)) center top / 100% 28px no-repeat local,
    linear-gradient(rgba(27, 25, 66, 0), #1b1942 70%) center bottom / 100% 28px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(127, 230, 255, 0.35), rgba(127, 230, 255, 0)) center top / 100% 12px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(127, 230, 255, 0.35), rgba(127, 230, 255, 0)) center bottom / 100% 12px no-repeat scroll,
    #1b1942;
}
.popmenu > * { flex: none; }  /* 高さが足りないときは縮めずに中でスクロール */
.popmenu button { text-align: left; padding: 9px 12px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; font-size: 14px; }
.popmenu button:hover, .popmenu button:focus-visible { background: rgba(127, 230, 255, 0.14); }
.popmenu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.pm-head { padding: 6px 12px 2px; font-size: 11.5px; color: var(--fg-mute); }
/* グリッドのボタンと小窓（拍の細かさ・横の刻み・拍子） */
.grid-btn { min-width: 64px; }
.grid-pop { width: 300px; min-width: 0; max-width: calc(100vw - 16px); max-height: calc(100dvh - 56px); overflow-y: auto; gap: 4px; padding: 8px; }
.gp-h { font-size: 11.5px; color: var(--fg-mute); padding: 2px 2px 0; }
.gp-row { display: flex; align-items: center; gap: 4px; }
.gp-lbl { flex: none; width: 40px; font-size: 11.5px; color: var(--fg-dim); }
/* .popmenu button（左寄せ・枠なし）より強く */
.grid-pop .gp-chip {
  flex: 1 1 0; min-width: 40px; min-height: 40px; padding: 0 2px; text-align: center;
  border: 1px solid var(--line-2); border-radius: 7px; background: rgba(255, 255, 255, 0.05); cursor: pointer; font: 700 14px var(--font-display);
}
.grid-pop .gp-chip.on { background: rgba(127, 230, 255, 0.2); border-color: var(--accent); color: #fff; }
.grid-pop .gp-more { flex: none; padding: 0 12px; font: 700 13px var(--font-body); }
.gp-row input[type="number"] {
  width: 72px; min-height: 40px; padding: 4px 8px; font-size: 16px;
  background: #17163a; border: 1px solid var(--line-2); border-radius: 6px;
}
.gp-unit { font-size: 13px; color: var(--fg-dim); }
.gp-sig { flex: 1 1 auto; min-width: 0; font-size: 12.5px; }
.ev.sig { grid-template-columns: 96px minmax(0, 1fr) 12px minmax(0, 1fr) 40px; }
.ev-warn { grid-column: 1 / -1; font-size: 11.5px; color: #ff9a5c; }
/* 数値欄の −／＋ */
.stp { display: flex; align-items: stretch; gap: 4px; min-width: 0; }
.stp input { flex: 1 1 auto; text-align: center; }
.stp .stp-b { flex: none; min-width: 34px; padding: 0; font-size: 16px; }
/* ヘルプの記号の一覧 */
.sym-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 14px; }
.sym-i { display: flex; align-items: baseline; gap: 8px; }
.sym-i b { flex: none; min-width: 58px; text-align: center; font-size: 15px; color: var(--fg); }

@media (max-width: 1100px) {
  .ed-body { grid-template-columns: 84px minmax(0, 1fr); }
  /* 右のノッチ側の安全な領域の分だけ広げ、中身はその内側に置く */
  .ed-side {
    position: fixed; top: 0; right: 0; bottom: 0; width: calc(min(360px, 92vw) + var(--sa-r, 0px)); z-index: 40;
    transform: translateX(100%); transition: transform 0.2s; box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
    padding-top: var(--sa-t, 0px); padding-bottom: var(--sa-b, 0px); padding-right: var(--sa-r, 0px);
  }
  .screen.editor.side-open .ed-side { transform: none; box-shadow: -12px 0 44px rgba(0, 0, 0, 0.75); }
  .panel-toggle { display: inline-flex; align-items: center; justify-content: center; }
  /* 盤面に重なるときは ✕ と外側（押すと閉じる）を出し、タブの列（✕ がある）を上に貼り付ける */
  .side-close { display: block; }
  .screen.editor.side-open .ed-scrim { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(5, 4, 16, 0.58); }
  .ed-side .tabs { position: sticky; top: 0; z-index: 2; background: #0f0e24; }
  /* プレビューの「表示／隠す」は左に寄せ、すぐ下の ✕（右端）と押し間違えないようにする */
  .pv-head { justify-content: flex-start; gap: 10px; }
  .pv-head .mini { order: -1; }
}
/* タブレット・小さめの PC（横 641〜1100px・高さ 501px 以上）: 道具の列を 1280 と同じ幅にする（テスト T2）。
   低い画面でスクロールになっても、スクロールバーを細くして向きのボタンを狭めない */
@media (min-width: 641px) and (max-width: 1100px) and (min-height: 501px) {
  .ed-body { grid-template-columns: 104px minmax(0, 1fr); }
  .ed-tools { scrollbar-width: thin; }
}
@media (max-width: 640px) {
  .ed-top { gap: 4px; padding: 4px 6px; }
  .tb { padding: 4px 8px; font-size: 12.5px; }
  .tb-group { border-left: 0; padding: 0; }
  .tb-label, #ed-rate { display: none; }
  .ed-name { order: -1; flex-basis: 100%; }
  .ed-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .ed-tools { order: 2; flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: 0; border-top: 1px solid var(--line); padding: 4px; }
  .tool { flex: none; width: 58px; }
  .tool-opts { flex-direction: row; margin: 0; padding: 0 0 0 6px; border-top: 0; border-left: 1px solid var(--line); align-items: center; flex: none; }
  .opt-title { display: none; }
  .mini.wide { width: auto; }
  .dirs { grid-template-columns: repeat(6, 32px); }
  .ed-status .st-tip { display: none; }
}
/* 縦持ちの案内。指で操作する小さな画面を縦にしたときだけ出す。
   タップで全画面・横向きにできる環境（.can、app.js）では、真ん中の大きな所をボタンの見た目にする。「縦のまま使う」は下の端に控えめに */
.rotate { display: none; }
@media (orientation: portrait) and (pointer: coarse) and (max-width: 600px) {
  html:not(.allow-portrait) .rotate {
    position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: rgba(8, 7, 22, 0.96); text-align: center;
    padding: 24px 20px calc(72px + env(safe-area-inset-bottom, 0px));
  }
}
.rotate-go {
  display: flex; flex-direction: column; align-items: center; gap: 20px; width: min(340px, 100%); padding: 30px 20px;
  border: 0; border-radius: 20px; background: none; color: var(--fg); cursor: default;
}
.rotate.can .rotate-go { cursor: pointer; background: rgba(127, 230, 255, 0.1); box-shadow: inset 0 0 0 2px var(--accent), 0 0 36px rgba(127, 230, 255, 0.22); }
.rotate.can .rotate-go:active { background: rgba(127, 230, 255, 0.2); }
.rotate-phone {
  display: block; width: 54px; height: 92px; border: 3px solid #cfd3ff; border-radius: 11px; position: relative;
  animation: rotate-hint 2.4s ease-in-out infinite;
}
.rotate-phone::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 14px; height: 3px; margin-left: -7px; border-radius: 2px; background: #cfd3ff; }
@keyframes rotate-hint { 0%, 25% { transform: rotate(0); } 55%, 100% { transform: rotate(-90deg); } }
.rotate-msg { display: block; margin: 0; font-size: 17px; }
.rotate.can .rotate-msg { font-size: 19px; font-weight: 700; }
.rotate-msg b { color: var(--accent); }
.rotate-sub { display: block; font-size: 13px; color: var(--fg-dim); }
.rotate-ok {
  position: absolute; left: 50%; bottom: max(8px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  min-height: 44px; padding: 0 20px; border: 0; background: none; cursor: pointer;
  color: var(--fg-mute); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}

/* 記号だけの表示は低い画面用。ふだんは文字を出す */
.tb .sym { display: none; }

/* スマホ横（高さが低い画面）: 上の帯を 1 行に、道具を 3 列に。指で押す所は 40px 以上 */
@media (max-height: 500px) and (min-width: 641px) {
  .ed-top { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; gap: 4px; padding: 3px 6px; }
  .ed-top::-webkit-scrollbar { display: none; }
  .ed-top > *, .tb-group > * { flex: none; }
  .ed-name { flex: 1 1 0; min-width: 0; padding: 0 2px; gap: 6px; }
  .ed-name .nm { font-size: 13px; }
  .ed-name .diff-chip { display: none; }  /* 狭い所では題名を優先（難易度は「譜面情報」に） */
  .tb { min-height: 40px; min-width: 40px; padding: 3px 8px; font-size: 12.5px; }
  .tb.icon { min-width: 40px; padding: 3px 6px; }
  .tb.save { min-width: 44px; padding-inline: 2px 14px; }  /* 文字を左に寄せ、右上の印（12.5px）と重ねない */
  .tb-sel { min-height: 40px; padding: 2px 4px; }
  .tb-group { gap: 3px; padding: 0 2px; }
  .tb .lbl, .tb-label { display: none; }
  .tb.zoom { display: none; }  /* 拡大縮小はピンチで */
  .tb .sym { display: inline; font-size: 17px; line-height: 1; }
  .ed-time { min-width: 58px; font-size: 13px; }  /* 「0:00.000」は 57px */
  .ed-top .g-play { margin-left: 2px; }  /* 「保存」と ⏮ の間を 8px に（押し間違えないように） */
  .ed-body { grid-template-columns: 132px minmax(0, 1fr) 340px; }
  /* 道具 8 個を 3 列 × 3 段、その下に 幅（－ 値 ＋）・クリティカル・フリックの向き（十字） */
  .ed-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 2px; padding: 3px; scrollbar-width: none; }
  .ed-tools::-webkit-scrollbar { display: none; }
  .tool { padding: 3px 0 2px; gap: 2px; min-height: 40px; }
  .tool-ico { width: 32px; }
  .tool-lbl { font-size: 10px; line-height: 12px; white-space: nowrap; }
  .tool-opts { grid-column: 1 / -1; margin-top: 1px; padding-top: 3px; gap: 2px; }
  .ed-tools .wrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
  .ed-tools .wrow .mini { min-width: 0; min-height: 40px; padding-inline: 0; font-size: 16px; }
  .ed-tools .wval { min-width: 0; align-self: center; font-size: 15px; }
  .ed-tools .mini.wide { min-height: 40px; }
  .ed-tools .dirs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
  .ed-tools .mini.dir { min-height: 40px; }
  /* クリティカルは道具の 3 段目へ（016 で 2 ページ目の左）。1 段浮くので、高さ 340〜360px でも ↓ まで入る */
  .ed-tools .tool-opts { display: contents; }
  .ed-tools .wrow { grid-column: 1 / -1; margin-top: 1px; padding-top: 3px; border-top: 1px solid var(--line); }
  .ed-tools .dirs { grid-column: 1 / -1; }
  .ed-tools .mini.wide {
    grid-row: 3; grid-column: 3; width: auto; min-width: 0; min-height: 40px; padding: 3px 0 2px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  }
  .ed-tools .crit-ico { display: block; width: 30px; height: 10px; background: var(--gold); clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 50%, calc(100% - 5px) 100%, 5px 100%, 0 50%); }
  .ed-tools .crit-l { display: none; }
  .ed-tools .crit-s { display: inline; font-size: 10px; line-height: 12px; font-weight: 700; }
  .opt-title { display: none; }
  .ed-status { padding: 2px 10px; font-size: 11px; line-height: 16px; }
  .ed-status .st-tip { display: none; }
  /* 詳細パネル: プレビューは最初は隠し（editor.js）、タブを上に貼り付けて入力欄をすぐ見せる */
  .ed-side .tabs { position: sticky; top: 0; z-index: 2; background: #0f0e24; }
  .pv-head { padding: 4px 10px; }
  .pv-head .mini { min-height: 36px; min-width: 52px; }
  .tab { min-height: 42px; padding: 6px 4px; }
  .panel { padding: 8px 12px 20px; gap: 6px; }
  .panel .ph { margin-top: 4px; }
  .fld-row { flex-direction: row; align-items: baseline; gap: 8px; }
  .fld input, .fld select, .pt input, .pt select, .ev input, .ev select { min-height: 40px; }
  .stp .stp-b { min-width: 40px; min-height: 40px; }
  .panel .wrow .mini { min-width: 52px; min-height: 40px; }
  .ev .mini { min-height: 40px; }
  .popmenu button { min-height: 40px; padding-block: 6px; }
}
@media (max-height: 500px) and (min-width: 641px) and (max-width: 1100px) {
  .ed-body { grid-template-columns: 132px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation-duration: 0.01ms !important; }
}

/* ---- ずれの調整・かんたん調整（005） ---- */
/* 出力の 3 つのボタン（設定の「ずれの調整」と、かんたん調整の「はじめに」）。押した物が光る */
.tm-seg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tm-sb {
  flex: 1 1 0; min-width: 118px; min-height: 44px; padding: 6px 10px;
  border: 1px solid var(--line-2); border-radius: 8px; background: rgba(255, 255, 255, 0.05);
  cursor: pointer; font-size: 14px; font-weight: 700; line-height: 1.3;
}
.tm-sb { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.tm-sb:hover { background: rgba(255, 255, 255, 0.1); }
.tm-sb.on { background: rgba(127, 230, 255, 0.2); border-color: var(--accent); color: #fff; box-shadow: 0 0 14px rgba(127, 230, 255, 0.22); }
.tm-box { display: flex; flex-direction: column; gap: 6px; }
/* 出力の行: 出力の 3 つ → かんたん調整 → 案内 1 行（844x390 で節の見出しからここまでが 1 画面に入る） */
.tm-out .set-label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.tm-out .tm-sub { font-size: 12px; font-weight: 500; color: var(--fg-dim); }
.tm-out #set-calib { width: 100%; margin-top: 8px; }
.tm-out .nw { white-space: nowrap; }
/* 出力の印（線の絵。js の App.outIcon） */
.oi { display: inline-flex; flex: none; width: 1.15em; height: 1.15em; }
.oi svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* 設定の −／＋: 長押しで繰り返す（app.js の App.holdRepeat）。長押しの文字選び・メニュー・ダブルタップの拡大を出さない */
.set-ctl .nudge, .cal-val .nudge { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* 結果画面のおすすめ: 文の下に「＋10ms にする」「かんたん調整」。指で押せる高さ */
.res-tune .rt-msg { flex: 1 1 260px; min-width: 0; }
.res-tune .rt-acts { display: flex; flex: none; flex-wrap: wrap; gap: 8px; }
.res-tune .btn.small { min-height: 44px; padding-inline: 16px; }
/* 横持ちのスマホ: 点数・内訳の下に横いっぱいの 1 段（左に文、右にボタン）。ボタンが縦に積まれて下の行を押し出さないように */
@media (max-height: 500px) {
  /* 下の大きなボタン（もう一度・曲えらびへ）との間を 14px あける（押し間違えないように） */
  .res-tune { grid-column: 1 / -1; flex-wrap: nowrap; margin-top: 6px; margin-bottom: 4px; line-height: 1.4; }
}
/* 結果画面の「ずれ調整」から来たとき、かんたん調整のボタンを少し光らせる */
.btn.flash { animation: tm-flash 1.6s ease-out 1; }
@keyframes tm-flash { 0%, 45% { filter: brightness(1.55); } 100% { filter: none; } }
/* 曲えらびの上の帯の出力ボタン（押すたびに 有線 → スピーカー → ワイヤレス）。親指で押せる高さ */
/* 「出力」の小さな見出しの下に名前（幅をとらないように 2 段） */
/* 幅は一番長い「🔊 スピーカー」に合わせて決める（押して替わるたびに幅が変わって、ボタンの位置が動かないように） */
.btn.small.out-btn { min-height: 40px; min-width: 112px; flex-direction: column; gap: 0; padding: 2px 10px; line-height: 1.15; }
/* 設定ボタンと間違えないように: 縁を水色にし、設定との間を 14px（帯の 8px ＋ 6px）あける */
.btn.ghost.out-btn { box-shadow: inset 0 0 0 1px rgba(127, 230, 255, 0.5); margin-right: 6px; }
.out-btn .ob-cap { font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; color: var(--fg-dim); }
.out-btn .ob-name { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; white-space: nowrap; }
/* 押して出力が替わったとき、ボタン自体を 0.6 秒光らせる */
.btn.out-btn.flash { animation: out-flash 0.6s ease-out 1; }
@keyframes out-flash {
  0% { background: rgba(127, 230, 255, 0.5); filter: brightness(1.4); }
  100% { filter: none; }
}
/* 出力ボタンの真下の知らせ（app.js の App.outPop）。指で隠れない下側に。触っても下の物を押せる */
.out-pop {
  position: fixed; z-index: 150; max-width: min(330px, calc(100vw - 16px));
  display: flex; flex-direction: column; gap: 3px; padding: 8px 12px; border-radius: 10px;
  background: rgba(16, 15, 38, 0.97); box-shadow: inset 0 0 0 1px var(--accent), 0 8px 24px rgba(0, 0, 0, 0.55);
  font-size: 13px; line-height: 1.4; pointer-events: none;
  opacity: 0; transform: translateY(-4px); transition: opacity 0.15s, transform 0.15s;
}
.out-pop.show { opacity: 1; transform: none; }
.out-pop b { color: #fff; }
.out-pop .op-sub { color: #ffd27a; font-size: 12.5px; }
/* 667x375 などの狭い横画面でも、上の帯が 1 行に入るように帯のボタンの左右を少し詰める */
@media (max-width: 760px) {
  #scr-select .bar-right .btn.small { padding-inline: 12px; }
  #scr-select .bar-right .btn.small.out-btn { padding-inline: 10px; }
  #scr-select .bar-title { font-size: 20px; }
}
.out-btn[data-out="bt"] .ob-name { color: var(--accent); }
.out-btn[data-out="speaker"] .ob-name { color: #ffd27a; }

/* かんたん調整（js/calib.js）。上の帯の下は全部が叩く場所 */
.calib {
  position: fixed; inset: 0; z-index: 60;
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(130, 100, 255, 0.22), transparent 60%),
    linear-gradient(180deg, #140f30, var(--bg) 60%);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.cal-top { display: flex; align-items: center; gap: 12px; padding: 6px max(16px, env(safe-area-inset-right, 0px)) 6px max(16px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--line); background: rgba(16, 15, 38, 0.92); }
.cal-title { margin: 0; flex: none; font: 700 18px var(--font-body); letter-spacing: 0.06em; }
.cal-step { flex: 1 1 auto; min-width: 0; color: var(--fg-dim); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-top .btn.small.cal-quit { flex: none; min-height: 44px; padding-inline: 20px; }
.cal-main { position: relative; min-height: 0; overflow: hidden; }
.calib.measuring .cal-main { touch-action: none; cursor: pointer; }
.cal-view { position: absolute; inset: 0; display: none; }
.calib[data-phase="eye"] .cal-view, .calib[data-phase="result"] .cal-view { display: block; }
.cal-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cal-hud { position: absolute; left: 14px; top: 8px; max-width: 45%; display: flex; flex-direction: column; gap: 2px; pointer-events: none; text-shadow: 0 1px 6px #000; }
.cal-hud .cal-hud-s { margin: 0; font-size: 12.5px; color: var(--fg-dim); }
/* 「練習 あと 4 回」「本番 あと 8 回」 */
.cal-cl { font-weight: 700; color: var(--fg-dim); }
.cal-cl.real { color: var(--accent); }
.cal-tip { color: #ffe7a6; }
.cal-num { font-size: 11.5px; color: var(--fg-mute); }
.cal-pane {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; align-items: center; padding: 12px 16px;
}
.cal-pane > * { margin-block: auto; }   /* 縦の真ん中に。入りきらなければ上から並べてスクロール */
.calib[data-phase="eye"] .cal-pane { display: none; }
/* 結果: 左に値とボタン、右に流れ続けるノーツ */
.calib[data-phase="result"] .cal-pane { right: 50%; align-items: stretch; padding-right: 10px; }
.calib[data-phase="result"] .cal-view { left: 50%; }
.cal-intro, .cal-stage, .cal-ask { width: min(660px, 100%); display: flex; flex-direction: column; gap: 12px; }
.cal-stage { align-items: center; text-align: center; gap: 8px; pointer-events: none; }
.cal-out { display: flex; flex-direction: column; }
.cal-k { margin: 0; font: 600 12px var(--font-display); letter-spacing: 0.18em; color: var(--accent); }
.cal-lead { margin: 0; font-size: 15px; }
.cal-note { margin: 0; color: var(--fg-dim); font-size: 12.5px; }
.cal-big { margin: 0; font-size: 22px; font-weight: 700; }
.cal-count { margin: 0; font-size: 16px; color: var(--fg-dim); }
.cal-n { display: inline-block; min-width: 1.4em; text-align: center; font-size: 46px; line-height: 1.1; color: #fff; }
.cal-n.bump { animation: cal-bump 0.18s ease-out 1; }
@keyframes cal-bump { 0% { transform: scale(1.3); } 100% { transform: none; } }
.cal-hud .cal-hud-l { margin: 0; font-size: 13.5px; font-weight: 700; }
.cal-hud .cal-count { font-size: 13px; }
.cal-hud .cal-n { font-size: 30px; }
.cal-go { display: flex; flex-wrap: wrap; gap: 10px; }
.cal-go .btn { flex: 1 1 200px; padding-inline: 16px; }
.cal-go .btn.big { flex: 2 1 280px; }
.cal-res { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 440px; margin-inline: auto; }
.cal-val {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 8px; align-items: center;
  padding: 6px 8px 6px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
}
.cal-val .cv-l { grid-column: 1; grid-row: 1; font-size: 12.5px; color: var(--fg-dim); }
.cal-val .cv-v { grid-column: 1; grid-row: 2; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-val .cv-v b { font-size: 22px; color: #fff; }
.cal-val .nudge { grid-row: 1 / span 2; min-width: 48px; min-height: 44px; font-size: 20px; line-height: 1; }
.cal-acts { display: flex; gap: 10px; }
.cal-acts .btn { flex: 1 1 0; padding-inline: 12px; }
@media (max-height: 420px) {
  .cal-top { padding-block: 3px; }
  .cal-intro, .cal-ask { gap: 9px; }
  .cal-res { gap: 6px; }
  .cal-res .cal-note { font-size: 11.5px; line-height: 1.45; }
}
/* 縦長（「縦のまま使う」を選んだとき）: 結果は上に値、下にノーツ */
@media (orientation: portrait) and (max-width: 600px) {
  .calib[data-phase="result"] .cal-pane { right: 0; bottom: 45%; padding-right: 16px; }
  .calib[data-phase="result"] .cal-view { left: 0; top: 55%; }
  .cal-hud { max-width: 60%; }
}

/* ---- 006 A: エディタの流れ・演出・スライド ---- */
/* タブ 4 つ（ノーツ / 譜面情報 / テンポ・拍子 / 演出）。✕ と並ぶ幅・低い画面では短い名前 */
.tab { white-space: nowrap; padding-inline: 2px; }
.tab .tl-s { display: none; }
@media (max-width: 1100px), (max-height: 500px) {
  .tab .tl-f { display: none; }
  .tab .tl-s { display: inline; }
}
/* 速さ・停止・演出の行: 1 行目は 位置 / 値 / ×、2 行目から 変わり方・長さなど */
.ev-box { display: flex; flex-direction: column; gap: 4px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 8px; }
.ev-box.on { border-color: #ffe36b; background: rgba(255, 227, 107, 0.06); }
.ev-sub { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ev-l { flex: none; font-size: 12px; color: var(--fg-dim); white-space: nowrap; }
.ev-sub > select, .ev-sub > input { flex: 1 1 0; }
.ev-sub > .stp { flex: 1.5 1 0; }
.ev-sub input, .ev-sub select, .fx-add select, .shape-row select {
  min-height: 34px; width: 100%; min-width: 0; padding: 4px 8px;
  background: #17163a; border: 1px solid var(--line-2); border-radius: 6px;
}
.ev-sub input[type="color"] { padding: 2px 4px; cursor: pointer; }
.ev-sub .stp input { padding-inline: 2px; }
.ev .ev-pos { align-self: stretch; min-height: 34px; }
.fx-name { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fxk-dim .fx-name { color: #c4a8ff; }
.fxk-tint .fx-name { color: #ff9ad8; }
.fxk-board .fx-name { color: #9fd0ff; }
.fxk-lanes .fx-name { color: #9dffb0; }
.fxk-flash .fx-name { color: #fff09a; }
.fx-limit { margin: 0; line-height: 1.5; }
/* 演出のキーの 1 行の要約（押すと開く） */
.fx-sum {
  display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 34px; padding: 2px 8px;
  border: 1px solid var(--line-2); border-radius: 6px; background: rgba(255, 255, 255, 0.04);
  cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; font-size: 13px;
}
.fx-sum:hover { background: rgba(255, 255, 255, 0.09); }
.ev-box.open .fx-sum { border-color: var(--accent); }
.fx-sum .fx-name { flex: none; font-size: 13px; }
.fx-sum .fx-v { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--fg-dim); }
.fx-sw { flex: none; width: 14px; height: 14px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55); }
.fx-warn-i { flex: none; color: #ff9a5c; font-weight: 700; }
.fx-caret { flex: none; color: var(--fg-mute); }
.fx-near { align-self: flex-start; padding-inline: 12px; }
.fx-add { display: flex; gap: 6px; align-items: stretch; }
.fx-add select { flex: 1 1 0; }
.fx-add .btn { flex: 1.6 1 0; min-width: 0; padding-inline: 8px; }
/* レーンを手で: 6 個 × 2 段 */
.fx-lanes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.fx-lanes .fx-lane { min-height: 40px; min-width: 0; padding: 0; font: 700 14px var(--font-display); color: var(--fg-mute); }
.fx-lanes .fx-lane.on { background: rgba(157, 255, 176, 0.2); border-color: #9dffb0; color: #fff; }
/* スライドの点の 2 段目: 判定・持ち替え・× */
.pt .pt-opts { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; padding-left: 48px; }
.pt-opts .chk { min-height: 34px; white-space: nowrap; }
.pt-opts .mini { margin-left: auto; min-width: 40px; min-height: 34px; }
/* 形の道具 */
.shape-row { display: flex; align-items: center; gap: 6px; }
.shape-row select { flex: 1 1 0; }
.shape-row .btn { flex: none; padding-inline: 12px; }
@media (max-height: 500px) and (min-width: 641px) {
  .ev-sub input, .ev-sub select, .fx-add select, .shape-row select { min-height: 40px; }
  .pt-opts .chk, .pt-opts .mini { min-height: 40px; }
  .fx-add .btn, .shape-row .btn { min-height: 40px; }
  .ev .ev-pos { min-height: 40px; }
  .fx-sum, .fx-near { min-height: 40px; }
}

/* ---- 006 B: タッチ音 ---- */
/* 設定「ずれの調整」のタッチ音の行（自動 / 鳴らす / 鳴らさない）。ボタンは出力の 3 つと同じ形（高さ 44px） */
.tm-touch .set-label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.tm-touch .tm-sub { font-size: 12px; font-weight: 500; color: var(--fg-dim); }
.tm-touch .tm-sb { min-width: 88px; }
/* いま鳴らさないときは、説明の行を黄色に */
.tm-touch-note.off { color: #ffd27a; }
/* かんたん調整の結果: 新しい判定のずれでタッチ音が鳴る・鳴らないが変わるときの 1 行 */
.cal-touch { color: #ffd27a; }
.cal-touch[hidden] { display: none; }
/* 出力の切り替えの知らせ: 「タッチ音なし」は 1 行目に足すと折り返すので、2 行目に小さく */
.out-pop .op-note { color: var(--fg-dim); font-size: 12.5px; }
/* 設定「画面全体の光（演出）」の切り替え（光に弱い人向け）。押す所の高さを 44px に */
.set-flash-row .switch { min-height: 44px; }

/* ---- 007: エディタの使いやすさ・BPM・プリセット ---- */
/* K: ノーツ 0 の自作譜面（曲えらびの札とレベルの横） */
.chip.no-notes { background: rgba(255, 154, 92, 0.18); color: #ffb98a; font: 700 11px/22px var(--font-body); box-shadow: inset 0 0 0 1px rgba(255, 154, 92, 0.6); }
.diff-none { display: block; font-size: 10.5px; font-weight: 700; color: #ffb98a; white-space: nowrap; }
.diff.on .diff-none { color: #6a2a00; }
/* K: 音が止まっていたときのポーズ画面の 1 行 */
.pause-note { margin: 0; max-width: min(420px, 86vw); text-align: center; color: #ffd27a; font-size: 14px; line-height: 1.5; }
.pause-note[hidden] { display: none; }
/* V: 上の帯の時刻（押すと「小節へ移動」）・下の帯の「カーソル …」 */
.tb.ed-time { padding-inline: 4px; }
.st-go { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.st-go:hover { color: var(--accent); }
/* V: 「小節へ移動」の小窓の番号の欄（指で押せる大きさ） */
.goto-stp { max-width: 380px; margin-top: 6px; }
.goto-stp .stp-b { min-width: 48px; min-height: 44px; font-size: 18px; padding-inline: 4px; }
.goto-stp input { min-width: 0; min-height: 44px; font-size: 18px; background: #0d0c22; border: 1px solid var(--line-2); border-radius: 8px; }
/* V: グリッドの小窓の文字のボタン（「位置も幅も自由」「横の刻みに合わせる」「幅だけ自由」）は 1 行で */
.grid-pop .gp-chip.gp-wide { flex: 1 1 auto; white-space: nowrap; padding: 0 6px; font: 700 12.5px var(--font-body); }   /* 幅は字の長さに合わせて分ける */
/* W: 左の幅の数字（上に「置く」「選択」の 2 段。押すと幅のボタン） */
.wval {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-width: 40px; min-height: 34px; padding: 1px 3px; line-height: 1.05;
  border: 1px solid var(--line-2); border-radius: 6px; background: rgba(255, 255, 255, 0.04); cursor: pointer;
}
.wval:hover { background: rgba(255, 255, 255, 0.1); }
.wval .wv-l { font-size: 12px; font-weight: 700; color: var(--fg-dim); }
.wval .wv-n { font-size: 15px; font-weight: 700; }
.wval.of-sel { border-color: rgba(127, 230, 255, 0.55); }
.wval.of-sel .wv-l { color: var(--accent); }
/* W: PC（高さ 501px 以上）は幅の －／＋ を 30px 以上に（道具の列を 112px にして、数字の欄を詰める。007 スマホ体験 20） */
@media (min-width: 641px) and (min-height: 501px) {
  .ed-body { grid-template-columns: 112px minmax(0, 1fr) 340px; }
  .ed-tools .wrow .mini { flex: 0 0 30px; }
  .ed-tools .wrow .wval { flex: 1 1 0; min-width: 0; }
}
@media (min-width: 641px) and (max-width: 1100px) and (min-height: 501px) {
  .ed-body { grid-template-columns: 112px minmax(0, 1fr); }
}
@media (max-height: 500px) and (min-width: 641px) {
  .ed-tools .wval { align-self: stretch; min-height: 40px; padding: 1px 0; }
  .ed-tools .wval .wv-n { font-size: 14px; }
}
/* W: 幅のボタン（1・2・3・4・5・6・12。各 44px 四方以上。列の数は末尾の「012 E」㉓） */
.popmenu.wmenu { display: grid; grid-template-columns: repeat(3, 48px); gap: 6px; min-width: 0; padding: 8px; }
.popmenu.wmenu .pm-head { grid-column: 1 / -1; padding: 0 2px 2px; white-space: nowrap; }
.popmenu.wmenu button { min-width: 48px; min-height: 44px; padding: 0; text-align: center; font: 700 17px var(--font-display); border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.05); }
/* W: 何個か選んだときの「幅をそろえる」「幅をなめらかに変える」 */
.wbtns { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.wbtns .wbtn { min-width: 0; min-height: 44px; font-size: 16px; }
.sw-row { display: flex; align-items: center; gap: 6px; }
.sw-row .sw-keep { flex: 1 1 0; min-height: 40px; }
/* E: 行の「位置 ◀ ▶」とまとまりの名前 */
.ev-move .ev-mv { flex: 0 0 auto; min-width: 48px; min-height: 36px; }
.ev-grp { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-size: 11.5px; color: #ffb6e1; }
/* 019: 符号を返す ± は行の右の端に。ジャンプの行は「＋4 拍」（符号と単位）を ± の左に。＋ と ×（削除）の間は 12px */
.ev-move .ev-sign { margin-left: auto; }
.ev-grp + .ev-sign { margin-left: 0; }
.ev-jby { margin-left: auto; white-space: nowrap; font-size: 13px; font-weight: 700; color: #ff9a52; }
.ev-jby + .ev-sign { margin-left: 0; }
.ev.ev-j { grid-template-columns: 96px minmax(0, 1fr) 46px; }
.ev.ev-j > .mini.danger { justify-self: end; width: 40px; }
/* E: プリセット（種類 → 選べる物 → 入れる） */
.pre-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.pre-kind { min-height: 40px; font-size: 13px; padding: 2px 4px; }
.pre-opt { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pre-opt .ev-l { min-width: 64px; }
.pre-v { flex: 1 1 0; min-width: 52px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 3px; font-size: 13px; padding: 2px 2px; white-space: nowrap; }   /* 「ピンク」も 1 行（高さをそろえる） */
.pre-add { width: 100%; min-height: 44px; padding-inline: 8px; white-space: pre-line; line-height: 1.3; }   /* 2 行目に選んでいる物 */
/* E: 入れたプリセット */
.ev.grp-row { grid-template-columns: 96px minmax(0, 1fr) 40px; }
.grp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; color: #ffb6e1; }
/* まとまりの「◀ 1 小節」「◀ 1 拍」「1 拍 ▶」「1 小節 ▶」は 4 つを 1 行に等分（340px の詳細パネルに収める） */
/* 上の段に「◀ 1 小節」「1 小節 ▶」、下の段に「◀ 1 拍」「1 拍 ▶」（隣り合う押し間違いを避ける。007 スマホ体験 再確認 6） */
.ev-box.grp .ev-move { display: grid; grid-template-columns: auto repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.ev-box.grp .ev-move > .ev-l { grid-row: 1 / 3; }
.ev-box.grp .ev-move > .ev-mv:nth-child(2) { grid-area: 1 / 2; }
.ev-box.grp .ev-move > .ev-mv:nth-child(5) { grid-area: 1 / 3; }
.ev-box.grp .ev-move > .ev-mv:nth-child(3) { grid-area: 2 / 2; }
.ev-box.grp .ev-move > .ev-mv:nth-child(4) { grid-area: 2 / 3; }
.ev-box.grp .ev-mv { min-width: 0; padding-inline: 2px; font-size: 13px; white-space: nowrap; }
/* W: 1 レーン刻みのときの「階段になります」と「幅だけ自由にする」 */
.sw-note { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: #ffd27a; line-height: 1.45; }
.sw-note .mini { min-height: 40px; padding-inline: 10px; }
/* 何個か選んだときの赤い「削除」は幅の道具から離す */
.del-row { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
@media (max-height: 500px) and (min-width: 641px) {
  .ev-move .ev-mv { min-height: 40px; }
}
/* T: 音源から BPM を調べる（テンポタブのボタン・進み具合・結果の小窓） */
.bpm-find { width: 100%; margin-bottom: 6px; padding-inline: 8px; }
.bpm-bar { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.bpm-bar i { display: block; width: 0; height: 100%; background: var(--accent); transition: width 0.1s linear; }
.bpm-cands { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 6px; margin: 4px 0 10px; }
.bpm-cand { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-width: 0; min-height: 48px; padding: 4px 10px; text-align: left; }
.bpm-cand .bpm-main { font-size: 15px; white-space: nowrap; }
.bpm-cand .bpm-rel { font-size: 12px; }
.bpm-cand .bpm-main b { font-size: 18px; }
.bpm-cand .bpm-sub { font-size: 11.5px; color: var(--fg-dim); }
.bpm-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.bpm-play { flex: 1 1 240px; padding-inline: 12px; }
.bpm-play.on { filter: brightness(1.25); }
.bpm-bars { display: flex; align-items: center; gap: 6px; flex: 1 1 300px; }
.bpm-bars .bpm-l { flex: 0 0 auto; font-size: 13px; color: var(--fg-dim); }
.bpm-shift { flex: 1 1 0; min-width: 88px; min-height: 44px; font-size: 15px; }
.bpm-note { color: #ffd27a; line-height: 1.5; }
.bpm-now { margin: 0 0 2px; color: var(--fg); font-weight: 700; }

/* ---- 008: 多指・ULTRA ---- */
/* ULTRA の色（白銀。ほかの 6 色と見分けやすく） */
:root { --d-ultra: #e6e9ff; }
.d-ultra { --dc: var(--d-ultra); }
/* 難易度のボタンは 4 つ並ぶので、最小幅を 84px → 64px に（flex: 1 1 0 で等分のまま。3 つの曲の見た目は変わらない） */
.diff { min-width: 64px; }
/* 多指の札「多指」（レベルの数字の右。選んだボタンでは文字の色に合わせて暗くなる） */
.mf-tag { display: inline-block; margin-left: 3px; padding: 0 3px; border: 1px solid currentColor; border-radius: 3px; font: 700 10.5px/14px var(--font-body); letter-spacing: 0; vertical-align: 4px; }
/* 曲の一覧の札: 多指の難易度は数字の後ろに小さく「多」 */
.chip.multi .mf-c { margin-left: 1px; font: 700 10px var(--font-body); }
/* 詳細: 多指の難易度を選んでいるときの 1 行（難易度の行のすぐ下） */
.mf-note { margin: -6px 0 0; line-height: 1.45; }
/* 5 曲目のジャケット（譜面役 A の案: 黒鍵 → 象牙の白鍵 → プリズムの紫） */
.j-demo.j-alt4 { background: linear-gradient(135deg, #14121e 0%, #f2ecdf 52%, #7a5cff 100%); color: #14121e; }
/* 6 曲目のジャケット（場面の色を一周する万華鏡。色は譜面役 A の案。011） */
.j-demo.j-alt5 { background: conic-gradient(from 30deg, #d0402a, #ffd040, #3aa05a, #20c0c0, #2a6fd0, #6a4c9c, #c02a70, #d0402a); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75); }
/* 結果画面: 多指の譜面でスマホが指を外したとき */
.res-cancel { margin: 8px 0 0; color: #ffb98a; font-size: 13px; line-height: 1.45; }
.res-cancel span { display: inline-block; }   /* 文の途中で折らない（入らなければ文の切れ目で 2 行に） */
@media (max-height: 500px) {
  .res-cancel { grid-column: 1 / -1; margin-top: 2px; font-size: 12.5px; }
}
/* 667x375 など詳細の欄が狭いとき（中身 230px（014））、4 つの難易度を 1 行に。最小幅 52px・高さ 47px のまま（進行役の決め: 667x375 は 52px 以上）。
   名前・数字・札を少し小さくして、ボタンの中に収める */
@media (max-height: 520px) and (min-width: 600px) and (max-width: 760px) {
  .diff-row.d4 { gap: 4px; }
  .diff-row.d4 .diff { min-width: 52px; min-height: 47px; justify-content: center; padding-inline: 2px; }
  .diff-row.d4 .diff-name { font-size: 10.5px; letter-spacing: 0.04em; }
  .diff-row.d4 .diff-lv { font-size: 19px; white-space: nowrap; }
  .diff-row.d4 .mf-tag { margin-left: 1px; padding: 0 1px; font-size: 10px; line-height: 12px; vertical-align: 3px; }
}

/* ---- 009: 重ね置き・スライドの形・トレース ⇔ スライド ---- */
/* 下の帯の「注意 N」（押すと注意の一覧。重なりそのものは悪くないので「重なり」とは呼ばない）。当たりは文字の外へ少し広げる（帯の高さは変えない） */
.st-warn { padding: 3px 10px; margin: -3px -10px; border: 0; background: none; color: #ff9a5c; font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.st-warn:hover { color: #ffc29a; }
/* 注意の一覧（下の帯から上へ出す）。長い行は折り返す */
.popmenu.warn-menu { max-width: min(560px, calc(100vw - 16px)); }
.popmenu.warn-menu button { white-space: normal; line-height: 1.4; font-size: 13px; }
.popmenu.warn-menu .pm-head { color: #ff9a5c; }
/* ノーツを選んでいないときの詳細の注意の行（押すとそのノーツへ） */
.warn-rows { display: flex; flex-direction: column; gap: 4px; }
.warn-row {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 8px; text-align: left;
  border: 1px solid rgba(255, 154, 92, 0.45); border-radius: 6px; background: rgba(255, 154, 92, 0.07);
  color: var(--fg); font-size: 12.5px; line-height: 1.35; cursor: pointer;
}
.warn-row:hover { background: rgba(255, 154, 92, 0.16); }
.warn-row .mono { flex: none; color: #ffb98a; font-size: 12px; }
/* 形の道具: 波の曲がり方（S字 / まっすぐ）と、弧・円の 3 つのボタン */
.sh-chips { display: flex; align-items: center; gap: 6px; }
.sh-chips .sh-chip { flex: 1 1 0; min-height: 40px; }
.sh-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sh-btns .btn { min-width: 0; min-height: 44px; padding-inline: 4px; white-space: nowrap; font-size: 13.5px; letter-spacing: 0; }
.panel .sh-go { padding-inline: 10px; }
/* 選んだ点の行の下の「この点の前を直角に」（押せないときは押せない見た目と理由） */
.pt .pt-corner { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.pt-corner .btn { min-height: 40px; }
.pt-corner .fld-n { margin: 0; }
/* 選んだノーツの注意（詳細の先頭）と「次の注意へ ›」 */
.warn-head { display: flex; flex-direction: column; gap: 6px; padding: 6px 8px; border: 1px solid rgba(255, 77, 77, 0.55); border-radius: 8px; background: rgba(255, 77, 77, 0.08); }
.warn-cur { margin: 0; min-height: 40px; display: flex; align-items: center; font-size: 12.5px; line-height: 1.4; color: var(--fg); }
.warn-cur b { color: #ff7a7a; margin-right: 2px; }
.warn-next { align-self: flex-end; min-height: 40px; }
/* 全体図の下の「⚠ N」（注意があるときだけ。40px。押すと注意の一覧） */
.ed-warn { position: absolute; z-index: 2; min-width: 40px; height: 40px; padding: 0 6px; border: 1px solid rgba(255, 154, 92, 0.85); border-radius: 8px; background: rgba(42, 18, 30, 0.94); color: #ffb98a; font: 700 13px/1 var(--font-body); white-space: nowrap; cursor: pointer; }
.ed-warn:hover { background: rgba(70, 28, 40, 0.96); color: #ffd2b0; }
.ed-warn[hidden] { display: none; }
/* 変換の直後は詳細の欄を押せない（2 回押しの 2 回目を受けない。なぞって送るのは欄が受ける） */
.panel.lock { pointer-events: none; }
/* 低い画面（指で使う）では「点N」も 40px（入力欄と同じ高さなので行は高くならない） */
@media (max-height: 500px) and (min-width: 641px) {
  .pt .pt-name { min-height: 40px; }
}

/* ---- 010: ノーツ選択欄の 2 ページ目（跳ねる・寄ってくる・ダミー） ---- */
/* 道具の列のページ。data-pg: 0 = 両方、1 / 2 = そのページだけ。2 ページ目の空きは場所だけ取る（ページで列の高さを変えない） */
.ed-tools:not(.pg-2) [data-pg="2"], .ed-tools.pg-2 [data-pg="1"] { display: none; }
.ed-tools .tool-gap { visibility: hidden; pointer-events: none; }
/* 1 列に縦に並ぶ広い画面: 1 ページ目のホールド・スライドの印は 3px ずつ高いので、空きの印を 4px 高くして列の高さをそろえる */
.ed-tools .tool-gap .tool-ico { height: 20px; }
.tool .tl-short { display: none; }
/* ページの切り替え［1/2 ›］／［‹ 2/2］。印は 2 枚のページ（今のページが濃い）。選んでいる道具がもう片方のページにあれば右上に点 */
.tool-page { position: relative; }
.ico-page { width: 24px; height: 14px; margin: 1px 0; }
.ico-page::before, .ico-page::after { content: ""; position: absolute; top: 0; width: 10px; height: 14px; border: 1.5px solid #cfd3ff; border-radius: 2px; box-sizing: border-box; }
.ico-page::before { left: 0; background: #cfd3ff; }
.ico-page::after { right: 0; }
.pg-2 .ico-page::before { background: transparent; }
.pg-2 .ico-page::after { background: #cfd3ff; }
.tool-page.other::after { content: ""; position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px #0f0e24; }
/* 新しい道具の印: 跳ねる（黄緑の棒に玉）・寄ってくる（左から濃くなる棒）・ダミー（点線の枠だけ） */
.ico-hop { clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%); background: radial-gradient(circle at 50% 50%, #fff 0 3.5px, transparent 4px), #c8f526; }
.ico-glide { clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%); background: linear-gradient(90deg, rgba(39, 198, 255, 0.12), rgba(39, 198, 255, 0.5) 45%, #27c6ff 75%); }
.ico-dummy { height: 14px; margin: 1px 0; border: 2px dashed rgba(207, 211, 255, 0.7); border-radius: 4px; box-sizing: border-box; }
/* 狭い所（低い画面の 3 列・幅 640px 以下の横並び）では短い名前 */
@media (max-height: 500px) and (min-width: 641px), (max-width: 640px) {
  .tool .tl-long { display: none; }
  .tool .tl-short { display: inline; }
  /* 道具を横に並べる所では段の高さが一番高い印で決まるので、空きの印はホールドの印と同じ高さに */
  .ed-tools .tool-gap .tool-ico { height: 22px; margin-top: -3px; }
}
/* 跳ねるノーツの着地の一覧（曲がり方の欄の代わりに ×。押す物は 34px、低い画面は 40px） */
.hop-pts .pt-del { justify-self: start; min-width: 40px; min-height: 34px; }
@media (max-height: 500px) and (min-width: 641px) {
  .hop-pts .pt-del { min-height: 40px; }
}
/* 着地を足す（詳細の「＋ 着地を足す」。入れている間は黄緑に光る。盤面の左上の札と下の帯の「着地を足す中 ✕」は押すと終わる） */
.btn.hop-add.on { background: linear-gradient(180deg, #e2ff7a, #a8d916); color: #1b2405; box-shadow: inset 0 0 0 2px #f3ffc2, inset 0 0 16px rgba(255, 255, 255, 0.7); }
.st-hopadd { padding: 3px 10px; margin: -3px -10px; border: 0; background: none; color: #c8f526; font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.st-hopadd:hover { color: #f3ffc2; }
/* 足す中の札（盤面の左上。拍の数字・波形の列の上から一番左のレーンの上の端にかかる。押すと終える） */
.hop-badge { position: absolute; z-index: 2; left: 4px; top: 4px; height: 40px; padding: 0 12px; border: 1px solid #c8f526; border-radius: 8px; background: rgba(26, 32, 6, 0.92); color: #e2ff7a; font: 700 13px/1 var(--font-body); white-space: nowrap; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; }
.hop-badge:hover { background: rgba(48, 60, 10, 0.96); color: #f3ffc2; }
.hop-badge[hidden] { display: none; }

/* 011 E: タッチでのノーツの編集 */
/* 選んだノーツのそばに浮かぶ帯（D4）。置き場は editor.js が transform で書く。ボタンの大きさは editor.js が --ed-bar-btn に入れる。
   長押しで文字の選択・吹き出しを出さない、速い 2 回押しで拡大しない */
.ed-selbar {
  position: absolute; left: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 3px;
  border: 1px solid rgba(150, 200, 255, 0.55); border-radius: 10px; background: rgba(14, 13, 34, 0.94); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.ed-selbar[hidden] { display: none; }
.ed-selbar .sb-g { display: flex; gap: 2px; }
.ed-selbar .sb-g[hidden] { display: none; }
.ed-selbar .sb-end { margin-left: 6px; }   /* 削除の前は 12px（まとまりの間 6px と合わせて） */
.ed-selbar button {
  min-width: var(--ed-bar-btn); height: var(--ed-bar-btn); padding: 0 4px; border: 1px solid var(--line-2); border-radius: 7px;
  background: #1d1b45; color: var(--fg); font: 700 13px/1 var(--font-body); cursor: pointer;
  touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.ed-selbar button:active { background: #2e2b72; }
.ed-selbar .sb-w { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.ed-selbar .sb-w small { font-size: 10px; font-weight: 600; color: var(--fg-dim); }
.ed-selbar .sb-danger { color: #ff9aa8; }
/* 範囲を選ぶ中の札（D6。着地を足す中の札と同じ形・場所。色は範囲選択の枠の水色） */
.range-badge { border-color: #96c8ff; background: rgba(10, 24, 44, 0.92); color: #bfe0ff; }
.range-badge:hover { background: rgba(18, 40, 70, 0.96); color: #e4f2ff; }
/* 盤面の初めての案内（決めたこと 13。盤面の上の端、帯・選んだ所に重なるなら下の端。top は editor.js が書く。押しは盤面へ通す） */
.ed-board-hint {
  position: absolute; z-index: 4; left: 50%; top: 4px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 16px);
  padding: 8px 14px; border-radius: 10px; background: rgba(36, 33, 79, 0.96); border: 1px solid var(--line-2); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  font-size: 13px; line-height: 1.45; pointer-events: none;
}
.ed-board-hint[hidden] { display: none; }

/* 012 E: エディタの小さな残り */
/* ㉓ 幅のボタン（WIDTH_BTNS の 7 個）: メニューは 4 列 × 2 段（1 2 3 4 ／ 5 6 12。ボタン 48×44px）、詳細の「幅をそろえる」は 7 列 */
.popmenu.wmenu { grid-template-columns: repeat(4, 48px); }
.wbtns { grid-template-columns: repeat(7, minmax(0, 1fr)); }
/* ⑮ 何個か選んだときの「種類をまとめて変える…」 */
.panel .btn-col > select { min-height: 44px; }
@media (max-height: 500px) {
  /* ⑧ プレビューの「表示／隠す」は 40px。下の帯の小さな文字（カーソル・注意・着地を足す中）は押せない文字に
     （同じ操作は上の帯の時刻・全体図の下の「⚠ N」・盤面の左上の札。どれも 40px） */
  .pv-head .mini { min-height: 40px; }
  .ed-status .st-go, .ed-status .st-warn, .ed-status .st-hopadd { pointer-events: none; cursor: default; text-decoration: none; }
  /* ⑩ スライドの点の行の「判定」「持ち替え ⇄」はほかの .chk と同じ 44px */
  .pt-opts .chk { min-height: 44px; }
}
/* ㉘ 盤面の初めての案内: 横の置き場（left）と幅（max-width）は editor.js が書く（レーンの所だけ）。押せるのは右端の［✕］（40px）だけ */
.ed-board-hint { left: 0; transform: none; display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 14px; }
.ed-board-hint .bh-t { flex: 1 1 auto; min-width: 0; padding: 4px 0; }
.ed-board-hint .bh-x {
  flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line-2); border-radius: 8px; background: rgba(255, 255, 255, 0.06);
  color: var(--fg); font: 700 15px/1 var(--font-body); cursor: pointer; pointer-events: auto; touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
/* ㉙ 帯の上から縦になぞると画面が動く（editor.js）。ブラウザのスクロールに押しを取られないように */
.ed-selbar, .ed-selbar button { touch-action: none; }
/* ㉜ 帯の［削除］と［✕］の間は 10px（押し違えない） */
.ed-selbar .sb-end { gap: 10px; }

/* ---- 014: 曲えらびの押しやすさ・667 の並び ---- */
/* ① 上の帯（曲えらび・設定の 2 つだけが使う）のボタンは 44px（指で押せる高さ）。幅は変えない（帯の横の並びは今のまま） */
.bar .btn.small, .bar .btn.small.out-btn { min-height: 44px; }
/* ① 詳細の「ノーツの速さ」の［－］［＋］は 44×44px */
.speed .mini { min-width: 44px; min-height: 44px; font-size: 18px; line-height: 1; touch-action: manipulation; }
/* 曲えらび・設定の画面全体も［－］［＋］と同じ manipulation（カード・難易度を素早く 2 回押しても拡大しない。指で送る・2 本指の拡大はそのまま。014 F1） */
#scr-select, #scr-settings { touch-action: manipulation; }
/* ② 2 列のときは一覧が左・詳細が右（844 と同じ）。1 列（幅 760 以下で高さもある）は今のまま詳細が上（order: -1） */
@media (min-width: 761px), (max-height: 520px) and (min-width: 600px) {
  #scr-select .song-detail { order: 0; }
}
/* ② 667x375 など: 詳細は右に 264px（中身 230px。4 つの難易度と速さの行が入る）、残りを一覧へ */
@media (max-height: 520px) and (min-width: 600px) and (max-width: 760px) {
  #scr-select .select-body { grid-template-columns: minmax(0, 1fr) minmax(0, 264px); column-gap: 12px; }
  .speed { gap: 6px; }
}
/* ② 一覧が狭いとき（400px 以下: 667x375、ノッチのある iPhone の 844x390 で 346〜370px）はカードを詰め、曲名に 9 文字分（15px で 135px）を残す。
   一覧そのものの幅で決める（container query）。使えない古い端末は今の見た目のまま */
#scr-select .song-list { container-type: inline-size; }
@container (max-width: 400px) {
  .song { grid-template-columns: 48px minmax(0, 1fr) auto auto; gap: 8px; padding: 8px; }   /* 1 列目もジャケットに合わせて 48px。右の余白も 8px（014 F6） */
  .song-jacket { width: 48px; height: 48px; font-size: 22px; }
  .song-title { font-size: 15px; }
  .song-diffs { gap: 3px; }
  .chip { min-width: 24px; padding: 0 4px; }
}

/* ---- 015: 小さな残り ---- */
/* T 上に残す知らせ（見た目は #toast と同じ。下の段 #toast の高さ（--toast-up。util.js が書く）の分だけ上。出入りは薄くなるだけで、下から滑ってこない）。
   下の段が先に消えたら --toast-up を 0 にして、下の段の所へ下ろす（動かさずに移す。G3） */
#toast-old {
  bottom: calc(18px + env(safe-area-inset-bottom, 0px) + var(--toast-up, 48px));
  transform: translate(-50%, 0); transition: opacity 0.2s;
}
#toast-old.show { opacity: 1; }
/* C1 多指の案内: ふだんは長い文。高さの低い横画面（667・844 など）は短い文だけ（1 行）。［スタート］は 48px・詳細の間は 8px（速さの行を見える所に）。
   844 は曲名が 2 行になると速さの行が隠れるので、667 だけでなく横画面全部に当てる（利用者が決めたこと 11。G4）。PC（1280）・1 列（縦）は今のまま */
.mf-short { display: none; }
@media (max-height: 520px) and (min-width: 600px) {
  .mf-long { display: none; }
  .mf-short { display: inline; }
  #scr-select .song-detail { gap: 8px; }
  #scr-select .song-detail .btn.start { min-height: 48px; }
}
/* C2 印（FC・AP）が無いカードは 3 列（空の 4 列目の前の間 8px を曲名へ。:has が使えない端末は今のまま） */
@container (max-width: 400px) {
  .song:not(:has(> .badge)) { grid-template-columns: 48px minmax(0, 1fr) auto; }
}
/* C3 設定の切り替えは 6 つとも 44px（指で押せる高さ。曲えらびの［オート］［ミラー］は 40px のまま） */
#scr-settings .switch { min-height: 44px; }
/* C4 出力の知らせの下の行は、句の途中では折らない */
.out-pop .nw { white-space: nowrap; }

/* ---- 016: エディタの作る速さ ---- */
/* A 道具の列: 選択・移動・消しゴムは両方のページ（016 の 15）。2 ページ目の空きは 2 つ。
   1 列ではホールド・スライドの印（19px 分）と同じ高さにして、2 ページ目（跳ねる 寄る ダミー 空き 空き）を 1 ページ目と同じ高さに */
.ed-tools .tool-gap .tool-ico { height: 19px; }
@media (max-height: 500px) and (min-width: 641px), (max-width: 640px) {
  .ed-tools .tool-gap .tool-ico { height: 22px; margin-top: -3px; }
  .ed-tools .tool-gap.gap-2 { display: none; }  /* 3 列・横並びでは空きは 1 つ */
}
/* 低い画面（3 列）: クリティカルは 2 ページ目の 3 段目の左（1 ページ目には出さない）。入れている間は ⇆ の左上に金の小さな印 */
@media (max-height: 500px) and (min-width: 641px) {
  .ed-tools .mini.wide { grid-row: 3; grid-column: 1; }
  .ed-tools:not(.pg-2) .mini.wide { display: none; }
  /* F15: 入れている間は ⇆ の下の端に幅いっぱいの金の線 3px と、「1/2 ›」などの字を金に（14x6 の印は ⇆ の絵に隠れて見えにくかった） */
  .tool-page.crit-on::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gold); border-radius: 0 0 7px 7px; }
  .tool-page.crit-on .tool-lbl { color: var(--gold); }
}
/* B 帯: 狭い盤面（editor.js の compact で .sb-c）はまとまりの間を 4px、［✕］の前の余りを 0 に（6 章。［✕］と［削除］の間 10px はそのまま。F5） */
.ed-selbar.sb-c { gap: 4px; }
.ed-selbar.sb-c .sb-end { margin-left: 0; }
/* D ［貼る］の札（左の列の真ん中。帯と同じ見た目の縦の帯。置き場は editor.js が transform で書く。ボタンの大きさは --ed-bar-btn） */
.ed-paste {
  position: absolute; left: 0; top: 0; z-index: 3; display: flex; flex-direction: column; gap: 4px; padding: 3px;
  border: 1px solid rgba(150, 200, 255, 0.55); border-radius: 10px; background: rgba(14, 13, 34, 0.94); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.ed-paste[hidden] { display: none; }
.ed-paste button {
  width: var(--ed-bar-btn); height: var(--ed-bar-btn); padding: 0; border: 1px solid var(--line-2); border-radius: 7px;
  background: #1d1b45; color: var(--fg); font: 700 13px/1 var(--font-body); cursor: pointer;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.ed-paste button:active { background: #2e2b72; }
.ed-paste .pc-go { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.ed-paste .pc-go small { font-size: 10px; font-weight: 600; color: var(--fg-dim); }
/* F5 帯の終わりは［⋯］［✕］［削除］の順（DOM）。［⋯］と［✕］の間はまとまりの間（狭い盤面 4px）、［✕］と［削除］の間は 10px（.sb-end の gap） */
/* F11 狭い盤面の「コピー」「複製」は左右の余白 2px（2 個以上の帯の幅に余りを作る。6 章の ①） */
.ed-selbar.sb-c .sb-t { padding: 0 2px; }
/* F19 ［⋯］の字は ◀▼▲▶ と見た目の大きさをそろえる */
.ed-selbar .sb-more { font-size: 18px; }
/* F20 盤面の案内は句の途中で折らない（editor.js が句ごとに span.nw にする） */
.ed-board-hint .nw { white-space: nowrap; }
/* F12 帯から開く「寄ってくる元 ›」は横 1 列（←6 … なし … →6。レーンと同じ向き）。今の値に印（.on）。入らない画面では折り返す */
.popmenu.gl-row { flex-direction: row; flex-wrap: wrap; gap: 4px; min-width: 0; padding: 6px 8px 8px; }
.popmenu.gl-row .pm-head { flex: 0 0 100%; padding: 2px 2px 4px; }
.popmenu.gl-row button { min-width: 40px; min-height: 44px; padding: 0 2px; text-align: center; font: 700 14px var(--font-display); border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.05); }
.popmenu button.on { background: rgba(127, 230, 255, 0.2); border-color: var(--accent); color: #fff; }
/* P2 札の線の側の端に、カーソルの線を指す小さな三角（札が線より上 .pc-a は下の端に ▼、線より下 .pc-b は上の端に ▲。editor.js が付ける） */
.ed-paste::after { content: ""; position: absolute; left: 50%; margin-left: -7px; border: 7px solid transparent; pointer-events: none; }
.ed-paste.pc-a::after { top: 100%; border-top-color: rgba(150, 200, 255, 0.85); border-bottom-width: 0; }
.ed-paste.pc-b::after { bottom: 100%; border-bottom-color: rgba(150, 200, 255, 0.85); border-top-width: 0; }
/* P6 の知らせの置き場（html.toast-top）は 017 T（指のエディタの知らせ。017 の節）に置きかえた */
/* F21 1 列の低めの画面（高さ 501〜760px）: 1 ページ 9 個になった道具の列を前より伸ばさない。道具は 40px（印と名前の間・上下の余白を詰める）。
   1280x800 など高い画面は今のまま */
@media (min-width: 641px) and (min-height: 501px) and (max-height: 760px) {
  .ed-tools .tool { min-height: 40px; padding: 1px 2px; gap: 1px; justify-content: center; }
  .ed-tools .tool-lbl { line-height: 13px; }
}

/* ---- 017: 016 の残り（エディタ） ---- */
/* B 帯の ▼ と ▲ の間（逆向きの押し違いを減らす）: 844 は 10px（まとまりの中の 6px ＋ 4px）、狭い盤面（.sb-c）は 8px（2px ＋ 6px）。
   844 は ◀ と ▼・▲ と ▶ の間も 6px（.sb-ar。帯の幅に余りがあるので。017 D14）。狭い盤面はまとまりの間を 4 → 3px に詰めて幅を作る（016 の 6 章の ②） */
.ed-selbar .sb-ar { gap: 6px; }
.ed-selbar .sb-up { margin-left: 4px; }
.ed-selbar.sb-c { gap: 3px; }
.ed-selbar.sb-c .sb-ar { gap: 2px; }
.ed-selbar.sb-c .sb-up { margin-left: 6px; }
/* B 844 は［前］［次］・［複製］［コピー］の間も 6px（.sb-pair。帯の幅に余りがあるので。狭い盤面は今のまま。017 E8） */
.ed-selbar:not(.sb-c) .sb-pair { gap: 6px; }
/* C-e 札の［貼る］: 上の行「貼る N」（10px。4 桁は .pc-many で 9px。017 D8）、下の行は行き先「→5:3」（13px。
   ボタンに入らなければ editor.js が 13〜9px で入る一番大きい字を書く。017 E7）。ボタンの大きさは今のまま */
.ed-paste .pc-go small { white-space: nowrap; }
.ed-paste .pc-go small.pc-many { font-size: 9px; letter-spacing: -0.3px; }
.ed-paste .pc-to { font-size: 13px; line-height: 1; white-space: nowrap; }
/* C-a 札が出た・動いた直後（--pc-guard。editor.js の PC_GUARD_MS）は薄い（押しても何も起きない間）。地（札の背景）は濃いまま、
   ボタン（字と縁）と札の縁だけ薄く（下の小節番号が透けない。017 D7）。editor.js が .pc-ga と .pc-gb を付けかえる（名前が替わるとアニメーションが頭から） */
@keyframes pc-guard-a { from, to { opacity: 0.45; } }
@keyframes pc-guard-b { from, to { opacity: 0.45; } }
@keyframes pc-edge-a { from, to { border-color: rgba(150, 200, 255, 0.25); } }
@keyframes pc-edge-b { from, to { border-color: rgba(150, 200, 255, 0.25); } }
.ed-paste.pc-ga { animation: pc-edge-a var(--pc-guard, 500ms) linear; }
.ed-paste.pc-gb { animation: pc-edge-b var(--pc-guard, 500ms) linear; }
.ed-paste.pc-ga > button { animation: pc-guard-a var(--pc-guard, 500ms) linear; }
.ed-paste.pc-gb > button { animation: pc-guard-b var(--pc-guard, 500ms) linear; }
/* C-a 札の前の場所の点線の枠（守っている間だけ。押しは通す・中は塗らない）。帯・札より上（光りが隠れない。017 D5）。
   点線（::after）は守りの時間（--pc-ghost）で薄くなって消える */
.ed-paste-ghost { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; }
.ed-paste-ghost[hidden] { display: none; }
.ed-paste-ghost::after { content: ""; position: absolute; inset: 0; box-sizing: border-box; border: 2px dashed rgba(150, 200, 255, 0.85); border-radius: 10px; }
@keyframes pc-ghost-a { from { opacity: 1; } to { opacity: 0; } }
@keyframes pc-ghost-b { from { opacity: 1; } to { opacity: 0; } }
.ed-paste-ghost.pc-ga::after { animation: pc-ghost-a var(--pc-ghost, 500ms) ease-in forwards; }
.ed-paste-ghost.pc-gb::after { animation: pc-ghost-b var(--pc-ghost, 500ms) ease-in forwards; }
/* C-a 守りで押しを捨てたら、押した所の札・枠の縁が一瞬明るくなる（.pc-flash。0.25 秒）。光る間は点線も濃く（017 D5） */
@keyframes pc-flash { from { opacity: 1; } to { opacity: 0; } }
.ed-paste.pc-flash::before, .ed-paste-ghost.pc-flash::before {
  content: ""; position: absolute; inset: -3px; border: 2px solid #fff; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 10px rgba(127, 230, 255, 0.9); animation: pc-flash 250ms ease-out forwards;
}
.ed-paste-ghost.pc-flash::after { opacity: 1 !important; }
/* 「視差効果を減らす」でも、守りの見た目（札の薄さ・枠・光り）は「押しても何も起きない間」の印なので元の長さで見せる（017 D6） */
@media (prefers-reduced-motion: reduce) {
  .ed-paste.pc-ga, .ed-paste.pc-gb, .ed-paste.pc-ga > button, .ed-paste.pc-gb > button { animation-duration: var(--pc-guard, 500ms) !important; }
  .ed-paste-ghost.pc-ga::after, .ed-paste-ghost.pc-gb::after { animation-duration: var(--pc-ghost, 500ms) !important; }
  .ed-paste.pc-flash::before, .ed-paste-ghost.pc-flash::before { animation-duration: 250ms !important; }
}
/* T 指で使っているエディタの知らせ（html.toast-ed。置き場は editor.js の placeToast が出すときに決め、次の知らせまで動かさない）。
   横はレーンの所の真ん中（--toast-x）・幅は --toast-mw まで。下の向き: 新しい #toast の下の端が --toast-bot、残した #toast-old がその上。
   上の向き（.toast-top）: #toast の上の端が --toast-top、#toast-old がその下。2 段の間（--toast-up）は util.js が書く（015 のまま） */
html.toast-ed #toast, html.toast-ed #toast-old { left: var(--toast-x, 50%); max-width: var(--toast-mw, calc(100% - 32px)); }
html.toast-ed #toast { bottom: var(--toast-bot, 18px); }
html.toast-ed #toast-old { bottom: calc(var(--toast-bot, 18px) + var(--toast-up, 48px)); }
html.toast-ed.toast-top #toast { top: var(--toast-top, 56px); bottom: auto; transform: translate(-50%, -30px); }
html.toast-ed.toast-top #toast.show { transform: translate(-50%, 0); }
html.toast-ed.toast-top #toast-old { top: calc(var(--toast-top, 56px) + var(--toast-up, 48px)); bottom: auto; }
/* T 盤面のどこにも入らないときは、盤面の外の下の帯（.ed-status）にぴったり重ねて 1 行・13px（入らない文は …。読み上げは全部）。
   出入りは薄くなるだけ。2 段にはしない（editor.js が古い段を消す） */
html.toast-ed.toast-st #toast {
  top: var(--toast-top); bottom: auto; height: var(--toast-h, 21px); max-width: var(--toast-mw);
  padding: 0 12px; font-size: 13px; line-height: calc(var(--toast-h, 21px) - 2px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-radius: 6px; box-shadow: none; transform: translate(-50%, 0); transition: opacity 0.2s;
  border-left: 4px solid var(--accent);   /* 下の帯の文と見分ける色の縦線（017 D12） */
}
/* 下の帯に出している間は、下の帯の文を全部隠す（知らせの横から途中で切れて見えない。017 D12） */
html.toast-ed.toast-st:has(#toast.show) .ed-status > * { visibility: hidden; }
/* T 出してから次のコマで置き直すまで（最大 TOAST_WAIT_MS）は新しい段を見せない（置き直しで跳んで見えないように） */
html.toast-wait #toast { opacity: 0; transition: none; }

/* ---- 018: エディタの残り 2 ---- */
/* N 2 段が前の所に入らないとき、古い段（#toast-old）を今の所に留める（html.toast-pin。上の端 --toast-old-top は editor.js の placeToastIn）。
   横の真ん中・幅は新しい段と同じ（--toast-x・--toast-mw）。util.js が書く --toast-up は使わない（新しい段が先に消えても動かない）。017 の上・下の向きより後に書いて勝たせる */
html.toast-ed.toast-pin #toast-old { top: var(--toast-old-top); bottom: auto; }
/* L 指のエディタの知らせの折り返し: 日本語を文節で折る（auto-phrase。Chromium。html の lang="ja" が要る）・小さい「ゃ」「っ」や「ー」で行を始めない・
   2 行目を 1〜2 字だけにしない・1 行に入らない長い塊だけ途中で折る。keep-all は使わない（空白の無い文が折れない塊になる）。下の帯の 1 行（toast-st）は nowrap のまま */
html.toast-ed #toast, html.toast-ed #toast-old { word-break: auto-phrase; line-break: strict; text-wrap: pretty; overflow-wrap: anywhere; }
/* × 1 新しい［✕］が前の［貼る］の守り（1.5 秒）にかかっている間は、0.5 秒の守りと同じ薄さのまま（.pc-xblock。押しは捨てる。editor.js が守りの終わりに外す）。
   その押しを捨てたら、前の場所の枠は光らせずに［✕］そのものを左右に 3px 揺らす（.pc-shake）。「視差効果を減らす」では薄く点滅 */
.ed-paste > button.pc-xblock, .ed-paste.pc-ga > button.pc-xblock, .ed-paste.pc-gb > button.pc-xblock { animation: none; opacity: 0.45; }
@keyframes pc-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }
@keyframes pc-blink { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.15; } }
.ed-paste > button.pc-shake, .ed-paste.pc-ga > button.pc-shake, .ed-paste.pc-gb > button.pc-shake { animation: pc-shake 250ms linear; }
@media (prefers-reduced-motion: reduce) {
  .ed-paste > button.pc-shake, .ed-paste.pc-ga > button.pc-shake, .ed-paste.pc-gb > button.pc-shake { animation: pc-blink 300ms linear; animation-duration: 300ms !important; }
}

/* ---- 020: 流れ（ノーツごとの速さ） ---- */
/* 流れの色の四角（ノーツタブの「流れ」の名前の横・テンポ・拍子タブの節の見出し。色は editor-layers.js） */
.lay-sw { display: inline-block; flex: none; width: 12px; height: 12px; margin-left: 6px; border-radius: 3px; vertical-align: -1px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5); }
.lay-head .lay-sw { margin-left: 0; }
/* 節の見出しの行: 四角・「流れ N」・「M 個」・［選ぶ］［×］（どちらも 40px 以上） */
.lay-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lay-name { font-weight: 700; white-space: nowrap; }
.lay-cnt { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--fg-dim); white-space: nowrap; }
.lay-head .mini { min-height: 40px; min-width: 48px; }
.lay-head .mini[disabled] { opacity: 0.4; cursor: default; }
/* ［×］は確認なしで消す（↶ で戻せる）ので、［選ぶ］との間を 12px あける */
.lay-head .mini.danger { margin-left: 6px; }
.lay-box > .btn { min-height: 40px; }