body { padding-top: 20px; font-family: sans-serif; background-color: #333232; text-align: center; } #board { width: 364px; height: 492px; margin: 0 auto; background-color: rgba(0, 0, 0, 0.95); border: 2px solid #ccc; overflow: hidden; display: flex; flex-direction: column; box-sizing: border-box; } #board-header { padding: 16px; background-color: rgba(22, 53, 7, 0.95); border-bottom: 1px solid #ccc; display: flex; flex-wrap: wrap; justify-content: space-between; } #tile-area { position: relative; flex: 1; width: 360px; height: 360px; margin: 0 auto; } #timer, #challenge-timer { font-size: 18px; font-weight: bold; color: #f0f0f0; } #toggle-sound { padding: 2px 14px; font-size: 14px; font-weight: bold; color: #ffe5f6; background: linear-gradient(145deg, #271c58, #0a0a0a); border: 2px solid #27c013; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); } #start { padding: 2px 14px; font-size: 20px; font-weight: bold; color: #fffb19; background: linear-gradient(145deg, #271c58, #0a0a0a); border: 2px solid #27c013; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); } #start:hover { background: linear-gradient(145deg, #333, #555); box-shadow: 0 0 15px rgba(255, 0, 0, 0.4); transform: scale(1.05); } #start:disabled { background: #555; color: #aaa; border-color: #666; cursor: not-allowed; box-shadow: none; } #start.pulsing { animation: pulse 1.5s ease-in-out infinite; } #reset { padding: 4px 10px; font-size: 14px; font-weight: bold; color: #eee; background: linear-gradient(145deg, #444, #222); border: 2px solid #666; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 0 8px rgba(255, 255, 255, 0.05); } #reset:hover { background: linear-gradient(145deg, #555, #333); box-shadow: 0 0 12px rgba(0, 255, 255, 0.3); transform: scale(1.03); } #reset:disabled { background: #333; color: #888; border-color: #444; cursor: not-allowed; box-shadow: none; } #message { width: 100%; height: 1.5em; /* ← 固定高さを指定 */ margin-top: 4px; font-size: 18px; color: #f590ec; font-weight: bold; overflow: hidden; } @keyframes yellow-blink { 0%   { color: yellow; } 50%  { color: orange; } 100% { color: yellow; } } .blink-yellow { animation: yellow-blink 0.5s ease-in-out 12; font-weight: bold; } #control-panel { position: relative; top: 10px; left: 50%; transform: translateX(-50%); background-color: rgba(255, 255, 255, 0.95); padding: 10px 20px; border-radius: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; gap: 10px; } .tile { position: absolute; width: 60px; height: 60px; transition: left 0.2s, top 0.2s; cursor: grab; touch-action: none; } .top-row { display: flex; gap: 20px; align-items: center; } @keyframes explode { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(0.5); opacity: 0; } } .tile.exploding { animation: explode 1s ease-out forwards; } #game-over { position: absolute; top: 340px; left: 50%; transform: translate(-50%, -50%); font-size: 38px; font-weight: bold; color: red; white-space: nowrap; text-align: center; opacity: 0; transition: opacity 1s ease-in; pointer-events: none; z-index: 2; } .tile.exploding { animation: explode 1s ease-out forwards; } @keyframes blink-red { 0% { color: red; } 50% { color: transparent; } 100% { color: red; } } #timer.blinking { animation: blink-red 1s infinite; font-weight: bold; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } } #start.pulsing { animation: pulse 1.5s ease-in-out infinite; } @keyframes tilePlaced { 0% { transform: scale(1); box-shadow: 0 0 0px rgba(255, 255, 255, 0); } 50% { transform: scale(1.1); box-shadow: 0 0 20px rgba(0, 255, 0, 0.6); } 100% { transform: scale(1); box-shadow: 0 0 0px rgba(255, 255, 255, 0); } } .tile.placed { animation: tilePlaced 0.4s ease-out; } @keyframes tilePlaced { 0% { transform: scale(1); box-shadow: 0 0 0px rgba(255,255,255,0); } 50% { transform: scale(1.1); box-shadow: 0 0 20px rgba(0,255,0,0.6); } 100% { transform: scale(1); box-shadow: 0 0 0px rgba(255,255,255,0); } } #win-effect { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* ✅ 中央揃え */ display: none; z-index: 1000; pointer-events: none; display: flex; align-items: center; justify-content: center; } #win-image { width: 180px; height: auto; opacity: 0; transform: scale(0.5) rotate(0deg); transition: opacity 1s ease-in, transform 1s ease-out; } @keyframes win-appear { 0% { opacity: 0; transform: scale(0.5) rotate(0deg); } 100% { opacity: 1; transform: scale(1.5) rotate(360deg); } } @keyframes win-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }