html, body { margin: 0; padding: 0; overflow: hidden; width: 100%; height: 100%; background-color: #121212; touch-action: none; }
canvas { position: fixed; top: 0; left: 0; image-rendering: pixelated; image-rendering: crisp-edges; }
.floating-panel { position: fixed; top: 20px; left: 20px; background-color: rgba(42, 42, 42, 0.9); border: 1px solid #444; border-radius: 12px; padding: 15px 25px; color: #e0e0e0; font-family: sans-serif; z-index: 10; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px); }
.controls { display: flex; align-items: center; gap: 15px; margin-bottom: 10px; }
#instructions { margin-top: 10px; }
#instructions p { margin: 4px 0; color: #aaa; font-size: 0.9em; }
#palette-wrapper { display: flex; align-items: center; gap: 8px; border-right: 1px solid #555; padding-right: 15px; }
#recent-colors-container { display: flex; gap: 8px; }
#palette-popout-container { position: relative; }
.color-swatch { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 2px solid #777; transition: transform 0.1s ease-in-out, border-color 0.1s ease-in-out; }
.color-swatch:hover { transform: scale(1.1); }
.color-swatch.selected { border-color: #ffffff; transform: scale(1.15); }
#popout-trigger { display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: bold; background-color: #333; }
#popout-panel { display: none; position: absolute; top: 38px; left: 0; background-color: #2a2a2a; border: 1px solid #444; border-radius: 8px; padding: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.4); grid-template-columns: repeat(8, 1fr); gap: 8px; }
#popout-panel.visible { display: grid; }
button { padding: 5px 10px; border-radius: 5px; border: 1px solid #555; background-color: #444; color: #e0e0e0; cursor: pointer; }
button:hover:not(:disabled) { background-color: #555; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
#paintButton:not(:disabled) { background-color: #3a75c4; border-color: #5890e0; }
#pixel-progress-container { margin-top: 15px; padding-top: 10px; border-top: 1px solid #444; }
#pixel-progress-bar { position: relative; width: 100%; height: 20px; background-color: #222; border: 1px solid #555; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
#pixel-progress-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background-color: #3a75c4; border-radius: 10px; transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1); }
#pixel-progress-text { position: relative; z-index: 2; color: #fff; font-size: 0.8em; font-weight: bold; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); }