/* ルナチェイン｜見た目
   夜空×金。ネオン寄りに振り、幼児向けの色使いにしない（高学年は「子どもっぽい絵」で離れる） */

:root{
  --bg1:#070b1c; --bg2:#111a3a;
  --p1:#f7d774; --p2:#7f8cff;
  --text:#e8ecff; --dim:rgba(232,236,255,.58);
  --line:rgba(255,255,255,.12);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
/* ★hidden 属性を CSS で打ち消さない★（この1行で、この種類の事故を丸ごと止める）
   display を指定した要素は、hidden 属性（UA既定の display:none）に勝ってしまうので、
   JS で `el.hidden = true` と書いても消えない。しかも**見た目に出るだけで例外は出ない**。
   2026-09-08 に3回やった:
     1回目 #cardbar（空のカード帯が下に居座る）
     2回目 #hud（やめられなくなる。1回直したのに巻き添えで消えた）
     3回目 #pauseBtns（タイトルから開いた設定に「さいしょから／タイトルへ」が出る）
   個別に `#id[hidden]{display:none}` を足していく方式は、**新しい要素を足すたびに再発する**。
   ここで全部まとめて打ち止めにする。 */
[hidden]{display:none !important}
html,body{height:100%; margin:0; overflow:hidden}
body{
  background:radial-gradient(120% 90% at 50% 0%, #16204a 0%, var(--bg1) 62%);
  color:var(--text);
  font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  user-select:none; -webkit-user-select:none;
}
#app{position:relative; height:100%; display:flex; flex-direction:column}

/* ── 対戦画面のヘッダ ───────────────────── */
/* ★横に広い画面では盤の幅に寄せる★（2026-09-10 オーナー指示）
     > 上の方にある手番と設定ボタンが中心から遠すぎる。もっと中心に寄せていいよ。
   もとは body 幅いっぱいだったので、1900px の画面では手番が左端・ギアが右端に離れ、
   中央にある盤（最大でも約590px）と視線がつながらなかった。
   ★440px は .setting / .segs / .stats と同じ値★（画面全体で幅の基準をそろえる）
   ★スマホ幅（464px未満）では1pxも変わらない★＝狭い画面への影響はゼロ。 */
#hud{
  display:flex; align-items:center; gap:10px;
  width:100%; max-width:440px; margin-inline:auto; box-sizing:border-box;
  /* ★上下の余白は 6px★（2026-09-11）
       帯の高さ＝⚙の箱(44px)＋上下12px＝56px。変更前は 35＋16＝51px。
       5px高くなるが、盤のマスは1pxも縮まないことを実測で確かめてある
       （8×10@1366×768=70px / 8×10@844×390=46px / 6×7@430×860=69px）。 */
  padding:calc(env(safe-area-inset-top,0px) + 6px) 12px 6px;
}
/* ★手番の表示★（2026-09-08 マス数・ゲージ・相手の段位と入れ替えた）
   > 対戦中の上の方にある内容はいらないかも。戦況が動きまくるので、有利不利が意味ない。
   > あと、どちらの手番かを示してほしいかな。（オーナー）
   色つきの丸＋ことばの2本立てにする。★色だけに頼らない★（色の見分けがつきにくい人がいる） */
/* ★文字の大きさ★（2026-09-11 オーナー指示「盤面の上の表示ももっと大きくてもいいよ」）
     16px → 20px。★盤は1pxも小さくならない★
       帯の高さを決めているのは文字ではなく ⚙ボタン（20px + 上下padding 4px ＝ 約32px）。
       20pxの文字は行box約24pxなので、まだ8pxの余裕がある。24pxを超えると帯が伸び、
       #stage の高さが減って盤のマスが縮む。
     ★line-height を明示する★ 継承の normal のままだと端末のフォントで行boxが変わり、
       「うちでは影響ゼロ、オーナーの端末では盤が縮む」が起こりうる。 */
/* ★文字は 24px★（2026-09-11 オーナー指示「手番の文字の大きさと設定はもっと大きくても良いのでは」）
     20px → 24px。行box＝24×1.2＝28.8px で、帯の高さを決めている⚙の箱(44px)より低いので
     **盤は1pxも縮まない**。
   ★min-width:0 と nowrap を外さないこと★
     これが無いと、小さい画面や大きめのシステムフォントで手番のことばが**2行に折り返し**、
     帯の高さが一気に倍増して盤が大きく縮む。横に切れるほうがまだ安全。
   ★切るのは #turnText だけ。.turn に overflow:hidden を付けないこと★
     #turnDot は .turn の左端にぴったり接している（実測 余白0px）ので、
     .turn を切ると **丸のまわりの光（box-shadow 0 0 10px）が左だけ欠ける**。
     文字側だけを切れば、はみ出すのは文字だけになる。 */
.turn{flex:1; min-width:0;
      display:flex; align-items:center; gap:10px; font-size:24px; font-weight:700;
      line-height:1.2}
#turnText{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* ★丸の大きさ★ 14px → 18px（文字に合わせる）。
     ★これ以上 大きくしたり ぼかしを増やさないこと★
       #hud.mine のときは turnPulse で1.32倍に脈打つ＝実効24px。
       DOM側なので §5-4 の「同時に光る面積」の計算には入らず、**検査が守ってくれない**。
     ★2026-09-11 に文字を20→24pxにしたときも、丸は18pxのまま据え置いた★
       オーナーの指示は「手番の文字と設定ボタン」で、丸は入っていない。
       20pxにすると脈打ったとき実効26.4px＋ぼかし10pxになり、上の禁止に触れる。 */
#turnDot{
  width:18px; height:18px; border-radius:50%; flex:0 0 auto;
  background:var(--p1); box-shadow:0 0 10px var(--p1);
}
/* 自分（人間）が押せるときだけ、丸をゆっくり脈打たせる＝「いま押していい」が一目で分かる */
#hud.mine #turnDot{animation:turnPulse 1.5s ease-in-out infinite}
@keyframes turnPulse{0%,100%{transform:scale(1); opacity:1}50%{transform:scale(1.32); opacity:.72}}
/* ★⚙は「箱の大きさ」で決める。font-size に決めさせないこと★（2026-09-11）
     もとは font-size:20px＋padding だけで、帯の高さが
     **端末のフォントの行高（normal＝測れない量）**に左右されていた。
     width/height/line-height:1 を与えると、字を大きくしても帯の高さは 38px のまま。
   ★44px より小さくしないこと★ 押しやすい最小の目安。変更前は 33×35px だった。
     ★盤のマスの下限(36px・§0-11)とは別の数字★ 盤は「並んだ的の1つ」、
     これは「単独のボタン」なので、求められる大きさが違う。 */
button.icon{
  flex:0 0 auto; width:44px; height:44px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; color:var(--dim);
  font-size:26px; line-height:1; cursor:pointer;
}

/* ── 盤 ────────────────────────────── */
#stage{flex:1; display:flex; align-items:center; justify-content:center; position:relative; min-height:0}
#boardBox{width:100%; height:100%; display:flex; align-items:center; justify-content:center}
/* ★touch-action:none★ 指を置いたまま動かして予告を見る操作を、スクロールに奪われないため */
canvas{display:block; border-radius:16px; touch-action:none}

/* ── 音符と星のキャンバス（画面いっぱい）─────────────
   ★pointer-events:none を外さないこと★
     盤の上に全面で重なる板。外すと盤が1マスも押せなくなる。
     過去に、救済画面（position:fixed の板）が誤爆して操作不能になった事故がある。
   ★背景を持たせないこと★ §5-4「画面いっぱいの背景の塗りつぶしをしない」。
     透明のまま重ね、JS も clearRect しかしない（塗るのは音符と星だけ）。 */
#fx{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none;
  border-radius:0;          /* 全面なので角丸は要らない（canvas の共通指定を打ち消す） */
  /* ★z-index を付けないこと★
       付けない（auto）と、同じ #stage の中では **HTMLに書いた順** で重なる。
       #fx → #handSign → #coach の順に書いてあるので、
         ・盤（#boardBox は position 指定なし＝positioned要素より必ず下）より上に描かれ、
         ・れんしゅうの指マークと 対戦中の案内は 音符と星に隠されない。
       z-index:2 を付けると案内より上に来てしまい、案内が粒に埋もれる。
       カットイン文字(#chainPop, z-index:5)より下なのは、どちらの書き方でも変わらない。 */
}

/* ── 盤のふち ──────────────────────────
   ★揺れが見えない原因は「振幅」ではなく「基準線が無いこと」だった★（2026-09-09 実測）
     盤の canvas は 426px、画面は 430px。盤の背景(#070b1c→#111a3a)と
     body の背景(#16204a→#070b1c)がほぼ同じ暗さなので、
     **同じ色の闇の上を、同じ色の闇が動いている**状態だった。
     読める線を1本置くと、同じ振幅でも「揺れた」と分かる。 */
#board{box-shadow:0 0 0 2px rgba(247,215,116,.30), 0 10px 34px rgba(0,0,0,.55)}
/* はじけた瞬間だけ、ふちを光らせる。★局所の発光★なので §5-4 の全画面フラッシュには当たらない。
   ★揺れとは別のクラスにしてある★——動きを止めている端末でも、これは出す（「弱める」であって「消す」ではない）。 */
/* ★太さとにじみの正本は src/ui/render.js の BOARD_RIM★（2026-09-09）
     ここに数字を書くと、**光る面積の合算に入れられない**（合算は JS 側にあるため）。
     app.js が起動時に --brim-w / --brim-blur を入れる。 */
#stage.rim #board{
  box-shadow:0 0 0 var(--brim-w,3px) rgba(247,215,116,.95),
             0 0 var(--brim-blur,30px) rgba(247,215,116,.45),
             0 10px 34px rgba(0,0,0,.55);
  transition:box-shadow .09s linear;
}
/* 画面の枠の発光（2026-09-09）
   ★太さ・にじみ・明るさの正本は src/ui/render.js の RIM★
     ここに数字を書き写すと、CSSだけ変えたときに面積の検査が反応しない
     （揺れを「クラスが付いたか」で見ていて 2.91px しか動いていなかったのと同じ形）。
     app.js が起動時に --rim-w / --rim-blur を入れ、毎フレーム --rim-a を更新する。
   ★色は黄金から白★ シアンとマゼンタは使わない——
     マゼンタは飽和した赤に近く（§5-4）、シアンは相手の色 --p2 とぶつかって陣地が読めなくなる。
   ★明滅させない★ 立ち上がりは1回だけで、あとは JS 側がゆっくり暗くする。
     ここに animation を書き足さないこと。 */
#rim{
  /* ★!important を付ける★ [hidden]{display:none !important} と同じ理由。
       あとから詳細度の高い規則がこれを上書きすると、**例外も出さずに操作不能**になる。 */
  position:fixed; inset:0; pointer-events:none !important; z-index:60;
  opacity:var(--rim-a,0);
  box-shadow:
    inset 0 0 var(--rim-blur,12px) calc(var(--rim-w,4px) * .5) rgba(247,215,116,.95),
    inset 0 0 calc(var(--rim-blur,12px) * 2.2) rgba(255,246,214,.55);
}

#handSign{
  position:absolute; font-size:34px; pointer-events:none;
  animation:tap 1.1s ease-in-out infinite; filter:drop-shadow(0 2px 6px #000);
}
@keyframes tap{0%,100%{transform:translate(-50%,-38%) scale(1)}50%{transform:translate(-50%,-52%) scale(.86)}}

/* ── 画面（オーバーレイ） ───────────────── */
/* ★上寄せ＋autoマージンで中央に見せる★（2026-09-11・v1.15 で既定を直した）
     もとは `justify-content:center`。`overflow-y:auto` と組み合わせると、
     中身が画面より高いとき**上にあふれた分へはスクロールしても到達できない**。
     見出しが切れて読めなくなる（オーナー報告「一番上の記録が見えなくなっちゃった」）。
   ★画面を1つずつ列挙して直さないこと★
     最初は #scHowto → #scSettings → #scRecords → #scNews と足していったが、
     **全員が最初に見る #scTitle が漏れていた**（844×390 で先頭22pxが到達不能）。
     §0-14(3) で「既定が間違っているなら既定を直す」と決めた直後に、
     すぐ隣で列挙方式をやって同じ穴を開けていた。
   ★autoマージンの役割★
     先頭と末尾の子に margin:auto を置くと、
       ・中身が収まるとき … 余白を吸って**今までどおり中央**に見える
       ・中身があふれるとき … autoは0に潰れて**上から並び、上までスクロールできる**
     justify-content:center ではこの切り替わりが起きない（そこが今回の事故）。 */
.screen{
  position:absolute; inset:0; z-index:10; display:none;
  flex-direction:column; align-items:center; justify-content:flex-start; gap:14px;
  padding:calc(env(safe-area-inset-top,0px) + 18px) 18px calc(18px + var(--safe-b));
  background:radial-gradient(120% 90% at 50% 0%, #16204a 0%, var(--bg1) 62%);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.screen.show{display:flex}
.screen > *:first-child{margin-top:auto}
.screen > *:last-child{margin-bottom:auto}
h1{font-size:34px; margin:0; letter-spacing:.14em; font-weight:800}
h2{font-size:24px; margin:0}
/* ★見出しは中央440pxの列に左揃えでそろえる★（2026-09-11 オーナー指摘 2回目）
     もとは `align-self:flex-start` で、**画面の左端**に貼り付いていた。
     中身（.setting / .howto / #howtoBtns / .sizelist）はどれも max-width で中央寄せなので、
     **画面が広いほど見出しだけが左へ離れる**。1600px幅で実測562pxだった。
   ★個別のクラスで1つずつ直さないこと★
     .setting(2026-09-08) → .sizeh(2026-09-11) → あそびかた(今回) と3回同じ事故を起こした。
     既定が間違っているので、既定を直す。新しい見出しを足しても自動でそろう。
   ★width:100% と max-width をセットで指定する★
     align-self:center だけだと幅が中身ぶんに縮み、短い見出しほど右へずれる。 */
h3{font-size:15px; margin:14px 0 2px; color:var(--dim); font-weight:600;
   align-self:center; width:100%; max-width:440px; text-align:left}
.sub{color:var(--dim); font-size:13px; margin:0; text-align:center}
.logo{text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px}
.logoMoon{
  width:74px; height:74px; border-radius:50%;
  background:radial-gradient(circle at 34% 32%, #fff6d8, #f7d774 55%, #9c7c2a);
  box-shadow:0 0 44px rgba(247,215,116,.45);
}
.tag{color:var(--dim); font-size:14px; margin:0}
button.big{
  min-width:220px; padding:16px 26px; border-radius:14px; border:none; cursor:pointer;
  background:linear-gradient(180deg,#f7d774,#d8ae43); color:#221a05;
  font-size:19px; font-weight:800; box-shadow:0 6px 22px rgba(247,215,116,.28);
}
button.big.alt{background:linear-gradient(180deg,#8f9bff,#5c68d8); color:#0b0f26; box-shadow:none}
button.big:active{transform:translateY(1px)}
button.ghost{
  padding:11px 18px; border-radius:11px; cursor:pointer;
  background:rgba(255,255,255,.07); border:1px solid var(--line); color:var(--text); font-size:14px;
}
.menu{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.menu button{
  padding:9px 14px; border-radius:10px; background:rgba(255,255,255,.06);
  border:1px solid var(--line); color:var(--text); font-size:13px; cursor:pointer;
}
.menu button.lead{
  background:rgba(247,215,116,.16); border-color:rgba(247,215,116,.55); color:var(--p1); font-weight:700;
}
.row{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.row.col{flex-direction:column; align-items:center}
.close{margin-top:8px}
.credit{color:rgba(232,236,255,.4); font-size:11px; text-align:center; margin:6px 0 0}
.credit a{color:inherit}

/* 結果 */
#resultTitle{font-size:40px; letter-spacing:.1em}
.chainline{font-size:17px; color:var(--p1); font-weight:700}

/* ★きょうの月（.daylist）は 2026-09-08 に撤去した★
   セレクタだけ消して宣言ブロックを残すと、次のルールまで巻き添えで消える。
   実際にやったことがあるので、消すときは必ず { } ごと消すこと（通し検証が機械で見張っている）。 */

/* ── えらぶボタンの帯（BGMの曲えらび）─────────────
   音量は 2026-09-08 にスライドバーへ変えた（オーナー指示）。ここは曲えらびだけが使う。 */
/* ★左そろえ★ 中央寄せだと、見出しの左端と1つ目のボタンの左端がずれる */
.segs{display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-start; width:100%; max-width:440px}
.seg{
  padding:9px 13px; border-radius:10px; font-size:13px; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--text);
}
.seg.on{
  background:rgba(247,215,116,.18); border-color:rgba(247,215,116,.6);
  color:var(--p1); font-weight:700;
}

/* 記録 */
.stats{
  display:grid; grid-template-columns:repeat(2,minmax(120px,1fr)); gap:8px; width:100%; max-width:420px;
}
.stats div{background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:10px; padding:9px 11px; font-size:13px}
.stats b{display:block; font-size:19px; color:var(--p1)}
.opt{display:flex; gap:9px; align-items:center; font-size:15px; padding:7px 2px}
.opt input{width:20px; height:20px}

/* ── せっていの1項目 ─────────────────────────
   ★見出しと操作を必ず同じ箱に入れる★（2026-09-08 オーナー指摘）
     もとは h3 が `align-self:flex-start`（画面いっぱいの左端）で、操作は max-width で中央寄せ。
     **画面が広いほど左右に離れて**、どの見出しがどの操作の説明か分からなくなっていた。
     箱に同じ max-width を持たせることで、広さによらず左端がそろう。 */
.setting{width:100%; max-width:440px; display:flex; flex-direction:column; gap:3px}
/* h3 の align-self:flex-start は箱の中では邪魔になる（幅が中身ぶんに縮んで右端の数字が寄る） */
.setting h3{
  align-self:stretch; margin:12px 0 2px;
  display:flex; justify-content:space-between; align-items:baseline; gap:8px;
}
.setting h3 b{color:var(--p1); font-size:16px; font-weight:800}
.setting .opt{width:100%}

/* ── 音量のスライドバー ───────────────────────
   ★つまみと帯を大きく取る★ 子どもの指でも当たるように、つまみ28px・当たり判定34px。
   帯の「たまっている側」は --fill（%）で塗る。JSが値を変えるたびに設定する。 */
.slider{
  -webkit-appearance:none; appearance:none;
  width:100%; height:34px; margin:2px 0 0; background:none; cursor:pointer;
  /* ★縦スクロールは残し、横のドラッグはつまみに渡す★
     せっていは縦に長くて overflow-y:auto なので、これが無いと
     つまみを動かしたつもりが画面スクロールになる */
  touch-action:pan-y;
}
.slider:focus{outline:none}
.slider::-webkit-slider-runnable-track{
  height:12px; border-radius:99px; border:1px solid var(--line);
  background:linear-gradient(90deg,
    #8a7a3a 0%, var(--p1) var(--fill,50%), rgba(255,255,255,.10) var(--fill,50%));
}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; margin-top:-9px;
  width:28px; height:28px; border-radius:50%; border:none;
  background:radial-gradient(circle at 34% 32%, #fff6d8, #f7d774 60%, #b8902f);
  box-shadow:0 2px 10px rgba(0,0,0,.55);
}
.slider::-moz-range-track{
  height:12px; border-radius:99px; border:1px solid var(--line); background:rgba(255,255,255,.10);
}
.slider::-moz-range-progress{height:12px; border-radius:99px; background:var(--p1)}
.slider::-moz-range-thumb{
  width:28px; height:28px; border-radius:50%; border:none;
  background:radial-gradient(circle at 34% 32%, #fff6d8, #f7d774 60%, #b8902f);
  box-shadow:0 2px 10px rgba(0,0,0,.55);
}

/* ★アプリ側で「がめんを ゆらす」を選んだら、ここの例外を打ち消す★（2026-09-09）
     打ち消し方は **:not(.force-motion) で囲む** こと。
     `html.force-motion #stage.shake{animation:screenShake ...}` と書き足す方法は採らない——
     アニメの名前・長さ・イージングの正本が2か所になり、必ず片方が古くなる。
     .force-motion は app.js が <html> に付ける（付ける条件は resolveMotion 1か所が決める）。 */
@media (prefers-reduced-motion: reduce){
  html:not(.force-motion) #handSign{animation:none}
  html:not(.force-motion) #hud.mine #turnDot{animation:none}
}


/* ── あそびかた ─────────────────────────
   ★盤と同じ見た目で「わく」を見せる★ 玉の位置は render.js の DOTS から流し込む。
   キャンバスは使わない（BoardView を2つ動かすとタイマーが残る・高さが潰れる） */
/* ★ここに「#scXxx{justify-content:flex-start}」を足さないこと★
     2026-09-11 に `.screen` の既定ごと直した（上の .screen の説明を読むこと）。
     1画面ずつ足す方式は #scTitle を取りこぼしていた。 */
.howto{display:flex; flex-direction:column; gap:11px; width:100%; max-width:440px}
.hrow{
  display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:12px; padding:9px 11px;
}
.hcells{display:flex; align-items:center; gap:7px; flex:0 0 auto}
.hcellWrap{display:flex; flex-direction:column; align-items:center; gap:2px}
.hcell{
  position:relative; width:38px; height:38px; border-radius:9px;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.10);
}
.hcell.p1{background:rgba(247,215,116,.13)}
.hcell.p2{background:rgba(127,140,255,.13)}
.hcell.boom{border-color:var(--p1); box-shadow:0 0 14px rgba(247,215,116,.55)}
.hcell i{
  position:absolute; width:8px; height:8px; border-radius:50%;
  transform:translate(-50%,-50%);
  border:1.2px solid rgba(255,255,255,.24); background:none;   /* 空きわく */
}
.hcell i.on{border:none; background:var(--p1); box-shadow:0 0 7px var(--p1)}
.hcell.p2 i.on{background:var(--p2); box-shadow:0 0 7px var(--p2)}
.hhint{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:19px; font-weight:800; color:var(--p1); opacity:.75;
  text-shadow:0 0 4px rgba(0,0,0,.8);
}
.harrow{color:var(--dim); font-size:16px}
.hlabel{font-size:10px; color:var(--dim)}
.htext{margin:0; font-size:13px; line-height:1.5}
#howtoBtns{width:100%; max-width:440px; gap:8px}
#howtoBtns .step{display:flex; align-items:center; gap:10px; justify-content:flex-start; width:100%; min-width:0; font-size:16px}
#howtoBtns .step b{
  flex:0 0 auto; width:24px; height:24px; border-radius:50%;
  background:rgba(0,0,0,.22); display:flex; align-items:center; justify-content:center; font-size:13px;
}
.more{width:100%; max-width:440px; font-size:13px; color:var(--dim)}
.more summary{cursor:pointer; padding:8px 2px; color:var(--text)}
.more ul{margin:2px 0 0; padding-left:1.2em; line-height:1.7}
.more b{color:var(--p1)}

/* ── 対戦中の案内（コーチ）────────────────────
   ★同時に1行だけ・24字以内★（src/ui/coach.js が正本。test-coach.mjs が検査する） */
#coach{
  position:absolute; left:50%; top:6px; transform:translateX(-50%);
  max-width:calc(100% - 24px); padding:8px 14px; border-radius:999px;
  background:rgba(10,15,38,.86); border:1px solid rgba(247,215,116,.5); color:var(--text);
  font-size:13.5px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  box-shadow:0 4px 18px rgba(0,0,0,.45);
  animation:coachIn .28s ease-out;
  pointer-events:none;   /* ★盤の操作を絶対に邪魔しない★ */
}
/* ★個別の [hidden] 対策は、ファイル先頭の `[hidden]{display:none !important}` に集約した★
   ここに1つずつ足していく方式では、要素を増やすたびに同じ事故が起きる（実際に3回起きた）。
   下の2行は、通し検証が「このルールが消えていないか」を見張るための目印として残す。 */
#coach[hidden]{display:none}
#hud[hidden]{display:none}
@keyframes coachIn{from{opacity:0; transform:translateX(-50%) translateY(-6px)}to{opacity:1}}
@media (prefers-reduced-motion: reduce){ html:not(.force-motion) #coach{animation:none} }

/* ── 大きな連鎖のカットイン（画面いっぱいの「〇れんさ！」）──────────
   > 見た目でも派手にしてほしいな。画面全面に『〇連鎖！』みたいな大きな文字をドーン！（オーナー）

   ★盤の操作を絶対に邪魔しない★
     pointer-events:none（この1行が命綱）＋ 出していないときは hidden。
     過去に、起動失敗の救済画面が誤爆して盤が操作不能になる事故を起こしている。

   ★光過敏性発作への配慮（仕様書§5-4）★
     - **背景を塗らない**。文字と影だけなので、明滅する面積が画面全体にならない
     - 連続で出さない（発火の間隔は src/ui/app.js が最低 CHAIN_POP_MS ミリ秒あける）
     - 赤の強い明滅は使わない（金→白のみ）
     - 「えんしゅつを ひかえめに」と prefers-reduced-motion では **動きだけ止めて、文字は出す**
       （§5-4が求めているのは「弱める」。全部消すと、その設定の人は何が起きたか分からない） */
#chainPop{
  position:absolute; inset:0; z-index:5;
  pointer-events:none;                     /* ★消さないこと★ */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
}
/* ★数字だけ 連鎖が伸びるほど大きくする★（2026-09-09 オーナー指示）
     > 「〇連鎖」の文字は、今のサイズから数字だけサイズを大きくしていこうよ。
     >  「れんさ」部分は変えなくていい
     倍率 --pop は app.js が入れる（1.0〜1.9）。正本は app.js の POP_SCALE。
     ★42vw を超えないこと★ 画面の横幅からはみ出すと、数字が切れて何連鎖か読めなくなる。
       clamp の上限に vw を掛けているのはそのため（倍率をかけても vw の上限は効き続ける）。 */
#chainPop{--pop:1}
#chainPop b{
  font-size:clamp(110px, calc(42vw * var(--pop)), calc(320px * var(--pop)));
  line-height:.84; font-weight:900;
  color:var(--p1);
  text-shadow:0 0 20px rgba(247,215,116,.9), 0 0 52px rgba(247,215,116,.5), 0 7px 0 rgba(0,0,0,.5);
}
/* ★「れんさ！」は変えない★（オーナー指示）。数字とのサイズ差が「大きさ」を伝える */
#chainPop .unit{
  font-size:clamp(34px, 13vw, 92px); font-weight:900; letter-spacing:.1em;
  color:#fff6d8; text-shadow:0 0 16px rgba(247,215,116,.85), 0 4px 0 rgba(0,0,0,.45);
}
/* 8連鎖以上は白へ（もう一段あがった感じを出す） */
#chainPop.hot b{color:#fff; text-shadow:0 0 24px #fff, 0 0 60px rgba(247,215,116,.75), 0 7px 0 rgba(0,0,0,.5)}
/* ★寿命は render.js の POP_MIN_MS(600ms) より少しだけ長くする★
   短いと、連鎖が伸びて数字だけ差し替えたときに「消えた要素の中身を書き換える」ことになる */
#chainPop.play{animation:chainPop .62s cubic-bezier(.2,1.35,.35,1) both}
@keyframes chainPop{
  0%  {opacity:0; transform:scale(.35) rotate(-7deg)}
  20% {opacity:1; transform:scale(1.18) rotate(2deg)}
  36% {opacity:1; transform:scale(1) rotate(0deg)}
  72% {opacity:1; transform:scale(1)}
  100%{opacity:0; transform:scale(1.22)}
}

/* ── 画面のゆれ ───────────────────────────
   ★揺らすのは #stage（盤の入れ物）だけにする★
     #app を揺らすと、中の position:fixed（起動失敗の救済画面）の基準が #app になり、
     いざ救済画面を出したいときに位置がずれる。盤が揺れれば十分に伝わる。
   強さは --sk（px）で渡す。連鎖が伸びるほど大きくする。 */
/* ★--sk（振幅px）と --skms（長さ）は src/ui/app.js が入れる★ 正本は render.js の SHAKE。
   ★係数の絶対値は 1.0 を超えないこと★（超えると、JSが渡したpxより大きく動く＝上限が嘘になる）
   ★イージングは linear★
     cubic-bezier(.36,.07,.19,.97) は「アニメ全体に1回かける」用の曲線で、
     キーフレーム間ごとにかけると各区間が「ゆっくり始まって急に着く」動きになり、
     振動ではなく **傾き** に見える（2026-09-09 の実測で判明）。 */
#stage{--sk:6px; --skms:340ms; will-change:transform}
#stage.shake{animation:screenShake var(--skms) linear both}
/* ★1連鎖用（短い）★ 同じ型を200msでかけると約22Hzになりブレて見えるので、往復を減らす */
#stage.shake.small{animation-name:screenShakeSmall}
/* ★たて方向を よこと同じ強さまで上げてある★（2026-09-09）
     よこは 盤426px・画面430px で余白が4pxしかなく、動かしても「隠れている端」が見えない。
     たては #stage 約810px に対し盤 495px で余白が十分あるので、たてのほうがよく見える。
     ★係数の絶対値は 1.0 を超えないこと（よこ・たてとも）★
       超えると JS の SHAKE.max(24px) が嘘になる。test-render.mjs が よこ・たて両方を検査する。 */
@keyframes screenShakeSmall{
  0%  {transform:translate(0,0)}
  14% {transform:translate(calc(var(--sk) * -1),   calc(var(--sk) * .86))}
  30% {transform:translate(calc(var(--sk) * .92),  calc(var(--sk) * -.84))}
  46% {transform:translate(calc(var(--sk) * -.72), calc(var(--sk) * -.62))}
  62% {transform:translate(calc(var(--sk) * .54),  calc(var(--sk) * .58))}
  78% {transform:translate(calc(var(--sk) * -.34), calc(var(--sk) * .36))}
  90% {transform:translate(calc(var(--sk) * .18),  calc(var(--sk) * -.2))}
  100%{transform:translate(0,0)}
}
@keyframes screenShake{
  0%  {transform:translate(0,0)}
  9%  {transform:translate(calc(var(--sk) * -1),   calc(var(--sk) * .9))}
  18% {transform:translate(calc(var(--sk) * .92),  calc(var(--sk) * -.94))}
  27% {transform:translate(calc(var(--sk) * -.84), calc(var(--sk) * -.72))}
  36% {transform:translate(calc(var(--sk) * .76),  calc(var(--sk) * .8))}
  45% {transform:translate(calc(var(--sk) * -.66), calc(var(--sk) * .58))}
  54% {transform:translate(calc(var(--sk) * .56),  calc(var(--sk) * -.66))}
  63% {transform:translate(calc(var(--sk) * -.44), calc(var(--sk) * -.44))}
  72% {transform:translate(calc(var(--sk) * .34),  calc(var(--sk) * .46))}
  81% {transform:translate(calc(var(--sk) * -.22), calc(var(--sk) * .26))}
  90% {transform:translate(calc(var(--sk) * .12),  calc(var(--sk) * -.18))}
  100%{transform:translate(0,0)}
}
/* ★「ひかえめ」のとき★ 拡大も回転もせず、ふわっと出て消えるだけにする。
   ★animation そのものを消してはいけない★——消すと出しっぱなしに見えるうえ、
   「弱める」ではなく「無かったこと」になる（2026-09-09 に直した設計ミス）。 */
#chainPop.soft.play{animation:chainPopSoft .5s linear both}
@keyframes chainPopSoft{
  0%  {opacity:0}
  12% {opacity:1}
  78% {opacity:1}
  100%{opacity:0}
}
@media (prefers-reduced-motion: reduce){
  /* 動きは止めるが、文字は出る（animation:none なので拡大も回転もしないまま表示される）。
     消える責任は app.js の POP_MS のタイマーが持つ。
     ★#stage.rim（ふちの光）はここで消さないこと★
       これは「移動」ではなく「明るさの変化」なので、前庭障害の配慮の対象外。
       ここまで消すと、この設定の端末には**はじけたことが何も伝わらなくなる**（v1.6 の失敗）。 */
  html:not(.force-motion) #chainPop.play{animation:none}
  html:not(.force-motion) #stage.shake{animation:none}
}

/* ── 版番号と こうしんじょうほう ─────────────────
   ★版番号は src/version.js から描く★（HTMLに書くと、JSが古いままでも新しく見える） */
.verline{
  margin:6px 0 0; padding:4px 10px; background:none; border:0;
  color:var(--dim); font-size:12px; letter-spacing:.04em; font-family:inherit;
}
/* 端末の設定で演出が止まっていることを知らせる行（ふつうのときは目立たせない） */
.verline.warn{color:#f7d774}
button.verline{cursor:pointer; text-decoration:underline; text-underline-offset:3px}
button.verline:hover{color:var(--fg)}
.news{width:100%; max-width:440px; text-align:left}
.newsItem{margin:0 0 14px}
.newsItem h3{margin:0 0 4px; font-size:14px; color:var(--p1)}
.newsItem ul{margin:0; padding-left:1.2em}
.newsItem li{margin:2px 0; font-size:13px; line-height:1.7; color:var(--fg)}

/* ── あそびかたの図に出す地形 ─────────────────
   ★盤（Canvas）の render.js drawCell と見た目をそろえる★
     十字＝ひかりの通り道 / 二重の輪＝クレーター / 帯＝雲。
     片方がCanvas・片方がDOMなので一致は機械検査できない。片方を直したら必ず両方見る。 */
.hcell.t-star{background:none; border-color:transparent}
.hcell.t-star::before,
.hcell.t-star::after{
  content:''; position:absolute; background:rgba(200,220,255,.32);
}
.hcell.t-star::before{left:50%; top:12%; width:2px; height:76%; transform:translateX(-50%)}
.hcell.t-star::after{top:50%; left:12%; height:2px; width:76%; transform:translateY(-50%)}
/* クレーターは「四角いマスの中に丸い輪」。★マス自体を丸くしないこと★（盤と形が変わる） */
.hcell.t-crater::before{
  content:''; position:absolute; left:14%; top:14%; right:14%; bottom:14%;
  border:2px solid rgba(255,255,255,.22); border-radius:50%;
}
/* 雲は「くぐもった帯」。★セレクタ本体も置くこと★
   ::before だけにすると、CSSの取りこぼし検査（.hcell.t-cloud）がすり抜ける */
.hcell.t-cloud{background:rgba(255,255,255,.03)}
.hcell.t-cloud::before{
  content:''; position:absolute; left:14%; right:14%; top:30%; height:40%;
  background:rgba(190,200,225,.22); border-radius:999px;
}

/* ── 盤の おおきさ ───────────────────────
   ★数字だけだと何マスか想像できない★ ので、点の格子で実物の形を見せる。 */
.szrow{display:flex; align-items:center; gap:10px; width:100%}
.szrow span{flex:0 0 2.6em; font-size:13px; color:var(--dim)}
.szrow .slider{flex:1 1 auto; min-width:0}
/* 「じどう」のあいだは触れない（動かせるのに戻る、という嘘をつかない） */
.slider:disabled{opacity:.45; cursor:not-allowed}
.bprev{
  display:grid; gap:3px; justify-content:center; margin:8px auto 2px;
  padding:8px; border-radius:10px; background:rgba(255,255,255,.04);
}
.bprev i{width:7px; height:7px; border-radius:2px; background:rgba(255,255,255,.22)}
.note{margin:4px 0 0; font-size:11px; line-height:1.6; color:var(--dim)}

/* ★上限で終わったときの説明★（2026-09-10）
     ふだんは出ない行なので、出たときだけ目に留まるよう枠で囲む。 */
#resultWhy{
  margin:2px 0 0; padding:7px 12px; border-radius:10px;
  background:rgba(247,215,116,.10); border:1px solid rgba(247,215,116,.28);
  line-height:1.5;
}
#resultWhy[hidden]{display:none}

/* ★もとの おおきさに もどす ボタン★（2026-09-11）
     ★.opt / .slider / .segs / .szrow のクラスを付けないこと★
       通し検証の「見出しと操作の左端がそろっている」検査が、それらの名前で
       操作の要素を拾っている。ボタンを混ぜると別のものを比べ始める。 */
#btnBoardDefault{
  align-self:flex-start; margin:4px 0 2px;
  padding:8px 14px; font-size:13px; border-radius:10px;
}

/* ★おおきさごとの さいちょう れんさ★（2026-09-11）
     幅の基準は .stats(420px) ではなく .setting 等と同じ440pxに合わせない——
     すぐ上の .stats と左端をそろえたいので 420px にする。 */
/* ★共通の h3 が 440px なので、ここだけ 420px に上書きする★
     左端そろえ自体は共通の h3 が面倒を見る（2026-09-11 に既定を直した）。
     ここで面倒を見るのは「一覧と同じ420px」という点だけ。 */
.sizeh{
  width:100%; max-width:420px; margin:14px 0 6px;
  font-size:14px; color:var(--dim); font-weight:700; text-align:left;
}
/* ★2列で 取りうる大きさを全部出す★（2026-09-11 オーナー指示）
     > それぞれのサイズごとの連鎖数を２列で最初から全て表示しておいて
     よこ4〜8 × たて5〜10 ＝ 30通り。記録が無いものは「-」。 */
.sizelist{
  width:100%; max-width:420px;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px;
}
.sizelist .row1{
  display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  padding:6px 10px; border-radius:8px; background:rgba(255,255,255,.05);
  font-size:13px; white-space:nowrap;
}
/* いま選んでいる大きさ＝これから遊ぶ盤。ここが主役 */
.sizelist .row1.now{
  background:rgba(247,215,116,.15); border:1px solid rgba(247,215,116,.45); color:var(--p1);
}
/* ふつうの盤(6×7)。いま選んでいなくても、どれが基準かが分かるようにする */
.sizelist .row1.def{border:1px dashed rgba(247,215,116,.30)}
.sizelist .row1 b{font-size:15px; color:var(--p1)}
.sizelist .row1.now b{color:#fff}
/* ★記録が無いところは「-」★ 行を出さないと「全部見えている」感じが出ない */
.sizelist .row1 .none{color:var(--dim); font-weight:400}

/* 見出しの下に添える小さな説明（どの枠が何を意味するか） */
.sizehsub{display:block; font-size:11px; font-weight:400; color:var(--dim); margin-top:2px}