:root{--bg-gradient:linear-gradient(135deg, #0e051c 0%, #20083a 100%);--text-main:#f1e6ff;--text-dim:#b89cde;--light-size:clamp(20px, min(16vw, 9dvh), 80px);--board-gap:clamp(4px, min(2vw, 1dvh), 16px);--light-off-bg:#ffffff08;--light-off-border:#ffffff1a;--light-off-shadow:inset 0 2px 4px #00000080;--light-on-bg:#ab47bc;--light-on-border:#ce93d8;--light-on-glow:0 0 15px #ce93d8, 0 0 30px #ab47bc, inset 0 0 10px #ffffff80}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-gradient);color:var(--text-main);justify-content:center;align-items:center;height:100dvh;font-family:Outfit,sans-serif;display:flex;overflow:auto}#app{flex-direction:column;align-items:center;gap:clamp(.5rem,1dvh,2rem);width:100%;max-width:600px;padding:clamp(.5rem,2dvh,2rem);display:flex}header{text-align:center;width:100%}.header-top{flex-direction:column;align-items:center;gap:clamp(.5rem,2vh,1.5rem);margin-bottom:clamp(.2rem,1vh,1rem);display:flex}.app-menu{flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;display:flex}h1{background:linear-gradient(90deg,#d67cff,#f8bbd0);-webkit-text-fill-color:transparent;text-shadow:0 4px 20px #d67cff4d;letter-spacing:1px;-webkit-background-clip:text;background-clip:text;margin-bottom:clamp(.1rem,1vh,.5rem);font-size:clamp(1.5rem,min(6vw,6vh),3rem);font-weight:800}.stats{color:var(--text-dim);justify-content:center;gap:clamp(.5rem,2vw,1.5rem);font-size:clamp(.9rem,min(3vw,3vh),1.1rem);font-weight:600;display:flex}.stats span{color:var(--text-main)}.board{gap:var(--board-gap);padding:var(--board-gap);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0000004d;border:1px solid #ffffff0d;border-radius:16px;grid-template-columns:repeat(5,1fr);display:grid;box-shadow:0 10px 40px #00000080}.light{width:var(--light-size);height:var(--light-size);background:var(--light-off-bg);border:1px solid var(--light-off-border);box-shadow:var(--light-off-shadow);cursor:pointer;border-radius:12px;transition:all .3s cubic-bezier(.175,.885,.32,1.275);position:relative;overflow:hidden}.light:after{content:"";background:linear-gradient(90deg,#fff0 0%,#ffffff1a 50%,#fff0 100%);width:50%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%;transform:skew(-20deg)}.light:hover:after{left:200%}.light:active{transform:scale(.9)}.light.on{background:var(--light-on-bg);border-color:var(--light-on-border);box-shadow:var(--light-on-glow);z-index:10;transform:scale(1.05)}.controls{text-align:center;margin-top:clamp(.5rem,2vh,1rem)}.btn{color:var(--text-main);cursor:pointer;text-transform:uppercase;letter-spacing:1px;background:#ffffff0d;border:1px solid #fff3;border-radius:30px;padding:.8rem 2rem;font-family:inherit;font-size:1rem;font-weight:600;transition:all .2s}.btn:hover{background:#ffffff1a;transform:translateY(-2px);box-shadow:0 5px 15px #0000004d}.btn.primary{color:#fff;background:#ab47bc;border-color:#ce93d8;box-shadow:0 0 15px #ab47bc80}.btn.primary:hover{background:#ba68c8;box-shadow:0 0 25px #ab47bccc}.modal{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;opacity:1;background:#000000b3;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .3s;display:flex;position:fixed;top:0;left:0}.modal.hidden{opacity:0;pointer-events:none}.modal-content{text-align:center;background:linear-gradient(135deg,#2a0845 0%,#1a052e 100%);border:1px solid #ffffff1a;border-radius:24px;padding:3rem;transition:transform .3s cubic-bezier(.175,.885,.32,1.275);transform:scale(1);box-shadow:0 20px 50px #000c}.modal.hidden .modal-content{transform:scale(.8)}.modal h2{color:#fff;text-shadow:0 0 10px #ffffff4d;margin-bottom:1rem;font-size:2.5rem}.modal p{color:var(--text-dim);margin-bottom:2rem;font-size:1.2rem}