/* Einblendungen ueber dem Spielfeld: Emote-Rad, Banner/Toast, Zug-Banner,
   Herzverlust-Panel, Modus-Titelkarte, Zuschauer-Item-Tray. */

/* --- Emote-Rad (unten rechts am Spielfeldrand) --- */
.emote-wheel{
  position:absolute;
  right:14px; bottom:14px;
  z-index:6;
  width:58px; height:58px;
}
.emote-wheel[hidden]{ display:none !important; }
.emote-toggle{
  position:absolute; right:0; bottom:0;
  width:58px; height:58px;
  box-sizing:border-box; padding:0;
  border-radius:50%;
  border:2px solid var(--line);
  background:rgba(12,18,28,.9);
  color:#fff; font-size:30px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.5);
  transition:transform .15s ease, background .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.emote-toggle:hover{ transform:scale(1.08); background:rgba(22,30,44,.95); }
.emote-wheel.open .emote-toggle{ transform:rotate(-14deg) scale(1.06); background:rgba(22,30,44,.98); }

/* Bogen geht vom Mittelpunkt des Toggles aus (29px vom unteren rechten Eck). */
.emote-fan{ position:absolute; right:29px; bottom:29px; width:0; height:0; }
.emote-btn{
  position:absolute; right:0; bottom:0;
  width:52px; height:52px;
  box-sizing:border-box; padding:0;
  border-radius:50%;
  border:2px solid var(--line);
  background:rgba(16,24,38,.96);
  color:#fff; font-size:28px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; overflow:hidden;
  box-shadow:0 3px 12px rgba(0,0,0,.5);
  /* Position (translate) und Zoom (scale) sind BEWUSST getrennte Eigenschaften statt eines
     gemeinsamen transform: So ändert ein Hover mitten im Ausfahren nur die Größe und startet
     nicht die laufende Positions-Transition neu – samt Staffel-Verzögerung, wodurch genau der
     Knopf unter dem Zeiger (meist der zuletzt geklickte) sichtbar nachhinkte. */
  --i:0; --x:0px; --y:0px;          /* Fallbacks; die echten Werte setzt buildEmoteWheel() inline */
  --d:calc(var(--i) * .026s);       /* gestaffelter Start je Knopf */
  translate:50% 50%;
  scale:.2;
  opacity:0; pointer-events:none;
  transition:
    translate .24s cubic-bezier(.34,1.56,.64,1) var(--d),
    scale .24s cubic-bezier(.34,1.56,.64,1) var(--d),
    opacity .16s ease var(--d),
    background .15s ease, border-color .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.emote-btn img{
  width:100%; height:100%;
  border-radius:50%; object-fit:cover; display:block;
  pointer-events:none;
}
.emote-wheel.open .emote-btn{
  translate:calc(50% + var(--x)) calc(50% + var(--y));
  scale:1;
  opacity:1; pointer-events:auto;
}
/* Beim Hovern deutlich vergrößern und nach vorne holen – nur die Größe, ohne Versatz,
   damit es sofort reagiert und die Position unangetastet bleibt. Nur für echte Zeigegeräte:
   auf Touch bliebe der zuletzt angetippte Knopf sonst „hängend" hovered. */
@media (hover:hover) and (pointer:fine){
  .emote-wheel.open .emote-btn:hover{
    scale:1.42;
    background:rgba(34,48,70,.98);
    border-color:#fff;
    z-index:2;
    box-shadow:0 6px 18px rgba(0,0,0,.6);
    transition-delay:0s;
  }
}
/* Druck-Feedback (auch auf Touch, wo es keinen Hover gibt) */
.emote-wheel.open .emote-btn:active{ scale:1.18; transition-delay:0s; }
/* Kleine Screens: gesamtes Rad verkleinern, damit der Bogen nicht abgeschnitten wird. */
@media (max-width:600px), (max-height:560px){
  .emote-wheel{ transform:scale(.72); transform-origin:bottom right; }
  #specTray{ transform:scale(.72); transform-origin:bottom left; }   /* analog zum Emote-Rad, gespiegelt */
}

/* Sitzt über der Bühne (nicht darin): zwischen Titel und Spielfeld im freien dunklen
   Bereich. Dadurch verdeckt es keine Kachel – auch keine in der obersten Reihe.
   margin-bottom hält den Abstand zum Feldrand. */
#banner{
  align-self:center;
  flex:none;
  margin:0 0 8px;
  font-family:var(--display);
  font-weight:900;
  font-size:15px;
  letter-spacing:.4px;
  padding:7px 18px;
  border-radius:999px;
  background:rgba(12,18,28,.92);
  border:3px solid var(--line);
  text-shadow:0 2px 0 rgba(0,0,0,.4);
  box-shadow:0 4px 0 rgba(0,0,0,.4), 0 6px 16px rgba(0,0,0,.4);
  backdrop-filter:blur(4px); white-space:nowrap; pointer-events:none;
  max-width:95%; overflow:hidden; text-overflow:ellipsis;
  /* Übergabe an das Zug-Banner: gleiche Kurve/Dauer wie dessen .show-Transition,
     damit sich beide wie EIN auf-/zuklappendes Element bewegen. */
  transition:transform .32s cubic-bezier(.3,1.6,.5,1), opacity .18s ease;
}
@keyframes bannerPop{
  0%{transform:scale(.7) rotate(-3deg)}
  55%{transform:scale(1.14) rotate(2deg)}
  75%{transform:scale(.96) rotate(-1deg)}
  100%{transform:scale(1) rotate(0)}
}
#banner.pop{animation:bannerPop .4s cubic-bezier(.3,1.5,.5,1)}
/* Das Zug-Banner poppt direkt darunter auf ⇒ das Pill schrumpft ihm entgegen
   (nach unten, kleiner, weg) und wächst nach dessen Ausblenden wieder heraus. */
#banner.handoff{ transform:translateY(16px) scale(.4); opacity:0; }
#banner.handoff.pop{ animation:none; }   /* kein Pop, solange die Karte übernommen hat */


/* --- Deathmatch-Schonfrist: Dauer-Hinweis oben links am Spielfeld ---
   Sichtbar, solange die Grace-Period läuft (alle Murmeln sind Geister, die Arena wartet). */
#graceBadge{
  position:absolute; top:10px; left:10px; z-index:5;
  display:flex; align-items:center; gap:8px;
  padding:6px 13px 6px 9px; border-radius:999px;
  background:rgba(12,18,28,.92); border:2px solid #9fd0ff;
  box-shadow:0 4px 0 rgba(0,0,0,.35), 0 6px 16px rgba(0,0,0,.45);
  backdrop-filter:blur(4px); pointer-events:none; white-space:nowrap;
  animation:graceIn .35s cubic-bezier(.3,1.5,.5,1);
}
#graceBadge[hidden]{ display:none !important; }
#graceBadge .gb-ico{ font-size:20px; line-height:1; animation:graceFloat 2.4s ease-in-out infinite; }
#graceBadge .gb-txt{ display:flex; flex-direction:column; line-height:1.15; }
#graceBadge b{ font-family:var(--display); font-size:12.5px; letter-spacing:.3px; color:#e8f3ff; }
#graceBadge i{ font-style:normal; font-size:11px; color:#9fb6cc; }
@keyframes graceFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-3px) } }
@keyframes graceIn{ 0%{ opacity:0; transform:translateX(-10px) scale(.85) } 100%{ opacity:1; transform:none } }
@media (max-width:600px), (max-height:560px){
  #graceBadge{ padding:4px 10px 4px 7px; gap:6px; }
  #graceBadge .gb-ico{ font-size:16px; }
  #graceBadge b{ font-size:11px; } #graceBadge i{ font-size:10px; }
}

#turnBanner{
  position:fixed; top:80px; left:50%; transform:translate(-50%,-20px) scale(0.8);
  background:rgba(10,15,24,.92); border:3px solid var(--line); border-radius:24px;
  padding:20px 36px; text-align:center; font-family:var(--display);
  box-shadow:0 8px 0 rgba(0,0,0,.35), 0 12px 40px rgba(0,0,0,.6); opacity:0; pointer-events:none;
  transition:opacity .2s, transform .32s cubic-bezier(.3,1.6,.5,1); z-index:100; display:flex; flex-direction:column; gap:8px;
}
#turnBanner.show{opacity:1; transform:translate(-50%,0) scale(1)}
#turnBanner.final{
  border-color:var(--p1) !important;
  box-shadow:0 0 50px rgba(255,93,93,0.4), 0 12px 40px rgba(0,0,0,0.6);
  animation: finalPulse 0.45s ease infinite alternate;
}
@keyframes finalPulse {
  from { transform: translate(-50%,0) scale(1); }
  to { transform: translate(-50%,0) scale(1.08); }
}
.tb-title{font-size:28px; font-weight:900; letter-spacing:1px; text-shadow:0 2px 8px rgba(0,0,0,.5)}
.tb-turns{font-family:var(--body); font-size:16px; font-weight:600; color:var(--muted)}
/* Deathmatch: große Herzen im „Du bist dran"-Banner */
.tb-hearts{display:flex; gap:8px; justify-content:center; align-items:center}
.tb-heart{
  font-size:34px; line-height:1; color:#ff2d55; display:inline-block; transform-origin:center;
  text-shadow:0 0 10px rgba(255,45,85,.6), 0 2px 3px rgba(0,0,0,.5);
}
.tb-heart.lost{color:rgba(255,255,255,.16); text-shadow:none}
.tb-heart.last{animation:heart-pulse .85s ease-in-out infinite}
.tb-livelbl{font-family:var(--body); font-size:14px; font-weight:700; color:var(--muted); margin-top:2px}
/* Takeover: Kacheln statt Herzen – dieselbe Anordnung, laufen zum Rundenende aus */
.tb-tiles{display:flex; gap:8px; justify-content:center; align-items:center}
.tb-tile{
  width:30px; height:30px; border-radius:9px; background:var(--tc);
  box-shadow:0 3px 0 rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.3);
}
.tb-tile.spent{background:rgba(255,255,255,.13); box-shadow:none}

/* Großes mittiges Cartoon-Panel beim Herzverlust: zeigt alle Herzen, die der Spieler HATTE.
   Das verlorene bläht sich kurz auf (Squash), schrumpft dann ein und wird schwarz („geht ein"). */
.heartFx{
  position:fixed; inset:0; z-index:200; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  animation:hlx-fade 1.5s ease both;
}
@keyframes hlx-fade{0%{opacity:0}6%{opacity:1}80%{opacity:1}100%{opacity:0}}
.heartFx .hlx-panel{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:22px 34px 18px; border-radius:28px;
  background:linear-gradient(180deg, rgba(30,38,58,.94), rgba(10,15,26,.95));
  border:4px solid #fff;
  box-shadow:0 10px 0 rgba(0,0,0,.4), 0 22px 50px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,255,255,.2);
  animation:hlx-pop .55s cubic-bezier(.18,1.7,.5,1) both;
}
@keyframes hlx-pop{
  0%  {transform:scale(.4)  rotate(-7deg); opacity:0}
  55% {transform:scale(1.12) rotate(3deg); opacity:1}
  75% {transform:scale(.96) rotate(-1deg)}
  100%{transform:scale(1)   rotate(0);    opacity:1}
}
.heartFx .hlx-row{display:flex; gap:16px; align-items:center; justify-content:center}
/* Überlebende Herzen: prall, weiße Cartoon-Kontur, lebendiger Wackler */
.heartFx .hlx-keep{
  font-size:74px; line-height:1; color:#ff3b5c; display:inline-block; transform-origin:center;
  text-shadow:0 3px 0 rgba(0,0,0,.35), 0 0 18px rgba(255,60,100,.7);
  -webkit-text-stroke:3px #fff;
  animation:hlx-bob .9s ease-in-out infinite;
}
@keyframes hlx-bob{0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-5px) scale(1.06)}}
/* Verlorenes Herz: erst erschrockener Squash, dann schrumpft es ein & wird schwarz (bleibt sichtbar) */
.heartFx .hlx-die{
  font-size:74px; line-height:1; color:#ff3b5c; display:inline-block; transform-origin:50% 62%;
  -webkit-text-stroke:3px #fff;
  animation:hlx-die 1.2s cubic-bezier(.5,0,.3,1) both;
}
@keyframes hlx-die{
  0%  {transform:scale(1,1)      rotate(0);     color:#ff3b5c; -webkit-text-stroke-color:#fff}
  13% {transform:scale(1.38,.74) rotate(0);     color:#ff8199}   /* Squash – „bäm!" */
  29% {transform:scale(.78,1.3)  rotate(-5deg); color:#ff3b5c}   /* Stretch nach oben */
  45% {transform:scale(1.1,.9)   rotate(6deg);  color:#e23a55}   /* Wackler */
  72% {transform:scale(.5,.5)    rotate(-3deg); color:#5a1f2b}   /* schrumpft, dunkelt ab */
  100%{transform:scale(.28,.28) translateY(8px) rotate(2deg); color:#0c0c0e; -webkit-text-stroke-color:rgba(255,255,255,.5)}
}
/* Spielername darunter – Cartoon-Font mit kräftiger Kontur */
.heartFx .hlx-name{
  font-family:var(--display); font-size:25px; font-weight:900; letter-spacing:.5px;
  text-shadow:0 3px 0 rgba(0,0,0,.5), 0 0 10px rgba(0,0,0,.45);
  animation:hlx-name 1.5s ease both;
}
@keyframes hlx-name{
  0%  {opacity:0; transform:translateY(12px) scale(.6)}
  22% {opacity:1; transform:translateY(0) scale(1.12)}
  34% {transform:scale(1)}
  82% {opacity:1}
  100%{opacity:0; transform:translateY(-6px) scale(.96)}
}

/* --- Titelkarte zum Rundenstart (Spielmodus) ---
   Kurzer Auftritt beim Spielstart: Panel federt herein, ein Glanz wischt darüber, die Icons
   poppen gestaffelt nach, dann blendet alles aus. Gesamtdauer = MODE_CARD_MS in ui.js –
   beide Werte gehören zusammen, beim Ändern also gemeinsam anpassen. */
.modeCard{
  position:fixed; inset:0; z-index:190; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(58% 46% at 50% 50%, rgba(6,10,18,.82), rgba(6,10,18,.6));
  animation:mc-fade 3.2s ease both;
}
/* Auftritt und Abgang bleiben knackig – verlängert wird nur die Standzeit dazwischen. */
@keyframes mc-fade{0%{opacity:0} 4%{opacity:1} 85%{opacity:1} 100%{opacity:0}}
.modeCard .mc-panel{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:24px 52px 26px; border-radius:26px;
  background:linear-gradient(180deg, rgba(30,38,58,.96), rgba(10,15,26,.97));
  border:4px solid var(--p0);
  box-shadow:0 12px 0 rgba(0,0,0,.4), 0 26px 60px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.18);
  animation:mc-pop .6s cubic-bezier(.18,1.6,.5,1) both;
}
.modeCard.dm .mc-panel{border-color:var(--p1)}
@keyframes mc-pop{
  0%  {transform:scale(.55) rotate(-6deg); opacity:0}
  55% {transform:scale(1.08) rotate(2deg); opacity:1}
  78% {transform:scale(.98) rotate(-1deg)}
  100%{transform:scale(1) rotate(0)}
}
/* Glanzstreifen, der einmal quer über das Panel läuft */
.modeCard .mc-panel::after{
  content:''; position:absolute; top:-40%; bottom:-40%; width:70px; left:-40%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.26), transparent);
  transform:skewX(-18deg); animation:mc-shine 1s .4s ease-out both;
}
@keyframes mc-shine{from{left:-40%} to{left:140%}}
.modeCard .mc-kicker{
  font-family:var(--display); font-weight:900; font-size:12px; letter-spacing:4px;
  text-transform:uppercase; color:var(--muted); animation:mc-rise .5s .1s ease both;
}
.modeCard .mc-title{
  font-family:var(--display); font-weight:900; letter-spacing:2px; line-height:1.05;
  font-size:clamp(34px,7vw,60px); color:var(--p0);
  text-shadow:0 4px 0 rgba(0,0,0,.45), 0 0 30px rgba(77,163,255,.55);
  animation:mc-rise .55s .16s cubic-bezier(.2,1.5,.4,1) both;
}
.modeCard.dm .mc-title{color:var(--p1); text-shadow:0 4px 0 rgba(0,0,0,.45), 0 0 30px rgba(255,93,93,.6)}
.modeCard .mc-sub{
  font-family:var(--body); font-size:15px; font-weight:700; color:var(--ink); opacity:.85;
  animation:mc-rise .5s .34s ease both;
}
@keyframes mc-rise{from{opacity:0; transform:translateY(14px) scale(.9)} to{opacity:1; transform:none}}
.modeCard .mc-icons{display:flex; gap:10px; align-items:center; margin:6px 0 2px}
.modeCard .mc-ico{animation:mc-ico .45s .2s cubic-bezier(.2,1.7,.4,1) both}
.modeCard .mc-ico:nth-child(2){animation-delay:.29s}
.modeCard .mc-ico:nth-child(3){animation-delay:.38s}
@keyframes mc-ico{
  from{opacity:0; transform:translateY(-16px) scale(.4) rotate(-12deg)}
  to  {opacity:1; transform:none}
}
.modeCard .mc-heart{
  font-size:30px; line-height:1; color:#ff2d55;
  text-shadow:0 0 12px rgba(255,45,85,.6), 0 2px 3px rgba(0,0,0,.5);
}
.modeCard .mc-tile{
  width:28px; height:28px; border-radius:8px; background:var(--c);
  box-shadow:0 3px 0 rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.3);
}
/* Wer Animationen reduziert haben will, bekommt die Karte statisch – aber sichtbar.
   Bewusst animation:none statt einer Mini-Dauer: Mit fill-mode „both" würde die Karte sonst
   direkt im Endzustand (opacity:0) landen und wäre unsichtbar. Entfernt wird sie ohnehin
   über den Timer in ui.js. */
@media (prefers-reduced-motion:reduce){
  .modeCard, .modeCard *{animation:none !important}
  .modeCard .mc-panel::after{display:none}
}

/* Zuschauer-Item-Lade-UI: untere linke Ecke des Canvas – gespiegelt zum Emote-Button (unten rechts).
   column-reverse ⇒ der Lade-Ring sitzt bündig in der Ecke, der Hinweis erscheint darüber. */
#specTray{
  position:absolute; left:14px; bottom:14px; z-index:9;
  width:auto;
  display:flex; flex-direction:column-reverse; align-items:flex-start; gap:8px;
  pointer-events:none;
}
#specTray[hidden]{ display:none !important; }
.spec-ring {
  --p: 0;
  width: 74px; height: 74px; border-radius: 50%;
  padding: 7px;
  background: rgba(255,255,255,.10);
  box-shadow: 0 6px 22px rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  transition: filter .2s;
}

.spec-item {
  position: relative; overflow: hidden; isolation: isolate;
  width: 100%; height: 100%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 31px;
  background: radial-gradient(circle at 50% 38%, #223049, #131c2c 80%);
  cursor: default; touch-action: none; pointer-events: auto; user-select: none;
}
.spec-item::before{
  content: ""; position: absolute; left: -26%; right: -26%; top: 0; bottom: 0;
  background:
          linear-gradient(to top,
          rgba(255, 176, 36, 0.95) 0%,
          rgba(255, 201, 60, 0.82) 55%,
          rgba(255, 226, 128, 0.72) 100%);
  border-radius: 46% 46% 0 0 / 22px 22px 0 0;
  transform: scaleY(var(--p));
  transform-origin: 50% 100%;
  animation: specLiquidSway 3.1s ease-in-out infinite;
  will-change: transform; z-index: 1;
}
.spec-item::after{
  content: ""; position: absolute; left: -26%; right: -26%; top: 0; bottom: 0;
  background: linear-gradient(to top, transparent 87%, rgba(255, 244, 200, 0.95) 100%);
  border-radius: 46% 46% 0 0 / 22px 22px 0 0;
  transform: scaleY(var(--p));
  transform-origin: 50% 100%;
  animation: specLiquidWave 2.3s ease-in-out infinite;
  will-change: transform; opacity: .9; z-index: 1;
}
.spec-item-canvas{
  position: relative; z-index: 2;
  width: 100%; height: 100%; pointer-events: none;
}
.spec-item.ready{
  cursor:grab;
  box-shadow:0 0 0 3px rgba(255,201,60,.18), inset 0 0 14px rgba(255,201,60,.15);
  animation:specBob 1.1s ease-in-out infinite;
}
.spec-item.ready:active{cursor:grabbing}
@keyframes specPop{
  0%{transform:scale(.2) rotate(-25deg); opacity:0}
  60%{transform:scale(1.25) rotate(8deg); opacity:1}
  100%{transform:scale(1) rotate(0)}
}
.spec-item.pop{animation:specPop .5s cubic-bezier(.3,1.5,.5,1)}
.spec-hint{
  font-size:12px; font-weight:800; color:var(--p2);
  background:rgba(20,30,48,.9); padding:4px 10px; border-radius:10px;
  white-space:nowrap; box-shadow:0 3px 12px rgba(0,0,0,.4);
}
@keyframes specBob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
@keyframes specLiquidSway{
  0%,100%{ transform: translateX(-4%) scaleY(var(--p)); }
  50%{ transform: translateX(4%) scaleY(var(--p)); }
}
@keyframes specLiquidWave{
  0%,100%{ transform: translateX(-8%) scaleY(var(--p)); }
  50%{ transform: translateX(8%) scaleY(var(--p)); }
}
.spec-ghost{
  position:fixed; z-index:9999; pointer-events:none;
  transform:translate(-50%,-50%); width:56px; height:56px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.55));
}