body.play{overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;position:fixed;inset:0;overflow:hidden}#arena{touch-action:none;outline:none;width:100%;height:100%;display:block;position:fixed;inset:0}#ui{pointer-events:none;position:fixed;inset:0}.app{position:absolute;inset:0}.app :is(button,input,select,a,summary,details,.panel,.modal-backdrop,form,label,textarea){pointer-events:auto}input,select,textarea{-webkit-user-select:text;user-select:text}.home{padding:calc(18px + var(--safe-top)) calc(24px + var(--safe-right)) calc(18px + var(--safe-bottom)) calc(24px + var(--safe-left));grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr);gap:20px;display:grid;position:absolute;inset:0}.home-top{justify-content:space-between;align-items:center;gap:16px;display:flex}.home-brand{pointer-events:auto;width:min(380px,52vw)}.home-nav{align-items:center;gap:8px;display:flex}.live-chip{font-size:var(--t-sm);color:var(--dim);align-items:center;gap:8px;margin-right:8px;display:inline-flex}.live-dot{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:#3dff8a;width:8px;height:8px;box-shadow:0 0 8px #3dff8a}.user-btn span{text-overflow:ellipsis;white-space:nowrap;max-width:12ch;overflow:hidden}.home-menu{align-self:start;gap:16px;width:min(390px,100%);margin-top:4vh;padding:22px 22px 16px;display:grid}.tagline{font-size:var(--t-xl);color:var(--phosphor);text-wrap:balance;margin:0;font-weight:600;line-height:1.15}.row{align-items:center;gap:8px;display:flex}.row.wrap{flex-wrap:wrap}.row.end{justify-content:flex-end}.name-field .input{flex:1}.menu-actions{gap:10px;display:grid}.btn.big{text-align:left;justify-items:start;gap:2px;width:100%;min-height:58px;padding:.6em 1.1em;display:grid}.btn.big .label{font-size:var(--t-lg);font-weight:700}.btn.big .hint{font-size:var(--t-sm);opacity:.75;font-weight:500}.btn.primary.big .hint{opacity:.8}.join-row{grid-template-columns:1fr auto;gap:8px;display:grid}.code-input{text-transform:uppercase;letter-spacing:.25em;font-size:var(--t-lg)}.home-foot{font-size:var(--t-sm);color:var(--dim);justify-content:space-between;gap:12px;padding-top:4px;display:flex}.invite{border:1.5px dashed var(--magenta);background:color-mix(in srgb, var(--magenta) 10%, transparent);gap:8px;padding:12px;display:grid}.invite p{margin:0;font-weight:600}.topbar{padding:calc(10px + var(--safe-top)) calc(14px + var(--safe-right)) 10px calc(14px + var(--safe-left));background:linear-gradient(#050414d9,#05041400);justify-content:space-between;align-items:center;gap:8px;display:flex;position:absolute;top:0;left:0;right:0}.topbar-left,.topbar-right{align-items:center;gap:6px;display:flex}.room-chip{border:1.5px solid var(--me);clip-path:polygon(var(--chamfer-sm) 0, 100% 0, 100% calc(100% - var(--chamfer-sm)), calc(100% - var(--chamfer-sm)) 100%, 0 100%, 0 var(--chamfer-sm));background:#05041499;align-items:baseline;gap:8px;padding:6px 12px;display:inline-flex}.room-chip-label{font-size:var(--t-xs);color:var(--dim)}.room-chip .code{font-size:var(--t-lg);letter-spacing:.14em;color:var(--me);text-shadow:0 0 8px var(--me);font-weight:700}.net-warn{color:var(--orange);font-size:var(--t-sm);font-weight:600}.lobby{top:calc(70px + var(--safe-top));right:calc(14px + var(--safe-right));width:330px;max-height:calc(100% - 100px - var(--safe-top) - var(--safe-bottom));flex-direction:column;display:flex;position:absolute}.lobby-handle{width:100%;min-height:44px;color:var(--phosphor);font:600 var(--t-md) var(--font-ui);cursor:pointer;background:0 0;border:0;justify-content:space-between;align-items:center;padding:10px 16px;display:flex}.lobby-handle .pixel{color:var(--me);margin-left:6px}.icon.flip{transform:rotate(180deg)}.lobby-body{gap:12px;padding:0 16px 16px;display:grid;overflow:auto}.lobby.closed .lobby-body{display:none}.lobby-status{color:var(--dim);font-size:var(--t-sm);margin:0}.members{gap:4px;margin:0;padding:0;list-style:none;display:grid}.member{align-items:center;gap:8px;min-height:34px;padding:2px 4px;display:flex}.member.offline{opacity:.45}.member-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-weight:600;overflow:hidden}.swatch{--c:var(--cyan);background:var(--c);width:14px;height:14px;box-shadow:0 0 8px var(--c);clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);vertical-align:-2px;flex:none;display:inline-block}.tag{font-size:var(--t-xs);color:var(--dim);border:1px solid var(--line);align-items:center;padding:1px 6px;display:inline-flex}.tag.host{color:var(--yellow);border-color:#0000}.tag.bot{color:var(--void);background:var(--dim);border-color:#0000}.rating{font-size:var(--t-xs);color:var(--dim)}.kick{min-width:28px!important;min-height:28px!important}.sub{font-size:var(--t-sm);color:var(--dim);margin:8px 0 0;font-weight:600}.host-tools{border-top:1px solid var(--line);gap:10px;padding-top:12px;display:grid}.bot-add{grid-template-columns:minmax(0,1fr);gap:8px;display:grid}.bot-add .input{min-height:44px}.btn.start{text-align:center;justify-items:center}.fine{font-size:var(--t-sm);color:var(--dim);margin:0}.stepper{justify-content:space-between;align-items:center;gap:10px;display:flex}.stepper-label{font-size:var(--t-sm);color:var(--dim)}.stepper-ctl{align-items:center;gap:6px;display:flex}.stepper output{text-align:center;min-width:2.2ch;font-size:var(--t-lg);color:var(--me)}.stepper-ctl .btn.icon{min-width:34px;min-height:34px}.segmented{border:1.5px solid var(--line);clip-path:polygon(var(--chamfer-sm) 0, 100% 0, 100% calc(100% - var(--chamfer-sm)), calc(100% - var(--chamfer-sm)) 100%, 0 100%, 0 var(--chamfer-sm));flex-wrap:wrap;gap:2px;padding:2px;display:inline-flex}.segmented button{min-height:34px;color:var(--dim);font:600 var(--t-sm) var(--font-ui);cursor:pointer;background:0 0;border:0;padding:.3em .8em}.segmented button.on{background:var(--me);color:var(--void)}.segmented button:not(.on):hover{color:var(--phosphor)}.toggle{width:100%;min-height:40px;color:var(--phosphor);font:600 var(--t-md) var(--font-ui);cursor:pointer;background:0 0;border:0;justify-content:space-between;align-items:center;gap:12px;padding:0;display:flex}.toggle i{border:1.5px solid var(--line);clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);width:46px;height:22px;position:relative}.toggle i:after{content:"";background:var(--faint);width:16px;height:13px;transition:transform .15s,background .15s;position:absolute;top:3px;left:3px}.toggle.on i{border-color:var(--me)}.toggle.on i:after{background:var(--me);box-shadow:0 0 8px var(--me);transform:translate(22px)}.hud{pointer-events:none;position:absolute;inset:0}.hud-center{top:calc(64px + var(--safe-top));text-align:center;justify-items:center;gap:6px;width:min(560px,92vw);display:grid;position:absolute;left:50%;transform:translate(-50%)}.hud-phase{font-size:var(--t-sm);color:var(--dim);background:#0504148c;padding:4px 12px}.hud-alive{font-size:var(--t-xl);color:var(--phosphor);text-shadow:0 0 10px #00f0ff99}.hud-overtime{color:var(--magenta);text-shadow:0 0 12px var(--magenta);font-weight:700;animation:.9s steps(2,end) infinite blink}@keyframes blink{50%{opacity:.45}}.feed{justify-items:center;gap:4px;display:grid}.feed-item{--c:var(--phosphor);font-weight:600;font-size:var(--t-md);color:var(--c);text-shadow:0 0 10px color-mix(in srgb, var(--c) 60%, transparent), 0 1px 2px #000;animation:.25s ease-out feed-in}.feed-item.big{font-size:var(--t-xl);font-weight:700}@keyframes feed-in{0%{opacity:0;transform:translateY(-6px)scale(1.15)}}.countdown{color:var(--me);text-shadow:0 0 30px var(--me), 0 0 2px #fff;font-size:clamp(5rem,22vw,12rem);line-height:1;animation:.9s ease-out forwards count-pop;position:absolute;top:42%;left:50%;transform:translate(-50%,-50%)}.countdown.go{color:var(--yellow);text-shadow:0 0 30px var(--yellow), 0 0 2px #fff}@keyframes count-pop{0%{opacity:0;transform:translate(-50%,-50%)scale(1.8)}20%{opacity:1}to{opacity:.15;transform:translate(-50%,-50%)scale(.9)}}.hud-bottom{bottom:calc(16px + var(--safe-bottom));left:calc(16px + var(--safe-left));justify-items:start;display:grid;position:absolute}.my-lives{--c:var(--me);gap:8px;display:flex}.my-lives i{border:2px solid color-mix(in srgb, var(--c) 45%, transparent);clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);width:22px;height:22px}.my-lives i.on{background:var(--c);border-color:var(--c);box-shadow:0 0 12px var(--c)}.out-note{font-weight:700;font-size:var(--t-lg);color:var(--orange);text-shadow:0 0 10px var(--orange);background:#05041499;padding:4px 14px}.emote-bar{right:calc(14px + var(--safe-right));bottom:calc(14px + var(--safe-bottom));flex-wrap:wrap-reverse;justify-content:flex-end;gap:6px;max-width:min(360px,70vw);display:flex;position:absolute}.emote-bar .emote{min-width:44px}.emote-bubbles{left:calc(14px + var(--safe-left));bottom:calc(64px + var(--safe-bottom));gap:6px;display:grid;position:absolute}.emote-bubble{--c:var(--cyan);border-left:3px solid var(--c);background:#050414bf;justify-self:start;padding:6px 12px;font-weight:600;animation:.2s ease-out feed-in}.emote-bubble .who{color:var(--c);margin-right:4px}.gameover-wrap{background:radial-gradient(#0504148c,#05041426);place-items:center;padding:80px 14px 24px;display:grid;position:absolute;inset:0}.gameover{gap:10px;width:min(560px,100%);max-height:100%;padding:22px;animation:.35s ease-out rise;display:grid;overflow:auto}@keyframes rise{0%{opacity:0;transform:translateY(16px)}}.gameover-title{--c:var(--cyan);font-size:clamp(1.6rem, 6vw, var(--t-3xl));color:var(--c);text-shadow:0 0 18px var(--c);text-wrap:balance;margin:0;line-height:1.05}.results{border-collapse:collapse;width:100%;font-size:var(--t-sm)}.results th{text-align:left;color:var(--dim);border-bottom:1px solid var(--line);padding:4px 6px;font-weight:500}.results td{border-bottom:1px solid #78c8ff14;padding:6px}.results .num{text-align:right;font-variant-numeric:tabular-nums}.results tr.me td{background:color-mix(in srgb, var(--me) 12%, transparent);font-weight:700}.delta.up{color:#3dff8a}.delta.down{color:var(--orange)}.gameover-actions{flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px;display:flex}.training-lobby{bottom:calc(80px + var(--safe-bottom));width:min(320px,80vw);position:absolute;left:50%;transform:translate(-50%)}.modal-backdrop{z-index:10;background:#03020c99;place-items:center;padding:16px;display:grid;position:absolute;inset:0}.modal{background:var(--glass-strong);width:min(470px,100%);max-height:min(88vh,100%);padding:18px 20px 20px;animation:.25s ease-out rise;overflow:auto}.modal.wide{width:min(640px,100%)}.modal-head{justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.modal-head h2{font-size:var(--t-xl);margin:0}.modal-body{gap:14px;display:grid}.lead{color:var(--dim);margin:0}.form{gap:12px;display:grid}.form.inline{grid-template-columns:1fr auto;align-items:end}.form.inline .field.grow{min-width:0}.error{color:var(--orange);margin:0;font-weight:600}.linkish{color:var(--cyan);font:500 var(--t-sm) var(--font-ui);text-underline-offset:3px;cursor:pointer;background:0 0;border:0;justify-self:start;padding:4px 0;text-decoration:underline}.oauth{gap:8px;display:grid}.oauth-buttons{flex-wrap:wrap;gap:8px;display:flex}.empty{color:var(--dim);margin:0}.lb-controls{flex-wrap:wrap;gap:8px;display:flex}.lb{gap:2px;margin:0;padding:0;list-style:none;display:grid}.lb li{grid-template-columns:3ch 1fr auto;align-items:center;gap:12px;padding:6px 8px;display:grid}.lb li:nth-child(-n+3) .rank{color:var(--yellow);text-shadow:0 0 8px var(--yellow)}.lb li.me{background:color-mix(in srgb, var(--cyan) 12%, transparent)}.lb .name{text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.lb .value{color:var(--cyan)}.stats-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px;display:grid}.stat{border:1px solid var(--line);padding:10px;display:grid}.stat-v{font-size:var(--t-xl);color:var(--cyan)}.stat-l{font-size:var(--t-xs);color:var(--dim)}.logins{color:var(--dim);margin:0;padding-left:1.2em}.danger-zone{border:1px solid color-mix(in srgb, var(--orange) 40%, transparent);padding:10px 12px}.danger-zone summary{cursor:pointer;color:var(--orange);font-weight:600}.settings{gap:14px;display:grid}.setting-row{grid-template-columns:1fr 140px;align-items:center;gap:14px;display:grid}input[type=range]{accent-color:var(--me);width:100%}.toasts{left:50%;bottom:calc(80px + var(--safe-bottom));z-index:20;justify-items:center;gap:6px;width:min(480px,92vw);display:grid;position:absolute;transform:translate(-50%)}.toast{background:var(--glass-strong);border:1.5px solid var(--line);text-align:center;padding:10px 16px;font-weight:600;animation:.2s ease-out rise}.toast.error{border-color:var(--orange);color:#ffd2b8}.toast.good{border-color:#3dff8a}body.no-webgl:after{content:"WebGL wird benötigt / WebGL is required";color:var(--phosphor);font:600 1.2rem var(--font-ui);place-items:center;display:grid;position:fixed;inset:0}@media (max-width:720px){.home{padding:calc(12px + var(--safe-top)) calc(12px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(12px + var(--safe-left));grid-template-rows:auto 1fr}.home-brand{width:min(200px,50vw)}.live-chip{display:none}.home-nav{gap:4px}.user-btn span{display:none}.user-btn{min-width:40px;padding:0}.home-menu{align-self:end;gap:12px;width:100%;max-height:74vh;margin:0;padding:16px;overflow:auto}.tagline{font-size:var(--t-lg)}.btn.big{min-height:52px}.controls-hint,.hide-narrow{display:none}.lobby{top:auto;bottom:calc(10px + var(--safe-bottom));right:calc(10px + var(--safe-right));left:calc(10px + var(--safe-left));width:auto;max-height:62vh}.hud-center{top:calc(58px + var(--safe-top))}.feed-item.big{font-size:var(--t-lg)}.setting-row{grid-template-columns:1fr 110px}.form.inline{grid-template-columns:1fr}}@media (max-height:520px) and (orientation:landscape){.home-menu{max-height:calc(100vh - 90px);margin-top:0;overflow:auto}.lobby{max-height:calc(100% - 80px)}}