/* Edahnien CSS — autogeneriert aus edahnien.css */

/* ─── Info-Seite: Full-Height Layout + Hintergrundbild ─────────────── */

/* Vollbild-Hintergrund — Bild + Opacity werden von info.php injiziert */
.info-page::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Flex-Column damit Footer immer unten ist */
.info-page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Hauptinhalt wächst, Footer bleibt unten */
.info-page main.town-grid {
  flex: 1;
}

.info-page #footer {
  margin-top: auto;
}

/* ─── Info-Topbar ────────────────────────────────────────────────────── */

.info-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 90px;
  padding: 0 40px;
  background: linear-gradient(180deg, rgba(8,13,6,0.72) 0%, rgba(8,13,6,0.40) 100%);
  border-bottom: 1px solid rgba(160,200,120,0.08);
  backdrop-filter: blur(14px) saturate(1.2);
}
/* Hamburger: nur auf Mobile sichtbar */
.nav-hamburger { display: none; }

.info-topbar-left {
  display: flex;
  align-items: center;
}
.info-topbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.info-logo {
  height: 70px;
  width: auto;
  display: block;
}

/* Icon-Buttons rechts in der Topbar */
.info-icon-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 10px;
  min-width: 52px;
  color: var(--ink-dim);
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  font-size: 20px;
  line-height: 1;
}
.info-icon-btn .btn-label {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: 'Cinzel', serif;
  line-height: 1;
}
.info-icon-btn:hover {
  color: var(--jade-bright);
  background: rgba(74,222,128,0.1);
  border-color: rgba(74,222,128,0.3);
}
/* Hilfe-Icon: Fragezeichen im Kreis */
.info-icon-btn .icon-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Cinzel', serif;
  line-height: 1;
}

/* Burgplatz-Chat */
.village-chat {
    margin-top: 20px;
}
.village-chat .chat-shell {
    max-width: 100%;
}

/* Burgplatz / Ortsbeschreibung */
.village-intro {
  padding: 14px 18px 12px;
  margin-bottom: 16px;
  background: rgba(8,12,8,0.55);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-dim);
  font-style: italic;
}

/* Optionaler Untertitel unter der Topbar */
.info-subtitle {
  background: rgba(15,22,8,0.6);
  border-bottom: 1px solid var(--line);
  padding: 6px 24px;
  font-size: 13px;
  font-style: italic;
  color: var(--ink-dim);
  text-align: center;
}

/* ─── Town Banner ───────────────────────────────────────────────────── */

/* .town-banner wird nicht mehr als eigenständiges Block-Element gerendert,
   der Titel ist jetzt in der Topbar zentriert. Klassen bleiben aber
   für eventuelle direkte Nutzung erhalten. */
.town-banner {
  background: linear-gradient(135deg, var(--moss-deep) 0%, rgba(15,22,8,0.95) 100%);
  border-bottom: 1px solid var(--line-strong);
  padding: 16px 28px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.info-topbar .town-banner-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
  font-family: 'Cinzel', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.06em;
}
.town-banner-title {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.06em;
}
.town-banner-sub {
  color: var(--ink-dim);
  font-size: 13px;
  margin-top: 2px;
}

/* ─── Nav Column ────────────────────────────────────────────────────── */

a.nav {
  display: block;
  color: var(--ink-dim);
  font-size: 13px;
  padding: 5px 12px;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.nav:hover {
  background: rgba(255,255,255,0.06);
  color: var(--ink);
}
.navhead {
  display: block;
  color: var(--gold);
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 12px 4px;
  margin-top: 4px;
}
.navhelp {
  display: block;
  color: var(--ink-faint);
  font-size: 11px;
  font-style: italic;
  padding: 2px 12px;
}

/* ─── Footer ────────────────────────────────────────────────────────── */

#footer {
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 11px;
  padding: 8px 24px;
  text-align: right;
}

/* ─── Flash Messages ────────────────────────────────────────────────── */

.flash-info {
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.35);
  border-radius: 6px;
  color: var(--jade-bright);
  font-size: 13px;
  margin-bottom: 16px;
  padding: 10px 16px;
}
.flash-error {
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(220, 38, 38, 0.35);
  border-radius: 6px;
  color: var(--blood-bright);
  font-size: 13px;
  margin-bottom: 16px;
  padding: 10px 16px;
}

/* ─── Charakter-Reset Bestätigung ───────────────────────────────────── */

.reset-confirm {
  background: rgba(6, 9, 4, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  max-width: 540px;
  margin: 32px auto;
  padding: 32px 36px;
}
.reset-confirm h2 {
  color: var(--blood-bright);
  font-family: 'Cinzel', serif;
  font-size: 20px;
  margin: 0 0 16px;
}
.reset-confirm p {
  color: var(--ink-dim);
  line-height: 1.7;
  margin: 0 0 12px;
}
.reset-warn {
  color: var(--jade-bright) !important;
  font-size: 13px;
}
.reset-buttons {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
.btn-danger {
  background: linear-gradient(135deg, #dc2626, #991b1b);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 10px 22px;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.1s;
}
.btn-danger:hover { opacity: 0.85; transform: translateY(-1px); }
.btn-cancel {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--ink-dim);
  font-family: 'Cinzel', serif;
  font-size: 13px;
  padding: 10px 22px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.btn-cancel:hover { background: rgba(255, 255, 255, 0.1); color: var(--ink); }

/* ─── Wiz disabled button ───────────────────────────────────────────── */

.wiz-btn.disabled, .wiz-btn[disabled] {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}
.wiz-btn.primary {
  background: linear-gradient(135deg, var(--jade-glow), var(--emerald));
  color: #000;
  font-weight: 600;
  border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════════════════
   Landing Page Overhaul — Topbar, Hero-Content, Login-Panel
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Topbar ─────────────────────────────────────────────────────── */
.landing-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2%;
  height: 90px;
  background: linear-gradient(180deg, rgba(4,8,4,0.85) 0%, transparent 100%);
}
.topbar-brand {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
}
.topbar-logo { height: 70px; width: auto; display: block; }
.topbar-glyph {
  width: 36px; height: 36px;
  border: 1px solid var(--jade);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--jade-bright);
  border-radius: 4px;
  flex-shrink: 0;
}
.topbar-name {
  font-family: 'Cinzel', serif;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ink);
}
.topbar-sub {
  font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-faint);
  margin-top: 1px;
}
.topbar-nav {
  display: flex; align-items: center; gap: 4px;
  background: rgba(15, 22, 8, 0.6);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 14px;
  backdrop-filter: blur(4px);
}
.topbar-link {
  font-family: 'Cinzel', serif;
  font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--ink-dim);
  text-decoration: none;
  padding: 6px 16px; border-radius: 20px;
  transition: color 0.2s, background 0.2s;
}
.topbar-link:hover { color: var(--ink); }
.topbar-link.active {
  background: var(--jade-bright); color: var(--moss-black);
  font-weight: 600;
}
.topbar-stats {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink-faint);
  letter-spacing: 0.05em;
  background: rgba(15, 22, 8, 0.6);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 14px;
  backdrop-filter: blur(4px);
}
.topbar-online { display: flex; align-items: center; gap: 6px; color: var(--ink-dim); }
.online-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--jade-bright);
  animation: pulse-dot 2s ease-in-out infinite;
  flex-shrink: 0;
}
.topbar-sep { opacity: 0.3; }

/* ─── Hero Layout ────────────────────────────────────────────────── */
.hero-layout {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  padding: 80px 2%;
  gap: 40px;
  z-index: 5;
}

/* ─── Hero Content (links) ───────────────────────────────────────── */
.hero-content {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 28px;
  max-width: 620px;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--jade-bright);
  padding: 6px 14px;
  border: 1px solid var(--jade-bright);
  border-radius: 20px;
  background: rgba(74,222,128,0.06);
  width: fit-content;
}
.hero-badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--jade-bright);
  animation: pulse-dot 2s ease-in-out infinite;
  flex-shrink: 0;
}
.hero-headline {
  font-family: 'Cinzel', serif;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700; line-height: 1.05;
  color: #fff;
  margin: 0;
  text-shadow: 0 4px 40px rgba(0,0,0,0.8);
}
.hero-headline-em {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 500;
  color: var(--jade);
  font-size: clamp(48px, 7vw, 90px);
}
.hero-desc {
  font-size: 15px; line-height: 1.7;
  color: rgba(232,239,226,0.65);
  max-width: 480px;
  margin: 0;
}
.hero-stats {
  display: flex; gap: 40px; align-items: flex-start;
  padding: 16px 28px;
  background: rgba(15, 22, 8, 0.5);
  border: none;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  width: fit-content;
  backdrop-filter: blur(8px);
}
.hero-stat { display: flex; flex-direction: column; gap: 4px; }
.hero-stat-val {
  font-family: 'Cinzel', serif;
  font-size: 28px; font-weight: 700;
  color: var(--jade-bright);
  letter-spacing: 0.02em;
}
.hero-stat.danger .hero-stat-val { color: #f87171; }
.hero-stat.gold .hero-stat-val { color: var(--gold); }
.hero-stat-label {
  font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-faint);
}
.hero-ctas {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.btn-outline {
  display: inline-flex; align-items: center;
  padding: 11px 22px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  font-family: 'Cinzel', serif;
  font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--ink);
  text-decoration: none;
  background: rgba(15, 22, 8, 0.6);
  backdrop-filter: blur(4px);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.btn-outline:hover {
  border-color: var(--jade-bright); color: var(--jade-bright);
  background: rgba(42, 58, 29, 0.8);
}

/* ─── Login Panel Header ─────────────────────────────────────────── */
.login-panel-header {
  text-align: center;
  padding: 4px 0 16px;
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: 4px;
}
.login-panel-eyebrow {
  font-size: 10px; letter-spacing: 0.25em;
  text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 10px;
}
.login-welcome {
  font-family: 'Cinzel', serif;
  font-size: 22px; font-weight: 700;
  color: var(--ink); margin: 0 0 6px;
}
.login-quote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 13px;
  color: var(--ink-faint); margin: 0;
}

/* ─── JS-Tabs ────────────────────────────────────────────────────── */
.login-tabs {
  display: flex;
  border-bottom: 1px solid rgba(74,222,128,0.12);
  margin-bottom: 20px;
}
.login-tab {
  flex: 1; cursor: pointer;
  font-size: 11px; font-weight: bold; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint);
  padding: 12px 0; text-align: center;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
  user-select: none;
}
.login-tab:hover { color: var(--ink); }
.login-tab.active { color: var(--jade-bright); border-bottom-color: var(--jade-bright); }

/* ── Quest-Nav: gesperrte Links ───────────────────────────────────────── */
.nav-blocked {
    opacity: 0.45;
    cursor: not-allowed;
    text-decoration: line-through;
    color: var(--ink-dim, #888) !important;
    pointer-events: all;
}
.nav-blocked:hover { opacity: 0.55; }

/* Quest-Extra-Links */
a.nav.quest-extra {
    color: var(--accent, #4ade80) !important;
    font-style: italic;
}
a.nav.quest-extra::before { content: '✦ '; font-style: normal; font-size: 10px; }

/* Quest-Nav Toast */
.qnav-blocked-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: rgba(10, 14, 8, 0.96);
    border: 1px solid #c0392b;
    color: #f5b7b1;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.08em;
    padding: 10px 20px;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(192, 57, 43, 0.35);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.25s, transform 0.25s;
    cursor: pointer;
    max-width: 340px;
    text-align: center;
}
.qnav-blocked-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Quest-Banner (Neue Quest erhalten) ──────────────────────────────── */
@keyframes qb-enter {
    0%   { opacity: 0; transform: translateX(-50%) translateY(-28px) scale(0.88); }
    60%  { opacity: 1; transform: translateX(-50%) translateY(4px)   scale(1.02); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0)      scale(1);   }
}
@keyframes qb-leave {
    0%   { opacity: 1; transform: translateX(-50%) translateY(0)      scale(1);   }
    100% { opacity: 0; transform: translateX(-50%) translateY(-18px)  scale(0.95); }
}

#quest-banner {
    position: fixed;
    top: 72px;                /* unterhalb der Topbar */
    left: 50%;
    transform: translateX(-50%);
    z-index: 8800;
    pointer-events: none;
    animation: qb-enter 0.5s cubic-bezier(.22,.8,.35,1) both;
}
#quest-banner.qb-fade-out {
    animation: qb-leave 0.48s ease-in forwards;
}

.qb-inner {
    background: linear-gradient(160deg, rgba(8,12,6,0.97) 0%, rgba(14,20,10,0.97) 100%);
    border: 1px solid #6b5810;
    border-top: 2px solid #c9a227;
    box-shadow:
        0 0 0 1px rgba(201,162,39,.12),
        0 6px 32px rgba(0,0,0,.7),
        0 0 40px rgba(201,162,39,.12) inset;
    padding: 14px 30px 16px;
    min-width: 280px;
    max-width: 400px;
    text-align: center;
    border-radius: 3px;
}

.qb-kicker {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #c9a227;
    margin-bottom: 8px;
}

.qb-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #6b5810 30%, #6b5810 70%, transparent);
    margin: 0 auto 10px;
    width: 80%;
}

.qb-title {
    font-family: 'Cinzel', serif;
    font-size: 15px;
    font-weight: 600;
    color: #e8dfc0;
    letter-spacing: 0.04em;
    line-height: 1.35;
}

/* ── Quest-Banner Typ-Varianten ───────────────────────────────────────── */
/* completed: grüner Akzent */
.qb-inner.qb-completed {
    border-top-color: #4caf50;
    border-color: #2a6b2d;
    box-shadow:
        0 0 0 1px rgba(76,175,80,.15),
        0 6px 32px rgba(0,0,0,.7),
        0 0 40px rgba(76,175,80,.10) inset;
}
.qb-inner.qb-completed .qb-kicker { color: #6dbf70; }

/* progress: gedämpfteres Gold-Grün */
.qb-inner.qb-progress {
    border-top-color: #8fad3c;
    border-color: #4a5c1a;
    box-shadow:
        0 0 0 1px rgba(143,173,60,.12),
        0 6px 32px rgba(0,0,0,.7),
        0 0 40px rgba(143,173,60,.08) inset;
}
.qb-inner.qb-progress .qb-kicker { color: #a8c44a; }

/* ── Topbar-Button Quest-Blink ────────────────────────────────────────── */
@keyframes topbar-quest-pulse {
    0%,100% { box-shadow: none;                                 filter: none; }
    50%      { box-shadow: 0 0 12px 3px rgba(201,162,39,.65);   filter: brightness(1.35); }
}
.topbar-btn-notify {
    animation: topbar-quest-pulse 0.7s ease-in-out 6;   /* 6×, ~4.2s total */
    animation-fill-mode: forwards;
}

/* ── Bürgerausweis ────────────────────────────────────────────────────── */
.ausweis-card {
  background: transparent;
  background-image: none;
  border: none;
  box-shadow: none;
  position: relative;
}
.ausweis-header {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #b89a5a;
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.ausweis-wappen { font-size: 22px; color: #8a6520; }
.ausweis-city { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: .1em; color: #6b4c1a; text-transform: uppercase; }
.ausweis-doctype { font-family: 'Cinzel', serif; font-size: 14px; color: #2c1a0e; font-weight: 600; }
.ausweis-fields { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.ausweis-row { display: flex; gap: 8px; font-size: 13px; line-height: 1.4; }
.ausweis-lbl { min-width: 90px; color: #6b4c1a; font-size: 11px; font-family: 'Cinzel', serif; text-transform: uppercase; letter-spacing: .05em; padding-top: 1px; }
.ausweis-val { flex: 1; color: #1a0e05; }
.ausweis-bio-row .ausweis-val { font-style: italic; font-size: 12px; line-height: 1.5; }
.ausweis-footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 12px; border-top: 1px solid #c9a96080; padding-top: 10px; }
.ausweis-sig-area { flex: 1; }
.ausweis-sig { display: block; width: 160px; height: 48px; }
.ausweis-sig-path {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  transition: none;
}
.ausweis-card.ausweis-signing .ausweis-sig-path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1);
}
.ausweis-sig-line { width: 160px; height: 1px; background: #8a6520; margin-top: 2px; }
.ausweis-sig-label { font-size: 10px; color: #8a6520; text-transform: uppercase; letter-spacing: .08em; margin-top: 3px; }
/* Unterschrift + Datum: versteckt bis .ausweis-signing */
.ausweis-card .idc-sig {
  clip-path: inset(0 100% 0 0);
  transition: none;
}
.ausweis-card.ausweis-signing .idc-sig {
  clip-path: inset(0 0% 0 0);
  transition: clip-path 1.3s cubic-bezier(.4,0,.2,1);
}
.ausweis-card .idc-date-block {
  opacity: 0;
  transition: none;
}
.ausweis-card.ausweis-signing .idc-date-block {
  opacity: 1;
  transition: opacity .8s ease .6s;
}

/* Stempel */
.ausweis-stamp-area { display: flex; align-items: flex-end; }
.ausweis-stamp {
  width: 90%; height: 90%;
  transform: translateY(-40px) rotate(-18deg);
  opacity: 0;
  transition: none;
}
.ausweis-stamp img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ausweis-card.ausweis-stamped .ausweis-stamp {
  transform: translateY(0) rotate(-18deg);
  opacity: 0.88;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), opacity .18s ease;
}

/* ── Vitalinfo-Reward-Animationen ──────────────────────────────────────── */
@keyframes reward-gold-glow {
  0%   { color: var(--gold-bright); text-shadow: none; }
  30%  { color: #ffe97a; text-shadow: 0 0 8px rgba(255,215,50,.9), 0 0 20px rgba(255,215,50,.45); }
  100% { color: var(--gold-bright); text-shadow: none; }
}
.reward-gold-flash {
  animation: reward-gold-glow 1.1s ease-out;
}
/* Floating +XX G / +XX EP Label (erscheint bei reward, steigt auf und verblasst) */
.reward-float {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
  z-index: 50;
  opacity: 1;
  transition: opacity .7s ease .15s, transform .7s ease .15s;
}
.reward-float.go {
  opacity: 0;
  transform: translateY(calc(-50% - 24px));
}