/*
 * media.pagerspass.de — die Kanalseite.
 *
 * Sie trägt das Gesicht des Spiels und ausdrücklich nicht das der Verwaltung:
 * blauschwarzer Grund, Amber als Akzent, dieselbe Wortmarke. Der Grund ist
 * derselbe, aus dem die Verwaltung ihr eigenes bekommen hat — nur andersherum.
 * Wer aus einem Profil hierherkommt, muss in einer halben Sekunde sehen, dass
 * er bei PagerSpass gelandet ist; eine Seite, die aussieht wie irgendein
 * Linkverzeichnis, wird weggeklickt.
 *
 * Die Werte stammen aus web/src/styles/base.css. Sie stehen hier abgeschrieben
 * und nicht eingebunden, weil diese Seite ohne Bauschritt auskommt (siehe
 * media/README.md) — dieselbe Entscheidung wie bei der Verwaltung. Ändert sich
 * dort ein Farbwert, ändert er sich hier nicht mit; es sind sieben Werte, und
 * sie sind seit Monaten dieselben.
 */

:root {
  --bg: #080b10;
  --flaeche: #141c27;
  --flaeche-hoch: #1c2634;
  --rand: #2e3e52;
  --rand-hell: #445872;

  --text: #e9f0f9;
  --text-leise: #b0c0d4;
  --text-sehr-leise: #8797ad;

  --amber: #ffb020;
  --amber-hell: #f0c86e;
  --auf-amber: #0a0d12;

  --radius: 10px;

  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;

  /* Ein sehr leiser Schein hinter dem Kopf — dieselbe Andeutung wie auf der
     Anmeldeseite des Spiels, damit die Seite nicht als flaches Rechteck beginnt.
     `fixed`, damit er beim Rollen nicht mitwandert und zur Streifenkante wird. */
  background-image: radial-gradient(120% 60% at 50% -10%, #10161f 0%, transparent 70%);
  background-attachment: fixed;
}

/*
 * Eine Spalte, mittig, höchstens 560 Pixel breit.
 *
 * Nicht breiter, obwohl der Platz da wäre: Diese Seite wird zu neun Zehnteln am
 * Handy geöffnet — aus einem Profil heraus, mit dem Daumen. Am Rechner soll sie
 * aussehen wie das, was sie ist, statt sich über zwei Meter zu strecken.
 */
.seite {
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(28px, 7vw, 56px) 20px 40px;

  /* Der Fuß steht unten, auch wenn drei Kacheln die Seite nicht füllen. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ======================================================================= Kopf */

.kopf {
  text-align: center;
}

.wortmarke {
  width: min(260px, 72vw);
  height: auto;
}

.kopf h1 {
  margin: 14px 0 0;
  font-size: clamp(20px, 5vw, 24px);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.unterzeile {
  margin: 8px auto 0;
  max-width: 44ch;
  color: var(--text-leise);
  font-size: 15px;
}

/* ==================================================================== Kacheln */

.kacheln {
  display: grid;
  gap: 10px;

  /* Nimmt den Platz zwischen Kopf und Fuß — sonst klebt der Fuß bei drei
     Kacheln direkt darunter, statt unten zu stehen. */
  flex: 1;
  align-content: start;
}

/*
 * Eine Kachel ist ein Link und sonst nichts.
 *
 * Kein <div> mit Klick-Handler: Ein echtes <a> lässt sich mit der Tastatur
 * erreichen, in einem neuen Tab öffnen, kopieren und von einer Sprachausgabe
 * als Link ansagen. Das ist auf einer Seite, die aus nichts als Links besteht,
 * keine Feinheit, sondern der ganze Inhalt.
 */
.kachel {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;

  /* 64 Pixel hoch — deutlich über den 44, die am Daumen gelten. Die Kacheln
     sind das Einzige, was man hier trifft; sie dürfen groß sein. */
  min-height: 64px;
  padding: 12px 16px;

  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;

  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.kachel:hover,
.kachel:focus-visible {
  background: var(--flaeche-hoch);
  border-color: var(--rand-hell);
}

.kachel:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

.kachel:active {
  transform: translateY(1px);
}

.kachel__symbol {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: #0d131c;
  border: 1px solid var(--rand);
  color: var(--text-leise);
}

.kachel__text {
  min-width: 0;
}

.kachel__titel {
  display: block;
  font-weight: 600;
  letter-spacing: -0.005em;

  /* Ein Kanalname bricht nicht um; er wird abgeschnitten. Eine Kachel, die in
     der Höhe wächst, weil jemand vierzig Zeichen eingetragen hat, reißt die
     Reihe auseinander. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kachel__zeile {
  color: var(--text-sehr-leise);
  font-size: 13.5px;
  line-height: 1.4;

  /* Zwei Zeilen, dann Schluss — die Verwaltung lässt 120 Zeichen zu, und die
     passen am Handy nicht in eine. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Der Pfeil am rechten Rand: das Zeichen dafür, dass es hier hinausgeht. */
.kachel__pfeil {
  color: var(--text-sehr-leise);
  flex: none;
}

.kachel:hover .kachel__pfeil,
.kachel:focus-visible .kachel__pfeil {
  color: var(--amber);
}

/*
 * Die hervorgehobene Kachel — der Kanal, auf den es gerade ankommt.
 *
 * Amber als Fläche und nicht nur als Rahmen: Ein Rahmen unterscheidet sie erst
 * beim zweiten Hinsehen, und wer diese Seite öffnet, sieht genau einmal hin.
 */
.kachel--hervor {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--auf-amber);
}

.kachel--hervor:hover,
.kachel--hervor:focus-visible {
  background: var(--amber-hell);
  border-color: var(--amber-hell);
}

.kachel--hervor .kachel__symbol {
  background: rgba(10, 13, 18, 0.14);
  border-color: rgba(10, 13, 18, 0.24);
  color: var(--auf-amber);
}

/* Auf Amber ist das leise Grau unlesbar; hier trägt der dunkle Ton die
   Nebenzeile, abgesetzt allein über die Deckkraft. */
.kachel--hervor .kachel__zeile,
.kachel--hervor .kachel__pfeil {
  color: var(--auf-amber);
  opacity: 0.72;
}

.kachel--hervor:hover .kachel__pfeil,
.kachel--hervor:focus-visible .kachel__pfeil {
  color: var(--auf-amber);
}

/* ==================================================== Laden, leer, kaputt */

/*
 * Die drei Zustände, in denen keine Kacheln dastehen. Sie sehen absichtlich
 * gleich aus: Es ist immer dieselbe Auskunft — hier ist gerade nichts, und
 * das liegt nicht an dir.
 */
.zustand {
  margin: 0;
  padding: 20px 16px;
  border: 1px dashed var(--rand);
  border-radius: var(--radius);
  color: var(--text-sehr-leise);
  font-size: 14.5px;
  text-align: center;
}

.zustand a {
  color: var(--amber-hell);
}

/* ======================================================================= Fuß */

.fuss {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 8px;
  border-top: 1px solid var(--rand);
}

/*
 * „Zum Spiel" steht unten und nicht oben, und das ist eine Entscheidung: Oben
 * würde er die Kacheln überstimmen, wegen derer die Seite existiert. Wer
 * hierherkommt, sucht einen Kanal; das Spiel findet er ohnehin.
 */
.fuss__spiel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid var(--rand-hell);
  border-radius: var(--radius);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.fuss__spiel:hover,
.fuss__spiel:focus-visible {
  border-color: var(--amber);
  color: var(--amber-hell);
}

.fuss__recht {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
}

.fuss__recht a {
  /* 44 Pixel Zielfläche auch für zwei kleine Wörter — sie stehen unten am
     Rand, wo der Daumen ohnehin ungenau wird. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-sehr-leise);
  font-size: 14px;
}

.fuss__recht a:hover,
.fuss__recht a:focus-visible {
  color: var(--text-leise);
}

/* ================================================================ Rücksicht */

/* Wer Bewegung abbestellt hat, bekommt keine — auch nicht die kurze am Knopf. */
@media (prefers-reduced-motion: reduce) {
  .kachel {
    transition: none;
  }

  .kachel:active {
    transform: none;
  }
}