/* ===== V166 ===== */

@font-face {
  font-family: "MADE Tommy";
  src: url("fonts/MADE TOMMY Medium_PERSONAL USE.otf") format("opentype");
  font-weight: 800;
  font-style: normal;

  /* verhindert „Fallback erst anzeigen -> dann swap“ */
  font-display: block;
}


:root{
  --bg: #141235;
  --panel: rgba(0,0,0,0.55);
  --accent: rgba(0,170,255,0.92);
  --accent2: rgba(255,240,0,0.92);
  --danger: rgba(231, 76, 60, 0.92);
  --text: #ffffff;
  --top-mode-x: 156px;
  --top-mode-y: 38px;

  --top-round-x: 389px;
  --top-round-y: 38px;
}

*{ box-sizing:border-box; }

html, body{
  width:100%;
  height:100%;
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: "MADE Tommy", Arial, sans-serif;
}

/* Standard: Moderator darf scrollen */
body{ overflow-y: auto; }

/* Player-Tab: weiterhin kein Scrollen */
body.player-view{ overflow: hidden; }


/* ===== Overlay_BG Layer (liegt ÜBER den Cams) ===== */
/* Wir nutzen NICHT mehr body::before, sondern ein echtes Layer-DIV im Player-Stack,
   damit es zwischen Cams und Overlay-layer liegen kann. */
body::before{
  content:"";
  display:none !important;
}

#overlay-bg-layer{
  position: fixed;
  inset: 0;
  background: url("Bilder/Overlay_BG.png") center/100% 100% no-repeat;
  z-index: 61;          /* ÜBER BG_Feld (60), UNTER #overlay-layer (62) */
  pointer-events: none;
  display: none;        /* nur im Player-View sichtbar */
}

#bg-feld-layer{
  position: fixed;
  inset: 0;
  background: url("Bilder/BG_Feld.png") center/100% 100% no-repeat;
  z-index: 60;          /* UNTER Overlay_BG / Overlay_Auflösung */
  pointer-events: none;
  display: none;        /* nur im Player-View sichtbar */
}

body.player-view #overlay-bg-layer,
body.player-view #bg-feld-layer{
  display: block;
}

/* V45: Wenn in Erkennen/Wissen die Auflösung aktiv ist, anderes BG verwenden */
body.player-view.resolution-bg #overlay-bg-layer{
  background-image: url("Bilder/Overlay_Auflösung.png");
}


.ui-btn{
  padding: 10px 18px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: var(--accent);
  color:#fff;
  font-weight:800;
  cursor:pointer;
  letter-spacing:0.02em;
}

.ui-btn.secondary{ background: rgba(255,255,255,0.10); }
.ui-btn.primary{ background: var(--danger); }

.ui-btn:active{ transform: translateY(1px); }

#topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 12px 14px;
  z-index: 100;            /* MUSS über Overlay liegen */
  display: none; /* nur im Player-View */
  align-items: center;
  justify-content: flex-end; /* Button nach ganz rechts */
  gap: 10px;
}

/* V47: Mode/Runde im Player-View ohne Rahmen, pixelgenau, zentriert um X */
#top-mode-text,
#top-round-text{
  position: fixed;
  z-index: 100;            /* MUSS über Overlay liegen */
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: none;    /* falls du Caps nicht willst */
  background: none;
  border: 0;
  padding: 0;
  pointer-events: none;    /* klickt sich durch */
  transform: translateX(-50%); /* X ist die Mitte */
  text-align: center;
}


#top-mode-text{
  left: var(--top-mode-x);
  top: var(--top-mode-y);
  font-size: 28px; /* hier stellst du Size ein */
}

#top-round-text{
  left: var(--top-round-x);
  top: var(--top-round-y);
  font-size: 28px; /* hier stellst du Size ein */
}


body.player-view #topbar{ display: flex; }

#view-toggle-top{
  position: static; /* kommt jetzt aus #topbar */
  z-index: auto;
  display: block;
}

/* Modus/Runde nicht mehr im rechten Panel-Header anzeigen */
body.player-view .hints-header{ display:none; }



/* ===== Player View Layout ===== */
#players-section{
  width:100%;
  height:100%;
  display:none; /* nur im Player-View */
  position:relative;
  padding: 2vh 2vw;
  isolation: isolate; /* eigener Stacking-Context */
  z-index: 1; /* über Overlay_BG */
}


/* ===== Umschalten Mod <-> Player ===== */
body.player-view #players-section{ display:block; }
body.player-view #moderator-panel{ display:none; }
body.player-view #view-toggle-top{ display:block; }


/* ===== Player Overlay (liegt über Cams, aber unter allen UI-Elementen) ===== */
#overlay-layer{
  position: fixed;
  inset: 0;
  background: url("Bilder/Overlay.png") center/100% 100% no-repeat;
  z-index: 62; /* über #entries-layer(60), unter Schreibfeld(2000) */

  pointer-events: none;  /* klickt sich durch */
}

body.player-view.mode-ausdenken #overlay-layer{
  background-image: url("Bilder/Overlay_Ausdenken.png");
}



/* ===== Fakten-Royale Grid: ÜBER Overlay rendern ===== */
#fakten-grid{
  position: fixed;
  inset: 0;
  z-index: 80;          /* > overlay-layer(20), < topbar(60) */
  display: none;        /* nur im Fakten-Modus im Player-View */
  pointer-events: none; /* Grid selbst frisst keine Klicks */
}

/* nur im Player-View + Fakten-Modus sichtbar */
body.player-view.mode-fakten #fakten-grid{
  display: block;
}

/* Klicks sollen trotzdem auf die Zellen gehen */
body.player-view.mode-fakten #fakten-grid .fakten-cell{
  pointer-events: auto;
}


/* ===== Fullscreen Layer für Einträge (Erkennen + Denken) ===== */
#entries-layer{
  position: fixed;
  inset: 0;
  z-index: 70;          /* ÜBER #overlay-layer (62) */
  display: none;        /* nur in den 2 Modi im Player-View */
  pointer-events: none; /* Layer frisst keine Klicks */
}

/* ===== Fullscreen Layer nur für Votes (Denken) ===== */
#entries-layer-votes{
  position: fixed;
  inset: 0;
  z-index: 50;          /* UNTER #overlay-layer (62) */
  display: none;        /* nur im Denken-Modus im Player-View */
  pointer-events: auto; /* WICHTIG: Vote-Buttons müssen klickbar sein */
}


body.player-view.mode-ausdenken #entries-layer,
body.player-view.mode-erkennen  #entries-layer{
  display: block;
}

body.player-view.mode-ausdenken #entries-layer-votes{
  display: block;
}






#players{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* kein flex mehr – einzelne Player werden absolut positioniert */
}

/* ===== Pixelgenaue Positionierung pro Teilnehmer-Cam ===== */
#players .player{
  position: absolute;
}

/* Default-Positionen (anpassen wie du willst) */
#players .player[data-player="1"]{ left: 28px;  top: 778px; }
#players .player[data-player="2"]{ left: 503px; top: 778px; }  /* 28 + 440 + 20 */
#players .player[data-player="3"]{ left: 980px; top: 778px; }
#players .player[data-player="4"]{ left: 1455px; top: 778px; }

#players{ z-index: 10; }
#player-mod-cam{ z-index: 10; } /* war 10, bleibt, nur explizit */


.player{ display:flex; }

.cam-frame{
  background:#000;
  border:0px solid #00aaff;
  border-radius:0;     /* keine Rundung */
  overflow:hidden;    /* bleibt wichtig fürs Cropping */
  position:relative;
  box-shadow:0 0 12px rgba(0,170,255,0.45);
}


.player-cam{
  width: 440px;
  height: 278px;
}

.video-box{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
}

.player-cam .video-box iframe,
.player-cam .video-box video{
  width:100%;
  height:100%;
  border:0;
  object-fit:cover;
  pointer-events:none;
}

.info-badge{
  position:absolute;
  background: var(--accent);
  padding: 5px 12px;
  border-radius:999px;
  border:2px solid #fff;
  font-weight:800;
  font-size:15px;
  text-transform: uppercase;
  left:50%;
  bottom: 15px;
  transform: translateX(-50%);
  white-space:nowrap;
}

/* V84: Badge-Anker, damit Pop/Scale sich unten mittig aufbaut (ohne "translateX(-50%)" mitzuskalen) */
#players .badge-anchor{
  position: absolute;
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
  z-index: 3;
}

/* Inneres Badge: keine absolute Zentrier-Transforms mehr (sonst wirkt Pop "von rechts unten") */
#players .badge-anchor .info-badge{
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
}


/* ===== V47: Buzzer (oben rechts in jeder Cam) ===== */
.buzzer-btn{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 80;                 /* über Video + Overlay-Layer */
  padding: 10px 14px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.85);
  background: rgba(255,0,0,0.92);
  color: #ffffff;
  font-weight: 900;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(255,240,0,0.35);
}

.buzzer-btn:active{ transform: translateY(1px); }

.buzzer-btn.is-disabled{
  opacity: 0.28;
  cursor: not-allowed;
  filter: grayscale(1);
  box-shadow: none;
}

/* ===== V47: Ergebnis-Anzeige über Moderator-Cam ===== */
#buzzer-results{
  position: absolute;
  left: 23px;
  top: 105px;

  width: 448px;     /* FIX */
  height: 332px;    /* FIX */

  z-index: 9;
  pointer-events: none;
  display: none;
}


body.player-view #buzzer-results{ display: block; }

.buzzer-card{
  width: 100%;
  height: 100%;

  background: rgba(0,0,0,0.3);
  border: 0;
  padding: 12px 14px;
  box-shadow: 0 0 18px rgba(0,0,0,0.35);

  display: flex;
  flex-direction: column;
  justify-content: center;   /* Text vertikal schön mittig */
}


.buzzer-title{
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.95;
  margin-bottom: 16px;
  text-align: center;
}

/* ===== Vxx: Warten-Animation im Buzzer-Startzustand ===== */
.buzzer-wait{
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.95;
  text-align: center;
}

.buzzer-dots{
  display: inline-block;
  width: 44px;            /* verhindert "springenden" Text */
  text-align: left;
  margin-left: 6px;
}

.buzzer-dots .dot{
  display: inline-block;
  opacity: 0.15;
  animation: buzzerDotPulse 1.2s infinite;
}

.buzzer-dots .dot:nth-child(2){ animation-delay: 0.2s; }
.buzzer-dots .dot:nth-child(3){ animation-delay: 0.4s; }

@keyframes buzzerDotPulse{
  0%   { opacity: 0.15; transform: translateY(0px); }
  35%  { opacity: 1.0;  transform: translateY(-1px); }
  70%  { opacity: 0.15; transform: translateY(0px); }
  100% { opacity: 0.15; transform: translateY(0px); }
}


.buzzer-list{
  display: grid;
  gap: 12px;
}

/* V50: Zeile mit transparentem Feld + Umrandung (wie Screenshot) */
.buzzer-row{
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 130px;
  gap: 28px;
  align-items: center;

  /* Zeile selbst schmaler im großen Feld */
  width: 96%;               /* <- macht die Zeile kürzer nach außen */
  margin: 0 auto;          /* <- zentriert die schmalere Zeile im Feld */

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 12px;
  padding: 6px 12px;

  font-size: 20px;
  font-weight: 900;
  opacity: 0.98;
}

/* V52: Glow für schnellsten Buzzer (blau: rgb(61,127,216)) */
.buzzer-row.is-fastest{
  border-color: rgba(61, 127, 216, 0.95);
  box-shadow:
    0 0 0 2px rgba(61, 127, 216, 0.45),
    0 0 12px rgba(61, 127, 216, 0.75),
    inset 0 0 12px rgba(61, 127, 216, 0.30);
  background: linear-gradient(
    180deg,
    rgba(61, 127, 216, 0.22),
    rgba(61, 127, 216, 0.08)
  );
}

/* V53: Spieler hatte "Falsch" -> Zeile ausgrauen */
.buzzer-row.is-wrong{
  opacity: 0.28;
  filter: grayscale(1);
}


/* 1. Spalte: links */
.buzzer-rank{
  width: 75%;
  text-align: left;
  text-transform: uppercase;
  opacity: 0.95;
}

/* 2. Spalte: mittig im Feld */
.buzzer-name{
  width: 100%;
  text-align: left;
  text-transform: uppercase;
}

/* 3. Spalte: rechts im Feld (Zeit ganz rechts) */
.buzzer-time{
  width: 100%;
  text-align: right;
  text-transform: none;  /* wichtig: Zeit nicht in Caps -> "s" bleibt klein */
}



.buzzer-empty{
  font-size: 15px;
  font-weight: 800;
  opacity: 0.75;
  text-align: center;
}



#hints-panel{
  position:absolute;
  top: 2vh;
  right: 2vw;
  width: 1300px;
  height: 760px;
  z-index: 60; /* über Overlay */

  background: var(--panel);
  border: 2px solid rgba(255,255,255,0.25);
  border-radius: 16px;
  padding: 14px 14px 10px;
  overflow:hidden;
  box-shadow: 0 0 18px rgba(0,0,0,0.35);
}

/* V24+: Wenn Einträge fullscreen gerendert werden, Panel komplett ausblenden */
body.player-view.mode-ausdenken #hints-panel,
body.player-view.mode-erkennen  #hints-panel{
  display: none !important;
}

#view-toggle-top{ z-index: 60; }


.hints-header{
  display:flex;
  gap: 10px;
  margin-bottom: 12px;
  align-items:center;
}

.pill{
  background: var(--accent);
  border:2px solid #fff;
  border-radius:999px;
  padding: 6px 12px;
  font-weight:800;
  font-size: 14px;
  letter-spacing:0.04em;
}

#hints-feed{
  height: calc(92vh - 60px);
  overflow:hidden;
  padding-right: 6px;
}

.hint-item{

  padding: 12px 12px;
  margin: 10px 0;
  white-space: pre-wrap;
font-size: 30px;     /* größer */
font-weight: 800;
line-height: 1.35;  /* mehr Luft zwischen Zeilen */

  /* V57: Text vertikal zentrieren */
  display: flex;
  align-items: center;        /* vertikal zentriert */
  justify-content: center;     /* horizontal zentriert */
  text-align: center;          /* Text mittig */
}

/* V57: Modus DENKEN – kompaktere Schrift für Einträge */
body.player-view.mode-ausdenken .hint-item{
  font-size: 26px;     /* ← hier Größe für DENKEN */
  line-height: 1.25;
}

/* ===========================
   V28: Hint + VB nebeneinander (Denken)
=========================== */
.hint-row{
  display: grid;
  grid-template-columns: 120px 1fr 120px;
  gap: 10px;
  align-items: stretch;
  margin: 10px 0;
}

/* ===== V37: Stabilität – Reveals dürfen Layout NICHT verändern ===== */
body.player-view.mode-ausdenken #entries-layer .hint-row{
  overflow: hidden;     /* nichts darf rausdrücken */
}

body.player-view.mode-ausdenken #entries-layer .hint-row > *{
  min-width: 0;         /* verhindert Grid-Shrink/Overflow-Effekte */
  height: 100%;
}

body.player-view.mode-ausdenken #entries-layer .hint-row .hint-item{
  overflow: hidden;     /* Text/Buttons bleiben im festen Kasten */
}

body.player-view.mode-ausdenken #entries-layer .vb,
body.player-view.mode-ausdenken #entries-layer .ab{
  overflow: hidden;
}

body.player-view.mode-ausdenken #entries-layer .vb-grid{
  min-height: 0;
}

body.player-view.mode-ausdenken #entries-layer .vb-slot{
  max-width: 100%;
  max-height: 100%;
}


.hint-row .hint-item{
  margin: 0; /* Margin ist jetzt am Row-Wrapper */
}

/* ===========================
   V64: Vote-Bilder (VB) – 4 Slots absolut auf Screen positioniert
   A1 A2
   B1 B2
=========================== */

body.player-view.mode-ausdenken #entries-layer .vb{
  /* VB-Container soll KEIN Layout mehr beeinflussen */
  border: 0;
  background: transparent;
  padding: 0;
  display: block;
}

body.player-view.mode-ausdenken #entries-layer .vb-grid{
  /* Grid-Layout ist egal, weil Slots fixed positioniert werden */
  display: block;
  width: 0;
  height: 0;
}

body.player-view.mode-ausdenken #entries-layer{
  position: fixed; /* ist bei dir schon so, nur zur Sicherheit */
}


/* Votes (Richtig-Buttons) UNTER dem Overlay */
body.player-view.mode-ausdenken #entries-layer-votes .vb-slot{
  position: fixed;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.25);
  object-fit: cover;
  border-radius: 0;
  overflow: hidden;
  display: block;
  visibility: hidden;

  z-index: 50; /* < overlay-layer (62) */
}


/* AB (Autorenbild inkl. grünem Haken) UNTER dem Overlay */
body.player-view.mode-ausdenken #entries-layer-votes .hint-row .ab{
  position: relative !important;   /* Anchor für .vote-check */

  width: 80px;
  height: 80px;

  left: auto !important;
  top: auto !important;

  justify-self: center;
  align-self: center;

  padding: 0;
  overflow: hidden;
  display: grid;
  place-items: stretch;

  z-index: 50; /* < overlay-layer (62) */

  clip-path: polygon(
    6px 0,
    100% 0,
    100% 100%,
    0 100%,
    0 6px
  );
}



/* Votes-Layer: mittlere Spalte ist nur Platzhalter und MUSS unter Overlay verschwinden */
body.player-view.mode-ausdenken #entries-layer-votes .hint-row .hint-item{
  visibility: hidden;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none;
}





/* Schräge je Slot (cut = 6px, kannst du später anpassen) */
body.player-view.mode-ausdenken #entries-layer-votes .vb-slot[data-slot="0"]{
  /* A1: oben links */
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
}
body.player-view.mode-ausdenken #entries-layer-votes .vb-slot[data-slot="1"]{
  /* A2: oben rechts */
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
body.player-view.mode-ausdenken #entries-layer-votes .vb-slot[data-slot="2"]{
  /* B1: unten links */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
body.player-view.mode-ausdenken #entries-layer-votes .vb-slot[data-slot="3"]{
  /* B2: unten rechts */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}

/* ===== V64: Vote-Slots – Pixelpositionen pro Eintrag ===== */

/* Entry 1 */
body.player-view.mode-ausdenken #entries-layer-votes .hint-row[data-entry="1"] .vb-slot[data-slot="0"]{ left: 1786px; top: 44px;  } /* A1 */
body.player-view.mode-ausdenken #entries-layer-votes .hint-row[data-entry="1"] .vb-slot[data-slot="1"]{ left: 1840px; top: 44px;  } /* A2 */
body.player-view.mode-ausdenken #entries-layer-votes .hint-row[data-entry="1"] .vb-slot[data-slot="2"]{ left: 1786px; top: 97px;  } /* B1 */
body.player-view.mode-ausdenken #entries-layer-votes .hint-row[data-entry="1"] .vb-slot[data-slot="3"]{ left: 1840px; top: 97px;  } /* B2 */

/* Entry 2 */
body.player-view.mode-ausdenken #entries-layer-votes .hint-row[data-entry="2"] .vb-slot[data-slot="0"]{ left: 1786px; top: 192px; } /* A1 */
body.player-view.mode-ausdenken #entries-layer-votes .hint-row[data-entry="2"] .vb-slot[data-slot="1"]{ left: 1840px; top: 192px; } /* A2 */
body.player-view.mode-ausdenken #entries-layer-votes .hint-row[data-entry="2"] .vb-slot[data-slot="2"]{ left: 1786px; top: 245px; } /* B1 */
body.player-view.mode-ausdenken #entries-layer-votes .hint-row[data-entry="2"] .vb-slot[data-slot="3"]{ left: 1840px; top: 245px; } /* B2 */

/* Entry 3 */
body.player-view.mode-ausdenken #entries-layer-votes .hint-row[data-entry="3"] .vb-slot[data-slot="0"]{ left: 1786px; top: 338px; } /* A1 */
body.player-view.mode-ausdenken #entries-layer-votes .hint-row[data-entry="3"] .vb-slot[data-slot="1"]{ left: 1840px; top: 338px; } /* A2 */
body.player-view.mode-ausdenken #entries-layer-votes .hint-row[data-entry="3"] .vb-slot[data-slot="2"]{ left: 1786px; top: 391px; } /* B1 */
body.player-view.mode-ausdenken #entries-layer-votes .hint-row[data-entry="3"] .vb-slot[data-slot="3"]{ left: 1840px; top: 391px; } /* B2 */

/* Entry 4 */
body.player-view.mode-ausdenken #entries-layer-votes .hint-row[data-entry="4"] .vb-slot[data-slot="0"]{ left: 1786px; top: 485px; } /* A1 */
body.player-view.mode-ausdenken #entries-layer-votes .hint-row[data-entry="4"] .vb-slot[data-slot="1"]{ left: 1840px; top: 485px; } /* A2 */
body.player-view.mode-ausdenken #entries-layer-votes .hint-row[data-entry="4"] .vb-slot[data-slot="2"]{ left: 1786px; top: 542px; } /* B1 */
body.player-view.mode-ausdenken #entries-layer-votes .hint-row[data-entry="4"] .vb-slot[data-slot="3"]{ left: 1840px; top: 542px; } /* B2 */

/* Entry 5 */
body.player-view.mode-ausdenken #entries-layer-votes .hint-row[data-entry="5"] .vb-slot[data-slot="0"]{ left: 1786px; top: 634px; } /* A1 */
body.player-view.mode-ausdenken #entries-layer-votes .hint-row[data-entry="5"] .vb-slot[data-slot="1"]{ left: 1840px; top: 634px; } /* A2 */
body.player-view.mode-ausdenken #entries-layer-votes .hint-row[data-entry="5"] .vb-slot[data-slot="2"]{ left: 1786px; top: 689px; } /* B1 */
body.player-view.mode-ausdenken #entries-layer-votes .hint-row[data-entry="5"] .vb-slot[data-slot="3"]{ left: 1840px; top: 689px; } /* B2 */



/* ===========================
   V34: AB (Autor-Bild) links vom Eintrag
=========================== */
/* V60: Autorenbilder (AB) – Größe + Form */
/* ===========================
   V34/V60: AB (Autor-Bild) im hint-row Grid (AUSDENKEN)
   WICHTIG: AB darf NICHT absolute sein, sonst rutscht der Eintrag in die AB-Spalte.
=========================== */
body.player-view.mode-ausdenken #entries-layer-votes .hint-row .ab{
  position: relative !important;   /* bleibt im Grid-Flow, aber ist Anchor für .vote-check */

  width: 80px;
  height: 80px;

  left: auto !important;
  top: auto !important;

  justify-self: center;           /* innerhalb der 120px-Spalte zentrieren */
  align-self: center;

  padding: 0;
  overflow: hidden;
  display: grid;
  place-items: stretch;

  clip-path: polygon(
    6px 0,
    100% 0,
    100% 100%,
    0 100%,
    0 6px
  );
}

body.player-view.mode-ausdenken #entries-layer-votes .hint-row .ab-slot{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  visibility: hidden; /* wird erst sichtbar wenn Autor aufgedeckt */
}

/* V65: Voting-Button als grüner Haken im AB (statt "Richtig"-Textbutton) */
body.player-view.mode-ausdenken #entries-layer-votes .hint-row .vote-check{
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;

  background: transparent;          /* SVG zeichnet grün + Haken */
  display: grid;
  place-items: center;
  cursor: pointer;

  /* gleiche Polygon-Form wie AB */
  clip-path: polygon(
    6px 0,
    100% 0,
    100% 100%,
    0 100%,
    0 6px
  );

  /* Hover/Click Feeling */
  transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
}

body.player-view.mode-ausdenken #entries-layer-votes .hint-row .vote-check:hover{
  filter: brightness(1.12);
  box-shadow: 0 0 14px rgba(31,191,74,0.45);
  transform: scale(1.03);
}

body.player-view.mode-ausdenken #entries-layer-votes .hint-row .vote-check:active{
  transform: scale(0.98);
}

body.player-view.mode-ausdenken #entries-layer-votes .hint-row .vote-check svg{
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Platzhalter (mittlere Spalte) im Votes-Layer soll unsichtbar sein */
body.player-view.mode-ausdenken #entries-layer-votes .hint-item{
  visibility: hidden;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* V28: Reveal Buttons im Mod */
.reveal-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.reveal-btn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  cursor: pointer;
  font-weight: 900;
  color: #ffffff;
}

.reveal-btn img{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.25);
  object-fit: cover;
  background: rgba(0,0,0,0.25);
}


/* ===========================
   EINTRÄGE: Pixel-Positionen (Erkennen + Denken)
   - Bezug: #entries-layer (Fullscreen)
   - top: 0px = oberer Bildschirmrand
   =========================== */

/* globaler Left für beide Modi (vom Bildschirmrand aus gemessen) */
:root{
  --entry-left: 512px; /* <- hier steuerst du den gemeinsamen LEFT-Abstand */
}

/* Denken (ausdenken): gemeinsame Größe */
:root{
  --denken-w: 1111px;
  --denken-h: 114px;

  /* Top-Positionen pro Eintrag (DU PASST DAS AN) */
  --denken-top-1: 25px;
  --denken-top-2: 173px;
  --denken-top-3: 319px;
  --denken-top-4: 469px;
  --denken-top-5: 617px;
}

/* Erkennen: eigene Größe */
:root{
  --erkennen-w: 1110px; /* <- anders als Denken */
  --erkennen-h: 146px;

  /* Top-Positionen pro Eintrag (DU PASST DAS AN) */
  --erkennen-top-1: 35px;
  --erkennen-top-2: 221px;
  --erkennen-top-3: 407px;
  --erkennen-top-4: 593px;
  --erkennen-top-5: 779px;
}

/* Modus ERKENNEN: eigener Left-Abstand */
body.player-view.mode-erkennen{
  --entry-left: 642px;   /* ← hier dein spezieller Wert für Modus 1 */
}


/* Layer als Bezugssystem */
body.player-view.mode-ausdenken #entries-layer,
body.player-view.mode-erkennen  #entries-layer{
  position: fixed;
  inset: 0;
  overflow: visible;
}

/* Einträge absolut platzieren (nur in Player-View in den 2 Modi) */
body.player-view.mode-ausdenken #entries-layer .hint-item,
body.player-view.mode-erkennen  #entries-layer .hint-item{
  position: absolute;
  left: var(--entry-left);
  margin: 0;
  pointer-events: auto; /* Buttons klickbar */
}

/* Größe je Modus */
body.player-view.mode-ausdenken #entries-layer .hint-item{
  width: var(--denken-w);
  height: var(--denken-h);
}

body.player-view.mode-erkennen #entries-layer .hint-item{
  width: var(--erkennen-w);
  height: var(--erkennen-h);
}

/* Votes-Layer: ROW pro Eintrag auf die gleichen Y-Positionen wie die Einträge legen */
body.player-view.mode-ausdenken #entries-layer-votes .hint-row[data-entry="1"]{ top: var(--denken-top-1); }
body.player-view.mode-ausdenken #entries-layer-votes .hint-row[data-entry="2"]{ top: var(--denken-top-2); }
body.player-view.mode-ausdenken #entries-layer-votes .hint-row[data-entry="3"]{ top: var(--denken-top-3); }
body.player-view.mode-ausdenken #entries-layer-votes .hint-row[data-entry="4"]{ top: var(--denken-top-4); }
body.player-view.mode-ausdenken #entries-layer-votes .hint-row[data-entry="5"]{ top: var(--denken-top-5); }


/* Top je Eintrag (Erkennen) */
body.player-view.mode-erkennen #entries-layer .hint-item[data-entry="1"]{ top: var(--erkennen-top-1); }
body.player-view.mode-erkennen #entries-layer .hint-item[data-entry="2"]{ top: var(--erkennen-top-2); }
body.player-view.mode-erkennen #entries-layer .hint-item[data-entry="3"]{ top: var(--erkennen-top-3); }
body.player-view.mode-erkennen #entries-layer .hint-item[data-entry="4"]{ top: var(--erkennen-top-4); }
body.player-view.mode-erkennen #entries-layer .hint-item[data-entry="5"]{ top: var(--erkennen-top-5); }

/* ===== V32 FIX: Denken mit VB (hint-row) im Fullscreen-Layer ===== */
/* Wenn wir hint-row benutzen, positionieren wir die ROW – nicht das hint-item. */
body.player-view.mode-ausdenken #entries-layer .hint-row,
body.player-view.mode-ausdenken #entries-layer-votes .hint-row{
  position: absolute;
  left: 512px; /* damit Eintrag bei 642px bleibt: 512 + 120 + 10 = 642 */
  width: calc(var(--denken-w) + 260px); /* + AB + VB + Gaps */
  height: var(--denken-h);
  display: grid;
  grid-template-columns: 120px var(--denken-w) 120px;
  gap: 10px;
  align-items: stretch;
  pointer-events: auto; /* sicherheitshalber */
}

body.player-view.mode-ausdenken #entries-layer .hint-row .ab,
body.player-view.mode-ausdenken #entries-layer-votes .hint-row .ab{
  justify-self: start;
  margin-left: 10px; /* 512 + 10 = 522px (AB-left) */
}



/* V34: Autor-Buttons unter den Spieler-Reveal-Buttons */
.author-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.author-btn{
  padding: 10px 12px;
  color: #ffffff;   /* <- Schriftfarbe hier ändern */
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  cursor: pointer;
  font-weight: 900;
}


/* hint-item darf in der Row NICHT absolute sein */
body.player-view.mode-ausdenken #entries-layer .hint-row .hint-item{
  position: static !important;
  width: auto !important;
  height: auto !important;
}

/* V72 FIX: Text-Layer soll NIE Klicks abfangen (sonst sind Vote-Buttons darunter nicht klickbar) */
body.player-view.mode-ausdenken #entries-layer .hint-row,
body.player-view.mode-ausdenken #entries-layer .hint-row *{
  pointer-events: none !important;
}


/* Top-Positionen jetzt für die ROW (statt hint-item) */
body.player-view.mode-ausdenken #entries-layer .hint-row[data-entry="1"]{ top: var(--denken-top-1); }
body.player-view.mode-ausdenken #entries-layer .hint-row[data-entry="2"]{ top: var(--denken-top-2); }
body.player-view.mode-ausdenken #entries-layer .hint-row[data-entry="3"]{ top: var(--denken-top-3); }
body.player-view.mode-ausdenken #entries-layer .hint-row[data-entry="4"]{ top: var(--denken-top-4); }
body.player-view.mode-ausdenken #entries-layer .hint-row[data-entry="5"]{ top: var(--denken-top-5); }


/* Top je Eintrag (Denken) */
body.player-view.mode-ausdenken .hint-item[data-entry="1"]{ top: var(--denken-top-1); }
body.player-view.mode-ausdenken .hint-item[data-entry="2"]{ top: var(--denken-top-2); }
body.player-view.mode-ausdenken .hint-item[data-entry="3"]{ top: var(--denken-top-3); }
body.player-view.mode-ausdenken .hint-item[data-entry="4"]{ top: var(--denken-top-4); }
body.player-view.mode-ausdenken .hint-item[data-entry="5"]{ top: var(--denken-top-5); }

/* Top je Eintrag (Erkennen) */
body.player-view.mode-erkennen .hint-item[data-entry="1"]{ top: var(--erkennen-top-1); }
body.player-view.mode-erkennen .hint-item[data-entry="2"]{ top: var(--erkennen-top-2); }
body.player-view.mode-erkennen .hint-item[data-entry="3"]{ top: var(--erkennen-top-3); }
body.player-view.mode-erkennen .hint-item[data-entry="4"]{ top: var(--erkennen-top-4); }
body.player-view.mode-erkennen .hint-item[data-entry="5"]{ top: var(--erkennen-top-5); }

/* ===== V24: Bereich/Offset entfernen (top:0 soll wirklich oben starten) ===== */
/* Für Denken + Erkennen: Panel ohne Padding, Feed füllt Panel komplett */
body.player-view.mode-ausdenken #hints-panel,
body.player-view.mode-erkennen  #hints-panel,
body.player-view.mode-fakten #hints-panel{
  padding: 0;            /* entfernt die 14px "Lücke" */
}

/* Feed als volle Fläche im Panel (damit top:0 = Panelkante) */
body.player-view.mode-ausdenken #hints-feed,
body.player-view.mode-erkennen  #hints-feed{
  position: absolute;
  inset: 0;              /* top/right/bottom/left = 0 */
  height: auto;          /* überschreibt height: calc(...) */
  padding: 0;            /* falls später mal Padding reinkommt */
}

/* Optional: wenn du oben/links doch etwas Luft willst, mach das über --entry-left und deine --top-Variablen */



.hint-index{
  display:inline-block;
  background: rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.22);
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 13px;
  margin-bottom: 8px;
  font-weight:800;
}

/* ===== Moderator Panel ===== */
#moderator-panel{
  width:100%;
  height:100%;
  padding: 18px 18px;
  display:block;
}

.mod-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
}

.mod-header h1{
  margin:0;
  font-size: 22px;
  letter-spacing:0.03em;
}

.mod-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
  height: auto;
  overflow: visible;
}


.mod-card{
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  padding: 14px 14px;
  overflow:hidden;
}

.mod-card.span-2{
  grid-column: 1 / -1; /* spannt über beide Mod-Grid-Spalten */
}


.mod-card h2{
  margin: 0 0 10px 0;
  font-size: 16px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color: #e8e8e8;
}

.row{ display:flex; gap: 10px; align-items:center; flex-wrap:wrap; }

.big-pill{
  min-width: 64px;
  text-align:center;
  background: rgba(255,255,255,0.10);
  border: 2px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 20px;
  font-weight: 900;
}

.hint-preview{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: 14px;
  opacity: 0.95;
}
.hint-preview .label{ opacity:0.85; margin-right: 8px; }
.hint-preview em{ font-style: italic; }

.player-row{
  display:grid;
  grid-template-columns: 86px 1fr auto auto 0.9fr 46px 1.2fr auto; /* + Twitch + Avatar */
  gap: 8px;
  align-items:center;
  margin: 10px 0;
  padding: 10px 10px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
}

.twitch-avatar{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.25);
  object-fit: cover;
  display: block;
}


.player-label{ font-weight:900; letter-spacing:0.03em; }

.player-row input[type="text"]{
  width:100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.25);
  color:#fff;
  outline:none;
}

.tuning{
  grid-column: 1 / -1;
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 8px;
  opacity: 0.95;
}

.tuning label{
  font-size: 12px;
  opacity: 0.9;
  width: 20px;
}

.tuning input[type="range"]{
  width: 180px;
}

.mode-btn.active{
  outline: 3px solid rgba(255,255,255,0.55);
}

/* ===== Ausdenken: Input-Box pro Player positionieren ===== */
body.player1-view .ausdenken-inputs,
body.player2-view .ausdenken-inputs,
body.player3-view .ausdenken-inputs,
body.player4-view .ausdenken-inputs{
  width: 1387px;        /* wie Cam */
  height: 411px;
  left: 504px;
  top: 183px;          /* anpassen, falls du höher/tiefer willst */
  transform: none;
}



/* ===== Moderator Cam ===== */
.mod-cam-wrapper{
  display:flex;
  align-items:center;
  gap:14px;
}

.mod-cam{
  width: 440px;
  height: 278px;
}

.mod-header-right{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* ===== Moderator Cam im Player-Board ===== */
#player-mod-cam{
  position:absolute;
  left: 28px;
  top: 466px;
  width: 440px;
  height: 278px;
  z-index: 10;
}


/* Moderator-Row in Spieler-Karte: vereinfachtes Grid (ohne Punktebuttons/Name) */
.player-row.moderator-row{
  grid-template-columns: 86px 1.2fr auto;
}
.player-row.moderator-row .tuning{
  grid-column: 1 / -1;
}

.hint-preview .info-line{
  display:flex;
  gap: 8px;
  align-items:baseline;
  margin-top: 6px;
}
#winnable-points{
  font-weight: 900;
}

.ui-btn.good{
  background: rgba(46, 204, 113, 0.92);
}
.ui-btn.bad{
  background: rgba(231, 76, 60, 0.92);
}

.resolution-overlay{
  position: fixed;
  inset: 0;
  display: none;
  background: transparent; /* kein Abdunkeln */
  z-index: 9;
  pointer-events: none; /* Klicks gehen durch */
}



.resolution-overlay.visible{
  display: block;
}

.resolution-card{
  pointer-events: auto;
  position: absolute;
  top: 30px;
  left: 23px;

  width: 445px;
  height: 481px;

  overflow: hidden; /* schneidet oben/unten */
}


.resolution-card .resolution-image{
  width: 100%;
  height: 68%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* V144: Standardmäßig unsichtbar, wird erst durch Pop-In sichtbar */
  opacity: 0;
}




/* Name im Auflösungsbild – exakt wie Spieler-Name */
.resolution-text{
  position: absolute;
  left: 50%;
  bottom: 94px;

  /* WICHTIG: nicht mehr über transform zentrieren, sonst kollidiert es mit .pop-in */
  translate: -50% 0;

  background: var(--accent);
  padding: 6px 14px;
  border-radius: 999px;
  border: 2px solid #fff;

  font-weight: 800;
  font-size: 15px;           /* gleiche Größe wie .info-badge */
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  z-index: 2;                /* über dem Bild */
}



.resolution-image{
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,0.18);
  max-width: 100%;
  max-height: 100%;
  opacity: 0;                 /* <<< wichtig: Start transparent */
  will-change: opacity, filter;
}


/* Disabled Button State */
.ui-btn:disabled{
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(1);
}





/* Feld-Grundlayout */
.fakten-cell{
  position: absolute;
  width: 437px;
  height: 210px;

  display:flex;
  align-items:center;
  justify-content:center;

  text-align:center;
  white-space: pre-wrap;

  background: rgba(0,0,0,0);
  border: 0px solid rgba(255,255,255,0.22);
  border-radius: 16px;
  padding: 18px;

  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  pointer-events: auto;   /* Klicks gehen auf die Felder */
}


/* ===========================
   PIXEL-POSITIONEN: HIER ANPASSEN
   =========================== */
.fakten-cell[data-cell="1"]{ left: 504px; top: 35px; }
.fakten-cell[data-cell="2"]{ left: 981px; top: 35px; }
.fakten-cell[data-cell="3"]{ left: 1456px; top: 35px; }

.fakten-cell[data-cell="4"]{ left: 504px; top: 283px; }
.fakten-cell[data-cell="5"]{ left: 981px; top: 283px; }
.fakten-cell[data-cell="6"]{ left: 1456px; top: 283px; }

.fakten-cell[data-cell="7"]{ left: 504px; top: 531px; }
.fakten-cell[data-cell="8"]{ left: 981px; top: 531px; }
.fakten-cell[data-cell="9"]{ left: 1456px; top: 531px; }


/* ===== Fakten-Zelle: Text links + Bild rechts (wenn "BILD ...") ===== */
.fakten-cell .fakten-row{
  width: 100%;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}

.fakten-cell .fakten-text{
  flex: 1 1 auto;
  text-align:left;
  white-space: pre-wrap;
}

.fakten-cell .fakten-img{
  flex: 0 0 auto;
  width: 168px;          /* kannst du anpassen */
  height: 168px;
  object-fit: contain;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
}

/* ===== Ausdenken (Player-View) ===== */
.ausdenken-pokemon{
  position: fixed;
  top: 2vh;
  right: 2vw;
  width: 520px;
  height: 520px;
  z-index: 70; /* über Overlay + über Hints-Panel */
  display: none;
  background: rgba(0,0,0,0.72);
  border: 2px solid rgba(255,255,255,0.25);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 0 22px rgba(0,0,0,0.45);
}

.ausdenken-pokemon[aria-hidden="false"]{ display:block; }

#ausdenken-pokemon-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
}

.ausdenken-inputs{
  position: fixed;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  width: 900px;
  z-index: 2000; /* über Overlay */
  display: none;

  background: rgba(0,0,0,0.9);
  border: 2px solid rgba(255,255,255,0.25);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 0 22px rgba(0,0,0,0.45);
}

.ausdenken-inputs[aria-hidden="false"]{ display:block; }

.ausdenken-input-row{
  background: transparent;          /* Hintergrund aus */
  border: 0;                        /* Rahmen aus */
  box-shadow: none;                 /* kein Glow */
  padding: 10px 12px;
}


.ausdenken-input-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.ausdenken-input-title{
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: none; /* nur Spielername soll Caps sein */
  opacity: 0.98;
  font-size: 36px;
}

.ausdenken-input-title .playername-caps{
  text-transform: uppercase; /* NUR der Spielername */
}


.ausdenken-input-sub{
  opacity: 0.9;
  font-weight: 900;
  letter-spacing: 0.02em;
  font-size: 16px;
}

.ausdenken-input-row textarea{
  width: 100%;
height: 300px; 
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.25);
  color:#fff;
  outline:none;
  font-weight: 800;
  font-size: 36px;

  resize: none;
  line-height: 1.75;
  white-space: pre-wrap;
}


/* ===== Ausdenken (Moderator) ===== */
.ausdenken-mod-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ausdenken-mod-row{
  display:flex;
  flex-direction:column;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
}

.ausdenken-mod-row label{
  font-weight: 900;
  text-transform: uppercase;
  font-size: 12px;
  opacity: 0.9;
  letter-spacing: 0.04em;
}

.ausdenken-mod-row input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.25);
  color:#fff;
  outline:none;
  font-weight: 800;
}


/* ===== Ausdenken Voting Buttons (Player-Feed) ===== */
.hint-item{
  position: relative;
}

.vote-row{
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.vote-btn{
  color: #ffffff;   /* <- Schriftfarbe hier ändern */
  padding: 8px 14px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.85);
  background: rgba(46, 204, 113, 0.92);
  font-weight: 900;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: transform 120ms ease, filter 120ms ease, opacity 120ms ease;
}

.vote-btn:hover{
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.vote-btn:active{
  transform: translateY(0px);
}

.vote-btn[disabled]{
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(1);
}

/* ===== V37/V38 TEST: Vote-Simulator (Mod) ===== */
.sim-box{
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  padding: 10px 10px;
}
.sim-title{
  font-weight: 900;
  letter-spacing: 0.03em;
  opacity: 0.95;
  margin-bottom: 8px;
}
.sim-row{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.sim-row label{
  font-weight: 800;
  opacity: 0.9;
}
.sim-row select{
  background: rgba(0,0,0,0.25);
  color: white;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 6px 8px;
}
.sim-hint{
  margin-top: 8px;
  opacity: 0.8;
  font-weight: 700;
  font-size: 12px;
}
.sim-hint code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  background: rgba(0,0,0,0.25);
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.14);
}



.playername-caps{
  text-transform: none; /* Caps kommen aus JS, CSS soll nix zusätzlich verändern */
}



/* =========================
   V75 HOTFIX: "Richtig"-Buttons wieder klickbar
   (ans ENDE der style.css)
========================= */

/* Overlays dürfen NIE Klicks blocken */
#overlay-layer,
#overlay-bg-layer{
  pointer-events: none !important;
}

/* AB-Bild (Autor) soll keine Klicks "fressen" */
body.player-view.mode-ausdenken #entries-layer-votes .ab-slot{
  pointer-events: none !important;
}

/* Die eigentlichen Buttons müssen immer klickbar sein */
.vote-btn,
.vote-check{
  pointer-events: auto !important;
}

/* Falls ein Layer darüber liegt: Button nach vorne innerhalb seines Stacking-Contexts */
.vote-check{
  position: absolute; /* bleibt wie gedacht als Full-Overlay im AB */
  inset: 0;
  z-index: 5;
}

/* ===== V80: Pop-Up Animation für neue Texte (ohne 1px-„Snap“) ===== */
@keyframes popIn {
  0%   { transform: translateZ(0) scale(0.92); opacity: 0; }
  35%  { transform: translateZ(0) scale(1.10); opacity: 1; }
  80%  { transform: translateZ(0) scale(0.995); opacity: 1; }
  100% { transform: translateZ(0) scale(1.00); opacity: 1; }
}

.pop-in{
  animation: popIn 360ms cubic-bezier(0.18, 0.9, 0.25, 1) both;
  transform-origin: center;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* ===== V144: Pop-In für Bilder (ohne Transform-Override, damit translate(-50%,-50%) bleibt) ===== */
/* ===== V145: Pop + Fade für Resolution-Bild ===== */
.resolution-image.pop-in-img{
  animation: resolutionImgPopFade 1860ms cubic-bezier(0.22, 0.90, 0.25, 1) both;
}

@keyframes resolutionImgPopFade{
  0%{
    opacity: 0;
    filter: brightness(0.65);
  }
  100%{
    opacity: 1;
    filter: brightness(1);
  }
}



/* ===== V119: Pop-Out beim Rundenwechsel (ohne Transform-Override -> keine Bild-Drifts) ===== */
@keyframes popOut {
  0%   { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: 0.86; }
}

.pop-out{
  animation: popOut 240ms cubic-bezier(0.18, 0.9, 0.25, 1) both !important;
  transform-origin: center;
  will-change: opacity, scale;
  backface-visibility: hidden;
}



/* ===== V81: Hover-Logo über allem ===== */
#logo-hover-layer{
  position: fixed;
  inset: 0;
  z-index: 9999;            /* garantiert über allen Overlays/Cams/UI */
  pointer-events: none;    /* frisst keine Klicks */
}

#hover-logo{
  position: absolute;

  /* >>> HIER LEGST DU PIXELGENAU POS & GRÖSSE FEST <<< */
  right: 3px;              /* X-Position */
  top:  3px;              /* Y-Position */
  width: 180px;            /* gewünschte Breite */
  height: auto;            /* Höhe automatisch beibehalten */

  transform-origin: center;
  animation: logoHoverPulse 3.2s ease-in-out infinite;
  will-change: transform;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35));
}

/* Sanfte „Atmen“-Animation */
@keyframes logoHoverPulse {
  0%   { transform: scale(1.00); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1.00); }
}

/* Optional: Logo nur im Player-View */
body:not(.player-view) #logo-hover-layer{
  display: none;
}

/* ===== V81.1: Logo im 3. Modus (Ausdenken) ausblenden ===== */
body.mode-ausdenken #logo-hover-layer{
  display: none !important;
}


/* ===== V81.2: Hover-Hintergrund ganz unten ===== */
#bg-hover-layer{
  position: fixed;
  inset: 0;
  z-index: 0;              /* ganz unten */
  pointer-events: none;   /* keine Klicks blockieren */
  overflow: hidden;       /* verhindert Ränder beim Zoomen */
}

#hover-bg{
  position: absolute;

  /* >>> HIER LEGST DU PIXELGENAU POS & GRÖSSE FEST <<< */
  left: 0px;              /* X-Position */
  top:  0px;              /* Y-Position */
  width: 1920px;          /* gewünschte Breite */
  height: 1080px;         /* gewünschte Höhe */
  object-fit: cover;     /* falls du bildschirmfüllend willst: cover */

  transform-origin: center;
  animation: bgHoverPulse 8s ease-in-out infinite; /* langsamer & subtiler als Logo */
  will-change: transform;
  backface-visibility: hidden;
  filter: saturate(1.05) brightness(1.02);
}

/* Sanfte, sehr subtile „Atmen“-Animation */
@keyframes bgHoverPulse {
  0%   { transform: scale(1.00); }
  50%  { transform: scale(1.07); }  /* sehr dezent */
  100% { transform: scale(1.00); }
}

body:not(.player-view) #bg-hover-layer{
  display: none;
}

/* ===== V81: Diagonaler Glow-Sweep über dem BG ===== */
#bg-glow-sweep{
  position: absolute;
  inset: -20%;                 /* größer als View, damit der Sweep sauber rein/raus fährt */
  pointer-events: none;
  z-index: 1;                  /* über dem BG-Bild, unter allen Overlays/UI */

  /* Diagonaler, weicher Lichtschein */
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.00) 35%,
    rgba(255,255,255,0.10) 45%,
    rgba(255,255,255,0.28) 50%,
    rgba(255,255,255,0.10) 55%,
    rgba(255,255,255,0.00) 65%
  );

  filter: blur(18px);
  opacity: 0.0;

  transform: translate(-60%, -60%) rotate(0.001deg);
  animation: bgGlowSweep 9s ease-in-out infinite;
  will-change: transform, opacity;
  mix-blend-mode: screen;     /* wirkt wie Licht auf dunklem BG (optional) */
}

@keyframes bgGlowSweep{
  0%   { transform: translate(-60%, -60%); opacity: 0.0; }
  10%  { opacity: 0.35; }
  40%  { opacity: 0.55; }
  60%  { opacity: 0.35; }
  100% { transform: translate(60%, 60%);  opacity: 0.0; }
}

/* ===== V81: Score FX (Gain/Loss) ===== */
#players .score{
  display: inline-block;            /* nötig für transform/shake */
  will-change: transform, filter;
}

/* + Punkte: Pop + grüner Glow */
.score-gain{
  animation:
    scorePop 360ms cubic-bezier(0.18, 0.9, 0.25, 1) both,
    scoreGainGlow 800ms ease-out both;
}

/* - Punkte: Shake + roter Glow */
.score-loss{
  animation:
    scoreShake 420ms cubic-bezier(0.2, 0.9, 0.2, 1) both,
    scoreLossGlow 800ms ease-out both;
}

@keyframes scorePop{
  0%   { transform: scale(1.00); }
  45%  { transform: scale(1.10); }
  70%  { transform: scale(0.995); }
  100% { transform: scale(1.00); }
}

@keyframes scoreShake{
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-3px); }
  30%  { transform: translateX(3px); }
  45%  { transform: translateX(-3px); }
  60%  { transform: translateX(3px); }
  75%  { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

@keyframes scoreGainGlow{
  0%   { filter: drop-shadow(0 0 0 rgba(0,255,120,0.0)); }
  25%  { filter: drop-shadow(0 0 14px rgba(0,255,120,0.65)); }
  55%  { filter: drop-shadow(0 0 10px rgba(0,255,120,0.45)); }
  100% { filter: drop-shadow(0 0 0 rgba(0,255,120,0.0)); }
}

@keyframes scoreLossGlow{
  0%   { filter: drop-shadow(0 0 0 rgba(255,60,60,0.0)); }
  20%  { filter: drop-shadow(0 0 14px rgba(255,60,60,0.70)); }
  55%  { filter: drop-shadow(0 0 10px rgba(255,60,60,0.45)); }
  100% { filter: drop-shadow(0 0 0 rgba(255,60,60,0.0)); }
}

/* ===== V82: Pop/Score/Buzzer FX ===== */

/* Pop: nutzt die eigene 'scale' Property (komponiert sauber mit transform: translateX etc.) */
.pop{
  transform-origin: center center;
  will-change: scale;
  animation: popScale 260ms cubic-bezier(.2, .9, .2, 1);
}

/* Pop bei Namensfeld: unten mittig fixiert (wächst nach oben/links/rechts) */
.info-badge.pop{
  transform-origin: 50% 100%;
}


@keyframes popScale{
  0%   { scale: 0.92; }
  55%  { scale: 1.07; }
  100% { scale: 1.00; }
}

/* Score: grün/rot kurz aufblinken */
.score-up{
  animation: scoreUpFlash 320ms ease-out;
}
@keyframes scoreUpFlash{
  0%   { filter: brightness(1); }
  30%  { filter: brightness(1.35); box-shadow: 0 0 14px rgba(31,191,74,0.55); }
  100% { filter: brightness(1); box-shadow: none; }
}

.score-down{
  animation: scoreDownShake 360ms ease-out;
}
@keyframes scoreDownShake{
  0%   { transform: translateX(0); filter: brightness(1); }
  15%  { transform: translateX(-6px); filter: brightness(1.35); box-shadow: 0 0 14px rgba(255,60,60,0.55); }
  30%  { transform: translateX(6px); }
  45%  { transform: translateX(-4px); }
  60%  { transform: translateX(4px); }
  100% { transform: translateX(0); filter: brightness(1); box-shadow: none; }
}

/* Fullscreen roter Flash bei Buzz */
body.buzzer-flash::before{
  content:"";
  display: block !important; /* wichtig: überschreibt body::before{display:none !important;} */
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999999;
  background: rgba(255, 40, 40, 0.22);

  opacity: 0; /* <<< wichtig: nach Animation wieder transparent */
  animation: buzzerFlash 560ms ease-out;
}



@keyframes buzzerFlash{
  0%   { opacity: 0; }
  40%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ===== V85: Roter Screen-Flash beim Buzz ===== */
body.buzzer-flash::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 9999;                 /* über allem UI/Overlay */
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 0, 0, 0.55) 0%,
    rgba(255, 0, 0, 0.35) 35%,
    rgba(255, 0, 0, 0.15) 60%,
    rgba(255, 0, 0, 0.0) 75%
  );

  opacity: 0; /* <<< wichtig */
  animation: buzzerFlash 360ms ease-out;
}


@keyframes buzzerFlash{
  0%   { opacity: 0;   }
  15%  { opacity: 1;   }
  100% { opacity: 0;   }
}

/* Fullscreen grüner Flash bei Richtig / Punkte */
body.correct-flash::before{
  content:"";
  display: block !important; /* überschreibt body::before{display:none !important;} */
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999999;
  background: rgba(31, 191, 74, 0.22);

  opacity: 0;                 /* wichtig: definiert Start/Ende */
  animation: correctFlash 560ms ease-out;
}

body.correct-flash::after{
  content:"";
  display: block !important;
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(31, 191, 74, 0.55) 0%,
    rgba(31, 191, 74, 0.35) 35%,
    rgba(31, 191, 74, 0.15) 60%,
    rgba(31, 191, 74, 0.0) 75%
  );

  opacity: 0;                 /* wichtig */
  animation: correctFlash 560ms ease-out;
}

@keyframes correctFlash{
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ===== V94: SOUND Fakteneinschub (Waveform + Play Button) ===== */

.ui-btn.sound-play{
  font-size: 22px;
  font-weight: 1000;
  padding: 14px 22px;
  border-radius: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 0 18px rgba(0,0,0,0.35);
}

/* Rechte "Medien-Spalte" in Fakten-Zelle: Bild ODER Waveform */
.fakten-cell .fakten-media{
  width: 44%;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.fakten-cell canvas.fakten-wave{
  width: 100%;
  height: 100%;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.18);
}

.fakten-wave{
  aspect-ratio: 1 / 1;   /* erzwingt quadratische Darstellung */
  height: auto;
}

/* ===== V101: Leaderboard Overlay ===== */
.leaderboard{
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  z-index: 5000;                 /* über allem */
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(3px);
  pointer-events: none;          /* erst bei .visible klickbar */
}

.leaderboard.visible{
  display: grid;
  pointer-events: auto;
}

.leaderboard-inner{
  width: min(720px, 92vw);
  background: rgba(0,0,0,0.75);
  border: 2px solid rgba(255,255,255,0.22);
  border-radius: 18px;
  padding: 18px 18px 14px;
  box-shadow: 0 0 22px rgba(0,0,0,0.45);
}

.leaderboard-inner h2{
  margin: 4px 0 14px;
  text-align: center;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.leaderboard-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.leaderboard-list li{
  display: grid;
  grid-template-columns: 70px 1fr 170px;
  align-items: center;
  gap: 14px;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  padding: 10px 14px;

  font-size: 22px;
  font-weight: 900;
}

.leaderboard-list li.winner{
  border-color: rgba(72,130,251,0.95);
  box-shadow:
    0 0 0 2px rgba(72,130,251,0.45),
    0 0 16px rgba(72,130,251,0.45);
}


.lb-rank{ opacity: 0.9; }
.lb-name{ text-transform: uppercase; }
.lb-score{ text-align: right; }

.leaderboard-hint{
  margin-top: 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  opacity: 0.65;
}

/* Mod-Tab darf das Overlay niemals sehen */
body:not(.player-view):not(.spectator-view) #leaderboard{
  display: none !important;
}


/* ===== V101: Button-Farben für Spielsteuerung ===== */

/* Nächster Hinweis = blau */
#next-hint.ui-btn{
  background: linear-gradient(180deg, #5b8fff 0%, #3a6fff 100%);
  border-color: #6fa1ff;
  box-shadow:
    0 6px 16px rgba(72,130,251,0.45),
    inset 0 1px 0 rgba(255,255,255,0.35);
}

#next-hint.ui-btn:hover{
  filter: brightness(1.08);
}

#next-hint.ui-btn:active{
  transform: translateY(1px);
}

/* Richtig = grün */
#buzzer-right.ui-btn{
  background: linear-gradient(180deg, #38d66b 0%, #1fbf4a 100%);
  border-color: #5be08b;
  box-shadow:
    0 6px 16px rgba(31,191,74,0.45),
    inset 0 1px 0 rgba(255,255,255,0.35);
}

#buzzer-right.ui-btn:hover{
  filter: brightness(1.08);
}

#buzzer-right.ui-btn:active{
  transform: translateY(1px);
}

/* ===== V101: Globaler Hover-Glow für alle Buttons ===== */
.ui-btn{
  transition:
    filter 120ms ease,
    box-shadow 120ms ease,
    transform 80ms ease;
}

.ui-btn:hover{
  filter: brightness(1.12) saturate(1.15);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.25),
    0 0 12px rgba(91,143,255,0.55),
    0 0 22px rgba(91,143,255,0.35);
}

.ui-btn:active{
  transform: translateY(1px) scale(0.985);
}

/* ===== V103: Spectator + Timer ===== */

/* Spectator sieht die gleiche Bühne wie Player */
body.spectator-view #players-section{ display:block; }
body.spectator-view #moderator-panel{ display:none; }

/* V113: Spectator ist Player-Layout – aber ohne Schreibfelder in Modus 3 */
body.spectator-view #ausdenken-inputs{
  display: none !important;
}


/* Cam-Timer (links oben in der jeweiligen Cam) */
.player-cam{ position: relative; }

/* V108: Buzzer + Timer gemeinsam oben rechts in der Cam */
.buzz-ui{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 80;                 /* wie .buzzer-btn vorher */
  display: flex;
  gap: 10px;
  align-items: center;
}

/* BUZZ im Wrapper darf NICHT mehr absolut sein */
.buzz-ui .buzzer-btn{
  position: static;
  top: auto;
  right: auto;
}

/* V108: Timer exakt so groß wie BUZZ-Button */
.buzz-ui .cam-timer{
  position: static;
  z-index: auto;

  /* exakt wie .buzzer-btn */
  padding: 10px 14px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.85);
  background: var(--accent);
  color: #ffffff;

  font-weight: 900;
  letter-spacing: 0.04em;

  /* V110: feste Box + stabile Ziffernbreite */
  width: 84px;                        /* fix -> kein Pumpen */
  line-height: 1;
  font-variant-numeric: tabular-nums; /* Ziffern gleich breit */

  display: inline-flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 0 14px rgba(72,130,251,0.45);
}




/* V108: Danger-Timer – identisch zum BUZZ (keine rote Kontur, nur roter Glow) */
.buzz-ui .cam-timer.is-danger{
  background: rgba(255, 0, 0, 0.92);     /* identisch zum Buzzer */
  border-color: rgba(255,255,255,0.85); /* exakt wie .buzzer-btn */

  /* Nur Glow nach außen – keine rote Kontur */
  box-shadow:
    0 0 12px rgba(255, 0, 0, 0.75),
    0 0 22px rgba(255, 0, 0, 0.55);
}

/* V110: KEIN display:none -> sonst gibt es keine Pop-Out Animation */
.cam-timer[aria-hidden="true"]{ pointer-events:none; }


/* ===== V108: Timer Pop-In / Pop-Out ===== */
.buzz-ui .cam-timer{
  transform-origin: right center;      /* Pop von der BUZZ-Seite weg */
  will-change: transform, opacity;
  transition:
    opacity 140ms ease,
    transform 180ms cubic-bezier(.2,.9,.25,1);
}

/* sichtbar */
.buzz-ui .cam-timer[aria-hidden="false"]{
  opacity: 1;
  transform: scale(1);
}

/* ausgeblendet */
.buzz-ui .cam-timer[aria-hidden="true"]{
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
}

/* V110: Danger-Farbe bleibt auch beim Ausblenden aktiv */
.buzz-ui .cam-timer.is-danger[aria-hidden="true"]{
  background: rgba(255, 0, 0, 0.92);
}


/* kurzer Punch beim Einblenden */
.buzz-ui .cam-timer.is-pop{
  animation: timerPop 220ms ease-out;
}

@keyframes timerPop{
  0%   { transform: scale(0.85); }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}


/* Spectator-Ausdenken Hinweisfeld (zentriert) */
.spectator-ausdenken{
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: none; /* aria-hidden steuert */
  place-items: center;
  pointer-events: none;
}

.spectator-ausdenken[aria-hidden="false"]{ display: grid; }

.spectator-ausdenken-inner{
  position: fixed;

  left: 504px;
  top: 183px;
  width: 1387px;        /* wie Cam */
  height: 411px;

  padding: 28px 34px;
  border-radius: 28px;

  background: rgba(0, 0, 0, 0.9);
  border: 2px solid rgba(255,255,255,0.14);
  box-shadow: 0 0 60px rgba(0,0,0,0.55);
}

.spectator-ausdenken-text{
  font-size: 48px;
  line-height: 1.25;
  font-weight: 1000;

  /* Vertikal + horizontal zentrieren, Textfluss bleibt normal */
  place-items: center;     /* vertikal + horizontal */
  text-align: center;

  width: 100%;
  height: 100%;

  text-shadow: 0 2px 18px rgba(0,0,0,0.45);
}




/* Timer-Zeile im Spectator-Feld etwas größer betonen */
.spectator-ausdenken-text [data-role="time"]{
  display: inline-block;
  margin-top: 14px;
  font-size: 84px;
}

/* Spectator: Buzzer sollen immer rot aussehen (auch wenn nicht klickbar) */
body.spectator-view .buzzer-btn{
  opacity: 1 !important;
  filter: none !important;
  cursor: default !important;
}

/* ===== V114: Mode-Transition (nur Player + Spectator) ===== */

/* Layer liegt über allem, wird nur während Transition eingeblendet */
#mode-transition-layer{
  position: fixed;
  inset: 0;
  z-index: 100000;
  pointer-events: none;
  display: none;
}

body.mode-transition #mode-transition-layer{
  display: block;
}

/* Alles weich ausblenden (Background bleibt = body Background) */
#players-section,
#leaderboard,
#logo-hover-layer,
#topbar,
#top-mode-text,
#top-round-text{
  transition: opacity 220ms ease;
}

body.mode-transition #players-section,
body.mode-transition #leaderboard,
body.mode-transition #logo-hover-layer,
body.mode-transition #topbar,
body.mode-transition #top-mode-text,
body.mode-transition #top-round-text{
  opacity: 0;
}


/* Logo-Animation in der Mitte */
#mode-transition-logo{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240px;
  height: auto;
  transform: translate(-50%, -50%) scale(0.02);
  opacity: 0;
  will-change: transform, opacity;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.45));
}

#mode-transition-layer.run #mode-transition-logo{
  animation: modeLogoZoom 1650ms cubic-bezier(0.18, 0.92, 0.18, 1) both;
}

@keyframes modeLogoZoom{
  0%   { transform: translate(-50%, -50%) scale(0.02); opacity: 0; }
  10%  { opacity: 1; }

  /* Peak (größer als vorher) */
  50%  { transform: translate(-50%, -50%) scale(4.90); opacity: 1; }

  /* „invertiert“ wieder zurück, KEIN Verweilen */
  100% { transform: translate(-50%, -50%) scale(0.02); opacity: 0; }
}

/* ===== V128: Konfetti-Regen (Leaderboard) ===== */
.confetti-layer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999999; /* über allem UI */
  overflow: hidden;
}

.confetti-piece{
  position: absolute;
  top: -24px;
  border-radius: 2px;
  opacity: 0.95;

  animation-name: confettiFall;
  animation-timing-function: cubic-bezier(.25,.8,.25,1);
  animation-fill-mode: both;
}

@keyframes confettiFall{
  0%{
    transform: translate3d(0,-20px,0) rotate(0deg);
    opacity: 0.0;
  }
  10%{ opacity: 1.0; }
  100%{
    transform: translate3d(var(--driftX,0vw),110vh,0) rotate(540deg);
    opacity: 0.95;
  }
}

.mod-header-left{
  display:flex;
  align-items:center;
  gap: 10px;
}

.mod-header-left h1{
  margin: 0;
}

/* Zurück-zur-Startseite Button (Mod + Player/Spectator) */
.back-home-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: none;

  color: #fff;
  text-decoration: none;

  background: rgba(0,0,0,0.25);
  border: 2px solid rgba(255,255,255,0.22);
  box-shadow: 0 0 18px rgba(0,0,0,0.25);

  transition: filter 120ms ease, transform 80ms ease, box-shadow 120ms ease;
}

.back-home-btn:hover{
  filter: brightness(1.10) saturate(1.10);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.22),
    0 0 14px rgba(91,143,255,0.35);
}

.back-home-btn:active{
  transform: translateY(1px) scale(0.99);
}

/* Player/Spectator: Button links neben dem Hover-Logo */
#back-home-top{
  position: absolute;
  top: 8px;

  /* Logo steht bei dir: right:3px; width:180px -> Button links daneben */
  right: calc(3px + 180px + 10px);

  pointer-events: auto; /* wichtig: klickbar trotz Logo-Layer */
  z-index: 10000;
}





























/* ===========================
   Z-INDEX OVERRIDES (V74)
   Aufsteigend sortiert
   =========================== */

/* Basis-Layer */
#players-section { z-index: 1;
  pointer-events: none !important; }
.resolution-text { z-index: 2;
  pointer-events: none !important; }

/* Auflösung / Buzzer */
.resolution-overlay { z-index: 9;
  pointer-events: none !important; }
#buzzer-results { z-index: 9;
  pointer-events: none !important; }

/* !!!AUSDENKEN-OVERLAY - Cams */
#players,
#player-mod-cam{
  z-index: 63;
  pointer-events: none !important;
}

/* Votes / Autoren (Denken) */
body.player-view.mode-ausdenken #entries-layer-votes,
body.player-view.mode-ausdenken #entries-layer-votes .vb-slot,
body.player-view.mode-ausdenken #entries-layer-votes .hint-row .ab{
  z-index: 50;
  pointer-events: none !important; /* bleibt, damit nix Klicks frisst */
}

/* Hintergrund-Overlay (über Autoren, unter Haupt-Overlay) */
#overlay-bg-layer{
  z-index: 61;
  pointer-events: none !important;
}

/* Panels / UI */
#hints-panel,
#view-toggle-top{
  z-index: 60;
  pointer-events: none !important;
}

/* Haupt-Overlay */
#overlay-layer{
  z-index: 62;
  pointer-events: none !important;
}

/* !!!AUSGEDACHTE EINTRÄGE */
#entries-layer,
.ausdenken-pokemon{
  z-index: 70;
}

/* Fakten-Royale / Buzzer-Buttons */
#fakten-grid{
  z-index: 80;
  pointer-events: none !important; /* Grid-Layer selbst frisst keine Klicks */
}
.buzzer-btn{
  z-index: 80;
  pointer-events: auto; /* WICHTIG: wieder anklickbar */
}

/* Topbar / Mod-Header */
#topbar,
#top-mode-text,
#top-round-text{
  z-index: 100;
  pointer-events: none !important;
}

#bg-feld-layer{
  z-index: 60;
}

/* Schreibfelder (Denken) */
.ausdenken-inputs{
  z-index: 200;
  pointer-events: auto; /* sonst kann man nicht tippen */
}



/* ===== V135: Topbar (Modus + Runde) ausblenden, wenn Leaderboard offen ist ===== */
body.player-view.leaderboard-visible #top-mode-text,
body.player-view.leaderboard-visible #top-round-text{
  opacity: 0;
  pointer-events: none;
}




body.player-view.mode-ausdenken .ausdenken-input-title{
position: relative;
z-index: 22220;
}

body.player-view.mode-ausdenken #ausdenken-inputs{
position: relative;
z-index: 22220;
}

/* V154: Reflow-Helfer für Spectator-Ausdenken */
#spectator-ausdenken.force-refresh{
  outline: 0 solid transparent;
}