/* ============================================================
   ARKADE 2.0 — Base & Layout
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* Ambiente Hintergrund-Aurora (Runde 3, vertieft Runde 7) — Runde 10: statisch statt animiert.
   Die background-position-Animation lief permanent auf JEDEM Screen und zwang den Browser, eine
   vollflächige Mehrfach-Gradient-Fläche laufend neu zu malen (kein Compositor-Fastpath möglich) —
   größter Einzelfaktor für spürbares Lag. Der Drift war ohnehin kaum wahrnehmbar, der Perf-Gewinn
   durchs Weglassen ist entsprechend groß gegenüber dem minimalen optischen Verlust. */
/* Runde 16: zwei dezente Glow-Flecken (Pink oben-links, Hellblau unten-rechts) statt der
   Runde-15-Einzelfarbe oder der alten Mehrfarb-Aurora — ruhig genug, um nicht zu "gamen",
   aber sofort als das neue Zwei-Farb-Duo erkennbar statt einer neutralen Fläche. */
/* Runde 18: der weiche Zwei-Farb-Glow-Fleck ist stark zurückgenommen (nur noch EIN sehr
   dezenter Akzent-Schimmer statt zwei großer Verlaufsflächen) — ein flacher, brutalistischer
   Hintergrund lebt von der harten Gitter-Textur unten (#bg-grid, jetzt verstärkt), nicht von
   ambienten Farbwolken, die genau die "immer derselbe weiche Glow"-Signatur der letzten 4 Runden waren. */
/* Arkade 3.0: der Hintergrund ist wieder eine TIEFE statt einer Fläche — drei weit auseinander
   liegende, sehr weiche Farbwolken (Violett oben-rechts, Cyan unten-links, Magenta mittig) über
   einem dunklen Grund. Bewusst STATISCH (kein background-position-Drift): der animierte Verlauf
   war in Runde 10 als größter Einzelfaktor für Ruckeln identifiziert worden, weil eine
   vollflächige Mehrfach-Gradient-Fläche dabei permanent neu gemalt werden muss. */
#bg-mesh {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(1100px 620px at 92% -6%, var(--accent-glow), transparent 62%),
    radial-gradient(900px 560px at 4% 104%, rgba(34, 211, 238, 0.14), transparent 60%),
    radial-gradient(700px 480px at 46% 42%, rgba(244, 114, 182, 0.07), transparent 68%),
    var(--bg-0);
}
#bg-mesh::after {
  content: ''; position: absolute; inset: 0;
  background: none;
}
/* Das harte Terminal-Gitter war die Signatur des flachen Looks (Runde 18: auf 0.3 verstärkt).
   Im Tiefen-Look stört es die Räumlichkeit, deshalb stark zurückgenommen und nach oben hin
   ausgeblendet — es bleibt nur als kaum merkliche Struktur, die den Flächen Halt gibt. */
#bg-grid {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.10;
  background-image:
    linear-gradient(var(--border-hi) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-hi) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent 80%);
}

a { color: var(--accent-2); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; }
::selection { background: var(--accent-glow); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }
::-webkit-scrollbar-track { background: transparent; }

h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
h1 { font-size: clamp(28px, 4vw, 38px); }
h2 { font-size: clamp(21px, 3vw, 27px); }
h3 { font-size: 17px; }
h4 { font-size: 14.5px; }
p { line-height: 1.6; }
.mono { font-family: var(--font-mono); }
.dim { color: var(--text-dim); }
.mut { color: var(--text-mut); }
.center { text-align: center; }
.hidden { display: none !important; }

/* ---------- App Shell ---------- */
#app { display: flex; min-height: 100dvh; }

/* Navigation 3.0 (Arkade 3.0): Die Seitenleiste ist auf dem Desktop WIEDER DA — sie trägt jetzt
   die neue zweistufige Struktur (5 Bereiche mit ihren Seiten darunter, siehe A.NAV_GROUPS in
   js/main.js). Runde 13 hatte sie zugunsten einer flachen Tab-Leiste abgeschafft; genau die ist
   mit zuletzt 12 Einträgen unübersichtlich geworden. Auf dem Handy bleibt die Leiste versteckt,
   dort übernehmen Bottom-Nav (Bereiche) + Tab-Leiste oben (Seiten des Bereichs). */
#app { display: flex; }
#sidenav {
  display: flex; flex-direction: column; gap: 2px; width: var(--nav-w); flex-shrink: 0;
  padding: 20px 14px; position: sticky; top: 0; height: 100dvh; overflow-y: auto;
  background: color-mix(in srgb, var(--bg-1) 70%, transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  border-right: var(--border-w) solid var(--border);
}
#main { display: flex; flex-direction: column; min-width: 0; }

/* Bereichs-Überschrift in Sidebar/Drawer */
.nav-group-label {
  display: flex; align-items: center; gap: 8px; margin: 16px 0 6px; padding: 0 10px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .10em;
  text-transform: uppercase; color: var(--text-mut);
}
.nav-group-label:first-child { margin-top: 0; }
.nav-group-label .ngl-ic { font-size: 13px; }
/* Seiten eines Bereichs stehen eingerückt darunter */
.nav-item.nav-sub { padding-left: 20px; font-size: 14.5px; }

/* Die Sichtbarkeits-Regeln der Tab-Leiste stehen bewusst am DATEIENDE (siehe unten):
   die ursprüngliche #toptabs-Regel weiter unten setzt display:flex, und bei gleicher
   Spezifität gewinnt die später notierte Regel. */

/* Runde 18 (Nutzer-Fund): bei vielen Tabs/Kategorien (Nav, Shop, Admin) war der Overflow bisher
   per versteckter Scrollbar nur durch blindes Wischen erreichbar — auf Mobile/iPad nicht immer
   offensichtlich, dass da noch mehr ist. Jetzt ein sichtbarer, dünner, zum Design passender
   Scroll-"Regler" statt einer komplett unsichtbaren Scrollbar — siehe .scroll-x-visible unten. */
#toptabs {
  display: flex; gap: 8px; padding: 10px clamp(16px, 4vw, 40px) 14px; overflow-x: auto;
  justify-content: center;
  background: color-mix(in srgb, var(--bg-0) 78%, transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  border-bottom: var(--border-w) solid var(--border);
  position: sticky; top: 0; z-index: 29;
}
#toptabs, .shop-tabs { scrollbar-width: thin; scrollbar-color: var(--accent) var(--surface); }
#toptabs::-webkit-scrollbar, .shop-tabs::-webkit-scrollbar { height: 6px; }
#toptabs::-webkit-scrollbar-track, .shop-tabs::-webkit-scrollbar-track { background: var(--surface-hi); border-radius: var(--r-pill); }
#toptabs::-webkit-scrollbar-thumb, .shop-tabs::-webkit-scrollbar-thumb { background: var(--accent); border-radius: var(--r-pill); }
#toptabs .tt {
  display: flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: var(--r-pill);
  background: var(--surface); border: var(--border-w) solid var(--border); color: var(--text-dim); font-weight: 700; font-size: 14px;
  white-space: nowrap; cursor: pointer; transition: all .15s var(--ease-out);
}
#toptabs .tt .tt-ic { font-size: 16px; }
#toptabs .tt:hover { border-color: var(--border-hi); color: var(--text); }
#toptabs .tt.active { background: var(--grad-accent); color: #0a0b10; border-color: transparent; box-shadow: var(--sh-glow), var(--lift-strong); }
@media (max-width: 680px) { #toptabs .tt { padding: 8px 14px; font-size: 13px; } }

/* Runde 13: #sidenav selbst ist jetzt display:none (oben) — diese Regeln bleiben für den Mobile-
   Drawer aktiv, der dieselben Klassen (.brand/.nav-item/.nav-user) wiederverwendet. */
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 22px; position: relative; z-index: 1; }
/* Runde 16: Logo in der neuen Blob-Signature-Form (weder Sechseck aus der Vor-15-Ära noch
   das schlichte Quadrat aus Runde 15), dezenter Zwei-Farb-Glow-Puls */
.brand .logo {
  width: 42px; height: 42px; border-radius: var(--r-md);
  background: var(--grad-accent); display: grid; place-items: center; font-size: 20px;
  border: var(--border-w) solid transparent; box-shadow: var(--sh-md), var(--lift-strong);
  animation: brandGlow 4s ease-in-out infinite;
}
@keyframes brandGlow { 0%,100% { box-shadow: var(--sh-md), var(--lift-strong); } 50% { box-shadow: var(--sh-md), var(--glow-accent), var(--lift-strong); } }
.brand .name { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.brand .name span { color: var(--accent); }

.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: var(--r-md); color: var(--text-dim); font-weight: 600; font-size: 15px;
  border: var(--border-w) solid transparent; transition: all 0.15s var(--ease-out); position: relative; z-index: 1;
}
.nav-item .ni-ic { font-size: 18px; width: 22px; text-align: center; transition: transform .25s var(--ease-spring); }
.nav-item:hover { background: var(--surface-hi); color: var(--text); border-color: var(--edge-line); }
.nav-item:hover .ni-ic { transform: scale(1.15); }
.nav-item.active {
  background: var(--grad-accent);
  color: #0a0b10; border-color: transparent; box-shadow: var(--sh-glow), var(--lift-strong);
  font-weight: 800;
}
.nav-item.active .ni-ic { filter: none; }
.nav-item.active::before {
  content: ''; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 64%; border-radius: var(--r-pill); background: var(--accent);
}
.nav-spacer { flex: 1; }

.nav-user {
  display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--r-md);
  background: var(--surface-hi); border: var(--border-w) solid var(--edge-line); cursor: pointer; transition: all .15s var(--ease-out);
  position: relative; z-index: 1;
}
.nav-user:hover { border-color: var(--accent); box-shadow: var(--sh-sm), var(--lift); transform: translateY(-1px); }
#nav-user-av { border-radius: 50%; box-shadow: 0 0 0 2px var(--edge-line-hi); }

/* Main content */
#main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Topbar */
#topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px; padding: 14px clamp(16px, 4vw, 40px);
  background: color-mix(in srgb, var(--bg-0) 72%, transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  border-bottom: var(--border-w) solid var(--border);
}
#topbar .tb-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
#topbar .tb-spacer { flex: 1; }
/* Arkade-Welt: das ☰-Menü ersetzt die alte Sidebar/Bottomnav komplett — auf JEDER Breite sichtbar,
   nicht mehr nur auf Mobile (siehe js/main.js menuEntries()/buildMenuItems()). */
#menuBtn { font-size: 18px; }

.wallet { display: flex; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 10px; border-radius: var(--r-pill);
  background: var(--surface-hi); border: var(--border-w) solid var(--edge-line); font-weight: 800; font-size: 14.5px;
  font-family: var(--font-mono); white-space: nowrap; transition: transform .15s var(--ease-out), box-shadow .15s, border-color .2s;
}
.chip { box-shadow: var(--sh-sm), var(--lift); }
.chip .ic { font-size: 16px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); }
.chip.coin { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 55%, transparent); background: var(--surface-hi); }
.chip.coin .ic { background: rgba(255, 176, 32, 0.18); }
.chip.gem { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 55%, transparent); background: var(--surface-hi); }
.chip.gem .ic { background: rgba(34, 211, 238, 0.18); }

/* Runde 16: eigene animierte "3D"-Währungssymbole (SVG-Flip/Facetten-Glanz statt echtem 3D-Modell,
   da kein 3D-Modellierungs-Tool verfügbar ist — wirkt hochwertiger als flaches Emoji). */
.coin3d, .gem3d { perspective: 60px; }
.coin3d svg, .gem3d svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35)); }
.coin3d svg { animation: coinFlip 3.2s linear infinite; transform-style: preserve-3d; }
@keyframes coinFlip { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }
.gem3d svg { animation: gemShine 3.6s ease-in-out infinite; }
@keyframes gemShine { 0%, 100% { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35)) brightness(1); } 50% { filter: drop-shadow(0 1px 6px rgba(34,211,238,0.55)) brightness(1.2); } }
html.low-power .coin3d svg, html.tab-hidden .coin3d svg,
html.low-power .gem3d svg, html.tab-hidden .gem3d svg { animation: none; }
.chip.lvl { color: #fff; cursor: pointer; border-color: var(--accent); background: var(--surface-hi); }
.chip.lvl .ic { background: var(--grad-accent); color: #0a0b10; }
.chip.lvl:hover, .chip.coin:hover, .chip.gem:hover { border-color: var(--border-hi); transform: translateY(-2px); box-shadow: var(--sh-md), var(--lift-strong); }

#view { padding: clamp(18px, 3.5vw, 40px); max-width: var(--maxw); width: 100%; margin: 0 auto; flex: 1; }
/* Bugfix (Runde 17, beim Testen der Wortsuche gefunden): #game-host (wo JEDES Spiel rendert,
   siehe framework.js A.openGame) hatte anders als #view GAR KEIN Padding — auf Mobile fehlte
   dadurch die Bottomnav-Freihaltung, wodurch Inhalte am unteren Spielrand (Buttons/HUD/Gitter-
   Zeilen) hinter der fixierten #bottomnav landen und dort weder sichtbar noch klickbar sind.
   Betraf ALLE Spiele auf schmalen Viewports, nicht nur neu hinzugefügte. */
#game-host { padding: clamp(18px, 3.5vw, 40px); max-width: var(--maxw); width: 100%; margin: 0 auto; }

/* Screen transitions */
.screen { display: none; animation: screenIn 0.4s var(--ease); }
.screen.active { display: block; }
@keyframes screenIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* View (main content) transition on navigation — Runde 3 */
#view.view-enter { animation: viewIn var(--dur-slow) var(--ease-out); }
@keyframes viewIn { from { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* Stagger children of a grid/stack on first paint — apply class "stagger-in" */
.stagger-in > * { animation: staggerItem var(--dur-slow) var(--ease-out) backwards; }
.stagger-in > *:nth-child(1) { animation-delay: calc(var(--stagger) * 1); }
.stagger-in > *:nth-child(2) { animation-delay: calc(var(--stagger) * 2); }
.stagger-in > *:nth-child(3) { animation-delay: calc(var(--stagger) * 3); }
.stagger-in > *:nth-child(4) { animation-delay: calc(var(--stagger) * 4); }
.stagger-in > *:nth-child(5) { animation-delay: calc(var(--stagger) * 5); }
.stagger-in > *:nth-child(6) { animation-delay: calc(var(--stagger) * 6); }
.stagger-in > *:nth-child(7) { animation-delay: calc(var(--stagger) * 7); }
.stagger-in > *:nth-child(8) { animation-delay: calc(var(--stagger) * 8); }
.stagger-in > *:nth-child(n+9) { animation-delay: calc(var(--stagger) * 9); }
@keyframes staggerItem { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }

@media (max-width: 860px) {
  #app { display: block; }
  /* Runde 21 (Responsive-Audit): vorher wurde der Diamanten-Kontostand auf Mobile komplett
     ausgeblendet statt nur verkleinert — die Währung war unter 861px unsichtbar. Jetzt kompakter
     (kein Innenabstand-Luxus, kleinere Schrift) statt komplett weg. */
  .wallet .chip.gem { padding: 5px 8px; font-size: 11px; gap: 4px; }
}

/* Tablet / iPad (portrait ~768, landscape ~1024) */
@media (min-width: 861px) and (max-width: 1180px) {
  :root { --nav-w: 208px; }
  #view { padding: 26px 28px; }
}
/* Large phones & small tablets: tighten hero + grids */
@media (max-width: 680px) {
  #topbar { padding: 12px 14px; gap: 10px; }
  #topbar .tb-title { font-size: 16px; }
  .chip { padding: 7px 10px; font-size: 12.5px; }
  .section-head { flex-wrap: wrap; gap: 6px; }
  .section-head h2 { font-size: 20px; }
  .panel { padding: 16px; }
  .panel.pad-lg { padding: 20px; }
  .grid.cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .gcard { min-height: 150px; }
  .gcard .gc-art { height: 88px; font-size: 38px; }
  .modal { padding: 20px; border-radius: var(--r-lg); }
}
/* Small phones */
@media (max-width: 400px) {
  .grid.cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hud .hud-item { min-width: 54px; padding: 6px 9px; }
  .hud .hud-item .hv { font-size: 15px; }
  .btn { padding: 11px 16px; }
}
/* Ensure comfortable touch targets on touch devices */
@media (pointer: coarse) {
  .btn, .iconbtn, .pill, .shop-tab, .nav-item, .bn { min-height: 44px; }
  .cell { min-height: 40px; }
}
/* Never let the page scroll sideways. #view bewusst NICHT hier — es hat weiter oben schon ein
   eigenes max-width:var(--maxw), das durch ein blindes "100%" hier (gleiche Spezifität, aber
   später in der Kaskade) auf breiten Bildschirmen überschrieben wurde: #view füllte dadurch die
   GESAMTE Fensterbreite statt bei --maxw zu zentrieren — Widgets landeten links geklumpt, riesige
   leere Fläche rechts (auf breiten Desktops/iPads besonders auffällig, vom Nutzer gemeldet). */
#main, body { max-width: 100%; }
.stage { max-width: 100%; }

/* Slide-in mobile drawer */
#drawer { position: fixed; inset: 0; z-index: 60; display: none; }
#drawer.open { display: block; }
#drawer .dr-scrim { position: absolute; inset: 0; background: var(--overlay); }
/* ---------- Sichtbarkeit der Unter-Navigation (muss NACH der #toptabs-Basisregel stehen) ----------
   Die Tab-Leiste oben zeigt nur noch die Seiten des aktiven Bereichs. Sie erscheint deshalb nur,
   wenn der Bereich überhaupt mehrere Seiten hat (Klasse .has-subnav aus renderTopTabs()), und auf
   dem Desktop gar nicht — dort listet die Sidebar bereits alle Bereiche samt Seiten auf. */
#toptabs:not(.has-subnav) { display: none; }
@media (min-width: 861px) { #toptabs, #toptabs.has-subnav { display: none; } }

#drawer .dr-panel {
  position: absolute; top: 0; left: 0; bottom: 0; width: 272px; padding: 20px 14px;
  background: var(--glass-bg), var(--bg-1);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 1.4)); backdrop-filter: blur(calc(var(--glass-blur) * 1.4));
  border-right: var(--border-w) solid var(--glass-border); box-shadow: var(--sh-xl);
  display: flex; flex-direction: column; gap: 6px; animation: drawerIn .3s var(--ease); overflow-y: auto;
}
@keyframes drawerIn { from { transform: translateX(-100%); } to { transform: none; } }