/* ── online.css — Stil der Online-Bausteine (_spiel/online-ui.js): Freundesliste, Online-Karte, Chat ───────────────────────
   Farben kommen vom Spiel über CSS-Variablen (in dessen :root setzen), sonst die neutralen Werte hier:
   --on-grund (Kartenhintergrund) · --on-text · --on-leise · --on-akzent (Auswahl, Links, Knopf) · --on-akzent-text · --on-linie.
   Einbinden: <link rel="stylesheet" href="../../_spiel/online.css"> vor dem Spiel-CSS. */
.on-hinweis { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--on-leise, #a8b0c8); }
.on-hinweis a { color: var(--on-akzent, #8fd3ff); }
.on-freunde { display: flex; flex-wrap: wrap; gap: 6px; }
.on-freund { min-height: 38px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--on-linie, rgba(255, 255, 255, 0.2));
  background: rgba(255, 255, 255, 0.05); color: var(--on-text, #eef0ff); font: inherit; font-weight: 700; cursor: pointer; }
.on-freund.da::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: #6fdc8c; vertical-align: 1px; }
.on-freund.an { border-color: var(--on-akzent, #8fd3ff); color: var(--on-akzent, #8fd3ff); background: rgba(255, 255, 255, 0.1); }

.on-ebene { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4, 4, 12, 0.6);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.on-ebene[hidden] { display: none; }
.on-karte { width: min(420px, 100%); padding: 26px; border-radius: 20px; text-align: center; color: var(--on-text, #eef0ff);
  background: var(--on-grund, rgba(22, 20, 44, 0.97)); border: 1px solid var(--on-linie, rgba(255, 255, 255, 0.2)); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); }
.on-vortitel { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-akzent, #8fd3ff); }
.on-karte h2 { margin: 6px 0 8px; font-size: 32px; }
.on-text { color: var(--on-leise, #a8b0c8); line-height: 1.45; }
.on-knopf { display: block; width: 100%; margin-top: 14px; padding: 12px; border: 0; border-radius: 999px; font: inherit; font-weight: 700; font-size: 18px; cursor: pointer;
  text-decoration: none; background: var(--on-akzent, #8fd3ff); color: var(--on-akzent-text, #0a0a18); }
.on-knopf[hidden] { display: none; }
.on-leise { display: block; width: 100%; margin-top: 8px; padding: 9px; border-radius: 999px; border: 1px solid var(--on-linie, rgba(255, 255, 255, 0.2));
  background: none; color: var(--on-leise, #a8b0c8); font: inherit; cursor: pointer; }
.on-fehler { min-height: 1em; margin: 8px 0 0; color: #ff8f8f; font-size: 14px; }

.on-chat { position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 15; width: min(320px, calc(100vw - 24px));
  border-radius: 16px; border: 1px solid var(--on-linie, rgba(255, 255, 255, 0.2)); background: var(--on-grund, rgba(22, 20, 44, 0.94)); color: var(--on-text, #eef0ff);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); }
.on-chat[hidden] { display: none; }
.on-chat-kopf { width: 100%; padding: 9px 14px; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.on-chat-kopf b { margin-left: 4px; color: var(--on-leise, #a8b0c8); font-size: 12px; }
.on-chat-kopf b.neu { color: var(--on-akzent, #8fd3ff); }
.on-chat-kopf b.neu::after { content: ' •'; }
.on-chat-koerper { display: none; padding: 0 12px 10px; }
.on-chat.offen .on-chat-koerper { display: block; }
.on-chat-liste { max-height: 30vh; overflow-y: auto; font-size: 14px; line-height: 1.4; touch-action: pan-y; }
.on-chat-zeile { margin: 0 0 6px; overflow-wrap: anywhere; }
.on-chat-zeile b { margin-right: 6px; color: var(--on-akzent, #8fd3ff); }
.on-chat-zeile.ich b { color: var(--on-leise, #a8b0c8); }
.on-chat-form { display: flex; gap: 6px; margin-top: 6px; }
.on-chat-form input { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--on-linie, rgba(255, 255, 255, 0.2));
  background: rgba(255, 255, 255, 0.05); color: inherit; font: inherit; }
.on-chat-form button { padding: 8px 14px; border: 0; border-radius: 999px; background: var(--on-akzent, #8fd3ff); color: var(--on-akzent-text, #0a0a18); font: inherit; font-weight: 700; cursor: pointer; }