/* Bandenkick – Oberfläche. Handy zuerst, hoch und quer. Keine Wischgesten, kein Zoom/Scrollen. */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #10251a;
  touch-action: none; overscroll-behavior: none; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #fff;
}
#c { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui button, #ui .hit { pointer-events: auto; }
button { font: inherit; color: inherit; touch-action: none; }

/* --- HUD oben --- */
.hud-top { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 8px); left: calc(env(safe-area-inset-left, 0px) + 10px);
  right: calc(env(safe-area-inset-right, 0px) + 10px); display: flex; align-items: flex-start; gap: 10px; }
.score { background: rgba(8, 20, 14, 0.62); border-radius: 12px; padding: 7px 12px; font-weight: 700; font-size: 18px; line-height: 1.15;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.score small { display: block; font-weight: 500; font-size: 12px; opacity: 0.85; }
.score .t0 { color: #ff8a3d; } .score .t1 { color: #6aa3ff; }
.holdbar { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 64px); width: 230px; margin-left: -115px; height: 22px; border-radius: 11px;
  background: rgba(8, 20, 14, .6); overflow: hidden; display: none; font-size: 12px; font-weight: 700; text-align: center; line-height: 22px; }
.holdbar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #d9ff3a, #ff6a3d); opacity: .55; }
.holdbar span { position: relative; }
#bShot .kw { display: none; font-weight: 800; font-size: 14px; }
body.kbox #bShot .mini, body.khold #bShot .mini { display: none; }
body.kbox #bShot .kw, body.khold #bShot .kw { display: block; }
body.kbox .tb#bShot, body.kbox .tb#bPass, body.khold .tb#bShot, body.khold .tb#bPass { border-color: #d9ff3a; background: rgba(40, 60, 10, .55); }
#bSwitch { width: 56px; height: 56px; font-size: 22px; }
body.solo #bSwitch { display: none; }
.kickinfo { background: rgba(8, 20, 14, 0.5); border-radius: 10px; padding: 6px 10px; font-size: 13px; line-height: 1.25; opacity: 0; transition: opacity .3s; max-width: 52vw; min-width: 0; flex: 0 1 auto; }
.score { flex: none; }
.kickinfo.on { opacity: 1; }
.spacer { flex: 1; }
.iconbtn { flex: none; width: 48px; height: 48px; border-radius: 14px; border: 0; background: rgba(8, 20, 14, 0.62); font-size: 22px; display: grid; place-items: center; }

/* --- Meldung (TOR!) --- */
.banner { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%) scale(0.8); font-size: 54px; font-weight: 900; letter-spacing: 2px;
  text-shadow: 0 3px 16px rgba(0,0,0,.55); opacity: 0; transition: opacity .25s, transform .25s; text-align: center; white-space: nowrap; }
.banner small { display: block; font-size: 18px; font-weight: 600; letter-spacing: 0; }
.banner.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
body.quer .banner { top: 21%; font-size: 46px; }

/* --- Touch-Steuerung --- */
#touch { position: absolute; inset: 0; display: none; }
body.touch #touch { display: block; }
body[data-mode="menu"] #touch, body[data-mode="load"] #touch { display: none; }
.stickzone { position: absolute; left: 0; bottom: 0; width: 50%; height: 62%; pointer-events: auto; touch-action: none; }
.stickbase { position: absolute; width: 132px; height: 132px; margin: -66px 0 0 -66px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); background: rgba(0,0,0,.14); pointer-events: none; transition: opacity .2s; opacity: .55; }
.stickbase.on { opacity: 1; }
.stickknob { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
  background: rgba(255,255,255,.8); box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.tb { position: absolute; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); background: rgba(10, 26, 18, .5);
  display: grid; place-items: center; font-weight: 800; font-size: 15px; pointer-events: auto; touch-action: none; padding: 0; }
.tb.down { background: rgba(255, 214, 90, .45); border-color: #ffe27a; }
.tb .lbl { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 700; text-shadow: 0 1px 4px #000; white-space: nowrap; }
#bShot { width: 100px; height: 100px; }
#bShot .mini { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #ddd 60%, #999); position: relative; box-shadow: inset 0 0 0 2px rgba(0,0,0,.25); }
#bShot .dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #e3342f; left: 50%; top: 50%; box-shadow: 0 0 0 2px #fff; }
/* Aufladering (beide Knöpfe): Farbe = Modus (--rc), Symbol in der Mitte; nach einem Tipp pulsiert der Rand kurz
   (Fenster für „tipp + halten“) */
.tb .ring { position: absolute; inset: -9px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(var(--rc, #ffd84a) calc(var(--p, 0) * 1turn), rgba(255,255,255,.12) 0); -webkit-mask: radial-gradient(circle, transparent calc(50% - 5px), #000 calc(50% - 4px)); mask: radial-gradient(circle, transparent calc(50% - 5px), #000 calc(50% - 4px)); opacity: 0; transition: opacity .12s; }
.tb.charging .ring { opacity: 1; }
.tb.armed .ring { opacity: 1; animation: armed .25s ease-out 1; }
@keyframes armed { from { opacity: 1; transform: scale(1.08); } to { opacity: .35; transform: scale(1); } }
.tb .sym { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); font-size: 30px; line-height: 1; text-align: center; pointer-events: none; color: var(--rc, #ffd84a); text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.tb.charging .pl, .tb.charging .mini { opacity: .25; }
body:not(.treffpunkt) #bShot .mini { display: none; }
body:not(.treffpunkt) #bShot::before { content: '⚽'; font-size: 30px; opacity: .9; }
body:not(.treffpunkt) #bShot.charging::before { opacity: 0; }
body.kbox #bShot::before, body.khold #bShot::before { content: ''; }
#bPass { width: 80px; height: 80px; }
.charge { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); width: 260px; height: 26px; margin-left: -130px; border-radius: 13px;
  background: rgba(0,0,0,.45); overflow: hidden; display: none; pointer-events: none; }
.charge i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; opacity: .8; }
.charge span { position: relative; display: block; text-align: center; font-size: 14px; font-weight: 800; line-height: 26px; text-shadow: 0 1px 3px #000; }
#bSprint { width: 66px; height: 66px; font-size: 13px; }

/* Hochformat */
body.hoch #bShot { right: calc(env(safe-area-inset-right, 0px) + 22px); bottom: calc(env(safe-area-inset-bottom, 0px) + 118px); }
body.hoch #bPass { right: calc(env(safe-area-inset-right, 0px) + 138px); bottom: calc(env(safe-area-inset-bottom, 0px) + 58px); }
body.hoch #bSprint { right: calc(env(safe-area-inset-right, 0px) + 30px); bottom: calc(env(safe-area-inset-bottom, 0px) + 262px); }
body.hoch #bSwitch { right: calc(env(safe-area-inset-right, 0px) + 150px); bottom: calc(env(safe-area-inset-bottom, 0px) + 178px); }
body.hoch .stickzone { height: 48%; }
/* Querformat */
body.quer #bShot { right: calc(env(safe-area-inset-right, 0px) + 26px); bottom: calc(env(safe-area-inset-bottom, 0px) + 44px); }
body.quer #bPass { right: calc(env(safe-area-inset-right, 0px) + 146px); bottom: calc(env(safe-area-inset-bottom, 0px) + 26px); }
body.quer #bSprint { right: calc(env(safe-area-inset-right, 0px) + 150px); bottom: calc(env(safe-area-inset-bottom, 0px) + 136px); }
body.quer #bSwitch { right: calc(env(safe-area-inset-right, 0px) + 36px); bottom: calc(env(safe-area-inset-bottom, 0px) + 166px); }
/* n7 (Peter 14.10.: „keine Sprintfunktion mehr“): ohne Sprint-Knopf rücken Schuss, Pass und Wechsel tiefer in den Daumenbogen
   unten rechts (hoch: Schuss 46 px tiefer, Pass 30 px tiefer, Wechsel zwischen Schuss und Pass; quer: der Sprint-Platz bleibt frei,
   Schuss/Pass/Wechsel liegen dort schon im Daumenbogen) */
body.sprintfrei #bSprint { display: none; }
body.sprintfrei.hoch #bShot { right: calc(env(safe-area-inset-right, 0px) + 24px); bottom: calc(env(safe-area-inset-bottom, 0px) + 72px); }
body.sprintfrei.hoch #bPass { right: calc(env(safe-area-inset-right, 0px) + 146px); bottom: calc(env(safe-area-inset-bottom, 0px) + 28px); }
body.sprintfrei.hoch #bSwitch { right: calc(env(safe-area-inset-right, 0px) + 156px); bottom: calc(env(safe-area-inset-bottom, 0px) + 136px); }

/* --- Karten (Start, Menü, Credits) --- */
.overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; padding: 16px; pointer-events: auto;
  background: linear-gradient(180deg, rgba(6,16,11,.35), rgba(6,16,11,.72)); overflow-y: auto; }
.overlay.on { display: flex; }
.card { background: rgba(12, 30, 21, 0.9); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 20px 20px 16px; width: min(520px, 100%);
  box-shadow: 0 10px 40px rgba(0,0,0,.45); max-height: 100%; overflow-y: auto; }
.card h1 { margin: 0 0 2px; font-size: 34px; letter-spacing: 1px; }
.card h2 { margin: 0 0 10px; font-size: 20px; }
.card .sub { opacity: .8; margin-bottom: 14px; font-size: 14px; }
.card p, .card li { font-size: 14px; line-height: 1.45; }
.card ul { padding-left: 18px; margin: 6px 0 12px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.btn { min-height: 48px; min-width: 48px; padding: 0 18px; border-radius: 14px; border: 0; background: #ffd84a; color: #1a1a1a; font-weight: 800; font-size: 17px; }
.btn.sec { background: rgba(255,255,255,.14); color: #fff; font-weight: 700; }
.small { font-size: 12px; opacity: .75; }
/* Knopf der Hilfekarte bleibt sichtbar, auch wenn die Karte (quer) rollt */
.card .row.stick { position: sticky; bottom: -16px; margin: 8px -20px -16px; padding: 10px 20px 12px; background: #0c1e15; border-radius: 0 0 18px 18px; }
.card a { color: #ffe27a; }
@media (orientation: landscape) and (max-height: 540px) {
  .card { padding: 12px 16px 10px; width: min(760px, 100%); }
  .card .row.stick { bottom: -10px; margin: 6px -16px -10px; padding: 8px 16px 10px; }
  .chbtn { min-height: 48px; padding: 4px 10px; font-size: 14px; }
  .chlist { gap: 6px; }
  /* Training quer: alle 9 Übungen ohne Rollen – Schütze zweispaltig, Torwart einspaltig */
  .card.wide:has(.trcols) { width: min(920px, 100%); }
  .trcols { grid-template-columns: 2fr 1fr; }
  .trcols .chlist[data-group="schuetze"] { display: grid; grid-template-columns: 1fr 1fr; }
  .trcols h3 { margin: 2px 0 4px; }
  table.gest { font-size: 12px; } table.gest th, table.gest td { padding: 3px 5px; }
  .card h1 { font-size: 24px; }
  .card .sub { margin-bottom: 6px; font-size: 13px; }
  .card p, .card li { font-size: 12.5px; line-height: 1.35; }
  .card .cols { display: grid; grid-template-columns: 1fr 1.25fr; gap: 0 18px; }
  .card .row { margin-top: 6px; }
}
body[data-mode="menu"] .hud-top, body[data-mode="credits"] .hud-top, body[data-mode="load"] .hud-top, body[data-mode="train"] .hud-top, body[data-mode="hint"] .hud-top, body[data-mode="help"] .hud-top { display: none; }
/* Schuss-Info unter der Anzeige statt daneben (Hochformat, lange Challenge-Zeile) */
body.hoch .kickinfo, body.challenge .kickinfo { position: absolute; top: calc(100% + 6px); left: 0; max-width: min(80vw, 560px); }
.hud-top { position: absolute; }
body[data-mode="train"] #touch, body[data-mode="hint"] #touch, body[data-mode="result"] #touch, body[data-mode="help"] #touch { display: none; }
/* Training */
.card.wide { width: min(760px, 100%); display: flex; flex-direction: column; }
.card.wide .cols2, .card.wide table.gest { flex: 0 1 auto; min-height: 0; }
.card.wide .cols2 { overflow-y: auto; }
.card h3 { margin: 4px 0 6px; font-size: 15px; opacity: .85; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.chlist { display: flex; flex-direction: column; gap: 8px; }
.chbtn { display: grid; grid-template-columns: 34px 1fr auto; grid-template-rows: auto auto; align-items: center; min-height: 52px; padding: 6px 12px;
  border: 0; border-radius: 14px; background: rgba(255,255,255,.1); color: #fff; text-align: left; font-weight: 700; font-size: 15px; }
.chbtn .ci { grid-row: 1 / 3; font-size: 22px; }
.chbtn .cs { color: #ffd84a; letter-spacing: 1px; font-size: 15px; }
.chbtn .cb { grid-column: 2 / 4; font-size: 11.5px; font-weight: 500; opacity: .75; }
.stars.big { font-size: 42px; color: #ffd84a; letter-spacing: 6px; text-align: center; margin: 4px 0; }
table.gest { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 4px 0 8px; }
table.gest th, table.gest td { padding: 5px 6px; border-bottom: 1px solid rgba(255,255,255,.12); text-align: left; vertical-align: top; }
table.gest th { font-size: 13px; opacity: .8; }
@media (max-width: 560px) { .cols2 { grid-template-columns: 1fr; } table.gest { font-size: 12.5px; } }
#dbg { position: absolute; left: 8px; bottom: 8px; font: 11px/1.3 ui-monospace, monospace; background: rgba(0,0,0,.5); padding: 4px 6px; border-radius: 6px; display: none; }
body.debug #dbg { display: block; }

/* --- Tor-Wiederholung (Nacht 2d): Kinobalken, Vignette, Blitz, Einblendungen; Steuerung und Anzeige ausgeblendet --- */
.replay { position: absolute; inset: 0; display: none; pointer-events: none; }
body.replaying .replay { display: block; }
body.replaying #touch, body.replaying .hud-top, body.replaying .banner, body.replaying .charge, body.replaying #hold { visibility: hidden; }
.replay .lb { position: absolute; left: 0; right: 0; height: 9%; background: #000; }
.replay .lb.t { top: 0; } .replay .lb.b { bottom: 0; }
body.hoch .replay .lb { height: 7%; }
.replay .vig { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%); }
.replay .flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.replay .rp-label { position: absolute; left: 4%; top: calc(9% + 12px); color: #fff; font-weight: 900; letter-spacing: 3px; font-size: 22px;
  text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.replay .rp-label b { display: inline-block; background: #ffd84a; color: #1a1a1a; padding: 3px 10px; border-radius: 6px; letter-spacing: 3px; }
.replay .rp-label span { display: block; margin-top: 6px; font-size: 16px; font-weight: 700; letter-spacing: 0.5px; }
body.hoch .replay .rp-label { top: calc(7% + 10px); font-size: 18px; }
.replay .fancam { position: absolute; right: 4%; top: calc(9% + 12px); display: none; color: #fff; font: 800 18px ui-monospace, Menlo, monospace;
  letter-spacing: 2px; background: rgba(0,0,0,.45); padding: 4px 10px; border-radius: 6px; }
.replay .fancam i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #ff3b30; margin-right: 8px; vertical-align: 1px;
  animation: rpblink 1s steps(2) infinite; }
.replay.fan .fancam { display: block; }
body.hoch .replay .fancam { top: auto; bottom: calc(7% + 12px); }
.replay .rp-skip { position: absolute; left: 50%; bottom: calc(9% + 10px); transform: translateX(-50%); color: #fff; opacity: .75; font-size: 14px; font-weight: 600;
  text-shadow: 0 1px 6px rgba(0,0,0,.7); }
body.hoch .replay .rp-skip { bottom: calc(7% + 10px); }
@keyframes rpblink { 50% { opacity: 0; } }

/* --- Verschönerung (Deko, ?deko=0 = ohne): TOR! springt auf und leuchtet in Mannschaftsfarbe, Sterne erscheinen nacheinander --- */
.stars.big i { font-style: normal; display: inline-block; }
body.deko .banner.tor { --glow: rgba(255, 128, 40, .95); text-shadow: 0 0 24px var(--glow), 0 0 8px var(--glow), 0 3px 16px rgba(0,0,0,.55); }
body.deko .banner.tor.t1 { --glow: rgba(70, 140, 255, .95); }
body.deko .banner.tor.on { animation: torpop .62s cubic-bezier(.18, 1.5, .4, 1) both; }
@keyframes torpop {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; letter-spacing: 22px; }
  55% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); letter-spacing: 2px; }
}
body.deko .stars.big i { animation: starpop .55s cubic-bezier(.2, 1.6, .4, 1) both; }
body.deko .stars.big i:nth-child(2) { animation-delay: .28s; }
body.deko .stars.big i:nth-child(3) { animation-delay: .56s; }
body.deko .stars.big i.voll { text-shadow: 0 0 16px rgba(255, 216, 74, .85); }
@keyframes starpop { 0% { transform: scale(0) rotate(-45deg); opacity: 0; } 70% { transform: scale(1.3) rotate(8deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@media (prefers-reduced-motion: reduce) { body.deko .banner.tor.on, body.deko .stars.big i { animation: none; } }
body:not(.deko) [data-act="licht"], body:not(.deko) .deko-only { display: none; }

/* --- n6 Fan-Edit der Tor-Wiederholung (TikTok-Stil): Texte mit Kontur und Einschlag-Animation, Speed-Lines, Schlag-Puls,
   Kontur um den Schützen, 9:16-Ausschnitt auf Querformat (body.cliphoch), „Clip nochmal“ --- */
.fe { position: absolute; inset: 0; display: none; }
.replay.edit .fe { display: block; }
.replay.edit .lb, .replay.edit .rp-label, .replay.edit .fancam, .replay.edit .rp-skip, .replay.edit > .flash { display: none; }
.fe-side { display: none; }
.fe-frame { position: absolute; inset: 0; overflow: hidden; container-type: size; }
body.cliphoch .fe-frame { inset: auto; top: 0; left: 50%; height: 100%; aspect-ratio: 9 / 16; translate: -50% 0; box-shadow: 0 0 0 100vmax rgba(6, 6, 8, .94); }
.fe-lines, .fe-puls, .fe-flash, .fe-fade { position: absolute; inset: 0; opacity: 0; will-change: opacity, transform; } /* eigene Ebenen: nur Deckkraft/Drehung je Bild, kein Neumalen */
.fe-lines { inset: -30%; background: center / cover no-repeat; } /* Strahlenkranz als Bild (hud.js malt ihn beim Laden) */
.fe-puls { background: radial-gradient(circle, rgba(255,255,255,.9) 30%, rgba(255,240,200,.5)); }
.fe-flash { background: #fff; }
.fe-fade { background: #000; }
.fe-frame > div:not(.fe-ring):not(.fe-prog) { position: absolute; left: 50%; translate: -50% -50%; opacity: 0; pointer-events: none; white-space: nowrap; line-height: 1; text-align: center;
  color: #fff; font-family: "Arial Black", "Segoe UI Black", Impact, "Helvetica Neue", system-ui, sans-serif; font-weight: 900;
  -webkit-text-stroke: .07em #000; paint-order: stroke fill; text-shadow: 0 .09em 0 #000; } /* ohne weiche Schatten: billig zu malen */
.fe-frame > div:not(.fe-ring):not(.fe-prog).an { opacity: 1; }
.fe-frame > div:not(.fe-ring):not(.fe-prog).go { animation: feslam .36s cubic-bezier(.2, 1.6, .35, 1) both; }
.fe-frame > div:not(.fe-ring):not(.fe-prog).go2 { animation: feslam2 .36s cubic-bezier(.2, 1.6, .35, 1) both; }
@keyframes feslam2 {
  0% { transform: translateY(var(--dy, 0)) scale(2.8) rotate(-12deg); opacity: 0; }
  40% { transform: translateY(var(--dy, 0)) scale(.88) rotate(3deg); opacity: 1; }
  70% { transform: translateY(var(--dy, 0)) scale(1.07) rotate(-2deg); }
  100% { transform: translateY(var(--dy, 0)) scale(1) rotate(var(--rot, -3deg)); opacity: 1; }
}
@keyframes feslam {
  0% { transform: translateY(var(--dy, 0)) scale(2.8) rotate(-12deg); opacity: 0; }
  40% { transform: translateY(var(--dy, 0)) scale(.88) rotate(3deg); opacity: 1; }
  70% { transform: translateY(var(--dy, 0)) scale(1.07) rotate(-2deg); }
  100% { transform: translateY(var(--dy, 0)) scale(1) rotate(var(--rot, -3deg)); opacity: 1; }
}
.fe-pov { top: 9%; font: 900 clamp(11px, 5.2cqmin, 34px)/1.2 system-ui, "Segoe UI", sans-serif !important; -webkit-text-stroke: .16em #000 !important;
  white-space: normal !important; width: 86%; letter-spacing: .01em; }
.fe-frame > .fe-pov.go, .fe-frame > .fe-pov.go2 { animation: none; }
.fe-pov span { display: inline-block; animation: fewort .22s cubic-bezier(.2, 1.6, .35, 1) both; }
.fe-pov span.hl { color: #ffe600; }
@keyframes fewort { 0% { transform: scale(1.8); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes fepov { 0% { transform: translateY(-30%); opacity: 0; } 100% { transform: none; opacity: 1; } }
.fe-big { top: 66%; font-size: 21cqmin; letter-spacing: .02em; line-height: .95; }
.fe-big.tech { color: var(--akzent, #ffe600); }
.fe-big.golazo { top: 27%; font-size: 32cqmin; color: var(--akzent, #ffe600); color: #fff; text-shadow: -.05em 0 #ff2e88, .05em 0 #20e3ff, 0 .09em 0 #000; }
.fe-kmh { top: 78%; font-size: 24cqmin; color: #20e3ff; font-variant-numeric: tabular-nums; }
.fe-big.warte { top: 74%; color: #fff; text-shadow: 0 .09em 0 #000, -.04em 0 #ff2e88, .04em 0 #20e3ff; }
.fe-stamp.wort { top: 40% !important; left: 50% !important; color: #20e3ff; }
.fe-kmh small { font-size: min(.4em, 6.5cqw) !important; letter-spacing: .06em !important; }
.fe-kmh small, .fe-name small { display: block; font-size: .4em; margin-top: .15em; color: #fff; letter-spacing: .12em; }
.fe-kmh.stempel { color: #ffe600; }
.fe-stamp { top: 26%; left: 76% !important; font-size: 26cqmin; color: var(--akzent, #ffe600); }
.fe-name { top: 66%; font-size: 22cqmin; color: #fff; text-shadow: 0 .09em 0 #000, .04em .04em 0 #ff8a28; }
.fe-gag { top: 87%; font: 800 clamp(13px, 4.6cqmin, 30px)/1.2 system-ui, "Segoe UI", sans-serif !important; -webkit-text-stroke: 0 !important; text-shadow: none !important;
  background: #fff; color: #111 !important; padding: .35em .6em; border-radius: .45em; white-space: normal !important; max-width: 84%; }
.fe-emoji { inset: 0; translate: none !important; left: 0 !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; font-size: 24cqmin; }
.fe-emoji i { position: absolute; font-style: normal; opacity: 0; }
.fe-emoji.go i { animation: feemo .9s cubic-bezier(.2, 1.4, .4, 1) both; }
.fe-emoji.go2 i { animation: feemo2 .9s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes feemo2 { 0% { transform: scale(0) rotate(-30deg); opacity: 0; } 30% { transform: scale(1.3) rotate(10deg); opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(-40%) scale(1) rotate(0); opacity: 0; } }
.fe-emoji i:nth-child(1) { left: 4%; top: 40%; } .fe-emoji i:nth-child(2) { left: 78%; top: 50%; animation-delay: .06s !important; }
.fe-emoji i:nth-child(3) { left: 70%; top: 20%; animation-delay: .12s !important; } /* am Rand: nicht über Gesichtern, unter der Bildunterschrift */
@keyframes feemo { 0% { transform: scale(0) rotate(-30deg); opacity: 0; } 30% { transform: scale(1.3) rotate(10deg); opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(-40%) scale(1) rotate(0); opacity: 0; } }
.fe-frame > .fe-emoji.an { animation: none; }
.fe-tag { top: auto !important; bottom: 4.5%; left: 5% !important; translate: none !important; opacity: .92 !important; text-align: left !important;
  font: 800 clamp(11px, 3.2cqmin, 20px)/1.3 system-ui, "Segoe UI", sans-serif !important; -webkit-text-stroke: 0 !important; text-shadow: 0 1px 4px rgba(0,0,0,.8) !important; }
.fe-tag small { display: block; font-weight: 600; opacity: .9; }
.fe-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.25); }
.fe-prog i { display: block; height: 100%; width: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }
.fe-spot { position: absolute; inset: 0; display: none; }
.replay.edit .vig { background: radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,.8) 100%); }
.fe-ring { position: absolute; display: none; translate: -50% -50%; border: max(3px, .7cqmin) solid #fff; border-radius: 50%;
  border-width: max(4px, 1cqmin); box-shadow: 0 0 22px #20e3ff, inset 0 0 22px #20e3ff, 0 0 4px #fff; animation: fering .3s cubic-bezier(.2, 1.6, .35, 1) both; }
.fe-ring.unten span { bottom: auto; top: 100%; translate: -50% 8px; }
.fe-ring.innen span { bottom: auto; top: 6%; translate: -50% 0; }
.fe-ring span { position: absolute; bottom: 100%; left: 50%; translate: -50% -8px; white-space: nowrap; background: #ffe600; color: #111; padding: .2em .55em; border-radius: .35em;
  font: 900 clamp(12px, 4cqmin, 26px)/1.1 "Arial Black", Impact, system-ui, sans-serif; }
@keyframes fering { 0% { transform: scale(2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
body.fevor:not(.replaying) .replay { display: block; opacity: .01; } /* Fan-Edit beim Tor unsichtbar vorbereiten */
body.fevor:not(.replaying) .replay > :not(.fe) { display: none; }
.fe-emoji img { width: 1em; height: 1em; display: block; }
/* n6 Action-Momente live (über dem Spielbild, unter der Bedienung) */
.am { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } /* immer angelegt (Ebenen schon gerastert), unsichtbar */
.am i { position: absolute; inset: 0; opacity: .001; will-change: opacity, transform; }
.am-vig { background: radial-gradient(ellipse at center, transparent 34%, rgba(0,0,0,.85) 100%); }
.am-lines { inset: -25% !important; background: center / cover no-repeat; }
.am-flash { background: #fff; }
body.aktion #touch { opacity: .4; transition: opacity .15s; } /* Knöpfe gedimmt, bleiben bedienbar */
.fe-warm { position: absolute; left: 0; top: 0; width: 120px; height: 120px; opacity: .002; pointer-events: none; overflow: hidden; }
.fe-warm i, .fe-warm b { position: absolute; inset: 10px; }
.fe-warm .w1 { background: radial-gradient(ellipse 40px 50px at 50% 50%, rgba(0,0,0,0) 78%, rgba(0,0,0,.42) 100%); }
.fe-warm .w2 { border: 4px solid #fff; border-radius: 50%; box-shadow: 0 0 22px #20e3ff, inset 0 0 22px #20e3ff, 0 0 4px #fff; }
.fe-warm b { font: 900 26px "Arial Black", Impact, sans-serif; color: #ffe600; -webkit-text-stroke: .07em #000; paint-order: stroke fill; text-shadow: -.05em 0 #ff2e88, .05em 0 #20e3ff, 0 .09em 0 #000; white-space: nowrap; }
/* Variante B je Tor: GOLAZO! im unteren Drittel, große Texte gleiten schräg von der Seite ein statt zu stempeln */
.fe.vb .fe-big.golazo { top: 60%; }
.fe.vb .fe-frame > div.fe-big.go, .fe.vb .fe-frame > div.fe-name.go { animation-name: fegleit; }
.fe.vb .fe-frame > div.fe-big.go2, .fe.vb .fe-frame > div.fe-name.go2 { animation-name: fegleit2; }
@keyframes fegleit { 0% { transform: translateX(-120%) skewX(-18deg); opacity: 0; } 60% { transform: translateX(6%) skewX(6deg); opacity: 1; } 100% { transform: translateY(var(--dy, 0)) rotate(var(--rot, -3deg)); opacity: 1; } }
@keyframes fegleit2 { 0% { transform: translateX(-120%) skewX(-18deg); opacity: 0; } 60% { transform: translateX(6%) skewX(6deg); opacity: 1; } 100% { transform: translateY(var(--dy, 0)) rotate(var(--rot, -3deg)); opacity: 1; } }
.fe-stamp.titel { top: 30% !important; color: var(--akzent, #ffe600); }
.fe-again, .clipagain { display: none; pointer-events: auto; border: 0; border-radius: 999px; background: rgba(255,255,255,.92); color: #111;
  font: 800 15px/1 system-ui, "Segoe UI", sans-serif; padding: 10px 16px; box-shadow: 0 4px 16px rgba(0,0,0,.4); cursor: pointer; }
.fe-again { position: absolute; right: 4%; top: 18%; }
.fe-again.on { display: block; }
.clipagain { position: absolute; right: 12px; top: 64px; z-index: 5; }
.tds { display: none; position: absolute; left: 50%; top: 64px; translate: -50% 0; z-index: 5; pointer-events: auto; border: 0; border-radius: 999px;
  background: #ffe600; color: #111; font: 900 16px/1 system-ui, "Segoe UI", sans-serif; padding: 12px 18px; box-shadow: 0 4px 16px rgba(0,0,0,.45); cursor: pointer; }
body.tordesspiels[data-mode="play"]:not(.replaying) .tds { display: block; }
body.clipnochmal[data-mode="play"]:not(.replaying) .clipagain { display: block; }
/* Querformat: Name unter den Schützen, nicht über seinen Körper */
body.quer:not(.cliphoch) .fe-name { top: 73%; }
body.quer:not(.cliphoch) .fe-gag { top: 93%; }
body.quer:not(.cliphoch) .fe-stamp.wort { top: 56% !important; }
/* Querformat: Varianten ohne Kollisionen (GOLAZO! oben, zweites Wort Mitte, Titel oben links neben der Bildunterschrift) */
body.quer:not(.cliphoch) .fe.vb .fe-big.golazo { top: 27%; }
body.quer:not(.cliphoch) .fe-stamp.wort.titel { top: 30% !important; left: 30% !important; font-size: min(13cqmin, 4.5cqw) !important; }