body { background: #2a2a2b; font-size: 1em; color: white; text-align: center; font-weight: bold; text-shadow: 1px 2px 3px #808080; } html { touch-action: manipulation; } canvas { background: #111; display: block; margin: 1em auto; border: 4px solid #888; border-radius: 12px; box-shadow: 0 0 20px rgba(255, 255, 255, 0.2); } #controls { position: relative; bottom: 20px; left: 50%; transform: translateX(-50%); } #slotCanvas { position: relative; display: block; margin: 0 auto; } .rowGroup { display: flex; justify-content: center; flex-wrap: wrap; } #markerLayer { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; z-index: 2; /* ⬅ Canvasより上 */ pointer-events: none; /* ⬅ ボタン操作などを遮らない */ } .uiGroup { border: 2px solid #8a5fff; border-radius: 12px; background-color: #111f27; padding: 16px; margin: 4px auto; max-width: 452px; box-shadow: 0 0 12px rgba(255, 255, 255, 0.1); gap: 12px; } .uiGroup #scoreDisplay { font-size: 1.2rem !important; } .rowGroup { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 20px; } #controls { margin: 0 auto; } #messageBox { width: fit-content; min-width: 442px;  /* canvas の横幅と合わせる */ max-width: 100%; margin: 6px auto; padding: 6px 20px; background-color: #222; border: 2px solid #287e20; border-radius: 8px; font-size: 16px; color: #fff; text-align: center; justify-content: center; box-shadow: 0 0 10px rgba(255,255,255,0.2); font-family: 'Segoe UI', sans-serif; } button { transition: all 0.3s ease; padding: 8px 6px; font-size: 1rem; border-radius: 8px; border: none; cursor: pointer; background-color: #0099cc; color: #fff; font-weight: bold; text-shadow: 1px 2px 3px #808080; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); } button:disabled { background-color: #cccccc; color: #666666; cursor: not-allowed; box-shadow: none; opacity: 0.6; } #counterDisplay{ font-size: 1.2rem; font-weight: bold; text-shadow: 1px 2px 3px #808080; } #stopBtn1, #stopBtn2, #stopBtn3, #stopBtn4{ background-color: #9dafff; color: #0c0c0c; } label[for="betInput"] { display: block; margin-bottom: 6px; font-weight: 500; font-size: 1rem; color: #f0f0f0; text-align: center; font-family: 'Segoe UI', sans-serif; letter-spacing: 0.5px; } #betInput:focus { outline: none; border-color: #00ccff; box-shadow: 0 0 8px rgba(0, 204, 255, 0.3); } .betInputWrapper { display: flex; align-items: center; gap: 6px; justify-content: center; margin: 10px 0; } .betInputWrapper button { background-color: #444; color: #fff; font-size: 1.2rem; padding: 6px 12px; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.2s; } .betInputWrapper button:hover { background-color: #666; } #betInput { width: 80px; text-align: center; font-size: 1rem; padding: 6px 8px; border: 2px solid #888; border-radius: 6px; background-color: #1a1a1a; color: #fff; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; } .labelAndInputRow { display: flex; align-items: center; justify-content: center; /* ← 中央に配置！ */ gap: 12px; } .centerWrapper { display: flex; justify-content: center; width: 100%; } #scoreDisplay { padding: px 24px; border: 2px solid #888; border-radius: 10px; background-color: #1a1a1a; color: #00ff99; font-size: 1rem; font-weight: bold; font-family: 'Segoe UI', sans-serif; box-shadow: 0 0 10px rgba(0, 255, 150, 0.2); text-align: center; } #scoreContainer { display: flex; gap: 1rem; /* 要素間の余白（調整可能） */ align-items: center; /* 垂直方向の中央揃え */ } #scoreDisplay, #highScoreDisplay { padding: 4px 20px; font-size: 1rem; font-weight: bold; background-color: #7369fc; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .scoreFlash { animation: flashScore 0.4s ease; } @keyframes flashScore { 0%   { background-color: #2affaa; color: #000; } 50%  { background-color: #1a1a1a; color: #00ff99; } 100% { background-color: #1a1a1a; color: #00ff99; } } #scoreContainer label { font-size: 1rem; white-space: nowrap; } #highScoreDisplay { border: 2px solid #888; border-radius: 8px; background-color: #1a1a1a; color: #ffc400; font-size: 1.2rem; font-weight: bold; font-family: 'Segoe UI', sans-serif; box-shadow: 0 0 10px rgba(0, 255, 150, 0.2); text-align: center; } #clearHighScoreBtn { padding: 5px 6px; font-size: 0.9rem; background-color: #ff5353; border: 1px solid #cc9999; border-radius: 6px; transition: background-color 0.3s ease; } #clearHighScoreBtn:hover { background-color: #ffcccc; color: #252525; } .guidePanel { position: fixed; top: 10%; left: 50%; transform: translate(-50%, -50%); justify-content: center; background-color: #d1d1d1; border: 2px solid #c836ec; color: #1917a3; border-radius: 10px; padding: 1.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.2); max-width: 400px; } .guideContent { position: relative; } #gameContainer { position: fixed; top: 10%; left: 50%; width: 600px; max-width: 600px; /* 必要に応じて適切な幅を指定 */ height: 800px; /* ゲーム全体の高さを管理 */ margin: 0 auto; /* 中央寄せ */ background-color: #f1f1f1; /* 背景色を設定 */ } #frameOverlay { position: absolute; top: 0; left: 0; pointer-events: none; /* クリックをスルーさせる */ z-index: 2; /* ゲーム要素の上に表示するための優先度 */ } .closeBtn { position: absolute; top: -10px; right: -10px; background-color: #f33b3b; border: none; border-radius: 10px; font-size: 1rem; font-weight: bold; width: 30px; height: 38px; cursor: pointer; } .guideList { text-align: left; display: inline-block; /* 中央揃えの影響を受けないように */ } .keyHint { font-size: 0.85rem; color: #666; margin-top: 0.5rem; } #guideBtn{ background-color: #3b990f; } #guideBtn:hover { background-color: #bcb5ff; color: #161616; }