:root{--bg:#1b2238;box-sizing:border-box}html,body{background:var(--bg);-webkit-user-select:none;user-select:none;height:100%;margin:0;font:600 12px system-ui,sans-serif;overflow:hidden}canvas{width:100%;height:100%;display:block}#title{box-sizing:border-box;pointer-events:none;flex-direction:column;justify-content:space-between;align-items:center;padding:4vh 16px 7vh;display:none;position:fixed;inset:0}body.ttl:not(.win) #title{display:flex}#title h1{text-align:center;letter-spacing:.02em;text-transform:uppercase;color:#ffd23f;-webkit-text-stroke:3px #14111f;paint-order:stroke fill;text-shadow:0 5px #14111f;margin:0;font:900 clamp(32px,7vw,76px)/.95 system-ui,sans-serif}#title .panel{pointer-events:auto}#menu{box-sizing:border-box;z-index:5;background:#0a081473;justify-content:center;align-items:center;padding:16px;display:none;position:fixed;inset:0}#menu.on{display:flex}.panel{box-sizing:border-box;color:#14111f;text-align:center;background:#f7f3ea;border:3px solid #14111f;border-radius:22px;flex-direction:column;gap:12px;width:fit-content;min-width:min(340px,100%);max-width:100%;max-height:calc(100vh - 32px);padding:20px;font:600 15px system-ui,sans-serif;display:flex;box-shadow:0 5px #14111f}.panel[hidden]{display:none}.panel.wide{width:min(760px,100%)}#controls{width:min(560px,100%)}.panel h2{text-transform:uppercase;letter-spacing:.04em;margin:0;font:900 28px system-ui,sans-serif}.scroll{min-height:0;overflow:auto}.panel button{color:#14111f;cursor:pointer;background:#fff;border:3px solid #14111f;border-radius:12px;padding:10px 20px;font:800 16px system-ui,sans-serif;box-shadow:0 3px #14111f}.panel button:hover{background:#fff4c8}.panel button.go{background:#ffd23f}.panel button.go:hover{background:#ffe27a}.panel button:active{transform:translateY(2px);box-shadow:0 1px #14111f}.menu{flex-direction:column;gap:10px;padding:2px 4px 6px;display:flex}.menu button{align-self:center;width:min(280px,100%)}.foot{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.cols{flex-wrap:wrap;justify-content:center;gap:8px 24px;display:flex}.col,.opts,.stack{flex-direction:column;gap:8px;display:flex}.opt{justify-content:space-between;align-items:center;gap:12px;min-width:300px;display:flex}.opt .lab{text-align:left}.cyc{align-items:center;gap:4px;display:flex}.cyc output{cursor:pointer;background:#fff;border:2px solid #14111f;border-radius:8px;min-width:128px;padding:6px 4px}.panel .arr{width:30px;height:30px;box-shadow:none;border-width:2px;border-radius:8px;padding:0}.arr.prev:before{content:"◀"}.arr.next:before{content:"▶"}.hint{color:#5d6274;margin:0;font-size:13px}.keys{text-align:left;grid-template-columns:auto 1fr;align-items:center;gap:6px 12px;display:grid}.panel .key{min-width:70px;padding:5px 10px;font-size:14px;box-shadow:0 2px #14111f}.panel kbd.key{text-align:center;color:#5d6274;box-shadow:none;border:2px solid #9aa0b8;border-radius:10px;font:700 13px system-ui,sans-serif;display:inline-block}.panel .key.wait{background:#ffd23f}.help{text-align:left;padding-right:6px;line-height:1.45}.help h3{text-transform:uppercase;letter-spacing:.05em;margin:14px 0 4px;font-size:16px}.help p{margin:0 0 8px;font-weight:500}.sub{margin:0;font-size:18px}#endBox table{border-collapse:collapse;margin:8px auto 14px;font-size:13px}#endBox th,#endBox td{text-align:center;padding:3px 7px}#endBox th{border-bottom:2px solid #14111f}#endBox td.name,#endBox th.name{text-align:left}#endBox tr.total td{border-top:2px solid #14111f;font-weight:800}#endBox h3{text-transform:uppercase;letter-spacing:.05em;margin:6px 0 0;font-size:15px}#endBox .won{color:#c8102e}#sup{z-index:10;background:#0a081499;justify-content:center;align-items:center;padding:16px;display:none;position:fixed;inset:0}#sup.on{display:flex}#sup p{max-width:440px;margin:0;font-weight:500;line-height:1.45}body.playing:not(.keys) canvas{cursor:none}#hud{pointer-events:none;color:#fff;text-shadow:0 2px #14111f;font:700 14px system-ui,sans-serif;position:fixed;inset:0}#hud-score{border-collapse:collapse;background:#14111fc7;border-radius:10px;font-size:13px;position:absolute;top:12px;left:12px;overflow:hidden}#hud-score td,#hud-score th{text-align:center;min-width:14px;padding:3px 7px}#hud-score th{text-align:left;letter-spacing:.05em}#hud-score tr:first-child td{color:#9aa0b8;font-size:11px}#hud-score tr:first-child td.now,#hud-score tr.up th{color:#ffd23f}#hud-score td.r{color:#ffd23f;border-left:2px solid #fff3}#hud-who{background:#14111f99;border-radius:8px;padding:5px 10px;font-size:13px;line-height:1.5;position:absolute;top:88px;left:12px}#hud-who b{color:#ffd23f;width:2em;display:inline-block}#hud-who span{color:#b9bfd6;margin-left:6px}#hud-who em{color:#ffb347;font-style:normal;font-weight:700}#hud-who em.tired{color:#ff6b5a}#hud-count{background:#14111fc7;border-radius:10px;align-items:center;gap:12px;padding:8px 12px;display:flex;position:absolute;top:12px;right:12px}#hud-bases{width:54px;height:40px;position:relative}#hud-bases i{background:0 0;border:2px solid #b9bfd6;width:13px;height:13px;position:absolute;transform:rotate(45deg)}#hud-bases i.on{background:#ffd23f;border-color:#ffd23f}#hud-bases i:first-child{top:18px;right:4px}#hud-bases i:nth-child(2){top:3px;left:19px}#hud-bases i:nth-child(3){top:18px;left:4px}#hud-dots{grid-template-columns:auto auto;gap:2px 12px;font-size:13px;display:grid}#hud-dots b{color:#ffd23f;width:1.2em;display:inline-block}#hud-dots i{vertical-align:-1px;border:2px solid #b9bfd6;border-radius:50%;width:9px;height:9px;margin-right:3px;display:inline-block}#hud-dots i.on{background:#ffd23f;border-color:#ffd23f}#hud-speed{opacity:0;letter-spacing:.05em;background:#14111fb3;border-radius:8px;padding:5px 12px;transition:opacity .3s;position:absolute;top:74px;right:12px}#hud-speed b{color:#ffd23f;font-size:18px}#hud-speed em{color:#7dff6a;font-style:normal}#hud-banner{text-align:center;letter-spacing:.04em;color:#ffd23f;-webkit-text-stroke:3px #14111f;paint-order:stroke fill;text-shadow:0 5px #14111f;opacity:0;font:900 clamp(30px,6vw,64px) system-ui,sans-serif;position:absolute;top:26%;left:0;right:0}#hud-banner.bad{color:#ff6a5a}#hud-banner.on{animation:1.9s ease-out banner}#hud-banner.big.on{font-size:clamp(40px,9vw,96px);animation-duration:2.8s}@keyframes banner{0%{opacity:0;transform:scale(2.2)}12%{opacity:1;transform:scale(.94)}20%{transform:scale(1)}80%{opacity:1}to{opacity:0;transform:scale(1.04)}}#hud-msg{text-align:center;letter-spacing:.06em;color:#ffd23f;-webkit-text-stroke:2px #14111f;paint-order:stroke fill;white-space:pre-line;opacity:0;font:900 clamp(30px,4.4vw,60px) system-ui,sans-serif;transition:opacity .25s;position:absolute;top:calc(26% + clamp(46px,8vw,90px));left:0;right:0}.pop{pointer-events:none;color:#fff;-webkit-text-stroke:2px #14111f;paint-order:stroke fill;text-shadow:0 3px #14111f;white-space:nowrap;font:900 26px system-ui,sans-serif;animation:1s ease-out forwards pop;position:fixed;transform:translate(-50%,-50%)}.pop.big{color:#ffd23f;font-size:48px;animation-duration:1.4s}.pop.huge{color:#ffd23f;-webkit-text-stroke:3px #14111f;font-size:clamp(56px,8vw,96px);animation-duration:1.4s}.pop.mid{top:44%;left:50%}.pop.bad{color:#ff6a5a}@keyframes pop{0%{opacity:0;transform:translate(-50%,-20%)scale(.4)}15%{opacity:1;transform:translate(-50%,-60%)scale(1.15)}25%{transform:translate(-50%,-60%)scale(1)}75%{opacity:1}to{opacity:0;transform:translate(-50%,-110%)scale(1)}}#replay{pointer-events:none;display:none;position:fixed;inset:0}body.rpl #replay{display:block}body.rpl #hud,body.rpl #swing-feedback,body.rpl #pinpoint-pad{visibility:hidden}#replay:before,#replay:after{content:"";background:#000;height:11vh;position:absolute;left:0;right:0}#replay:before{top:0}#replay:after{bottom:0}#replay .tag{letter-spacing:.12em;color:#fff;background:#e0443e;border-radius:6px;padding:4px 12px;font:900 22px system-ui,sans-serif;position:absolute;top:calc(11vh + 14px);left:20px}#replay .skip{color:#fff;opacity:.75;font-size:13px;position:absolute;bottom:calc(11vh + 14px);right:20px}#swing-feedback{pointer-events:none;width:340px;height:236px;display:none;position:fixed;bottom:70px;right:16px}#pinpoint-pad{pointer-events:none;position:fixed;inset:0}#hud-pitches{background:#14111fb8;border-radius:10px;padding:8px 12px;line-height:1.6;position:absolute;bottom:70px;left:16px}#hud-pitches .on{color:#ffd23f}#hud-pitches b{width:1.4em;display:inline-block}#hud-meter{background:linear-gradient(90deg,#3a3f52,#7a8098);border:3px solid #14111f;border-radius:9px;width:min(420px,70vw);height:18px;position:absolute;bottom:70px;left:50%;overflow:hidden;transform:translate(-50%)}#hud-meter-zone{background:#59e36c;position:absolute;top:0;bottom:0}#hud-meter-needle{background:#fff;width:4px;margin-left:-2px;position:absolute;top:-2px;bottom:-2px;box-shadow:0 0 0 2px #14111f}body.beta .beta-hide,body.beta #hud-hint{display:none!important}#hud-hint{text-align:center;background:#14111f99;border-radius:8px;max-width:calc(100vw - 32px);padding:5px 12px;font-size:12px;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}body.online .solo{display:none}.panel button:disabled{opacity:.55;cursor:default;transform:none}.panel button.small{padding:3px 10px;font-size:13px;box-shadow:0 2px #14111f}.joinrow{justify-content:center;gap:8px;display:flex}.joinrow input{text-transform:uppercase;letter-spacing:.1em;text-align:center;border:3px solid #14111f;border-radius:10px;width:9em;padding:8px 10px;font:800 18px system-ui,sans-serif}.hint.err{color:#c0261d}#roomCode{color:#c8102e;letter-spacing:.08em}.teams .col{background:#fff;border:2px solid #14111f;border-radius:12px;min-width:170px;padding:8px}.teams h3{text-transform:uppercase;letter-spacing:.06em;margin:0 0 6px;font-size:14px}.teams .who{justify-content:center;align-items:center;gap:6px;min-height:32px;display:flex}.teams .you{color:#c8102e}#netinfo{color:#fff;z-index:4;background:#14111fbf;border-radius:6px;padding:4px 10px;font:600 12px system-ui,sans-serif;position:fixed;bottom:52px;left:12px}.cu-stage{align-items:center;position:relative}#cuCanvas{cursor:grab;touch-action:none;background:radial-gradient(circle at 50% 40%,#fff6dc,#e8dcc0);border:2px solid #14111f;border-radius:14px;width:240px;height:300px}.panel button.dice{padding:2px 6px;font-size:18px;position:absolute;top:8px;right:8px}.panel .joinrow button.dice{position:static}#custom .hint{max-width:330px}#cuName{text-transform:none;letter-spacing:normal;text-align:left;padding:6px 10px;font-size:16px}.cu-field{justify-content:space-between;align-items:center;gap:12px;min-width:300px;display:flex}.cu-field input{border:2px solid #14111f;border-radius:8px;width:11em;padding:6px 10px;font:700 16px system-ui,sans-serif}#cuNum{text-align:center;width:4em}.cu-field input.bad{background:#ffe9e6;border-color:#c0261d}#stats{width:min(980px,100%)}.sects{flex-wrap:wrap;justify-content:center;gap:14px;display:flex}.sect{box-sizing:border-box;background:#fff;border:2px solid #14111f;border-radius:16px;width:440px;max-width:100%;padding:12px 14px 14px}.sect h3{text-transform:uppercase;letter-spacing:.04em;margin:0 0 10px;font:900 18px system-ui,sans-serif}.gcols{text-align:left;grid-template-columns:1fr 1fr;gap:12px 16px;display:grid}.gcols h4{letter-spacing:.08em;text-transform:uppercase;color:#c8102e;margin:12px 8px 4px;font:800 12px system-ui,sans-serif}.gcols h4:first-child{margin-top:0}.gcols dl{margin:0}.gcols dl div{border-radius:6px;justify-content:space-between;align-items:baseline;gap:12px;padding:3px 8px;font-size:14px;display:flex}.gcols dl div:nth-child(odd){background:#7f7f7f24}.gcols dd{font-variant-numeric:tabular-nums;margin:0;font-weight:800}@media (width<=520px){.gcols{grid-template-columns:1fr}}