@font-face{font-family:Fredoka;src:url('/public/fonts/font-5.ttf')}@font-face{font-family:DM;src:url('/public/fonts/font-0.ttf')}*{box-sizing:border-box}body{margin:0;background:#10232b;color:#e5e8cf;font-family:DM,system-ui}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;font:inherit}a{color:#91afa9;text-decoration:none;font-size:12px}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #f5c976;outline-offset:4px}header{max-width:560px;margin:auto;height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 28px}header strong{font:28px Fredoka;letter-spacing:-1px}header strong>span{color:#efc177}header small{font-size:14px;padding-left:6px}header button,.topline button{background:none;border:0;color:#99b5b0;font-size:11px}main{position:relative;max-width:480px;height:calc(100dvh - 105px);min-height:540px;max-height:1000px;margin:auto;border:1px solid #30504f;border-radius:27px;overflow:hidden;background:#17343c}.topline{position:absolute;top:22px;left:25px;right:25px;display:flex;justify-content:space-between;align-items:center;z-index:2;font-size:8px;letter-spacing:1.8px;color:#92b1a7}.score{position:absolute;top:65px;text-align:center;width:100%;pointer-events:none;z-index:2}.score strong{display:block;font:60px Fredoka}.score>span{font-size:8px;letter-spacing:2px;color:#94b8a9}canvas{display:block;width:100%;height:100%;touch-action:manipulation}.bottom{position:absolute;left:0;right:0;bottom:24px;text-align:center}.bottom p{font-size:11px;color:#a6bfb1;margin:0 20px 17px}.bottom button,.overlay button,dialog button{background:#efc177;border:1px solid #ffda9c;border-radius:13px;color:#263d37;padding:16px 23px;box-shadow:0 4px #b98e4c;font-weight:700;min-width:240px;font-size:16px;display:flex;justify-content:space-between;margin:0 auto}.bottom small,.overlay small{display:block;font-size:9px;color:#8aa9a0;margin-top:15px}.overlay{z-index:4;position:absolute;inset:0;display:flex;align-items:center;flex-direction:column;text-align:center;background:linear-gradient(#17343c 0%,#17343ced 36%,#17343c00 70%,#17343cbb);padding:65px 24px 24px}.tag{font-size:9px;letter-spacing:2px;color:#a3b9a8}h1{font:48px/1.08 Fredoka;margin:20px 0 16px;letter-spacing:-1px}h1 em{color:#efc177;font-style:normal}.overlay p{font-size:13px;line-height:1.8;color:#a6bdb3}.overlay button{margin-top:auto}.overlay small{margin-top:20px}dialog{background:#203f43;color:#e5e8cf;border:1px solid #4b6a5e;border-radius:24px;max-width:390px;width:calc(100% - 36px);padding:36px 26px;text-align:center}dialog::backdrop{background:#091c27bb;backdrop-filter:blur(6px)}dialog h2{font:36px Fredoka;margin:12px 0}dialog p{font-size:13px;color:#abc2b5;line-height:1.7}dialog .number{font:80px Fredoka;color:#efc177}dialog button{margin-top:18px}dialog .quiet{background:none;color:#b4cabe;border:1px solid #61796b;box-shadow:none;font-size:12px;padding:12px 23px}.notice{font-size:11px;color:#eac98e;min-height:20px;margin-top:12px}[hidden]{display:none!important}@media(max-width:720px){header{height:72px;padding:0 20px}header strong{font-size:24px}header a{font-size:10px}header button{font-size:10px}main{margin:0 12px;height:calc(100dvh - 85px);border-radius:22px}h1{font-size:43px}.overlay{padding-top:63px}.bottom p{font-size:10px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

.welcome .score,.welcome .bottom,.welcome .topline{visibility:hidden}
