/* Durak - Theme "classic": Karten-Styling fuer das Markup aus
   internal/ui/views/theme/classic.html (Issue #17).

   Der Page-Head verlinkt diese Datei nach app.css und vor den mobile-*.css,
   damit deren Overrides gewinnen. Die Klassen der Karten-Markups (.card,
   .hand .card-btn, .slots .slot .attack/.defend, .stock .pile .card-back
   und .trump-card, .opp-cards .card-back.mini) sind zusammen mit app.css
   der Vertrag zwischen Theme-Partial und Stylesheet.

   Die Kartengroesse kommt aus den Layout-Tokens --card-w/--card-ratio in
   app.css, weil der Tisch damit misst; ein Theme darf sie hier ueberschreiben. */

/* ---------- Karten-Gesicht (Partials "card-hand", "card-donation") ------ */
.card {
  width: 100%;
  aspect-ratio: 1 / var(--card-ratio);
  object-fit: cover;
  display: block;
  background: white;
  border-radius: calc(var(--radius) * 0.8);
  box-shadow: var(--shadow);
  border: 1px solid rgba(0, 0, 0, 0.25);
}

/* ---------- eigene Hand (partial "card-hand") ---------------------------- */
.hand {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 0.6rem 0 0;
  min-height: calc(var(--card-w) * var(--card-ratio) * 0.8);
}
.hand .card-btn {
  width: var(--card-w);
  padding: 0;
  border: none;
  background: none;
  margin-left: calc(var(--card-w) * -0.3);
  cursor: pointer;
  transition: transform 0.12s ease;
}
.hand .card-btn:first-child { margin-left: 0; }
.hand .card-btn .card { background: white; border: 1px solid rgba(255, 255, 255, 0.5); }
.hand .card-btn:hover { transform: translateY(-10px); z-index: 2; }
.hand .card-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hand .card-btn.playable .card {
  box-shadow: 0 0 0 2px var(--gold), var(--shadow);
}
.hand .card-btn:disabled {
  cursor: default;
  transform: none;
  filter: grayscale(0.7) brightness(0.8);
}
.hand .card-btn:disabled .card { box-shadow: var(--shadow); }

/* "Hinweise: Aus" - ohne den goldenen Glow der spielbaren Karten. */
body.no-hints .hand .card-btn.playable .card { box-shadow: none; }

/* Mehrfachauswahl (Issue #38): ausgewaehlte Karten werden angehoben und
   blau gerahmt. app.js setzt .selected (+ aria-pressed) am .card-btn und
   nach jedem SSE-Swap neu; der Zustand wirkt auch bei "Hinweise: Aus",
   weil er nicht am goldenen Glow haengt. */
.hand .card-btn.selected { transform: translateY(-14px); z-index: 2; }
.hand .card-btn.selected .card {
  box-shadow: 0 0 0 3px var(--accent), 0 0 14px rgba(79, 163, 227, 0.55), var(--shadow);
}
.hand .card-btn.selected:hover { transform: translateY(-16px); }

/* Mehrfachauswahl (Issue #92): liegt eine Auswahl, nimmt app.js allen
   spielbaren Karten anderen Rangs die Hervorhebung (.dimmed) - Nachkarten
   muessen gleichen Rang haben. Klickbar bleiben sie, der Server
   entscheidet (#37/#39 lehnen gemischte Batches atomar ab); bei
   "Hinweise: Aus" gibt es keine Hervorhebung zu nehmen - dort bleiben
   die Karten so normal wie alle anderen. */
.hand .card-btn.dimmed { opacity: 0.45; }
.hand .card-btn.dimmed .card { box-shadow: var(--shadow); }
body.no-hints .hand .card-btn.dimmed { opacity: 1; }

/* ---------- Tisch: Angriff, Abwehr, Zugabe (Partials "card-table-attack",
   "card-table-defend", "card-donation") ----------------------------------- */
.slot .attack, .slot .defend { width: var(--card-w); }
.slot .defend { margin-left: calc(var(--card-w) * -0.45); }
.slot .defend .placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 1 / var(--card-ratio);
  border: 2px dashed var(--panel-line);
  border-radius: var(--radius);
}

.donations .donation-card { width: calc(var(--card-w) * 0.75); }

/* ---------- Gegner-Hand und Stock (Partials "card-back", "card-trump") --- */
.opp-cards .card-back.mini {
  width: 26px;
  margin-left: -14px;
  border-radius: 4px;
  box-shadow: -1px 0 2px rgba(0, 0, 0, 0.5);
}
.opp-cards .card-back.mini:first-child { margin-left: 0; }

.stock .card-back {
  width: 100%;
  aspect-ratio: 1 / var(--card-ratio);
  border-radius: calc(var(--radius) * 0.8);
  box-shadow: var(--shadow);
}
.stock .trump-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  aspect-ratio: 1 / var(--card-ratio);
  border-radius: calc(var(--radius) * 0.8);
  transform: translate(-50%, -50%) rotate(-12deg);
  box-shadow: var(--shadow);
  background: white;
}