/* Solitär – Styles (mobile-first, Light/Dark via prefers-color-scheme).
 * Der Spieltisch behält bewusst in beiden Themes sein Filz-Grün,
 * die Rahmen-UI (Header, Toolbar, Footer, Modals) wechselt mit dem Theme. */

:root {
  --bg: #f2f1ec;
  --surface: #ffffff;
  --surface-2: #e9e7df;
  --text: #26302a;
  --muted: #66716a;
  --primary: #1e6b45;
  --primary-press: #175637;
  --accent: #d8a728;
  --border: #d6d4ca;
  --shadow: 0 6px 20px rgba(20, 50, 35, 0.16);
  --radius: 14px;

  /* Spieltisch (in beiden Themes grün) */
  --felt: #2e7d52;
  --felt-dark: #256843;
  --felt-line: rgba(255, 255, 255, 0.28);
  --felt-line-soft: rgba(255, 255, 255, 0.14);

  /* Karten */
  --card-face: #fdfcf7;
  --card-face-2: #f1efe6;
  --card-edge: #b9b7ac;
  --card-red: #c0392b;
  --card-black: #23272b;
  --card-back-1: #1d4e89;
  --card-back-2: #163c6a;
  --card-back-line: rgba(255, 255, 255, 0.35);
  --hl: #ffd95e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161a17;
    --surface: #212723;
    --surface-2: #2b332d;
    --text: #e8ede9;
    --muted: #9aa69e;
    --primary: #3d9c6a;
    --primary-press: #2f7f55;
    --accent: #e6b83e;
    --border: #3a423c;
    --shadow: 0 6px 20px rgba(0, 0, 0, 0.5);

    --felt: #235c3e;
    --felt-dark: #1b4a32;
    --felt-line: rgba(255, 255, 255, 0.22);
    --felt-line-soft: rgba(255, 255, 255, 0.10);

    --card-face: #efece2;
    --card-face-2: #e2ded1;
    --card-edge: #8f8d82;
    --card-red: #c94534;
    --card-black: #20242a;
    --card-back-1: #2a5c98;
    --card-back-2: #1c4272;
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

h1, h2, h3 { margin: 0 0 0.4em; line-height: 1.15; }
p { margin: 0.35em 0; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.hidden { display: none !important; }

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.app {
  max-width: 1100px;
  margin: 0 auto;
  padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* ---------- Header / HUD ---------- */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.25rem 0.35rem;
}
.title-wrap { display: flex; align-items: center; gap: 0.5rem; }
.app-logo { border-radius: 7px; }
.app-header h1 { font-size: 1.25rem; margin: 0; }

.hud { display: flex; gap: 0.35rem; }
.hud-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.2rem 0.6rem;
  text-align: center;
  min-width: 3.4rem;
}
.hud-label { display: block; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.hud-value { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.95rem; }

/* ---------- Toolbar ---------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.15rem 0.25rem 0.5rem;
}
.btn {
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.45em 1em;
  cursor: pointer;
  color: var(--text);
  background: var(--surface);
  transition: transform 0.12s ease, filter 0.12s ease;
  touch-action: manipulation;
}
.btn:active { transform: scale(0.96); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:not(:disabled):hover { background: var(--primary-press); }
.btn-ghost { background: transparent; }
.btn-icon { padding: 0.4em 0.65em; line-height: 1; }
.btn-auto {
  background: linear-gradient(135deg, var(--accent), #c98b1e);
  border-color: transparent;
  color: #3a2a00;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(216, 167, 40, 0.55); }
  50% { box-shadow: 0 0 0 8px rgba(216, 167, 40, 0); }
}
.link-btn {
  background: none; border: none; padding: 0;
  color: var(--primary); text-decoration: underline;
  cursor: pointer; font: inherit;
}
.link-premium { color: var(--accent); font-weight: 700; }

/* ---------- Spieltisch ---------- */
.board-wrap {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.09), transparent 60%),
    linear-gradient(160deg, var(--felt), var(--felt-dark));
  border-radius: var(--radius);
  border: 1px solid var(--felt-dark);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.22), var(--shadow);
  padding: 8px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.board { position: relative; width: 100%; }

.slot {
  position: absolute;
  border: 2px dashed var(--felt-line-soft);
  border-radius: 8%/6%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slot-suit { width: 46%; height: 46%; fill: var(--felt-line-soft); }
.slot-icon { width: 42%; height: 42%; fill: var(--felt-line); stroke: var(--felt-line); }
.slot-stock { cursor: pointer; border-style: solid; border-color: var(--felt-line-soft); }
.slot.drop-ok { border-color: var(--hl); border-style: solid; box-shadow: 0 0 0 2px rgba(255, 217, 94, 0.35); }
.slot.drop-hover { box-shadow: 0 0 0 4px rgba(255, 217, 94, 0.7); }

/* ---------- Karten ---------- */
.card {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  transition: transform 0.22s cubic-bezier(0.25, 0.8, 0.35, 1);
  border-radius: 8%/6%;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}
.card svg { display: block; width: 100%; height: 100%; }
.card .face, .card .back { position: absolute; inset: 0; backface-visibility: hidden; }
.card.face-down .face { visibility: hidden; }
.card:not(.face-down) .back { visibility: hidden; }
.card.grabbable { cursor: grab; }
.card.dragging {
  transition: none;
  cursor: grabbing;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45));
}
.card.drop-ok-card { outline: 3px solid rgba(255, 217, 94, 0.65); outline-offset: -2px; border-radius: 8%/6%; }
.card.no-trans { transition: none; }
.card.shake { animation: shake 0.3s ease; }
@keyframes shake {
  0%, 100% { margin-left: 0; }
  25% { margin-left: -5px; }
  75% { margin-left: 5px; }
}

/* Kartenflächen (SVG-Farben über Tokens, damit beide Themes stimmen) */
.card-face-bg { fill: var(--card-face); stroke: var(--card-edge); stroke-width: 2; }
.suit-red { fill: var(--card-red); }
.suit-black { fill: var(--card-black); }
.rank-red { fill: var(--card-red); }
.rank-black { fill: var(--card-black); }
.court-frame { fill: none; stroke-width: 3; }
.court-frame.suit-red { stroke: var(--card-red); }
.court-frame.suit-black { stroke: var(--card-black); }
.court-inner { fill: var(--card-face-2); }
.card-text {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
}

/* Kartenrückseite */
.cb-base { fill: var(--card-back-1); stroke: var(--card-edge); stroke-width: 2; }
.cb-frame { stroke: var(--card-back-line); stroke-width: 3; }
.cb-pattern path { stroke: var(--card-back-line); stroke-width: 2.5; fill: none; opacity: 0.55; }
.cb-medal { fill: var(--card-back-2); stroke: var(--card-back-line); stroke-width: 3; }
.cb-medal-suit { fill: var(--card-back-line); }

/* ---------- Toast / Statuszeile ---------- */
.toast {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%) translateY(20px);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 0.45em 1.1em;
  border-radius: 999px;
  font-size: 0.9rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.status-line {
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.5rem 0 0.25rem;
}

/* ---------- Ad-Slot / Footer ---------- */
.ad-slot {
  margin: 0.6rem 0.25rem;
  padding: 0.6rem 0.9rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}
.ad-label {
  display: inline-block;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 0.4em;
}
.ad-placeholder { color: var(--muted); font-size: 0.85rem; margin: 0.35em 0 0; }

.app-footer {
  margin-top: auto;
  padding: 0.75rem 0.25rem 1rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
}
.footer-nav { margin-top: 0.35rem; display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; }

/* ---------- Modals ---------- */
.modal {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  max-width: min(92vw, 460px);
  width: 100%;
  padding: 1.25rem 1.4rem;
  box-shadow: var(--shadow);
}
.modal::backdrop { background: rgba(0, 0, 0, 0.55); }
.modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; flex-wrap: wrap; }
.premium-list { padding-left: 1.2rem; margin: 0.5rem 0; }
.premium-list li { margin: 0.25rem 0; }

.field { margin: 0.8rem 0; }
.field-label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.field input[type="text"] {
  width: 100%;
  font: inherit;
  padding: 0.5em 0.75em;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
}
.radio-row { display: flex; gap: 0.5rem; }
.radio-pill {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.4em 1em;
  cursor: pointer;
  background: var(--surface-2);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.radio-pill:has(input:checked) { background: var(--primary); border-color: var(--primary); color: #fff; }

.win-text { font-size: 1.05rem; }
.win-record { color: var(--accent); font-weight: 700; }

.stats-body { display: grid; gap: 0.75rem; }
.stats-mode {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  background: var(--surface-2);
}
.stats-mode h3 { font-size: 0.95rem; margin-bottom: 0.35rem; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.2rem 1rem; font-size: 0.9rem; }
.stats-grid dt { color: var(--muted); }
.stats-grid dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.stats-row { display: contents; }

/* ---------- Tipp-Hervorhebung ---------- */
.card.hint-glow,
.slot.hint-glow {
  outline: 3px solid var(--hl);
  outline-offset: -2px;
  border-radius: 8%/6%;
  animation: hint-pulse 1.1s ease-in-out infinite;
}
@keyframes hint-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 217, 94, 0.65); }
  50% { box-shadow: 0 0 0 9px rgba(255, 217, 94, 0); }
}
/* Lern-Fixtures nutzen bewusst nur einen Teil des Decks */
.card.card-hidden { display: none !important; }

/* ---------- Lernmodus ---------- */
.learn-bar {
  margin: 0 0.25rem 0.5rem;
  padding: 0.7rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 5px solid var(--primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.learn-bar.learn-ok { border-left-color: var(--accent); }
.learn-bar.learn-err { border-left-color: var(--card-red); }
.learn-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.25rem; }
.learn-badge {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.15em 0.7em;
  white-space: nowrap;
}
.learn-bar p { margin: 0.2em 0 0; }
.learn-actions { display: flex; gap: 0.4rem; margin-top: 0.6rem; flex-wrap: wrap; }

.learn-list { list-style: none; margin: 0.75rem 0; padding: 0; display: grid; gap: 0.45rem; }
.learn-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-align: left;
  font: inherit;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.55em 0.8em;
  cursor: pointer;
}
.learn-item:hover { border-color: var(--primary); }
.learn-check {
  flex: none;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.85em;
}
.learn-item.is-done .learn-check { background: var(--primary); border-color: var(--primary); color: #fff; }
.learn-done-label { margin-left: auto; font-size: 0.75rem; font-weight: 600; color: var(--primary); }

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
  .app { padding-left: max(4px, env(safe-area-inset-left)); padding-right: max(4px, env(safe-area-inset-right)); }
  .app-header { flex-wrap: wrap; padding-bottom: 0.25rem; }
  .app-header h1 { font-size: 1.05rem; }
  .hud-stat { min-width: 3rem; padding: 0.15rem 0.45rem; }
  .btn { font-size: 0.82rem; padding: 0.4em 0.8em; }
  .board-wrap { padding: 5px; border-radius: 10px; }
}

@media (min-width: 900px) {
  .app-header h1 { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .btn-auto { animation: none; }
  .toast { transition: none; }
  .card.hint-glow, .slot.hint-glow { animation: none; }
}