:root{--color-espresso: #3E2723;--color-burnt-orange: #D84315;--color-cream: #FFF8E1;--color-mocha: #6D4C41;--color-caramel: #A1887F;--color-latte: #BCAAA4}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;background:linear-gradient(135deg,var(--color-caramel) 0%,var(--color-mocha) 100%);min-height:100vh;width:100vw;max-width:100%;display:flex;flex-direction:column;color:var(--color-espresso);overflow-x:visible}.game-header{width:100%;display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:#3e27234d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 10px #0003;position:sticky;top:0;z-index:100}.game-header h1{font-size:1.8rem;color:var(--color-cream);text-shadow:2px 2px 4px rgba(0,0,0,.3);margin:0;white-space:nowrap}.settings-btn-top{padding:10px 20px;font-size:1rem;font-weight:700;color:var(--color-cream);background:var(--color-mocha);border:2px solid rgba(255,255,255,.3);border-radius:50px;cursor:pointer;box-shadow:0 4px 15px #0000004d;transition:transform .2s,box-shadow .2s;white-space:nowrap}.settings-btn-top:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0006}.settings-btn-top:active{transform:translateY(0)}#app{flex:1;display:flex;flex-direction:column;align-items:center;gap:15px;padding:15px;width:100%;max-width:100%;overflow-y:auto}.player-greeting{color:var(--color-cream);font-size:1.1rem;text-shadow:1px 1px 2px rgba(0,0,0,.3);text-align:center}.game-area{position:relative;display:flex;flex-direction:column;align-items:center;gap:15px;overflow:visible}#board-canvas{display:block;border:1px solid var(--color-espresso);cursor:crosshair;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.effects-overlay{position:absolute;top:0;left:0;pointer-events:none;z-index:10}.cats-overlay{position:absolute;top:0;left:0;pointer-events:none;z-index:5}#panel-canvas{display:block;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.instructions{color:var(--color-cream);text-align:center;margin-top:10px}.instructions p{margin:5px 0}.phase-info{font-size:.9rem;opacity:.8}.combo-value.combo-active{animation:pulse .5s ease-in-out;color:var(--color-burnt-orange)}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.game-message{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--color-burnt-orange);color:var(--color-cream);padding:20px 40px;border-radius:10px;font-size:1.5rem;font-weight:700;box-shadow:0 10px 30px #00000080;animation:fadeInOut 2s ease-in-out;pointer-events:none;z-index:1000}@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}20%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.8)}}.hud{display:flex;gap:30px;justify-content:center;align-items:center;font-size:1rem;font-weight:700}.hud-item{display:flex;flex-direction:column;align-items:center;gap:5px}.hud-label{font-size:.9rem;color:var(--color-latte);text-shadow:1px 1px 2px rgba(0,0,0,.3)}.hud-value{font-size:1.5rem;color:var(--color-cream);text-shadow:2px 2px 4px rgba(0,0,0,.5)}.game-controls{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}button{padding:12px 24px;font-size:1rem;font-weight:700;color:var(--color-cream);background:var(--color-burnt-orange);border:none;border-radius:8px;cursor:pointer;transition:transform .2s}button:hover{transform:translateY(-2px);background:#e64a19}button:active{transform:translateY(0)}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.modal.hidden{display:none}.modal-content{background:var(--color-cream);padding:40px;border-radius:15px;box-shadow:0 10px 40px #00000080;text-align:center;position:relative;min-width:300px}.modal-close{position:absolute;top:10px;right:15px;background:none;border:none;font-size:2rem;color:var(--color-espresso);cursor:pointer;padding:0;width:30px;height:30px;line-height:1;transition:transform .2s}.modal-close:hover{transform:scale(1.2)}.modal-content h2{color:var(--color-espresso);margin-bottom:20px;font-size:2rem}.modal-stats{margin:20px 0}.stat-line{font-size:1.2rem;color:var(--color-mocha);margin:10px 0}.stat-line span{font-weight:700;color:var(--color-burnt-orange)}#play-again-btn{margin-top:20px}.settings-options{margin:20px 0;display:flex;flex-direction:column;gap:25px}.setting-item{display:flex;flex-direction:column;gap:10px;align-items:center}.setting-item label{font-size:1.1rem;font-weight:700;color:var(--color-mocha)}.setting-item input[type=text]{width:100%;padding:10px;font-size:1rem;border:2px solid var(--color-caramel);border-radius:8px;background:#fff;transition:border-color .2s}.setting-item input[type=text]:focus{outline:none;border-color:var(--color-burnt-orange)}.uuid-section{padding:15px 0;width:100%}.uuid-subtitle{font-size:.75rem;color:var(--color-espresso);opacity:.7;margin-top:2px;margin-bottom:8px;font-style:italic}.uuid-value{font-family:Courier New,monospace;color:var(--color-espresso);font-size:.9rem;word-break:break-all;padding:0;background:transparent;border:none}.save-settings-btn{width:100%;padding:15px;font-size:1.2rem;font-weight:700;color:var(--color-cream);background:var(--color-burnt-orange);border:none;border-radius:50px;cursor:pointer;box-shadow:0 4px 15px #0003;transition:transform .2s,box-shadow .2s;margin-top:20px}.save-settings-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.save-settings-btn:active{transform:translateY(0);box-shadow:0 2px 10px #0003}#volume-slider{width:100%;max-width:300px;height:8px;border-radius:5px;background:var(--color-latte);outline:none;-webkit-appearance:none}#volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--color-burnt-orange);cursor:pointer}#volume-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--color-burnt-orange);cursor:pointer;border:none}#volume-value{font-size:.9rem;color:var(--color-mocha);font-weight:700;min-width:45px;text-align:center}.volume-row{display:flex;align-items:center;gap:15px;width:100%}.mute-btn{padding:8px 12px;font-size:1.3rem;background:var(--color-latte);border:2px solid var(--color-caramel);border-radius:8px;cursor:pointer;transition:all .2s;min-width:50px;height:40px;display:flex;align-items:center;justify-content:center}.mute-btn:hover{background:var(--color-caramel);transform:scale(1.05)}.mute-btn:active{transform:scale(.95)}.toggle-btn{min-width:200px;padding:10px 20px}.extra-details{margin-top:20px;padding:15px;background:#ffffff4d;border-radius:10px;border:1px solid var(--color-caramel)}.extra-details summary{cursor:pointer;font-weight:700;color:var(--color-espresso);font-size:1rem;padding:5px;-webkit-user-select:none;user-select:none;list-style-position:inside}.extra-details summary:hover{color:var(--color-burnt-orange)}.extra-details[open] summary{margin-bottom:15px;border-bottom:1px solid var(--color-caramel);padding-bottom:10px}.pause-buttons{display:flex;flex-direction:column;gap:15px;margin-top:20px}.pause-buttons button{width:100%;padding:15px 30px;font-size:1.1rem}.audio-test-panel{margin-top:20px;padding:20px;background:#3e27234d;border-radius:10px;text-align:center}.audio-test-panel h3{color:var(--color-cream);margin-bottom:15px;font-size:1.2rem}.audio-test-buttons{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.audio-test-buttons button{padding:8px 16px;font-size:.9rem}.cat-test-panel{margin-top:20px;padding:20px;background:#3e27234d;border-radius:10px;text-align:center;max-width:400px}.cat-test-panel h3{color:var(--color-cream);margin-bottom:15px;font-size:1.2rem}.cat-test-controls{display:flex;flex-direction:column;gap:12px;margin-bottom:15px}.cat-test-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.cat-test-row label{color:var(--color-cream);font-size:.9rem;min-width:80px;text-align:left}.cat-test-row select{flex:1;padding:8px;border-radius:5px;border:1px solid var(--color-caramel);background:var(--color-cream);font-size:.9rem}.cat-test-row input[type=range]{flex:1;height:6px}#cat-scale-value{color:var(--color-cream);font-size:.9rem;min-width:30px}.cat-test-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:10px}.cat-test-buttons button{padding:8px 16px;font-size:.85rem}.cat-test-canvas-wrapper{display:flex;justify-content:center;margin:15px 0}#cat-test-canvas{background:#2a1810;border:2px solid var(--color-caramel);border-radius:8px;image-rendering:pixelated;image-rendering:crisp-edges}.cat-test-info{color:var(--color-latte);font-size:.85rem}.cat-test-info p{margin:5px 0}.cat-test-info span{color:var(--color-cream);font-family:Courier New,monospace}.dev-tools-area{margin-top:30px;padding:20px;background:#3e272333;border-radius:15px;border:2px dashed var(--color-caramel)}.dev-tools-area.hidden{display:none}.performance-monitor-panel{margin-top:20px;padding:20px;background:#3e27234d;border-radius:10px;max-width:400px}.performance-monitor-panel h3{color:var(--color-cream);margin-bottom:15px;font-size:1.2rem}.performance-stats{display:flex;flex-direction:column;gap:10px;margin-bottom:15px}.performance-stats .stat-row{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#0003;border-radius:5px}.performance-stats .stat-row label{color:var(--color-latte);font-size:.9rem}.performance-stats .stat-row span{color:var(--color-cream);font-weight:700;font-family:Courier New,monospace}.performance-monitor-panel button{width:100%;padding:10px;background:var(--color-burnt-orange);color:var(--color-cream);border:none;border-radius:5px;cursor:pointer;font-size:.9rem;transition:background .3s}.performance-monitor-panel button:hover{background:#bf360c}.extra-details-panel{margin-top:20px;padding:20px;background:#3e27234d;border-radius:10px;text-align:center}.extra-details-panel h3{color:var(--color-cream);margin-bottom:15px;font-size:1.2rem}.extra-details-panel .uuid-section{background:#ffffff1a;padding:15px;border-radius:8px}.extra-details-panel .uuid-section label{color:var(--color-cream)}.extra-details-panel .uuid-subtitle{font-size:.8rem;color:var(--color-cream);margin-bottom:8px}.extra-details-panel .uuid-value{font-family:Courier New,monospace;font-size:.85rem;color:var(--color-cream);word-break:break-all}.dev-mode-control{margin-top:10px}.checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:400!important}.checkbox-label input[type=checkbox]{width:20px;height:20px;cursor:pointer;accent-color:var(--color-burnt-orange)}.checkbox-label span{font-size:1rem;color:var(--color-mocha)}.sprite-gallery-panel{margin-top:20px;padding:20px;background:#3e27234d;border-radius:10px}.sprite-gallery-panel h3{color:var(--color-cream);margin-bottom:15px;font-size:1.2rem;text-align:center}.sprite-gallery-controls{display:flex;flex-wrap:wrap;gap:15px;justify-content:center;margin-bottom:20px}.sprite-gallery-row{display:flex;align-items:center;gap:10px}.sprite-gallery-row label{color:var(--color-latte);font-size:.9rem}.sprite-gallery-row select{padding:6px 10px;border-radius:5px;border:1px solid var(--color-caramel);background:#ffffffe6;color:var(--color-mocha);font-size:.9rem}.sprite-gallery-row input[type=range]{width:80px}.sprite-gallery-row span{color:var(--color-cream);font-weight:700;min-width:30px}.sprite-gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;justify-items:center}.sprite-card{background:#0000004d;border-radius:10px;padding:10px;text-align:center;width:100%;max-width:220px}.sprite-card canvas{background:#00000080;border-radius:8px;display:block;margin:0 auto 10px;image-rendering:pixelated;image-rendering:crisp-edges}.sprite-label{color:var(--color-cream);font-size:.9rem;font-weight:700;margin-bottom:4px}.sprite-state{color:var(--color-caramel);font-size:.75rem;font-style:italic}@media (max-width: 768px){.game-header{padding:10px 15px}.game-header h1{font-size:1.3rem}.settings-btn-top{padding:8px 16px;font-size:.9rem}#app{gap:10px;padding:10px}.player-greeting{font-size:1rem}.hud{font-size:.9rem;gap:10px;flex-wrap:wrap}.hud-value{font-size:1.1rem}.game-controls{gap:10px}.game-controls button{padding:10px 18px;font-size:.9rem}.instructions{font-size:.9rem}.modal-content{padding:30px 20px;min-width:250px;max-width:90vw}}@media (max-width: 380px){.game-header{padding:8px 10px}.game-header h1{font-size:1.1rem}.settings-btn-top{padding:6px 12px;font-size:.85rem}#app{gap:8px;padding:8px}.player-greeting{font-size:.9rem}.hud{font-size:.85rem;gap:8px}.hud-value{font-size:1rem}.hud-label{font-size:.8rem}.game-controls{gap:8px}.game-controls button{padding:8px 14px;font-size:.85rem}.instructions{font-size:.85rem}.instructions p{margin:3px 0}.game-area{gap:10px}}