/* Beanlings Booster: Spiele-Übersicht + Feedback je Spiel (03.11.2026, js/spiele.js). Präfix sp-. */
.sp{max-width:760px;margin:0 auto}
.sp-inhalt{display:block}
.sp-fuer{margin-bottom:18px}
.sp-fuer .sp-kachel{margin-top:8px}
.sp-gruppe{margin:0 0 18px}
.sp-gtitel{font-family:'Jersey 10',monospace;font-weight:400;font-size:28px;line-height:1;margin:0;color:var(--gold)}
body[data-design="b"] .sp-gtitel{color:#7a4e12}
.sp-gtext{margin:2px 0 8px}
.sp-raster{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:600px){.sp-raster{grid-template-columns:1fr 1fr}}
.sp-kachel{display:flex;flex-direction:column;align-items:stretch;gap:4px;width:100%;min-height:48px;padding:10px 12px;text-align:left;cursor:pointer;
  position:relative;background:var(--tafel);color:var(--text);border:3px solid var(--holz-d);box-shadow:inset 0 0 0 2px var(--tafel-rand),4px 4px 0 #0007;font:inherit}
.sp-kachel:active{transform:translate(2px,2px);box-shadow:inset 0 0 0 2px var(--tafel-rand),2px 2px 0 #0007}
.sp-kachel:focus-visible,.sp-schild:focus-visible,.sp-leiste:focus-visible,.sp-fb-wert:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.sp-kachel.sp-offen{box-shadow:inset 0 0 0 2px var(--gold),4px 4px 0 #0007}
.sp-kopf{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.sp-name{font-family:'Jersey 10',monospace;font-weight:400;font-size:24px;line-height:1;color:var(--gold);min-width:0}
body[data-design="b"] .sp-name{color:#7a4e12}
.sp-dauer{margin-left:auto;font-family:'VT323',monospace;font-size:18px;color:var(--text-m);white-space:nowrap}
.sp-neu{background:var(--rot);color:#fff;border:2px solid var(--holz-d);font-family:'Jersey 10',monospace;font-size:16px;line-height:1.1;padding:0 5px}
.sp-text{font-size:14px;color:var(--text-m)}
.sp-status{font-size:14px;color:var(--text)}
.sp-offen .sp-status{color:var(--gold)}
body[data-design="b"] .sp-offen .sp-status{color:#7a4e12}
.sp-klein{padding:8px 10px}
.sp-klein .sp-name{font-size:22px}
/* Schild auf der Lichtung */
.sp-schild{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 16px;padding:12px;text-align:left;cursor:pointer;position:relative;flex-wrap:wrap;
  background:var(--bern);color:var(--perg);border:3px solid var(--holz-d);box-shadow:inset 0 3px 0 var(--gold),inset 0 -4px 0 var(--bern-s),5px 5px 0 #0007;font:inherit}
.sp-schild-text{display:flex;flex-direction:column;min-width:0;flex:1 1 180px}
.sp-schild-text b{font-family:'Jersey 10',monospace;font-weight:400;font-size:30px;line-height:1;text-shadow:0 2px 0 #0006}
.sp-schild-text small{font-size:14px}
.sp-zahl{font-style:normal;background:var(--holz-d);color:var(--gold);border:2px solid var(--gold);font-family:'VT323',monospace;font-size:18px;padding:0 6px;white-space:nowrap}
.sp-pfeil{font-family:'Jersey 10',monospace;font-size:34px;line-height:1}
/* Leiste oben in der Arena */
.sp-leiste{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:44px;margin:0 0 12px;padding:6px 12px;cursor:pointer;
  background:var(--holz);color:var(--perg);border:3px solid var(--holz-d);box-shadow:inset 0 3px 0 var(--kante),3px 3px 0 #0008;font-family:'Jersey 10',monospace;font-size:22px}
/* Frage „Wie gefällt dir …?“ (unten, über der Leiste, nie während des Spiels) */
.sp-fb{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;width:min(440px,calc(100vw - 32px));
  background:var(--innen);color:var(--perg);border:3px solid var(--holz-d);box-shadow:inset 0 0 0 2px var(--gold),5px 5px 0 #000a;padding:12px 14px;
  display:flex;flex-direction:column;gap:8px;animation:sp-rein .25s ease-out}
.sp-fb.sp-weg{opacity:0;transition:opacity .25s}
@keyframes sp-rein{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.sp-fb{animation:none}}
html.bo-ruhig .sp-fb{animation:none}
.sp-fb-frage{font-family:'Jersey 10',monospace;font-weight:400;font-size:24px;line-height:1.05;padding-right:34px}
.sp-fb-zu{position:absolute;right:6px;top:4px;width:36px;height:36px;background:none;border:0;color:var(--perg);font-size:26px;cursor:pointer}
.sp-fb-werte{display:flex;gap:6px}
.sp-fb-wert{flex:1;min-height:44px;background:var(--holz);color:var(--perg);border:3px solid var(--holz-d);font-family:'Jersey 10',monospace;font-size:26px;cursor:pointer;
  box-shadow:inset 0 3px 0 var(--kante)}
.sp-fb-wert.an{background:var(--bern);box-shadow:inset 0 3px 0 var(--gold)}
.sp-fb-text{width:100%;min-height:64px;background:var(--fach);color:var(--perg);border:2px solid var(--holz-d);padding:6px;font:inherit;font-size:16px;resize:vertical}
.sp-fb-status{margin:0;min-height:0}
.sp-fb-danke{margin:4px 0;font-size:18px}
.sp-fb .leise{color:var(--perg-m)}