/* guess.css — Styles für "Guess the Horse" (Time Travel Game V1.1).
   Bar/Cartoon-Look: Zeitstrahl = helle Creme-Piste mit Tinte-Markierungen,
   Zahl-Bubble = GOLD-Chip mit Tinte, Ergebnis-Zeilen = Creme-Chips (Tab-Look). */

  .guess-slider-wrap {
    position: relative;
    width: 100%;
    margin: 46px 0 6px;
    padding: 0 6px;
  }

  /* Schwebende Zahl über dem Pferd-Regler. left wird per JS gesetzt (Reglerposition). */
  .guess-bubble {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: var(--bar-ink);
    border: 2.5px solid var(--bar-ink);
    font-family: 'Bangers', sans-serif;
    font-size: 22px;
    letter-spacing: 1px;
    padding: 4px 14px;
    border-radius: 999px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
  }
  /* kleiner Zeiger unter der Sprechblase */
  .guess-bubble::after {
    content: "";
    position: absolute;
    left: 50%; bottom: -8px;
    width: 12px; height: 12px;
    background: var(--accent);
    border-right: 2.5px solid var(--bar-ink);
    border-bottom: 2.5px solid var(--bar-ink);
    transform: translateX(-50%) rotate(45deg);
  }

  /* Renn-/Zeitstrahl: Creme-Piste, Tinte-Streckenmarkierungen. */
  .guess-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 12px;
    border-radius: 999px;
    background: var(--bar-cream);
    border: 2.5px solid var(--bar-ink);
    outline: none;
    cursor: pointer;
    /* gestrichelte Strecke für den "Zeitreise"-Look (Tinte auf Creme) */
    background-image: repeating-linear-gradient(90deg, rgba(27, 53, 86, 0.45) 0 2px, transparent 2px 22px);
    background-size: 22px 100%;
    background-repeat: repeat-x;
    background-position: center;
  }

  /* Schieberegler = EIGENER Avatar (V1.2). Das Bild kommt per CSS-Variable
     --thumb-img (inline aus guess.js gesetzt); Fallback ist das Logo. cover füllt
     den runden Thumb. Pseudo-Elemente erben die Variable vom Slider-Element. */
  .guess-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 54px; height: 54px;
    border-radius: 50%;
    border: 3.5px solid var(--bar-ink);
    background: var(--bar-cream) var(--thumb-img, url('/images/logo/logo_horse.webp')) center/cover no-repeat;
    box-shadow: 0 5px 0 rgba(0, 0, 0, 0.35);
    cursor: grab;
    margin-top: -21px;   /* zentriert den 54px-Thumb auf der 12px-Spur */
  }
  .guess-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.06); }
  .guess-slider::-moz-range-thumb {
    width: 54px; height: 54px;
    border-radius: 50%;
    border: 3.5px solid var(--bar-ink);
    background: var(--bar-cream) var(--thumb-img, url('/images/logo/logo_horse.webp')) center/cover no-repeat;
    box-shadow: 0 5px 0 rgba(0, 0, 0, 0.35);
    cursor: grab;
  }
  .guess-slider:disabled { opacity: 0.65; cursor: default; }
  .guess-slider:disabled::-webkit-slider-thumb { cursor: default; }

  /* Start-/Endzahl unter dem Regler */
  .guess-ends {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    font-family: 'Bangers', sans-serif;
    font-size: 16px;
    letter-spacing: 1px;
    color: var(--ink-soft);
  }

  /* Reveal: echte Antwort */
  .guess-answer {
    text-align: center;
    margin: 16px 0 10px;
    font-size: 18px;
    color: var(--ink);
  }
  .guess-answer .big {
    display: inline-block;
    margin-left: 6px;
    font-family: 'Bangers', sans-serif;
    font-size: 34px;
    letter-spacing: 1.5px;
    color: var(--accent);
    text-shadow: 2px 2px 0 var(--bar-ink-deep);
  }

  /* Reveal: Tipps sortiert nach Genauigkeit — Creme-Chips wie die Lobby-Tab-Zeilen. */
  .guess-results {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
  }
  .guess-result-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    background: var(--bar-cream);
    color: var(--bar-ink);
    border: 3px solid var(--bar-ink);
    border-radius: 999px;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
  }
  .guess-result-row img {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bar-cream);
    border: 2.5px solid var(--bar-ink);
  }
  .guess-result-row .gr-name {
    flex: 1;
    font-family: 'Bangers', sans-serif;
    font-size: 17px;
    letter-spacing: 1px;
  }
  .guess-result-row .gr-guess {
    font-family: 'Bangers', sans-serif;
    font-size: 18px;
    letter-spacing: 1px;
  }
  .guess-result-row .gr-tag { display: inline-flex; align-items: center; }
  .guess-result-row .gr-tag svg { display: block; }
  /* Dichtester Tipp = GOLD-Chip (Krone), Verlierer gestrichelt. */
  .guess-result-row.win {
    background: var(--accent);
    color: var(--bar-ink);
    border-color: var(--bar-ink);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3), 0 0 16px 2px rgba(255, 207, 63, 0.45);
  }
  .guess-result-row.win img { border-color: var(--bar-ink); }
  .guess-result-row.win .gr-tag svg path,
  .guess-result-row.win .gr-tag svg line,
  .guess-result-row.win .gr-tag svg circle,
  .guess-result-row.win .gr-tag svg polyline,
  .guess-result-row.win .gr-tag svg polygon { stroke: var(--bar-ink) !important; }
  .guess-result-row.lose { border-style: dashed; }

  /* STRAHL (Time Travel Game V1.2): alle Tipps auf einem Zeitstrahl, je Avatar + Zahl,
     wird kurz gezeigt, bevor die Antwort + der Banner kommen. */
  .guess-beam-wrap {
    position: relative;
    width: 100%;
    margin: 64px 0 6px;          /* oben Platz für die Zahlen über den Avataren */
    padding: 0 6px;
  }
  .guess-beam-track {
    position: relative;
    height: 12px;
    border-radius: 999px;
    background: var(--bar-cream);
    border: 2.5px solid var(--bar-ink);
    background-image: repeating-linear-gradient(90deg, rgba(27, 53, 86, 0.45) 0 2px, transparent 2px 22px);
    background-size: 22px 100%;
    background-repeat: repeat-x;
    background-position: center;
  }
  .guess-beam-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);   /* Avatar-Mitte sitzt auf dem Strahl */
    /* left wird inline gesetzt: calc(20px + (100% - 40px) * pct) */
    animation: gbmPop .35s cubic-bezier(.34,1.56,.64,1) both;
  }
  @keyframes gbmPop { from { transform: translate(-50%, -50%) scale(0); } to { transform: translate(-50%, -50%) scale(1); } }
  .guess-beam-marker img {
    display: block;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 2.5px solid var(--bar-ink);
    object-fit: cover;
    background: var(--bar-cream);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
  }
  .guess-beam-marker .gbm-num {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);    /* Zahl über dem Avatar */
    transform: translateX(-50%);
    background: var(--accent);
    color: var(--bar-ink);
    border: 2px solid var(--bar-ink);
    font-family: 'Bangers', sans-serif;
    font-size: 13px;
    letter-spacing: .5px;
    padding: 1px 8px;
    border-radius: 999px;
    white-space: nowrap;
  }

  /* Mobile: Slider etwas weiter nach unten + Zahl-Bubble höher über den 54px-Avatar,
     damit die Zahl nicht mit dem Avatar überlappt. */
  @media (max-width: 500px) {
    .guess-slider-wrap { margin-top: 70px; }
    .guess-bubble { top: -52px; }
  }