/* Spiel-HUD: Kämpferkarten, Banner, Hinweise, Pause, Ergebnis */
#screen-game { background: #000; z-index: 3; }
#game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud > * { pointer-events: none; }
.pause-btn { position: absolute; left: 12px; top: 10px; pointer-events: auto !important; opacity: .75; }

.hud-cards { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 98vw; }
.hcard { position: relative; width: 168px; padding: 6px 10px 7px; background: linear-gradient(180deg, rgba(14,16,26,.88), rgba(10,11,18,.9)); border: 1px solid #2f3550; border-top: 3px solid var(--c, #888); border-radius: 4px; transform: skewX(-6deg); transition: opacity .3s; }
.hcard > * { transform: skewX(6deg); }
.hcard.dead { opacity: .45; } .hcard.me { box-shadow: 0 0 0 1px rgba(255,255,255,.5); }
.hcard .hn { display: flex; align-items: center; gap: 6px; font-family: var(--font-h); font-weight: 900; font-style: italic; font-size: 14px; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.hcard .hn i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); border: 2px solid #0b0b12; flex: none; }
.hcard .hn em { font-style: normal; font-size: 10px; background: var(--tc, transparent); color: #0b0b12; padding: 0 5px; border-radius: 2px; margin-left: auto; font-weight: 900; }
.bar { position: relative; height: 9px; margin-top: 4px; background: #0b0c12; border: 1px solid #000; overflow: hidden; border-radius: 1px; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; transition: width .08s linear; }
.bar > i.trail { background: #fff; opacity: .85; transition: width .6s ease-out .35s; }
.bar.hp > i.val { background: linear-gradient(180deg, #ff5a4a, #c8261a); } .bar.hp > i.val.low { background: linear-gradient(180deg, #ff2a2a, #8a0f0f); animation: blink .6s infinite; }
.bar.st { height: 6px; } .bar.st > i.val { background: linear-gradient(180deg, #ffd54a, #e0a010); } .bar.st.ex > i.val { background: #8a7a30; }
.pips { display: flex; gap: 4px; margin-top: 5px; min-height: 12px; }
.pip { width: 11px; height: 11px; background: var(--c); border: 2px solid #0b0b12; transform: rotate(45deg) scale(.8); } .pip.lost { background: #2a2f44; }
.star { color: var(--accent2); font-size: 14px; line-height: 12px; text-shadow: 0 1px 0 #000; }

.banner { position: absolute; left: 0; right: 0; top: 28%; text-align: center; font-family: var(--font-h); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(54px, 11vw, 150px); line-height: 1; color: #fff; text-shadow: 0 6px 0 #000, 0 0 40px rgba(255,74,46,.7); -webkit-text-stroke: 3px #0b0b12; paint-order: stroke fill; animation: bannerIn .35s cubic-bezier(.2,1.4,.4,1); letter-spacing: .02em; }
.banner.fight { color: var(--accent2); font-size: clamp(70px, 15vw, 200px); }
.banner small { display: block; font-size: .28em; letter-spacing: .15em; color: #ffd8b0; text-shadow: 0 3px 0 #000; -webkit-text-stroke: 1px #0b0b12; margin-top: 8px; }
@keyframes bannerIn { from { transform: scale(2.4); opacity: 0; } }
.announce { position: absolute; left: 50%; top: 106px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ann { font-family: var(--font-h); font-weight: 900; font-style: italic; font-size: 20px; text-transform: uppercase; padding: 4px 18px; background: rgba(10,11,18,.85); border-left: 4px solid var(--accent2); animation: pop .15s; text-shadow: 0 2px 0 #000; }

.hint-box { position: absolute; left: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 14px; background: rgba(10,11,18,.78); border: 1px solid #2f3550; border-radius: 6px; font-size: 12px; font-weight: 700; }
.hint-box .hr { display: grid; grid-template-columns: 96px 1fr; gap: 8px; align-items: center; min-height: 28px; } .hint-box .hr > span:first-child { display: flex; gap: 2px; align-items: center; }
.ctx-hints { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 72vw; }
.ctx { display: flex; align-items: center; gap: 8px; padding: 6px 14px 14px; background: rgba(10,11,18,.84); border: 1px solid #3a4160; border-bottom: 3px solid var(--accent); border-radius: 4px; font-weight: 800; font-size: 13px; animation: pop .15s; }
.netinfo { position: absolute; right: 12px; top: 10px; font: 700 12px/1.3 var(--font); color: #cfd3e0; background: rgba(10,11,18,.7); padding: 4px 10px; border-radius: 4px; text-align: right; }
.input-display { position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%); display: flex; gap: 5px; align-items: center; opacity: .95; }
.input-display .ib { min-width: 30px; height: 26px; padding: 0 6px; display: grid; place-items: center; border-radius: 4px; background: #1c2030; border: 2px solid #3a4160; font-weight: 900; font-size: 11px; color: #7a8098; }
.input-display .ib.on { background: var(--accent); border-color: #ffb090; color: #fff; }

.overlay { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(5,6,10,.78); backdrop-filter: blur(4px); pointer-events: auto; padding: 14px; overflow: hidden; }
.pause-box { min-width: min(420px, 90vw); text-align: center; } .pause-box h2 { font-size: 40px; margin-bottom: 6px; }
.pause-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; align-items: stretch; }
.result-box { width: min(920px, 96vw); max-height: 94vh; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.result-box h2 { font-size: clamp(30px, 6vw, 58px); text-align: center; color: var(--accent2); text-shadow: 0 4px 0 #000; }
.result-box .sub { text-align: center; }
.rtable { overflow: auto; min-height: 0; }
.rrow { display: grid; grid-template-columns: 50px minmax(120px, 1.4fr) repeat(6, minmax(48px, 1fr)); gap: 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid #262b40; font-weight: 700; font-size: 14px; }
.rrow.h { font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--dim); text-transform: uppercase; position: sticky; top: 0; background: #151824; z-index: 1; }
.rrow.win { background: linear-gradient(90deg, rgba(255,194,26,.18), transparent); } .rrow .pl { display: flex; align-items: center; gap: 8px; min-width: 0; } .rrow .pl i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #0b0b12; flex: none; } .rrow .pl span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place { font-family: var(--font-h); font-weight: 900; font-style: italic; font-size: 24px; color: var(--accent2); }
.result-btns { display: flex; justify-content: center; gap: 14px; margin-top: 4px; }
@media (max-width: 760px) { .hcard { width: 124px; } .hint-box { display: none; } .rrow { grid-template-columns: 34px minmax(80px, 1.4fr) repeat(3, 1fr); } .rrow > :nth-child(n+6) { display: none; } }
@media (max-height: 520px) { .hcard { padding: 3px 8px 4px; } .banner { top: 18%; } .hint-box { display: none; } }

/* Touch-Steuerung (nur auf Touch-Geräten im Kampf) */
.touch { position: absolute; inset: 0; pointer-events: none; user-select: none; touch-action: none; }
.touch > * { pointer-events: auto; touch-action: none; }
.t-stick { position: absolute; left: max(18px, env(safe-area-inset-left)); bottom: 22px; width: 132px; height: 132px; border-radius: 50%; background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.25); }
.t-knob { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: rgba(255,255,255,.35); border: 2px solid rgba(255,255,255,.6); transition: transform .04s; }
.t-btn { position: absolute; width: 56px; height: 56px; border-radius: 50%; border: 2px solid rgba(0,0,0,.6); font: 900 20px var(--font-h); color: #0b0b12; opacity: .8; padding: 0; }
.t-btn.on { opacity: 1; transform: scale(1.12); filter: brightness(1.2); }
.t-btn.face { background: #aaa; right: max(20px, env(safe-area-inset-right)); bottom: 22px; }
.t-btn.a { background: #4cc85a; right: 96px; bottom: 56px; } .t-btn.x { background: #3d8cf0; right: 156px; bottom: 22px; }
.t-btn.y { background: #f0c224; right: 96px; bottom: 120px; } .t-btn.b { background: #e8493c; right: 36px; bottom: 56px; }
.t-btn.sh { width: 64px; height: 38px; border-radius: 10px; background: #4a4f60; color: #fff; font-size: 14px; top: 96px; }
.t-btn.lb { right: 150px; } .t-btn.rb { right: 80px; } .t-btn.lt { right: 150px; top: 140px; } .t-btn.rt { right: 80px; top: 140px; }
.t-btn.aux { width: 46px; height: 46px; background: #3a3f55; color: #fff; font-size: 18px; }
.t-btn.jump { left: 164px; bottom: 100px; } .t-btn.sprint { left: 164px; bottom: 44px; }
@media (max-height: 520px) { .t-stick { width: 112px; height: 112px; bottom: 14px; } .t-btn { width: 48px; height: 48px; font-size: 17px; } .t-btn.a { right: 80px; bottom: 44px; } .t-btn.x { right: 134px; bottom: 14px; } .t-btn.y { right: 80px; bottom: 98px; } .t-btn.b { right: 28px; bottom: 44px; } .t-btn.sh { top: 62px; height: 34px; width: 56px; } .t-btn.lb { right: 130px; } .t-btn.rb { right: 66px; } .t-btn.lt { right: 130px; top: 100px; } .t-btn.rt { right: 66px; top: 100px; } .t-btn.jump { left: 140px; bottom: 74px; } .t-btn.sprint { left: 140px; bottom: 22px; } }