:root{color-scheme:dark;--ink:#eef5ec;--muted:#96aca8;--cyan:#8af4d4;--coral:#ff947f;--glass:rgba(12,27,32,.84);font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}
*{box-sizing:border-box}body{margin:0;overflow:hidden;color:var(--ink);background:#101f29}button,select,input{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}button{border:1px solid #b9dbce26;background:#16383b9c;border-radius:7px;padding:12px 15px;font-size:12px}button:hover{background:#23544b}button:disabled{opacity:.5}button.primary{background:var(--cyan);color:#112e28;border:0;font-weight:750;font-size:15px;display:flex;align-items:center;justify-content:space-between;padding:17px 20px;width:100%}button.primary:hover{background:#b7ffe6}.glass{background:var(--glass);border:1px solid #b9dbce22;box-shadow:0 15px 50px #0002;backdrop-filter:blur(16px);border-radius:11px}#arena{width:100vw;height:100dvh;display:block;touch-action:none}header{position:absolute;top:28px;left:32px;right:32px;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;pointer-events:none}header>*{pointer-events:auto}.brand{display:flex;gap:12px;align-items:center;font-size:17px;letter-spacing:2px;line-height:1.3}.brand b{color:var(--cyan)}.brand small{display:block;margin-top:7px;color:var(--muted);font-size:9px;letter-spacing:1.8px}.mark{border:1px solid #9fe9ce5c;border-radius:50%;width:40px;height:40px;display:grid;place-items:center;font-size:25px;color:var(--cyan)}.scoreboard{display:grid;grid-template-columns:auto 30px 10px 30px auto;gap:15px;align-items:center;background:#132e35e8;padding:11px 22px;border:1px solid #b9dbce22;border-radius:9px;text-align:center}.scoreboard strong{font-size:29px;font-weight:550;line-height:1}.scoreboard small{grid-column:1/-1;color:var(--muted);font-size:8px;letter-spacing:2px}.team{font-size:10px;letter-spacing:1.5px;font-weight:700}.cyan{color:var(--cyan)}.coral{color:var(--coral)}.score-divider{color:#748b87}.top-actions{display:flex;gap:8px}kbd{font-family:inherit;font-size:10px;letter-spacing:.5px;border:1px solid #b4d3c52e;border-radius:3px;padding:3px 5px;color:#d8ebe2;background:#96b9a90b;white-space:nowrap}.top-actions kbd{margin-left:7px}.eyebrow{font-size:9px;letter-spacing:2.3px;color:var(--muted);font-weight:600}.eyebrow i,.status-light i{display:inline-block;width:6px;height:6px;background:var(--cyan);border-radius:50%;margin-right:7px}#welcome{position:absolute;top:140px;left:32px;width:350px;padding:30px}h1{font-size:65px;letter-spacing:-4px;line-height:1.02;margin:22px 0;font-weight:650}h1 em{font-style:normal;color:var(--cyan)}#welcome p{font-size:13px;line-height:1.7;color:#b4c6bf;margin:0 0 24px}.intro-steps{display:grid;gap:11px;margin-bottom:27px;font-size:9px;letter-spacing:1.2px}.intro-steps b{font-size:9px;color:var(--cyan);margin-right:12px}.text-button{border:0;background:transparent!important;padding:16px 0 6px;text-align:left;font-size:12px;color:#d1e3da}.concept-note{display:block;font-size:9px;color:var(--muted);line-height:1.6;margin-top:18px}#lab{position:absolute;right:32px;top:130px;width:254px}summary{list-style:none;padding:17px 20px;cursor:pointer;display:flex;align-items:center;justify-content:space-between}summary::-webkit-details-marker{display:none}summary .eyebrow{display:block;font-size:8px;letter-spacing:1.5px;margin-bottom:5px}summary b{font-size:16px;font-weight:550}.plus{font-size:23px;color:var(--cyan);font-weight:300}details[open] .plus{transform:rotate(45deg)}.lab-content{padding:0 20px 18px;max-height:calc(100dvh - 330px);overflow:auto}.select-row{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#c1d3cb;margin:15px 0;gap:8px}select{max-width:140px;background:#153a3c;border:1px solid #b9dbce26;border-radius:5px;padding:6px 4px;color:#d3e8df;font-size:10px}.check-row{display:flex;align-items:center;gap:7px;font-size:10px;margin:14px 0;color:#c1d3cb}input[type=checkbox]{accent-color:var(--cyan)}.slider-label{display:block;font-size:10px;color:#c1d3cb;margin:19px 0}.slider-label output{float:right;color:var(--cyan)}input[type=range]{display:block;width:100%;margin:11px 0 0;accent-color:var(--cyan);height:4px}.secondary{width:100%;font-size:10px;padding:10px;margin-top:8px;text-align:left}.secondary kbd{float:right}.small-note{font-size:9px;line-height:1.6;color:var(--muted);margin-bottom:0}#event{position:absolute;left:50%;top:118px;transform:translateX(-50%);max-width:55vw;text-align:center;font-size:12px;color:#d6efe3;background:#153235cd;border:1px solid #b9dbce22;padding:11px 18px;border-radius:6px;pointer-events:none}footer{position:absolute;bottom:28px;left:32px;right:32px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;pointer-events:none}footer>*{pointer-events:auto}.flight-readout{width:200px;padding:17px 18px}.readings{display:flex;gap:24px;margin:14px 0}.readings strong{display:block;font-size:23px;font-weight:500;font-variant-numeric:tabular-nums}.readings small{font-size:8px;color:var(--muted);letter-spacing:.8px}.status-light{font-size:8px;color:var(--muted);letter-spacing:.5px}.status-light i{width:4px;height:4px}#controls{padding:15px 20px;font-size:10px;line-height:2.7;color:#a8c1b7}#controls kbd{margin:0 4px}#controls small{display:block;font-size:9px;color:var(--muted);line-height:1.5;margin-top:5px}.intent-readout{width:254px;padding:17px 18px}.intent-heading{display:flex;justify-content:space-between;gap:5px;align-items:center}.intent-heading .eyebrow{font-size:8px;letter-spacing:1px}.intent-heading b{font-size:9px;font-weight:500;color:var(--cyan)}.meter{position:relative;background:#73968523;height:6px;border-radius:9px;margin:16px 0;overflow:hidden}.meter>div{width:0;height:100%;background:var(--cyan)}.threshold{position:absolute;left:60%;top:0;height:6px;width:2px;background:#132e28}.intent-bottom{display:flex;justify-content:space-between;color:var(--muted);font-size:7px;letter-spacing:.5px}.world-tag{position:absolute;font-size:8px;letter-spacing:1.5px;background:#122e35bd;padding:5px 7px;border:1px solid #b5dfcf33;border-radius:4px;pointer-events:none;transform:translate(-50%,-100%)}#result{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:350px;padding:30px;text-align:center}#result h2{font-size:43px;letter-spacing:-2px;margin:15px 0;color:var(--cyan)}#result p{color:var(--muted);font-size:12px;line-height:1.6}.world-tag,#event,footer{transition:opacity .2s}body.lobby #opponentTag,body.lobby #ballTag,body.lobby #event,body.lobby #controls{opacity:0}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#10252e;font-size:13px;letter-spacing:2px;z-index:10}#fatal{position:absolute;inset:30%;padding:25px;background:#3b2829;border:1px solid var(--coral);border-radius:10px;z-index:11;line-height:1.6;font-size:14px}#touchControls{display:none}[hidden]{display:none!important}
@media(max-width:1100px){header{left:20px;right:20px;top:20px}.brand{font-size:13px}.scoreboard{gap:9px;padding:10px 14px}.top-actions button{padding:10px;font-size:10px}#welcome{left:20px;top:115px;width:305px;padding:24px}h1{font-size:55px}#lab{right:20px;top:115px;width:224px}footer{left:20px;right:20px;bottom:20px;gap:10px}.intent-readout{width:224px}.flight-readout{width:165px}#controls{padding:13px;font-size:9px}#controls kbd{font-size:8px;margin:0 2px}}
@media(max-width:800px){.brand small{font-size:7px;letter-spacing:1px}.mark{display:none}.scoreboard{position:absolute;left:50%;top:55px;transform:translateX(-50%);min-width:255px;padding:10px 15px}.top-actions{margin-left:auto}.top-actions kbd{display:none}#lab{top:135px;right:14px;width:190px}summary{padding:13px 14px}summary b{font-size:13px}.lab-content{padding:0 14px 14px;max-height:calc(100dvh - 305px)}#welcome{top:145px;left:14px;width:270px;padding:23px}h1{font-size:49px;margin:15px 0}#welcome p{font-size:12px;margin-bottom:16px}.intro-steps{gap:8px;margin-bottom:19px}.concept-note{font-size:8px}body.lobby #lab{display:none}#event{top:137px;max-width:90vw;width:max-content;font-size:10px;padding:9px 12px}body:not(.lobby) #lab{top:184px}footer{left:14px;right:14px;bottom:14px}.flight-readout{width:128px;padding:12px}.readings{gap:14px;margin:9px 0}.readings strong{font-size:18px}.readings small{font-size:7px}.flight-readout .eyebrow{font-size:7px}.status-light{font-size:6px}.intent-readout{width:190px;padding:12px}.intent-heading{display:block}.intent-heading b{display:block;margin-top:5px}.meter{margin:11px 0}.intent-bottom{font-size:6px}#controls{display:none}#result{width:290px}}
@media(pointer:coarse){#touchControls{display:flex;position:absolute;left:22px;right:22px;bottom:125px;justify-content:space-between;align-items:flex-end;pointer-events:none}#touchControls>*{pointer-events:auto}#stick{width:100px;height:100px;border:1px solid #b7dfce55;border-radius:50%;background:#1a38388c;position:relative;touch-action:none}#knob{position:absolute;width:38px;height:38px;left:31px;top:31px;background:#91e8ce79;border:1px solid #b5ffe755;border-radius:50%;pointer-events:none}.touch-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:180px}.touch-buttons button{min-width:70px;min-height:44px;background:#153c3edb;color:var(--cyan);touch-action:none;font-size:10px}body.lobby #touchControls{display:none}}
@media(max-height:730px) and (min-width:801px){#welcome{top:110px;padding:22px;width:300px}h1{font-size:49px;margin:15px 0}#welcome p{font-size:12px;margin-bottom:16px}.intro-steps{gap:8px;margin-bottom:18px}.concept-note{margin-top:12px}#lab{top:110px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* The next action stays separate from match commentary and equipment settings. */
#actionGuide{position:absolute;left:50%;top:117px;transform:translateX(-50%);width:max-content;max-width:min(560px,75vw);padding:11px 18px;border:1px solid #a8ddc738;border-radius:7px;background:#122e35e8;text-align:center;pointer-events:none}
#actionGuide strong{display:block;font-size:15px;font-weight:650;color:var(--cyan)}#actionGuide span{display:block;font-size:11px;line-height:1.5;margin-top:5px;color:#c5d9cf}
#event{top:185px;font-size:10px;padding:6px 11px;background:#15323591;border-color:#b9dbce16;color:#b2c9bf}
.world-tag.locked{color:var(--cyan);border-color:#8af4d48c;background:#12342ce0}#playerTag{border-color:#8af4d44a;font-weight:700}
.intent-heading b{font-size:12px;font-weight:650}.meter{height:8px}.threshold{height:8px}
#advancedControls{border-top:1px solid #b9dbce22;margin-top:18px}#advancedControls summary{padding:12px 0;font-size:10px;color:#c1d3cb}#advancedControls p{font-size:10px;color:var(--muted);line-height:2}
body.lobby #actionGuide,body.lobby #playerTag{opacity:0}
.stick-wrap{text-align:center}.stick-wrap>span{display:block;margin-top:8px;font-size:8px;letter-spacing:1px;color:#b9d9ca}
#touchControls .touch-buttons{display:flex;flex-direction:column;gap:8px;min-width:132px}#touchThrow{min-height:64px;font-weight:700;font-size:10px;letter-spacing:.5px;background:#8af4d4!important;color:#112e28!important;border-color:#acffe4!important}#touchThrow[aria-pressed=true]{background:#b9ffe7!important;box-shadow:0 0 20px #8af4d433}#touchDepth{min-height:32px;font-size:9px}
@media(max-width:800px){#actionGuide{top:151px;max-width:calc(100vw - 28px);width:calc(100vw - 28px);padding:9px 12px}#actionGuide strong{font-size:13px}#actionGuide span{font-size:10px}#event{top:215px;width:max-content;max-width:90vw;font-size:8px}body:not(.lobby) #lab{top:248px}.intent-heading b{font-size:11px}#controls{display:none}}
body.lobby .flight-readout{visibility:hidden}#arena:focus-visible{outline:none}#rendererNote{position:absolute;right:32px;top:92px;font-size:9px;letter-spacing:.8px;color:var(--muted);pointer-events:none}
@media(max-width:800px){#rendererNote{top:119px;left:14px;right:auto;font-size:8px}body:not(.lobby) #rendererNote{top:auto;bottom:110px;left:14px}}
.small-note a{color:var(--cyan);display:block;margin-top:7px;text-decoration:none}.small-note a:hover{text-decoration:underline}
.touch-buttons button[aria-pressed=true]{background:var(--cyan);color:#113a2e}

/* Reserve space for the taller flight readout below the phone's thumb controls. */
@media(pointer:coarse) and (max-width:800px){#touchControls{bottom:168px}body:not(.lobby) #rendererNote{display:none}}

.brand{color:inherit;text-decoration:none}.brand:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}