/* Durak — responsiver Spieltisch (Issue #9, Meilenstein v0.12 "Mobile
   Friendly"). Mobile-first Ergänzung zu app.css und wird deshalb NACH
   app.css geladen. Sie gehört nur zur Tisch-Ansicht (views/table.html):
   Gegner als kompakte Kopfzeile, Tisch in der Mitte, eigene Hand unten in
   der Daumenzone, Stapel-/Trumpf-/Code-Info in einer aufklappbaren Leiste.
   Ab 641px Breite bleibt der Tisch optisch unverändert. */

/* ---------- neue Struktur-Elemente (in jeder Breite) ---------- */

/* Kopfzeile und Daumenzone sind selbst Stapel, damit .game sie behandelt
   wie die einzelnen Bereiche vorher. */
.game .table-head,
.game .table-dock {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* Aufklappbare Info-Leiste (<details>/<summary>, kein JavaScript). Die
   Kurzfassung steht im summary und bleibt damit auch zugeklappt lesbar —
   der Tisch wird bei jedem SSE-Ereignis neu eingesetzt und verliert dabei
   den open-Zustand. */
.game .table-info {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--ink);
}
.game .table-info > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.55rem;
  padding: 0.35rem 0.7rem;
  min-height: 44px;            /* tastbare Mindestgröße */
  cursor: pointer;
  list-style: none;            /* Standard-Dreieck aus */
}
.game .table-info > summary::-webkit-details-marker { display: none; }
.game .table-info > summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
/* Klapp-Pfeil am Zeilenende */
.game .table-info > summary::after {
  content: "\25BE";            /* ▾ */
  margin-left: auto;
  color: var(--ink-dim);
  transition: transform 0.15s ease;
}
.game .table-info[open] > summary::after { transform: rotate(180deg); }

.game .table-info .info-chip {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  font-size: 0.82rem;
}
.game .table-info .info-chip.chip-trump { color: var(--gold); }
.game .table-info .info-chip.chip-stock.empty { opacity: 0.45; }
.game .table-info .info-chip.chip-code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: 0.08em;
}

.game .table-info .info-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 0.4rem 0.9rem;
  padding: 0.55rem 0.75rem 0.7rem;
  border-top: 1px dashed var(--panel-line);
  text-align: left;
}
.game .table-info .info-item { min-width: 0; overflow-wrap: anywhere; }
.game .table-info .info-item .hint { display: block; font-size: 0.78rem; }
.game .table-info .trump-face {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.game .table-info .info-card {
  width: 34px;
  aspect-ratio: 1 / var(--card-ratio);
  object-fit: cover;
  display: block;
  background: white;
  border-radius: 5px;
  box-shadow: var(--shadow);
}

/* ---------- Hochformat bis 640px: Kopf / Tisch / Daumenzone ---------- */

@media (max-width: 640px) {
  main { overflow-x: clip; }   /* fängt Ausreißer ab, ohne Scrollbar */

  .game {
    gap: 0.55rem;
    --card-w: 62px;            /* feste Breite statt 15vw: bleibt klein */
    --hand-w: 60px;
    /* Der Tisch füllt die Höhe: Kopfzeile oben, Karten in der Mitte,
       Hand unten. dvh mit vh-Fallback für ältere iOS-Versionen. */
    min-height: calc(100vh - 2rem);
    min-height: calc(100dvh - 2rem);
  }

  /* Kopfzeile bleibt beim Scrollen stehen. Die negativen Ränder greifen
     nur in das main-Padding (1rem) - es entsteht kein horizontaler Lauf. */
  .game .table-head {
    position: sticky;
    top: 0;
    z-index: 3;
    gap: 0.4rem;
    margin: -0.6rem -0.6rem 0;
    padding: 0.6rem 0.6rem 0.5rem;
    background: rgba(18, 63, 42, 0.94);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--panel-line);
  }

  /* Kopfzeile kompakt: Code und eigene Identität stehen jetzt in der
     Info-Leiste, hier bleiben Name, Hinweis- und Theme-Schalter sowie Status. */
  .game .topbar { gap: 0.3rem 0.5rem; font-size: 0.9rem; }
  .game .topbar > strong { min-width: 0; overflow-wrap: anywhere; }
  .game .topbar .code-pill,
  .game .topbar .me-pill { display: none; }
  .game .topbar .stage {
    margin-left: auto;
    padding: 0.2rem 0.6rem;
    font-size: 0.82rem;
  }

  /* Gegner als kompakte Chips in einer Zeile (Kopfzeile). */
  .game .opponents { gap: 0.35rem; }
  .game .opponent {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    overflow-wrap: anywhere;
  }
  .game .opponent .opp-name { font-size: 0.85rem; }
  .game .opponent .role { font-size: 0.62rem; padding: 0.05rem 0.4rem; }
  .game .opponent .opp-cards { margin-top: 0; margin-left: auto; }
  /* Karten der Gegner zeigen wir als Zahl - als Bilder wäre die
     Kopfzeile zu hoch. */
  .game .opponent .card-back.mini { display: none; }
  .game .opponent .count-badge { margin-left: 0; font-size: 0.78rem; }

  /* Tisch in der Mitte: er bekommt den ganzen freien Raum. */
  .game .table-zone {
    flex: 1 1 auto;
    gap: 0.6rem;
    align-content: center;
    align-items: center;
  }
  .game .slots { gap: 0.5rem 0.6rem; }
  .game .slot .defend { margin-left: calc(var(--card-w) * -0.42); }

  /* Stapel als kleine Zeile ueber den Karten - Zahl und Label bleiben in
     jeder Breite sichtbar (#86): ohne jedes Wort war der Stapel auf dem
     Handy nur ein Bild. Der Trumpfname steht zusaetzlich in der
     Info-Leiste; hier zieht er als kompakte kleine Zeile unter Stapel,
     Zahl und Label. */
  .game .stock { order: -1; gap: 0.25rem 0.35rem; margin-left: 0; flex-wrap: wrap; }
  .game .stock .pile { width: 46px; }
  .game .stock .stock-label { font-size: 0.72rem; }
  .game .stock .trump-label {
    flex: 1 1 100%;             /* eigene kompakte Zeile, nicht ausgeblendet */
    text-align: center;
    font-size: 0.68rem;
  }
  .game .stock .stock-count {
    padding: 0.05rem 0.45rem;
    font-size: 0.8rem;
  }

  .game .donations { flex-wrap: wrap; gap: 0.3rem; }
  .game .donations .label { width: 100%; }
  .game .donations .donation-card { width: 42px; }

  .game .result-banner { padding: 0.7rem; }
  .game .result-banner .headline { font-size: 1.1rem; }
  .game .score-table { width: 100%; }
  .game .score-table td, .game .score-table th {
    padding: 0.15rem 0.5rem;
    overflow-wrap: anywhere;
  }

  /* Daumenzone: Aktionen direkt über der Hand, beides am unteren Rand. */
  .game .table-dock {
    gap: 0.4rem;
    margin-top: auto;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .game .actions { gap: 0.4rem; }
  .game .actions .btn { padding: 0.5rem 0.9rem; font-size: 0.9rem; }

  /* Eigene Hand bodenständig; die Karten fächern enger und umbrechen erst,
     wenn sie wirklich nicht in eine Zeile passen. */
  .game .hand {
    flex-wrap: wrap;
    gap: 0.25rem 0;          /* kleiner Abstand, wenn die Hand umbricht */
    padding: 0;
    min-height: 0;
  }
  .game .hand .card-btn {
    flex: 0 0 auto;
    width: var(--hand-w);
    margin-left: calc(var(--hand-w) * -0.28);
  }

  .game .log summary {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Auf Touch-Geräten bleibt :hover nach dem Tippen stehen - dort gibt es
   den Anhebe-Effekt der Handkarten nicht. */
@media (hover: none) {
  .game .hand .card-btn:hover { transform: none; }
}

/* ---------- Checkpoint 420px (iPhone SE Hochformat, kleinere Karten) ---------- */

@media (max-width: 420px) {
  .game {
    --card-w: 56px;
    --hand-w: 54px;
  }
  .game .topbar { font-size: 0.85rem; }
  .game .table-info .info-body { grid-template-columns: 1fr 1fr; }
}

/* ---------- Checkpoint 360px (kleinste unterstützte Breite) ---------- */

@media (max-width: 360px) {
  .game {
    gap: 0.45rem;
    --card-w: 50px;
    --hand-w: 50px;
  }
  .game .slots { gap: 0.4rem 0.45rem; }
  .game .stock .pile { width: 42px; }
  .game .table-info > summary { padding: 0.3rem 0.5rem; }
  .game .table-info .info-chip { font-size: 0.76rem; }
}

/* ---------- Desktop: alles beim Alten ---------- */

@media (min-width: 641px) {
  /* Trumpf, Stapel und Code liegen hier offen im Tisch - die Leiste wäre
     nur Doppelung. */
  .game .table-info { display: none; }
}