/* ========================================== * 1. BASE & RESET (基本設定・リセット) * ========================================== */ /*body{}: htmlファイルのすべてのタグが付いているコンテナに対する設定を決める bodyタグが付いてるコンテナの中にあるcanvasにはこの設定は適用されない*/ body { /*背景を濃いグレー（ほぼ黒）にする*/ background-color: #333; /*自分の子（今回はcanvas）を画面の中央に配置するという命令*/ display: flex; flex-direction: column; /* 縦に並べる設定に変更 */ justify-content: center; align-items: center; /* 画面の高さいっぱい（100%）を基準にする */ /* 100vh だとバーの下に潜り込むので、100svh (Small Viewport Height) に変える */ height: 100vh; /* 古いブラウザ用 */ height: 100svh; /* 新しいブラウザ用（バーを除いた実際の表示領域に合わせる） */ /* ブラウザが勝手に作る余計な隙間をゼロにする */ margin: 0; /* 文字の色を白にして、読みやすいフォント（ゴシック体など）にする */ color: white; font-family: sans-serif; overflow: hidden; /* 画面からはみ出した部分を切り捨てる（スクロールバーを消す） */ touch-action: none; /* スマホ特有のスワイプ操作（「戻る」や「更新」）を無効化する */ /* iPhone横持ち時の「ノッチ（黒い部分）」やホームバーを避ける設定 */ padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); /* 下の細いバー対策 */ box-sizing: border-box; /* パディングを含めてサイズ計算する */ } /* canvas{}: htmlファイルの中のすべてのcanvasタグが付いている部品に対して一括で設定を行う */ canvas { /* 背景色を黒にする */ background-color: #000; /* 太さ4pxの，実線（solid）で，グレー（#555）の枠線を引く */ border: 4px solid #555; /* 部品の周りに「影」をつける */ box-shadow: 0 0 20px rgba(0,0,0,0.5); display: block; /* 隙間対策 */ max-width: 100%; /* 親の幅を超えない */ max-height: 100%; /* 親の高さを超えない */ object-fit: contain; /* 縦横比を維持したまま、枠内に収める */ box-sizing: border-box;/* 枠線の太さ(4px)を含めてサイズ計算する（これがないと少しズレる） */ } /* ========================================== * 2. COMMON COMPONENTS (共通UI部品・ボタン) * ========================================== */ /* 非表示にするためのクラス */ .hidden { display: none; } /* 追記：overlay（画面）であり、かつ hidden（隠す）状態の時のルール */ /* これを書くことで !important を使わずにロビー画面の重なりを防ぎます */ .overlay.hidden { display: none; } /* .（ドット）で始まる名前は，HTMLの class="controls" と書かれた部分に適用される */ .controls { margin-top: 10px; } /* --- ボタンの基本デザイン（ホラー版） --- */ .btn { /* 背景を透明にし、内側にうっすら赤い影をつける */ background-color: rgba(20, 0, 0, 0.6); color: #cccccc; /* 文字は少し暗めのグレー */ /* 枠線を暗い赤に */ border: 1px solid #e40909; padding: 10px 20px; font-size: 16px; cursor: pointer; border-radius: 5px; /* フォントを明朝体風にするとより怖さが出ます（任意） */ font-family: 'Yu Mincho', 'Sawarabi Mincho', serif; /* 変化を滑らかにする */ transition: all 0.3s ease; /* ボタンの内側にぼんやりした赤光をいれる */ box-shadow: inset 0 0 10px rgba(74, 0, 0, 0.5); /* 文字が重ならないようにするおまじない */ text-decoration: none; display: inline-block; } /* --- マウスを乗せたとき（ホバー） --- */ .btn:hover { background-color: #4a0000; /* 背景を暗い赤に */ color: #ffffff; /* 文字を白く */ text-shadow: 0 0 8px #ff0000; /* 文字が赤く光る */ box-shadow: 0 0 15px #ff0000; /* ボタン全体が赤く光る */ } /* --- クリックしたとき --- */ .btn:active { transform: translateY(2px) scale(0.98); /* 少し凹んで小さくなる演出 */ } /* モード選択ボタンは少し大きく目立たせる */ .mode-btn { background-color: #e67e22; font-weight: bold; } .mode-btn:hover { background-color: #d35400; }