/* ===================================================== クエストマップ キーボードナビゲーション選択表示 ===================================================== */ .quest-map-node-selected { outline: 2px solid #00ffff !important; outline-offset: 2px !important; } .quest-map-world-focus { outline: 2px solid #00ffff !important; outline-offset: 2px !important; } .quest-map-world-focus .world-name-area { color: #00ffff !important; font-weight: bold !important; } .quest-map-node-desc { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.85); color: #fff; padding: 8px 16px; border-radius: 6px; border: 1px solid #444; font-size: 14px; white-space: nowrap; pointer-events: none; z-index: 10; display: none; } /* ===================================================== メニューキーボードナビゲーションフォーカス マウスホバーと同じ見た目にするため、枠線・グローは削除。 各ボタンの :focus で :hover と同じスタイルを適用する。 ===================================================== */ .menu-nav-focus { outline: none !important; } /* ===================================================== style.css ・ページ全体のフォント / 背景 / 基本色 ===================================================== */ /* 全OSで共通表示するためのフォント変数 （assets/fonts/fonts.css で self-host したフォントを使用） */ :root { color-scheme: dark; /* ネイティブUI（スクロールバー等）をダーク仕様に */ /* ===================================================== ステージ（アプリ全体）の設定 デザインサイズは 1600×900（16:9）で固定し、js/stageScale.js が 計算した --stage-scale でフルスクリーン / 大 / 中 / 小 に合わせて 全体を等倍拡大縮小する。 --dvw / --dvh はデザイン基準の 1vw / 1vh 相当 （1600×900 基準で固定 → ウィンドウサイズで見た目が変わらない）。 ===================================================== */ --stage-scale: 1; /* レターボックス中央寄せの原点オフセット。js/stageScale.js が デバイスピクセル整数に丸めて設定する（小数DPR環境の文字にじみ対策） */ --stage-ox: 0px; --stage-oy: 0px; --dvw: 16px; /* 1600px / 100 */ --dvh: 9px; /* 900px / 100 */ /* 英字UI（ラテン）用: Inter を最優先、和文フォールバックは M PLUS Rounded 1c / BIZ UDPGothic / Meiryo */ --font-ui: 'Inter', 'M PLUS Rounded 1c', 'Noto Sans JP', 'BIZ UDPGothic', 'Meiryo', 'Hiragino Maru Gothic ProN', system-ui, sans-serif; /* 日本語UI・タイピング表示用（丸ゴ寄りで統一、Windowsでも文字が潰れないUDゴシック・Meiryoをフォールバック） */ --font-ja: 'M PLUS Rounded 1c', 'Noto Sans JP', 'BIZ UDPGothic', 'Meiryo', 'Hiragino Maru Gothic ProN', system-ui, sans-serif; /* 数字・等幅表示用: 和文フォールバックも含めてMSゴシックビットマップへの落下を防止 */ --font-mono: 'Noto Sans Mono', 'Consolas', 'Courier New', monospace; /* ===================================================== クエスト系モーダルのタイトル文字サイズ DIFFICULTY / SKILL TREE / SKILL(EQUIP) / STAR UPGRADE / SAVE・LOAD / KEY BIND / CLEAR REWARD の全画面で統一する。 ※個別に font-size を書かず、必ずこの変数を使用すること。 ===================================================== */ --quest-modal-title-size: 26px; } html { height: 100%; background: #05080a; /* ステージ外（レターボックス）の背景 */ } /* ===================================================== スクロールバー共通設定（全要素） 全スクロール領域を Safari 風の黒系の細いバーに統一する。 ※ overflow: auto なので、内容が収まっている場合は スクロールバー自体が表示されない。 ※ 個別にバーを消している箇所（#kana-scroll 等）は 詳細度が高いためそのまま優先される。 ===================================================== */ * { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.35); } ::-webkit-scrollbar-corner { background: transparent; } /* ===================================================== ステージ：アプリ全体をデザインサイズ 1600×900（16:9）に固定し、 --stage-scale でフルスクリーン / 大 / 中 / 小 に合わせて等倍拡大縮小する。 16:9 モニターのフルスクリーンでは余白ゼロで表示される。 ※ スケール適用は2モード（js/stageScale.js が決定）: transform モード … body が transform を持つため position: fixed の各画面は ビューポートではなくステージ（1600×900）を基準に配置される（従来方式）。 zoom モード（Windows 既定）… zoom は包含ブロックを作らないため fixed は ビューポート基準になる。16:9 ウィンドウではステージと一致するため実害なし。 ※ container-type により body がサイズクエリのコンテナになり、 下記の @container（旧 @media）は常に 1600×900 基準で評価される （= 小さいウィンドウでもレイアウトが切り替わらない）。 ===================================================== */ body { position: fixed; left: 0; top: 0; width: 1600px; height: 900px; /* ※原点オフセット（--stage-ox/oy）とスケールは stageScale.js が デバイスピクセル整数にスナップして設定する。 以前の translate(-50%,-50%) 中央寄せだと原点が端数デバイスpxに落ち、 ステージレイヤー全体がバイリニア再サンプリングされて Windows の小数DPR環境で文字がにじむため廃止。 */ transform: translate(var(--stage-ox, 0px), var(--stage-oy, 0px)) scale(var(--stage-scale, 1)); transform-origin: 0 0; container-type: size; container-name: stage; text-align: center; font-family: var(--font-ja); background: transparent; /* 背景は html 側のパターンでウィンドウ全体に敷く */ color: #a3c8e4; /* R-TYPE風の淡いブルー */ margin: 0; overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: geometricPrecision; } /* ===================================================== zoom ステージモード（js/stageScale.js が Windows で付与） body の transform を無効化し、CSS zoom で拡大縮小する。 理由: Chromium は「Webフォント＋transform 合成レイヤー」上の文字を常に グレースケールAAで描画し ClearType（サブピクセルAA）を無効にする （既知仕様 issues.chromium.org/issues/40199005）。zoom はレイヤー合成を 起こさないため、LCD AA ＋ ヒンティングが効いた描画に戻すのが目的。 ===================================================== */ body.zoom-stage { transform: none; } /* ===================================================== Windows のみ: UI全体の文字のにじみ・潰れ・ギザギザ対策 ・v1.0.86: OS標準のヒンティング済みUD系を最優先に切替。 M PLUS Rounded 1c(webfont)はClearTypeが効かずDPR 1.0で潰れるため 後方フォールバックへ。Mac(:root)は丸ゴのまま不変。 'Noto Sans JP' に @font-face が無い(死に指定)のも整理し、 実在する BIZ UDPGothic / Meiryo のみ指定する。 ・Yu Gothic UI のような極小サイズで線がくっついて潰れるフォントを排除(継続) ・UD系は実ウェイト500が無い環境で疑似ボールド化＝汚れの元になるため weight は 400 に戻し、stroke も 0 にする(ヒンティング済み素描が最鮮明)。 太さが必要な見出し・タイピング大文字は個別に bold で指定する。 ・手動ブースト body.win.win-text-heavy は残す(実機比較用)。 ===================================================== */ body.win { --font-ui: 'Inter', 'BIZ UDPGothic', 'Meiryo', 'M PLUS Rounded 1c', system-ui, sans-serif; --font-ja: 'BIZ UDPGothic', 'Meiryo', 'M PLUS Rounded 1c', system-ui, sans-serif; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; /* v1.0.86: optimizeLegibility → auto。UD系はヒンティングで読ませるのが最優先で、 カーニング強制は小サイズの詰まりよりヒンティング無効化の害が大きいため戻す */ text-rendering: auto; /* v1.0.86: ヒンティング済みUD素描が最鮮明。stroke はフリンジにしかならないため 0。 ギザギザ対策の太さは font-weight ではなく個別の bold 指定で確保する。 */ -webkit-text-stroke: 0; /* v1.0.86: BIZ/Meiryo に500実ウェイトが無い環境での疑似ボールド(輪郭の二重描画＝汚れ) を避けるため 400 に戻す。見出し・タイピング等の太字は個別 bold が効く。 */ font-weight: 400; } /* 【調整用・既定は無効】さらに文字の輪郭を太くして段差を目立たなくする。 有効化は DevTools の Console から: document.body.classList.add('win-text-heavy') （v1.0.86: UD素描が既定のため通常は不要。強すぎ/弱すぎなら -webkit-text-stroke の 0.2px を 0.15〜0.25px で調整） */ body.win.win-text-heavy { -webkit-text-stroke: 0.2px currentColor; } body.win #word, body.win #word-long, body.win #jp, body.win #roma, body.win #kana-scroll, body.win #roma-scroll { /* v1.0.86: タイピング大文字もUD優先に統一。太さはUD正規の bold で確保し、 stroke はヒンティングを殺すため 0(フリンジ防止)。 */ --font-ja: 'BIZ UDPGothic', 'Meiryo', 'M PLUS Rounded 1c', system-ui, sans-serif; -webkit-text-stroke: 0; font-weight: 700; } /* ===================================================== Windows のみ: 小さいUI文字（10〜11px）のサイズ底上げ（v1.0.82） 症状「小さすぎて潰れる」への根治療。小さいグリッドに文字を詰め込むほど グレースケールAAの階段と墨のへばりが目立つため、1段（+1px）持ち上げる。 ※ スタイルシートの !important はインライン style に勝つため、 index.html / js 内でインライン指定されている説明文も一括で対象になる。 ===================================================== */ /* --- B-1: インライン指定の10px / 11px を一括で +1px --- */ body.win [style*="font-size: 10px"] { font-size: 11px !important; } body.win [style*="font-size:10px"] { font-size: 11px !important; } body.win [style*="font-size: 11px"] { font-size: 12px !important; } body.win [style*="font-size:11px"] { font-size: 12px !important; } /* --- B-2: スタイルシート側（流動レイアウトのラベル・説明文のみを選定） --- 意図的に除外したもの: ・border-radius:999px のピルバッジ / .skill-tag（幅が見た目に効く） ・.ach-name（width:100% + white-space:nowrap ＝はみ出しリスク） ・14px円の数字（固定サイズ）/ .map-label（absolute配置で隣接ノードと衝突） ・.quest-side-menu::before（疑似要素）/ devPanel・dev-*（開発用） ・.star-upgrade-rebuild-btn などのボタン（padding付きで横幅が変化） */ body.win #time-circle .label, body.win #chainLabel, body.win .enemy-sound-toggle, body.win .global-fs-toggle, body.win .stock-label, body.win .active-stock-row, body.win .slot-title-detail, body.win .slot-breakdown, body.win .skill-grid-name, body.win .log-chapter-status, body.win .quest-modal-box.quest-modal-skill .skill-equip h3, body.win .quest-modal-box.quest-modal-skill .active-skill-desc-container .skill-desc, body.win .quest-modal-box.quest-modal-skill .active-skill-desc-container .skill-cooldown { font-size: 11px; } /* ===================================================== Windows のみ: 低コントラスト「グレー系」文字の stroke 除外（v1.0.83） body.win の -webkit-text-stroke: 0.06px は輪郭の両側に半透明フリンジを作る。 白系文字では「締まる」が、暗背景のグレー文字（#8b949e 等）では フリンジ自体がグレーの霞として広がり「にじむ」見た目になる。 ⇒ 設定画面・モード設定画面の説明文など灰色テキストに限定して無効化する。 font-weight: 500 は維持（実ウェイトなので輪郭はクリスプなまま）。 ===================================================== */ /* v1.0.84: 上記に加え、Windows で見にくい全要素を一括で stroke 除外。 対象は opacity→色アルファ化・低コントラストグレー・背景透過テキスト。 */ body.win .setting-description, body.win [style*="color: #8b949e"], body.win [style*="color:#8b949e"], body.win .log-chapter-title, body.win .log-chapter-status, body.win .character-name, body.win .map-label, body.win .map-label.cleared, body.win .map-label.locked, body.win .dialogue-close-btn, body.win #dialogueSkipToEndBtn, body.win #dialogueSkipToChoiceBtn { -webkit-text-stroke: 0; } body.win .skill-equip h3, body.win .active-skill-desc-container .skill-desc, body.win .active-skill-desc-container .skill-cooldown, body.win .skill-tag-note, body.win .slot-date, body.win .music-modal-note, body.win .music-progress-time, body.win .music-row-composer, body.win .calc-item .label, body.win .offline-dl-progress-text, body.win .offline-dl-note p, body.win .offline-dl-detail, body.win .star-upgrade-item-desc, body.win .star-upgrade-item-cooldown, body.win .star-upgrade-flash, body.win .star-upgrade-item-stats, body.win .star-upgrade-rebuild-tickets, body.win .setting-description, body.win #remainingLoadIndicator { font-size: 12px; } /* R-TYPE風タクティカル背景 ※ html 側に敷くことでステージ（16:9フレーム）外の余白にも 背景が続いて見え、フレームの境界が目立たなくなる */ html::before { content: ""; position: fixed; inset: 0; background: linear-gradient(rgba(18, 25, 33, 0.6), rgba(5, 8, 10, 0.7)), repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0px, rgba(0, 0, 0, 0.15) 1px, transparent 1px, transparent 2px); /* スキャンライン */ /* z-index: -2; */ /* → 画面階層セクションへ移動 */ } /* ヘックスパターン背景 */ html::after { content: ""; position: fixed; inset: 0; background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iMTA0IiB2aWV3Qm94PSIwIDAgNjAgMTA0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik02MCA5NEwzMCAxMDQgMCA5NFY2NEwzMCA1NEw2MCA2NFY5NFpNMzAgNDRMMCAzNFY0TDMwIDBMMTYwIDRMNjAgMzRWMzRaIiBmaWxsPSJub25lIiBzdHJva2U9IiMxNDI4MzUiIHN0cm9rZS13aWR0aD0iMC41Ii8+PC9zdmc+'); opacity: 0.3; /* z-index: -1; */ /* → 画面階層セクションへ移動 */ mask-image: radial-gradient(circle at center, black, transparent 80%); } h1 { font-size: 3rem; font-weight: 700; margin-bottom: 1rem; letter-spacing: 0.1em; color: #58a6ff; /* サイバーブルー */ text-transform: uppercase; } /* 汎用ボタン（デフォルト） 各UI専用ボタンは下で上書きする */ button { margin: 5px; padding: 5px 10px; font-size: 16px; } /* ===================================================== 画面階層 ===================================================== */ /* --- 背景 --- */ html::before { z-index: -2; } /* 背景: スキャンライン */ html::after { z-index: -1; } /* 背景: ヘックスパターン */ #menuBackground { z-index: -1; } /* 背景: メニュー画面の背景画像 */ /* --- ゲーム要素 (クエストマップなど) --- */ #mapCanvas { z-index: 0; } /* クエストマップ: 背景Canvas */ #time-circle { z-index: 0; } /* ゲーム画面: 時間サークル(リング) */ #time-circle::before { z-index: 0; } /* ゲーム画面: 時間サークル(内側) */ #mapNodes { z-index: 1; } /* クエストマップ: ノード群 */ #time-circle .label, #time-circle .count { z-index: 2; } /* ゲーム画面: 時間サークル(テキスト) */ #history th { z-index: 5; } /* 記録画面: 履歴テーブルヘッダー */ #mapBackBtn { z-index: 10; } /* クエストマップ: 戻るボタン */ #records th { z-index: 10; } /* 記録画面: テーブルヘッダー */ .quest-side-menu { z-index: 20; } /* クエストマップ: サイドメニュー */ #statsCloseQuest { z-index: 20; } /* クエストステータス: 閉じるボタン */ /* --- UIコンテナ (メニュー、ゲームモードなど) --- */ .world-selector { z-index: 100; } /* クエストマップ: ワールドセレクター */ #menu { z-index: 500; } /* メインメニュー画面 */ #bootScreen { z-index: 1000; } /* 起動画面 (Click to Start) */ #enemyModeContainer { z-index: 1000; } /* エネミーモード: 全体コンテナ */ .enemy-sound-toggle { z-index: 1100; } /* エネミーモード: サウンドトグル */ /* --- ゲーム中モーダル / UI --- */ .game-modal { z-index: 8000; } /* ゲーム画面: モーダル背景 */ #time-bar { z-index: 9000; } /* ゲーム画面: タイムバー */ #timeLeft { z-index: 9100; } /* ゲーム画面: 残り時間テキスト */ .result-modal { z-index: 9500; } /* 結果画面: モーダル背景 */ #enemyResult { z-index: 9500; } /* エネミーモード: 結果画面 */ /* --- 上位モーダル (クエスト、設定など) --- */ .quest-modal { z-index: 10000; } /* クエストマップ: モーダル背景 */ .quest-modal-box { z-index: 10001; } /* クエストマップ: モーダル本体 */ .save-modal { z-index: 10010; } /* クエスト: セーブモーダル（MUSIC 等で使用） */ /* ★SAVE/LOAD・CLEAR REWARD・KEY BIND は .quest-modal の見た目で実装しているが、 従来の重なり順（.save-modal と同じ 10010）を維持する */ #saveModal, #clearRewardModal, #keybindConfigModal { z-index: 10010; } .end-intro, #endIntro { z-index: 10400; } /* 結果画面: 表示前イントロ */ .stage-intro { z-index: 10400; } /* クエスト開始イントロ */ #playerHud { z-index: 10500; } /* プレイヤーHUD */ #skillUnlockHint { z-index: 10500; } /* スキルアンロックヒント */ .free-config-container { z-index: 10550; } /* フリーモード: 詳細設定画面 */ #records { z-index: 10550; } /* 記録画面 */ .modal, .stats-modal, .quest-stats-modal, .ach-modal-content, #settings { z-index: 10600; } /* 汎用モーダル (ステータス, 勲章, 設定) */ #globalUiBar { z-index: 10700; } /* グローバルUIバー: メニュー左上の共通切替ボタン群 */ .free-skill-modal { z-index: 10850; } /* フリーモード: スキル選択/星強化モーダル（設定パネル10550・汎用10600・globalUiBar 10700より上） */ /* --- 最前面系 (カウントダウン、ローディングなど) --- */ #countdown { z-index: 11000; } /* ゲーム開始: カウントダウン */ .pause-overlay { z-index: 11000; } /* ポーズ画面 */ #loadingScreen { z-index: 12000; } /* ローディング画面 */ .ach-popup-container { z-index: 13000; } /* 勲章獲得ポップアップ */ #devPanel { z-index: 20000; } /* 開発者パネル */ /* ===================================================== 画面レイアウト切替（メニュー / ゲーム / 統計） ===================================================== */ #game, #stats { margin-top: 20px; } #menu { display: block; } #game, #stats, #startMenu, #freeStartMenu, #questMenu { display: none; } /* ===================================================== ローディング ===================================================== */ #loadingScreen { position: fixed; inset: 0; background: #111; color: white; display: flex; justify-content: center; align-items: center; } /* Boot Screen 全体を覆う設定 */ #bootScreen { position: fixed; /* 画面に固定 */ top: 0; left: 0; width: 100%; height: 100%; background-color: #333; /* z-index: 1000; */ /* → 画面階層セクションへ移動 */ /* Flexbox を使って子要素を中央に配置 */ display: flex; justify-content: center; /* 水平方向の中央揃え */ align-items: center; /* 垂直方向の中央揃え */ /* cursor: pointer; は main.js で設定済みですが、ここでも設定可能です */ } /* 「Click to Start」メッセージのスタイル */ .boot-message { font-size: 2rem; /* フォントサイズ */ font-weight: bold; /* 太字 */ color: white; /* 文字色 */ text-align: center; /* 念のため中央揃え */ } /* ===================================================== カウントダウン表示（中央固定・枠なし） ===================================================== */ #countdown { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); /* z-index: 11000; */ /* → 画面階層セクションへ移動 */ font-size: 12rem; /* さらに大きく、シンプルに */ font-weight: 900; color: #ffffff; /* 確実に見える白 */ text-shadow: 0 0 30px rgba(0, 0, 0, 0.5); /* 視認性向上のための影 */ text-align: center; display: none; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0; } /* ===================================================== ポーズメニュー ===================================================== */ .pause-overlay { position: fixed; inset: 0; display: none; justify-content: center; align-items: center; background: rgba(0,0,0,0.6); } .pause-menu { color: white; font-size: 24px; text-align: center; } /* ===================================================== 共通モーダル（ゲーム / 結果 / ステータス等） ===================================================== */ .game-modal, .result-modal, .stats-modal, .modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; } /* カウントダウン中はモーダルの「枠」と「背景」を消す */ .game-modal.is-counting .game-modal-content { background: transparent !important; border: none !important; box-shadow: none !important; overflow: hidden !important; } /* モーダル背景の違いは個別で指定 */ .game-modal { background: rgba(0,0,0,0.25); backdrop-filter: blur(4px); } .result-modal { background: rgba(0,0,0,0.2); backdrop-filter: blur(3px); /* 内容が画面より高い場合（小さいウィンドウ・拡大表示など）でも スクロールですべての結果・ボタンにアクセスできるようにする */ overflow-y: auto; overflow-x: hidden; } /* 結果カードのはみ出し安全な上下中央寄せ： autoマージンで中央寄せしつつ、内容が画面より高い場合は マージンが0になって上端から表示＋スクロール可能になる。 （align-items:center のままでは上方向にはみ出した部分へスクロールできない） */ .result-modal > .result-card { margin: auto 0; max-width: 100%; } .stats-modal, .modal { background: rgba(0,0,0,0.55); display: none; } /* ===================================================== メニュー画面 ===================================================== */ #menu { position: fixed; inset: 0; /* z-index: 500; */ /* → 画面階層セクションへ移動 */ } #startMenu, #freeStartMenu, #questMenu, .menu-inner { position: absolute; /* 装飾ライン（左20px）をboxの外にはみ出させないため、 boxを20px左へずらしてpaddingで位置を補正している（ボタン位置・幅は不変） */ left: calc(5% - 20px); top: 30%; /* 固定位置（画面上部から30%の位置） */ width: 370px; /* 350px + 装飾ライン分の20px */ padding: 0 0 0 20px; box-sizing: content-box; /* ボタン(width:100%)の実質幅を従来どおり350pxに保つ */ text-align: left; background-size: cover; background-position: center; background-repeat: no-repeat; border: none; box-shadow: none; backdrop-filter: none; margin: 0; /* 下端の見切れ対策： boxの高さを「top:30% の位置〜下端24pxの余白」までに制限し、 あふれた場合は内側のスクロール領域（#menuButtons / .menu-scroll-area）で スクロールできるようにする。 ※ box自体はクリップしない（overflow: visible のまま）ため、 nowrap のタイトル（MAME TYPE / DAILY MODE など）が 右へはみ出すオリジナルのデザインが維持される */ max-height: calc(70% - 24px); display: flex; flex-direction: column; } /* ヘッダー（タイトル）はスクロール領域の外に固定。 これによりboxがどんなに狭くなってもタイトルは見切れない */ #menuHeader, #startMenu h2, #freeStartMenu h2, #questMenu h2 { flex: 0 0 auto; } /* ボタン領域のみスクロールする */ #menuButtons, .menu-scroll-area { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; } /* 装飾用のサイドライン （スクロール可能化に伴い、boxの外にはみ出さないよう内側に収めた。 グラデーションは両端で透明にフェードするため見た目の変化は最小限） */ .menu-inner::before, #startMenu::before, #freeStartMenu::before, #questMenu::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(transparent, #58a6ff, transparent); box-shadow: 0 0 15px rgba(88, 166, 255, 0.8); } /* 短い画面（ノートPCの小さめウィンドウ等）では開始位置を上げて 下端ボタンの見切れを防ぐ（それでも収まらない場合は内部スクロールで対処） */ @container (max-height: 780px) { #startMenu, #freeStartMenu, #questMenu, .menu-inner { top: 16%; max-height: calc(84% - 24px); } } @container (max-height: 560px) { #startMenu, #freeStartMenu, #questMenu, .menu-inner { top: 4%; max-height: calc(96% - 16px); } #menu h1 { font-size: clamp(1.8rem, 5vw, 3rem); } #menuHeader { margin-bottom: 16px; } #menu button, #startMenu button, #freeStartMenu button, #questMenu button { padding-top: 3px; padding-bottom: 3px; font-size: 14px; } #startMenu h2, #freeStartMenu h2, #questMenu h2 { font-size: clamp(1.7rem, 5vw, 2.6rem); } } /* 幅が狭い画面ではメニューbox自体を画面内に収める （content-boxのため、padding20px＋左右マージン16px×2を差し引いた幅） */ @container (max-width: 440px) { #startMenu, #freeStartMenu, #questMenu, .menu-inner { left: 16px; width: calc(100vw - 52px); } } #menuHeader { margin-bottom: 40px; /* ←ここで間隔調整 */ } /* タイトルロゴ（でっかいロゴ風）--- フォントは self-host(Inter)で全OS共通表示 */ #menu h1 { font-family: var(--font-ui); /* Inter → 全OS共通 */ font-size: clamp(2.2rem, calc(var(--dvw) * 5.5), 4.5rem); /* 5.5vw @デザイン1600で固定 */ margin: 0 0 6px 0; font-weight: 800; font-style: italic; color: #e1edff; text-align: left; letter-spacing: 0.02em; line-height: 1; white-space: nowrap; /* 1行で保持し、右へ伸びる大きなロゴとして表示 */ text-transform: uppercase; text-shadow: 0 0 3px rgba(88, 166, 255, 0.7), 0 0 18px rgba(88, 166, 255, 0.45), 0 0 55px rgba(88, 166, 255, 0.25), 3px 3px 0 rgba(0, 0, 0, 0.55); } #startMenu h2, #freeStartMenu h2, #questMenu h2 { font-family: var(--font-ui); /* Inter → 全OS共通 */ font-size: clamp(2.1rem, calc(var(--dvw) * 5), 4rem); margin-top: 0; /* ブラウザデフォルトの余白をリセットして位置を固定 */ margin-bottom: 5px; font-weight: 800; font-style: italic; color: #e1edff; text-align: left; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; /* 切替アイコンと1行に保持 */ text-shadow: 0 0 3px rgba(88, 166, 255, 0.7), 0 0 16px rgba(88, 166, 255, 0.4), 0 0 45px rgba(88, 166, 255, 0.22), 2px 2px 0 rgba(0, 0, 0, 0.55); } #menu h1, #startMenu h2, #freeStartMenu h2, #questMenu h2 { position: relative; display: inline-block; } #gameTitle { margin: 0; } /* バージョン表示 */ #versionWrapper { display: inline-flex; align-items: center; gap: 6px; border-top: 1px solid rgba(88, 166, 255, 0.3); padding-top: 4px; white-space: nowrap; } #versionLabel { font-size: 12px; color: #58a6ff; letter-spacing: 2px; } #versionSep { font-size: 12px; color: rgba(88, 166, 255, 0.4); letter-spacing: 2px; } #offlineVersionLabel { font-size: 12px; color: #58a6ff; letter-spacing: 2px; transition: color 0.3s ease; } /* オフライン版がない場合のスタイリッシュな表記 */ #offlineVersionLabel.no-offline { color: #4a5568; font-weight: 300; letter-spacing: 1px; } #menu button, #startMenu button, #freeStartMenu button, #questMenu button { display: block; width: 100%; margin: 5px 0; border-radius: 6px; text-align: left; padding-left: 20px; background: rgba(88, 166, 255, 0.05); border-left: 4px solid #58a6ff; border-right: none; border-top: none; border-bottom: none; text-transform: uppercase; color: #7b8892e8; /* 未選択時の視認性を向上させる */ font-weight: bold; letter-spacing: 2px; transition: 0.3s; } /* キーボードナビゲーション中はマウス hover のハイライトを無効化（最後に触った方を優先） */ body.menu-keyboard-nav #menu button:hover, body.menu-keyboard-nav #startMenu button:hover, body.menu-keyboard-nav #freeStartMenu button:hover, body.menu-keyboard-nav #questMenu button:hover { background: rgba(88, 166, 255, 0.05); padding-left: 20px; color: #7b8892e8; text-shadow: none; border-left-width: 4px; } #menu button:hover, #startMenu button:hover, #freeStartMenu button:hover, #questMenu button:hover, #menu button:focus, #startMenu button:focus, #freeStartMenu button:focus, #questMenu button:focus { background: rgba(88, 166, 255, 0.2); padding-left: 35px; color: #ffffff; text-shadow: 0 0 10px #fff; border-left-width: 8px; outline: none; } /* フリーモード等で選択中のボタンを維持するスタイル */ #freeStartMenu button.active { background: rgba(88, 166, 255, 0.35); /* ホバーより少し濃い青 */ padding-left: 35px; /* ホバー時と同じ位置を維持 */ color: #ffffff; /* 文字を白く */ text-shadow: 0 0 15px #fff; /* 発光を強めに */ border-left-width: 8px; /* 太い左線を維持 */ box-shadow: inset 0 0 15px rgba(88, 166, 255, 0.3); /* 内側に青いグロー */ } #menu button:active, #startMenu button:active, #freeStartMenu button:active, #questMenu button:active { transform: scale(0.98); background: #161b22; } #menuBackground { position: absolute; inset: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.45; filter: brightness(1.2); /* z-index: -1; */ /* → 画面階層セクションへ移動 */ pointer-events: none; } /* ========================= タイトル横モード切替 ========================= */ #startMenu h2, #freeStartMenu h2 { display: inline-block; position: relative; } /* 切替アイコン */ #switchToFreeBtn, #switchToNormalBtn { margin-left: 10px; /* ← 少し右に離す */ font-size: 14px; /* 控えめサイズ */ opacity: 0.65; cursor: pointer; transition: transform 0.18s ease, opacity 0.18s ease; } /* ホバー時：軽く回転 */ #switchToFreeBtn:hover, #switchToNormalBtn:hover { opacity: 1; transform: rotate(20deg) scale(1.05); } /* クリック時：小さく戻る */ #switchToFreeBtn:active, #switchToNormalBtn:active { transform: rotate(0deg) scale(0.92); } /* ===================================================== ゲームモーダル本体カード ===================================================== */ .game-modal-content { background: rgba(13, 17, 23, 0.95); color: #f0f6fc; border-radius: 14px; padding: 28px 32px; /* コンパクト設計：内容にフィットさせ、大きくなりすぎないよう上限のみ制約する。 （16:9固定の大きな枠ではなく、タイピングUIのサイズに合わせて収まる） */ box-sizing: border-box; width: min(calc(var(--dvw) * 94), 820px); max-height: calc(var(--dvh) * 100 - 60px); overflow: auto; border: 1px solid rgba(88, 166, 255, 0.4); backdrop-filter: blur(10px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(88, 166, 255, 0.05); /* タイピング入力画面（STANDARD / TIME ATTACK 等）を上下中央に配置するため縦flexに */ display: flex; flex-direction: column; } /* 入力UI一式（#game）をカード内の上下中央に配置。 上下 auto マージン方式なので、内容がカードより大きい場合は マージンが 0 になり上詰め表示＋スクロールで対処できる（はみ出し安全）。 */ .game-modal-content > #game { margin-top: auto; margin-bottom: auto; } /* 様々な画面サイズ / アスペクト比に対応： ノートPCや低解像度・縦長ウィンドウでは余白を詰めて内容を優先表示する */ @container (max-width: 960px) or (max-height: 720px) { .game-modal-content { padding: 18px 20px; border-radius: 10px; width: min(94vw, 720px); } } @container (max-width: 640px) or (max-height: 520px) { .game-modal-content { /* 極端に小さい画面では幅を優先し、はみ出しはスクロールで対処 */ width: 96vw; max-height: 94dvh; padding: 14px 16px; } } /* モーダル内テキスト色調整 */ .game-modal-content #word { color: #f0f6fc; } .game-modal-content #jp { color: #b7c0c9; } .game-modal-content #roma { color: #8ebff7; } .game-modal-content .time-left { color: #f0f6fc; } /* ===================================================== 結果前の共通イントロ（全モード共通） ===================================================== */ #endIntro { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.9); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; /* z-index: 9999; */ /* → 画面階層セクションへ移動 */ } /* 表示状態 */ #endIntro.show { opacity: 1; pointer-events: auto; } /* テキスト */ .introText { color: white; font-size: clamp(1.5rem, calc(var(--dvw) * 6), 44px); /* デザイン基準(1600)で固定 */ letter-spacing: 4px; padding: 0 12px; /* 端に張り付かないように */ box-sizing: border-box; max-width: 100%; opacity: 0; transform: translateY(10px); transition: opacity 0.6s ease, transform 0.6s ease; } /* テキスト表示 */ #endIntro.show .introText { opacity: 1; transform: translateY(0); } /* daily mode======================================== */ .end-intro { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: none; align-items: center; justify-content: center; font-size: clamp(1.5rem, calc(var(--dvw) * 6), 42px); /* デザイン基準(1600)で固定 */ font-weight: bold; color: white; letter-spacing: 2px; padding: 0 16px; /* 端に張り付かないように */ box-sizing: border-box; /* z-index: 9999; */ /* → 画面階層セクションへ移動 */ } /* ===================================================== デイリー結果画面：全体の中央寄せと横幅制限 ===================================================== */ .quest-result-inner, .enemy-result-container, .skill-result-container, .result-container-centered { width: 100%; max-width: 760px; /* 広がりすぎない適度な幅 */ margin: 0 auto; /* 左右中央寄せ */ text-align: center; } /* 左（ラベル） */ .result-label { color: #8b949e; } /* 右（値） */ .result-value { font-weight: bold; color: #c9d1d9; } /* 結果バッジ */ .r-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 6px; border-radius: 8px; margin: 6px 3px 0 3px; } .r-badge.rank { background: #10b981; color: #fff; } .r-badge.online { background: #2563eb; color: #fff; } /* 結果の記録更新表示(バッジではなくシンプルなテキスト) */ .result-note { display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: 0.05em; margin: 6px 4px 0; } .result-note.new { color: #10b981; } /* ★ NEW RECORD(RANK IN と同じ緑) */ .result-note.online { color: #3b82f6; } /* ↑ ONLINE RECORD UPDATED */ .result-free-badge { display: inline-block; margin: 8px auto 8px; padding: 4px 10px; font-size: 12px; font-weight: bold; border-radius: 999px; background: #4caf50; color: white; letter-spacing: 1px; } .ranking-season { font-size: 12px; opacity: 0.7; margin-top: 4px; } /* */ .ranking-disabled { margin-top: 12px; padding: 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); text-align: center; color: #8d8d8d; font-size: 0.8rem; line-height: 1.6; } .ranking-disabled h3 { margin: 0 0 5px; font-size: 0.7rem; color: #787878; } /* リザルト画面全体のカードスタイル */ .menu-style-card { background: rgba(13, 17, 23, 0.92); border: 1px solid rgba(88, 166, 255, 0.3); border-radius: 12px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(88, 166, 255, 0.05); backdrop-filter: blur(10px); } /* ワイドレイアウトの設定 */ .result-container-centered.wider { width: 90%; max-width: 760px; padding: 30px 40px; } /* 狭い画面では結果カードの余白・間隔を詰めて横方向のはみ出しを防ぐ */ @container (max-width: 560px) { .result-container-centered.wider { padding: 20px 16px; } .result-header-row { gap: 20px 32px; padding: 10px; flex-wrap: wrap; } .result-header-item .r-value.big { font-size: 28px; } .result-stats-grid { gap: 8px 20px; padding: 12px; } } .result-title-main { font-size: 14px; color: #8b949e; letter-spacing: 0.1em; margin-bottom: 20px; border-bottom: 1px solid rgba(48, 54, 61, 1); padding-bottom: 10px; } /* スコアとランクの横並びヘッダー */ .result-header-row { display: flex; justify-content: center; gap: 80px; align-items: center; margin-bottom: 25px; padding: 15px; background: rgba(88, 166, 255, 0.05); border: 1px solid rgba(88, 166, 255, 0.1); border-radius: 4px; } .result-header-item { text-align: center; } .result-header-item .r-label { font-size: 12px; color: #8b949e; margin-bottom: 5px; } .result-header-item .r-value.big { font-size: 36px; font-weight: bold; font-family: var(--font-mono); } .result-header-item .accent { color: #58a6ff; text-shadow: 0 0 10px rgba(88, 166, 255, 0.5); } /* 統計情報の2列グリッド */ .result-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 60px; margin: 15px 0; padding: 20px; background: rgba(0, 0, 0, 0.3); border-radius: 4px; } .result-stats-grid .r-row { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding-bottom: 4px; } /* ボタンの横並び制御 */ .result-buttons.horizontal { display: flex !important; flex-direction: row !important; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 25px; width: 100%; } .result-buttons.horizontal button { min-width: 140px; padding: 10px 20px; margin: 0 !important; /* JSで付与されるマージンをリセット */ font-size: 13px; } /* バッジエリア */ .result-badges { display: flex; justify-content: center; gap: 10px; margin-top: 15px; } /* ONLINE RECORD UPDATED をランキングの左横に並べる */ .online-ranking-container { display: flex; flex-direction: row; justify-content: center; align-items: flex-start; gap: 10px; margin-top: 10px; width: 100%; } .online-ranking-container .result-online-ranking { max-width: 400px; /* 幅はコンテンツに合わせる(上限のみ) */ } .online-ranking-container .result-note.online { flex-shrink: 0; margin: 0; padding-top: 4px; /* ランキング先頭行と縦位置を合わせる 4px*/ } /* ボタン群 */ .result-btn { margin: 4px; padding: 8px 15px; clip-path: none; /* 多角形を解除 */ background: rgba(88, 166, 255, 0.1); /* Blueish background */ border: 1px solid rgba(88, 166, 255, 0.4); /* Blue border */ border-radius: 8px; /* More rounded corners */ color: #f0f6fc; /* Light text */ font-weight: 700; text-transform: uppercase; cursor: pointer; transition: 0.15s; box-shadow: 0 2px 8px rgba(0,0,0,0.3); /* Subtle shadow */ } .result-btn:hover { background: rgba(88, 166, 255, 0.2); /* Lighter blue on hover */ color: #fff; /* White text on hover */ border-color: #58a6ff; /* Brighter border on hover */ box-shadow: 0 4px 12px rgba(0,0,0,0.4); /* Stronger shadow on hover */ } /* ===================================================== フォント（日本語表示系を丸ゴ寄りに統一） ===================================================== */ #word, #word-long, #jp, #roma, #kana-scroll, #roma-scroll, #progress-text, #timeLeft { font-family: var(--font-ja); } /* ===================================================== 単語・入力表示（中央メインUI） ===================================================== */ #modeBadges { display: flex; justify-content: center; align-items: center; gap: 8px; /* バッジ間の余白 */ margin: 8px auto; } #modeBadges > div { display: inline-flex; align-items: center; justify-content: center; } #freeModeBadge, #missModeBadge { display: none; /* 初期非表示 */ width: auto; padding: 4px 10px; font-size: 12px; font-weight: bold; border-radius: 999px; color: white; letter-spacing: 1px; } #freeModeBadge { background: #4caf50; } #missModeBadge { background: #dc5353; } #word { font-size: 2.1rem; font-weight: 600; margin-bottom: 0.4rem; color: #f0f6fc; letter-spacing: 0.02em; } #jp { font-size:1.6rem; } #roma { font-size: 1.6rem; letter-spacing: 0.06em; color:#5e57d0; margin-bottom: 1rem; font-weight: 600; } /* 表示ラップ */ #jp-wrap, #roma-wrap { width: 100%; text-align: center; min-height: 40px; } #jp, #roma { display: inline-block; text-align: center; word-break: break-all; } .done { color: #4a4d50; /* 少し暗めにして未入力との差を強調 */ text-shadow: none; } /* ===================================================== 残り時間表示 ===================================================== */ .time-left { font-size: 1.1rem; font-weight: 600; margin: 8px 0; color: #f0f6fc; } /* ===================================================== 長文表示 / スクロール表示 ===================================================== */ #word-long-wrap { display: none; height: 400px; overflow-y: auto; border: 1px solid rgba(88, 166, 255, 0.2); margin-bottom: 10px; padding: 16px 20px; line-height: 1.6; /* フォントサイズに対して行間を広げる */ font-size: 34px; text-align: left; /* 長文は左揃えを基本とする */ } #word-long { font-size: 1.9rem; font-weight: 600; margin-bottom: 0.4rem; color: #f0f6fc; letter-spacing: 0.02em; } #word-scroll-wrap { height: 120px; overflow-y: auto; overflow-x: hidden; } #word-scroll { white-space: normal; line-height: 1.8; font-size: 28px; } #word-scroll span.done { opacity: 0.35; } #scroll-wrap { display: none; max-height: 120px; overflow-y: auto; border: 1px solid rgba(88, 166, 255, 0.2); background: rgba(0, 0, 0, 0.2); } #kana-scroll, #roma-scroll { white-space: nowrap; overflow-x: auto; padding: 6px 10px; border-radius: 10px; box-sizing: border-box; scrollbar-width: none; font-weight: 500; } #kana-scroll { font-size: 23px; color: #b7c0c9; margin-bottom: 2px; } #roma-scroll { font-size: 23px; color: #679bd6; margin-top: 0; padding: 0 10px; } #kana-scroll::-webkit-scrollbar, #roma-scroll::-webkit-scrollbar { display: none; } /* ===================================================== スコア / プログレス / スピード / タイムバー ===================================================== */ #scoreValue { font-size: 3rem; font-weight: 700; color: #4f46e5; } #progress-container, #speed-container, #time-bar-container { width: 90%; max-width: 600px; margin: 10px auto; overflow: hidden; border-radius: 6px; border: 1px solid rgba(88, 166, 255, 0.2); background: rgba(255, 255, 255, 0.05); } #progress-container { height: 12px; } #progress-container { position: relative; overflow: visible; /* ←これ重要 */ } #progress-blocks { display: flex; height: 100%; } #progress-blocks { overflow: hidden; /* ←バーだけ閉じ込める */ } .progress-block.done { background: rgba(88, 166, 255, 0.15); } .progress-block { flex: 1; background: rgba(88, 166, 255, 0.6); border-right: 1px solid rgba(88, 166, 255, 0.1); } .progress-block:last-child { border-right: none; } #progress-text { position: absolute; top: -20px; /* ←バーの上に出す */ right: 0; font-size: 20px; color: #f0f6fc; pointer-events: none; font-weight: bold; } #time-bar-container { height: 12px; display: none; position: relative; overflow: visible; } #time-bar { position: relative; width: 100%; height: 100%; background: #ff9d00; /* 紺色の補色であるサイバーオレンジ */ transform-origin: left center; transform: scaleX(1); border-radius: 6px; z-index: 9000; } #timeLeft { position: absolute; top: -28px; /* ←バーの上に出す */ right: 0; font-size: 20px; color: #f0f6fc; pointer-events: none; font-weight: bold; z-index: 9100; } .time-num { font-size: 30px; /* 大きく */ font-weight: bold; } .time-unit { font-size: 16px; /* 小さく */ margin-left: 2px; } #speed-container { height: 12px; margin-bottom: 6px; } #speed-bar { height: 100%; width: 0%; background: #60a162; transition: width 0.15s linear; } #speed-label { font-size: 0.9rem; color: #8b949e; margin-bottom: 10px; } .clear-circle { position: relative; /* ← fixedやめる */ display: block; width: 100px; height: 100px; margin: 10px auto 6px auto; /* ← 中央寄せ＋日本語の上 */ border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: var(--font-ja); transform: scale(0.6); /* ← 全体を縮小 */ transform-origin: center; } /* 上の CLEAR */ .clear-circle .label { font-size: 13px; color: #8b949e; letter-spacing: 2px; opacity: 0.7; } /* 下の数字 */ .clear-circle .count { color: #f0f6fc; font-size: 28px; font-weight: bold; } #time-circle-container { position: relative; width: 60px; height: 60px; margin: 10px auto; display: none; } /* ===== 外側リング ===== */ #time-circle { width: 100%; height: 100%; border-radius: 50%; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; background: conic-gradient( rgba(88, 166, 255, 0.6) 0deg, rgba(88, 166, 255, 0.1) 0deg ); /* z-index: 0; */ /* → 画面階層セクションへ移動 */ } /* ===== 空洞（ドーナツの内側） ===== */ #time-circle::before { content: ""; position: absolute; inset: 6px; background: #0d1117; border-radius: 50%; /* z-index: 0; */ /* → 画面階層セクションへ移動 */ } /* ===== テキスト共通 ===== */ #time-circle .label, #time-circle .count { position: relative; /* z-index: 2; */ /* → 画面階層セクションへ移動 */ color: #f0f6fc; } /* 上：TIME */ #time-circle .label { font-size: 10px; letter-spacing: 1px; opacity: 0.7; line-height: 1; } /* 下：秒数 */ #time-circle .count { font-size: 14px; font-weight: bold; line-height: 1.2; } /* ===================================================== ゲーム画面内 戻るボタン ===================================================== */ .game-back-btn { background: rgba(88, 166, 255, 0.1); border: 1px solid rgba(88, 166, 255, 0.4); border-radius: 8px; color: #f0f6fc; font-weight: 700; text-transform: uppercase; cursor: pointer; transition: 0.15s; margin-top: 15px; } .game-back-btn:hover { background: rgba(88, 166, 255, 0.2); color: #fff; border-color: #58a6ff; } /* ===================================================== フリーモード難易度説明 ===================================================== */ .difficulty-info{ margin-top:2px; margin-bottom:6px; padding:0px 14px 12px; font-size:11px; line-height:1.5; background:rgba(255,255,255,0.05); border-radius:6px; white-space:pre-line; color: #e6edf3; } .difficulty-buttons{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; } /* =============================== フリーモード詳細設定 =============================== */ /* フリーモード内の全select */ #freeModeConfig select { background: #000; color: #fff; border: 1px solid #666; border-radius: 6px; padding: 6px 10px; } /* 開いた候補リスト */ #freeModeConfig select option { background: #000; color: #fff; } .free-config-container { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); /* z-index: 10550; */ /* → 画面階層セクションへ移動 */ width: 500px; margin-top: 0; padding: 24px; max-height: calc(var(--dvh) * 85); /* 項目が増えても画面内に収まるように制限 */ overflow-y: auto; /* はみ出す場合はスクロール可能にする */ background: rgba(13, 17, 23, 0.92); border: 1px solid rgba(88, 166, 255, 0.3); border-radius: 12px; backdrop-filter: blur(12px); text-align: left; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(88, 166, 255, 0.05); } /* スクロールバーは style.css 冒頭の共通設定（黒系）に統一 */ .config-section-title { font-size: 11px; color: #58a6ff; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 16px; border-bottom: 1px solid rgba(88, 166, 255, 0.2); padding-bottom: 6px; font-weight: 800; display: flex; align-items: center; gap: 8px; } .config-section-title::before { content: "▶"; font-size: 10px; } /* パターン選択ボタン（エネミーモード等） */ .pattern-selector { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; } .pattern-btn { padding: 8px 16px !important; font-size: 12px !important; border-radius: 6px !important; margin: 0 !important; width: auto !important; background: rgba(88, 166, 255, 0.05) !important; border: 1px solid rgba(88, 166, 255, 0.3) !important; color: #8b949e !important; cursor: pointer; transition: 0.2s; text-align: center !important; font-weight: bold !important; } .pattern-btn:hover { background: rgba(88, 166, 255, 0.15) !important; color: #f0f6fc !important; } .pattern-btn.active { background: rgba(88, 166, 255, 0.3) !important; border-color: #58a6ff !important; color: #ffffff !important; text-shadow: 0 0 8px rgba(88, 166, 255, 0.5); box-shadow: 0 0 12px rgba(88, 166, 255, 0.3); } /* 難易度ボタン（EASY/NORMAL/HARD/MASTER）は4つ並んでも1行に収める ※ createDifficultySelector で付与される .pattern-selector（wrap+gap:10px）より 後に宣言して、ラップされないように上書きする */ .difficulty-buttons.pattern-selector { flex-wrap: nowrap; gap: 6px; } .difficulty-buttons .pattern-btn { padding: 8px 8px !important; white-space: nowrap; } /* 設定項目行（スライダー） */ .config-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; padding: 4px 0; } .config-row:hover { background: rgba(88, 166, 255, 0.03); } .config-row label { flex: 0 0 140px; /* 文字が折り返されないように幅を拡張 */ font-size: 12px; color: #c9d1d9; white-space: nowrap; /* 確実に1行に収める */ width: 80px; flex-shrink: 0; } /* ROMAJI 設定行だけラベル幅を広げてコントロールを少し離す */ .config-row.romaji-row label { flex: 0 0 220px; } .romaji-keybind-controls { display: inline-flex; gap: 10px; margin-left:30px; margin-top: 5px; } .config-row input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; height: 2px; background: rgba(88, 166, 255, 0.2); border-radius: 1px; outline: none; cursor: pointer; } .config-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 8px; height: 18px; background: #58a6ff; border-radius: 1px; box-shadow: 0 0 10px rgba(88, 166, 255, 0.4); transition: 0.2s; } .config-value { flex: 0 0 55px; text-align: right; font-family: var(--font-mono); font-size: 14px; color: #58a6ff; font-weight: bold; text-shadow: 0 0 8px rgba(88, 166, 255, 0.4); } /* LV（レベル）設定値の特別色（黄緑系） */ .config-value.level-color { color: #9fe870; text-shadow: 0 0 8px rgba(159, 232, 112, 0.4); } /* パターンの詳細エリアのアニメーション */ .pattern-detail { animation: slideInRight 0.3s ease-out; } @keyframes slideInRight { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } } /* ジャンル複数選択チェックボックス */ .genre-checkbox-container { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; flex: 1; /* 残りの幅を埋める */ } .genre-checkbox-container label { display: flex; align-items: center; gap: 4px; font-size: 12px; cursor: pointer; flex: initial !important; /* .config-row label のスタイルを上書き */ width: auto !important; } /* =============================== Chain UI ================================ */ #chainUI{ position:absolute; top:20px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none; } /* =============================== 上段 ================================ */ #chainTopLine{ width:240px; height:21px; position:relative; } /* chain text */ #chainLabel{ font-size: 10px; /* 小さく */ opacity: 0.7; letter-spacing: 1px; } #chainValue{ line-height: 1.1; font-size:24px; font-weight: bold; letter-spacing:1px; color:rgb(137, 137, 137); transition:transform 0.15s; } #chainCount{ position:absolute; left:50%; bottom:0%; transform:translateX(-50%); text-align:center; } /* =============================== multiplier ================================ */ #chainMultiplier { position:absolute; right:0; bottom:0%; text-align: right; font-size: 12px; color: rgba(116, 116, 116, 0.828); /* 改行なし */ white-space:nowrap; } /* bar container */ #chainBarContainer{ position: relative; width:240px; height:8px; border-radius:0px; background:rgba(218, 218, 218, 0.329); overflow:visible; backdrop-filter:blur(4px); } /* bar */ #chainBar{ height:100%; width:100%; border-radius:0px; background:linear-gradient(90deg,#4ecdc4,#44aaff); transition:width 0.1s linear; } /* ===================== 左右ブラケット ===================== */ #chainBarContainer::before, #chainBarContainer::after { position: absolute; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: bold; line-height: 1; color: rgba(160, 160, 160, 0.75); text-shadow: 0 0 8px rgba(103, 103, 103, 0.126); pointer-events: none; } #chainBarContainer::before { content: "["; left: -8px; } #chainBarContainer::after { content: "]"; right: -8px; } /* ===================== Combo Tier Bar ===================== */ #comboTierWrapper { display: flex; gap: 3px; width: 100%; height: 6px; margin-top: 4px; } .combo-tier-block { position: relative; flex: 1; overflow: hidden; background: rgba(174, 174, 174, 0.808); border: 1px solid rgba(255,255,255,0.08); } /* ===================== 達成済みTier ===================== */ .combo-tier-block.filled { background: #ffd9ae; border-color: #fec273; } /* ===================== 現在進行中Tier ===================== */ .combo-tier-block.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--fill); background: #fff2d7; transition: width 0.08s linear; } .combo-tier-block.overdrive-all.active::before { background: #ffce6b; } /* ===================== Tier達成時Flash ===================== */ .combo-tier-block.flash { animation: comboTierFlash 0.35s ease-out; } @keyframes comboTierFlash { 0% { transform: scaleY(1); filter: brightness(1); } 40% { transform: scaleY(2.6); filter: brightness(2.4); } 100% { transform: scaleY(1); filter: brightness(1); } } /* コンボ全てマックス時OVERDRIVE */ .combo-tier-block.overdrive-all { background: #ffce6b; border-color: #ffe08a; box-shadow: 0 0 4px rgba(255, 220, 120, 0.28), 0 0 8px rgba(255, 210, 80, 0.16); animation: overdrivePulse 1.8s ease-in-out infinite; transform-origin: center; filter: brightness(1.05); } @keyframes overdrivePulse { 0% { transform: scale(1); filter: brightness(1); box-shadow: 0 0 4px rgba(255,220,120,0.24), 0 0 8px rgba(255,210,80,0.12); } 50% { transform: scale(1.05); filter: brightness(1.12); box-shadow: 0 0 6px rgba(255,235,150,0.35), 0 0 14px rgba(255,215,90,0.22); } 100% { transform: scale(1); filter: brightness(1); box-shadow: 0 0 4px rgba(255,220,120,0.24), 0 0 8px rgba(255,210,80,0.12); } } /* ===================================================== 設定画面 ===================================================== */ #settings { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 95%; max-width: 900px; /* Wider to match stats-window */ max-height: calc(var(--dvh) * 80); /* Shorter to match stats-window */ overflow-y: auto; /* z-index: 10600; */ /* → 画面階層セクションへ移動 */ margin: 0; padding: 20px 25px; /* More padding */ background: rgba(13, 17, 23, 0.95); /* Dark background from stats-window */ border: 1px solid rgba(88, 166, 255, 0.4); /* Blue border from stats-window */ border-radius: 14px; /* Rounded corners from stats-window */ box-shadow: 0 8px 32px rgba(0,0,0,0.6); /* Shadow from stats-window */ font-family: var(--font-ja); } /* Backdrop filter for settings screen */ .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; /* 狭く */ margin-bottom: 5px; /* 狭く */ } /* 描画品質セレクト（いろいろな画面環境に対応） */ .quality-select { width: 100%; max-width: 340px; padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(88, 166, 255, 0.4); background: #0d1117; color: #f0f6fc; font-family: var(--font-ja); font-size: 13px; cursor: pointer; } .quality-select:focus { outline: none; border-color: #58a6ff; box-shadow: 0 0 8px rgba(88, 166, 255, 0.35); } /* SETTING の×は常にモーダル枠の右上に固定する。 #settings は transform を持つため、子の position:fixed の基準は モーダル枠（#settings の padding box）になり、内部スクロールでも 位置が動かない。 また #settings button（背景・枠・角丸・影・余白・文字サイズ）を ここで打ち消し、装飾なしのシンプルな×だけを表示する。 */ #settings #settingsBackBtn { position: fixed; top: 8px; right: 8px; z-index: 20; margin: 0; padding: 0; background: transparent; border: none; box-shadow: none; color: #fff; font-size: 18px; font-weight: 400; line-height: 1; text-transform: none; } /* 装飾なしのまま、色のフィードバックだけ残す */ #settings #settingsBackBtn:hover, #settings #settingsBackBtn:focus { background: transparent; border-color: transparent; box-shadow: none; color: #ff9800; outline: none; } #settings h2 { margin-top: 0; margin-bottom: 5px; /* 狭く */ /* clear: both; は右上×が position:fixed（float なし）になったため不要 */ font-size: clamp(1.6rem, 4vw, 2rem); /* ★RECORDS/MUSIC/オンラインと統一 */ font-weight: 900; font-style: bold; color: #85a8d3; /* Blueish header from stats-header */ letter-spacing: -1px; text-shadow: 0 0 10px rgba(88, 166, 255, 0.3); /* Blue shadow */ text-align: center; /* Center align title */ text-transform: uppercase; /* Uppercase */ } /* セクション */ #settings fieldset { /* Similar to .daily-stats-card */ background: rgba(13, 17, 23, 0.92); /* Dark background from daily-stats-card */ border: 1px solid rgba(88, 166, 255, 0.3); /* Blue border from daily-stats-card */ border-radius: 12px; /* Rounded corners from daily-stats-card */ padding: 12px; /* 狭く */ margin-bottom: 10px; /* 狭く */ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(88, 166, 255, 0.05); /* Shadow from daily-stats-card */ backdrop-filter: blur(5px); /* Blur effect */ } #settings legend { /* Similar to .daily-stats-section */ padding: 0 6px; /* Slightly more padding */ font-weight: 900; /* Bolder */ color: #83abd9; /* Blueish color from daily-stats-section */ font-size: 0.9em; /* Slightly smaller */ text-transform: uppercase; /* Uppercase */ letter-spacing: 1px; /* Letter spacing */ text-shadow: 0 0 8px rgba(88, 166, 255, 0.4); /* Blue shadow */ border-bottom: 1px solid rgba(88, 166, 255, 0.2); /* Bottom border */ margin-bottom: 8px; /* 狭く */ } /* チェック行 */ #settings label { display: flex; align-items: center; gap: 6px; /* 狭く */ margin: 6px 0; /* Slightly more margin */ font-weight: normal; /* Less bold */ color: #c0c0c0; /* Softer color from daily-stats-row */ cursor: pointer; font-size: 0.85rem; } /* サウンド設定行のレイアウト */ .sound-setting-row { display: flex; align-items: center; gap: 10px; /* 狭く */ margin: 8px 0; /* 狭く */ } .sound-setting-row label { flex: 0 0 80px; margin: 0 !important; font-size: 0.8rem; color: #8b949e; letter-spacing: 0.5px; } .sound-setting-row input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; height: 2px; background: rgba(88, 166, 255, 0.2); border-radius: 1px; outline: none; cursor: pointer; } .sound-setting-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 8px; height: 18px; background: #58a6ff; border-radius: 1px; box-shadow: 0 0 10px rgba(88, 166, 255, 0.5); cursor: pointer; margin-top: -8px; transition: background 0.2s, transform 0.1s; } .sound-setting-row input[type="range"]::-moz-range-thumb { width: 8px; height: 18px; background: #58a6ff; border: none; border-radius: 1px; box-shadow: 0 0 10px rgba(88, 166, 255, 0.5); cursor: pointer; } .sound-setting-row input[type="range"]:hover::-webkit-slider-thumb { background: #fff; box-shadow: 0 0 15px rgba(255, 255, 255, 0.8); } .sound-value { flex: 0 0 45px; text-align: right; font-family: var(--font-mono); /* 等幅フォントで数字の揺れを防止 */ font-size: 0.8rem; color: #58a6ff; text-shadow: 0 0 10px rgba(88, 166, 255, 0.5); } /* チェック */ #settings input[type="checkbox"] { width: 18px; height: 18px; accent-color: #58a6ff; cursor: pointer; } /* ボタン群 */ #settings button { margin: 2px; /* 少し詰める */ padding: 6px 12px; /* 小さいサイズに合わせる */ clip-path: none; /* 多角形を解除 */ background: rgba(88, 166, 255, 0.1); /* Blueish background */ font-size: 12px; /* 小さいサイズに合わせる */ border: 1px solid rgba(88, 166, 255, 0.4); /* Blue border */ border-radius: 8px; /* More rounded corners */ color: #f0f6fc; /* Light text */ font-weight: 700; text-transform: uppercase; cursor: pointer; transition: 0.15s; box-shadow: 0 2px 8px rgba(0,0,0,0.3); /* Subtle shadow */ } #settings button:hover, #settings button:focus { background: rgba(88, 166, 255, 0.2); /* Lighter blue on hover */ color: #fff; /* White text on hover */ border-color: #58a6ff; /* Brighter border on hover */ box-shadow: 0 4px 12px rgba(0,0,0,0.4); /* Stronger shadow on hover */ outline: none; } .data-btn-row { display: flex; gap: 2px; flex-wrap: wrap; /* Allow buttons to wrap */ justify-content: center; /* Center buttons */ } /* Resetは不可逆操作のため、Export / Importと視覚的に区別する。 */ #settings .backup-reset-button { background: rgba(248, 81, 73, 0.12); border-color: rgba(248, 81, 73, 0.55); color: #ffb4ae; } #settings .backup-reset-button:hover:not(:disabled), #settings .backup-reset-button:focus:not(:disabled) { background: rgba(248, 81, 73, 0.25); border-color: #f85149; color: #fff; outline: none; } #settings .backup-reset-button:disabled { background: rgba(248, 81, 73, 0.08); border-color: rgba(248, 81, 73, 0.25); color: rgba(255, 180, 174, 0.55); opacity: 0.7; cursor: not-allowed; } .backup-reset-warning { color: #ffb4ae; } .slot-cleared { display: inline-block; margin-left: 8px; padding: 2px 8px; background: linear-gradient(90deg,#28a745,#1e7b34); color: #fff; border-radius: 8px; font-size: 11px; font-weight: 700; } /* ★EXTRA CLEAR バッジ（EXTRAワールド全クリア。CLEARED バッジの横に表示） */ .slot-extra-cleared { display: inline-block; margin-left: 8px; padding: 2px 8px; background: linear-gradient(90deg,#a855f7,#6d28d9); color: #fff; border-radius: 8px; font-size: 11px; font-weight: 700; box-shadow: 0 0 8px rgba(168, 85, 247, 0.6); } .slot-left { display: flex; align-items: center; gap: 8px; } /* 危険系 */ #settings button[id*="reset"] { background: rgba(239, 68, 68, 0.1); border-color: #ea6969; /* Red border */ color: #eb7e7e; /* Red text */ } #settings button[id*="reset"]:hover, #settings button[id*="reset"]:focus { background: rgba(239, 68, 68, 0.3); outline: none; } /* 戻るボタンだけ強調（旧：下部BACKボタン用。右上×に移行済みのため無効化） */ /* #settingsBackBtn { margin-top: 8px; width: auto; padding: 10px 30px; background: #4b5563 !important; color: #ffffff !important; border: 1px solid #6b7280 !important; border-radius: 8px !important; box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important; } */ /* 音量リセットボタンのスタイル */ .reset-btn { flex-shrink: 0; /* 縮まないようにする */ width: 24px !important; height: 24px !important; padding: 0 !important; margin: 0 !important; font-size: 12px !important; line-height: 22px; /* 中央揃え */ text-align: center; border-radius: 50% !important; /* 円形にする */ background: rgba(139, 148, 158, 0.2) !important; border: 1px solid rgba(139, 148, 158, 0.4) !important; color: #8b949e !important; font-weight: bold; } /* keybind */ /* フィールドセット全体を中央寄せ */ .keybind-fieldset { display: flex; flex-direction: column; align-items: center; } /* タイトルと中身を横並び */ .keybind-row { display: flex; align-items: center; justify-content: center; gap: 12px; /* 狭く */ margin-top: 8px; /* 狭く */ margin-bottom: 8px; /* 狭く */ } /* 左ラベル縦並び */ .keybind-labels { display: flex; flex-direction: column; gap: 0px; text-align: right; font-size: 0.85rem; color: #c0c0c0; /* Softer color */ } /* 右セレクト縦並び */ .keybind-controls { display: flex; flex-direction: column; gap: 10px; } /* セレクトを少し大きく */ .keybind-controls select { font-size: 14px; padding: 2px 4px; min-width: 100px; background: #0d1117; color: white; border: 1px solid #30363d; border-radius: 4px; /* Rounded corners for select */ } /* 例: main.css など、スタイルシートに追加 */ .setting-item.setting-item-select > select { margin-left: 12px; /* 左側に余白を追加 */ } .romaji-keybind-controls select { font-size: 14px; padding: 2px 4px; min-width: 100px; background: #0d1117; color: white; border: 1px solid #30363d; border-radius: 4px; /* Rounded corners for select */ } .config-row { margin-right: 16px; } /* 保存ボタンも中央 */ #saveKeybindBtn { margin-top: 5px; /* width: 100%; を削除して他のボタンと合わせる */ } /* Player Name Box */ .player-name-box { display: flex; gap: 8px; margin: 0; /* setting-rowで制御するためリセット */ align-items: center; flex-grow: 1; /* 残りの幅をすべて使用 */ } #playerNameInput { flex-grow: 1; /* Allow input to take available space */ padding: 6px 10px; /* Adjusted padding */ font-size: 0.9rem; /* Adjusted font size */ border-radius: 6px; /* Rounded corners */ border: 1px solid #30363d; /* Darker border */ background: #0d1117; /* Dark background */ color: #f0f6fc; /* Light text */ } #savePlayerNameBtn { flex-shrink: 0; /* Player IDのボタンと挙動を合わせる */ } /* 設定項目を横並びにするための行 */ .setting-row { display: flex; align-items: center; gap: 10px; /* 狭く */ margin: 8px 0; /* 狭く */ flex-wrap: nowrap; /* 折り返しを禁止 */ } /* 設定項目のタイトル */ .setting-item-title { font-size: 12px; color: #c9d1d9; margin-bottom: 4px; font-weight: bold; text-align: left; white-space: nowrap; /* ラベルの折り返しを禁止 */ } /* Player ID Box */ .player-id-box { display: flex; gap: 6px; margin: 0; /* setting-rowで制御するためリセット */ align-items: center; flex-grow: 1; /* 残りの幅をすべて使用 */ } .player-id-display { flex-grow: 1; padding: 6px 8px; font-size: 11px; font-family: var(--font-mono); background: #0d1117; color: #8b949e; border: 1px solid #30363d; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #copyPlayerIdBtn, #importPlayerIdBtn { flex-shrink: 0; } #importPlayerIdBtn { background: rgba(76, 175, 80, 0.1) !important; border-color: rgba(76, 175, 80, 0.5) !important; } /* 設定画面の説明文 */ .setting-description { font-size: 11px; color: #8b949e; margin-top: 8px; /* 狭く */ line-height: 1.5; text-align: left; background: rgba(13, 17, 23, 0.5); padding: 8px 12px; border-radius: 6px; border: 1px solid #30363d; } /* Responsive adjustments for smaller screens */ @container (max-width: 768px) { .settings-grid { grid-template-columns: 1fr; /* Single column on smaller screens */ } #settings fieldset { margin-bottom: 10px; /* Slightly less margin for single column */ } .keybind-row { flex-direction: column; /* Stack keybind labels and controls vertically */ gap: 10px; } .keybind-labels { text-align: center; /* Center align labels when stacked */ } .keybind-controls select { min-width: 150px; /* Wider select on small screens */ } .data-btn-row button { flex-grow: 1; /* Allow buttons to grow */ } } /* ===================================================== 記録画面 全体 ===================================================== */ #records { position: fixed; inset: 0; overflow-y: auto; /* z-index: 10550; */ /* → 画面階層セクションへ移動 */ font-family: var(--font-ja); color: #d1d5db; background: #05080a; /* bodyの背景色に合わせる */ background-image: linear-gradient(rgba(18, 25, 33, 0.6), rgba(5, 8, 10, 0.7)), repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0px, rgba(0, 0, 0, 0.15) 1px, transparent 1px, transparent 2px); padding: 20px; } /* RECORDS の×（右上）はコンテンツをスクロールしても 見失わないように fixed で画面右上へ固定する。 top/right は #records の padding(20px) + 8px で位置を揃えている。 ※装飾はなくし、シンプルな×のみ。余白は 0 にして top/right を そのまま効かせる（SETTING の×と同じ見た目）。 */ #records #recordsBackBtn { position: fixed; top: 28px; right: 28px; z-index: 20; margin: 0; padding: 0; } /* 全体幅 */ #records-container { max-width: 1000px; margin: 0 auto; } /* records-top は block 的に使う（flex崩れ防止） */ #records-top { width: 100%; } /* ===================================================== 記録画面 ヘッダー ===================================================== */ #records-header { text-align: center; margin-bottom: 14px; } #records-header h2 { font-size: clamp(1.6rem, 4vw, 2rem); /* ★SETTING/MUSIC/オンラインと統一 */ font-weight: 900; color: #668ebc; /* サイバーブルー */ text-shadow: 0 0 10px rgba(95, 153, 219, 0.446); /* サイバーブルーのシャドウ */ margin-bottom: 15px; } /* モードボタン中央 */ #records-controls { display: flex; justify-content: center; /* 中央寄せ */ gap: 8px; /* ボタン間の隙間 */ margin-bottom: 18px; /* 下に余白 */ } /* モードボタン */ #records .mode-buttons button { background: rgba(88, 166, 255, 0.1); /* 青系の背景 */ border: 1px solid rgba(88, 166, 255, 0.4); /* 青系のボーダー */ color: #f0f6fc; /* 明るいテキスト */ font-weight: 600; padding: 6px 14px; transition: 0.15s; cursor: pointer; border-radius: 8px; /* 角丸 */ } #records .mode-buttons button:hover, #records .mode-buttons button:focus { background: rgba(88, 166, 255, 0.2); /* ホバーで少し明るく */ color: #fff; border-color: #72acee; outline: none; } #records .mode-buttons button.active { background: #579eef; /* アクティブは強調 */ color: #0d1117; /* 暗いテキスト */ border-color: #6ca8ed; box-shadow: 0 0 10px rgba(88, 166, 255, 0.6); /* アクティブなシャドウ */ } /* ===================================================== 記録画面 サマリーカード ===================================================== */ #recordsSummary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* 最小幅を少し狭く */ gap: 12px; margin-bottom: 18px; width: 100%; } .summary-card { background: rgba(13, 17, 23, 0.8); /* 少し透明度を上げる */ border: 1px solid rgba(88, 166, 255, 0.2); /* 全体を囲むボーダーに変更 */ border-top: 3px solid #7a9ec8; /* 上部にアクセントライン */ padding: 12px 16px; /* パディングを少し減らす */ text-align: center; border-radius: 8px; /* 角丸を少し小さく */ } .summary-label { font-size: 0.75rem; /* 少し小さく */ color: #8b949e; /* リザルトラベルと統一 */ margin-bottom: 4px; /* 間隔を詰める */ text-transform: uppercase; /* 大文字に */ } .summary-value { font-size: 1.4rem; font-weight: 700; color: #f0f6fc; /* HUDの数値と統一 */ } /* ===================================================== 記録画面 メインエリア（縦並び） ===================================================== */ #records-main { display: flex; flex-direction: column; gap: 18px; width: 100%; } /* 共通カード */ .records-section { width: 100%; box-sizing: border-box; background: rgba(13, 17, 23, 0.92); /* メニューカードと統一 */ border: 1px solid rgba(88, 166, 255, 0.3); /* サイバーブルーのボーダー */ border-radius: 12px; /* 角丸 */ padding: 18px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(88, 166, 255, 0.05); /* シャドウ */ } .records-section h3 { margin-top: 0; margin-bottom: 12px; color: #83abd9; /* デイリー統計セクションと統一 */ text-transform: uppercase; } /* ===================================================== 記録画面 グラフ ===================================================== */ #records-left { width: 100%; } #bestScoreGraph { min-height: 420px; width: 100%; background: rgba(0, 0, 0, 0.3); /* 少し透明な黒 */ border-radius: 12px; /* 角丸 */ border: 1px solid rgba(88, 166, 255, 0.2); /* 青系のボーダー */ box-shadow: none; } /* ===================================================== 記録画面 ランキング ===================================================== */ #records-ranking { width: 100%; } #ranking { background: rgba(13, 17, 23, 0.92); /* メニューカードと統一 */ padding: 14px; border: 1px solid rgba(88, 166, 255, 0.3); /* サイバーブルーのボーダー */ border-radius: 12px; /* 角丸 */ } /* ===================================================== 記録画面 履歴 ===================================================== */ #records-bottom { margin-top: 16px; } #history { max-height: 240px; overflow-y: auto; background: rgba(13, 17, 23, 0.92); /* メニューカードと統一 */ border: 1px solid rgba(88, 166, 255, 0.3); /* サイバーブルーのボーダー */ border-radius: 12px; /* 角丸 */ overflow-x: auto; } /* スクロールバーは style.css 冒頭の共通設定（黒系）に統一 */ #history table { font-size: 0.68rem; line-height: 1.15; } #history th, #history td { padding: 3px 5px; } #history table { border-collapse: separate; border-spacing: 0; } #history th { position: sticky; /* スクロールしてもヘッダーを固定 */ top: 0; /* 上部に固定 */ /* z-index: 5; */ /* → 画面階層セクションへ移動 */ background: #0d1117; /* 背景を不透明にして透過を防止 */ } /* ===================================================== 記録画面 テーブル共通 ===================================================== */ #records table { width: 100%; border-collapse: separate; /* stickyな境界線を正しく表示するために変更 */ border-spacing: 0; /* セル間の隙間をなくしてcollapse風に見せる */ background: transparent; color: #c9d1d9; } #records th { position: sticky; top: 0; /* z-index: 10; */ /* → 画面階層セクションへ移動 */ background: #11151c; /* 完全に不透明な色を指定して内容が透けないようにする */ color: #f0f6fc; /* 明るいテキスト */ padding: 8px; font-weight: 700; border-bottom: 2px solid rgba(88, 166, 255, 0.4); /* 青系のボーダー */ } #records td { padding: 8px; border-bottom: 1px solid rgba(88, 166, 255, 0.1); /* 青系のボーダー */ } #ranking th, #ranking td { padding: 3px 6px; font-size: 0.9rem; line-height: 1.2; } /* 偶数行 */ #records tr:nth-child(even) td { background: rgba(88, 166, 255, 0.01); /* より薄い青系の背景 */ } /* hover */ #records tr:hover td { background: rgba(88, 166, 255, 0.05) !important; /* ホバーで青系の背景 */ } /* ===================================================== 記録画面 下部ボタン ===================================================== */ #records-buttons { display: flex; justify-content: center; gap: 12px; margin-top: 12px; } /* 旧：戻るボタンだけ強調（グレーの角丸ボタン）。 装飾なしのシンプルな×（SETTING と統一）に変更したため無効化。 位置と余白は上の「RECORDS の×（右上）」ブロックで指定している。 #records #recordsBackBtn { margin-top: 8px; flex: none; width: auto; padding: 6px 16px !important; background: #4b5563; color: #ffffff; border: 1px solid #6b7280; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.4); font-size: 12px; transition: 0.15s; cursor: pointer; font-weight: 700; } #records #recordsBackBtn:hover { background: #5a6573; border-color: #7c8694; } */ #records-buttons button { flex: 1; max-width: 200px; padding: 10px 0; border: 1px solid rgba(88, 166, 255, 0.4); border-radius: 8px; background: rgba(88, 166, 255, 0.1); color: #f0f6fc; font-weight: 700; cursor: pointer; transition: 0.15s; } #records-buttons button:hover, #records-buttons button:focus { background: rgba(88, 166, 255, 0.2); outline: none; } .records-more-btn { flex: 1; max-width: 150px; padding: 3px 10px; border: none; border-radius: 10px; background: rgba(88, 166, 255, 0.1); /* 青系の背景 */ border: 1px solid rgba(88, 166, 255, 0.4); /* 青系のボーダー */ color: #f0f6fc; /* 明るいテキスト */ font-weight: 700; font-size: 12px; /* フォントサイズを調整 */ cursor: pointer; transition: 0.15s; box-shadow: 0 2px 8px rgba(0,0,0,0.3); /* Subtle shadow */ } /* ===================================================== 記録画面 NEWバッジ ===================================================== */ /* ランキングの順位番号を囲む */ .rank-number { display: inline-block; min-width: 30px; text-align: center; font-weight: bold; } /* ランキングの順位セル調整 */ .rank-cell { position: relative; display: flex; justify-content: center; /* 数字を中央に配置 */ align-items: center; min-width: 100px; /* バッジを左端に置いても数字が中央に留まる幅を確保 */ } /* ランキングテーブルのNEWバッジ */ .ranking-new-badge { position: absolute; left: 4px; /* セルの左端に固定 */ background-color: #f59e0b; /* result-badge.new と統一 */ color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.6em; font-weight: bold; white-space: nowrap; pointer-events: none; /* クリックを阻害しない */ animation: pulse-new 1.5s infinite; /* 点滅アニメーション */ } /* 一番最新の記録のNEWバッジ */ .ranking-new-badge.latest-record { background-color: #f85149; /* 赤系やゴールドなど、目立つ色 */ animation: pulse-latest 1.5s infinite; /* より強調した点滅 */ box-shadow: 0 0 10px rgba(248, 81, 73, 0.6); /* 赤い発光効果 */ } @keyframes pulse-latest { 0% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.1); filter: brightness(1.4); } 100% { transform: scale(1); filter: brightness(1); } } /* @keyframes pulse-new { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } } */ /* ===================================================== オンラインランキング表示 ===================================================== */ #onlineRankingScreen { text-align: center; color: #222; position: fixed; inset: 0; display: flex; flex-direction: column; height: 100%; /* ステージ（1600×900）基準 */ overflow: hidden; /* 外側はスクロールさせない */ background: #f4f6f8; } .ranking-tabs { display: flex; justify-content: center; gap: 10px; margin: 20px 0; flex-wrap: wrap; } /* タブは固定 */ .ranking-tabs { flex: 0 0 auto; } .ranking-tab { padding: 10px 18px; border: none; border-radius: 10px; background: #f3f3f3; color: #222; font-weight: 700; cursor: pointer; } .ranking-tab.active { background: #222; color: white; } #onlineRankingScreen > * { flex: 0 0 auto; /* ヘッダー・タブ・自分の順位・ボタンは縮まず確実に表示 */ } /* ここがスクロール領域（残り高さすべてを使用。 固定60vhだとウィンドウが短いときに下のBACKボタンが見切れるため） */ #rankingList { flex: 1 1 auto; min-height: 0; overflow-y: auto; width: 100%; max-width: 560px; margin: 0 auto; padding: 12px; } .rank-row { display: grid; grid-template-columns: 50px 1fr 90px; padding: 6px 10px; /* ←ここ小さく */ margin-bottom: 4px; /* ←間隔減らす */ background: rgba(255, 255, 255, 0.95); border-radius: 8px; /* 少し小さく */ box-shadow: 0 2px 6px rgba(0,0,0,0.06); font-size: 13px; /* ←ここ重要 */ font-weight: 600; } .rank-row.my-rank { background: #e0e8f6; /* 少し青みがかった背景色 */ border: 1px solid #a8c5f1; box-shadow: 0 2px 8px rgba(74, 124, 194, 0.2); } .rank-row.my-rank span { color: #1c3d6b; /* 濃い青色の文字 */ font-weight: 700; } .rank-row span { color: #222; } .rank-row span:first-child { text-align: center; font-weight: 700; color: #444; } .rank-row span:nth-child(2) { text-align: center; } .rank-row span:last-child { text-align: center; font-weight: 700; color: #111; } /* ONLINE RANKING のタイトル（サイズのみ RECORDS/SETTING/MUSIC と統一。色はライトテーマの黒のまま） */ #onlineRankingScreen h2 { font-size: clamp(1.6rem, 4vw, 2rem); font-weight: 900; color: #222; text-align: center; } /* ONLINE RANKING 右上の閉じるボタン（×）。 他モーダルの ×（.save-modal-close-btn／.quest-modal-close-btn）と統一。 #onlineRankingScreen は position: fixed なので絶対配置の基準になる。 ※オンライン画面はライトテーマのため文字色だけ濃色にしている。 */ #onlineRankingScreen .ranking-close-btn { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; cursor: pointer; border: none; background: transparent; color: #333; } #onlineRankingScreen .ranking-close-btn:hover { color: #ff9800; } /* 旧：下部BACKボタン用スタイル（#rankingBackBtn は右上×に移行済み） */ #loadMoreRanking { margin-top: 16px; padding: 12px 20px; border: none; border-radius: 10px; background: #f0f0f0; color: #222; font-weight: 700; cursor: pointer; } #onlineRankingScreen { min-height: 0; } /* style.css に追加 */ .my-online-rank { margin: 15px 0; padding: 10px; background-color: rgba(0, 0, 0, 0.2); border-radius: 4px; text-align: center; font-size: 14px; color: #232323; } .my-rank-position { font-weight: bold; color: #506f93; margin-left: 8px; } /* ===================================================== プレイヤーHUD ===================================================== */ #playerHud { position: fixed; top: 10px; right: 10px; /* メニューカードと同じデザイン */ background: rgba(13, 17, 23, 0.92); border: 1px solid rgba(88, 166, 255, 0.3); color: #f0f6fc; padding: 10px 12px; border-radius: 12px; font-size: 12px; font-family: var(--font-ui); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); width: 232px; display: none; /* 初期状態は非表示（メインメニュー表示時にJSで解除） */ transition: all 0.25s ease; } .hud-header { text-align: center; font-weight: bold; margin-bottom: 10px; letter-spacing: 1.5px; color: #82a4cb; /* メニュータイトルと同じサイバーブルー */ text-transform: uppercase; font-size: 12px; font-family: var(--font-ui); } .hud-row { display: flex; justify-content: flex-start; /* ラベルのすぐ横にランクを表示 */ align-items: center; margin-top: 6px; margin-bottom: 4px; gap: 8px; font-family: var(--font-ui); } /* ラベル（KPM等）の色を薄く */ .hud-row > span:first-child { color: #ffffff; } .hud-rank { font-size: 12px; color: #b0bdc8; /* ランクもアクセントブルーにしてタイトルと合わせる */ margin-left: 4px; /* ラベルとの隙間 */ font-family: var(--font-ui); font-weight: 600; } /* バーと数値を横に並べるコンテナ */ .hud-bar-wrap { display: flex; align-items: center; gap: 15px; /* バーの ] と数値の間の距離 */ } .hud-bar { flex: 1; position: relative; height: 10px; background: transparent; border: none; margin: 4px 8px 2px 8px; /* ブラケットのための左右余白 */ overflow: visible; } /* [ */ .hud-bar::before { content: "["; position: absolute; left: -8px; top: -3px; color: #cececece; font-size: 12px; line-height: 10px; } /* ] */ .hud-bar::after { content: "]"; position: absolute; right: -8px; top: -3px; color: #8b949e; font-size: 12px; line-height: 10px; } /* 数値表示 */ .hud-value { color: #f0f6fc; font-weight: bold; font-size: 13px; min-width: 45px; text-align: left; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .hud-bar-fill { height: 100%; width: 0%; background: #cecece; transition: width 0.3s ease; } .hud-bar { height: 4px; } .hud-bar::before, .hud-bar::after { top: -5px; font-size: 14px; } .hud-bar-fill.speed { background: #cecece; } .hud-bar-fill.acc { background: #cecece;} .hud-buttons { position: absolute; bottom: 6px; right: 6px; display: flex; gap: 4px; align-items: center; } .hud-detail-btn, #hudAchievementsBtn { width: 22px; height: 22px; font-size: 14px; border-radius: 6px; border: 1px solid #666; background: #222; color: #fff; cursor: pointer; pointer-events: auto; opacity: 0.85; display: flex; align-items: center; justify-content: center; } .hud-detail-btn:hover, #hudAchievementsBtn:hover { opacity: 1; background: #444; } /* =============================== HUD縮小ボタン ================================ */ .hud-mini-btn { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; font-size: 12px; border: none; border-radius: 4px; background: rgba(255,255,255,0.2); color: white; cursor: pointer; padding: 0; } .hud-mini-btn:hover { background: rgba(255,255,255,0.35); } /* =============================== 縮小状態 ================================ */ .hud-window.compact { height: 32px; overflow: hidden; padding: 6px 8px; } /* ヘッダーとボタン以外を非表示 */ .hud-window.compact > *:not(.hud-header):not(.hud-mini-btn) { display: none; } /* HUD非表示用 */ .hud-hidden { display: none !important; } /* =============================== デイリーステータス詳細 ================================ */ /* playerStatsModal のコンテンツ全体 */ #playerStatsModal .modal-content { padding: 20px; max-width: 900px; /* 必要に応じて調整 */ width: 90%; } /* デイリー詳細ステータスタイトル */ .stats-header { font-weight: bold; text-align: center; margin-bottom: 10px; color: #8ab6ec; text-shadow: 0 0 10px rgba(88, 166, 255, 0.3); position: relative; } /* 各統計カードを配置するグリッドコンテナ */ .daily-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 280pxを最小幅として自動調整 */ gap: 20px; /* カード間のスペース */ margin-top: 20px; } /* 各統計カテゴリのカードスタイル */ .daily-stats-card { background: rgba(13, 17, 23, 0.92); /* メニューカードと統一 */ border: 1px solid rgba(88, 166, 255, 0.3); border-radius: 12px; /* 角丸 */ padding: 15px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(88, 166, 255, 0.05); backdrop-filter: blur(5px); /* 背景のぼかし効果 */ transition: transform 0.2s ease-in-out; } .daily-stats-card:hover { border-color: rgba(123, 153, 187, 0.6); } /* 各セクションのタイトル */ .daily-stats-section { font-size: 0.9em; font-weight: 900; color: #64788f; /* サイバーブルーに統一 */ margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid rgba(88, 166, 255, 0.2); text-shadow: 0 0 8px rgba(88, 166, 255, 0.4); text-transform: uppercase; letter-spacing: 1px; } /* 各統計行 */ .daily-stats-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 5px; border-bottom: 1px dashed rgba(255, 255, 255, 0.08); /* 点線の区切り */ font-size: 0.8em; color: #c0c0c0; /* やや暗めの色 */ } .daily-stats-row:last-child { border-bottom: none; /* 最後の行は区切り線なし */ } .daily-stats-row span:first-child { font-weight: normal; color: #b7c0c9; /* リザルトのラベル色と統一 */ } .daily-stats-row span:last-child { font-weight: bold; color: #f0f6fc; /* HUDの数値色と統一 */ } /* サブカテゴリの行 */ .daily-stats-row.sub { padding-left: 1.5rem; /* インデントを少し深くして視認性を確保 */ font-size: 0.7em; } .daily-stats-row.sub span:first-child { color: #7b8892; } .daily-stats-row.sub span:last-child { color: #c9d1d9; } /* 日付表示のスタイル */ .daily-stats-row span:last-child span { font-size: 0.8em; color: #808080; margin-left: 5px; } /* =============================== グローバル音量トグルボタン ================================ */ .sound-toggle-btn { display: inline-flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px; padding: 4px 8px; color: #fff; font-size: 11px; transition: background 0.2s; white-space: nowrap; } .sound-toggle-btn:hover { background: rgba(0, 0, 0, 0.6); } .sound-toggle-btn img { width: 14px; height: 14px; object-fit: contain; } .hud-sound-ctrl { display: flex; justify-content: flex-start; margin-top: 8px; } /* メインメニュー内（タイトルカード等）の重複したサウンドトグル用クラス（あれば）のみ非表示 */ #menu .sound-toggle-btn { display: none !important; } /* エネミーモード専用サウンドトグル（スコアの上） */ .enemy-sound-toggle { position: absolute; top: 8px; right: 12px; /* z-index: 1100; */ /* → 画面階層セクションへ移動 */ padding: 2px 6px; font-size: 10px; gap: 4px; background: rgba(0, 0, 0, 0.25); border-radius: 4px; } .enemy-sound-toggle img { width: 12px; height: 12px; } /* フルスクリーン切替ボタン（サウンドトグルの左隣に配置） */ .fs-toggle-btn { right: 118px; cursor: pointer; color: #e4e4e4; letter-spacing: 0.5px; /*