/* Spielbildschirm: WebGL-Fläche + HUD */
.screen-game { background: #120c08; cursor: crosshair; }
.gl-wrap { position: absolute; inset: 0; }
.gl-wrap canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.hud { position: absolute; inset: 0; pointer-events: none; overflow: hidden; font-family: var(--font-ui); }
.game-menu-btn { position: absolute; z-index: 20; right: 10px; top: 10px; background: rgba(12,8,6,.55); border: 1px solid var(--line-2); backdrop-filter: blur(4px); }
.game-fs-btn { position: absolute; z-index: 20; right: 10px; bottom: 10px; background: rgba(12,8,6,.55); border: 1px solid var(--line-2); backdrop-filter: blur(4px); opacity: .75; }
.game-fs-btn:hover { opacity: 1; }

/* Spielerleiste */
.hud-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: flex-start; justify-content: center; gap: 10px; padding: 10px 56px 0 12px; flex-wrap: wrap; }
.hud-roundinfo { display: flex; flex-direction: column; align-items: center; padding: 6px 14px; border-radius: 12px; background: rgba(12,8,6,.62); border: 1px solid var(--line-2); backdrop-filter: blur(4px); font: 700 13px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.hud-roundinfo b { font: 800 15px var(--font-display); color: var(--gold-2); letter-spacing: .14em; }
.plate { --pc: #888; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 120px; padding: 6px 14px 7px; border-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 22%, rgba(12,8,6,.82)), rgba(12,8,6,.82)); border: 1px solid color-mix(in srgb, var(--pc) 60%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--pc) 25%, transparent); transition: opacity .3s, filter .3s; }
.plate.dead { opacity: .55; filter: grayscale(.6); }
.plate.gone { opacity: .3; }
.plate-name { font: 800 16px var(--font-ui); letter-spacing: .06em; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.6); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pips { display: flex; gap: 5px; }
.pips i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--pc) 70%, #fff 10%); background: transparent; }
.pips i.on { background: var(--pc); box-shadow: 0 0 10px var(--pc); }

/* Namensschilder über den Köpfen */
.hud-tags { position: absolute; inset: 0; }
.tag { --pc: #888; position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; font: 800 14px var(--font-ui); letter-spacing: .05em; color: #fff; text-shadow: 0 0 6px #000, 0 1px 2px #000; transition: opacity .2s; will-change: transform; white-space: nowrap; }
.tag span { padding: 1px 8px; border-radius: 99px; background: color-mix(in srgb, var(--pc) 55%, rgba(0,0,0,.55)); border: 1px solid color-mix(in srgb, var(--pc) 80%, transparent); }
.tag.me span { box-shadow: 0 0 10px var(--pc); }
.hpbar { width: 54px; height: 5px; border-radius: 4px; background: rgba(0,0,0,.6); overflow: hidden; opacity: 0; }
.hpbar b { display: block; height: 100%; background: linear-gradient(90deg, #d4363a, #ff7a5a); }

/* Kill-Feed, Hinweise, Tastenhilfe */
.hud-feed { position: absolute; right: 12px; top: 64px; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; max-width: 46vw; }
.feed-row { padding: 5px 12px; border-radius: 10px; background: rgba(12,8,6,.7); border: 1px solid var(--line); font: 600 15px var(--font-ui); color: var(--text-2); animation: feedIn .3s var(--ease); transition: opacity .5s, transform .5s; }
.feed-row.out { opacity: 0; transform: translateX(14px); }
.feed-row .nm { font-weight: 800; }
@keyframes feedIn { from { opacity: 0; transform: translateX(16px); } }
.hud-hint { position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%); padding: 9px 20px; border-radius: 99px; background: rgba(12,8,6,.78); border: 1px solid var(--line-3); color: var(--gold-2); font: 800 16px var(--font-ui); letter-spacing: .06em; white-space: nowrap; }
.hud-keys { position: absolute; left: 12px; bottom: 12px; display: grid; grid-template-columns: repeat(3, auto); gap: 3px 16px; padding: 8px 12px; border-radius: 12px; background: rgba(12,8,6,.55); border: 1px solid var(--line); font: 600 13px var(--font-ui); color: var(--text-2); }
.hud-keys kbd { display: inline-block; min-width: 24px; padding: 0 6px; margin-right: 3px; text-align: center; border-radius: 5px; border: 1px solid var(--line-3); background: rgba(228,174,69,.12); color: var(--text); font: 700 12px var(--font-ui); }
@media (max-width: 820px) { .hud-keys { display: none; } }

/* Banner */
.banner { position: absolute; z-index: 15; left: 0; right: 0; top: 30%; display: flex; justify-content: center; align-items: center; gap: .3em; text-align: center; pointer-events: none;
  font: 900 clamp(34px, 8vh, 86px)/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: #fff3d6; text-shadow: 0 4px 0 rgba(60,20,0,.8), 0 0 40px rgba(228,174,69,.6); opacity: 0; transform: scale(1.25); }
.banner.show { animation: bannerIn .5s var(--ease) both; }
.banner.fight { color: #ffd6c9; text-shadow: 0 4px 0 rgba(80,0,0,.8), 0 0 50px rgba(224,59,59,.8); }
.banner.win { font-size: clamp(26px, 6vh, 60px); }
.banner.final, .banner.ready { font-size: clamp(28px, 6vh, 64px); }
@keyframes bannerIn { from { opacity: 0; transform: scale(1.6); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }

/* Laden */
.loading { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, #2c1d12, #0c0806 75%); }
.loading-box { width: min(86vw, 420px); text-align: center; }
.loading-title { font: 800 20px var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 16px; }
.loading-bar { height: 10px; border-radius: 6px; background: rgba(255,255,255,.08); border: 1px solid var(--line-2); overflow: hidden; }
.loading-bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--blood), var(--gold)); transition: width .2s; }
.loading-text { margin-top: 8px; color: var(--text-3); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }

/* Endtafel */
.end-overlay { position: absolute; inset: 0; z-index: 25; display: grid; place-items: center; background: rgba(8,5,3,.72); backdrop-filter: blur(6px); cursor: default; }
.end-card { width: min(94vw, 720px); padding: 26px 28px 22px; border-radius: 22px; background: linear-gradient(180deg, rgba(46,33,23,.95), rgba(18,12,8,.96)); border: 1px solid var(--line-3); box-shadow: 0 0 80px rgba(228,174,69,.18), 0 30px 80px rgba(0,0,0,.8); text-align: center; animation: bannerIn .5s var(--ease) both; }
.end-head { font: 900 clamp(26px, 5vh, 44px)/1.1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-2); text-shadow: 0 0 30px rgba(228,174,69,.5); }
.end-head b { margin-left: .3em; }
.end-sub { margin: 6px 0 14px; color: var(--text-3); font: 700 13px var(--font-ui); letter-spacing: .24em; text-transform: uppercase; }
.end-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.end-table th { font: 700 12px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); padding: 6px 8px; }
.end-table td { padding: 9px 8px; font: 700 18px var(--font-ui); border-top: 1px solid var(--line); }
.end-table tr { --pc: #888; }
.end-table td.pl { width: 40px; color: var(--pc); font-family: var(--font-display); }
.end-table td.nm { text-align: left; color: var(--pc); font-weight: 800; }
.end-table tr.first td { background: color-mix(in srgb, var(--pc) 10%, transparent); }
.end-wait { color: var(--text-2); font-weight: 600; }
.hud-top.many .plate { min-width: 72px; padding: 4px 8px 5px; } .hud-top.many .plate-name { font-size: 13px; max-width: 92px; }