* { box-sizing: border-box; } body { margin: 0; padding: 16px; background: #818080; color: #ececf3; text-shadow: 0 0 2px rgba(11, 12, 14, 0.966); font-family: sans-serif; } .game { max-width: 940px; margin: auto; text-align: center; } h1 { font-size: 26px; color: #a5fcff; text-shadow: 0 0 2px rgba(11, 12, 14, 0.966); margin: 10px 0 18px; } .status { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px; margin-bottom: 14px; color: rgb(9, 51, 94); font-size: 20px; font-weight: bold; background: rgb(221, 255, 207); border-radius: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.6); } #timer, #message { white-space: nowrap; } #timer { margin: 4px; color: #d22; font-size: 34px; font-weight: bold; text-shadow: 0 0 2px rgba(0, 0, 0, 0.945); font-variant-numeric: tabular-nums; } #message { min-height: 24px; margin-top: 8px; } .buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 18px; } button { padding: 11px 15px; border: 0; border-radius: 7px; background: #043e80; color: rgb(255, 246, 246); font-size: 15px; cursor: pointer; } #soundBtn{background: #caf16dea; color: rgb(3, 3, 3); font-size: 15px; cursor: pointer; } button:disabled { background: #aaa; cursor: default; } #resetBtn { color: rgb(246, 255, 247); background: #770581; } #pauseBtn { color: rgb(246, 255, 247); background: #744905; } #resumeBtn { color: rgb(246, 255, 247); background: #003a1c; } #chooseImageFolderBtn { color: rgb(246, 255, 247); background: #29003a; } #registerImageBtn { color: rgb(246, 255, 247); background: #061f01; } .delete-image-button { padding: 4px 8px; color: rgb(246, 255, 247); background: #790101; } #preview { padding: 12px; background: linear-gradient(180deg, #2925ff, #b8beee); box-shadow: 0 0 12px rgba(0, 0, 0, 0.6); border-radius: 10px; } #preview img { display: block; width: 100%; height: auto; max-width: 768px; margin: auto; } #preview p { margin-bottom: 0; color: #0a0909; } #puzzle { display: block; width: 100%; height: auto; margin: auto; background: #cbebb7; border: 2px solid #7c8794; border-radius: 5px; touch-action: none; user-select: none; } #puzzle[hidden], #preview[hidden], #result[hidden] { display: none; } #result { padding: 24px 12px; margin-top: 16px; border-radius: 12px; color: rgb(9, 46, 146); background: rgb(253, 175, 247); font-size: 25px; font-weight: bold; } @media (max-width: 600px) { body { padding: 8px; } h1 { font-size: 22px; } button { padding: 10px; font-size: 13px; } #timer { font-size: 30px; } } #imageSelector { margin: 12px 0; } #imageButtons { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; } .image-choice { padding: 8px 14px; border: 1px solid #06a8ad; border-radius: 6px; background: #250966; cursor: pointer; } .image-choice.active { background: #34cf05; color: rgb(8, 7, 7); border: 2px solid #062704; } #imageFileInput { margin: 8px 0; max-width: 100%; } [hidden] { display: none !important; } #preview { margin: 10px auto; text-align: center; } #preview img { display: block; max-width: 100%; height: auto; margin: 0 auto; } #puzzle { max-width: 100%; height: auto; } .upload-button { display: inline-block; padding: 10px 20px; margin: 8px 0; background: #362402; color: rgb(255, 251, 11); border-radius: 6px; cursor: pointer; font-size: 14px; text-align: center; } .upload-button:hover { background: #357abd; } .delete-confirm { margin: 12px 0; padding: 16px; border: 1px solid #ccc; border-radius: 8px; background: #414141; } .delete-confirm p { margin: 0 0 12px; } .delete-confirm button { margin-right: 8px; padding: 7px 16px; cursor: pointer; } #confirmDeleteBtn { background: #d9534f; color: rgb(255, 254, 243); border: none; border-radius: 4px; } #cancelDeleteBtn { border: 1px solid #248aff; border-radius: 4px; color: rgb(241, 241, 241); background: rgb(20, 3, 83); }