/* ============================================================
   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 (.beta-warn-banner/.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-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).

   Ladereihenfolge (Kaskade-Lock, Ticket web-240, Muster ui-456):
     /static/tokens.css → /client/css/companion/base.css (DIESE DATEI) →
     /client/css/companion/components.css → /static/style.css (Seiten-Rest).
     base.css/components.css laden VOR dem style.css-Rest, damit
     seiten-spezifische Overrides in style.css — inkl. sämtlicher
     @media-Blöcke, die bewusst KOMPLETT dort verbleiben (auch wenn sie nur
     hierher verschobene Basis-Selektoren betreffen, s. components.css-
     Kopfkommentar) — bei gleicher Spezifität weiterhin gewinnen (Kaskade
     ist dokumentreihenfolgen-, nicht dateibasiert).

   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-/Beta-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 ===== */

/* BETA-Warn-Banner (gelockt 2026-05-25): permanent sichtbar, nicht dismissable,
   Top-of-Page (greift schon beim Login). Wording identisch zum Game-HUD
   (#hud-beta-warn in desktop.css); Gelb/Orange-Tint gewollt symmetrisch — gleiches
   Hex-Set (#ffa033 Border, #ffc266 Text), nur als horizontaler Banner statt Pill,
   weil hier die volle Page-Breite zur Verfügung steht. */
.beta-warn-banner {
  background: rgba(255, 160, 51, 0.14);
  color: #ffc266;
  border-bottom: 1px solid #ffa033;
  padding: 0.5em 1.5em;
  text-align: center;
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* PTR-Banner (ops-007): Umgebungs-Kennzeichnung fuer die Public-Test-Realm-Instanz.
   Vollbreit, ganz oben — UEBER dem .beta-warn-banner (Umgebungs-Identitaet zuerst).
   Muster gespiegelt von .beta-warn-banner, aber rot (var(--red) = Gefahr/"nicht Prod").
   Tokens statt Hex-Hardcode. Permanent, nicht dismissbar. 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); }

.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;
}

/* 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);
}