:root{--bg: #0a0a0f;--fg: #e0e0e0;--card: #12121a;--muted: #1c1c2e;--muted-fg: #6b7280;--accent: #00ff88;--accent-secondary: #ff00ff;--accent-tertiary: #00d4ff;--border: #2a2a3a;--destructive: #ff3366;--font-heading: "Orbitron", monospace;--font-body: "JetBrains Mono", monospace;--glow-sm: 0 0 3px var(--accent), 0 0 6px rgba(0, 255, 136, .3);--glow: 0 0 5px var(--accent), 0 0 10px rgba(0, 255, 136, .4);--glow-lg: 0 0 10px var(--accent), 0 0 20px rgba(0, 255, 136, .6), 0 0 40px rgba(0, 255, 136, .3);--glow-secondary: 0 0 5px var(--accent-secondary), 0 0 20px rgba(255, 0, 255, .6)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--fg);font-family:var(--font-body);min-height:100vh;overflow:hidden;position:relative}h1,h2,h3{font-family:var(--font-heading);text-transform:uppercase;letter-spacing:.1em;color:var(--accent);text-shadow:var(--glow)}h1{font-size:clamp(2rem,5vw,4rem);font-weight:900}h2{font-size:clamp(1.5rem,3vw,2.5rem);font-weight:700}h3{font-size:1.25rem;font-weight:600}.screen{display:none;width:100vw;height:100vh}.screen:not(.hidden){display:flex}.hidden{display:none!important}button{font-family:var(--font-body);font-size:.875rem;text-transform:uppercase;letter-spacing:.15em;background:transparent;color:var(--accent);border:2px solid var(--accent);padding:.75rem 1.5rem;cursor:pointer;transition:all .15s ease;position:relative}button:before{content:"";position:absolute;inset:0;background:var(--accent);opacity:0;transition:opacity .15s ease;z-index:-1}button:hover{color:var(--bg);box-shadow:var(--glow)}button:hover:before{opacity:1}button:focus-visible{outline:none;box-shadow:var(--glow-lg)}#upload-screen{flex-direction:column;align-items:center;justify-content:center;gap:2rem;padding:2rem}#upload-zone{border:2px dashed var(--border);background:var(--card);padding:3rem 4rem;text-align:center;cursor:pointer;transition:all .2s ease;max-width:500px;width:100%}#upload-zone:hover{border-color:var(--accent);box-shadow:var(--glow-sm)}#upload-zone.drag-over{border-color:var(--accent);background:#00ff880d;box-shadow:var(--glow)}#upload-zone p{color:var(--muted-fg)}#upload-zone img{max-width:200px;max-height:150px;object-fit:contain;margin-top:1rem;border:1px solid var(--border)}#file-input{display:none}#difficulty-selector{text-align:center}#difficulty-selector p{color:var(--muted-fg);margin-bottom:1rem;text-transform:uppercase;letter-spacing:.1em;font-size:.875rem}#difficulty-buttons{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-bottom:1rem}#difficulty-buttons button{min-width:60px;padding:.5rem 1rem}#difficulty-buttons button.selected{background:var(--accent);color:var(--bg);box-shadow:var(--glow)}#difficulty-buttons button.selected:before{opacity:1}#start-btn{margin-top:1rem;padding:1rem 3rem;font-size:1rem;font-weight:600}#error-message{color:var(--destructive);background:#ff33661a;border:1px solid var(--destructive);padding:1rem 1.5rem;text-align:center;max-width:400px}#loading{display:flex;flex-direction:column;align-items:center;gap:1rem;color:var(--accent)}.spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#image-history{margin-top:2rem;text-align:center;max-width:600px;width:100%}#image-history h3{margin-bottom:1rem;color:var(--muted-fg);font-size:.75rem;text-shadow:none}#image-history.hidden,#image-history:empty{display:none}#history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:.75rem}#history-grid:empty{display:none}.history-item{position:relative;aspect-ratio:1;overflow:hidden;cursor:pointer;transition:all .2s ease;background:var(--card);border:1px solid var(--border)}.history-item:hover{border-color:var(--accent);box-shadow:var(--glow-sm);transform:translateY(-2px)}.history-item img{width:100%;height:100%;object-fit:cover}.history-item .delete-btn{position:absolute;top:4px;right:4px;width:20px;height:20px;padding:0;min-width:unset;font-size:12px;background:#000c;color:var(--destructive);border:1px solid var(--destructive);opacity:0;transition:opacity .2s}.history-item:hover .delete-btn{opacity:1}.history-item .delete-btn:hover{background:var(--destructive);color:var(--bg)}#game-screen{position:relative}#puzzle-canvas{width:100%;height:100%;background:var(--bg)}#sidebar{position:fixed;left:0;top:0;height:100vh;width:220px;background:var(--card);border-right:1px solid var(--border);transform:translate(-200px);transition:transform .3s ease;z-index:100}#sidebar:hover{transform:translate(0);box-shadow:var(--glow-sm);border-color:var(--accent)}#sidebar:before{content:"";position:absolute;top:0;right:-30px;width:30px;height:100%}#sidebar-toggle{display:none;position:fixed;top:1rem;left:1rem;width:44px;height:44px;background:var(--card);border:1px solid var(--border);color:var(--accent);font-size:1.5rem;z-index:101;padding:0;align-items:center;justify-content:center}#sidebar-toggle:hover{border-color:var(--accent);box-shadow:var(--glow-sm)}@media(hover:none)and (pointer:coarse){#sidebar-toggle{display:flex}#sidebar,#sidebar:hover{transform:translate(-220px)}#sidebar.open{transform:translate(0)}}.sidebar-content{padding:1.5rem;display:flex;flex-direction:column;gap:1rem}#timer{font-family:var(--font-heading);font-size:1.5rem;text-align:center;color:var(--accent);text-shadow:var(--glow);padding:.5rem;border:1px solid var(--border);background:var(--bg)}.controls{display:flex;gap:.5rem;justify-content:center}.controls button{padding:.5rem;min-width:40px}.bg-picker{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border:2px solid var(--border);background:var(--bg);cursor:pointer;transition:all .15s ease}.bg-picker:hover{border-color:var(--accent);box-shadow:var(--glow-sm)}.bg-picker label{font-family:var(--font-body);font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:var(--accent);cursor:pointer}.bg-picker input[type=color]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:24px;height:24px;border:2px solid var(--accent);background:transparent;cursor:pointer;padding:0}.bg-picker input[type=color]::-webkit-color-swatch-wrapper{padding:0}.bg-picker input[type=color]::-webkit-color-swatch{border:none}.bg-picker input[type=color]::-moz-color-swatch{border:none}#image-preview{position:fixed;inset:0;background:#0a0a0ff2;display:flex;align-items:center;justify-content:center;z-index:200;cursor:pointer}#image-preview img{max-width:90vw;max-height:90vh;object-fit:contain;border:2px solid var(--accent);box-shadow:var(--glow-lg)}#completion-screen{position:fixed;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:2rem;background:#0a0a0ff2;z-index:1000}.completion-content{background:var(--card);border:1px solid var(--accent);padding:3rem 4rem;text-align:center;box-shadow:var(--glow);position:relative}.completion-content:before,.completion-content:after{content:"";position:absolute;width:20px;height:20px;border:2px solid var(--accent)}.completion-content:before{top:-1px;left:-1px;border-right:none;border-bottom:none}.completion-content:after{bottom:-1px;right:-1px;border-left:none;border-top:none}.completion-content h1{font-size:2rem;margin-bottom:1.5rem;animation:glitch 3s infinite}.completion-content p{font-size:1.25rem;color:var(--fg);margin:.5rem 0}.completion-buttons{display:flex;gap:1rem;margin-top:2rem;flex-wrap:wrap;justify-content:center}@keyframes glitch{0%,90%,to{transform:translate(0);text-shadow:var(--glow)}92%{transform:translate(-2px,1px);text-shadow:-2px 0 var(--accent-secondary),2px 0 var(--accent-tertiary)}94%{transform:translate(2px,-1px);text-shadow:2px 0 var(--accent-secondary),-2px 0 var(--accent-tertiary)}96%{transform:translate(-1px,-1px)}98%{transform:translate(1px,1px);text-shadow:-1px 0 var(--accent-tertiary),1px 0 var(--accent-secondary)}}