:root {
  --f: #9be15d;
  --f-dark: #2f5d1a;
  --r: #ff2d3d;
  --r-dark: #5c0a10;
  --ink: #f6f3ea;
  --muted: #b9b4a8;
  --panel: rgba(18, 17, 22, 0.82);
  --panel-line: rgba(255, 255, 255, 0.12);
  --stitch: rgba(155, 225, 93, 0.55);
  --radius: 18px;
  --font: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #121216; color: var(--ink); font-family: var(--font); overflow: hidden; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
#app, #stage { position: fixed; inset: 0; }
.game-canvas { display: block; width: 100%; height: 100%; }
kbd { display: inline-block; padding: 2px 7px; border-radius: 6px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); font-size: 0.85em; font-family: inherit; }

/* Bildschirme */
.screen { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 16px; z-index: 20; }
.screen.show { display: flex; }
#loading { background: radial-gradient(circle at 50% 40%, #232129 0%, #0d0c10 70%); flex-direction: column; gap: 22px; z-index: 50; }
#loading .bar { width: min(420px, 80vw); height: 10px; border-radius: 99px; background: rgba(255,255,255,0.08); overflow: hidden; border: 1px dashed var(--stitch); }
#loading .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--f), #ffd23f, var(--r)); transition: width .25s; }
#loading p { color: var(--muted); margin: 0; }

.logo { font-weight: 900; font-size: clamp(38px, 7vw, 64px); letter-spacing: 0.02em; line-height: 1; text-shadow: 0 4px 0 rgba(0,0,0,0.45); }
.logo.big { font-size: clamp(30px, 8.2vw, 104px); white-space: nowrap; }
.l-f { color: var(--f); -webkit-text-stroke: 2px var(--f-dark); }
.l-r { color: var(--r); -webkit-text-stroke: 2px var(--r-dark); }
.c-f { color: var(--f); } .c-r { color: var(--r); }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fine { color: rgba(246,243,234,0.45); font-size: 12px; margin-top: 26px; max-width: 460px; }

.btn { appearance: none; border: 2px solid rgba(255,255,255,0.14); background: rgba(24, 23, 30, 0.86); color: var(--ink); padding: 14px 18px; border-radius: 14px; font-weight: 800; font-size: 17px; cursor: pointer; text-align: left; transition: transform .08s, border-color .15s, background .15s; }
.btn:hover { border-color: var(--f); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(180deg, #b7f07a, var(--f)); color: #13240a; border-color: #d6ff9f; text-align: center; }
.btn.ghost { background: rgba(255,255,255,0.05); text-align: center; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid #ffd23f; outline-offset: 2px; }

.panel { background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--radius); padding: 22px; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; backdrop-filter: blur(10px); box-shadow: 0 30px 80px rgba(0,0,0,0.45); outline: 2px dashed rgba(155,225,93,0.25); outline-offset: -8px; }
.panel.wide { width: min(1080px, 100%); }
.panel h2 { margin: 0 0 6px; font-size: 26px; font-weight: 900; }
.hint { color: var(--muted); margin: 0 0 14px; font-size: 14px; }
.status { min-height: 1.2em; color: #ffd23f; font-weight: 700; }
.actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.actions .btn { min-width: 140px; }

/* Figurenwahl */
#select { background: rgba(8,8,12,0.25); align-items: flex-end; }
#select .panel { background: rgba(18,17,22,0.88); }
.teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: start; }
.team h3 { margin: 4px 0 10px; font-size: 16px; letter-spacing: .06em; }
.team-f h3 { color: var(--f); } .team-r h3 { color: var(--r); }
.vs { align-self: center; font-weight: 900; font-size: 28px; color: #ffd23f; text-shadow: 0 3px 0 rgba(0,0,0,.5); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.card { appearance: none; color: var(--ink); border: 2px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 10px; background: rgba(255,255,255,0.04); cursor: pointer; min-height: 118px; display: flex; flex-direction: column; gap: 4px; transition: border-color .15s, background .15s, transform .08s; }
.card:hover { transform: translateY(-2px); }
.card b { font-size: 16px; }
.card small { color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.card .ab { margin-top: auto; font-size: 12px; font-weight: 800; }
.team-f .card.sel { border-color: var(--f); background: rgba(155,225,93,0.14); }
.team-r .card.sel { border-color: var(--r); background: rgba(255,45,61,0.14); }
.team-f .card .ab { color: var(--f); } .team-r .card .ab { color: #ff7b86; }
.card.locked { opacity: 0.35; cursor: not-allowed; }
.select-options { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.select-options label, .form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 700; }
select, input[type=text], #join-code { background: #1e1d24; color: var(--ink); border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; padding: 10px 12px; }
#join-code { width: 100%; font-size: 28px; letter-spacing: .3em; text-transform: uppercase; text-align: center; font-weight: 900; }
.form { display: grid; gap: 14px; }
/* Optionsmenü mit Reitern (ESC im Spiel) */
.panel.options { width: min(620px, 100%); height: min(700px, calc(100vh - 32px)); display: flex; flex-direction: column; }
.panel.options .tabpage { flex: 1 1 auto; overflow: auto; align-content: start; }
.panel.options .actions { margin-top: auto; }
.tabs { display: flex; gap: 6px; margin: 10px 0 16px; border-bottom: 1px solid var(--panel-line); }
.tabs .tab { background: none; border: 0; color: var(--muted); font: inherit; font-weight: 800; font-size: 14px; padding: 8px 12px; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs .tab.on { color: var(--ink); border-bottom-color: var(--f); }
.tabs .tab:focus-visible { outline: 2px solid var(--f); outline-offset: 2px; }
.tabpage { display: none; }
.tabpage.on { display: grid; }
.form label .val { position: absolute; right: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.form label:has(.val) { position: relative; }
.form label.check { flex-direction: row; align-items: center; gap: 10px; color: var(--ink); }
input[type=range] { width: 100%; accent-color: var(--f); }
.keys { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; font-size: 14px; margin-bottom: 12px; }

/* Lobby */
.lobby-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px; }
.slots { display: grid; gap: 8px; align-content: start; }
.slot { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); }
.slot.f { border-left: 5px solid var(--f); } .slot.r { border-left: 5px solid var(--r); }
.slot .who { font-weight: 800; } .slot .what { color: var(--muted); font-size: 13px; margin-left: auto; }
.slot.empty .who { color: var(--muted); font-weight: 600; }
.invites { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; align-content: start; }
.invite { background: #fdf6e3; color: #1b1b1f; border-radius: 14px; padding: 10px; text-align: center; }
.invite img { width: 100%; max-width: 190px; aspect-ratio: 1; image-rendering: pixelated; display: block; margin: 0 auto; }
.invite b { display: block; margin-top: 6px; font-size: 13px; }
.invite .used { color: #2f5d1a; font-weight: 800; }
.invite button { margin-top: 6px; border: 0; background: #1b1b1f; color: #fff; border-radius: 8px; padding: 6px 10px; font-weight: 700; cursor: pointer; }
.codebox { font-size: 34px; font-weight: 900; letter-spacing: .25em; color: #ffd23f; }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud[hidden] { display: none; }
.scorebar { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: stretch; gap: 0; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.35)); }
.sb-team { display: flex; align-items: center; gap: 10px; padding: 6px 14px; font-weight: 900; }
.sb-team.f { background: linear-gradient(90deg, rgba(47,93,26,0.9), rgba(155,225,93,0.95)); border-radius: 12px 0 0 12px; color: #11200a; }
.sb-team.r { background: linear-gradient(90deg, rgba(255,45,61,0.95), rgba(92,10,16,0.9)); border-radius: 0 12px 12px 0; color: #fff; }
.sb-name { font-size: 12px; letter-spacing: .08em; }
.sb-score { font-size: 28px; min-width: 34px; text-align: center; }
.sb-mid { background: rgba(14,13,18,0.88); padding: 4px 16px; text-align: center; min-width: 120px; }
#hud-timer { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
#hud-round { font-size: 11px; color: var(--muted); font-weight: 700; }
#killfeed { position: absolute; top: 14px; right: 16px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.kf { background: rgba(14,13,18,0.8); padding: 6px 10px; border-radius: 10px; font-weight: 800; font-size: 13px; animation: kf 4.5s forwards; }
.kf .f { color: var(--f); } .kf .r { color: #ff6b77; } .kf .w { color: #ffd23f; font-weight: 700; margin: 0 6px; }
@keyframes kf { 0% { opacity: 0; transform: translateX(20px); } 8% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }
#crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#crosshair i { position: absolute; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,0.9); border-radius: 2px; }
#crosshair i:nth-child(1), #crosshair i:nth-child(2) { width: 2px; height: 9px; left: -1px; }
#crosshair i:nth-child(3), #crosshair i:nth-child(4) { height: 2px; width: 9px; top: -1px; }
#hitmarker { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; opacity: 0; }
#hitmarker::before, #hitmarker::after { content: ''; position: absolute; left: 12px; top: -2px; width: 2px; height: 30px; background: #fff; transform: rotate(45deg); box-shadow: 0 0 3px #000; }
#hitmarker::after { transform: rotate(-45deg); }
#hitmarker.head::before, #hitmarker.head::after { background: #ffd23f; }
#hitmarker.elim::before, #hitmarker.elim::after { background: var(--r); }
/* Treffer aufs Plüschschild: bläulich; Schildbruch: eigenes Sechseck-Symbol */
#hitmarker.shield::before, #hitmarker.shield::after, #hitmarker.break::before, #hitmarker.break::after { background: #7fd6ff; box-shadow: 0 0 4px #06406b; }
#hitmarker .hm-hex { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; display: none; overflow: visible; }
#hitmarker .hm-hex path { fill: none; stroke: #9be3ff; stroke-width: 2.6; stroke-linejoin: round; filter: drop-shadow(0 0 2px rgba(0,0,0,0.9)); }
#hitmarker .hm-hex .crack { stroke: #ffffff; stroke-width: 1.8; }
#hitmarker.break .hm-hex { display: block; animation: hmBreak .45s ease-out forwards; }
@keyframes hmBreak { from { transform: scale(0.7) rotate(-8deg); } to { transform: scale(1.35) rotate(6deg); } }
#dmg-ind { position: absolute; inset: 0; }
.di { position: absolute; left: 50%; top: 50%; width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%; border-top: 6px solid rgba(255,70,90,0.9); animation: di 1.1s forwards; }
.di.sh { border-top-color: rgba(120,210,255,0.95); }
@keyframes di { from { opacity: 1; } to { opacity: 0; } }
#banner { position: absolute; top: 22%; left: 0; right: 0; text-align: center; opacity: 0; transition: opacity .25s; }
#banner.show { opacity: 1; }
#banner-main { font-size: clamp(34px, 6vw, 64px); font-weight: 900; text-shadow: 0 4px 0 rgba(0,0,0,0.5); }
#banner-sub { font-size: 18px; font-weight: 800; color: #fff; margin-top: 6px; text-shadow: 0 2px 8px rgba(0,0,0,0.9); display: inline-block; background: rgba(14,13,18,0.55); padding: 4px 12px; border-radius: 10px; }
#banner-sub:empty { display: none; }
#prompt { position: absolute; top: 60%; left: 50%; transform: translateX(-50%); background: rgba(14,13,18,0.82); padding: 8px 14px; border-radius: 10px; font-weight: 800; display: none; }
.hud-bl { position: absolute; left: 16px; bottom: 16px; display: grid; gap: 8px; width: min(300px, 44vw); }
#hud-char { font-weight: 900; font-size: 15px; text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.6); }
/* Plüschschild über dem Lebenspunkte-Balken */
.shield { display: flex; align-items: center; gap: 8px; background: rgba(14,13,18,0.78); padding: 6px 10px; border-radius: 12px; }
.sh-ico { width: 18px; height: 18px; flex: none; }
.sh-ico path { fill: rgba(120,210,255,0.28); stroke: #8fdcff; stroke-width: 2; stroke-linejoin: round; }
.sh-bar { flex: 1; height: 9px; border-radius: 99px; background: rgba(120,200,255,0.12); overflow: hidden; position: relative; }
.sh-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #4fb8ff, #a6e6ff); box-shadow: 0 0 8px rgba(120,210,255,0.55); transition: width .15s; }
.sh-bar::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='17.32' viewBox='0 0 30 17.32'%3E%3Cpath d='M0 8.66L5 0H15L20 8.66L15 17.32H5ZM20 8.66H30' fill='none' stroke='%23e9f8ff' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / 12px 6.93px repeat; }
#sh-num { font-weight: 900; font-size: 17px; min-width: 44px; text-align: right; color: #aee6ff; font-variant-numeric: tabular-nums; }
.shield.regen .sh-bar i { animation: shPulse .8s ease-in-out infinite; }
.shield.regen .sh-ico path { animation: shIco .8s ease-in-out infinite; }
.shield.empty .sh-ico path { fill: none; stroke: rgba(143,220,255,0.4); stroke-dasharray: 4 3; }
.shield.empty #sh-num { color: rgba(174,230,255,0.45); }
.shield.hit { animation: shHit .35s ease-out; }
@keyframes shPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.55); box-shadow: 0 0 14px rgba(150,225,255,0.95); } }
@keyframes shIco { 0%, 100% { fill: rgba(120,210,255,0.28); } 50% { fill: rgba(170,235,255,0.85); } }
@keyframes shHit { from { background: rgba(120,200,255,0.5); } to { background: rgba(14,13,18,0.78); } }
.hp { display: flex; align-items: center; gap: 10px; background: rgba(14,13,18,0.78); padding: 8px 10px; border-radius: 12px; }
.hp-bar { flex: 1; height: 12px; border-radius: 99px; background: rgba(255,255,255,0.1); overflow: hidden; }
.hp-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff5f6d, #ffd23f 45%, var(--f)); transition: width .15s; }
#hp-num { font-weight: 900; font-size: 22px; min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
#ability { display: flex; align-items: center; gap: 10px; background: rgba(14,13,18,0.78); padding: 8px 10px; border-radius: 12px; }
#ability small { display: block; color: var(--muted); font-size: 12px; }
.ab-ring { position: relative; width: 38px; height: 38px; flex: none; }
.ab-ring svg { width: 38px; height: 38px; transform: rotate(-90deg); }
.ab-ring span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-size: 14px; }
.ab-bg { fill: none; stroke: rgba(255,255,255,0.12); stroke-width: 3.5; }
.ab-fg { fill: none; stroke: #ffd23f; stroke-width: 3.5; stroke-dasharray: 100 100; stroke-linecap: round; transition: stroke-dashoffset .1s; }
#ability.ready .ab-fg { stroke: var(--f); }
#ability.active .ab-fg { stroke: #7df9ff; }
.hud-br { position: absolute; right: 16px; bottom: 16px; text-align: right; display: grid; gap: 6px; justify-items: end; }
#weapon-name { font-weight: 900; font-size: 15px; }
.ammo { font-weight: 900; font-variant-numeric: tabular-nums; }
#ammo-mag { font-size: 40px; } .ammo .sep, #ammo-res { font-size: 20px; color: var(--muted); }
#nades { display: flex; gap: 6px; align-items: center; }
#nades kbd { font-size: 11px; margin-right: 2px; }
.nade { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.7); }
.nade.empty { border-style: dashed; border-color: rgba(255,255,255,0.28); }
#slots { display: flex; gap: 6px; font-size: 12px; font-weight: 800; color: #c9c5d3; }
#slots span { background: rgba(14,13,18,0.62); padding: 2px 7px; border-radius: 7px; }
#slots span.on { color: var(--ink); background: rgba(14,13,18,0.85); box-shadow: 0 0 0 1px rgba(255,255,255,0.35) inset; }
#slots span.gold { color: #f2c14e; text-shadow: 0 0 8px rgba(242,193,78,0.45); }
/* Fähigkeit (X) und Medikit (Q) nebeneinander */
.hud-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#medkit { display: flex; align-items: center; gap: 10px; background: rgba(14,13,18,0.78); padding: 8px 10px; border-radius: 12px; }
#medkit small { display: block; color: var(--muted); font-size: 12px; }
.med-ico { position: relative; width: 38px; height: 38px; flex: none; border-radius: 10px; background: #e63946; display: grid; place-items: center; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25); }
.med-ico::before, .med-ico::after { content: ''; position: absolute; background: #fff; border-radius: 2px; }
.med-ico::before { width: 18px; height: 6px; } .med-ico::after { width: 6px; height: 18px; }
.med-ico span { position: absolute; right: -6px; bottom: -6px; min-width: 18px; height: 18px; border-radius: 9px; background: #111; color: #fff; font-size: 11px; font-weight: 900; display: grid; place-items: center; z-index: 1; border: 1px solid rgba(255,255,255,0.3); }
#medkit.empty .med-ico { filter: grayscale(1) brightness(0.55); }
#medkit.active { box-shadow: 0 0 0 2px #8fd13f inset; }
#stance { justify-self: start; font-size: 12px; font-weight: 800; color: #d7f5c2; background: rgba(14,13,18,0.7); padding: 4px 10px; border-radius: 99px; }
#protect { position: absolute; top: 96px; left: 50%; transform: translateX(-50%); display: none; font-weight: 900; font-size: 14px; color: #bfe9ff; background: rgba(14,13,18,0.72); padding: 6px 14px; border-radius: 99px; }
#heal-ring { position: absolute; left: 50%; top: 50%; width: 86px; height: 86px; margin: -43px 0 0 -43px; display: none; pointer-events: none; }
#heal-ring svg { width: 86px; height: 86px; transform: rotate(-90deg); }
#heal-ring span { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 6px; font-weight: 900; font-size: 12px; color: #d7f5c2; text-shadow: 0 1px 4px #000; }
.hr-bg { fill: none; stroke: rgba(255,255,255,0.15); stroke-width: 3; }
.hr-fg { fill: none; stroke: #8fd13f; stroke-width: 3; stroke-dasharray: 100 100; stroke-linecap: round; }
/* Respawn-Countdown nach dem Einfärben */
#respawn { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); display: none; text-align: center; pointer-events: none; }
#respawn .rs-by { font-weight: 800; font-size: 16px; color: #ffd6da; text-shadow: 0 2px 8px rgba(0,0,0,0.6); }
#respawn .rs-num { font-weight: 900; font-size: 96px; line-height: 1; color: #fff; text-shadow: 0 4px 22px rgba(0,0,0,0.65); font-variant-numeric: tabular-nums; }
#respawn .rs-sub { font-weight: 800; font-size: 13px; color: var(--muted); }
#fps { position: absolute; left: 16px; top: 14px; font-size: 12px; color: var(--muted); font-weight: 700; }
#paint-overlay { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; background-repeat: no-repeat; }
#flash-overlay { position: absolute; inset: 0; background: #fffef6; opacity: 0; }
#flash-overlay.soft { background: #3b3547; }
#vignette { position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle, rgba(0,0,0,0) 45%, rgba(170,0,20,0.55) 100%); transition: opacity .3s; }
/* Eigenes Schild getroffen: kurz aufblitzendes Sechseckraster am Bildrand */
#shield-overlay { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 50%, rgba(110,205,255,0.42) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='17.32' viewBox='0 0 30 17.32'%3E%3Cpath d='M0 8.66L5 0H15L20 8.66L15 17.32H5ZM20 8.66H30' fill='none' stroke='%239be3ff' stroke-width='0.9'/%3E%3C/svg%3E") 0 0 / 64px 36.95px repeat;
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 42%, #000 92%); mask-image: radial-gradient(ellipse at center, transparent 42%, #000 92%); }
#shield-overlay.break { background-color: rgba(190,236,255,0.18); }
#scoreboard { position: absolute; top: 90px; left: 50%; transform: translateX(-50%); width: min(620px, 94vw); background: rgba(14,13,18,0.9); border-radius: 16px; padding: 14px; display: none; }
#scoreboard table { width: 100%; border-collapse: collapse; font-weight: 700; }
#scoreboard td, #scoreboard th { padding: 6px 8px; text-align: left; }
#scoreboard th { color: var(--muted); font-size: 12px; }
#scoreboard tr.f td:first-child { border-left: 4px solid var(--f); } #scoreboard tr.r td:first-child { border-left: 4px solid var(--r); }
#buymenu, #pause { position: absolute; inset: 0; z-index: 5; display: none; align-items: center; justify-content: center; padding: 16px; pointer-events: auto; background: rgba(6,6,9,0.35); }
#buymenu.show, #pause.show { display: flex; }
.buy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
#buymenu .panel { display: flex; flex-direction: column; overflow: hidden; }
#buymenu .buy-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
#buymenu .actions { flex: none; margin-top: 12px; }
.buy-item { border: 2px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 10px; background: rgba(255,255,255,0.04); cursor: pointer; text-align: left; color: var(--ink); }
.buy-item.sel { border-color: #ffd23f; background: rgba(255,210,63,0.12); }
.buy-item .sw { display: flex; gap: 3px; margin: 6px 0; }
.buy-item .sw i { width: 12px; height: 12px; border-radius: 50%; }
.buy-item small { color: var(--muted); display: block; font-size: 11.5px; }
.buy-item .cat { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: #ffd23f; }
#buy-timer { color: #ffd23f; }
#toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: rgba(14,13,18,0.92); padding: 10px 16px; border-radius: 12px; font-weight: 800; z-index: 60; opacity: 0; transition: opacity .25s; pointer-events: none; }
#toast.show { opacity: 1; }
#end { background: rgba(8,8,12,0.6); }
#end-stats table { width: 100%; border-collapse: collapse; margin-top: 10px; }
#end-stats td, #end-stats th { padding: 8px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.08); }

/* Touch-Steuerung und Handy-HUD: src/ui/touch.css */
/* Handy: keine Tastenkappen */
.touch-on .ab-ring span, .is-touch .card .key { display: none; }

@media (max-width: 820px) {
  .teams { grid-template-columns: 1fr; }
  .vs { justify-self: center; }
  .lobby-grid { grid-template-columns: 1fr; }
  .keys { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card { min-height: 96px; padding: 8px; }
  .card small { display: none; }
  .scorebar { top: 6px; transform: translateX(-50%) scale(0.86); }
  #killfeed { top: 64px; }
  #banner { top: 16%; }
  #banner-main { font-size: 30px; }
  #banner-sub { font-size: 12.5px; max-width: 92vw; }
  #prompt { top: 64%; font-size: 12.5px; max-width: 90vw; text-align: center; }
  .hud-bl { width: 48vw; gap: 5px; left: 10px; bottom: 10px; }
  .hp { padding: 5px 8px; } #hp-num { font-size: 16px; min-width: 32px; }
  .shield { padding: 4px 8px; } #sh-num { font-size: 14px; min-width: 32px; } .sh-ico { width: 14px; height: 14px; }
  #ability, #medkit { padding: 5px 8px; } #ability small, #medkit small { font-size: 10.5px; }
  .hud-row { grid-template-columns: 1fr; }
  #respawn .rs-num { font-size: 64px; }
  .hud-br { right: 10px; bottom: 10px; }
  #ammo-mag { font-size: 26px; } #weapon-name { font-size: 12px; }
  #slots { display: none; }
}
@media (max-height: 520px) {
  .panel { padding: 14px; }
  .card { min-height: 80px; }
}
/* Handy quer: Auswahlfeld rechts, die gewählte Figur steht links daneben (Kamera rechnet mit dem freien Streifen) */
@media (max-height: 520px) and (orientation: landscape) {
  #select { justify-content: flex-end; align-items: center; padding: 8px; }
  #select .panel { width: min(58vw, 560px); max-height: calc(100vh - 16px); padding: 10px 12px; }
  #select h2 { font-size: 18px; margin: 0 0 4px; }
  #select-hint { display: none; }
  #select .teams { grid-template-columns: 1fr; gap: 4px; }
  #select .vs { justify-self: center; font-size: 15px; line-height: 1; }
  #select .team h3 { margin: 0 0 4px; font-size: 12px; }
  #select .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  #select .card { min-height: 46px; padding: 5px 6px; gap: 2px; }
  #select .card b { font-size: 13px; }
  #select .card small { display: none; }
  #select .card .ab { font-size: 11px; }
  #select .select-options { margin-top: 6px; gap: 8px; }
  #select .actions { margin-top: 8px; }
  #select .actions .btn { min-width: 110px; padding: 9px 14px; font-size: 15px; }
}
/* Handy: Figurenwahl kompakt, damit die gewählte Figur über dem Auswahlfeld frei steht */
@media (max-width: 820px) {
  #select { padding: 10px; }
  #select .panel { padding: 14px 14px 12px; max-height: 62vh; }
  #select h2 { font-size: 20px; margin: 0 0 6px; }
  #select-hint { display: none; }
  #select .teams { gap: 6px; }
  #select .team h3 { margin: 2px 0 6px; font-size: 13px; }
  #select .vs { font-size: 18px; }
  #select .card { min-height: 60px; padding: 6px; }
  #select .card b { font-size: 14px; }
  #select .select-options { margin-top: 10px; gap: 10px; }
  #select .actions { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .kf, .di { animation-duration: 0.01s; }
  .shield.regen .sh-bar i, .shield.regen .sh-ico path { animation: none; }
  .btn, .card { transition: none; }
}

/* Multiplayer lobby and round-only highscore. */
.lobby-config { display:flex; flex-wrap:wrap; gap:12px; margin:12px 0; }
.lobby-config label { flex:1; min-width:130px; font-size:13px; }
.lobby-config select,.slot select { display:block; width:100%; min-height:44px; margin-top:5px; }
#lobby-slots { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.lobby-team { min-width:0; } .lobby-team h3 { font-size:15px; }
.lobby-team .slot { display:flex; flex-direction:column; gap:6px; margin:8px 0; padding:12px; }
.lobby-team button,.invite button { min-height:44px; border:1px solid #ffffff30; border-radius:8px; background:#303544; color:#fff; font:inherit; padding:7px 12px; cursor:pointer; }
.lobby-team button:hover,.invite button:hover { background:#485167; }
.lobby-team button:focus-visible,.invite button:focus-visible { outline:2px solid var(--f); outline-offset:2px; }
.invite img { max-width:180px; height:auto; } .invite small { display:block; margin-top:8px; }
.score-scroll { overflow-x:auto; max-width:100%; }
.score-scroll table { width:100%; border-collapse:collapse; }
.score-scroll th,.score-scroll td { padding:9px 10px; text-align:left; white-space:nowrap; border-bottom:1px solid #ffffff19; }
.score-scroll small { display:block; font-size:11px; opacity:.7; }
.score-scroll tr.f td:first-child { border-left:3px solid #9be15d; }
.score-scroll tr.r td:first-child { border-left:3px solid #ff2d3d; }
.score-rules { font-size:12px; line-height:1.5; color:#c9c9d1; }
#scoreboard { width:min(900px,94vw); max-height:80vh; overflow:auto; }
#end .panel { width:min(1050px,96vw); } #end .actions { flex-wrap:wrap; }
@media(max-width:700px) { .lobby-grid { display:flex; flex-direction:column; } #lobby-slots { gap:7px; } .lobby-team .slot { padding:8px; } .score-scroll th,.score-scroll td { padding:8px 6px; } .lobby-config label { min-width:42%; } }

.game-legal { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:10px; font-size:12px; } .game-legal a { color:#d4d4dd; min-height:24px; }

/* Wet ink: the backing wipes on first, lettering lands a beat later. */
#streak-callout { position:absolute; top:22%; left:50%; transform:translateX(-50%) rotate(-3deg); width:max-content; max-width:90vw; pointer-events:none; z-index:3; }
.ink-swipe,#banner-main,.ink-title { position:relative; isolation:isolate; text-align:center; }
.ink-swipe { padding:22px 42px 28px; color:#161623; }
.ink-swipe::before,#banner-main::before,.ink-title::before { content:""; position:absolute; inset:0 -8px; z-index:-1; background:linear-gradient(167deg,#f8ff96 0%,#c9fc52 54%,#79da32 100%); clip-path:polygon(1% 21%,8% 13%,4% 7%,35% 9%,53% 2%,75% 9%,96% 3%,92% 17%,100% 21%,96% 48%,100% 73%,91% 78%,97% 91%,64% 89%,47% 98%,23% 91%,5% 97%,9% 80%,0 78%,4% 56%); }
.ink-swipe::after { content:"";position:absolute;inset:13% -22px;z-index:-2;background:radial-gradient(ellipse at 2% 20%,#e4ff76 0 4px,transparent 5px),radial-gradient(ellipse at 97% 74%,#c9fc52 0 8px,transparent 9px),radial-gradient(ellipse at 91% 7%,#e4ff76 0 4px,transparent 5px); }
.ink-swipe strong { display:block;font-size:clamp(27px,4.3vw,57px);line-height:1.05;font-weight:950;letter-spacing:-.045em;font-style:italic;text-transform:uppercase;text-shadow:1px 2px #efffc2; }
.ink-tag { display:block;font:800 10px/1.4 system-ui;letter-spacing:.22em;margin-bottom:7px; }
.ink-line { display:block;font-size:clamp(12px,1.5vw,17px);font-weight:800;margin-top:9px; }
.ink-enter .ink-swipe::before,.ink-enter#banner #banner-main::before,.ink-title.ink-enter::before { animation:ink-wipe .43s cubic-bezier(.17,.8,.22,1) both; }
.ink-enter .ink-swipe::after { animation:ink-splatter .45s .12s both; }
.ink-enter .ink-swipe strong,.ink-enter .ink-tag,.ink-enter .ink-line { animation:ink-letter .5s cubic-bezier(.18,1.4,.3,1) both; }
.ink-enter .ink-line { animation-delay:.1s; }.ink-enter .ink-tag { animation-delay:.05s; }
#banner-main { display:inline-block;padding:14px 36px 20px;color:#171923!important;text-shadow:none;font-style:italic;letter-spacing:-.045em; }
#banner-sub { display:block;width:fit-content;max-width:90vw;margin:8px auto 0;font-size:14px; }
#banner.ink-enter #banner-main,.ink-title.ink-enter { animation:ink-letter .48s cubic-bezier(.18,1.4,.3,1) both; }
.ink-title { display:table;max-width:95%;margin:0 auto 24px;padding:18px 35px 24px;font-size:clamp(26px,4vw,48px);font-style:italic;color:#161623; }
.ink-title span { color:inherit!important; }
@keyframes ink-wipe { 0% {transform:translateX(-28%) skewX(-22deg) scaleY(.3);clip-path:inset(0 100% 0 0);} 60% {clip-path:inset(0 0 0 0);transform:translateX(2%) skewX(5deg) scaleY(1.15);} 100% {transform:translateX(0) skewX(0) scaleY(1);} }
@keyframes ink-letter { 0% {opacity:0;transform:translate(75px,12px) rotate(9deg) scale(.85);} 60% {opacity:1;transform:translate(-3px,-2px) rotate(-2deg) scale(1.025);} 100% {opacity:1;transform:none;} }
@keyframes ink-splatter { from {opacity:0;transform:scale(.6);} to {opacity:1;transform:scale(1);} }

/* A ranked match sheet, with team race, personal row and a shared-winner crown. */
#scoreboard { top:75px;width:min(970px,95vw);max-height:calc(100vh - 95px);padding:0;border:1px solid #69708555;border-radius:18px;background:#11151eee;box-shadow:0 25px 90px #0009;pointer-events:auto; }
#end .panel { background:radial-gradient(ellipse at 90% 0,#baf34516,transparent 45%),#11151ef5;border:1px solid #747d9255; }
.score-shell { padding:20px 24px 14px; }
.score-hero { display:flex;align-items:center;gap:16px;margin-bottom:20px;min-width:0; }
.score-crown { color:#d9ff76;font-size:42px;line-height:1;transform:rotate(-10deg);text-shadow:0 0 22px #bcff3030; }
.score-hero>div:nth-child(2) { flex:1;min-width:0; }.score-hero h3 { margin:5px 0 0!important;font-size:clamp(22px,3vw,32px);line-height:1.1;overflow-wrap:anywhere;letter-spacing:-.03em;color:#f5f5ef; }
.score-eyebrow { font-size:9px;letter-spacing:.2em;font-weight:800;color:#c6ed78; }
.score-hero-value { font-size:42px;font-weight:900;letter-spacing:-.05em;color:#d9ff76;line-height:1;text-align:right;font-variant-numeric:tabular-nums; }
.score-hero-value small { display:block;font-size:9px;letter-spacing:.15em;margin-top:6px; }
.score-race { display:flex;justify-content:space-between;position:relative;gap:10px;padding-bottom:13px;margin-bottom:12px;font-size:10px;letter-spacing:.12em;color:#b8c2d6; }
.score-race b { color:white;font-size:15px;letter-spacing:0;margin:0 5px; }.score-race i { position:absolute;bottom:0;left:0;width:100%;height:4px;border-radius:3px;background:linear-gradient(to right,#bdf573 var(--lead),#ff6684 var(--lead)); }
.score-scroll:focus-visible { outline:2px solid #d9ff76;outline-offset:3px; }
.score-scroll table { font-variant-numeric:tabular-nums;min-width:650px; }
.score-scroll th,#scoreboard th { font-size:9px;letter-spacing:.10em;text-transform:uppercase;color:#acb8cc;padding:11px 10px; }
.score-scroll td,#scoreboard td { padding:13px 10px;border-bottom:1px solid #9aa8c215;font-size:14px; }
.score-scroll tr { --team:#bdf573; }.score-scroll tr.r { --team:#ff6684; }
.score-scroll tr.is-me { background:#bdf57309; }.score-scroll tr.is-king { background:linear-gradient(90deg,#dcff7d16,transparent); }
.score-rank { font-size:15px;font-weight:800;color:#8090aa; }.is-king .score-rank { color:#e0ff9e; }
.score-player b { display:inline-block;max-width:230px;white-space:normal;overflow-wrap:anywhere; }.score-player small { margin-top:4px;letter-spacing:.03em;color:#b5bed0;opacity:1;font-size:10px; }
.score-player em { font-style:normal;font-size:8px;letter-spacing:.05em;margin-left:6px;padding:3px 4px;border:1px solid #c9d3e533;border-radius:3px;color:#d9e2f4; }
.score-points { position:relative;min-width:85px; }.score-points b { font-size:19px;color:#eff6ff; }.score-points i { display:block;margin-top:4px;width:var(--progress);height:2px;background:var(--team);max-width:65px;transition:width .3s; }
.score-streak { display:inline-grid;place-items:center;min-width:25px;height:25px;color:#d4dbe9;border-radius:5px;background:#ffffff08; }.score-streak.is-hot { color:#ffe9b5;background:#ff9c1c25;box-shadow:inset 0 0 0 1px #ffb75845; }
.score-multi { font-weight:850;color:#d9ff76; }.score-rules { margin:14px 0 0;font-size:11px;color:#adb9cc;line-height:1.55; }
#end-stats { margin-top:10px; }#end-stats .score-shell { padding:16px 0; }
#end .actions .btn { border-radius:8px;min-height:46px; }.lobby-team .slot { background:linear-gradient(115deg,#ffffff08,transparent);border:1px solid #95a8cb26;border-radius:10px; }
@media(max-width:700px) { .score-shell {padding:15px 12px 12px;}.score-hero {gap:10px;}.score-crown {font-size:30px;}.score-hero-value {font-size:32px;}.ink-swipe {padding:18px 22px 24px;}#streak-callout {top:20%;}.ink-title {padding:14px 16px 20px;}.score-player b {max-width:180px;} }
@media(prefers-reduced-motion:reduce) { .ink-enter *,.ink-enter::before,.ink-enter::after,.ink-enter *::before,.ink-enter *::after,#banner.ink-enter #banner-main,.ink-title.ink-enter {animation:none!important;}.score-points i {transition:none;} }

.ink-swipe::before,#banner-main::before,.ink-title::before { clip-path:none;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 180' preserveAspectRatio='none'%3E%3Cpath d='M27 29Q4 25 11 44L32 52Q8 56 5 68L35 74Q0 85 17 97L35 100Q2 120 26 129L45 132Q10 151 38 156L109 153Q141 168 187 158L312 164Q388 153 440 162L586 151Q615 161 641 149L744 149Q784 154 778 137L748 131Q796 123 790 112L768 101Q808 88 784 78L762 69Q801 56 781 45L741 42Q784 19 751 22L626 29Q580 17 523 25L375 21Q298 30 253 22L129 28Q91 19 61 30Z'/%3E%3Cellipse cx='791' cy='149' rx='6' ry='4'/%3E%3Cellipse cx='10' cy='151' rx='5' ry='3'/%3E%3C/svg%3E") center/100% 100% no-repeat;background:repeating-linear-gradient(176deg,transparent 0 8px,#fff4 9px,transparent 10px 24px),linear-gradient(167deg,#f8ff96,#c9fc52 54%,#79da32); }
#scoreboard { background:#11151efb; }
#end .panel { display:flex;flex-direction:column; }
#end-title,#end-score,#end .actions { flex-shrink:0; }
#end-title { margin:0 auto 12px; }
#end-stats { min-height:0;overflow:auto; }
#end .actions { margin-top:10px;padding-top:10px;border-top:1px solid #b5c3d928; }
#scoreboard { animation:score-reveal .22s ease-out both; }
#end.show .score-shell { animation:score-sheet .3s .06s ease-out both; }
@keyframes score-reveal { from {opacity:0;transform:translate(-50%,12px) scale(.985);} to {opacity:1;transform:translate(-50%,0) scale(1);} }
@keyframes score-sheet { from {opacity:0;transform:translateY(12px);} to {opacity:1;transform:none;} }
@media(prefers-reduced-motion:reduce) { #scoreboard,#end.show .score-shell {animation:none;} }