:root{--ink:#102d35;--cream:#fffaf0;--mint:#c9f2de;--accent:#ffcc58;--line:#24404a26;--blue:#31b6f4;--pink:#ff7297;font-family:Inter,Arial,Helvetica,sans-serif;color:var(--ink);font-size:16px;line-height:1.45;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:#12343b}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;color:inherit;transition:transform .15s,background .15s,box-shadow .15s}button:hover{filter:brightness(.97)}button:active{transform:translateY(2px)}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ed6d39;outline-offset:4px}button:focus:not(:focus-visible){outline:none}[hidden]{display:none!important}a{color:inherit;text-decoration:none}#app{max-width:2000px;margin:auto;background:var(--cream);min-height:100dvh;display:flex;flex-direction:column}.topbar{height:74px;padding:0 36px;display:flex;align-items:center;gap:26px;border-bottom:1px solid var(--line);position:relative;z-index:3}.topbar>a{font-size:31px;letter-spacing:-1.8px;font-weight:950;display:flex;align-items:center;gap:10px}.brand-ball{font-size:39px;line-height:1;color:#ed7749;letter-spacing:0}.brand-dot{color:#ef7953;margin-left:-8px}.edition{font-size:12px;font-weight:800;letter-spacing:1.7px;border-left:1px solid #102d3533;padding-left:26px}.topbar nav{display:flex;margin-left:auto;gap:10px}.icon-button{background:transparent;border:1px solid #102d3526;border-radius:7px;padding:9px 12px;font-size:13px;font-weight:650}.arena{isolation:isolate;position:relative;flex:1;min-height:620px;overflow:hidden;background:#afdfdc;display:grid}.arena canvas{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}.court-tag{position:absolute;right:32px;top:24px;background:#fffaf0e8;backdrop-filter:blur(12px);border:1px solid #ffffff88;border-radius:6px;display:flex;align-items:center;gap:9px;padding:10px 14px;font-size:12px;font-weight:850;letter-spacing:.9px;z-index:1}.court-tag i{width:6px;height:6px;border-radius:50%;background:#258774}.court-tag small{color:#698079;margin-left:18px}.menu-panel{position:relative;align-self:center;justify-self:start;z-index:2;margin:32px 0 36px 6%;width:365px;padding:34px;background:var(--cream);box-shadow:0 10px 0 #10363b,0 25px 55px #1a444130;border:1px solid #102d351f;border-radius:14px;transform:rotate(-1deg)}.eyebrow{font-size:11px;font-weight:850;letter-spacing:1.7px;display:flex;align-items:center;gap:7px}.eyebrow>span{width:6px;height:6px;background:#ed7d47;border-radius:50%}h1{font-size:76px;line-height:.94;letter-spacing:-5px;font-weight:950;margin:25px 0 16px}h1 em{font-style:normal;color:#e9764b}h2{font-size:32px;line-height:1.1;letter-spacing:-1.2px;margin:10px 0 18px}.menu-panel p{font-size:16px;color:#536361;margin:0 0 23px;line-height:1.6}.court-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 20px}.court-picker button{border-radius:6px;text-align:left;padding:9px;background:#eaf0e7;font-size:10px;color:#637973}.court-picker span{display:block;color:var(--ink);font-size:13px;font-weight:750;margin-top:2px}.court-picker .selected{background:#c9f2de;box-shadow:inset 0 0 0 2px #337f67}.primary,.secondary{padding:13px 19px;border-radius:7px;font-weight:800;font-size:15px}.primary{background:var(--ink);color:white;box-shadow:0 3px 0 #061a20}.secondary{background:var(--accent);color:var(--ink);box-shadow:0 3px 0 #c9a33f}.big{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:11px;padding:14px 17px}.big span{font-size:13px}.big.primary span{font-size:22px;line-height:1}.text-button{background:transparent;text-align:left;font-size:14px;font-weight:750;padding:15px 0}.text-button span{display:inline-flex;margin-left:8px;border:1px solid #718b80;border-radius:50%;width:17px;height:17px;align-items:center;justify-content:center;font-size:11px}.menu-foot{border-top:1px solid var(--line);padding-top:13px;font-size:11px;color:#72817b}.arena-caption{position:absolute;bottom:38px;right:40px;text-align:right;text-shadow:0 2px 2px #fff5}.arena-caption span{font-size:11px;letter-spacing:2px;font-weight:800;display:block;margin-bottom:10px}.arena-caption strong{font-size:26px;line-height:1.15;font-weight:850;letter-spacing:-.8px}.bottom-bar{background:var(--ink);color:#d9e8df;min-height:53px;padding:10px 25px;display:flex;align-items:center;gap:24px;font-size:11px;font-weight:700;z-index:3}.bottom-bar>span{white-space:nowrap}#connection i{display:inline-block;width:6px;height:6px;background:#84dcb0;border-radius:50%;margin-right:7px}#key-hints{display:flex;gap:15px;margin:auto;align-items:center}#key-hints span{white-space:nowrap;color:#a8c1ba;font-weight:500}kbd{display:inline-block;padding:3px 5px;border:1px solid #68867d;border-radius:4px;color:#fff3d9;font:700 10px inherit;margin-right:3px}#fps-label{color:#8faea7;font-weight:500}.scoreboard{position:absolute;top:22px;left:50%;transform:translateX(-50%);display:flex;align-items:stretch;background:#fffaf0f0;box-shadow:0 5px 0 #10333b26;border:1px solid #fff8;border-radius:12px;overflow:hidden;min-width:332px}.team-score{display:grid;grid-template-columns:1fr auto;gap:0 15px;align-items:center;padding:9px 17px;position:relative;min-width:104px}.team-score>span{font-size:10px;letter-spacing:1px;font-weight:850;grid-column:1/-1}.team-score strong{font-size:39px;line-height:1.1;letter-spacing:-2px}.team-score small{font-size:14px}.blue{border-bottom:4px solid var(--blue)}.pink{border-bottom:4px solid var(--pink)}.match-meta{padding:12px 15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-right:1px solid var(--line);border-left:1px solid var(--line)}.match-meta span{font-size:10px;font-weight:850;letter-spacing:2px}.match-meta b{font-size:10px;color:#7a8980}.match-meta small{font-size:11px;font-weight:750;color:#d7793b}.play-message{position:absolute;top:130px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:14px;font-weight:800;background:#fffaf0e8;box-shadow:0 2px 10px #15312f0d;border-radius:30px;padding:9px 20px;pointer-events:none}.height-info{position:absolute;left:25px;top:25px;background:#11343bec;color:white;padding:12px 15px;border-radius:7px;display:flex;flex-direction:column;min-width:124px}.height-info span{font-size:9px;letter-spacing:1.3px;color:#c6dcd5}.height-info strong{font-size:22px;font-weight:800}.height-info small{font-size:11px;color:#d8e4bf}.pause-button{position:absolute;bottom:23px;right:25px;width:43px;height:43px;border-radius:50%;background:#fffaf0ed;font-weight:800;font-size:18px}.charge-box{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);width:min(320px,70%);padding:12px 16px;background:#fffaf0f5;border-radius:8px;box-shadow:0 4px 0 #173a3b30}.charge-box>div:first-child{display:flex;justify-content:space-between;font-size:12px;margin-bottom:7px}.charge-box b{color:#ce5939}.charge-track{height:9px;border-radius:5px;background:#102d351a;overflow:hidden}.charge-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#5fbf8f,#efcd5e,#f17951);border-radius:5px}.end-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:40px;background:var(--cream);border-radius:16px;box-shadow:0 10px 0 var(--ink);text-align:center;min-width:300px}.end-panel .eyebrow{justify-content:center}.end-panel p{font-size:24px}.end-panel button{margin:5px}.end-panel h2{font-size:42px}
dialog{background:var(--cream);color:var(--ink);border:1px solid #ffffff80;border-radius:16px;padding:30px;width:min(680px,calc(100% - 28px));max-height:calc(100dvh - 40px);box-shadow:0 20px 100px #051e3470}dialog::backdrop{background:#0c2e3f80;backdrop-filter:blur(7px)}.dialog-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.close{background:#e8ede3;border-radius:50%;width:33px;height:33px;font-size:24px;line-height:1}.character-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0 20px}.character{background:#e6ede7;border:2px solid transparent;text-align:left;border-radius:9px;padding:12px;position:relative;overflow:hidden}.character.selected{border-color:#173e38;background:#d5eedf}.character .portrait{display:block;width:76px;height:84px;margin:auto}.character strong{font-size:16px;display:block;margin-top:7px}.character small{display:block;font-size:11px;color:#5d7068;min-height:32px}.character .stat{display:flex;align-items:center;gap:5px;font-size:9px;color:#64776d;margin-top:3px}.stat i{display:block;width:50px;height:4px;background:#bac9be;border-radius:2px;overflow:hidden}.stat i b{display:block;height:100%;background:#358777}.setup-row{display:flex;gap:16px}.setup-row label{flex:1}label{display:block;font-size:13px;font-weight:750;margin:14px 0}input:not([type=checkbox]):not([type=range]),select{display:block;border:1px solid #b9c5b9;background:#fffdf7;border-radius:6px;padding:11px 12px;color:var(--ink);width:100%;margin-top:6px;font-size:16px}input[type=range]{width:100%;accent-color:#247861}.wide{width:100%;margin-top:10px}.muted{font-size:13px;line-height:1.6;color:#65766e}.error{font-size:14px;color:#b64135;white-space:pre-line}.or{font-size:10px;font-weight:750;letter-spacing:1.5px;text-align:center;margin:24px 0 16px;color:#6d7e75}.join-row{display:flex;gap:10px}.join-row input{margin:0!important;letter-spacing:3px;text-transform:uppercase}.join-row button{min-width:100px}.room-code-label{text-align:center;letter-spacing:2px;font-size:11px;margin-top:20px}#lobby-code{text-align:center;letter-spacing:10px;font-size:44px;font-weight:900;margin:4px 0 20px}.lobby-person{padding:13px;border:1px solid var(--line);border-radius:7px;margin:7px 0;display:flex;gap:12px;align-items:center}.lobby-person i{width:13px;height:13px;border-radius:50%}.lobby-person small{margin-left:auto;color:#71867b}.bindings{display:grid;grid-template-columns:1fr 1fr;gap:8px}.binding{display:flex;align-items:center;justify-content:space-between;background:#ecf0e6;padding:8px 12px;font-size:13px;border-radius:6px}.binding button{background:white;min-width:70px;padding:7px;border-radius:4px;font-size:12px;font-weight:750}.binding button.listening{background:#ffc65d}.check-label{display:flex;align-items:center;gap:10px;font-size:13px;line-height:1.4}.check-label input{width:18px;height:18px;accent-color:#247861;flex-shrink:0}.help-steps{padding-left:24px}.help-steps li{padding:6px 0}.help-steps b{font-size:16px}.help-steps p{font-size:14px;color:#5d7167;margin:5px 0 12px;line-height:1.6}.rule-note{background:#e5efdf;padding:16px;border-radius:8px;font-size:13px;line-height:1.65}#pause-dialog{max-width:370px;text-align:center}.mobile-controls{position:absolute;inset:auto 0 12px;display:flex;justify-content:space-between;align-items:end;padding:0 25px;pointer-events:none;user-select:none}.joystick{width:112px;height:112px;border-radius:50%;background:#fff9;border:2px solid #fff9;position:relative;touch-action:none;pointer-events:auto;box-shadow:0 2px 7px #173a3b20}.joystick i{position:absolute;width:46px;height:46px;left:31px;top:31px;border-radius:50%;background:#193e45a8;border:2px solid #fff8}.joystick span{position:absolute;bottom:3px;font-size:9px;letter-spacing:1px;width:100%;text-align:center}.touch-actions{display:grid;grid-template-columns:repeat(2,62px);gap:7px;pointer-events:auto}.touch-actions button{height:49px;border-radius:15px;background:#fffaf0ee;border:2px solid white;font-size:11px;font-weight:850;touch-action:none;box-shadow:0 3px 0 #18383a3b}.touch-actions .attack{background:#ffcc58}.touch-actions button.held{background:#afd8bb;transform:translateY(2px)}.playing .court-tag{display:none}.playing .arena-caption,.playing #menu{display:none}.playing .arena{min-height:450px}
@media(min-width:1600px){.arena{min-height:740px}.menu-panel{margin-left:9%;width:395px;padding:40px}h1{font-size:84px}}
@media(max-width:1050px){.edition{display:none}.menu-panel{margin-left:4%;width:330px;padding:26px}h1{font-size:68px}.arena-caption{right:24px}.arena-caption strong{font-size:22px}#fps-label{display:none}.bottom-bar{gap:12px;padding:10px 15px}#key-hints{gap:9px}.topbar{padding:0 22px}.arena{min-height:615px}}
@media(max-width:700px){.topbar{height:59px;padding:0 14px;gap:5px}.topbar>a{font-size:25px}.brand-ball{font-size:30px}.icon-button{padding:7px 9px;font-size:11px}.topbar nav{gap:5px}.arena{min-height:750px}.menu-panel{margin:48px auto 220px;justify-self:center;width:min(330px,calc(100% - 40px));padding:26px;transform:none}.court-tag{top:15px;right:15px;padding:7px 9px;font-size:10px}.arena-caption{bottom:30px;right:20px}.arena-caption strong{font-size:20px}h1{font-size:65px}.bottom-bar{min-height:43px;justify-content:center}#key-hints{display:none}.playing .arena{min-height:calc(100dvh - 102px)}.scoreboard{top:14px;min-width:270px}.team-score{min-width:85px;padding:8px 12px;gap:0 8px}.team-score strong{font-size:30px}.match-meta{padding:8px 10px}.height-info{top:110px;left:12px;padding:8px 10px;min-width:83px}.height-info span{font-size:8px}.height-info strong{font-size:17px}.height-info small{font-size:9px}.play-message{top:105px;max-width:calc(100% - 130px);left:auto;right:12px;transform:none;font-size:11px;white-space:normal;padding:8px 11px}.charge-box{bottom:155px;max-width:240px}.pause-button{bottom:141px;right:14px;width:35px;height:35px;font-size:16px}.mobile-controls{padding:0 15px;bottom:14px}.character-grid{gap:6px}.character{padding:8px}.character small{font-size:10px}.character strong{font-size:14px}.character .portrait{height:70px;width:62px}.character .stat{display:none}dialog{padding:22px}.bindings{gap:6px}.binding{padding:7px;font-size:11px}.binding button{min-width:58px;font-size:10px}.setup-row{gap:8px}.eyebrow{font-size:9px;letter-spacing:1.3px}.end-panel{padding:26px}.end-panel h2{font-size:32px}}
@media(orientation:landscape) and (max-height:550px){.topbar{height:45px}.arena{min-height:560px}.playing .arena{min-height:calc(100dvh - 77px)}.bottom-bar{min-height:32px;padding:6px;font-size:10px}.playing .scoreboard{top:7px;min-width:255px}.team-score strong{font-size:25px}.team-score{padding:3px 12px}.team-score>span{font-size:9px}.match-meta{padding:5px 10px}.play-message{top:72px}.height-info{top:10px}.charge-box{bottom:14px;width:240px}.mobile-controls{bottom:9px;padding:0 18px}.joystick{width:92px;height:92px}.joystick i{left:21px;top:21px}.touch-actions{grid-template-columns:repeat(2,55px);gap:5px}.touch-actions button{height:38px}.pause-button{bottom:112px;right:20px;width:30px;height:30px}#key-hints{display:none}}
@media(prefers-reduced-motion:reduce){button{transition:none}.menu-panel{transform:none}}
.live-games{margin-top:15px;border-top:1px solid var(--line);padding-top:12px}.live-heading{display:flex;align-items:center;justify-content:space-between;letter-spacing:1px;font-size:10px}.live-heading>span{background:#dcead8;border-radius:4px;padding:1px 6px}.live-empty{font-size:12px!important;line-height:1.4!important;margin:9px 0 0!important;color:#6c7c70!important}.live-game{display:grid;grid-template-columns:1fr auto;gap:3px 8px;padding:9px 0;border-bottom:1px solid #102d3510}.live-game:last-child{border-bottom:0;padding-bottom:0}.live-game strong{font-size:12px;letter-spacing:0}.live-game b{font-size:15px}.live-game small{grid-column:1/-1;font-size:10px;line-height:1.4;color:#607168;overflow-wrap:anywhere}.live-game .live-state{font-size:10px;font-weight:650}.radio-shortcut{position:absolute;bottom:16px;left:22px;background:#10363bef;color:#fff2d1;border:1px solid #fff4;border-radius:7px;padding:8px 12px;font-size:12px;font-weight:800;z-index:3}.radio-shortcut span{margin-left:8px;font-size:10px;color:#b9d1c5}.radio-panel{position:absolute;bottom:59px;left:22px;background:var(--cream);padding:17px;border-radius:10px;width:265px;box-shadow:0 6px 0 #10363b,0 12px 40px #153d4940;z-index:6;border:1px solid #102d3520}.radio-head{display:flex;justify-content:space-between;align-items:flex-start}.radio-head b{font-size:25px;letter-spacing:-1px}.radio-head small{display:block;font-size:8px;letter-spacing:1.4px;color:#667e73}.radio-head button{background:#e5ebdf;border-radius:50%;font-size:20px;width:27px;height:27px}.radio-panel p{font-size:12px;min-height:33px;color:#62756a;margin:10px 0}.radio-actions{display:flex;gap:7px}.radio-actions button{background:#133d42;color:#fff8e3;border-radius:5px;padding:9px 12px;font-size:12px;font-weight:750}.radio-actions button+button{background:#e4eadc;color:#34574d}.radio-panel label{font-size:12px;margin:12px 0 6px}.radio-panel output{float:right}.radio-panel a{font-size:10px;color:#5b7766}.radio-shortcut.playing{background:#baeed3;color:#123e36}.playing .radio-shortcut.playing{display:block}.menu-panel{margin-top:28px;margin-bottom:30px}#menu h1{margin-top:20px}.menu-panel .menu-foot{font-size:10px}.radio-unavailable{font-size:11px;color:#b25c44}
@media(max-width:700px){.arena{min-height:870px}.menu-panel{margin-top:48px;margin-bottom:240px}.radio-panel{left:12px;bottom:193px;width:245px}.radio-shortcut{left:12px;bottom:145px;padding:6px 10px}.arena:not(:has(#hud:not([hidden]))) .radio-shortcut{bottom:20px}.arena:not(:has(#hud:not([hidden]))) .radio-panel{bottom:62px}.live-game small{font-size:10px}.live-empty{font-size:11px!important}}
@media(orientation:landscape) and (max-height:550px){.radio-shortcut{bottom:112px;left:18px}.radio-panel{bottom:151px;left:18px;padding:12px;width:235px}.radio-panel p{min-height:16px}.playing .arena{min-height:calc(100dvh - 77px)}}

.arena-caption{top:88px;bottom:auto;right:32px}@media(max-width:700px){.arena-caption{display:none}}

#chat-unread{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:4px;border-radius:9px;background:#ed4f3b;color:white;font-size:10px;font-weight:900}.radio-now{background:#e7efe3;border:1px solid #173e3818;border-radius:7px;padding:9px 10px;margin:11px 0 4px}.radio-now small{display:block;font-size:8px;letter-spacing:1.2px;color:#6b7c72}.radio-now strong{display:block;font-size:12px;line-height:1.35;margin-top:2px;overflow-wrap:anywhere}.chat-panel{position:absolute;right:18px;bottom:16px;width:330px;max-height:min(520px,calc(100% - 32px));background:rgba(248,246,233,.54);backdrop-filter:blur(9px) saturate(1.08);-webkit-backdrop-filter:blur(9px) saturate(1.08);border:1px solid #fff9;border-radius:12px;box-shadow:0 5px 0 #10363bc7,0 13px 34px #153d4930;z-index:12;padding:12px;display:flex;flex-direction:column;gap:8px;transition:width .18s ease,background .18s ease,transform .18s ease}.chat-head{display:flex;align-items:center;justify-content:space-between;min-height:31px}.chat-title{display:flex;align-items:center;gap:7px;min-width:0;flex-wrap:wrap}.chat-head b{font-size:20px;letter-spacing:-.6px}.chat-head small{display:block;width:100%;font-size:8px;letter-spacing:1.2px;color:#667e73}.chat-head button{background:#e5ebdfb8;border-radius:50%;font-size:17px;width:27px;height:27px;line-height:1}.chat-dot{width:9px;height:9px;border-radius:50%;background:#ef4338;box-shadow:0 0 0 3px #ef433826;animation:chatPulse 1.25s ease-in-out infinite}.chat-body{display:flex;flex-direction:column;gap:8px;min-height:0}.chat-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px}.chat-tabs button{padding:7px 8px;border-radius:5px;background:#e4eadfba;font-size:10px;font-weight:850;letter-spacing:.7px}.chat-tabs button.selected{background:#173e3ce8;color:#fff9e9}.chat-tabs button:disabled{opacity:.45}.chat-name-row{font-size:10px;margin:0}.chat-name-row input{font-size:12px!important;padding:7px 8px!important;margin-top:3px!important;background:rgba(255,252,224,.48)!important}.chat-messages{height:245px;overflow:auto;background:rgba(242,241,233,.42);border:1px solid #102d3512;border-radius:7px;padding:7px;scrollbar-width:thin}.chat-empty{font-size:11px;color:#6e7e75;text-align:center;padding:26px 8px}.chat-message{padding:7px 6px;border-bottom:1px solid #102d3510}.chat-message:last-child{border-bottom:0}.chat-message>div{display:flex;align-items:baseline;gap:8px}.chat-message b{font-size:11px}.chat-message time{margin-left:auto;font-size:8px;color:#849087}.chat-message p{font-size:12px!important;line-height:1.35!important;color:#344d49!important;margin:2px 0 0!important;overflow-wrap:anywhere}.chat-status{font-size:9px!important;line-height:1.3!important;color:#75837b!important;margin:0!important;min-height:12px}.chat-panel form{display:flex;gap:6px}.chat-panel form input{margin:0!important;min-width:0;font-size:13px!important;padding:9px!important;background:rgba(255,252,224,.50)!important}.chat-panel form button{background:#133d42e8;color:#fff8e3;border-radius:5px;padding:8px 11px;font-size:11px;font-weight:800}.chat-panel.minimized{width:176px;padding:8px 10px;background:rgba(248,246,233,.46);box-shadow:0 3px 0 #10363ba8,0 8px 24px #153d4925}.chat-panel.minimized .chat-body,.chat-panel.minimized .chat-head small{display:none}.chat-panel.minimized .chat-head{cursor:pointer}.chat-panel.minimized .chat-head b{font-size:14px;letter-spacing:.4px}.chat-panel.minimized .chat-title{flex-wrap:nowrap}.chat-panel.minimized .chat-dot{display:block}.playing .chat-panel{bottom:16px}@keyframes chatPulse{0%,100%{transform:scale(.9);opacity:.78}50%{transform:scale(1.12);opacity:1}}@media(max-width:700px){.chat-panel{position:fixed;right:8px;left:8px;bottom:8px;width:auto;max-height:62dvh;padding:11px;z-index:30}.chat-panel.minimized{left:auto;right:8px;width:160px}.chat-messages{height:min(235px,34dvh)}.topbar nav{gap:3px}.topbar .icon-button{padding:6px 7px;font-size:10px}}@media(orientation:landscape) and (max-height:550px){.chat-panel{right:10px;left:auto;bottom:8px;width:310px;max-height:calc(100dvh - 56px)}.chat-panel.minimized{width:160px}.chat-messages{height:155px}}@media(prefers-reduced-motion:reduce){.chat-dot{animation:none}}

.radio-panel.speaker-anchored{position:absolute;margin:0;right:auto;transform:none}

.radio-panel{width:220px;padding:10px 11px;border-radius:8px;box-shadow:0 4px 0 #10363b,0 9px 26px #153d4935}
.radio-head b{font-size:19px;letter-spacing:-.6px}.radio-head small{font-size:7px;letter-spacing:1px}.radio-head button{width:23px;height:23px;font-size:16px}
.radio-panel p{font-size:10px;min-height:20px;margin:6px 0}.radio-now{padding:6px 7px;margin:7px 0 3px}.radio-now small{font-size:7px}.radio-now strong{font-size:10px;line-height:1.25}
.radio-actions{gap:5px}.radio-actions button{padding:6px 8px;font-size:10px}.radio-panel label{font-size:10px;margin:7px 0 3px}.radio-panel input[type=range]{height:18px}.radio-panel a{font-size:9px}
@media(max-width:700px){.radio-panel{width:210px;padding:9px}.radio-actions button{padding:6px 7px}.radio-now strong{font-size:9px}}


.radio-control-bar{width:365px;padding:7px 9px;background:rgba(255,250,240,.72);backdrop-filter:blur(10px) saturate(1.08);-webkit-backdrop-filter:blur(10px) saturate(1.08);border:1px solid rgba(255,255,255,.62);border-radius:8px;box-shadow:0 3px 0 #10363bbd,0 8px 22px #153d492b}
.radio-compact-head{height:20px;display:flex;align-items:center;gap:7px;margin-bottom:4px}.radio-compact-head strong{font-size:13px;letter-spacing:.4px}.radio-compact-head small{font-size:8px;letter-spacing:1px;color:#60756c;font-weight:850}.radio-compact-head button{margin-left:auto;width:20px;height:20px;border-radius:50%;background:rgba(229,235,223,.68);font-size:14px;line-height:1}
.radio-control-row{display:flex;align-items:center;gap:5px}.radio-control-row>button{width:31px;height:29px;padding:0;border-radius:5px;background:rgba(19,61,66,.88);color:#fff8e3;font-size:12px;font-weight:900}.radio-control-row>button.active{background:#70c99d;color:#113d38;box-shadow:inset 0 0 0 1px #245e4c4d}.radio-control-row>button#radio-stop{font-size:10px}
.radio-volume-compact{margin:0 0 0 3px!important;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;flex:1;min-width:0;font-size:8px!important;font-weight:850;letter-spacing:.7px}.radio-volume-compact input[type=range]{width:100%;min-width:90px;height:18px;margin:0}.radio-volume-compact output{float:none;min-width:30px;text-align:right;font-size:9px;color:#536b63}
#connection::after{content:" · BUILD 1.7.2";color:#8faea7;font-weight:600;letter-spacing:.2px}
@media(max-width:700px){.radio-control-bar{width:min(330px,calc(100vw - 18px));padding:6px 8px}.radio-volume-compact input[type=range]{min-width:65px}.radio-control-row>button{width:29px;height:28px}}
@media(orientation:landscape) and (max-height:550px){.radio-control-bar{width:340px;padding:5px 7px}.radio-compact-head{margin-bottom:2px}}


@media (max-width:700px){
  .playing .chat-panel{bottom:145px;max-height:calc(100dvh - 190px)}
  .playing .chat-panel.minimized{bottom:132px}
}
@media (orientation:landscape) and (max-height:550px){
  .playing .chat-panel{bottom:98px;max-height:calc(100dvh - 132px)}
  .playing .chat-panel.minimized{bottom:96px}
}


@media (orientation:portrait) and (max-width:700px){
  .playing .chat-panel{bottom:calc(178px + env(safe-area-inset-bottom));max-height:calc(100dvh - 232px - env(safe-area-inset-bottom))}
  .playing .chat-panel.minimized{bottom:calc(168px + env(safe-area-inset-bottom))}
}
@media (orientation:landscape) and (max-height:550px){
  body.playing .topbar{display:none}
  body.playing .bottom-bar{min-height:24px;height:24px;padding:2px 8px;font-size:9px;gap:8px}
  body.playing .arena{min-height:calc(100dvh - 24px);height:calc(100dvh - 24px)}
  body.playing .chat-panel{bottom:112px;max-height:calc(100dvh - 140px)}
  body.playing .chat-panel.minimized{bottom:108px}
}

.home-profile{display:flex;align-items:center;gap:10px;margin:10px 0 12px;padding:8px 10px;border:1px solid rgba(29,78,77,.18);border-radius:14px;background:rgba(255,255,255,.62);backdrop-filter:blur(8px);max-width:330px}.home-profile canvas{width:66px;height:72px;flex:0 0 auto}.home-profile-fields{display:grid;grid-template-columns:1fr 1fr;gap:5px 7px;min-width:0;flex:1}.home-profile-fields small{grid-column:1/-1;font-weight:900;letter-spacing:.13em;font-size:9px;color:#315c58}.home-profile-fields input,.home-profile-fields select{min-width:0;width:100%;height:30px;border-radius:8px;border:1px solid rgba(32,75,72,.18);background:rgba(255,255,255,.68);padding:0 8px;color:#193f40;font:800 12px Arial}.solo-public-label{display:flex!important;align-items:center;gap:8px;margin:8px 0 12px;font-weight:850}.solo-public-label input{width:18px;height:18px}.solo-public-help{display:block;font-size:10px;font-weight:600;opacity:.62}.live-game{position:relative}.live-game-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.solo-live{padding-right:72px}.watch-game{position:absolute;right:8px;bottom:9px;border:0;border-radius:8px;padding:7px 10px;background:#173f42;color:#fff8df;font:900 10px Arial;letter-spacing:.08em;cursor:pointer}.watch-game:hover{transform:translateY(-1px)}.spectator-exit{position:absolute;z-index:45;top:72px;right:16px;border:1px solid rgba(255,255,255,.42);border-radius:10px;background:rgba(17,55,58,.78);backdrop-filter:blur(8px);color:#fff7dd;padding:9px 12px;font:900 10px Arial;letter-spacing:.08em;cursor:pointer}.spectating .mobile-controls{display:none!important}.spectating #pause{display:none!important}
@media(max-width:720px){.home-profile{max-width:none;margin:7px 0 9px;padding:6px 8px}.home-profile canvas{width:54px;height:60px}.home-profile-fields input,.home-profile-fields select{height:28px;font-size:11px}.spectator-exit{top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));padding:8px 10px}.solo-live{padding-right:62px}.watch-game{right:6px;bottom:7px;padding:6px 8px}}

.home-profile canvas{position:static!important;inset:auto!important;object-fit:contain!important;display:block!important;flex:0 0 66px!important;width:66px!important;height:72px!important}
@media(max-width:720px){.home-profile{align-items:center!important}.home-profile canvas{flex-basis:48px!important;width:48px!important;height:54px!important}.home-profile-fields{min-width:0!important}}

.home-profile{display:block!important;max-width:330px;padding:9px 10px 8px!important}
.home-profile-fields{display:block!important;width:100%}
.home-profile-fields>small{display:block;margin-bottom:5px}
.home-profile-fields #home-player-name{height:31px!important;margin:0 0 4px!important;text-align:center;font-size:12px!important}
.home-character-carousel{display:grid;grid-template-columns:30px minmax(0,1fr) 30px;align-items:center;gap:2px;height:104px;overflow:hidden;user-select:none}
.character-arrow{width:30px;height:48px;border:0;background:transparent;color:#173f42;font:800 32px/1 Arial;border-radius:10px;display:grid;place-items:center;padding:0;cursor:pointer;touch-action:manipulation}
.character-arrow:active{background:rgba(23,63,66,.08);transform:scale(.94)}
.home-character-stage{position:relative;height:104px;min-width:0;touch-action:pan-y;overflow:hidden}
.home-character-stage canvas{position:absolute!important;inset:auto!important;display:block!important;object-fit:contain!important}
.home-character-stage .active-character{position:absolute;z-index:3;left:50%;top:0;transform:translateX(-50%);width:92px;height:104px;text-align:center}
.home-character-stage .active-character canvas{position:static!important;width:82px!important;height:86px!important;margin:0 auto!important}
.home-character-stage .active-character strong{display:block;margin-top:-1px;font:900 11px/1.1 Arial;color:#173f42;letter-spacing:.04em}
.home-character-stage .side-character{z-index:1;width:58px!important;height:70px!important;top:10px!important;opacity:.46;filter:saturate(.75);transform:scale(.88)}
.home-character-stage .side-character.left{left:8%!important}
.home-character-stage .side-character.right{right:8%!important}
.home-character-stage.slide-left .active-character{animation:charBumpLeft .18s ease-out}
.home-character-stage.slide-right .active-character{animation:charBumpRight .18s ease-out}
@keyframes charBumpLeft{0%{transform:translateX(-42%);opacity:.75}100%{transform:translateX(-50%);opacity:1}}
@keyframes charBumpRight{0%{transform:translateX(-58%);opacity:.75}100%{transform:translateX(-50%);opacity:1}}
@media(max-width:720px){.home-profile{margin:7px 0 9px!important;padding:6px 8px 5px!important}.home-profile-fields #home-player-name{height:28px!important;margin-bottom:2px!important}.home-character-carousel{height:92px;grid-template-columns:28px minmax(0,1fr) 28px}.character-arrow{width:28px;height:44px;font-size:29px}.home-character-stage{height:92px}.home-character-stage .active-character{width:80px;height:92px}.home-character-stage .active-character canvas{width:72px!important;height:76px!important}.home-character-stage .active-character strong{font-size:10px}.home-character-stage .side-character{width:50px!important;height:61px!important;top:8px!important}.home-character-stage .side-character.left{left:5%!important}.home-character-stage .side-character.right{right:5%!important}}

.home-character-carousel{display:grid!important;grid-template-columns:30px minmax(0,1fr) 30px!important;align-items:center!important;gap:2px!important;height:104px!important;overflow:hidden!important}
.home-character-stage{position:relative!important;height:104px!important;min-width:0!important;overflow:hidden!important}
.home-character-stage .active-character{position:absolute!important;z-index:3!important;left:50%!important;top:0!important;transform:translateX(-50%)!important;width:92px!important;height:104px!important;text-align:center!important}
.home-character-stage .active-character canvas{position:static!important;width:82px!important;height:86px!important;margin:0 auto!important}
.home-character-stage .side-character{position:absolute!important;z-index:1!important;width:58px!important;height:70px!important;top:10px!important;opacity:.46!important;filter:saturate(.75)!important;transform:scale(.88)!important}
.home-character-stage .side-character.left{left:8%!important;right:auto!important}
.home-character-stage .side-character.right{right:8%!important;left:auto!important}
@media(max-width:720px){.home-character-carousel{grid-template-columns:28px minmax(0,1fr) 28px!important;height:92px!important}.home-character-stage{height:92px!important}.home-character-stage .active-character{width:80px!important;height:92px!important}.home-character-stage .active-character canvas{width:72px!important;height:76px!important}.home-character-stage .side-character{width:50px!important;height:61px!important;top:8px!important}.home-character-stage .side-character.left{left:5%!important}.home-character-stage .side-character.right{right:5%!important}}

.height-info{display:none!important}
#connection i{transition:background .18s,box-shadow .18s;width:8px;height:8px}
#connection[data-quality="good"] i{background:#5bd49b;box-shadow:0 0 0 3px rgba(91,212,155,.14)}
#connection[data-quality="warn"] i{background:#f0ba48;box-shadow:0 0 0 3px rgba(240,186,72,.15)}
#connection[data-quality="bad"] i{background:#ef654f;box-shadow:0 0 0 3px rgba(239,101,79,.16)}
#connection[data-quality="neutral"] i{background:#91aaa5}
.scoreboard.point-pop{animation:vollePointPop .78s cubic-bezier(.2,.8,.2,1)}
@keyframes vollePointPop{0%{transform:translateX(-50%) scale(1)}18%{transform:translateX(-50%) scale(1.075);box-shadow:0 0 0 7px rgba(255,204,88,.25),0 8px 24px rgba(16,45,53,.18)}100%{transform:translateX(-50%) scale(1)}}
.point-reset .play-message{font-weight:900;box-shadow:0 0 0 5px rgba(255,250,240,.18),0 8px 24px rgba(16,45,53,.12)}
.charge-box.serve-danger{box-shadow:0 0 0 3px rgba(222,78,56,.22),0 4px 0 rgba(23,58,59,.18);animation:serveDangerPulse .42s ease-in-out infinite alternate}
.charge-box.serve-danger .charge-track i{filter:saturate(1.35) brightness(.93)}
.charge-box.serve-danger #charge-value{color:#c94235;font-weight:950;letter-spacing:.04em}
@keyframes serveDangerPulse{from{transform:translateX(-50%) scale(1)}to{transform:translateX(-50%) scale(1.012)}}
.mobile-control-tuning{margin:18px 0 12px;padding:13px;border:1px solid rgba(30,70,69,.15);border-radius:10px;background:rgba(255,255,255,.42)}
.mobile-tune-title{font-size:10px;font-weight:900;letter-spacing:.13em;color:#315c58}.mobile-control-tuning p{margin:5px 0 9px}.mobile-tune-row{margin:8px 0!important;font-size:11px!important}.mobile-tune-row>span{display:flex;justify-content:space-between;gap:10px}.mobile-tune-row output{font-weight:850;color:#315c58}.mobile-tune-row input{margin-top:2px}
@media (pointer:coarse), (max-width:900px){.playing .mobile-controls{bottom:calc(14px + env(safe-area-inset-bottom) + var(--volle-mobile-lift,0px))!important;padding-left:calc(15px + var(--volle-mobile-inset,0px))!important;padding-right:calc(15px + var(--volle-mobile-inset,0px))!important}.playing .joystick{transform:scale(var(--volle-mobile-scale,1));transform-origin:left bottom}.playing .touch-actions{transform:scale(var(--volle-mobile-scale,1));transform-origin:right bottom}}
@media (orientation:landscape) and (max-height:550px){.playing .mobile-controls{bottom:calc(9px + env(safe-area-inset-bottom) + var(--volle-mobile-lift,0px))!important}}
@media(prefers-reduced-motion:reduce){.scoreboard.point-pop,.charge-box.serve-danger{animation:none!important}}

.menu-panel h1{font-size:48px;line-height:1;letter-spacing:-3px;margin:14px 0 8px}.menu-panel h1 br{display:none}.menu-panel h1 em{margin-left:.12em}.menu-panel>p{margin-bottom:15px;line-height:1.42}@media(max-width:700px){.menu-panel h1{font-size:39px;letter-spacing:-2px;margin:10px 0 7px;white-space:nowrap}.menu-panel>p{font-size:14px;line-height:1.35;margin-bottom:13px}}


@media (min-width:701px){
  .topbar{height:56px;padding:0 28px;gap:20px}
  .topbar>a{font-size:27px;gap:8px}
  .brand-ball{font-size:33px}
  .edition{font-size:10px;letter-spacing:1.45px;padding-left:20px}
  .icon-button{padding:7px 10px;font-size:12px}
  .topbar nav{gap:7px}
}
@media (min-width:701px) and (max-height:850px){
  #app{height:100dvh;min-height:0;overflow:hidden}
  .topbar{flex:0 0 52px;height:52px}
  .arena{min-height:0}
  .bottom-bar{flex:0 0 43px;min-height:43px;padding:6px 20px}
  .menu-panel{margin-top:16px;margin-bottom:16px}
}



.court-picker-label{margin:2px 0 7px;font-size:9px;font-weight:900;letter-spacing:.14em;color:#315c58}
.court-picker{gap:7px;margin-bottom:16px}
.court-picker button{position:relative;overflow:hidden;height:76px;padding:47px 8px 7px;border:1px solid rgba(25,65,63,.12);background:#edf2e9;box-shadow:0 2px 0 rgba(16,45,53,.08);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.court-picker button:hover{transform:translateY(-2px);box-shadow:0 5px 12px rgba(16,45,53,.11)}
.court-picker button>small{position:absolute;left:7px;top:5px;z-index:2;padding:2px 4px;border-radius:4px;background:rgba(255,250,240,.78);backdrop-filter:blur(4px);color:#315c58;font-size:8px;font-weight:900;letter-spacing:.08em}
.court-picker button>span{position:relative;z-index:2;margin:0;font-size:12px;font-weight:900;line-height:1;color:#173f42}
.court-preview{position:absolute;z-index:0;left:0;right:0;top:0;height:43px;display:block;border-bottom:1px solid rgba(16,45,53,.13);overflow:hidden}
.court-preview::before,.court-preview::after{content:"";position:absolute;display:block}
.court-preview.beach{background:linear-gradient(#8fd7df 0 58%,#f0d48f 58% 100%)}
.court-preview.beach::before{left:50%;top:7px;width:2px;height:31px;background:#fff7df;box-shadow:-18px 8px 0 -0.5px #fff7df,18px 8px 0 -0.5px #fff7df}
.court-preview.beach::after{left:22%;right:10%;top:23px;height:1px;background:repeating-linear-gradient(90deg,rgba(36,79,79,.55) 0 3px,transparent 3px 6px);box-shadow:0 5px 0 rgba(36,79,79,.16)}
.court-preview.indoor{background:linear-gradient(180deg,#18354c 0 48%,#d9aa68 49% 100%)}
.court-preview.indoor::before{left:8%;right:8%;top:5px;height:13px;background:radial-gradient(circle at 12% 30%,#fff9ca 0 2px,transparent 3px),radial-gradient(circle at 38% 30%,#fff9ca 0 2px,transparent 3px),radial-gradient(circle at 64% 30%,#fff9ca 0 2px,transparent 3px),radial-gradient(circle at 90% 30%,#fff9ca 0 2px,transparent 3px)}
.court-preview.indoor::after{left:14%;right:14%;bottom:5px;height:17px;border:1px solid rgba(255,250,230,.75);border-top:0;background:linear-gradient(90deg,transparent 49%,rgba(255,250,230,.7) 49% 51%,transparent 51%)}
.court-preview.annelinn{background:linear-gradient(#9acfd0 0 44%,#719b75 44% 60%,#7f8582 60% 100%)}
.court-preview.annelinn::before{left:5%;bottom:16px;width:18px;height:19px;background:#d7c2a0;box-shadow:20px -5px 0 #c8b493,40px 1px 0 #ead6b4,60px -7px 0 #b8aa90,80px -2px 0 #d9c59f}
.court-preview.annelinn::after{left:7%;right:7%;bottom:7px;height:1px;background:#f7efca;box-shadow:0 -8px 0 rgba(238,244,222,.45)}
.court-picker .selected{background:#e9f5e9;border-color:#337f67;box-shadow:inset 0 0 0 2px #337f67,0 4px 11px rgba(34,109,87,.12)}
#home-player-name::placeholder{color:rgba(49,92,88,.42);font-weight:750}
#home-player-name.name-required{border-color:#dc644f!important;box-shadow:0 0 0 3px rgba(220,100,79,.13)!important;animation:nameNudge .22s ease-in-out 2}
@keyframes nameNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
@media(max-width:720px){.court-picker button{height:70px;padding-top:43px}.court-preview{height:39px}.court-picker-label{margin-top:1px;margin-bottom:6px}}


.court-picker-label{display:block;clear:both;margin:5px 0 7px!important}
.home-profile + .court-picker-label{margin-top:7px!important}
.court-preview.annelinn{background:linear-gradient(180deg,#101d32 0 49%,#263d42 49% 61%,#3d454a 61% 100%)!important}
.court-preview.annelinn::before{left:7%!important;bottom:15px!important;width:16px!important;height:17px!important;background:#263342!important;box-shadow:19px -4px 0 #303c49,38px 1px 0 #222f3d,57px -6px 0 #35414d,76px -1px 0 #283746!important}
.court-preview.annelinn::after{left:11%!important;right:auto!important;bottom:5px!important;width:3px!important;height:31px!important;background:#1a2934!important;box-shadow:27px 0 0 #1a2934,54px 0 0 #1a2934,81px 0 0 #1a2934,0 -22px 8px 4px rgba(255,225,139,.35),27px -22px 8px 4px rgba(255,225,139,.32),54px -22px 8px 4px rgba(255,225,139,.32),81px -22px 8px 4px rgba(255,225,139,.35)!important}
@media (pointer:coarse) and (min-width:1100px) and (min-height:700px){.playing .mobile-controls{display:none!important}}


@media (min-width:701px){
  #app{height:100vh;height:100dvh;min-height:0;overflow:hidden}
  .topbar{flex-shrink:0}
  .arena{flex:1 1 0;min-height:0}
  .bottom-bar{flex:0 0 53px;min-height:53px}
  body:not(.playing) .arena{overflow:auto}
}
@media (min-width:701px) and (max-height:850px){
  .bottom-bar{flex-basis:43px;min-height:43px}
}


.menu-panel{padding:22px!important;margin-top:9px!important;margin-bottom:9px!important;width:min(410px,calc(100% - 28px))!important}
.menu-panel h1{font-size:38px!important;line-height:.92!important;letter-spacing:-2.4px!important;margin:0 0 3px!important;color:var(--ink)!important}
.menu-panel>p{font-size:11px!important;line-height:1.2!important;margin:0 0 7px!important;white-space:nowrap}
.home-profile{margin:5px 0 7px!important;padding:6px 8px 4px!important}
.home-profile-fields>small{margin-bottom:2px!important;font-size:8px!important}
.home-profile-fields #home-player-name{height:27px!important;margin-bottom:1px!important}
.home-character-carousel{height:82px!important}
.home-character-stage{height:82px!important}
.home-character-stage .active-character{height:82px!important}
.home-character-stage .active-character canvas{width:68px!important;height:69px!important}
.home-character-stage .side-character{width:45px!important;height:55px!important;top:6px!important}
.court-picker-label,.home-profile + .court-picker-label{margin:3px 0 5px!important}
.court-picker{margin-bottom:8px!important;gap:6px!important}
.court-picker button{height:59px!important;padding:36px 7px 5px!important}
.court-preview{height:33px!important}
.menu-play-row{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:0}
.menu-play-row .big{width:100%!important;margin:0!important;padding:10px 10px!important;font-size:12px!important;min-width:0;gap:5px}
.menu-play-row .big span{font-size:10px!important;flex:0 0 auto}
.menu-play-row .big.primary span{font-size:15px!important}
.menu-panel .text-button{padding:8px 0!important;font-size:12px!important}
.menu-panel .menu-foot{padding-top:7px!important;font-size:9px!important}
.live-games{margin-top:7px!important;padding-top:7px!important}
.live-game{padding:6px 0!important}
.live-empty{margin-top:5px!important}
@media(min-width:1600px){.menu-panel{padding:22px!important;margin-left:7%!important}}
@media(max-width:700px){
  .arena{min-height:0!important;overflow:auto!important}
  .menu-panel{margin:8px auto 58px!important;padding:15px!important;width:min(370px,calc(100% - 18px))!important}
  .menu-panel h1{font-size:33px!important;margin:0 0 2px!important}
  .menu-panel>p{font-size:10px!important;margin-bottom:5px!important;white-space:normal}
  .home-profile{margin:4px 0 5px!important;padding:5px 7px 3px!important}
  .home-character-carousel,.home-character-stage{height:72px!important}
  .home-character-stage .active-character{height:72px!important}
  .home-character-stage .active-character canvas{width:61px!important;height:60px!important}
  .home-character-stage .side-character{width:40px!important;height:48px!important;top:5px!important}
  .court-picker button{height:54px!important;padding-top:33px!important}
  .court-preview{height:30px!important}
  .menu-play-row{gap:6px}
  .menu-play-row .big{padding:9px 8px!important;font-size:11px!important}
  .menu-panel .text-button{padding:6px 0!important}
  .menu-panel .menu-foot{padding-top:5px!important}
  .live-games{margin-top:5px!important;padding-top:5px!important}
}
.chat-movable{will-change:left,top}
.chat-drag-handle{height:20px;line-height:20px;margin:-3px 0 4px;border-radius:5px;background:rgba(16,45,53,.08);color:rgba(16,45,53,.58);font:900 8px/20px Arial;letter-spacing:.13em;text-align:center;cursor:grab;touch-action:none;user-select:none}
.chat-dragging .chat-drag-handle{cursor:grabbing;background:rgba(16,45,53,.15)}
#chat-open.chat-has-unread{position:relative}
#chat-open.chat-has-unread::before{content:"";position:absolute;right:5px;top:5px;width:8px;height:8px;border-radius:50%;background:#e34e42;box-shadow:0 0 0 3px rgba(227,78,66,.18)}
#chat-open .chat-unread-label{display:inline-block;margin-left:6px;color:#e34e42;font-size:8px;font-weight:950;letter-spacing:.08em;white-space:nowrap}
@media(max-width:720px){.chat-drag-handle{display:none!important}}


.charge-box{
  bottom:22px!important;
  width:min(330px,72%)!important;
  padding:9px 11px 10px!important;
  background:rgba(13,42,48,.88)!important;
  border:1px solid rgba(255,211,83,.58)!important;
  border-radius:13px!important;
  box-shadow:0 7px 22px rgba(5,25,30,.24),inset 0 1px 0 rgba(255,255,255,.08)!important;
  backdrop-filter:blur(10px);
}
.charge-box>div:first-child{align-items:center!important;margin-bottom:6px!important}
#charge-label{font-size:0!important;color:#ffe07a!important;letter-spacing:.12em!important;font-weight:950!important}
#charge-label::after{content:"SERVI TUGEVUS";font-size:9px;line-height:1;color:#ffe07a;letter-spacing:.13em;font-weight:950}
#charge-value{font-size:11px!important;color:#fff3cc!important;letter-spacing:.04em}
.charge-track{
  position:relative;
  height:12px!important;
  background:rgba(255,255,255,.10)!important;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px!important;
  overflow:hidden;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.24);
}
.charge-track::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(255,255,255,.20) calc(10% - 1px) 10%)}
.charge-track i{
  position:relative;
  height:100%!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#57d09b 0%,#f5d75c 58%,#ff9a45 78%,#f15f4d 100%)!important;
  box-shadow:0 0 12px rgba(255,206,82,.38);
  transition:width .035s linear;
}
.charge-box.serve-danger{border-color:rgba(255,107,70,.85)!important;box-shadow:0 0 0 2px rgba(255,101,64,.14),0 7px 22px rgba(5,25,30,.26)!important}
.charge-box.serve-danger #charge-value{color:#ffad82!important}
#chat-name,label[for="chat-name"]{display:none!important}
.pause-button.pause-corner-x{
  left:18px!important;right:auto!important;top:18px!important;bottom:auto!important;
  width:39px!important;height:39px!important;border-radius:11px!important;
  background:#ffd34f!important;color:#15343a!important;
  border:1px solid rgba(16,45,53,.22)!important;
  box-shadow:0 4px 0 rgba(16,45,53,.26),0 8px 18px rgba(9,35,41,.16)!important;
  font-size:27px!important;font-weight:950!important;line-height:35px!important;
  z-index:8!important;
}
.pause-button.pause-corner-x:hover{filter:brightness(1.03)!important;transform:translateY(-1px)}
.pause-button.pause-corner-x:active{transform:translateY(2px)!important;box-shadow:0 2px 0 rgba(16,45,53,.26)!important}
@media(max-width:700px){
  .charge-box{bottom:calc(16px + var(--volle-mobile-lift,0px))!important;width:min(285px,64%)!important;padding:8px 9px!important}
  .pause-button.pause-corner-x{left:12px!important;top:12px!important;width:36px!important;height:36px!important;font-size:25px!important;line-height:32px!important}
}

@media (pointer: coarse), (max-width: 900px) {
  #mobile-controls, #mobile-controls *, #joystick, #joystick *, .touch-actions, .touch-actions button {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-user-drag: none !important;
  }
  #joystick, #joystick *, .touch-actions button {
    touch-action: none !important;
  }
  .playing .radio-shortcut {
    transform: translateY(-14px) !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
  }
}

@media (pointer: coarse), (max-width: 900px) {
  .pause-button.pause-corner-x {
    left: auto !important;
    right: calc(12px + env(safe-area-inset-right)) !important;
    top: calc(12px + env(safe-area-inset-top)) !important;
    bottom: auto !important;
  }
}

#connection::after{content:none!important;display:none!important}
@media (max-width:700px) and (orientation:portrait){
  .playing .charge-box{
    bottom:calc(238px + env(safe-area-inset-bottom))!important;
    width:min(320px,58vw)!important;
    max-width:320px!important;
    z-index:8!important;
  }
}
@media (max-width:430px) and (orientation:portrait){
  .playing .charge-box{
    bottom:calc(230px + env(safe-area-inset-bottom))!important;
    width:min(300px,56vw)!important;
  }
}

@media (orientation:portrait) and (max-width:700px){
  .playing .charge-box{
    translate:0 26px !important;
  }
}
.vm-chat-top-1916{position:relative!important}
.vm-chat-unread-1916{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;margin-top:1px;font-size:8px;line-height:1;font-weight:900;
  letter-spacing:.05em;color:#ff4e45;pointer-events:none
}
.vm-chat-unread-1916 i{
  position:absolute;right:8px;top:7px;width:9px;height:9px;border-radius:50%;
  background:#ff594f;box-shadow:0 0 0 3px rgba(255,89,79,.18)
}
.vm-chat-unread-1916 b{font:900 8px/1 Arial,sans-serif;white-space:nowrap;color:#ff4e45}

@media (max-width:1000px) and (pointer:coarse){#radio-open{display:none!important}}


@media (max-width:700px) and (orientation:portrait){
  body:not(.playing) #chat-panel{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:min(272px,calc(100vw - 104px))!important;
    max-width:272px!important;
    height:158px!important;
    min-height:158px!important;
    max-height:158px!important;
    margin:14px auto 132px!important;
    padding:8px!important;
    gap:4px!important;
    transform:none!important;
    translate:none!important;
    border-radius:12px!important;
    background:rgba(248,246,233,.50)!important;
    border:1px solid rgba(255,255,255,.62)!important;
    box-shadow:0 4px 0 rgba(16,54,59,.74),0 12px 30px rgba(15,52,58,.16)!important;
    backdrop-filter:blur(10px) saturate(1.05)!important;
    -webkit-backdrop-filter:blur(10px) saturate(1.05)!important;
    z-index:3!important;
  }
  body:not(.playing) #chat-panel.minimized{
    width:min(272px,calc(100vw - 104px))!important;
    max-width:272px!important;
    padding:8px!important;
  }
  body:not(.playing) #chat-panel .chat-head{
    display:flex!important;
    align-items:center!important;
    min-height:15px!important;
    height:15px!important;
    margin:0 2px 2px!important;
    padding:0!important;
    cursor:default!important;
    touch-action:auto!important;
  }
  body:not(.playing) #chat-panel .chat-title{
    display:flex!important;
    align-items:center!important;
    gap:5px!important;
    flex-wrap:nowrap!important;
    min-width:0!important;
  }
  body:not(.playing) #chat-panel .chat-title b{
    font-size:9px!important;
    line-height:1!important;
    letter-spacing:.11em!important;
    opacity:.82!important;
  }
  body:not(.playing) #chat-panel .chat-title small{
    display:block!important;
    width:auto!important;
    font-size:7px!important;
    line-height:1!important;
    letter-spacing:.08em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    color:#61756f!important;
  }
  body:not(.playing) #chat-panel #chat-minimize,
  body:not(.playing) #chat-panel .chat-tabs,
  body:not(.playing) #chat-panel .chat-name-row,
  body:not(.playing) #chat-panel .chat-status{
    display:none!important;
  }
  body:not(.playing) #chat-panel .chat-body{
    display:flex!important;
    flex:1 1 auto!important;
    min-height:0!important;
    height:131px!important;
    gap:5px!important;
  }
  body:not(.playing) #chat-panel .chat-messages{
    flex:1 1 auto!important;
    height:87px!important;
    min-height:87px!important;
    max-height:87px!important;
    padding:5px 7px!important;
    border-radius:8px!important;
    background:rgba(242,241,233,.40)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    scrollbar-width:thin!important;
    scrollbar-color:rgba(20,65,67,.42) transparent!important;
  }
  body:not(.playing) #chat-panel .chat-messages::-webkit-scrollbar{width:3px!important}
  body:not(.playing) #chat-panel .chat-messages::-webkit-scrollbar-track{background:transparent!important}
  body:not(.playing) #chat-panel .chat-messages::-webkit-scrollbar-thumb{
    background:rgba(20,65,67,.38)!important;
    border-radius:999px!important;
  }
  body:not(.playing) #chat-panel .chat-empty{
    font-size:10px!important;
    line-height:1.25!important;
    padding:26px 5px!important;
  }
  body:not(.playing) #chat-panel .chat-message{
    padding:4px 3px!important;
  }
  body:not(.playing) #chat-panel .chat-message b{font-size:9px!important}
  body:not(.playing) #chat-panel .chat-message time{font-size:7px!important}
  body:not(.playing) #chat-panel .chat-message p{
    margin:1px 0 0!important;
    font-size:10px!important;
    line-height:1.22!important;
  }
  body:not(.playing) #chat-panel form{
    display:flex!important;
    flex:0 0 34px!important;
    height:34px!important;
    min-height:34px!important;
    gap:5px!important;
    margin:0!important;
  }
  body:not(.playing) #chat-panel form input{
    height:34px!important;
    min-height:34px!important;
    margin:0!important;
    padding:0 10px!important;
    border-radius:8px!important;
    font-size:12px!important;
    line-height:34px!important;
    background:rgba(255,252,224,.66)!important;
  }
  body:not(.playing) #chat-panel form button{
    width:36px!important;
    min-width:36px!important;
    height:34px!important;
    padding:0!important;
    border-radius:8px!important;
    font-size:0!important;
    display:grid!important;
    place-items:center!important;
  }
  body:not(.playing) #chat-panel form button::after{
    content:"➤";
    font-size:15px;
    line-height:1;
  }
}

@media (max-width:900px) and (orientation:portrait){#chat-head,.chat-head{touch-action:none;cursor:move}}


.arena{margin-top:0!important;border-top:0!important}
.arena canvas#game{top:0!important;inset:0!important}

body.vm-annelinn .arena::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:48%;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(8,18,27,.72),rgba(11,27,37,.62) 72%,rgba(14,34,43,.20));
  mix-blend-mode:multiply;
}
body.vm-annelinn #game{z-index:0}
body.vm-annelinn #hud,
body.vm-annelinn .court-tag,
body.vm-annelinn .chat-panel,
body.vm-annelinn .mobile-controls,
body.vm-annelinn .pause-button,
body.vm-annelinn .radio-shortcut{z-index:3}

@media (max-width:900px), (pointer:coarse){
  #chat-panel.chat-panel{
    width:min(270px,72vw)!important;
    max-width:270px!important;
    max-height:min(315px,46dvh)!important;
    padding:7px!important;
    gap:4px!important;
    border-radius:10px!important;
    font-size:11px!important;
    transition:none!important;
  }
  #chat-panel .chat-head{
    min-height:24px!important;
    padding:0 1px!important;
    gap:4px!important;
    cursor:move!important;
    touch-action:none!important;
  }
  #chat-panel .chat-head b{font-size:15px!important;letter-spacing:-.2px!important}
  #chat-panel .chat-head small{font-size:8px!important;line-height:1.1!important}
  #chat-panel .chat-tabs{gap:3px!important}
  #chat-panel .chat-tabs button{
    min-height:25px!important;
    padding:4px 6px!important;
    font-size:9px!important;
  }
  #chat-panel .chat-name-row{font-size:9px!important;gap:4px!important}
  #chat-panel .chat-name-row input{height:27px!important;padding:4px 6px!important;font-size:11px!important}
  #chat-panel .chat-messages{min-height:70px!important;max-height:125px!important;font-size:10px!important}
  #chat-panel #chat-form{gap:4px!important}
  #chat-panel #chat-input{height:29px!important;min-height:29px!important;padding:5px 7px!important;font-size:11px!important}
  #chat-panel #chat-form button{height:29px!important;min-height:29px!important;padding:4px 8px!important;font-size:10px!important}
  #chat-panel #chat-minimize{width:27px!important;height:25px!important;min-width:27px!important;padding:0!important}

  #chat::before,#chat::after{display:none!important;content:none!important}
  #chat.vm-real-unread::after{
    display:inline-block!important;
    content:"UUS SÕNUM"!important;
    margin-left:5px!important;
    font-size:8px!important;
    font-weight:900!important;
    letter-spacing:.5px!important;
  }
}


@media (max-width:700px) and (orientation:portrait){
  .playing .charge-box{
    bottom:calc(176px + env(safe-area-inset-bottom))!important;
    width:min(215px,52vw)!important;
    max-width:215px!important;
    transform:scale(.90)!important;
    transform-origin:50% 100%!important;
  }
}
@media (orientation:landscape) and (max-height:550px){
  .playing .charge-box{
    bottom:calc(88px + env(safe-area-inset-bottom))!important;
    width:min(205px,30vw)!important;
    max-width:205px!important;
    transform:scale(.88)!important;
    transform-origin:50% 100%!important;
  }
}

@media (orientation:landscape) and (max-height:550px){
  html,body{height:100dvh!important;min-height:100dvh!important;overflow:hidden!important}
  #app{
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  .topbar{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    flex:0 0 44px!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    z-index:100!important;
  }
  .arena{flex:1 1 auto!important;min-height:0!important;height:auto!important}
}
@media (pointer:coarse) and (orientation:landscape){
  .topbar{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    transform:none!important;
  }
}

@media (max-width:900px){body.playing #charge-box{display:none!important}}

#setup-dialog .setup-row{align-items:stretch;gap:14px}
#setup-dialog .vm-setup-label{display:block;min-width:0}
#setup-dialog .vm-native-select{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
#setup-dialog .vm-setup-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
#setup-dialog .vm-setup-card{position:relative;min-width:0;padding:11px 8px 9px;border:1.5px solid #b7c8bd;border-radius:12px;background:#f7f5ea;color:#12343d;text-align:left;box-shadow:0 3px 0 rgba(18,52,61,.08);cursor:pointer}
#setup-dialog .vm-setup-card.selected{border-color:#ef6b3f;box-shadow:0 0 0 2px rgba(239,107,63,.18),0 3px 0 rgba(18,52,61,.10);background:#fff9ec}
#setup-dialog .vm-card-icon{display:flex;align-items:center;justify-content:center;height:34px;margin-bottom:6px;border-radius:8px;background:#dfeee7;font-size:18px;font-weight:900}
#setup-dialog .vm-setup-target .vm-card-icon{background:#143943;color:#fff7df;font-size:16px;letter-spacing:.4px}
#setup-dialog .vm-card-copy{display:flex;flex-direction:column;gap:1px}
#setup-dialog .vm-card-copy b{font-size:12px;letter-spacing:.35px}
#setup-dialog .vm-card-copy small{font-size:10px;color:#6d8178;font-weight:650}
#setup-dialog .vm-card-check{position:absolute;top:7px;right:8px;width:18px;height:18px;border-radius:50%;display:none;place-items:center;background:#ef6b3f;color:white;font-size:11px;font-weight:900}
#setup-dialog .vm-setup-card.selected .vm-card-check{display:grid}
@media(max-width:900px) and (orientation:portrait){
  body.playing #game{transform:scale(1.32)!important;transform-origin:50% 56%!important}
}
@media(max-width:900px) and (orientation:landscape){
  body.playing #game{transform:scale(1.16)!important;transform-origin:50% 53%!important}
}
@media(max-width:700px){
  #setup-dialog .setup-row{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  #setup-dialog .vm-setup-cards{gap:6px;margin-top:6px}
  #setup-dialog .vm-setup-card{padding:8px 6px 7px;border-radius:10px}
  #setup-dialog .vm-card-icon{height:29px;margin-bottom:4px;font-size:15px}
  #setup-dialog .vm-card-copy b{font-size:11px}
  #setup-dialog .vm-card-copy small{font-size:9px}
}

#vm-chat-new-pill{
  position:absolute;left:50%;bottom:42px;transform:translateX(-50%);
  z-index:5;border:0;border-radius:999px;padding:4px 9px;
  background:rgba(20,55,58,.88);color:#fff8e5;
  font:850 9px/1.1 Arial,sans-serif;letter-spacing:.03em;
  box-shadow:0 4px 14px rgba(10,34,39,.22);backdrop-filter:blur(7px);
}
#vm-chat-new-pill[hidden]{display:none!important}
.chat-messages{scrollbar-width:thin;scrollbar-color:rgba(31,70,70,.34) transparent}
.chat-messages::-webkit-scrollbar{width:3px}
.chat-messages::-webkit-scrollbar-track{background:transparent}
.chat-messages::-webkit-scrollbar-thumb{background:rgba(31,70,70,.28);border-radius:99px}
.chat-messages.vm-scrolling::-webkit-scrollbar-thumb,
.chat-messages:hover::-webkit-scrollbar-thumb{background:rgba(31,70,70,.58)}
@media (max-width:1000px),(pointer:coarse){
  #chat-panel.vm-chat-hud-1932{
    display:flex!important;position:fixed!important;z-index:24!important;
    padding:7px 8px!important;gap:4px!important;
    background:rgba(239,244,232,.38)!important;
    -webkit-backdrop-filter:blur(10px) saturate(1.05)!important;
    backdrop-filter:blur(10px) saturate(1.05)!important;
    border:1px solid rgba(255,255,255,.50)!important;
    border-radius:10px!important;
    box-shadow:0 4px 18px rgba(12,42,47,.15)!important;
    max-height:none!important;
    touch-action:auto!important;
    translate:none!important;
  }
  #chat-panel.vm-chat-hud-1932.minimized{display:flex!important}
  #chat-panel.vm-chat-hud-1932 .chat-head{
    min-height:13px!important;height:13px!important;margin:0!important;padding:0 2px!important;cursor:default!important
  }
  #chat-panel.vm-chat-hud-1932 .chat-title b,
  #chat-panel.vm-chat-hud-1932 #chat-minimize,
  #chat-panel.vm-chat-hud-1932 #chat-dot,
  #chat-panel.vm-chat-hud-1932 .chat-tabs,
  #chat-panel.vm-chat-hud-1932 .chat-name-row,
  #chat-panel.vm-chat-hud-1932 .chat-status,
  #chat-panel.vm-chat-hud-1932 .chat-drag-handle,
  #chat-open .vm-chat-unread-1916,
  #chat-open .chat-unread-label{display:none!important}
  #chat-panel.vm-chat-hud-1932 .chat-head small{
    display:block!important;width:auto!important;
    font-size:7px!important;line-height:13px!important;
    letter-spacing:.11em!important;color:rgba(27,63,60,.62)!important;
  }
  #chat-panel.vm-chat-hud-1932 .chat-body{display:flex!important;gap:4px!important;min-height:0!important}
  #chat-panel.vm-chat-hud-1932 .chat-messages{
    display:block!important;height:86px!important;min-height:0!important;
    overflow-y:auto!important;overscroll-behavior:contain!important;touch-action:pan-y!important;
    padding:3px 5px 3px 4px!important;
    background:rgba(244,246,237,.18)!important;
    border:0!important;border-radius:6px!important;
  }
  #chat-panel.vm-chat-hud-1932 .chat-message{padding:3px 3px!important;border-bottom:1px solid rgba(19,55,56,.07)!important}
  #chat-panel.vm-chat-hud-1932 .chat-message>div{gap:5px!important}
  #chat-panel.vm-chat-hud-1932 .chat-message b{font-size:9px!important;line-height:1.1!important}
  #chat-panel.vm-chat-hud-1932 .chat-message time{font-size:7px!important;opacity:.65!important}
  #chat-panel.vm-chat-hud-1932 .chat-message p{
    font-size:10px!important;line-height:1.22!important;margin:1px 0 0!important;color:#2d4744!important
  }
  #chat-panel.vm-chat-hud-1932 .chat-empty{padding:23px 5px!important;font-size:9px!important}
  #chat-panel.vm-chat-hud-1932 #chat-form{display:none!important;gap:4px!important;margin-top:1px!important}
  #chat-panel.vm-chat-hud-1932.vm-input-open #chat-form{display:flex!important}
  #chat-panel.vm-chat-hud-1932 #chat-form input{
    height:29px!important;padding:5px 7px!important;font-size:11px!important;border-radius:6px!important
  }
  #chat-panel.vm-chat-hud-1932 #chat-form button{
    height:29px!important;padding:5px 8px!important;font-size:9px!important;border-radius:6px!important
  }
  #chat-open #chat-unread[hidden]{display:none!important}
}
@media (max-width:700px) and (orientation:portrait){
  body:not(.playing) #chat-panel.vm-chat-hud-1932{
    left:50%!important;right:auto!important;top:auto!important;
    bottom:calc(62px + env(safe-area-inset-bottom))!important;
    transform:translateX(-50%)!important;width:min(350px,calc(100vw - 24px))!important;
  }
  body.playing #chat-panel.vm-chat-hud-1932{
    left:10px!important;right:auto!important;
    top:calc(102px + env(safe-area-inset-top))!important;bottom:auto!important;
    transform:none!important;width:min(228px,58vw)!important;
  }
  body.playing #chat-panel.vm-chat-hud-1932 .chat-messages{height:78px!important}
}
@media (orientation:landscape) and (max-height:650px){
  #chat-panel.vm-chat-hud-1932{
    left:auto!important;right:12px!important;top:auto!important;
    bottom:calc(122px + env(safe-area-inset-bottom))!important;
    transform:none!important;width:min(238px,34vw)!important;
  }
  #chat-panel.vm-chat-hud-1932 .chat-messages{height:70px!important}
  #vm-chat-new-pill{bottom:39px}
}

@media (max-width:900px) and (pointer:coarse){
  #chat-panel.vm-mobile-chat-1933{
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    gap:5px!important;
    padding:8px 9px!important;
    background:rgba(248,246,233,.62)!important;
    backdrop-filter:blur(9px) saturate(1.05)!important;
    -webkit-backdrop-filter:blur(9px) saturate(1.05)!important;
    border:1px solid rgba(255,255,255,.62)!important;
    border-radius:11px!important;
    box-shadow:0 3px 0 rgba(16,54,59,.55),0 9px 24px rgba(21,61,73,.16)!important;
    z-index:20!important;
    min-width:0!important;
    max-height:none!important;
    touch-action:pan-y!important;
  }
  #chat-panel.vm-mobile-chat-1933 .chat-head{
    min-height:20px!important;
    padding:0!important;
    cursor:default!important;
    touch-action:pan-y!important;
  }
  #chat-panel.vm-mobile-chat-1933 .chat-head b{font-size:12px!important;letter-spacing:.06em!important}
  #chat-panel.vm-mobile-chat-1933 .chat-head small{font-size:7px!important;line-height:1!important;letter-spacing:.09em!important}
  #chat-panel.vm-mobile-chat-1933 #chat-minimize,
  #chat-panel.vm-mobile-chat-1933 .chat-drag-handle{display:none!important}
  #chat-panel.vm-mobile-chat-1933 .chat-body{
    display:flex!important;
    flex-direction:column!important;
    gap:5px!important;
    min-height:0!important;
  }
  #chat-panel.vm-mobile-chat-1933 .chat-name-row{display:none!important}
  #chat-panel.vm-mobile-chat-1933 .chat-tabs{margin:0!important;gap:4px!important}
  #chat-panel.vm-mobile-chat-1933 .chat-tabs button{
    min-height:22px!important;
    padding:4px 6px!important;
    border-radius:5px!important;
    font-size:8px!important;
  }
  #chat-panel.vm-mobile-chat-1933 .chat-messages{
    box-sizing:border-box!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:thin!important;
    scrollbar-color:rgba(29,67,67,.46) transparent!important;
    background:rgba(242,241,233,.30)!important;
    border:1px solid rgba(16,45,53,.08)!important;
    border-radius:7px!important;
    padding:4px 6px!important;
  }
  #chat-panel.vm-mobile-chat-1933 .chat-messages::-webkit-scrollbar{width:3px!important}
  #chat-panel.vm-mobile-chat-1933 .chat-messages::-webkit-scrollbar-track{background:transparent!important}
  #chat-panel.vm-mobile-chat-1933 .chat-messages::-webkit-scrollbar-thumb{
    background:rgba(29,67,67,.46)!important;
    border-radius:999px!important;
  }
  #chat-panel.vm-mobile-chat-1933 .chat-message{padding:4px 2px!important}
  #chat-panel.vm-mobile-chat-1933 .chat-message b{font-size:9px!important}
  #chat-panel.vm-mobile-chat-1933 .chat-message time{font-size:7px!important}
  #chat-panel.vm-mobile-chat-1933 .chat-message p{
    margin:1px 0 0!important;
    font-size:10px!important;
    line-height:1.22!important;
  }
  #chat-panel.vm-mobile-chat-1933 .chat-empty{padding:15px 5px!important;font-size:9px!important}
  #chat-panel.vm-mobile-chat-1933 .chat-status{font-size:7px!important;min-height:0!important;line-height:1.05!important}
  #chat-panel.vm-mobile-chat-1933 #chat-form{
    display:flex!important;
    gap:4px!important;
    margin:0!important;
    min-height:31px!important;
  }
  #chat-panel.vm-mobile-chat-1933 #chat-form input{
    display:block!important;
    flex:1 1 auto!important;
    min-width:0!important;
    height:31px!important;
    margin:0!important;
    padding:6px 8px!important;
    border-radius:7px!important;
    font-size:11px!important;
    background:rgba(255,252,224,.72)!important;
    border:1px solid rgba(16,45,53,.12)!important;
  }
  #chat-panel.vm-mobile-chat-1933 #chat-form button{
    width:34px!important;
    min-width:34px!important;
    height:31px!important;
    padding:0!important;
    border-radius:7px!important;
    font-size:0!important;
  }
  #chat-panel.vm-mobile-chat-1933 #chat-form button::after{
    content:"➤";
    font-size:13px;
    line-height:31px;
  }
  #chat-panel.vm-mobile-chat-1933 .vm-chat-new,
  #chat-panel.vm-mobile-chat-1933 [class*="new-messages"]{
    font-size:8px!important;
    padding:4px 7px!important;
    border-radius:999px!important;
  }
  #chat-open .vm-chat-unread-1916,
  #chat-open .chat-unread-label{display:none!important}
}

@media (max-width:900px) and (pointer:coarse) and (orientation:portrait){
  body:not(.playing) .arena{
    align-content:start!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  body:not(.playing) #menu.menu-panel{
    margin:34px auto 10px!important;
    justify-self:center!important;
    align-self:start!important;
  }
  body:not(.playing) #chat-panel.vm-mobile-chat-1933{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    translate:none!important;
    width:min(330px,calc(100% - 40px))!important;
    max-width:330px!important;
    margin:0 auto 30px!important;
    justify-self:center!important;
    align-self:start!important;
  }
  body:not(.playing) #chat-panel.vm-mobile-chat-1933 .chat-messages{
    height:112px!important;
    min-height:82px!important;
    max-height:112px!important;
  }

  body.playing #chat-panel.vm-mobile-chat-1933{
    position:fixed!important;
    left:calc(10px + env(safe-area-inset-left))!important;
    right:auto!important;
    top:calc(92px + env(safe-area-inset-top))!important;
    bottom:auto!important;
    transform:none!important;
    translate:none!important;
    width:min(220px,57vw)!important;
    max-width:220px!important;
    margin:0!important;
  }
  body.playing #chat-panel.vm-mobile-chat-1933 .chat-messages{
    height:72px!important;
    min-height:58px!important;
    max-height:72px!important;
  }
}

@media (max-width:900px) and (pointer:coarse) and (orientation:landscape){
  #chat-panel.vm-mobile-chat-1933{
    position:fixed!important;
    left:auto!important;
    right:calc(12px + env(safe-area-inset-right))!important;
    top:auto!important;
    transform:none!important;
    translate:none!important;
    width:min(245px,34vw)!important;
    max-width:245px!important;
    margin:0!important;
  }
  body.playing #chat-panel.vm-mobile-chat-1933{
    bottom:calc(132px + env(safe-area-inset-bottom))!important;
  }
  body:not(.playing) #chat-panel.vm-mobile-chat-1933{
    bottom:calc(16px + env(safe-area-inset-bottom))!important;
  }
  #chat-panel.vm-mobile-chat-1933 .chat-messages{
    height:62px!important;
    min-height:48px!important;
    max-height:62px!important;
  }
  #chat-panel.vm-mobile-chat-1933 .chat-head small,
  #chat-panel.vm-mobile-chat-1933 .chat-status{display:none!important}
}


#chat-panel.vm-chat-stable { position: relative; }
#chat-panel.vm-chat-closed { display: none !important; }
#vm-chat-close{
  position:absolute !important;
  top:3px !important;
  right:5px !important;
  z-index:12 !important;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.12) !important;
  color:rgba(255,255,255,.88) !important;
  font:600 18px/20px system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  text-align:center !important;
  box-shadow:none !important;
  cursor:pointer !important;
  touch-action:manipulation !important;
  -webkit-tap-highlight-color:transparent;
}
#vm-chat-close:active{ background:rgba(255,255,255,.22) !important; }

@media (max-width:900px) and (orientation:portrait){
  html body:not(.playing) #chat-panel.vm-chat-stable{
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    transform:none !important;
    translate:none !important;
    margin:8px auto 0 !important;
  }
  html body:not(.playing) #chat-panel.vm-chat-stable #vm-chat-close{
    display:block !important;
  }
}

@media (max-width:700px) and (orientation:portrait){
  body:not(.playing) #chat-panel{
    width:236px!important;
    max-width:calc(100vw - 92px)!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:7px 8px 8px!important;
    gap:4px!important;
    background:rgba(248,246,233,.16)!important;
    border:1px solid rgba(255,255,255,.34)!important;
    border-radius:11px!important;
    box-shadow:0 3px 0 rgba(16,54,59,.34),0 10px 24px rgba(10,42,48,.10)!important;
    backdrop-filter:blur(4px) saturate(1.02)!important;
    -webkit-backdrop-filter:blur(4px) saturate(1.02)!important;
  }
  body:not(.playing) #chat-panel .chat-head{
    min-height:15px!important;
    height:15px!important;
    margin:0!important;
    padding:0 2px!important;
  }
  body:not(.playing) #chat-panel .chat-title{gap:4px!important;line-height:1!important}
  body:not(.playing) #chat-panel .chat-title>b{display:none!important}
  body:not(.playing) #chat-panel .chat-head small{
    display:block!important;
    width:auto!important;
    font-size:7px!important;
    line-height:1!important;
    letter-spacing:1px!important;
    color:rgba(37,70,67,.62)!important;
  }
  body:not(.playing) #chat-panel #chat-minimize,
  body:not(.playing) #chat-panel .chat-tabs,
  body:not(.playing) #chat-panel .chat-name-row,
  body:not(.playing) #chat-panel .chat-status{display:none!important}
  body:not(.playing) #chat-panel .chat-body{
    display:flex!important;
    flex-direction:column!important;
    gap:5px!important;
    min-height:0!important;
  }
  body:not(.playing) #chat-panel .chat-messages{
    height:54px!important;
    min-height:54px!important;
    max-height:54px!important;
    padding:3px 5px!important;
    border-radius:7px!important;
    background:rgba(248,246,233,.08)!important;
    border:1px solid rgba(16,45,53,.07)!important;
    scrollbar-width:thin!important;
    scrollbar-color:rgba(18,59,61,.35) transparent!important;
  }
  body:not(.playing) #chat-panel .chat-messages::-webkit-scrollbar{width:3px!important}
  body:not(.playing) #chat-panel .chat-messages::-webkit-scrollbar-track{background:transparent!important}
  body:not(.playing) #chat-panel .chat-messages::-webkit-scrollbar-thumb{
    background:rgba(18,59,61,.34)!important;border-radius:99px!important
  }
  body:not(.playing) #chat-panel .chat-empty{
    padding:16px 3px!important;
    font-size:9px!important;
    line-height:1.1!important;
    color:rgba(57,78,73,.58)!important;
  }
  body:not(.playing) #chat-panel .chat-message{padding:3px 2px!important}
  body:not(.playing) #chat-panel .chat-message b{font-size:9px!important}
  body:not(.playing) #chat-panel .chat-message time{font-size:7px!important}
  body:not(.playing) #chat-panel .chat-message p{
    font-size:10px!important;
    line-height:1.2!important;
    margin:1px 0 0!important;
  }
  body:not(.playing) #chat-panel #chat-form{
    display:flex!important;
    gap:4px!important;
    margin:0!important;
    min-height:0!important;
  }
  body:not(.playing) #chat-panel #chat-form input{
    height:31px!important;
    min-height:31px!important;
    padding:5px 8px!important;
    font-size:11px!important;
    border-radius:8px!important;
    background:rgba(255,252,224,.28)!important;
    border-color:rgba(255,255,255,.34)!important;
  }
  body:not(.playing) #chat-panel #chat-form button{
    width:34px!important;
    min-width:34px!important;
    height:31px!important;
    min-height:31px!important;
    padding:0!important;
    border-radius:8px!important;
    font-size:0!important;
    background:rgba(15,58,63,.78)!important;
  }
  body:not(.playing) #chat-panel #chat-form button::after{content:'➤';font-size:14px!important}
}

body.vm-annelinn .arena::before{display:none!important}

#app{position:relative!important}
.topbar{display:none!important}
.arena canvas#game{transform:none!important;transform-origin:50% 50%!important}
.game-tools{
  position:absolute;top:calc(10px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));
  display:flex;gap:6px;z-index:12;padding:0;margin:0;background:none;border:0;
}
.game-tool{
  position:relative;display:grid;place-items:center;width:44px;height:44px;min-width:44px;
  padding:10px;border:1px solid #ffffff9c;border-radius:12px;background:#fffaf0ed;
  color:#183b44;box-shadow:0 2px 5px #132f3b20;touch-action:manipulation;
}
.game-tool svg{display:block;width:23px;height:23px;pointer-events:none}
.game-tool .sound-off,.game-tool.is-muted .sound-on{display:none}
.game-tool.is-muted .sound-off{display:block}
.game-tool[aria-pressed="true"]{color:#237666}
.game-tool.is-muted{color:#7b5d56}
.tool-badge{position:absolute;right:-3px;top:-3px;min-width:16px;height:16px;border-radius:8px;background:#eb7651;color:white;font:700 10px/16px Arial;text-align:center;padding:0 3px}
.fullscreen-note{position:absolute;right:12px;top:58px;z-index:15;border-radius:8px;background:#fffaf0;padding:8px 12px;font-size:12px;color:#183b44}
.playing #app{height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;overflow:hidden!important}
.playing .arena{flex:1 1 0!important;min-height:0!important;height:auto!important}
.playing .bottom-bar{flex:0 0 auto!important}
#app .scoreboard{
  top:calc(10px + env(safe-area-inset-top))!important;left:calc(12px + env(safe-area-inset-left))!important;
  right:auto!important;bottom:auto!important;transform:none!important;min-width:0!important;
  width:236px!important;border-radius:11px!important;box-shadow:0 2px 5px #12313a20!important;
}
#app .scoreboard .team-score{min-width:0!important;flex:1;padding:6px 9px!important;gap:0 6px!important}
#app .scoreboard .team-score>span{font-size:9px!important;letter-spacing:.6px!important;white-space:nowrap}
#app .scoreboard .team-score strong{font-size:29px!important;line-height:1.05!important;letter-spacing:-1px!important}
#app .scoreboard .team-score small{font-size:11px!important}
#app .scoreboard .match-meta{padding:6px 8px!important;gap:2px!important}
#app .scoreboard .match-meta span{font-size:9px!important;letter-spacing:1px!important}
#app .scoreboard .match-meta b,#app .scoreboard .match-meta small{font-size:9px!important}
#app .scoreboard.point-pop{animation:none!important}
#app .play-message{top:calc(80px + env(safe-area-inset-top))!important;left:calc(12px + env(safe-area-inset-left))!important;right:auto!important;transform:none!important;max-width:236px!important;font-size:11px!important;padding:6px 10px!important;white-space:normal!important;pointer-events:none}
#app .pause-button.pause-corner-x{top:calc(62px + env(safe-area-inset-top))!important;right:calc(12px + env(safe-area-inset-right))!important;left:auto!important;bottom:auto!important;width:44px!important;height:44px!important;min-width:44px!important;line-height:40px!important;font-size:29px!important;z-index:12!important}
#app .court-tag{top:calc(66px + env(safe-area-inset-top))!important;right:12px!important}
#app .arena-caption{top:112px!important}
body:not(.playing) #menu{margin-top:74px!important}
@media(max-width:600px) and (orientation:portrait){
  .game-tools{display:grid;grid-template-columns:repeat(2,44px);gap:6px}
  #app .scoreboard{width:218px!important}
  #app .scoreboard .team-score{padding:5px 7px!important}
  #app .scoreboard .match-meta{padding:5px 6px!important}
  #app .play-message{max-width:218px!important;top:calc(77px + env(safe-area-inset-top))!important}
  #app .pause-button.pause-corner-x{top:calc(110px + env(safe-area-inset-top))!important}
  #app .court-tag{top:calc(112px + env(safe-area-inset-top))!important}
  #app .arena-caption{top:160px!important}
  body:not(.playing) #menu{margin-top:126px!important}
}
@media(max-width:360px) and (orientation:portrait){
  #app .scoreboard{width:190px!important}
  #app .scoreboard .team-score>span{font-size:8px!important}
  #app .scoreboard .team-score{padding:5px!important}
  #app .scoreboard .team-score strong{font-size:26px!important}
  #app .scoreboard .match-meta{padding:5px!important}
  #app .play-message{max-width:190px!important}
}
@media(orientation:landscape) and (max-height:550px){
  .game-tools{top:calc(6px + env(safe-area-inset-top));gap:5px}
  #app .scoreboard{top:calc(6px + env(safe-area-inset-top))!important;width:220px!important}
  #app .play-message{top:calc(72px + env(safe-area-inset-top))!important;font-size:10px!important}
  #app .pause-button.pause-corner-x{top:calc(56px + env(safe-area-inset-top))!important}
  body:not(.playing) #menu{margin-top:60px!important}
}

#chat-panel.vm-chat-final-1946{
  width:282px!important;
  max-width:calc(100vw - 28px)!important;
  max-height:min(365px,calc(100% - 28px))!important;
  padding:9px!important;
  gap:6px!important;
  background:rgba(246,246,234,.32)!important;
  border:1px solid rgba(255,255,255,.38)!important;
  border-radius:13px!important;
  box-shadow:0 4px 0 rgba(16,54,59,.30),0 12px 28px rgba(10,42,48,.14)!important;
  backdrop-filter:blur(11px) saturate(1.06)!important;
  -webkit-backdrop-filter:blur(11px) saturate(1.06)!important;
  z-index:31!important;
}
#chat-panel.vm-chat-final-1946.vm-chat-collapsed-1946{display:none!important}
#chat-panel.vm-chat-final-1946 .chat-head{min-height:23px!important;height:23px!important;padding:0 2px!important}
#chat-panel.vm-chat-final-1946 .chat-title{gap:6px!important;flex-wrap:nowrap!important}
#chat-panel.vm-chat-final-1946 .chat-title>b{font-size:12px!important;letter-spacing:.12em!important}
#chat-panel.vm-chat-final-1946 .chat-head small{font-size:8px!important;letter-spacing:.10em!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#chat-panel.vm-chat-final-1946 .chat-dot{width:7px!important;height:7px!important;box-shadow:0 0 0 3px rgba(239,67,56,.14)!important}
#chat-panel.vm-chat-final-1946 #chat-minimize,
#chat-panel.vm-chat-final-1946 .chat-drag-handle,
#chat-panel.vm-chat-final-1946 #vm-chat-close{display:none!important}
#chat-panel.vm-chat-final-1946 .chat-close-final{
  display:grid!important;place-items:center!important;width:23px!important;height:23px!important;min-width:23px!important;
  padding:0!important;border-radius:7px!important;background:rgba(18,57,63,.12)!important;color:#183b44!important;
  font:700 18px/20px system-ui,sans-serif!important;
}
#chat-panel.vm-chat-final-1946 .chat-body{display:flex!important;gap:6px!important;min-height:0!important}
#chat-panel.vm-chat-final-1946 .chat-tabs{display:grid!important;grid-template-columns:1fr 1fr!important;gap:4px!important;margin:0!important}
#chat-panel.vm-chat-final-1946 .chat-tabs button{
  min-height:23px!important;padding:4px 6px!important;border-radius:6px!important;background:rgba(228,234,223,.52)!important;
  font-size:8px!important;letter-spacing:.07em!important;font-weight:900!important;
}
#chat-panel.vm-chat-final-1946 .chat-tabs button.selected{background:rgba(23,62,60,.90)!important;color:#fff9e9!important}
#chat-panel.vm-chat-final-1946 .chat-name-row{display:none!important}
#chat-panel.vm-chat-final-1946 .chat-messages{
  height:104px!important;min-height:78px!important;max-height:104px!important;overflow-y:auto!important;
  padding:5px 6px!important;border-radius:8px!important;background:rgba(247,246,235,.20)!important;
  border:1px solid rgba(16,45,53,.10)!important;overscroll-behavior:contain!important;
}
#chat-panel.vm-chat-final-1946 .chat-message{padding:4px 2px!important;border-bottom:1px solid rgba(19,55,56,.09)!important}
#chat-panel.vm-chat-final-1946 .chat-message>div{gap:5px!important}
#chat-panel.vm-chat-final-1946 .chat-message b{font-size:10px!important;line-height:1.1!important}
#chat-panel.vm-chat-final-1946 .chat-message time{font-size:7px!important;opacity:.68!important}
#chat-panel.vm-chat-final-1946 .chat-message p{font-size:11px!important;line-height:1.25!important;margin:2px 0 0!important;color:#294742!important}
#chat-panel.vm-chat-final-1946 .chat-empty{padding:28px 5px!important;font-size:10px!important;color:rgba(57,78,73,.68)!important}
#chat-panel.vm-chat-final-1946 .chat-quick-actions{
  display:flex!important;gap:4px!important;overflow-x:auto!important;scrollbar-width:none!important;padding:0!important;margin:0!important;
}
#chat-panel.vm-chat-final-1946 .chat-quick-actions::-webkit-scrollbar{display:none!important}
#chat-panel.vm-chat-final-1946 .chat-quick-actions button{
  display:grid!important;place-items:center!important;flex:0 0 28px!important;width:28px!important;height:24px!important;min-width:28px!important;
  padding:0!important;border-radius:7px!important;background:rgba(255,250,224,.64)!important;color:#1a4b4f!important;
  font:900 12px/1 Arial,sans-serif!important;border:1px solid rgba(255,255,255,.42)!important;
}
#chat-panel.vm-chat-final-1946 .chat-quick-actions button:last-child{flex-basis:31px!important;min-width:31px!important;font-size:9px!important;letter-spacing:.04em!important}
#chat-panel.vm-chat-final-1946 .chat-quick-actions button:disabled{opacity:.38!important;filter:none!important}
#chat-panel.vm-chat-final-1946 .chat-quick-actions{display:none!important}
#chat-panel.vm-chat-final-1946 .chat-status{font-size:8px!important;line-height:1.05!important;min-height:9px!important;margin:0!important;color:rgba(64,89,81,.64)!important}
#chat-panel.vm-chat-final-1946 #chat-form{display:flex!important;gap:4px!important;margin:0!important;min-height:31px!important}
#chat-panel.vm-chat-final-1946 #chat-form input{
  flex:1 1 auto!important;min-width:0!important;height:31px!important;padding:6px 8px!important;border-radius:8px!important;
  font-size:11px!important;background:rgba(255,252,224,.62)!important;border:1px solid rgba(16,45,53,.14)!important;
}
#chat-panel.vm-chat-final-1946 #chat-form button{
  width:34px!important;min-width:34px!important;height:31px!important;padding:0!important;border-radius:8px!important;
  background:rgba(15,58,63,.84)!important;color:#fff8e3!important;font-size:0!important;
}
#chat-panel.vm-chat-final-1946 #chat-form button::after{content:'➤';font-size:14px!important;line-height:31px!important}

@media (min-width:901px){
  #chat-panel.vm-chat-final-1946{position:absolute!important;right:18px!important;bottom:16px!important;left:auto!important;top:auto!important}
  body.playing #chat-panel.vm-chat-final-1946{bottom:18px!important}
}

@media (max-width:900px) and (pointer:coarse) and (orientation:portrait){
  body:not(.playing) #chat-panel.vm-chat-final-1946{
    position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    width:min(330px,calc(100% - 40px))!important;max-width:330px!important;max-height:none!important;margin:8px auto 30px!important;
  }
  body:not(.playing) #chat-panel.vm-chat-final-1946 .chat-messages{height:94px!important;min-height:76px!important;max-height:94px!important}
  body.playing #chat-panel.vm-chat-final-1946{
    position:fixed!important;left:calc(10px + env(safe-area-inset-left))!important;right:auto!important;top:calc(92px + env(safe-area-inset-top))!important;bottom:auto!important;
    width:min(242px,58vw)!important;max-width:242px!important;margin:0!important;
  }
  body.playing #chat-panel.vm-chat-final-1946 .chat-messages{height:76px!important;min-height:60px!important;max-height:76px!important}
}

@media (max-width:900px) and (pointer:coarse) and (orientation:landscape){
  #chat-panel.vm-chat-final-1946{
    position:fixed!important;left:auto!important;right:calc(12px + env(safe-area-inset-right))!important;top:auto!important;
    bottom:calc(132px + env(safe-area-inset-bottom))!important;width:min(252px,35vw)!important;max-width:252px!important;margin:0!important;
  }
  body:not(.playing) #chat-panel.vm-chat-final-1946{bottom:calc(16px + env(safe-area-inset-bottom))!important}
  #chat-panel.vm-chat-final-1946 .chat-messages{height:66px!important;min-height:52px!important;max-height:66px!important}
  #chat-panel.vm-chat-final-1946 .chat-status{display:none!important}
}

@media (prefers-reduced-motion:reduce){#chat-panel.vm-chat-final-1946 .chat-dot{animation:none!important}}

html body #chat-panel #vm-chat-close{display:none!important}
@media (orientation:landscape) and (max-height:550px){
  #setup-dialog{width:min(720px,94vw)!important;max-height:96dvh!important;padding:12px 18px!important}
  #setup-dialog .dialog-head{margin:0 0 8px!important}
  #setup-dialog .dialog-head h2{font-size:22px!important;margin:0!important}
  #setup-dialog .eyebrow{display:none!important}
  #setup-dialog .setup-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;margin:6px 0!important}
  #setup-dialog .vm-setup-cards{margin-top:4px!important;gap:5px!important}
  #setup-dialog .vm-setup-card{padding:6px!important;box-shadow:none!important}
  #setup-dialog .vm-card-icon{height:22px!important;margin-bottom:3px!important;font-size:14px!important}
  #setup-dialog .vm-card-copy small{display:none!important}
  #setup-dialog .solo-public-label{margin:8px 0!important;padding:0!important;font-size:12px!important}
  #setup-dialog>p.muted{font-size:11px!important;line-height:1.3!important;margin:6px 0!important}
  #setup-dialog #start-single{padding:9px 12px!important;min-height:38px!important;margin-top:5px!important}
}

html body #app #charge-box{display:none!important}
html body #chat-open::before,html body #chat-open::after{display:none!important;animation:none!important}
html body #chat-open #chat-unread,html body #chat-open .vm-chat-unread-1916,html body #chat-open .chat-unread-label{display:none!important}
html body #chat-open.actual-unread::after{content:attr(data-unread-count)!important;display:grid!important;place-items:center;position:absolute;top:-4px;right:-4px;width:18px;height:18px;border-radius:50%;background:#df563d;color:white;font:700 11px Arial;box-shadow:none!important}
@media (orientation:landscape) and (max-height:550px){
 #online-dialog{width:min(740px,94vw)!important;max-height:96dvh!important;padding:12px 18px!important}
 #online-dialog .dialog-head{margin:0 0 8px!important}
 #online-dialog h2{font-size:22px!important;margin:0!important}
 #online-dialog .eyebrow,#online-explain{display:none!important}
 #online-setup{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;align-items:end}
 #online-setup>label:not([hidden]){grid-column:1;grid-row:1;margin:0!important;font-size:12px!important}
 #online-setup #mode{padding:7px!important;margin-top:4px!important}
 #create-room{grid-column:1;grid-row:2;padding:10px!important;margin-top:8px!important}
 #online-setup .or{grid-column:2;grid-row:1;margin:0 0 8px!important;font-size:11px!important}
 #online-setup .join-row{grid-column:2;grid-row:2;margin:0!important}
 #online-setup .join-row input,#online-setup .join-row button{padding:10px!important}
 #online-error:empty{display:none!important}
 #lobby-code{font-size:24px!important;margin:4px!important}
 #lobby-players{display:grid!important;grid-template-columns:1fr 1fr;gap:4px!important}
 #lobby-players>*{padding:5px!important;margin:0!important}
 #lobby p{font-size:11px!important;margin:5px 0!important}
 #start-online,#leave-room{padding:8px!important;margin:3px 0!important}
}

html body #app .scoreboard{left:50%!important;transform:translateX(-50%)!important}
html body #app .play-message{left:50%!important;transform:translateX(-50%)!important}
#home-character-name{display:none!important}
.online-mode-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:6px}
.online-mode-cards button{padding:10px 6px;border:1px solid #b7c8bd;border-radius:10px;background:#f7f5ea;text-align:center}
.online-mode-cards button.selected{border-color:#ef6b3f;background:#fff2d9;box-shadow:0 0 0 1px #ef6b3f}
.online-mode-cards strong,.online-mode-cards small{display:block}
.online-mode-cards strong{font-size:12px}
.online-mode-cards small{font-size:10px;margin-top:3px}
.court-slots{position:relative;display:grid!important;grid-template-columns:1fr 1fr!important;grid-template-rows:1fr 1fr;gap:8px 34px!important;padding:10px 12px!important;border-radius:16px;background:linear-gradient(90deg,#42bce7 0 49.3%,#fff 49.3% 50.7%,#ff719c 50.7%);box-shadow:inset 0 0 0 3px rgba(255,255,255,.72);overflow:hidden}
.court-slots:after{content:"";position:absolute;inset:50% 0 auto;height:2px;background:rgba(255,255,255,.7);pointer-events:none}
.court-slots .lobby-slot{position:relative;z-index:1;min-height:64px;padding:7px 9px!important;margin:0!important;border:2px solid rgba(255,255,255,.88);border-radius:12px;background:rgba(250,248,237,.94);color:#102f38;text-align:left;box-shadow:0 3px 0 rgba(10,47,57,.18);cursor:pointer}
.court-slots .lobby-slot:nth-child(2){grid-column:1;grid-row:2}
.court-slots .lobby-slot:nth-child(3){grid-column:2;grid-row:1}
.court-slots .lobby-slot:nth-child(4){grid-column:2;grid-row:2}
.court-slots .lobby-slot:disabled{cursor:default;opacity:1}
.court-slots .lobby-slot.selected{outline:3px solid #ffd04d;outline-offset:1px}
.court-slots .lobby-slot small,.court-slots .lobby-slot b,.court-slots .lobby-slot span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.court-slots .lobby-slot small{font-size:9px;letter-spacing:.08em;color:#537078}
.court-slots .lobby-slot b{font-size:12px;margin:2px 0}
.court-slots .lobby-slot span{font-size:8px;font-weight:800;color:#668087}
#online-dialog{padding:18px;max-width:94vw}
@media(max-width:600px) and (orientation:portrait){
 html body .game-tools{top:calc(78px + env(safe-area-inset-top))!important;display:flex!important;gap:4px}
 html body .game-tool{width:36px;height:36px;min-width:36px;padding:7px}
 html body #app .play-message{top:calc(120px + env(safe-area-inset-top))!important;max-width:190px!important}
 html body #app .pause-button.pause-corner-x{top:calc(120px + env(safe-area-inset-top))!important}
 body:not(.playing) #menu{margin-top:126px!important}
}
@media(orientation:landscape) and (max-height:550px){
 #online-dialog .online-mode-cards button{padding:8px 4px}
 #online-dialog .online-mode-cards strong{font-size:11px}
 #online-dialog .online-mode-cards small{font-size:10px}
}

html body.vm-indoor #arena-caption,html body.vm-indoor #arena-caption *,html body.vm-annelinn #arena-caption,html body.vm-annelinn #arena-caption *{color:#f3faee!important;text-shadow:0 2px 8px #09273480}
html body.vm-indoor #court-tag,html body.vm-indoor #court-tag *,html body.vm-annelinn #court-tag,html body.vm-annelinn #court-tag *{color:#e4f4e9!important}

html body.vm-indoor #court-tag,html body.vm-indoor #court-tag *,html body.vm-annelinn #court-tag,html body.vm-annelinn #court-tag *{color:#153e4b!important;text-shadow:none!important}
html body #app .scoreboard{top:clamp(48px,12vh,110px)!important;pointer-events:none!important;transition:opacity 60ms linear!important}
html body #app #play-message{top:calc(clamp(48px,12vh,110px) + 82px)!important;pointer-events:none!important}
html body #app .touch-actions [data-action=hit]{grid-column:1 / -1!important}
@media (min-width:1001px) and (pointer:fine){
 html body #app #chat-panel.vm-chat-final-1946{position:fixed!important;top:var(--chat-y,76px)!important;left:var(--chat-x,auto)!important;right:18px!important;bottom:auto!important;width:310px!important;max-width:calc(100vw - 24px)!important;max-height:calc(100vh - 92px)!important;transform:none!important;translate:none!important;background:rgba(250,248,237,.94)!important;z-index:40!important}
 html body #app #chat-panel .chat-head{cursor:grab;touch-action:none;min-height:30px!important}
 html body #app #chat-panel .chat-title small{font-size:10px!important;white-space:normal!important;overflow:visible!important}
 html body #app #chat-panel .chat-messages{height:150px!important;max-height:24vh!important;min-height:50px!important;overflow:auto!important}
 html body #app #chat-panel .chat-message p{font-size:13px!important;line-height:1.4!important;white-space:pre-wrap!important;overflow-wrap:anywhere!important;color:#173e45!important}
 html body #app #chat-panel .chat-message b{font-size:12px!important}
 html body #app #chat-panel .chat-tabs button{font-size:10px!important;min-height:30px!important}
 html body #app #chat-panel .chat-status{font-size:11px!important;line-height:1.3!important;color:#31535a!important;white-space:normal!important}
}
@media(max-width:600px){html body #app .game-toolbar{top:10px!important}}

html body #radio-open{display:none!important}
html body #app .game-tools{display:flex!important;grid-template-columns:none!important;align-items:center!important}
html body #app .game-tools #pause{
  position:relative!important;inset:auto!important;display:grid!important;place-items:center!important;
  width:44px!important;height:44px!important;min-width:44px!important;margin:0!important;padding:0!important;
  border:1px solid #ffffff9c!important;border-radius:12px!important;background:#ffcf50!important;
  color:#173b44!important;box-shadow:0 2px 5px #132f3b20!important;font:900 28px/1 system-ui,sans-serif!important;
}
body:not(.playing) #app .game-tools #pause{display:none!important}
@media (min-width:1001px) and (pointer:fine){
 html body #app #chat-panel.vm-chat-final-1946{
   top:var(--chat-y,182px)!important;background:rgba(250,248,237,.84)!important;
   backdrop-filter:blur(13px) saturate(1.08)!important;-webkit-backdrop-filter:blur(13px) saturate(1.08)!important;
 }
 html body #app #chat-panel .chat-messages{background:rgba(247,246,235,.64)!important}
 html body #app #chat-panel #chat-form input{background:rgba(255,252,224,.82)!important}
}
@media(max-width:600px) and (orientation:portrait){
 html body #app .game-tools{top:calc(8px + env(safe-area-inset-top))!important;right:calc(8px + env(safe-area-inset-right))!important;gap:4px!important}
 html body #app .game-tool,html body #app .game-tools #pause{width:36px!important;height:36px!important;min-width:36px!important;padding:7px!important;border-radius:10px!important}
 html body #app .game-tools #pause{font-size:24px!important;padding:0!important}
}
@media(orientation:landscape) and (max-height:550px){
 html body #app .game-tools #pause{width:44px!important;height:44px!important;min-width:44px!important}
}

#single,.legacy-mode,.online-mode-cards{display:none!important}
.menu-play-row{display:block!important}
#multiplayer{width:100%!important;background:var(--ink)!important;color:#fff!important;box-shadow:0 3px 0 #061a20!important}
.public-court-settings{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 8px}
.public-court-settings label{margin:5px 0;font-size:11px;letter-spacing:.04em}
.public-court-settings select{margin-top:4px;padding:8px 9px;font-size:13px}
.court-slots .lobby-slot b{font-weight:950;text-shadow:0 1px 0 #fff,0 0 5px #fff}
.chat-message b[data-shirt-color]{font-weight:950!important;text-shadow:0 1px 0 rgba(255,255,255,.9),0 0 4px rgba(255,255,255,.75)}
.join-public-court{align-self:center;padding:7px 11px;border-radius:7px;background:#ffcc58;color:#173b44;font-size:10px;font-weight:950;box-shadow:0 2px 0 #b78d30}
@media(orientation:landscape) and (max-height:550px){
 #online-setup .public-court-settings{grid-column:1;grid-row:1 / span 2;align-self:start}
 #online-setup #create-room{grid-column:1;grid-row:3!important}
 #online-setup .or{grid-column:2;grid-row:1!important}
 #online-setup .join-row{grid-column:2;grid-row:2!important}
}

.menu-panel .brand-logo{width:min(290px,78vw)!important;height:auto!important;margin:0 0 5px!important;line-height:0!important;letter-spacing:0!important}
.menu-panel .brand-logo img{display:block;width:100%;height:auto;object-fit:contain}
#single{display:flex!important}
.menu-play-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}
#multiplayer{width:100%!important;background:#fffaf0!important;color:var(--ink)!important;box-shadow:0 3px 0 #173b4433!important}
.vm-native-select{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.vm-setup-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:6px}
.vm-setup-card{position:relative;min-width:0;padding:8px 6px 7px;border:1.5px solid #b7c8bd;border-radius:10px;background:#f7f5ea;color:#12343d;text-align:left;box-shadow:0 2px 0 rgba(18,52,61,.08);cursor:pointer}
.vm-setup-card.selected{border-color:#ef6b3f;background:#fff9ec;box-shadow:0 0 0 2px rgba(239,107,63,.15),0 2px 0 rgba(18,52,61,.08)}
.vm-card-icon{display:flex;align-items:center;justify-content:center;height:28px;margin-bottom:4px;border-radius:7px;background:#dfeee7;font-size:15px;font-weight:900}
.vm-setup-target .vm-card-icon{background:#143943;color:#fff7df}
.vm-card-copy{display:flex;flex-direction:column;gap:1px}.vm-card-copy b{font-size:10px;letter-spacing:.25px}.vm-card-copy small{font-size:8px;color:#6d8178;font-weight:650}
.vm-card-check{position:absolute;top:5px;right:5px;width:15px;height:15px;border-radius:50%;display:none;place-items:center;background:#ef6b3f;color:white;font-size:9px;font-weight:900}.vm-setup-card.selected .vm-card-check{display:grid}
#radio-panel.radio-control-bar{width:255px!important;max-width:calc(100vw - 18px)!important}
#radio-panel .radio-volume-compact{flex:0 1 105px!important;grid-template-columns:auto minmax(48px,72px) auto!important;gap:4px!important}
#radio-panel .radio-volume-compact input[type=range]{width:72px!important;min-width:48px!important}
@media (min-width:1001px) and (pointer:fine){
 html body #app #chat-panel.vm-chat-final-1946{top:var(--chat-y,238px)!important;background:rgba(250,248,237,.80)!important}
 html body #app #chat-panel .chat-messages{background:rgba(247,246,235,.58)!important}
}
@media(max-width:700px){.menu-play-row{gap:5px!important}.menu-play-row .big{padding:8px 6px!important}.public-court-settings{gap:6px}.vm-setup-cards{gap:4px}.vm-setup-card{padding:6px 4px}.vm-card-copy small{display:none}}

html body #app #menu .brand-logo{width:170px!important;height:50px!important;margin:0 0 4px!important}html body #app #menu .brand-logo img{height:50px!important;width:170px!important}
html body #app #multiplayer{background:#ffcf50!important;color:#173b44!important;box-shadow:0 3px 0 #b18b36!important}
#pause-dialog[open]{position:fixed;left:50%;top:45%;transform:translate(-50%,-50%);margin:0;z-index:39;box-shadow:0 12px 45px #09242a55}
#radio-pause svg{display:block;width:20px;height:20px;margin:auto}
.court-preview{position:relative!important;background:none!important;overflow:hidden!important}.court-preview::before,.court-preview::after{display:none!important}.court-preview canvas{display:block;width:100%;height:100%;object-fit:cover}
.private-court-option{grid-column:1 / -1;font-size:12px!important;margin:6px 0!important}

html body #app .court-picker .court-preview{position:absolute!important;left:0!important;right:0!important;top:0!important;width:100%!important;margin:0!important;height:33px!important}.court-preview canvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;transform:none!important}

#radio-stop{font-size:17px!important;line-height:1!important}
#radio-pause svg{width:17px!important;height:17px!important}
#radio-play{font-size:16px!important}
#radio-panel .radio-volume-compact{padding:4px 6px!important;border:1px solid rgba(255,248,227,.48)!important;border-radius:6px!important;background:rgba(5,31,36,.34)!important}
#radio-panel .radio-volume-compact input{accent-color:#ffd15b!important}
.arena-caption>span{display:none!important}
#online-now{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden}
.online-person{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font-size:10px;font-weight:800}
.online-person::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:#38cc89;box-shadow:0 0 0 2px #38cc8930}
.online-person button,.lobby-online-now .online-person{margin-left:3px;padding:3px 6px;border-radius:6px;background:#ffcf50;color:#173b44;font-size:8px;font-weight:950}
.chat-online-now{display:flex;gap:6px;overflow-x:auto;min-height:20px;padding:3px 1px;color:#49645e;font-size:9px}
.lobby-online-now{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0}
#setup-dialog[open],#online-dialog[open]{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;z-index:39;box-shadow:0 16px 52px #09242a77}
.court-picker button{height:68px!important;padding-top:47px!important}.court-picker .court-preview{height:43px!important}.court-picker .court-preview canvas{image-rendering:auto!important}
@media(max-width:700px){#online-now{max-width:42vw}.bottom-bar #online-now .online-person:nth-child(n+4){display:none}.court-picker button{height:62px!important;padding-top:42px!important}.court-picker .court-preview{height:38px!important}.chat-online-now{max-width:100%}}