/* tokens.css — die einzige Stelle, an der eine Farbe zum ersten Mal auftaucht.
   Alle drei Dienste laden genau diese Datei. Wer hier etwas aendert, aendert es ueberall;
   wer eine Farbe direkt in eine Seite schreibt, bricht genau das. */

:root {
  /* ---- Grund. Kein reines Schwarz: der Entwurf lebt von einem Blaustich,
         der unter allem durchscheint. Reines #000 laesst die Karten flach wirken. */
  --bg:            #060a14;
  --bg-deep:       #04070f;
  --bg-soft:       #0a1020;

  /* ---- Flaechen. Karten sind nie eine Farbe, sondern ein leichter Verlauf von oben
         nach unten — das ist der Unterschied zwischen "dunkles Rechteck" und "Karte". */
  --card:          #0d1526;
  --card-top:      #101a2e;
  --card-bottom:   #0b1221;
  --card-hi:       #131e35;   /* gehoben: Zeile unter dem Zeiger, aktiver Reiter */
  --inset:         #080e1b;   /* eingelassen: Eingabefelder, Fortschrittsrinnen */

  /* ---- Linien. Drei Staerken, mehr braucht es nicht. */
  --line:          #1b2742;
  --line-soft:     #141e33;
  --line-strong:   #27375a;

  /* ---- Schrift */
  --txt:           #e9f0ff;
  --txt-2:         #9cadd2;
  --txt-3:         #6a7ca6;
  --txt-4:         #4a5878;

  /* ---- Akzente. Blau ist die Marke, der Rest gehoert je einem Spielmodus. */
  --blue:          #2f90ff;
  --blue-lite:     #5fa9ff;
  --blue-deep:     #1a6ce0;
  --blue-ghost:    rgba(47,144,255,.12);
  --blue-line:     rgba(47,144,255,.34);
  --blue-glow:     rgba(47,144,255,.42);

  --purple:        #a855f7;
  --purple-deep:   #7c3aed;
  --green:         #22c55e;
  --green-deep:    #15a349;
  --amber:         #f59e0b;
  --amber-deep:    #d97706;
  --red:           #ef4444;
  --red-deep:      #dc2626;
  --gold:          #ffc93c;
  --pink:          #ec4899;
  --cyan:          #22d3ee;

  /* ---- Spielmodi. Die vier Bedwars-Modi des Netzwerks: Solo (8x1), Doubles (4x2),
         4v4v4v4 (4x4) und 4v4 (2x4). Jeder hat genau eine Farbe, und die gilt ueberall:
         Karte, Abzeichen, Balken, Knopf, Diagrammlinie. */
  --m-solo:        #22d3ee;
  --m-doubles:     #f59e0b;
  --m-fours:       #ef4444;
  --m-4v4:         #a855f7;

  /* ---- Masse */
  --shell:         1340px;
  --shell-pad:     24px;
  --head-h:        72px;

  --r-xs:          6px;
  --r-sm:          9px;
  --r:             12px;
  --r-lg:          16px;
  --r-xl:          20px;
  --r-pill:        999px;

  /* ---- Schatten. Dunkle Entwuerfe brauchen Schatten NACH INNEN (ein heller Rand oben),
         sonst sieht jede Karte aufgeklebt aus. */
  --sh-card:       0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -24px rgba(0,0,0,.9);
  --sh-pop:        0 24px 60px -20px rgba(0,0,0,.85), 0 0 0 1px var(--line);
  --sh-blue:       0 10px 30px -10px var(--blue-glow);

  /* ---- Schrift-Familien */
  --f-head: 'Plus Jakarta Sans', 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-hand: 'Caveat', 'Bradley Hand', cursive;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Bewegung. Eine Dauer fuer alles Kleine, eine fuer alles Grosse. */
  --t:             .16s cubic-bezier(.4,0,.2,1);
  --t-slow:        .32s cubic-bezier(.4,0,.2,1);
}

/* Modus-Farbe als Variable setzen, damit eine Karte nur `data-mode` braucht
   und alles darin automatisch stimmt. */
[data-mode="solo"]     { --m: var(--m-solo);    --m-2: #0e7490; }
[data-mode="doubles"]  { --m: var(--m-doubles); --m-2: #b45309; }
[data-mode="fours"]    { --m: var(--m-fours);   --m-2: #b91c1c; }
[data-mode="4v4"]      { --m: var(--m-4v4);     --m-2: #6d28d9; }
/* Seit 30.09.2026 (Rundenseite): Survival Games grün, TTT magenta, Arcade gelb — wie ihre Karten auf der Startseite. */
[data-mode="sg"]       { --m: #3fb468; --m-2: #2a9a52; }
[data-mode="ttt"]      { --m: #d9468f; --m-2: #b82f72; }
[data-mode="ar"]       { --m: #ffc83d; --m-2: #e0a41c; }
/* Seit 01.10.2026 (Profil-Kacheln aller Spiele): SkyWars lila, GetDown orange, Duels rot, JumpDown türkis. */
[data-mode="sw"]       { --m: #6a33ea; --m-2: #5420d6; }
[data-mode="gd"]       { --m: #ef981f; --m-2: #d97a0d; }
[data-mode="du"]       { --m: #e5484d; --m-2: #c7303a; }
[data-mode="jd"]       { --m: #1fc9b6; --m-2: #12a594; }

/* ---- Raenge. Dieselben Namen wie in der Netzwerk-Datenbank (AetherRanks): default vip
       vip_plus prime youtube helper mod admin dev owner. Farben aus den Chat-Praefixen. */
.rank[data-rank="default"]  { background: linear-gradient(135deg, #64748b, #475569); }
.rank[data-rank="vip"]      { background: linear-gradient(135deg, #34d399, #059669); }
.rank[data-rank="vip_plus"] { background: linear-gradient(135deg, #34d399 0%, #059669 55%, #d97706 100%); }
.rank[data-rank="prime"]    { background: linear-gradient(135deg, #fbbf24, #d97706); color: #1a1200; text-shadow: none; }
.rank[data-rank="youtube"]  { background: linear-gradient(135deg, #f87171, #dc2626); }
.rank[data-rank="helper"]   { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.rank[data-rank="mod"]      { background: linear-gradient(135deg, #4ade80, #15803d); }
.rank[data-rank="admin"]    { background: linear-gradient(135deg, #f87171, #b91c1c); }
.rank[data-rank="dev"]      { background: linear-gradient(135deg, #2dd4bf, #0f766e); }
.rank[data-rank="owner"]    { background: linear-gradient(135deg, #dc2626, #7f1d1d); }