/* ==========================================================================
   Verify — Glut-Tor
   --------------------------------------------------------------------------
   Kein Kästchen auf einer Seite, sondern ein Bildschirm: vollflächig, wie eine
   App. Der Servername ist der Held, die Aktion sitzt unten in Daumenreichweite.
   Hinter allem glimmt eine Glut — die Marke ist Feuer, also brennt die Seite.

   Neutraltöne sind bewusst warm gebogen (nicht Grau, sondern Asche), damit sie
   zum Orange gehören statt daneben zu liegen.
   ========================================================================== */

:root {
  color-scheme: dark light;

  /* Asche & Glut */
  --ground: #0b0a09;
  --ground-lift: #12100e;
  --surface: #171412;
  --hairline: rgba(255, 226, 202, 0.10);
  --hairline-hi: rgba(255, 226, 202, 0.20);

  --ink: #f5f0ec;
  --ink-dim: #a69b93;
  --ink-faint: #6f655e;

  --ember: #ff5a1f;
  --ember-hi: #ffb020;
  --ember-deep: #c41e00;
  --on-ember: #180800;

  --ok: #4ade80;
  --warn: #fbbf24;
  --err: #ff5f56;

  --display: "Bricolage Grotesque", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(22px, 7vw, 40px);
}

@media (prefers-color-scheme: light) {
  :root {
    --ground: #faf8f6;
    --ground-lift: #ffffff;
    --surface: #ffffff;
    --hairline: rgba(26, 22, 20, 0.10);
    --hairline-hi: rgba(26, 22, 20, 0.20);

    --ink: #1a1614;
    --ink-dim: #6b605a;
    --ink-faint: #9a8f88;

    --ember-deep: #e03e00;
    --on-ember: #ffffff;

    --ok: #16a34a;
    --warn: #b45309;
    --err: #dc2626;
  }
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

/* Das eingebaute [hidden] des Browsers hat sehr geringe Spezifitaet — jede
   eigene Regel mit display: (etwa ".steps { display: grid }") schlaegt es und
   zeigt ein eigentlich verstecktes Element doch an. Das ist hier dreimal
   passiert: Wappen-Bild, Identitaets-Chip und Schrittliste waren sichtbar,
   bevor sie es sein sollten. Eine globale Regel schliesst das ein fuer alle
   Mal aus. */
[hidden] { display: none !important; }

/* ── Glut ────────────────────────────────────────────────────────────────── */

#ember {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Wärme, die von unten aufsteigt. Liegt unter dem Canvas und trägt die Seite,
   auch wenn das Canvas nicht läuft. */
body::after {
  content: "";
  position: fixed;
  inset: auto 0 0 0;
  height: 62vh;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 118%, rgba(255, 90, 31, .30) 0%, rgba(196, 30, 0, .10) 38%, transparent 68%),
    radial-gradient(90% 70% at 82% 108%, rgba(255, 176, 32, .16) 0%, transparent 62%);
}

@media (prefers-color-scheme: light) {
  body::after {
    background:
      radial-gradient(120% 100% at 50% 120%, rgba(255, 90, 31, .16) 0%, transparent 62%),
      radial-gradient(90% 70% at 82% 110%, rgba(255, 176, 32, .10) 0%, transparent 58%);
  }
}

/* ── Gerüst ──────────────────────────────────────────────────────────────── */

.screen {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  max-width: 520px;
  margin: auto;
  /* Unten deutlich mehr Luft als oben: Der Knopf und der Hinweis darunter
     sollen nicht am Rand kleben. */
  padding: max(28px, env(safe-area-inset-top)) var(--gutter)
           max(56px, calc(env(safe-area-inset-bottom) + 40px));
  /* Ein zusammenhaengender, mittig sitzender Block statt eines Rasters mit
     dehnbarer Zeile. Das Raster hatte auf grossen Bildschirmen ein totes Loch
     von ueber hundert Pixeln zwischen Namens-Chip und Knopf gerissen. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 34px;
}

/* ── Kopf: Marke ─────────────────────────────────────────────────────────── */

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  animation: fade .6s .05s both;
}

.brand .flame {
  width: 15px;
  height: 15px;
  fill: var(--ember);
  filter: drop-shadow(0 0 6px rgba(255, 90, 31, .55));
}

/* ── Mitte: Identität ────────────────────────────────────────────────────── */

.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 0;
}

.crest {
  position: relative;
  width: 104px;
  height: 104px;
  margin-bottom: 28px;
  animation: lift .7s .1s cubic-bezier(.16, 1, .3, 1) both;
}

/* Bild und Buchstaben-Ersatz liegen UEBEREINANDER, nicht untereinander.
   Standen sie im Textfluss, ergaben 88px + 88px eine 176px hohe Saeule in
   einer 88px-Box — das Wappen rutschte dann ueber die Ueberschrift. */
.crest img,
.crest .fallback {
  position: absolute;
  inset: 0;
  width: 104px;
  height: 104px;
  border-radius: 30px;
  object-fit: cover;
  /* Feiner heller Rand: hebt das Logo vom dunklen Grund ab, ohne aufdringlich
     zu wirken. */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .10),
              0 18px 44px -14px rgba(255, 90, 31, .55);
}

.crest .fallback {
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 38px;
  font-weight: 700;
  color: var(--on-ember);
  background: linear-gradient(150deg, var(--ember-hi), var(--ember) 55%, var(--ember-deep));
}

/* Die Glut sitzt unter dem Wappen, nicht dahinter — es soll aussehen, als
   käme die Wärme aus dem Server selbst. */
.crest::after {
  content: "";
  position: absolute;
  inset: 10px 4px -10px;
  border-radius: 30px;
  background: var(--ember);
  filter: blur(30px);
  opacity: .5;
  z-index: -1;
}

@media (prefers-color-scheme: light) { .crest::after { opacity: .3; } }

/* Der Schein hinter dem Wappen atmet langsam. Sechs Sekunden pro Zyklus ist
   gerade so viel, dass die Seite lebendig wirkt, ohne die Aufmerksamkeit vom
   Knopf wegzuziehen. Bei "Bewegung reduzieren" steht er still (siehe unten). */
.crest::after { animation: atmen 6s ease-in-out infinite; }

@keyframes atmen {
  0%, 100% { opacity: .42; transform: scale(1); }
  50%      { opacity: .62; transform: scale(1.06); }
}

h1 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: clamp(30px, 8.4vw, 44px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  animation: lift .7s .16s cubic-bezier(.16, 1, .3, 1) both;
}

.sub {
  margin: 0 auto;
  max-width: 46ch;
  text-wrap: balance;
  font-size: 16.5px;
  color: var(--ink-dim);
  animation: lift .7s .22s cubic-bezier(.16, 1, .3, 1) both;
}

/* ── Wer bin ich ─────────────────────────────────────────────────────────── */
/* Bestätigt dem Nutzer, dass er mit dem richtigen Discord-Konto unterwegs ist.
   Mehrkonten sind verbreitet — ohne diesen Hinweis merkt jemand erst nach dem
   Verifizieren, dass er die falsche Rolle auf dem falschen Konto hat. */

.whoami {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 22px;
  padding: 8px 15px 8px 8px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  animation: lift .7s .26s cubic-bezier(.16, 1, .3, 1) both;
}

.whoami .pfp {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--ground-lift);
  flex: none;
}

.whoami .who {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  text-align: left;
  min-width: 0;
}

.whoami .who-label {
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.whoami b {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-view="result"] .whoami { display: none; }

/* ── Fuß: Aktion ─────────────────────────────────────────────────────────── */

.action {
  align-self: stretch;
  animation: lift .7s .3s cubic-bezier(.16, 1, .3, 1) both;
}

.btn {
  width: 100%;
  padding: 17px 22px;
  font: inherit;
  font-size: 16px;
  font-weight: 640;
  letter-spacing: -.01em;
  color: var(--on-ember);
  background: linear-gradient(135deg, var(--ember-hi) -10%, var(--ember) 55%, var(--ember-deep) 130%);
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .22) inset,
    0 12px 30px -10px rgba(255, 90, 31, .7);
  transition: transform .1s ease, box-shadow .25s ease, filter .25s ease, opacity .25s ease;
}

.btn:hover:not(:disabled) { filter: brightness(1.06); box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 16px 38px -10px rgba(255, 90, 31, .82); }
.btn:active:not(:disabled) { transform: translateY(1.5px) scale(.994); }
.btn:focus-visible { outline: 2px solid var(--ember-hi); outline-offset: 3px; }
.btn:disabled { cursor: default; opacity: .5; box-shadow: none; filter: saturate(.45); }

.btn .spinner {
  display: inline-block;
  width: 15px; height: 15px;
  margin-right: 10px;
  vertical-align: -2px;
  border: 2px solid rgba(255, 255, 255, .3);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin .65s linear infinite;
}

.hint {
  margin: 18px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-faint);
  min-height: 18px;
}

/* ── Ablauf ──────────────────────────────────────────────────────────────── */
/* Ersetzt den Knopf, sitzt an derselben Stelle — der Bildschirm springt nicht. */

.steps {
  /* Abstand zum Knopf darunter — vorher klebten beide aneinander. */
  margin: 0 0 18px;
  padding: 8px;
  list-style: none;
  display: grid;
  gap: 2px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--surface);
  animation: fade .3s both;
}

.steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  border-radius: 11px;
  font-size: 14.5px;
  color: var(--ink-faint);
  transition: color .3s ease, background .3s ease;
}

.steps li .dot {
  flex: none;
  width: 19px; height: 19px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: .35;
  display: grid;
  place-items: center;
  transition: opacity .3s ease, border-color .3s ease, background .3s ease, color .3s ease;
}

.steps li .dot svg { width: 11px; height: 11px; opacity: 0; transition: opacity .25s ease; }

.steps li[data-state="active"] { color: var(--ink); background: var(--ground-lift); }
.steps li[data-state="active"] .dot {
  opacity: 1;
  border-color: var(--ember);
  border-right-color: transparent;
  animation: spin .75s linear infinite;
}

.steps li[data-state="done"] { color: var(--ink-dim); }
.steps li[data-state="done"] .dot {
  opacity: 1;
  border-color: var(--ok);
  background: var(--ok);
  color: var(--ground);
}
.steps li[data-state="done"] .dot svg { opacity: 1; }

/* ── Turnstile ───────────────────────────────────────────────────────────── */

#turnstile { display: flex; justify-content: center; }
#turnstile:not(:empty) { margin-bottom: 16px; }

/* ── Ergebnis ────────────────────────────────────────────────────────────── */
/* Der Bildschirm wechselt nicht die Seite, er wandelt sich. */

.result { display: none; }

body[data-view="result"] .crest,
body[data-view="result"] .action { display: none; }
body[data-view="result"] .result { display: block; animation: lift .55s cubic-bezier(.16, 1, .3, 1) both; }

.seal {
  width: 84px; height: 84px;
  margin-bottom: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  animation: pop .5s cubic-bezier(.16, 1.5, .5, 1) both;
}

.seal svg { width: 40px; height: 40px; }
.seal svg path, .seal svg circle {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.seal svg .draw {
  stroke-dasharray: 44;
  stroke-dashoffset: 44;
  animation: draw .5s .18s cubic-bezier(.6, 0, .3, 1) forwards;
}

.seal.ok   { color: var(--ok);   background: color-mix(in srgb, var(--ok) 14%, transparent); }
.seal.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.seal.err  { color: var(--err);  background: color-mix(in srgb, var(--err) 14%, transparent); }

.result h2 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: clamp(30px, 9vw, 44px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.result p { margin: 0; max-width: 28ch; font-size: 16.5px; color: var(--ink-dim); }

.code {
  display: inline-block;
  margin-top: 20px;
  padding: 7px 13px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--ink-dim);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 9px;
}

.detail { margin-top: 18px; font-size: 14px; color: var(--ink-faint); max-width: 32ch; }

/* Zweitrangige Aktion — soll den Erfolgsweg nicht überstrahlen. */
.btn.ghost {
  margin-top: 22px;
  max-width: 300px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline-hi);
  box-shadow: none;
}
.btn.ghost:hover:not(:disabled) { background: var(--ground-lift); filter: none; box-shadow: none; }
.btn.ghost .spinner { border-color: var(--hairline-hi); border-top-color: currentColor; }

.result .hint { text-align: left; margin-top: 12px; }

/* ── Falle ───────────────────────────────────────────────────────────────── */
/* Unsichtbar für Menschen, ein ganz normales Feld für einen HTML-lesenden Bot.
   Bewusst kein display:none — das überspringen manche Automatisierungen. */
.field-alt {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ── Bewegung ────────────────────────────────────────────────────────────── */

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lift { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pop  { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Größere Schirme: die Seite bleibt eine Spalte, bekommt aber Luft ────── */

@media (min-height: 720px) {
  .screen { gap: 38px; padding-block: 48px; }
  /* Hier stand vorher 96px — auf dem GROESSEREN Schirm wurde das Wappen also
     kleiner als der Grundwert von 104px. Umgekehrt ist richtig. */
  .crest { width: 116px; height: 116px; }
  .crest img, .crest .fallback { width: 116px; height: 116px; border-radius: 34px; }
}

/* ── Bewegungsarme Darstellung ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  #ember { display: none; }
  .seal svg .draw { stroke-dashoffset: 0; }
}