/* P619 プレイヤー画面（テーブル系以外）共通 スマホ最適化層 * * 対象: 玄関 / 固定ページ / ポータル / 解説書 / マイページ / ランキング / * レート戦 / 戦績、および将棋・増え鬼・まぎれ鬼・HexaFrontier の * エントリ・ロビー・設定・結果・メニューといった操作面。 * * 触らないもの: 盤面や3Dのcanvas描画そのもの、対戦中の操作判定に使う * タッチコントロール（増え鬼の .touch-* 一族）。下で明示的に除外している。 * * 接続規約: 各テンプレートの で **最後に** 読む。 * PC非退行: :root のカスタムプロパティ以外、宣言は全て @media の中にある。 */ :root { /* 味の調整はこの2箇所だけで足りる（操作の最小床 / 端の余白） */ --player-touch: 44px; --player-gutter: 12px; } @media (max-width: 720px) { /* --- 文書の横溢れ番人 ------------------------------------------------ */ html { overflow-x: clip; } /* --- 操作の44px床 ---------------------------------------------------- * `button[class]` を併記しているのは詳細度合わせ。将棋の * `.ctrl-btn, .action-btn { min-height: 32px }`（shogi.css 内のmobile規則） * のようなクラス規則に、素の `button`(0,0,1) では負けて床が立たない。 */ button, summary, [role="button"], button[class], summary[class], [role="button"][class] { min-height: var(--player-touch); } /* 対戦中の操作判定には触れない（増え鬼のスティック/アクションボタン）。 * 上の床と同詳細度で後に置き、実寸をゲーム側の値に戻す。 */ button.touch-action-btn, .touch-stick[class], .touch-stick-knob[class] { min-height: 0; } /* 入力はiOSの自動zoom（16px未満で発火）を避ける。 * font-size だけ !important なのは wiki の `#search-input`(ID=1,0,0) など * ID規則に負ける実例があるため。将棋も同じ理由で自前に !important を持つ。 */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]), select, select[class], textarea, textarea[class] { box-sizing: border-box; min-height: var(--player-touch); font-size: 16px !important; } /* checkboxは字面を拡大せず、ラベル全体をhit areaにする */ .help-dontshow { min-height: var(--player-touch); display: flex; align-items: center; } /* --- ヘッダ/フッタ/ナビの導線（本文中のリンクは対象外） -------------- */ header a, footer a, nav a, .page-header a, .mypage-header a, .header-inner a, .topbar a, .topnav a, .nav-links a, .foot-links a, .foot-grid a, .foot-credits a, .footer-links a, .contact-card .link, a.link { min-width: var(--player-touch); min-height: var(--player-touch); display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; } /* 導線の並びは潰さず折り返す。実測: 玄関/ポータルのフッタ導線は横一列のまま * 1文字幅(14px)まで縮み、ランキング・レート戦のnavは42px幅×109px高で * 縦書き化していた。 */ .rk-header, .rk-nav, .rt-header, .rt-nav, .topbar-actions, .topnav, .nav-links { flex-wrap: wrap; } .footer-links, .foot-links { flex-wrap: wrap; justify-content: center; gap: 0.5rem 1rem; } /* 丸/アイコン操作は縦横とも床を張る */ .disc, .copy-btn, .skin-modal-close, .hamburger { box-sizing: border-box; min-width: var(--player-touch); min-height: var(--player-touch); align-items: center; justify-content: center; } /* --- 広い内容は情報を削らず局所scrollへ ------------------------------ */ .tab-nav, .modal-tabs { overflow-x: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } /* 実測: 320pxで戦績のリーダーボード枠がmin-content(308px)に押し広げられ、 * 文書ごと328pxへ溢れていた。枠は縮み、中身は枠内でscrollさせる。 */ .leaderboard-box, .table-wrap { min-width: 0; overflow-x: auto; } /* --- ダイアログ/オーバーレイをviewport内に収める --------------------- */ .overlay > *, .modal-content, .skin-modal, .kifu-paste-panel, .lobby-panel, .lobby-card, .result-panel, .result-card, .help-panel { max-width: 100%; max-height: calc(100dvh - 2 * var(--player-gutter)); overflow-y: auto; overscroll-behavior: contain; } /* safe-area分のpaddingでinset:0の器自体が伸びないよう border-box にしてから足す */ .overlay, .modal, .skin-modal-overlay { box-sizing: border-box; padding-bottom: env(safe-area-inset-bottom, 0px); } /* --- キーボード操作の可視性（配色は変えず余白だけ） ------------------ */ .overlay :focus-visible, .modal :focus-visible, .skin-modal :focus-visible { outline-offset: 2px; } } @media (prefers-reduced-motion: reduce) { /* 上で入れた局所scrollのsmooth挙動だけを取り消す */ .tab-nav, .modal-tabs { scroll-behavior: auto; } }