/* ===== スマホ幅（iPhone実機）専用レイヤー ===== 実機 iPhone 17 Pro（402pt）で確認した3つの欠陥を潰すための層。 1) 上部タブが折り返して1文字ずつ縦積みになる → 下部タブバーへ移す 2) 本体の13×13レンジ表が2画面ぶん下にある → 解析ページは グリッド→リードアウト→設定 の順に並べ替え 3) リードアウトがレンジ表と同時に見られない → 上記の並べ替えで直下に固定 デスクトップ幅には一切影響させない（すべて max-width クエリの中）。 */ /* --- 横向き時の安全領域（左右）／全幅共通 --- */ /* 5ページとも viewport-fit=cover を宣言しているため、ノッチのある iPhone を 横向きにすると画面左右の 59pt がノッチ／ホームインジケータの帯になり、 そこにも本文が回り込む。上下の inset はこのファイルで見ていたが、 左右はどこでも見ていなかった（2026-08-28 に実機シミュレータの横向きで発見）。 縦向きでは env() が 0px を返すので、縦のレイアウトには影響しない。 */ body{ padding-left:env(safe-area-inset-left,0px); padding-right:env(safe-area-inset-right,0px); } /* .mtabs は position:fixed で body の padding が効かないので個別に逃がす */ .mtabs{ padding-left:env(safe-area-inset-left,0px); padding-right:env(safe-area-inset-right,0px); } /* --- 下部タブバー（スマホのみ表示） --- */ .mtabs{display:none} @media(max-width:540px){ .mtabs{ display:grid;grid-template-columns:repeat(4,1fr); position:fixed;left:0;right:0;bottom:0;z-index:80; background:rgba(10,13,22,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); border-top:1px solid var(--line,#1d2740); padding-bottom:env(safe-area-inset-bottom,0px); } .mtabs a{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; padding:8px 2px 7px;text-decoration:none;color:var(--mut,#93a0bd); font-size:11px;font-weight:600;line-height:1;-webkit-tap-highlight-color:transparent; } .mtabs a .mi{font-size:17px;line-height:1} .mtabs a.on{color:#c9b8ff} .mtabs a.on .mi{filter:drop-shadow(0 0 6px rgba(139,92,246,.55))} /* 下部バーぶんの余白。バーは fixed なので本文が隠れないよう底上げする */ body.hasmtabs{padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))} /* 上部の折り返しナビは廃止（崩れの原因）。ロゴだけ残す */ header .navtabs{display:none} header .tagline{display:none} .logo{font-size:16px;white-space:nowrap} /* iOS の webview は viewport-fit=cover で全面描画にしてある（capacitor.config.ts の contentInset:"never"）。そのぶんステータスバーの下に本文が潜るので、 上部バー自身に safe area ぶんの余白を持たせて不透明で覆う。 ここを外すと静止時は白帯、スクロール時はグリッドが時計に重なる（2026-08-27 実機で確認）。 */ html{background:#080b14} header{ position:sticky;top:0;z-index:70; height:auto;flex-wrap:nowrap; padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px; } /* app.html は下のサマリーバーが上部バーを兼ねる（固定物を2段にしない） */ body.hasmspot header{display:none} } /* --- 解析ページ：グリッド→リードアウト→設定 の順に並べ替え --- */ @media(max-width:540px){ /* app.html の .wrap は #page-pf / #page-post そのもの。ID で display を上書きすると .page{display:none} に勝ってしまい、非表示側のページまで出る。必ず .on を付ける。 */ #page-post.on,#page-pf.on{display:flex;flex-direction:column} #page-post .col.mid,#page-pf .col.mid{order:1} #page-post .col.right,#page-pf .col.right{order:2;border-top:1px solid var(--line,#1d2740)} #page-post .col.left,#page-pf .col.left{order:3;border-bottom:0} /* 設定カラムは既定で畳む。上部のサマリーバーから開く */ body.sheet-closed #page-post .col.left, body.sheet-closed #page-pf .col.left{display:none} /* 開いたときのスクロール先。sticky のサマリーバーに頭が隠れないよう余白を取る */ #page-post .col.left,#page-pf .col.left{scroll-margin-top:104px} .col{padding:12px !important} } /* --- 局面サマリーバー（設定を畳んだ代わりに、今の局面を1行で示す） --- */ .mspot{display:none} @media(max-width:540px){ .mspot{ display:flex;flex-direction:column;align-items:stretch;gap:8px; position:sticky;top:0;z-index:60; padding:9px 12px;margin:0; background:rgba(10,13,22,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); border-bottom:1px solid var(--line,#1d2740); } .mspot .mstext{ flex:1;min-width:0;font-size:12px;color:var(--mut,#93a0bd); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .mspot .mstext b{color:var(--txt,#e6ebf7);font-weight:700} .mspot .msrow{display:flex;align-items:center;gap:10px} .mspot button{ flex:0 0 auto;border:1px solid var(--line2,#28345a);background:var(--panel,#0e1526); color:var(--txt,#e6ebf7);font-family:inherit;font-size:12px;font-weight:700; padding:7px 13px;border-radius:8px;cursor:pointer;-webkit-tap-highlight-color:transparent; } body:not(.sheet-closed) .mspot .mschg{background:var(--accent,#8b5cf6);border-color:transparent;color:#fff} /* プリフロップ / ポストフロップ の切替（隠した上部ナビの代わり） */ .mspot .mseg{display:grid;grid-template-columns:1fr 1fr;gap:6px} .mspot .mseg button{ flex:1;padding:8px 4px;font-size:13px;font-weight:700; color:var(--mut,#93a0bd);background:transparent; } .mspot .mseg button.on{background:var(--accent,#8b5cf6);border-color:transparent;color:#fff} /* header を隠しているぶん、このバーがステータスバーまで覆う */ body.hasmspot .mspot{padding-top:calc(9px + env(safe-area-inset-top,0px))} } /* --- GTO特訓：4択は親指の届く2×2へ --- */ @media(max-width:540px){ .actions{display:grid !important;grid-template-columns:1fr 1fr;gap:10px} .actions button{min-height:62px} /* 3択のときに3つ目だけ左半分に取り残されるので、奇数個の最後は横いっぱいに伸ばす （2026-08-29 にストア用スクショで発見。フォールド／コール＋レイズの並びで再現） */ .actions button:last-child:nth-child(odd){grid-column:1 / -1} } /* --- タップUIの文字選択を止める --- */ /* 下部タブやレンジ表を長押しすると選択ハンドルと拡大鏡が出て、 ネイティブアプリとして明らかに不自然になる（2026-08-27 Simulator で確認）。 説明文は選べたままにしたいので、操作要素だけに限定して切る。 */ @media(max-width:540px){ .mtabs, .mtabs a, .mspot, .mspot button, table.grid, table.grid td, .hmcell, .actions button{ -webkit-user-select:none;user-select:none; -webkit-touch-callout:none; } } /* --- 特訓：スマホの詰め方 --- */ /* 出題→アクション→採点→スコア→モードの順は trainer.html の DOM 順そのもの （2026-08-27にデスクトップ2カラム化した際、スコア/モード/説明を