*{box-sizing:border-box;margin:0;padding:0;font-family:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;}
html,body{height:100%;background:#000;}
#bg-wrap{position:fixed;inset:0;overflow:hidden;pointer-events:none;}
.bg-layer{position:absolute;inset:-20%;background-image:url('assets/clock.png');background-size:cover;background-position:center;filter:blur(8px);opacity:0.12;animation:move 25s linear infinite;}
.layer2{transform:scale(1.1);opacity:0.09;animation-duration:35s;animation-direction:reverse;}
.layer3{transform:scale(0.9);opacity:0.07;animation-duration:45s;}
@keyframes move{0%{transform:translate(0,0) rotate(0deg);}50%{transform:translate(10%,5%) rotate(10deg);}100%{transform:translate(0,0) rotate(0deg);}}

main#menu{position:fixed;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#dcd6ff;z-index:5;text-align:center;}
main#menu h1{font-size:48px;letter-spacing:4px;margin-bottom:24px;text-shadow:0 6px 30px rgba(60,10,120,0.6);}
button.glass{background:linear-gradient(180deg, rgba(140,70,255,0.22), rgba(110,40,220,0.18));backdrop-filter: blur(6px);border:1px solid rgba(200,160,255,0.28);padding:18px 46px;border-radius:14px;color:white;font-weight:700;font-size:20px;cursor:pointer;box-shadow:0 8px 30px rgba(80,20,160,0.35);}
button.glass:active{transform:translateY(1px);}
p.hint{color:rgba(200,180,255,0.7);margin-top:12px;font-size:14px;}

canvas#game{display:block;margin:0 auto; background:transparent;position:fixed;left:50%;transform:translateX(-50%);top:50px;z-index:4;border-radius:8px;}
#ui{position:fixed;left:16px;top:16px;z-index:6;color:#bfb8ff;font-weight:700;}
#counter{font-size:18px;background:rgba(20,10,30,0.6);padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);}

#controls{position:fixed;left:50%;transform:translateX(-50%);bottom:28px;z-index:7;display:flex;gap:20px;}
.arrow{width:64px;height:64px;border-radius:12px;border:none;font-size:30px;background:linear-gradient(180deg, rgba(140,70,255,0.22), rgba(110,40,220,0.18));box-shadow:0 8px 20px rgba(100,30,160,0.25);cursor:pointer; color:white;}

#overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:10;}
#overlay.hidden{display:none;}
#congrats{background:linear-gradient(180deg, rgba(10,6,20,0.9), rgba(20,12,40,0.92));padding:28px;border-radius:14px;border:1px solid rgba(200,180,255,0.06);text-align:center;box-shadow:0 12px 60px rgba(30,10,90,0.6);color:#efeaff;}
#congrats h2{margin-bottom:16px;}
#congrats button{padding:12px 18px;border-radius:10px;border:none;background:linear-gradient(90deg,#8a5bff,#6c2be0);color:white;font-weight:700;cursor:pointer;}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:9;}