/* Movement and game-like framing on top of site.css / premium.css. Colours, type and art stay the Ravora ones.
   Everything that moves sits behind prefers-reduced-motion: no-preference; without it the pages are still. */

/* ---- framed panels: gold corners drawn with gradients, no image --------------------------------------- */
.hub-card, .wiki-card, .portal-panel, .world-card, .status, .panel, .card {
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* The corners live on a pseudo-element so the panels keep their own backgrounds. */
.hub-card::before, .wiki-card::before, .portal-panel::before, .world-card::before, .status::before, .panel::before, .card::before {
  content: ""; position: absolute; inset: -1px; z-index: 3; pointer-events: none; border-radius: inherit;
  background-image:
    linear-gradient(var(--gold-bright), var(--gold-bright)), linear-gradient(var(--gold-bright), var(--gold-bright)),
    linear-gradient(var(--gold-bright), var(--gold-bright)), linear-gradient(var(--gold-bright), var(--gold-bright)),
    linear-gradient(var(--gold-bright), var(--gold-bright)), linear-gradient(var(--gold-bright), var(--gold-bright)),
    linear-gradient(var(--gold-bright), var(--gold-bright)), linear-gradient(var(--gold-bright), var(--gold-bright));
  background-repeat: no-repeat;
  background-size: 16px 1px, 1px 16px, 16px 1px, 1px 16px, 16px 1px, 1px 16px, 16px 1px, 1px 16px;
  background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom;
  opacity: .75; transition: background-size .25s ease, opacity .25s ease;
}
.hub-card:hover::before, .wiki-card:hover::before, .world-card:hover::before, .card:hover::before,
.hub-card:focus-within::before, .wiki-card:focus-within::before {
  background-size: 36px 1px, 1px 36px, 36px 1px, 1px 36px, 36px 1px, 1px 36px, 36px 1px, 1px 36px; opacity: 1;
}
a.hub-card:hover, a.wiki-card:hover, .hub-card:focus-within, .wiki-card:focus-within, .world-card:hover, .card:hover {
  border-color: var(--line-gold);
  box-shadow: 0 18px 36px -24px rgba(0, 0, 0, .9), 0 0 0 1px rgba(212, 178, 94, .18), 0 0 28px -12px rgba(233, 205, 126, .45);
}
.section-heading h2, .page-head h1, .hub-section > h2 { text-shadow: 0 2px 18px rgba(0, 0, 0, .65); }
.eyebrow { position: relative; padding-left: 22px; }
.eyebrow::before { content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 1px; background: var(--gold); box-shadow: 0 0 8px var(--gold-bright); }

/* ---- primary button: a light that crosses it ------------------------------------------------------- */
.btn.gold { position: relative; overflow: hidden; isolation: isolate; }
.btn.gold::after {
  content: ""; position: absolute; inset: -20% auto -20% -60%; width: 45%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); opacity: 0;
}
.btn { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease; }
.btn:hover { box-shadow: 0 10px 24px -16px rgba(233, 205, 126, .7); }
.btn:active { transform: translateY(1px); }

/* ---- main menu: the underline grows from the centre ------------------------------------------------ */
#menu-principal a { position: relative; }
#menu-principal a::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: -6px; height: 1px; background: var(--gold-bright);
  box-shadow: 0 0 10px var(--gold); transition: left .2s ease, right .2s ease;
}
#menu-principal a:hover::after, #menu-principal a[aria-current]::after { left: 0; right: 0; }

/* ---- tables: the row under the pointer --------------------------------------------------------------- */
.portal-table tbody tr { transition: background-color .15s ease; }
.portal-table tbody tr:hover { background-color: rgba(212, 178, 94, .07); }

/* ---- catalog and daily images (served by the game host; absent files simply do not render) ---------- */
.sprite { display: inline-block; vertical-align: middle; overflow: hidden; image-rendering: pixelated; flex: none; }
.sprite > i { display: block; height: 100%; width: calc(var(--frames, 1) * 100%); background-repeat: no-repeat; background-size: 100% 100%; }
.sprite-item { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; vertical-align: middle; }
.portal-table .sprite-col { width: 80px; padding-block: 4px; text-align: center; }
.portal-table .sprite-col .sprite, .portal-table .sprite-col .sprite-item { display: inline-block; }
/* Only the creature: no plate, glow or shadow behind it. */
.sprite-stage { display: grid; place-items: end center; width: 148px; height: 132px; margin: 4px auto 12px; }
.sprite-stage:empty { display: none; }
/* character list of the signed-in account: the look walks beside the name */
.kv .character-name { display: inline-flex; align-items: center; gap: 10px; }
.kv .character-name .sprite { margin-block: -14px; }
.daily-selection .sprite-stage { width: 72px; height: 72px; margin: 0; place-items: center; }
.daily-selection.has-sprite { grid-template-columns: auto 1fr; align-items: center; column-gap: 16px; }
.daily-selection.has-sprite > .sprite-stage { grid-row: 1 / span 2; }
.daily-world.with-save { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.daily-save strong { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
@media (max-width: 900px) { .daily-world.with-save { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .daily-world.with-save { grid-template-columns: 1fr; } }

/* ---- creature sheet: loot with the item pictures, damage taken per element, ignored conditions ------------ */
.sheet-block { margin-top: 28px; }
.sheet-block h3 { margin: 0 0 12px; font: 1rem var(--display); color: var(--gold); letter-spacing: .02em; }
.loot-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 18px; }
.loot-list li { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.loot-list li > a, .loot-list li > span:not(.loot-slot) { overflow-wrap: anywhere; }
.loot-list small { color: var(--ink-mute); font: .75rem var(--ui); white-space: nowrap; }
.loot-slot { display: grid; place-items: center; width: 36px; height: 36px; }
.element-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0; }
.element-grid > div { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface-2); }
.element-grid dt { color: var(--ink-soft); font: .8125rem var(--ui); }
.element-grid dd { margin: 0; font: .8125rem var(--ui); font-variant-numeric: tabular-nums; }
.element-grid [data-taken="weak"] dd { color: var(--ember); }
.element-grid [data-taken="strong"] dd { color: var(--green); }
.element-grid [data-taken="immune"] dd { color: var(--gold-bright); }

/* ---- content that exists only in Ravora (page kept out of the menus while its list is empty) --------------- */
.exclusive-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px 28px; }
.exclusive-list li { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.exclusive-picture { display: grid; place-items: center; width: 72px; height: 72px; }
.exclusive-list h3 { margin: 0 0 6px; font: 1.0625rem var(--display); }
.exclusive-list p { margin: 0; color: var(--ink-soft); }

.achievement-grade { color: var(--gold-bright); letter-spacing: .12em; }
.achievement-secret { color: var(--ink-mute); font: .75rem var(--ui); }

/* ---- waiting for the world: a pulse instead of a static word --------------------------------------- */
.is-waiting { color: transparent !important; border-radius: 4px; background: linear-gradient(90deg, var(--surface-2) 25%, #222a31 50%, var(--surface-2) 75%); background-size: 200% 100%; }

/* ---- hero embers (created by motion.js only when movement is welcome) ------------------------------- */
.hero { position: relative; overflow: hidden; }
.embers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.embers > span {
  position: absolute; bottom: -12px; width: var(--s, 3px); height: var(--s, 3px); border-radius: 50%;
  background: radial-gradient(circle, #ffe2a6, var(--ember) 55%, transparent 72%); opacity: 0;
}
.hero-grid { position: relative; z-index: 2; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes shine { 0%, 72% { left: -60%; opacity: 0; } 76% { opacity: 1; } 100% { left: 130%; opacity: 0; } }
  @keyframes pulse-wait { to { background-position: -200% 0; } }
  @keyframes sprite-walk { to { transform: translateX(-100%); } }
  @keyframes ember { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 12% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--x, 30px), -105vh) scale(1.1); } }
  @keyframes glow { 0%, 100% { text-shadow: 0 0 22px rgba(212, 178, 94, .18); } 50% { text-shadow: 0 0 34px rgba(233, 205, 126, .42); } }
  @keyframes live-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(95, 168, 147, .55); } 60% { box-shadow: 0 0 0 7px rgba(95, 168, 147, 0); } }

  main, .hero { animation: page-in .35s ease both; }
  .will-reveal { opacity: 0; transform: translateY(18px); }
  .will-reveal.is-in { animation: rise-in .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--reveal-delay, 0ms); }
  a.hub-card:hover, a.wiki-card:hover, .world-card:hover { transform: translateY(-3px); }
  .btn.gold::after { animation: shine 5.5s ease-in-out infinite; }
  .btn.gold:hover::after { animation-duration: 1.4s; }
  .is-waiting { animation: pulse-wait 1.4s linear infinite; }
  .sprite > i { animation: sprite-walk calc(var(--frames, 1) * 105ms) steps(var(--frames, 1)) infinite; }
  .embers > span { animation: ember var(--d, 9s) linear var(--w, 0s) infinite; }
  .wordmark { animation: glow 6s ease-in-out infinite; }
  .online.live, #st-badge.live { animation: live-dot 2.2s ease-out infinite; border-radius: 999px; }
  .portal-panel, .catalog-detail, [data-account-section-panel]:not([hidden]) { animation: rise-in .3s ease both; }
  .portal-table tbody tr { animation: rise-in .3s ease both; animation-delay: calc(var(--row, 0) * 12ms); }
}

/* Paper and any reader without scrolling must never meet content still waiting to enter. */
@media print { .will-reveal { opacity: 1 !important; transform: none !important; } .embers { display: none; } }