*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#1a1a2e;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:#fff}#app{position:relative;width:100%;height:100%}#camera-feed{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1}#pulse-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;pointer-events:none;opacity:0;transition:opacity .5s;background:radial-gradient(circle at 50% 50%,rgba(230,57,70,.15),transparent 70%)}#pulse-bg.active{opacity:1;animation:bgPulse 3s ease-in-out infinite}#particle-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}#ui-layer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:20;pointer-events:none}#ui-layer>.screen{pointer-events:auto}.screen{position:absolute;top:0;left:0;width:100%;height:100%;display:none;flex-direction:column;align-items:center;justify-content:center}.screen.active{display:flex}.overlay-dark{position:absolute;top:0;left:0;width:100%;height:100%;background:#1a1a2eb3;z-index:0}.splash-content,.gameover-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%}#splash-screen .logo{font-size:3.5rem;font-weight:900;margin-bottom:.5rem;text-shadow:0 2px 20px rgba(0,0,0,.5)}#splash-screen .subtitle{font-size:1.3rem;opacity:.9;margin-bottom:2rem;text-shadow:0 1px 10px rgba(0,0,0,.5)}.status-text{font-size:1.2rem;margin-bottom:1.5rem;opacity:.95;text-shadow:0 1px 5px rgba(0,0,0,.5);min-height:1.5rem}#standoff-display{text-align:center;margin-bottom:1.5rem}.standoff-title{font-size:2.5rem;font-weight:900;color:#e63946;text-shadow:0 2px 10px rgba(230,57,70,.5);animation:pulse 1s ease infinite}.standoff-color{font-size:1.5rem;margin-top:.5rem}.standoff-color span{font-weight:900;text-transform:uppercase}#face-progress{margin-bottom:1.5rem}.progress-ring{position:relative;width:120px;height:120px}.progress-ring svg{width:100%;height:100%;transform:rotate(-90deg)}.progress-track{fill:none;stroke:#fff3;stroke-width:6}.progress-fill{fill:none;stroke:#e63946;stroke-width:6;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:283;transition:stroke-dashoffset .1s linear}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.9rem;font-weight:600}#tap-start{padding:1rem 2.5rem;background:linear-gradient(135deg,#e63946,#d62839);border:none;border-radius:2rem;color:#fff;font-size:1.3rem;font-weight:700;cursor:pointer;box-shadow:0 4px 20px #e6394666;animation:pulse 1.5s ease infinite;pointer-events:auto}.bottom-controls{position:absolute;bottom:2rem;display:flex;gap:1rem;z-index:5}.bottom-controls button{width:3.5rem;height:3.5rem;border-radius:50%;border:2px solid rgba(255,255,255,.3);background:#ffffff26;color:#fff;font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .2s}.bottom-controls button:active{transform:scale(.95)}#game-screen{background:transparent;pointer-events:none}#game-screen>*{pointer-events:auto}#hud{position:absolute;top:1rem;left:1rem;right:1rem;display:flex;justify-content:space-between;align-items:center;z-index:30;padding:0 .5rem}#score{font-size:2.2rem;font-weight:900;text-shadow:0 2px 10px rgba(0,0,0,.5);min-width:3rem}#avatar{width:2.5rem;height:2.5rem;border-radius:50%;border:2px solid rgba(255,255,255,.5);background-size:cover;background-position:center;box-shadow:0 2px 10px #0000004d}#timer{font-size:2rem;font-weight:700;font-variant-numeric:tabular-nums;text-shadow:0 2px 10px rgba(0,0,0,.5);transition:color .3s;min-width:4rem;text-align:right}#timer.warning{color:#e9c46a;animation:pulse 1s ease infinite}#timer.critical{color:#e63946;animation:shake .5s ease infinite}#color-prompt{position:absolute;top:12%;left:50%;transform:translate(-50%);text-align:center;z-index:30;text-shadow:0 2px 15px rgba(0,0,0,.5)}#color-icon{font-size:4rem;margin-bottom:.3rem}#color-text{font-size:2.2rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}#bucket-wrapper{position:absolute;bottom:12%;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;z-index:25;width:40vw;max-width:300px}#bucket-container{position:relative;width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center}#bucket-ring{position:absolute;top:0;left:0;width:100%;height:100%;border:5px dashed rgba(255,255,255,.6);border-radius:50%;animation:bucketSpin 8s linear infinite;box-shadow:0 0 30px #ffffff1a,inset 0 0 30px #ffffff0d;transition:border-color .3s,box-shadow .3s}#bucket-ring.charging{border-style:solid;animation-duration:2s}#bucket-guide{position:absolute;font-size:.9rem;opacity:.7;text-shadow:0 1px 5px rgba(0,0,0,.5);pointer-events:none}#bucket-fill{position:absolute;top:10%;left:10%;width:80%;height:80%;border-radius:50%;background:transparent;opacity:0;transition:background .3s,opacity .3s}#bucket-fill.active{opacity:.3}#bucket-check{position:absolute;font-size:4rem;opacity:0;transform:scale(0);transition:all .4s cubic-bezier(.175,.885,.32,1.275);text-shadow:0 2px 10px rgba(0,0,0,.3)}#bucket-check.active{opacity:1;transform:scale(1)}#charge-bar{width:80%;height:10px;background:#fff3;border-radius:5px;margin-top:.8rem;overflow:hidden;box-shadow:0 2px 10px #0003}#charge-fill{width:0%;height:100%;background:linear-gradient(90deg,#fff,#e63946);border-radius:5px;transition:width .1s linear}#color-timer-bar{position:absolute;top:26%;left:50%;transform:translate(-50%);width:60%;max-width:280px;height:12px;background:#ffffff26;border-radius:6px;overflow:hidden;box-shadow:0 2px 10px #0003;z-index:30}#color-timer-fill{width:100%;height:100%;background:#2a9d8f;border-radius:6px;transition:width .3s linear,background .3s}#color-timer-text{position:absolute;top:29%;left:50%;transform:translate(-50%);font-size:.9rem;font-weight:700;opacity:.9;text-shadow:0 1px 5px rgba(0,0,0,.5);z-index:31}#floating-score{position:absolute;left:50%;top:35%;transform:translate(-50%);font-size:3.5rem;font-weight:900;color:#fff;text-shadow:0 2px 15px rgba(0,0,0,.5);pointer-events:none;z-index:50}#countdown-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#0009;z-index:100;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}#countdown-number{font-size:10rem;font-weight:900;text-shadow:0 4px 30px rgba(0,0,0,.5);animation:slamIn .4s cubic-bezier(.175,.885,.32,1.275)}#gameover-screen .gameover-title{font-size:3.5rem;font-weight:900;margin-bottom:1rem;text-shadow:0 2px 15px rgba(0,0,0,.5)}#gameover-screen .final-score{font-size:2.2rem;margin-bottom:.5rem;text-shadow:0 1px 10px rgba(0,0,0,.5)}#high-score-display{font-size:1.3rem;opacity:.9;margin-bottom:2rem;text-shadow:0 1px 5px rgba(0,0,0,.5)}#btn-play-again{padding:1rem 2.5rem;background:linear-gradient(135deg,#e63946,#d62839);border:none;border-radius:2rem;color:#fff;font-size:1.3rem;font-weight:700;cursor:pointer;box-shadow:0 4px 20px #e6394666;pointer-events:auto;transition:transform .2s}#btn-play-again:active{transform:scale(.95)}#settings-panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#1a1a2efa;padding:2rem;border-radius:1rem;border:2px solid rgba(255,255,255,.1);z-index:200;min-width:300px;pointer-events:auto}.settings-title{font-size:1.5rem;font-weight:700;margin-bottom:1.5rem;text-align:center}.setting-row{margin-bottom:1.5rem}.setting-row label{display:block;margin-bottom:.5rem;font-weight:600;opacity:.9}.duration-options{display:flex;gap:.5rem}.duration-btn{flex:1;padding:.6rem;background:#ffffff1a;border:2px solid transparent;border-radius:.5rem;color:#fff;cursor:pointer;transition:all .2s;font-weight:600}.duration-btn.active{border-color:#e63946;background:#e6394633}.color-duration-btn{flex:1;padding:.6rem;background:#ffffff1a;border:2px solid transparent;border-radius:.5rem;color:#fff;cursor:pointer;transition:all .2s;font-weight:600}.color-duration-btn.active{border-color:#2a9d8f;background:#2a9d8f33}#btn-close-settings{width:100%;padding:.75rem;background:#457b9d;border:none;border-radius:.5rem;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;margin-top:.5rem}.hidden{display:none!important}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.9}}@keyframes bucketSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes slamIn{0%{transform:scale(2);opacity:0}to{transform:scale(1);opacity:1}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}@keyframes bgPulse{0%,to{transform:scale(1);opacity:.8}50%{transform:scale(1.1);opacity:1}}@keyframes floatUp{0%{transform:translateY(100vh) scale(0);opacity:0}20%{opacity:.6}80%{opacity:.6}to{transform:translateY(-10vh) scale(1);opacity:0}}.ambient-particle{position:absolute;width:6px;height:6px;border-radius:50%;opacity:.6;animation:floatUp 4s ease-in infinite}@media (max-height: 600px){#bucket-wrapper{bottom:8%;width:35vw}#color-icon{font-size:3rem}#color-text{font-size:1.8rem}}