/* general-style.css — Variablen + globale, geräteunabhängige Styles */
  /* TOP BAR */
  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    padding: 14px 20px;
    background: var(--paper);
    border: var(--stroke-thick) solid var(--ink);
    border-radius: 999px;
  }
  .brand {
    display: flex; align-items: center; gap: 10px;
    font-family: 'Bangers', sans-serif;
    font-size: 28px;
    letter-spacing: 1.5px;
    color: var(--ink);
  }
  .brand .horse-mark {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    animation: bounce 1.8s ease-in-out infinite;
  }
  @keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

  .counter {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--ink);
    color: var(--paper);
    padding: 8px 16px;
    border-radius: 999px;
    font-family: 'Bangers', sans-serif;
    font-size: 19px;
    letter-spacing: 1px;
    border: var(--stroke-thick) solid var(--ink);
  }
  .counter svg { display:block; }


  /* ROLE PICK */
  .role-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 8px;
  }
  .role-card {
    background: var(--paper);
    border: var(--stroke-thick) solid var(--ink);
    border-radius: 20px;
    padding: 22px 14px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
  }
  .role-card:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
  .role-card.selected {
    background: var(--ink);
    color: var(--paper);
  }
  .role-card.selected svg path,
  .role-card.selected svg line,
  .role-card.selected svg polyline,
  .role-card.selected svg polygon,
  .role-card.selected svg circle,
  .role-card.selected svg rect,
  .role-card.selected svg ellipse {
    stroke: var(--paper) !important;
  }
  .role-card .role-ico {
    height: 70px;
    display: grid; place-items: center;
    margin-bottom: 4px;
  }
  .role-card .role-name {
    font-family: 'Bangers', sans-serif;
    font-size: 24px;
    letter-spacing: 1.5px;
    margin-bottom: 4px;
  }
  .role-card .role-desc {
    font-size: 15px;
    color: inherit;
    opacity: 0.7;
  }

  /* NAME + AVATAR */
  .input-field {
    width: 100%;
    padding: 14px 18px;
    border-radius: 16px;
    border: var(--stroke-thick) solid var(--ink);
    background: var(--paper);
    font-size: 19px;
    font-family: 'Patrick Hand', sans-serif;
    color: var(--ink);
    outline: none;
    transition: all 0.15s;
  }
  .input-field:focus { transform: translateY(-1px); box-shadow: 3px 3px 0 var(--ink); }
  .input-field::placeholder { color: #666666; }
  .label {
    display: block;
    font-family: 'Bangers', sans-serif;
    font-size: 19px;
    letter-spacing: 1px;
    margin: 18px 0 8px;
    color: var(--ink);
  }

  .avatar-picker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
  }
  .avatar-hero {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: var(--paper);
    display: grid;
    place-items: center;
    position: relative;
  }
  /* Langsam rotierender, gestrichelter Ring um den Hero-Avatar */
  .avatar-hero::before {
    content: "";
    position: absolute;
    inset: -10px;
    border: 2.5px dashed var(--ink);
    border-radius: 50%;
    opacity: 0.55;
    animation: spinSlow 16s linear infinite;
    pointer-events: none;
  }
  @keyframes spinSlow { to { transform: rotate(360deg); } }
  .avatar-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
  }
  /* Pop beim Avatar-Wechsel (Klasse wird in avatar.js kurz neu gesetzt) */
  .avatar-hero img.pop { animation: heroPop .4s cubic-bezier(.34,1.56,.64,1); }
  @keyframes heroPop {
    0% { transform: scale(.78); }
    55% { transform: scale(1.07); }
    100% { transform: scale(1); }
  }
  /* Funkel-Stern neben dem Hero-Avatar (weißer Stern als Data-URI, kein Font-Glyph) */
  .avatar-hero::after {
    content: "";
    position: absolute;
    top: -6px;
    right: -24px;
    width: 22px;
    height: 22px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 L14 9 L21 12 L14 15 L12 22 L10 15 L3 12 L10 9 Z' fill='%23FFFFFF'/%3E%3C/svg%3E") center/contain no-repeat;
    animation: twinkle 1.9s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes twinkle {
    0%, 100% { opacity: .25; transform: scale(.7) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.15) rotate(25deg); }
  }
  .avatar-hero-name {
    font-family: 'Bangers', sans-serif;
    font-size: 24px;
    letter-spacing: 1.5px;
    text-align: center;
    margin-top: -2px;
  }
  .avatar-scroller-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
  }
  .av-arrow {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: var(--stroke-thick) solid var(--ink);
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform 0.1s;
  }
  .av-arrow:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
  .av-arrow:active { transform: translate(1px, 1px); box-shadow: none; }
  .avatar-scroller {
    flex: 1 1 auto;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 4px;
  }
  .avatar-scroller::-webkit-scrollbar { display: none; }
  .avatar-thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2.5px solid var(--ink);
    background: var(--paper);
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    scroll-snap-align: center;
    transition: transform 0.15s;
  }
  .avatar-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .avatar-thumb:hover { transform: translateY(-2px); }
  .avatar-thumb.selected {
    border-width: var(--stroke-thick);
    transform: translateY(-2px);
    box-shadow: 3px 3px 0 var(--ink);
    animation: thumbPop .3s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes thumbPop {
    0% { transform: translateY(-2px) scale(.85); }
    60% { transform: translateY(-4px) scale(1.12); }
    100% { transform: translateY(-2px) scale(1); }
  }
  .avatar-thumb.taken {
    opacity: 0.3;
    cursor: not-allowed;
    filter: grayscale(100%);
  }
  .avatar-thumb.taken:hover { transform: none; }

  /* LOBBY */
  .player-list {
    display: flex; flex-direction: column; gap: 10px;
    margin: 14px 0 20px;
  }
  .player {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--paper);
    border: var(--stroke-thick) solid var(--ink);
    border-radius: 999px;
  }
  .player.me {
    background: var(--ink);
    color: var(--paper);
  }
  /* Frisch beigetretener Spieler fliegt einmalig rein (Klasse aus lobby.js). */
  .player.new-join { animation: riseIn .45s cubic-bezier(.18,.89,.32,1.18) backwards; }
  .player img {
    width: 48px; height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: white;
    border: 2.5px solid var(--ink);
  }
  .player.me img { border-color: var(--paper); }
  .player .pname {
    flex: 1;
    font-family: 'Bangers', sans-serif;
    font-size: 19px;
    letter-spacing: 1px;
  }
  .player .pname small {
    font-size: 12px; letter-spacing: 0;
    opacity: 0.6;
    margin-left: 4px;
  }
  .player .pbadge {
    font-family: 'Bangers', sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    border: 2.5px solid var(--ink);
  }
  .player.me .pbadge { background: var(--paper); color: var(--ink); }
  .player .ptrink {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--paper);
    color: var(--ink);
    border: 2.5px solid var(--ink);
    border-radius: 999px;
    padding: 4px 10px;
    font-family: 'Bangers', sans-serif;
    font-size: 14px;
    letter-spacing: 0.5px;
  }

  /* GAMES GRID */
  .games-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .game-card {
    background: var(--paper);
    border: var(--stroke-thick) solid var(--ink);
    border-radius: 20px;
    padding: 16px 12px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    position: relative;
  }
  .game-card:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
  .game-card.selected {
    background: var(--ink);
    color: var(--paper);
    animation: selectPop .3s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes selectPop {
    0% { transform: scale(.96); }
    55% { transform: scale(1.03); }
    100% { transform: scale(1); }
  }
  .game-card.selected .g-ico { animation: icoWiggle .5s ease-in-out .1s; }
  @keyframes icoWiggle {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-7deg); }
    75% { transform: rotate(7deg); }
  }
  .game-card.selected svg path,
  .game-card.selected svg line,
  .game-card.selected svg polyline,
  .game-card.selected svg polygon,
  .game-card.selected svg circle,
  .game-card.selected svg rect,
  .game-card.selected svg ellipse {
    stroke: var(--paper) !important;
  }
  .game-card .g-ico {
    height: 56px; display: grid; place-items: center; margin-bottom: 4px;
  }
  .game-card .gname {
    font-family: 'Bangers', sans-serif;
    font-size: 19px;
    letter-spacing: 1px;
  }
  .game-card .gdesc {
    font-size: 14px;
    color: inherit;
    opacity: 0.7;
    margin-top: 2px;
  }
  .vote-count {
    animation: popIn .3s cubic-bezier(.34,1.56,.64,1) backwards;
    position: absolute;
    top: -10px; right: -10px;
    background: var(--paper);
    color: var(--ink);
    border: var(--stroke-thick) solid var(--ink);
    border-radius: 999px;
    min-width: 30px; height: 30px;
    padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Bangers', sans-serif;
    font-size: 15px;
  }
  .game-card.selected .vote-count {
    background: var(--paper); color: var(--ink);
  }

  .mode-toggle {
    display: flex;
    border: var(--stroke-thick) solid var(--ink);
    border-radius: 999px;
    padding: 4px;
    margin-bottom: 18px;
    background: var(--paper);
  }
  .mode-toggle button {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 16px;
    border-radius: 999px;
    font-family: 'Bangers', sans-serif;
    font-size: 17px;
    letter-spacing: 1px;
    cursor: pointer;
    color: var(--ink-soft);
    transition: all 0.15s;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  }
  .mode-toggle button.active {
    background: var(--ink);
    color: var(--paper);
  }
  .mode-toggle button.active svg path,
  .mode-toggle button.active svg line,
  .mode-toggle button.active svg circle {
    stroke: var(--paper) !important;
  }
  .mode-toggle button:disabled { cursor: not-allowed; opacity: 0.5; }

  /* VOTE LIST */
  .votes-list {
    border: 2.5px dashed var(--ink);
    border-radius: 18px;
    padding: 14px;
    margin-top: 14px;
    max-height: 200px;
    overflow-y: auto;
  }
  .votes-list h4 {
    font-family: 'Bangers', sans-serif;
    font-size: 16px;
    letter-spacing: 1px;
    margin-bottom: 8px;
    color: var(--ink);
    display: inline-flex; align-items: center; gap: 6px;
  }
  .vote-row {
    display: flex; align-items: center; gap: 8px;
    font-size: 16px;
    padding: 5px 0;
    border-top: 1.5px solid #333333;
  }
  .vote-row:first-of-type { border-top: none; }
  .vote-row img {
    width: 26px; height: 26px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--ink);
  }
  .vote-row b { font-family: 'Patrick Hand', sans-serif; font-weight: 700; }
  .empty-votes {
    color: var(--ink-soft);
    font-style: italic;
    font-size: 15px;
  }

  /* ROLE BANNER */
  .role-banner {
    text-align: center;
    font-size: 15px;
    color: var(--ink);
    margin-top: 10px;
    padding: 10px 14px;
    background: var(--paper);
    border: 2.5px solid var(--ink);
    border-radius: 16px;
    border-style: dashed;
  }
  /* Logo in der Lobby-Überschrift wippt mit (bounce-Keyframes aus .horse-mark) */
  #screen-lobby h2 img { animation: bounce 1.8s ease-in-out infinite; }
  .role-banner b { font-family: 'Bangers', sans-serif; letter-spacing: 1px; font-weight: normal; font-size: 17px; }

  /* GAME STAGE */
  .game-stage { text-align: center; padding: 16px 0; }
  .stage-ico {
    margin-bottom: 6px;
    display: flex; justify-content: center;
  }
  /* Icon pendelt sanft — bewusst auf dem KIND (svg/img), damit es sich mit
     Container-Animationen wie .bomb-pulse (auf .stage-ico) kombiniert. */
  .stage-ico > svg, .stage-ico > img { animation: icoSway 3.2s ease-in-out infinite; }
  @keyframes icoSway {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }
  }
  .stage-title {
    font-family: 'Bangers', sans-serif;
    font-size: 36px;
    margin-bottom: 8px;
    letter-spacing: 2px;
    text-shadow: 3px 3px 0 #3b3b3b;
  }
  .stage-hint {
    color: var(--ink-soft);
    font-size: 16px;
    margin: 4px 0 16px;
  }
  .stage-hint b { color: var(--ink); }

  /* Sprachauswahl als Dropdown im Avatar-Screen, oben rechts, mit Abstand zur Überschrift (V1.4). */
  .lang-switch { display: flex; justify-content: flex-end; margin-bottom: 26px; }
  .lang-select {
    font-family: 'Patrick Hand', sans-serif;
    font-size: 16px;
    background: var(--paper); color: var(--ink);
    border: var(--stroke-w) solid var(--ink);
    border-radius: 999px;
    padding: 8px 38px 8px 16px;
    cursor: pointer; outline: none;
    -webkit-appearance: none; appearance: none;
    /* weißer Chevron rechts */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
  }
  .lang-select:focus { box-shadow: 3px 3px 0 var(--ink); }
  .lang-select option { color: #111; }

  /* Einheitlicher "X ist dran"-Header für Spiele mit einzeln aktivem Spieler. */
  .turn-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 4px 0 18px;
  }
  .turn-header img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 4px solid var(--ink);
    object-fit: cover;
    background: var(--paper);
    /* Sonar-Puls: macht klar, wer gerade dran ist */
    animation: pulseRing 2.2s ease-out infinite;
  }
  @keyframes pulseRing {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45); }
    60% { box-shadow: 0 0 0 18px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
  }
  .turn-header .turn-name {
    font-family: 'Bangers', sans-serif;
    font-size: 34px;
    letter-spacing: 2px;
    line-height: 1;
    text-align: center;
    text-shadow: 2px 2px 0 #333333;
  }
  .turn-header .turn-you {
    display: inline-block;
    background: var(--ink);
    color: var(--paper);
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 18px;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 1px;
  }
  .turn-header .turn-game {
    font-family: 'Bangers', sans-serif;
    font-size: 18px;
    letter-spacing: 1.5px;
    opacity: 0.65;
    text-align: center;
  }
  .question-box {
    background: var(--paper);
    border: var(--stroke-thick) solid var(--ink);
    border-radius: 20px;
    padding: 24px;
    margin: 16px 0 30px;   /* unten Platz für den Sprechblasen-Zipfel */
    /* Kalam wird nicht (mehr) geladen — Patrick Hand ist lokal gebündelt und
       passt zum Rest des Designs (vorher fiel der Browser auf System-cursive). */
    font-family: 'Patrick Hand', sans-serif;
    font-size: 22px;
    font-weight: 700;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.35;
    position: relative;
  }
  .question-box::before {
    content: "";
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    border: 2.5px solid var(--ink);
    border-radius: 22px;
    transform: translate(5px, 5px);
    z-index: -1;
  }
  /* Sprechblasen-Zipfel: die Frage "spricht" zu den Spielern */
  .question-box::after {
    content: "";
    position: absolute;
    left: 42px;
    bottom: -13px;
    width: 22px;
    height: 22px;
    background: var(--paper);
    border-right: var(--stroke-thick) solid var(--ink);
    border-bottom: var(--stroke-thick) solid var(--ink);
    border-bottom-right-radius: 5px;
    transform: rotate(45deg);
  }

  /* DRINK BANNER */
  .drink-banner {
    background: var(--ink);
    color: var(--paper);
    padding: 14px 18px;
    border-radius: 18px;
    text-align: center;
    margin: 14px 0;
    font-size: 18px;
    border: var(--stroke-thick) solid var(--ink);
    display: flex; align-items: center; justify-content: center; gap: 10px;
    flex-wrap: wrap;
  }
  .drink-banner .big {
    font-family: 'Bangers', sans-serif;
    font-size: 28px;
    letter-spacing: 1.5px;
  }
  .drink-banner svg path, .drink-banner svg line, .drink-banner svg ellipse {
    stroke: var(--paper) !important;
  }
  /* Banner federt rein, Bierkrug "prostet" */
  .drink-banner { animation: bannerPop .45s cubic-bezier(.34,1.56,.64,1); }
  @keyframes bannerPop {
    0% { transform: scale(.92); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }
  .drink-banner svg { animation: beerCheers 1.8s ease-in-out .4s infinite; }
  @keyframes beerCheers {
    0%, 100% { transform: rotate(0); }
    12% { transform: rotate(-12deg); }
    28% { transform: rotate(9deg); }
    40% { transform: rotate(0); }
  }

  /* HELPERS */
  .row { display: flex; gap: 10px; flex-wrap: wrap; }
  .row .btn { flex: 1; min-width: 140px; }
  .center { text-align: center; }
  .mt-2 { margin-top: 14px; }
  .mt-3 { margin-top: 22px; }
  .hidden { display: none !important; }

  /* Federnder Screen-Einstieg — identisch zum Inline-CSS in index.html. */
  .fade-in { animation: fadeIn 0.45s cubic-bezier(.22,1.3,.36,1); }
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* ===== Einflug-Stagger beim Screen-Wechsel =====
     show() setzt .entering für ~0.9s auf den Screen — nur in diesem Fenster
     fliegen Listen-Kinder gestaffelt rein. Live-Re-Renders über lobby:state
     (Spieler-Updates, Votes, Spielphasen) animieren danach NICHT erneut. */
  .card.entering .player-list > *,
  .card.entering .games-grid > *,
  .card.entering .avatar-scroller > *,
  .card.entering .quiz-options > *,
  .card.entering .wwe-players > *,
  .card.entering .race-board > *,
  .card.entering .question-box,
  .card.entering .turn-header {
    animation: riseIn .4s cubic-bezier(.18,.89,.32,1.18) backwards;
  }
  .card.entering .player-list > :nth-child(1), .card.entering .games-grid > :nth-child(1), .card.entering .avatar-scroller > :nth-child(1), .card.entering .quiz-options > :nth-child(1), .card.entering .wwe-players > :nth-child(1), .card.entering .race-board > :nth-child(1) { animation-delay: .04s; }
  .card.entering .player-list > :nth-child(2), .card.entering .games-grid > :nth-child(2), .card.entering .avatar-scroller > :nth-child(2), .card.entering .quiz-options > :nth-child(2), .card.entering .wwe-players > :nth-child(2), .card.entering .race-board > :nth-child(2) { animation-delay: .08s; }
  .card.entering .player-list > :nth-child(3), .card.entering .games-grid > :nth-child(3), .card.entering .avatar-scroller > :nth-child(3), .card.entering .quiz-options > :nth-child(3), .card.entering .wwe-players > :nth-child(3), .card.entering .race-board > :nth-child(3) { animation-delay: .12s; }
  .card.entering .player-list > :nth-child(4), .card.entering .games-grid > :nth-child(4), .card.entering .avatar-scroller > :nth-child(4), .card.entering .quiz-options > :nth-child(4), .card.entering .wwe-players > :nth-child(4), .card.entering .race-board > :nth-child(4) { animation-delay: .16s; }
  .card.entering .player-list > :nth-child(5), .card.entering .games-grid > :nth-child(5), .card.entering .avatar-scroller > :nth-child(5), .card.entering .quiz-options > :nth-child(5), .card.entering .wwe-players > :nth-child(5), .card.entering .race-board > :nth-child(5) { animation-delay: .2s; }
  .card.entering .player-list > :nth-child(6), .card.entering .games-grid > :nth-child(6), .card.entering .avatar-scroller > :nth-child(6), .card.entering .quiz-options > :nth-child(6), .card.entering .wwe-players > :nth-child(6), .card.entering .race-board > :nth-child(6) { animation-delay: .24s; }
  .card.entering .player-list > :nth-child(7), .card.entering .games-grid > :nth-child(7), .card.entering .avatar-scroller > :nth-child(7), .card.entering .quiz-options > :nth-child(7), .card.entering .wwe-players > :nth-child(7), .card.entering .race-board > :nth-child(7) { animation-delay: .28s; }
  .card.entering .player-list > :nth-child(8), .card.entering .games-grid > :nth-child(8), .card.entering .avatar-scroller > :nth-child(8), .card.entering .quiz-options > :nth-child(8), .card.entering .wwe-players > :nth-child(8), .card.entering .race-board > :nth-child(8) { animation-delay: .32s; }
  .card.entering .player-list > :nth-child(n+9), .card.entering .games-grid > :nth-child(n+9), .card.entering .avatar-scroller > :nth-child(n+9), .card.entering .quiz-options > :nth-child(n+9), .card.entering .wwe-players > :nth-child(n+9), .card.entering .race-board > :nth-child(n+9) { animation-delay: .36s; }
  @keyframes riseIn {
    from { opacity: 0; transform: translateY(12px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes popIn {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }

  /* TOAST */
  #toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: var(--paper); color: var(--ink);
    border: var(--stroke-thick) solid var(--ink);
    padding: 12px 22px; border-radius: 999px;
    font-family: 'Bangers', sans-serif; font-size: 19px; letter-spacing: 1.5px;
    box-shadow: 5px 5px 0 var(--ink);
    z-index: 1000;
    opacity: 0; transition: all .4s cubic-bezier(.34,1.56,.64,1); max-width: 90%; text-align: center;
    display: flex; align-items: center; gap: 8px;
  }


  /* scrollbar */
  ::-webkit-scrollbar { width: 8px; }
  ::-webkit-scrollbar-track { background: var(--paper-soft); }
  ::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 8px; }

  /* ROUND BANNER — breiter weißer Banner, der nach jeder Spielrunde aufpoppt
     und automatisch wieder verschwindet, sobald die nächste Runde startet. */
  .round-banner-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 99;
    animation: rbBackdropIn 0.25s ease forwards;
    pointer-events: none;
  }
  .round-banner {
    position: fixed;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    background: #FFFFFF;
    color: #111111;
    border-top: 5px solid #111111;
    border-bottom: 5px solid #111111;
    padding: 28px 24px;
    z-index: 100;
    text-align: center;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    transform-origin: center;
    animation: rbSweep 0.45s cubic-bezier(.4, .2, .2, 1.3) forwards;
  }
  .round-banner-headline {
    font-family: 'Bangers', sans-serif;
    font-size: 36px;
    letter-spacing: 2px;
    margin-bottom: 14px;
    line-height: 1.1;
    text-shadow: 3px 3px 0 #DCDCDC;
    animation: rbHeadline .5s cubic-bezier(.34,1.56,.64,1) .1s backwards;
  }
  @keyframes rbHeadline {
    from { transform: scale(.7); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }
  /* Funkelnde Sterne links und rechts der Headline (schwarz auf weißem Banner) */
  .round-banner-headline::before,
  .round-banner-headline::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: 0 10px;
    vertical-align: middle;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 L14 9 L21 12 L14 15 L12 22 L10 15 L3 12 L10 9 Z' fill='%23111111'/%3E%3C/svg%3E") center/contain no-repeat;
    animation: twinkle 1.6s ease-in-out infinite;
  }
  .round-banner-headline::after { animation-delay: .8s; }
  .round-banner-drinkers {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
  }
  .round-banner-drinker {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #111111;
    color: #FFFFFF;
    padding: 8px 18px 8px 8px;
    border-radius: 999px;
    animation: rbDrinkerIn 0.4s cubic-bezier(.4, .2, .2, 1.4) backwards;
  }
  .round-banner-drinker:nth-child(1) { animation-delay: 0.15s; }
  .round-banner-drinker:nth-child(2) { animation-delay: 0.25s; }
  .round-banner-drinker:nth-child(3) { animation-delay: 0.35s; }
  .round-banner-drinker:nth-child(4) { animation-delay: 0.45s; }
  .round-banner-drinker:nth-child(5) { animation-delay: 0.55s; }
  .round-banner-drinker img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    object-fit: cover;
    background: #FFFFFF;
  }
  .round-banner-drinker .rb-name {
    font-family: 'Bangers', sans-serif;
    font-size: 22px;
    letter-spacing: 1px;
  }
  .round-banner-drinker .rb-amount {
    font-family: 'Bangers', sans-serif;
    font-size: 24px;
    letter-spacing: 1px;
    background: #FFFFFF;
    color: #111111;
    padding: 2px 14px;
    border-radius: 999px;
    margin-left: 6px;
  }
  .round-banner-empty {
    font-family: 'Bangers', sans-serif;
    font-size: 22px;
    letter-spacing: 1.5px;
    opacity: 0.7;
    margin-top: 8px;
    animation: rbEmptyIn .5s cubic-bezier(.34,1.56,.64,1) .25s backwards;
  }
  @keyframes rbEmptyIn {
    from { transform: scale(.7); opacity: 0; }
    to { transform: scale(1); opacity: 0.7; }
  }
  /* Bierkrug im Trinker-Badge "prostet" */
  .round-banner-drinker .rb-amount svg { animation: beerCheers 1.8s ease-in-out .9s infinite; }
  .round-banner-progress {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 5px;
    background: #111111;
    transform-origin: left center;
    transform: scaleX(1);
  }
  .round-banner-progress.go { animation: rbProgress linear forwards; }

  @keyframes rbBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes rbSweep {
    0%   { transform: translateY(-50%) scaleX(0); opacity: 0; }
    60%  { transform: translateY(-50%) scaleX(1.02); opacity: 1; }
    100% { transform: translateY(-50%) scaleX(1); opacity: 1; }
  }
  @keyframes rbDrinkerIn {
    0%   { transform: translateX(-30px); opacity: 0; }
    60%  { transform: translateX(6px); opacity: 1; }
    100% { transform: translateX(0); opacity: 1; }
  }
  @keyframes rbProgress {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
  }

  /* Verbindungs-Spinner: kurzes Feedback beim Beitritt, falls auf Socket/Server gewartet wird. */
  #connectingSpinner {
    position: fixed; inset: 0; z-index: 9998;
    display: none; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
    background: rgba(17, 17, 17, 0.7);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  #connectingSpinner .spinner {
    width: 54px; height: 54px;
    border: 5px solid rgba(255, 255, 255, 0.25);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  #connectingSpinner .spinner-label {
    font-family: 'Bangers', sans-serif; letter-spacing: 1.5px; font-size: 20px; color: #FFFFFF;
  }

    @media (max-width: 500px) {
    /* Floaty-Doodles im Hintergrund auf Mobil komplett entfernen — auf dem schmalen
       Screen ohnehin nicht sichtbar; display:none stoppt auch die Dauer-Animation. */
    .doodle { display: none; }
    body { padding: 12px; }
    h1 { font-size: 36px; }
    .stage-title { font-size: 28px; }
    .sharade-word { font-size: 28px; }
    .pin-row input { width: 46px; height: 62px; font-size: 26px; }
    .btn { font-size: 18px; padding: 12px 18px; }
    .brand { font-size: 22px; }
    .counter { font-size: 16px; padding: 6px 12px; }
    .player .pname { font-size: 17px; }
    .player img { width: 42px; height: 42px; }
    .wwe-question { font-size: 22px; }
  }