/* ═══════════════════════════════════════════════════════════════════════════════════════════
 * ARCANE PRISM TD — DIE DIALOGFAMILIE (public/ui_dialog.css)
 * Angelegt 16.09.2026, Founder-Entscheid "Dialoge/Fenster/Blasen/Knoepfe aus einem Guss".
 *
 * REFERENZ (woertlich zwei Kacheln aus pruefungen/release_check_1609/BLATT_DIALOGE.png):
 *   #04 "Freischaltung Fusion" — Hub, ui_mod/arena_freischaltung.js `.fzcard`
 *       (dunkelblaue Karte #17365e→#0d2340, Kante 1px #2f6fb0, Radius 14, weisser Titel,
 *        gelber Hauptknopf "View", DUNKLE Knopfschrift trotz .ap-knopf.gold-Klasse — siehe u2 unten)
 *   #05 "Match Reward / You earned" — Hub+Match gemeinsam, hub_new.html `#b1queue .b1card`
 *       (dunkle Karte #13294a→#0a1729, GOLDENE Kante — box-shadow inset 2px #c79a3f statt Rand,
 *        Radius 14, gelber Knopf "Continue" #ffd982→#d9a53f, dunkle Knopfschrift #20180a)
 *   STILBEFUND.md (Abschnitt 3) stellt fest: #04 und #05 sind bereits "dieselbe Navy+Gold-Familie".
 *   Dieses Blatt macht daraus EINEN Satz Marken und EINEN Satz Klassen fuer den Rest des Spiels.
 *
 * FUENF ENTSCHEIDE, JEDER BELEGT (Patch-Anleitung siehe DIALOGFAMILIE.md):
 *   1. KANTE WIRD GOLD, NICHT BLAU. #04 traegt heute #2f6fb0 (blau), #05 traegt bereits Gold.
 *      Der Founder-Text nennt #04 nur "helle Kante" (relativ zum dunklen Feld), #05 wörtlich
 *      "goldene Kante" — und Bauteil 7 (Hub-Coach-Blase, arena_hub_coach.js) traegt densel-
 *      ben #2f6fb0-Rahmen wie #04, obwohl sie zur selben Familie gehoert. EIN Farbsatz heisst:
 *      alle drei (#04-Karte, #05-Karte, #07-Blase) bekommen dieselbe goldene Kante.
 *   2. HINTERGRUND KONVERGIERT AUF #17365e→#0d2340 (die #04/#07-Rampe, weil sie an ZWEI
 *      Stellen bereits identisch steht). #05s #13294a→#0a1729 ist nur 3-4 Werte dunkler —
 *      innerhalb der Messtoleranz, wird auf denselben Wert gezogen.
 *   3. RADIUS WIRD 15px, NICHT 14px. Beide Referenzen sind vom 06.09., der sitesweite
 *      Bauteil-Standard --ap-r-knopf (ui_mod/ui_quelle.css) ist seit 10.09. auf 15 verriegelt
 *      ("Founder 10.09.: '15 nehmen'"). Die Dialogfamilie zieht mit demselben Blatt.
 *   4. KNOPFSCHRIFT IST DUNKEL, NICHT WEISS-MIT-KONTUR. Nachgemessen an beiden Referenzbildern
 *      (btn04b.png/btn05b.png, Zoomcrop): "View" UND "Continue" stehen in dunkler Tinte auf
 *      Gold. #04s .fzbtn traegt heute die Klasse .ap-knopf.gold, deren Basisregel weisse
 *      Schrift mit Kontur vorschreibt (ui_bauteile.css Abschnitt 1, Stand 10.09.) — das ist
 *      NACH dem Referenzbild entstanden und weicht seither vom eigenen Referenzscreenshot ab.
 *      .apd-btn nimmt die Gold-Flaeche aus derselben Quelle (--ap-gold-flaeche, EIN Rezept
 *      sitesweit), aber mit dunkler Schrift — das deckt sich mit BEIDEN Referenzbildern und
 *      mit dem bereits vorhandenen Beleg .offbtn.quick{color:#2a1a04} (hub_new.html:7352).
 *   5. ZWEITKNOPF WIRD TIEFBLAU. ui_quelle.css Abschnitt 1.3 beschreibt Tiefblau als AAs
 *      System-Familie fuer "Zurueck, Listen und Systemzeilen" — genau die Rolle eines
 *      Zweitknopfs neben einer goldenen Hauptaktion. Keine neue Farbe, nur eine neue Rolle.
 *
 * WAS DIESES BLATT NICHT TUT: keine neue Schrift, kein neuer Radius-Wert, keine neue
 * Gold-Rampe — jede Zahl kommt entweder direkt aus den beiden Referenzen oder aus
 * ui_mod/ui_quelle.css (`var(--ap-...)`, mit hartem Zahlen-Rueckfall, falls diese Datei in
 * einer Ansicht ohne ui_quelle.css/ui_bauteile.css laeuft — beide sind seit 10.09. geladen,
 * aber ui_dialog.css soll auch OHNE sie nicht zerbrechen).
 * ═══════════════════════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Karte/Fenster ─────────────────────────────────────────────────────────────────────── */
  --apd-bg-1:      #17365e;              /* Entscheid 2: #04/#07-Rampe, #05 zieht mit */
  --apd-bg-2:      #0d2340;
  --apd-edge:      #c79a3f;              /* Entscheid 1: goldene Kante ueberall */
  --apd-edge-soft: rgba(199,154,63,.55);
  --apd-radius:    var(--ap-r-knopf, 15px);   /* Entscheid 3 */
  --apd-shadow:    0 18px 46px rgba(0,0,0,.6);
  --apd-shadow-sm: 0 10px 34px rgba(0,0,0,.6);

  /* ── Schrift ───────────────────────────────────────────────────────────────────────────── */
  --apd-kicker:  #8fb4e4;    /* Eyebrow-Zeile: "UNLOCKED", "MATCH REWARD" — aus #04 UND #05 gleich */
  --apd-title:   #ffffff;
  --apd-body:    #cfe0f7;
  --apd-accent:  #ffe6a8;    /* Geschenk-/Belohnungszeile, aus #05s .lsatz */
  --apd-font:    var(--ap-schrift, "Baloo 2","Rubik Cyr","Rubik",system-ui,-apple-system,sans-serif);
  --apd-fw:      var(--ap-fw-stark, 800);

  /* ── Hauptknopf (gold) ─────────────────────────────────────────────────────────────────── */
  --apd-btn-flaeche: var(--ap-gold-flaeche,
      linear-gradient(180deg,#fffbe0 0%,#FFCB43 14%,#f6c62e 30%,
        #e5a413 45%,#f0b524 68%,#ffcf3e 90%,#ffd54e 98%,#8a5f06 100%));
  --apd-btn-text:  #2a1a04;                       /* Entscheid 4 */
  --apd-btn-kante: var(--ap-knopf-bernstein-k, #A96C05);

  /* ── Zweitknopf (tiefblau) ─────────────────────────────────────────────────────────────── */
  --apd-btn2-1:    var(--ap-knopf-blau-1, #24AADC); /* Entscheid 5 */
  --apd-btn2-2:    var(--ap-knopf-blau-2, #1565B2);
  --apd-btn2-kante:var(--ap-knopf-blau-k, #0E4376);

  /* ── Schliessen (rot, Ausnahme von der Zwei-Farben-Regel — Konvention aus #02/#03) ──────── */
  --apd-x-1:  var(--ap-rot,   #EE6372);
  --apd-x-2:  var(--ap-rot-2, #E53F4D);
  --apd-x-k:  var(--ap-rot-k, #951626);
}

/* ═══ KARTE ═══════════════════════════════════════════════════════════════════════════════════
   .apd ist die Karte selbst — Popup, Zeremonie, Ergebnisfenster, Bestaetigung. Drei Groessen-
   stufen ueber Modifikator, gemessen an vorhandenen Dialogbreiten im Hub (grep max-width, siehe
   DIALOGFAMILIE.md): 300 (schmal, die Referenz selbst), 352 (breit, .offpop/.obsheet/.belpop/
   .itempop tragen diese Breite heute schon), 430 (voll, = #app/.sheet-Breite). ═══════════════ */
.apd{
  width:min(300px,84vw); box-sizing:border-box; text-align:center;
  border-radius:var(--apd-radius); padding:18px 14px 14px;
  background:linear-gradient(180deg,var(--apd-bg-1),var(--apd-bg-2));
  box-shadow:0 0 0 2px var(--apd-edge) inset, var(--apd-shadow);
  font-family:var(--apd-font);
}
.apd.schmal{ width:min(300px,84vw) }
.apd.breit{  width:min(352px,90vw) }
.apd.voll{   width:min(430px,96vw) }
/* Legacy-Fassung mit echtem Rand statt Inset-Schatten (fuer Bauteile, die schon einen eigenen
   1px-Rand zeichnen, z.B. beim Umstellen von .fzcard/.asn-box ohne die box-shadow-Kette
   anzufassen) — exakt dieselbe Farbe, nur andere Technik: */
.apd.kante-rand{ border:2px solid var(--apd-edge); box-shadow:var(--apd-shadow) }

.apd-kicker{
  font-size:var(--ap-t-klein,11px); font-weight:var(--apd-fw); letter-spacing:.09em;
  color:var(--apd-kicker); text-transform:uppercase;
}
.apd-title{
  font-size:var(--ap-t-titel,16px); font-weight:var(--apd-fw); color:var(--apd-title);
  margin-top:3px; line-height:1.2;
}
.apd-body{
  margin:9px 0 12px; font-size:var(--ap-t-text,13px); font-weight:700;
  color:var(--apd-body); line-height:1.35;
}
.apd-accent{ margin-top:7px; font-size:var(--ap-t-text,13px); font-weight:900; color:var(--apd-accent) }

/* ═══ KNOEPFE ═════════════════════════════════════════════════════════════════════════════════
   .apd-btn  DER EINE Hauptknopf der Karte (View/Continue/Claim/OK) — GENAU EINER pro Karte,
             dieselbe Regel wie beim sitesweiten .ap-knopf.gold (ui_quelle.css Abschnitt 1.3).
   .apd-btn2 der Zweitknopf, wenn die Karte zwei braucht (z.B. Equip+Upgrade, Menu+Rematch).
             NIE zwei .apd-btn nebeneinander — das waere wieder zwei Hauptaktionen. ═══════════ */
.apd-btn,.apd-btn2{
  display:block; width:100%; min-height:44px; margin-top:0; padding:12px 14px;
  border:0; border-radius:var(--apd-radius); cursor:pointer;
  font-family:var(--apd-font); font-size:var(--ap-t-text,13px); font-weight:var(--apd-fw);
  box-sizing:border-box;
}
.apd-btn{
  background:var(--apd-btn-flaeche); color:var(--apd-btn-text);
  box-shadow:0 3px 0 var(--apd-btn-kante), 0 8px 18px rgba(0,0,0,.35);
}
.apd-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--apd-btn-kante) }
.apd-btn.gross{ font-size:var(--ap-t-titel,16px); padding:13px 14px }
.apd-btn2{
  margin-top:8px;
  background:linear-gradient(180deg,var(--apd-btn2-1),var(--apd-btn2-2)); color:#fff;
  box-shadow:0 3px 0 var(--apd-btn2-kante), 0 8px 18px rgba(0,0,0,.3);
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}
.apd-btn2:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--apd-btn2-kante) }
/* Geisterfassung fuer einen dritten, leisen Ausgang ("Later", "Skip") — KEINE dritte Farbe,
   nur Flaeche weg. Bewusst selten: der Founder-Entscheid am 10.09. zur Zeremonie war
   "es darf kein View und Later geben, nur View" — .ghost bleibt fuer Stellen stehen, an denen
   ein zweiter Ausgang unvermeidlich ist (z.B. Pausenmenue "Resume"/"Abandon"). */
.apd-btn.ghost,.apd-btn2.ghost{
  background:rgba(255,255,255,.07); color:var(--apd-body); box-shadow:none;
}
.apd-row{ display:flex; gap:10px; margin-top:10px }
.apd-row>.apd-btn,.apd-row>.apd-btn2{ margin-top:0; flex:1 }

/* ═══ SCHLIESSEN ══════════════════════════════════════════════════════════════════════════════
   .apd-close ist das rote X — Ausnahme von "gold/dunkel", weil Schliessen keine der beiden
   Hauptrollen ist (Konvention schon in #02 Kartendialog und #03 Turminfo-Karte: rotes X in
   BEIDEN, unabhaengig von der jeweiligen Kartenfarbe). ═══════════════════════════════════════ */
.apd-close{
  position:absolute; top:-10px; right:-10px; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; z-index:3;
  background:linear-gradient(180deg,var(--apd-x-1),var(--apd-x-2));
  border:2px solid var(--apd-x-k); color:#fff; font-size:15px; font-weight:900;
  box-shadow:0 4px 10px rgba(0,0,0,.4);
}
.apd{ position:relative }  /* Ankerpunkt fuer .apd-close */

/* ═══ SPRECHBLASE ═════════════════════════════════════════════════════════════════════════════
   .apd-bubble ersetzt die WEISSE Tutorial-Blase (#06, ui_mod/arena_solara.js `._solblase`) durch
   dieselbe dunkle Familie wie #07 (Hub-Coach, arena_hub_coach.js `.hcbub`) — Founder-Auftrag
   "#06 weiss -> dunkle Blase wie #07". #07 selbst zieht die Kante von Blau auf Gold nach
   (Entscheid 1), .apd-bubble-tail hier ist bereits die neue Kante. ═══════════════════════════ */
.apd-bubble{
  position:relative; display:flex; gap:8px; align-items:center; max-width:280px;
  padding:10px 12px; border-radius:12px;
  background:linear-gradient(180deg,var(--apd-bg-1),var(--apd-bg-2));
  border:2px solid var(--apd-edge); box-shadow:0 6px 20px rgba(0,0,0,.55);
  font-family:var(--apd-font); color:#eaf2ff; font-size:12.5px; font-weight:700; line-height:1.3;
}
.apd-bubble .apd-bpic{
  width:32px; height:32px; border-radius:50%; flex:0 0 32px; object-fit:cover;
  border:1px solid var(--apd-accent); background:#0b1c33;
}
/* Blasenspitze als reines CSS-Dreieck (kein Bild, jeder DPR scharf) — Technik aus
   arena_solara.js `._solpitze` uebernommen, nur die Farbe zieht auf --apd-edge um. */
.apd-bubble-tail{ position:absolute; width:0; height:0; pointer-events:none }
.apd-bubble-tail.unten{ left:24px; bottom:-9px;
  border-left:8px solid transparent; border-right:8px solid transparent;
  border-top:9px solid var(--apd-edge);
}
.apd-bubble-tail.oben{ left:24px; top:-9px;
  border-left:8px solid transparent; border-right:8px solid transparent;
  border-bottom:9px solid var(--apd-edge);
}

/* ═══ VOLLBILD-KOPFZEILE ══════════════════════════════════════════════════════════════════════
   Fuer #09 Defenders Guide und aehnliche Vollbild-Ansichten (kein Popup, aber dieselbe Familie
   im Kopfband): Gold-Kante unten, kein eigener Radius (die Ansicht selbst ist nicht rund). */
.apd-kopf{
  background:linear-gradient(180deg,var(--apd-bg-1),var(--apd-bg-2));
  border-bottom:2px solid var(--apd-edge); color:var(--apd-title);
  font-family:var(--apd-font); font-weight:var(--apd-fw);
}

/* ═══ REITER ══════════════════════════════════════════════════════════════════════════════════
   .apd-Tab ist die Aktivmarkierung der Reiterleisten (Fable-Entscheid 17.09.2026, arena-v457,
   EINGUSS_FIX.md Fund 4): Battle Deck, Guide, Rangliste und Events trugen zwei Aktivfarben
   nebeneinander — Cyan bei .ap-reiter (ui_bauteile.css Abschnitt 10), Gold beim Guide (.grtab.on).
   Beides gefuellt widerspricht "EIN Gold je Bildschirm" (schon Fund 2 dieser Pruefung) sobald
   der Bildschirm einen eigenen Hauptknopf traegt (Schmiede bei Battle Deck, Play bei Events) —
   und Cyan war nie eine Bedeutungsfarbe, nur AAs Zierde. AKTIV traegt darum nur noch hellen Text
   wie die Dialogfamilie (--apd-title) und eine 2px Goldlinie UNTEN (--apd-edge, dieselbe
   Technik wie .apd-kopf oben) — KEIN gefuelltes Gold, keine Flaeche. INAKTIV bleibt gedaempfter
   Text (--ap-tinte-2, AA-gemessen 4,54:1, l2-Lehre 11.09.2026), keine Linie, keine Flaeche.
   .apd-Tab.an deckt dieselbe Doppelbenennung ab wie das Bauteil selbst (.an/.on je nach
   Aufrufer, siehe hub_new.html u3-Block 10.09.2026) — beide Klassennamen tragen dasselbe Rezept.
   Die vier Reiterleisten wenden dieses Rezept ueber bildschirmscharfe Selektoren an (hub_new.html,
   Begruendung dort); .apd-Tab selbst bleibt die EINE Quelle der zwei Werte. */
.apd-Tab{
  background:none; box-shadow:none; color:var(--ap-tinte-2,#B4C8E5);
  border-bottom:2px solid transparent;
}
.apd-Tab.on,.apd-Tab.an{
  background:none; box-shadow:none; color:var(--apd-title);
  border-bottom-color:var(--apd-edge);
}