/* modweb.css — die Spieler-Seite der Moderation: geteilter Chat-Ausschnitt, eine Runde,
   Entbannungsantrag und Bewerbung. Eigene Datei; jede Farbe kommt aus tokens.css, jede
   Abstufung ueber color-mix — so bleibt ein Farbwechsel eine Aenderung an EINER Stelle. */

/* ================================================================== Chatlog */

.cl-wrap { max-width: 940px; margin: 0 auto; padding: 30px 0 10px; display: flex; flex-direction: column; gap: 18px; }

.cl-head { display: flex; align-items: flex-start; gap: 16px; }
.cl-ico { width: 52px; height: 52px; border-radius: var(--r); flex: none; display: grid; place-items: center;
          background: linear-gradient(160deg, var(--blue-lite), var(--blue-deep)); color: var(--txt);
          box-shadow: 0 1px 0 color-mix(in srgb, var(--txt) 30%, transparent) inset, 0 12px 26px -12px var(--blue-glow); }
.cl-ico svg { width: 25px; height: 25px; }
.cl-head-txt { min-width: 0; flex: 1; }
.cl-head-txt h1 { font-size: 30px; letter-spacing: -.03em; }
.cl-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px;
           font-size: 13.5px; color: var(--txt-3); }
.cl-meta b { color: var(--txt-2); font-weight: 600; }
.cl-sep { color: var(--txt-4); }
.cl-grund { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px;
            font-size: 13.5px; color: var(--txt-2); }
.cl-grund b { color: var(--txt); font-weight: 700; }
.cl-head .btn { flex: none; margin-top: 4px; }

/* Der Block selbst: Schreibmaschinenschrift, eine Zeile je Nachricht. Die Uhrzeit bricht nie
   um — sie ist der Anker, an dem das Auge beim Lesen entlanglaeuft. */
.cl-log { font-family: var(--f-mono); font-size: 12.5px; line-height: 1.55; padding: 8px 0; }
.cl-line { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 0 10px; align-items: baseline;
           padding: 4px 18px; }
.cl-line:hover { background: color-mix(in srgb, var(--txt) 3%, transparent); }
.cl-line.is-focus { background: color-mix(in srgb, var(--amber) 8%, transparent); }
.cl-line.is-focus:hover { background: color-mix(in srgb, var(--amber) 12%, transparent); }
.cl-t { color: var(--txt-4); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cl-body { min-width: 0; overflow-wrap: anywhere; }
.cl-n { font-weight: 700; color: var(--blue-lite); }
.cl-n.is-focus { color: var(--amber); }
.cl-n::after { content: ":"; color: var(--txt-4); font-weight: 400; margin-right: 6px; }
.cl-s { display: inline-block; margin-right: 6px; padding: 0 5px; border-radius: var(--r-xs); font-size: 10.5px;
        color: var(--txt-4); border: 1px solid var(--line-soft); vertical-align: 1px; }
.cl-m { color: var(--txt); }
.cl-line.is-cmd .cl-m { color: var(--txt-3); font-style: italic; }
.cl-line.is-filtered .cl-m { color: var(--red); }
.cl-line .badge { margin-left: 8px; height: 17px; padding: 0 6px; font-size: 9.5px; vertical-align: 2px; }

.cl-note { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-radius: var(--r-lg);
           background: var(--card-hi); border: 1px dashed var(--line-strong);
           font-size: 13px; line-height: 1.6; color: var(--txt-2); }
.cl-note svg { width: 18px; height: 18px; flex: none; color: var(--txt-3); margin-top: 2px; }

/* ================================================================== Eine Runde */

.sp-wrap { max-width: 1000px; margin: 0 auto; padding: 26px 0 10px; display: flex; flex-direction: column; gap: 20px; }

/* Der Kopf nimmt die Modusfarbe ueber data-mode — dieselbe wie die Karte auf der Startseite. */
.sp-head { position: relative; overflow: hidden; border-bottom: 1px solid var(--line-soft);
           background: linear-gradient(180deg, color-mix(in srgb, var(--m) 14%, var(--bg-soft)), transparent); }
.sp-head-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.sp-head::after { content: ""; position: absolute; inset: 0;
                  background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 55%, transparent 100%); }
.sp-head-in { position: relative; z-index: 2; display: flex; align-items: center; gap: 22px; padding: 42px 0; flex-wrap: wrap; }
.sp-sym { width: 84px; height: 84px; border-radius: var(--r-xl); flex: none; display: grid; place-items: center;
          background: linear-gradient(160deg, color-mix(in srgb, var(--m) 85%, var(--txt) 15%), var(--m-2, var(--m)));
          color: var(--txt);
          box-shadow: 0 1px 0 color-mix(in srgb, var(--txt) 30%, transparent) inset,
                      0 16px 34px -12px color-mix(in srgb, var(--m) 70%, transparent); }
.sp-sym svg { width: 42px; height: 42px; }
.sp-head-txt { min-width: 0; flex: 1; }
.sp-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em;
             text-transform: uppercase; color: var(--m); margin-bottom: 6px; }
.sp-kicker svg { width: 13px; height: 13px; }
.sp-head h1 { font-size: 38px; letter-spacing: -.03em; overflow-wrap: anywhere; }
.sp-head h1 em { font-style: normal; color: var(--m); }
.sp-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 14px; color: var(--txt-2); }
.sp-line span { display: inline-flex; align-items: center; gap: 6px; }
.sp-line svg { width: 15px; height: 15px; color: var(--txt-3); }
.sp-sep { color: var(--txt-4); }
.sp-head .btn { flex: none; }

/* Teamfarben. Die Namen sind die des Spielservers (RED, BLUE …), die Farben sind Token.
   Der Vorgabewert steht zuerst, damit ein unbekanntes Team grau bleibt statt unsichtbar. */
.sp-win, .sp-team  { --tc: var(--txt-3); }
[data-team="red"]    { --tc: var(--red); }
[data-team="blue"]   { --tc: var(--blue); }
[data-team="green"]  { --tc: var(--green); }
[data-team="yellow"] { --tc: var(--amber); }
[data-team="aqua"]   { --tc: var(--cyan); }
[data-team="white"]  { --tc: var(--txt); }
[data-team="pink"]   { --tc: var(--pink); }
[data-team="gray"]   { --tc: var(--txt-3); }

.sp-win { display: flex; align-items: center; gap: 18px; padding: 24px 26px;
          border-color: color-mix(in srgb, var(--tc) 45%, transparent);
          background: linear-gradient(135deg, color-mix(in srgb, var(--tc) 18%, var(--card-top)),
                                              color-mix(in srgb, var(--tc) 5%, var(--card-bottom))); }
.sp-win-ico { width: 62px; height: 62px; border-radius: var(--r-lg); flex: none; display: grid; place-items: center;
              background: color-mix(in srgb, var(--tc) 22%, transparent);
              border: 1px solid color-mix(in srgb, var(--tc) 45%, transparent); color: var(--tc); }
.sp-win-ico svg { width: 30px; height: 30px; }
.sp-win h2 { font-size: 26px; letter-spacing: -.02em; }
.sp-win h2 em { font-style: normal; color: var(--tc); }
.sp-win p { font-size: 13.5px; color: var(--txt-2); margin-top: 4px; overflow-wrap: anywhere; }

.sp-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.sp-team { padding: 0; overflow: hidden; }
.sp-team.is-win { border-color: color-mix(in srgb, var(--tc) 55%, transparent);
                  box-shadow: var(--sh-card), 0 0 0 1px color-mix(in srgb, var(--tc) 25%, transparent); }
.sp-team-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line-soft);
                background: color-mix(in srgb, var(--tc) 9%, transparent); }
.sp-team-dot { width: 12px; height: 12px; border-radius: 3px; flex: none; background: var(--tc);
               box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 20%, transparent); }
.sp-team-head b { font-size: 14px; font-weight: 800; }
.sp-team-head svg { width: 16px; height: 16px; color: var(--tc); flex: none; }
.sp-team-head i { font-style: normal; font-size: 12px; color: var(--txt-3); margin-left: auto; white-space: nowrap; }
.sp-team ul { padding: 8px 10px; }
.sp-pl { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: var(--r-xs); }
.sp-pl:hover { background: color-mix(in srgb, var(--txt) 4%, transparent); }
.sp-pl a { font-size: 13.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis;
           white-space: nowrap; transition: color var(--t); }
.sp-pl a:hover { color: var(--blue-lite); }

.sp-note { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px;
           font-size: 13px; line-height: 1.6; color: var(--txt-2); }
.sp-note svg { width: 18px; height: 18px; flex: none; color: var(--blue); margin-top: 2px; }

/* ================================================================== Antrag & Bewerbung */

.ap-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; align-items: start; }
.ap-main, .ap-side { display: flex; flex-direction: column; gap: 22px; }

.ap-h2 { font-size: 21px; margin-bottom: 5px; }
.ap-sub { margin-bottom: 22px; }
.ap-form { display: flex; flex-direction: column; gap: 17px; }
.ap-form > .btn { align-self: flex-start; }
.ap-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.ap-text { min-height: 170px; }
.ap-text-lg { min-height: 220px; }

.ap-als { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r-sm);
          background: var(--blue-ghost); border: 1px solid var(--blue-line); font-size: 13.5px; color: var(--txt-2); }
.ap-als b { color: var(--txt); font-weight: 700; }

/* Die Regelzeile ueber dem Absenden-Knopf: bernstein, weil sie eine Warnung ist, kein Fehler. */
.ap-agb { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-sm);
          background: color-mix(in srgb, var(--amber) 9%, transparent);
          border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
          font-size: 13px; line-height: 1.55; color: var(--txt-2); }
.ap-agb svg { width: 16px; height: 16px; flex: none; color: var(--amber); margin-top: 2px; }
.ap-agb b { color: var(--txt); }
.ap-agb a { color: var(--blue-lite); font-weight: 600; }

/* ---- Bestaetigung nach dem Absenden */

.ap-done { align-items: flex-start; gap: 18px; padding: 22px 26px; }
.ap-done-ico { width: 48px; height: 48px; border-radius: var(--r); display: grid; place-items: center; flex: none;
               background: color-mix(in srgb, var(--green) 20%, transparent); color: var(--green);
               border: 1px solid color-mix(in srgb, var(--green) 38%, transparent); }
.ap-done-ico svg { width: 25px; height: 25px; margin-top: 0; }
.ap-done-txt { min-width: 0; flex: 1; }
.ap-done-txt h2 { font-size: 22px; color: var(--txt); margin-bottom: 5px; }
.ap-done-txt p { font-size: 14px; color: var(--txt-2); }
.ap-done-txt .btn { margin-top: 15px; }

.ap-ban { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: var(--r-sm);
          background: color-mix(in srgb, var(--red) 10%, transparent);
          border: 1px solid color-mix(in srgb, var(--red) 32%, transparent);
          font-size: 13.5px; line-height: 1.6; color: var(--txt-2); }
.ap-ban svg { width: 17px; height: 17px; flex: none; color: var(--red); margin-top: 2px; }
.ap-ban b { color: var(--txt); }
.ap-ban.is-none { background: color-mix(in srgb, var(--amber) 10%, transparent);
                  border-color: color-mix(in srgb, var(--amber) 32%, transparent); }
.ap-ban.is-none svg { color: var(--amber); }

/* ---- Deine Antraege */

.ap-list { display: flex; flex-direction: column; }
.ap-item { padding: 14px 0; display: flex; flex-direction: column; gap: 9px; }
.ap-item:first-child { padding-top: 4px; }
.ap-item + .ap-item { border-top: 1px solid var(--line-soft); }
.ap-item-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--txt-3); }
.ap-item-top b { color: var(--txt); font-size: 14px; }
/* pre-line: der Text kommt escaped aus der Datenbank, seine Absaetze sind echte
   Zeilenumbrueche — die bleiben stehen, ohne dass HTML erlaubt wird. */
.ap-item-text { font-size: 13.5px; line-height: 1.6; color: var(--txt-2); white-space: pre-line; overflow-wrap: anywhere; }
.ap-reply { display: flex; gap: 10px; padding: 11px 14px; border-radius: var(--r-sm);
            background: var(--blue-ghost); border: 1px solid var(--blue-line);
            font-size: 13px; line-height: 1.6; color: var(--txt-2); white-space: pre-line; overflow-wrap: anywhere; }
.ap-reply svg { width: 16px; height: 16px; flex: none; color: var(--blue); margin-top: 2px; }
.ap-reply b { display: block; color: var(--blue-lite); font-size: 12px; margin-bottom: 2px; }

/* ---- Seitenspalte: Ablauf, Tipps, Rollen, Discord */

.ap-steps { display: flex; flex-direction: column; gap: 14px; }
.ap-step { display: flex; gap: 13px; align-items: flex-start; }
.ap-step-n { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
             font-family: var(--f-head); font-weight: 800; font-size: 13px;
             background: var(--blue-ghost); border: 1px solid var(--blue-line); color: var(--blue-lite); }
.ap-step b { display: block; font-size: 13.5px; }
.ap-step p { font-size: 12.5px; line-height: 1.6; color: var(--txt-3); margin-top: 2px; }

.ap-tips li { display: flex; gap: 9px; padding: 5px 0; font-size: 13px; line-height: 1.55; color: var(--txt-2); }
.ap-tips li svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--green); }
.ap-tips code { font-family: var(--f-mono); font-size: 12px; padding: 1px 6px; border-radius: 4px;
                background: var(--inset); border: 1px solid var(--line-soft); color: var(--txt); }

/* Der Rollenwuerfel nimmt seine Farbe aus --c, das die Seite als var(--blue|green|…) setzt. */
.ap-role { display: flex; gap: 13px; align-items: flex-start; padding: 13px 0; }
.ap-role:first-child { padding-top: 4px; }
.ap-role + .ap-role { border-top: 1px solid var(--line-soft); }
.ap-role-ico { width: 38px; height: 38px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center;
               background: color-mix(in srgb, var(--c) 16%, transparent);
               border: 1px solid color-mix(in srgb, var(--c) 34%, transparent); color: var(--c); }
.ap-role-ico svg { width: 18px; height: 18px; }
.ap-role-txt { min-width: 0; }
.ap-role b { display: block; font-size: 14px; }
.ap-role ul { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; }
.ap-role li { font-size: 12.5px; color: var(--txt-3); display: flex; gap: 7px; align-items: flex-start; line-height: 1.5; }
.ap-role li svg { width: 13px; height: 13px; flex: none; margin-top: 3px; color: var(--txt-4); }

.ap-dc { display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
         background: linear-gradient(180deg, color-mix(in srgb, var(--purple) 14%, var(--card-top)),
                                             color-mix(in srgb, var(--purple) 6%, var(--card-bottom)));
         border-color: color-mix(in srgb, var(--purple) 34%, transparent); }
.ap-dc-ico { width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center;
             background: color-mix(in srgb, var(--purple) 20%, transparent); color: var(--purple);
             border: 1px solid color-mix(in srgb, var(--purple) 34%, transparent); }
.ap-dc-ico svg { width: 21px; height: 21px; }
.ap-dc h3 { font-size: 15.5px; }
.ap-dc p { font-size: 13px; line-height: 1.6; color: var(--txt-2); }
.ap-dc .btn { margin-top: 6px; }

/* ================================================================== Schmale Fenster */

@media (max-width: 1000px) {
  .ap-grid { grid-template-columns: 1fr; }
  .sp-head h1 { font-size: 30px; }
  .sp-sym { width: 66px; height: 66px; }
  .sp-sym svg { width: 32px; height: 32px; }
}
@media (max-width: 560px) {
  .ap-zwei { grid-template-columns: 1fr; }
  .cl-head { flex-wrap: wrap; }
  .cl-head-txt h1 { font-size: 24px; }
  /* Auf dem Telefon rutscht die Uhrzeit ueber die Zeile — 78px Spalte plus Name plus Text
     passen nicht nebeneinander. */
  .cl-line { grid-template-columns: 1fr; gap: 0; }
  .sp-head-in { padding: 30px 0; }
  .sp-win { flex-direction: column; align-items: flex-start; }
}

/* Entbannung ohne Konto (23.09.2026): gesperrte Konten kommen nicht in die Anmeldung */
.ap-ohne { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 12px 14px; border-radius: 9px;
  font-size: 13px; line-height: 1.5; color: var(--txt-2); background: color-mix(in srgb, #3b82f6 9%, transparent); border: 1px solid color-mix(in srgb, #3b82f6 30%, transparent); }
.ap-ohne svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: #60a5fa; }
.ap-ohne b { color: var(--txt); }