:root{--panel-bg:#090d16d1;--line:#ffffff1a;--text:#eef2f8;--dim:#9aabc7;--faint:#7f93b5;--accent:#3b7cf5;--accent2:#6aa0ff;--gold:#ffcf5a;--top:#ff6b5a;--back:#4da3ff;--side:#ffd34d;--good:#7be38f;--bad:#ff7a6b;--warn:#ffb547}*{box-sizing:border-box}html,body{height:100%;color:var(--text);background:#070a10;margin:0;font:14px/1.45 system-ui,sans-serif;overflow:hidden}#view{touch-action:none;width:100vw;height:100vh;display:block;position:fixed;inset:0}.touch-only,body.touch-primary .mouse-only{display:none!important}body.touch-primary .howto.touch-only{display:flex!important}body.touch-primary .tagline.touch-only{display:block!important}body.touch-primary.screen-play #touchcontrols{display:flex!important}body.touch-primary #guide .mouse{display:none}.hidden{display:none!important}button{font:inherit;color:inherit}.btn{color:var(--text);cursor:pointer;background:#ffffff0f;border:1px solid #ffffff24;border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:11px 16px;font:600 14px/1 system-ui;transition:background .15s,transform .1s;display:inline-flex}.btn:hover{background:#ffffff1c}.btn:active{transform:translateY(1px)}.btn:focus-visible,.icon:focus-visible,.seg input:focus-visible+span,.switch input:focus-visible+span,.tabs button:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}.btn.primary{background:linear-gradient(#4a87ff,#2f6fdd);border-color:#5a92ff;box-shadow:0 8px 24px #2f6fdd66}.btn.primary:hover{background:linear-gradient(#5a92ff,#3a78e6)}.btn.big{letter-spacing:.02em;border-radius:14px;padding:18px 34px;font-size:22px}.icon{background:var(--panel-bg);border:1px solid var(--line);width:40px;height:38px;color:var(--dim);cursor:pointer;border-radius:10px;place-items:center;padding:0;font-size:16px;display:grid}.icon:hover{color:var(--text)}.seg{border:1px solid var(--line);background:#ffffff0d;border-radius:10px;flex:none;gap:2px;padding:3px;display:inline-flex}.seg label{cursor:pointer;position:relative}.seg input{opacity:0;pointer-events:none;position:absolute}.seg span{color:var(--dim);white-space:nowrap;border-radius:7px;padding:7px 13px;font-size:13px;font-weight:600;display:block}.seg label:hover span{color:var(--text)}.seg input:checked+span{color:var(--text);background:#24324d;box-shadow:inset 0 0 0 1px #6aa0ff80}.seg .next{background:var(--gold);color:#1a1405;letter-spacing:.04em;pointer-events:none;border-radius:4px;padding:2px 4px;font:700 9px/1 system-ui;position:absolute;top:-9px;right:-6px}.lbl{letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:0 0 7px;font:700 10.5px/1 system-ui}.switch{cursor:pointer;flex:none;width:40px;height:23px;position:relative}.switch input{opacity:0;position:absolute}.switch span{background:#ffffff26;border-radius:12px;transition:background .15s;position:absolute;inset:0}.switch span:after{content:"";background:#fff;border-radius:50%;width:17px;height:17px;transition:transform .15s;position:absolute;top:3px;left:3px}.switch input:checked+span{background:var(--accent)}.switch input:checked+span:after{transform:translate(17px)}.slider{flex:none;align-items:center;gap:10px;display:flex}.slider input{width:200px;accent-color:var(--accent2)}.slider span{min-width:34px;color:var(--dim);font-variant-numeric:tabular-nums}.mouse{opacity:.8;border:2px solid;border-radius:8px;flex:none;width:16px;height:24px;display:inline-block;position:relative}.mouse:after{content:"";background:currentColor;border-radius:1px;width:2px;height:6px;position:absolute;top:3px;left:5px}.notice{background:#ffb5471a;border:1px solid #ffb54773;border-radius:12px;gap:6px;margin-top:18px;padding:12px 14px;display:grid}.notice span{color:#e8dcc6;font-size:13px}.notice .btn{justify-self:start;margin-top:4px}.screen{z-index:10;position:fixed;inset:0}.modal-screen{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#05080e99;place-items:center;display:grid}.title-col{width:min(460px,88vw);position:absolute;top:clamp(24px,9vh,90px);left:clamp(24px,6vw,80px)}.wordmark{letter-spacing:-.01em;text-transform:uppercase;margin:0;font:900 clamp(40px,6vw,60px)/.92 system-ui}.wordmark em{color:var(--accent2);font-style:normal}.tagline{color:#c4d1e8;margin:12px 0 28px;font-size:16px}.howto{color:var(--dim);align-items:center;gap:8px;margin-top:12px;font-size:13px;display:flex}.legal{margin:22px 0 0;font-size:12px}.legal a{color:var(--faint);text-decoration:none}.legal a:hover{color:var(--dim);text-decoration:underline}.choices{gap:16px;margin-top:30px;display:grid}.record{color:var(--dim);flex-wrap:wrap;gap:22px;font-size:12.5px;display:flex;position:absolute;bottom:30px;left:clamp(24px,6vw,80px)}.record b{color:var(--text);margin-right:4px;font-size:15px}.corner{gap:8px;display:flex;position:absolute;top:18px;right:20px}.card{background:linear-gradient(#141d2e,#0e1522);border:1px solid #ffffff1f;border-radius:18px;box-shadow:0 30px 80px #0009}.card.small{text-align:center;width:min(340px,92vw);padding:22px}.kicker{letter-spacing:.16em;color:var(--dim);text-transform:uppercase;margin:0 0 14px;font:700 11px/1 system-ui}.stack{gap:8px;display:grid}.card.result{text-align:center;width:min(540px,94vw);padding:26px 30px 20px}.result h2{text-transform:uppercase;margin:0 0 6px;font:900 44px/1 system-ui}.result h2.win{color:var(--good)}.result h2.loss{color:var(--bad)}.games-line{color:#c9d5ea;font-variant-numeric:tabular-nums;font-size:15px}.games-line b{color:var(--text)}.badge{color:var(--gold);background:#ffcf5a1a;border:1px solid #ffcf5a66;border-radius:999px;align-items:center;gap:8px;margin:16px 0 0;padding:7px 12px;font-size:13px;font-weight:700;display:inline-flex}.stats{grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 22px;display:grid}.stats div{border:1px solid var(--line);background:#ffffff0a;border-radius:10px;padding:10px 6px}.stats b{font:800 22px/1.1 system-ui;display:block}.stats span{color:var(--dim);font-size:12px}.actions{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.keys-hint{color:var(--faint);margin:14px 0 0;font-size:12px}.card.settings{width:min(680px,94vw);max-height:90vh;padding:0 0 8px;overflow:auto}.settings .head{justify-content:space-between;align-items:center;padding:16px 20px 0;display:flex}.settings .head h2{margin:0;font-size:18px}.tabs{border-bottom:1px solid var(--line);gap:4px;padding:10px 20px 0;display:flex}.tabs button{color:var(--dim);cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000;padding:9px 14px;font-weight:600}.tabs button.on{color:var(--text);border-color:var(--accent2)}.tab{gap:16px;padding:16px 20px 12px;display:grid}.row{justify-content:space-between;align-items:center;gap:16px;display:flex}.row .t b{display:block}.row .t span{color:var(--dim);font-size:12.5px}.modecards{grid-template-columns:1fr 1fr;gap:10px;display:grid}.mode{border:1px solid var(--line);cursor:pointer;background:#ffffff08;border-radius:12px;padding:12px 14px;position:relative}.mode input{opacity:0;position:absolute}.mode:has(input:checked){background:#3b7cf51f;border-color:#6aa0ffb3}.mode b{font-size:15px}.mode p{color:var(--dim);margin:4px 0 0;font-size:12.5px}.mode .tag2{float:right;letter-spacing:.08em;color:var(--good);border:1px solid #7be38f80;border-radius:4px;padding:3px 6px;font:700 10px/1 system-ui}.disclose{color:var(--dim);border-top:1px solid var(--line);margin:0;padding-top:12px;font-size:13px}body.simple .pro-only,body.pro .simple-only{display:none!important}#hud{pointer-events:none;position:fixed;inset:0}body:not(.screen-play) #hud{visibility:hidden}#bug{font-variant-numeric:tabular-nums;background:linear-gradient(#19283c,#0a1220);border:1px solid #516075;border-radius:6px;align-items:stretch;display:flex;position:absolute;top:16px;left:50%;overflow:hidden;transform:translate(-50%);box-shadow:0 8px 26px #0008,inset 0 1px #ffffff12}#bug .side{letter-spacing:.1em;text-transform:uppercase;border-top:3px solid #728094;align-items:center;gap:9px;min-width:138px;padding:12px 18px;font:700 12px/1 system-ui;display:flex;position:relative}#bug .side.a{border-top-color:#6aa0ff;justify-content:flex-end}#bug .side.b{justify-content:flex-start}#bug .pts{color:#f7f9ff;background:linear-gradient(#29364a,#182234);border-top:3px solid #b3c1d5;border-left:1px solid #ffffff12;place-items:center;min-width:58px;padding:7px 8px 9px;font:750 34px/1 system-ui;display:grid}#bug .pts.a{background:linear-gradient(#285487,#163553);border-top-color:#6aa0ff}#bug .srv{background:#ffffff18;border-radius:50%;flex-shrink:0;width:6px;height:6px}#bug .srv.on{background:#ffcf5a;box-shadow:0 0 7px #ffcf5a70}#bug .games{gap:4px;display:flex}#bug .games:empty{display:none}#bug .games i{border:1px solid #ffffff40;border-radius:2px;width:8px;height:8px}#bug .games.a i.w{background:#6aa0ff;border-color:#6aa0ff}#bug .games.b i.w{background:#d3d9e4;border-color:#d3d9e4}#gameinfo{letter-spacing:.16em;color:#c5d0df;text-transform:uppercase;white-space:nowrap;background:#0b1422ee;border:1px solid #ffffff20;border-top:0;border-radius:0 0 5px 5px;padding:7px 18px 8px;font:650 10px/1 system-ui;position:absolute;top:73px;left:50%;transform:translate(-50%)}#gameinfo.pressure{color:#ffcf5a;background:#282319f2}@media (width<=600px){#bug{top:12px}#bug .side{letter-spacing:.02em;gap:5px;min-width:0;padding:10px 8px;font-size:9px}#bug .pts{min-width:38px;padding:7px 5px;font-size:28px}#gameinfo{font-size:9px;top:59px}}#pausebtn{pointer-events:auto;font-size:13px;position:absolute;top:16px;right:16px}#touchcontrols{inset:auto max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));z-index:3;pointer-events:none;justify-content:space-between;align-items:end;gap:24px;display:flex;position:absolute}#touchmove,.touchbtn{touch-action:none;-webkit-user-select:none;user-select:none;pointer-events:auto;color:#fff;background:#0b1422ed;border:1px solid #ffffff50;border-radius:18px}#touchmove{text-align:center;width:clamp(150px,42vw,280px);padding:18px 16px}#touchmove strong{letter-spacing:.12em;font-size:14px;display:block}#touchmove span{color:#c5d0df;margin-top:6px;font-size:12px;display:block}.touchtrack{background:#ffffff35;border-radius:9px;height:4px;margin:22px 8px 6px}.touchtrack i{background:#6aa0ff;border-radius:8px;width:36px;height:12px;margin:auto;display:block;position:relative;top:-4px}#touchmove:active{background:#172c4aef;border-color:#6aa0ff}.touchactions{flex-shrink:0;width:136px}#touchspin{gap:8px;margin-bottom:8px;display:flex}.touchbtn{cursor:pointer;flex:1;min-height:48px;font:800 13px/1 system-ui}.touchbtn.hit{text-transform:uppercase;background:#3475e8;border-color:#85b1ff;width:100%;height:76px;font-size:23px}.touchbtn.top.on{background:#913d30;border-color:#ffab9e}.touchbtn.back.on{background:#245b96;border-color:#9dceff}.touchbtn:active{filter:brightness(1.3)}body.touch-primary #hint,body.touch-primary #guide .skip{display:none}body.touch-primary #pausebtn{min-width:44px;min-height:44px}body.touch-primary #view{height:100dvh}@media (width<=360px){#touchcontrols{gap:12px;left:10px;right:10px}#touchmove{width:145px;padding-inline:10px}.touchactions{width:128px}}@media (height<=500px){body.touch-primary #guide{width:min(360px,48vw);padding:10px 14px;top:86px}body.touch-primary #guide h3{font-size:15px}body.touch-primary #guide p{font-size:12px}body.touch-primary #guide .steps{margin-bottom:6px}body.touch-primary .screen{overflow-y:auto}body.touch-primary .title-col{padding:20px 0;position:relative;top:0;transform:translate(-50%)}}body.touch-primary .title-col .tagline:not(.touch-only){display:none!important}#banner{text-align:center;opacity:0;transition:opacity .35s;position:absolute;top:22%;left:50%;transform:translate(-50%)}#banner .big{letter-spacing:.03em;text-transform:uppercase;text-shadow:0 3px 16px #0009;font:900 34px/1 system-ui}#banner .why{color:#dfe7f5;text-shadow:0 1px 6px #000;white-space:nowrap;margin-top:6px;font-size:15px}#banner.good .big{color:var(--good)}#banner.bad .big{color:var(--bad)}#banner.let .big{color:var(--gold)}#shot{color:#c3d0e6;background:#080c1499;border-radius:6px;padding:4px 8px;font-size:13px;position:absolute;bottom:64px;right:16px}#shot:empty,body.simple #shot{display:none}#hint{background:var(--panel-bg);border:1px solid var(--line);text-align:center;border-radius:999px;max-width:min(92vw,780px);padding:9px 18px;font-size:14.5px;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}#hint:empty{display:none}#hint b{color:var(--accent2)}#guide{background:var(--panel-bg);border:1px solid #6aa0ff73;border-radius:14px;width:min(440px,92vw);padding:16px 18px 14px;position:absolute;top:96px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #00000073}#guide .steps{gap:6px;margin:0 70px 12px 0;display:flex}#guide .steps i{background:#ffffff1f;border-radius:2px;flex:1;height:4px;transition:background .3s}#guide .steps i.done{background:var(--good)}#guide .steps i.now{background:var(--accent2)}#guide h3{align-items:center;gap:10px;margin:0 0 4px;font-size:19px;display:flex}#guide p{color:var(--dim);margin:0}#guide .skip{color:var(--faint);font-size:12px;position:absolute;top:12px;right:16px}#guide.done{border-color:#7be38f99}#hud .fb-spin,#hud .fb-meter{opacity:0;will-change:transform;transition:opacity .15s;position:absolute;top:0;left:0}.tag{background:var(--panel-bg);border:1px solid var(--line);white-space:nowrap;border-radius:6px;padding:3px 8px;font-size:12px}.tag b{font-weight:700}.fb-meter{width:132px;height:132px}.fb-meter svg{display:block;overflow:visible}.fb-meter .label{letter-spacing:.06em;text-shadow:0 1px 2px #000;white-space:nowrap;font:700 13px/1.2 system-ui;position:absolute;top:120px;left:6px}.fb-meter .label small{color:var(--dim);letter-spacing:0;font:500 11px/1.3 system-ui;display:block}.fb-face{background:var(--panel-bg);border:1px solid var(--line);text-align:center;width:64px;color:var(--dim);opacity:0;border-radius:8px;padding:8px 6px;font-size:11px;transition:opacity .2s;position:absolute;top:120px;right:16px}.fb-face .dial{border:1px solid var(--line);background:linear-gradient(#4da3ff33,#ff6b5a33);border-radius:6px;width:12px;height:110px;margin:6px auto;position:relative}.fb-face .you{background:#fff;width:32px;height:3px;position:absolute;left:-10px}.fb-face .want{border:2px solid var(--good);border-radius:3px;width:24px;height:9px;margin-top:-3px;position:absolute;left:-6px}.fb-face b{color:var(--text)}.fb-keys{opacity:0;flex-direction:column;gap:4px;transition:opacity .6s;display:flex;position:absolute;bottom:14px;left:14px}.fb-keys .row{gap:4px;display:flex}.fb-keys .row:nth-child(2){margin-left:10px}.fb-keys .row:nth-child(3){margin-left:0}.key{color:#9fb0cc;background:#141c2cd9;border:1px solid #ffffff24;border-radius:6px;align-content:center;place-items:center;min-width:30px;height:30px;padding:0 6px;font:700 12px/1 system-ui;display:grid}.key small{margin-top:2px;font:500 9px/1 system-ui;display:none}.key.on small{display:block}.key.on{color:#fff;background:#2f6fdd;border-color:#6aa0ff;box-shadow:0 0 10px #508cff99}.key.top.on{border-color:var(--top);background:#b9352b;box-shadow:0 0 10px #ff6b5a99}.key.wide{min-width:64px}.fb-read{opacity:0;gap:8px;transition:opacity .3s;display:flex;position:absolute;top:62%;left:50%;transform:translate(-50%)}.chip{letter-spacing:.05em;background:var(--panel-bg);border:1px solid var(--line);white-space:nowrap;border-radius:999px;align-items:center;padding:5px 10px;font:700 13px/1 system-ui;display:inline-flex}.chip.good{color:var(--good);border-color:#7be38f80}.chip.warn{color:var(--warn);border-color:#ffb54780}.bladeMini{border:2px solid #c89a5c;border-radius:50%;width:22px;height:24px;margin-left:6px;display:inline-block;position:relative}.bladeMini i{background:var(--warn);border-radius:50%;width:6px;height:6px;margin:-3px 0 0 -3px;position:absolute}.bladeMini .sweet{border:1px dashed #7be38fcc;border-radius:50%;width:8px;height:8px;margin:-4px 0 0 -4px;position:absolute;top:56%;left:50%}.fb-serve{opacity:0;gap:8px;transition:opacity .25s;display:flex;position:absolute;bottom:84px;left:50%;transform:translate(-50%)}.fb-serve .opt{background:var(--panel-bg);border:1px solid var(--line);text-align:center;border-radius:8px;min-width:108px;padding:6px 10px}.fb-serve .opt b{font-size:13px;display:block}.fb-serve .opt small{color:var(--dim);font-size:11px}.fb-serve kbd,.legend kbd{color:var(--text);background:#1d2a40;border:1px solid #fff3;border-radius:4px;padding:3px 6px;font:700 11px/1 system-ui;display:inline-block}.fb-serve kbd{margin-bottom:4px}.fb-serve .opt.on{border-color:#6aa0ff;box-shadow:0 0 12px #508cff73}.controls{grid-template-columns:auto 1fr;gap:10px 18px;margin-top:6px;display:grid}.controls h3{color:#cfe0ff;grid-column:1/-1;margin:0;font-size:15px}.kb{align-content:start;gap:5px;display:grid}.kb .r{gap:5px;display:flex}.kb .k{color:#e8edf5;background:#1a2436;border:1px solid #ffffff1f;border-radius:6px;width:46px;height:42px;padding:3px 4px;font:700 13px/1 system-ui;position:relative}.kb .k small{color:#9fb0cc;font:500 9px/1.05 system-ui;position:absolute;bottom:3px;left:4px;right:2px}.kb .k.u{background:#22314d;border-color:#4f6fa8}.kb .k.t{border-color:var(--top)}.kb .k.b{border-color:var(--back)}.kb .k.s{border-color:var(--side)}.kb .k.dead{opacity:.25}.kb .shift{width:72px}.kb .space{width:200px}.kb .tab{width:60px}.kb .caps{width:68px}.legend{color:#c3d0e6;font-size:12.5px}.legend table{border-collapse:collapse;width:100%}.legend td{vertical-align:top;border-bottom:1px solid #ffffff0d;padding:3px 4px}.legend td:first-child{white-space:nowrap;width:110px}.legend .rebind{color:#8fb7ff;cursor:pointer;background:0 0;border:1px solid #8fb7ff4d;border-radius:4px;padding:1px 6px;font-size:11px}.legend .rebind.listening{color:#0d1119;background:#ffe58a;border-color:#ffe58a}.legend #resetkeys{color:#e8edf5;cursor:pointer;background:#1d2a40;border:1px solid #ffffff26;border-radius:6px;margin-top:8px;padding:5px 10px;font-size:12px}.kbstatus{min-height:1.3em;color:var(--side);margin-top:6px}body.screen-play #view{cursor:none}body.simple .fb-keys,body.simple .fb-serve,body.simple .fb-meter,body.simple .fb-face,body.simple .fb-read{display:none!important}.tab .controls{grid-template-columns:1fr}.tab .controls h3{font-size:13px}:root{--panel-bg:#090d16d6}#bug,#guide,#hint,#pausebtn,.corner .icon,.tag,.chip,.fb-serve .opt,.fb-face{-webkit-backdrop-filter:blur(8px)}#bug{box-shadow:0 8px 28px #00000080}.wordmark{text-shadow:0 4px 30px #0009}#play{animation:2.6s ease-in-out infinite playGlow}@keyframes playGlow{0%,to{box-shadow:0 8px 24px #2f6fdd66}50%{box-shadow:0 8px 36px #4a87ffb3}}.modal-screen:not(.hidden) .card{animation:.28s cubic-bezier(.2,.8,.2,1) cardIn}@keyframes cardIn{0%{opacity:0;transform:translateY(14px)scale(.98)}to{opacity:1;transform:none}}.result h2.win{text-shadow:0 0 32px #7be38f59}.result h2.loss{text-shadow:0 0 32px #ff7a6b4d}#banner{transition:opacity .35s,transform .35s cubic-bezier(.2,.8,.2,1);transform:translate(-50%)scale(.92)}#banner.show{opacity:1;transform:translate(-50%)scale(1)}#guide{transition:border-color .3s}@media (prefers-reduced-motion:reduce){#play,.modal-screen .card{animation:none!important}#banner{transition:opacity .2s}}.brand{margin:0;line-height:0}.brand img{filter:drop-shadow(0 6px 24px #0000008c);width:auto;height:min(264px,30vh)}#title{background:radial-gradient(75% 90%,#05080ee0 0%,#05080ed1 50%,#05080e80 100%)}.title-col{text-align:center;flex-direction:column;align-items:center;width:min(640px,92vw);display:flex;top:50%;left:50%;transform:translate(-50%,-52%)}.title-col .tagline{margin:12px 0 18px}.title-col .howto{justify-content:center}.title-col .choices{flex-wrap:wrap;justify-content:center;gap:28px;margin-top:18px;display:flex}.title-col .notice{text-align:left}.record{white-space:nowrap;justify-content:center;left:50%;transform:translate(-50%)}.r-badge{filter:drop-shadow(0 6px 16px #0009);width:64px;height:64px;margin:-58px auto 10px;display:block}#servestatus{color:#d5deea;letter-spacing:.13em;text-transform:uppercase;background:#101b2aeb;border:1px solid #ffffff24;border-radius:4px;padding:6px 12px;font:700 10px/1.2 system-ui;position:absolute;top:106px;left:50%;transform:translate(-50%)}#servestatus:empty{display:none}#hud:has(#guide:not(.hidden)) #servestatus{display:none}#servestatus.yours{color:#ffda79;border-color:#ffcf5a50}.title-col .choices .lbl,.title-col .choices label{color:#c2cede}.score-key{color:#b7c6d9;font-size:12px;line-height:1.5}@media (width<=600px){#servestatus{top:92px}}