/* ============================================================
   Chat Tower — Companion-Base-CSS (web-240, Frontend-Neubau Phase 6,
   P6-Kette Glied 5/8, "style.css-Schnitt I: base + components")

   Reset + Typografie-Grundlage + globales Seiten-Chrome (Banner, Header,
   Nav, Main, Footer, Embed-Modus-Basis) — extrahiert aus dem bisher
   monolithischen web/public/style.css (10.882 Z. vor diesem Ticket).
   Architektur-Lock ui-456-Regime, analog auf Companion übertragen: reine
   Verschiebung, kein Redesign — Konsolidierung nur bei Byte-Gleichheit,
   Regel-Änderungen jeder Art sind NICHT Teil dieses Tickets. Der pages-
   Anteil (Landing/Help/Dashboard-Tabs/Highscore/Profil/Admin/Glossar/…)
   sowie das komplette Responsive-/@media-Paket bleiben vorerst in
   style.css — Teil II (web-241) zieht sie nach client/css/companion/pages/.

   Inhalt: Browser-Reset (*, html/body, safe-area-Padding, a, .muted, code,
   button-Defaults) + Layout-Grundgerüst (.ptr-banner,
   .site-header/.site-title/.site-nav/.nav-link/.nav-user/.nav-logout,
   .site-main, .site-footer) + Embed-Modus-Basis (.embed-body/.embed-surface/
   .embed-surface.ct-embed-mount [seit ui-675]/.embed-login-hint — spielt für
   den Embed-Layout-Pfad exakt dieselbe Grundgerüst-Rolle wie .site-header/
   .site-main für den Voll-Layout-Pfad, beide Pfade in
   web/src/views/layout.js) + site-weite Mobile-/Touch-Overrides (seit
   ui-675, Abschnitt am Dateiende).

   Ladereihenfolge (Kaskade-Lock, Ticket web-240, Muster ui-456):
     /static/tokens.css → /client/css/companion/base.css (DIESE DATEI) →
     /client/css/companion/components.css → die Companion-pages/*.css
     (Seiten-Rest). base.css/components.css laden VOR dem Seiten-Rest, damit
     seiten-spezifische Overrides dort bei gleicher Spezifität weiterhin
     gewinnen (Kaskade ist dokumentreihenfolgen-, nicht dateibasiert).
     ui-675: eine kleine Zahl SITE-WEITER (nicht seiten-spezifischer)
     Mobile-/Touch-Overrides fuer site-, nav- und embed-surface.ct-embed-mount
     ist aus pages/*.css hierher konsolidiert (s. Abschnitt am Dateiende) —
     durchbricht das bisherige "kein @media in base.css/components.css"
     bewusst NUR fuer echte Fall-3-Faelle, die vorher nur wegen der
     Datei-Ladereihenfolge in einer Seiten-Datei bare + Baseline-reason
     standen; base.css laedt ohnehin vor jeder Seiten-Datei.

   no-store-Mount (web/src/app.js '/client/*'-Route, identisch zu jeder
   anderen /client/*-Datei; Cache-Control: no-store, root: './', kein
   Rewrite). Bewusst NICHT /static/*: der Service-Worker cached /static/*
   stale-while-revalidate (web/public/sw.js) — hier bewusst vermieden,
   s. web/client/README.md.
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: radial-gradient(ellipse at top, #0a0f24 0%, #06080f 60%);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  min-height: 100vh;
}

/* ui-388: viewport-fit=cover (layout.js-Metas) schaltet env(safe-area-inset-*)
   scharf — Body-Padding haelt allen Fluss-Content (PTR-Banner,
   .site-header, .site-main, .site-footer) aus Notch/Dynamic-Island (top),
   Landscape-Notch/Display-Rundungen (left/right) und Home-Indikator (bottom)
   heraus. Desktop/Nicht-Notch: alle Insets 0 → Layout byte-identisch.
   Fixed-/Sticky-Elemente ankern am Viewport und ignorieren Body-Padding —
   die tragen eigene Inset-Regeln (App-Bottom-Nav .app-botnav + Sticky-Sub-Nav
   .dash-tabs im ≤600px-Block (ui-389),
   .tt-toasts, .cs-modal-backdrop, .glossar-search-bar; JS-injiziert:
   #pwa-install-bar inline in layout.js, #toast-bar in app.js,
   #cs-toast-container in cards.js). box-sizing: border-box, damit
   min-height:100vh die Insets einschliesst (kein Phantom-Scroll auf kurzen
   Seiten). */
body {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
}

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Allgemeines Text-Dimming-Utility. Bis dato fehlte ein generelles `.muted` —
   nur scoped Modifier (.socket-status.muted, .audio-mute-btn.muted) existierten,
   sodass die vielen `<span class="muted">…</span>`/`<td class="muted">` (Admin-,
   Highscore-, Balance-Views, weapon-icon-Fallback) in --text statt --muted
   rendern. Dieses Utility zieht alle auf den intendierten gedaempften Ton.
   Sicher: .audio-mute-btn.muted setzt color:var(--red) mit hoeherer Spezifitaet
   (0,2,0 > 0,1,0) und bleibt unveraendert; .socket-status.muted ist ohnehin --muted. */
.muted { color: var(--muted); }

code {
  font-family: ui-monospace, "Courier New", monospace;
  background: rgba(56, 225, 255, 0.08);
  color: var(--cyan);
  padding: 0.05em 0.4em;
  border-radius: 3px;
  font-size: 0.92em;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-2);
  padding: 0.5em 1em;
  border-radius: 4px;
  transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
button:hover:not(:disabled) {
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 12px rgba(56, 225, 255, 0.3);
}
button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ===== Layout ===== */

/* PTR-Banner (ops-007): Umgebungs-Kennzeichnung fuer die Public-Test-Realm-Instanz.
   Vollbreit, ganz oben. Permanent, nicht dismissbar, rot (var(--red) = Gefahr/
   "nicht Prod"). Tokens statt Hex-Hardcode. Gerendert iff config.ptrMode. */
.ptr-banner {
  background: rgba(255, 77, 110, 0.14);
  color: var(--red-light);
  border-bottom: 1px solid var(--red);
  padding: 0.5em 1.5em;
  text-align: center;
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4em;
  flex-wrap: wrap;
}
/* Dev-Login-Affordance: Utility-Link in der Leiste → /dev/ (Mock-Login-Index).
   Neutral-hell (var(--text), kein Game-Farb-Rollen-Konflikt), Tap-Hoehe ≥ 44px via Padding. */
.ptr-banner .ptr-devlink {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0.25em 0.5em;
  white-space: nowrap;
}
.ptr-banner .ptr-devlink:hover {
  color: #fff;
  text-decoration: underline;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8em 1.5em;
  border-bottom: 1px solid var(--line);
  background: rgba(6, 8, 15, 0.7);
  backdrop-filter: blur(4px);
}
.site-title {
  font-size: 1.1em;
  font-weight: 600;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(56, 225, 255, 0.5);
}
.site-nav { display: flex; align-items: center; gap: 1em; }
.nav-link { color: var(--text); }
.nav-user { color: var(--muted); font-size: 0.9em; }
.logout-form { margin: 0; }
.nav-logout {
  padding: 0.3em 0.7em; font-size: 0.85em;
  border: 1px solid var(--line);
  color: var(--muted);
}
.nav-logout:hover { color: var(--magenta); border-color: var(--magenta); }
/* ui-675: aktiver Header-Nav-Link (umgezogen aus pages/shared-mobile.css,
   web-225) -- SSR setzt .active + aria-current via layout() navLink(),
   surface-nav.js zieht beides nach jedem Swap nach. Transparenter
   Basis-Border verhindert den 2px-Layout-Shift beim Aktivwerden. */
.nav-link { border-bottom: 2px solid transparent; }
.nav-link.active { color: var(--cyan); border-bottom-color: var(--cyan); }

.site-main {
  max-width: 980px;
  margin: 0 auto;
  padding: 1.5em;
}

.site-footer {
  margin-top: 3em;
  padding: 1em;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85em;
  text-align: center;
}

/* =====================================================================
   Embed-Modus (web-083) — /dashboard?embed=1 fuer iframe-Inlay im Viewer.
   Kein Seiten-Chrome: kein Nav, kein Banner, kein Footer. Nur Tab-Surface.
   ===================================================================== */

/* Body im Embed: kein Radial-Gradient-BG nötig (Host-Viewer gibt den BG vor),
   transparenter BG damit der Viewer-BG durchscheint. */
.embed-body {
  background: transparent;
  min-height: 0;
}

/* Embed-Wrapper: passt sich dem iframe-Viewport an.
   Gutter links+rechts = #popin-head-Horizontal-Padding (18px, desktop.css),
   damit Username, Stat-Pills und Content auf einer geraden Spalte fluchten.
   Etwas Top-Padding damit der Username nicht an der Header-Trennlinie klebt.
   Wirkt nur im Embed-Pfad (?embed=1); Normal-/dashboard (.site-main) bleibt unverändert. */
.embed-surface {
  width: 100%;
  min-height: 100vh;
  padding: 8px 18px 0;
  box-sizing: border-box;
}

/* ui-675: generischer Setup-Fragment-Mount-Adapter (umgezogen aus
   pages/dashboard.css, ui-402) -- ueberschreibt NUR, was sich zwischen
   "volle iframe-Viewport-Surface" und "Flex-Kind im Viewer-Screen/-Popin"
   unterscheidet (Hoehe kommt vom Screen/Popin-Elternlayout, kleinerer
   Seiten-Gutter). techtree.css' tab-bedingte `:has(...)`-Erweiterungen
   dieser Klasse bleiben dort unveraendert (eigene Baseline-reason). */
.embed-surface.ct-embed-mount {
  min-height: 0;
  height: auto;
  flex: 1 1 auto;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 8px 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ui-731: Eine klebende Leiste (.subnav, components.css) haftet am Inhaltsrand des Scrollers, also 8px unter der
   Oberkante, und der Inhalt scrollt sichtbar durch den Streifen darueber. Bis 600px (wie die Leiste) steht der
   Gutter deshalb als gleich hoher Abstandhalter im scrollenden Inhalt: Layout gleich, Leiste klebt buendig.
   Spiegel fuer native Flaechen: viewer-base.css. */
@media (max-width: 600px) {
  .embed-surface.ct-embed-mount { padding-top: 0; }
  .embed-surface.ct-embed-mount::before {
    content: '';
    display: block;
    flex: none;
    height: 8px;
  }
}

/* Ausgeloggt-Hinweis im Embed (kompakt, ohne vollen Landing-Header). */
.embed-login-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2em 1em;
  color: var(--muted);
  font-size: 0.95em;
  text-align: center;
}
.embed-login-hint a {
  color: var(--cyan);
}

/* =====================================================================
   ui-675: site-weite Mobile-/Touch-Overrides (umgezogen aus
   pages/achievements.css [web-202], pages/dashboard.css [web-085] und
   pages/shared-mobile.css [ui-214/ui-394]) -- jede Regel hier war zuvor
   bare + Baseline-reason (Fall 3), weil sie site-weit auf JEDER Companion-
   Seite wirken muss (kein .dashboard-/.highscore-Scope moeglich, ohne den
   Effekt auf allen anderen Seiten zu verlieren) und deshalb NICHT in einer
   einzelnen Seiten-Datei "besessen" werden konnte. base.css laedt vor jeder
   Seiten-Datei -- die vormalige Kaskaden-Lock-Ladereihenfolge-Zwangslage
   (mehrere pages/*.css-Kandidaten mit sich widersprechenden
   Positionsanforderungen) entfaellt damit strukturell.
   ===================================================================== */
@media (max-width: 600px) {
  /* ui-214-Kanon (Phablet/kleine Tablets) + ui-389 Header-Verschlankung. */
  .site-main { padding: 1em; }
  .site-nav { display: none; }
}

@media (max-width: 480px) {
  /* web-085 /dashboard-Mobile-Fallback: Header kompakter, Benutzername aus. */
  .site-header { padding: 0.6em 1em; }
  .site-title { font-size: 0.95em; }
  .nav-user { display: none; } /* Benutzername ausblenden — spart Platz, Login-Zustand klar */
  .nav-logout {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

@media (hover: none), (pointer: coarse) {
  /* web-202 Touch-Target-Sweep (≥44px effektiv, Geraete-Smoke-Fund). */
  .nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.3em;
  }
  .nav-logout {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .site-nav {
    flex-wrap: wrap;
    row-gap: 0.4em;
  }
  /* ui-394 Touch-Target-Sweep (Geraete BREITER 600px, z.B. iPad 768). */
  .site-title {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .nav-link {
    min-width: 44px;
    justify-content: center;
  }
}