/* Chat Tower Companion -- pages/entry.css
 * P6-Kette Glied 6/8 (web-241, style.css-Schnitt II). Reine Verschiebung aus
 * web/public/style.css (Muster web-240 base.css/components.css) -- KEINE
 * Regel-Aenderung durch den Umzug selbst (Design-Lock-Aenderungen dieses
 * Tickets sind separat markiert, s. web-241-Ticket "## Notes").
 *
 * Scope: Landing (/), Play-Now-Entry-Funnel (ui-263), die Gast/Twitch-
 * Kollisions-Wahl-Seite (web-200, /auth/twitch/resolve) sowie ein winziger
 * 320px-Sweep-Rest (ui-401, nur .hero-title) -- alle drei sind Teil desselben
 * vor-Dashboard Login-/Entry-Funnels, deshalb eine gemeinsame Datei statt
 * drei Ein-Zeiler-Dateien (Dev-Schnitt).
 *
 * Kaskaden-Reihenfolge (siehe layout.js-Kommentar fuer die volle Kette):
 * tokens.css -> base.css -> components.css -> pages/{entry,help,collection,
 * build,admin,highscore,changelog,achievements,techtree,profile,dashboard,
 * shared-mobile,glossar}.css. Diese Datei muss VOR pages/dashboard.css laden
 * (.entry max-width-Override in einem spaeteren Dashboard-Mobile-Block
 * braucht die hier definierte Basisregel zuerst, s. web-241-Ticket). */


/* ===== Landing ===== */

.landing { text-align: center; padding: 3em 1em; }
.hero-title {
  font-size: 3em;
  margin: 0 0 0.3em;
  letter-spacing: -0.02em;
  color: var(--text);
  text-shadow: 0 0 20px rgba(56, 225, 255, 0.3);
}
.hero-accent {
  color: var(--magenta);
  text-shadow: 0 0 20px rgba(255, 69, 181, 0.6);
}
.hero-tagline {
  font-size: 1.1em;
  color: var(--muted);
  max-width: 600px;
  margin: 0 auto 2em;
  line-height: 1.5;
}
.hero-cta {
  display: inline-block;
  background: var(--cyan);
  color: var(--bg);
  padding: 0.8em 2em;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 0 24px rgba(56, 225, 255, 0.4);
  transition: transform 0.15s, box-shadow 0.15s;
}
.hero-cta:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 0 32px rgba(56, 225, 255, 0.6);
}

/* ===== Play-Now-Entry (ui-263) ===== */

.entry {
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

/* Primär: "Jetzt spielen" — gefüllt cyan (Funnel-Aktion) */
.cta-primary {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  font-size: 1.15em;
  letter-spacing: 0.02em;
  background: var(--cyan);
  color: var(--bg);
  padding: 0.9em 2em;
  min-height: 52px;
  border-radius: 6px;
  box-shadow: 0 0 24px rgba(56, 225, 255, 0.4);
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.cta-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 34px rgba(56, 225, 255, 0.6);
}
.cta-primary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
.cta-primary:active { transform: translateY(0); }
.cta-primary[aria-busy="true"] {
  cursor: progress;
  opacity: 0.75;
  box-shadow: 0 0 18px rgba(56, 225, 255, 0.3);
}
.cta-primary[disabled] { cursor: not-allowed; }

.spinner {
  display: none;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  vertical-align: -0.15em;
  border: 2px solid rgba(6, 8, 15, 0.35);
  border-top-color: var(--bg);
  border-radius: 50%;
  animation: ct-entry-spin 0.7s linear infinite;
}
.cta-primary[aria-busy="true"] .spinner { display: inline-block; }
@keyframes ct-entry-spin { to { transform: rotate(360deg); } }

/* Ehrlichkeits-Microcopy (Session-Loss) direkt unter dem Primär-CTA */
.cta-note {
  margin: 0.7em 0 0;
  font-size: 0.85em;
  line-height: 1.45;
  color: var(--text-dim);
}

/* Trenner */
.cta-or {
  display: flex;
  align-items: center;
  gap: 0.8em;
  color: var(--muted);
  font-size: 0.8em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 1.4em 0;
}
.cta-or::before, .cta-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Sekundär: "Login mit Twitch" — ghost/outline, klar sichtbar */
.cta-secondary {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-2);
  padding: 0.75em 1.6em;
  min-height: 48px;
  border-radius: 6px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.cta-secondary:hover {
  border-color: var(--twitch);
  color: #fff;
  background: rgba(145, 70, 255, 0.10);
}
.cta-secondary:focus-visible {
  outline: 2px solid var(--twitch);
  outline-offset: 3px;
}
.tw-glyph { width: 1em; height: 1em; fill: var(--twitch); }
.cta-secondary:hover .tw-glyph { fill: #b98bff; }
.cta-hint {
  margin: 0.55em 0 0;
  font-size: 0.82em;
  color: var(--muted);
  line-height: 1.4;
}
.cta-hint b { color: var(--magenta); font-weight: 600; }

/* web-226 (DL-4): leise dritte Zeile — Passkey-Login, nur sichtbar wenn
   dieses Gerät (localStorage) einen Passkey kennt. Bewusst kein Button-Look
   (kein drittes gleichrangiges CTA neben Primär/Sekundär) — reiner
   Text-Link-Stil, Muster aus dem abgenommenen Prototyp
   (.claude/sprint/prototypes/web-226.html). [hidden] explizit erzwungen,
   weil display:block unten sonst die native [hidden]-UA-Regel schlägt
   (gleiche Spezifität, Autor-Regel gewinnt). */
.entry-quiet {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 1em 0 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--cyan);
  font: inherit;
  font-size: 0.85em;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.entry-quiet[hidden] { display: none; }
/* web-226 must-fix (Review 2026-08-06, DL-7): der :hover-Regel-Vorgänger
   setzte die Literalfarbe #7aeaff ohne Token. Rest-Farbe ist bereits
   var(--cyan) (s.o.) — ein Hover-auf-var(--cyan) wäre ein reiner No-op, also
   gestrichen statt mit demselben Token neu geschrieben (beide Optionen laut
   Review gleichwertig, "streichen" vermeidet eine tote No-op-Regel). */

/* Status/Fehler-Region */
.entry-status {
  min-height: 1.4em;
  margin: 1.1em 0 0;
  font-size: 0.9em;
  line-height: 1.4;
}
.entry-status.err { color: var(--red); }
.entry-status.ok { color: var(--green); }
.entry-status .retry {
  margin-left: 0.5em;
  color: var(--cyan);
  text-decoration: underline;
  cursor: pointer;
}

/* ui-609 (Design-Lock DL-1, Variante A) -- ruhige Rechtszeile unter dem
   GESAMTEN Einstiegs-Block, 1:1 aus dem Prototyp (.claude/sprint/prototypes/
   ui-609.html) uebernommen. Gleicher Ton wie .cta-note/.cta-hint (caption,
   muted), Links cyan ohne Unterstrich (Hover unterstrichen). max-width:420px
   deckt sich mit .entry selbst (s.o.) -- .entry ist ein Flex-Column-
   Container mit align-items:stretch, die Kappung + margin:auto haelt die
   Zeile mittig, falls .entry je schmaler als 420px ausfaellt. */
.entry-legal {
  margin: 14px auto 0;
  max-width: 420px;
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-caption);
  line-height: 1.55;
}
.entry-legal a { color: var(--cyan); text-decoration: none; }
.entry-legal a:hover { text-decoration: underline; }

.hero-info {
  max-width: 600px;
  margin: 3em auto 0;
  text-align: left;
  padding: 1.5em;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}
.hero-info { margin-top: 2em; }
.hero-info h2 { color: var(--cyan); margin-top: 0; }
.hero-info ul { margin: 0; padding-left: 1.3em; line-height: 1.7; }
.hero-info li { color: var(--text); }
.hero-info .info-lead { line-height: 1.6; margin: 0 0 1em; color: var(--text); }
.hero-info .info-lead strong { color: var(--magenta); }
.hero-info .info-bullets { margin: 0; padding-left: 1.3em; line-height: 1.7; }
.hero-info .info-bullets em { color: var(--yellow); font-style: normal; }
.hero-info .info-foot {
  margin: 1.2em 0 0;
  padding-top: 1em;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: 0.9em;
}

/* ui-214 Breakpoint-Kanon (480/768/1100 kanonisch, 600 bewusste
   Phablet-Zwischenstufe) -- volle Doku in pages/shared-mobile.css. */
@media (max-width: 600px) {
  .hero-title { font-size: 2em; }
}

/* =====================================================================
   web-200: Kollisions-Wahl-Screen (Gast → Twitch, bestehender Account).
   Prototyp: .claude/sprint/prototypes/web-200.html — Layout/Klassennamen
   1:1 übernommen, Farbwerte durch Companion-Tokens ersetzt.
   Farb-Rollen strikt (Design-Lock): Cyan = sicher/primär, Rot = Gefahr,
   --twitch NUR als Titel-/Karten-Akzent (nicht auf Aktions-Buttons).
===================================================================== */
.choice {
  width: min(760px, 96vw);
  margin: 2.5em auto 5em;
}
.ch-head { text-align: center; margin-bottom: 1.6em; }
.ch-title { font-size: 1.7em; margin: 0 0 .35em; letter-spacing: -.01em; }
.ch-title b { color: var(--twitch); }
.ch-sub { color: var(--muted); margin: 0; line-height: 1.5; }

.choice .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; margin-bottom: 1.6em; }
.choice .pcard { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 1.1em 1.2em; }
.choice .pcard.existing { border-color: rgba(56, 225, 255, .42); }
.choice .pcard.guest { border-color: rgba(145, 70, 255, .42); }
.choice .pc-role { font-size: .75em; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .25em; }
.choice .pcard.existing .pc-role { color: var(--cyan); }
.choice .pcard.guest .pc-role { color: #b98bff; }
.choice .pc-name { font-size: 1.15em; font-weight: 700; margin-bottom: .7em; overflow-wrap: anywhere; }
.choice .pc-stats { display: grid; grid-template-columns: auto 1fr; gap: .3em .8em; font-size: .9em; }
.choice .pc-stats dt { color: var(--muted); margin: 0; }
.choice .pc-stats dd { margin: 0; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.choice .pc-stats dd .hx { color: var(--magenta); }
.choice .pc-stats dd.big { font-weight: 700; }

.choice .actions { display: flex; flex-direction: column; gap: .8em; align-items: center; }
.choice .btn {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 700;
  border-radius: 6px; padding: .85em 1.6em; min-height: 50px; width: min(460px, 100%);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.choice .btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.choice .btn-primary { background: var(--cyan); color: var(--bg); box-shadow: 0 0 22px rgba(56, 225, 255, .35); }
.choice .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 30px rgba(56, 225, 255, .55); }
.choice .btn-primary:disabled { opacity: .6; cursor: default; transform: none; }
.choice .btn-cancel { background: transparent; color: var(--muted); font-weight: 600; min-height: auto; padding: .4em; text-decoration: underline; }
.choice .btn-cancel:hover { color: var(--text); }
.choice .btn-cancel:disabled { opacity: .6; cursor: default; }

/* Danger-Zone: zweistufig */
.choice .danger {
  width: min(460px, 100%); border: 1px solid rgba(255, 77, 110, .42); border-radius: 8px;
  background: rgba(255, 77, 110, .06); padding: .9em 1em; text-align: center;
}
.choice .danger-trigger {
  background: transparent; color: var(--red); border: 1px solid rgba(255, 77, 110, .45);
  font-weight: 600; width: 100%; min-height: 46px; border-radius: 6px; cursor: pointer;
  font: inherit; padding: .6em;
}
.choice .danger-trigger:hover { background: rgba(255, 77, 110, .10); }
.choice .danger-trigger:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.choice .danger-confirm { display: none; margin-top: .2em; }
.choice .danger.open .danger-trigger { display: none; }
.choice .danger.open .danger-confirm { display: block; }
.choice .danger-warn { color: var(--red); font-size: .9em; line-height: 1.5; margin: 0 0 .7em; }
.choice .danger-warn b { color: #ff8fa3; }
.choice .btn-danger {
  background: var(--red); color: #1a0007; font-weight: 800; width: 100%; min-height: 48px;
  border-radius: 6px; border: 0; cursor: pointer; font: inherit;
}
.choice .btn-danger:hover { filter: brightness(1.08); }
.choice .btn-danger:disabled { opacity: .6; cursor: default; filter: none; }
.choice .btn-danger:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.choice .danger-back {
  background: transparent; border: 0; color: var(--muted); cursor: pointer; font: inherit;
  text-decoration: underline; margin-top: .5em; font-size: .85em;
}
.choice .danger-back:focus-visible { outline: 2px solid var(--muted); outline-offset: 2px; }

.choice .out { margin-top: 1.2em; text-align: center; color: var(--text-dim); font-size: .9em; min-height: 1.3em; }

@media (max-width: 560px) {
  .choice .cards { grid-template-columns: 1fr; }
}

/* =====================================================================
   ui-401: 320px-Sweep — horizontale Overflows der iPhone-SE-Klasse
   (Messlauf 2026-08-04: Headless-Chrome, iPhone-UA via --user-agent-Flag,
   320x568/dsf2/mobile:true; Befunde + Vorher/Nachher-Tabelle im Ticket).

   Drei Befunde, drei getrennte Fixes:
   - .achievement-grid: minmax(300px,1fr)-Floor → min(300px,100%)
     (pages/achievements.css, s. Kommentar dort).
   - .app-botnav: nur SYMPTOM (fixed left/right:0 spannte den vom Hero-
     Overflow expandierten Layout-Viewport ab) — Haertung minmax(0,1fr)
     im ui-389-Block, kausaler Fix ist der Hero-Block HIER.
   - .hero-title: die Landing-Headline unten.

   POSITION AM DATEIENDE: die ≤374px-Stufe muss die 2em-Stufe des
   generischen ≤600px-Blocks oben in dieser Datei per Source-Order schlagen
   (gleiche Spezifitaet 0,1,0). */

/* Landing-Hero: „Chat Tower Companion" ist per   bewusst EINE
   unbrechbare Zeile (landing.js) und misst bei der ≤600px-Stufe (2em =
   30px) ~372px — jeder Layout-Viewport unter 372px laeuft damit ueber
   (320er: span.hero-accent right=346, Seite 347/320; die 360er-Klasse
   rechnerisch ebenso). Der Overflow expandierte zudem den Layout-
   Viewport, wodurch die fixed .app-botnav (left/right:0) auf 347px
   mitwuchs — deshalb stand die Nav mit in der Offender-Liste.
   Grenze 374px statt 360px: iPhone-375 ist die kleinste real
   verbreitete Breite, die mit der 2em-Zeile nachweislich auskommt
   (right=373.5 @375). 1.35em (20.25px) → Zeile ~251px: passt @320 in
   die 260px-Content-Box (2x 1em .site-main + 2x 1em .landing Padding),
   kein Wortbruch, keine Markup-Aenderung. ≥375px byte-identisch. */
@media (max-width: 374px) {
  .hero-title { font-size: 1.35em; }
}

/* =====================================================================
   web-283: Referral-Landing (Geworbenen-Sicht) — .rf-invite-hero/.rf-check/
   .rf-privacy/.rf-welcome 1:1 aus dem Fifty-abgenommenen Prototyp
   (.claude/sprint/prototypes/ui-576-referral.html, Geworbenen-Sicht,
   Design-Lock 2026-09-02) übernommen, nur die absoluten px-Werte des
   Standalone-Mockups auf die em-Konvention DIESER Datei umgerechnet (kein
   eigenes :root im echten Cascade nötig — tokens.css liefert --green/--gold/
   --cyan/--border/--muted/--text bereits, s. dortige Definition).
   Konsumenten: views/landing.js (Pre-Account-Hero, AK2, ersetzt
   .hero-title/.hero-tagline wenn ?ref=<code> auflöst) UND
   views/referral-landing.js referralProgressPage() (Post-Account-
   Fortschritt/Qualifiziert-Banner, AK3/AK4) — beide rendern dieselbe
   referralInviteSection(), daher EIN CSS-Block für beide. Kein eigenes
   .hero-title-Overflow-Risiko wie der 320px-Sweep-Block direkt darüber:
   .rf-invite-hero h1 nutzt KEIN &nbsp;-erzwungenes Unbrechen, der Text
   wickelt bei schmalen Viewports natürlich um. ===================================================================== */
.rf-invite-hero { text-align: center; padding: 0.5em 0 0.9em; }
.rf-invite-hero h1 { font-size: 1.6em; color: var(--text); margin: 0 0 0.25em; }
.rf-invite-hero .sub { color: var(--muted); font-size: 0.9em; }
.rf-check {
  display: flex; align-items: center; gap: 0.7em; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 0.6em 0.8em; margin: 0.55em auto 0; max-width: 480px;
  background: rgba(255, 255, 255, 0.02);
}
.rf-check.ok { border-color: rgba(94, 255, 138, 0.5); }
.rf-check .st { flex: 0 0 22px; text-align: center; }
.rf-check.ok .st { color: var(--green); }
.rf-check .lbl { font-size: 0.92em; color: var(--text); }
.rf-check .lbl small { display: block; color: var(--muted); font-size: 0.82em; }
.rf-check .prog { margin-left: auto; font-size: 0.85em; color: var(--muted); white-space: nowrap; }
.rf-privacy {
  font-size: 0.8em; color: var(--muted); margin: 0.7em auto 0; max-width: 480px; text-align: center;
}
.rf-welcome {
  border: 1px solid var(--cyan); border-radius: 10px;
  padding: 0.7em 0.9em; margin: 0.8em auto 0; max-width: 480px;
  background: rgba(56, 225, 255, 0.07); color: var(--text); font-size: 0.92em;
  text-align: center;
}
.rf-welcome svg { vertical-align: -2px; }
.rf-continue { text-align: center; margin-top: 1.5em; }