:root{color-scheme:dark;--bg:#090b1b;--text:#f8f7ff;--muted:#9698b4;--line:rgba(255,255,255,.09);--violet:#8377fa;--red:#ff405b;--blue:#29a5ff;--green:#21db79;--yellow:#ffd43d}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);font-family:'DM Sans',sans-serif;color:var(--text)}body{min-height:100svh;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#1d1a3b 0,#101126 39%,#090b1b 78%)}button{font:inherit;color:inherit}.app{position:relative;isolation:isolate;width:100%;height:100svh;min-height:590px;max-height:100svh;overflow:hidden;padding:clamp(16px,4vw,30px) clamp(18px,5vw,36px) 15px;display:flex;flex-direction:column;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:36px 36px}.ambient{position:absolute;z-index:-1;width:40vw;height:40vw;max-width:420px;max-height:420px;border-radius:50%;filter:blur(90px);opacity:.17;pointer-events:none}.ambient-a{background:#7542f5;left:-18%;top:18%}.ambient-b{background:#f73d7a;right:-20%;top:45%;opacity:.1}.topbar{width:min(100%,520px);margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex:none}.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font:700 15px 'Space Grotesk',sans-serif;letter-spacing:.11em}.brand-icon{font-size:24px;color:#a99dff;text-shadow:0 0 20px #8974ff}.brand small{display:block;font:600 8px 'DM Sans',sans-serif;letter-spacing:.18em;color:#8486a5;margin-top:2px}.sound-toggle{height:36px;padding:0 11px;border:1px solid var(--line);border-radius:12px;background:#ffffff08;display:flex;gap:7px;align-items:center;color:#d6d3ff;font-weight:700;font-size:12px}.sound-toggle span:first-child{font-size:17px}.sound-toggle.muted{color:#7a7c95}.content{width:min(100%,440px);margin:clamp(10px,2.5vh,24px) auto 0;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center}.eyebrow{font-size:9px;letter-spacing:.2em;color:#aaa9c4;font-weight:700;display:flex;gap:8px;align-items:center;margin-bottom:7px}.live-dot{width:6px;height:6px;border-radius:100%;background:#a99cff;box-shadow:0 0 10px #a99cff}.heading{text-align:center}.heading h1{font:700 clamp(27px,7vw,38px)/1.06 'Space Grotesk',sans-serif;letter-spacing:-.045em;margin:0}.heading h1 em{font-style:normal;color:#b5aaff;text-shadow:0 0 26px #8775ff45}.heading p{color:#a0a0b9;font-size:12px;margin:8px 0 0}.scorebar{display:flex;align-items:center;justify-content:center;gap:clamp(18px,6vw,33px);width:min(100%,318px);margin:clamp(12px,2.3vh,20px) 0 6px;padding:9px 8px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,#ffffff0b,#ffffff04);box-shadow:0 8px 26px #0002}.score-cell{text-align:center;min-width:45px}.score-cell span{display:block;font-weight:700;color:#8487a6;letter-spacing:.14em;font-size:8px}.score-cell strong{display:block;margin-top:2px;font:700 19px 'Space Grotesk',sans-serif;letter-spacing:.04em}.best-cell strong{color:#c2b8ff}.score-divider{height:27px;width:1px;background:var(--line)}.board-wrap{position:relative;display:grid;place-items:center;width:min(73vw,322px,34svh);height:min(73vw,322px,34svh);min-width:218px;min-height:218px;margin:clamp(3px,1.2vh,10px) 0 2px}.board-glow{position:absolute;inset:9%;border-radius:50%;background:#8a64ff;filter:blur(46px);opacity:.15}.board{position:relative;width:100%;height:100%;padding:10%;border-radius:50%;border:1px solid #a9a1ff76;background:radial-gradient(circle at 50% 36%,#292648 0,#17172f 66%,#121328 100%);box-shadow:0 20px 35px #0008,inset 0 2px 12px #ffffff12,inset 0 -12px 24px #0005,0 0 0 7px #8982ee12,0 0 0 8px #a39bff20;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8%;transform:rotate(-2deg)}.pad{border:0;padding:0;position:relative;display:grid;place-items:center;border-radius:50%;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .12s,filter .12s;outline:none;box-shadow:0 6px 0 #0008,inset 0 2px 1px #ffffff67,inset 0 -5px 9px #0004;overflow:hidden}.pad::after{content:"";position:absolute;inset:9%;border:1px solid #ffffff28;border-radius:50%;pointer-events:none}.pad:active{transform:scale(.95)}.pad-core{width:70%;height:70%;border-radius:50%;opacity:.9;box-shadow:inset 0 1px 3px #ffffff73,inset 0 -8px 15px #0002,0 0 18px currentColor}.pad-red{background:linear-gradient(145deg,#ff5e70,#c91e43);color:var(--red)}.pad-blue{background:linear-gradient(145deg,#40bbff,#1670e2);color:var(--blue)}.pad-green{background:linear-gradient(145deg,#43f59a,#0da853);color:var(--green)}.pad-yellow{background:linear-gradient(145deg,#ffe96b,#e7a916);color:var(--yellow)}.pad-red .pad-core{background:#ff5667}.pad-blue .pad-core{background:#27aaff}.pad-green .pad-core{background:#20db72}.pad-yellow .pad-core{background:#ffd53b}.pad.lit{filter:brightness(1.65) saturate(1.25);transform:scale(1.045);box-shadow:0 4px 0 #0008,inset 0 2px 1px #ffffffa6,0 0 30px currentColor,0 0 60px color-mix(in srgb,currentColor 55%,transparent)}.pad-red{grid-area:1/1}.pad-blue{grid-area:1/2}.pad-green{grid-area:2/1}.pad-yellow{grid-area:2/2}.hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(2deg);width:30%;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(145deg,#252344,#14152c);border:1px solid #ffffff24;box-shadow:0 4px 12px #0008,inset 0 1px 5px #ffffff14}.hub-star{font-size:clamp(13px,4vw,19px);line-height:1;color:#b4a8ff;text-shadow:0 0 12px #8979ff}.hub strong{font:700 clamp(5px,1.6vw,9px) 'Space Grotesk',sans-serif;letter-spacing:.04em;margin-top:2px}.hub small{font-size:5px;letter-spacing:.12em;color:#8f90ae;margin-top:2px}.message{height:23px;margin:clamp(4px,1.3vh,12px) 0 6px;display:flex;align-items:center;gap:8px;color:#adaec5;font-size:11px;font-weight:600}.message-mark{color:#b5aaff}.message.error{color:#ff8a9d}.message.success{color:#75edaa}.start-button{width:min(100%,318px);height:48px;min-height:44px;border:1px solid #c6beff70;border-radius:15px;background:linear-gradient(110deg,#7866ee,#6352d7 55%,#574cc2);box-shadow:0 7px 22px #6f5be74a,inset 0 1px 0 #ffffff55;display:flex;align-items:center;justify-content:center;gap:11px;cursor:pointer;font-weight:800;letter-spacing:.1em;font-size:11px;transition:transform .15s,filter .15s}.start-button:hover,.again-button:hover{filter:brightness(1.12);transform:translateY(-1px)}.button-icon{font-size:11px}.button-arrow{margin-left:auto;margin-right:14px;font-size:16px;color:#dfd9ff}.hint{font-size:9px;color:#797c99;margin-top:9px;display:flex;align-items:center;gap:6px}.hint span{color:#9c8fff}footer{width:min(100%,520px);margin:10px auto 0;display:flex;justify-content:space-between;color:#666986;letter-spacing:.13em;font-size:7px;font-weight:700;flex:none}footer i{font-style:normal;color:#a79aff;margin:0 4px}.overlay{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:24px;background:#070817c9;backdrop-filter:blur(12px);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}.overlay.show{opacity:1;visibility:visible}.result-card{width:min(100%,340px);padding:27px 24px 23px;border:1px solid #a59aff4a;border-radius:25px;background:linear-gradient(150deg,#22213f,#13142b);box-shadow:0 22px 70px #0009;text-align:center;transform:translateY(10px);transition:transform .2s}.overlay.show .result-card{transform:translateY(0)}.result-symbol{display:grid;place-items:center;margin:0 auto 13px;width:42px;height:42px;border-radius:50%;background:#ff46621c;color:#ff7184;font-size:19px;border:1px solid #ff718433}.result-kicker{font-size:9px;letter-spacing:.2em;font-weight:800;color:#aaa2ff}.result-card h2{font:700 27px 'Space Grotesk',sans-serif;margin:7px 0 3px}.result-card p{color:#a0a0b8;font-size:12px;margin:0}.result-score{font:700 54px 'Space Grotesk',sans-serif;display:block;margin:2px 0;color:#c4bbff}.record-note{color:#c6c4d7;font-size:10px;padding:11px 10px;margin:6px 0 16px;border-radius:11px;background:#ffffff08}.again-button{width:100%;height:46px;border:1px solid #c6beff60;border-radius:13px;background:linear-gradient(110deg,#7866ee,#574cc2);font-size:12px;font-weight:800;letter-spacing:.08em;cursor:pointer}.again-button span{margin-left:8px}
@media(max-height:700px){.app{min-height:0;padding-top:12px;padding-bottom:10px}.content{margin-top:8px}.eyebrow{margin-bottom:3px}.heading h1{font-size:clamp(24px,6vw,32px)}.heading p{margin-top:5px}.scorebar{margin:8px 0 1px;padding:6px}.board-wrap{width:min(67vw,280px,31svh);height:min(67vw,280px,31svh);min-width:194px;min-height:194px;margin:2px 0}.message{margin:3px 0;height:19px}.start-button{height:43px;min-height:41px}.hint{margin-top:6px}footer{margin-top:7px}}
@media(max-width:350px){.app{padding-left:14px;padding-right:14px}.board-wrap{min-width:200px;min-height:200px}.scorebar{gap:15px}.heading h1{font-size:27px}.best-cell span{letter-spacing:.08em}}
@media(max-height:590px){.heading h1{font-size:24px}.heading p{font-size:10px}.scorebar{margin:5px 0}.board-wrap{width:min(58vw,232px,30svh);height:min(58vw,232px,30svh);min-width:176px;min-height:176px}.pad{box-shadow:0 4px 0 #0008,inset 0 2px 1px #ffffff67}.hub{width:28%}.message{font-size:10px;margin:1px 0 3px}.start-button{height:38px;min-height:38px}.hint{font-size:8px;margin-top:4px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}