/* Klecks Arena · warmes Papier, satte Farben und eine klare Spiel-Lobby. */
*,*::before,*::after{box-sizing:border-box}
:root{--ink:#193e3d;--paper:#fffdf5;--team:#008d7f;--rival:#e65c40;--sun:#f9d55c;--muted:#617370;--veil:rgba(16,48,47,.45)}
.screen{padding-top:max(24px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom))}
.panel{border:1px solid rgba(25,62,61,.18);border-radius:24px;box-shadow:0 24px 80px #092d352b;padding:30px;max-width:450px;gap:20px}
h2{line-height:1.05;letter-spacing:-.025em}
.lede{color:var(--muted);font-size:14px;line-height:1.65}
.eyebrow{font-size:10px;letter-spacing:.13em;color:var(--muted)}
#menu{display:grid;grid-template-columns:minmax(0,1fr) 410px;grid-template-rows:auto 1fr auto;gap:30px 7%;padding:30px max(5vw,24px);background:linear-gradient(100deg,rgba(239,245,223,.97) 0%,rgba(228,239,214,.91) 40%,rgba(209,230,206,.72) 100%);backdrop-filter:blur(2px);align-items:center}
.lobby-brand{grid-column:1/-1;display:flex;align-items:center;gap:12px;font-size:12px;font-weight:800;letter-spacing:.14em}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;background:var(--ink);color:var(--sun);border-radius:12px 12px 12px 3px;font:30px var(--font-display);letter-spacing:-2px;padding-right:3px;transform:rotate(-7deg)}
.brand-tag{margin-left:auto;font-size:10px;letter-spacing:.2em}
.lobby-hero{position:relative;max-width:720px;padding:25px 0 40px}
.hero-tag{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.16em;font-weight:800;margin-bottom:26px}
.hero-tag>span{width:8px;height:8px;background:var(--team);border-radius:50%;box-shadow:0 0 0 5px #008d7f13}
.lobby-hero h1{font-size:clamp(64px,7.9vw,122px);letter-spacing:-.045em;line-height:.93;position:relative;z-index:1}
.lobby-hero h1 span{color:var(--team);display:inline-block;transform:rotate(-4deg);position:relative}
.lobby-hero h1 span::after{content:"";position:absolute;height:10px;bottom:-9px;left:4px;right:0;background:var(--sun);border-radius:50%;transform:rotate(1deg)}
.lobby-hero>p{font-size:17px;line-height:1.7;margin:34px 0 35px;color:#42605a;font-weight:700}
.hero-sticker{display:grid;place-content:center;position:absolute;right:4%;top:50%;width:122px;height:122px;background:#ff795b;color:#243e36;transform:rotate(13deg);clip-path:polygon(50% 0,61% 8%,75% 7%,81% 20%,94% 25%,92% 40%,100% 50%,92% 62%,94% 75%,80% 81%,75% 94%,60% 92%,50% 100%,39% 92%,25% 94%,19% 81%,6% 75%,8% 60%,0 50%,8% 39%,6% 25%,20% 19%,25% 6%,40% 8%);font-size:12px;line-height:1.35;font-weight:800;text-align:center}
.hero-modes{display:flex;gap:25px;font-size:11px;font-weight:800}
.hero-modes span{display:flex;align-items:center;gap:9px}
.hero-modes b{font-size:10px;border:1px solid #193e3d40;border-radius:50%;padding:6px}
.lobby-panel{width:100%;max-width:none;gap:15px;position:relative;transform:rotate(1deg);box-shadow:9px 10px 0 #193e3d0c,0 24px 60px #193e3d20;border-radius:22px;padding:30px}
.lobby-panel>*{transform:rotate(-1deg)}
.lobby-panel h2{font-size:36px}
.lobby-heading{display:flex;justify-content:space-between;align-items:center;gap:6px}
.capacity{white-space:nowrap;font-size:9px;background:#e5f1eb;color:var(--team);padding:5px 7px;border-radius:5px;font-weight:800}
.lobby-panel .lede{margin-top:-7px;font-size:13px}
.server-status{border-radius:9px;padding:10px 12px;background:#f3efe4;font-size:11px;line-height:1.5;font-weight:800;color:#776344;display:flex;align-items:center;gap:8px}
.server-status::before{content:"";width:7px;height:7px;flex-shrink:0;border-radius:50%;background:#b59652}
.server-status.is-open{background:#e7f4eb;color:#26765b}
.server-status.is-open::before{background:#26865b}
.controls-details{border-top:1px solid #193e3d18;border-bottom:1px solid #193e3d18;padding:12px 0}
.controls-details summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:12px;font-weight:800;list-style:none}
.controls-details summary::-webkit-details-marker{display:none}
.controls-details summary span{font-size:19px;font-weight:500;color:var(--team)}
.controls-details[open] summary span{transform:rotate(45deg)}
.controls-content{padding-top:16px;display:grid;gap:20px}
.keys{font-size:11px;gap:8px}
kbd{font-size:10px;border-color:#193e3d38;background:#f2f4ec;border-width:1px 1px 3px;border-radius:5px;padding:2px 5px}
.settings{gap:14px;border-top:1px solid #193e3d18;padding-top:14px}
.seg{border:1px solid #193e3d30;border-radius:8px}
.seg label{font-size:11px;padding:7px 9px}
.seg input:not(:first-child)+label{border-left:1px solid #193e3d30}
input[type=range]{width:120px}
.actions{gap:10px}
.name{border:1px solid #193e3d30;border-radius:9px;padding:12px 13px;font-size:14px;background:#fff;transition:border-color .15s}
.name::placeholder{color:#8d9992;font-weight:500}
.go{display:flex;align-items:center;justify-content:space-between;border:0;background:var(--team);color:#fffdf5;border-radius:10px;box-shadow:0 4px 0 #00665c;font:800 15px var(--font-body);padding:15px 17px;transition:background .15s,transform .15s,box-shadow .15s}
.go:hover{background:#00766b;transform:translateY(-1px)}
.go:active{transform:translateY(3px)}
.go span,.ghost span{font-size:20px;line-height:1}
.ghost{border:1px solid #193e3d30;border-radius:10px;padding:12px 16px;font-size:12px;transition:background .15s}
.ghost:hover{background:#193e3d08}
#startBtn{display:flex;justify-content:space-between;align-items:center;background:#f9d55c;border-color:transparent}
#startBtn:hover{background:#f1c943}
#adminBtn{border:0;padding:2px;font-size:10px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.lobby-panel .foot{font-size:10px;text-align:center;line-height:1.6;margin-top:2px}
.best{font-size:12px;color:var(--team)}
.best:empty{display:none}
.net-msg{font-size:12px;line-height:1.5}
.lobby-footer{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;border-top:1px solid #193e3d25;padding-top:17px;font-size:10px;font-weight:800;letter-spacing:.09em;color:#56736a}
.chip,.ammo{background:#fffdf5ed;border:1px solid #193e3d25;border-radius:12px;box-shadow:0 4px 16px #123a3720;backdrop-filter:blur(8px)}
.chip{padding:9px 16px;gap:4px;min-width:86px}
.chip b{font-size:1.65rem}
#pauseBtn{min-width:45px;padding:12px;font-size:1.3rem}
.hud-top{top:calc(20px + env(safe-area-inset-top,0px));left:max(20px,env(safe-area-inset-left,0px));right:max(20px,env(safe-area-inset-right,0px));gap:10px}
.hud-bottom{bottom:calc(22px + env(safe-area-inset-bottom,0px));left:max(22px,env(safe-area-inset-left,0px));right:max(22px,env(safe-area-inset-right,0px))}
.shield{padding:12px 15px;background:#fffdf5ed;border-radius:12px;box-shadow:0 4px 16px #123a3720;gap:8px}
.bar{height:10px;border:0;background:#193e3d18}
.bar i{border-radius:9px}
.ammo{padding:9px 17px;gap:9px}
#cross{width:18px;height:18px;margin:-9px 0 0 -9px;border-width:2px;box-shadow:0 0 0 1px #193e3d99,inset 0 0 0 1px #193e3d99}
#feed{top:calc(98px + env(safe-area-inset-top,0px))}
#feed div{border:0;padding:6px 12px;border-radius:7px;box-shadow:0 2px 10px #123a3720;font-size:12px}
#board{border:1px solid #193e3d30;border-radius:18px;box-shadow:0 20px 70px #123a3740;padding:20px}
#board td{padding:9px 6px}
.stat{border:1px solid #193e3d20;background:#edf3e9;padding:14px 10px;gap:8px}
@media(min-width:1500px){#menu{padding-left:calc((100vw - 1320px)/2);padding-right:calc((100vw - 1320px)/2)}}
@media(max-width:1050px){#menu{gap:24px 5%;grid-template-columns:minmax(0,1fr) 370px;padding:24px 4%}.lobby-panel{padding:24px}.hero-sticker{right:-10px;top:58%;width:95px;height:95px;font-size:10px}.hero-modes{flex-direction:column;gap:12px}.lobby-hero h1{font-size:clamp(60px,8.5vw,90px)}}
@media(max-width:760px){#menu{display:flex;flex-direction:column;justify-content:flex-start;padding:20px;gap:24px}.lobby-brand{width:100%}.brand-tag{font-size:8px}.lobby-hero{width:100%;max-width:430px;padding:8px 0 0}.hero-tag{font-size:9px;margin-bottom:18px}.lobby-hero h1{font-size:68px}.lobby-hero>p{font-size:14px;margin:24px 0 0}.hero-sticker{top:40%;right:0;width:104px;height:104px}.hero-modes{display:none}.lobby-panel{max-width:430px;transform:none;padding:25px;flex-shrink:0}.lobby-panel>*{transform:none}.lobby-footer{max-width:430px;width:100%;font-size:8px;margin-top:4px}.lobby-footer span:last-child{max-width:130px;text-align:right}.hud-top{gap:6px;left:12px;right:12px}.chip{min-width:62px;padding:7px 10px}.chip b{font-size:1.3rem}.lbl{font-size:9px}body.touch .hud-bottom{top:calc(88px + env(safe-area-inset-top,0px))}.panel{width:min(100%,450px)}}
@media(max-height:750px) and (min-width:761px){#menu{gap:15px 6%;padding-top:18px;padding-bottom:18px}.lobby-panel{gap:11px;padding:23px}.lobby-panel h2{font-size:30px}.lobby-brand{font-size:10px}.brand-mark{width:30px;height:30px;font-size:25px}.lobby-footer{padding-top:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
@media(min-width:761px){.lobby-brand,.lobby-footer{width:100%}.lobby-hero{width:100%}.hero-sticker{top:65%;right:1%}}
@media(max-width:760px){.hero-sticker{display:none}}
/* Dezente Materialität und klarere Rückmeldung am Farbmixer. */
#game::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,transparent 48%,rgba(20,47,43,.13) 100%)}
.ammo .lbl{max-width:120px;line-height:1.4}
.ammo.reloading{background:#fff4ce;border-color:#d5b35f}
.ammo.reloading .lbl{color:#85651e}
#cross{opacity:.85}
#banner{letter-spacing:-.025em}
@media(max-width:760px){.ammo .lbl{max-width:85px}.ammo{gap:6px}body.touch .hud-bottom{gap:8px}}
.match-choice{margin:0;padding:0;border:0;min-width:0}
.match-choice legend{font-size:10px;letter-spacing:.1em;color:var(--muted);font-weight:800;text-transform:uppercase;margin-bottom:7px}
.map-options,.mode-options{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.map-options label,.mode-options label{position:relative;cursor:pointer;min-width:0}
.match-choice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.match-choice label>span{border:1px solid #193e3d28;border-radius:9px;padding:10px;display:flex;flex-direction:column;gap:3px;transition:background .15s,border-color .15s}
.map-options b{font-size:12px}.map-options small{font-size:9px;color:var(--muted)}
.match-choice input:checked+span{border-color:var(--team);background:#e9f3e9;box-shadow:inset 0 0 0 1px var(--team)}
.match-choice input:focus-visible+span{outline:3px solid #f0c752;outline-offset:2px}
.mode-options label>span{flex-direction:row;justify-content:center;align-items:center;font-size:11px;font-weight:800;padding:9px 5px;gap:5px}
.blue-dot,.red-dot{width:7px;height:7px;background:#357cdb;border-radius:50%}.red-dot{background:#e46457}
.match-hint{font-size:10px;line-height:1.4;color:var(--muted);margin:-5px 0 0}
.match-hud{position:absolute;bottom:104px;left:max(22px,env(safe-area-inset-left));display:grid;gap:2px;background:#fffdf5ed;border-radius:9px;padding:7px 11px;font-size:10px;color:var(--muted);box-shadow:0 3px 12px #123a3718}
.match-hud #mapLabel{font-weight:800;color:var(--ink)}
.team-score{position:absolute;top:22px;left:50%;transform:translateX(-50%);background:#fffdf5ed;border:1px solid #193e3d20;border-radius:14px;display:flex;gap:15px;align-items:center;padding:9px 18px;box-shadow:0 4px 16px #123a3720;font-size:10px;font-weight:800}
.team-score>span{display:flex;align-items:center;gap:12px}.team-score b{font:28px var(--font-display);font-variant-numeric:tabular-nums}
.blue-score{color:#286ab9}.red-score{color:#c64e42}.team-score .versus{font-size:18px;color:#879893}
#board td small{font-size:8px;color:var(--muted)}
@media(min-width:761px){#menu{grid-template-columns:minmax(0,1fr) 430px}.lobby-panel{gap:12px;padding:25px}}
@media(max-width:1050px) and (min-width:761px){#menu{grid-template-columns:minmax(0,1fr) 380px}.lobby-panel{padding:22px}.lobby-hero h1{font-size:clamp(50px,7.4vw,80px)}}
@media(max-width:760px){.lobby-panel{gap:12px}.team-score{top:calc(160px + env(safe-area-inset-top,0px));padding:5px 12px;gap:12px}.team-score b{font-size:22px}.match-hud{left:auto;right:12px;bottom:calc(260px + env(safe-area-inset-bottom,0px));font-size:9px;max-width:130px}.match-hud #teamLabel{font-size:9px}}
#interactionHint{position:absolute;left:50%;bottom:100px;transform:translateX(-50%);background:#fffdf5ed;color:var(--ink);padding:9px 15px;border-radius:9px;box-shadow:0 3px 12px #123a3720;font-size:12px;font-weight:800;white-space:nowrap}
#climbBtn{right:calc(132px + env(safe-area-inset-right,0px));bottom:calc(112px + env(safe-area-inset-bottom,0px));width:72px;height:72px;background:var(--paper);font-size:11px}
body.touch #interactionHint{bottom:calc(220px + env(safe-area-inset-bottom,0px));font-size:10px;max-width:92vw;white-space:normal}