/* =======================================================
   Alina Games - gemeinsame Design-Tokens + Bestenlisten-Widget.
   Wird von ALLEN Spielen eingebunden (/shared/ui.css). Bewusst ohne
   Tailwind-Abhaengigkeit, damit das Widget ueberall identisch aussieht,
   egal was das einzelne Spiel sonst laedt.
   ======================================================= */

:root {
  --ag-bg-top: #FFF7ED;        /* Verlauf oben (warmes Creme) */
  --ag-bg-bottom: #FCE7F3;     /* Verlauf unten (zartes Rosa) */
  --ag-accent: #ec4899;        /* Pink 500 - Titel, Primaeraktionen */
  --ag-accent-strong: #db2777; /* Pink 600 */
  --ag-accent-mid: #f472b6;    /* Pink 400 - Ringe/Markierungen in Spielen */
  --ag-accent-soft: #f9a8d4;   /* Pink 300 - aktive Tabs */
  --ag-accent-faint: #fdf2f8;  /* Pink 50 - eigene Zeile in der Liste */
  --ag-card: #ffffff;
  --ag-text: #44403c;          /* Stone 700 */
  --ag-muted: #78716c;         /* Stone 500 */
  --ag-faint: #a8a29e;         /* Stone 400 */
  --ag-line: #f5f5f4;          /* Stone 100 - Trennlinien */
  --ag-chip: #f5f5f4;          /* Stone 100 - inaktive Tabs */
}

/* =======================================================
   Jungen-Farbschema: Klasse ag-boy auf <html> (setzen die Familienseiten
   und die Spiele nach dem Laden der Familien-Config, gender === "boy").
   Erstens die Tokens, zweitens Overrides fuer die Tailwind-Pink-Klassen,
   die in den Spiel-Frontends direkt im Markup stehen.
   ======================================================= */
.ag-boy {
  --ag-bg-top: #F0F9FF;        /* Sky 50 */
  --ag-bg-bottom: #DBEAFE;     /* Blue 100 */
  --ag-accent: #3b82f6;        /* Blue 500 */
  --ag-accent-strong: #2563eb; /* Blue 600 */
  --ag-accent-mid: #60a5fa;    /* Blue 400 */
  --ag-accent-soft: #93c5fd;   /* Blue 300 */
  --ag-accent-faint: #eff6ff;  /* Blue 50 */
}
.ag-boy .text-pink-500 { color: #3b82f6 !important; }
.ag-boy .bg-pink-400 { background-color: #60a5fa !important; }
.ag-boy .bg-pink-400\/95 { background-color: rgba(96, 165, 250, .95) !important; }
.ag-boy .bg-pink-200 { background-color: #bfdbfe !important; }
.ag-boy .border-pink-200 { border-color: #bfdbfe !important; }
.ag-boy .border-pink-400 { border-color: #60a5fa !important; }
.ag-boy .focus\:border-pink-400:focus { border-color: #60a5fa !important; }
.ag-boy .ring-pink-300 { --tw-ring-color: #93c5fd !important; }

/* ---------- Bestenlisten-Widget (Markup kommt aus leaderboard.js) ---------- */

.alb-overlay {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0, 0, 0, .4);
  display: flex; align-items: center; justify-content: center;
  padding: 0 16px;
}
.alb-overlay[hidden] { display: none; }

.alb-card {
  background: var(--ag-card); color: var(--ag-text);
  border-radius: 24px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
  padding: 24px; width: 100%; max-width: 384px; max-height: 85vh;
  display: flex; flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.alb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.alb-title { font-size: 1.25rem; font-weight: 800; color: var(--ag-accent); margin: 0; }
.alb-close {
  border: none; background: none; cursor: pointer;
  color: var(--ag-muted); font-size: 1.5rem; line-height: 1; padding: 0 2px;
}

/* Familie/Weltweit-Umschalter: Mini-Pill im Kopf (Stil wie der
   DE/ES-Sprachumschalter der Seiten). */
.alb-scope { display: flex; gap: 2px; background: var(--ag-chip); border-radius: 999px; padding: 3px; margin-left: auto; }
.alb-scope button {
  border: none; background: transparent; cursor: pointer; font: inherit;
  font-size: .78rem; font-weight: 700; color: var(--ag-muted);
  padding: 4px 10px; border-radius: 999px;
  max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.alb-scope button.alb-active {
  background: #fff; color: var(--ag-accent-strong);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}

/* Kindname in Klammern hinter dem Spielernamen (nur im Weltweit-Modus) */
.alb-fam { font-weight: 400; font-size: .78rem; color: var(--ag-faint); margin-left: 4px; }

.alb-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.alb-tab {
  flex: 1; border: none; cursor: pointer; font: inherit; font-weight: 600;
  padding: 8px 4px; border-radius: 12px;
  background: var(--ag-chip); color: var(--ag-text);
}
.alb-tab.alb-active { background: var(--ag-accent-soft); color: #fff; }
/* Level-Tabs (Memory/Puzzle) etwas dezenter als die Wochen/Ewig-Tabs */
.alb-tabs-levels .alb-tab { font-size: .85rem; padding: 6px 4px; }

.alb-body { overflow-y: auto; flex: 1; min-height: 120px; }
.alb-note { text-align: center; color: var(--ag-muted); padding: 24px 0; margin: 0; }
.alb-error { text-align: center; color: #f87171; padding: 24px 0; margin: 0; }

.alb-list { list-style: none; margin: 0; padding: 0; }
.alb-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 6px; border-bottom: 1px solid var(--ag-line);
}
.alb-row:last-child { border-bottom: none; }
.alb-row-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.alb-rank { width: 24px; text-align: center; flex-shrink: 0; }
.alb-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alb-value { font-size: .875rem; color: var(--ag-muted); flex-shrink: 0; margin-left: 8px; }

/* Eigene Zeile: dezent hervorgehoben, damit man sich sofort findet. */
.alb-row.alb-me { background: var(--ag-accent-faint); border-radius: 10px; }
.alb-row.alb-me .alb-name { color: var(--ag-accent-strong); }

/* Wochensieger-Kasten unter der Wochenliste */
.alb-winners { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--ag-line); }
.alb-winners-title {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ag-muted); margin: 0 0 6px;
}
.alb-winner {
  display: flex; align-items: center; gap: 8px;
  font-size: .85rem; padding: 3px 0;
}
.alb-winner-week { color: var(--ag-muted); width: 52px; flex-shrink: 0; }
.alb-winner-name { font-weight: 600; }
.alb-winner-value { color: var(--ag-muted); margin-left: auto; }

/* Fusszeile: dein letzter Score (localStorage, pro Geraet) */
.alb-foot {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ag-line);
  text-align: center; font-size: .85rem; color: var(--ag-muted);
}
.alb-foot strong { color: var(--ag-text); }