/* ═══════════════════════════════════════════════════════════════════════════
   SKILL GAMES — Oberflaeche (v3.98)
   ───────────────────────────────────────────────────────────────────────────
   Die Hugo-Kasse zeigt statt Wettspielen fuenf Spiele gegeneinander:
   Rock Paper Scissors, Tic Tac Toe, Four in a Row, Ludo, Wild Cards.
   Drei Ansichten in einer Seite (wie bei den Battles): Liste, Erstellen,
   Partie. Alles zeichnet public/js/geschick.js; hier stehen Formen und
   Bewegung. Bewegung nur auf transform/opacity.
   ═══════════════════════════════════════════════════════════════════════════ */

.gs { --p0: #7c5cff; --p1: #f5964a; --p2: #34d399; --p3: #ec7fb0;
      --p0-rgb: 124,92,255; --p1-rgb: 245,150,74; --p2-rgb: 52,211,153; --p3-rgb: 236,127,176;
      --u-r: #ef4444; --u-g: #22c55e; --u-b: #3b82f6; --u-y: #eab308 }
.gs [data-p="0"] { --pf: var(--p0); --pf-rgb: var(--p0-rgb) }
.gs [data-p="1"] { --pf: var(--p1); --pf-rgb: var(--p1-rgb) }
.gs [data-p="2"] { --pf: var(--p2); --pf-rgb: var(--p2-rgb) }
.gs [data-p="3"] { --pf: var(--p3); --pf-rgb: var(--p3-rgb) }

/* ═══ KOPF, LISTE ═══════════════════════════════════════════════════════════ */
.gs-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); flex-wrap: wrap }
.gs-kopf .page-title { margin-bottom: 2px }
.gs-kopf p { margin: 0; font: var(--t-text); color: var(--muted) }
.gs-kopf__aktionen { display: flex; gap: var(--s2); flex-wrap: wrap }
.gs-hinweis { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); margin-bottom: var(--s4); border: 1px solid rgba(76,201,240,.25); border-radius: var(--r-lg); background: rgba(76,201,240,.06); font: var(--t-klein); color: var(--text-2) }
.gs-hinweis b { color: var(--text) }
.gs-hinweis .ico { color: #4cc9f0; flex-shrink: 0 }

.gs-segmente { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: var(--s4) }
.gs-segment { min-height: 34px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--ink-800); color: var(--muted); font: var(--t-knopf-klein); letter-spacing: var(--ls-knopf); text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: color .15s, border-color .15s, background .15s }
.gs-segment:hover { color: var(--text); border-color: var(--line-2) }
.gs-segment.ist-an { color: var(--accent-ink); border-color: rgba(124,92,255,.5); background: var(--accent-dim) }
.gs-segment .gs-ikone { width: 16px; height: 16px }

.gs-abschnitt { display: flex; align-items: center; gap: var(--s3); margin: var(--s4) 0 var(--s2) }
.gs-abschnitt h3 { margin: 0; font: var(--t-abschnitt); letter-spacing: var(--ls-abschnitt); text-transform: uppercase; color: var(--muted) }
.gs-abschnitt .zahl { font: var(--t-zahl-klein); font-variant-numeric: tabular-nums; color: var(--accent-ink); background: var(--accent-dim); padding: 3px 8px; border-radius: 999px }
.gs-liste { display: flex; flex-direction: column; gap: var(--s2) }
.gs-leer { padding: var(--s5); border: 1px dashed var(--line-2); border-radius: var(--r-lg); color: var(--muted); font: var(--t-text); text-align: center }
.gs-zeile { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; align-items: center; gap: var(--s4); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-800); animation: gs-rein .4s var(--ease-out) both; transition: border-color .2s, background .2s }
@keyframes gs-rein { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.gs-zeile:hover { border-color: var(--line-2); background: var(--ink-750) }
.gs-zeile--laeuft { border-color: rgba(124,92,255,.35) }
.gs-zeile--meins { border-left: 3px solid var(--accent) }
.gs-zeile__bild { width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--ink-750); color: var(--accent-ink) }
.gs-zeile__bild .gs-ikone { width: 34px; height: 34px }
.gs-zeile__info { display: flex; flex-direction: column; gap: 5px; min-width: 0 }
.gs-zeile__name { font: var(--t-karte); color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.gs-zeile__id { font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); color: var(--muted) }
.gs-zeile__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: var(--t-klein); color: var(--muted) }
.gs-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; background: var(--ink-700); color: var(--text-2) }
.gs-chip--gold { background: rgba(243,193,95,.14); color: var(--gold) }
.gs-chip--gruen { background: rgba(34,197,94,.14); color: var(--green-ink) }
.gs-chip--rot { background: rgba(239,68,68,.14); color: var(--red-ink) }
.gs-chip--lila { background: var(--accent-dim); color: var(--accent-ink) }
.gs-chip--puls::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: gs-puls 1.2s ease-in-out infinite }
@keyframes gs-puls { 0%, 100% { opacity: .4 } 50% { opacity: 1 } }
.gs-sitze { display: flex; align-items: center; gap: 4px }
.gs-kopfbild { width: 28px; height: 28px; border-radius: 50%; background: var(--ink-650); box-shadow: 0 0 0 1px var(--line-2); overflow: hidden; display: grid; place-items: center; font: 700 .7rem/1 var(--font-label); color: var(--text); flex-shrink: 0 }
.gs-kopfbild img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated }
.gs-kopfbild--leer { background: transparent; border: 1px dashed var(--line-2); box-shadow: none }
.gs-kopfbild--bot { background: var(--ink-700); color: var(--accent-ink) }
.gs-kopfbild--bot .ico { width: 14px; height: 14px }
.gs-sitze__vs { margin: 0 3px; font: var(--t-etikett-klein); color: var(--muted); text-transform: uppercase }
.gs-preis { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; background: rgba(243,193,95,.12); color: var(--gold); font: var(--t-zahl-klein); font-variant-numeric: tabular-nums; white-space: nowrap }
.gs-preis--frei { background: rgba(34,197,94,.12); color: var(--green-ink) }
.gs-zeile__aktion { display: flex; gap: 6px; align-items: center }

/* ═══ UEBERSICHT (Hub) UND SPIELSEITE (v4.01) ══════════════════════════════ */
.gs-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s3); margin-bottom: var(--s4) }
.gs-hubkarte { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: var(--s5) var(--s4) var(--s4); border: 1px solid var(--line); border-radius: var(--r-xl); background: linear-gradient(180deg, var(--ink-750), var(--ink-800)); color: var(--text); cursor: pointer; text-align: center; transition: transform .2s var(--ease-out), border-color .2s, box-shadow .2s; overflow: hidden }
.gs-hubkarte::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 0%, rgba(124,92,255,.22), transparent 70%); opacity: 0; transition: opacity .2s }
.gs-hubkarte:hover { transform: translateY(-4px); border-color: rgba(124,92,255,.5); box-shadow: 0 18px 40px rgba(0,0,0,.35) }
.gs-hubkarte:hover::before { opacity: 1 }
.gs-hubkarte > * { position: relative }
.gs-hubkarte .gs-bild { width: 120px; height: 120px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)) }
.gs-hubkarte__text { display: flex; flex-direction: column; gap: 3px }
.gs-hubkarte__text b { font: var(--t-titel); letter-spacing: var(--ls-titel) }
.gs-hubkarte__text small { font: var(--t-klein); color: var(--muted) }
.gs-hubkarte__fuss { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; width: 100% }
.gs-hubkarte__knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 18px; border-radius: var(--r-md); background: var(--green); color: #04241a; font: var(--t-knopf); letter-spacing: var(--ls-knopf); text-transform: uppercase }
.gs-spielkopf { margin-bottom: var(--s4) }
.gs-zurueck { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; margin-bottom: var(--s3); border: 1px solid var(--line); border-radius: 999px; background: var(--ink-800); color: var(--muted); font: var(--t-knopf-klein); letter-spacing: var(--ls-knopf); text-transform: uppercase; cursor: pointer }
.gs-zurueck:hover { color: var(--text); border-color: var(--line-2) }
.gs-spielkopf__innen { display: flex; align-items: center; gap: var(--s5); padding: var(--s4) var(--s5); border: 1px solid var(--line); border-radius: var(--r-xl); background: radial-gradient(80% 120% at 0% 50%, rgba(124,92,255,.16), transparent 60%), var(--ink-800) }
.gs-spielkopf__innen .gs-bild { width: 112px; height: 112px; flex-shrink: 0; filter: drop-shadow(0 12px 20px rgba(0,0,0,.5)) }
.gs-spielkopf__text { min-width: 0 }
.gs-spielkopf__text .page-title { margin: 0 0 4px }
.gs-spielkopf__text p { margin: 0 0 10px; font: var(--t-text); color: var(--text-2); max-width: 720px }
.gs-spielseite { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--s4); align-items: start }
.gs-erstellen { position: sticky; top: var(--s4) }
.gs-erstellen .gs-option { grid-template-columns: 96px minmax(0, 1fr); padding: 9px 0 }
.gs-erstellen .gs-pille { min-width: 44px; padding: 6px 10px }
.gs-erstellen .gs-einsatz__schnell { grid-template-columns: repeat(5, minmax(0, 1fr)) }
.gs-erstellen .btn-play { margin-top: var(--s3) }
.gs-zeile__bild .gs-bild { width: 40px; height: 40px }
@media (max-width: 1100px) { .gs-spielseite { grid-template-columns: 1fr } .gs-erstellen { position: static } }
@media (max-width: 760px) { .gs-spielkopf__innen { flex-direction: column; text-align: center; align-items: center } .gs-spielkopf__innen .gs-partie__chips { justify-content: center } .gs-hub { grid-template-columns: repeat(2, minmax(0, 1fr)) } .gs-hubkarte .gs-bild { width: 80px; height: 80px } }

/* ═══ ERSTELLEN ═════════════════════════════════════════════════════════════ */
.gs-bauen { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: var(--s4); align-items: start }
.gs-box { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-800); padding: var(--s4) }
.gs-box h4 { margin: 0 0 var(--s3); font: var(--t-abschnitt); letter-spacing: var(--ls-abschnitt); text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px }
.gs-box h4 .zahl { width: 20px; height: 20px; border-radius: 50%; background: var(--accent-dim); color: var(--accent-ink); display: grid; place-items: center; font: var(--t-etikett) }
.gs-spielwahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s2) }
.gs-spielkarte { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: var(--s4) var(--s3); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-750); color: var(--text); cursor: pointer; text-align: center; transition: border-color .15s, transform .15s var(--ease-out), background .15s }
.gs-spielkarte:hover { border-color: var(--line-2); transform: translateY(-2px) }
.gs-spielkarte.ist-an { border-color: rgba(124,92,255,.6); background: var(--accent-dim); box-shadow: 0 0 0 1px rgba(124,92,255,.3) inset }
.gs-spielkarte .gs-ikone { width: 44px; height: 44px; color: var(--accent-ink) }
.gs-spielkarte b { font: var(--t-karte) }
.gs-spielkarte small { font: var(--t-klein); color: var(--muted); line-height: 1.3 }
.gs-spielkarte__spieler { position: absolute; top: 8px; right: 8px; font: var(--t-etikett-klein); color: var(--muted); letter-spacing: var(--ls-etikett) }
.gs-option { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line) }
.gs-option:first-of-type { border-top: 0 }
.gs-option__name { font: var(--t-zeile); color: var(--text) }
.gs-option__name small { display: block; font: var(--t-klein); color: var(--muted); margin-top: 2px }
.gs-pillen { display: flex; gap: 6px; flex-wrap: wrap }
.gs-pille { min-height: 36px; min-width: 52px; padding: 6px 14px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--ink-750); color: var(--text-2); font: var(--t-knopf); cursor: pointer; transition: all .15s; font-variant-numeric: tabular-nums }
.gs-pille:hover { color: var(--text); border-color: var(--accent) }
.gs-pille.ist-an { background: var(--accent); border-color: var(--accent); color: #fff }
.gs-pille:disabled { opacity: .35; cursor: not-allowed }
.gs-schalter { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: var(--t-zeile); color: var(--text) }
.gs-schalter input { appearance: none; width: 42px; height: 24px; border-radius: 999px; background: var(--ink-650); position: relative; cursor: pointer; transition: background .2s; flex-shrink: 0 }
.gs-schalter input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease-out) }
.gs-schalter input:checked { background: var(--accent) }
.gs-schalter input:checked::after { transform: translateX(18px) }
.gs-einsatz { display: flex; flex-direction: column; gap: var(--s2) }
.gs-einsatz__feld { display: flex; align-items: center; gap: 8px; padding: 0 12px; min-height: 46px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--ink-900) }
.gs-einsatz__feld:focus-within { border-color: var(--accent) }
.gs-einsatz__feld .ico { color: var(--gold) }
.gs-einsatz__feld input { flex: 1; min-width: 0; background: none; border: 0; color: var(--text); font: var(--t-zahl); outline: none }
.gs-einsatz__feld input::placeholder { color: var(--faint) }
.gs-einsatz__schnell { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px }
.gs-einsatz__schnell .gs-pille { min-width: 0; padding: 6px 4px; font: var(--t-knopf-klein) }
.gs-zusammen { position: sticky; top: var(--s4) }
.gs-zusammen__spiel { display: flex; align-items: center; gap: 12px; padding-bottom: var(--s3); border-bottom: 1px solid var(--line); margin-bottom: var(--s3) }
.gs-zusammen__spiel .gs-ikone { width: 40px; height: 40px; color: var(--accent-ink) }
.gs-zusammen__spiel b { font: var(--t-karte); display: block }
.gs-zusammen__spiel small { font: var(--t-klein); color: var(--muted) }
.gs-zusammen__zeile { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; font: var(--t-klein); color: var(--muted) }
.gs-zusammen__zeile b { color: var(--text); font: var(--t-zahl-klein); font-variant-numeric: tabular-nums }
.gs-zusammen__zeile--gross { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px }
.gs-zusammen__zeile--gross b { font: var(--t-zahl); color: var(--gold) }
.gs-zusammen .btn-play { margin-top: var(--s3) }
.gs-fehler { margin-top: var(--s2); font: var(--t-klein); color: var(--red-ink) }

/* ═══ PARTIE ════════════════════════════════════════════════════════════════ */
.gs-partie__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3) }
.gs-partie__titel { display: flex; align-items: center; gap: 10px; min-width: 0 }
.gs-partie__titel .gs-ikone { width: 30px; height: 30px; color: var(--accent-ink); flex-shrink: 0 }
.gs-partie__titel h2 { margin: 0; font: var(--t-titel); letter-spacing: var(--ls-titel) }
.gs-partie__titel h2 span { color: var(--muted); font-weight: 600 }
.gs-partie__chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center }
.gs-partie__aktionen { display: flex; gap: 6px; flex-wrap: wrap }
/* v4.24 (D28): Partie-Kopf am Handy in zwei Zeilen statt ~190 px. Zeile 1:
   Symbol, Name und die Chips (eine wischbare Reihe statt Umbruch). Zeile 2:
   die Knoepfe als gleich breite Symbolknoepfe, 44 px hoch — wie die
   Symbolknoepfe im Spielkopf (spiele.css .spiel-titel__knoepfe). Die
   Beschriftung bleibt im Text (font-size: 0) fuer Vorleseprogramme. So rueckt
   die eigene Uno-Hand ueber die untere Leiste. */
@media (max-width: 600px) {
  .gs-partie__kopf { gap: var(--s2); margin-bottom: var(--s2) }
  .gs-partie__titel { flex: 1 1 100%; gap: 8px }
  .gs-partie__titel .gs-ikone { width: 24px; height: 24px }
  .gs-partie__titel h2 { flex-shrink: 0; font-size: 1.1rem; white-space: nowrap }
  .gs-partie__chips { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none }
  .gs-partie__chips::-webkit-scrollbar { display: none }
  .gs-partie__chips > * { flex-shrink: 0 }
  .gs-partie__aktionen { flex: 1 1 100%; flex-wrap: nowrap }
  .gs-partie__aktionen .btn { flex: 1 1 0; min-width: 44px; min-height: 44px; padding: 0; gap: 0; justify-content: center; font-size: 0 }
  .gs-partie__aktionen .btn .ico { width: 18px; height: 18px }
  /* Beim Hinscrollen (handInsBild) endet die Hand ueber der festen Leiste. */
  .gs-buehne, .gs-uno__hand { scroll-margin-bottom: calc(var(--handy-leiste, 68px) + 8px) }
  /* Hinweise (Strike-Warnung u. a.) waehrend einer Partie oben statt unten —
     unten lagen sie 5 s lang genau auf der eigenen Hand. */
  body:has(#page-arena.active .gs-partie) #toast-container { top: calc(64px + env(safe-area-inset-top, 0px)); bottom: auto }
}
.gs-spieler { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s2); margin-bottom: var(--s3) }
.gs-spieler__karte { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-800); min-width: 0; transition: border-color .2s, box-shadow .2s }
.gs-spieler__karte::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--pf) }
.gs-spieler__karte.ist-dran { border-color: rgba(var(--pf-rgb), .55); box-shadow: 0 0 0 1px rgba(var(--pf-rgb), .25) inset, 0 0 24px rgba(var(--pf-rgb), .12) }
.gs-spieler__karte.ist-raus { opacity: .45 }
.gs-spieler__karte.ist-raus .gs-spieler__name { text-decoration: line-through }
.gs-spieler__karte .gs-kopfbild { width: 36px; height: 36px }
.gs-spieler__text { min-width: 0; flex: 1 }
.gs-spieler__name { font: var(--t-zeile); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px }
.gs-spieler__name .gs-du { font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); color: var(--pf); text-transform: uppercase }
.gs-spieler__status { font: var(--t-klein); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.gs-spieler__punkte { font: var(--t-zahl-gross); color: var(--pf); font-variant-numeric: tabular-nums }
/* v4.24 (D78): Der Name steht in eigener Spanne und kuerzt sich mit „…" —
   als nackter Text im Flex-Kasten schrumpfte er nicht, und overflow schnitt
   stattdessen das „you" ab („YO"). */
.gs-spieler__nametext { min-width: 0; overflow: hidden; text-overflow: ellipsis }
.gs-spieler__name .gs-du { flex-shrink: 0 }
/* Uno: Kartenzahl steht am Rechner im Status („· 7 cards"), das Abzeichen
   nur am Handy (siehe unten). */
.gs-spieler__punkte--uno { display: none }
.gs-uhr { position: relative; width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; font: var(--t-zahl-klein); font-variant-numeric: tabular-nums; color: var(--text) }
.gs-uhr svg { position: absolute; inset: 0; transform: rotate(-90deg) }
.gs-uhr circle { fill: none; stroke-width: 3 }
.gs-uhr__spur { stroke: var(--ink-650) }
.gs-uhr__rest { stroke: var(--pf); stroke-linecap: round; transition: stroke-dashoffset 1s linear }
.gs-uhr.ist-knapp { color: var(--red-ink) }
.gs-uhr.ist-knapp .gs-uhr__rest { stroke: var(--red) }
.gs-uhr.ist-knapp { animation: gs-knapp .5s ease-in-out infinite alternate }
@keyframes gs-knapp { from { transform: scale(1) } to { transform: scale(1.08) } }

.gs-buehne { position: relative; border: 1px solid var(--line); border-radius: var(--r-xl); background: radial-gradient(120% 90% at 50% 0%, #1b2029, var(--ink-900) 70%); padding: var(--s5); min-height: 420px; display: grid; place-items: center; overflow: hidden }
.gs-buehne::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent) }
.gs-buehne > * { position: relative }
.gs-status { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: var(--s3); min-height: 24px; font: var(--t-zeile); color: var(--text-2); text-align: center }
.gs-status b { color: var(--text) }
.gs-status--dran { color: var(--green-ink) }
.gs-status--dran b { color: var(--green-ink) }
.gs-warten { display: flex; flex-direction: column; align-items: center; gap: var(--s3); text-align: center; padding: var(--s5) }
.gs-warten__ring { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--ink-650); border-top-color: var(--accent); animation: gs-dreh 1.1s linear infinite }
@keyframes gs-dreh { to { transform: rotate(360deg) } }
.gs-warten h3 { margin: 0; font: var(--t-titel) }
.gs-warten p { margin: 0; font: var(--t-text); color: var(--muted); max-width: 380px }
/* v4.23 (C7): Beitreten direkt in der Warteansicht (Einladungslink). */
.gs-warten__join { display: flex; justify-content: center; margin-top: var(--s1) }
/* v4.23 (C37): "You have a live match" ueber der Lobby. */
.gs-hinweis--live { border-color: rgba(52,211,153,.3); background: rgba(52,211,153,.07); flex-wrap: wrap }
.gs-hinweis--live .ico { color: var(--green-ink) }
.gs-hinweis__knoepfe { display: flex; flex-wrap: wrap; gap: var(--s2); margin-left: auto }
/* v4.23 (C8/C37/C94): Hinweis mit Knopf (Play now / Accept) im Toast-Stapel jeder Seite. */
.gs-hinweis-toast { display: flex; align-items: center; gap: var(--s3) }
.gs-hinweis-toast > span { flex: 1; min-width: 0; color: var(--text) }
.gs-hinweis-toast .btn { flex: 0 0 auto; width: auto }
/* v4.23 (C41): Zeitleiste unter dem Status — nur am Handy im Zweierspiel, wo der Ring in der
   Spielerkarte aus Platzgruenden fehlt. Sonst zeigt man nirgends, wann der Strike kommt. */
.gs-zeitleiste { display: none }
.gs-zeitleiste__spur { position: relative; flex: 1; height: 4px; border-radius: 999px; background: var(--ink-650); overflow: hidden }
.gs-zeitleiste__spur i { position: absolute; inset: 0; background: var(--text-2); transform-origin: 0 50%; transition: transform .25s linear }
.gs-zeitleiste.ist-meins .gs-zeitleiste__spur i { background: var(--green-ink) }
.gs-zeitleiste.ist-knapp .gs-zeitleiste__spur i { background: var(--red) }
.gs-zeitleiste__zahl { min-width: 32px; text-align: right }
.gs-zeitleiste.ist-knapp .gs-zeitleiste__zahl { color: var(--red-ink) }
.gs-warten__uhr { font: var(--t-zahl-gross); color: var(--gold); font-variant-numeric: tabular-nums }
.gs-countdown { font: 800 4rem/1 var(--font-num); color: var(--text); animation: gs-zoom .9s var(--ease-out) both }
@keyframes gs-zoom { from { transform: scale(1.6); opacity: 0 } to { transform: scale(1); opacity: 1 } }
.gs-verlauf { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: var(--s3) }
.gs-verlauf__punkt { width: 12px; height: 12px; border-radius: 50%; background: var(--ink-650) }
.gs-verlauf__punkt[data-p] { background: var(--pf) }
.gs-verlauf__punkt--remis { background: var(--faint) }
.gs-verlauf__punkt--offen { border: 1px dashed var(--line-2); background: transparent }

/* ── Ergebnis ── */
.gs-ergebnis { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10,12,16,.72); backdrop-filter: blur(3px); z-index: 5; animation: gs-auf .3s var(--ease-out) both }
@keyframes gs-auf { from { opacity: 0 } to { opacity: 1 } }
.gs-ergebnis__karte { width: min(420px, 92%); padding: var(--s6); border-radius: var(--r-xl); background: var(--ink-800); border: 1px solid var(--line-2); text-align: center; animation: gs-hoch .5s var(--ease-out) both; box-shadow: 0 30px 80px rgba(0,0,0,.5) }
@keyframes gs-hoch { from { transform: translateY(24px) scale(.96); opacity: 0 } to { transform: none; opacity: 1 } }
.gs-ergebnis__art { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted); margin-bottom: 6px }
.gs-ergebnis__titel { margin: 0 0 6px; font: 800 2rem/1.05 var(--font-disp); letter-spacing: var(--ls-titel) }
.gs-ergebnis--sieg .gs-ergebnis__titel { color: var(--gold) }
.gs-ergebnis--verlust .gs-ergebnis__titel { color: var(--red-ink) }
.gs-ergebnis--remis .gs-ergebnis__titel { color: var(--text-2) }
.gs-ergebnis__betrag { font: var(--t-zahl-gross); color: var(--green-ink); font-variant-numeric: tabular-nums; margin: 6px 0 }
.gs-ergebnis__text { font: var(--t-klein); color: var(--muted); margin: 0 0 var(--s4) }
.gs-ergebnis__knoepfe { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap }
.gs-ergebnis--sieg .gs-ergebnis__karte { border-color: rgba(243,193,95,.45); box-shadow: 0 0 0 1px rgba(243,193,95,.2) inset, 0 30px 80px rgba(0,0,0,.5), 0 0 60px rgba(243,193,95,.15) }
.gs-konfetti { position: absolute; top: -10px; width: 8px; height: 12px; border-radius: 2px; animation: gs-fall-k 1.6s ease-in both; pointer-events: none }
@keyframes gs-fall-k { from { transform: translateY(0) rotate(0); opacity: 1 } to { transform: translateY(460px) rotate(540deg); opacity: 0 } }

/* ═══ ROCK PAPER SCISSORS ═══════════════════════════════════════════════════ */
/* v4.15: echte Haende — Handschuhe in Spielerfarbe, links zeigt nach rechts, rechts gespiegelt. */
.gs-rps { display: flex; flex-direction: column; align-items: center; gap: var(--s3); width: 100% }
.gs-rps__stand { display: flex; align-items: center; gap: 12px; font: 800 2.2rem/1 var(--font-disp); color: var(--faint); font-variant-numeric: tabular-nums }
.gs-rps__stand b { color: var(--pf); min-width: 1.2em; text-align: center; text-shadow: 0 0 18px rgba(var(--pf-rgb), .45) }
.gs-rps__duell { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s4); width: min(660px, 100%) }
.gs-rps__seite { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0 }
.gs-rps__seite[data-p="1"] .gs-hand { transform: scaleX(-1) }
.gs-rps__hand-box { width: 200px; height: 146px; display: grid; place-items: center; position: relative; transition: transform .3s var(--ease-out), filter .3s }
.gs-hand { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 12px 14px rgba(0,0,0,.5)) }
.gs-hand__glove { fill: var(--pf); stroke: rgba(0,0,0,.55); stroke-width: 3; stroke-linejoin: round }
.gs-hand__cuff { fill: #f3efe6; stroke: rgba(0,0,0,.55); stroke-width: 3 }
.gs-hand__glanz { fill: rgba(255,255,255,.3) }
.gs-rps__hand-box.ist-unklar { filter: saturate(.1) brightness(.7); opacity: .75 }
.gs-rps__hand-box.ist-gewaehlt { animation: gs-hand-atmen 1.6s ease-in-out infinite }
@keyframes gs-hand-atmen { 50% { transform: translateY(-5px) } }
/* Abzaehlen: drei Schlaege mit der Faust, dann springt die Hand heraus. */
.gs-rps__hand-box.ist-zaehlen { animation: gs-hand-pump .4s ease-in-out 3 }
@keyframes gs-hand-pump { 0% { transform: translateY(0) rotate(0) } 35% { transform: translateY(-28px) rotate(-14deg) } 70% { transform: translateY(6px) rotate(4deg) } 100% { transform: translateY(0) rotate(0) } }
.gs-rps__seite[data-p="1"] .gs-rps__hand-box.ist-zaehlen { animation-name: gs-hand-pump-r }
@keyframes gs-hand-pump-r { 0% { transform: translateY(0) rotate(0) } 35% { transform: translateY(-28px) rotate(14deg) } 70% { transform: translateY(6px) rotate(-4deg) } 100% { transform: translateY(0) rotate(0) } }
.gs-rps__hand-box.ist-schuss { animation: gs-hand-schuss .45s var(--ease-out) }
@keyframes gs-hand-schuss { 0% { transform: translateX(-34px) scale(.82) } 60% { transform: translateX(12px) scale(1.1) } 100% { transform: none } }
.gs-rps__seite[data-p="1"] .gs-rps__hand-box.ist-schuss { animation-name: gs-hand-schuss-r }
@keyframes gs-hand-schuss-r { 0% { transform: translateX(34px) scale(.82) } 60% { transform: translateX(-12px) scale(1.1) } 100% { transform: none } }
.gs-rps__hand-box.ist-sieger .gs-hand { filter: drop-shadow(0 0 16px rgba(var(--pf-rgb), .9)) drop-shadow(0 12px 14px rgba(0,0,0,.5)) }
.gs-rps__hand-box.ist-verlierer { filter: saturate(.35) brightness(.65); transform: rotate(9deg) translateY(12px) }
.gs-rps__seite[data-p="1"] .gs-rps__hand-box.ist-verlierer { transform: rotate(-9deg) translateY(12px) }
.gs-rps__vs { font: 800 1.3rem/1 var(--font-disp); color: var(--muted); letter-spacing: .08em; text-transform: uppercase; min-width: 96px; text-align: center }
.gs-rps__vs.ist-wort { animation: gs-wort .38s var(--ease-out); color: var(--text) }
@keyframes gs-wort { from { transform: scale(1.7); opacity: 0 } to { transform: none; opacity: 1 } }
.gs-rps__vs [data-p] { color: var(--pf) }
.gs-rps__name { font: var(--t-klein); color: var(--muted); display: flex; flex-direction: column; align-items: center; max-width: 200px; text-align: center }
.gs-rps__name small { color: var(--muted) }
.gs-rps__wahl { display: flex; gap: var(--s3); flex-wrap: wrap; justify-content: center; margin-top: var(--s2) }
.gs-rps__knopf { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 132px; padding: 10px 8px 12px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--ink-800); color: var(--text); cursor: pointer; font: var(--t-knopf); text-transform: uppercase; letter-spacing: var(--ls-knopf); transition: transform .15s var(--ease-out), border-color .15s, background .15s }
.gs-hand--klein { width: 100px; height: 72px }
.gs-rps__knopf:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--pf); background: var(--ink-750) }
.gs-rps__knopf.ist-an { border-color: var(--pf); background: rgba(var(--pf-rgb), .16) }
.gs-rps__knopf:disabled { opacity: .45; cursor: default }
.gs-rps__knopf:disabled.ist-an { opacity: .95 }
.gs-rps__runde { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) }

/* ═══ TIC TAC TOE ═══════════════════════════════════════════════════════════ */
.gs-ttt { display: flex; flex-direction: column; align-items: center; gap: var(--s4) }
.gs-ttt__brett { display: grid; grid-template-columns: repeat(3, 110px); grid-template-rows: repeat(3, 110px); gap: 8px; padding: 8px; border-radius: var(--r-xl); background: var(--ink-750); border: 1px solid var(--line-2) }
.gs-ttt__feld { position: relative; border: 0; border-radius: var(--r-md); background: var(--ink-900); cursor: pointer; display: grid; place-items: center; transition: background .15s, transform .15s var(--ease-out) }
.gs-ttt__feld:hover:not(:disabled):not(.ist-voll) { background: var(--ink-850); box-shadow: 0 0 0 1px rgba(124,92,255,.4) inset }
.gs-ttt__feld:disabled { cursor: default }
.gs-ttt__feld svg { width: 64px; height: 64px; fill: none; stroke: var(--pf); stroke-width: 9; stroke-linecap: round }
.gs-ttt__feld svg path, .gs-ttt__feld svg circle { stroke-dasharray: 220; stroke-dashoffset: 220; animation: gs-strich .45s var(--ease-out) forwards }
.gs-ttt__feld svg path:nth-child(2) { animation-delay: .18s }
@keyframes gs-strich { to { stroke-dashoffset: 0 } }
.gs-ttt__feld.ist-linie { background: rgba(var(--pf-rgb), .18); box-shadow: 0 0 0 2px var(--pf) inset; animation: gs-pump .5s var(--ease-out) 2 }
@keyframes gs-pump { 50% { transform: scale(1.06) } }
.gs-ttt__feld.ist-letzter::after { content: ''; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--pf) }
.gs-ttt__feld.ist-hover-vorschau::before { content: ''; position: absolute; inset: 24px; border: 3px dashed rgba(var(--pf-rgb), .35); border-radius: 50% }

/* ═══ FOUR IN A ROW ═════════════════════════════════════════════════════════ */
/* v4.16: blauer Plastikrahmen auf einem Fuss, Stein in der Hand ueber der Spalte. */
.gs-c4 { display: flex; flex-direction: column; align-items: center; gap: 0; --z: 58px; --l: 6px }
.gs-c4__halter { position: relative; height: calc(var(--z) + 10px); width: calc(7 * var(--z) + 6 * var(--l) + 24px) }
.gs-c4__hand { position: absolute; top: 4px; left: calc(12px + var(--spalte) * (var(--z) + var(--l))); width: var(--z); height: var(--z); border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.4), transparent 42%), var(--pf); box-shadow: 0 8px 18px rgba(0,0,0,.5), 0 0 0 2px rgba(0,0,0,.3) inset; transition: left .18s var(--ease-out); animation: gs-c4-halten 1.4s ease-in-out infinite; pointer-events: none }
@keyframes gs-c4-halten { 50% { transform: translateY(-5px) } }
.gs-c4__rahmen { position: relative; display: flex; flex-direction: column; align-items: center }
.gs-c4__brett { position: relative; display: grid; grid-template-columns: repeat(7, var(--z)); gap: var(--l); padding: 12px; border-radius: 14px 14px 8px 8px; background: linear-gradient(180deg, #2f6fe8, #1f4fc0 55%, #1a44a8); box-shadow: 0 24px 50px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.35), inset 0 -4px 0 rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.4) }
.gs-c4__brett::before { content: ''; position: absolute; left: 8px; right: 8px; top: -6px; height: 8px; border-radius: 4px; background: #163a8f; box-shadow: inset 0 2px 3px rgba(0,0,0,.6) }
.gs-c4__fuss { display: flex; justify-content: space-between; width: calc(100% + 40px); margin-top: -2px }
.gs-c4__fuss i { width: 56px; height: 16px; border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #1a44a8, #12307a); box-shadow: 0 10px 16px rgba(0,0,0,.45) }
.gs-c4__spalte { display: grid; grid-template-rows: repeat(6, var(--z)); gap: var(--l); border: 0; padding: 0; background: none; cursor: pointer; border-radius: 8px }
.gs-c4__spalte:disabled { cursor: default }
.gs-c4__zelle { position: relative; width: var(--z); height: var(--z); border-radius: 50%; background: radial-gradient(circle at 50% 40%, #0d1424, #070b14 75%); box-shadow: inset 0 3px 6px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.25); transition: background .15s }
.gs-c4__stein { position: absolute; inset: 3px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.4), transparent 42%), var(--pf); box-shadow: inset 0 0 0 3px rgba(0,0,0,.22), inset 0 -4px 6px rgba(0,0,0,.25), 0 2px 2px rgba(0,0,0,.4) }
.gs-c4__stein::after { content: ''; position: absolute; inset: 22%; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(0,0,0,.18) }
.gs-c4__stein--neu { animation: gs-fall .5s cubic-bezier(.35, 0, .7, 1) both }
@keyframes gs-fall { from { transform: translateY(calc(-1 * (var(--zeile) + 1.6) * (var(--z) + var(--l)))) } 68% { transform: translateY(0) } 82% { transform: translateY(-7px) } 92% { transform: translateY(0) } 96% { transform: translateY(-2px) } to { transform: translateY(0) } }
.gs-c4__stein--linie { animation: gs-leuchten .7s ease-in-out infinite alternate }
@keyframes gs-leuchten { from { box-shadow: 0 0 0 2px #fff, 0 0 12px rgba(var(--pf-rgb), .6) } to { box-shadow: 0 0 0 3px #fff, 0 0 30px rgba(var(--pf-rgb), 1) } }
.gs-c4__linie { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible }
.gs-c4__linie line { stroke: #fff; stroke-width: 8; stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(var(--pf-rgb), .9)); stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: gs-c4-linie .5s var(--ease-out) forwards }
@keyframes gs-c4-linie { to { stroke-dashoffset: 0 } }
.gs-c4__vorschau { position: absolute; inset: 4px; border-radius: 50%; background: rgba(var(--pf-rgb), .28); border: 2px dashed rgba(var(--pf-rgb), .6) }

/* ═══ MENSCH AERGERE DICH NICHT (v4.15) ════════════════════════════════════ */
.gs-ludo { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: var(--s4); align-items: center; width: 100% }
.gs-ludo__brett { width: min(100%, 560px); aspect-ratio: 1; margin: 0 auto; display: block; border-radius: 14px; box-shadow: 0 26px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.5) }
.gs-ludo__brett .rahmen { fill: none; stroke: #3b2c1c; stroke-width: 10 }
.gs-ludo__brett .linie { fill: none; stroke: #4a4036; stroke-width: 2.5; stroke-linejoin: round }
.gs-ludo__brett .zelle { fill: #fbf7ec; stroke: #2f2923; stroke-width: 2 }
.gs-ludo__brett .zelle--start, .gs-ludo__brett .zelle--ziel, .gs-ludo__brett .zelle--hof { stroke: rgba(0,0,0,.55) }
.gs-ludo__brett .figur { cursor: default; transition: transform .55s var(--ease-out) }
.gs-ludo__brett .figur__schatten { fill: rgba(0,0,0,.38) }
.gs-ludo__brett .figur__koerper { stroke: rgba(0,0,0,.6); stroke-width: 1.5; stroke-linejoin: round }
.gs-ludo__brett .figur__ring { fill: none; stroke: #fff; stroke-width: 3; opacity: 0 }
.gs-ludo__brett .figur--klickbar { cursor: pointer }
.gs-ludo__brett .figur--klickbar .figur__ring { animation: gs-ludo-ring .8s ease-in-out infinite alternate }
@keyframes gs-ludo-ring { from { opacity: .45; stroke-width: 2 } to { opacity: 1; stroke-width: 5 } }
/* Laufende Figur: huepft bei jedem Schritt. */
.gs-ludo__brett .figur--laeuft { transition-timing-function: cubic-bezier(.3, 1.25, .6, 1) }
.gs-ludo__brett .figur--laeuft path { animation: gs-figur-hop .17s ease-in-out infinite }
@keyframes gs-figur-hop { 50% { transform: translateY(-9px) } }
.gs-ludo__seite { display: flex; flex-direction: column; align-items: center; gap: var(--s3) }
.gs-wuerfel { width: 92px; height: 92px; border-radius: 20px; background: linear-gradient(145deg, #fffdf7, #e6e2d8 60%, #cfcabe); box-shadow: 0 14px 24px rgba(0,0,0,.5), inset 0 -6px 0 rgba(0,0,0,.14), inset 0 2px 0 rgba(255,255,255,.9), 0 0 0 1px rgba(0,0,0,.35); padding: 0; border: 0; cursor: pointer; transition: transform .2s var(--ease-out), box-shadow .2s }
.gs-wuerfel__flaeche { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 5px; width: 100%; height: 100%; padding: 15px; box-sizing: border-box }
.gs-wuerfel:hover:not(:disabled) { transform: translateY(-4px) rotate(-6deg) }
.gs-wuerfel:disabled { cursor: default; filter: saturate(.6) brightness(.85) }
.gs-wuerfel.ist-dran { box-shadow: 0 14px 24px rgba(0,0,0,.5), inset 0 -6px 0 rgba(0,0,0,.14), 0 0 0 3px var(--pf), 0 0 34px rgba(var(--pf-rgb), .55) }
.gs-wuerfel.laeuft { animation: gs-wuerfeln .62s cubic-bezier(.2, .8, .3, 1) }
@keyframes gs-wuerfeln { 0% { transform: translateY(0) rotate(0) scale(1) } 20% { transform: translateY(-38px) rotate(140deg) scale(1.12) } 45% { transform: translateY(-10px) rotate(300deg) scale(1.05) } 65% { transform: translateY(-22px) rotate(420deg) scale(1.08) } 85% { transform: translateY(2px) rotate(560deg) scale(.97) } 100% { transform: translateY(0) rotate(720deg) scale(1) } }
.gs-wuerfel i { border-radius: 50%; background: radial-gradient(circle at 35% 35%, #444, #111 70%); opacity: 0; transform: scale(.4); transition: opacity .12s, transform .12s }
.gs-wuerfel i.an { opacity: 1; transform: scale(1) }
.gs-wuerfel.ist-sechs { animation: gs-sechs .5s var(--ease-out) }
@keyframes gs-sechs { 30% { transform: scale(1.14) } }
.gs-ludo__hinweis { font: var(--t-klein); color: var(--muted); text-align: center }
.gs-ludo__wurf { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) }

/* ═══ WILD CARDS ════════════════════════════════════════════════════════════ */
.gs-uno { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--s3); width: 100%; min-height: 440px }
.gs-uno__gegner { display: flex; justify-content: center; gap: var(--s4); flex-wrap: wrap }
.gs-uno__gegner-karte { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--r-lg); border: 1px solid var(--line); background: rgba(0,0,0,.25); min-width: 120px; transition: border-color .2s, box-shadow .2s }
.gs-uno__gegner-karte.ist-dran { border-color: rgba(var(--pf-rgb), .6); box-shadow: 0 0 24px rgba(var(--pf-rgb), .18) }
.gs-uno__gegner-karte .gs-kopfbild { width: 30px; height: 30px }
.gs-uno__gegner-name { font: var(--t-klein); color: var(--text-2); max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.gs-uno__faecher { display: flex; height: 40px }
.gs-uno__faecher .gs-karte { width: 28px; height: 40px; margin-left: -14px; font-size: 0 }
.gs-uno__faecher .gs-karte:first-child { margin-left: 0 }
.gs-uno__anzahl { font: var(--t-zahl-klein); color: var(--text); font-variant-numeric: tabular-nums }
.gs-uno__mitte { display: flex; align-items: center; justify-content: center; gap: var(--s6) }
.gs-uno__stapel { position: relative; width: 90px; height: 130px; cursor: pointer; border: 0; background: none; padding: 0; border-radius: 12px }
.gs-uno__stapel .gs-karte { position: absolute; inset: 0; width: 90px; height: 130px }
.gs-uno__stapel .gs-karte:nth-child(2) { transform: translate(-3px, -3px) }
.gs-uno__stapel .gs-karte:nth-child(3) { transform: translate(-6px, -6px) }
.gs-uno__stapel:hover:not(:disabled) .gs-karte:last-child { transform: translate(-6px, -12px) }
.gs-uno__stapel:disabled { cursor: default; filter: brightness(.7) }
.gs-uno__stapel .gs-uno__rest { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); font: var(--t-etikett-klein); color: var(--muted); letter-spacing: var(--ls-etikett); text-transform: uppercase; white-space: nowrap }
.gs-uno__ablage { position: relative; width: 90px; height: 130px }
.gs-uno__ablage .gs-karte { position: absolute; inset: 0; width: 90px; height: 130px }
.gs-uno__ablage .gs-karte--oben { animation: gs-karte-land .4s var(--ease-out) both }
@keyframes gs-karte-land { from { transform: translateY(-80px) scale(1.15) rotate(-8deg); opacity: 0 } to { transform: rotate(var(--rot, 0deg)); opacity: 1 } }
.gs-uno__farbe { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted); white-space: nowrap }
.gs-uno__farbe i { width: 14px; height: 14px; border-radius: 50%; background: var(--uf); box-shadow: 0 0 10px var(--uf) }
/* v4.23 (C9): justify-content:center mit overflow-x schob die linken Karten (rot, sortiert
   zuerst) in einen Bereich, zu dem man nicht scrollen kann. Jetzt flex-start und auto-Raender
   an der ersten und letzten Karte: passt die Hand, steht sie mittig; laeuft sie ueber, beginnt
   sie links und jede Karte ist erreichbar. Die Ueberlappung rechnet geschick.js (--gs-ueberlapp). */
.gs-uno__hand { display: flex; justify-content: flex-start; align-items: flex-end; gap: 0; min-height: 150px; padding: 10px 20px 0; overflow-x: auto; scrollbar-width: thin }
.gs-uno__hand .gs-karte { width: 84px; height: 122px; margin-left: var(--gs-ueberlapp, -26px); flex-shrink: 0; transform-origin: 50% 130%; transform: rotate(var(--rot, 0deg)) translateY(var(--dy, 0px)); transition: transform .2s var(--ease-out), margin .2s, filter .2s }
.gs-uno__hand .gs-karte:first-child { margin-left: auto }
.gs-uno__hand .gs-karte:last-child { margin-right: auto }
.gs-uno__hand .gs-karte.ist-spielbar { transform: rotate(var(--rot, 0deg)) translateY(calc(var(--dy, 0px) - 16px)); cursor: pointer }
.gs-uno__hand .gs-karte.ist-spielbar:hover { transform: rotate(0deg) translateY(calc(var(--dy, 0px) - 30px)) scale(1.08); z-index: 3 }
.gs-uno__hand .gs-karte.ist-gezogen { box-shadow: 0 0 0 3px #fff, 0 0 24px rgba(255,255,255,.5), 0 6px 14px rgba(0,0,0,.45) }
.gs-uno__ablage .gs-karte--oben.gs-karte--von-unten { animation-name: gs-karte-land-unten }
@keyframes gs-karte-land-unten { from { transform: translateY(160px) scale(1.15) rotate(8deg); opacity: 0 } to { transform: rotate(var(--rot, 0deg)); opacity: 1 } }
.gs-uno__richtung { position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; transform: translate(-50%, -50%); border-radius: 50%; border: 2px dashed rgba(255,255,255,.14); pointer-events: none; animation: gs-uno-dreh 14s linear infinite }
.gs-uno__richtung .gs-ikone { position: absolute; top: -12px; left: 50%; width: 22px; height: 22px; margin-left: -11px; color: rgba(255,255,255,.55); background: #135232; border-radius: 50%; padding: 2px }
.gs-uno__richtung.ist-links { animation-direction: reverse }
.gs-uno__richtung.ist-links .gs-ikone { transform: scaleX(-1) }
@keyframes gs-uno-dreh { to { transform: translate(-50%, -50%) rotate(360deg) } }
.gs-uno__mitte { position: relative }
.gs-uno::before { content: ''; position: absolute; left: 50%; top: 42%; width: 420px; height: 300px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, var(--tisch, transparent), transparent); opacity: .22; pointer-events: none; transition: background .4s }
.gs-uno__hand .gs-karte:not(.ist-spielbar) { filter: brightness(.55) saturate(.7) }
.gs-uno__hand .gs-karte--neu { animation: gs-karte-ziehen .45s var(--ease-out) both }
@keyframes gs-karte-ziehen { from { transform: translate(-60px, -120px) rotate(-20deg); opacity: 0 } }
.gs-karte { --uf: #666; position: relative; border-radius: 10px; background: var(--uf); border: 4px solid #fff; box-shadow: 0 6px 14px rgba(0,0,0,.45); display: grid; place-items: center; color: #fff; font: 800 2.2rem/1 var(--font-num); user-select: none; overflow: hidden }
/* Das schraege weisse Oval wie auf der echten Karte, mit feinem Rand. */
.gs-karte::before { content: ''; position: absolute; inset: 10px 8px; border-radius: 50%; background: rgba(255,255,255,.92); transform: rotate(-30deg); box-shadow: inset 0 0 0 2px rgba(0,0,0,.08) }
.gs-karte[data-f] { color: var(--uf) }
.gs-karte[data-f] .gs-karte__ecke { color: #fff }
.gs-karte[data-f="y"] .gs-karte__wert, .gs-karte[data-f="y"] .gs-ikone { color: #a16207 }
.gs-karte .gs-karte__wert { -webkit-text-stroke: 1px rgba(0,0,0,.25) }
.gs-karte[data-f="r"] { --uf: var(--u-r) } .gs-karte[data-f="g"] { --uf: var(--u-g) } .gs-karte[data-f="b"] { --uf: var(--u-b) } .gs-karte[data-f="y"] { --uf: var(--u-y) }
.gs-karte[data-f="w"] { --uf: #111318; color: #fff; background: #111318 }
.gs-karte[data-f="w"]::before { background: conic-gradient(var(--u-r) 0 25%, var(--u-y) 0 50%, var(--u-g) 0 75%, var(--u-b) 0); box-shadow: inset 0 0 0 2px rgba(255,255,255,.7) }
.gs-karte--rueck { --uf: #b91c1c; background: radial-gradient(circle at 50% 40%, #d92626, #991b1b 70%) }
.gs-karte--rueck::before { background: #111318; box-shadow: inset 0 0 0 3px #f2c94c }
.gs-karte__wert { position: relative; z-index: 1; text-shadow: 2px 2px 0 rgba(0,0,0,.18) }
.gs-karte__ecke { position: absolute; top: 4px; left: 6px; font: 800 .8rem/1 var(--font-num); z-index: 1 }
.gs-karte__ecke--unten { top: auto; left: auto; bottom: 4px; right: 6px; transform: rotate(180deg) }
.gs-karte .gs-ikone { width: 40px; height: 40px; position: relative; z-index: 1; stroke-width: 2.4 }
.gs-uno { position: relative }
.gs-uno__aktionen { display: flex; justify-content: center; gap: 8px; margin-top: 6px }
.gs-uno__letzter { text-align: center; font: var(--t-klein); color: var(--muted); min-height: 18px }
.gs-farbwahl { display: flex; gap: 10px; justify-content: center; margin: var(--s3) 0 }
.gs-farbwahl button { width: 64px; height: 64px; border-radius: 16px; border: 3px solid #fff; background: var(--uf); cursor: pointer; box-shadow: 0 8px 20px rgba(0,0,0,.4); transition: transform .15s var(--ease-out) }
.gs-farbwahl button:hover { transform: scale(1.1) }

/* ═══ KASSE SCHALTET DAS ANGEBOT (body[data-spiele]) ═══════════════════════
   „geschick" (Hugo): nur die Skill-Gruppe im Menue, die Skill-Kacheln auf der
   Startseite, kein Jackpot-Kaestchen. Sonst: alles wie bisher, Skill-Gruppe weg. */
/* v4.18 (Kian): Skill games gibt es in BEIDEN Kassen — nichts mehr versteckt ohne „geschick". */
body[data-spiele="geschick"] .nav-section--gluecksspiel,
body[data-spiele="geschick"] .nav-btn--gluecksspiel,
body[data-spiele="geschick"] #game-rail,
body[data-spiele="geschick"] .promo-row--aktionen .promo[data-tone="gold"] { display: none !important }

/* ═══ START-KACHELN (Startseite) ════════════════════════════════════════════ */
/* v4.19: Skill-Kacheln (gs-*) liegen im selben Raster — Farbe aus --gc (geschick.css), Pixelbild etwas eingerueckt. */
#game-rail .tile[data-g^="gs-"] { --tone: var(--gc); --tone-rgb: var(--gc-rgb) }
#game-rail .tile[data-g^="gs-"] .tile__bild { image-rendering: pixelated; inset: 9% 14% auto; width: 72%; height: 58% }
#gs-rail:empty { display: none !important }

.gs-bild { image-rendering: pixelated; flex-shrink: 0 }
.gs-rail .tile__bild { image-rendering: pixelated; padding: 14% }
.gs-rail .tile__foot { flex-wrap: wrap; row-gap: 2px }

/* Hugo-Modus: Free cases, Jackpot-Kasten und die Case-Slides sind Gluecksspiel. */
body[data-spiele="geschick"] #top-gratis,
body[data-spiele="geschick"] #chat-event,
body[data-spiele="geschick"] .slide[data-page="battles"],
body[data-spiele="geschick"] .slide[data-page="cases"] { display: none !important }
.gs-rail .tile__bild--ikone { display: grid; place-items: center; color: var(--accent-ink) }
.gs-rail .tile__bild--ikone .gs-ikone { width: 64%; height: 64% }

/* ═══ SCHMALE SCHIRME ═══════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .gs-bauen { grid-template-columns: 1fr }
  .gs-zusammen { position: static }
}
@media (max-width: 760px) {
  .gs-zeile { grid-template-columns: 44px minmax(0, 1fr); gap: var(--s3) }
  .gs-zeile__bild { width: 44px; height: 44px } .gs-zeile__bild .gs-ikone { width: 26px; height: 26px }
  .gs-zeile__aktion { grid-column: 1 / -1; justify-content: flex-end }
  .gs-zeile > .gs-preis { grid-column: 2; justify-self: start }
  .gs-spieler { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .gs-buehne { padding: var(--s3); min-height: 360px }
  .gs-ttt__brett { grid-template-columns: repeat(3, 84px); grid-template-rows: repeat(3, 84px) }
  .gs-ttt__feld svg { width: 48px; height: 48px }
  .gs-c4 { --z: 40px; --l: 4px }
  .gs-c4__brett { padding: 8px }
  .gs-c4__halter { width: calc(7 * var(--z) + 6 * var(--l) + 16px) }
  .gs-c4__hand { left: calc(8px + var(--spalte) * (var(--z) + var(--l))) }
  .gs-rps__hand-box { width: 118px; height: 90px }
  .gs-rps__stand { font-size: 1.7rem }
  .gs-rps__duell { gap: var(--s2) }
  .gs-rps__vs { min-width: 70px; font-size: 1rem }
  .gs-rps__knopf { width: 96px }
  .gs-hand--klein { width: 72px; height: 52px }
  .gs-ludo { grid-template-columns: 1fr }
  .gs-ludo__seite { flex-direction: row; justify-content: center }
  .gs-uno__hand .gs-karte { width: 64px; height: 94px; margin-left: var(--gs-ueberlapp, -22px); font-size: 1.4rem }
  .gs-uno__stapel, .gs-uno__stapel .gs-karte, .gs-uno__ablage, .gs-uno__ablage .gs-karte { width: 70px; height: 102px }
  .gs-option { grid-template-columns: 1fr }
}


/* ═══ DESIGN-DURCHGANG v4.05 ════════════════════════════════════════════════ */
/* Spielfarben — Karte, Kopf, Buehne und Kachel tragen die Farbe ihres Spiels. */
[data-spiel="rps"], [data-g="gs-rps"]             { --gc: #7c5cff; --gc-rgb: 124,92,255 }
[data-spiel="tictactoe"], [data-g="gs-tictactoe"] { --gc: #f5964a; --gc-rgb: 245,150,74 }
[data-spiel="connect4"], [data-g="gs-connect4"]   { --gc: #3b82f6; --gc-rgb: 59,130,246 }
[data-spiel="ludo"], [data-g="gs-ludo"]           { --gc: #22c55e; --gc-rgb: 34,197,94 }
[data-spiel="uno"], [data-g="gs-uno"]             { --gc: #ef4444; --gc-rgb: 239,68,68 }

/* Banner der Skill-Spiele */
.slide[data-ton="hugo"] { --sl-a: #06263d; --sl-b: #0b5f8a; --sl-c: #4cc9f0 }
.gs-slide-motiv { position: absolute; right: 3%; top: 50%; z-index: 1; width: min(46%, 520px); height: 150%; transform: translateY(-50%); pointer-events: none }
.gs-slide-motiv img { position: absolute; width: 34%; height: auto; image-rendering: pixelated; filter: drop-shadow(0 14px 22px rgba(0,0,0,.55)); transition: transform .6s var(--ease-out) }
.gs-slide-motiv img:nth-child(1) { left: 0;   top: 34%; transform: rotate(-10deg) }
.gs-slide-motiv img:nth-child(2) { left: 20%; top: 14%; transform: rotate(-4deg) }
.gs-slide-motiv img:nth-child(3) { left: 40%; top: 26%; width: 40%; transform: rotate(3deg); z-index: 2 }
.gs-slide-motiv img:nth-child(4) { left: 62%; top: 12%; transform: rotate(8deg) }
.gs-slide-motiv img:nth-child(5) { left: 70%; top: 44%; width: 28%; transform: rotate(12deg) }
.slide:not(.slide--aktiv) .gs-slide-motiv img { transform: translateX(24px) }
@media (max-width: 760px) { .gs-slide-motiv { width: 52%; opacity: .5 } }

/* Kacheln auf der Startseite: fuenf gleich breit, jede in ihrer Farbe */
@media (min-width: 761px) { .gs-rail { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible } .gs-rail .tile { width: auto; min-width: 0 } }
.gs-rail .tile { background: radial-gradient(90% 70% at 50% 30%, rgba(var(--gc-rgb), .30), transparent 70%), linear-gradient(180deg, #1b2029, #151920); border-color: rgba(var(--gc-rgb), .28) }
.gs-rail .tile:hover { border-color: rgba(var(--gc-rgb), .7); box-shadow: 0 16px 36px rgba(0,0,0,.4), 0 0 0 1px rgba(var(--gc-rgb), .35) inset }
.gs-rail .tile__bild { filter: drop-shadow(0 12px 18px rgba(0,0,0,.5)) }
.gs-rail .tile__tag { color: var(--gc) }

/* Uebersicht und Spielkopf in Spielfarbe */
.gs-hubkarte { border-color: rgba(var(--gc-rgb), .22) }
.gs-hubkarte::before { background: radial-gradient(70% 55% at 50% 0%, rgba(var(--gc-rgb), .32), transparent 72%); opacity: .7 }
.gs-hubkarte:hover { border-color: rgba(var(--gc-rgb), .7) }
.gs-hubkarte::after { content: ''; position: absolute; left: 20%; right: 20%; top: 0; height: 2px; background: var(--gc); border-radius: 0 0 2px 2px; opacity: .8 }
.gs-spielkopf__innen { background: radial-gradient(70% 140% at 0% 50%, rgba(var(--gc-rgb), .22), transparent 62%), var(--ink-800); border-color: rgba(var(--gc-rgb), .25) }
.gs-zeile__bild { background: radial-gradient(circle, rgba(255,255,255,.05), transparent 70%), var(--ink-750) }

/* Buehnen je Spiel */
.gs-buehne[data-spiel="uno"] { background: radial-gradient(75% 70% at 50% 45%, #1d6b45, #135232 55%, #0c3522 100%); border-color: rgba(34,197,94,.25) }
.gs-buehne[data-spiel="uno"]::before { background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px); background-size: 6px 6px; mask-image: none }
.gs-buehne[data-spiel="ludo"] { background: radial-gradient(80% 80% at 50% 40%, #3a2a1b, #2a1d12 60%, #1b130c 100%); border-color: rgba(245,196,106,.2) }
.gs-buehne[data-spiel="ludo"]::before { background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 2px, transparent 2px 22px); mask-image: none }
.gs-buehne[data-spiel="connect4"] { background: radial-gradient(90% 80% at 50% 0%, #1a2a52, #111a33 60%, #0b1022 100%); border-color: rgba(59,130,246,.25) }
.gs-buehne[data-spiel="tictactoe"] { background: radial-gradient(80% 80% at 50% 40%, #2a2233, #1b1722 65%, #121016 100%); border-color: rgba(245,150,74,.2) }
.gs-buehne[data-spiel="rps"] { background: radial-gradient(60% 70% at 50% 35%, rgba(124,92,255,.28), transparent 70%), radial-gradient(120% 90% at 50% 0%, #1d1a2b, var(--ink-900) 70%); border-color: rgba(124,92,255,.25) }
.gs-buehne[data-spiel="uno"] .gs-status, .gs-buehne[data-spiel="uno"] .gs-uno__letzter { color: rgba(255,255,255,.8) }

/* Spielerleiste: zwei Spieler mit VS dazwischen, der Spieler am Zug leuchtet */
.gs-spieler--zwei { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center }
.gs-vs { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 800 .85rem/1 var(--font-disp); letter-spacing: .06em; color: var(--text); background: radial-gradient(circle at 35% 30%, #3a3f4c, #1b1f27); box-shadow: 0 0 0 1px var(--line-2), 0 8px 18px rgba(0,0,0,.4) }
.gs-spieler--zwei .gs-spieler__karte:last-child { flex-direction: row-reverse; text-align: right }
.gs-spieler--zwei .gs-spieler__karte:last-child::before { left: auto; right: 0 }
.gs-spieler--zwei .gs-spieler__karte:last-child .gs-spieler__name { justify-content: flex-end }
.gs-spieler__karte .gs-kopfbild { width: 42px; height: 42px; box-shadow: 0 0 0 2px rgba(var(--pf-rgb), .6) }
.gs-spieler__karte.ist-dran::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 2px var(--pf), 0 0 30px rgba(var(--pf-rgb), .4); animation: gs-dran 1.4s ease-in-out infinite alternate }
@keyframes gs-dran { from { opacity: .35 } to { opacity: 1 } }
/* v4.24 (D78): Im Zweierspiel am Handy bleiben 82 px Text: Status zweizeilig
   statt „Thinking… ·…" (so bleibt „missed 1/3" lesbar), Uno-Kartenzahl als
   Abzeichen rechts statt im Status, Rang-Chip weg, damit „you" Platz hat. */
@media (max-width: 760px) {
  .gs-spieler--zwei .gs-spieler__status { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25 }
  .gs-spieler--zwei .gs-spieler__karten { display: none }
  .gs-spieler--zwei .gs-spieler__punkte--uno { display: block; font: var(--t-zahl); flex-shrink: 0 }
  .gs-spieler--zwei .gs-spieler__name > :not(.gs-spieler__nametext):not(.gs-du) { display: none }
}
/* Auf schmalen Handys (375 px) blieben neben Kopfbild und Zahl nur 62 px
   Text — selbst zweizeilig „Thinking… · missed…". Das Kopfbild faellt im
   Zweierspiel weg (die Farbleiste links und das Brett zeigen, wer wer ist),
   der Text bekommt ~108 px. */
@media (max-width: 480px) {
  .gs-spieler--zwei .gs-spieler__karte > .gs-kopfbild { display: none }
}
@media (max-width: 760px) { .gs-spieler--zwei { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) } .gs-vs { width: 32px; height: 32px; font-size: .7rem } .gs-spieler--zwei .gs-spieler__karte { padding: 8px } .gs-spieler--zwei .gs-uhr { display: none } .gs-spieler--zwei ~ .gs-zeitleiste:not([hidden]) { display: flex; align-items: center; gap: var(--s2); max-width: 320px; margin: calc(var(--s2) * -1) auto var(--s3); font: var(--t-zahl-klein); font-variant-numeric: tabular-nums; color: var(--text-2) } }

/* Tic Tac Toe: groesser, leuchtende Zeichen, Gewinnlinie */
.gs-ttt__brett { position: relative; grid-template-columns: repeat(3, 124px); grid-template-rows: repeat(3, 124px); gap: 10px; padding: 10px; background: linear-gradient(145deg, #2b2f3a, #1c2029); box-shadow: 0 24px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.05) inset }
.gs-ttt__feld { background: radial-gradient(circle at 50% 40%, #1a1d25, #12141a); box-shadow: 0 2px 0 rgba(255,255,255,.03) inset, 0 -3px 8px rgba(0,0,0,.35) inset }
.gs-ttt__feld svg { width: 72px; height: 72px; filter: drop-shadow(0 0 10px rgba(var(--pf-rgb), .55)) }
.gs-ttt__linie { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3 }
.gs-ttt__linie line { stroke: #fff; stroke-width: 8; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(var(--pf-rgb), .9)); stroke-dasharray: 600; stroke-dashoffset: 600; animation: gs-strich .5s var(--ease-out) .15s forwards }
@media (max-width: 760px) { .gs-ttt__brett { grid-template-columns: repeat(3, 90px); grid-template-rows: repeat(3, 90px) } .gs-ttt__feld svg { width: 52px; height: 52px } }

/* Rock Paper Scissors: Karten schuetteln vor dem Aufdecken, Haende groesser */
.gs-rps__karte.ist-schuetteln .gs-rps__innen { animation: gs-schuetteln .72s ease-in-out }
@keyframes gs-schuetteln { 0%, 100% { transform: translateY(0) } 16%, 50%, 84% { transform: translateY(-18px) rotate(-3deg) } 33%, 67% { transform: translateY(0) } }
.gs-rps__vorn { background: repeating-linear-gradient(135deg, #2a2440 0 7px, #231e36 7px 14px) }
.gs-rps__hand { width: 124px; padding: 16px 8px; background: linear-gradient(180deg, var(--ink-750), var(--ink-800)) }
.gs-rps__hand .gs-ikone { width: 52px; height: 52px }
.gs-rps__hand:hover:not(:disabled) { box-shadow: 0 12px 28px rgba(0,0,0,.4), 0 0 0 1px rgba(124,92,255,.5) inset }

/* Ergebnis: Spielbild oben */
.gs-ergebnis__bild { display: flex; justify-content: center; margin: -52px 0 6px }
.gs-ergebnis__bild .gs-bild { width: 72px; height: 72px; filter: drop-shadow(0 12px 20px rgba(0,0,0,.6)) }

/* v4.05: Name und Schild untereinander (der lange Name lief ins Schild),
   und in der Hugo-Kasse fuellen die fuenf Kacheln die ganze Breite — die Figur
   rechts liess unter einer einzigen Kachelreihe eine grosse Luecke. */
.gs-rail .tile__foot { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 3px }
.gs-rail .tile__name { white-space: normal; line-height: 1.1 }
body[data-spiele="geschick"] .fav__held { display: none }
body[data-spiele="geschick"] .fav { grid-template-columns: minmax(0, 1fr) }

/* v4.05 Feinschliff nach Foto: Banner-Bilder kleiner, Gegnerkarten bei Uno
   mit duennem Rand (bei 28 px frass der 4-px-Rand die ganze Karte), und in
   der Hugo-Kasse zwei Aktionskarten statt drei (der Jackpot faellt weg). */
.gs-slide-motiv { height: 118%; width: min(40%, 460px) }
.gs-slide-motiv img { width: 27% }
.gs-slide-motiv img:nth-child(3) { width: 32% }
.gs-slide-motiv img:nth-child(5) { width: 23% }
.gs-uno__faecher .gs-karte { border-width: 2px; border-radius: 5px; box-shadow: 0 2px 6px rgba(0,0,0,.45) }
.gs-uno__faecher .gs-karte::before { inset: 3px }
.gs-uno__stapel .gs-uno__rest { color: rgba(255,255,255,.55) }
body[data-spiele="geschick"] .promo-row--aktionen { grid-template-columns: repeat(2, minmax(0, 1fr)) }
@media (max-width: 560px) { body[data-spiele="geschick"] .promo-row--aktionen { grid-template-columns: 1fr } }


/* ═══ BEIDE KASSEN: Startseite und Handy (v4.06) ═══════════════════════════
   Steht hier statt in design.css: dort duerfen vor dem Handy-Block keine
   @media-Regeln stehen (rakeback-v383.test.js) und im Handy-Block nur
   Breiten bis 600 px (handy.test.js). */
/* ── Design-Durchgang Donut (v4.06) ──────────────────────────────────────
   Nach Fotos der Startseite bei 1600 px und 375 px:
   · 16 Spielkacheln in Reihen zu 6 liessen die letzte Reihe halb leer. Ab
     1400 px stehen sie zu acht (zwei volle Reihen), die Figur rechts faellt
     dort weg — ihre Online-Zahl steht ohnehin im Chat-Kopf.
   · Handy: Der Haus-Knopf schob das Profilbild aus dem Bild (die untere
     Leiste hat „Games" schon), die Tageszahlen stehen in drei schmalen
     Spalten statt drei vollen Zeilen, der Bannertext bleibt links vom Bild. */
@media (min-width: 1400px) {
  body:not([data-spiele="geschick"]) .fav { grid-template-columns: minmax(0, 1fr) }
  body:not([data-spiele="geschick"]) .fav__held { display: none }
  body:not([data-spiele="geschick"]) #game-rail { grid-template-columns: repeat(8, minmax(0, 1fr)) }
}
@media (max-width: 760px) {
  #heim-knopf { display: none }
  .slide__text { max-width: 62% }
  .slide__motiv { opacity: .75 }
}
@media (max-width: 640px) {
  .puls-leiste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px }
  .puls-leiste > div { flex-direction: column; align-items: flex-start; gap: 2px; padding: 7px 9px }
  .puls-leiste dt { font-size: .5rem; white-space: normal; line-height: 1.2 }
  .puls-leiste dd { font-size: .82rem; max-width: 100% }
}
/* Handy, Cases-Kopf: „Create a case" oben ueber die ganze Breite, darunter die
   Reiter als EINE wischbare Reihe, darunter „Battles" und „Provably fair" je halb. */
@media (max-width: 600px) {
  #cs-wurzel .bt-kopf__aktionen { flex-wrap: wrap; width: 100% }
  #cs-wurzel .bt-tabs { order: 1; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none }
  #cs-wurzel .bt-tabs::-webkit-scrollbar { display: none }
  #cs-wurzel .bt-tabs > * { flex-shrink: 0 }
  #cs-wurzel .bt-kopf__aktionen > .btn-secondary { order: 2; flex: 1 1 0 }
}


/* v4.07: 4 gewinnt — Vorschau nur in der Spalte unter der Maus; Uno-Ruf. */
.gs-c4__spalte .gs-c4__vorschau { opacity: 0; transition: opacity .12s }
.gs-c4__spalte:hover .gs-c4__vorschau, .gs-c4__spalte:focus-visible .gs-c4__vorschau { opacity: 1 }
.gs-uno__gegner-karte { position: relative }
.gs-uno__ruf { position: absolute; top: -12px; right: -10px; padding: 4px 9px; border-radius: 999px; background: linear-gradient(180deg, #ffd24a, #f08a1a); color: #2a1400; font: 800 .72rem/1 var(--font-disp); letter-spacing: .06em; box-shadow: 0 6px 16px rgba(0,0,0,.45); transform: rotate(8deg); animation: gs-ruf .9s ease-in-out infinite alternate }
@keyframes gs-ruf { from { transform: rotate(8deg) scale(1) } to { transform: rotate(4deg) scale(1.12) } }


/* ═══ GLUECKSRAD: wer beginnt (v4.09) ══════════════════════════════════════ */
.gs-rad-buehne { display: flex; flex-direction: column; align-items: center; gap: var(--s3) }
.gs-rad__titel { font: 800 1.4rem/1 var(--font-disp); letter-spacing: var(--ls-titel); text-transform: uppercase; color: var(--text) }
.gs-rad { position: relative; width: 320px; height: 320px; filter: drop-shadow(0 24px 40px rgba(0,0,0,.55)) }
.gs-rad__scheibe { width: 100%; height: 100%; transform: rotate(0deg); animation: gs-rad-dreh 5s cubic-bezier(.215,.61,.355,1) forwards }
.gs-rad__scheibe.ist-sofort { animation-duration: .01s }
@keyframes gs-rad-dreh { from { transform: rotate(0deg) } to { transform: rotate(var(--ziel)) } }
.gs-rad__rand { fill: #2a2f3a; stroke: #f3c15f; stroke-width: 4 }
.gs-rad__scheibe text { fill: #fff; font: 800 15px/1 var(--font-disp); letter-spacing: .04em; paint-order: stroke; stroke: rgba(0,0,0,.45); stroke-width: 3px }
.gs-rad__stifte circle { fill: #ffe29a; stroke: #7a5410; stroke-width: 1 }
.gs-rad__nabe { fill: #1b1f27; stroke: #f3c15f; stroke-width: 4 }
.gs-rad__zeiger { position: absolute; top: -10px; left: 50%; z-index: 2; width: 0; height: 0; transform: translateX(-50%); border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 30px solid #f3c15f; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)) }
.gs-rad__ergebnis { min-height: 34px; padding: 8px 18px; border-radius: 999px; font: 800 1rem/1 var(--font-disp); letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--pf, var(--accent)); opacity: 0; transform: translateY(8px) scale(.94); transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); box-shadow: 0 10px 30px rgba(var(--pf-rgb, 124,92,255), .45) }
.gs-rad__ergebnis.ist-da { opacity: 1; transform: none }
@media (max-width: 760px) { .gs-rad { width: 250px; height: 250px } .gs-rad__titel { font-size: 1.1rem } }

/* v4.10 (Kian): In der Hugo-Kasse kein Einladungsprogramm — Invite-Knopf und
   „Claim free" oben, Menueeintrag, Aktionskarte und alle Knoepfe zur Seite weg.
   Der Link im Hilfetext (.recht-link) bleibt, sonst stuende dort eine Luecke. */
body[data-spiele="geschick"] #top-invite,
body[data-spiele="geschick"] #top-frei,
body[data-spiele="geschick"] .nav-btn[data-page="invite"],
body[data-spiele="geschick"] [onclick="goPage('invite')"]:not(.recht-link) { display: none !important }
body[data-spiele="geschick"] .promo-row--aktionen { grid-template-columns: minmax(0, 1fr) }