:root{font-family:ui-rounded,"Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;color:#f8f2ff;color-scheme:dark;--orange:#ffad50;--red:#ff456c}
*{box-sizing:border-box}body{margin:0;background:#101120;-webkit-tap-highlight-color:transparent;min-height:100svh}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #ffcd81;outline-offset:4px}
.app{min-height:100svh;max-width:760px;margin:auto;padding:12px clamp(12px,4vw,24px) max(15px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px;background:radial-gradient(ellipse at 50% 32%,#32233f 0,#1a192d 60%,#121320 100%)}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px}.identity{display:flex;align-items:center;gap:11px}.logo{display:grid;place-items:center;background:linear-gradient(150deg,#fe9d65,#e4436b);box-shadow:0 6px 22px #ff5d6a44;width:53px;height:53px;border-radius:16px;font-size:28px}h1{margin:0;font-size:clamp(22px,6vw,31px);letter-spacing:-.06em}.identity small{font-size:9px;letter-spacing:.13em;color:#a994b1;font-weight:900}.sound{width:43px;height:43px;border-radius:13px;border:1px solid #ffffff20;background:#ffffff10;font-size:24px;color:#ffc389}
.stats{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:7px}.stats>div{background:#ffffff0d;border:1px solid #ffffff16;border-radius:14px;text-align:center;padding:13px 3px;min-width:0}.stats span{display:block;font-size:9px;font-weight:900;color:#ad9fb3;letter-spacing:.08em}.stats strong{display:block;font-size:clamp(18px,5.5vw,30px);font-weight:1000;letter-spacing:-.045em;color:#ffd09a;font-variant-numeric:tabular-nums}.stats>div:nth-child(2) strong{color:#fff}
.stage{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:10px;padding:20px clamp(12px,3vw,27px);background:radial-gradient(ellipse at 50% 40%,#3d283f,#231d32 68%,#1c1a2b);border:1px solid #ffaca033;border-radius:26px;box-shadow:0 15px 56px #0009;min-height:clamp(440px,66svh,700px);overflow:hidden;isolation:isolate}
.eyebrow{text-align:center;font-size:10px;letter-spacing:.27em;color:#a898b4;font-weight:900}.title-row{display:flex;justify-content:center;align-items:center;gap:9px;min-height:48px}.title-row h2{margin:0;font-size:clamp(23px,7vw,37px);letter-spacing:-.055em;font-weight:1000;color:#fff}.streak{font-size:11px;color:#fff2a2;padding:5px 7px;background:#cc5d3344;border-radius:5px;font-weight:1000;white-space:nowrap}
.help{font-size:11px;text-align:center;color:#bdaaba;line-height:1.6;margin:0;min-height:36px}
.gauge{position:relative;padding:20px 4px 12px;margin:12px 0}.numbers{display:flex;justify-content:space-between;font-size:11px;font-weight:900;color:#a99bac;margin-bottom:22px}.numbers strong{color:#ffe19c;font-size:12px;letter-spacing:.13em}
.track{width:100%;height:clamp(105px,18svh,160px);position:relative;border:2px solid #f9c17b55;border-radius:18px;display:block;background:linear-gradient(180deg,#221e30 0,#171c2a 68%,#20202d);box-shadow:inset 0 2px 18px #0008,0 0 29px #e17e4b26;touch-action:manipulation;padding:0}
.ticks{position:absolute;inset:0;border-radius:16px;background:repeating-linear-gradient(90deg,transparent 0 calc(5% - 1px),#f9c49429 calc(5% - 1px) 5%);pointer-events:none}
.target{position:absolute;left:var(--target,50%);top:0;height:100%;width:clamp(13px,3vw,23px);transform:translateX(-50%);background:linear-gradient(90deg,#ffad4f44,#ffecb9e6,#ffad4f44);box-shadow:0 0 16px #ffa63cc5,0 0 39px #ffc16f7e;pointer-events:none;border-left:1px solid #fff5;border-right:1px solid #fff5}.target b{position:absolute;top:-21px;left:50%;transform:translateX(-50%);font-size:11px;color:#ffe2a5;white-space:nowrap}
.needle{position:absolute;left:var(--pos,0%);top:-3%;height:106%;width:6px;transform:translateX(-50%);background:#fff;border-radius:5px;box-shadow:0 0 0 2px #e6265f,0 0 17px #ff4d8d,0 0 30px #ff4677ad;pointer-events:none;will-change:left}.needle i{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-style:normal;font-size:21px;color:#ff5579;filter:drop-shadow(0 3px #0006)}
.glow{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}.track.hit-perfect{animation:perfect-flash .53s linear}.track.hit-perfect .glow{animation:glow .6s}.track.hit-miss{animation:hit-shake .28s}
.marks{display:flex;justify-content:space-between;color:#a08eab;font-size:10px;margin-top:15px;font-weight:800}
.result{text-align:center;min-height:132px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}.result-eyebrow{font-size:10px;letter-spacing:.2em;color:#ae93b0;font-weight:950}.result strong{font-size:clamp(38px,10vw,62px);font-weight:1000;letter-spacing:-.07em;line-height:1.05;color:#ffdcaa;font-variant-numeric:tabular-nums}.result h3{font-size:18px;color:#fff;margin:0;font-weight:1000}.result p{margin:2px 0;color:#bca5b5;font-size:11px}
.result.perfect strong{color:#ffed9d;text-shadow:0 0 25px #ffe891}.result.miss strong{color:#ff7083}
.stop{position:relative;z-index:3;border:0;border-radius:20px;min-height:78px;background:linear-gradient(120deg,#ffba62,#ff7855 55%,#f34670);color:#261528;font-weight:1000;box-shadow:0 9px 0 #a53751,0 15px 25px #ff5b7744;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;font-size:clamp(22px,6.5vw,29px);transition:transform .13s,box-shadow .13s;touch-action:manipulation}.stop:active{transform:translateY(5px);box-shadow:0 4px 0 #a53751,0 7px 18px #ff5b7744}.stop:disabled{opacity:.54;filter:saturate(.5);transform:none}
.stop small{font-size:10px;letter-spacing:.08em;font-weight:800;opacity:.72}
.round-progress{display:flex;justify-content:center;gap:9px;padding:8px}.round-progress span{width:15px;height:7px;border-radius:15px;background:#6d596f;transition:background .2s,width .2s}.round-progress span.active{background:#ffbf77;width:30px}.round-progress span.done{background:#fa6481}
.bottom{display:flex;flex-direction:column;gap:12px}.best{font-size:12px;color:#a794b4;font-weight:900;display:flex;justify-content:space-between;padding:0 5px}.best b{color:#ffd09a}.best span{font-size:10px}
.buttons{display:flex;gap:10px}.buttons button{flex:1;min-height:43px;border:1px solid #ffffff24;border-radius:12px;font-size:13px;font-weight:900;background:#242439;color:#d5c2d8}.buttons .share{background:#5c345c;color:#fff;border-color:#9f5790}
.fx{position:absolute;z-index:4;inset:0;pointer-events:none;overflow:hidden}.fx-star{position:absolute;left:var(--x);top:var(--y);font-size:var(--s);color:#ffe4a2;animation:star .86s ease-out forwards}
footer{text-align:center;font-size:10px;color:#99899f}
@keyframes glow{0%{opacity:.8}100%{opacity:0}}@keyframes perfect-flash{0%,100%{filter:none}35%{filter:brightness(1.75)}}@keyframes hit-shake{25%{transform:translateX(-3px)}60%{transform:translateX(3px)}}
@keyframes star{0%{opacity:1;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.5)}}
@media(max-width:390px){.app{gap:9px;padding:9px}.stage{padding:12px 9px;min-height:60svh}.track{height:100px}.result{min-height:120px}.stop{min-height:69px}.gauge{margin:6px 0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Global session count and an independent, after-game ad: never cover controls. */
.community{border:1px solid #ffbb9650;background:#ffffff0d;border-radius:19px;padding:15px;text-align:center;color:#e8daf2}
.community-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:900;font-size:12px}
.community-head span{font-size:10px;color:#d2b2ae;white-space:nowrap}
.community-number{margin:7px 0;font-size:16px;color:#dfcee1}
.community-number strong{font-size:clamp(30px,9vw,43px);color:#ffd09a;font-variant-numeric:tabular-nums}
.community-day{border-top:1px solid #ffffff25;padding-top:7px;font-size:12px;font-weight:800}
.community-day b{font-size:16px;color:#ffa2b1}.community-day span{font-size:10px;color:#b5a5c5;margin-left:6px}
.community small{display:block;font-size:10px;color:#b5a6bb;line-height:1.6;margin-top:8px}
.amazon-promo[hidden]{display:none!important}
.amazon-promo{width:min(calc(100% - 22px),760px);margin:16px auto 24px;padding:12px;border-radius:17px;border:1px solid #ffffff22;background:#232338;color:#c5bdd2}
.amazon-ad-label{display:inline-block;padding:4px 7px;background:#382b48;color:#ffe1b0;border-radius:7px;font-size:10px;font-weight:900;margin-bottom:7px}
.amazon-banner a,.amazon-banner picture,.amazon-banner img{width:100%;height:auto;display:block;border-radius:10px;overflow:hidden}
.amazon-disclosure{font-size:10px;line-height:1.6;color:#b7a9c4;margin:8px 0 0}
@media(max-width:540px){.stage{min-height:460px;padding:12px 12px}.track{height:clamp(130px,20svh,200px)}.stop{min-height:80px}.gauge{margin:5px 0}.app{gap:11px}}