body { margin: 0; padding-top: 20px; font-family: sans-serif; background-color: #333232; text-align: center; } #board { position: relative; width: 600px; height: 690px; margin: 0 auto; background-color: rgba(0, 0, 0, 0.95); border: 2px solid #ccc; overflow: hidden; display: flex; flex-direction: column; touch-action: none; } #board-header { padding: 10px; background-color: rgba(22, 53, 7, 0.95); border-bottom: 1px solid #ccc; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } #tile-area { position: relative; flex: 1; width: 600px; height: 600px; overflow: hidden; } #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: #80d8f3; 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: 100px; height: 100px; 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: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 64px; font-weight: bold; color: red; white-space: nowrap; text-align: center; opacity: 0; transition: opacity 1s ease-in; pointer-events: none; z-index: 1000; display: none; flex: none; } .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); } } #tile-area { position: relative; width: 600px; height: 600px; background: #000000; } #win-effect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; align-items: center; justify-content: center; z-index: 1000; pointer-events: none; } #win-image { width: 300px; 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; } } #tile-area.blackout { background-color: #000; /* ✅ タイルエリアの背景を黒に */ transition: background-color 1s ease-in-out; } #intro-guide { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(22, 22, 22, 0.6); color: #ddebff; padding: 1.5em 2em; border: 2px solid #5ecf31; border-radius: 12px; font-size: 1em; font-weight: bold; text-align: left; z-index: 2; cursor: pointer; transition: opacity 0.5s ease; } .guide-title { text-align: center; color: #ffeb3b; /* ✅ タイトルだけ黄色などに変更 */ font-size: 1.4em; margin-bottom: 0.5em; } .guide-body { text-align: left; line-height: 1.6; }