@import "https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";
*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg,#0f0f23 0%,#1a1a3e 50%,#0f0f23 100%);justify-content:center;align-items:center;min-height:100vh;font-family:"Press Start 2P",Segoe UI,monospace;display:flex;overflow:hidden}body:before{content:"";pointer-events:none;z-index:1000;background:repeating-linear-gradient(0deg,#0000001a 0 1px,#0000 1px 2px);width:100%;height:100%;position:fixed;top:0;left:0}.game-container{width:800px;height:600px;image-rendering:pixelated;border-radius:8px;position:relative;overflow:hidden;box-shadow:0 0 0 4px #4ecca3,0 0 0 8px #1a1a3e,0 0 40px #4ecca34d,0 20px 60px #00000080}.webcam{object-fit:cover;filter:contrast(1.1)saturate(.8);width:100%;height:100%;position:absolute;top:0;left:0;transform:scaleX(-1)}.game-canvas{width:100%;height:100%;image-rendering:pixelated;position:absolute;top:0;left:0}.overlay{color:#4ecca3;z-index:10;background:#0f0f23eb;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .3s;display:flex;position:absolute;top:0;left:0}.overlay.hidden{opacity:0;pointer-events:none}.overlay.game-over{background:#3c1414eb}.overlay h1{text-shadow:3px 3px #000,0 0 20px #4ecca380;letter-spacing:2px;margin-bottom:30px;font-size:1.8rem;animation:2s ease-in-out infinite alternate glow}@keyframes glow{0%{text-shadow:3px 3px #000,0 0 10px #4ecca34d}to{text-shadow:3px 3px #000,0 0 30px #4ecca3cc}}.overlay p{color:#a0a0c0;margin:8px 0;font-size:.7rem;line-height:1.8}.overlay .status{color:#fc0;margin-top:30px;font-size:.6rem;animation:1s infinite blink}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:.5}}.score{color:#fff;text-shadow:4px 4px #000,0 0 20px #ffcc0080;z-index:5;font-family:"Press Start 2P",monospace;font-size:2.5rem;position:absolute;top:20px;left:50%;transform:translate(-50%)}.gesture-indicator{color:#4ecca3;z-index:5;background:#000000b3;border:2px solid #4ecca3;border-radius:4px;padding:10px 15px;font-family:"Press Start 2P",monospace;font-size:.7rem;position:absolute;top:20px;left:20px}.instructions{flex-wrap:wrap;justify-content:center;gap:30px;margin:25px 0;display:flex}.instruction-item{background:#0006;border:2px solid #333;border-radius:8px;flex-direction:column;align-items:center;gap:10px;padding:15px 20px;display:flex}.instruction-item .emoji{font-size:2.5rem}.instruction-item .label{color:#a0a0c0;font-size:.5rem}.name-input-container{flex-direction:column;align-items:center;gap:20px;display:flex}.name-input{color:#fff;text-align:center;background:#0009;border:3px solid #4ecca3;border-radius:4px;outline:none;width:280px;padding:15px 20px;font-family:"Press Start 2P",monospace;font-size:1rem}.name-input:focus{box-shadow:0 0 20px #4ecca380}.name-input::placeholder{color:#555}.start-btn{color:#000;cursor:pointer;background:linear-gradient(#4ecca3 0%,#3ba882 100%);border:none;border-radius:4px;padding:15px 40px;font-family:"Press Start 2P",monospace;font-size:.8rem;transition:all .1s;box-shadow:0 4px #2d8a6e,0 6px 20px #0000004d}.start-btn:hover{transform:translateY(-2px);box-shadow:0 6px #2d8a6e,0 8px 25px #0006}.start-btn:active{transform:translateY(2px);box-shadow:0 2px #2d8a6e,0 4px 15px #0000004d}.high-scores{text-align:center;margin-top:30px}.high-scores h2{color:#fc0;margin-bottom:15px;font-size:.8rem}.high-scores-list{color:#a0a0c0;font-size:.5rem;list-style:none}.high-scores-list li{justify-content:space-between;gap:20px;padding:5px 0;display:flex}.high-scores-list .rank{color:#fc0}.high-scores-list .name{color:#4ecca3;text-align:left;flex:1}.high-scores-list .score-value{color:#fff}.player-info{color:#4ecca3;z-index:5;background:#000000b3;border:2px solid #4ecca3;border-radius:4px;padding:8px 12px;font-family:"Press Start 2P",monospace;font-size:.5rem;position:absolute;top:20px;right:20px}.overlay.game-over h1{color:#ff6b6b}.overlay.game-over .final-score{color:#fc0;margin:20px 0;font-size:1.5rem}.new-high-score{animation:.5s infinite alternate pulse;color:#ff6b6b!important}.gesture-debug{color:#ff6b6b;background:#00000080;border:2px solid #ff6b6b;border-radius:8px;margin-top:15px;padding:10px 20px;font-size:.9rem}@keyframes pulse{0%{transform:scale(1)}to{transform:scale(1.1)}}
