/* ============================================================
   start.css — Startseite im Spielstein-Look (taktil wie das Landle-Logo:
   Flächen mit kräftiger Unterkante, die beim Drücken einsinken).
   Aufbau (index.html, gefüllt von js/hub.js):
     1. Heute-Modul: Fortschritt der Dailys als Pfad, Streak, „Weiterspielen“
     2. Today's dailies: drei große Karten
     3. Weekly Challenge + Fact of the day
     4. Practice: die frei spielbaren Spiele (games.js: bereich "fundamentals")
   Hell und Dunkel über die Tokens aus tokens.css / theme.css.
   ============================================================ */

.start {
  --stein: var(--bg-panel);
  --stein-2: var(--bg-panel-2);
  --kante: #15122b;                 /* Unterkante der Steine */
  --knopf-ink: #14112a;             /* Schrift auf farbigen Knöpfen (hell wie dunkel) */
  --fliese: 15%;                    /* Spielfarbe im Bildfeld */
  --flamme: #ff9632;
  --flamme-kante: #c45d00;
}
:root[data-theme="light"] .start {
  --kante: #ddd5c3;
  --fliese: 26%;
}

/* Spielfarben: --c Fläche, --ce Unterkante (auch für den Weiter-Knopf und die Pfad-Knoten) */
.start [data-spiel^="capture-the-map"] { --c: #fbbf24; --ce: #b7860b; }
.start [data-spiel="flagguessr"]       { --c: #2dd4bf; --ce: #0d8f7f; }
.start [data-spiel^="borderline"]      { --c: #ff6b6b; --ce: #c7413f; }
.start [data-spiel="geofill"]          { --c: #4ade80; --ce: #1f9d4c; }
.start [data-spiel="as-the-crow-flies"]{ --c: #d9a777; --ce: #9a6a3c; }
.start [data-spiel="higher-or-lower"]  { --c: #e879f9; --ce: #a83fc0; }
.start [data-spiel="geocabulary"]      { --c: #64a8ff; --ce: #2f6fd0; }
.start [data-spiel="flagulary"]        { --c: #ff8fb1; --ce: #cc5079; }
.start [data-spiel="weekly"]           { --c: #ffd45e; --ce: #c89400; }

/* ---------- Grundbausteine ---------- */
.stein {
  background: var(--stein);
  border: 2px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 6px 0 var(--kante);
}
.sp-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 20px; border-radius: 16px;
  background: var(--c, var(--mint)); color: var(--knopf-ink);
  box-shadow: 0 5px 0 var(--ce, #0d8f7f);
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: .01em;
  white-space: nowrap; text-decoration: none;
  transition: transform .1s ease, box-shadow .1s ease, filter .15s ease;
}
.sp-knopf svg, .sp-ic { width: 1em; height: 1em; flex: none; }
.sp-knopf.leise { background: var(--stein-2); color: var(--ink); box-shadow: 0 5px 0 var(--kante); border: 2px solid var(--line); padding: 11px 18px; }
.sp-knopf.leise .sp-ok { color: #2fbf71; }
a.sp-knopf:hover, .kachel:hover .sp-knopf { filter: brightness(1.06); }
a.sp-knopf:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ce, #0d8f7f); }
a.sp-knopf:focus-visible { outline: none; box-shadow: 0 5px 0 var(--ce, #0d8f7f), 0 0 0 4px color-mix(in srgb, var(--c, var(--mint)) 45%, transparent); }
.sp-lbl {
  margin: 0; font-family: var(--font-display); font-weight: 700; font-size: .8rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted);
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Seite ---------- */
.sp {
  flex: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 22px 32px 44px;
  display: flex; flex-direction: column; gap: 34px;
}
.sp-titel {
  margin: 0 0 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.15;
}
.sp-zeit {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: .82rem; color: var(--ink-muted);
  background: var(--stein); border: 2px solid var(--line); font-variant-numeric: tabular-nums;
}

/* ---------- 1. Heute-Modul ---------- */
.sp-heute { display: grid; grid-template-columns: 1.3fr .95fr 1fr; align-items: center; padding: 24px 28px; }
.sp-heute > * + * { border-left: 2px solid var(--line); padding-left: 28px; margin-left: 28px; }
.sp-gross { margin: 4px 0 16px; font-family: var(--font-display); font-weight: 700; font-size: 2.1rem; line-height: 1.1; text-wrap: balance; }
.sp-pfad { display: flex; align-items: flex-start; }
.sp-knoten {
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 88px; flex: none;
  font-family: var(--font-display); font-weight: 600; font-size: .78rem; line-height: 1.2; text-align: center;
  color: var(--ink-muted); text-decoration: none;
}
.sp-knoten i {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-style: normal;
  font-family: var(--font-display); font-weight: 800; font-size: .95rem; font-variant-numeric: tabular-nums;
  background: var(--stein-2); border: 3px solid var(--line); color: var(--ink-muted); box-shadow: 0 4px 0 var(--kante);
  transition: transform .1s ease;
}
.sp-knoten:hover i { transform: translateY(-2px); }
.sp-knoten.fertig i { background: var(--c); border-color: var(--c); color: var(--knopf-ink); box-shadow: 0 4px 0 var(--ce); }
.sp-knoten.laeuft i { border-color: var(--c); color: var(--ink); background: conic-gradient(color-mix(in srgb, var(--c) 45%, transparent) 0 var(--anteil, 0%), var(--stein-2) 0); }
.sp-knoten.fertig, .sp-knoten.laeuft { color: var(--ink); }
.sp-knoten i svg { width: 20px; height: 20px; }
.sp-spur { flex: 1; min-width: 18px; height: 6px; margin-top: 20px; border-radius: 9px; background: var(--line); }
.sp-spur.fertig { background: var(--c); }

.sp-flamme { display: flex; align-items: center; gap: 12px; }
.sp-flamme svg { width: 50px; height: 50px; color: var(--flamme); filter: drop-shadow(0 4px 0 var(--flamme-kante)); flex: none; }
.sp-flamme b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.sp-flamme span { color: var(--ink-muted); font-weight: 600; }
.sp-serie.null .sp-flamme svg { color: var(--line); filter: none; }
.sp-serie.null .sp-flamme b { font-size: 1.15rem; line-height: 1.25; }
.sp-woche { display: flex; gap: 6px; margin-top: 14px; }
.sp-woche i {
  flex: 1; height: 30px; border-radius: 9px; display: grid; place-items: center; font-style: normal;
  font-family: var(--font-display); font-weight: 700; font-size: .7rem; color: var(--ink-muted);
  background: var(--stein-2); border: 2px solid var(--line);
}
.sp-woche i.ok { background: var(--flamme); border-color: var(--flamme); color: #3a1a00; }
.sp-woche i.heute:not(.ok) { border-color: var(--flamme); color: var(--ink); }

.sp-weiter { display: flex; flex-direction: column; gap: 10px; }
.sp-weiter .sp-knopf { width: 100%; font-size: 1.12rem; padding: 16px 18px; white-space: normal; text-align: center; }
.sp-weiter small { display: flex; justify-content: center; align-items: center; gap: 6px; color: var(--ink-muted); font-size: .85rem; font-variant-numeric: tabular-nums; }

/* ---------- 2. Daily-Karten und 4. Practice ---------- */
.sp-dailies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sp-uebung  { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }

.start .kachel {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  color: inherit; text-decoration: none;
  background: var(--stein); border: 2px solid var(--line); border-radius: 22px; box-shadow: 0 6px 0 var(--kante);
  transition: transform .12s ease, box-shadow .12s ease, border-color .15s ease;
}
.start .kachel:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--kante); border-color: color-mix(in srgb, var(--c) 45%, var(--line)); }
.start .kachel:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--kante); }
.start .kachel:focus-visible { outline: none; border-color: var(--c); box-shadow: 0 6px 0 var(--kante), 0 0 0 4px color-mix(in srgb, var(--c) 40%, transparent); }
.sp-karte { padding: 14px; }
.sp-mini  { padding: 12px 12px 14px; text-align: center; }

.sp-fliese {
  position: relative; display: grid; place-items: center; height: 170px; border-radius: 16px;
  background: color-mix(in srgb, var(--c) var(--fliese), var(--stein));
  box-shadow: inset 0 -5px 0 color-mix(in srgb, var(--ce) 55%, transparent);
  container-type: inline-size;
}
.sp-mini .sp-fliese { height: 112px; border-radius: 14px; }
/* Spiel-Logos (Basisbild + Animations-Ebene aus js/kachel-anim.js) */
.start .sp-fliese .kachel-anim, .start .sp-fliese > .kachel-bild { width: 124px; max-width: none; }
.start .sp-fliese .kachel-anim.anim-flagguessr { width: 162px; }
.start .sp-fliese .kachel-anim.anim-borderline { width: 180px; }
.start .sp-mini .sp-fliese .kachel-anim, .start .sp-mini .sp-fliese > .kachel-bild { width: 80px; }
.start .sp-mini .sp-fliese .kachel-anim.anim-crow, .start .sp-mini .sp-fliese .kachel-anim.anim-borderline { width: 112px; }
.start .kachel-anim .kachel-bild { width: 100%; max-width: none; vertical-align: top; }
.start .kachel-bild { object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .3)); }
:root[data-theme="light"] .start .kachel-bild { filter: drop-shadow(0 4px 8px rgba(120, 80, 0, .14)); }
.kachel-glyph { font-size: 3rem; }
.kachel-anim { transition: opacity .28s ease; }
.kachel-anim.ausblenden { opacity: 0; }

.kachel-titel { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; line-height: 1.15; margin: 14px 4px 0; }
.kachel-text { display: block; color: var(--ink-muted); margin: 2px 4px 16px; line-height: 1.4; }
.sp-mini .kachel-titel { font-size: 1rem; margin: 10px 0 0; }
.sp-mini .kachel-text { font-size: .8rem; margin: 2px 0 0; line-height: 1.3; }
.sp-karte .sp-knopf { margin-top: auto; width: 100%; }

.tages-pill {
  position: absolute; z-index: 3; top: 10px; right: 10px;
  padding: 3px 10px; border-radius: 9px;
  font-family: var(--font-display); font-weight: 700; font-size: .75rem; line-height: 1.4; font-variant-numeric: tabular-nums;
  background: var(--c); color: var(--knopf-ink); box-shadow: 0 3px 0 var(--ce);
}
.tages-pill.fertig { background: #4ade80; box-shadow: 0 3px 0 #1f9d4c; }
.sp-mini .tages-pill { top: 7px; right: 7px; font-size: .7rem; padding: 2px 8px; }
.kachel-bald { opacity: .55; pointer-events: none; }

/* ---------- 3. Weekly + Fakt ---------- */
.sp-reihe { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; }
.sp-weekly, .sp-fakt { color: inherit; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; }
.sp-weekly:hover, .sp-fakt:hover { transform: translateY(-3px); }
.sp-weekly:active, .sp-fakt:active { transform: translateY(4px); }
.sp-weekly:focus-visible, .sp-fakt:focus-visible { outline: none; box-shadow: 0 6px 0 var(--kante), 0 0 0 4px color-mix(in srgb, var(--amber) 45%, transparent); }
.sp-weekly {
  display: flex; align-items: center; gap: 22px; padding: 20px 24px; color: #f6f4ff;
  background: linear-gradient(135deg, #231d4a, #2d2266); border-color: #4a3d8f; box-shadow: 0 6px 0 #120d2e;
}
.sp-weekly img { width: 150px; flex: none; }
.sp-weekly .sp-lbl { color: #ffd45e; }
.sp-weekly h3 { margin: 3px 0 4px; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; line-height: 1.2; }
.sp-weekly p { margin: 0 0 14px; color: #b8b3dd; font-variant-numeric: tabular-nums; }
.sp-weekly .sp-knopf.leise { background: rgba(255, 255, 255, .08); color: #f6f4ff; border-color: #4a3d8f; box-shadow: 0 5px 0 #120d2e; }
/* Dunkelmodus: Goldrahmen mit langsamem Lichtschimmer — hebt die Weekly als „Event“ hervor */
:root:not([data-theme="light"]) .sp-weekly {
  position: relative; isolation: isolate; overflow: hidden;
  border: 2px solid transparent;
  background:
    linear-gradient(135deg, #231d4a, #2d2266) padding-box,
    linear-gradient(#ffd45e, #ffd45e) border-box;          /* Ring im Gelb der Überschrift */
  box-shadow: 0 6px 0 #8a5a00, 0 0 28px rgba(255, 196, 61, .18);
}
:root:not([data-theme="light"]) .sp-weekly::after {        /* Schimmer, der langsam über die Karte zieht */
  content: ""; position: absolute; inset: -40% auto -40% -30%; width: 30%; z-index: -1; transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 220, 120, .12), transparent);
  animation: sp-schimmer 6s ease-in-out infinite;
}
@keyframes sp-schimmer { 0%, 30% { left: -30%; } 70%, 100% { left: 120%; } }
:root:not([data-theme="light"]) .sp-weekly .sp-lbl::before { content: "★ "; }
:root:not([data-theme="light"]) .sp-weekly img { filter: drop-shadow(0 0 14px rgba(255, 190, 60, .4)); }
@media (prefers-reduced-motion: reduce) { .sp-weekly::after { animation: none !important; display: none; } }
/* Hellmodus: warmer Sonnenaufgang statt Nacht — hebt sich durch Farbe ab */
:root[data-theme="light"] .sp-weekly {
  color: #2a2140;
  background:
    radial-gradient(60% 90% at 18% 50%, rgba(255, 196, 61, .42), transparent 70%),
    linear-gradient(120deg, #fff6e2 0%, #fde3b8 100%);
  border-color: #efc777; box-shadow: 0 6px 0 #e2b85e;
}
.sp-weekly .wk-bild-hell { display: none; }
:root[data-theme="light"] .sp-weekly .wk-bild-dunkel { display: none; }
:root[data-theme="light"] .sp-weekly .wk-bild-hell { display: block; filter: drop-shadow(0 8px 14px rgba(140, 90, 20, .2)); }
:root[data-theme="light"] .sp-weekly .sp-lbl { color: #a86a00; }
:root[data-theme="light"] .sp-weekly p { color: #7b6a55; }
:root[data-theme="light"] .sp-weekly .sp-knopf.leise { background: rgba(255, 255, 255, .7); color: #2a2140; border-color: #e7c27a; box-shadow: 0 5px 0 #e2b85e; }
.sp-fakt { position: relative; overflow: hidden; isolation: isolate; display: flex; gap: 14px; padding: 22px 142px 22px 24px; min-height: 168px; }
@media (min-width: 561px) { .sp-fakt .sp-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
.sp-birne svg { width: 24px; height: 24px; }
/* Drehende Erde: geht unten rechts wie ein Planet über dem Kartenrand auf, ein Glühbirnen-Mond umkreist sie */
.sp-erde { position: absolute; right: -46px; bottom: -56px; width: 178px; height: 178px; z-index: -1; pointer-events: none;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.sp-erde-glow { position: absolute; inset: -22%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sky) 32%, transparent) 36%, transparent 68%); opacity: .5; }
:root:not([data-theme="light"]) .sp-erde-glow { opacity: .85; }
.sp-erde-kugel { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; filter: drop-shadow(0 10px 18px rgba(20, 60, 120, .28)); }
.sp-bahn { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sp-bahn path { fill: none; stroke: color-mix(in srgb, var(--amber) 60%, transparent); stroke-width: 1.6; stroke-dasharray: 4 5; }
.sp-bahn-hinten { z-index: 0; opacity: .55; }
.sp-bahn-vorne { z-index: 2; }
.sp-mond { position: absolute; left: 0; top: 0; z-index: 3; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--amber) 32%, var(--stein)); color: #d69a00; will-change: transform;
  box-shadow: 0 3px 0 color-mix(in srgb, #c48a00 55%, transparent), 0 0 14px color-mix(in srgb, var(--amber) 55%, transparent); }
.sp-mond.hinten { z-index: 0; filter: brightness(.8); }
.sp-mond svg { width: 17px; height: 17px; }
.sp-fakt.erde-schwung .sp-erde { transform: translate(-8px, -12px) scale(1.06); }
.sp-fakt.verdeckt .sp-mond { animation: sp-blinken 1.6s ease-in-out infinite; }
@keyframes sp-blinken { 50% { box-shadow: 0 3px 0 color-mix(in srgb, #c48a00 55%, transparent), 0 0 26px var(--amber); } }
.sp-fakt.ohne-erde .sp-erde { display: none; }
.sp-fakt.ohne-erde { padding-right: 24px; }
.sp-fakt p { margin: 6px 0 0; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sp-fakt > div { flex: 1; min-width: 0; }
.sp-mehr svg { width: 1em; height: 1em; }
.sp-fakt .sp-mehr { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-weight: 700; color: var(--ink-muted); font-size: .9rem; }
.sp-fakt.verdeckt p { color: var(--ink-muted); }

.start .fuss { border-top: 0; }
.leer { grid-column: 1 / -1; margin: 0; color: var(--ink-muted); text-align: center; }

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
  .sp-heute { grid-template-columns: 1fr 1fr; row-gap: 20px; }
  .sp-heute .sp-weiter { grid-column: 1 / -1; border-left: 0; margin-left: 0; padding-left: 0; border-top: 2px solid var(--line); padding-top: 18px; }
  .sp-uebung { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Handy ---------- */
@media (max-width: 560px) {
  .sp-fakt { padding-right: 88px; min-height: 150px; }
  .sp-erde { width: 128px; height: 128px; right: -38px; bottom: -40px; }
  .sp-mond { width: 26px; height: 26px; }
  .sp { padding: 10px 16px 28px; gap: 28px; }
  .sp-heute { grid-template-columns: 1fr; padding: 18px; row-gap: 16px; }
  .sp-heute > * + * { border-left: 0; margin-left: 0; padding-left: 0; border-top: 2px solid var(--line); padding-top: 16px; }
  .sp-heute .sp-serie { display: none; }          /* Streak steht am Handy als Chip in der Kopfzeile */
  .sp-gross { font-size: 1.75rem; margin-bottom: 12px; }
  .sp-knoten { width: 76px; }
  .sp-titel { font-size: 1.3rem; }
  .sp-dailies { grid-template-columns: 1fr; gap: 16px; }
  .sp-karte { display: grid; grid-template-columns: 92px 1fr; column-gap: 14px; padding: 12px; }
  .sp-karte .sp-fliese { height: 92px; grid-row: 1 / 4; }
  .start .sp-karte .sp-fliese .kachel-anim, .start .sp-karte .sp-fliese > .kachel-bild { width: 66px; }
  .start .sp-karte .sp-fliese .kachel-anim.anim-flagguessr { width: 80px; }
  .start .sp-karte .sp-fliese .kachel-anim.anim-borderline { width: 124px; }
  .sp-karte .tages-pill { display: none; }        /* Status steht im Knopf */
  .sp-karte .kachel-titel { font-size: 1.15rem; margin: 2px 0 0; }
  .sp-karte .kachel-text { font-size: .85rem; margin: 0 0 10px; }
  .sp-karte .sp-knopf { grid-column: 2; padding: 9px 14px; font-size: .95rem; }
  .sp-karte .sp-knopf.leise { padding: 7px 12px; }
  .sp-reihe { grid-template-columns: 1fr; }
  .sp-weekly { flex-direction: column; align-items: flex-start; gap: 12px; }
  .sp-weekly img { width: 120px; }
  .sp-uebung { grid-template-columns: 1fr 1fr; gap: 14px; }
  .sp-uebung > .kachel:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .start .fuss { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .start .kachel, .sp-knopf, .sp-weekly, .sp-fakt, .sp-knoten i { transition: none; }
  .sp-mond { animation: none !important; }
  .sp-erde { transition: none; }
}