@font-face{font-family:Bebas;src:url(./bebas-CfkO-nQt.ttf) format("truetype");font-display:swap}:root{--bg-game: #606468;--bg-menu: #313d65;--white: #ffffff;--blue: #398ce3;--button: #ffc105;--button-back: #999999;--score: #ffc106;--pause-text: #804100;--pause-btn-text: #785447;--tablo: #808080}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#1b2030;font-family:Bebas,Segoe UI,sans-serif;-webkit-tap-highlight-color:transparent}#app{position:fixed;inset:0;overflow:hidden}.stage{position:absolute;left:50%;top:50%;width:1080px;height:1920px;transform-origin:center center;will-change:transform}.screen{position:absolute;inset:0;display:flex;flex-direction:column}.menu{background:var(--bg-menu);align-items:center}.menu-logo{width:100%;display:block;margin-top:66px}.menu-balls{position:absolute;top:659px;left:0;width:100%;display:flex;justify-content:center;align-items:flex-start}.menu-ball{width:227px;height:227px;margin-left:-76px}.menu-ball:first-child{margin-left:0}.menu-buttons{display:flex;flex-direction:column;align-items:center;gap:0;width:918px;margin-top:auto;margin-bottom:206px;transform:translate(-6px)}.menu-btn{display:flex;align-items:center;justify-content:center;width:100%;height:248px;padding:0 0 26px;border:none;background-color:transparent;background-size:100% 100%;background-repeat:no-repeat;color:var(--white);font-family:Bebas,sans-serif;font-size:55px;line-height:1;letter-spacing:2px;cursor:pointer}.menu-btn:nth-child(2){margin-top:-50px}.menu-btn:nth-child(3){margin-top:-3px}.menu-btn:active{transform:scale(.98)}.game{background:var(--bg-game)}.toolbar{display:flex;justify-content:space-between;align-items:center;padding:45px 45px 0;transform:translateY(calc(-1 * var(--letterbox-y, 0px)))}.toolbar-center{display:flex;gap:23px}.icon-btn{display:grid;place-items:center;width:100px;height:100px;border:none;border-radius:10px;background:var(--button-back);color:var(--white);cursor:pointer}.icon-btn[data-act=restart]{margin-left:43px}.icon-btn svg{width:62px;height:62px}.icon-btn:disabled{opacity:.4;cursor:default}.info{display:flex;justify-content:space-between;align-items:flex-end;width:100%;height:200px;padding:0 10px 42px;margin-top:auto}.panel{display:flex;flex-direction:column;align-items:center}.panel-score,.panel-time{width:330px}.panel-time-value{transform:translate(15px)}.panel-title{font-size:50px;color:var(--white);letter-spacing:1px}.panel-value{font-size:94px;line-height:1;color:var(--score)}.panel-next{position:relative;min-width:379px;padding:24px 24px 10px;margin-bottom:-7px;border-radius:14px;background:#808080cc;align-items:center}.mode-img{width:156px;height:auto;margin-bottom:15px}.next-balls{display:flex}.next-ball{width:88px;height:88px;transform:scale(1.5)}.next-ball+.next-ball{margin-left:9px}.next-ring{position:absolute;top:8px;right:8px;width:24px;height:24px}.next-ring svg{width:100%;height:100%}.ring-bg{fill:none;stroke:#ffffff40;stroke-width:2}.ring-fg{fill:none;stroke:var(--button);stroke-width:3;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .3s linear}.board-wrap{display:flex;justify-content:center}.board-host{width:1064px;height:1064px}.board-host canvas{display:block}.controls{display:flex;justify-content:center;gap:221px;margin-top:31px}.btn{height:100px;min-width:220px;padding:0 30px;border:none;border-radius:10px;background:var(--button);color:var(--pause-btn-text);font-family:Bebas,sans-serif;font-size:38px;letter-spacing:2px;cursor:pointer;box-shadow:0 6px 10px #00000047}.btn:disabled{opacity:.5;cursor:default}.game:after{content:"";display:block;height:175px}.pause-overlay{position:absolute;inset:0;top:calc(-1 * var(--letterbox-y, 0px));bottom:calc(-1 * var(--letterbox-y, 0px));display:none;align-items:center;justify-content:center;z-index:20}.pause-overlay:before{content:"";position:absolute;inset:0;background:#00000080}.pause-box{position:relative;width:70%;height:412px;display:flex;align-items:center;justify-content:center;background:var(--white);box-shadow:0 6px 10px #00000047}.pause-text{font-size:143px;color:var(--pause-text);letter-spacing:4px;animation:blink .8s ease-in-out infinite alternate}.dialog-overlay{position:absolute;inset:0;top:calc(-1 * var(--letterbox-y, 0px));bottom:calc(-1 * var(--letterbox-y, 0px));display:flex;align-items:center;justify-content:center;padding-top:67px;background:#0009;z-index:50}.dialog{width:80%;padding:44px 77px 82px;background:var(--white);display:flex;flex-direction:column;gap:44px}.dialog-title{padding-bottom:15px;font-size:84px;color:var(--pause-text);text-align:center;letter-spacing:3px}.dialog-buttons{display:flex;flex-direction:column;gap:32px}.dialog:not(.row) .dialog-btn:last-child{margin-top:44px}.dialog.row .dialog-buttons{flex-direction:row;justify-content:center;gap:40px}.dialog-btn{height:100px;border:none;border-radius:6px;background:var(--blue);color:var(--white);font-family:Bebas,sans-serif;font-size:42px;letter-spacing:2px;cursor:pointer;box-shadow:0 6px 10px #00000047}.dialog-btn.mode{background:var(--blue);color:var(--white)}.dialog-btn.mode.highlight{background:var(--button);color:var(--white)}.dialog-btn.primary{background:var(--button);color:var(--pause-btn-text)}.dialog-btn.cancel{background:var(--button-back);color:var(--white)}.dialog.row .dialog-btn{width:320px;font-size:56px}.toast{position:absolute;left:50%;top:70%;transform:translate(-50%,-50%) scale(.9);padding:20px 30px;border-radius:48px;background:#aaa;color:var(--white);font-size:52px;letter-spacing:2px;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;z-index:60}.toast.visible{opacity:1;transform:translate(-50%,-50%) scale(1)}@keyframes blink{0%{opacity:0}to{opacity:1}}.next-ball.pop{animation:pop .3s ease}@keyframes pop{0%{transform:scale(1.5)}50%{transform:scale(.6)}to{transform:scale(1.5)}}#rotate-hint{position:fixed;inset:0;z-index:1000;display:none;flex-direction:column;align-items:center;justify-content:center;gap:44px;background:#1b2030;color:var(--white);text-align:center;padding:40px}#rotate-hint.show{display:flex}#rotate-hint .ri-phone{position:relative;width:92px;height:152px;border:7px solid var(--white);border-radius:16px;transform-origin:center center;animation:ri-rotate 1.8s ease-in-out infinite}#rotate-hint .ri-phone:after{content:"";position:absolute;left:50%;bottom:9px;width:34px;height:6px;background:var(--white);border-radius:3px;transform:translate(-50%)}#rotate-hint .ri-text{font-size:48px;line-height:1.2;letter-spacing:1px}@keyframes ri-rotate{0%,15%{transform:rotate(90deg)}55%,to{transform:rotate(0)}}