/* =========================================================================
   CALIGO – PC-Lesbarkeit (Laptop 1280×700 bis 4K)
   Wird NACH caligo-game.css geladen und wirkt nur am PC
   (min-width: 901px UND min-height: 551px) – Handy/Tablet-Regeln bleiben unberührt.

   Ziele:
   1. Alle Zahlen glasklar: Kartenwerte (Hand + Stich), Topbar, Sitze, eigene Statuszeile.
   2. Nichts wird abgeschnitten: Topbar einzeilig, Hand komplett im Fenster.
   3. Tippin-Sprechblase verdeckt weder Handkarten noch Statuszeilen.
   Kartenwerte: zusätzliches Wert-Badge (Zwei-Symbol-System: links Rang-Emblem/Zahl,
   rechts Klassen-Symbol), sitzt halb außerhalb der Kartenoberkante und überdeckt
   keine der aufgedruckten Eck-Badges.
   ========================================================================= */

/* Wert-Badge ist standardmäßig aus (Handy bleibt wie bisher) */
.card-chip { display: none; }

@media (min-width: 901px) and (min-height: 551px) {

  :root {
    --pc-topbar: 56px;
    /* Handkarte: Höhe richtet sich nach der Fensterhöhe, Breite exakt 2:3 wie das Kartenbild */
    --hc-h: clamp(176px, 28.5vh, 300px);
    --hc-w: calc(var(--hc-h) * 0.6667);
    /* Stichkarte in der Tischmitte */
    --tc-h: clamp(112px, 22vh, 240px);
    --tc-w: calc(var(--tc-h) * 0.6667);
    --hand-overlap: 0.28;   /* Anteil der Hand, der in den Tisch hineinragt */
    --hand-pad: calc(var(--hc-h) * 0.16 + 6px);   /* Platz unter der Hand für die Ecken der geneigten Randkarten */
  }

  /* ------------------------------------------------------------------
     TOPBAR: einzeilig, größere Zahlen
     ------------------------------------------------------------------ */
  .game-topbar {
    height: var(--pc-topbar);
    padding: 0 0.8rem;
    gap: 0.6rem;
    flex-wrap: nowrap;
    overflow: visible;   /* damit das Audio-Menü (Dropdown) nicht abgeschnitten wird */
  }
  .brand-section {
    gap: 0.5rem;
    flex-wrap: nowrap;
    min-width: 0;
  }
  .brand-title { font-size: 1.1rem; letter-spacing: 0.16em; flex-shrink: 0; }
  .game-meta { gap: 0.6rem; flex-shrink: 0; }
  .top-controls { gap: 0.35rem; flex-shrink: 0; }

  .meta-pill {
    font-size: 15px;
    font-weight: 600;
    padding: 0.28rem 0.75rem;
    gap: 0.35rem;
    white-space: nowrap;
    flex-shrink: 0;
    color: #fff;
  }
  .meta-pill b {
    font-size: 1.18em;
    font-weight: 800;
    color: #ffd96a;
  }
  .meta-label { font-weight: 700; color: #fff; }
  .meta-sub { font-size: 0.95em; font-weight: 700; color: #ffe29a; white-space: nowrap; }
  .meta-coins-pill b { font-size: 1.25em; }

  .icon-btn { width: 36px; height: 36px; flex-shrink: 0; }
  #btn-help svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

  /* ------------------------------------------------------------------
     TISCH & HAND: alles passt senkrecht ins Fenster
     ------------------------------------------------------------------ */
  .table-viewport { min-height: 0; }

  .felt-table {
    width: min(97vw, 1400px);
    height: min(
      calc(100vh - var(--pc-topbar) - var(--hc-h) * (1 - var(--hand-overlap)) - 20px - var(--hand-pad)),
      720px
    );
    min-height: 330px;
    border-radius: min(200px, 22vh);
  }
  .table-ring { height: min(45%, 320px); }

  .hand-area {
    height: calc(var(--hc-h) + 14px + var(--hand-pad));
    margin-top: calc(var(--hc-h) * var(--hand-overlap) * -1);
    padding-bottom: var(--hand-pad);     /* Platz für die Ecken der geneigten Randkarten */
  }

  .card-fan {
    max-width: 100vw;
    padding: 0 14px;
    /* Anzahl der Karten (--n) wird per JS gesetzt. Überlappung so wählen,
       dass alle Karten ins Fenster passen, aber nie mehr als ~40 % Überdeckung. */
    --avail: calc(100vw - 24px - var(--hc-h) * 0.5);
    --ov: calc((var(--avail) - var(--n, 10) * var(--hc-w)) / (var(--n, 10) - 1));
  }

  .hand-card {
    width: var(--hc-w);
    height: var(--hc-h);
    overflow: visible;           /* damit das Wert-Badge über die Oberkante ragen darf */
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: calc(var(--hc-w) * 0.075);
    margin-left: max(calc(var(--hc-w) * -0.42), min(calc(var(--hc-w) * 0.04), var(--ov)));
  }
  .hand-card:first-child { margin-left: 0; }
  /* Regelwidrige Karten bleiben erkennbar gedimmt, ihr Wert-Badge aber lesbar */
  .hand-card.illegal { opacity: 0.6; filter: grayscale(55%) brightness(78%); }
  .hand-card img {
    border-radius: inherit;
    box-shadow: 0 10px 28px rgba(0,0,0,0.78);
    border: 1.5px solid rgba(255,255,255,0.22);
    box-sizing: border-box;
  }
  .hand-card:hover:not(.illegal) {
    transform: translateY(calc(var(--hc-h) * -0.2)) scale(1.3) !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
  .hand-card:hover:not(.illegal) img {
    border-color: #ffd700;
    box-shadow: 0 28px 55px rgba(0,0,0,0.98), 0 0 36px rgba(246, 210, 122, 0.85);
  }
  .hand-card.legal-highlight {
    border-color: transparent !important;
    box-shadow: none !important;
  }
  .hand-card.legal-highlight img {
    border-color: var(--gold);
    box-shadow: 0 0 25px rgba(230, 182, 85, 0.8);
  }

  /* ------------------------------------------------------------------
     WERT-BADGE (Hand- & Stichkarten)
     ------------------------------------------------------------------ */
  .card-chip {
    position: absolute;
    top: -20px;
    left: 5px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 9px;
    background: linear-gradient(180deg, rgba(20, 24, 44, 0.97), rgba(8, 10, 22, 0.97));
    border: 1.8px solid var(--gold);
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.85), inset 0 0 6px rgba(255,255,255,0.06);
    color: #fff;
    font-family: var(--serif);
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
  }
  .card-chip .chip-rank,
  .card-chip .chip-class { display: inline-flex; align-items: center; gap: 4px; }
  .card-chip b {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.02em;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  }
  .card-chip img {
    height: 17px; width: auto; display: block;
    box-sizing: content-box;
    padding: 2px 3px;
    border-radius: 6px;
    background: linear-gradient(180deg, #f6f0e2, #d9cfb6);   /* helle Kachel: auch dunkle Emblems (Hale) bleiben lesbar */
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35);
  }
  .card-chip .chip-sep { width: 1px; height: 16px; background: rgba(255,255,255,0.28); }

  .card-chip.fac-blau    { border-color: #5b95ff; }
  .card-chip.fac-gelb    { border-color: #f5c242; }
  .card-chip.fac-gruen   { border-color: #44cc88; }
  .card-chip.fac-rot     { border-color: #ff6a55; }
  .card-chip.fac-bunt    { border-color: #d28bff; }
  .card-chip.fac-weiss   { border-color: #e8e4f0; }
  .card-chip.fac-wuerfel { border-color: #78e8ff; }
  .card-chip.fac-tippin  { border-color: #b57bff; }

  /* Stichkarte: etwas kompakter, damit auch vier Karten Platz haben */
  .trick-card .card-chip { height: 26px; padding: 0 8px; top: -19px; left: 50%; transform: translateX(-50%); }
  .trick-card .card-chip b { font-size: 16.5px; }
  .trick-card .card-chip img { height: 15px; }

  /* ------------------------------------------------------------------
     TISCHMITTE: Pot, Anforderung, Stich
     ------------------------------------------------------------------ */
  .trick-slots {
    width: calc(var(--tc-w) * 3.4);
    height: calc(var(--tc-h) * 1.5);
  }
  .trick-card {
    width: var(--tc-w);
    height: var(--tc-h);
    overflow: visible;
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: calc(var(--tc-w) * 0.08);
  }
  .trick-card img {
    border-radius: inherit;
    border: 1.5px solid rgba(255,255,255,0.25);
    box-sizing: border-box;
    box-shadow: 0 8px 24px rgba(0,0,0,0.65);
  }
  /* Positionen: Auf der Hand-Seite (unten) liegt immer oben, damit kein Wert-Badge verdeckt wird */
  .trick-card.pos-top    { transform: translateY(calc(var(--tc-h) * -0.22)); z-index: 1; }
  .trick-card.pos-left   { transform: translateX(calc(var(--tc-w) * -1.1)) rotate(-5deg); z-index: 2; }
  .trick-card.pos-right  { transform: translateX(calc(var(--tc-w) * 1.1)) rotate(5deg); z-index: 2; }
  .trick-card.pos-bottom { transform: translateY(calc(var(--tc-h) * 0.22)); z-index: 3; }
  .trick-card.winner-card { border: none !important; }
  .trick-card.winner-card img { border-color: var(--gold); }

  .card-color-tag { font-size: 0.78rem; padding: 0.2rem 0.6rem; }

  .pot-badge { padding: 0.45rem 1.4rem; font-size: 1.25rem; }
  .pot-badge .pot-label { font-size: 1.02rem; }
  .pot-badge b { font-size: 1.85rem; }
  .req-suit-badge { font-size: 0.98rem; font-weight: 700; padding: 0.28rem 1rem; color: #fff; }
  .btn-review-last-trick { font-size: 0.95rem; }

  /* ------------------------------------------------------------------
     SITZE: größere Zahlen
     ------------------------------------------------------------------ */
  .seat-name { font-size: 1rem; margin-top: 4px; }
  .seat-stats {
    font-size: 15.5px;
    font-weight: 600;
    padding: 0.2rem 0.75rem;
    gap: 0.6rem;
    background: rgba(7, 8, 15, 0.92);
    border-color: rgba(255,255,255,0.25);
    white-space: nowrap;
  }
  .stat-coins { font-weight: 800; color: #ffd96a; }
  .stat-tricks { font-weight: 700; }

  .seat.seat-right { top: 38%; }
  .seat.seat-left  { top: 38%; }

  /* Gegner-Sprechblasen erscheinen ÜBER dem Sitz und verdecken so nie dessen Zahlen */
  .seat-left .speech-bubble  { left: 0;  right: auto; top: auto; bottom: calc(100% + 8px); }
  .seat-right .speech-bubble { right: 0; left: auto;  top: auto; bottom: calc(100% + 8px); }
  .speech-bubble { font-size: 0.9rem; max-width: 220px; }

  /* Hohe Fenster: Tischmitte etwas tiefer, damit der Pot den oberen Sitz nicht berührt */
  .table-center { margin-top: 3.6vh; }

  /* Eigene Statuszeile (Ansage / Erreicht): größte, kontrastreichste Zahl am Tisch */
  .seat.seat-bottom {
    left: 42%;
    bottom: calc(var(--hc-h) * var(--hand-overlap) + 8px);
  }
  .seat.seat-bottom .seat-stats {
    font-size: 18px;
    font-weight: 700;
    padding: 0.32rem 1rem;
    background: rgba(7, 8, 15, 0.96);
    border: 1.5px solid var(--gold);
    box-shadow: 0 4px 16px rgba(0,0,0,0.8);
    color: #fff;
  }
  .seat.seat-bottom .stat-tricks b { font-size: 1.15em; color: #ffd96a; }

  /* ------------------------------------------------------------------
     PROFESSOR TIPPIN: Sprechblase wächst nach OBEN am rechten Rand
     → verdeckt NIEMALS Handkarten, Tischmitte oder eigene Statuszeile!
     ------------------------------------------------------------------ */
  .thurum-messenger {
    bottom: calc(var(--hc-h) * var(--hand-overlap) + 14px);
    right: 18px;
    z-index: 65;                       /* strikt unter der Hand (85), über dem Tisch */
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 0.45rem;
  }
  .messenger-avatar { width: 86px; height: 106px; }
  .messenger-bubble {
    max-width: min(240px, 20vw);
    font-size: 0.84rem;
    padding: 0.55rem 0.8rem;
  }
  .messenger-bubble::after { display: none; }

  /* ------------------------------------------------------------------
     STICH-ENDE (Showcase) & Ansage-Modal: größere Zahlen
     ------------------------------------------------------------------ */
  .showcase-card-item { width: clamp(104px, 17vh, 170px); }
  .showcase-player-badge { font-size: 15px; padding: 4px 12px; }
  .badge-card-sym { font-size: 1.05em; }
  .showcase-summary-text { font-size: 1rem; }
  .showcase-cards-row { gap: 40px; }   /* damit sich die Namens-Badges nicht überlappen */

  .table-center:has(.showcase-active) { margin-top: -8vh; }
  .showcase-summary-bar { flex-direction: row; gap: 10px; max-width: min(96vw, 820px); }
  .btn-caligo-continue { white-space: nowrap; }
  .felt-table:has(.showcase-active) .seat.seat-top { opacity: 0.15; transition: opacity 0.3s ease; }

  /* Hand während der Ansage: nicht größer als die normale Hand */
  .bidding-active .hand-area {
    height: calc(var(--hc-h) + 14px + var(--hand-pad)) !important;
    bottom: 0 !important;
    padding-bottom: var(--hand-pad) !important;
  }
  .bidding-active .hand-card {
    transform: translateY(-10px) !important;
  }
  .bidding-active .hand-card:hover {
    transform: translateY(calc(var(--hc-h) * -0.16)) scale(1.22) !important;
  }
}

/* ------------------------------------------------------------------
   KOMPAKT-LAPTOP (≤ 860 px Höhe, z. B. altes 13"-MacBook 1280×700):
   Pot links, Anforderung/Button rechts vom Stich → die Tischmitte braucht
   nur noch die Höhe der Karten.
   ------------------------------------------------------------------ */
@media (min-width: 901px) and (min-height: 551px) and (max-height: 860px) {
  .table-center {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-areas:
      "pot   trick req"
      "pot   trick btn";
    align-items: center;
    justify-items: center;
    column-gap: 1.2rem;
    row-gap: 0.5rem;
    margin-top: 2.2vh;
  }
  .table-center .pot-badge { grid-area: pot; }
  .table-center .trick-slots { grid-area: trick; }
  .table-center .req-suit-badge { grid-area: req; align-self: end; }
  .table-center .btn-review-last-trick { grid-area: btn; align-self: start; }
  .pot-badge { padding: 0.4rem 1.1rem; font-size: 1.1rem; }
  .pot-badge b { font-size: 1.65rem; }

  /* Kompakte Sitze: Avatar links, Name + Zahlen rechts daneben (spart ~60 px Höhe) */
  .seat.seat-top, .seat.seat-left, .seat.seat-right {
    display: grid !important;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 2px;
    align-items: center;
    justify-items: start;
  }
  .seat.seat-top .seat-avatar, .seat.seat-left .seat-avatar, .seat.seat-right .seat-avatar {
    grid-row: 1 / span 2; grid-column: 1; width: 50px; height: 50px;
  }
  .seat.seat-top .seat-name, .seat.seat-left .seat-name, .seat.seat-right .seat-name {
    grid-row: 1; grid-column: 2; margin: 0;
  }
  .seat.seat-top .seat-stats, .seat.seat-left .seat-stats, .seat.seat-right .seat-stats {
    grid-row: 2; grid-column: 2; margin: 0;
  }
  /* Stich-Ende auf kleinem Display: alles übereinander in einer Spalte, Weiter-Button neben dem Text,
     Pot/Anforderung ausgeblendet (liegen ohnehin im Hintergrund) → Statuszeile bleibt frei */
  .felt-table:has(.showcase-active) .pot-badge,
  .felt-table:has(.showcase-active) .req-suit-badge { display: none; }
  .table-center:has(.showcase-active) {
    display: flex;
    flex-direction: column;
    margin-top: -10vh;
  }
  .trick-slots.showcase-active { min-height: 0; }
  .showcase-card-item { width: clamp(88px, 13vh, 150px); }
  .showcase-cards-row { padding: 30px 6px 4px 6px; }
  .showcase-summary-bar { margin-top: 6px; gap: 10px; flex-direction: row; max-width: min(96vw, 780px); }
  .showcase-summary-text { padding: 5px 12px; }
  .showcase-reason-text { font-size: 0.86rem; }
  .btn-caligo-continue { padding: 0.5rem 1.2rem; font-size: 1rem; white-space: nowrap; }

  .seat.seat-top { top: 8px; }
  .seat.seat-left  { top: 24%; left: 22px; }
  .seat.seat-right { top: 24%; right: 22px; }
}

/* ------------------------------------------------------------------
   Schmale Fenster (< 1500 px): Topbar passt in EINE Zeile
   ------------------------------------------------------------------ */
@media (min-width: 901px) and (min-height: 551px) and (max-width: 1499px) {
  .game-meta > .meta-pill { display: none; }   /* Radio-Titel (Steuerung bleibt über die Buttons) */
}
@media (min-width: 901px) and (min-height: 551px) and (max-width: 1359px) {
  .meta-pill { padding: 0.26rem 0.62rem; }
}

/* =========================================================================
   TABLET & HANDY (≤ 900 px Breite ODER ≤ 550 px Höhe):
   1. Wert-Badges (.card-chip) auch auf Handy & Tablet aktiv und glasklar!
   2. Tippin liegt NIEMALS über den Handkarten (z-index: 65 < Hand 85,
      kompakter Avatar am rechten Rand, Sprechblase wächst nach oben).
   ========================================================================= */
@media (max-width: 900px), (max-height: 550px) {
  .hand-card,
  .trick-card {
    overflow: visible !important;
  }
  .hand-card img,
  .trick-card img {
    border-radius: inherit;
  }

  .card-chip {
    position: absolute;
    top: -15px;
    left: 3px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 20px;
    padding: 0 5px;
    background: linear-gradient(180deg, rgba(20, 24, 44, 0.97), rgba(8, 10, 22, 0.97));
    border: 1.4px solid var(--gold);
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.85);
    color: #fff;
    font-family: var(--serif);
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
  }
  .card-chip .chip-rank,
  .card-chip .chip-class { display: inline-flex; align-items: center; gap: 2px; }
  .card-chip b {
    font-size: 12.5px;
    font-weight: 900;
    color: #fff;
  }
  .card-chip img {
    height: 12px;
    width: auto;
    display: block;
    box-sizing: content-box;
    padding: 1px 2px;
    border-radius: 4px;
    background: linear-gradient(180deg, #f6f0e2, #d9cfb6);
  }
  .card-chip .chip-sep { width: 1px; height: 11px; background: rgba(255,255,255,0.28); }

  .card-chip.fac-blau    { border-color: #5b95ff; }
  .card-chip.fac-gelb    { border-color: #f5c242; }
  .card-chip.fac-gruen   { border-color: #44cc88; }
  .card-chip.fac-rot     { border-color: #ff6a55; }
  .card-chip.fac-bunt    { border-color: #d28bff; }
  .card-chip.fac-weiss   { border-color: #e8e4f0; }
  .card-chip.fac-wuerfel { border-color: #78e8ff; }
  .card-chip.fac-tippin  { border-color: #b57bff; }

  .trick-card .card-chip {
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    height: 19px;
    padding: 0 5px;
  }
  .trick-card .card-chip b { font-size: 11.5px; }
  .trick-card .card-chip img { height: 11px; }

  /* Tippin: strikt unterhalb der Handkarten (z-index 65 < 85), kompakt & Blase nach oben */
  .thurum-messenger {
    bottom: 82px !important;
    right: 8px !important;
    z-index: 65 !important;
    flex-direction: column-reverse !important;
    align-items: flex-end !important;
    gap: 0.35rem !important;
  }
  .messenger-avatar {
    width: 58px !important;
    height: 72px !important;
  }
  .messenger-badge {
    font-size: 0.52rem !important;
    padding: 0.1rem 0.4rem !important;
  }
  .messenger-bubble {
    max-width: min(195px, 48vw) !important;
    font-size: 0.72rem !important;
    padding: 0.45rem 0.65rem !important;
    line-height: 1.3 !important;
  }
  .messenger-bubble::after { display: none !important; }
}


/* =========================================================================
   HANDY QUERFORMAT / 16:9 LANDSCAPE (max-height: 550px):
   Die Handkarten ragen unten ca. 40 % aus dem Bildschirm heraus, damit der
   Spieltisch in der Mitte samt gespielten Stichkarten, Pot & Gegnern frei
   und groß sichtbar bleibt! Beim Antippen/Hovern fährt die Karte hoch.
   ========================================================================= */
@media (max-height: 550px) {
  .table-viewport {
    align-items: flex-start !important;
    padding-top: 4px !important;
  }

  .felt-table {
    width: min(96vw, 920px) !important;
    height: calc(100vh - 44px - 52px) !important;
    min-height: 235px !important;
    border-radius: 90px !important;
    border-width: 6px !important;
  }

  /* Kompakte Tischmitte im Querformat: Pot links, Stich Mitte, Pflichtfarbe rechts */
  .table-center {
    display: grid !important;
    grid-template-columns: auto auto auto !important;
    grid-template-areas:
      "pot trick req"
      "pot trick btn" !important;
    align-items: center !important;
    justify-items: center !important;
    column-gap: 0.75rem !important;
    row-gap: 0.25rem !important;
    margin-top: -6px !important;
  }
  .table-center .pot-badge { grid-area: pot !important; padding: 0.25rem 0.7rem !important; font-size: 0.82rem !important; }
  .table-center .pot-badge b { font-size: 1.15rem !important; }
  .table-center .pot-badge .pot-label { font-size: 0.72rem !important; }
  .table-center .trick-slots { grid-area: trick !important; width: 175px !important; height: 112px !important; }
  .table-center .req-suit-badge { grid-area: req !important; font-size: 0.72rem !important; padding: 0.18rem 0.55rem !important; }
  .table-center .btn-review-last-trick { grid-area: btn !important; font-size: 0.68rem !important; padding: 0.16rem 0.55rem !important; margin-top: 0 !important; }

  .trick-card {
    width: 64px !important;
    height: 92px !important;
  }
  .trick-card.pos-top    { transform: translateY(-14px) !important; }
  .trick-card.pos-bottom { transform: translateY(14px) !important; }
  .trick-card.pos-left   { transform: translateX(-46px) rotate(-6deg) !important; }
  .trick-card.pos-right  { transform: translateX(46px) rotate(6deg) !important; }

  /* Sitze kompakt im Querformat */
  .seat.seat-top {
    top: 4px !important;
    flex-direction: row !important;
    gap: 6px !important;
  }
  .seat.seat-left  { left: 10px !important; top: 42% !important; }
  .seat.seat-right { right: 10px !important; top: 42% !important; }
  .seat-avatar { width: 36px !important; height: 36px !important; }
  .seat-name { font-size: 0.7rem !important; margin-top: 1px !important; }
  .seat-stats { font-size: 0.68rem !important; padding: 0.1rem 0.45rem !important; }

  /* Eigene Statuszeile links unten neben der Hand, damit die Tischmitte frei ist */
  .seat.seat-bottom {
    bottom: 50px !important;
    left: 14px !important;
    transform: none !important;
    z-index: 80 !important;
  }

  /* Handkarten: ragen unten ~44px aus dem Bild heraus, oberer Teil + Wert-Chip klar sichtbar */
  .hand-area {
    height: 74px !important;
    margin-top: -22px !important;
    padding-bottom: 0 !important;
    align-items: flex-end !important;
    overflow: visible !important;
  }

  .card-fan {
    align-items: flex-end !important;
    height: 74px !important;
    overflow: visible !important;
  }

  .hand-card {
    width: 82px !important;
    height: 118px !important;
    margin-left: -18px !important;
    margin-bottom: -44px !important;   /* Karte ragt unten bewusst aus dem Bild heraus */
  }
  .hand-card:first-child { margin-left: 0 !important; }

  .hand-card:hover:not(.illegal),
  .hand-card:active:not(.illegal) {
    transform: translateY(-46px) scale(1.22) !important;
    z-index: 120 !important;
  }

  /* Auch beim Bieten im Querformat: Handkarten ragen unten etwas aus dem Bild */
  .bidding-active .hand-area {
    height: 78px !important;
    bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .bidding-active .hand-card {
    width: 80px !important;
    height: 115px !important;
    margin-left: -18px !important;
    margin-bottom: -36px !important;
    transform: translateY(0) !important;
  }

  /* Tippin im Querformat rechts über dem Kartenrand */
  .thurum-messenger {
    bottom: 52px !important;
    right: 8px !important;
  }
  .messenger-avatar {
    width: 48px !important;
    height: 60px !important;
  }
}