/* =====================================================================
   Spielmodus „Werwolf“
   Eigener Himmel (Nacht, Morgen, Blutmond), der Mond hinter der
   Moderation, große Porträts im Kreis, Rollenkarten und Siegerszenen.
   Knöpfe und Felder kommen aus dem gewählten Look.
   ===================================================================== */
:root{
  --ww-serif:"Constantia","Palatino Linotype","Book Antiqua",Georgia,serif;
  --ww-mond:#EFE6C8; --ww-blut:#A3161C; --ww-glut:#FF4A3D; --ww-gold:#F2C14E;
  --ww-wolf:#E0443E; --ww-gut:#4F8EF7;
}

/* ---------- Grundgerüst ---------- */
.buehne.wwmodus{grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"kopf" "board" "meins"}
.buehne.wwmodus > .board,.buehne.wwmodus > .leiste,.buehne.wwmodus > #meins,
.buehne.wwmodus > #kreisBuehne,.buehne.wwmodus > #kreisSteuer,.buehne.wwmodus > #kreisMeins{display:none!important}
.buehne.wwmodus .titel{font-family:var(--ww-serif);font-weight:700;font-stretch:normal;letter-spacing:.01em;
  font-size:clamp(24px,2.8vw,44px);padding:2px 30px;border-width:2px;border-color:color-mix(in srgb,var(--ww-mond) 55%,transparent);
  background:color-mix(in srgb,#070B1F 55%,transparent)}
.buehne.wwmodus .kopf{min-height:44px}
body.mitProtokoll .buehne > .wwbuehne,body.mitProtokoll .buehne > .wwsteuer{margin-right:300px}
body.ww-an{background:#070B1F}
body.ww-an #hintergrundLeinwand,body.ww-an #hgMedium{display:none!important}
body.ww-an.mitbild::before{display:none}

/* ---------- Himmel: Nacht, Morgen, Blutmond ---------- */
.wwhimmel{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:linear-gradient(180deg,#060A1C 0%,#0E1438 48%,#1A2254 100%)}
.wwhimmel .wwtaglicht,.wwhimmel .wwblutlicht,.wwhimmel .wwliebeslicht{position:absolute;inset:0;opacity:0;transition:opacity 2.6s ease}
.wwhimmel .wwtaglicht{background:linear-gradient(180deg,#251D3D 0%,#4A2F55 40%,#9A5361 72%,#E08A57 100%)}
.wwhimmel .wwblutlicht{background:radial-gradient(90% 70% at 50% 45%,#5A0A10 0%,#2A0508 55%,#0B0204 100%)}
.wwhimmel .wwliebeslicht{background:radial-gradient(90% 70% at 50% 45%,#6B2350 0%,#321437 55%,#10081A 100%)}
.wwhimmel canvas{position:absolute;inset:0;width:100%;height:100%;transition:opacity 2.4s ease}
.wwhimmel .wwnebel{position:absolute;left:-10%;right:-10%;bottom:-6%;height:34%;
  background:radial-gradient(60% 55% at 30% 100%,rgba(170,180,220,.16),transparent 70%),
             radial-gradient(55% 50% at 75% 100%,rgba(170,180,220,.13),transparent 70%);
  animation:wwNebel 38s ease-in-out infinite alternate}
@keyframes wwNebel{from{transform:translateX(-3%)}to{transform:translateX(3%)}}
.wwhimmel.tag .wwtaglicht{opacity:1}
.wwhimmel.tag canvas{opacity:.08}
.wwhimmel.blut .wwblutlicht{opacity:1}
.wwhimmel.blut canvas{opacity:.35}
.wwhimmel.liebe .wwliebeslicht{opacity:1}

/* ---------- Bühne ---------- */
.wwbuehne{grid-area:board;position:relative;min-height:0;overflow:hidden;--wwem:16px;--wwakzent:var(--ww-mond)}
.wwbahn{position:absolute;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:1;
  border:1px solid color-mix(in srgb,var(--ww-mond) 14%,transparent);
  box-shadow:inset 0 0 90px color-mix(in srgb,var(--ww-mond) 5%,transparent);transition:width .7s ease,height .7s ease}
.wwkacheln{position:absolute;inset:0;z-index:5;pointer-events:none}
/* Wer schläft, sieht das Dorf nur gedämpft – der Aufruf in der Mitte bleibt hell */
.wwhimmel::after{content:"";position:absolute;inset:0;background:rgba(2,3,12,.5);opacity:0;transition:opacity 1.4s ease}
.wwhimmel.schlaf::after{opacity:1}
.wwbuehne.schlaeft .wwkachel{filter:brightness(.36) saturate(.55)}
.wwbuehne.schlaeft .wwbahn{opacity:.35}

/* ---------- Mitte: Mond, Moderation, Erzählung ---------- */
.wwmitte{position:absolute;left:50%;top:20%;transform:translateX(-50%);z-index:8;width:var(--wwMitteB,560px);
  transition:top .8s cubic-bezier(.3,.8,.3,1),left .8s cubic-bezier(.3,.8,.3,1);
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;pointer-events:none}
.wwmitte > *{pointer-events:auto}
.wwmondfeld{position:relative;width:var(--wwMond,210px);height:var(--wwMond,210px);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.wwgestirn{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 36% 32%,#FFFBEA 0%,#F1E8CB 36%,#DCD1AE 68%,#BCAF88 100%);
  box-shadow:0 0 50px 14px rgba(239,230,200,.26),0 0 150px 60px rgba(239,230,200,.10);
  transition:background 2.4s ease,box-shadow 2.4s ease,transform 2.4s ease,filter 2.4s ease}
/* Mondkrater */
.wwgestirn::before{content:"";position:absolute;inset:0;border-radius:50%;opacity:.55;transition:opacity 2s ease;
  background:radial-gradient(circle at 64% 38%,rgba(150,138,104,.55) 0 7%,transparent 8%),
             radial-gradient(circle at 30% 64%,rgba(150,138,104,.45) 0 9%,transparent 10%),
             radial-gradient(circle at 58% 72%,rgba(150,138,104,.35) 0 5%,transparent 6%),
             radial-gradient(circle at 42% 30%,rgba(150,138,104,.30) 0 4%,transparent 5%)}
.wwbuehne.tag .wwgestirn{background:radial-gradient(circle at 50% 50%,#FFF3C4 0%,#FFD36E 48%,#F6A23C 82%,#E3782B 100%);
  box-shadow:0 0 60px 20px rgba(255,190,90,.35),0 0 180px 80px rgba(255,150,70,.14)}
.wwbuehne.tag .wwgestirn::before{opacity:0}
.wwbuehne.blut .wwgestirn{background:radial-gradient(circle at 36% 32%,#FF8A6E 0%,#D7261E 40%,#8E0D12 78%,#4A0508 100%);
  box-shadow:0 0 70px 26px rgba(255,60,50,.45),0 0 200px 90px rgba(200,20,20,.22);animation:wwBlutPuls 3.2s ease-in-out infinite alternate}
.wwbuehne.blut .wwgestirn::before{opacity:.35}
@keyframes wwBlutPuls{from{filter:brightness(.92)}to{filter:brightness(1.12)}}
.wwbuehne.liebe .wwgestirn{background:radial-gradient(circle at 40% 36%,#FFD9EA 0%,#FF8DBE 50%,#C43C7E 100%);
  box-shadow:0 0 60px 20px rgba(255,120,180,.4)}
.wwring{--wwring:calc(var(--wwMond,210px) * .7);position:relative;z-index:1;width:var(--wwring);height:var(--wwring);border-radius:50%;
  border:3px solid color-mix(in srgb,#1A1430 60%,var(--ww-mond));background:#15122A;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;
  font-size:calc(var(--wwring) * .34);color:var(--gedaempft);box-shadow:0 8px 30px rgba(0,0,0,.55)}
.wwring img,.wwring video{width:100%;height:100%;object-fit:cover;display:block}
.wwring video{transform:scaleX(-1)}
.wwmitte.live .wwring{border-color:#ff4d4d;box-shadow:0 0 0 3px rgba(255,77,77,.25),0 8px 30px rgba(0,0,0,.55)}
.wwmodname{font-family:var(--display);font-stretch:87.5%;font-size:13px;letter-spacing:.08em;color:color-mix(in srgb,var(--ww-mond) 80%,transparent);margin-top:-2px}
.wwkopfzeile{font-family:var(--ww-serif);font-style:italic;font-size:clamp(15px,1.3vw,20px);color:color-mix(in srgb,var(--ww-mond) 75%,transparent);min-height:1.2em;margin-top:2px}
.wwerzaehlung{font-family:var(--ww-serif);font-weight:700;font-size:clamp(22px,min(2.6vw,calc(var(--wwMitteB,560px) * .068)),48px);line-height:1.12;
  color:#F6F0E0;text-shadow:0 2px 18px rgba(0,0,0,.7);max-width:100%}
.wwerzaehlung.neu{animation:wwErzaehlAuf .7s cubic-bezier(.2,.9,.3,1)}
@keyframes wwErzaehlAuf{from{opacity:.3;transform:translateY(8px);letter-spacing:.05em}to{opacity:1;transform:none}}
.wwunterzeile{font-size:clamp(14px,1.15vw,18px);color:color-mix(in srgb,var(--ww-mond) 70%,var(--gedaempft));max-width:34em;line-height:1.4}
.wwuhr{font-family:var(--display);font-stretch:75%;font-weight:700;font-variant-numeric:tabular-nums;font-size:clamp(22px,2vw,34px);color:var(--ww-mond)}
.wwuhr.knapp{color:var(--ww-glut)}
.wwinfo{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:100%;margin-top:4px}
.wwchip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 5px;border-radius:999px;font-size:13px;
  background:color-mix(in srgb,var(--rf,var(--panel)) 16%,rgba(12,14,34,.85));border:1px solid color-mix(in srgb,var(--rf,var(--kante)) 55%,transparent)}
.wwchip.nurtext{padding:4px 12px}
.wwchip .avatar{width:24px;height:24px;flex-basis:24px;font-size:10px;border-width:1px}
.wwchip .wwchipicon{font-size:16px;line-height:1}
.wwchip.tot{filter:grayscale(.7);opacity:.85}
.wwrollenzeile{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:6px}

/* Aufruf einer Rolle: die Karte schwebt kurz groß ein */
.wwaufruf{position:absolute;left:50%;top:50%;z-index:30;transform:translate(-50%,-50%);pointer-events:none;
  animation:wwAufruf 1.9s cubic-bezier(.2,.8,.3,1) forwards}
.wwaufruf{display:flex;flex-direction:column;align-items:center;gap:10px}
.wwaufruf-icon{width:clamp(90px,15vh,160px);aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:clamp(52px,8.5vh,92px);line-height:1;color:var(--rf);
  background:radial-gradient(circle,color-mix(in srgb,var(--rf) 42%,#15122A) 0%,rgba(21,18,42,.92) 72%);
  border:2px solid color-mix(in srgb,var(--rf) 75%,transparent);box-shadow:0 0 70px color-mix(in srgb,var(--rf) 55%,transparent)}
.wwaufruf-icon svg{width:58%;height:58%}
.wwaufruf-titel{font-family:var(--ww-serif);font-weight:700;font-size:clamp(30px,3.4vw,58px);line-height:1.05;white-space:nowrap;
  color:#F6F0E0;text-shadow:0 2px 26px rgba(0,0,0,.85)}
@keyframes wwAufruf{0%{opacity:0;transform:translate(-50%,-40%) scale(.6) rotate(-6deg)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.05) rotate(1deg)}
  30%{transform:translate(-50%,-50%) scale(1) rotate(0)}78%{opacity:1}100%{opacity:0;transform:translate(-50%,-58%) scale(.85)}}

/* ---------- Die Kacheln im Kreis ---------- */
.wwkachel{position:absolute;left:0;top:0;transform:translate(-50%,-50%);font-size:var(--wwem);width:6.8em;
  display:flex;flex-direction:column;align-items:center;gap:.25em;pointer-events:auto;--rf:var(--pf);
  transition:left .8s cubic-bezier(.3,.8,.3,1),top .8s cubic-bezier(.3,.8,.3,1),opacity .5s ease,filter 1.2s ease}
.wwkachel.kommt{opacity:0;transform:translate(-50%,-50%) scale(.4)}
.wwrahmen{position:relative;width:6.2em;height:6.2em;flex:0 0 auto}
.wwportrait{position:relative;width:100%;height:100%;border-radius:1.45em;border:.2em solid var(--pf);overflow:hidden;
  background:color-mix(in srgb,var(--pf) 14%,#15122A);box-shadow:0 .5em 1.5em rgba(0,0,0,.5);
  transition:transform .25s ease,box-shadow .3s ease,border-color .3s ease,filter 1.2s ease}
.wwbild{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:2.1em;color:var(--gedaempft)}
.wwbild img,.wwbild video{width:100%;height:100%;object-fit:cover;display:block}
.wwbild video.selbst{transform:scaleX(-1)}
.wwschlaf{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-size:2.2em;
  background:radial-gradient(circle,#1B2150,#0B0F2A)}
.wwkachel.kameraschlaf .wwschlaf{display:flex}
.wwlive{position:absolute;right:.35em;top:.35em;width:.55em;height:.55em;border-radius:50%;background:#ff4d4d;box-shadow:0 0 0 .12em rgba(0,0,0,.4);display:none}
.wwkachel.kamera .wwlive{display:block}
.wwkachel.kameraschlaf .wwlive{display:none}
.wwname{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.1em .35em .28em;text-align:center;
  background:linear-gradient(180deg,transparent,rgba(8,6,22,.55) 45%,rgba(8,6,22,.88));
  font-family:var(--display);font-stretch:87.5%;font-weight:600;font-size:.95em;line-height:1.15;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.wwmarken{display:flex;gap:.28em;align-items:center;justify-content:center;min-height:1.45em;flex-wrap:nowrap;max-width:9em;white-space:nowrap}
.wwmarke{width:1.45em;height:1.45em;display:block;flex:0 0 auto;filter:drop-shadow(0 .1em .2em rgba(0,0,0,.6))}
.wwmarke.herz path{fill:#FF4F8B}
.wwmarke.feder{color:#E9DDFB}
.wwmarke.schild path{fill:#5ED6B0}
.wwmarke.biss{color:var(--ww-wolf)}
.wwseherkarte{width:1.05em;height:1.45em;border-radius:.2em;border:.1em solid rgba(255,255,255,.7);flex:0 0 auto;
  box-shadow:0 .1em .3em rgba(0,0,0,.6)}
.wwseherkarte.boese{background:linear-gradient(160deg,#FF5A4E,#A3161C)}
.wwseherkarte.gut{background:linear-gradient(160deg,#79A8FF,#2B5FD0)}
.wwrollenschild{display:inline-flex;align-items:center;gap:.3em;font-family:var(--ww-serif);font-size:.8em;line-height:1.2;
  padding:.12em .6em .12em .4em;border-radius:999px;white-space:nowrap;max-width:8.6em;overflow:hidden;text-overflow:ellipsis;
  background:color-mix(in srgb,var(--rf) 24%,rgba(10,10,28,.92));border:1px solid color-mix(in srgb,var(--rf) 65%,transparent);color:#F6F0E0}
.wwrollenschild .wwicon{font-size:1.1em}
.wwrollenschild.neu{animation:wwSchildAuf .7s cubic-bezier(.2,1.5,.4,1)}
@keyframes wwSchildAuf{0%{transform:rotateX(90deg) scale(.6);opacity:0}100%{transform:none;opacity:1}}
/* Tot: grau, gestrichelt, ein Kreuz */
.wwkachel.tot .wwportrait{filter:grayscale(1) brightness(.5);border-style:dashed;border-color:color-mix(in srgb,var(--gedaempft) 60%,transparent);box-shadow:none}
.wwkachel.tot .wwname{color:#bbb;text-decoration:line-through;text-decoration-thickness:.08em}
.wwgrab{position:absolute;inset:0 0 1.2em;display:none;align-items:center;justify-content:center;z-index:2;
  font-family:var(--ww-serif);font-size:3.2em;line-height:1;color:rgba(235,230,215,.85);text-shadow:0 .05em .2em #000}
.wwkachel.tot .wwgrab{display:flex}
.wwkachel.weg:not(.tot) .wwportrait{opacity:.62;border-style:dashed}
.wwkachel.ich .wwportrait::after{content:"";position:absolute;inset:.18em;border-radius:1.2em;border:.1em dotted color-mix(in srgb,#fff 70%,transparent);pointer-events:none}
.wwkachel.waehlbar{cursor:pointer}
.wwkachel.waehlbar .wwportrait{border-color:color-mix(in srgb,var(--wwakzent) 70%,var(--pf))}
.wwkachel.waehlbar:hover .wwportrait{transform:translateY(-.2em) scale(1.05);box-shadow:0 0 0 .18em var(--wwakzent),0 .6em 1.6em rgba(0,0,0,.6)}
.wwkachel.gewaehlt .wwportrait{border-color:var(--wwakzent);transform:scale(1.07);
  box-shadow:0 0 0 .26em color-mix(in srgb,var(--wwakzent) 55%,transparent),0 0 2.4em color-mix(in srgb,var(--wwakzent) 60%,transparent)}
.wwkachel.gewaehlt .wwwahlmarke{display:block}
.wwwahlmarke{display:none;position:absolute;left:50%;top:-.1em;transform:translate(-50%,-50%);z-index:3;padding:.1em .7em;border-radius:999px;
  background:var(--wwakzent);color:#140F24;font-family:var(--display);font-stretch:87.5%;font-weight:700;font-size:.66em;letter-spacing:.06em;white-space:nowrap}
.wwkachel.gedimmt{opacity:.45}
.wwkachel.hell .wwportrait{box-shadow:0 0 0 .2em color-mix(in srgb,var(--wwakzent) 50%,transparent),0 0 1.8em color-mix(in srgb,var(--wwakzent) 45%,transparent)}
.wwkachel.getroffen .wwportrait{animation:wwGetroffen .65s ease-in-out}
@keyframes wwGetroffen{0%,100%{transform:none}15%{transform:translateX(-.45em) rotate(-4deg)}35%{transform:translateX(.4em) rotate(3deg)}55%{transform:translateX(-.25em)}75%{transform:translateX(.15em)}}
/* Zähler der Abstimmung: Mistgabel mit Zahl, dazu die Namen unten links im Bild */
.wwzaehler{position:absolute;right:-.5em;top:-.5em;z-index:4;height:1.9em;padding:0 .5em 0 .4em;gap:.12em;border-radius:999px;display:none;
  align-items:center;justify-content:center;background:#B8321F;color:#fff;font-family:var(--display);font-weight:800;font-size:.95em;
  box-shadow:0 0 0 .16em #0B0F2A,0 .2em .6em rgba(0,0,0,.5)}
.wwzaehler svg{width:1.15em;height:1.15em;flex:0 0 auto}
.wwgabelnamen{position:absolute;left:.3em;bottom:1.5em;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:.14em;
  max-width:calc(100% - .6em);pointer-events:none}
.wwgabelname{display:block;max-width:100%;font-size:max(10px,.6em);line-height:1.2;font-weight:700;font-family:var(--display);font-stretch:87.5%;
  padding:.1em .5em .1em .4em;border-radius:.45em;background:rgba(10,8,24,.84);color:#fff;border-left:.32em solid var(--vf,#888);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 .1em .3em rgba(0,0,0,.5)}
.wwgabelname.mehr{border-left-color:rgba(255,255,255,.4);color:#ddd}
.wwgabelname.neu{animation:wwNameRein .4s cubic-bezier(.2,1.4,.4,1)}
@keyframes wwNameRein{from{transform:translateX(-115%);opacity:0}to{transform:none;opacity:1}}
/* Die Mistgabel sticht von oben ins Bild */
.wwstich{position:absolute;z-index:9;pointer-events:none;transform-origin:50% 100%;animation:wwStich .85s cubic-bezier(.3,1.4,.5,1) forwards}
.wwstich svg{width:100%;height:100%;overflow:visible;transform:scaleY(-1);filter:drop-shadow(0 .3em .5em rgba(0,0,0,.6))}
@keyframes wwStich{0%{opacity:0;transform:translate(-50%,-165%) rotate(-16deg)}40%{opacity:1;transform:translate(-50%,-100%) rotate(3deg)}
  55%{transform:translate(-50%,-104%) rotate(-2deg)}70%{opacity:1;transform:translate(-50%,-100%) rotate(0)}100%{opacity:0;transform:translate(-50%,-100%)}}
.wwzaehler.sichtbar{display:flex}
.wwzaehler.tick{animation:wwTick .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes wwTick{0%{transform:scale(1.8)}100%{transform:scale(1)}}
.wwabgestimmt{position:absolute;left:-.4em;top:-.4em;z-index:4;width:1.6em;height:1.6em;border-radius:50%;display:none;align-items:center;justify-content:center;
  background:var(--ww-mond);color:#140F24;font-weight:800;font-size:.8em;box-shadow:0 0 0 .15em #0B0F2A}
.wwkachel.abgestimmt .wwabgestimmt{display:flex;animation:wwTick .35s ease-out}
.wwkachel.verurteilt .wwportrait{border-color:var(--ww-glut);animation:wwVerurteilt 1.1s ease-in-out infinite alternate}
@keyframes wwVerurteilt{from{box-shadow:0 0 0 .2em rgba(255,74,61,.3)}to{box-shadow:0 0 0 .45em rgba(255,74,61,.55),0 0 2.6em rgba(255,74,61,.5)}}
.wwkachel.gleich .wwportrait{border-color:var(--ww-gold);box-shadow:0 0 0 .3em rgba(242,193,78,.45)}
/* Knöpfe der Moderation an der Kachel */
.wwmod{position:absolute;right:-.3em;top:1.2em;z-index:5;display:flex;flex-direction:column;gap:.2em;opacity:0;transition:opacity .15s}
.wwkachel:hover .wwmod,.wwmod:focus-within{opacity:1}
.wwmod button{font-size:.62em;line-height:1.1;padding:.25em .45em;border-radius:.45em;border:1px solid var(--kante);background:var(--panel);color:var(--text);white-space:nowrap}
.wwmod button:hover{border-color:var(--licht-tief)}
.wwmod select{font-size:.62em;padding:.15em .2em;border-radius:.4em;width:auto;max-width:9em;background:var(--panel);border:1px solid var(--kante)}

/* ---------- Rollenkarten ---------- */
.wwkarte{--rf:var(--ww-mond);position:relative;width:var(--kb,220px);aspect-ratio:5/7;perspective:1200px;flex:0 0 auto}
.wwkarte .wwk-innen{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.3,.9,.3,1)}
.wwkarte.offen .wwk-innen{transform:rotateY(180deg)}
.wwk-seite{position:absolute;inset:0;border-radius:calc(var(--kb,220px) * .07);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.6)}
/* Rückseite: Nachthimmel mit Mondsichel */
.wwk-hinten{background:radial-gradient(circle at 50% 38%,#26306A 0%,#141A45 55%,#0A0E26 100%);border:calc(var(--kb,220px) * .025) solid #C9B98A}
.wwk-hinten::before{content:"";position:absolute;left:50%;top:40%;width:34%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  box-shadow:calc(var(--kb,220px) * .045) calc(var(--kb,220px) * -.02) 0 0 #EFE6C8}
.wwk-hinten::after{content:"";position:absolute;inset:6%;border-radius:calc(var(--kb,220px) * .05);border:1px solid rgba(201,185,138,.45);
  background:radial-gradient(1.5px 1.5px at 20% 22%,#fff,transparent),radial-gradient(1px 1px at 72% 18%,#fff,transparent),
             radial-gradient(1.5px 1.5px at 80% 64%,#fff,transparent),radial-gradient(1px 1px at 30% 76%,#fff,transparent),
             radial-gradient(1px 1px at 55% 88%,#fff,transparent),radial-gradient(1px 1px at 12% 52%,#fff,transparent)}
.wwk-vorn{transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:9% 8% 7%;gap:3%;border:calc(var(--kb,220px) * .025) solid var(--rf);
  background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--rf) 34%,#15122A) 0%,#15122A 62%,#0C0A1C 100%)}
.wwk-icon{width:44%;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  font-size:calc(var(--kb,220px) * .2);line-height:1;background:radial-gradient(circle,color-mix(in srgb,var(--rf) 40%,transparent),transparent 70%);
  border:1px solid color-mix(in srgb,var(--rf) 60%,transparent);color:var(--rf)}
.wwk-icon svg{width:62%;height:62%}
.wwk-name{font-family:var(--ww-serif);font-weight:700;font-size:calc(var(--kb,220px) * .115);line-height:1.05;color:#F6F0E0;margin-top:2%}
.wwk-team{font-family:var(--display);font-stretch:87.5%;font-size:calc(var(--kb,220px) * .055);color:var(--rf);letter-spacing:.06em}
.wwk-text{font-size:calc(var(--kb,220px) * .058);line-height:1.38;color:#D8D0E6;margin-top:2%}
.wwkarte.mini{--kb:74px;cursor:pointer}
.wwkarte.mini .wwk-text,.wwkarte.mini .wwk-team{display:none}
.wwkarte.mini .wwk-seite{box-shadow:0 6px 16px rgba(0,0,0,.5)}
.wwkarte.mini .wwk-icon{width:52%}

/* Großer Auftritt: die eigene Karte beim Verteilen */
.wwkartenschau{position:fixed;inset:0;z-index:88;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:radial-gradient(60% 55% at 50% 45%,rgba(30,36,90,.7),rgba(3,4,14,.94));animation:siegAuf .5s ease-out}
.wwkartenschau .wwkarte{--kb:min(300px,34vh);animation:wwKarteRein .9s cubic-bezier(.2,.9,.3,1.1)}
@keyframes wwKarteRein{from{transform:translateY(60vh) rotate(-18deg) scale(.5)}to{transform:none}}
.wwkartenschau .wwks-titel{font-family:var(--ww-serif);font-style:italic;font-size:clamp(20px,2.2vw,30px);color:#EDE6D2}
.wwkartenschau .wwks-ziel{max-width:520px;text-align:center;font-size:16px;color:#CFC6DF;line-height:1.45;min-height:2.9em}
.wwkartenschau .wz{font-size:17px;padding:12px 26px}
.wwfliegkarte{position:fixed;left:0;top:0;z-index:60;width:46px;aspect-ratio:5/7;border-radius:5px;pointer-events:none;
  background:radial-gradient(circle at 50% 38%,#26306A,#0A0E26);border:2px solid #C9B98A;box-shadow:0 6px 16px rgba(0,0,0,.6)}

/* ---------- Feld der Spieler ---------- */
.wwmeins{grid-area:meins;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:12px 16px;border-radius:16px;border:1px solid color-mix(in srgb,var(--rf,var(--kante)) 55%,var(--kante));
  background:linear-gradient(180deg,color-mix(in srgb,var(--rf,var(--panel)) 10%,rgba(18,16,40,.94)),rgba(12,11,30,.94))}
.wwmeins.dran{border-color:var(--rf);box-shadow:0 0 0 2px color-mix(in srgb,var(--rf) 40%,transparent),0 0 40px color-mix(in srgb,var(--rf) 25%,transparent)}
.wwmeins .wwm-haupt{min-width:0;display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.wwmeins .wwm-titel{font-family:var(--ww-serif);font-weight:700;font-size:clamp(20px,1.9vw,30px);line-height:1.15;color:#F6F0E0}
.wwmeins .wwm-titel.dran{color:var(--rf)}
.wwmeins .wwm-text{font-size:15px;color:#CFC6DF;line-height:1.4;max-width:62em}
.wwmeins .wwm-knoepfe{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.wwmeins .wwm-knoepfe .st{font-size:15px;padding:10px 16px}
.wwmeins .wwm-knoepfe .st.haupt{background:var(--rf,var(--licht));border-color:var(--rf,var(--licht));color:#140F24}
.wwmeins .wwm-knoepfe .st:disabled{opacity:.4;cursor:not-allowed}
.wwmeins .wwm-seite{display:flex;flex-direction:column;gap:6px;align-items:stretch;min-width:150px}
.wwmeins .wwm-seite .st{font-size:14px;padding:8px 12px}
.wwmeins .wwm-seite select{font-size:13px;padding:5px 7px}
.wwmeins .wwm-balken{width:min(420px,100%);height:5px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.wwmeins .wwm-balken i{display:block;height:100%;background:var(--rf,var(--licht));transform-origin:left center}
.wwwahlreihe{display:flex;flex-wrap:wrap;gap:7px}
.wwwahlreihe button{--pf:var(--kante);display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;
  border:2px solid color-mix(in srgb,var(--pf) 70%,var(--kante));background:var(--panel-hoch);font-size:15px;font-weight:600}
.wwwahlreihe button .avatar{width:30px;height:30px;flex-basis:30px;font-size:12px;border-color:var(--pf)}
.wwwahlreihe button:hover:not(:disabled){border-color:var(--rf,var(--licht))}
.wwwahlreihe button[aria-pressed="true"]{background:var(--rf,var(--licht));color:#140F24;border-color:var(--rf,var(--licht))}
.wwwahlreihe button:disabled{opacity:.35;cursor:not-allowed}
.wwchat{width:min(520px,100%);display:flex;flex-direction:column;gap:5px}
.wwchat .wwchat-liste{max-height:66px;overflow-y:auto;display:flex;flex-direction:column;gap:3px;font-size:14px;
  padding:6px 9px;border-radius:9px;background:rgba(0,0,0,.28);border:1px solid rgba(224,68,62,.35)}
.wwchat .wwchat-liste b{color:var(--ww-wolf);font-weight:600}
.wwchat .wwchat-liste .leer{color:var(--gedaempft)}
.wwchat input{width:100%;padding:7px 10px;border-radius:8px;border:1px solid rgba(224,68,62,.5);background:rgba(0,0,0,.3);font-size:14px}
.wwantwortkarte{display:inline-flex;align-items:center;gap:12px;padding:8px 20px;border-radius:14px;border:3px solid currentColor;
  font-family:var(--ww-serif);font-weight:700;font-size:clamp(26px,2.6vw,40px);transform:rotate(-3deg);animation:stempel .5s cubic-bezier(.2,1.6,.4,1)}
.wwantwortkarte.ja{color:#7EE0A8}
.wwantwortkarte.nein{color:#FF8A7E}
.wwfrage{width:min(560px,100%);display:flex;gap:8px}
.wwfrage input{flex:1;padding:9px 12px;border-radius:9px;border:1px solid var(--rf);background:rgba(0,0,0,.3);font-size:15px}
.wwseherblick{display:flex;align-items:center;gap:14px}
.wwseherblick .wwkarte{--kb:96px}
.wwseherblick .wwk-vorn{justify-content:center}
.wwseherblick .wwk-name{font-size:calc(var(--kb) * .16)}
.wwtrank{display:inline-flex;align-items:center;gap:6px}
.wwtrank svg{width:22px;height:22px}
.wwreime{width:100%;max-width:1100px;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:8px}
.wwreime .wwr-block{padding:6px 10px;border-radius:10px;background:rgba(0,0,0,.25);border:1px solid color-mix(in srgb,#C7B8E0 45%,transparent);font-size:13.5px;line-height:1.4}
.wwreime .wwr-block b{display:block;font-family:var(--ww-serif);font-size:14px;color:#E9DDFB;margin-bottom:2px}
.wwreime ol{margin:0;padding-left:1.2em}
.wwreime li{margin:1px 0}
.wwreime .wwr-paare{display:inline-block;margin:0 5px 4px 0;padding:1px 8px;border-radius:999px;background:rgba(255,255,255,.07);color:#D8D0E6;font-size:12.5px}

/* ---------- Steuerleiste der Moderation ---------- */
.wwsteuer{grid-area:meins;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  padding:10px 14px;border-radius:14px;border:1px solid var(--kante);background:color-mix(in srgb,var(--panel) 94%,transparent)}
.wwsteuer .wwinfo-mod{flex:1 1 240px;min-width:0;font-size:14px;color:var(--gedaempft);line-height:1.35}
.wwsteuer .wwinfo-mod b{display:block;font-family:var(--display);font-stretch:87.5%;font-size:17px;color:var(--text)}
.wwsteuer .wwinfo-mod .wwgeheim{display:block;margin-top:2px;color:var(--gut);font-weight:600;font-size:14.5px}
.wwsteuer .wwknoepfe{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center}
.wwsteuer .st{font-size:15px;padding:10px 15px}
.wwsteuer .st.haupt{font-size:16px;padding:11px 20px}
.wwsteuer .st:disabled{opacity:.4;cursor:not-allowed}
.wwsteuer kbd{font-family:var(--body);font-size:11px;opacity:.65;margin-left:6px}
.wwsteuer select{width:auto;max-width:220px;padding:8px 9px;font-size:14px}
.wwsteuer .wwneben{order:5;display:flex;gap:8px;margin-left:auto;padding-left:10px;border-left:1px solid var(--kante);align-items:center}
.wwsteuer .wwneben .st{font-size:14px;padding:9px 13px}
.wwsteuer .wwzeile{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;font-size:14px}
.wwsteuer .wwzeile span{padding:3px 10px;border-radius:999px;border:1px solid var(--kante);background:var(--panel-hoch)}
.wwsteuer details{flex-basis:100%;font-size:14px}
.wwsteuer summary{cursor:pointer;color:var(--gedaempft)}
.wwsteuer .wwhand{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px 12px;margin-top:8px}
.wwsteuer .wwhand label{display:flex;align-items:center;gap:8px;margin:0;color:var(--text);font-size:14px}
.wwsteuer .wwhand select{flex:1;min-width:0;max-width:none}
.wwsteuer .wwumschalter{display:inline-flex;border:1px solid var(--kante);border-radius:8px;overflow:hidden}
.wwsteuer .wwumschalter button{padding:8px 11px;font-size:13px;color:var(--gedaempft)}
.wwsteuer .wwumschalter button[aria-pressed="true"]{background:var(--licht);color:var(--auf-licht);font-weight:600}
.wwsteuer .wwfrist{font-family:var(--display);font-variant-numeric:tabular-nums;color:var(--licht)}

/* ---------- Animationen ---------- */
.wwkrallen{position:absolute;z-index:9;pointer-events:none;transform:translate(-50%,-50%)}
.wwkrallen svg{width:100%;height:100%;overflow:visible}
.wwkrallen path{fill:none;stroke-linecap:round;stroke:#D7191F;stroke-width:7;filter:drop-shadow(0 0 6px rgba(255,40,40,.8));
  stroke-dasharray:120;stroke-dashoffset:120;animation:wwKratz .28s ease-out forwards}
.wwkrallen path:nth-child(2){animation-delay:.07s}
.wwkrallen path:nth-child(3){animation-delay:.14s}
.wwkrallen.weg{transition:opacity .8s ease;opacity:0}
@keyframes wwKratz{to{stroke-dashoffset:0}}
.wwkratzer{position:fixed;inset:0;z-index:84;pointer-events:none}
.wwkratzer svg{position:absolute;left:50%;top:50%;width:min(80vw,80vh);height:min(80vw,80vh);transform:translate(-50%,-50%) rotate(-8deg);overflow:visible}
.wwkratzer path{fill:none;stroke-linecap:round;stroke:#B0141A;stroke-width:5;opacity:.85;filter:drop-shadow(0 0 10px rgba(255,30,30,.7));
  stroke-dasharray:130;stroke-dashoffset:130;animation:wwKratz .32s ease-out forwards}
.wwkratzer path:nth-child(2){animation-delay:.08s}
.wwkratzer path:nth-child(3){animation-delay:.16s}
.wwkratzer::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(160,10,20,.35),transparent 70%);animation:wwRotBlitz 1.2s ease-out forwards}
@keyframes wwRotBlitz{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
.wwkratzer.weg{transition:opacity .7s ease;opacity:0}
.wwfadenkreuz{position:absolute;z-index:9;pointer-events:none;transform:translate(-50%,-50%);color:var(--ww-glut);
  animation:wwZielen 1.4s cubic-bezier(.3,.8,.3,1) forwards}
.wwfadenkreuz svg{width:100%;height:100%;filter:drop-shadow(0 0 8px rgba(255,74,61,.8))}
@keyframes wwZielen{0%{opacity:0;transform:translate(-50%,-50%) scale(2.6) rotate(-90deg)}60%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
  75%{transform:translate(-48%,-52%) scale(1)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.wwpeng{position:fixed;inset:0;z-index:85;pointer-events:none;background:#fff;animation:wwPeng .5s ease-out forwards}
@keyframes wwPeng{0%{opacity:.85}100%{opacity:0}}
.wwrauch{position:absolute;z-index:9;pointer-events:none;width:1.4em;height:1.4em;border-radius:50%;
  background:radial-gradient(circle,rgba(170,110,255,.8),rgba(90,200,120,.35) 60%,transparent 70%);animation:wwRauch 2.2s ease-out forwards}
@keyframes wwRauch{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}20%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),calc(-50% - 5em)) scale(2.8)}}
.wwfeuer{position:absolute;inset:0;width:100%;height:100%;z-index:9;pointer-events:none}
.wwfeder{position:fixed;z-index:84;pointer-events:none;width:64px;height:64px;color:#E9DDFB;filter:drop-shadow(0 4px 12px rgba(0,0,0,.6))}
.wwfeder svg{width:100%;height:100%}
.wwmedaille{position:absolute;z-index:9;pointer-events:none;transform:translate(-50%,-50%);animation:wwMedaille 2.4s cubic-bezier(.2,1.3,.4,1) forwards}
.wwmedaille svg{width:100%;height:100%;filter:drop-shadow(0 0 16px rgba(242,193,78,.8))}
@keyframes wwMedaille{0%{opacity:0;transform:translate(-50%,-50%) scale(3) rotate(-30deg)}30%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
  80%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(.6)}}
.wwstrahl{position:absolute;z-index:4;pointer-events:none;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(242,193,78,.45),transparent 65%);animation:wwStrahl 2.2s ease-out forwards}
@keyframes wwStrahl{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}
.wwherzbruch{position:absolute;z-index:9;width:var(--g,130px);height:var(--g,130px);transform:translate(-50%,-50%);pointer-events:none;animation:herzKommt 1.9s ease-out forwards}
.wwherzbruch svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 18px rgba(0,0,0,.55))}
.wwherzbruch path.haelfte{fill:#FF4F8B;stroke:#8A1D45;stroke-width:.6}
.wwherzbruch .riss{fill:none;stroke:#0B0F2A;stroke-width:.9;stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:22;
  animation:rissZiehen .25s .55s ease-out forwards,rissWeg .3s .8s ease-in forwards}
.wwherzbruch g.links{transform-origin:12px 21px;animation:haelfteLinks 1.6s ease-in-out forwards}
.wwherzbruch g.rechts{transform-origin:12px 21px;animation:haelfteRechts 1.6s ease-in-out forwards}
.wwbanner{position:fixed;left:50%;top:14%;z-index:85;transform:translateX(-50%);pointer-events:none;text-align:center;
  padding:12px 28px;border-radius:16px;background:rgba(10,10,28,.88);border:1px solid color-mix(in srgb,var(--rf,var(--ww-mond)) 60%,transparent);
  font-family:var(--ww-serif);font-size:clamp(20px,2vw,30px);color:#F6F0E0;box-shadow:0 20px 60px rgba(0,0,0,.6);
  animation:wwBanner 3.2s ease forwards}
.wwbanner small{display:block;font-family:var(--body);font-size:.55em;color:#CFC6DF;margin-top:2px}
@keyframes wwBanner{0%{opacity:0;transform:translate(-50%,-14px)}12%{opacity:1;transform:translate(-50%,0)}82%{opacity:1}100%{opacity:0;transform:translate(-50%,-8px)}}

/* ---------- Sieg ---------- */
.wwsieg{position:fixed;inset:0;z-index:87;overflow:hidden;cursor:pointer;display:flex;align-items:center;justify-content:center;animation:siegAuf .8s ease-out}
.wwsieg canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
.wwsieg.liebe canvas{z-index:2}
.wwsieg .wwsg-text{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  animation:einSchrift .9s 2.1s ease-out backwards}
.wwsieg .wwsg-titel{font-family:var(--ww-serif);font-weight:700;font-size:clamp(56px,8vw,130px);line-height:1;letter-spacing:.01em}
.wwsieg.dorf .wwsg-titel{font-size:clamp(44px,6vw,104px)}
.wwsieg .wwsg-unter{font-family:var(--ww-serif);font-style:italic;font-size:clamp(22px,2.6vw,38px);opacity:.92}
.wwsieg .wwsg-leute{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:10px;max-width:90vw}
.wwsieg .wwsg-leute .avatar{width:clamp(56px,7vh,84px);height:clamp(56px,7vh,84px);flex:0 0 auto;font-size:24px;border-width:3px}
.wwsieg .wwsg-person{display:flex;flex-direction:column;align-items:center;gap:4px;font-family:var(--display);font-stretch:87.5%;font-size:15px}
.wwsieg .wwsg-hinweis{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:5;font-size:13px;opacity:.55}
/* Blutmond: Werwolf auf dem Felsen vor dem aufsteigenden Mond – Text links */
.wwsieg.wolf{background:#070002;color:#FFE3DC;justify-content:flex-start}
.wwsieg .wwbm{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.wwsieg .wwbm-mond{animation:wwBmSteigt 3.2s cubic-bezier(.25,.8,.3,1) both}
@keyframes wwBmSteigt{from{transform:translateY(560px)}to{transform:none}}
.wwsieg .wwbm-rot{animation:wwBmRot 2.4s 1s ease-in both}
@keyframes wwBmRot{from{opacity:0}to{opacity:1}}
.wwsieg .wwbm-schein{animation:wwBmSchein 2.6s 3.2s ease-in-out infinite alternate}
@keyframes wwBmSchein{from{opacity:1}to{opacity:.62}}
.wwsieg .wwbm-fels{animation:wwBmFels 1.5s 1.1s cubic-bezier(.2,.9,.3,1) both}
@keyframes wwBmFels{from{transform:translateY(300px);opacity:0}to{transform:none;opacity:1}}
.wwsieg.wolf .wwsg-titel{color:#FF5A4A;text-shadow:0 0 30px rgba(255,40,30,.6)}
.wwsieg.wolf .wwsg-text{margin:0 0 0 6vw;align-items:flex-start;text-align:left;max-width:44vw}
.wwsieg.wolf .wwsg-leute{justify-content:flex-start}
@media (max-aspect-ratio:13/10){
  .wwsieg.wolf{justify-content:center;align-items:flex-end}
  .wwsieg.wolf .wwsg-text{margin:0 0 6vh;align-items:center;text-align:center;max-width:92vw}
  .wwsieg.wolf .wwsg-leute{justify-content:center}
}
/* Heu und Mistgabel */
.wwsieg.dorf{background:linear-gradient(180deg,#4A2F55 0%,#B8624F 45%,#F2A65A 75%,#F6C77A 100%);color:#2A1506}
.wwsieg.dorf .wwsg-sonne{position:absolute;left:50%;bottom:26vh;width:min(40vh,40vw);aspect-ratio:1;border-radius:50%;transform:translateX(-50%);z-index:1;
  background:radial-gradient(circle,#FFF4C8 0%,#FFD36E 50%,#F6A23C 100%);box-shadow:0 0 120px 60px rgba(255,200,100,.5);
  animation:wwSonneSteigt 3s cubic-bezier(.25,.8,.3,1) both}
@keyframes wwSonneSteigt{from{transform:translate(-50%,40vh)}to{transform:translateX(-50%)}}
.wwsieg.dorf .wwsg-feld{position:absolute;left:0;right:0;bottom:0;height:28vh;z-index:2;
  background:repeating-linear-gradient(95deg,#C8962F 0 6px,#DDAE45 6px 11px,#B98529 11px 15px);
  mask-image:linear-gradient(180deg,transparent,#000 22%);-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%)}
.wwsieg.dorf .wwsg-gabeln{position:absolute;left:0;right:0;bottom:-2vh;height:50vh;z-index:3;display:flex;justify-content:space-around;align-items:flex-end;padding:0 6vw}
.wwsieg.dorf .wwsg-gabel{width:clamp(34px,4vw,60px);height:100%;transform-origin:50% 100%;animation:wwGabelHoch 1.2s cubic-bezier(.2,1.3,.4,1) backwards,wwGabelWinken 1.3s ease-in-out infinite alternate}
.wwsieg.dorf .wwsg-gabel svg{width:100%;height:100%;overflow:visible}
@keyframes wwGabelHoch{from{transform:translateY(60vh)}to{transform:none}}
@keyframes wwGabelWinken{from{rotate:-7deg}to{rotate:7deg}}
.wwsieg.dorf .wwsg-titel{color:#3B1C05;text-shadow:0 2px 0 rgba(255,236,190,.6)}
.wwsieg.dorf .wwsg-text{margin-top:-18vh}
.wwsieg.dorf .wwsg-leute .avatar{border-color:#6B3A12}
/* Herzen */
.wwsieg.liebe{background:radial-gradient(80% 70% at 50% 45%,#7A2A5E 0%,#3A1440 60%,#150820 100%);color:#FFE6F2;
  flex-direction:column;gap:clamp(14px,3vh,34px)}
.wwsieg.liebe .wwsg-paar{position:relative;z-index:4;display:flex;align-items:center;gap:clamp(18px,3vw,50px)}
.wwsieg.liebe .wwsg-paar .avatar{width:min(22vh,190px);height:min(22vh,190px);flex:0 0 auto;border:6px solid #FF7AB0;font-size:60px;
  box-shadow:0 0 60px rgba(255,120,180,.55);animation:einZoom .9s .2s cubic-bezier(.2,1.4,.4,1) backwards}
.wwsieg.liebe .wwsg-paar .avatar:last-child{animation-delay:.45s}
.wwsieg.liebe .wwsg-herz{width:min(14vh,120px);height:min(14vh,120px);animation:wwHerzPoch 1.1s ease-in-out infinite}
.wwsieg.liebe .wwsg-herz path{fill:#FF4F8B}
@keyframes wwHerzPoch{0%,100%{transform:scale(1)}15%{transform:scale(1.18)}30%{transform:scale(1)}45%{transform:scale(1.12)}}
.wwsieg.liebe .wwsg-text{animation-delay:1.4s}
.wwsieg.liebe .wwsg-titel{color:#FF8FC0;text-shadow:0 0 26px rgba(255,100,170,.6)}
/* Niemand */
.wwsieg.keiner{background:radial-gradient(70% 60% at 50% 50%,#2A2F45,#0B0D18);color:#DCE0EE}

/* ---------- Einstellungen ---------- */
.wwrollenwahl{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
.wwrollenwahl label{display:flex;align-items:flex-start;gap:8px;margin:0;padding:7px 9px;border-radius:9px;border:1px solid var(--kante);
  background:var(--panel);color:var(--text);font-size:14px;cursor:pointer}
.wwrollenwahl label input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--licht);flex:0 0 auto}
.wwrollenwahl label small{display:block;color:var(--gedaempft);font-size:12px;line-height:1.3;margin-top:1px}
.wwrollenwahl label.aus{opacity:.6}
.wwreihenfolge{display:flex;flex-direction:column;gap:4px}
.wwreihenfolge .wwrf-zeile{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;border:1px solid var(--kante);background:var(--panel);font-size:14px}
.wwreihenfolge .wwrf-zeile .nr{width:1.6em;text-align:right;color:var(--gedaempft);font-variant-numeric:tabular-nums}
.wwreihenfolge .wwrf-zeile .wer{flex:1}
.wwreihenfolge .wwrf-zeile button{padding:2px 9px;border-radius:6px;border:1px solid var(--kante);color:var(--gedaempft)}
.wwreihenfolge .wwrf-zeile button:hover:not(:disabled){border-color:var(--licht-tief);color:var(--text)}
.wwreihenfolge .wwrf-zeile button:disabled{opacity:.3}
.wwreihenfolge .wwrf-zeile small{color:var(--gedaempft);font-size:12px}
.wwtoene{display:flex;flex-direction:column;gap:6px}
.wwtoene .wwton-zeile{display:grid;grid-template-columns:130px minmax(0,1fr) auto auto;gap:6px;align-items:center}
.wwtoene .wwton-zeile span{font-size:13.5px}
.wwtoene .wwton-zeile input{padding:6px 8px;font-size:13px}
.wwtoene .wwton-zeile button{padding:6px 9px}
.wwhaken{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.wwhaken label{display:flex;align-items:flex-start;gap:8px;margin:0;color:var(--text);font-size:14px;cursor:pointer}
.wwhaken label input{width:17px;height:17px;margin:2px 0 0;accent-color:var(--licht);flex:0 0 auto}
.wwhaken label small{display:block;color:var(--gedaempft);font-size:12.5px;line-height:1.35}
.wwwarnung{margin:8px 0 0;padding:7px 10px;border-radius:8px;border:1px solid var(--licht-tief);background:color-mix(in srgb,var(--licht) 10%,transparent);font-size:13px;color:var(--text)}

@media (max-width:1100px){
  .wwmeins{grid-template-columns:auto minmax(0,1fr)}
  .wwmeins .wwm-seite{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap}
  .wwreime{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .wwkachel,.wwportrait,.wwgestirn{transition:none!important}
  .wwaufruf,.wwkratzer,.wwfadenkreuz,.wwrauch,.wwfeuer,.wwmedaille,.wwherzbruch{display:none!important}
}