/* ============================================================
   pz.slapstick.be — RAM-Hinweis

   Knopf, Sprechblase und Overlay des RAM-Hinweises.

   Diese Datei laedt JEDE Seite, denn beides steckt im
   gemeinsamen Geruest: Der Knopf kommt aus site_chrome.py,
   das Overlay baut ram-notice.js zur Laufzeit — und beides
   laeuft auf index, server, mods und allen Sprachfassungen.

   Vorher standen diese Regeln in main.css. Die laedt nur
   index.html; auf den fuenf uebrigen Seiten rendert der
   Knopf deshalb als heller Browser-Default und das Overlay
   voellig ungestylt: ohne Innenabstand, ohne Zentrierung,
   ohne Backdrop, mit einem weissen Schliessen-Kasten.
   Ein Fehler, den man nur sieht, wenn man drauf klickt —
   der Knopf faellt schon vorher auf.

   Merkregel: Was im geteilten Geruest sitzt, wird auch
   geteilt gestylt. Komponente und Stil gehoeren in dieselbe
   Ladeschicht.

   Ladereihenfolge (alle Seiten):
     tokens → [base] → chrome → notice → [main]

   .billboard-neon liegt mit hier, obwohl der Name auf die
   Startseiten-Tafel zeigt: ram-notice.js:109 setzt sie auf
   die Dialog-Ueberschrift. Zwei Orte, eine Definition —
   ein Duplikat waere die schlechtere Antwort gewesen.
   ============================================================ */

/* Die Roehre. Glimmen ueber gestapelte Schatten, nicht ueber Filter --
   filter: blur() faerbt auf schwachen Geraeten den ganzen Kasten neu. */
.billboard-neon {
  margin: var(--s2) 0 var(--s3);
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: .02em;
  color: #ffe2b8;
  text-shadow:
    0 0 3px rgba(201, 118, 27, .95),
    0 0 10px rgba(201, 118, 27, .75),
    0 0 26px rgba(201, 118, 27, .45),
    0 0 52px rgba(201, 118, 27, .25);
}

/* Das Stueck Roehre hinter dem Riss ist tot. */
.billboard-neon .dead {
  color: #4a4a46;
  text-shadow: none;
}
/* ---------- Nur fuer Screenreader -------------------------- */
/*
   Stand bis zum 12.08.2026 in base.css und fiel damit unter denselben
   Fehler wie der Rest dieser Datei: `ram-notice.de.html:24` setzt sie
   auf die <caption> der RAM-Tabelle, und das Overlay geht auf JEDER
   Seite auf. Ohne die Regel wurde aus der Beschriftung fuer
   Screenreader eine sichtbare Zeile ueber der Tabelle.

   Nicht `display: none`: das nimmt den Inhalt auch aus der
   Vorlesereihenfolge — dann fehlt der Tabelle ihre Beschriftung.
*/
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Rechenmodell im Overlay ------------------------ */
/*
   `box-sizing: border-box` und `border-radius: 0` stehen in base.css —
   und die laedt nur die Startseite. Auf server.html, mods.html und den
   Sprachfassungen rechnet der Browser deshalb nach `content-box`:
   Breite PLUS Innenabstand PLUS Rahmen. Der Dialoginhalt wurde dadurch
   breiter als der Dialog, sichtbar als waagerechter Rollbalken am
   unteren Rand.

   Der Reset gehoert NICHT nach chrome.css — deren Kopfkommentar
   begruendet ausfuehrlich, warum dort nichts Elementweites stehen darf
   (die generierten Seiten haengen an Browser-Vorgaben fuer Listen und
   Inline-SVG). Hier wirkt er ausschliesslich innerhalb des Overlays und
   auf dem Knopf: eng genug, um nichts anderes zu treffen.
*/
.warn-btn,
.ram-dialog,
.ram-dialog *,
.ram-dialog *::before,
.ram-dialog *::after {
  box-sizing: border-box;
  border-radius: 0;
}

/* Das Ausrufezeichen steht VOR der Information, nicht daneben als Zierat.
   Gleiche Roehre wie die Ueberschrift, nur groesser -- ein zweites Leuchtmittel
   waere ein zweites Signal, und es gibt hier nur eines. */
.bang {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 11vw, 7rem);
  line-height: .82;
  color: #ffe2b8;
  text-shadow:
    0 0 3px rgba(201, 118, 27, .95),
    0 0 12px rgba(201, 118, 27, .8),
    0 0 34px rgba(201, 118, 27, .5);
}

.ram-details { margin-top: var(--s3); }

.ram-toggle {
  position: relative;
  /* `background: none` ist hier nicht kosmetisch, sondern noetig:
     Das Element ist ein <button>, und Browser geben Buttons
     `background-color: ButtonFace` — gemessen rgb(107,107,107),
     ein hellgrauer Kasten mitten auf der dunklen Tafel.

     Warum die Regel ihn nie gesetzt hat, steht drei Zeilen
     weiter unten im eigenen Code: `list-style: none` und
     `::-webkit-details-marker` sind Ueberbleibsel aus der Zeit,
     als das hier ein <summary> in <details> war. Bei <summary>
     ist der Grund transparent, bei <button> nicht. Das Markup
     wurde umgestellt, das Stylesheet nicht mitgezogen. */
  background: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s1) var(--s3);
  border: 1px solid var(--accent-orange);
  color: var(--accent-orange);
  font-size: var(--step--1);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: var(--tap);
  list-style: none;
}

.ram-toggle::-webkit-details-marker { display: none; }

.ram-toggle:hover,
.ram-toggle:focus-visible { background: rgba(201, 118, 27, .12); }

/* Der Zustand gehoert an den Schalter, nicht in eine Legende daneben. */
.ram-toggle-text::after { content: " BE"; }
.ram-details[open] .ram-toggle-text::after { content: " B4"; }

/* Kleiner geschwungener Pfeil, zeigt von rechts auf den Schalter. */
.ram-arrow {
  width: 84px;
  flex-shrink: 0;
  transform: translateY(-14px);
  pointer-events: none;
}

@media (max-width: 560px) {
  .ram-arrow { display: none; }
}

.billboard-note {
  max-width: 62ch;
  color: var(--text);
}

.billboard-note strong { color: var(--accent-gold); }

/* ---------- RAM-Tabelle ----------------------------------- */

.ram-table {
  width: 100%;
  margin: var(--s3) 0 var(--s2);
  border-collapse: collapse;
  font-size: var(--step--1);
}

.ram-table th,
.ram-table td {
  padding: var(--s1) var(--s2);
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.ram-table th {
  color: var(--muted);
  font-weight: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ram-table td code {
  color: var(--terminal-green);
  font-size: 1.05em;
}

.ram-table tr[data-pick="true"] td { background: rgba(201, 118, 27, .08); }

.ram-steps { margin: var(--s2) 0; padding-left: 1.2em; }
.ram-steps li { margin-bottom: var(--s1); }

.ram-warn {
  margin-top: var(--s3);
  padding: var(--s2);
  border-left: 3px solid var(--accent-gold);
  background: rgba(202, 173, 77, .07);
  color: var(--text);
}

/* ---------- Warnknopf im Kopf ------------------------------ */
/*
   Sitzt neben der Navigation und oeffnet denselben Hinweis, der auf der
   Startseite offen steht. Farbe ueber currentColor an das SVG, damit
   Hover und Fokus nicht zwei Stellen brauchen.
*/
.warn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  background: none;
  border: 1px solid transparent;
  color: var(--accent-gold);
  cursor: pointer;
}

.warn-btn:hover,
.warn-btn:focus-visible {
  color: var(--accent-orange);
  border-color: var(--accent-orange);
}

.warn-btn img { display: block; }

/* ---------- Sprechblase am Warnknopf ----------------------- */
/*
   Text aus data-ram-hint, nicht aus dem CSS: Die Beschriftung gehoert in
   site_chrome.py / strings_en.py wie jede andere Micro-Copy. content:
   attr() holt sie von dort, damit Sprachen an einer Stelle gepflegt werden.

   Nur Hover und Fokus, kein Dauerzustand: Ein Schild, das immer da ist,
   liest nach zwei Besuchen niemand mehr.
*/
.warn-btn { position: relative; }

.warn-btn::after,
.warn-btn::before {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease);
}

.warn-btn::after {
  content: attr(data-ram-hint);
  position: absolute;
  top: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  background: var(--accent-gold);
  color: var(--bg-deepest);
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: .04em;
  white-space: nowrap;
  box-shadow: var(--shadow-hard);
}

/* Zipfel der Blase, zum Knopf zeigend. */
.warn-btn::before {
  content: "";
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-bottom-color: var(--accent-gold);
}

.warn-btn:hover::after,
.warn-btn:hover::before,
.warn-btn:focus-visible::after,
.warn-btn:focus-visible::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .warn-btn::after,
  .warn-btn::before { transition: none; }
}

/* ---------- Overlay ---------------------------------------- */

.ram-dialog {
  width: min(74ch, 92vw);
  max-height: 86vh;
  padding: 0;
  background: var(--bg-board);
  border: 2px solid var(--border);
  color: var(--text);
  box-shadow: var(--shadow-hard);
  overflow: hidden;
}

.ram-dialog::backdrop { background: rgba(0, 0, 0, .8); }

/* Der Kopf bleibt stehen: Wer unten in der Tabelle liest, sieht weiterhin,
   worum es geht, und erreicht das X ohne zurueckzuscrollen. */
.ram-dialog-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  gap: var(--s2);
  align-items: center;
  padding: var(--s3) var(--s4);
  background: var(--bg-board);
  border-bottom: 1px solid var(--border);
}

.ram-dialog-head .bang { font-size: clamp(2rem, 6vw, 3rem); line-height: 1; }

.ram-dialog-head .billboard-neon {
  margin: 0;
  font-size: clamp(1.4rem, 4.4vw, 2.2rem);
}

.ram-dialog-close {
  margin-left: auto;
  flex-shrink: 0;
  width: var(--tap);
  height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
}

.ram-dialog-close svg { width: 20px; height: 20px; }

.ram-dialog-close:hover,
.ram-dialog-close:focus-visible {
  border-color: var(--accent-orange);
  color: var(--accent-orange);
}

.ram-dialog-body {
  padding: var(--s4);
  overflow-y: auto;
  max-height: calc(86vh - 96px);
}

/*
   Lange Pfade und JVM-Optionen brechen nicht von selbst: `<code>` mit
   `C:\Program Files (x86)\...` bringt 627px mit, der Dialog gibt 543
   her. Ergebnis war ein waagerechter Rollbalken ueber den GANZEN
   Dialoginhalt — man schob den Text zur Seite, um eine Zeile zu lesen.

   Auf der Startseite faellt das nicht auf, weil die Tafel breiter ist
   als der Dialog. Derselbe Baustein, zwei Breiten, nur ein Ort tut weh.

   `anywhere` statt `break-word`: break-word laesst ein ueberlanges
   Wort trotzdem ueberlaufen, wenn es allein in der Zeile steht — genau
   dieser Fall.
*/
.ram-dialog code,
.ram-dialog kbd,
.ram-dialog samp {
  overflow-wrap: anywhere;
}

.ram-dialog-body .billboard-note { max-width: none; }
.ram-dialog-body .ram-table { margin-top: var(--s3); }

/* ---------- Beitreten-Fenster (Server-Seite) ------------------
   Dasselbe Geruest wie der RAM-Hinweis (.ram-dialog), eigener Inhalt:
   zwei Adressen, je "Verbinden" und "Kopieren". Die Knoepfe darin sind
   die .cta-btn der Server-Seite -- das Fenster spricht dieselbe
   Knopfsprache wie der Knopf, der es oeffnet. Logik: join-dialog.js. */

/* 80ch, nicht 62ch: Bei 62ch blieben in der Knopfzeile 339px, zwei Knoepfe
   mit 11rem Grundbreite brauchen 368px -- "Kopieren" rutschte unter
   "Verbinden" (gemessen 11.09.2026). Schmal stapeln sie weiterhin. */
.join-dialog { width: min(80ch, 92vw); }

.join-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4.4vw, 2rem);
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--terminal-green);
}

.join-lead { margin: 0 0 var(--s3); }
.join-lead strong { color: var(--accent-gold); }

.join-list {
  display: grid;
  gap: var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.join-entry {
  padding: var(--s2) var(--s3) var(--s3);
  border: 1px dashed var(--border);
}

.join-label {
  display: block;
  font-size: var(--step--1);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.join-addr {
  display: block;
  margin: var(--s1) 0;
  font-size: var(--step-0);
  color: var(--text);
}

.join-hint {
  margin: 0 0 var(--s2);
  font-size: var(--step--1);
  color: var(--muted);
}

.join-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s2);
}

/* Die 236px Mindestbreite der Seitenknoepfe passen zu zweit nicht in ein
   schmales Fenster. Hier teilen sie sich die Zeile und brechen um. */
.join-actions .cta-btn {
  min-width: 0;
  flex: 1 1 11rem;
}

.join-note {
  margin: var(--s3) 0 0;
  font-size: var(--step--1);
  color: var(--muted);
}

.join-status {
  min-height: 1.5em;
  margin: var(--s2) 0 0;
  color: var(--terminal-green);
}

/* Hover-Hilfe am "Verbinden"-Knopf: IP, Port und die Schritte im Spiel.
   Sie klappt IM FLUSS unter den Knoepfen auf (order: 3, volle Breite),
   nicht als schwebender Kasten: Der Dialogkoerper scrollt, ein absolut
   positionierter Tooltip wuerde an dessen Rand abgeschnitten. Weil sie
   UNTER dem Knopf aufgeht, bleibt der Knopf unter dem Mauszeiger stehen --
   kein Flackern. Dieselben Schritte stehen fuer Touch und Screenreader
   sichtbar in .join-note; aria-describedby liest auch den verborgenen
   Kasten vor. */
.join-howto {
  display: none;
  order: 3;
  flex: 1 1 100%;
  margin: 0;
  padding: var(--s2) var(--s3);
  background: var(--bg-elevated);
  border: 1px solid var(--accent-orange);
  font-size: var(--step--1);
  color: var(--text);
}

.join-connect:hover + .join-howto,
.join-connect:focus-visible + .join-howto { display: block; }

.join-howto p { margin: 0; }
.join-howto ol { margin: var(--s1) 0 0; padding-left: 1.4em; }
.join-howto li + li { margin-top: 2px; }
.join-howto b { color: var(--accent-gold); font-weight: 400; }