/* smp.winku.de — Titelspiele „Wink Run" (Startseite), „Hochstapler" (SMP Arcade), „Erzrausch" (Erfolge) und „Schnäppchenjagd"
   (ScamRadar): alles, was im HTML um die Leinwand liegt — der Hinweis auf dem Hügel, die Anzeige, Pause, der Ende-Schirm,
   die Tasten fürs Telefon. Gezeichnet wird auf der Leinwand (js/spielbuehne.js, js/spawnlauf.js, js/goldturm.js,
   js/erzrausch.js, js/schnaeppchen.js). Nur auf den Seiten mit Titelspiel geladen (huelle: stile). */

/* Der leere Himmel ist klickbar — Knöpfe, Texte und das Logo behalten ihren Zeiger */
.himmel[data-klickbar]:not([data-spiel]) { cursor: pointer; }
.himmel[data-klickbar] .titel-bild-rahmen, .himmel[data-klickbar] .titel-unter, .himmel[data-klickbar] .untertitel,
.himmel[data-klickbar] .menue, .himmel[data-klickbar] .titel-fuss span,
.himmel[data-klickbar] .held-zeile .text, .himmel[data-klickbar] .steckbrief, .himmel[data-klickbar] .radar-logo { cursor: auto; }

/* ── Hinweis: Figur (Spawn) bzw. Spielautomat (Arcade) auf dem Hügel, mit Sprechblase ──────────────────────────────── */
.spiel-hinweis {
  all: unset; position: absolute; z-index: 1; inset: auto auto 44px 12%; display: grid; justify-items: start; cursor: pointer;
  transform-origin: 30% 100%; transition: opacity .35s, scale .35s cubic-bezier(.34, 1.56, .64, 1), translate .35s;
}
.spiel-hinweis[data-bild="automat"] { inset: auto 12% 44px auto; justify-items: end; transform-origin: 70% 100%; }
.spiel-hinweis-bild { display: block; image-rendering: pixelated; filter: drop-shadow(0 4px 0 rgb(0 0 0 / .25)); transition: translate .2s; }
.spiel-hinweis:hover .spiel-hinweis-bild, .spiel-hinweis:focus-visible .spiel-hinweis-bild { translate: 0 -6px; }
.spiel-hinweis:focus-visible { outline: 2px dashed var(--mc-gelb); outline-offset: 8px; }
.spiel-hinweis.weg { opacity: 0; scale: .3; translate: 0 24px; pointer-events: none; }
.spiel-blase {
  position: relative; margin: 0 0 22px 22px; padding: 5px 10px 7px; white-space: nowrap;
  font: 400 20px/24px var(--mc-schrift); color: #1b1b2b; background: #fff; box-shadow: 0 0 0 2px #0c0c14, 4px 4px 0 2px rgb(0 0 0 / .22);
}
/* Denkblasen-Punkte zur Figur hin, eckig wie alles hier */
.spiel-blase::before, .spiel-blase::after { content: ""; position: absolute; background: inherit; box-shadow: 0 0 0 2px #0c0c14; }
.spiel-blase::before { inset: calc(100% + 6px) auto auto 10px; inline-size: 10px; block-size: 10px; }
.spiel-blase::after { inset: calc(100% + 20px) auto auto 2px; inline-size: 6px; block-size: 6px; }
.spiel-hinweis[data-bild="automat"] .spiel-blase { margin: 0 22px 22px 0; color: var(--mc-gold); background: #0b1024; box-shadow: 0 0 0 2px var(--mc-gold), 4px 4px 0 2px rgb(0 0 0 / .3); letter-spacing: 2px; }
.spiel-hinweis[data-bild="automat"] .spiel-blase::before { inset: calc(100% + 6px) 10px auto auto; box-shadow: 0 0 0 2px var(--mc-gold); }
.spiel-hinweis[data-bild="automat"] .spiel-blase::after { inset: calc(100% + 20px) 2px auto auto; box-shadow: 0 0 0 2px var(--mc-gold); }
/* Erzrausch (Erfolge): Steinblock rechts auf dem Hügel, Blase wie ein Schild aus Tiefenschiefer mit Diamant-Schrift */
.spiel-hinweis[data-bild="erz"] { inset: auto 12% 44px auto; justify-items: end; transform-origin: 70% 100%; }
.spiel-hinweis[data-bild="erz"] .spiel-blase { margin: 0 22px 22px 0; color: #7df9ff; background: #22222b; box-shadow: 0 0 0 2px #0c0c14, 4px 4px 0 2px rgb(0 0 0 / .3); }
.spiel-hinweis[data-bild="erz"] .spiel-blase::before { inset: calc(100% + 6px) 10px auto auto; }
.spiel-hinweis[data-bild="erz"] .spiel-blase::after { inset: calc(100% + 20px) 2px auto auto; }
.spiel-hinweis[data-eng][data-bild="erz"] { inset: auto 14px 40px auto; justify-items: end; transform-origin: 80% 100%; }
.spiel-hinweis[data-eng][data-bild="erz"] .spiel-blase { margin: 0 22px 22px 0; }
.spiel-hinweis[data-eng][data-bild="erz"] .spiel-blase::before { inset: auto -14px 2px auto; }
.spiel-hinweis[data-eng][data-bild="erz"] .spiel-blase::after { inset: auto -24px -6px auto; }
@media (prefers-reduced-motion: no-preference) {
  .spiel-hinweis:not(.weg) { animation: hinweis-rein .7s 1.4s cubic-bezier(.34, 1.56, .64, 1) both; }
  .spiel-blase { animation: blase-schweben 2.6s ease-in-out infinite; }
  .spiel-blase.neu { animation: blase-neu .45s cubic-bezier(.34, 1.56, .64, 1), blase-schweben 2.6s .45s ease-in-out infinite; }
  .spiel-hinweis[data-bild="automat"] .spiel-blase { animation: blase-schweben 2.6s ease-in-out infinite, blinken 1.2s steps(2) infinite; }
}
@keyframes hinweis-rein { from { opacity: 0; translate: 0 30px; scale: .6; } }
@keyframes blase-schweben { 50% { translate: 0 -5px; } }
@keyframes blase-neu { from { scale: .5; opacity: 0; } }
@keyframes blinken { 50% { opacity: .15; } }
/* Der Hinweis liegt nie über einem Knopf oder Text (ein Klick dort würde sonst das Spiel starten statt den Knopf zu drücken).
   js/spielbuehne.js misst nach: stößt er an, rückt er eng in die Ecke (data-eng: Figur und Blase nebeneinander), stößt er dann
   noch an, bleibt nur die Figur (data-klein). Auf dem Telefon bekommt der Himmel unten dafür etwas mehr Platz. */
.spiel-hinweis[data-eng] { inset: auto auto 40px 14px; grid-auto-flow: column; align-items: end; justify-items: start; transform-origin: 20% 100%; }
.spiel-hinweis[data-eng][data-bild="automat"] { inset: auto 14px 40px auto; justify-items: end; transform-origin: 80% 100%; }
.spiel-hinweis[data-eng][data-bild="figur"] .spiel-hinweis-bild { order: -1; }
.spiel-hinweis[data-eng] .spiel-blase { margin: 0 0 34px 22px; }
.spiel-hinweis[data-eng][data-bild="automat"] .spiel-blase { margin: 0 22px 22px 0; }
.spiel-hinweis[data-eng] .spiel-blase::before { inset: auto auto 2px -14px; inline-size: 8px; block-size: 8px; }
.spiel-hinweis[data-eng] .spiel-blase::after { inset: auto auto -6px -24px; inline-size: 5px; block-size: 5px; }
.spiel-hinweis[data-eng][data-bild="automat"] .spiel-blase::before { inset: auto -14px 2px auto; }
.spiel-hinweis[data-eng][data-bild="automat"] .spiel-blase::after { inset: auto -24px -6px auto; }
.spiel-hinweis[data-klein] .spiel-blase { display: none; }
@media (max-width: 600px) {
  .himmel[data-klickbar] .titel { padding-block-end: 104px; }
  .spiel-blase, .spiel-hinweis[data-bild="automat"] .spiel-blase { padding: 4px 8px 5px; font-size: 10px; line-height: 12px; }
}

/* ── Während des Spiels: Titel weg, Hügel und Wolken zeichnet die Leinwand (Wink Run), die Grasnarbe läuft mit ─────── */
.himmel .titel { transition: opacity .45s .15s, translate .45s .15s, visibility 0s; }
.himmel[data-spiel] .titel { opacity: 0; visibility: hidden; translate: 0 -24px; transition: opacity .3s, translate .3s, visibility 0s .3s; }
.himmel[data-spiel] .titel-fuss span { opacity: 0; }
.himmel .titel-fuss span { transition: opacity .3s; }
.himmel[data-titelspiel="lauf"][data-spiel] .huegel, .himmel[data-titelspiel="lauf"][data-spiel] .wolke { opacity: 0; }
.himmel[data-titelspiel="lauf"] .huegel, .himmel[data-titelspiel="lauf"] .wolke { transition: opacity .4s; }
/* Die ScamRadar-Seite hat statt des Titels eine Heldenzeile; die Schnäppchenjagd malt ihren Boden selbst, der Hügel weicht.
   Unten bleibt Platz für den Hinweis — sonst läge er auf niedrigen Fenstern auf den Knöpfen (Spieltest 1024 × 700). */
.himmel[data-titelspiel="fang"][data-klickbar] .held-zeile { padding-block-end: 72px; }
/* Die Mod-Seite (/mod) hat ihre eigene Heldenzeile (.mf-held-zeile: Text-Kasten und Logo mit Ring) — sie geht genauso weg
   (Faddi 28.09.2026: „Elemente werden während des Spiels nicht korrekt ausgeblendet"). */
.himmel .held-zeile, .himmel .mf-held-zeile { transition: opacity .45s .15s, translate .45s .15s, visibility 0s; }
.himmel[data-spiel] .held-zeile, .himmel[data-spiel] .mf-held-zeile { opacity: 0; visibility: hidden; translate: 0 -24px; transition: opacity .3s, translate .3s, visibility 0s .3s; }
.himmel[data-titelspiel="fang"] .huegel { transition: opacity .4s; }
.himmel[data-titelspiel="fang"][data-spiel] .huegel { opacity: 0; }
.himmel + .grasnarbe { background-position-x: var(--gras-x, 0px); }
/* Die Leiste unten (Telefon, smp.css .nv-unten) würde die Laufbahn verdecken — sie taucht ab, solange gespielt wird;
   Toasts rutschen unter die Anzeige */
.nv-unten { transition: translate .35s; }
[data-titelspiel-laeuft] .nv-unten { translate: 0 130%; }
[data-titelspiel-laeuft] .toasts { inset-block-start: 136px; }

.spiel { position: absolute; inset: 0; z-index: 2; outline: none; }
.spiel[hidden] { display: none; }
.spiel-leinwand { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; image-rendering: pixelated; touch-action: none; cursor: pointer; }
@media (prefers-reduced-motion: no-preference) { .spiel-leinwand { animation: einblenden .5s both; } }
@keyframes einblenden { from { opacity: 0; } }

/* Anzeige oben: Name, Rekord und Punkte wie beim Dino, Ton, Beenden */
.spiel-hud {
  position: absolute; inset: var(--hud-oben, 14px) 14px auto 14px; display: flex; align-items: center; gap: 10px;
  font: 400 20px/24px var(--mc-schrift); color: #fff; text-shadow: 2px 2px 0 var(--mc-schatten); pointer-events: none;
}
.spiel-name { margin-inline-end: auto; color: var(--mc-gelb); text-shadow: 2px 2px 0 #3f3f15; }
.spiel-zahlen { display: inline-flex; gap: 14px; padding: 6px 12px; background: rgb(0 0 0 / .38); }
.spiel-rekord { color: #bdbdbd; }
.spiel-rekord:empty { display: none; }
.spiel-punkte { font-weight: 400; }
.spiel-punkte.blink { animation: blinken .15s steps(2) 6; }
.spiel-knopf {
  all: unset; pointer-events: auto; cursor: pointer; display: grid; place-items: center; min-inline-size: 36px; block-size: 36px; padding: 0 8px;
  box-sizing: border-box; font: 400 20px/1 var(--mc-schrift); color: #fff; background: rgb(0 0 0 / .38); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .22);
}
.spiel-knopf:hover, .spiel-knopf:focus-visible { background: rgb(0 0 0 / .6); color: var(--mc-gelb); }
@media (max-width: 520px) { .spiel-hud { gap: 6px; font-size: 10px; line-height: 12px; } .spiel-zahlen { gap: 8px; padding: 6px 8px; } }

/* Rangliste oben links (routen/erfolge.js): Top 5, Namen nur mit Einwilligung, sonst ??? — darunter der eigene Platz */
.spiel-rangliste {
  position: absolute; inset: calc(var(--hud-oben, 14px) + 46px) auto auto 14px; z-index: 1; display: grid; gap: 4px; min-inline-size: 190px; max-inline-size: 260px;
  padding: 8px 10px 9px; background: rgb(0 0 0 / .42); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .08); pointer-events: none;
  font: 400 20px/24px var(--mc-schrift); color: #fff; text-shadow: 2px 2px 0 var(--mc-schatten);
}
.spiel-rangliste[hidden] { display: none; }
.spiel-rangliste .rang-titel { font-weight: 400; color: var(--mc-gold); text-shadow: 2px 2px 0 #3f2a00; }
.spiel-rangliste .rang-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.spiel-rangliste li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; }
.spiel-rangliste .name { display: flex; align-items: center; gap: 5px; min-inline-size: 0; }
.spiel-rangliste .name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spiel-rangliste .rang-kopf { inline-size: 16px; block-size: 16px; flex: none; image-rendering: pixelated; }
.spiel-rangliste .rang-abzeichen { block-size: 16px; inline-size: auto; flex: none; image-rendering: pixelated; }
.spiel-rangliste li[data-du] { color: var(--mc-gelb); }
.spiel-rangliste .platz { color: #9a9a9a; }
.spiel-rangliste .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spiel-rangliste .name[data-versteckt] { color: #8a8a8a; }
.spiel-rangliste .wert { color: var(--mc-rot); }
.spiel-rangliste li[data-du] .wert { color: var(--mc-gelb); }
.spiel-rangliste .leer { display: block; color: #bdbdbd; font-size: 10px; line-height: 14px; }
.spiel-rangliste .rang-du { margin: 2px 0 0; font-size: 10px; line-height: 14px; color: #bdbdbd; }
.himmel[data-spiel="ende"] .spiel-rangliste { z-index: 3; }
@media (max-width: 600px) {
  .spiel-rangliste { min-inline-size: 0; max-inline-size: 170px; padding: 6px 8px; font-size: 10px; line-height: 14px; }
  .spiel-rangliste li:nth-child(n + 4):not([data-du]) { display: none; }
}
/* Wertung auf dem Ende-Schirm und die Einwilligung für den Namen */
.spiel-wertung { margin: 0; font: 400 20px/24px var(--mc-schrift); color: var(--mc-gelb); text-shadow: 2px 2px 0 #3f3f15; }
.spiel-ende small { max-inline-size: 30rem; color: #e8e8e8; font-size: .82rem; line-height: 1.45; text-shadow: 0 1px 4px #000; }

/* Telefon: Tippen springt bzw. setzt ab; zum Ducken eine Taste über der Laufbahn (linker Daumen) */
.spiel-tasten { display: none; }
@media (pointer: coarse) {
  .spiel-tasten { position: absolute; inset: auto auto 180px 12px; display: grid; gap: 10px; }
  .spiel-taste {
    all: unset; display: grid; place-items: center; inline-size: 64px; block-size: 64px; box-sizing: border-box; touch-action: none; user-select: none;
    -webkit-user-select: none; font: 400 30px/1 var(--mc-schrift); color: #fff; background: rgb(0 0 0 / .38); box-shadow: inset 0 0 0 3px rgb(255 255 255 / .35);
  }
  .spiel-taste:active { background: rgb(255 255 255 / .28); }
  /* Schnäppchenjagd: nach links und rechts laufen — die zwei Tasten liegen unten in den Ecken, nicht übereinander */
  .himmel[data-titelspiel="fang"] .spiel-tasten { inset: auto 12px 22px 12px; grid-auto-flow: column; justify-content: space-between; }
}

.spiel-pause { position: absolute; inset: 0; display: grid; place-content: center; gap: 10px; text-align: center; background: rgb(0 0 0 / .45); cursor: pointer; }
.spiel-pause[hidden] { display: none; }
.spiel-pause b { font: 400 40px/48px var(--mc-schrift); color: #fff; text-shadow: 4px 4px 0 var(--mc-schatten); }
.spiel-pause span { font: 400 20px/24px var(--mc-schrift); color: #d0d0d0; text-shadow: 2px 2px 0 #000; }

/* Ende: „Du bist gestorben!" wie im Spiel (roter Schleier) bzw. GAME OVER mit Countdown wie am Automaten */
.spiel-ende { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 60px 16px 24px; text-align: center; }
.spiel-ende[hidden] { display: none; }
.spiel-ende[data-art="tod"] { background: linear-gradient(180deg, rgb(110 0 0 / .42), rgb(170 0 0 / .64)); }
.spiel-ende[data-art="arcade"] { background: rgb(4 6 20 / .66); }
.spiel-ende h2 { margin: 0; font: 400 60px/66px var(--mc-schrift); color: #fff; text-shadow: 6px 6px 0 #3f0000; }
.spiel-ende[data-art="arcade"] h2 { color: var(--mc-gold); text-shadow: 6px 6px 0 #3f2a00; letter-spacing: 6px; }
.spiel-nachricht { margin: 0; max-inline-size: 36rem; color: #fff; font-size: 1.02rem; line-height: 1.6; text-shadow: 0 2px 8px #000; }
.spiel-ergebnis { margin: 0; font: 400 20px/24px var(--mc-schrift); color: #fff; text-shadow: 2px 2px 0 #3f0000; }
.spiel-ergebnis b { font-weight: 400; color: var(--mc-gelb); }
.spiel-neu { color: var(--mc-gruen); }
.spiel-knoepfe { display: grid; gap: 10px; inline-size: min(400px, 100%); margin-block-start: 6px; }
.spiel-knoepfe .mc-knopf[disabled] { opacity: .5; cursor: default; filter: grayscale(.6); }
.spiel-countdown { margin: 0; font: 400 30px/36px var(--mc-schrift); color: var(--mc-gelb); text-shadow: 3px 3px 0 #3f3f15; }
@media (prefers-reduced-motion: no-preference) {
  .spiel-ende:not([hidden]) { animation: einblenden .6s both; }
  .spiel-ende h2 { animation: ende-titel .7s cubic-bezier(.34, 1.56, .64, 1) both; }
  .spiel-neu, .spiel-countdown { animation: blinken 1s steps(2) infinite; }
}
@keyframes ende-titel { from { scale: 1.6; opacity: 0; } }
@media (max-width: 600px) { .spiel-ende h2 { font-size: 40px; line-height: 48px; } .spiel-ende[data-art="arcade"] h2 { letter-spacing: 3px; } }

/* Anleitung „So geht das Spiel" (spielbuehne.js): beim ersten Mal von selbst, danach über den „?"-Knopf.
   Sie liegt über der Leinwand und hält das Spiel an, solange sie offen ist. */
.spiel-anleitung { position: absolute; inset: 0; z-index: 4; display: grid; align-content: center; justify-items: center;
    gap: 12px; padding: 56px 16px 24px; text-align: center; background: rgb(4 6 20 / .82); overflow-y: auto; }
.spiel-anleitung h2 { margin: 0; font: 400 26px/32px var(--mc-schrift); color: var(--mc-gelb); text-shadow: 3px 3px 0 #3f2a00; }
.anleitung-ziel { margin: 0; max-inline-size: 34rem; color: #fff; font-size: 1rem; line-height: 1.6; text-shadow: 0 2px 8px #000; }
.anleitung-liste { display: grid; gap: 8px; margin: 0; padding: 0; max-inline-size: 34rem; list-style: none; text-align: start; }
.anleitung-liste li { position: relative; padding-inline-start: 22px; color: #e8e8e8; font-size: .94rem; line-height: 1.55; text-shadow: 0 2px 6px #000; }
.anleitung-liste li::before { content: ""; position: absolute; inset-block-start: .5em; inset-inline-start: 4px;
    inline-size: 8px; aspect-ratio: 1; background: var(--mc-gruen); }
.anleitung-tasten { margin: 0; max-inline-size: 34rem; color: var(--mc-gelb); font-size: .88rem; line-height: 1.5; text-shadow: 0 2px 6px #000; }
.spiel-anleitung .spiel-knoepfe { grid-auto-flow: row; }
/* Solange die Anleitung offen ist, tritt der Rest zurück — auch der Pause-Schirm darunter. */
.spiel[data-anleitung] .spiel-pause, .spiel[data-anleitung] .spiel-rangliste { display: none; }
@media (max-width: 600px) { .spiel-anleitung { padding-block-start: 48px; } .spiel-anleitung h2 { font-size: 20px; line-height: 26px; } }
@media (prefers-reduced-motion: no-preference) { .spiel-anleitung { animation: einblenden .35s both; } }