:root{color-scheme:dark;--ink:#f6ead3;--muted:#c0c1a9;--gold:#e1c58c;--accent:#d9ba7c;--button-ink:#2b291c;--surface:#102b24f0;--panel:#122e26e8;--line:#bfa47754;--soft:#f8efd611;--shade:#0005;--top:0px;--right:0px;--bottom:0px;--left:0px;font-family:'Avenir Next',Avenir,ui-sans-serif,system-ui,sans-serif;font-size:14px}
:root[data-theme=light]{color-scheme:light;--ink:#263c31;--muted:#53654f;--gold:#74613c;--accent:#345b43;--button-ink:#fff5df;--surface:#fffdf3f2;--panel:#f4f2e6ed;--line:#87795655;--soft:#29462f0c;--shade:#2b351624}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:#102b24;color:var(--ink)}body{touch-action:manipulation}button,select{font:inherit}button{border:0;appearance:none;background:none;color:inherit;min-width:44px;min-height:44px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .16s ease,background .16s,border-color .16s;user-select:none}button:hover{background:var(--soft)}button:active{transform:scale(.96)}button:disabled{cursor:default;opacity:.4}button:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button svg{pointer-events:none}svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}#table{position:fixed;inset:0;width:100%;height:100%;touch-action:none;outline:none}#shell{position:fixed;inset:0;pointer-events:none}#shell button{pointer-events:auto}#topbar{position:absolute;top:calc(16px + var(--top));left:calc(25px + var(--left));right:calc(25px + var(--right));display:flex;align-items:center;gap:20px;height:72px;border:1px solid var(--line);border-radius:19px;padding:10px 16px;background:linear-gradient(180deg,var(--panel),var(--surface));box-shadow:0 14px 30px var(--shade),inset 0 1px 0 #fff2}#brand{display:flex;gap:12px;align-items:center;text-align:left;padding:4px 10px 4px 1px;max-width:330px;min-height:48px}#brand>svg{color:var(--gold);width:42px;height:42px;stroke-width:1;fill:color-mix(in srgb,var(--gold) 30%,transparent);flex-shrink:0}#brand b{font:bold 27px/1.02 Georgia,'Times New Roman',serif;letter-spacing:-.6px;display:block;color:var(--ink)}#brand small{display:block;font-size:9px;letter-spacing:2.3px;color:var(--muted);margin-top:7px}#statsbar{display:flex;align-items:center;flex:1;justify-content:center;gap:0}#statsbar>div{border-left:1px solid var(--line);padding:0 25px;min-width:100px}#statsbar small{display:block;font-size:10px;color:var(--muted);letter-spacing:1px}#statsbar b{font:500 26px/1.2 Georgia,serif;display:block;color:var(--gold);font-variant-numeric:tabular-nums;margin-top:2px}#nav{margin-left:auto;display:flex;gap:6px}.nav-btn{display:flex;flex-direction:column;align-items:center;gap:5px;padding:4px 10px;border-radius:11px;min-width:60px}.nav-btn svg{color:var(--gold)}.nav-btn span{font-size:10px}.icon-only{width:44px;min-width:44px;border-radius:12px;display:grid;place-items:center;color:var(--gold);border:1px solid var(--line)}
#controls{position:absolute;bottom:calc(42px + var(--bottom));left:50%;transform:translateX(-50%);display:flex;gap:9px;justify-content:center;max-width:calc(100% - 24px);width:640px}.tool-btn{display:flex;gap:9px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:14px;min-height:49px;padding:10px 17px;background:var(--panel);box-shadow:0 8px 20px var(--shade);font-size:12px;white-space:nowrap}.tool-btn svg{color:var(--gold);width:20px;height:20px}#statusline{position:absolute;left:15px;right:15px;bottom:calc(14px + var(--bottom));text-align:center;color:var(--muted);font-size:12px;line-height:1.4}#left-panel,#right-panel{position:absolute;top:145px;width:168px}.playing #left-panel{left:45px}.playing #right-panel{right:45px}.info-card{border:1px solid var(--line);border-radius:17px;background:var(--panel);padding:20px 17px;box-shadow:0 12px 25px var(--shade);margin-bottom:14px}.info-card small{color:var(--muted);font-size:11px;display:block;line-height:1.6}.info-card b{display:block;font:500 29px/1.3 Georgia,serif;margin:8px 0;color:var(--gold)}.info-card p{font-size:12px;line-height:1.6;margin:12px 0 0;color:var(--muted)}.info-card h3{font-size:12px;font-weight:600;margin:0 0 15px;color:var(--muted)}.info-card .pairs{display:grid;grid-template-columns:1fr 1fr;gap:10px;font:17px Georgia,serif;color:var(--gold)}.line-progress{height:4px;border-radius:5px;background:var(--soft);overflow:hidden;margin-top:15px}.line-progress i{display:block;height:100%;background:var(--gold);transition:width .25s}.eyebrow{font-size:10px;font-weight:650;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:15px}.menu-view #left-panel{left:max(50px,calc((100vw - 1420px)/2 + 50px));top:50%;transform:translateY(-43%);width:340px}.menu-view #right-panel{display:none}.menu-view #statsbar{display:none}.menu-view h1{font:500 clamp(30px,3.6vw,53px)/1.06 Georgia,serif;letter-spacing:-1.8px;margin:16px 0 20px}.menu-view .lead{font-size:14px;color:var(--muted);line-height:1.65;margin:0 0 24px;max-width:310px}.mode-grid{display:flex;flex-direction:column;gap:8px;margin:0 0 20px}.mode-card{border:1px solid var(--line);border-radius:15px;background:var(--panel);display:flex;align-items:center;gap:12px;padding:11px 14px;text-align:left;min-height:57px}.mode-card strong{font-weight:600;font-size:13px;display:block;margin-bottom:4px}.mode-card small{display:block;font-size:10px;color:var(--muted);line-height:1.35}.mode-card svg{flex-shrink:0;color:var(--gold)}.mode-card.active{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);background:color-mix(in srgb,var(--panel) 93%,var(--gold))}.primary{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 82%,white),var(--accent));color:var(--button-ink);padding:14px 20px;border-radius:14px;min-height:54px;font-weight:650;font-size:14px;box-shadow:0 5px 0 color-mix(in srgb,var(--accent) 70%,black),0 13px 25px var(--shade);border:1px solid #ffffff30}.primary:hover{background:var(--accent)}.primary svg{margin-left:auto}.primary span{flex:1}.secondary{display:flex;align-items:center;justify-content:center;gap:9px;min-height:47px;border:1px solid var(--line);border-radius:12px;background:var(--soft);padding:9px 14px;font-size:12px}.text-link{display:block;margin:12px auto 0;color:var(--gold);font-size:11px;text-decoration:underline;text-underline-offset:5px;min-height:44px;padding:5px}.menu-fine{font-size:10px;color:var(--muted);margin:21px 0 0;letter-spacing:1.1px}.menu-view #controls{width:auto;bottom:24px}.menu-view #statusline{display:none}
#overlay{position:fixed;inset:0;z-index:10;background:#04191294;backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;padding:20px}#overlay[hidden]{display:none}#dialog{width:min(100%,550px);max-height:calc(100dvh - 40px);overflow:auto;overscroll-behavior:contain;border:1px solid var(--line);background:var(--surface);border-radius:25px;box-shadow:0 30px 90px #0008;padding:25px;outline:0;animation:arrive .22s ease-out;scrollbar-width:thin}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.dialog-head h2{margin:0;font:500 27px/1.1 Georgia,serif;letter-spacing:-.6px}.dialog-head button{flex:0 0 44px}.dialog-body p{color:var(--muted);line-height:1.7;font-size:13px;margin:12px 0 18px}.dialog-body h3{font-weight:600;font-size:14px;line-height:1.5;color:var(--gold);margin:20px 0 8px}.dialog-body .primary{margin:20px 0 14px}.dialog-body>.secondary{width:100%;margin-top:9px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid var(--line);font-size:13px}.settings-row select{border:1px solid var(--line);border-radius:10px;padding:8px 10px;height:44px;width:180px;max-width:53%;color:var(--ink);background:var(--panel);font-size:12px}.settings-row select option{background:var(--surface);color:var(--ink)}.rule-values{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}.rule-values b{font:23px Georgia,serif;text-align:center;padding:16px 3px;background:var(--soft);border:1px solid var(--line);border-radius:11px;color:var(--gold)}.score-large{font:64px/1.1 Georgia,serif;color:var(--gold);text-align:center;margin:16px 0}.result-symbol{display:flex;justify-content:center;color:var(--gold);margin:10px 0}.result-symbol svg{width:55px;height:55px}.result-small{display:flex;justify-content:center;gap:30px;margin:15px 0}.result-small small{display:block;color:var(--muted);font-size:11px}.result-small b{display:block;margin-top:5px;font-size:17px}.result-body{text-align:center}.stars{font:32px Georgia,serif;color:var(--gold);letter-spacing:6px;margin:12px 0}.levels{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.level-card{border:1px solid var(--line);border-radius:13px;min-height:67px;background:var(--soft);padding:9px 5px}.level-card strong{font:25px Georgia,serif;display:block}.level-card small{font-size:11px;color:var(--gold);display:block;margin-top:3px;letter-spacing:2px}.level-card.active{border-color:var(--gold)}.leader{display:grid;grid-template-columns:30px 1fr 55px;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}.leader span{overflow:hidden;text-overflow:ellipsis}.leader b:last-child{text-align:right}.mini-note{font-size:10px!important;color:var(--muted)!important}.dialog-body #send-status{display:block;min-height:22px;line-height:1.5;font-size:11px;color:var(--muted);text-align:center}.keytext{font-size:11px!important}.buttons-row{display:flex;gap:10px}.buttons-row>*{flex:1}#toast{position:fixed;left:50%;bottom:calc(111px + var(--bottom));z-index:20;transform:translate(-50%,8px);opacity:0;max-width:min(550px,calc(100vw - 28px));padding:12px 19px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 8px 25px var(--shade);text-align:center;font-size:12px;line-height:1.5;pointer-events:none;transition:opacity .18s,transform .18s}#toast.visible{opacity:1;transform:translate(-50%,0)}.sr-only{position:fixed;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}noscript{position:fixed;inset:25px auto auto 25px;background:#fff;color:#14241e;padding:25px;z-index:100}@keyframes arrive{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:1150px){.playing #left-panel,.playing #right-panel{display:none}#topbar{gap:10px;padding:9px 12px}#brand{max-width:255px}#brand b{font-size:25px}#statsbar>div{min-width:75px;padding:0 16px}.menu-view #left-panel{left:35px;width:310px}.menu-view h1{font-size:38px}.nav-btn{min-width:51px;padding:4px 8px}.nav-btn span{font-size:10px}}
@media(max-width:850px){#brand b{font-size:21px}#brand small{font-size:8px;letter-spacing:1.4px}#brand>svg{width:34px;height:34px}.nav-btn span{display:none}.nav-btn{min-width:44px;padding:8px}#statsbar>div{padding:0 12px;min-width:63px}#statsbar b{font-size:22px}.menu-view #left-panel{width:265px;left:25px}.menu-view h1{font-size:34px}.menu-view .lead{font-size:12px}.mode-card{padding:9px 12px}.mode-card strong{font-size:12px}}
@media(max-width:680px) and (min-height:501px){#topbar{top:calc(10px + var(--top));left:12px;right:12px;height:56px;gap:8px;padding:6px 10px;border-radius:14px}#brand{gap:7px;max-width:205px;padding:1px;flex:1}#brand b{font-size:18px;line-height:1.02;letter-spacing:-.3px}#brand small{display:none}#brand>svg{width:27px;height:31px}#nav{gap:2px}.nav-btn{width:44px;min-width:44px;padding:8px}.nav-btn.extra{display:none}#statsbar{position:absolute;top:67px;left:3px;right:3px;height:43px;justify-content:space-around}#statsbar>div{min-width:75px;flex:1;padding:0 12px}#statsbar>div:first-child{border:0}#statsbar b{font-size:24px}#statsbar small{font-size:10px}#controls{bottom:calc(44px + var(--bottom));gap:6px;width:calc(100% - 24px)}.tool-btn{padding:8px 5px;gap:5px;flex:1;min-width:0;flex-direction:column;font-size:10px;min-height:55px;border-radius:13px}.tool-btn svg{width:21px;height:21px}#statusline{font-size:10px;bottom:calc(8px + var(--bottom));min-height:27px;display:flex;align-items:center;justify-content:center}.menu-view #left-panel{top:86px;left:18px;width:calc(100% - 36px);transform:none;text-align:center}.menu-view .eyebrow{font-size:9px;margin-bottom:9px;letter-spacing:2px}.menu-view h1{font-size:35px;letter-spacing:-1px;margin:0 0 9px}.menu-view .lead{font-size:11px;line-height:1.5;max-width:none;margin:0 0 14px}.mode-grid{flex-direction:row;gap:6px;margin:0 0 13px}.mode-card{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:8px 5px;min-height:65px;gap:4px;border-radius:12px}.mode-card strong{font-size:10px;margin:0;line-height:1.4}.mode-card small{display:none}.mode-card svg{width:20px;height:20px}.menu-view .primary{min-height:49px;font-size:13px;padding:9px 17px}.menu-view .text-link{margin:5px auto 0;min-height:40px;font-size:10px}.menu-fine{display:none}.menu-view #controls{bottom:14px;width:calc(100% - 30px)}.menu-view .tool-btn{flex-direction:row;min-height:46px;font-size:11px;white-space:normal;padding:6px}.dialog-head h2{font-size:24px}#overlay{padding:12px}#dialog{padding:18px;max-height:calc(100dvh - 24px);border-radius:20px}.dialog-body p{font-size:12px}.settings-row{font-size:12px}.settings-row select{font-size:11px}.levels{gap:7px}.level-card{min-height:59px}.score-large{font-size:55px}.rule-values b{font-size:20px}.result-small{gap:24px}}
@media(max-width:680px) and (max-height:730px) and (min-height:501px){.menu-view #left-panel{top:79px}.menu-view .eyebrow{display:none}.menu-view h1{font-size:28px;margin:0 0 7px}.menu-view .lead{margin-bottom:10px;font-size:10px}.mode-card{min-height:55px}.mode-grid{margin-bottom:10px}.menu-view .text-link{min-height:34px}.menu-view .primary{min-height:46px}}
@media(max-height:500px){#topbar{top:5px;left:10px;right:10px;height:48px;border-radius:12px;padding:3px 12px;gap:15px}#brand{max-width:225px;min-height:44px}#brand b{font-size:20px}#brand small{display:none}#brand>svg{width:29px;height:32px}#statsbar>div{padding:0 12px;min-width:65px}#statsbar small{font-size:10px}#statsbar b{font-size:21px}#nav{gap:1px}.nav-btn{padding:8px;min-width:44px;width:44px}.nav-btn span{display:none}.nav-btn.extra{display:none}.playing #left-panel,.playing #right-panel{display:none}#controls{bottom:21px;width:550px;gap:7px}.tool-btn{min-height:44px;border-radius:11px;padding:7px 13px;font-size:11px}#statusline{bottom:3px;font-size:10px}.menu-view #left-panel{left:27px;top:68px;transform:none;width:300px}.menu-view .eyebrow,.menu-view .lead,.menu-fine{display:none}.menu-view h1{font-size:28px;margin:0 0 14px}.menu-view .mode-grid{flex-direction:row;gap:5px;margin-bottom:13px}.mode-card{flex-direction:column;text-align:center;flex:1;justify-content:center;padding:5px;min-height:65px;gap:5px}.mode-card strong{font-size:10px}.mode-card small{display:none}.mode-card svg{width:18px;height:18px}.menu-view .primary{min-height:44px;padding:9px 14px;font-size:12px}.menu-view .text-link{font-size:10px;margin-top:7px;min-height:38px}.menu-view #controls{left:177px;width:300px;bottom:13px;gap:5px}.menu-view .tool-btn{font-size:10px;padding:5px 9px}.menu-view .tool-btn svg{width:16px}#overlay{padding:10px}#dialog{max-height:calc(100dvh - 20px);padding:18px}.dialog-head{margin-bottom:12px}.dialog-head h2{font-size:24px}.result-symbol{display:none}.score-large{font-size:44px;margin:8px}.result-body p{font-size:12px;margin:7px 0}.result-small{margin:7px 0}.stars{font-size:22px;margin:5px}.dialog-body .primary{min-height:44px;margin:12px 0 9px}.dialog-body>.secondary{min-height:44px;margin-top:6px}.levels{grid-template-columns:repeat(6,1fr)}.level-card{min-height:54px}#toast{bottom:78px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
#brand small{font-size:10px}.menu-view .eyebrow{font-size:10px}@media(max-width:850px){#brand small{font-size:10px}}@media(max-width:680px){.menu-view .eyebrow{font-size:10px}}