*{box-sizing:border-box;margin:0;padding:0}body{background:#000;width:100vw;height:100vh;overflow:hidden}.app{justify-content:center;align-items:center;width:100vw;height:100vh;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;display:flex;overflow:hidden}.game-wrapper{transform-origin:50%}:root{--color-1:#4caf50;--color-2:#8b4513;--color-3:gold}.game-container{cursor:crosshair;background:#000;width:960px;height:540px;position:relative;overflow:hidden}.canvas-layer{z-index:0;position:absolute;top:0;left:0}.sprite-layer{z-index:1;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.hud-layer{z-index:2;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.sprite{image-rendering:auto;background:0 0;position:absolute}.sprite-chameleon{object-fit:contain;image-rendering:auto;filter:drop-shadow(0 2px 4px #0000004d)}.sprite-chameleon.jumping{filter:drop-shadow(0 4px 8px #0006);transform:rotate(-10deg)}.sprite-chameleon.falling{opacity:.8;transform:rotate(15deg)}.sprite-snake{object-fit:contain;image-rendering:auto;filter:drop-shadow(0 2px 4px #0000004d)}.sprite-bug{object-fit:contain;image-rendering:auto;animation:2s ease-in-out infinite bug-float}@keyframes bug-float{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.hud{justify-content:space-between;align-items:flex-start;padding:12px 16px;display:flex}.hud-score{color:#fff;text-shadow:2px 2px 4px #000000b3;font-family:Courier New,monospace;font-size:20px;font-weight:700}.hud-color-indicator{color:#fff;text-shadow:1px 1px 3px #000000b3;align-items:center;gap:8px;font-family:Courier New,monospace;font-size:14px;display:flex}.hud-color-swatch{border:2px solid #fff;border-radius:4px;width:20px;height:20px}.hud-warning{color:#f44;text-shadow:1px 1px 3px #000000b3;font-family:Courier New,monospace;font-size:14px;font-weight:700;animation:.5s ease-in-out infinite alternate warning-pulse}@keyframes warning-pulse{0%{opacity:.6}to{opacity:1}}.screen-overlay{z-index:10;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.start-screen{background:#f5f5f0;justify-content:flex-start;overflow:hidden}.start-title-area{justify-content:center;align-items:center;width:100%;height:75%;min-height:0;display:flex;overflow:hidden}.start-title-img{object-fit:contain;width:auto;height:90%}.start-button-area{justify-content:center;align-items:center;width:100%;height:25%;min-height:0;display:flex}.new-game-btn{cursor:pointer;pointer-events:auto;background:0 0;border:none;padding:0;transition:transform .2s}.new-game-btn:hover{transform:scale(1.15)}.new-game-btn:active{transform:scale(1.05)}.new-game-btn img{width:220px;height:auto;display:block}.story-screen{cursor:pointer;background:#000000e6}.story-panels{flex-direction:column;gap:30px;width:100%;max-width:800px;padding:20px 40px;display:flex}.story-panel{background:#ffffff0d;border:2px solid #fff3;border-radius:12px;align-items:center;gap:20px;padding:16px;display:flex}.panel-left{flex-direction:row}.panel-right{flex-direction:row-reverse}.story-character{object-fit:contain;background:0 0;flex-shrink:0;width:160px;height:160px}.speech-bubble{color:#222;background:#fff;border-radius:16px;max-width:400px;padding:16px 20px;font-family:Georgia,serif;font-size:16px;font-style:italic;line-height:1.5;position:relative}.snake-bubble:after{content:"";border:8px solid #0000;border-right-color:#fff;position:absolute;top:50%;left:-12px;transform:translateY(-50%)}.chameleon-bubble:after{content:"";border:8px solid #0000;border-left-color:#fff;position:absolute;top:50%;right:-12px;transform:translateY(-50%)}.story-prompt{color:#ffffffb3;letter-spacing:1px;margin-top:30px;font-family:Courier New,monospace;font-size:16px}.fade-in{animation:.6s ease-out fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.blink{animation:1.2s ease-in-out infinite blinkAnim}@keyframes blinkAnim{0%,to{opacity:.4}50%{opacity:1}}.countdown-screen{background:#000000b3}.countdown-number{color:#fff;text-shadow:0 0 40px #ffffff80;font-family:Georgia,serif;font-size:120px;font-weight:700;animation:.5s ease-out countPop}@keyframes countPop{0%{opacity:0;transform:scale(2)}to{opacity:1;transform:scale(1)}}.gameover-illustration{object-fit:contain;background:0 0;width:auto;max-height:200px;margin-bottom:12px}.gameover-screen{background:#000000d9}.screen-title{color:#e8e0d0;text-shadow:2px 2px 4px #0009;letter-spacing:3px;margin-bottom:12px;font-family:Georgia,serif;font-size:48px;font-weight:700}.screen-subtitle{color:#ccc;text-align:center;margin-bottom:40px;font-family:Courier New,monospace;font-size:18px;line-height:1.6}.screen-score{color:#d0c8b8;letter-spacing:2px;margin-bottom:20px;font-family:Georgia,serif;font-size:28px}.screen-button{color:#2a2a2a;cursor:pointer;pointer-events:auto;letter-spacing:1px;background:#e8e0d0;border:2px solid #555;border-radius:4px;padding:12px 36px;font-family:Georgia,serif;font-size:18px;font-weight:700;transition:background .2s,transform .1s}.screen-button:hover{background:#d0c8b8;transform:scale(1.05)}.screen-button:active{transform:scale(.98)}.screen-instructions{color:#aaa;text-align:center;margin-top:30px;font-family:Courier New,monospace;font-size:13px;line-height:1.8;display:none}