@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800&family=Nunito:wght@800;900&display=swap');
:root { --ink:#252555; --purple:#713de0; --pink:#ff4fa3; --yellow:#ffe43d; }
* { box-sizing:border-box; }
button { touch-action:manipulation; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; }
body { min-height:100vh; margin:0; display:grid; place-items:center; overflow:hidden; color:white; font-family:Nunito,Arial,sans-serif; background:radial-gradient(circle at 15% 15%,#792fd8 0 2%,transparent 20%),radial-gradient(circle at 80% 80%,#166ee8 0 3%,transparent 23%),linear-gradient(145deg,#171342,#272071 55%,#123d77); }
body::before { content:"✦  ·  ✧    ·  ✦   ·    ✧  ·  ✦"; position:fixed; inset:0; font-size:55px; line-height:3; color:#fff4; word-spacing:70px; animation:stars 6s linear infinite alternate; pointer-events:none; }
.home-link { position:fixed; z-index:5; top:14px; left:18px; padding:9px 14px; color:white; background:#291a65; border:3px solid white; border-radius:12px; text-decoration:none; font-size:13px; box-shadow:0 4px #10082e; }
.game { position:relative; z-index:1; width:min(900px,95vw); min-height:min(680px,95vh); padding:20px 32px 30px; border:6px solid #ffffffbb; border-radius:35px; background:#17153ccc; box-shadow:0 18px 0 #0b0828,0 25px 60px #0008; }
header { text-align:center; }
.logo { color:var(--yellow); font:800 clamp(27px,5vw,48px) 'Baloo 2'; text-shadow:0 0 18px #ffe43dcc,3px 4px #8e3d95; }
.stats { display:flex; justify-content:center; gap:18px; margin-top:4px; }
.stats div { min-width:120px; padding:7px 14px; border-radius:14px; background:#ffffff14; border:2px solid #ffffff35; font-size:12px; letter-spacing:1px; }
.stats strong { display:block; color:var(--yellow); font-size:25px; }
.screen { display:none; text-align:center; animation:appear .3s ease-out; }
.screen.active { display:block; }
.start-screen,.end-screen { padding-top:50px; }
.big-light,.trophy { font-size:120px; filter:drop-shadow(0 0 25px #ffe43d); animation:float .75s infinite alternate; }
h1 { margin:5px; font:800 clamp(38px,7vw,65px) 'Baloo 2'; line-height:1; }
.start-screen p,.end-screen p { font-size:21px; }
.main-button { margin-top:20px; padding:15px 45px; border:4px solid white; border-radius:18px; color:#40245e; background:linear-gradient(#fff45d,#ffae32); font:900 24px Nunito; cursor:pointer; box-shadow:0 8px #aa4c29,0 0 30px #ffe43d88; transition:.12s; }
.main-button:active { transform:translateY(6px); box-shadow:0 2px #aa4c29; }
.message { height:30px; margin:14px 0 5px; color:#8eeaff; font-size:19px; }
.button-grid { width:min(650px,88vw); margin:8px auto 0; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.light-button { aspect-ratio:1; border:8px solid #ffffff22; border-radius:50%; background:linear-gradient(145deg,#514c7a,#242047); box-shadow:inset 0 -10px 0 #11102b,0 9px 14px #0007; cursor:pointer; transition:transform .1s,filter .1s; -webkit-tap-highlight-color:transparent; }
.light-button:hover { transform:scale(1.04); }
.light-button.glowing { background:radial-gradient(circle at 38% 32%,white 0 7%,#fff87a 15%,#ffb31f 48%,#ff4e4e 80%); border-color:white; transform:scale(1.13); box-shadow:0 0 18px white,0 0 40px #ffe23d,0 0 75px #ff6a35,inset 0 -8px #e84028; animation:pulse .45s infinite alternate; }
.light-button.wrong { background:#f43b65; animation:shake .2s; }
.final-score { display:inline-block; padding:10px 30px; border:4px solid #fff; border-radius:18px; color:var(--yellow); background:#ffffff18; font-size:25px; }.final-score strong{font-size:48px;}
@keyframes pulse { to { filter:brightness(1.25); transform:scale(1.2); } }
@keyframes float { to { transform:translateY(-14px) rotate(5deg); } }
@keyframes appear { from { opacity:0; transform:scale(.85); } }
@keyframes shake { 25%{transform:translateX(-7px)}75%{transform:translateX(7px)} }
@keyframes stars { to { transform:translateY(-20px); opacity:.5; } }
@media(max-width:600px){.game{padding:50px 12px 15px;min-height:100vh;border:0;border-radius:0}.stats{gap:6px}.stats div{min-width:90px;padding:5px}.button-grid{gap:13px;grid-template-columns:repeat(3,1fr);width:min(430px,88vw)}.light-button{border-width:5px}.start-screen{padding-top:80px}.home-link{top:8px;left:8px}}