/* 音ゲー試作。トップページとは独立した画面なので css/style.css は読まない。 */
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#0a0d12;color:#e8edf3;
  font-family:"Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#stage{display:block;width:100%;height:100%;touch-action:none}

/* 🚨 中身が画面より高くなるので必ずスクロールできるようにすること。
   body が overflow:hidden なので、ここが overflow:visible だと
   はみ出したぶんに**一切手が届かない**。実際にスマホ(375x812)で
   パネルが1275pxになり、「挑む」ボタンが画面の312px下に隠れて押せなかった。
   ⚠️ place-items:center のままスクロールさせないこと。中身が高いと上が切れる。
      flex + margin:auto なら、収まるときは中央・あふれるときは切れずにスクロールする。 */
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:radial-gradient(120% 90% at 50% 40%,rgba(20,28,38,.72),rgba(6,9,13,.94));
  backdrop-filter:blur(3px);z-index:10}
.overlay.hide{display:none}
.panel{width:min(92vw,460px);text-align:center;margin:auto;
  padding:calc(2rem + env(safe-area-inset-top)) 1.6rem 0}

/* 🚨 開始ボタンは下に貼り付けて、スクロールしなくても必ず見えるようにすること。
   ボスが6体並ぶとリストだけで画面が埋まる。 */
/* ⚠️ 背景は下半分を**不透明**にすること。半透明のままだと後ろのボタンが
      透けて「壊れている」ように見える（実際にそう見えた）。 */
.startbar{position:sticky;bottom:0;z-index:3;margin:.6rem -1.6rem 0;
  padding:.5rem 1.6rem calc(.8rem + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(9,12,17,0) 0,rgba(9,12,17,.97) 40%,#090c11 100%);
  backdrop-filter:blur(4px)}
.panel > :last-child{padding-bottom:calc(1.5rem + env(safe-area-inset-bottom))}
.eyebrow{position:relative;font-size:.72rem;letter-spacing:.28em;color:#5c7891;margin:0 0 .7rem}
h1{position:relative;margin:0 0 .5rem;font-size:clamp(1.5rem,5vw,2rem);line-height:1.35;letter-spacing:.02em}
.song{position:relative;margin:0 0 .9rem;color:#8fa6ba;font-size:.9rem}
.how{display:flex;gap:.6rem;justify-content:center;margin:0 0 1.8rem;flex-wrap:wrap}
.key{border:1px solid #2c3b4a;background:#141c25;border-radius:8px;padding:.55rem .8rem;
  font-size:.78rem;color:#a9bccd;line-height:1.5}
.key b{display:block;color:#e8edf3;font-size:.95rem;letter-spacing:.06em}
.btn{font:inherit;font-size:1rem;font-weight:700;letter-spacing:.06em;cursor:pointer;
  padding:.85rem 2.4rem;border-radius:999px;border:0;color:#08131a;
  background:linear-gradient(180deg,#7fe3f0,#38b6c8);
  box-shadow:0 8px 28px -12px rgba(56,182,200,.9)}
.btn:hover{filter:brightness(1.08)}
/* ⚠️ 押せないボタンは押せないと分かる見た目にすること。音合わせの「この値で合わせる」は
      測り終わるまで disabled なので、既定のままだと押せるように見えて空振りする。 */
.btn:disabled{ opacity:.45; cursor:default; filter:none }
.btn:disabled:hover{ filter:none }
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid #7fe3f0;outline-offset:3px}
.sub{margin:1.2rem 0 0;font-size:.74rem;color:#5c7891;line-height:1.7}
.result{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:0 0 1.5rem}
.result div{background:#121a23;border:1px solid #22303d;border-radius:8px;padding:.7rem .4rem}
/* ⚠️ hidden を効かせること。.result div に display を書いていないので既定で効くが、
      あとから display を足すと出しっぱなしになる。 */
.result div[hidden]{display:none}
.result span{display:block;font-size:.68rem;color:#7c93a8;letter-spacing:.1em}
.result b{font-size:1.3rem;font-variant-numeric:tabular-nums}
.perfect b{color:#7fe3f0} .good b{color:#8fd694} .miss b{color:#e08c8c}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* 超必殺ボタン。溜まるまでは沈めておき、満タンで光らせる。
   ⚠️ canvas の上に重ねるので pointerdown を stopPropagation すること。
      しないと「必殺を押したのに斬撃判定も走る」二重入力になる。 */
/* 🚨 下部中央・大きめに配置（ユーザー指示 2026-08-26「必殺技ボタンをもっと
      大っきく真ん中に配置」）。左右の斬撃は画面タップ（左右半分）で取るので、
      中央に置いても誤操作にならない。 */
/* ⚠️ --super-x は keyframe からも参照する（下の superpulse）。
   メディアクエリで位置を右下へ変えるときは --super-x も 0 に変えること。
   忘れると keyframe が -50% のまま残り、拡大縮小のたびに中央基準へ戻ろうとして暴れる。 */
#superBtn{
  --super-x:-50%;
  /* 🚨 --super-lift は**アプリ内ブラウザ用の逃げ**（ユーザー報告 2026-08-26
        「Xのリンクからゲームに行くと必殺技ボタンがXの隠れたバーと少し被る」）。
        X・Instagram・LINE などのアプリ内ブラウザは下部に独自のバーを重ねてくるが、
        env(safe-area-inset-bottom) は **0 を返す**ので CSS だけでは避けられない。
        game.js が UA を見て値を入れる。普通のブラウザでは 0px のままで、
        いまの配置は一切変わらない。
     ⚠️ 既定値の 20px を上げて対処しないこと。全端末でボタンが上がり、
        hud() のゲージ（superTop - 78）も一緒に上がって地面の絵に食い込む。 */
  position:fixed;left:50%;
  bottom:calc(20px + var(--super-lift, 0px) + env(safe-area-inset-bottom));
  transform:translateX(var(--super-x));
  z-index:5;border:1px solid #2c3b4a;background:rgba(18,26,35,.85);color:#43586b;
  font:700 13px/1 inherit;letter-spacing:.14em;padding:.85rem 1.15rem;border-radius:999px;
  transition:color .2s,border-color .2s,box-shadow .2s,background .2s;cursor:pointer}
#superBtn.ready{
  color:#0d1116;border-color:#ffc27a;background:linear-gradient(180deg,#ffd98a,#ff9a5c);
  box-shadow:0 0 0 0 rgba(255,170,90,.55);animation:pulse 1.15s ease-out infinite}
#superBtn:focus-visible{outline:2px solid #ffc27a;outline-offset:3px}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,170,90,.55)}
  100%{box-shadow:0 0 0 16px rgba(255,170,90,0)}}
@media (prefers-reduced-motion:reduce){#superBtn.ready{animation:none}}

.levels{display:flex;gap:.5rem;justify-content:center;margin:0 0 1.2rem}
.lv{font:700 .82rem/1 inherit;letter-spacing:.1em;padding:.6rem 1.4rem;border-radius:999px;
  border:1px solid #2c3b4a;background:#141c25;color:#6f8598;cursor:pointer;transition:.15s}
.lv:hover{border-color:#3d5468;color:#a9bccd}
.lv.on{background:#1d2b36;border-color:#7fe3f0;color:#7fe3f0}
.lv[data-level="hard"].on{border-color:#ff9a5c;color:#ffb27a;background:#2a1d18}
.lv[data-level="easy"].on{border-color:#8fd694;color:#a9dfae;background:#1a2620}
.lv:focus-visible{outline:2px solid #7fe3f0;outline-offset:2px}

.lens{margin-top:-.6rem}
.lens .lv{font-size:.74rem;padding:.45rem 1.1rem}
.lens .lv.on{border-color:#8fd694;color:#a9dfae;background:#1a2620}

/* ボス選び。1行1体。左の色帯がそのままアリーナの色になる（bosses.js の tint）。 */
/* 🚨 一覧そのものをスクロール枠にすること。
      譜面は870本ある。枠にしないと縦に伸びて「挑む」が画面の外へ出る。 */
.bosses{display:grid;gap:.4rem;text-align:left;align-content:start;
  height:min(30vh,300px);overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding-right:.25rem;
  /* 🚨 下に余白を入れること。枠の下端は「挑む」の帯の**下**まで伸びていて、
        実測で下から78px（＝カード約1枚）が帯に隠れる。余白が無いと
        144体目・145体目まで送れない（ユーザー報告 2026-08-25）。 */
  padding-bottom:100px}

/* 横ページ。1ページ＝レベル20刻み。
   🚨 scroll-snap を使うこと。指で払ったとき中途半端な位置で止まると、
      2ページぶんが半分ずつ見える壊れた画面になる。
   ⚠️ 縦（各ページの中身）と横（ページ送り）でスクロールの向きが違うので、
      overscroll-behavior を両方に付けて親へ伝播させないこと。 */
.pager{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  margin:0 0 1.1rem;scrollbar-width:none}
.pager::-webkit-scrollbar{display:none}
.pager > .bosses{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}

/* 難易度の4つ。
   🚨 **1行に収めること**。折り返すと縦が1段ぶん増えて、ボス一覧が1枚も
      見えなくなる（実測: 390×664 で VERY HARD だけ2行目に落ちた）。
      幅は4等分（flex:1）。文字を詰めてでも1行に入れる。 */
.levels.diffs{display:flex;gap:.3rem;flex-wrap:nowrap;margin:0 0 .5rem}
.levels.diffs .lv{
  flex:1 1 0; min-width:0; padding:.5rem .15rem;
  font-size:.62rem; letter-spacing:.01em; white-space:nowrap;
}
.levels.diffs .lv[data-diff="hard"].on{border-color:#ff9a5c;color:#ffb27a;background:#2a1d18}
.levels.diffs .lv[data-diff="vhard"].on{border-color:#ff6b6b;color:#ff9a9a;background:#2a1618}
.levels.diffs .lv[data-diff="easy"].on{border-color:#8fd694;color:#a9dfae;background:#1a2620}

/* ボスの並びのタブ */
.bands{display:flex;gap:.3rem;justify-content:center;flex-wrap:wrap;margin:0 0 .6rem}
.band{font:700 .72rem/1 ui-monospace,monospace;letter-spacing:.04em;
  padding:.45rem .7rem;border-radius:999px;cursor:pointer;transition:.15s;
  border:1px solid #2c3b4a;background:#141c25;color:#6f8598}
.band:hover{border-color:#3d5468;color:#a9bccd}
.band[aria-selected="true"]{background:#1d2b36;border-color:#7fe3f0;color:#7fe3f0}
.band .n{display:block;font-size:.6rem;font-weight:400;color:#4d6478;margin-top:.15rem}
.band[aria-selected="true"] .n{color:#4d7c8a}
.band:focus-visible{outline:2px solid #7fe3f0;outline-offset:2px}

/* カードのレベルと難易度 */
.boss .mode{display:block;font:700 .58rem/1 inherit;letter-spacing:.1em;margin-top:.25rem}
.boss .mode{white-space:nowrap}
.boss .mode.easy{color:#8fd694} .boss .mode.normal{color:#7fe3f0}
.boss .mode.hard{color:#ffb27a} .boss .mode.vhard{color:#ff8a8a}
.bosses::-webkit-scrollbar{width:6px}
.bosses::-webkit-scrollbar-thumb{background:#2c3b4a;border-radius:3px}
.bosses::-webkit-scrollbar-track{background:transparent}

/* 探す欄 */
/* 検索欄は撤去した（2026-08-26）。残っているのは「未挑戦だけ」だけなので右に寄せる */
.bossbar{display:flex;gap:.4rem;margin:0 0 .4rem;justify-content:flex-end}
.bossbar .only{font:600 .72rem/1 inherit;letter-spacing:.06em;white-space:nowrap;
  color:#6f8598;background:#111a23;border:1px solid #22303d;border-radius:8px;
  padding:0 .7rem;cursor:pointer;transition:.15s}
.bossbar .only:hover{color:#a9bccd;border-color:#3d5468}
.bossbar .only[aria-pressed="true"]{color:#7fe3f0;border-color:#7fe3f0;background:#16232e}
.found{margin:0 0 .4rem;font-size:.7rem;color:#5c7891;text-align:right}
.boss{display:grid;grid-template-columns:4px minmax(0,1fr) auto;gap:.75rem;align-items:center;
  border:1px solid #22303d;background:#111a23;border-radius:10px;
  padding:.6rem .8rem .6rem .55rem;cursor:pointer;font:inherit;color:inherit;
  text-align:left;   /* button の既定は中央寄せ。親の text-align では上書きされない */
  transition:border-color .15s,background .15s,transform .12s}
.boss::before{content:'';display:block;align-self:stretch;border-radius:4px;
  background:var(--tint,#7fe3f0);opacity:.55;transition:opacity .15s}
.boss:hover{border-color:#3d5468;background:#16212c}
.boss:hover::before{opacity:.9}
.boss.on{border-color:var(--tint,#7fe3f0);background:#16232e}
.boss.on::before{opacity:1;box-shadow:0 0 12px -2px var(--tint,#7fe3f0)}
.boss:focus-visible{outline:2px solid var(--tint,#7fe3f0);outline-offset:2px}
/* 🚨 名前は1行に収めること。クリアランクを右に置いたぶん本文の列が狭くなり、
      折り返すと札が 80px→99px に伸びて、スマホで見える枚数が 2.2枚→1.8枚に減る
      （2026-08-26 実測）。あふれたら「…」で切る（一言 .bl と同じ作法）。 */
.boss .nm{display:block;font-size:.92rem;font-weight:700;letter-spacing:.02em;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.boss .rk{font-size:.66rem;letter-spacing:.16em;color:#5c7891;display:block;margin-bottom:.15rem}
/* 討伐済みマーク。⚠️ いま選んでいる難易度に関係なく「1回でも倒したか」を示す。
   右のクリアランク（その難易度の記録）とは別のものなので、色も形も変えてある。 */
.boss .done{display:inline-block;margin-left:.5rem;font-style:normal;
  font-size:.56rem;letter-spacing:.08em;color:#8fd694;
  border:1px solid rgba(143,214,148,.5);border-radius:3px;padding:.1rem .28rem;
  vertical-align:.06em}
.boss .bl{display:block;font-size:.7rem;color:#7c93a8;line-height:1.5;margin-top:.15rem}
/* 右端。レベルと、その**横に**クリアランク。
   🚨 ランクは札でいちばん大きい文字にすること（ユーザー指示 2026-08-26）。
      小さく添えると、せっかく取った記録が見えない。
   ⚠️ 横並びにするぶん本文の列が狭くなる。名前が入りきるか 375px で必ず確かめること。 */
.boss .rec{display:flex;align-items:center;gap:.45rem;
  font:700 .68rem/1 ui-monospace,monospace;letter-spacing:.08em;
  color:#5c7891;text-align:right;white-space:nowrap}
.boss .lvl{font:700 1.05rem/1 ui-monospace,monospace;color:#c6d6e4}
.boss .rkbox{display:block;text-align:center;line-height:1}
.boss .rkl{display:block;font:600 .5rem/1 inherit;letter-spacing:.04em;color:#5c7891}
.boss .rkv{display:block;font:700 1.6rem/1.1 ui-monospace,monospace;letter-spacing:.02em}
.boss .sc{display:block;font-size:.6rem;letter-spacing:.04em;color:#5c7891}
/* ランクごとの色。⚠️ 光らせるのは S 以上だけ（全部光ると差が消える） */
.boss .rkv.SS{color:#fff2c0;text-shadow:0 0 14px rgba(255,220,140,.75)}
.boss .rkv.S{color:#ffd98a;text-shadow:0 0 11px rgba(255,190,110,.5)}
.boss .rkv.A{color:#7fe3f0}
.boss .rkv.B{color:#8fd694}
.boss .rkv.C{color:#8fa6ba}
/* 🚨 幅が足りない画面では**ラベルとスコアを落とす**。ランクの文字は落とさない
      （目立たせるのが目的なので、そこを削ったら意味がない）。
      390px での実測（ボス名の使える幅 / 30枚中「…」で切れる枚数）:
        全部出す ………………… 113px / 10枚
        ラベルだけ落とす ……… 125px /  6枚
        **ラベルとスコアを落とす … 166px / 0枚** ←これ
      「クリアランク」は6文字で74px、スコアは54pxあり、この2つが右の列の幅を決めている。
   ⚠️ スコアはPCでは出る。狭い画面で名前が「Howling Tem…」と切れるより、
      スコアを引っ込めるほうがましだと判断した。 */
@media (max-width:430px){
  .boss .rkl{display:none}
  .boss .sc{display:none}
}

/* 裏ボス。⚠️ 解放前も**見せる**こと（隠すと気付けず、討伐率を上げる動機にならない）。 */
.boss.secret{ --tint:180 130 235 }
.boss.secret .nm{ color:#d8c4ff; letter-spacing:.16em }
.boss.locked{ opacity:.55; cursor:not-allowed; filter:grayscale(.5) }
.boss.locked .nm{ color:#8f86a8 }
.boss.locked .bl{ color:#7a6f96 }

/* リザルトのランク */
.rank{font:700 3.4rem/1 ui-monospace,monospace;letter-spacing:.04em;margin:0 0 .4rem}
.rank.rSS{color:#fff2c0;text-shadow:0 0 34px rgba(255,220,140,.85),0 0 12px rgba(255,255,255,.6)}
.rank.rS{color:#ffd98a;text-shadow:0 0 26px rgba(255,190,110,.55)}
.rank.rA{color:#7fe3f0;text-shadow:0 0 22px rgba(127,227,240,.45)}
.rank.rB{color:#8fd694}
.rank.rC{color:#8fa6ba}
.rank.lose{color:#e08c8c}
.rnote{margin:.2rem 0 1.4rem}
.btn.ghost{background:none;color:#8fa6ba;border:1px solid #2c3b4a;box-shadow:none;
  margin-top:.6rem;font-size:.82rem;padding:.6rem 1.6rem}
.btn.ghost:hover{color:#c6d6e4;border-color:#3d5468;filter:none}

/* 音ズレのつまみはたたんでおく。
   🚨 開いたまま一覧の直下に置かないこと。`input[type=range]` は**トラックを
      1回叩いただけでその位置へ飛ぶ**ので、指やカーソルがよく通る場所にあると
      触ったつもりが無くても値が変わる（ユーザー報告 2026-08-30）。
   ⚠️ **表示速度はたたまない**（ユーザー指示 2026-08-30）。難易度の下で
      「HARD以上は1.5倍以上がおすすめ」と勧めている以上、隠すと勧めた先が開けない。
      値が変わっても画面に「1.3倍」と出るので気づけるし、隣に戻すボタンもある。 */
.tune{ margin:0 0 1rem; border:1px solid #24323f; border-radius:10px;
  background:rgba(14,20,27,.65); text-align:left }
.tune > summary{ cursor:pointer; list-style:none; padding:.6rem .8rem;
  font-size:.78rem; color:#a9bccd; letter-spacing:.02em }
.tune > summary::-webkit-details-marker{ display:none }
.tune > summary::before{ content:'▸ '; color:#5c7891 }
.tune[open] > summary::before{ content:'▾ ' }
.tune > summary:hover{ color:#e8edf3 }
.tune .offset{ margin:0 .8rem .9rem }
.tune-reset{ margin-top:.5rem; font-size:.74rem; padding:.4rem 1rem }

/* 音合わせ。叩く場所は指でもマウスでも押しやすい大きさにする。
   ⚠️ user-select と touch-action を切ること。連打で文字が選択されたり
      画面が動いたりすると、測っているずれにその分が乗る。 */
.calibpad{ margin:1rem 0 .8rem; padding:2.2rem 1rem; border-radius:14px; cursor:pointer;
  border:1px solid #2a4450; background:linear-gradient(180deg,rgba(19,36,44,.95),rgba(12,21,26,.95));
  display:flex; flex-direction:column; gap:.5rem; align-items:center;
  touch-action:none; -webkit-user-select:none; user-select:none }
.calibpad:active{ border-color:#7fe3f0; background:linear-gradient(180deg,rgba(26,52,62,.98),rgba(15,28,34,.98)) }
.calibbig{ font-size:1.15rem; font-weight:700; color:#e8edf3; letter-spacing:.04em }
.calibsub{ font-size:.76rem; color:#8fa6ba; line-height:1.6; text-align:center }
/* 入口に添える一言（ワイヤレスを検出したときだけ出る）。 */
.calibnote{ margin:.5rem 0 0; font-size:.74rem; line-height:1.7; color:#9db5c4; text-align:left }
.calibnote.hide{ display:none }
.calibnote b{ color:#7fe3f0 }
/* ⚠️ 音ズレ調整の中のボタンは上に少し余白を取る（つまみとくっつくと押しにくい）。 */
.offset #calibBtn{ margin-top:.7rem }

/* 表示速度のすすめ（遊ぶ前）。難易度の下の `.dn-sub` と**入れ替わり**で出る。
   🚨 高さを増やさないこと。ここは「挑む」の帯とボス一覧の取り合いになっている場所で、
      別ブロックにして足したら 390x664 で一覧がまるごと帯の下へ消えた（実測122px増）。
   🚨 警告色にしないこと。選択を止める注意書きではなく、快適に遊ぶための案内。 */
.dn-sub.rec{ color:#9db5c4 }
.dn-sub.rec b{ color:#7fe3f0; font-weight:700 }
/* ⚠️ 文の中に置くボタン。行の高さを押し上げないよう padding を詰める。 */
.dn-recbtn{ font:inherit; font-size:.72rem; margin-left:.5rem; padding:.15rem .6rem;
  border:1px solid #2a4450; border-radius:999px; background:rgba(17,32,38,.9);
  color:#7fe3f0; cursor:pointer; white-space:nowrap; vertical-align:baseline }
.dn-recbtn:hover{ border-color:#3d6b7c; background:rgba(23,44,52,.95) }

/* 表示速度のすすめ（HARD以上を1.0倍のまま早々に力尽きた人にだけ出る）。
   🚨 「敗北の追い打ち」に見えないこと。赤や警告色を使わず、助言の色（青緑）にする。
   ⚠️ `.after`（サイトへ戻る導線）より**目立たせない**こと。あちらが本命。 */
.speedtip{margin:0 0 1.1rem;padding:.75rem .8rem .7rem;border-radius:10px;
  border:1px solid #2a4450;background:linear-gradient(180deg,rgba(17,32,38,.92),rgba(12,21,26,.92))}
.speedtip.hide{display:none}
.speedtip p{margin:0;font-size:.78rem;line-height:1.75;color:#9db5c4;text-align:left}
.speedtip b{color:#7fe3f0}
.speedtip .btn{margin-top:.55rem;font-size:.8rem;padding:.55rem 1.3rem}
.speedtip .btn:disabled{opacity:.6;cursor:default}

/* リザルトの「いま戦った曲」。ダウンロードとXへの投稿。
   🚨 ここがゲームからサイトへ戻る唯一の入口。目立たせたまま残すこと。
   ⚠️ 2つのボタンは flex-wrap で並べる。幅が足りないスマホでは縦に積む
      （パネルはスクロールするので「もう一度」は下に残る）。
   ⚠️ 曲名は2行まで（145体ぶんあり、長い曲名でパネルが伸びる）。 */
.after{margin:0 0 1.1rem;padding:.8rem .75rem .65rem;border:1px solid #2c3b4a;border-radius:10px;
  background:linear-gradient(180deg,rgba(20,29,39,.92),rgba(14,20,27,.92))}
.after.hide{display:none}
.after-ttl{margin:0;font-size:.66rem;letter-spacing:.2em;color:#5c7891}
.after-song{margin:.25rem 0 .7rem;font-size:.92rem;font-weight:700;color:#e8edf3;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.after-btns{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}
.after .btn{font-size:.82rem;padding:.62rem 1.15rem;letter-spacing:.03em;margin:0}
.btn.dl{display:inline-block;text-decoration:none}
/* Xのボタンは黒。ダウンロードと同じ色にすると、どちらが本命か分からなくなる。 */
.btn.share{background:#11161d;color:#e8edf3;border:1px solid #3d5468;box-shadow:none;
  display:inline-flex;align-items:center;gap:.45em}
/* ⚠️ Xのロゴは 𝕏（U+1D54F）で書かないこと。字体が無い環境では
      ただの小さな x に見えて、投稿ボタンだと分からない（実測でそう見えた）。 */
.btn.share svg{width:1em;height:1em;flex:0 0 auto}
.btn.share:hover{background:#1a222c;filter:none}
/* ⚠️ 注記は語のかたまりごとに <span> で包んで折る。日本語はどこでも折れるので、
      そのままだと「クレジット不 / 要」のように途中で切れる（実際に切れた）。 */
.after-note{margin:.55rem 0 0;font-size:.64rem;color:#5c7891;line-height:1.5}
.after-note span{display:inline-block}

/* 指で遊ぶ端末ではキーボードの案内を出さない（そのぶんパネルが短くなる） */
@media (pointer:coarse){ .key.kbd{display:none} }

/* 記録の引き継ぎ（復活の呪文）。
   🚨 たたんだ状態で1行に収めること。ここが伸びるとボス一覧が読めなくなる。 */
.spell{margin:0 0 .7rem;text-align:left;font-size:.76rem;color:#8fa6ba}
.spell summary{cursor:pointer;list-style:none;text-align:center;color:#7fa8bd;
  border:1px solid #2c3b4a;border-radius:999px;padding:.4rem .9rem;font-size:.72rem;
  letter-spacing:.04em}
.spell summary::-webkit-details-marker{display:none}
.spell summary:hover{color:#c6d6e4;border-color:#3d5468}
.spell[open] summary{margin-bottom:.6rem}
.spell-note{margin:0 0 .6rem;font-size:.68rem;line-height:1.7;color:#5c7891}
.spell label{display:block;margin:.5rem 0 .25rem;font-size:.68rem;letter-spacing:.08em;color:#7c93a8}
.spell textarea{width:100%;box-sizing:border-box;background:#0d141c;color:#c6d6e4;
  border:1px solid #2c3b4a;border-radius:8px;padding:.5rem .6rem;
  font:600 .72rem/1.6 ui-monospace,monospace;letter-spacing:.06em;resize:vertical}
.spell .btn.ghost{display:block;margin:.4rem 0 0;width:100%;padding:.5rem}
.spell-msg{margin:.5rem 0 0;font-size:.7rem;line-height:1.6;color:#8fd694;min-height:1em}

/* 音ズレ調整 */
.offset{margin:0 0 1rem;font-size:.76rem;color:#8fa6ba}
.offset label{display:block;margin-bottom:.35rem;letter-spacing:.06em}
.offset label b{color:#7fe3f0;font-variant-numeric:tabular-nums}
.offset input[type=range]{width:min(100%,300px);accent-color:#38b6c8;margin:0}
.offset .hint{display:block;margin-top:.3rem;font-size:.68rem;color:#5c7891}
.offset .hint b{color:#a9bccd}
.offset .speed-reset{display:block;margin:.45rem 0 0;padding:.4rem .8rem;font-size:.7rem}

/* 中断ボタン。**右上**に置く（ユーザー指示 2026-08-24）。
   🚨 コンボ表示を右上に戻さないこと。ここと重なる。
      いまコンボはスコアの下＝左上に積んである（game.js の hud()）。
   ⚠️ canvas の上に重なるので pointerdown を stopPropagation すること。 */
#quitBtn{
  position:fixed;right:16px;top:calc(14px + env(safe-area-inset-top));z-index:6;
  border:1px solid #2c3b4a;background:rgba(18,26,35,.7);color:#6f8598;
  font:600 11px/1 inherit;letter-spacing:.12em;padding:.5rem .8rem;border-radius:999px;
  cursor:pointer;transition:color .15s,border-color .15s,background .15s}
#quitBtn:hover{color:#c6d6e4;border-color:#3d5468;background:rgba(24,34,45,.9)}
#quitBtn.hide{display:none}
#quitBtn:focus-visible{outline:2px solid #7fe3f0;outline-offset:3px}

/* あそび方（チュートリアル）。挑むボタンの下に控えめに置く */
.btn.tutor{display:block;margin:.55rem auto 0;background:none;box-shadow:none;
  border:1px solid #2c3b4a;color:#8fa6ba;font-size:.78rem;font-weight:600;
  padding:.5rem 1.4rem}
.btn.tutor:hover{color:#c6d6e4;border-color:#3d5468;filter:none}

/* タイトルのロゴ（game/ui/title-logo.webp・809x83「SWORD RHYTHM」）。
   ⚠️ これは**曲選択画面（この画面）だけ**のもの（ユーザー指示 2026-08-26）。
      トップページの導線は別素材（images/site/game-title.webp の1枚絵）。混同しないこと。
   🚨 縦を食わせないこと。ここが伸びるとボス一覧の見える高さが無くなる
      （ヒーロー絵をタイトルに入れて 99px→10px になった前例がある）。
      大きくしたいときは、まず 390x664 で一覧にボスが2枚見えるか確かめること。
   ⚠️ line-height:0 を消さないこと。img の下に行の余白が入って数px伸びる。 */
.logo{ margin:0 0 .45rem; line-height:0 }
/* ⚠️ 影は2枚重ねること。背景（bg-title）の石の模様に「SWORD RHYTHM」の
      細い字が溶けて読めなくなる（1枚だけだと実際に溶けた）。 */
/* ⚠️ いまのロゴは「SWORD RHYTHM」だけの横長（809x83・約9.8:1）。
      カタカナ入りの組（3.2:1）から差し替えたので、**幅を広く取っても縦は食わない**。
      別のロゴに戻すときは縦の高さが変わるので、下の一覧の見え方を測り直すこと。 */
.logo img{ width:min(92%,400px); height:auto;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.95)) drop-shadow(0 8px 20px rgba(0,0,0,.6)) }

/* ===================================================================
   画面の素材（game/ui/*.webp）を貼る。2026-08-25
   素材は生成AI製。取り込みは `python3 scripts/33_import_ui_asset.py`。

   🚨 文字を画像に焼かないこと。素材は**枠**として使い、文字はHTMLで重ねる
      （英語表示に切り替えられなくなるため）。
   🚨 幅が変わる枠は **border-image で9分割**すること。
      `background-size:100% 100%` で伸ばすと、角の飾りまで潰れる。
      slice の数値は素材の「空洞のふち」を実測したもの。勝手に変えない。
   ⚠️ 素材は合計900KB。**表示される要素にだけ**貼ること。
      display:none の要素の背景はブラウザが読まないので、中断・リザルトの
      額縁はそのままでよい。
   =================================================================== */

/* 背景。⚠️ body ではなくオーバーレイに敷く（戦闘中は canvas を邪魔しない） */
#intro{
  /* ⚠️ 背景を明るいまま出さないこと。ボス一覧の文字が読めなくなる（実際に読めなかった）。
        上は絵を見せ、下へ行くほど暗く落として文字を優先する。 */
  background:
    linear-gradient(180deg, rgba(6,9,13,.62) 0%, rgba(6,9,13,.88) 42%, rgba(6,9,13,.97) 100%),
    url('/game/ui/bg-title.webp?v=20260825a') center top/cover no-repeat fixed;
}

/* 🚨 タイトルの絵（棒人間の剣士と竜）はこの画面には置かない（ユーザー指示 2026-08-26
      「なんか合わないね」）。素材 `game/ui/hero-title.webp` は消さずに残してあり、
      **トップページからゲームへの導線に使う**（サムネイル／OGP画像）。
      ⚠️ ここに戻さないこと。縦を4割使うのでボス一覧が押し出される。
         実測（360×640）: 絵を入れると一覧の見える高さが 99px → 10px になり、
         最初の画面にボスが1体も出なくなった。 */
h1{text-shadow:0 0 24px rgba(127,227,240,.35), 0 2px 6px rgba(0,0,0,.7)}

/* 「フル」がまだ解放されていないときの見た目。
   ⚠️ ボタンを消さないこと。**あるのに押せない**と分かるから遊ぶ理由になる。 */
.lv.locked{opacity:.42; cursor:not-allowed; filter:grayscale(.6)}
.lv.locked:hover{transform:none}

/* 討伐率。⚠️ 縦に厚くしないこと。ここが伸びるとボス一覧が画面の外へ出る
      （360×640で一覧に残るのは90px弱しかない）。目盛りは50%＝「フル」の解放点。 */
.prog{position:relative; margin:-.2rem auto .8rem; max-width:22rem; text-align:left}
/* ⚠️ 上段は3つで1行。ここを2行にしないこと（下の一覧が画面の外へ出る）。 */
.prog-top{display:flex; align-items:baseline; gap:.5rem}
.prog-label{font-size:.72rem; letter-spacing:.18em; color:#6f8395; white-space:nowrap}
.prog-gate{
  flex:1; text-align:center; white-space:nowrap;
  font-size:.7rem; color:#6f8395; letter-spacing:.02em;
}
.prog.done .prog-gate{color:#c9a86a}
.prog-pct{
  font-size:1.15rem; font-weight:700; color:#7fe3f0;
  font-variant-numeric:tabular-nums; line-height:1.1;
}
.prog.done .prog-pct{color:#ffd98a}
.prog-bar{
  position:relative; height:6px; margin:.22rem 0 .28rem;
  background:#16202a; border:1px solid #24323f; border-radius:3px; overflow:hidden;
}
.prog-bar i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,#2b7d8c,#7fe3f0);
  transition:width .5s cubic-bezier(.16,1,.3,1);
}
.prog.done .prog-bar i{background:linear-gradient(90deg,#c98a3a,#ffd98a)}
/* 50%の目盛り。ここを越えると「フル」が解放される */
.prog-mark{
  position:absolute; top:-2px; bottom:-2px; left:50%; width:1px;
  background:#8fa6ba; opacity:.75;
}
/* ⚠️ 1行に収まる長さにすること。折り返すと一覧が1枚も見えなくなる（実測で発生）。 */
.prog-note{margin:0; font-size:.74rem; color:#7f95a8; line-height:1.5;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.prog.done .prog-note{color:#9fb0bf}

@media (prefers-reduced-motion:reduce){ .prog-bar i{transition:none} }

/* 仕切り線 */
.rule{
  height:20px; margin:-.2rem 0 .7rem;
  background:url('/game/ui/divider.webp?v=20260825a') center/contain no-repeat;
  opacity:.85;
}

/* 「挑む」＝円形の紋章。文字は上に重ねる。
   ⚠️ 押した状態の絵は**形が同じ**なので、位置と大きさを変えないこと。 */
/* ⚠️ 大きくしすぎないこと。168pxにしたらボス一覧を覆い隠した（実際に隠れた）。 */
#startBtn{
  width:96px; height:96px; padding:0; border-radius:50%;
  background:url('/game/ui/btn-challenge.webp?v=20260825a') center/contain no-repeat;
  box-shadow:none; color:#dff7fb;
  font-size:.92rem; letter-spacing:.12em;
  text-shadow:0 0 12px rgba(0,0,0,.9), 0 0 26px rgba(127,227,240,.7);
  transition:filter .15s, transform .12s;
}
#startBtn:hover{ filter:brightness(1.12) }
#startBtn:active{ transform:translateY(2px) scale(.98) }
#startBtn:focus-visible{ outline:2px solid #7fe3f0; outline-offset:6px }
/* 押せる状態は光った絵に差し替える（読み込みはこの時だけ） */
#startBtn:hover, #startBtn:focus-visible{
  background-image:url('/game/ui/btn-challenge-on.webp?v=20260825a');
}
#startBtn:disabled{ filter:grayscale(.7) brightness(.7); }

/* 小さいボタン（90秒/フル・あそび方・もう一度・選び直す）。
   border-image の fill で中央を伸ばす。 */
/* 🚨 border-image は `border-style:solid` ＋ `border-width` とセットで使うこと。
      `border:0` にすると中身が枠のぶん押し込まれず、文字が枠に乗る（実際に乗った）。 */
.lv, .btn.ghost, .btn.tutor, .bossbar .only{
  background:none; border:solid transparent; border-width:10px 16px; border-radius:0;
  border-image:url('/game/ui/btn-small.webp?v=20260825a') 40 70 40 70 fill stretch;
  color:#c6d6e4; text-shadow:0 1px 3px rgba(0,0,0,.8);
  padding:0 .5rem;
}
.lv.on, .bossbar .only[aria-pressed="true"]{ color:#9ff0fb; filter:brightness(1.25) }
.lv:hover, .btn.ghost:hover, .btn.tutor:hover, .bossbar .only:hover{ filter:brightness(1.15) }

/* ボスの並びのタブ。石のプレート（中央は無地なので fill で伸ばす） */
.band{
  background:none; border:solid transparent; border-width:11px 14px 7px; border-radius:0;
  border-image:url('/game/ui/tab-band.webp?v=20260825a') 34 62 24 62 fill stretch;
  color:#a9bccd; text-shadow:0 1px 3px rgba(0,0,0,.8); padding:0;
  font-size:.66rem;
}
.band[aria-selected="true"]{
  border-image-source:url('/game/ui/tab-band-on.webp?v=20260825a');
  color:#dff7fb;
}
.band .n{ color:#7c93a8 }
.band[aria-selected="true"] .n{ color:#9ff0fb }

/* ボスのカード。石板の枠。
   ⚠️ 枠が太いので、中身の余白（padding）を枠のぶん広げること。 */
/* ボスのカード。石板の枠。
   ⚠️ 枠の太さぶん中身が内側に寄るので、padding は小さくてよい。 */
.boss{
  background:none; border:solid transparent; border-width:10px 14px; border-radius:0;
  border-image:url('/game/ui/plate-card.webp?v=20260825a') 62 68 58 68 fill stretch;
  padding:.1rem .3rem;
}
.boss::before{ opacity:.75 }
.boss:hover{ filter:brightness(1.12) }
.boss.on{
  border-image-source:url('/game/ui/plate-card-on.webp?v=20260825a');
  filter:brightness(1.05);
}

/* 探す欄にルーンの水晶 */
.bossbar input{
  padding-left:2.1rem;
  background:#111a23 url('/game/ui/icon-search.webp?v=20260825a') .35rem center/1.4rem no-repeat;
}

/* 中断・リザルトの額縁。⚠️ 中身が長いので、上下の枠は薄めに当てる */
#pause .panel, #result .panel{
  border:solid transparent; border-width:40px 34px; border-radius:0;
  border-image:url('/game/ui/panel-frame.webp?v=20260825a') 199 171 193 171 fill stretch;
  padding:.6rem .4rem;
}

/* ランクの勲章。文字はその上に重ねる */
.rank{
  position:relative; display:inline-block; min-width:150px; padding:34px 0 26px;
  background:url('/game/ui/rank-emblem.webp?v=20260825a') center/contain no-repeat;
}

/* 必殺ボタン＝炎の紋章。⚠️ 下部中央に大きく置く（2026-08-26）ので、
   判定ライン・地面の絵に被らないよう bottom は据え置いたまま幅だけ拡大した。 */
#superBtn{
  width:104px; height:104px; padding:0; border:0; border-radius:50%;
  background:url('/game/ui/btn-super.webp?v=20260825a') center/contain no-repeat;
  color:rgba(255,236,210,.45); font-size:12px; letter-spacing:.16em;
  text-shadow:0 1px 4px rgba(0,0,0,.9);
  filter:grayscale(.75) brightness(.55);
  transition:filter .2s, transform .12s;
}
#superBtn.ready{
  background:url('/game/ui/btn-super.webp?v=20260825a') center/contain no-repeat;
  border:0; box-shadow:none; color:#fff3e0;
  filter:none; animation:superpulse 1.15s ease-out infinite;
}
/* 🚨 translateX(-50%) を必ず一緒に書くこと（ユーザー指摘 2026-08-26
      「必殺技マークが使用すると場所が少し移動する」）。#superBtn は
      下部中央に translateX(-50%) で寄せているが、ここで transform:scale(...)
      だけを書くと ready 中はそれで上書きされ、中央寄せが消えて左にズレていた。 */
@keyframes superpulse{
  0%{ transform:translateX(var(--super-x)) scale(1) }
  50%{ transform:translateX(var(--super-x)) scale(1.06) }
  100%{ transform:translateX(var(--super-x)) scale(1) }
}
/* 🚨 横向きスマホ（高さ460px以下）は下部中央だと自分のライフ/必殺ゲージが
      ボスの体力バーに埋もれるスペースしか残らない（実測 812x375 で確認）。
      右下・小さめに戻す。--super-x を 0 にすれば keyframe も自動で追従する。
   ⚠️ game.js の hud() は superBtn の実座標を getBoundingClientRect() で
      読んでゲージ位置を決めるので、ここを変えれば JS 側は直さなくてよい。 */
@media (max-height:460px){
  #superBtn{
    --super-x:0; left:auto; right:16px;
    /* ⚠️ 横向きでもアプリ内ブラウザのバーは下に出るので --super-lift を足すこと */
    bottom:calc(10px + var(--super-lift, 0px) + env(safe-area-inset-bottom));
    width:64px; height:64px; padding:0;
  }
}
@media (prefers-reduced-motion:reduce){ #superBtn.ready{ animation:none } }

/* 選んでいる譜面の説明。⚠️ 2行になると一覧が押し出されるので小さめに */
#songName{ font-size:.8rem; margin:0 0 .6rem; line-height:1.5 }
/* 難易度ごとの特徴。⚠️ 曲名（#songName）より小さくすること。
   ここが目立つと「曲を選ぶ画面」ではなくなる。 */
.diffnote{ margin:-.4rem 0 .7rem; font-size:.74rem; line-height:1.6; color:#7f97ad }
.diffnote b{ color:#ffc27a; font-weight:700 }
.diffnote .dn-sub{ display:block; color:#6b8299; font-size:.7rem }
.how{ margin:0 0 1rem }
.offset{ margin:0 0 .6rem }

/* タブの体数。⚠️ タブが小さいので行間を詰める */
.band .n{ font-size:.55rem; margin-top:.1rem }
/* 「あそび方」は控えめに */
.btn.tutor{ font-size:.72rem; margin-top:.35rem }

/* ⚠️ 一言は1行に収めること。2行になるとカードが伸びて、
      画面に2枚しか並ばなくなる（枠が太いぶん元より効く）。 */
.boss .bl{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.boss .nm{ font-size:.88rem }
.bosses{ gap:.25rem }

/* 🚨 真ん中の列は minmax(0,1fr) にすること。
      1fr のままだと、一言を1行に固定した時点で中身の幅が優先され、
      右のレベル表示が枠の外へ押し出されて消える（実際に消えた）。 */

/* 画面が低いとき（横向きのスマホ・小さいノート）は、開始ボタンと仕切り線を詰める。
      ⚠️ しきい値の760pxを「iPhoneは812pxだから当たらない」と考えないこと。
         812は**画面**の高さで、表示領域の高さではない。Safariは上下のバーで
         140pxほど使うので実測は約664px ＝ iPhoneでもここに当たる。 */
@media (max-height:760px){
  .bosses{ height:min(42vh,260px) }
  #startBtn{ width:78px; height:78px; font-size:.8rem }
  .rule{ height:14px; margin:0 0 .5rem }
}

/* 🚨 スマホの縦（700px以下）は飾りを落として一覧の場所を作ること。
      討伐率を足したぶん、実測（390×664）で一覧の見える高さが **29px** になり、
      ボスのカード（約78px）が1枚も読めなくなった。
      ⚠️ 討伐率そのものを削らないこと。ユーザーが「画面に達成率がわかるところを」
         と指定した当のもの。削るのは余白と飾りの側。
      ⚠️ しきい値の意味は上と同じ。iPhoneのSafariは表示領域が約664pxでここに当たる。 */
@media (max-height:700px){
  .panel{ padding-top:calc(1rem + env(safe-area-inset-top)) }
  .eyebrow{ display:none }          /* 「試作版」。飾り */
  .rule{ display:none }             /* 仕切り線。飾り */
  h1{ font-size:clamp(1.25rem,4.4vw,1.6rem); margin-bottom:.2rem }
  /* ⚠️ .logo は h1 より詳しいので、ここでも書き直さないと上の指定が残る。
     🚨 ここの寸法は「一覧にボスが2枚ちょうど収まる」ぎりぎりで決めてある
        （390x664 の実測で、一覧の見える高さ165px ＝ 札80px×2＋余り5px）。
        大きくすると2枚目が欠ける。動かすなら必ず実測し直すこと。 */
  .logo{ margin-bottom:.3rem }
  .logo img{ width:min(94%,300px) }
  .song{ margin-bottom:.45rem }
  .prog{ margin-bottom:.35rem }
  .levels{ margin-bottom:.45rem }
  .lv{ padding:.4rem 1.05rem; font-size:.74rem }
  .band{ border-width:9px 12px 6px; font-size:.6rem }
  .band .n{ font-size:.5rem; margin-top:.05rem }
  .bands{ margin-bottom:.3rem }
  #songName{ font-size:.72rem; line-height:1.4; margin-bottom:.4rem }
  .bossbar{ margin-bottom:.3rem }
  .found{ margin-bottom:.25rem }
  /* リザルトの「いま戦った曲」も詰める。⚠️ 消さないこと（サイトへの唯一の入口）。
     この幅では .eyebrow（曲名／難易度）が隠れるので、曲名はここにしか残らない。 */
  .after{ padding:.6rem .6rem .5rem; margin-bottom:.7rem }
  .after-song{ font-size:.82rem; -webkit-line-clamp:1; margin-bottom:.55rem }
  .after .btn{ font-size:.76rem; padding:.55rem .95rem }
  .after-note{ font-size:.6rem; margin-top:.45rem }
}

/* ===== 狭い画面での札の詰め（このファイルの**最後**に置くこと） =====
   🚨 ここは `@media (max-height:700px)` の `.boss .nm` を上書きするために
      末尾に置いてある。前に出すと同じ詳しさで負けて効かない。
   実測（390px・40枚中ボス名が「…」で切れる枚数）:
     何もしない ………………………………………… 6枚
     ランクを1.3rem＋字間を詰める＋余白を削る … 3枚
     **＋ボス名を .86rem …………………………… 1枚**（残るのは最長の1体だけ）
   ⚠️ ランクの文字を1.2rem以下にしないこと。目立たせるのが目的なので本末転倒になる。 */
@media (max-width:430px){
  .boss{ gap:.45rem; padding-left:.4rem; padding-right:.55rem }
  .boss .nm{ font-size:.86rem }
  .boss .rkv{ font-size:1.3rem; letter-spacing:-.04em }
}