body { font-family: 'Segoe UI', sans-serif; background-color: #207480; text-align: center; text-shadow: 1px 2px 3px #a7a7a7; } html { touch-action: manipulation; } canvas { display: block; margin: 0 auto; border-radius: 12px;         /* 角を丸くする */ box-shadow: 0 4px 12px rgba(3, 3, 3, 0.2); /* 柔らかい影 */ border: 2px solid #7246d8;      /* 枠線（任意） */ background-image: url("./images/s-brick008.gif");     /* 背景色（任意） */ } .block { width: 766px; margin: 4px auto; padding: 15px; border: 2px solid #aaa; border-radius: 8px; background-color: #e7fac9; box-shadow: 0 2px 6px rgba(20, 20, 20, 0.3); } .block2 { width: 766px; margin: 4px auto; padding: 15px; border: 2px solid #aaa; border-radius: 8px; background-color: #e7fac9; box-shadow: 0 2px 6px rgba(20, 20, 20, 0.3); } .block p { margin: 2px 0; } .block label { margin-right: 8px; } .block input { width: 100px; padding: 4px; } .block button { border: 0; line-height: 2; padding: 0 18px; font-size: 1rem; text-align: center; color: #fff; font-weight: bold; text-shadow: 1px 1px 1px #000; border-radius: 10px; background-color: rgba(43, 175, 54, 0.8); background-image: linear-gradient( to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0) ); box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6); z-index : 2; } .block button:hover { background-color: rgb(68, 68, 68); } .block2 button { border: 0; line-height: 2; padding: 0 18px; font-size: 1rem; text-align: center; color: #fff; font-weight: bold; text-shadow: 1px 1px 1px #a8a6a6; border-radius: 10px; background-color: rgb(46, 48, 190); background-image: linear-gradient( to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0) ); box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(224, 217, 217, 0.6); z-index : 2; } .block2 button:hover { background-color: rgb(34, 34, 34); } #resetBtn { border: 0; line-height: 2; padding: 0 18px; font-size: 1rem; text-align: center; color: #fff; font-weight: bold; text-shadow: 1px 1px 1px #000; border-radius: 10px; background-color: rgba(233, 22, 22, 0.8); background-image: linear-gradient( to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0) ); box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6); z-index : 2; } #resetBtn:hover { background-color: rgb(255, 41, 191); } #resultBox { margin-top: 10px; font-size: 16px; color: #444; white-space: pre-line; } #coinStatus { display: flex; justify-content: space-between; margin-top: 10px; font-weight: bold; color: #333; } .roleBlock { display: flex; align-items: center; gap: 12px; /* ボタンとテキストの間隔 */ margin-bottom: 10px; } .betBlock { display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; /* 長い語りが折り返されるように */ } .betBlock label { font-weight: bold; color: #4c0d77; } .betBlock input { width: 100px; padding: 6px; border-radius: 12px; font-size: 16px; color: #5c15df; border: 2px solid #0073e6; } .roleBlock input { width: 100px; padding: 6px; border-radius: 8px; font-size: 14px; color: #df5515; border: 2px solid #b800e6; } .betBlock button { padding: 2px 6px; } #betResult { font-size: 14px; color: #444; white-space: nowrap; } .guidePanel { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); width: 400px; background: #fff; border: 2px solid #ccc; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 100; font-family: sans-serif; } .guideContent { position: relative; padding: 20px; } .closeBtn { position: absolute; top: 8px; right: 10px; background: transparent; border: none; font-size: 20px; color: #666; cursor: pointer; } .guideList { padding-left: 20px; margin: 0; text-align: left; /* ← 左寄せ */ font-size: 14px; color: #333; } #openGuideBtn { border: 0; line-height: 2; padding: 0 18px; font-size: 1rem; text-align: center; color: #252525; text-shadow: 1px 1px 1px #dadada; border-radius: 10px; background-color: rgba(233, 255, 32, 0.8); background-image: linear-gradient( to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0) ); box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6); z-index : 2; } #openGuideBtn:hover { background-color: rgb(194, 194, 194); } #sound { border: 0; line-height: 2; padding: 0 18px; font-size: 1rem; text-align: center; color: #fff; font-weight: bold; text-shadow: 1px 1px 1px #000; border-radius: 10px; background-color: rgba(120, 17, 180, 0.8); background-image: linear-gradient( to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0) ); box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6); z-index : 2; } #sound:hover { background-color: rgb(68, 68, 68); } /* 閉じるボタン ✕ のスタイル */ .closeBtn { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; background-color: #e53935; /* 赤 */ color: #fff; border: none; border-radius: 8px; /* 角丸 */ font-size: 18px; font-weight: bold; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; } #statsBox { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; justify-content: center; } .statsItem { background: rgba(255, 255, 255, 0.1); padding: 6px 12px; border-radius: 6px; font-size: 14px; white-space: nowrap; } #statsBar { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; /* 画面が狭いときは折り返し */ margin-top: 12px; } #playerCoins { margin-right: 24px; /* ← プレイヤー表示の右に余白を追加 */ }