/* Weekly Game — As The Crow Flies · Survival.
   Karte, Eingabe und Ergebniskarte kommen aus games/as-the-crow-flies/style.css;
   hier: Seitenrahmen, Hero (dunkel: „Nachtflug“, hell: „Morgenflug“), Lebensleiste, Ende. */

[hidden] { display: none !important; }
* { box-sizing: border-box; }

.wk { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 26px 24px 48px; }

/* Knöpfe (game-base.css wird hier nicht geladen) */
.btn {
  font: inherit; font-weight: 700; cursor: pointer; padding: 12px 20px;
  border-radius: var(--radius-sm); border: none; background: var(--gold); color: #1e1b34;
  transition: filter .14s ease, transform .14s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 55%, transparent); }
.btn.btn-leise { background: var(--bg-panel); color: var(--ink); border: 1px solid var(--line); }

/* ---------- Hero: Nachthimmel mit goldenem Schein ---------- */
.wk-hero {
  --h-ink: #f3f1ff; --h-muted: #b8b3dd;
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 24px;
  padding: clamp(24px, 4vw, 44px);
  border-radius: calc(var(--radius) + 10px);
  color: var(--h-ink);
  background:
    radial-gradient(55% 70% at 78% 40%, rgba(255, 200, 61, .22), transparent 65%),
    radial-gradient(70% 80% at 10% 110%, rgba(201, 150, 107, .28), transparent 60%),
    linear-gradient(160deg, #241f4a 0%, #15122c 70%);
  border: 1px solid rgba(255, 200, 61, .35);
  box-shadow: 0 24px 60px rgba(10, 8, 30, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
}
:root[data-theme="light"] .wk-hero { box-shadow: 0 18px 46px rgba(60, 45, 20, .22); }
.wk-sterne {
  position: absolute; inset: 0; z-index: -1; opacity: .8; pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 28% 70%, #fff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 46% 14%, #ffe9a8 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 62% 82%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 74% 18%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 88% 62%, #ffe9a8 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 30%, #fff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 6% 84%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 40%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 55% 55%, #fff 50%, transparent 51%);
  animation: wk-funkeln 5s ease-in-out infinite alternate;
}
@keyframes wk-funkeln { to { opacity: .45; } }
.wk-label {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 5px 13px; border-radius: 999px;
  background: rgba(255, 200, 61, .14); border: 1px solid rgba(255, 200, 61, .45);
  font-size: .85rem; font-weight: 700; color: #ffe39a;
}
.wk-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(255, 200, 61, .7); animation: wk-punkt 1.8s ease-out infinite; }
@keyframes wk-punkt { 70% { box-shadow: 0 0 0 8px rgba(255, 200, 61, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 200, 61, 0); } }
.wk-titel { margin: 0 0 12px; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.1rem, 5.4vw, 3.4rem); line-height: 1.02; }
.wk-titel-zusatz {
  display: block; font-size: .62em; letter-spacing: .14em; text-transform: uppercase;
  background: linear-gradient(90deg, #ffe08a, #ffb627 55%, #c9966b); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wk-unter { margin: 0 0 20px; color: var(--h-muted); font-size: 1.08rem; max-width: 46ch; }
.wk-unter strong { color: var(--h-ink); }
.wk-leben-gross { display: flex; align-items: baseline; gap: 10px; margin: 0 0 16px; }
.wk-leben-gross .wk-herz { font-size: 2.2rem; }
.wk-leben-gross-zahl {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 7vw, 4rem); line-height: 1;
  font-variant-numeric: tabular-nums; color: #ffd45e; text-shadow: 0 0 24px rgba(255, 200, 61, .45);
}
.wk-leben-gross-text { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--h-muted); }
.wk-herz { color: #ff5d6c; display: inline-block; animation: wk-herzschlag 1.6s ease-in-out infinite; }
@keyframes wk-herzschlag { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(.96); } 45% { transform: scale(1.08); } }
.wk-regeln { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; }
.wk-regeln li { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); font-size: .9rem; color: var(--h-muted); }
.wk-regeln strong { color: var(--h-ink); }
.wk-start-btn {
  font-size: 1.15rem; padding: 15px 34px; border-radius: 14px;
  background: linear-gradient(180deg, #ffd96b, #ffb627); color: #241a00;
  box-shadow: 0 8px 26px rgba(255, 182, 39, .35), inset 0 -2px 0 rgba(0, 0, 0, .15);
}
.wk-start-btn:hover { transform: translateY(-1px); }
.wk-start-info { margin: 12px 0 0; color: var(--h-muted); }
.wk-start-info strong { color: #ffd45e; }
.wk-reset { margin: 16px 0 0; font-size: .88rem; color: var(--h-muted); }
.wk-reset strong { color: var(--h-ink); font-variant-numeric: tabular-nums; }
.wk-hero-bild { position: relative; display: grid; place-items: center; }
.wk-hero-bild::before {
  content: ""; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 61, .25), transparent 65%); filter: blur(6px);
}
.wk-hero-bild img { position: relative; width: 100%; height: auto; animation: wk-flug 7s ease-in-out infinite; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35)); }
@keyframes wk-flug { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(6px, -12px) rotate(-1.5deg); } }

/* ---------- Hero im Hellmodus: „Morgenflug“ (warmes Creme, goldene Sonne) ---------- */
:root[data-theme="light"] .wk-hero {
  --h-ink: #2a2140; --h-muted: #7b6a55;
  background:
    radial-gradient(55% 70% at 78% 40%, rgba(255, 196, 61, .38), transparent 65%),
    radial-gradient(70% 80% at 8% 110%, rgba(236, 160, 110, .28), transparent 60%),
    linear-gradient(160deg, #fffaf0 0%, #fcecd0 100%);
  border: 1px solid rgba(214, 150, 30, .42);
  box-shadow: 0 18px 46px rgba(120, 80, 20, .16), inset 0 1px 0 #fff;
}
:root[data-theme="light"] .wk-sterne { opacity: .9; animation: none;
  background-image:
    radial-gradient(2px 2px at 12% 22%, rgba(230,160,30,.55) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 46% 14%, rgba(230,160,30,.5) 50%, transparent 51%),
    radial-gradient(2px 2px at 74% 18%, rgba(230,160,30,.45) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 88% 62%, rgba(230,160,30,.45) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 6% 84%, rgba(230,160,30,.4) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 55% 55%, rgba(230,160,30,.35) 50%, transparent 51%); }
:root[data-theme="light"] .wk-label { background: rgba(240, 180, 41, .16); border-color: rgba(214, 150, 30, .5); color: #8a5800; }
:root[data-theme="light"] .wk-titel-zusatz { background: linear-gradient(90deg, #e9a400, #d47e00 55%, #a8683a); -webkit-background-clip: text; background-clip: text; }
:root[data-theme="light"] .wk-leben-gross-zahl { color: #d08900; text-shadow: 0 0 22px rgba(255, 190, 60, .35); }
:root[data-theme="light"] .wk-regeln li { background: rgba(255, 255, 255, .7); border-color: rgba(150, 110, 50, .22); }
:root[data-theme="light"] .wk-start-info strong, :root[data-theme="light"] .wk-reset strong { color: #8a5800; }
:root[data-theme="light"] .wk-hero-bild::before { background: radial-gradient(circle, rgba(255, 190, 60, .45), transparent 65%); }
.wk-bild-hell { display: none; }
:root[data-theme="light"] .wk-bild-dunkel { display: none; }
:root[data-theme="light"] .wk-bild-hell { display: block; }
:root[data-theme="light"] .wk-hero-bild img { filter: drop-shadow(0 16px 24px rgba(120, 80, 20, .22)); }
:root[data-theme="light"] .wk-ende-zahl strong { background: linear-gradient(180deg, #f2b632, #d07a00); -webkit-background-clip: text; background-clip: text; filter: none; }
:root[data-theme="light"] .wk-ende-stats li { background: rgba(255, 255, 255, .7); border-color: rgba(150, 110, 50, .2); }
:root[data-theme="light"] .wk-ende-best { background: rgba(240, 180, 41, .16); border-color: rgba(214, 150, 30, .5); color: #8a5800; }
:root[data-theme="light"] .btn.wk-train-btn { background: rgba(240, 180, 41, .12); color: #8a5800; border-color: rgba(214, 150, 30, .6); }
:root[data-theme="light"] .wk-teilen-ok { color: #0f8a60; }


/* ---------- Spiel: Kopfzeile mit Lebensleiste ---------- */
.wk-hud { margin-bottom: 14px; }
.wk-hud-zeile { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; color: var(--ink-muted); }
.wk-runde {
  padding: 3px 12px; border-radius: 999px; font-weight: 700; color: var(--ink);
  background: var(--bg-panel); border: 1px solid var(--line); font-variant-numeric: tabular-nums;
}
.wk-leben {
  --farbe: var(--gold);
  position: relative; display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); align-items: center; gap: 0 10px;
  padding: 10px 16px; border-radius: var(--radius);
  background: linear-gradient(100deg, color-mix(in srgb, var(--farbe) 14%, var(--bg-panel)), var(--bg-panel) 70%);
  border: 1px solid color-mix(in srgb, var(--farbe) 50%, var(--line));
  transition: border-color .4s ease;
}
.wk-leben.halb { --farbe: #fb923c; }
.wk-leben.knapp { --farbe: var(--coral); animation: wk-knapp 1.2s ease-in-out infinite; }
@keyframes wk-knapp { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--coral) 30%, transparent); } }
.wk-leben .wk-herz { font-size: 1.5rem; }
.wk-leben-zahl {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.1rem); line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--farbe);
}
:root[data-theme="light"] .wk-leben-zahl { color: color-mix(in srgb, var(--farbe) 70%, #000); }
.wk-leben-text { justify-self: start; font-weight: 700; color: var(--ink-muted); }
.wk-balken { height: 14px; border-radius: 999px; background: color-mix(in srgb, var(--ink-muted) 20%, transparent); overflow: hidden; }
.wk-balken i {
  display: block; height: 100%; width: 100%; border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--farbe) 70%, #fff) 0%, var(--farbe) 60%, color-mix(in srgb, var(--farbe) 80%, #000) 100%);
  box-shadow: 0 0 12px color-mix(in srgb, var(--farbe) 60%, transparent);
}
.wk-minus-ort { position: absolute; left: 150px; top: -4px; pointer-events: none; z-index: 2; }
.wk-minus {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--coral);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  animation: wk-minus 1.6s ease-out forwards;
}
.wk-minus.gross { font-size: 2rem; }
@keyframes wk-minus { 0% { opacity: 0; transform: translateY(8px) scale(.9); } 15% { opacity: 1; transform: translateY(0) scale(1.08); } 100% { opacity: 0; transform: translateY(-22px) scale(1); } }
.wk-hud.getroffen .wk-leben { animation: wk-wackeln .5s ease-in-out; }
@keyframes wk-wackeln { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

/* „Out of lives“ über der Karte */
.wk-aus {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center;
  background: radial-gradient(circle, rgba(21, 18, 42, .55), rgba(21, 18, 42, .85));
  color: #f3f1ff; animation: wk-aus .6s ease-out; z-index: 3;
}
.wk-aus strong { font-family: var(--font-display); font-size: clamp(2rem, 6vw, 3.4rem); letter-spacing: .04em; text-transform: uppercase; color: #ff7a85; text-shadow: 0 0 30px rgba(255, 90, 100, .5); }
.wk-aus span { font-weight: 700; color: #d9d5f5; }
.wk-aus-herz { font-size: 2.6rem; filter: grayscale(.6); animation: wk-zerbrechen 1s ease-out; }
@keyframes wk-aus { from { opacity: 0; } }
@keyframes wk-zerbrechen { 0% { transform: scale(1.4); opacity: 0; } 60% { transform: scale(.9); } 100% { transform: scale(1); } }

/* ---------- Ende ---------- */
.wk-ende { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 6px; }
.wk-ende .wk-label { margin-bottom: 6px; }
.wk-ende-titel { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 5vw, 2.6rem); }
.wk-ende-zahl { margin: 4px 0 0; line-height: 1; }
.wk-ende-zahl strong {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(4.5rem, 14vw, 7.5rem); line-height: 1;
  background: linear-gradient(180deg, #ffe08a, #ffb627); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 182, 39, .35));
}
.wk-ende-zahl-text { margin: 0 0 14px; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: var(--h-muted); }
.wk-ende-stats { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: min(100%, 720px); margin: 0 0 12px; padding: 0; }
.wk-ende-stats li {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
}
.wk-ende-stats span { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--h-muted); }
.wk-ende-stats strong { font-family: var(--font-display); font-size: 1.3rem; color: var(--h-ink); }
.wk-ende-stats small { color: var(--h-muted); font-size: .8rem; }
.wk-ende-best { margin: 0 0 8px; padding: 4px 14px; border-radius: 999px; background: rgba(255, 200, 61, .14); border: 1px solid rgba(255, 200, 61, .45); font-weight: 700; color: #ffe39a; }
.wk-ende-aktionen { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
/* Zweitknopf: führt zum freien As The Crow Flies (Fundamentals) zum Üben */
.btn.wk-train-btn, :root[data-theme="light"] .btn.wk-train-btn {
  font-size: 1.15rem; padding: 13.5px 30px; border-radius: 14px; text-decoration: none;
  background: rgba(255, 212, 94, .08); color: #ffd45e;
  border: 1.5px solid rgba(255, 212, 94, .55); box-shadow: none;
}
.wk-train-btn:hover { background: rgba(255, 212, 94, .16); border-color: #ffd45e; transform: translateY(-1px); }
.wk-teilen-ok { flex-basis: 100%; text-align: center; font-weight: 700; color: #7ef0c6; }  /* eigene Zeile unter den Knöpfen */
.wk-teilen-ok:empty { display: none; }

.wk-log-titel { margin: 28px 0 10px; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--ink-muted); }
.wk-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wk-log li {
  display: grid; grid-template-columns: 2em minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: var(--radius-sm); background: var(--bg-panel); border: 1px solid var(--line);
}
.wk-log li.tot { border-color: color-mix(in srgb, var(--coral) 55%, var(--line)); background: color-mix(in srgb, var(--coral) 8%, var(--bg-panel)); }
.wk-log img { width: 24px; height: 18px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); vertical-align: -3px; }
.wl-nr { text-align: right; color: var(--ink-muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.wl-paar { line-height: 1.5; min-width: 0; }
.wl-werte { color: var(--ink-muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.wl-verlust { font-weight: 800; min-width: 4.5em; text-align: right; font-variant-numeric: tabular-nums; }
.wl-verlust.gut { color: var(--mint); } .wl-verlust.mittel { color: var(--amber); } .wl-verlust.orange { color: #fb923c; } .wl-verlust.schlecht { color: var(--coral); }
:root[data-theme="light"] .wl-verlust.mittel { color: #b07800; }
.wl-rest { min-width: 5.5em; text-align: right; color: var(--ink-muted); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Handy ---------- */
@media (max-width: 820px) {
  .wk-hero { grid-template-columns: 1fr; }
  .wk-hero-bild { order: -1; max-width: 340px; justify-self: center; margin-bottom: -6px; }
  .wk-ende-stats { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .wk { padding: 16px 14px 32px; }
  .wk-hero { padding: 22px 18px; }
  .wk-leben { grid-template-columns: auto auto minmax(0, 1fr); row-gap: 8px; padding: 10px 12px; }
  .wk-balken { grid-column: 1 / -1; }
  .wk-log li { grid-template-columns: 1.6em minmax(0, 1fr) auto; row-gap: 2px; }
  .wl-werte { grid-column: 2 / -1; order: 4; }
  .wl-rest { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wk-sterne, .wk-punkt, .wk-herz, .wk-hero-bild img, .wk-leben.knapp, .wk-minus, .wk-aus, .wk-aus-herz { animation: none; }
}

/* ============================================================
   Leaderboard (weekly/leaderboard.js): neben Start und Ende, zusammen zentriert;
   im Spiel ausgeblendet. Farben wie der Hero (dunkel: Nacht, hell: Morgen).
   ============================================================ */
.wk.mit-lb {
  max-width: 1380px; display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 24px;
  align-items: stretch; align-content: start;
}
.wk.mit-lb > .wk-screen { grid-column: 1; grid-row: 1; min-width: 0; }
.wk.mit-lb.spielt { grid-template-columns: minmax(0, 1fr); max-width: 1120px; }
.wk.mit-lb.spielt .lb { display: none; }
.wk.mit-lb #screen-start:not([hidden]) { display: flex; flex-direction: column; }
.wk.mit-lb #screen-start .wk-hero { flex: 1; }
@media (min-width: 1001px) {
  .wk.mit-lb .wk-hero:not(.wk-ende) { grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr); }
  .wk.mit-lb .wk-titel { font-size: clamp(2.1rem, 4.2vw, 3.1rem); }
  .wk.mit-lb.lb-ende .lb { position: sticky; top: 16px; align-self: start; }
  /* Start: Hero und Leaderboard reichen bis fast an den unteren Bildschirmrand */
  .wk.mit-lb #screen-start .wk-hero { min-height: max(620px, calc(100vh - 150px)); }
}

.wk.mit-lb .lb { grid-column: 2; grid-row: 1; align-self: stretch; }
/* Aussehen des Leaderboards selbst: css/leaderboard.css (auch für die Daily-Leaderboards) */

/* schmalere Bildschirme: Leaderboard unter dem Spiel */
@media (max-width: 1000px) {
  .wk.mit-lb { grid-template-columns: minmax(0, 1fr); max-width: 1120px; }
  .wk.mit-lb > .wk-screen { grid-row: auto; }
  .wk.mit-lb .lb { grid-column: 1; grid-row: auto; }
}