/*!
 * spiele.0o5.de – site.css
 * Gemeinsame Bausteine für alle Seiten: Navigation (Zurück / v1-v2),
 * Footer (Impressum, Datenschutz, inno4school.de) und Consent-Dialog.
 * Alle Klassen sind mit "s05-" präfixiert, damit sie nicht mit den
 * Spielen kollidieren. Keine Inline-Styles nötig (CSP-kompatibel).
 */

/* ------------------------------------------------------------------
   Tokens
   ------------------------------------------------------------------ */
.s05-nav,
.s05-footer,
.s05-cmp-layer {
  --s05-bg: rgba(16, 19, 25, 0.82);
  --s05-bg-solid: #12161e;
  --s05-card: #161b25;
  --s05-line: rgba(255, 255, 255, 0.14);
  --s05-text: #e8ebf2;
  --s05-muted: #9aa3b5;
  --s05-accent: #ffd700;
  --s05-accent-ink: #14171d;
  --s05-focus: 0 0 0 3px rgba(255, 215, 0, 0.55);
  --s05-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------------------------------------------------
   Navigation pill (← Alle Spiele | v1 v2 | Impressum Datenschutz)
   ------------------------------------------------------------------ */
.s05-nav {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 4px;
  max-width: calc(100vw - 16px);
  font: 500 13px/1 var(--s05-font);
  letter-spacing: normal;
  text-transform: none;
  color: var(--s05-text);
  background: var(--s05-bg);
  border: 1px solid var(--s05-line);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: opacity 0.35s ease;
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
  text-align: left;
}

.s05-nav *,
.s05-footer *,
.s05-cmp-layer * {
  box-sizing: border-box;
}

.s05-nav a,
.s05-nav a:link,
.s05-nav a:visited {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 0 10px;
  margin: 0;
  font: inherit;
  color: var(--s05-text);
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: 999px;
  text-shadow: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.s05-nav a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.s05-nav a:focus-visible {
  outline: none;
  box-shadow: var(--s05-focus);
}

.s05-nav .s05-back {
  font-weight: 650;
}

.s05-nav .s05-back b {
  color: var(--s05-accent);
  font-weight: 700;
}

.s05-nav .s05-ver {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

.s05-nav .s05-ver a {
  min-height: 24px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 700;
  color: var(--s05-muted);
}

.s05-nav .s05-ver a[aria-current="page"] {
  color: var(--s05-accent-ink);
  background: var(--s05-accent);
}

.s05-nav .s05-legal {
  display: inline-flex;
  gap: 0;
  padding-left: 4px;
  border-left: 1px solid var(--s05-line);
}

.s05-nav .s05-legal a {
  font-size: 12px;
  color: var(--s05-muted);
  padding: 0 7px;
}

/* Static top bar variant (above a page's own header). */
.s05-topwrap {
  box-sizing: border-box;
  position: relative;
  z-index: 2147483000; /* über Start-/Pause-Overlays der Spiele */
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 10px 8px 0;
  margin: 0;
}

.s05-topwrap.s05-left {
  justify-content: flex-start;
  padding: 0 0 14px;
}

/* Fixed variant used on v1 pages (corner positions). */
.s05-nav.s05-fixed {
  position: fixed;
  z-index: 2147483000;
}

.s05-nav.s05-tl { top: calc(8px + env(safe-area-inset-top, 0px)); left: calc(8px + env(safe-area-inset-left, 0px)); }
.s05-nav.s05-tr { top: calc(8px + env(safe-area-inset-top, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); }
.s05-nav.s05-bl { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); left: calc(8px + env(safe-area-inset-left, 0px)); }
.s05-nav.s05-br { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); }
.s05-nav.s05-tc { top: calc(8px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); }
.s05-nav.s05-bc { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); }
.s05-nav.s05-ml { top: 50%; left: calc(8px + env(safe-area-inset-left, 0px)); transform: translateY(-50%); }
.s05-nav.s05-mr { top: 50%; right: calc(8px + env(safe-area-inset-right, 0px)); transform: translateY(-50%); }

/* Idle: fade out while the player is busy, comes back on pointer/focus. */
.s05-nav.s05-fixed.s05-idle {
  opacity: 0.32;
}

.s05-nav.s05-fixed:hover,
.s05-nav.s05-fixed:focus-within {
  opacity: 1;
}

/* Pointer-Lock aktiv (3D-Spiel): ausblenden, bis die Maus frei ist. */
.s05-nav.s05-fixed.s05-pl,
.s05-footer.s05-fixed.s05-pl {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Compact on small screens: arrow only for "back", shorter labels. */
@media (max-width: 560px) {
  .s05-nav {
    font-size: 12px;
    gap: 3px;
    padding: 3px;
  }
  .s05-nav a,
  .s05-nav a:link,
  .s05-nav a:visited {
    min-height: 26px;
    padding: 0 7px;
  }
  .s05-nav .s05-back span {
    display: none;
  }
  .s05-nav .s05-legal a {
    font-size: 11px;
    padding: 0 5px;
  }
}

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */
.s05-footer {
  box-sizing: border-box;
  display: block;
  position: relative;
  z-index: 5;
  clear: both;
  width: 100%;
  margin: 0;
  padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  font: 400 13px/1.6 var(--s05-font);
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  color: var(--s05-muted);
  background: var(--s05-bg-solid);
  border-top: 1px solid var(--s05-line);
}

.s05-footer .s05-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.s05-footer .s05-links li {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.s05-footer .s05-links li + li::before {
  content: "·";
  margin-right: 6px;
  color: rgba(255, 255, 255, 0.25);
}

.s05-footer a,
.s05-footer a:link,
.s05-footer a:visited,
.s05-footer button.s05-linkbtn {
  display: inline;
  margin: 0;
  padding: 2px 2px;
  font: inherit;
  color: var(--s05-text);
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  min-width: 0;
  min-height: 0;
  width: auto;
  height: auto;
}

.s05-footer a:hover,
.s05-footer button.s05-linkbtn:hover {
  color: var(--s05-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.s05-footer a:focus-visible,
.s05-footer button.s05-linkbtn:focus-visible {
  outline: none;
  box-shadow: var(--s05-focus);
}

.s05-footer .s05-copy {
  margin: 6px 0 0;
  font-size: 12px;
  color: #6f788b;
}

/* Footer moved into a game container (data-s05-into). */
.s05-footer.s05-inset {
  margin-top: 28px;
  padding-bottom: 16px;
  border: 1px solid var(--s05-line);
  border-radius: 12px;
}

/* Fixed mini footer for full-screen games. */
.s05-footer.s05-fixed {
  position: fixed;
  z-index: 2147482999;
  width: auto;
  max-width: calc(100vw - 16px);
  padding: 5px 12px;
  font-size: 11.5px;
  line-height: 1.4;
  border: 1px solid var(--s05-line);
  border-radius: 999px;
  background: var(--s05-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: opacity 0.35s ease;
}

.s05-footer.s05-fixed .s05-copy { display: none; }
.s05-footer.s05-fixed .s05-links { flex-wrap: nowrap; white-space: nowrap; }
.s05-footer.s05-fixed.s05-tl { top: calc(8px + env(safe-area-inset-top, 0px)); left: calc(8px + env(safe-area-inset-left, 0px)); }
.s05-footer.s05-fixed.s05-tr { top: calc(8px + env(safe-area-inset-top, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); }
.s05-footer.s05-fixed.s05-bl { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); left: calc(8px + env(safe-area-inset-left, 0px)); }
.s05-footer.s05-fixed.s05-br { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); }
.s05-footer.s05-fixed.s05-bc { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); }
.s05-footer.s05-fixed.s05-idle { opacity: 0.32; }
.s05-footer.s05-fixed:hover,
.s05-footer.s05-fixed:focus-within { opacity: 1; }

@media (max-width: 560px) {
  .s05-footer.s05-fixed .s05-hide-sm { display: none; }
}

/* ------------------------------------------------------------------
   Consent dialog (Opt-in, gleichwertige Buttons)
   ------------------------------------------------------------------ */
.s05-cmp-layer {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(6, 8, 12, 0.62);
  font: 400 14px/1.55 var(--s05-font);
  color: var(--s05-text);
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  animation: s05-fade 0.2s ease-out;
}

.s05-cmp-layer[hidden] {
  display: none;
}

.s05-cmp {
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 22px 22px 18px;
  background: var(--s05-card);
  border: 1px solid var(--s05-line);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  animation: s05-pop 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.s05-cmp:focus {
  outline: none;
}

.s05-cmp h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 0;
  font: 700 19px/1.3 var(--s05-font);
  color: #fff;
  letter-spacing: normal;
  text-transform: none;
  text-shadow: none;
}

.s05-cmp h2 .s05-dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--s05-accent);
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.6);
}

.s05-cmp p {
  margin: 0 0 10px;
  padding: 0;
  font: inherit;
  color: #c9d0dd;
}

.s05-cmp p.s05-small {
  font-size: 12.5px;
  color: var(--s05-muted);
}

.s05-cmp a,
.s05-cmp a:link,
.s05-cmp a:visited {
  color: var(--s05-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.s05-cmp details {
  margin: 8px 0 14px;
  padding: 0;
  border: 1px solid var(--s05-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.s05-cmp summary {
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 650;
  font-size: 13.5px;
  color: var(--s05-text);
  list-style: revert;
}

.s05-cmp summary:focus-visible {
  outline: none;
  box-shadow: var(--s05-focus);
  border-radius: 12px;
}

.s05-cmp .s05-details-body {
  padding: 0 14px 12px;
  font-size: 12.5px;
  color: #b9c1cf;
}

.s05-cmp dl {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 6px 12px;
  margin: 0;
}

.s05-cmp dt {
  margin: 0;
  font-weight: 650;
  color: var(--s05-text);
}

.s05-cmp dd {
  margin: 0;
}

.s05-cmp table {
  width: 100%;
  border-collapse: collapse;
  margin: 2px 0 0;
  font-size: 12px;
}

.s05-cmp th,
.s05-cmp td {
  padding: 4px 6px 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
  vertical-align: top;
  color: #b9c1cf;
  background: none;
}

.s05-cmp th {
  color: var(--s05-text);
  font-weight: 650;
}

.s05-cmp code {
  font: 12px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #fff;
}

.s05-cmp .s05-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 6px 0 12px;
}

/* Beide Buttons absichtlich identisch gestaltet (gleichwertige Wahl). */
.s05-cmp button.s05-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 10px 14px;
  font: 700 15px/1.2 var(--s05-font);
  letter-spacing: normal;
  text-transform: none;
  color: var(--s05-accent-ink);
  background: #eef1f6;
  border: 1px solid transparent;
  border-radius: 12px;
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease;
}

.s05-cmp button.s05-btn:hover {
  background: #ffffff;
  transform: translateY(-1px);
}

.s05-cmp button.s05-btn:active {
  transform: translateY(0);
}

.s05-cmp button.s05-btn:focus-visible {
  outline: none;
  box-shadow: var(--s05-focus);
}

.s05-cmp .s05-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  margin: 0;
  font-size: 12.5px;
}

@media (max-width: 560px) {
  .s05-cmp-layer {
    align-items: flex-end;
    padding: 0;
  }
  .s05-cmp {
    max-width: none;
    max-height: 88vh;
    max-height: 88dvh;
    padding: 18px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
    animation: s05-slide 0.26s cubic-bezier(0.2, 0.9, 0.3, 1);
  }
  .s05-cmp h2 {
    font-size: 17px;
  }
  .s05-cmp p {
    font-size: 13.5px;
  }
  .s05-cmp dl {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .s05-cmp dd {
    margin-bottom: 6px;
  }
}

@keyframes s05-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes s05-pop { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes s05-slide { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .s05-cmp-layer,
  .s05-cmp {
    animation: none;
  }
  .s05-nav,
  .s05-footer.s05-fixed {
    transition: none;
  }
}

/* Inline consent status box (Datenschutzerklärung). */
.s05-consent-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 12px 0 18px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 215, 0, 0.35);
  border-radius: 12px;
  background: rgba(255, 215, 0, 0.06);
}

.s05-consent-box .s05-state {
  flex: 1 1 260px;
  margin: 0;
}

.s05-consent-box .s05-state strong {
  color: var(--s05-accent, #ffd700);
}

.s05-consent-box button {
  min-height: 40px;
  padding: 8px 14px;
  font: 650 14px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #14171d;
  background: #eef1f6;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

.s05-consent-box button:hover {
  background: #fff;
}

.s05-consent-box button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.55);
}

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

/* ------------------------------------------------------------------
   Teilen: Button in der Navigation, Menü, Hinweis
   ------------------------------------------------------------------ */
.s05-nav button.s05-sharebtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  margin: 0;
  padding: 0 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  color: var(--s05-text);
  background: rgba(255, 255, 255, 0.07);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.s05-nav button.s05-sharebtn:hover,
.s05-nav button.s05-sharebtn[aria-expanded="true"] {
  background: rgba(255, 215, 0, 0.18);
  color: #fff;
}

.s05-nav button.s05-sharebtn:focus-visible {
  outline: none;
  box-shadow: var(--s05-focus);
}

.s05-nav button.s05-sharebtn svg {
  flex: none;
  display: block;
}

@media (max-width: 560px) {
  .s05-nav button.s05-sharebtn {
    min-height: 26px;
    padding: 0 7px;
  }
  .s05-nav button.s05-sharebtn span {
    display: none;
  }
}

.s05-share-pop {
  --s05-text: #e8ebf2;
  --s05-muted: #9aa3b5;
  --s05-line: rgba(255, 255, 255, 0.14);
  --s05-focus: 0 0 0 3px rgba(255, 215, 0, 0.55);
  position: fixed;
  z-index: 2147483500;
  box-sizing: border-box;
  width: 260px;
  margin: 0;
  padding: 12px;
  font: 400 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--s05-text);
  text-align: left;
  letter-spacing: normal;
  text-transform: none;
  background: #161b25;
  border: 1px solid var(--s05-line);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  animation: s05-pop 0.18s ease-out;
}

.s05-share-pop[hidden] {
  display: none;
}

.s05-share-pop * {
  box-sizing: border-box;
}

.s05-share-pop.s05-sheet {
  left: 8px;
  right: 8px;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  width: auto;
  animation: s05-slide 0.22s ease-out;
}

.s05-share-pop .s05-share-h {
  margin: 0 2px 10px;
  padding: 0;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}

.s05-share-pop .s05-share-opt,
.s05-share-pop a.s05-share-opt:link,
.s05-share-pop a.s05-share-opt:visited {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  margin: 0 0 6px;
  padding: 10px 12px;
  font: inherit;
  font-weight: 650;
  color: var(--s05-text);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid transparent;
  border-radius: 10px;
  box-shadow: none;
  cursor: pointer;
  text-align: left;
}

.s05-share-pop .s05-share-opt[hidden] {
  display: none;
}

.s05-share-pop .s05-share-opt:hover {
  background: rgba(255, 255, 255, 0.12);
}

.s05-share-pop .s05-share-opt:focus-visible {
  outline: none;
  box-shadow: var(--s05-focus);
}

.s05-share-pop a.s05-wa,
.s05-share-pop a.s05-wa:link,
.s05-share-pop a.s05-wa:visited {
  color: #fff;
  background: #1f9d55;
}

.s05-share-pop a.s05-wa:hover {
  background: #22b360;
}

.s05-share-pop .s05-share-url {
  margin: 4px 2px 0;
  padding: 0;
  font-size: 12px;
  color: var(--s05-muted);
  word-break: break-all;
}

.s05-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 2147483550;
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  font: 600 14px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #14171d;
  text-align: center;
  background: #ffd700;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.s05-toast.s05-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  .s05-share-pop,
  .s05-share-pop.s05-sheet {
    animation: none;
  }
  .s05-toast {
    transition: none;
  }
}

/* Sehr schmale Handys: Navigation kompakter, damit nichts überlappt. */
@media (max-width: 400px) {
  .s05-nav {
    gap: 2px;
    padding: 3px;
  }
  .s05-nav a,
  .s05-nav a:link,
  .s05-nav a:visited {
    padding: 0 5px;
  }
  .s05-nav .s05-ver a {
    padding: 0 7px;
  }
  .s05-nav .s05-legal {
    padding-left: 2px;
  }
  .s05-nav .s05-legal a {
    font-size: 10.5px;
    padding: 0 4px;
  }
  .s05-nav button.s05-sharebtn {
    padding: 0 6px;
  }
}

@media (max-width: 380px) {
  /* nur die jeweils andere Version anzeigen (ein Tipp wechselt) */
  .s05-nav .s05-ver a[aria-current="page"] {
    display: none;
  }
}