body { margin: 0; background: url("img/dice_back.png") center center / cover no-repeat fixed; text-align: center; font-family: sans-serif; } #startTitle { margin: 10px auto 0; color: #dfbdff; font-size: 32px; font-weight: bold; text-align: center; text-shadow: 0 0 8px rgba(37, 37, 37, 0.911); } #game-area { position: relative; margin: 6px auto; width: 600px; height: 400px; border-radius: 22px; overflow: hidden; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18), 0 2px 5px rgba(0, 0, 0, 0.18); } #game-area::before { content: ""; position: absolute; inset: 0; padding: 4px; background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #c77dff, #ff6b6b) 0% 50% / 300% 300%; animation: borderMove 5s linear infinite; border-radius: 22px; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; z-index: 20; } @keyframes borderMove { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } #diceCanvas { display: block; width: 600px; height: 400px; border-radius: 19px; } #dice-controls { position: absolute; top: 15px; left: 40px; z-index: 10; text-align: left; } .control-row { display: flex; align-items: center; gap: 15px; } #rollBtn { width: 200px; padding: 10px 20px; font-size: 1rem; text-align: center; color: #fff; text-shadow: 1px 1px 1px #000; border: none; border-radius: 10px; background: rgb(118, 37, 250) 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); cursor: pointer; } #rollBtn:hover { background: #add8fc; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } #rollBtn:active { transform: translateY(2px); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); } #rollBtn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; } #result { width: 120px; padding: 10px 20px; font-size: 1rem; text-align: left; color: #fff; text-shadow: 1px 1px 1px #000; border-radius: 10px; background: rgb(40, 94, 9) 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); box-sizing: border-box; } .guess-row { display: flex; align-items: center; gap: 8px; color: #8d6417; text-shadow: 0 0 4px rgba(204, 204, 204, 0.911); margin-top: 10px; font-weight: bold; font-size: 18px; } #targetNumber { width: 80px; height: 30px; padding: 2px 6px; box-sizing: border-box; font-size: 16px; text-align: center; border: 2px solid #cf2172; border-radius: 6px; background: #fff; } #judgement { margin-left: 8px; font-size: 18px; font-weight: bold; min-width: 80px; } #judgement.hit { color: red; animation: hitBlink 0.5s infinite; } #judgement.miss { color: blue; animation: none; } @keyframes hitBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } } @media screen and (max-width: 650px) { #game-area { width: calc(100vw - 20px); height: auto; aspect-ratio: 3 / 2; margin: 15px auto; border-radius: 18px; } #diceCanvas { width: 100%; height: 100%; border-radius: 15px; } #dice-controls { top: 12px; left: 20px; } .control-row { gap: 10px; } .guess-row { gap: 6px; margin-top: 8px; font-size: 14px; } #rollBtn { padding: 8px 14px; font-size: 15px; } #result { min-width: 80px; padding: 6px 9px; font-size: 17px; } #targetNumber { width: 60px; height: 30px; font-size: 16px; } #judgement { font-size: 17px; min-width: 70px; } } @media screen and (max-width: 480px) { body { overflow-x: hidden; } #game-area { width: calc(100vw - 10px); margin: 8px auto; border-width: 2px; border-radius: 15px; } #diceCanvas { border-radius: 13px; } #dice-controls { top: 8px; left: 10px; } .control-row { gap: 7px; } #rollBtn { padding: 7px 10px; font-size: 13px; border-radius: 8px; min-height: 38px; } #result { min-width: 75px; padding: 5px 7px; font-size: 15px; border-radius: 7px; } .guess-row { gap: 5px; margin-top: 7px; font-size: 12px; white-space: nowrap; } #targetNumber { width: 50px; height: 32px; padding: 2px; font-size: 16px; border-radius: 6px; } #judgement { margin-left: 3px; font-size: 15px; min-width: 55px; } }