/* Reiter „Spiele“ (A-184, js/spiele-ui.js): Minispiele und Nebenschauplätze als gemalte Kacheln.
   Holz und Gold wie die Missionen, Akzente rot (fränkisch) – kein Blau. */

/* ---------- Knopf in der Menüleiste: ein Ort wie Bierreich und Missionen ---------- */
#menuBar > button[data-menu="spiele"] { order: 1; flex: 1 1 0; position: relative; font-size: 13px; padding: 7px 8px; background: linear-gradient(#8a5a32, #5c3a1e); color: var(--cream); }
#menuBar > button[data-menu="spiele"].on { background: linear-gradient(#b07a46, #7a4c26); color: #fff; }
#menuBar > button[data-menu="spiele"] .sp-marke { position: absolute; top: -5px; right: -3px; min-width: 18px; padding: 2px 4px; font-size: 11px; line-height: 12px; text-align: center;
  border: 2px solid var(--ink); pointer-events: none; z-index: 1; }
#menuBar > button[data-menu="spiele"] .sp-marke[hidden] { display: none; }
#menuBar > button[data-menu="spiele"] .sp-marke[data-k="zahl"] { background: var(--red); color: #fff; font-weight: 600; }
#menuBar > button[data-menu="spiele"] .sp-marke[data-k="neu"] { background: var(--gold); color: var(--ink); font-family: var(--pix); font-size: 7px; padding: 3px 3px 2px; animation: indNeu 1.2s ease-in-out infinite alternate; }
@media (max-width: 900px) { #menuBar > button[data-menu="spiele"] { padding: 9px 4px; } }

/* ---------- Menükopf: „← Spiele“ in Kerwa-Karte, Garten, Album ---------- */
.menu-head { gap: 10px; }
.menu-head h2 { flex: 1; min-width: 0; }
#menuBack { flex: 0 0 auto; padding: 4px 9px; font-size: 13px; color: var(--gold); background: linear-gradient(#5c3a1e, #3a2212); border: 2px solid var(--gold-d); box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
#menuBack[hidden] { display: none; }

/* ---------- Gruppen ---------- */
.sp-reiter { display: flex; flex-direction: column; }
#menuBody .sp-sek { margin-top: 2px; }
#menuBody .sp-sek.warte { color: var(--gold-l); }
#menuBody .sp-sek.warte::after { background: linear-gradient(90deg, var(--red), #3a2212); }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; margin-bottom: 18px; }

/* ---------- Kachel: gemaltes Bild oben, Holzschild darunter ---------- */
.sp-kachel { position: relative; display: flex; flex-direction: column; padding: 0; text-align: left; color: var(--cream); cursor: pointer;
  background: linear-gradient(#2f1b0e, #1c0f07); border: 2px solid #3a2212; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 3px 0 #000; transition: transform .12s, border-color .12s; }
.sp-kachel:not(.zu):hover { border-color: var(--gold-d); transform: translateY(-2px); }
.sp-kachel:not(.zu):active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.sp-kachel.bereit { border-color: var(--gold-d); box-shadow: inset 0 0 0 1px rgba(244,194,60,.25), 0 3px 0 #000, 0 0 12px rgba(244,194,60,.25); }
.sp-bild { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 3px solid var(--gold-d); background: #140a05; }
.sp-bild > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sp-kachel:not(.zu):hover .sp-bild > img { filter: brightness(1.08) saturate(1.05); }
.sp-bild::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), inset 0 -24px 24px -18px rgba(0,0,0,.55); }
/* Figuren über der Szene: Schafkopf-Runde, Kleiderständer der Sakristei */
.sp-deko { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; }
.sp-deko.sp-tisch { height: 58%; background-repeat: no-repeat; background-position: center bottom; background-size: auto 122%; image-rendering: pixelated;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.sp-deko.sp-figur { top: 0; display: flex; justify-content: center; align-items: flex-end; padding-bottom: 6%; }
.sp-deko.sp-figur img { height: 62%; width: auto; image-rendering: pixelated; filter: drop-shadow(0 3px 2px rgba(0,0,0,.7)); }
.sp-text { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 9px; }
.sp-text b { font-size: 16px; line-height: 1.15; color: var(--gold-l); }
.sp-text small { font-size: 13px; line-height: 1.25; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-text em { margin-top: 3px; font-style: normal; font-size: 13px; color: var(--cream); }
.sp-text em::before { content: '▸ '; color: var(--gold); }
/* Fähnchen oben rechts: NEU (gold) oder ! (rot) */
.sp-fahne { position: absolute; top: 6px; right: 6px; z-index: 1; padding: 3px 6px 2px; font-style: normal; font-family: var(--pix); font-size: 9px; color: #fff;
  background: var(--red); border: 2px solid var(--ink); box-shadow: 2px 2px 0 #000; }
.sp-fahne.neu { color: var(--ink); background: linear-gradient(var(--gold-l), var(--gold)); animation: indNeu 1.2s ease-in-out infinite alternate; }

/* gesperrt: nur eine Andeutung */
.sp-kachel.zu { cursor: default; border-style: dashed; border-color: #4a2e17; background: rgba(0,0,0,.25); box-shadow: none; }
.sp-kachel.zu .sp-bild { border-bottom-color: #4a2e17; }
.sp-kachel.zu .sp-bild > img, .sp-kachel.zu .sp-deko { filter: grayscale(1) brightness(.32) blur(1px); }
.sp-kachel.zu .sp-text b { color: var(--muted); }
.sp-kachel.zu .sp-text small { color: #9a8468; }
.sp-schloss { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 16 / 9; display: grid; place-items: center; font-size: 30px; opacity: .85; pointer-events: none; }

/* ---------- „Jetzt wartet etwas“: breite Streifen, ein Tipp startet ---------- */
.sp-warte { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.sp-warte-item { display: flex; align-items: center; gap: 10px; padding: 0 10px 0 0; text-align: left; color: var(--cream); cursor: pointer;
  background: linear-gradient(90deg, rgba(200,32,42,.22), #24140b 55%); border: 2px solid var(--gold-d); border-left: 5px solid var(--red); box-shadow: 0 3px 0 #000; }
.sp-warte-item:hover { background: linear-gradient(90deg, rgba(200,32,42,.35), #2f1b0e 60%); }
.sp-warte-item:active { transform: translateY(1px); box-shadow: none; }
.sp-warte-item > img { flex: 0 0 auto; width: 96px; height: 54px; object-fit: cover; border-right: 2px solid var(--gold-d); }
.sp-warte-item > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 6px 0; }
.sp-warte-item b { font-size: 15px; color: var(--gold-l); }
.sp-warte-item small { font-size: 13px; line-height: 1.25; color: var(--cream); }
.sp-warte-item > em { flex: 0 0 auto; padding: 5px 10px; font-style: normal; font-size: 14px; font-weight: 600; color: var(--ink); background: linear-gradient(var(--gold-l), var(--gold)); border: 2px solid var(--ink); box-shadow: 2px 2px 0 #000; }

@media (max-width: 600px) {
  .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .sp-text { padding: 6px 7px 7px; }
  .sp-text b { font-size: 14px; }
  .sp-text small { font-size: 12px; }
  .sp-text em { font-size: 12px; }
  .sp-warte-item > img { width: 72px; height: 48px; }
  .sp-warte-item > em { padding: 4px 7px; font-size: 13px; }
}
/* schmales Handy: „☰“ ohne Wort, damit Bierreich · Missionen · Spiele · Jenseits · ☰ in eine Reihe passen */
@media (max-width: 480px) { #menuBar > .mb-mehr > span { display: none; } #menuBar > .mb-mehr { padding-left: 12px; padding-right: 12px; } }