/* 奇門遁甲 時盤 UI試作 — スタイル（index.html <style> から抽出・T-20260707-01） */
:root{
  --gold:#d9b25c; --gold-hi:#f6dc8a; --gold-dim:#8a6f3a;
  --paper:#e8dcc0; --mut:#9a8d70; --cyan:#aadfee;
  --red:#d96a5a; --seal:#a03325; --ink:#0a0807;
  /* ▼テーマトークン（既定=墨金）。着せ替え時は THEMES の cssVars がここを上書きする */
  --accent-rgb:217,178,92; --accent-hi-rgb:246,220,138;
  --cyan-rgb:170,223,238; --red-rgb:217,106,90;
  --paper-rgb:232,220,192; --mut-rgb:154,141,112;
  --gate-kichi:#ffd97a; --gate-kichi-rgb:255,217,122;
  --gate-kyou:#ff9384; --gate-kyou-glow-rgb:255,120,100;
  --gate-hei:#d8cfb8; --pat-col:#d8c9a4;
  --chi-col:#c6b28b; --chi-rgb:198,178,139;
  --star-col:#e8d6a8; --pillar-col:#eadfbf;
  --kyou-glow-rgb:255,140,120; --kyou-deep-rgb:190,60,45;
  --seal-a:#b8442f; --seal-b:#8c2a1c; --seal-text:#f3e2ce;
  --bg-0:#191410; --bg-1:#0c0a08; --bg-2:#060504;
  --board-bg-a:rgba(26,20,12,.92); --board-bg-b:rgba(12,9,6,.94);
  --cell-bg-a:rgba(46,36,20,.35); --cell-bg-b:rgba(10,8,5,.2);
  --center-bg-a:rgba(58,44,22,.5); --center-bg-b:rgba(12,9,6,.3);
  --panel-a:rgba(24,18,10,.97); --panel-b:rgba(10,8,6,.97);
  --flash-a:rgba(255,236,180,.5); --flash-b:rgba(255,220,140,.12);
  --pulse-in:rgba(70,52,22,.55);
  /* ▼字体トークン（T-20260920-03）。src/skin/skinSchema.ts の DEFAULT_FONTS と同じ値であること */
  --font-display:'Yuji Syuku',serif;
  --font-body:'Shippori Mincho','Yu Mincho','游明朝',serif;
  /* ▼直書きだった色のトークン化（T-20260920-03・値は従来と同一。テーマで変わらない固定色） */
  --btn-grad-a:#241c0e; --btn-grad-b:#171106;
  --btn-fg:#f0dfae; --btn-fg-on:#ffe9a8; --btn-glow-rgb:217,178,92;
  --field-bg:#141009; --field-fg:#e8dcc0;
  --badge-fg:#e8b7a6; --badge-bg:rgba(120,40,30,.18);
  --demo-fg:#c9948a; --sealn-glow:rgba(255,190,160,.28);
  --pop-bg:rgba(20,15,8,.94); --pop-bg-soft:rgba(20,15,8,.6);
  --authpop-a:rgba(24,18,10,.97); --authpop-b:rgba(10,8,6,.97);
  --autherr-fg:#ff9384; --scrim-bg:rgba(6,5,3,.66);
  --menu-line-rgb:138,111,58;
}
*{box-sizing:border-box}
html,body{margin:0}
/* 根（html）にも背景色を与える（T-20260913-13 依頼2・実機 iPhone Safari で画面下が明るい灰）。
   実測（headless Chrome 390×844）: html は background-color:rgba(0,0,0,0)・background-image:none で、
   暗い色は **body の背景がルート（canvas）へ伝播した分だけ**だった。伝播した背景は文書の外側
   （iOS Safari の引っ張り＝オーバースクロールの領域）までは色を運ばず、そこに根の既定の白が出る。
   根そのものに色を敷けば、引っ張り領域も同じ暗さになる（body の暈しの下でも灰にならない）。 */
html{background-color:var(--bg-2)}
body{
  min-height:100vh; color:var(--paper);
  /* 背景色（単色）＋放射の階調の2段重ね。見え方は従来と同じ（階調が body の箱を覆う）で、
     階調が届かない場合でも body 自身が黒系であることを保つ */
  background-color:var(--bg-2);
  background-image:radial-gradient(1100px 700px at 50% 40%, var(--bg-0) 0%, var(--bg-1) 55%, var(--bg-2) 100%);
  font-family:var(--font-body);
  overflow-x:hidden;
}
body::before{ /* vignette */
  content:''; position:fixed; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(ellipse at 50% 45%, transparent 52%, rgba(0,0,0,.5) 100%);
}
canvas#bg{position:fixed; inset:0; z-index:0; width:100%; height:100%}
#trail,#fx{position:fixed; inset:0; pointer-events:none; width:100%; height:100%}
#trail{z-index:30} #fx{z-index:31}

/* ---- 背景の法陣（八卦・十二支の輪） ---- */
#rings{position:fixed; inset:0; display:grid; place-items:center; z-index:0; pointer-events:none}
#rings svg{position:absolute; width:min(96vmin,900px); height:min(96vmin,900px);
  filter:drop-shadow(0 0 6px rgba(var(--accent-rgb),.45));}
#ringBase{opacity:.13; animation:spin 110s linear infinite; transition:opacity .8s}
#ringBurst{opacity:0; animation:spinR 9s linear infinite; transition:opacity 1.4s}
body.casting #ringBase{opacity:.17}
body.casting #ringBurst{opacity:.20; transition:opacity .35s}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinR{to{transform:rotate(-360deg)}}

/* ---- 掃過する巨大文字 ---- */
#sweep{position:fixed; inset:0; display:grid; place-items:center; pointer-events:none; z-index:35;
  font-family:var(--font-display); font-size:54vmin; line-height:1; white-space:nowrap;
  color:rgba(var(--accent-hi-rgb),.14); text-shadow:0 0 70px rgba(var(--accent-rgb),.38); opacity:0}
#sweep.go{animation:sweep .95s cubic-bezier(.3,.6,.4,1) forwards}
@keyframes sweep{
  0%{opacity:0; transform:translateX(46vw) scale(1.12) skewX(-6deg)}
  16%{opacity:1} 80%{opacity:.85}
  100%{opacity:0; transform:translateX(-52vw) scale(.94) skewX(-6deg)}
}

/* ---- ヘッダ ---- */
header{position:relative; z-index:20; display:flex; flex-wrap:wrap; align-items:center;
  gap:8px 18px; padding:16px 22px 8px}
h1{font-family:var(--font-display); font-weight:400; margin:0;
  font-size:clamp(24px,4vmin,38px); letter-spacing:.32em; color:var(--gold-hi);
  text-shadow:0 0 18px rgba(var(--accent-rgb),.35)}
h1 small{font-size:.42em; letter-spacing:.18em; color:var(--mut); margin-left:.6em}
.badge{font-size:11.5px; letter-spacing:.12em; color:var(--badge-fg); padding:3px 9px;
  border:1px solid rgba(var(--red-rgb),.55); border-radius:3px; background:var(--badge-bg)}
.controls{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-left:auto}
input[type=datetime-local],select{
  background:var(--field-bg); border:1px solid var(--gold-dim); color:var(--field-fg);
  padding:7px 9px; border-radius:4px; font-family:inherit; font-size:14px; color-scheme:dark}
button{cursor:pointer; background:linear-gradient(180deg,var(--btn-grad-a),var(--btn-grad-b));
  border:1px solid var(--gold-dim); color:var(--btn-fg); padding:8px 13px; border-radius:4px;
  font-family:inherit; font-size:13.5px; letter-spacing:.14em;
  transition:box-shadow .25s, transform .12s}
button:hover{box-shadow:0 0 14px rgba(var(--btn-glow-rgb),.35)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.35; cursor:default; box-shadow:none}
#cast{font-family:var(--font-display); font-size:17px; padding:8px 20px 8px 26px;
  letter-spacing:.55em; border-color:var(--gold); color:var(--btn-fg-on)}
/* 刻送り（T-20260802-01）は他のボタンより小さめの字送りにする。理由は見た目でなく寸法で、
   ログイン中の操作列がヘッダ1行に収まらなくなると列が折り返して盤全体が下がり、画面下の通知と
   重なる（実測: 1264x805 で盤の下端 691.8px → 742.8px・通知の上端 738px）。
   本E2E 手順8（desktop 幅の「通知が盤に重なっていない」）が毎回この性質を検査する */
#prevK,#nextK{padding:8px 9px; font-size:13px; letter-spacing:.02em}
/* 日時欄＋「現在時刻に戻す」（T-20260823-01・オーナー提案 D-0275）。旧「いま」の文字ボタンを、
   日時欄の**枠の内側の右端**に置く図柄だけのボタンへ置き換えた＝この領域の横幅が図柄のぶん広がる。
   枠・背景は入れ物（#dtWrap）が持ち、中の日時欄は枠なしにして1つの欄に見せる（日時の手入力・端末の
   日時ピッカーは従来どおり）。文字の大きさは上の `input[type=datetime-local]` の指定のまま
   （携帯幅 16px の指定＝@media の中）＝ここでは font-size を書かない。 */
#dtWrap{display:inline-flex; align-items:center; background:var(--field-bg);
  border:1px solid var(--gold-dim); border-radius:4px}
#dtWrap #dt{background:transparent; border:none; border-radius:0; min-width:0}
/* 端末の日時ピッカーの印（ブラウザが描く図柄）を隣の「現在時刻に戻す」の図柄と同じ金系に揃える
   （T-20260824-02・D-0282）。印は背景画像なので色を直に指定できず、白い画素を filter で染める
   ＝実測で白（ffffff）を efdfae へ（#now の色＝トークン --btn-fg との差 ΔE00 0.35）。iPhone の Safari は
   この印を描かないため見え方は変わらない。押すと日時ピッカーが開く動きは従来どおり */
#dtWrap #dt::-webkit-calendar-picker-indicator{
  filter:brightness(0) invert(.72) sepia(1) hue-rotate(8deg) saturate(.9)}
/* 押せる領域は 44×44 CSS px 以上（デジタル庁デザインシステム・ボタンの目安）。欄の背を高くせずに
   確保するため、上下へはみ出す分を負の余白で吸収する（見た目の高さは従来のまま＝ヘッダは伸びない）。
   色の付く範囲は padding の内側だけ（background-clip:content-box）＝図柄まわりだけが光る */
#now{display:flex; align-items:center; justify-content:center; box-sizing:border-box;
  width:44px; height:44px; margin:-5px 0; padding:6px; line-height:0;
  background:none; background-clip:content-box; border:none; border-radius:8px;
  color:var(--btn-fg); transition:background-color .2s}
#now:hover{background-color:rgba(var(--btn-glow-rgb),.18); box-shadow:none}
#now:focus-visible{outline:2px solid var(--gold-hi); outline-offset:-6px}
#now:disabled{background:none}

/* ---- 盤 ---- */
main{position:relative; z-index:10; display:flex; justify-content:center; padding:10px 12px 0}
#stage{position:relative}
#gridfx{position:absolute; pointer-events:none; overflow:visible; opacity:0; z-index:5}
#gridfx.draw{opacity:1}
#gridfx.fade{opacity:0; transition:opacity .9s}
#gridfx line,#gridfx rect{fill:none; stroke:var(--gold-hi); stroke-width:1.5;
  filter:drop-shadow(0 0 5px rgba(var(--accent-hi-rgb),.8))}
#gridfx.draw line,#gridfx.draw rect{stroke-dasharray:1; stroke-dashoffset:1; animation:drawline .7s ease forwards}
@keyframes drawline{to{stroke-dashoffset:0}}

/* 盤の寸法と、セル1つの実寸（--cell）。セル内の字の大きさはすべて --cell の比率で決める
   （T-20260730-01 単位F）。従来は vmin 基準の clamp() だったが、盤の幅の式が画面幅で
   切り替わる（下の @media）ため、狭い画面ではセルに対して字が大きすぎ／小さすぎになり、
   重なり・はみ出しが出ていた（320px幅で29件・タブレット縦768pxで17件を実測）。
   --cell = (盤の幅 − 余白9px×2 − 隙間5px×2) ÷ 3。比率の基準は 1280×900 のときの見え方
   （そのときセルは 218.67px＝従来の clamp 上限がちょうど効く大きさ）。 */
#board{position:relative; --bw:min(76vmin,690px); --cell:calc((var(--bw) - 28px) / 3);
  width:var(--bw); aspect-ratio:1/1;
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  gap:5px; padding:9px;
  background:linear-gradient(160deg, var(--board-bg-a), var(--board-bg-b));
  border:1px solid rgba(var(--accent-rgb),.65);
  outline:1px solid rgba(var(--accent-rgb),.22); outline-offset:7px;
  box-shadow:0 0 90px rgba(var(--accent-rgb),.10), inset 0 0 70px rgba(0,0,0,.65)}
#board.shake{animation:shake .16s linear}
@keyframes shake{
  0%,100%{transform:translate(0,0)} 25%{transform:translate(2.5px,-2px)}
  50%{transform:translate(-2px,1.5px)} 75%{transform:translate(1.5px,2px)}}
#board.pulse{animation:boardPulse .85s ease-out}
@keyframes boardPulse{
  30%{box-shadow:0 0 160px rgba(var(--accent-hi-rgb),.5), inset 0 0 60px var(--pulse-in)}}

.cell{position:relative; border:1px solid rgba(var(--accent-rgb),.30); overflow:hidden; cursor:pointer;
  background:radial-gradient(120% 120% at 50% 32%, var(--cell-bg-a), var(--cell-bg-b) 70%)}
.cell:hover{border-color:rgba(var(--accent-hi-rgb),.7)}
.cell.gr-kichi{box-shadow:inset 0 0 36px rgba(var(--accent-rgb),.16)}
.cell.gr-kyou{box-shadow:inset 0 0 36px rgba(var(--kyou-deep-rgb),.16); border-color:rgba(var(--red-rgb),.42)}
.cell .inner{position:absolute; inset:0; padding:5% 6%; opacity:0; transform:scale(1.55); filter:blur(7px)}
.cell.locked .inner{opacity:1; transform:scale(1); filter:blur(0);
  transition:opacity .38s ease, transform .5s cubic-bezier(.2,1.5,.4,1), filter .38s ease}
#board.skipfast .cell.locked .inner{transition-duration:.15s,.15s,.15s}
.cell.ph .inner{opacity:1; transform:none; filter:none}
.cell.ph{cursor:default}

.god{position:absolute; top:5%; left:6%; font-family:var(--font-display); color:var(--cyan);
  font-size:calc(var(--cell) * .1052); text-shadow:0 0 10px rgba(var(--cyan-rgb),.45)}
.dir{position:absolute; top:6%; right:7%; color:var(--mut);
  font-size:calc(var(--cell) * .0549); letter-spacing:.22em}
/* 天地干の縦組み（左レール）。translateY は -54% → -58%（T-20260802-01 依頼4）＝格を2行まで出せる
   よう下側に1行ぶんの帯を空ける。上限は八神（.god・上端5%〜）に触れない範囲で、実測の余白は
   本E2E（scripts/e2e-pages.mjs 手順9 の「想定外の重なりなし」）が幅ごとに毎回検査する。
   -58% → **-61.9%**（T-20260906-04・オーナー決裁 D-0355＝A案）: 格（.pat）の行の高さを
   1.15 → 1.29 へ広げた**ぶんだけ**（2行で 0.28em＝--cell の 1.792%）このレールを上へ寄せる。
   この移動量は .stems 自身の高さ（--cell の 46.02% ＝ .ten 0.2835×1.02 ＋ .chi 0.1555×1.1）に対して
   3.9 ポイント。**幅に依らず --cell の 1.795%** で一定＝どの画面幅でも同じ比率で動く
   （実測: 375px幅で 1.94px・768px幅で 3.32px・1280px幅で 3.92px。オーナー決裁の上限は
   「375px 幅で 2px まで」）。**九星・八門の右レール（下の .sg）も同じ絶対量だけ上へ寄せる**
   （T-20260906-04 便3。片側だけ動かすと、上へ伸びた 2 行の .pat が右レールに食い込む）。
   八神との余白の実測（.god の下端 → .stems の上端）は
   375px=0.68px／768px=0.38px／1280px=0.93px で、いずれも正（本E2E の重なり検査が毎回見る） */
.stems{position:absolute; left:8%; top:50%; transform:translateY(-61.9%);
  display:flex; flex-direction:column; align-items:center}
.ten{font-family:var(--font-display); font-size:calc(var(--cell) * .2835); line-height:1.02;
  color:var(--gold-hi);
  text-shadow:0 0 16px rgba(var(--accent-hi-rgb),.55), 0 0 44px rgba(var(--accent-rgb),.3)}
.chi{font-family:var(--font-display); font-size:calc(var(--cell) * .1555); line-height:1.1;
  color:var(--chi-col); text-shadow:0 0 10px rgba(var(--chi-rgb),.3)}
/* 九星（上）・八門（下）の右レール。縦中央（top:50% ＋ 自分の高さの半分だけ戻す）に置く。
   -50% → **-54.8%**（T-20260906-04 便3＝検収の差し戻しの是正）: 便2（A案・オーナー決裁 D-0355）で
   格（.pat）の行の高さを 1.15 → 1.29 へ広げたぶん（2行で 0.28em ＝ --cell の 1.792%）、判定=数値あり
   （.score が出る＝.pat の**下端**が固定）で格が2行になる宮では .pat が**上へ伸びる**。左レール
   （.stems）は同じ量だけ上へ寄せたのに**この右レールは動かしていなかった**ため、.pat の上端がこの
   レールの下端に食い込んでいた（実アプリ・実データ〔九星・八門は2文字〕で実測: 375px 10.4×1.07px／
   768px 17.9×1.84px／1280px 21.1×1.07px。判定=記号のみ／なし・格1行では 0 件）。
   移動量 4.8 ポイントは**このレール自身の高さ**（--cell の 37.2% ＝ .star 0.1143 と .gate 0.1235 の
   行送り＋間隔 0.0274）に対する割合で、絶対量は --cell の 1.78〜1.83%（幅ごとの行送りの丸めの差）＝
   .stems の移動量（--cell の 1.795%）とほぼ同じ（差は 375px 幅で 0.01px）。
   実測の移動量は 375px=1.92px／768px=3.37px／1280px=3.88px。
   上には余裕がある（方位 .dir の下端→このレールの上端 17.45→15.53px／等級 .grade からは 17.18→15.26px。
   いずれも 375px 幅の実測）。下のすき間（このレールの下端→.pat の上端・判定=数値あり×格2行）は
   375px +0.85px／768px +1.52px／1280px +2.82px ＝ A案の前の位置関係に戻る。
   ※ この重なりは本E2E（scripts/e2e-pages.mjs 手順7）が**判定表示3通り × 幅 375/768/1280px ×
     格2行（強制）**で毎回検査する（九星・八門は実データのまま＝2文字で計る） */
.sg{position:absolute; right:8%; top:50%; transform:translateY(-54.8%);
  display:flex; flex-direction:column; align-items:center; gap:calc(var(--cell) * .0274)}
.star{font-family:var(--font-display); font-size:calc(var(--cell) * .1143); color:var(--star-col)}
.gate{font-family:var(--font-display); font-size:calc(var(--cell) * .1235)}
.gate.g-kichi{color:var(--gate-kichi); text-shadow:0 0 12px rgba(var(--gate-kichi-rgb),.6)}
.gate.g-hei{color:var(--gate-hei)}
.gate.g-kyou{color:var(--gate-kyou); text-shadow:0 0 12px rgba(var(--gate-kyou-glow-rgb),.45)}
/* 格は名称のみを「・」で列挙。**2行まで**表示し（T-20260802-01 依頼4）、2行に収まらないときだけ
   末尾を … で省略する（全件は宮をクリックした詳細パネルと title 属性で読める）。
   2行目は下の余白へ伸ばさず**上へ**伸ばす: 下端は数値スコア（.score・judgeDisplay='full' のときだけ
   現れる）の行を避けて 5%＋1.55em に据え置き、そのぶん天地干（.stems）を 1行ぶん上へ寄せた。
   行間は 1.35 → 1.15 → **1.29**（2行で --cell の 16.5%。1行の字数は字送りだけで決まるので変わらない＝
   枠幅71%÷(0.0640×字間1.04)≒10.6字/行）。
   1.15 → 1.29 の根拠（T-20260906-04・オーナー決裁 D-0355＝A案。症状=字の足元が切れる）:
   本番のこの字のフォントは body の 'Shippori Mincho'（index.html が Google Fonts から読む。
   .pat は font-weight を指定しないので 400 の要求に対し**収録のある 500＝Medium** が使われる）。
   その**フォントファイルの実値**（1000/em）は ascent 1160・descent 288（OS/2 の usWinAscent／
   usWinDescent も同値・fsSelection の USE_TYPO_METRICS は 0 ＝ブラウザはこの値を内容領域に使う）、
   .pat に出る字（漢字・かな・「・」・「…」）の墨は上端 879／下端 -96。
   行の高さ L に対する墨の余白は 上=(L-1.448)/2+1.160-0.879・下=(L-1.448)/2+0.288-0.096 で、
   L=1.15 では**下がわずか 0.043em（375px幅で 0.30px）**しかなかった。端末画素への丸めで墨の
   外接は 1 端末画素ぶん外へ広がる（実測: 375px幅・DPR2 で墨の下端 0.096em → 0.144em）ため
   この余白は負に転び、`overflow:hidden` が足元を切っていた。
   L=1.29 で 上=0.202em・下=0.113em（375px幅で 1.40px／0.78px）＝下限 0.10em を満たす。
   ※ 下へ広げる案（padding-bottom／overflow-clip-margin）は -webkit-line-clamp が3行目を
     「描いたまま隠している」だけなので**3行目の頭が漏れる**（便1で実写確認）＝採れない。
   ※ この余白は本E2E（scripts/e2e-pages.mjs 手順9 の「格の字の足元・頭に余白がある」）が
     幅ごと・判定表示ごとに毎回検査する（数値は上と同じ実値を使う）。
   右端は朱印（.sealn）の手前で止める（T-20260730-01 単位G）。朱印は右5%・一辺 1.4em（＝--cell の
   13.44%）で -3° 回転＝実効 14.1%。従来の right:6% では枠が朱印の下を通っており、どの幅でも
   矩形が重なっていた（1280pxで28×8.4px＝236px²・320pxで41px²。割合は幅に依らず一定）。
   17% は 5%＋14.1%＋余白（実測の余裕: 320px幅で3.8px・1280px幅で9.1px）。
   ※ E2E の「文字の見切れなし」検査は .pat だけ別ルール（2行以内は省略なし・2行超のみ省略可）に
     置き換えてある（scripts/e2e-pages.mjs）。行数制限を1行に戻すと同検査が落ちる（負テストで実測） */
.pat{position:absolute; left:6%; right:calc(6% + var(--cell) * .17); bottom:calc(5% + 1.55em);
  font-size:calc(var(--cell) * .0640);
  color:var(--pat-col); letter-spacing:.04em; line-height:1.29;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden}
/* 2行目を伸ばす向きは判定の表示設定（judgeDisplay）に連動する（T-20260803-01・オーナー決裁②）。
   'full'（数値スコアを出す）＝上の指定のまま**上**へ伸ばす（数値行と重ならないよう下端を据える）／
   'marks'・'off'（数値行が無い＝下に帯が空く）＝上端を固定して**下の余白**へ伸ばす。
   2.84em = 1.55em（数値行のぶんの帯）＋1.29em（格1行＝line-height）。95% = 100%−下端余白5%。
   （T-20260906-04 で line-height を 1.15 → 1.29 にしたので 2.7em → **2.84em**。式の意味は同じ）
   上の bottom 指定と**同じ量の移項**なので、1行の宮の見た目はどのモードでも現行と同じ位置のまま
   （動くのは2行目だけ）。2行のときの下端はセルの 93.3%（=95%−2.84em＋2×1.29em。1em はこの字の
   大きさ＝セルの6.40%）で、下端の余白5%を侵さない。朱印（.sealn）とは right の指定で横に離れており
   縦の移動の影響を受けない。※ .stems（天地干）の translateY は全モード共通（T-20260906-04 で
   -58% → -61.9% にしたのも全モード共通＝モードごとには動かさない） */
body.judge-marks .pat, body.judge-off .pat{top:calc(95% - 2.84em); bottom:auto}
/* 格を吉凶で行分けする表示（設定 display.patternSplitByKind=true・T-20260803-01。上＝吉の行・下＝凶の行）。
   行ごとに1行で出すので2行までの clamp（-webkit-box）を解除し、幅に収まらない分は行ごとに省略する
   （件数の上限＝display.patternMaxPerKind は描画側で切り、溢れた分は行末の「…」） */
.pat.split{display:block}
.patRow{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* 吉格・凶格の文字色（設定 display.patternColorByKind=true のときだけ付く）。門・等級と同じ吉凶の色を
   使って画面の中の言い方をそろえる（テーマ変数経由なので3意匠すべてに追従）。
   発光（text-shadow）は付けない＝この字は小さく、滲むと読めなくなるため */
.pat .k-kichi{color:var(--gate-kichi)}
.pat .k-kyou{color:var(--gate-kyou)}
/* 宮の等級（◎○△✕・天地干/星門/宮神の3組判定）。格名には記号を添えない（D-0152） */
.grade{position:absolute; top:4%; left:50%; transform:translateX(-50%);
  font-family:var(--font-display); font-size:calc(var(--cell) * .1052); line-height:1;
  color:var(--mut); letter-spacing:0}
.grade.m-kichi{color:var(--gate-kichi); text-shadow:0 0 12px rgba(var(--gate-kichi-rgb),.55)}
.grade.m-kyou{color:var(--gate-kyou); text-shadow:0 0 12px rgba(var(--gate-kyou-glow-rgb),.45)}
.score{position:absolute; left:6%; bottom:5%; font-size:calc(var(--cell) * .0572);
  color:var(--mut); font-variant-numeric:tabular-nums; letter-spacing:.05em}
.sealn{position:absolute; right:5%; bottom:5%; width:1.4em; height:1.4em;
  font-size:calc(var(--cell) * .0960); font-family:var(--font-display); display:grid; place-items:center;
  color:var(--seal-text); background:radial-gradient(circle at 35% 30%, var(--seal-a), var(--seal-b));
  border-radius:15%; transform:rotate(-3deg);
  box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 1px 6px rgba(0,0,0,.5), inset 0 0 6px var(--sealn-glow)}
.locked .sealn{animation:stamp .5s cubic-bezier(.2,1.6,.35,1) .16s backwards}
/* 宮の朱印の形（意匠の seal・T-20260920-05）: DOM は変えず CSS だけで切り替える。
   round（既定）は規則を持たない＝上の .sealn のまま＝現行と同一 */
html[data-seal="square"] .sealn{border-radius:0; transform:none}
html[data-seal="none"] .sealn{display:none}
@keyframes stamp{
  0%{transform:rotate(-14deg) scale(2.8); opacity:0}
  55%{opacity:1} 100%{transform:rotate(-3deg) scale(1)}}

/* --cscale: 中宮のレール（天干・地干・九星）の字の大きさ＝**外周8宮と同じ値をこの倍率で縮めたもの**。
   中宮だけは同じ枠に局・四柱・節気/時辰も入るため、外周と同寸では入らない（実測: 外周の天地干は
   セルの46.2%の高さを使い、中宮の上段3行が55.3%を使う）。比率は外周のまま・大きさだけを縮める */
.cell.center{cursor:default; border-color:rgba(var(--accent-hi-rgb),.5); --cscale:.5;
  background:radial-gradient(closest-side, var(--center-bg-a), var(--center-bg-b))}
/* padding は 4% → 3%（T-20260730-01 単位D）。中宮の表示要素が地干のみから4項目に増えたため、
   縦の余白を確保する必要がある（4% では実測 scrollHeight 198px > 枠 192px でわずかに溢れた）。
   下余白 30%（T-20260802-01 依頼2）＝天地干・九星を外周と同じレール配置へ移した帯を空けるため。
   上段（局・四柱・節気/時辰）はこの帯より上に収まる（重なりは本E2Eが幅ごとに毎回検査する） */
.center .inner{display:flex; flex-direction:column; align-items:center;
  justify-content:space-evenly; padding:3% 3% 30%; position:absolute; inset:0}
.kyoku{font-family:var(--font-display); font-size:calc(var(--cell) * .1143); color:var(--gold-hi);
  letter-spacing:.14em; white-space:nowrap; text-shadow:0 0 14px rgba(var(--accent-hi-rgb),.5)}
.pillars{writing-mode:vertical-rl; font-family:var(--font-display);
  font-size:calc(var(--cell) * .0960); line-height:1.2; color:var(--pillar-col); max-height:5.2em}
.pillars span::before{content:attr(data-l); display:block; font-size:.44em; color:var(--mut); letter-spacing:0}
.sub{font-size:calc(var(--cell) * .0572); color:var(--mut); letter-spacing:.12em; text-align:center; line-height:1.7}
/* 中宮の天干・地干・九星（＝Q12回答の表示要素・T-20260730-01 単位D）。
   配置は**外周8宮と同じ規則**（T-20260802-01 依頼2）＝天干を上・地干を下にした左レール（外周 .stems）と、
   九星の右レール（外周 .sg。八門の位置は空のまま＝依頼原文「八門のスペースは空でOK」）。
   外周と違い中宮は局・四柱・節気/時辰も同じ枠に出すため、レールはセル下段（上端 71%）に置き、
   上段とは .inner の下余白 30% で分ける。字の大きさは外周と同じ比率×--cscale（上の .cell.center）。
   九宮は外周8宮と同じ朱印 .sealn を使うため専用の指定は無い（値は回転九宮）。
   レール上端 71% の根拠（実測・盤幅1264px時のセル193.9px）: 上段3行の下端 67.1%／左レールの高さ
   23.0%（71%→94.0%・下端5%の内側）／九星の下端 77.6% と朱印の上端 80.7% が重ならない。
   余白は本E2E（scripts/e2e-pages.mjs 手順6・手順9）が幅ごとに毎回検査する */
.cstems{position:absolute; left:8%; top:71%;
  display:flex; flex-direction:column; align-items:center}
.cten{font-family:var(--font-display); font-size:calc(var(--cell) * .2835 * var(--cscale)); line-height:1.02;
  color:var(--gold-hi); text-shadow:0 0 13px rgba(var(--accent-hi-rgb),.45)}
.chic{font-family:var(--font-display); font-size:calc(var(--cell) * .1555 * var(--cscale)); line-height:1.1;
  color:var(--chi-col)}
.cstar{position:absolute; right:8%; top:71%;
  font-family:var(--font-display); font-size:calc(var(--cell) * .1143 * var(--cscale)); line-height:1.15;
  color:var(--star-col)}

#watermark{position:absolute; left:2px; bottom:-26px; font-size:11px;
  color:rgba(var(--paper-rgb),.42); letter-spacing:.14em}
#hint{position:absolute; top:calc(100% + 30px); width:100%; text-align:center;
  font-size:12.5px; color:rgba(var(--paper-rgb),.55); letter-spacing:.2em;
  animation:hintFloat 3.2s ease-in-out infinite}
body.cast-done #hint{animation:none; opacity:0; transition:opacity .8s}
@keyframes hintFloat{50%{opacity:.45}}

footer{position:relative; z-index:10; text-align:center; padding:44px 16px 18px;
  font-size:11.5px; color:rgba(var(--mut-rgb),.9); line-height:1.9; max-width:780px; margin:0 auto}

/* ---- 完成後の呼吸 ---- */
body.cast-done .cell.gr-kichi .ten{animation:breathe 3.6s ease-in-out infinite}
@keyframes breathe{50%{text-shadow:0 0 24px rgba(var(--accent-hi-rgb),.9), 0 0 64px rgba(var(--accent-rgb),.5)}}
body.cast-done .cell.gr-kyou .ten{animation:breatheR 4.4s ease-in-out infinite}
@keyframes breatheR{50%{text-shadow:0 0 22px rgba(var(--kyou-glow-rgb),.75), 0 0 56px rgba(var(--kyou-deep-rgb),.4)}}

/* ---- 節「演出」の2項目（T-20260906-05・オーナー決裁 D-0394）。既定は両方「入」＝下のクラスは
       1つも付かない＝**いままでと同じ見た目・同じ描画**。クラスを付けるのは src/AppPublic.tsx。
       計測（deliverables/T-20260906-05-高負荷計測記録.md）で分かった待機中の負荷の内訳:
       宮の天干の呼吸発光（text-shadow を毎コマ描き直す）が GPU のほぼ半分・法陣の回転と影が約 1/4 ---- */
/* 「光と動き　切」＝**いま出ているコマのまま止める**（消さない）。止める対象は無限に続く動きだけ
   （起局・鎮座などの有限の演出は、そもそも「切」のとき再生されない＝src/fx-entry.ts の instant） */
body.motion-off #ringBase, body.motion-off #ringBurst, body.motion-off #hint,
body.motion-off .cell .ten{animation-play-state:paused!important}
/* 「影とにじみ　切」＝法陣の影（900px 角の drop-shadow を毎コマ掛け直す）を外し、宮の天干の光を
   「にじみの描き直し（text-shadow のアニメ）」から「明るさの上げ下げ（不透明度のアニメ）」へ替える。
   光っていること自体は残る（実測の代理条件 C9 と同じ描き方＝GPU 48.2%→18.6%） */
body.glow-off #rings svg{filter:none}
body.glow-off .ten{text-shadow:0 0 6px currentColor}
body.glow-off.cast-done .cell.gr-kichi .ten,
body.glow-off.cast-done .cell.gr-kyou .ten{animation-name:tenFade; animation-duration:3.6s; will-change:opacity}
@keyframes tenFade{0%,100%{opacity:.72}50%{opacity:1}}
/* 方位地図タブの間は法陣を止める（盤は隠れていて法陣だけが回り続けている状態を作らない）。
   背景の星・火の粉のループは src/fx2d.ts 側で止める（rAF ごと止める） */
body.map-view #ringBase, body.map-view #ringBurst{animation-play-state:paused}

/* ---- 全画面フラッシュ ---- */
#flash{position:fixed; inset:0; pointer-events:none; z-index:50; opacity:0;
  background:radial-gradient(circle at 50% 45%, var(--flash-a), var(--flash-b) 45%, transparent 70%);
  transition:opacity .5s}
#flash.on{opacity:1; transition:opacity .06s}

/* ---- 詳細パネル ---- */
#detail{position:fixed; top:0; right:0; height:100%; width:min(320px,86vw); z-index:40;
  background:linear-gradient(200deg, var(--panel-a), var(--panel-b));
  border-left:1px solid var(--gold-dim); padding:22px 20px;
  transform:translateX(103%); transition:transform .3s ease; overflow:auto}
#detail.open{transform:none}
#detail h2{font-family:var(--font-display); font-weight:400; color:var(--gold-hi);
  letter-spacing:.2em; font-size:22px; margin:.2em 0 .7em}
/* 段落（T-20260802-01 追加注文の中宮2段落化）。見出しの無い段落＝従来どおりの平リスト */
#detail .dsec + .dsec{margin-top:16px}
#detail .dsec h3{font-family:var(--font-display); font-weight:400; color:var(--gold-hi);
  letter-spacing:.2em; font-size:15px; margin:0 0 8px;
  border-bottom:1px solid var(--gold-dim); padding-bottom:5px}
#detail dl{display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:14px; margin:0}
#detail dt{color:var(--mut); letter-spacing:.15em}
#detail dd{margin:0}
#dClose{position:absolute; top:10px; right:12px; background:none; border:none;
  font-size:20px; color:var(--mut); padding:4px 10px}
.demoNote{margin-top:16px; font-size:11px; color:var(--demo-fg); line-height:1.8;
  border-top:1px dashed rgba(var(--red-rgb),.4); padding-top:10px}

/* ---------- v1.1: 経度・評価トグル・トースト・3Dキャンバス ---------- */
#lonWrap{display:flex; align-items:center; gap:6px; font-size:12.5px;
  color:var(--mut); letter-spacing:.1em}
#lon{width:76px; background:var(--field-bg); border:1px solid var(--gold-dim); color:var(--field-fg);
  padding:7px 6px; border-radius:4px; font-family:inherit; font-size:13.5px; color-scheme:dark}
#geoBtn{padding:6px 8px; font-size:12px}
#lonOff{font-variant-numeric:tabular-nums; color:var(--mut); font-size:12px; white-space:nowrap}
#toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(8px);
  z-index:60; background:var(--pop-bg); border:1px solid var(--gold-dim);
  color:var(--paper); padding:9px 16px; border-radius:5px; font-size:13px;
  letter-spacing:.08em; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s}
#toast.on{opacity:1; transform:translateX(-50%) translateY(0)}
/* 評価表示は開発者設定（config.js judgeDisplay・D-0018）: marks=数値のみ隠す／off=全判定要素を隠す
   ※ judgeDisplay に連動する指定はもう1つある: 格の2行目を伸ばす向き（上の .pat の直後・T-20260803-01） */
body.judge-marks .score{display:none}
body.judge-off .score, body.judge-off .grade{display:none}
body.judge-off .gate{color:var(--gate-hei); text-shadow:none}
body.judge-off .cell.gr-kichi, body.judge-off .cell.gr-kyou{
  box-shadow:inset 0 0 30px rgba(0,0,0,.28); border-color:rgba(var(--accent-rgb),.30)}
body.judge-off .cell .ten{animation:none!important}
#gl{position:fixed; inset:0; z-index:30; pointer-events:none; opacity:1; transition:opacity .6s; width:100%; height:100%}

/* ---------- 認証ウィジェット（React化・D-0027） ---------- */
.authArea{position:relative; display:flex; align-items:center; gap:8px}
.userchip{max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:12px; color:var(--gold-hi); letter-spacing:.05em;
  border:1px solid var(--gold-dim); border-radius:999px; padding:5px 12px;
  background:var(--pop-bg-soft)}
.authpop{position:absolute; top:calc(100% + 8px); right:0; z-index:45; width:240px;
  background:linear-gradient(200deg, var(--authpop-a), var(--authpop-b));
  border:1px solid var(--gold-dim); border-radius:6px; padding:14px;
  display:flex; flex-direction:column; gap:8px; box-shadow:0 8px 30px rgba(0,0,0,.5)}
.authpop label{display:flex; flex-direction:column; gap:3px; font-size:11.5px; color:var(--mut); letter-spacing:.1em}
.authpop input{background:var(--field-bg); border:1px solid var(--gold-dim); color:var(--field-fg);
  padding:6px 8px; border-radius:4px; font-family:inherit; font-size:13px}
.authBtns{display:flex; gap:8px}
.authBtns button{flex:1}
.authErr{font-size:11.5px; color:var(--autherr-fg); line-height:1.6}
.authNote{font-size:10.5px; color:var(--mut); line-height:1.7}

/* 意匠の変種 auth='dialog'（T-20260920-05）: 画面全面の窓にログイン欄を置く。枠だけが違い、
   中身（.authpop の入力欄・ボタン・通知）は既定と同じもの。重なり順は ≡メニュー（.menu-modal）と同じ 55。
   幅は @media を増やさずに収める（min() で狭い画面にも入る） */
.auth-dialog{position:fixed; inset:0; z-index:55; display:grid; place-items:center}
.auth-dialog .authpop{position:static; width:min(320px, calc(100vw - 24px))}

/* ---------- ≡メニュー（T-20260817-06 単位2・確認事項 E） ----------
   ボタン（三本線）は**幅に関わらず**ログイン中に出す。広い画面では操作列（.controls）の右端に
   並べ（order:2＝ヘッダの行数を増やさない）、狭い画面では従来どおり1行目の右端に置いて操作列を
   2行目へ送る（下の @media）。
   開く窓（#menuPanel）は AppPublic の最上位＝header の外に描く。header の `z-index:20` が作る
   重なりの入れ物の内側では、どんな z-index を書いてもタブ（.houi-tabs）の背後へ回り込むため
   （オーナー実機の画面ショット IMG_0456）。重なり順 55 は #detail(40)・.authpop(45)・#flash(50) より
   上、#toast(60) より下。**幅の @media は増やさない**（tests/mobile-layout.test.tsx の契約）＝
   寸法は流動値（%・max-width）だけで決める */
#menuBtn{order:2; padding:12px; line-height:0}
.menu-modal{position:fixed; inset:0; z-index:55; display:flex; justify-content:center;
  background:var(--scrim-bg)}
/* 窓本体（枠のある中身）。**幅の @media は使わず class の付け替え**で寸法を変える
   （狭い／広いの判定を持つのは src/useNarrow.ts の1か所だけ＝AppPublic が MenuModal へ渡す）:
     .menu-modal-full   狭い画面（720px以下）＝窓が画面いっぱい（上下左右0・枠と角丸なし）。
                        背景は残らないので閉じる手段は×と Escape（背景タップは広い画面だけ）
     .menu-modal-center 広い画面＝中央に大きめの窓。幅も高さも表示領域より小さいので四方に背景が残る
                        （背景タップでも閉じられる）
   どちらでも中身（.menu-modal-body）は窓の中でスクロールする */
.menu-modal-panel{display:flex; flex-direction:column;
  background:linear-gradient(200deg, var(--panel-a), var(--panel-b));
  border:1px solid var(--gold-dim); box-shadow:0 12px 34px rgba(0,0,0,.55)}
.menu-modal-full{align-items:stretch}
.menu-modal-full .menu-modal-panel{width:100%; height:100%; border:none; border-radius:0}
.menu-modal-center{align-items:center}
.menu-modal-center .menu-modal-panel{width:min(640px,92vw); min-height:60vh; max-height:92vh;
  border-radius:8px}
.menu-modal-head{flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; border-bottom:1px solid var(--gold-dim)}
.menu-modal-title{margin:0; font-family:var(--font-display); font-weight:400; font-size:17px;
  letter-spacing:.24em; color:var(--gold-hi)}
.menu-modal-close{padding:6px 15px; font-size:18px; line-height:1.1}
/* 中身だけがスクロールする（背後のページへスクロールを伝えない） */
.menu-modal-body{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 14px 18px}
/* 節（見出しを押して開閉。初期はすべて閉じている＝見出しの一覧が1画面に収まる） */
.menu-sec{border-bottom:1px solid rgba(var(--menu-line-rgb),.45)}
.menu-sec-h{margin:0; font-weight:400}
.menu-sec-btn{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  padding:15px 4px; background:none; border:none; border-radius:0; color:var(--paper);
  font-size:14px; letter-spacing:.16em; text-align:left}
.menu-sec-btn:hover{box-shadow:none; color:var(--gold-hi)}
.menu-sec-btn[aria-expanded="true"]{color:var(--gold-hi)}
.menu-sec-caret{font-size:11px; color:var(--mut)}
.menu-sec-body{display:flex; flex-direction:column; gap:10px; padding:2px 4px 15px}
.menu-note{margin:0; font-size:11.5px; color:var(--mut); line-height:1.8}
.menu-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
/* 表示／非表示の切替（4項目）。押せる高さを確保し、状態は右端に文字でも出す（色だけに頼らない） */
.menu-toggle{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  padding:12px; font-size:13.5px; letter-spacing:.1em}
.menu-toggle[aria-pressed="true"]{border-color:var(--gold); color:var(--btn-fg-on)}
.menu-toggle-state{font-size:12px; color:var(--mut); letter-spacing:.08em; white-space:nowrap}
.menu-toggle[aria-pressed="true"] .menu-toggle-state{color:var(--gold-hi)}
/* 方位地図の切替（方位線・北）の置き場＝地図側からポータルで中身が入る */
.menu-slot{display:flex; flex-direction:column; gap:8px}
/* アカウントの節（メール・ログアウト）は縦積み */
.menu-sec-body .authArea{flex-direction:column; align-items:stretch; gap:10px}
.menu-sec-body .userchip{max-width:100%; text-align:center}

/* 狭い画面（携帯）だけの指定。境界 720px は src/useNarrow.ts の判定式（max-width:720px）と**対**＝
   公開版はこの幅で「作盤・刻送りを盤の直下の操作バーへ／メール・ログアウトをメニューへ」置き場所を
   変える（T-20260803-01 単位2・オーナー追加依頼2の優先度）。片方だけ変えないこと */
@media (max-width:720px){
  header{padding:12px 12px 6px}
  .controls{margin-left:0}
  #board{--bw:min(94vmin,94vw)}
  #detail{top:auto; bottom:0; height:auto; max-height:46vh; width:100%;
    border-left:none; border-top:1px solid var(--gold-dim); transform:translateY(103%)}
  #detail.open{transform:none}
  /* ログイン入力パネル（240px幅）の位置の基準を、ボタン（.authArea）からヘッダへ移す
     （T-20260730-01 単位F）。ボタン基準の right:0 だと、ボタンが画面の左寄りへ折り返した
     ときにパネルが画面の左外へ出る（320px幅で30.7px はみ出しを実測）。header は
     position:relative なので、.authArea を静的にすればヘッダの右端が基準になる */
  .authArea{position:static}
  .authpop{right:12px; width:min(240px, calc(100vw - 24px))}
  /* 未ログインの画面（入場方式B・T-20260802-01 単位2）だけは、フォームを浮かせずヘッダの中に置く。
     理由2つ: ①狭い画面では吹き出し（240px）が盤をほぼ覆ってしまう ②浮かせたままだとヘッダが
     短くなって盤が上へ寄り、画面上部の通知の帯と盤の枠が重なる（320px幅 2072px²・390px幅 2562px² を
     実測。セルには掛かっていないが枠には掛かる）。デスクトップ幅（721px以上）は従来どおり吹き出し
     （通知が画面下端にあるため、盤を下げるとかえって重なる＝実測） */
  .authpop.inline{position:static; width:min(240px, calc(100vw - 24px))}
  /* 通知（トースト）は狭い画面では画面上部の帯にする（T-20260730-01 単位G）。理由は2つ:
     ①320×568 では盤の下端が画面の下端まで13pxしか残らない（ヘッダ244px＋盤300.8px）ため、
       画面下端の通知は必ず盤に重なる（是正前の実測: 通知160×125pxが盤の6セルに重なる）
     ②left:50% だけの指定では、折返しの幅が「画面幅の半分」に制限される（絶対配置の
       shrink-to-fit は left からの残り幅が上限）。320px幅では最長の通知文が7行=125px にもなり、
       重なりを大きくしていた。左右12pxの帯にすると同じ文が3行=75pxに収まる。
     ※デスクトップ幅（721px以上）の見え方は変えない＝この指定は @media の中だけに置く */
  #toast{top:8px; bottom:auto; left:12px; right:12px; transform:translateY(-8px); text-align:center}
  #toast.on{transform:translateY(0)}

  /* ---- 携帯の配置（T-20260803-01 単位2）。DOM の出し分けは src/AppPublic.tsx（公開版のみ） ---- */
  /* メニューのボタン（三本線）。ヘッダ1行目の右端に置く（広い画面では操作列の右端＝上の #menuBtn）。
     色・枠は他のボタンと同じ（三本線は stroke:currentColor でボタンの字の色を継ぐ）。中身は線だけの
     SVG なので line-height:0 で余白を消し、padding だけで大きさ（実測 46×40px＝指で押せる寸法）を決める */
  #menuBtn{order:0; margin-left:auto}
  /* 日時・経度の並び（.controls）は、メニューのボタンが出ているとき必ず2行目から始める。
     幅に余裕がある帯（例:720px）だと1行目の残りに入ってしまい、ボタンの右側に回り込むため */
  #menuBtn ~ .controls{flex-basis:100%}
  /* 操作バー（盤の直下・通常フロー）。並びは「◀ 前の刻・起局・次の刻 ▶」で中央が起局
     （T-20260817-09 単位5。起局は隠し機能＝ふだんは出ないので、通常は2つ並ぶ）。
     画面には固定しない（固定は詳細パネル・セーフエリアと衝突するため。計画 §5） */
  .opbar{display:flex; justify-content:center; align-items:center; gap:8px; margin-top:10px}
  /* 3つ並べても盤の幅に収まる（実測 320px幅で 254.1px / 盤 300.8px）。字が想定より広い環境でも
     ボタンの途中で改行しない（＝バーが2行になって背が高くならない）ための保険 */
  .opbar button{white-space:nowrap}
  /* 入力欄を 16px に（T-20260803-01・追加依頼1の対処）。iOS Safari は 16px 未満の入力欄へ
     フォーカスするとページを自動で拡大し、その拡大が残る（＝盤の右端が画面の外へ出る）。
     16px 以上にすると自動拡大の条件を外れる。**狭い画面だけ**の指定で、広い画面の見え方は変えない。
     viewport の maximum-scale では拡大の操作そのものを奪ってしまうため使わない（推定・確度△＝
     iOS 実機での確認は当方の環境では取れない。原因が違えば拡大は残る）。
     T-20260817-07 単位3: 上の `input[type=datetime-local],select` で 14px にしている **select** も
     この行へ加えた（携帯幅で 16px 未満の入力欄を残さない＝tests/houi-input-zoom.test.ts が毎回検査）。
     方位地図側（シート・≡メニューの中の欄）は幅に関わらず 16px＝src/houi/houiStyles.ts */
  .authpop input, input[type=datetime-local], select, #lon{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  #ringBase,#ringBurst,#hint{animation:none}
  /* 宮の天干の呼吸発光（上の .cell.gr-kichi/.gr-kyou .ten）は**この節から漏れていた**＝OS で
     「視差効果を減らす」にしていても動き続け、しかも待機中の GPU の主因だった（T-20260906-05 の計測）。
     漏れの是正。上の規則の方が詳しい（詳細度が高い）ので、判定表示 off と同じく !important で止める */
  .cell .ten{animation:none!important}
}