/* ==========================================================================
   A-Game Grunddesign (agame.css)
   Gemeinsame Bausteine für alle digitalen A-Game-Methoden.
   Einbinden:  <link rel="stylesheet" href="agame.css">
   Dazu im <head> den Webfont laden (Montserrat, Ersatz für Kief Montaser)
   und im <body> die Ring-Definition (siehe grunddesign.html).
   Seitenspezifisches Layout gehört NICHT hierher, sondern in die jeweilige Seite.
   ========================================================================== */

/* ---- 1. Tokens, Reset, Grundstil ---- */
:root {
  /* ---- A-Game Grunddesign: Tokens (gelten später für alle Methoden) ---- */
  --night:      #0E1330;   /* Weltraum-Hintergrund (Space Mission) */
  --night-2:    #171E4A;   /* Flächen auf Nacht */
  --line:       #2C3678;
  --text:       #F1F3FF;
  --text-soft:  #BFC6EA;

  --cyan:   #5CC8DC;       /* Bildmarke, Cockpit-Welt */
  --lime:   #A8E06A;
  --yellow: #F2D31B;

  --guida-a: #1B86A6;      /* G.U.I.D.A.-Sprechkasten */
  --guida-b: #1E55A8;
  --dadd-a:  #3A1F7A;      /* Daddelnix-Sprechkasten */
  --dadd-b:  #26124F;

  /* Methodenfarben (Verläufe in der Art der Kartenrückseiten) */
  --m-avatar:  linear-gradient(135deg, #1C8A94, #24489E);
  --m-quiz:    linear-gradient(135deg, #6B3FB8, #3A2A94);
  --m-space:   linear-gradient(135deg, #2552B3, #5A3AA8);
  --m-endboss: linear-gradient(135deg, #C42B33, #7C1738);
  --m-zauber:  linear-gradient(135deg, #5B2DA8, #2B1A68);
  --m-memory:  linear-gradient(135deg, #1D8050, #1B5C8C);

  --focus: #FFE45C;
  --radius: 22px;
  --font: "Montserrat", "Trebuchet MS", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  background-color: var(--night);
  /* ruhiger Sternenhimmel, statisch */
  background-image:
    radial-gradient(1.5px 1.5px at 12% 8%,  #fff9 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 78% 14%, #fff8 50%, transparent 52%),
    radial-gradient(1px 1px at 41% 22%,     #fff7 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 90% 38%, #fff7 50%, transparent 52%),
    radial-gradient(1px 1px at 6% 52%,      #fff6 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 63% 61%, #fff7 50%, transparent 52%),
    radial-gradient(1px 1px at 27% 77%,     #fff6 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 85% 88%, #fff7 50%, transparent 52%),
    radial-gradient(120% 60% at 85% -10%, #2A3A9A55, transparent 60%),
    radial-gradient(90% 50% at -10% 40%, #5A2FA044, transparent 60%);
  background-attachment: scroll;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

.wrap { width: 100%; max-width: 70rem; margin: 0 auto; padding: 0 1.1rem; }
.skip { position: absolute; left: -999px; top: 0; background: #fff; color: #000; padding: .75rem 1rem; z-index: 30; }
.skip:focus { left: .5rem; top: .5rem; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }


/* ---- 2. Logo / Bildmarke (.top > .wrap > a.brand) ---- */
/* ---------- Kopf: Logo ---------- */
.top { padding: calc(.9rem + env(safe-area-inset-top, 0px)) 0 0; }
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; }
.brand .logo { position: relative; width: 3rem; height: 3rem; flex: none; }
.brand .logo img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Wortmarke wie in Space Mission: A, Farbbalken mit Punkt, GAME (Fredoka als Webfont-Ersatz) */
.wm { display: block; font-family: "Fredoka", var(--font); font-weight: 700; font-size: 1.7rem; line-height: 1; color: #fff; white-space: nowrap; }
.wm i { display: inline-block; position: relative; width: .5em; height: .15em; border-radius: 99px; background: linear-gradient(90deg, #3FF2F2, #F9D423); margin: 0 .2em 0 .1em; vertical-align: .3em; }
.wm b { position: absolute; right: -.12em; top: 50%; width: .3em; height: .3em; border-radius: 50%; background: #F9D423; transform: translateY(-50%); }
.brand-sub { display: block; font-weight: 600; font-size: .72rem; line-height: 1.3; color: var(--text-soft); margin-top: .2rem; }

/* ---- 3. Sprechkästen: .say--daddelnix und .say--guida ---- */
/* ---------- Sprechkästen (wiederverwendbar in allen Methoden) ---------- */
.say {
  position: relative; border-radius: 20px; padding: .9rem 1.1rem;
  color: #fff; font-weight: 600; line-height: 1.45;
}
.say b { display: block; font-weight: 800; font-size: .95rem; margin-bottom: .15rem; }
.say--daddelnix { background: linear-gradient(135deg, var(--dadd-a), var(--dadd-b)); border: 2px solid #7A55D0; font-style: italic; font-weight: 500; }
.say--daddelnix::after {
  content: ""; position: absolute; top: -13px; right: 3.2rem; width: 22px; height: 22px;
  background: var(--dadd-a); border-left: 2px solid #7A55D0; border-top: 2px solid #7A55D0;
  transform: rotate(45deg); border-radius: 4px 0 0 0;
}
.say--guida { background: linear-gradient(135deg, var(--guida-a), var(--guida-b)); border: 2px solid #8FE3F5; }

/* ---- 4. Badge: Symbol im Bildmarken-Ring ---- */
.badge { position: relative; width: 4.2rem; height: 4.2rem; display: grid; place-items: center; }
.badge .ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.badge .glyph { position: relative; width: 1.9rem; height: 1.9rem; }

/* ---- 5. Button (hell, Pille) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .65rem 1.3rem;
  border-radius: 999px; background: #fff; color: #14194A; font-weight: 800; font-size: 1rem; text-decoration: none; justify-self: start;
}
.btn:hover { background: #E8EBFF; }

/* ---- 6. Aufklapp-Info (details.more) ---- */
details.more { margin-top: 1.2rem; background: var(--night-2); border: 1px solid var(--line); border-radius: 18px; }
details.more summary {
  list-style: none; cursor: pointer; padding: 1rem 1.1rem; min-height: 3.25rem;
  font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
details.more summary::-webkit-details-marker { display: none; }
details.more summary::after { content: "+"; font-weight: 800; font-size: 1.5rem; line-height: 1; color: var(--cyan); }
details.more[open] summary::after { content: "–"; }
.more-body { padding: 0 1.1rem 1.2rem; display: grid; gap: 1rem; color: var(--text-soft); }
.more-body strong { color: var(--text); font-weight: 700; }
.more-body ul { margin: 0; padding-left: 1.15rem; display: grid; gap: .35rem; }

/* ---- 7. Fußzeile und Hinweis-Toast ---- */
footer { padding: 1.8rem 0 calc(2rem + env(safe-area-inset-bottom, 0px)); color: var(--text-soft); font-size: .88rem; }
footer a { text-underline-offset: 3px; }

.toast {
  position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 150%);
  transition: transform .25s ease, opacity .25s ease; opacity: 0; visibility: hidden; background: #fff; color: #14194A; font-weight: 700; padding: .75rem 1.1rem;
  border-radius: 14px; max-width: calc(100% - 2rem); z-index: 40; font-size: .95rem;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

/* ---- 8. Größere Bildschirme (gemeinsam) ---- */
@media (min-width: 40rem) {
  .wrap { padding: 0 2rem; }
  .brand .logo { width: 3.4rem; height: 3.4rem; }
  .wm { font-size: 1.9rem; }
}