/* Neues Design „Next Level“ – Grundlage für alle Seiten (nur aktiv mit html.agg-next, siehe web/next/index.js).
   Farben (CI): Neko-Grün #18C37E für Hauptknöpfe (Schrift #052817, Kante #0B7A4B), Gold #FFC400 nur für GG/Belohnungen/Platz 1,
   Nachtschwarz #0D0C09. Kein Rot/Lila/Pink in der Oberfläche (Ausnahmen: Spielwelten, Rang-Embleme, Seltenheit, Marken-Logos).
   Schriften: Fredoka (Überschriften), Nunito (Text) – lokal aus /fonts. Seitenmodule bringen eigene CSS-Dateien mit (Präfix je Seite). */
:root.agg-next {
  /* Warm statt grau (Stefan 25.10.2026: „sehr dark, sehr grau, unfreundlich“ → dunkel, aber warm & bunt) */
  --n-bg: #0f0c09; --n-bg2: #17130f; --n-card: #231d17; --n-card2: #2a241c; --n-card3: #1b1712; --n-line: rgba(255, 196, 0, .17);
  --n-ink: #fff6e8; --n-muted: rgba(255, 240, 218, .7); --n-faint: rgba(255, 240, 218, .5); --n-warm: #c9b393;
  --n-green: #18c37e; --n-green-hi: #2ad892; --n-green-lo: #129e63; --n-green-edge: #0b7a4b; --n-green-ink: #052817;
  --n-gold: #ffc400; --n-gold-hi: #ffd54a; --n-gold-ink: #3a2a00;
  --n-r-card: 24px; --n-r-btn: 16px; --n-gutter: clamp(16px, 2.6vw, 48px); --n-max: 1880px;  /* Stefan 25.10.2026: volle Breite nutzen, Elemente nebeneinander packen statt Streifen untereinander */
  --n-font-head: 'Fredoka', 'Nunito', system-ui, sans-serif; --n-font: 'Nunito', system-ui, sans-serif;
  color-scheme: dark;
  /* Alte Farbwerte für Dialoge, Toasts usw. aus app.js, die weiterverwendet werden */
  --bg: #100c08; --surface: #241c13; --ink: #f7f2e8; --muted: rgba(255, 240, 218, .62); --line: rgba(255, 240, 218, .1);
  --nav: rgba(36, 28, 19, .9); --btn: #18c37e; --btn-ink: #052817; --font-ui: var(--n-font); --font-brand: var(--n-font-head);
}
.agg-next body { color: var(--n-ink); font-family: var(--n-font); background-color: var(--n-bg);
  /* farbige Lichtschimmer statt flachem Schwarz: Grün oben links, Gold rechts, Bernstein unten */
  background-image: radial-gradient(1100px 720px at 8% -8%, rgba(24, 195, 126, .13), rgba(24, 195, 126, 0) 62%), radial-gradient(900px 760px at 104% 26%, rgba(255, 196, 0, .09), rgba(255, 196, 0, 0) 60%), radial-gradient(1000px 800px at -6% 96%, rgba(255, 138, 40, .08), rgba(255, 138, 40, 0) 60%), radial-gradient(800px 600px at 90% 110%, rgba(24, 195, 126, .08), rgba(24, 195, 126, 0) 60%);
  background-attachment: fixed; }
/* Alte Kopf-, Fuß- und Navigationsleisten weg – das neue Design zeichnet eigene (web/next/shell.js) */
.agg-next .topnav, .agg-next .mobilebar, .agg-next .bottomnav, .agg-next .sitefoot { display: none !important; }
.agg-next main#app { max-width: none; margin: 0; padding: 0; min-height: 100dvh; }

/* Scrollleiste im Look des Hubs */
.agg-next { scrollbar-width: thin; scrollbar-color: #18c37e #18130d; }
.agg-next ::-webkit-scrollbar { width: 10px; height: 10px; }
.agg-next ::-webkit-scrollbar-track { background: var(--n-bg2); }
.agg-next ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #2ad892, #129e63); border-radius: 999px; border: 2px solid #14130f; }

/* ---------- Bausteine (n-) ---------- */
.n-wrap { width: 100%; max-width: var(--n-max); margin: 0 auto; padding: 0 var(--n-gutter); box-sizing: border-box; }
.n-ttl { font-family: var(--n-font-head); font-weight: 700; margin: 0; letter-spacing: -.01em; }
.n-label { font: 900 12px var(--n-font); letter-spacing: .14em; text-transform: uppercase; }
.n-muted { color: var(--n-muted); }
.n-num { font-variant-numeric: tabular-nums; }
.n-glass { background: rgba(36, 28, 19, .6); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 1px rgba(255, 196, 0, .14); }
.n-card { position: relative; border-radius: var(--n-r-card); background: linear-gradient(180deg, var(--n-card2), var(--n-card3)); box-shadow: inset 0 1px 0 rgba(255, 236, 200, .07), 0 0 0 1px var(--n-line), 0 18px 44px rgba(0, 0, 0, .35); }
.n-sec { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.n-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: var(--n-r-btn); border: 0; cursor: pointer; font: 900 16px var(--n-font); text-decoration: none; white-space: nowrap; }
.n-btn.lg { min-height: 60px; padding: 0 30px; font-size: 17px; border-radius: 18px; }
.n-btn.sm { min-height: 42px; padding: 0 16px; font-size: 14px; border-radius: 12px; }
.n-main { background: var(--n-green); color: var(--n-green-ink); box-shadow: 0 5px 0 var(--n-green-edge), 0 18px 40px rgba(24, 195, 126, .3); }
.n-main:hover { background: var(--n-green-hi); }
.n-main { transition: transform .08s, box-shadow .08s, background .15s; }
.n-main:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--n-green-edge), 0 8px 20px rgba(24, 195, 126, .25); }
/* Zweitknopf (Token „btn“, UI-Review X9 25.10.2026): hell #f7f2e8, Schrift #14130f, 3 px dunklere Kante, gedrückt sinkt er ein.
   Für alles neben dem einen grünen Hauptknopf je Ansicht (X4): class="n-btn n-soft" (+ sm/lg). */
.n-soft { background: #f7f2e8; color: #14130f; box-shadow: 0 3px 0 #b9a585, 0 10px 24px rgba(0, 0, 0, .28); transition: transform .08s, box-shadow .08s, background .15s; }
.n-soft:hover { background: #fffaf0; }
.n-soft:active { transform: translateY(3px); box-shadow: 0 0 0 #b9a585, 0 4px 12px rgba(0, 0, 0, .24); }
.n-soft:focus-visible, .n-main:focus-visible { outline: 3px solid var(--n-green-hi); outline-offset: 3px; }
.n-soft svg { color: currentColor; }
.n-ghost { color: var(--n-ink); }
.n-off { background: transparent; color: rgba(255, 240, 218, .5); box-shadow: inset 0 0 0 1.5px rgba(255, 240, 218, .22); cursor: default; }
.n-chip { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer; font: 800 14px var(--n-font); background: rgba(255, 226, 180, .08); color: rgba(255, 240, 218, .8); box-shadow: inset 0 0 0 1px rgba(255, 240, 218, .1); }
.n-chip.on { background: var(--n-ink); color: #14130f; box-shadow: none; }
.n-seg { display: flex; gap: 2px; padding: 4px; border-radius: 999px; }
.n-seg button { min-height: 40px; padding: 0 18px; border-radius: 999px; border: 0; background: transparent; color: rgba(255, 240, 218, .7); font: 800 14px var(--n-font); cursor: pointer; }
.n-seg button.on { background: var(--n-green); color: var(--n-green-ink); box-shadow: 0 3px 0 var(--n-green-edge); }
.n-badge { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; font: 800 12px var(--n-font); letter-spacing: .06em; text-transform: uppercase; }  /* mind. 12 px / 800 (X10) */
.n-live { background: var(--n-green); color: var(--n-green-ink); }
.n-demo { background: var(--n-ink); color: #14130f; }
.n-soon { background: rgba(36, 28, 19, .75); color: var(--n-ink); box-shadow: inset 0 0 0 1px rgba(255, 240, 218, .25); }
.n-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--n-green); animation: n-pulse 2s infinite; }
/* Spielkarte: immer 16:9 */
.n-cover { position: relative; display: block; border-radius: var(--n-r-card); overflow: hidden; aspect-ratio: 16 / 9; color: var(--n-ink); background: var(--n-card); box-shadow: 0 0 0 1px var(--n-line), 0 18px 44px rgba(0, 0, 0, .45); isolation: isolate; text-decoration: none; }
.n-cover > img.c { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.n-cover:hover > img.c { transform: scale(1.06); }
.n-cover .sh { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 12, 9, 0) 40%, rgba(13, 12, 9, .95) 100%); }
/* Wischreihe (Handy) */
.n-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px var(--n-gutter) 8px; margin: 0 calc(-1 * var(--n-gutter)); scrollbar-width: none; }
.n-row::-webkit-scrollbar { display: none; }
.n-row > * { scroll-snap-align: start; flex: none; }
/* Werbefläche (Platzhalter; AdSense später). Für Spieler unsichtbar, bis Werbung live ist – zum Ansehen ?next=1&ads=1 (html.n-ads-preview) */
.agg-next:not(.n-ads-preview) .n-ad { display: none !important; }
.n-ad { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 22px; background: repeating-linear-gradient(45deg, rgba(255, 240, 218, .04) 0 12px, rgba(255, 240, 218, .02) 12px 24px); box-shadow: inset 0 0 0 1px rgba(255, 240, 218, .1); color: rgba(255, 240, 218, .55); font-weight: 800; }
/* Blatt von unten (Handy) */
.n-sheet-back { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .55); display: flex; align-items: flex-end; justify-content: center; }
.n-sheet { width: min(560px, 100%); max-height: 80dvh; overflow: auto; border-radius: 26px 26px 0 0; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); background: rgba(41, 32, 22, .98); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 1px rgba(255, 196, 0, .18); }
.n-sheet .grip { display: block; width: 44px; height: 5px; margin: 0 auto 10px; border-radius: 999px; background: rgba(255, 240, 218, .25); }

@keyframes n-pulse { 0% { box-shadow: 0 0 0 0 rgba(24, 195, 126, .7); } 70% { box-shadow: 0 0 0 10px rgba(24, 195, 126, 0); } 100% { box-shadow: 0 0 0 0 rgba(24, 195, 126, 0); } }
@keyframes n-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes n-spin { to { --n-a: 360deg; } }
@property --n-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@media (prefers-reduced-motion: reduce) { .n-dot { animation: none; } }
@media (max-width: 760px) { .agg-next main#app { padding-bottom: 110px; } .n-btn.lg { min-height: 54px; } }
/* Touch-Geräte: alle Bedienelemente mind. 44 pt hoch (UI-Review X5) */
@media (pointer: coarse) { .n-btn.sm, .n-seg button, .n-chip { min-height: 44px; } .n-chip { height: auto; } }
/* Lichtschimmer über die ganze Seite verteilt (scrollen mit), damit auch lange Seiten nicht grau wirken */
.agg-next main#app { background-image: radial-gradient(900px 700px at 96% 18%, rgba(255, 196, 0, .07), rgba(255, 196, 0, 0) 62%), radial-gradient(1000px 800px at 2% 46%, rgba(24, 195, 126, .09), rgba(24, 195, 126, 0) 62%), radial-gradient(900px 700px at 98% 72%, rgba(255, 138, 40, .07), rgba(255, 138, 40, 0) 62%), radial-gradient(1000px 700px at 10% 96%, rgba(27, 184, 176, .08), rgba(27, 184, 176, 0) 62%); background-repeat: no-repeat; }