/* Originalschriften der Sendung (lizenziert, liegen nur auf dem Server unter media/fonts –
   nicht im Repository). Ohne Anmeldung greifen die Ersatzschriften. */
@font-face { font-family: 'WWM Conduit'; src: url('/media/fonts/ConduitITCStd-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'WWM Conduit'; src: url('/media/fonts/ConduitITCStd-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'WWM Conduit'; src: url('/media/fonts/ConduitITCStd-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'WWM Copperplate'; src: url('/media/fonts/COPRGTB.TTF') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'WWM Copperplate'; src: url('/media/fonts/COPRGTL.TTF') format('truetype'); font-weight: 300; font-display: swap; }

/* Gemeinsame Gestaltung – Farben aus den eigenen Illustrator-Vorlagen
   (Antwortfelder #223a88 mit grauem Verlaufsrand, Gewinnbaum #253d6a → #171932, Gold #d6a43b). */
:root {
  --bg-0: #050a24;
  --bg-1: #0b1748;
  --bg-2: #13235e;
  --box: #223a88;
  --box-hi: #2c4aa8;
  --box-lo: #142463;
  --panel-a: #253d6a;
  --panel-b: #171932;
  --gold: #d6a43b;
  --gold-hi: #f2c75c;
  --orange: #f39200;
  --orange-hi: #ffb340;
  --green: #2fae3a;
  --green-hi: #6be06b;
  --red: #d8312d;
  --white: #ffffff;
  --muted: #9fb0e0;
  --line: #9a9a9a;
  --ui-bg: #0d1640;
  --ui-card: #15215a;
  --ui-card-2: #1c2a6d;
  --ui-border: #2e3f8a;
  --ui-text: #e8edff;
  --font-ui: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-show: 'WWM Conduit', 'Conduit ITC', 'Segoe UI', system-ui, Arial, sans-serif;
  --font-money: 'WWM Copperplate', 'Copperplate Gothic Bold', CopperplateGothic-Bold, Copperplate, 'Copperplate Gothic', 'Times New Roman', serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(ellipse at 50% 30%, var(--bg-2) 0%, var(--bg-1) 45%, var(--bg-0) 100%) fixed;
  color: var(--ui-text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- Rauten (Frage-/Antwortfelder) */
.loz {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.4em;
  isolation: isolate;
}
.loz-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: -1; overflow: visible;
}
.loz-bg path {
  fill: url(#lozFill);
  stroke: url(#lozStroke);
  stroke-width: 2.5px;
  vector-effect: non-scaling-stroke;
  transition: fill .25s;
}
.loz-content {
  position: relative;
  font-family: var(--font-show);
  font-weight: 500;
  display: flex; align-items: center; gap: .5em;
  width: 100%;
  padding: .35em 2.2em;
  line-height: 1.2;
}
.loz-letter { color: var(--orange); font-weight: 700; flex: none; font-family: var(--font-show); }
.loz-text { color: var(--white); flex: 1; min-width: 0; }
.loz.center .loz-content { justify-content: center; text-align: center; }

.loz.selected .loz-bg path, .loz.locked .loz-bg path { fill: url(#lozOrange); }
.loz.selected .loz-letter, .loz.locked .loz-letter { color: var(--white); }
.loz.selected .loz-text, .loz.locked .loz-text { color: #1b1100; }
.loz.correct .loz-bg path { fill: url(#lozGreen); }
.loz.correct .loz-letter { color: var(--white); }
.loz.correct .loz-text { color: #071b07; }
.loz.correct.flash .loz-bg path { animation: flash .35s steps(2) 5; }
.loz.removed .loz-content { visibility: hidden; }
.loz.dim { opacity: .55; }
.loz.gold .loz-bg path { fill: url(#lozFill); stroke: url(#lozGold); stroke-width: 3px; }
@keyframes flash { 50% { fill: url(#lozFill); } }

/* Verbindungslinie hinter den Rauten (wie in der Vorlage) */
.loz-row { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.6em; }
.loz-row::before, .loz-line::before {
  content: ''; position: absolute; left: -100vw; right: -100vw; top: 50%;
  height: 2px; transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, var(--line) 15%, #c9c8c8 50%, var(--line) 85%, transparent);
  z-index: -2;
}
.loz-line { position: relative; isolation: isolate; }

/* ---------------------------------------------------------------- Gewinnleiter */
/* Gewinnleiter in Copperplate wie die eigene Gewinnbaum-Grafik */
.ladder {
  font-weight: 700;
  background: linear-gradient(90deg, var(--panel-a), var(--panel-b));
  font-family: var(--font-money);
  color: var(--gold);
  display: flex; flex-direction: column;
  padding: 1em .8em;
}
.ladder-jokers { display: flex; justify-content: center; gap: .6em; margin-bottom: .8em; }
.ladder-rows { display: flex; flex-direction: column-reverse; gap: .12em; flex: 1; justify-content: center; }
.ladder-row {
  position: relative;
  display: grid; grid-template-columns: 2.2em 1em 1fr; align-items: center;
  padding: .05em .6em;
  font-size: 1em; line-height: 1.25;
  border-radius: 999px;
  white-space: nowrap;
}
.ladder-row .lnum { text-align: right; }
.ladder-row .ldot { text-align: center; color: var(--orange); font-size: .7em; }
.ladder-row.safe { color: var(--white); }
.ladder-row.current { background: linear-gradient(180deg, var(--orange-hi), var(--orange)); color: #1b1100; }
.ladder-row.current .ldot { color: #1b1100; }
.ladder-row.won { opacity: .95; }
.ladder-row.lost { color: var(--red); }

/* ---------------------------------------------------------------- Joker-Symbole */
.joker {
  position: relative; width: 4.2em; height: 2.6em; flex: none;
  display: inline-grid; place-items: center;
}
.joker svg { width: 100%; height: 100%; overflow: visible; }
.joker .j-oval { fill: url(#lozFill); stroke: url(#lozStroke); stroke-width: 3; }
.joker .j-fg { fill: #fff; stroke: none; }
.joker .j-fg-stroke { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; }
.joker .j-x { stroke: var(--red); stroke-width: 7; stroke-linecap: round; display: none; }
.joker.used .j-x { display: block; }
.joker.used { opacity: .75; }
.joker.active .j-oval { fill: url(#lozOrange); }

/* ---------------------------------------------------------------- Allgemeine Bedienelemente */
.btn {
  appearance: none; border: 1px solid var(--ui-border);
  background: linear-gradient(180deg, var(--ui-card-2), var(--ui-card));
  color: var(--ui-text);
  padding: .55em 1em; border-radius: 10px; cursor: pointer;
  font-weight: 600; line-height: 1.2;
  transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover:not(:disabled) { border-color: #5a72d6; background: linear-gradient(180deg, #24358a, #1a2766); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.primary { background: linear-gradient(180deg, var(--orange-hi), var(--orange)); color: #1b1100; border-color: #ffc56b; }
.btn.primary:hover:not(:disabled) { background: linear-gradient(180deg, #ffc15c, #ff9f12); }
.btn.good { background: linear-gradient(180deg, #47c450, #23852b); border-color: #6be06b; color: #fff; }
.btn.bad { background: linear-gradient(180deg, #e2514d, #a82320); border-color: #ff8a86; color: #fff; }
.btn.ghost { background: transparent; }
.btn.small { padding: .3em .65em; font-size: .85em; border-radius: 8px; }
.btn.big { padding: .9em 1.4em; font-size: 1.15em; }

input[type=text], input[type=password], input[type=number], select, textarea {
  background: #0a1235; border: 1px solid var(--ui-border); border-radius: 8px;
  padding: .5em .7em; color: var(--ui-text); width: 100%;
}
input:focus, select:focus, textarea:focus, .btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
label { display: block; font-size: .85em; color: var(--muted); margin-bottom: .25em; }

.card { background: rgba(21, 33, 90, .85); border: 1px solid var(--ui-border); border-radius: 14px; padding: 1em; }
.muted { color: var(--muted); }
.money { font-family: var(--font-money); color: var(--gold); }
.pill { display: inline-block; padding: .15em .6em; border-radius: 999px; background: #0a1235; border: 1px solid var(--ui-border); font-size: .8em; }
.pill.on { border-color: var(--green); color: var(--green-hi); }
.pill.off { border-color: #555; color: #888; }

.toast-wrap { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); display: grid; gap: 8px; z-index: 1000; width: min(92vw, 520px); }
.toast { background: #2a0f12; border: 1px solid var(--red); color: #ffd7d5; padding: .7em 1em; border-radius: 10px; box-shadow: 0 8px 30px #0008; animation: toastIn .2s; }
.toast.info { background: #0f2a14; border-color: var(--green); color: #d8ffd9; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

.conn { position: fixed; top: 8px; right: 8px; z-index: 999; font-size: 12px; padding: 4px 8px; border-radius: 6px; background: #a82320; color: #fff; }

/* Spirograph-Hintergrund */
.spiro { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; pointer-events: none; z-index: 0; }
.spiro svg { width: 140vmax; height: 140vmax; opacity: .12; animation: spin 180s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spiro svg { animation: none; } }