/* VEYDRIS – Startseite 3.0 (20.10.2026, Wunsch: „Startseite komplett besser, wie bei großen MMORPGs,
   Try Guest weg, Klassen nicht oben herumfliegend“).
   Aufbau Desktop wie eine MMO-Charakterwahl: links ein Glas-Panel mit Klasse + Weiter-Knopf,
   Mitte der Held, unten eine feste Klassen-Leiste mit Porträts (Bild = Art.class(…, landingPreviewLevel)),
   rechts die Aufstiegs-Leiter. Handy/Tablet bleiben beim bisherigen Aufbau (gateway.css, hero-stage.css, dialogs-v2.css).
   Alles in @layer pv mit zwei IDs im Präfix, damit ältere Startseiten-Regeln nicht greifen. */
@layer pv {
  @media (min-width: 1025px) and (min-height: 600px) {
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode {
      --lv-panel-w: clamp(400px, 27vw, 480px);
      --lv-left: clamp(32px, 3vw, 56px);
      --lv-tile: clamp(66px, 4.9vw, 96px);
      --lv-bar-bottom: 58px;
    }
    /* Stage-Hintergrund: dunkler Verlauf links (Panel lesbar) und unten (Leiste) */
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode .landing-class-stage::after {
      content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none !important;
      background: linear-gradient(90deg, rgba(6, 5, 10, .88) 0%, rgba(6, 5, 10, .55) 28%, transparent 46%), linear-gradient(0deg, rgba(6, 5, 10, .92) 0%, rgba(6, 5, 10, .4) 20%, transparent 34%) !important;
    }
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode .landing-class-stage > * { z-index: 3; }

    /* ---------- Linkes Panel ---------- */
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode .landing-class-copy {
      position: absolute !important; left: var(--lv-left) !important; top: 138px !important; bottom: auto !important; max-height: calc(100% - 138px - 176px) !important; width: var(--lv-panel-w) !important; max-width: none !important; z-index: 5 !important;
      display: flex !important; flex-direction: column !important; gap: 10px !important; padding: 22px 24px !important; margin: 0 !important; overflow-y: auto !important; scrollbar-width: none !important;
      border: 1px solid rgba(232, 196, 128, .28) !important; border-radius: 18px !important;
      background: linear-gradient(180deg, rgba(20, 16, 28, .82), rgba(10, 8, 14, .9)) !important; backdrop-filter: blur(10px) saturate(1.2) !important;
      box-shadow: inset 0 1px 0 rgba(255, 240, 210, .08), 0 30px 60px -30px #000 !important; transform: none !important;
    }
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode .landing-class-copy::-webkit-scrollbar { display: none !important; }
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode .landing-class-copy::before {
      content: "" !important; position: absolute !important; left: 22px !important; right: 22px !important; top: 0 !important; height: 2px !important; background: linear-gradient(90deg, transparent, var(--landing-class-accent, #e8c480), transparent) !important; opacity: .9 !important;
    }
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode .landing-class-copy > h1 { margin: 2px 0 0 !important; font-size: clamp(38px, 3.3vw, 58px) !important; line-height: 1 !important; white-space: nowrap !important; letter-spacing: .01em !important; }
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode .landing-class-copy > strong { margin: 0 !important; }
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode .landing-class-copy > p { margin: 2px 0 !important; font-size: 14px !important; line-height: 1.6 !important; color: #d9d0bd !important; }
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode .landing-archetype-seal { margin: 0 !important; }
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode .landing-specialty { margin: 4px 0 0 !important; padding: 14px !important; border-radius: 14px !important; border: 1px solid rgba(232, 196, 128, .18) !important; background: rgba(255, 255, 255, .03) !important; }
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode .landing-specialty > p { font-size: 12.5px !important; line-height: 1.5 !important; }
    @media (max-height: 820px) {
      html body.vey-renewal:not(#lv3) #authLayer.landing-mode :is(.landing-oath-attribute, .landing-specialty > footer, .landing-class-copy > footer) { display: none !important; }
    }

    /* ---------- Weiter-Knopf als eigene VEYDRIS-Platte ---------- */
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode #authForm.landing > button.button.primary {
      position: absolute !important; left: var(--lv-left) !important; bottom: 84px !important; top: auto !important; width: var(--lv-panel-w) !important; height: 58px !important; min-height: 58px !important; margin: 0 !important; padding: 0 10px !important; z-index: 6 !important;
      border-style: solid !important; border-color: transparent !important; border-width: 0 26px !important; border-radius: 0 !important;
      border-image: url("./assets/ui/controls/plate-primary-v4.webp") 0 87 0 88 fill / 0 54px / 12px 4px stretch !important;
      background: none !important; box-shadow: none !important; clip-path: none !important;
      color: #fff4d2 !important; -webkit-text-fill-color: #fff4d2 !important; font: 800 15px/1 var(--vm-font, Manrope, sans-serif) !important; letter-spacing: .22em !important; text-shadow: 0 1px 2px #000, 0 0 10px rgba(0, 0, 0, .7) !important;
      filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)) !important; transition: filter .18s ease, transform .12s ease !important;
    }
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode #authForm.landing > button.button.primary::before,
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode #authForm.landing > button.button.primary::after { content: none !important; display: none !important; }
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode #authForm.landing > button.button.primary:hover { filter: brightness(1.15) drop-shadow(0 0 12px rgba(90, 240, 225, .55)) drop-shadow(0 6px 10px rgba(0, 0, 0, .6)) !important; transform: translateY(-1px) !important; }
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode #authForm.landing > button.button.primary:active { transform: translateY(1px) scale(.99) !important; }
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode #authForm.landing > .auth-switch:not(.auth-forgot) {
      position: absolute !important; left: var(--lv-left) !important; bottom: 46px !important; top: auto !important; width: var(--lv-panel-w) !important; margin: 0 !important; z-index: 6 !important; text-align: center !important;
    }

    /* ---------- Klassen-Leiste unten (statt fliegender Symbole oben rechts) ---------- */
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode .landing-class-nav {
      position: absolute !important; top: auto !important; bottom: var(--lv-bar-bottom) !important; left: calc(var(--lv-left) + var(--lv-panel-w) + 32px) !important; right: 40px !important; width: auto !important; height: auto !important; z-index: 7 !important;
      display: flex !important; justify-content: center !important; align-items: flex-end !important; gap: 10px !important; padding: 0 !important; margin: 0 !important; transform: none !important; background: none !important; border: 0 !important; box-shadow: none !important;
    }
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode .landing-class-nav > button {
      --acc: var(--landing-dot-accent, #e8c480);
      position: relative !important; flex: 0 0 var(--lv-tile) !important; width: var(--lv-tile) !important; height: calc(var(--lv-tile) * 1.3) !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; cursor: pointer !important; overflow: hidden !important;
      border: 1px solid rgba(232, 196, 128, .28) !important; border-radius: 12px !important; opacity: 1 !important; transform: none !important; outline: none !important;
      background: linear-gradient(180deg, transparent 52%, rgba(6, 5, 10, .95) 88%), var(--landing-portrait) center 4% / 250% auto no-repeat, radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--acc) 30%, transparent), transparent 72%), #120f19 !important;
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), 0 10px 20px -12px #000 !important; filter: saturate(.65) brightness(.78) !important;
      transition: transform .2s cubic-bezier(.2, .8, .2, 1), filter .2s ease, border-color .2s ease, box-shadow .2s ease !important;
    }
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode .landing-class-nav > button::before,
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode .landing-class-nav > button::after { content: none !important; display: none !important; }
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode .landing-class-nav > button > i {
      position: absolute !important; left: 5px !important; top: 5px !important; width: 22px !important; height: 22px !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important; box-shadow: none !important; transform: none !important;
      background: var(--landing-emblem-art) center / contain no-repeat !important; filter: drop-shadow(0 1px 3px #000) !important; opacity: .9 !important;
    }
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode .landing-class-nav > button > span {
      position: absolute !important; inset: auto 2px 7px 2px !important; display: block !important; width: auto !important; height: auto !important; min-height: 13px !important; max-height: 14px !important; line-height: 13px !important; font-size: clamp(9px, .62vw, 11px) !important; white-space: nowrap !important; word-spacing: 0 !important; clip: auto !important; clip-path: none !important; overflow: hidden !important; opacity: 1 !important; transform: none !important;
      color: #e8dcc0 !important; font: 700 clamp(8.5px, .62vw, 10.5px)/1.15 var(--vm-font, Manrope, sans-serif) !important; letter-spacing: 0 !important; text-transform: none !important; text-align: center !important; text-shadow: 0 1px 3px #000 !important;
      background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important;
    }
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode .landing-class-nav > button:hover { filter: saturate(1) brightness(1) !important; transform: translateY(-4px) !important; border-color: rgba(243, 213, 142, .6) !important; }
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode .landing-class-nav > button.active {
      filter: none !important; transform: translateY(-10px) scale(1.08) !important; border: 2px solid #f3d58e !important;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 26px -2px color-mix(in srgb, var(--acc) 75%, transparent), 0 16px 26px -12px #000 !important;
    }
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode .landing-class-nav > button.active > span { color: #fff3cf !important; }
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode .landing-class-nav > button:focus-visible { outline: 2px solid #f3d58e !important; outline-offset: 3px !important; }
    /* Sockel-Linie unter der Leiste */
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode .landing-class-nav::before {
      content: "" !important; position: absolute !important; left: 8% !important; right: 8% !important; bottom: -14px !important; height: 1px !important; background: linear-gradient(90deg, transparent, rgba(232, 196, 128, .55), transparent) !important;
    }
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode .landing-class-nav::after {
      content: "CHOOSE YOUR CLASS" !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: -32px !important; text-align: center !important; color: rgba(232, 196, 128, .75) !important; font: 700 10px/1 var(--vm-font, Manrope, sans-serif) !important; letter-spacing: .32em !important;
    }

    /* ---------- Held + Leiter + Pfeile ---------- */
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode .landing-class-figure {
      left: calc(var(--lv-left) + var(--lv-panel-w) + 40px) !important; right: 15% !important; top: 70px !important; bottom: calc(var(--lv-bar-bottom) + var(--lv-tile) * 1.3 + 22px) !important; width: auto !important; height: auto !important; z-index: 2 !important;
    }
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode .landing-ascension { right: clamp(48px, 4.5vw, 96px) !important; top: 46% !important; transform: translateY(-50%) !important; }
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode .landing-class-arrow { display: none !important; }

    /* ---------- Oben rechts: Welt entdecken / Info / Patchnotes ---------- */
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode #authForm.landing > .experience-entry {
      position: absolute !important; top: 34px !important; right: 40px !important; bottom: auto !important; left: auto !important; z-index: 8 !important; display: flex !important; align-items: center !important; gap: 10px !important; width: auto !important;
    }
  }

  /* ---------- Alle Knöpfe der Start-/Login-/Registrier-Seite als eigene VEYDRIS-Platten (Knopf-Regel in DESIGN_WUENSCHE.md) ---------- */
  html body.vey-renewal:not(#lv3) #authLayer #authForm .button:is(.primary, .ghost, .metal) {
    --cap: 30px; --bw: 14px; --out: 8px;
    white-space: nowrap !important; min-height: 40px !important; padding: 0 6px !important; overflow: visible !important;
    border-style: solid !important; border-color: transparent !important; border-radius: 0 !important; border-width: 0 var(--bw) !important;
    border-image: var(--plate) 0 var(--sl) 0 var(--sr) fill / 0 var(--cap) / var(--out) 3px stretch !important;
    background: none !important; box-shadow: none !important; clip-path: none !important; outline: none !important;
    font-family: var(--vm-font, Manrope, sans-serif) !important; font-weight: 800 !important; letter-spacing: .12em !important; text-transform: uppercase !important;
    text-shadow: 0 1px 2px #000, 0 0 8px rgba(0, 0, 0, .7) !important; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .55)) !important; transition: filter .18s ease, transform .12s ease !important;
  }
  html body.vey-renewal:not(#lv3) #authLayer #authForm .button.primary { --plate: url("./assets/ui/controls/plate-primary-v4.webp"); --sl: 87; --sr: 88; --glow: rgba(90, 240, 225, .55); color: #fff4d2 !important; -webkit-text-fill-color: #fff4d2 !important; }
  html body.vey-renewal:not(#lv3) #authLayer #authForm .button:is(.ghost, .metal) { --plate: url("./assets/ui/controls/plate-secondary-v4.webp"); --sl: 83; --sr: 84; --glow: rgba(243, 190, 100, .5); --cap: 26px; --bw: 12px; --out: 7px; min-height: 34px !important; height: 34px !important; font-size: 10.5px !important; color: #f3d58e !important; -webkit-text-fill-color: #f3d58e !important; }
  html body.vey-renewal:not(#lv3) #authLayer #authForm .button:is(.primary, .ghost, .metal)::before,
  html body.vey-renewal:not(#lv3) #authLayer #authForm .button:is(.primary, .ghost, .metal)::after { content: none !important; display: none !important; }
  html body.vey-renewal:not(#lv3) #authLayer #authForm .button:is(.primary, .ghost, .metal):hover:not(:disabled) { filter: brightness(1.15) drop-shadow(0 0 8px var(--glow)) drop-shadow(0 3px 5px rgba(0, 0, 0, .55)) !important; transform: translateY(-1px) !important; }
  html body.vey-renewal:not(#lv3) #authLayer #authForm .button:is(.primary, .ghost, .metal):active:not(:disabled) { transform: translateY(1px) scale(.99) !important; }
  html body.vey-renewal:not(#lv3) #authLayer #authForm .button:is(.primary, .ghost, .metal):disabled { filter: grayscale(.8) brightness(.65) !important; }

  /* ---------- Fähigkeiten-Kette (Klassen-Spezialität): gemalte Icons statt flacher Kästchen ---------- */
  html body.vey-renewal:not(#lv3) #authLayer .landing-specialty .landing-cadence { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 6px !important; margin: 12px 0 2px !important; padding: 0 !important; border: 0 !important; background: none !important; }
  html body.vey-renewal:not(#lv3) #authLayer .landing-specialty .landing-cadence > span { position: relative !important; flex: 1 1 0 !important; min-width: 0 !important; display: grid !important; justify-items: center !important; align-content: start !important; gap: 7px !important; height: auto !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; clip-path: none !important; }
  html body.vey-renewal:not(#lv3) #authLayer .landing-specialty .landing-cadence > span > i {
    display: block !important; width: 54px !important; height: 54px !important; border-radius: 12px !important;
    background: var(--cadence-icon) center / cover no-repeat, #120f19 !important;
    border: 2px solid rgba(232, 196, 128, .45) !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7), inset 0 0 14px rgba(0, 0, 0, .6), 0 6px 14px -6px #000 !important; filter: saturate(.85) brightness(.9) !important;
  }
  html body.vey-renewal:not(#lv3) #authLayer .landing-specialty .landing-cadence > span.trigger > i {
    width: 64px !important; height: 64px !important; margin-top: -5px !important; border: 2px solid #f3d58e !important; filter: none !important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), 0 0 0 3px rgba(12, 10, 18, .9), 0 0 0 4px color-mix(in srgb, var(--landing-class-accent, #e8c480) 70%, transparent), 0 0 26px -2px color-mix(in srgb, var(--landing-class-accent, #e8c480) 80%, transparent) !important;
    animation: lvCadencePulse 2.4s ease-in-out infinite !important;
  }
  @keyframes lvCadencePulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }
  html body.vey-renewal:not(#lv3) #authLayer .landing-specialty .landing-cadence > span > b { display: block !important; max-width: 100% !important; color: #b9ae98 !important; font: 700 9.5px/1.2 var(--vm-font, Manrope, sans-serif) !important; letter-spacing: .08em !important; text-transform: uppercase !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; background: none !important; border: 0 !important; padding: 0 !important; }
  html body.vey-renewal:not(#lv3) #authLayer .landing-specialty .landing-cadence > span.trigger > b { color: #f3d58e !important; text-shadow: 0 0 10px rgba(243, 213, 142, .45) !important; }
  html body.vey-renewal:not(#lv3) #authLayer .landing-specialty .landing-cadence > span:not(:last-child)::after {
    content: "" !important; position: absolute !important; top: 22px !important; right: -7px !important; left: auto !important; bottom: auto !important; width: 9px !important; height: 9px !important; margin: 0 !important; padding: 0 !important; background: none !important;
    border: solid rgba(232, 196, 128, .7) !important; border-width: 2px 2px 0 0 !important; transform: rotate(45deg) !important; opacity: 1 !important; clip-path: none !important;
  }
  html body.vey-renewal:not(#lv3) #authLayer .landing-specialty .landing-cadence > span::before { content: none !important; display: none !important; }
  @media (prefers-reduced-motion: reduce) { html body.vey-renewal:not(#lv3) #authLayer .landing-specialty .landing-cadence > span.trigger > i { animation: none !important; } }

  /* Niedrige Bildschirme: Kette kompakter, Lore-Text weg, damit nichts unter den Weiter-Knopf rutscht */
  @media (min-width: 1025px) and (max-height: 820px) {
    html body.vey-renewal:not(#lv3) #authLayer .landing-specialty .landing-cadence { margin-top: 8px !important; }
    html body.vey-renewal:not(#lv3) #authLayer .landing-specialty .landing-cadence > span > i { width: 40px !important; height: 40px !important; border-radius: 9px !important; }
    html body.vey-renewal:not(#lv3) #authLayer .landing-specialty .landing-cadence > span.trigger > i { width: 48px !important; height: 48px !important; margin-top: -4px !important; }
    html body.vey-renewal:not(#lv3) #authLayer .landing-specialty .landing-cadence > span:not(:last-child)::after { top: 16px !important; }
  }
  @media (min-width: 1025px) and (max-height: 800px) {
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode .landing-class-copy > p { display: none !important; }
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode .landing-class-copy { top: 126px !important; max-height: calc(100% - 126px - 152px) !important; padding: 16px 20px !important; gap: 8px !important; }
    html body.vey-renewal:not(#lv3) #authLayer.landing-mode .landing-archetype-seal { display: none !important; }
  }

  @media (max-width: 1024px) and (max-height: 700px) {
    html body.vey-renewal:not(#lv3) #authLayer .landing-specialty .landing-cadence { display: none !important; }
  }

  /* ================= Welt-Fenster für Besucher („Discover the world“) + Platten-Knöpfe in allen Info-Fenstern ================= */
  html body.vey-renewal dialog.experience-dialog:not(#lv3) .experience-body .button:is(.primary, .ghost) {
    --cap: 28px; --bw: 13px; --out: 7px;
    height: auto !important; min-height: 38px !important; padding: 0 8px !important; white-space: nowrap !important;
    border-style: solid !important; border-color: transparent !important; border-radius: 0 !important; border-width: 0 var(--bw) !important;
    border-image: url("./assets/ui/controls/plate-secondary-v4.webp") 0 83 0 84 fill / 0 var(--cap) / var(--out) 3px stretch !important;
    background: none !important; box-shadow: none !important; color: #f3d58e !important; -webkit-text-fill-color: #f3d58e !important;
    font: 800 11px/1.2 var(--vm-font, Manrope, sans-serif) !important; letter-spacing: .1em !important; text-transform: uppercase !important; text-shadow: 0 1px 2px #000 !important;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .55)) !important; transition: filter .18s ease, transform .12s ease !important;
  }
  html body.vey-renewal dialog.experience-dialog:not(#lv3) .experience-body .button.primary { --cap: 34px; --bw: 16px; --out: 9px; min-height: 46px !important; padding: 0 14px !important; font-size: 12.5px !important; letter-spacing: .16em !important; border-image-source: url("./assets/ui/controls/plate-primary-v4.webp") !important; border-image-slice: 0 87 0 88 fill !important; color: #fff4d2 !important; -webkit-text-fill-color: #fff4d2 !important; }
  html body.vey-renewal dialog.experience-dialog:not(#lv3) .experience-body .button:is(.primary, .ghost):hover:not(:disabled) { filter: brightness(1.15) drop-shadow(0 0 8px rgba(243, 190, 100, .5)) drop-shadow(0 3px 5px rgba(0, 0, 0, .55)) !important; transform: translateY(-1px) !important; background: none !important; }
  html body.vey-renewal dialog.experience-dialog:not(#lv3) .experience-body .button.primary:hover:not(:disabled) { filter: brightness(1.15) drop-shadow(0 0 10px rgba(90, 240, 225, .55)) drop-shadow(0 3px 5px rgba(0, 0, 0, .55)) !important; }

  html body.vey-renewal dialog.experience-dialog:not(#lv3) .world-hero { display: grid !important; grid-template-columns: 150px minmax(0, 1fr) !important; gap: 22px !important; align-items: center !important; padding: 18px 20px !important; border-radius: 18px !important; border: 1px solid rgba(232, 196, 128, .25) !important;
    background: linear-gradient(90deg, rgba(12, 10, 18, .55), rgba(12, 10, 18, .92) 45%), url("./assets/landing-v2/eternal-citadel-gateway-4k.webp") 20% 40% / cover no-repeat, #120f19 !important; }
  html body.vey-renewal dialog.experience-dialog:not(#lv3) .world-hero > img { width: 150px !important; height: 176px !important; object-fit: cover !important; object-position: top !important; border-radius: 80px 80px 14px 14px !important; border: 2px solid rgba(232, 196, 128, .55) !important; box-shadow: 0 14px 30px -12px #000, 0 0 30px -10px rgba(243, 213, 142, .5) !important; }
  html body.vey-renewal dialog.experience-dialog:not(#lv3) .world-hero small { color: var(--pv-gold, #e8c480) !important; font: 700 10.5px/1.3 var(--vm-font, Manrope, sans-serif) !important; letter-spacing: .2em !important; }
  html body.vey-renewal dialog.experience-dialog:not(#lv3) .world-hero h3 { margin: 6px 0 8px !important; color: #fff3cf !important; font: 600 26px/1.15 Cinzel, Georgia, serif !important; }
  html body.vey-renewal dialog.experience-dialog:not(#lv3) .world-hero p { margin: 0 0 14px !important; color: #d9d0bd !important; font: italic 500 14px/1.6 var(--vm-font, Manrope, sans-serif) !important; }
  html body.vey-renewal dialog.experience-dialog:not(#lv3) :is(.world-regions, .world-pillars, .world-cta) { margin-top: 16px !important; }
  html body.vey-renewal dialog.experience-dialog:not(#lv3) .world-regions > header small { color: var(--pv-gold, #e8c480) !important; font: 700 10px/1.3 var(--vm-font, Manrope, sans-serif) !important; letter-spacing: .2em !important; }
  html body.vey-renewal dialog.experience-dialog:not(#lv3) .world-regions > header h3 { margin: 2px 0 10px !important; color: #f3e6c8 !important; font: 600 20px/1.2 Cinzel, Georgia, serif !important; }
  html body.vey-renewal dialog.experience-dialog:not(#lv3) .world-regions ol { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
  html body.vey-renewal dialog.experience-dialog:not(#lv3) .world-regions li { position: relative !important; display: grid !important; align-content: end !important; gap: 1px !important; min-height: 132px !important; padding: 10px !important; overflow: hidden !important; border-radius: 12px !important; border: 1px solid rgba(232, 196, 128, .22) !important;
    background: linear-gradient(180deg, rgba(8, 7, 12, .05) 30%, rgba(8, 7, 12, .92)), var(--world-region) center / cover no-repeat, #120f19 !important; transition: transform .18s ease, border-color .18s ease !important; }
  html body.vey-renewal dialog.experience-dialog:not(#lv3) .world-regions li:hover { transform: translateY(-2px) !important; border-color: rgba(243, 213, 142, .6) !important; }
  html body.vey-renewal dialog.experience-dialog:not(#lv3) .world-regions li > span { position: absolute !important; top: 8px !important; left: 8px !important; display: grid !important; place-items: center !important; width: 22px !important; height: 22px !important; border-radius: 50% !important; background: rgba(8, 7, 12, .8) !important; border: 1px solid rgba(232, 196, 128, .5) !important; color: #f3d58e !important; font: 800 10px/1 var(--vm-font, Manrope, sans-serif) !important; }
  html body.vey-renewal dialog.experience-dialog:not(#lv3) .world-regions li > b { color: #fff3cf !important; font: 600 13px/1.2 Cinzel, Georgia, serif !important; text-shadow: 0 1px 4px #000 !important; }
  html body.vey-renewal dialog.experience-dialog:not(#lv3) .world-regions li > em { color: #f3d58e !important; font: 800 9px/1.3 var(--vm-font, Manrope, sans-serif) !important; font-style: normal !important; letter-spacing: .14em !important; }
  html body.vey-renewal dialog.experience-dialog:not(#lv3) .world-regions li > p { margin: 0 !important; color: #b9ae98 !important; font: 500 10.5px/1.35 var(--vm-font, Manrope, sans-serif) !important; }
  html body.vey-renewal dialog.experience-dialog:not(#lv3) .world-pillars { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  html body.vey-renewal dialog.experience-dialog:not(#lv3) .world-pillars article { display: grid !important; grid-template-columns: 92px minmax(0, 1fr) !important; grid-template-rows: auto 1fr !important; column-gap: 14px !important; padding: 12px !important; border-radius: 14px !important; border: 1px solid rgba(232, 196, 128, .18) !important; background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)) !important; }
  html body.vey-renewal dialog.experience-dialog:not(#lv3) .world-pillars article > div { grid-row: 1 / span 2 !important; width: 92px !important; height: 92px !important; border-radius: 12px !important; border: 1px solid rgba(232, 196, 128, .35) !important; background: var(--world-pillar) center / cover no-repeat, #120f19 !important; box-shadow: inset 0 0 18px rgba(0, 0, 0, .6) !important; }
  html body.vey-renewal dialog.experience-dialog:not(#lv3) .world-pillars h3 { margin: 2px 0 4px !important; color: #f3d58e !important; font: 600 16px/1.2 Cinzel, Georgia, serif !important; }
  html body.vey-renewal dialog.experience-dialog:not(#lv3) .world-pillars p { margin: 0 !important; color: #cfc6b3 !important; font: 500 12.5px/1.5 var(--vm-font, Manrope, sans-serif) !important; }
  html body.vey-renewal dialog.experience-dialog:not(#lv3) .world-cta { display: grid !important; justify-items: center !important; gap: 12px !important; padding: 18px !important; border-radius: 16px !important; border: 1px solid rgba(232, 196, 128, .25) !important; background: radial-gradient(60% 120% at 50% 100%, rgba(90, 240, 225, .1), transparent 70%), rgba(255, 255, 255, .02) !important; text-align: center !important; }
  html body.vey-renewal dialog.experience-dialog:not(#lv3) .world-cta p { margin: 0 !important; color: #b9ae98 !important; font: 600 12px/1.4 var(--vm-font, Manrope, sans-serif) !important; letter-spacing: .04em !important; }
  @media (max-width: 760px) {
    html body.vey-renewal dialog.experience-dialog:not(#lv3) .world-hero { grid-template-columns: 1fr !important; justify-items: center !important; text-align: center !important; }
    html body.vey-renewal dialog.experience-dialog:not(#lv3) .world-hero > img { width: 110px !important; height: 130px !important; }
    html body.vey-renewal dialog.experience-dialog:not(#lv3) .world-regions ol { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    html body.vey-renewal dialog.experience-dialog:not(#lv3) .world-pillars { grid-template-columns: 1fr !important; }
    html body.vey-renewal dialog.experience-dialog:not(#lv3) .world-pillars article { grid-template-columns: 70px minmax(0, 1fr) !important; }
    html body.vey-renewal dialog.experience-dialog:not(#lv3) .world-pillars article > div { width: 70px !important; height: 70px !important; }
  }
}