/* ÉCLAIR — Arcade-Optik. Schrift liegt lokal im Ordner fonts/, kein Google-CDN.
   Harte Kanten, harte Schatten, Neonfarben auf Schwarz. */

@font-face{
  font-family:"Anton";
  src:url("fonts/anton-latin-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --noir:    #08080f;
  --fond:    #10101d;
  --carte:   #171729;
  --trait:   #2a2a46;
  --texte:   #f4f4ff;
  --doux:    #8d8db8;

  --jaune:   #ffe500;
  --rose:    #ff2e63;
  --menthe:  #00e5a0;
  --bleu:    #4d6bff;

  --titre: "Anton", "Bahnschrift Condensed", "Arial Narrow", "Haettenschweiler", sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
img,video{ max-width:100%; height:auto; }
html{ -webkit-text-size-adjust:100%; }

body{
  min-height:100dvh;
  background:var(--noir);
  color:var(--texte);
  font-family:var(--sans);
  font-size:16px; line-height:1.4;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}

/* Rasterlinien im Hintergrund, sehr leise */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 4px),
    radial-gradient(120% 60% at 50% -5%, rgba(77,107,255,.20), transparent 62%);
}

h1,h2,h3{ margin:0; }

button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; }
:focus-visible{ outline:3px solid var(--jaune); outline-offset:2px; }

.app{
  position:relative; z-index:1;
  width:100%; max-width:560px; margin:0 auto;
  min-height:100dvh; display:flex; flex-direction:column;
  padding:16px 14px 24px; gap:14px;
}

.ecran{ display:none; flex-direction:column; gap:14px; flex:1; }
.ecran.actif{ display:flex; }

/* ============================ Schriftzug ============================ */

.marque{ position:relative; padding:4px 0 2px; }
.marque b{
  display:block;
  font-family:var(--titre); font-weight:400;
  font-size:clamp(56px, 19vw, 92px); line-height:.82;
  letter-spacing:.01em; text-transform:uppercase;
  color:var(--jaune);
  transform:skewX(-6deg);
  text-shadow:4px 4px 0 var(--rose);
}
.marque span{
  display:block; margin-top:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--doux);
}
.baseline{ margin:0; color:var(--doux); font-size:14px; max-width:44ch; }

/* ============================ Zählerleiste ============================ */

.stats{ display:grid; grid-template-columns:repeat(3,1fr); border:2px solid var(--trait); background:var(--fond); }
.stats div{ padding:10px 6px; text-align:center; border-right:2px solid var(--trait); }
.stats div:last-child{ border-right:0; }
.stats b{
  display:block; font-family:var(--titre); font-size:30px; line-height:1;
  font-variant-numeric:tabular-nums; color:var(--texte);
}
.stats div:first-child b{ color:var(--jaune); }
.stats small{ display:block; margin-top:3px; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--doux); }

/* ============================== Modi ============================== */

.modes{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.modes .mode:nth-child(4){ grid-column:1 / -1; }
@media (max-width:359px){ .modes{ grid-template-columns:1fr; } .modes .mode:nth-child(4){ grid-column:auto; } }

.mode{
  position:relative; overflow:hidden;
  display:block; width:100%; text-align:left;
  min-height:132px; padding:12px 13px 13px;
  background:var(--carte);
  border:2px solid var(--trait);
  transition:transform .09s ease, box-shadow .09s ease, border-color .09s ease;
}
.mode:hover{ border-color:var(--jaune); }
.mode:active{ transform:translate(3px,3px); box-shadow:none !important; }
.mode:hover{ box-shadow:4px 4px 0 var(--trait); }

.mode .sigle{
  position:absolute; right:-6px; bottom:-20px; z-index:0;
  font-family:var(--titre); font-size:78px; line-height:1;
  color:var(--trait); opacity:.85; pointer-events:none;
}
.mode[data-mode="blitz"]  .sigle{ color:#4a4415; }
.mode[data-mode="boss"]   .sigle{ color:#4d1526; }
.mode[data-mode="duel"]   .sigle{ color:#1f2a63; }
.mode[data-mode="faible"] .sigle{ color:#0f4636; }

.mode h2{
  position:relative; z-index:1;
  font-family:var(--titre); font-weight:400;
  font-size:26px; line-height:1; text-transform:uppercase; letter-spacing:.01em;
}
.mode[data-mode="blitz"]  h2{ color:var(--jaune); }
.mode[data-mode="boss"]   h2{ color:var(--rose); }
.mode[data-mode="duel"]   h2{ color:var(--bleu); }
.mode[data-mode="faible"] h2{ color:var(--menthe); }

.mode p{ position:relative; z-index:1; margin:7px 0 0; color:var(--doux); font-size:12.5px; line-height:1.35; }
.mode .fleche{ display:none; }
.mode:disabled{ opacity:.55; cursor:default; }
.mode:disabled:hover{ border-color:var(--trait); box-shadow:none; }

/* ============================= Schalter ============================= */

.rangee{ display:flex; flex-wrap:wrap; gap:7px; }
.puce{
  padding:8px 12px; background:var(--fond); border:2px solid var(--trait);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--doux);
  transition:color .1s ease, border-color .1s ease;
}
.puce:hover{ color:var(--texte); border-color:var(--doux); }
.puce[aria-pressed="true"]{ border-color:var(--jaune); color:var(--jaune); }

/* ============================== Spiel ============================== */

.hud{ display:flex; align-items:center; gap:10px; }
.hud .quitter{
  width:40px; height:40px; display:grid; place-items:center;
  border:2px solid var(--trait); background:var(--fond); color:var(--doux); font-size:17px;
}
.hud .quitter:hover{ color:var(--rose); border-color:var(--rose); }

.jauge{ flex:1; height:16px; background:var(--fond); border:2px solid var(--trait); overflow:hidden; }
.jauge i{ display:block; height:100%; width:100%; background:var(--menthe); transform-origin:left; transition:transform .1s linear; }
.jauge.chaud i{ background:var(--rose); }
.jauge.pv i{ background:var(--rose); }

.compteur{
  font-family:var(--titre); font-size:34px; line-height:1;
  font-variant-numeric:tabular-nums; min-width:2.4ch; text-align:right; color:var(--texte);
}

.ligne-info{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:24px; }
.score{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--doux); }
.score b{ color:var(--texte); font-size:14px; }
.combo{
  font-family:var(--titre); font-size:20px; letter-spacing:.02em; color:var(--jaune);
  opacity:0; transform:scale(.8); transition:opacity .14s ease, transform .14s ease;
}
.combo.on{ opacity:1; transform:scale(1); }
.coeurs{ font-size:16px; letter-spacing:3px; color:var(--rose); }

.boss{ display:flex; align-items:center; gap:11px; padding:9px 11px; border:2px solid var(--rose); background:var(--fond); }
.boss .tete{ width:40px; height:40px; display:grid; place-items:center; font-size:22px; background:var(--carte); border:2px solid var(--trait); }
.boss .infos{ flex:1; min-width:0; }
.boss .infos strong{ display:block; font-family:var(--titre); font-size:19px; text-transform:uppercase; color:var(--rose); line-height:1.05; }
.boss .infos small{ color:var(--doux); font-size:11px; }

.tour{
  padding:11px 12px; text-align:center;
  font-family:var(--titre); font-size:clamp(24px,7vw,32px); line-height:1;
  text-transform:uppercase; letter-spacing:.03em;
  border:2px solid var(--trait); background:var(--fond);
  animation:pulse 1.4s ease-in-out infinite;
}
.tour[data-joueur="1"]{ border-color:var(--bleu);  color:#0a1024; background:var(--bleu); }
.tour[data-joueur="2"]{ border-color:var(--jaune); color:#141200; background:var(--jaune); }

@keyframes pulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.022) } }

/* Wer nicht dran ist, tritt zurueck */
.lutteur.passif{ opacity:.34; filter:grayscale(.8); }
.lutteur.passif .tete{ animation:none; }
.lutteur.actif .vie{ border-color:currentColor; }
.lutteur.actif .nom{ color:currentColor; }
.lutteur.actif .corps::after{
  content:"▲"; position:absolute; left:50%; bottom:-14px; transform:translateX(-50%);
  font-size:13px; color:currentColor; animation:bob 1.1s ease-in-out infinite;
}

/* ============================= Wortkarte ============================= */

.carte{
  position:relative; overflow:hidden;
  flex:1; min-height:170px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  padding:24px 16px;
  border:2px solid var(--trait); background:var(--carte);
  text-align:center;
}
.carte .etiquette{ font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--doux); }
.carte .mot{
  font-family:var(--titre); font-weight:400; color:var(--texte);
  font-size:clamp(36px, 11vw, 58px); line-height:1.02;
  text-transform:uppercase; letter-spacing:.005em;
  text-wrap:balance;
}
.carte.juste{ border-color:var(--menthe); }
.carte.juste .mot{ color:var(--menthe); }
.carte.faux{ border-color:var(--rose); }
.carte.faux .mot{ color:var(--rose); }

.solution{ min-height:22px; font-size:14.5px; color:var(--doux); }
.solution{ display:block; }
.solution b{
  display:block; margin-top:3px;
  color:var(--menthe); font-family:var(--titre);
  font-size:clamp(24px,7vw,34px); line-height:1.05; letter-spacing:.01em;
}
.solution.rate b{ color:var(--rose); }

.commentaire{
  min-height:20px; max-width:34ch;
  font-family:var(--titre); font-size:clamp(17px,5vw,22px); line-height:1.1;
  text-transform:uppercase; letter-spacing:.01em; color:var(--doux);
}
.commentaire.ok{ color:var(--menthe); }
.commentaire.rate{ color:var(--rose); }

.dire{ padding:5px 11px; border:2px solid var(--trait); background:var(--fond); font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--doux); }
.dire:hover{ color:var(--jaune); border-color:var(--jaune); }

/* ============================= Antworten ============================= */

.choix{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media (max-width:359px){ .choix{ grid-template-columns:1fr; } }

.choix button{
  min-height:62px; padding:12px 10px;
  border:2px solid var(--trait); background:var(--fond);
  font-size:16px; font-weight:700;
  transition:transform .08s ease, border-color .08s ease, background .08s ease;
}
.choix button:hover:not(:disabled){ border-color:var(--jaune); }
.choix button:active:not(:disabled){ transform:translate(2px,2px); }
.choix button.bon{ border-color:var(--menthe); background:rgba(0,229,160,.15); color:var(--menthe); }
.choix button.mauvais{ border-color:var(--rose); background:rgba(255,46,99,.15); color:var(--rose); }
.choix button:disabled{ cursor:default; }

.saisie{ display:flex; flex-direction:column; gap:8px; }
.saisie input{
  width:100%; padding:14px 12px;
  border:2px solid var(--trait); background:var(--fond); color:var(--texte);
  font-family:var(--titre); font-size:26px; letter-spacing:.02em; text-align:center;
}
.saisie input:focus{ border-color:var(--jaune); }
.saisie input::placeholder{ font-family:var(--sans); font-size:15px; font-weight:600; color:#565683; letter-spacing:0; }

.accents{ display:grid; grid-template-columns:repeat(8,1fr); gap:4px; }
.accents button{ height:40px; border:2px solid var(--trait); background:var(--fond); font-size:17px; font-weight:700; }
.accents button:hover{ border-color:var(--jaune); color:var(--jaune); }

.gros{
  width:100%; padding:15px;
  background:var(--jaune); color:#141200;
  font-family:var(--titre); font-size:22px; text-transform:uppercase; letter-spacing:.03em;
  box-shadow:4px 4px 0 var(--rose);
  transition:transform .08s ease, box-shadow .08s ease;
}
.gros:active{ transform:translate(4px,4px); box-shadow:none; }
.gros.calme{ background:var(--fond); color:var(--doux); border:2px solid var(--trait); box-shadow:none; font-size:18px; }
.gros.calme:hover{ color:var(--texte); border-color:var(--doux); }
.gros.calme:active{ transform:translate(2px,2px); }

/* ============================== Ende ============================== */

.bilan{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:26px 16px; border:2px solid var(--jaune); background:var(--carte); text-align:center;
}
.bilan .titre{ font-family:var(--titre); font-size:clamp(30px,9vw,44px); line-height:1; text-transform:uppercase; color:var(--texte); }
.gros-chiffre{
  font-family:var(--titre); font-size:clamp(64px,22vw,104px); line-height:.92;
  color:var(--jaune); font-variant-numeric:tabular-nums; text-shadow:4px 4px 0 var(--rose);
}
.bilan p{ margin:6px 0 0; color:var(--doux); font-size:13.5px; max-width:38ch; }
.rang{
  margin-top:10px; padding:7px 16px;
  background:var(--jaune); color:#141200;
  font-family:var(--titre); font-size:22px; text-transform:uppercase; letter-spacing:.04em;
  transform:rotate(-2deg);
}

.entete-liste{ margin:0; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--doux); }
.liste-erreurs{ display:flex; flex-direction:column; gap:2px; }
.liste-erreurs div{ display:grid; grid-template-columns:1fr auto; gap:12px; align-items:baseline; padding:10px 12px; background:var(--fond); font-size:14px; }
.liste-erreurs span:first-child{ color:var(--doux); }
.liste-erreurs span:last-child{ font-weight:700; color:var(--menthe); text-align:right; }

.pied{ margin:0; text-align:center; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#4d4d72; }

/* ============================ Auswahlebene ============================ */

.voile{ position:fixed; inset:0; z-index:30; background:rgba(4,4,10,.86); display:none; align-items:flex-end; justify-content:center; }
.voile.actif{ display:flex; }

.panneau{
  width:100%; max-width:560px; max-height:88dvh; overflow-y:auto;
  background:var(--noir); border-top:3px solid var(--jaune);
  padding:18px 14px 26px; display:flex; flex-direction:column; gap:11px;
}
.panneau h2{ font-family:var(--titre); font-size:30px; text-transform:uppercase; line-height:1; color:var(--jaune); }
.panneau p{ margin:0; color:var(--doux); font-size:13px; }

.paquets{ display:flex; flex-direction:column; gap:5px; }
.paquet{
  display:grid; grid-template-columns:20px 1fr auto; align-items:center; gap:11px;
  padding:10px 11px; text-align:left; border:2px solid var(--trait); background:var(--fond);
}
.paquet:hover{ border-color:var(--doux); }
.paquet[aria-pressed="true"]{ border-color:var(--menthe); }
.paquet .case{ width:20px; height:20px; border:2px solid var(--trait); display:grid; place-items:center; font-size:12px; color:transparent; }
.paquet[aria-pressed="true"] .case{ background:var(--menthe); border-color:var(--menthe); color:#04241a; }
.paquet strong{ display:block; font-family:var(--titre); font-size:17px; text-transform:uppercase; letter-spacing:.01em; }
.paquet small{ color:var(--doux); font-size:11.5px; }
.paquet .nb{ font-family:var(--mono); font-size:12px; color:var(--doux); }

.kaempfer{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:start; gap:8px; }
.kaempfer .contre{ align-self:center; padding-top:18px; font-family:var(--titre); font-size:17px; color:var(--doux); }
.seite{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.seite.s1 input{ border-color:var(--jaune); }
.seite.s2 input{ border-color:var(--bleu); }

.visages{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; }
.visages button{
  min-width:0; height:32px; padding:0;
  border:2px solid var(--trait); background:var(--fond);
  font-size:15px; line-height:1;
}
.visages button[aria-pressed="true"]{ border-color:var(--jaune); background:var(--carte); }
.seite.s2 .visages button[aria-pressed="true"]{ border-color:var(--bleu); }

.champ input[type="text"]{
  width:100%; min-width:0; padding:10px 9px;
  border:2px solid var(--trait); background:var(--fond); color:var(--texte);
  font-family:var(--titre); font-size:20px; letter-spacing:.02em;
}

.champ{ display:flex; flex-direction:column; gap:5px; }
.champ span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--doux); }
.champ select{
  width:100%; padding:11px 10px;
  border:2px solid var(--trait); background:var(--fond); color:var(--texte);
  font-family:var(--sans); font-size:15px;
}
.champ select:focus{ border-color:var(--jaune); }

.propres{ width:100%; min-height:130px; padding:11px; border:2px solid var(--trait); background:var(--fond); color:var(--texte); font-family:var(--mono); font-size:13.5px; resize:vertical; }
.curseur{ display:flex; align-items:center; gap:11px; }
.curseur input[type="range"]{ flex:1; accent-color:var(--jaune); }
.curseur output{ font-family:var(--mono); font-size:11.5px; color:var(--jaune); min-width:13ch; text-align:right; }
.note{ margin:0; padding:9px 11px; background:var(--fond); font-size:12px; line-height:1.45; color:var(--doux); }

.tableau{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:9px; }
.tableau .cote{ text-align:center; padding:12px 8px; border:2px solid var(--trait); background:var(--fond); }
.tableau .cote b{ display:block; font-family:var(--titre); font-size:36px; line-height:1; }
.tableau .cote small{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--doux); }
.tableau .cote.j1 b{ color:var(--bleu); }
.tableau .cote.j2 b{ color:var(--jaune); }
.tableau .contre{ font-family:var(--titre); font-size:15px; color:var(--doux); }

/* ============================== Bewegung ============================== */

@keyframes secousse{ 0%,100%{transform:translateX(0)} 18%{transform:translateX(-9px)} 42%{transform:translateX(8px)} 68%{transform:translateX(-4px)} }
@keyframes pop{ 0%{transform:scale(.93);opacity:0} 100%{transform:scale(1);opacity:1} }
@keyframes monte{ 0%{transform:translate(-50%,0) scale(.7);opacity:0} 22%{transform:translate(-50%,-10px) scale(1.12);opacity:1} 100%{transform:translate(-50%,-56px) scale(1);opacity:0} }
@keyframes claque{ 0%{transform:translate(-50%,-50%) scale(.5) rotate(-9deg);opacity:0} 30%{transform:translate(-50%,-50%) scale(1.15) rotate(-4deg);opacity:1} 78%{opacity:1} 100%{transform:translate(-50%,-50%) scale(1) rotate(-4deg);opacity:0} }

.anim-secousse{ animation:secousse .32s ease; }
.anim-pop{ animation:pop .16s ease-out; }

.flottant{
  position:absolute; left:50%; top:14px;
  font-family:var(--titre); font-size:26px; color:var(--jaune);
  pointer-events:none; animation:monte .8s ease-out forwards; z-index:3;
}
.flottant.moins{ color:var(--rose); }

.slang{
  position:absolute; left:50%; top:50%; z-index:4;
  padding:6px 16px; background:var(--jaune); color:#141200;
  font-family:var(--titre); font-size:clamp(28px,9vw,40px); text-transform:uppercase; letter-spacing:.02em;
  white-space:nowrap; pointer-events:none;
  animation:claque .95s ease-out forwards;
  box-shadow:5px 5px 0 var(--rose);
}
.slang.rate{ background:var(--rose); color:#fff; box-shadow:5px 5px 0 #000; }


/* ============================== Boxring ============================== */

.ring{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:6px;
  padding:14px 8px 16px;
  border:2px solid var(--trait);
  background:linear-gradient(180deg,#0d0d1a 0%,#1c1c36 100%);
  min-height:206px;
}

/* Ringseile oben */
.ring::before{
  content:""; position:absolute; left:0; right:0; top:0; height:54px; pointer-events:none; z-index:1;
  background:repeating-linear-gradient(180deg, transparent 0 15px, rgba(255,46,99,.42) 15px 18px);
}
/* Bodenlicht */
.ring::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:34px; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(255,229,0,.09));
  border-top:2px solid rgba(255,255,255,.07);
}

.lutteur{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; }
.lutteur.moi{ color:var(--jaune); }
.lutteur.adv{ color:var(--rose); }
.lutteur.adv.papa{ color:var(--bleu); }

.lutteur .nom{
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--doux);
}
.lutteur .vie{ display:block; width:100%; max-width:118px; height:12px; border:2px solid var(--trait); background:#05050c; overflow:hidden; }
.lutteur .vie i{ display:block; height:100%; width:100%; background:currentColor; transform-origin:left; transition:transform .25s ease; }

.corps{ position:relative; width:112px; height:108px; display:grid; place-items:center; }
.tete{
  font-size:clamp(56px,19vw,86px); line-height:1;
  animation:bob 2.1s ease-in-out infinite;
  filter:drop-shadow(0 5px 0 rgba(0,0,0,.45));
}
.torse, .poing{ display:none; }

.milieu{
  align-self:center; z-index:2;
  font-family:var(--titre); font-size:20px; color:var(--doux);
  transform:rotate(-8deg); letter-spacing:.04em;
}

.gant{
  position:absolute; top:60%; width:98px; height:98px;
  opacity:0; z-index:5; pointer-events:none; color:var(--jaune);
  filter:drop-shadow(0 6px 0 rgba(0,0,0,.45));
}

.lutteur.touche .corps{ animation:encaisse .5s ease; }
.ring.tremble{ animation:tremble .34s ease; }

/* K.o.: Kopf kippt um */
.lutteur.ko .tete{ animation:none; transform:rotate(84deg) translateY(10px); opacity:.85; }

.boum{
  position:absolute; left:50%; top:26%; z-index:6; pointer-events:none;
  font-size:clamp(56px,18vw,86px); line-height:1;
  animation:boum .6s ease-out forwards;
}
.etoiles{
  position:absolute; left:50%; top:2%; z-index:7; pointer-events:none;
  font-size:20px; letter-spacing:4px; white-space:nowrap;
  animation:etoiles .9s ease-out forwards;
}

/* Comic-Krachwort direkt am Einschlag */
.comic{
  position:absolute; left:50%; top:20%; z-index:8; pointer-events:none;
  padding:4px 12px;
  font-family:var(--titre); font-size:clamp(24px,7.5vw,36px); line-height:1;
  text-transform:uppercase; letter-spacing:.02em; white-space:nowrap;
  color:#141200; background:var(--jaune);
  box-shadow:4px 4px 0 #000;
  animation:comic .85s cubic-bezier(.2,1.4,.4,1) forwards;
}
.comic.rate{ background:var(--rose); color:#fff; }

@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }

@keyframes encaisse{
  0%{   transform:translateX(0) rotate(0) }
  10%{  transform:translateX(-20px) rotate(-20deg) scale(1.1) }
  30%{  transform:translateX(14px) rotate(14deg) scale(1.04) }
  52%{  transform:translateX(-9px) rotate(-9deg) }
  74%{  transform:translateX(5px) rotate(5deg) }
  100%{ transform:none }
}

@keyframes tremble{
  0%,100%{ transform:translate(0,0) }
  18%{ transform:translate(-9px,5px) }
  46%{ transform:translate(8px,-5px) }
  72%{ transform:translate(-4px,3px) }
}

@keyframes boum{
  0%{   transform:translate(-50%,-50%) scale(.2) rotate(-16deg); opacity:0 }
  26%{  transform:translate(-50%,-50%) scale(1.4) rotate(8deg);  opacity:1 }
  100%{ transform:translate(-50%,-50%) scale(2)  rotate(16deg);  opacity:0 }
}

@keyframes etoiles{
  0%{   transform:translate(-50%,10px) scale(.5); opacity:0 }
  25%{  transform:translate(-50%,-4px) scale(1);  opacity:1 }
  100%{ transform:translate(-50%,-26px) scale(1.1); opacity:0 }
}

@keyframes comic{
  0%{   transform:translate(-50%,-50%) scale(.2) rotate(-16deg); opacity:0 }
  35%{  transform:translate(-50%,-50%) scale(1.12) rotate(-7deg); opacity:1 }
  80%{  transform:translate(-50%,-50%) scale(1) rotate(-7deg); opacity:1 }
  100%{ transform:translate(-50%,-72%) scale(1) rotate(-7deg); opacity:0 }
}

/* Schlag von links nach rechts (du triffst) */
@keyframes coup-adv{
  0%{   left:-4%; transform:translate(0,-50%) scale(.4)  rotate(-28deg); opacity:0 }
  18%{  opacity:1 }
  52%{  left:56%; transform:translate(0,-50%) scale(1.6) rotate(12deg);  opacity:1 }
  100%{ left:56%; transform:translate(0,-50%) scale(1.15) rotate(12deg); opacity:0 }
}
/* Schlag von rechts nach links (du kassierst) */
@keyframes coup-moi{
  0%{   left:88%; transform:translate(0,-50%) scale(-.4,.4)   rotate(28deg);  opacity:0 }
  18%{  opacity:1 }
  52%{  left:12%; transform:translate(0,-50%) scale(-1.6,1.6) rotate(-12deg); opacity:1 }
  100%{ left:12%; transform:translate(0,-50%) scale(-1.15,1.15) rotate(-12deg); opacity:0 }
}

.gant.coup-adv{ animation:coup-adv .54s cubic-bezier(.2,.75,.3,1) forwards; }
.gant.coup-moi{ animation:coup-moi .54s cubic-bezier(.2,.75,.3,1) forwards; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

.comic.krit{
  background:#fff; color:var(--rose);
  font-size:clamp(28px,9vw,44px);
  box-shadow:5px 5px 0 var(--rose), 0 0 0 3px #000;
}
.lutteur .corps{ cursor:pointer; }