/* VEYDRIS – Hero stage: animated 2.5D heroes (living-hero.js), the ascension ladder on the
   landing page (one look per ten levels) and class tags. Loaded after dialogs-v2.css. */
@layer pv {
  /* ---------- Living hero canvases ---------- */
  :where(.is-living) { position: relative; }
  .living-hero__art,
  .living-hero__fx { position: absolute; pointer-events: none; z-index: 4; transition: opacity 260ms ease; }
  .living-hero__fx { inset: 0; width: 100%; height: 100%; z-index: 5; }
  .is-living-swap .living-hero__art { opacity: .15; }
  html body.vey-renewal .landing-class-figure.is-living > .landing-character-poster { opacity: 0 !important; }
  html body.vey-renewal .landing-class-figure.is-living { animation: none !important; }
  html body.vey-renewal .combatant-art.hero-art.is-living { background-image: none !important; }

  /* Ground ring under the hero, tinted in the class colour (character-select pedestal). */
  html body.vey-renewal .landing-character-pedestal {
    position: absolute; left: 18%; right: 18%; bottom: -2%; height: 12%; z-index: 1; pointer-events: none;
    background:
      radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--landing-class-accent) 42%, transparent) 0, transparent 62%),
      radial-gradient(ellipse at 50% 50%, transparent 52%, color-mix(in srgb, var(--landing-class-accent) 55%, transparent) 56%, transparent 61%);
    filter: blur(1px);
    opacity: .8;
  }

  /* ---------- Class tags + difficulty ---------- */
  html body.vey-renewal .landing-class-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 10px 0 4px; }
  html body.vey-renewal .landing-class-tags > span {
    padding: 4px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--landing-class-accent) 45%, transparent);
    background: color-mix(in srgb, var(--landing-class-accent) 14%, #0b0d15cc);
    color: #f1e3bf; font: 700 10px/1.3 var(--pv-font, Manrope, sans-serif); letter-spacing: .14em; text-transform: uppercase;
  }
  html body.vey-renewal .landing-class-tags > em {
    display: inline-flex; align-items: center; gap: 4px; margin-left: 4px;
    color: #b9ab88; font: 700 10px/1.3 var(--pv-font, Manrope, sans-serif); font-style: normal; letter-spacing: .14em;
  }
  html body.vey-renewal .landing-class-tags > em > i { width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid #d9b25f; background: transparent; }
  html body.vey-renewal .landing-class-tags > em > i.on { background: linear-gradient(135deg, #ffe39b, #c98c2c); box-shadow: 0 0 8px #e8b04f88; }

  /* ---------- Path of ascension (desktop: vertical ladder beside the hero) ---------- */
  html body.vey-renewal .landing-ascension {
    position: absolute; z-index: 8; right: clamp(112px, 10.5vw, 200px); top: 50%; transform: translateY(-46%);
    display: grid; justify-items: center; gap: 8px; pointer-events: auto;
  }
  /* Desktop: the hero moves a little left so the ladder stands free beside it. */
  @media (min-width: 901px) {
    /* Feet end above the Guest / Discover / Info row in the bottom-right corner. */
    html body.vey-renewal #authLayer .landing-class-figure { right: 11% !important; bottom: 84px !important; }
  }
  @media (min-width: 901px) and (max-width: 1180px) {
    html body.vey-renewal #authLayer .landing-ascension { right: 92px; }
  }
  @media (min-width: 901px) and (max-height: 720px) {
    html body.vey-renewal .landing-ascension { gap: 6px; }
    html body.vey-renewal .landing-ascension-steps { gap: 4px; }
    html body.vey-renewal #authLayer .landing-ascension-steps > button { width: 28px !important; height: 28px !important; font-size: 10px !important; }
    html body.vey-renewal .landing-ascension > span > b { font-size: 12px; }
  }
  html body.vey-renewal .landing-ascension > small { color: #d9c08a; font: 700 9px/1.2 var(--pv-font, Manrope, sans-serif); letter-spacing: .22em; writing-mode: vertical-rl; position: absolute; left: calc(100% + 10px); top: 4px; }
  html body.vey-renewal .landing-ascension-steps { display: flex; flex-direction: column-reverse; gap: 6px; position: relative; }
  html body.vey-renewal .landing-ascension-steps::before {
    content: ""; position: absolute; left: 50%; top: 8px; bottom: 8px; width: 2px; transform: translateX(-50%);
    background: linear-gradient(#f5d58a, color-mix(in srgb, var(--landing-class-accent) 70%, #3a3020)); opacity: .55;
  }
  html body.vey-renewal #authLayer .landing-ascension-steps > button {
    all: unset !important; box-sizing: border-box !important; position: relative !important; display: grid !important; place-items: center !important; cursor: pointer !important;
    width: 34px !important; height: 34px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border-radius: 50% !important;
    background: radial-gradient(circle at 50% 35%, #2a2a36, #0b0c13 72%) !important; border-image: none !important; clip-path: none !important;
    border: 1px solid #b7955a88 !important; box-shadow: inset 0 0 0 2px #05060acc, 0 2px 6px #000c !important;
    color: #cdb98d !important; font: 700 11px/1 Cinzel, Georgia, serif !important; letter-spacing: .02em !important; text-transform: none !important;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease !important;
  }
  html body.vey-renewal #authLayer .landing-ascension-steps > button::before,
  html body.vey-renewal #authLayer .landing-ascension-steps > button::after { content: none !important; display: none !important; }
  html body.vey-renewal #authLayer .landing-ascension-steps > button:hover { transform: scale(1.08) !important; border-color: #f0cf83 !important; color: #fff1cc !important; }
  html body.vey-renewal #authLayer .landing-ascension-steps > button:focus-visible { outline: 2px solid #f3d58e !important; outline-offset: 3px !important; }
  html body.vey-renewal #authLayer .landing-ascension-steps > button.active {
    transform: scale(1.18) !important; color: #1d1405 !important; border-color: #ffe7a6 !important;
    background: radial-gradient(circle at 50% 30%, #fff0bf, #d9a443 58%, #8a5d19) !important;
    box-shadow: 0 0 0 2px #0a0b10, 0 0 18px color-mix(in srgb, var(--landing-class-accent) 70%, #f0b955) !important;
  }
  /* The tags in the class copy replace the old role caption beside the hero. */
  html body.vey-renewal #authLayer .landing-class-role { display: none !important; }
  html body.vey-renewal .landing-ascension > span {
    min-width: 104px; padding: 6px 10px; border-radius: 10px; text-align: center;
    background: #090b12d9; border: 1px solid #b7955a55;
    color: #b9ab88; font: 700 9px/1.4 var(--pv-font, Manrope, sans-serif); letter-spacing: .16em; white-space: nowrap;
  }
  html body.vey-renewal .landing-ascension > span > b { display: block; color: #f6e2ae; font: 700 13px/1.25 Cinzel, Georgia, serif; letter-spacing: .06em; }

  /* Phones/tablets: a compact horizontal row under the hero, above the class copy. */
  @media (max-width: 900px) {
    html body.vey-renewal:not(#vm-none) #authLayer .landing-ascension {
      position: relative; grid-area: 3 / 1; align-self: end; justify-self: center; right: auto; top: auto; transform: none;
      display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 4px 8px; border-radius: 999px;
      background: #07080dcc; border: 1px solid #b7955a44;
    }
    html body.vey-renewal .landing-ascension > small { display: none; }
    html body.vey-renewal .landing-ascension-steps { flex-direction: row; gap: 4px; }
    html body.vey-renewal .landing-ascension-steps::before { left: 8px; right: 8px; top: 50%; bottom: auto; width: auto; height: 2px; transform: translateY(-50%); }
    html body.vey-renewal #authLayer .landing-ascension-steps > button { width: 26px !important; height: 26px !important; font-size: 9px !important; }
    html body.vey-renewal #authLayer .landing-ascension-steps > button.active { transform: scale(1.12) !important; }
    html body.vey-renewal .landing-ascension > span { min-width: 0; padding: 0 4px 0 2px; background: none; border: 0; text-align: left; font-size: 8px; letter-spacing: .12em; }
    html body.vey-renewal .landing-ascension > span > b { font-size: 11px; }
    html body.vey-renewal .landing-class-tags { display: none; }
  }
  @media (max-width: 380px) {
    html body.vey-renewal .landing-ascension > span { display: none; }
  }
  /* Landscape phones keep the row inside the artwork column. */
  @media (min-width: 500px) and (max-width: 900px) and (max-height: 500px) and (min-aspect-ratio: 1/1) {
    html body.vey-renewal:not(#vm-none) #authLayer .landing-ascension { grid-area: 3 / 1; }
  }

  /* ---------- Level-up: new ten-level look (inside the reset feedback panel, so every value is explicit) ---------- */
  html body.vey-renewal #phase5Feedback .level-up-new-look {
    display: flex !important; align-items: center !important; gap: 14px !important; margin: 12px auto 14px !important; padding: 10px 16px 10px 10px !important; max-width: 360px !important;
    border-radius: 16px !important; border: 1px solid color-mix(in srgb, var(--look-accent, #d79a42) 55%, #b7955a) !important;
    background: radial-gradient(circle at 18% 50%, color-mix(in srgb, var(--look-accent, #d79a42) 26%, transparent), #0a0b12e6 70%) !important;
    box-shadow: 0 0 26px color-mix(in srgb, var(--look-accent, #d79a42) 25%, transparent) !important;
    animation: hero-look-reveal 900ms cubic-bezier(.16, .8, .24, 1) both !important;
  }
  html body.vey-renewal #phase5Feedback .level-up-new-look > img { display: block !important; flex: 0 0 72px !important; width: 72px !important; height: 108px !important; object-fit: contain !important; filter: drop-shadow(0 6px 10px #000c) !important; }
  html body.vey-renewal #phase5Feedback .level-up-new-look > span { display: grid !important; gap: 2px !important; text-align: left !important; }
  html body.vey-renewal #phase5Feedback .level-up-new-look small { display: block !important; color: #f0cf83 !important; font: 700 10px/1.3 var(--pv-font, Manrope, sans-serif) !important; letter-spacing: .2em !important; }
  html body.vey-renewal #phase5Feedback .level-up-new-look b { display: block !important; color: #fff0c9 !important; font: 700 22px/1.15 Cinzel, Georgia, serif !important; }
  html body.vey-renewal #phase5Feedback .level-up-new-look em { display: block !important; color: #b9ab88 !important; font: 600 11px/1.3 var(--pv-font, Manrope, sans-serif) !important; letter-spacing: .06em !important; }
  @keyframes hero-look-reveal { from { opacity: 0; transform: translateY(10px) scale(.96); filter: brightness(2); } to { opacity: 1; transform: none; filter: none; } }
  @media (prefers-reduced-motion: reduce) { html body.vey-renewal #phase5Feedback .level-up-new-look { animation: none !important; } }
}