body { font-family: sans-serif; background: #000; margin: 0; padding: 0; text-align: center; color: white; font-size: 14px; } html { touch-action: manipulation; } #scoreBoard div { margin: 2px 0; } #startButton { padding: 6px 12px; background: #333; color: white; border: 1px solid #777; border-radius: 4px; cursor: pointer; } #resetButton { padding: 4px 6px; background: #e99e9e; color: rgb(43, 43, 43); border: 1px solid #ff1919; font-weight: bold; border-radius: 4px; cursor: pointer; } #header { width: 634px; margin: 10px auto 4px auto; padding: 4px; background: rgba(129, 243, 94, 0.3); color: white; border: 3px solid #41ee5e; border-radius: 6px; display: flex; justify-content: space-around; align-items: center; font-size: 14px; } #game-board { display: grid; grid-template-columns: repeat(12, 48px); grid-template-rows: repeat(13, 48px); gap: 4px; justify-content: center; margin: 6px auto 30px auto; width: 616px; padding: 10px; border: 6px solid #00aaff; border-radius: 12px; background-color: #000; box-shadow: 0 0 10px #00aaff50; } .wrapper { justify-content: center; align-items: center; height: 100vh; } .cell { width: 48px; height: 48px; background: #222; border-radius: 4px; overflow: hidden; } .cell img { width: 100%; height: 100%; object-fit: cover; cursor: grab; } #startHint { position: absolute; top: 54%; left: 50%; width: 370px; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.6); padding: 6px 6px; border-radius: 20px; font-size: 14px; text-align: left; white-space: pre-line; line-height: 1.2; z-index: 1000; } #result { position: absolute; top: 40%; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.8); color: white; padding: 20px; border-radius: 10px; font-size: 18px; text-align: center; display: none; z-index: 1000; white-space: pre-line; cursor: pointer; display: none; } #startButton:disabled { opacity: 0.5; cursor: not-allowed; } #startButton.active { animation: pulse 1s infinite; } #resetButton:disabled { opacity: 0.5; cursor: not-allowed; } #resetButton.active { animation: pulse 1s infinite; } #timer.blink { animation: blinkRed 1s infinite; } @keyframes blinkRed { 0% { color: red; } 50% { color: white; } 100% { color: red; } } #soundToggle { padding: 5px 10px; background: #251e8b; color: rgb(248, 248, 248); border: 1px solid #133602; border-radius: 6px; font-weight: bold; cursor: pointer; } @keyframes explode { 0% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(1.5) rotate(180deg); opacity: 0.5; } 100% { transform: scale(0) rotate(360deg); opacity: 0; } } .explode { animation: explode 0.6s forwards; } @keyframes reappear { 0% { opacity: 0; transform: scale(0.5) rotate(-30deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } } #victoryMessage.hidden, #result.hidden { display: none !important; } #result:empty { display: none; } #victoryMessage { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 255, 127, 0.8); color: black; padding: 20px; border-radius: 12px; font-size: 20px; font-weight: bold; text-align: center; display: none; z-index: 1000; cursor: pointer; } .cell img { max-width: 100%; max-height: 100%; width: 100%; height: auto; object-fit: contain; touch-action: none; } .dragging { width: 48px !important; height: 48px !important; object-fit: contain; } #timer { font-size: 16px; font-weight: bold; } #countdown { font-size: 14px; color: rgb(207, 207, 207); font-weight: bold; } @keyframes blink-twice { 0%   { opacity: 1; } 25%  { opacity: 0; } 50%  { opacity: 1; } 75%  { opacity: 0; } 100% { opacity: 1; } } .blink-twice { animation: blink-twice 1s step-start 2; }