/* Chat Tower Companion -- pages/shared-mobile.css
 * P6-Kette Glied 6/8 (web-241). Reine Verschiebung aus web/public/style.css.
 * Scope: seiten-UEBERGREIFENDE mobile Chrome/Touch-Konzepte -- der ui-214-
 * Breakpoint-Kanon (Referenz-Kommentar + sein generisches .site-main-
 * Fragment), die globale App-Bottom-Nav (ui-389), der 44px-Touch-Target-
 * Sweep fuer Nicht-Build-Surfaces (ui-394), die Client-Navigation-Aktiv-
 * Anzeige (web-225). Bewusst EIN File statt drei winzige Dateien -- alle
 * drei sind "wirkt auf (fast) jeder Companion-Seite", keine einzelne
 * "Fläche" im engeren Sinn.
 *
 * KASKADEN-LOCK (kritisch): MUSS NACH ALLEN anderen pages/*.css-Dateien
 * AUSSER pages/glossar.css laden (ui-394 gewinnt bewusst gegen viele
 * Basisregeln in Build/Achievements/Collection/Dashboard/Highscore/Techtree
 * -- exakt das, was der ui-394-eigene Kopfkommentar unten als "POSITION AM
 * DATEIENDE IST KASKADEN-KRITISCH" beschreibt, hier fortgesetzt auf
 * Datei-Ebene). MUSS VOR pages/glossar.css laden (#glossar-search
 * min-height wird dort nochmal spezifischer ueberschrieben).
 *
 * Zwei Fragmente unten (ui-214-Kanon-Ausschnitt fuer .site-main, ui-204-
 * Glyph-Tooltip-Touch-Fix) waren im Original-style.css TEIL eines groesseren
 * @media-Blocks, dessen andere Regeln in ANDERE pages/*.css-Dateien
 * gewandert sind (s. dortige Kommentare) -- jedes Fragment traegt hier
 * deshalb einen EIGENEN, vollstaendigen @media(...)-Wrapper (synthetisch
 * nachgebaut, Original hatte nur EINEN gemeinsamen Wrapper). Verhalten
 * bleibt identisch (dieselbe Media-Bedingung, dieselben Deklarationen) --
 * nur die Datei-Struktur macht die vormals implizite Bedingung an jeder
 * Stelle wieder explizit. */


/* ===== Mobile — Breakpoint-Kanon (ui-214) =====
 *
 * Drei kanonische Stufen:
 *   ≤480 px  — Phone (gängige Phones: 390/414 px)
 *   ≤768 px  — Tablet/Phablet (iPad-Portrait-Grenze)
 *   ≤1100 px — Layout-Collapse (.cs-layout 2-sp → 1-sp)
 *
 * Bestehende 600 px-Blöcke sind KEIN Fehler: 600 px ist ein etabliertes
 * Phablet/kleines-Tablet-Level, das zwischen Phone (480) und Tablet (768) liegt.
 * Es wird bewusst als vierte Hilfsstufe beibehalten, da ein Verschieben auf 768 px
 * Tab-Strip, Inventar-Grid und Draw-Leiste sichtbar früher umbrechen ließe.
 * Ebenso 560 px (Audio-Panel, DL-7) — liegt zwischen 480 und 768, eigene Semantik.
 * Neue Regeln ab ui-214 nutzen nur die drei kanonischen Stufen.
 *
 * ============================================================================================= */

/* --- ≤600 px: Phablet/kleine Tablets (bewusst beibehalten, s. Kanon-Kommentar oben) --- */
@media (max-width: 600px) {
  .site-main { padding: 1em; }
}

@media (hover: none), (pointer: coarse) {
  /* Glyph-Tooltip: Bubble umbricht auf schmalem Viewport statt am Rand abzuschneiden */
  .glyph-tip[data-tip]:hover::after,
  .glyph-tip[data-tip]:focus::after {
    white-space: normal;
    max-width: min(72vw, 240px);
    width: max-content;
  }
}

/* =====================================================================
   ui-389: Globale App-Bottom-Nav + verschlankter Mobile-Header (≤600px)

   Eine ECHTE App-Navigation fuer den Companion (web-221 Phase 1): 4 App-
   Ziele (Spielen → /viewer.html · Hexa → /dashboard · Rang → /highscore ·
   Profil → /u/<login> bzw. Login → /auth/twitch) als fixed Bottom-Nav auf
   ALLEN Voll-Layout-Surfaces (Markup: layout.js appBottomNav(); der embed-
   Pfad bleibt Chrome-frei). Getrennt von der Dashboard-Sub-Nav (.dash-tabs,
   Sticky-Top-Strip seit ui-389 — Architektur-Lock: Dashboard-Tabs sind
   Dashboard-Inhalt, keine App-Ziele).

   Optik-Referenz (Design-Lock B): die kanonische Mobile-Viewer-Bottom-
   Nav (.nav in web/client/css/mobile.css) — 4er-Grid, border-top var(--line), Flaeche rgba(13,19,34,
   .92) (== var(--card-bg)-Token, s.u.), Buttons min-height 56px, Icon 19px
   ueber Label 11px, --muted → --cyan aktiv, ::before-Top-Marker.

   Header (Design-Lock C/D): bei ≤600px verschwindet die umbrechende
   .site-nav-Textnav; der Header behaelt .site-title + das „⋯"-<details>-
   Popover (Guide/Glossar/Patch-Notes + Logout/Login, Markup layout.js).
   Desktop (>600px): BEIDE Elemente display:none bzw. Textnav wie bisher —
   Desktop-Chrome unangetastet (Lock).
   ===================================================================== */

/* Desktop-Basis: Nav + „⋯"-Menue existieren im DOM jeder Voll-Layout-Seite
   (layout.js rendert sie immer), sind aber nur ≤600px sichtbar. Gleiche
   Spezifitaet wie die @media-Regeln unten → die gewinnen per Datei-Position. */
.app-botnav { display: none; }
.site-more { display: none; }

@media (max-width: 600px) {
  /* --- Header verschlanken (Lock C): Textnav aus, „⋯"-Menue an --- */
  .site-nav { display: none; }
  .site-more {
    display: block;
    position: relative; /* Anker fuers absolute Popover */
  }
  /* <summary> als 44px-Tap-Button (Lock G). list-style/::-webkit-details-marker:
     die native Aufklapp-Pfeil-Markierung aus (Firefox bzw. Chrome/Safari). */
  .site-more-btn {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: var(--muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
    user-select: none;
  }
  .site-more-btn::-webkit-details-marker { display: none; }
  .site-more[open] .site-more-btn { color: var(--text); background: var(--panel); }
  /* Popover (Lock D): schlichte var(--panel)-Flaeche mit var(--line)-Border,
     rechtsbuendig unterm Button. ACHTUNG Stacking: das z-index:80 wirkt nur
     INNERHALB des .site-header-Stacking-Kontexts (dessen backdrop-filter
     erzeugt einen, Paint-Level 0) — dass das Menue als transienter Top-Layer
     ueber Sub-Nav (30) und App-Botnav (50) liegt, stellt erst die
     .site-header:has([open])-Anhebung unten sicher (ui-398). */
  .site-more-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 80;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--card-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    padding: 4px;
  }
  .site-more-menu a,
  .site-more-menu button {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    color: var(--text);
    font-size: 14px;
    text-decoration: none;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
  }
  .site-more-menu a:hover,
  .site-more-menu button:hover {
    background: var(--bg-2);
    text-decoration: none;
  }
  .site-more-logout { margin: 0; display: flex; }
  .site-more-logout button { flex: 1; color: var(--muted); }
  /* ui-398 (Defekt 1): Bei OFFENEM Menue den ganzen Header-Kontext ueber die
     Dashboard-Schichten heben. Ohne das malen der Kontext-Pillen-Strip
     (.dashboard .dash-header — backdrop-filter erzeugt einen Stacking-
     Kontext auf Paint-Level 0, die spaetere DOM-Position gewinnt gegen den
     frueheren .site-header-Kontext) und die Sticky-Sub-Nav (.dash-tabs,
     z-30) ueber das Popover und fangen dessen Taps ab (Messbefund 390x844:
     elementFromPoint auf „Glossar"/„Patch-Notes"/„Logout" traf
     dash-header/dash-tab statt der Links). Transient via :has([open])
     statt permanentem z-index: ausserhalb des Menue-Moments soll der
     Header KEINE eigene Schicht sein (gezielte Anhebung, Ticket-Lock —
     z.B. darf das fixed #tt-tip (50) nahe der Oberkante nicht dauerhaft
     vom Header uebermalt werden). 60 = ueber Sub-Nav (30) + App-Botnav
     (50), unter #ct-tip (250, ui-415 — vormals 80), #popin-scrim (200),
     .cs-modal-backdrop (260, ui-448 — vormals 100), .ob-wt (300, lokal im
     Popin gefangen) und #toast-bar/PWA-Bar (9999). Haelt auch nach einem
     web-225-Surface-Swap: Header + Menue bleiben beim Swap stehen, die
     Regel ist DOM-unabhaengig. */
  .site-header:has(.site-more[open]) {
    position: relative;
    z-index: 60;
  }

  /* --- App-Bottom-Nav (Lock B — Werte gespiegelt von mobile.css .nav,
     Flaechen-/Grid-Werte exakt der Design-Lock-Satz) --- */
  .app-botnav {
    display: grid;
    /* ui-401: minmax(0,1fr) statt 1fr — nacktes 1fr hat einen auto-min-content-
       Floor, ein (kuenftig) laengeres Slot-Label koennte das fixed Grid ueber
       den Viewport schieben. Bei den heutigen 4 Kurzlabels identisches Layout
       (Items brauchen ~50px bei 80px-Tracks @320px). Der 347px-Messbefund auf
       der Landing kam NICHT aus der Nav selbst: die fixed Nav (left/right:0)
       spannte nur den durch den .hero-title-Overflow expandierten Layout-
       Viewport ab (Item 86.8px statt 80px @320) — kausaler Fix ist der
       Hero-Block am Datei-Ende, hier nur die Haertung. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50; /* wie die fruehere ui-318-Bottom-Nav: ueber Content, unter Modals/Toasts */
    border-top: 1px solid var(--line);
    /* var(--card-bg) == rgba(13,19,34,.92) — exakt der Lock-B-Wert als
       bestehendes Token (tokens.css: „var(--bg2) @ 92%"). Bewusst KEIN neues
       Token und kein Literal (Ticket-Lock „Farben via var(--*)"). */
    background: var(--card-bg);
    /* ui-388 (viewport-fit=cover): bottom:0 ankert an der PHYSISCHEN Display-
       Unterkante — Insets heben die Slots ueber den iOS-Home-Indikator bzw.
       aus den Landscape-Rundungs-Zonen; der Nav-Hintergrund fuellt bis zum
       Rand durch. Die Content-Reservierung (body.has-app-botnav unten)
       rechnet exakt mit diesem Wachstum. Desktop/Nicht-Notch: Insets 0. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
  .app-botnav-item {
    min-height: 56px; /* Touch-Target (Lock B/G) */
    min-width: 0; /* ui-401: Grid-Item darf unter min-content schrumpfen (Paar zur minmax(0,1fr)-Haertung oben); 44px-Tap-Flaeche haengt an min-height, nicht hieran */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    position: relative; /* Anker fuer den ::before-Top-Marker */
    color: var(--muted);
    font-size: 11px; /* Label-Groesse (Lock B); Icon-Groesse 19px via SVG-Attribute */
    font-weight: 500;
  }
  .app-botnav-item:hover {
    color: var(--text);
    text-decoration: none; /* globales a:hover-Underline neutralisieren */
  }
  .app-botnav-icon {
    display: inline-flex;
    line-height: 1;
  }
  .app-botnav-item.active { color: var(--cyan); }
  /* Aktiv-Marker: 2px-Cyan-Balken oben (Lock B, „wie ui-318 .dash-tab.active
     ::before" — A11y: Farbe UND ein zweiter visueller Indikator; die 22%-
     Flanken kommen aus dem Prototyp ui-389.html .botnav button.on::before). */
  .app-botnav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 22%;
    right: 22%;
    height: 2px;
    background: var(--cyan);
    border-radius: 0 0 2px 2px;
  }

  /* --- Content-Reservierung: der Body-Fluss endet sonst hinter der fixed
     Nav (Footer/letzte Panels unerreichbar). Ersetzt die frueheren
     Dashboard-/Profil-lokalen padding-bottom-Reservierungen des ui-318-
     Blocks (zurueckgebaut, s. dort) — jetzt global, weil die Nav auf allen
     Voll-Layout-Surfaces liegt. Ueberstimmt das ui-388-Basis-Inset-Padding
     (body, Datei-Kopf) per Spezifitaet (0,1,1 > 0,0,1); die Nav-Hoehe
     (56px + Bottom-Inset) + 32px Luft sind einkalkuliert.
     32px (vormals 12px, web-270-Review-should-fix, 2026-08-31): der
     Footer ist seit dem vierten Link ("Vertraege hier kuendigen") auf
     schmalen Viewports 3-zeilig statt 2-zeilig (+17px Footer-Hoehe) --
     selbst gemessen @390x844: mit 12px Puffer ueberlappte der neue Link
     in Ruhe-Scroll-Position um 48.8px die fixed Nav (elementFromPoint traf
     .app-botnav-item statt den Link), der Ueberlapp bestand SCHON VORHER
     (12px reichten mit dem alten 2-zeiligen Footer ebenfalls nicht, 31.8px)
     -- +20px deckt den aktuellen 3-zeiligen Footer UND einen kuenftigen
     vierzeiligen mit etwas Marge ab, statt bei jedem weiteren Footer-Link
     erneut nachzumessen. */
  body.has-app-botnav {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 32px);
  }
}

/* =====================================================================
   ui-394: 44px-Touch-Target-Sweep (web-221 P3.1) — Nicht-Build-Surfaces

   Systematischer Mess-Durchlauf (Headless-Chrome 390x844 + 768x1024,
   hasTouch, Mobile-UA; Befunde in Ticket ui-394 ## Notes). Anhebung via
   Padding/min-height — KEINE font-size-Aenderung (Typo-Skala-Lock).

   NUR Touch ((hover:none),(pointer:coarse)) — Desktop/OBS byte-gleich.

   POSITION AM DATEIENDE IST KASKADEN-KRITISCH: Basis-Regeln von .em-chip
   (eigenes min-height:38), .tt-wchip und .cs-subtoggle-btn (min-height:40
   im ≤600px-Block) liegen NACH dem ui-390-Build-Block — bei gleicher
   Spezifitaet gewinnt nur ein SPAETERER Block die Source-Order.
   Build-Controls: im ui-390-Block (s. dort).

   Die ui-214-Fixes (.cs-sort-btn/.achievement-claim-btn/.account-delete-btn)
   lebten nur im ≤600px-Block — auf Touch-Geraeten BREITER 600px (iPad 768:
   33-36px gemessen) griffen sie nicht; gleiches Lueckenmuster wie web-202
   .nav-logout. Hier auf alle Touch-Breiten ausgeweitet (≤600-Regeln bleiben
   unveraendert bestehen — gleiche Werte, doppelt harmlos). */
@media (hover: none), (pointer: coarse) {
  /* --- Header/Brand: .site-title war reiner Text-Link (88x19) --- */
  .site-title {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* web-202 hob .nav-link auf 44px HOEHE; kurze Labels blieben schmaler
     („Profil" 43px BREIT, Tablet-Messbefund) — Mindestbreite ergaenzen. */
  .nav-link {
    min-width: 44px;
    justify-content: center;
  }

  /* --- Footer-Rechtslinks (Datenschutz/Impressum, 17px hoch): padding
     als Klickflaeche; inline-block laesst die Footer-Zeile mitwachsen. --- */
  .site-footer a {
    display: inline-block;
    padding: 14px 8px;
  }

  /* --- „Account & Daten"-Aufklapper (<summary>, 17px hoch). Marker ist
     bereits weggestylt (list-style:none) — flex zentriert. --- */
  .account-danger > summary {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .account-delete-btn {
    min-height: 44px;  /* iPad 768: 33px (≤600-Fix griff nicht) */
    padding: 10px 16px;
  }

  /* --- Achievements: Claim-Button (iPad 768: 36px) --- */
  .achievement-claim-btn {
    min-height: 44px;
    padding: 0.55em 1em;
  }

  /* --- Sockel-Tab --- */
  .cs-sort-btn {
    min-height: 44px;  /* iPad 768: 34px (≤600-Fix griff nicht) */
    padding: 10px 14px;
  }
  .cs-subtoggle-btn { min-height: 44px; }  /* 40px (Basis im ≤600px-Block) */
  .cs-drop-odds-link { min-height: 44px; } /* 22px auf Tablets (>600px) */

  /* --- Dashboard-Referenz-Links „Guide/Glossar/Patch-Notes ↗" (28px,
     sichtbar nur >600px — bei ≤600px ersetzt das ⋯-Menue die Leiste) --- */
  .reflink { min-height: 44px; }

  /* --- Highscore: Aufklapp-Trigger der Detail-Zeilen (81x31) —
     der im Ticket benannte Pflichtfall. --- */
  .hs-expand-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
  /* Version-Pill (50x17) + Namens-Links (109x15) sitzen IN Tabellenzeilen —
     eine BBox-Anhebung auf 44px wuerde die Zeilen sprengen (Tabellen-Umbau
     = ui-396). Stattdessen ::after-Hitbox (ui-214-Kanon, wie .info ui-300):
     Optik/Layout unveraendert, Tap-Zone 44px+. Nur die VERLINKTE Pill
     (a.hs-version) — die plain .hs-version ist nicht interaktiv. */
  a.hs-version { position: relative; }
  a.hs-version::after {
    content: '';
    position: absolute;
    inset: -14px -8px;  /* 17+28=45px hoch, 50+16=66px breit */
  }
  a.name-link { position: relative; }
  a.name-link::after {
    content: '';
    position: absolute;
    inset: -15px -4px;  /* 15+30=45px hoch */
  }
  /* „deinem Profil →"-Verweis ueber den Boards (95x17) */
  .hs-profile-ref a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* --- Tech-Tree: Waffen-/Baum-Chips (108x29) --- */
  .tt-wchip { min-height: 44px; }

  /* --- Waffen-Tab Endmode-Chooser: Toggle-Chips (38px, eigene Basis-
     min-height) + „Alle aktivieren" (25px) --- */
  .em-chip { min-height: 44px; }
  .em-reset { min-height: 44px; }

  /* --- Help: TOC-Chips (328x28). justify-content statt text-align —
     im ≤600px-Spalten-Layout zentriert text-align Flex-Kinder
     nicht mehr, sobald der Link selbst Flex-Container ist. --- */
  .help-toc a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
  /* Fliesstext-Querverweise in Guide-Sektionen (18-20px hoch) + Landing
     „Spiel-Guide & FAQ": vertikales Padding auf INLINE-Elementen waechst
     als reine Klickflaeche, ohne die Zeilenhoehe zu verschieben. Das kleine
     padding-inline sichert die 44px-BREITE kurzer Link-Texte („Glossar"
     43.5px, Messbefund) — horizontal verschiebt es den Zeilenfluss minimal
     (nur Touch, bewusst). */
  .help-section a { padding: 13px 4px; }
  .info-foot a { padding: 13px 4px; }

  /* --- Glossar: Suchfeld (37px hoch) --- */
  #glossar-search { min-height: 44px; }
}

/* =====================================================================
   web-225: Client-Navigation zwischen den Surfaces (surface-nav.js)
   ===================================================================== */

/* Aktiver Header-Nav-Link (DL-2: Aktiv-Zustand über BEIDE Navs — die
   Bottom-Nav hat ihren Aktiv-Stil seit ui-389, der Header bekommt ihn hier;
   SSR setzt .active + aria-current via layout() navLink(), surface-nav.js
   zieht beides nach jedem Swap nach). DL-10: var(--cyan) wie überall, kein
   neues Token. Transparenter Basis-Border verhindert den 2px-Layout-Shift
   beim Aktivwerden (Muster Prototyp web-225). */
.nav-link { border-bottom: 2px solid transparent; }
.nav-link.active { color: var(--cyan); border-bottom-color: var(--cyan); }

/* Lade-Skeleton des Surface-Wechsels — erscheint erst, wenn der Fetch
   laenger als 300ms braucht (DL-6: bei schnellem Netz sieht man nur den
   Fade; ein sofortiges Skeleton laese sich als Flackern). Farben strikt
   var(--line) → var(--line-2) (DL-10). */
.sn-skel-row {
  height: 14px;
  border-radius: 4px;
  margin-bottom: 0.55em;
  background: linear-gradient(90deg, var(--line) 25%, var(--line-2) 50%, var(--line) 75%);
  background-size: 200% 100%;
  animation: sn-skel 1.1s ease-in-out infinite;
}
.sn-skel-row.sn-skel-w60 { width: 60%; }
.sn-skel-row.sn-skel-w80 { width: 80%; }
@keyframes sn-skel {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sn-skel-row { animation: none; }
}