/* ==========================================================================
   mxmc.win – MOTD in Minecraft-Farben
   Klassen für die Spans, die js/motd.js baut. Wird nach css/style.css geladen
   und liegt auf dem dunklen Streifen der Serverliste (Hintergrund var(--feature-c)).
   Aufbau: Farb-Tokens · Farben · Formate · Zeilen · Enthüllung · Reduzierte Bewegung
   ========================================================================== */

/* ---------- Die 16 klassischen Farben des Spiels (Chat-Codes §0–§f) ----------
   Dazu für die dunklen Farben eine aufgehellte Variante „-on-dark“: auf dem dunklen
   Streifen (Leuchtdichte ≈ 0,03) kommen die Spielwerte sonst nicht auf lesbaren
   Kontrast. Angegeben ist jeweils der Kontrast zu var(--feature-c) im hellen Design,
   im dunklen Design liegt er etwas höher. Die Klassen .mc-… nutzen die -on-dark-Werte. */
:root {
  --mc-0: #000000; /* Schwarz */
  --mc-1: #0000AA; /* Dunkelblau */
  --mc-2: #00AA00; /* Dunkelgrün, 4,2:1 */
  --mc-3: #00AAAA; /* Dunkeltürkis, 4,6:1 */
  --mc-4: #AA0000; /* Dunkelrot */
  --mc-5: #AA00AA; /* Dunkelviolett */
  --mc-6: #FFAA00; /* Gold, 6,9:1 */
  --mc-7: #AAAAAA; /* Grau, 5,6:1 */
  --mc-8: #555555; /* Dunkelgrau */
  --mc-9: #5555FF; /* Blau */
  --mc-a: #55FF55; /* Hellgrün, 10:1 */
  --mc-b: #55FFFF; /* Türkis, 10,8:1 */
  --mc-c: #FF5555; /* Rot, 4,2:1 */
  --mc-d: #FF55FF; /* Hellviolett, 5,1:1 */
  --mc-e: #FFFF55; /* Gelb, 12,5:1 */
  --mc-f: #FFFFFF; /* Weiß, 13,3:1 */

  /* Aufgehellt für den dunklen Streifen (Spielwert: 1,6:1 / 1,0:1 / 1,7:1 / 1,8:1) */
  --mc-0-on-dark: #999999; /* Schwarz → Grau, 4,7:1 */
  --mc-1-on-dark: #8A8AFF; /* Dunkelblau → helleres Blau, 4,5:1 */
  --mc-8-on-dark: #A3A3A3; /* Dunkelgrau → Grau, 5,2:1 */
  /* Auch Dunkelviolett (2,1:1) und Blau (2,6:1) wären auf dem Streifen zu dunkel */
  --mc-5-on-dark: #D478D4; /* Dunkelviolett → helleres Violett, 4,7:1 */
  --mc-9-on-dark: #9999FF; /* Blau → helleres Blau, 5,3:1 */
  /* Dunkelgrün, Dunkelrot und Rot lagen knapp unter 4,5:1 – leicht aufgehellt, in beiden Designs ≥ 4,6:1 */
  --mc-2-on-dark: #12B012;
  --mc-4-on-dark: #D58282;
  --mc-c-on-dark: #FF6464;
}

/* ---------- Farben ---------- */
.mc-0 { color: var(--mc-0-on-dark); }
.mc-1 { color: var(--mc-1-on-dark); }
.mc-2 { color: var(--mc-2-on-dark); }
.mc-3 { color: var(--mc-3); }
.mc-4 { color: var(--mc-4-on-dark); }
.mc-5 { color: var(--mc-5-on-dark); }
.mc-6 { color: var(--mc-6); }
.mc-7 { color: var(--mc-7); }
.mc-8 { color: var(--mc-8-on-dark); }
.mc-9 { color: var(--mc-9-on-dark); }
.mc-a { color: var(--mc-a); }
.mc-b { color: var(--mc-b); }
.mc-c { color: var(--mc-c-on-dark); }
.mc-d { color: var(--mc-d); }
.mc-e { color: var(--mc-e); }
.mc-f { color: var(--mc-f); }

/* ---------- Formate (§l §o §n §m §k) ---------- */
.mc-l { font-weight: 700; }
.mc-o { font-style: italic; }
.mc-n { text-decoration: underline; }
.mc-m { text-decoration: line-through; }
.mc-n.mc-m { text-decoration: underline line-through; }
/* .mc-k (verschleiert) braucht kein eigenes Aussehen: js/motd.js tauscht die Zeichen */

/* ---------- Zeilen: block, Schrift erbt, Schatten wie im Spiel ---------- */
.motd__line {
  display: block;
  text-shadow: 1px 1px 0 rgb(0 0 0 / 0.45);
  overflow-wrap: anywhere;
}

/* ---------- Enthüllung: von links aufgedeckt, zeitversetzt je Zeile (--i aus JS) ----------
   „both“ hält die Zeile vor ihrem Start verdeckt und danach offen. */
.motd__line.is-wiping {
  animation: motd-wipe 320ms linear both;
  animation-delay: calc(var(--i, 0) * 160ms);
}
@keyframes motd-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0); }
}

/* ---------- Reduzierte Bewegung: nur an, keine Enthüllung ---------- */
@media (prefers-reduced-motion: reduce) {
  .motd__line.is-wiping {
    animation: none;
    clip-path: none;
  }
}