/* =====================================================================
   Ki-Krieger Arena – Oberfläche
   Tokens aus Ki-Krieger (Nacht-Palette, Bangers + Nunito), damit beide Spiele zusammengehören.
   Signatur: die Ki-Leiste als Flamme unter dem Porträt (lädt, pulsiert gold bei VOLL) – im Strahlen-Duell der Kraft-Balken.
   ===================================================================== */
@font-face { font-family: 'Bangers'; src: url('fonts/Bangers.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('fonts/Nunito.woff2') format('woff2'); font-weight: 200 1000; font-style: normal; font-display: swap; }

:root {
  --nacht: #0E1A3A; --nacht-2: #182A4A; --violett: #5B2A86; --ki: #4FC3FF; --ki-dunkel: #1E8FD0; --gold: #FFC93C; --orange: #FF7A1A;
  --rot: #FF5A5A; --gruen: #5CFF8A; --creme: #F6F0DC; --kohle: #1B2430; --kohle-2: #2E3A4E; --weiss: #FFFDF7;
  --schrift-display: 'Bangers', 'Impact', 'Arial Black', system-ui, sans-serif;
  --schrift-text: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rand: clamp(12px, 3.5vw, 26px); --luft: clamp(8px, 2.2vh, 22px); --radius: 22px; --schatten: 0 6px 0 rgba(14, 26, 58, .5);
  --sicher-hoehe: calc(env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
  --himmel: linear-gradient(180deg, #5FB0E8 0%, #F7D7A8 62%, #F2C48C 100%);
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; height: 100%; }
body {
  margin: 0; min-height: 100dvh; overflow: hidden; font-family: var(--schrift-text); color: var(--kohle);
  background: var(--himmel); background-color: var(--nacht);
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none; touch-action: none; user-select: none; -webkit-user-select: none;
}
input, textarea { -webkit-user-select: text !important; user-select: text !important; }
[hidden] { display: none !important; }
#welt { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#ui { position: fixed; pointer-events: none; top: env(safe-area-inset-top, 0px); right: env(safe-area-inset-right, 0px); bottom: env(safe-area-inset-bottom, 0px); left: env(safe-area-inset-left, 0px); }
.schirm { pointer-events: auto; }
.schirm--mitte { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; background: radial-gradient(ellipse at 50% 30%, #2A3F72, var(--nacht) 70%); box-shadow: 0 0 0 200px var(--nacht); }
.schirm--dialog { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: var(--rand); background: rgba(7, 13, 34, .55); box-shadow: 0 0 0 200px rgba(7, 13, 34, .55); }

/* ---------- Knöpfe ---------- */
.knopf {
  font-family: var(--schrift-display); font-size: clamp(1.1rem, 2.4vh + .4rem, 1.5rem); letter-spacing: .06em; color: var(--kohle); background: var(--ki);
  border: 3px solid var(--kohle); border-radius: 999px; padding: .5em 1.4em; min-height: 46px; min-width: 46px; box-shadow: var(--schatten); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; line-height: 1.1; max-width: 100%;
  transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.knopf:hover { background: #7FD6FF; }
.knopf:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(14, 26, 58, .5); }
.knopf:focus-visible, .kk:focus-visible, .chip:focus-visible, .karte:focus-visible { outline: 4px solid var(--weiss); outline-offset: 2px; }
.knopf--gross { font-size: clamp(1.4rem, 3.2vh + .5rem, 2.1rem); padding: .4em 1.4em; flex-direction: column; gap: 0; }
.knopf--gross small { font-family: var(--schrift-text); font-weight: 800; font-size: .46em; letter-spacing: .04em; text-transform: uppercase; opacity: .78; }
.knopf--ki { background: linear-gradient(180deg, #8FDCFF, var(--ki)); }
.knopf--gold { background: linear-gradient(180deg, #FFE08A, var(--gold)); }
.knopf--violett { background: linear-gradient(180deg, #9A6BD0, var(--violett)); color: var(--creme); }
.knopf--leise { background: var(--creme); }
.knopf--rund { width: 46px; height: 46px; padding: 0; border-radius: 50%; background: var(--creme); }
.knopf--rund svg { width: 24px; height: 24px; fill: currentColor; }
.knopf--klein { width: 42px; height: 42px; min-width: 42px; min-height: 42px; }
.knopf[disabled] { opacity: .45; cursor: default; transform: none; }
.knopf[aria-pressed="false"] .ton-wellen { display: none; }

/* ---------- Laden ---------- */
.laden__titel, .titel { font-family: var(--schrift-display); letter-spacing: .04em; margin: 0; line-height: .9; text-align: center; color: var(--creme);
  font-size: clamp(2.6rem, 9vw, 5.4rem); text-shadow: 0 4px 0 var(--kohle), 0 0 24px rgba(79, 195, 255, .6); -webkit-text-stroke: 2px var(--kohle); }
.laden__titel span, .titel span { color: var(--gold); display: block; font-size: 1.25em; }
.laden__balken { width: min(70vw, 340px); height: 14px; border: 3px solid var(--kohle); border-radius: 99px; background: var(--nacht-2); overflow: hidden; }
.laden__balken i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ki), var(--gold)); transition: width .2s; }
.laden__text { margin: 0; color: var(--creme); font-weight: 800; }

/* ---------- Start ---------- */
.start { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: var(--rand); overflow-y: auto; }
.start__kopf { margin-top: max(1dvh, calc(6dvh - var(--sicher-hoehe))); text-align: center; }
.untertitel { margin: .4em 0 0; font-family: var(--schrift-display); font-size: clamp(1.1rem, 2.6vh, 1.5rem); letter-spacing: .08em; color: var(--creme); text-shadow: 0 2px 0 var(--kohle); }
.start__knoepfe { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: var(--luft); width: min(100%, 560px); }
.start__knoepfe > .knopf--gross { width: 100%; }
.start__doppel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--luft); width: 100%; }
.start__doppel .knopf--gross { width: 100%; font-size: clamp(1.15rem, 2.4vh + .45rem, 1.6rem); padding: .4em .6em; }
.start__reihe { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.start__fuss { margin-top: var(--luft); width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.muenzen { display: inline-flex; align-items: center; gap: .4em; font-family: var(--schrift-display); font-size: 1.2rem; letter-spacing: .05em; color: var(--kohle); background: var(--creme); border: 3px solid var(--kohle); border-radius: 999px; padding: .2em .9em .2em .5em; box-shadow: var(--schatten); }
.ico-muenze { width: 1.1em; height: 1.1em; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF2B0, var(--gold) 55%, #C99418); border: 2px solid var(--kohle); }
.rechtliches { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; font-weight: 800; font-size: .85rem; }
.rechtliches a { color: var(--creme); text-shadow: 0 2px 0 var(--kohle); text-decoration: none; padding: 10px 4px; }
@media (max-width: 30rem) { .start__fuss { flex-wrap: wrap; } .rechtliches { order: 9; flex-basis: 100%; } }

/* ---------- Tafel (Kämpferwahl) ---------- */
.tafel { position: absolute; inset: 0; display: flex; flex-direction: column; background: rgba(14, 26, 58, .55); box-shadow: 0 0 0 200px rgba(14, 26, 58, .55); }
.tafel__kopf { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; align-items: center; gap: 10px; padding: var(--rand) var(--rand) 8px; }
.tafel__kopf h2 { margin: 0; text-align: center; font-family: var(--schrift-display); font-weight: 400; letter-spacing: .05em; color: var(--creme); font-size: clamp(1.5rem, 4vh, 2.2rem); text-shadow: 0 3px 0 var(--kohle); }
.wahl { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--rand) var(--rand); display: flex; flex-direction: column; gap: var(--luft); align-items: center; }
.wahl__karten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: min(100%, 860px); }
@media (max-width: 40rem) { .wahl__karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.karte { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 12px; border: 3px solid var(--kohle); border-radius: 18px; background: var(--creme); box-shadow: var(--schatten); cursor: pointer; text-align: left; font: inherit; color: inherit; min-width: 0; }
.karte--aktiv { background: linear-gradient(180deg, #FFF3C4, #FFE08A); transform: translateY(-3px); }
.karte--zu { filter: grayscale(.7); opacity: .8; }
.karte__farbe { height: 54px; border-radius: 12px; border: 2px solid var(--kohle); display: grid; place-items: center; font-family: var(--schrift-display); font-size: 1.9rem; color: var(--creme); text-shadow: 0 2px 0 var(--kohle); -webkit-text-stroke: 1px var(--kohle); }
.karte__name { font-family: var(--schrift-display); font-size: 1.35rem; letter-spacing: .04em; }
.karte__text { font-size: .78rem; font-weight: 700; line-height: 1.25; margin: 0; }
.karte__werte { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 6px; font-size: .68rem; font-weight: 800; align-items: center; }
.karte__werte i { height: 6px; border-radius: 9px; background: var(--kohle-2); overflow: hidden; }
.karte__werte i b { display: block; height: 100%; background: var(--ki-dunkel); }
.karte__schloss { position: absolute; inset: auto 8px 8px auto; font-family: var(--schrift-display); font-size: .95rem; background: var(--kohle); color: var(--gold); border-radius: 99px; padding: .1em .6em; }
.wahl__einstellungen { display: flex; flex-direction: column; gap: 8px; width: min(100%, 860px); }
.wahl__zeile { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); align-items: center; gap: 8px; }
.wahl__label { font-family: var(--schrift-display); letter-spacing: .05em; font-size: 1.1rem; color: var(--creme); text-shadow: 0 2px 0 var(--kohle); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-family: var(--schrift-display); letter-spacing: .04em; font-size: 1rem; background: var(--creme); color: var(--kohle); border: 2.5px solid var(--kohle); border-radius: 999px; padding: .3em .9em; min-height: 40px; cursor: pointer; }
.chip.aktiv { background: var(--gold); }
.chip[disabled] { opacity: .45; cursor: default; }
#btn-los { width: min(100%, 420px); }

/* ---------- HUD ---------- */
.hud { position: absolute; inset: 0; pointer-events: none; }
.hud__oben { position: absolute; left: var(--rand); right: var(--rand); top: 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: start; }
.hud__team { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hud__team--rechts { align-items: flex-end; }
.leiste { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 6px; align-items: center; width: min(100%, 300px); pointer-events: auto; cursor: pointer; }
.hud__team--rechts .leiste { grid-template-columns: minmax(0, 1fr) 40px; }
.hud__team--rechts .leiste .portraet { order: 2; }
.leiste--ziel .portraet { box-shadow: 0 0 0 3px var(--gold), 0 0 12px var(--gold); }
.leiste--ko { opacity: .45; }
.portraet { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--kohle); display: grid; place-items: center; font-family: var(--schrift-display); font-size: 1.2rem; color: var(--creme); text-shadow: 0 2px 0 var(--kohle); }
.balken { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.balken__name { font-family: var(--schrift-display); letter-spacing: .05em; font-size: .9rem; color: var(--creme); text-shadow: 0 2px 0 var(--kohle); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud__team--rechts .balken__name { text-align: right; }
.hp { position: relative; height: 13px; border: 2.5px solid var(--kohle); border-radius: 99px; background: var(--kohle-2); overflow: hidden; }
.hp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #8CFF9E, #2FCF5A); transition: width .15s; }
.hp u { position: absolute; inset: 0 auto 0 0; background: #FFD0D0; transition: width .6s .25s; }
.hp.mittel i { background: linear-gradient(180deg, #FFE98A, #F2B829); }
.hp.wenig i { background: linear-gradient(180deg, #FF9A9A, #E23B3B); }
.hud__team--rechts .hp i, .hud__team--rechts .hp u { inset: 0 0 0 auto; }
/* Signatur: Ki-Flamme */
.ki { position: relative; height: 9px; border-radius: 99px; background: rgba(14, 26, 58, .7); border: 2px solid var(--kohle); overflow: visible; }
.ki i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, #1E8FD0, var(--ki), #BFF0FF); box-shadow: 0 0 8px var(--ki); }
.ki.voll i { background: linear-gradient(90deg, #FFB000, var(--gold), #FFF4C2); box-shadow: 0 0 12px var(--gold); animation: puls .5s ease-in-out infinite alternate; }
.ki em { position: absolute; right: -2px; top: -15px; font-style: normal; font-family: var(--schrift-display); font-size: .78rem; letter-spacing: .05em; color: var(--gold); text-shadow: 0 2px 0 var(--kohle); }
.hud__team--rechts .ki i { inset: 0 0 0 auto; }
.geist { height: 4px; border-radius: 9px; background: rgba(14, 26, 58, .6); overflow: hidden; }
.geist i { display: block; height: 100%; background: linear-gradient(90deg, #FF8A3D, #FFD84A); }
@keyframes puls { to { filter: brightness(1.35); } }
.hud__mitte { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hud__uhr { font-family: var(--schrift-display); font-weight: 400; font-size: clamp(1.8rem, 5vh, 2.6rem); line-height: 1; color: var(--creme); -webkit-text-stroke: 1.5px var(--kohle); text-shadow: 0 3px 0 var(--kohle); min-width: 2.2em; text-align: center; }
.hud__uhr.knapp { color: var(--rot); }
.hud__combo { font-family: var(--schrift-display); letter-spacing: .05em; font-size: 1.3rem; color: var(--gold); -webkit-text-stroke: 1px var(--kohle); text-shadow: 0 2px 0 var(--kohle); animation: comboPop .25s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes comboPop { from { transform: scale(1.6); } to { transform: scale(1); } }
.hud__pause { position: absolute; right: var(--rand); bottom: calc(var(--rand) + 4px); pointer-events: auto; }
/* Kampfknöpfe */
/* Knopf-Bogen unten rechts: Ultimate groß in der Ecke, Spezial links daneben, Spezial 2 und Fliegen darüber, Super links außen */
.hud__knoepfe { position: absolute; right: calc(var(--rand) + 54px); bottom: var(--rand); display: grid; grid-template-columns: auto auto auto; grid-template-rows: auto auto;
  grid-template-areas: ". sp2 flug" "super sp ult"; align-items: end; justify-items: center; gap: 10px 12px; }
/* Update 5: Technik-Knöpfe (.tk – eigener Präfix; .karte ist die Kämpferwahl, .kk der Flug-Knopf). Füllring = Anteil der nötigen Ki (--fuell),
   Kugel-Punkte zeigen volle/fehlende Kugeln, „bereit" leuchtet. */
.tk { --fuell: 0; --tk-farbe: var(--ki); pointer-events: auto; position: relative; padding: 0; border: 3px solid var(--kohle); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  text-align: center; cursor: pointer; box-shadow: var(--schatten); color: var(--kohle); font-family: var(--schrift-display); letter-spacing: .03em; transition: filter .2s; }
.tk__ring { position: absolute; inset: -8px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(var(--tk-farbe) calc(var(--fuell) * 360deg), rgba(14, 26, 58, .55) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); }
.tk__symbol svg { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* Flex statt Grid: im Grid schrumpft die Spalte bei overflow:hidden auf 0 → „KI…“ */
.tk__name { font-size: .7rem; line-height: 1.05; max-width: 94%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk__kugeln { font-family: var(--schrift-text); font-weight: 900; font-size: .66rem; letter-spacing: .06em; line-height: 1; }
.tk--spezial { width: 66px; height: 66px; --tk-farbe: #4FC3FF; background: radial-gradient(circle at 35% 30%, #CFF3FF, var(--ki) 60%, var(--ki-dunkel)); }
.tk--spezial2 { width: 60px; height: 60px; --tk-farbe: #C9A2FF; background: radial-gradient(circle at 35% 30%, #F0E2FF, #B98CFF 60%, var(--violett)); }
.tk--ult { width: 86px; height: 86px; --tk-farbe: var(--gold); background: radial-gradient(circle at 35% 30%, #FFF4C2, var(--gold) 55%, #E09A12); }
.tk--ult .tk__name { font-size: .92rem; }
.tk--ult .tk__symbol svg { width: 26px; height: 26px; }
.tk--super { width: 60px; height: 60px; --tk-farbe: #FFFFFF; --fuell: 1; background: radial-gradient(circle at 35% 30%, #FFF7D0, #FFD84A 50%, #FF8A3D); animation: puls .45s ease-in-out infinite alternate; }
.tk:not(.bereit):not(.tk--super) { filter: saturate(.5) brightness(.88); }
.tk.bereit { box-shadow: 0 0 0 2px #FFFFFF, 0 0 18px var(--tk-farbe), var(--schatten); }
.tk--ult.bereit { animation: ultBereit .6s ease-in-out infinite alternate; }
.tk--ult.mega { background: radial-gradient(circle at 35% 30%, #FFFFFF, #FFE98A 45%, var(--gold) 80%); box-shadow: 0 0 0 3px #FFFFFF, 0 0 30px #FFE98A; }
.tk--ult.konter { box-shadow: 0 0 0 4px var(--rot), 0 0 26px var(--rot); }
.tk.nein { animation: tkNein .32s ease-in-out; }
.tk:active { transform: scale(.93); }
@keyframes tkNein { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
/* Ki-Leiste in drei Kugeln (Rillen bei 1/3 und 2/3) */
.ki::before, .ki::after { content: ''; position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--kohle); z-index: 1; }
.ki::before { left: 33.333%; } .ki::after { left: 66.667%; }
#btn-verwandeln { grid-area: super; } #btn-spezial { grid-area: sp; } #btn-spezial2 { grid-area: sp2; } #btn-fliegen { grid-area: flug; } #btn-ultimate { grid-area: ult; }
.kk { pointer-events: auto; border: 3px solid var(--kohle); border-radius: 50%; display: grid; place-content: center; text-align: center; cursor: pointer; box-shadow: var(--schatten); font-family: var(--schrift-display); letter-spacing: .04em; color: var(--kohle); padding: 0; touch-action: manipulation; }
.kk span { font-size: .95rem; line-height: 1; }
.kk small { font-family: var(--schrift-text); font-weight: 900; font-size: .62rem; }
.kk--spezial { width: 66px; height: 66px; background: radial-gradient(circle at 35% 30%, #CFF3FF, var(--ki) 60%, var(--ki-dunkel)); }
.kk--ult { width: 84px; height: 84px; background: radial-gradient(circle at 35% 30%, #FFF4C2, var(--gold) 55%, #E09A12); }
.kk--ult span { font-size: 1.15rem; }
.kk--spezial2 { width: 58px; height: 58px; background: radial-gradient(circle at 35% 30%, #F0E2FF, #B98CFF 60%, var(--violett)); }
.kk--spezial2 span { font-size: .8rem; }
.kk--flug { width: 54px; height: 54px; background: radial-gradient(circle at 35% 30%, #FFFFFF, var(--creme) 60%, #C9C0A8); gap: 0; }
.kk--flug svg { width: 18px; height: 18px; fill: var(--kohle); justify-self: center; }
.kk--flug span { font-size: .72rem; }
.kk--flug[aria-pressed="true"] { background: radial-gradient(circle at 35% 30%, #FFFFFF, #9FE3FF 55%, var(--ki)); box-shadow: 0 0 0 3px var(--weiss), var(--schatten); }
.kk--flug[aria-pressed="true"] svg { transform: rotate(180deg); }
.kk--super { width: 60px; height: 60px; background: radial-gradient(circle at 35% 30%, #FFF7D0, #FFD84A 50%, #FF8A3D); animation: puls .45s ease-in-out infinite alternate; }
.kk.aus { filter: grayscale(.85) brightness(.75); }
.kk--ult.bereit { animation: ultBereit .6s ease-in-out infinite alternate; }
.kk--ult.konter { box-shadow: 0 0 0 4px var(--rot), 0 0 26px var(--rot); }
/* Update 4: Super-Form + volle Ki = Mega-Attacke (weiß-goldenes Glühen) */
.kk--ult.mega { background: radial-gradient(circle at 35% 30%, #FFFFFF, #FFE98A 45%, var(--gold) 80%); box-shadow: 0 0 0 3px #FFFFFF, 0 0 30px #FFE98A; }
.kk--ult.mega small { color: #7A3A00; font-weight: 900; }
@keyframes ultBereit { from { box-shadow: 0 0 0 3px var(--gold), 0 0 12px var(--gold); transform: scale(1); } to { box-shadow: 0 0 0 6px #FFF4C2, 0 0 30px var(--gold); transform: scale(1.06); } }
.kk:active { transform: translateY(3px) scale(.97); }
.hud__hinweis { position: absolute; left: 50%; bottom: calc(var(--rand) + 100px); transform: translateX(-50%); max-width: calc(100% - 2 * var(--rand)); text-align: center; font-weight: 900; font-size: clamp(.9rem, 2.4vh, 1.1rem); color: var(--creme); text-shadow: 0 2px 0 var(--kohle); opacity: 0; transition: opacity .3s; }
.hud__hinweis.an { opacity: 1; }
/* hochkant: der Hinweis darf nicht in die Knopfreihen unten rechts laufen (Trainings-Tipp war 7 Zeilen lang) */
@media (max-aspect-ratio: 1/1) { .hud__hinweis { bottom: calc(var(--rand) + 215px); max-width: 78%; font-size: clamp(.8rem, 2vh, 1rem); } }
/* Strahlen-Duell */
.duell { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); width: min(86%, 520px); text-align: center; }
.duell__titel { margin: 0; font-family: var(--schrift-display); font-size: clamp(1.8rem, 6vh, 3rem); letter-spacing: .04em; color: var(--gold); -webkit-text-stroke: 2px var(--kohle); text-shadow: 0 4px 0 var(--kohle); }
.duell__balken { position: relative; height: 22px; border: 3px solid var(--kohle); border-radius: 99px; background: linear-gradient(90deg, var(--rot), #FF9A9A); overflow: hidden; margin: 6px 0; }
.duell__balken i { position: absolute; inset: 0 auto 0 0; width: 50%; background: linear-gradient(90deg, #BFF0FF, var(--ki)); transition: width .08s; }
.duell__mitte { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 3px; background: var(--weiss); }
.duell__tipp { margin: 0; font-family: var(--schrift-display); font-size: clamp(1.4rem, 4.5vh, 2.2rem); color: var(--creme); -webkit-text-stroke: 1.5px var(--kohle); animation: puls .2s infinite alternate; }
/* Einblendungen: Banner, Schadenszahlen, Sprechblasen, Ultimate-Streifen */
.einblendungen { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.banner { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%) rotate(-5deg) scale(.4); font-family: var(--schrift-display); font-size: clamp(3rem, 14vh, 7rem); line-height: 1; color: var(--gold); -webkit-text-stroke: 3px var(--kohle); text-shadow: 0 6px 0 var(--kohle); white-space: nowrap; animation: bannerRein .35s cubic-bezier(.2, 1.8, .4, 1) forwards; }
@keyframes bannerRein { to { transform: translate(-50%, -50%) rotate(-5deg) scale(1); } }
.zahl { position: absolute; transform: translate(-50%, -50%); font-family: var(--schrift-display); font-size: 1.5rem; color: var(--weiss); -webkit-text-stroke: 1.5px var(--kohle); text-shadow: 0 2px 0 var(--kohle); animation: zahlHoch .8s ease-out forwards; white-space: nowrap; }
.zahl--stark { font-size: 2.4rem; color: var(--gold); }
.zahl--ich { color: #FF8A8A; }
@keyframes zahlHoch { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.5); } 20% { opacity: 1; transform: translate(-50%, -60%) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -160%) scale(1); } }
.sprech { position: absolute; transform: translate(-50%, -100%); background: var(--weiss); border: 3px solid var(--kohle); border-radius: 16px; padding: .15em .7em; font-family: var(--schrift-display); font-size: 1.4rem; letter-spacing: .04em; color: var(--kohle); white-space: nowrap; animation: sprech 1.1s ease-out forwards; }
@keyframes sprech { 0% { transform: translate(-50%, -100%) scale(.3); } 15% { transform: translate(-50%, -100%) scale(1.1); } 25%, 80% { transform: translate(-50%, -100%) scale(1); opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -130%) scale(1); } }
.ultstreifen { position: absolute; left: -10%; right: -10%; top: 70%; transform: rotate(-4deg); padding: .1em 0; background: var(--streifen, var(--ki)); border-top: 4px solid var(--kohle); border-bottom: 4px solid var(--kohle); text-align: center; font-family: var(--schrift-display); font-size: clamp(2.2rem, 9vh, 4.6rem); color: var(--weiss); -webkit-text-stroke: 2px var(--kohle); text-shadow: 0 4px 0 var(--kohle); animation: streifen 1.1s cubic-bezier(.2, 1, .3, 1) forwards; }
@keyframes streifen { 0% { transform: rotate(-4deg) translateX(-100%); } 20%, 75% { transform: rotate(-4deg) translateX(0); opacity: 1; } 100% { transform: rotate(-4deg) translateX(100%); opacity: 0; } }
/* Speedlines (Ansturm) */
.speedlines { position: fixed; inset: -20%; pointer-events: none; opacity: 0; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, .55) 0deg 1.2deg, transparent 1.2deg 7deg); -webkit-mask: radial-gradient(circle at 50% 50%, transparent 32%, #000 70%); mask: radial-gradient(circle at 50% 50%, transparent 32%, #000 70%); }
.speedlines.an { animation: speed .45s ease-out; }
@keyframes speed { 0% { opacity: .9; transform: scale(1.15) rotate(2deg); } 100% { opacity: 0; transform: scale(1) rotate(0); } }
/* Gesten-Rückmeldung */
.geste { position: fixed; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.geste::before { content: ''; position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .85); opacity: 0; }
.geste--tipp::before { opacity: 1; animation: tipp .22s ease-out forwards; }
.geste--duell::before { opacity: 1; border-color: var(--gold); animation: tipp .15s ease-out forwards; }
.geste--wisch::before { opacity: 1; border-color: var(--ki); animation: tipp .25s ease-out forwards; }
.geste--halten::before { opacity: .9; border-color: #7FD3FF; background: rgba(127, 211, 255, .18); animation: puls .3s infinite alternate; }
.geste--ziehen::before { opacity: .55; }
.geste--ziehen::after { content: ''; position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .7); transform: translate(clamp(-60px, var(--zx, 0px), 60px), clamp(-60px, var(--zy, 0px), 60px)); }
@keyframes tipp { from { transform: scale(.5); } to { transform: scale(1.4); opacity: 0; } }

/* ---------- Dialoge ---------- */
.dialog { width: min(100%, 440px); max-width: 100%; min-width: 0; max-height: calc(100dvh - 2 * var(--rand) - var(--sicher-hoehe)); overflow-y: auto; background: var(--creme); border: 3px solid var(--kohle); border-radius: var(--radius); box-shadow: var(--schatten); padding: clamp(16px, 3.5vh, 28px) clamp(14px, 4vw, 26px); display: flex; flex-direction: column; align-items: center; gap: var(--luft); text-align: center; }
.dialog h2 { margin: 0; font-family: var(--schrift-display); font-weight: 400; letter-spacing: .04em; font-size: clamp(2rem, 6vh, 3rem); line-height: 1; }
.dialog__reihe { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ergebnis__kopf { margin: 0; font-family: var(--schrift-display); letter-spacing: .1em; color: var(--kohle-2); }
.ergebnis__text { margin: 0; font-weight: 800; }
.ergebnis--sieg h2 { color: #1E8FD0; }
.ergebnis--niederlage h2 { color: #D43A3A; }
.ergebnis__werte { margin: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ergebnis__werte div { border: 2.5px solid var(--kohle); border-radius: 14px; padding: 6px 4px; background: var(--weiss); }
.ergebnis__werte dt { font-size: .68rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: var(--kohle-2); }
.ergebnis__werte dd { margin: 2px 0 0; font-family: var(--schrift-display); font-size: 1.5rem; }
.ergebnis__frei { margin: 0; font-family: var(--schrift-display); font-size: 1.4rem; color: var(--violett); }
.anleitung { width: min(100%, 560px); }
.anleitung__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; font-size: .95rem; }
.anleitung__liste li { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: 10px; align-items: start; }
.gest { font-family: var(--schrift-display); font-weight: 400; letter-spacing: .05em; text-align: center; background: var(--ki); border: 2.5px solid var(--kohle); border-radius: 99px; padding: .15em .4em; }
.gest--ki { background: var(--gold); }
.gest--gold { background: #FFD84A; }
@media (max-height: 500px) {
  .hud__knoepfe { gap: 8px; }
  .kk--spezial { width: 58px; height: 58px; } .kk--ult { width: 72px; height: 72px; } .kk--spezial2 { width: 52px; height: 52px; } .kk--flug { width: 48px; height: 48px; }
  .tk--spezial { width: 58px; height: 58px; } .tk--ult { width: 74px; height: 74px; } .tk--spezial2 { width: 54px; height: 54px; } .tk--super { width: 52px; height: 52px; } .tk__symbol svg { width: 19px; height: 19px; } .tk__name { font-size: .64rem; }
  .hud__knoepfe { gap: 6px 8px; }
  .start__kopf { margin-top: 0; } .titel { font-size: clamp(2rem, 9vh, 3.4rem); }
}
@media (prefers-reduced-motion: reduce) {
  .banner, .zahl, .sprech, .ultstreifen, .hud__combo, .speedlines.an { animation-duration: .01s; }
  .kk--ult.bereit, .kk--super, .ki.voll i, .duell__tipp, .tk--ult.bereit, .tk--super, .tk.nein { animation: none; }
}

/* ---------- Turm der Kämpfer ---------- */
.turm { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--rand) var(--rand); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--luft); width: min(100%, 900px); margin: 0 auto; align-items: start; }
@media (max-width: 40rem) { .turm { grid-template-columns: minmax(0, 1fr); } .turm__info { order: -1; position: static; } }
.turm__etagen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.etage { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 10px; border: 2.5px solid var(--kohle); border-radius: 12px; background: rgba(246, 240, 220, .82); font-weight: 800; font-size: .9rem; }
.etage b { font-family: var(--schrift-display); font-size: 1.2rem; font-weight: 400; }
.etage--boss { background: linear-gradient(90deg, rgba(154, 91, 255, .35), rgba(246, 240, 220, .85)); }
.etage--jetzt { background: linear-gradient(90deg, #FFE08A, var(--gold)); transform: scale(1.03); box-shadow: var(--schatten); }
.etage--geschafft { opacity: .6; }
.etage--geschafft span:last-child::after { content: ' ✓'; }
.turm__info { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; align-items: stretch; background: rgba(14, 26, 58, .55); border: 3px solid var(--kohle); border-radius: 18px; padding: 14px; color: var(--creme); }
.turm__stock { margin: 0; font-family: var(--schrift-display); font-size: clamp(1.8rem, 5vh, 2.6rem); text-align: center; color: var(--gold); -webkit-text-stroke: 1.5px var(--kohle); text-shadow: 0 3px 0 var(--kohle); }
.turm__gegner { margin: 0; text-align: center; font-weight: 900; }
.turm__leben { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; font-weight: 800; font-size: .85rem; }
.turm__punkte { margin: 0; text-align: center; font-weight: 800; }
.turm__punkte b { font-family: var(--schrift-display); font-size: 1.3rem; font-weight: 400; color: var(--gold); }
.bestenliste__kopf { margin: 0; font-family: var(--schrift-display); letter-spacing: .05em; font-size: 1.1rem; text-align: center; }
.bestenliste__liste { list-style: none; margin: 4px 0 0; padding: 6px; display: flex; flex-direction: column; gap: 2px; background: rgba(246, 240, 220, .92); color: var(--kohle); border: 2.5px solid var(--kohle); border-radius: 12px; font-weight: 800; font-size: .9rem; }
.bestenliste__liste:empty { display: none; }
.bestenliste__liste li { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto; gap: 6px; padding: 1px 6px; border-radius: 8px; }
.bestenliste__liste li.du { background: var(--gold); }
.bestenliste__liste span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bestenliste__status { margin: 0; text-align: center; font-size: .8rem; font-weight: 700; opacity: .85; }
.bestenliste__status:empty { display: none; }
/* Ergebnis: Spitzname */
.ergebnis__eintrag { width: 100%; display: flex; flex-direction: column; gap: 6px; font-weight: 800; font-size: .85rem; }
.ergebnis__eintrag-zeile { display: flex; gap: 6px; }
.ergebnis__eintrag input { flex: 1 1 auto; width: 0; min-width: 0; font-family: var(--schrift-display); font-size: 1.15rem; letter-spacing: .04em; color: var(--kohle); background: var(--weiss); border: 3px solid var(--kohle); border-radius: 999px; padding: .3em .9em; min-height: 44px; text-align: center; }
.ergebnis__eintrag .knopf { padding-inline: .9em; }
.ergebnis__eintrag-status { margin: 0; font-weight: 700; color: var(--kohle-2); }
.ergebnis__eintrag-status:empty { display: none; }
/* Kurzmeldung */
.toast { position: absolute; left: 50%; bottom: calc(var(--rand) + 8px); transform: translate(-50%, 20px); max-width: calc(100% - 2 * var(--rand)); padding: .5em 1.2em; border-radius: 999px; background: var(--kohle); color: var(--creme); font-weight: 900; text-align: center; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.an { opacity: 1; transform: translate(-50%, 0); }
@media (max-height: 500px) { .dialog.ergebnis { gap: 6px; padding-block: 10px; } .dialog.ergebnis h2 { font-size: 1.6rem; } .ergebnis__werte dd { font-size: 1.2rem; } }
/* Anleitung quer auf dem Handy: zwei Spalten (6 Einträge = 3 × 2), damit „Verstanden!" ohne Scrollen sichtbar ist */
@media (max-height: 520px) and (min-aspect-ratio: 4/3) {
  .anleitung { width: min(100%, 920px); gap: 8px; padding-block: 12px; }
  .anleitung h2 { font-size: 1.7rem; }
  .anleitung__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; font-size: .8rem; line-height: 1.35; }
  .anleitung__liste li { grid-template-columns: 4.2em minmax(0, 1fr); gap: 8px; }
  .anleitung .knopf--gross { min-height: 46px; padding-block: .25em; font-size: 1.5rem; }
}

/* Aufforderung (Wisch – hinterher!, Loslassen = Kraftschlag!) */
.aufforderung { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); font-family: var(--schrift-display); letter-spacing: .05em;
  font-size: clamp(1.4rem, 4.5vh, 2.2rem); color: var(--weiss); -webkit-text-stroke: 1.5px var(--kohle); text-shadow: 0 3px 0 var(--kohle);
  background: rgba(79, 195, 255, .35); border: 3px solid var(--kohle); border-radius: 999px; padding: .1em .8em; white-space: nowrap; pointer-events: none;
  animation: aufforderung .5s ease-in-out infinite alternate; }
@keyframes aufforderung { from { transform: translate(-50%, -50%) scale(1); } to { transform: translate(-50%, -50%) scale(1.08); } }
/* Kämpferwahl: Techniken */
.karte__tech { font-size: .72rem; font-weight: 800; line-height: 1.25; color: var(--kohle-2); }
.karte__tech b { color: #B07A00; }
@media (prefers-reduced-motion: reduce) { .aufforderung { animation: none; } }

/* ---------- Online-Lobby ---------- */
.lobby { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--rand) var(--rand); width: min(100%, 560px); margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--luft); align-items: center; color: var(--creme); text-align: center; }
.lobby__wahl, .lobby__raum, .lobby__host { display: flex; flex-direction: column; gap: var(--luft); align-items: center; width: 100%; }
.lobby__raum { gap: 8px; }
.lobby__name { display: flex; flex-direction: column; gap: 6px; font-weight: 800; text-shadow: 0 2px 0 var(--kohle); width: min(100%, 300px); }
.lobby__name input, .lobby__beitreten input { font-family: var(--schrift-display); font-size: 1.2rem; letter-spacing: .04em; color: var(--kohle); background: var(--creme); border: 3px solid var(--kohle);
  border-radius: 999px; padding: .3em .9em; min-height: 46px; text-align: center; box-shadow: var(--schatten); -webkit-user-select: text !important; user-select: text !important; }
.lobby__beitreten input { width: 130px; letter-spacing: .25em; text-transform: uppercase; }
.lobby__name input:focus-visible, .lobby__beitreten input:focus-visible { outline: 4px solid var(--gold); outline-offset: 2px; }
.lobby__oder { font-family: var(--schrift-display); letter-spacing: .1em; text-shadow: 0 2px 0 var(--kohle); }
.lobby__beitreten { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; width: 100%; }
.lobby__beitreten label { width: 100%; font-weight: 800; text-shadow: 0 2px 0 var(--kohle); }
.lobby__tipp { margin: 0; font-size: .9rem; font-weight: 700; text-shadow: 0 2px 0 var(--kohle); max-width: 460px; }
.lobby__label { margin: 0; font-family: var(--schrift-display); letter-spacing: .05em; font-size: 1.05rem; text-shadow: 0 2px 0 var(--kohle); }
.lobby__code { margin: 0; font-family: var(--schrift-display); font-size: clamp(2.6rem, 11vw, 4.2rem); letter-spacing: .25em; color: var(--gold); -webkit-text-stroke: 1.5px var(--kohle);
  text-shadow: 0 4px 0 var(--kohle); background: rgba(14, 26, 58, .6); border: 3px solid var(--kohle); border-radius: 18px; padding: .05em .35em .05em .6em; }
.lobby__status { margin: 0; font-weight: 800; text-shadow: 0 2px 0 var(--kohle); min-height: 1.4em; }
.lobby__status--fehler { color: #FFB3B3; }
.lobby__spieler { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 6px; }
.lobby__spieler li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--creme); color: var(--kohle); border: 3px solid var(--kohle);
  border-radius: 14px; padding: 4px 12px 4px 6px; font-weight: 800; text-align: left; min-height: 46px; }
.lobby__spieler li.tippbar { cursor: pointer; }
.lobby__spieler li b { font-family: var(--schrift-display); font-weight: 400; letter-spacing: .04em; font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby__spieler li i { font-style: normal; font-size: .85rem; color: var(--kohle-2); }
.lobby__spieler li.lobby__ich { outline: 3px solid var(--gold); outline-offset: -3px; }
.lobby__spieler li.lobby__frei { opacity: .7; background: transparent; color: var(--creme); border-style: dashed; }
.lobby__spieler li.lobby__frei i { color: var(--creme); }
.lobby__team { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--kohle); display: grid; place-items: center; font-family: var(--schrift-display); font-size: 1.1rem; color: var(--weiss);
  -webkit-text-stroke: 1px var(--kohle); background: var(--ki); }
.lobby__team--b { background: var(--orange); }
.lobby__hinweis { margin: 0; font-size: .82rem; font-weight: 800; opacity: .85; text-shadow: 0 2px 0 var(--kohle); }
.lobby__einstellungen { width: 100%; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.lobby__einstellungen .chips { justify-content: center; }
.lobby__info { margin: 0; font-weight: 800; text-shadow: 0 2px 0 var(--kohle); }

/* ---------- Joystick (Update 3) ---------- */
.joystick { position: absolute; left: calc(var(--rand) + 6px); bottom: calc(var(--rand) + 4px); width: 118px; height: 118px; border-radius: 50%;
  border: 3px solid rgba(27, 36, 48, .55); background: radial-gradient(circle, rgba(246, 240, 220, .28), rgba(246, 240, 220, .12) 70%); pointer-events: auto; touch-action: none; }
.joystick__knauf { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; border: 3px solid var(--kohle);
  background: radial-gradient(circle at 35% 30%, #FFFFFF, var(--creme) 60%, #C9C0A8); box-shadow: var(--schatten); }
.joystick.aktiv { background: radial-gradient(circle, rgba(79, 195, 255, .35), rgba(79, 195, 255, .12) 70%); }
@media (max-height: 500px) { .joystick { width: 104px; height: 104px; } .joystick__knauf { width: 48px; height: 48px; margin: -24px 0 0 -24px; } }
/* hochkant mit Joystick: Knopf-Bogen rückt zusammen (Super oben links im Bogen), damit links unten Platz bleibt */
.hud.mit-joystick.hochkant .hud__knoepfe { grid-template-columns: auto auto; grid-template-areas: "super flug" "sp2 ult" "sp ult"; }
.knopf--pille { display: inline-flex; align-items: center; gap: .3em; min-height: 46px; padding: .2em .8em; font-size: 1rem; background: var(--creme); }
.knopf--pille svg { width: 20px; height: 20px; fill: currentColor; }
.pause__einst { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pause__einst .wahl__label { color: var(--kohle); text-shadow: none; }

/* ---------- Konter-Siegel (Update 3): „!" über dem Angreifer, Ring schrumpft bis zum Treffer – gold = jetzt antippen ---------- */
.siegel { position: absolute; left: 0; top: 0; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; border: 4px solid var(--kohle); pointer-events: auto; touch-action: manipulation;
  background: radial-gradient(circle at 35% 30%, #FFFFFF, #FFD0D0 55%, #FF5A5A); color: var(--kohle); font-family: var(--schrift-display); font-size: 2.4rem; line-height: 1;
  display: grid; place-items: center; padding: 0; cursor: pointer; box-shadow: 0 0 0 4px rgba(255, 255, 255, .6), var(--schatten); }
.siegel span { position: relative; }
.siegel__ring { position: absolute; inset: -6px; border-radius: 50%; border: 5px solid #FF5A5A; transform: scale(var(--ring, 2)); pointer-events: none; }
.siegel.jetzt { background: radial-gradient(circle at 35% 30%, #FFFFFF, #FFF0B0 50%, var(--gold)); animation: siegelPuls .18s ease-in-out infinite alternate; }
.siegel.jetzt .siegel__ring { border-color: var(--gold); }
@keyframes siegelPuls { from { box-shadow: 0 0 0 4px rgba(255, 255, 255, .7), var(--schatten); } to { box-shadow: 0 0 0 10px rgba(255, 201, 60, .7), var(--schatten); } }
@media (prefers-reduced-motion: reduce) { .siegel.jetzt { animation: none; } }

/* ---------- Tipp-Kette (Update 3): großes Feld mit Nummer, Ring schrumpft bis zum Ende des Fensters, gold = Perfekt-Zone ---------- */
.kettenfeld { position: absolute; left: 0; top: 0; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; border: 4px solid var(--kohle); padding: 0;
  pointer-events: auto; touch-action: manipulation; cursor: pointer; display: grid; place-items: center; color: var(--kohle);
  background: radial-gradient(circle at 35% 30%, #FFFFFF, #CFF3FF 50%, var(--ki)); box-shadow: 0 0 0 5px rgba(255, 255, 255, .7), 0 0 30px rgba(79, 195, 255, .8), var(--schatten);
  animation: feldErscheint .16s cubic-bezier(.2, 1.6, .4, 1); }
.kettenfeld b { position: relative; font-family: var(--schrift-display); font-weight: 400; font-size: 2.6rem; line-height: 1; -webkit-text-stroke: 1px var(--kohle); color: var(--weiss); text-shadow: 0 3px 0 var(--kohle); }
.kettenfeld__ring { position: absolute; inset: -8px; border-radius: 50%; border: 6px solid var(--weiss); transform: scale(var(--ring, 2.2)); pointer-events: none; box-shadow: 0 0 12px rgba(255, 255, 255, .8); }
.kettenfeld.perfekt { background: radial-gradient(circle at 35% 30%, #FFFFFF, #FFF0B0 45%, var(--gold)); box-shadow: 0 0 0 6px rgba(255, 255, 255, .8), 0 0 40px rgba(255, 201, 60, .95), var(--schatten); }
.kettenfeld.perfekt .kettenfeld__ring { border-color: var(--gold); }
.kettenfeld--konter { width: 132px; height: 132px; margin: -66px 0 0 -66px; background: radial-gradient(circle at 35% 30%, #FFFFFF, #FFD0D0 45%, var(--rot)); }
.kettenfeld--konter b { font-size: 1.6rem; }
@keyframes feldErscheint { from { transform: var(--pos) scale(.3); opacity: 0; } to { transform: var(--pos) scale(1); opacity: 1; } }
/* Fortschritt der Kette oben in der Mitte: ein Punkt je Feld */
.kette-leiste { position: absolute; left: 50%; top: 74px; transform: translateX(-50%); display: flex; gap: 8px; pointer-events: none; }
.kette-leiste i { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--kohle); background: rgba(246, 240, 220, .6); }
.kette-leiste i.ok { background: var(--ki); } .kette-leiste i.perfekt { background: var(--gold); } .kette-leiste i.jetzt { background: var(--weiss); animation: puls .3s infinite alternate; }
.kette-text { position: absolute; font-family: var(--schrift-display); font-size: 2rem; letter-spacing: .05em; color: var(--gold); -webkit-text-stroke: 1.5px var(--kohle); text-shadow: 0 3px 0 var(--kohle);
  transform: translate(-50%, -50%); pointer-events: none; animation: ketteText .7s ease-out forwards; }
@keyframes ketteText { from { transform: translate(-50%, -50%) scale(.6); opacity: 1; } to { transform: translate(-50%, -120%) scale(1.15); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kettenfeld, .kette-text { animation: none; } }