/* ==========================================================================
   ErynOT — Universal Polish Layer (v1)
   Loaded LAST, on every page. Purely additive/gap-filling:
   - does not touch selectors already !important-styled by v171/v136/etc.
   - goal: consistent "alive" feel + mobile comfort on pages that don't get
     the home-page treatment (forum, downloads, shop, houses, spells, etc.)
   Safe to delete this single file to fully revert.
   ========================================================================== */

/* Never let anything push the page into horizontal scroll on small screens. */
html, body { overflow-x: hidden !important; }

/* ---- Header brand: real wordmark logo (replaces shield+text), keeps its own aspect ratio --
   Uses an ID selector on purpose: the header has many older layered !important rules
   (position:absolute variants per mp-v12/mp-home state) that a class could never reliably
   beat. An ID always wins over any class/element combo while still needing !important
   to beat their !important declarations. */
#erynotBrandLogo {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  animation: none !important;
  border-radius: 0 !important;
  flex: none !important;
  width: 186px !important;
  height: 62px !important;
  min-width: 186px !important;
  max-height: 62px !important;
  max-width: 186px !important;
  object-fit: contain !important;
}
@media (max-width:1150px) and (min-width:761px) {
  #erynotBrandLogo { width: 162px !important; height: 54px !important; min-width: 162px !important; max-width: 162px !important; max-height: 54px !important; }
}
@media (max-width:760px) {
  #erynotBrandLogo { width: 132px !important; height: 44px !important; min-width: 132px !important; max-width: 132px !important; max-height: 44px !important; }
}

/* ---- Hero: real wordmark logo instead of the plain "ErynOT" text heading ---- */
.erynot-hero-title-wrap h1 {
  display: block !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
}
#erynotHeroLogo {
  display: block !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  animation: none !important;
  flex: none !important;
  width: 520px !important;
  height: 173px !important;
  min-width: 520px !important;
  max-width: 520px !important;
  max-height: 173px !important;
  object-fit: contain !important;
  object-position: center center !important;
}
@media (max-width:1150px) and (min-width:761px) {
  #erynotHeroLogo { width: 400px !important; height: 133px !important; min-width: 400px !important; max-width: 400px !important; max-height: 133px !important; }
}
@media (max-width:760px) {
  #erynotHeroLogo { width: 280px !important; height: 93px !important; min-width: 280px !important; max-width: 280px !important; max-height: 93px !important; object-position: center center !important; }
}

/* The shield img was removed from .erynot-hero-identity, but the old rule still reserves a
   150px grid column for it — that left an empty column and shoved the text into the narrow
   150px slot instead of the wide one. Collapse it to a single centered column. */
body.mp-home .erynot-hero-identity {
  grid-template-columns: minmax(0,1fr) !important;
  justify-items: center !important;
  text-align: center !important;
}
body.mp-home .erynot-hero-title-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}
body.mp-home .erynot-hero-title-wrap h1,
body.mp-home .erynot-hero-title-wrap strong,
body.mp-home .erynot-hero-title-wrap p {
  text-align: center !important;
}
#erynotHeroLogo {
  object-position: center center !important;
}

/* ---- Generic hover/focus micro-interactions (gap-fill) ------------------ */
#ContentHelper a,
#ContentHelper button,
#ContentHelper input[type="submit"],
#ContentHelper input[type="button"],
.Table1 a, .Table2 a, .Table3 a, .Table4 a, .Table5 a {
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background-color .16s ease, color .16s ease;
}

#ContentHelper button:hover,
#ContentHelper input[type="submit"]:hover,
#ContentHelper input[type="button"]:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

#ContentHelper button:active,
#ContentHelper input[type="submit"]:active {
  transform: translateY(0);
  filter: brightness(.96);
}

/* Visible, tasteful focus ring for keyboard users (accessibility = professional). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #e7b450 !important;
  outline-offset: 2px !important;
  border-radius: 3px;
}

/* Generic table row hover, wherever it isn't already themed. */
.Table1 tr:hover td,
.Table2 tr:hover td,
.Table3 tr:hover td,
.Table4 tr:hover td,
.Table5 tr:hover td {
  background-color: rgba(231, 180, 80, .08);
  transition: background-color .15s ease;
}

/* Any table that overflows its column gets a scroll container instead of
   breaking the page layout on phones (gap-fill for pages v136 doesn't cover). */
#ContentHelper table {
  max-width: 100%;
}

@media (max-width: 760px) {
  #ContentHelper .TableContainer,
  #ContentHelper .TableContentContainer,
  #ContentHelper .InnerTableContainer {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Comfortable tap targets on mobile. */
  #ContentHelper a,
  #ContentHelper button,
  #ContentHelper input[type="submit"],
  #ContentHelper input[type="button"] {
    min-height: 40px;
  }
}

/* ---- Scroll-reveal (opt-in via JS, class added automatically) ----------- */
.ery-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s cubic-bezier(.2, .75, .25, 1), transform .55s cubic-bezier(.2, .75, .25, 1);
}

.ery-reveal.ery-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .ery-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- Back-to-top button --------------------------------------------------*/
/* The legacy .scrollToTop div (static markup in index.php) got restyled into a
   near-identical gold circle by V29 in erynot-home-v15.css, at basically the same
   position as this one — so both were rendering stacked on top of each other.
   Keep only the JS-managed #ery-back-to-top (proper scroll-based show/hide). */
.scrollToTop {
  display: none !important;
}
#ery-back-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 200;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #b87824;
  background: linear-gradient(180deg, #6a3716, #40200c);
  color: #f5deb0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, filter .16s ease;
}

#ery-back-to-top.ery-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

#ery-back-to-top:hover { filter: brightness(1.12); }

@media (max-width: 760px) {
  #ery-back-to-top { right: 12px; bottom: 12px; width: 40px; height: 40px; }
}

/* ==========================================================================
   ErynOT — Universal Polish Layer (v2)
   Visible, static-appearance changes (typography, cards, hero, buttons).
   Existing CSS is written almost entirely with !important, so this layer
   matches that specificity on purpose — otherwise nothing here would ever
   actually render over the current rules. Still additive/deletable.
   ========================================================================== */

/* ---- Typography: modern sans for UI/body, keep the display serif only for
   the brand wordmark and big headline, which is what gives the site its
   fantasy identity. Nothing here touches text that already has an inline
   color/size (those keep working exactly as before). ------------------- */
:root {
  --ery-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body,
#ContentHelper,
#ContentHelper p, #ContentHelper span, #ContentHelper li, #ContentHelper td,
.mp5-panel, .mp5-news-item, .erynot-stats, .erynot-nav,
.erynot-account, .erynot-online, .erynot-footer,
.Table1, .Table2, .Table3, .Table4, .Table5 {
  font-family: var(--ery-sans) !important;
}

.erynot-hero-kicker,
.erynot-hero-title-wrap h1,
.erynot-hero-title-wrap strong,
.mp14-page-heading strong,
.ery-v115-cardhead h3 {
  font-family: Georgia, "Times New Roman", serif !important;
  letter-spacing: .015em;
}

.erynot-nav a {
  font-family: var(--ery-sans) !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}

/* ---- Hero: bigger presence, gradient headline, ambient glow. ---------- */
body.mp-v12.mp-home .erynot-hero {
  position: relative;
  overflow: hidden;
}

body.mp-v12.mp-home .erynot-hero::before,
body.mp-v12.mp-home .erynot-hero::after {
  content: "";
  position: absolute;
  width: 46vw;
  height: 46vw;
  max-width: 620px;
  max-height: 620px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(70px);
  opacity: .28;
  z-index: 0;
  animation: ery-glow-drift 12s ease-in-out infinite alternate;
}

body.mp-v12.mp-home .erynot-hero::before {
  top: -18%;
  left: -12%;
  background: radial-gradient(circle, rgba(231, 180, 80, .9), transparent 70%);
}

body.mp-v12.mp-home .erynot-hero::after {
  bottom: -22%;
  right: -10%;
  background: radial-gradient(circle, rgba(45, 112, 153, .9), transparent 70%);
  animation-delay: 2.5s;
}

@keyframes ery-glow-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(3%, 4%) scale(1.08); }
}

body.mp-v12.mp-home .erynot-hero-identity,
body.mp-v12.mp-home .erynot-hero-title-wrap {
  position: relative;
  z-index: 1;
}

body.mp-v12.mp-home .erynot-hero-title-wrap h1 {
  font-size: clamp(52px, 7vw, 96px) !important;
  line-height: .96 !important;
  margin: 4px 0 !important;
  background: linear-gradient(180deg, #fff2cf 0%, #f2cf77 45%, #c9922f 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .55));
}

body.mp-v12.mp-home .erynot-hero-kicker {
  letter-spacing: .32em !important;
  font-size: 12px !important;
  color: #e7b450 !important;
  -webkit-text-fill-color: #e7b450 !important;
}

body.mp-v12.mp-home .erynot-hero-title-wrap p {
  font-family: var(--ery-sans) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: #c9d6de !important;
  -webkit-text-fill-color: #c9d6de !important;
  max-width: 46ch;
}

/* ---- Stat pills: glass cards with a top accent. ------------------------ */
body.mp-v12.mp-home .erynot-stats {
  border-radius: 18px !important;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

body.mp-v12.mp-home .erynot-stats > div {
  position: relative;
  transition: background-color .2s ease, transform .2s ease;
}

body.mp-v12.mp-home .erynot-stats > div::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #e7b450, transparent);
  opacity: .8;
}

body.mp-v12.mp-home .erynot-stats > div:hover {
  background: rgba(231, 180, 80, .06);
  transform: translateY(-2px);
}

/* ---- Dashboard panels (news / ranking / events): premium card look. --- */
body.mp-v12.mp-home .mp5-panel {
  border-radius: 16px !important;
  box-shadow: 0 24px 54px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .03) !important;
  position: relative;
  overflow: hidden;
}

body.mp-v12.mp-home .mp5-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #e7b450, #d47a37 50%, #2d7099);
}

body.mp-v12.mp-home .ery-v115-cardhead h3 {
  font-size: 17px !important;
  letter-spacing: .01em;
}

body.mp-v12.mp-home .mp5-news-item {
  border-radius: 12px !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}

body.mp-v12.mp-home .mp5-news-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 32px rgba(0, 0, 0, .4) !important;
  border-color: #e7b450 !important;
}

body.mp-v12.mp-home .mp5-news-thumb img {
  transition: transform .35s ease;
}

body.mp-v12.mp-home .mp5-news-item:hover .mp5-news-thumb img {
  transform: scale(1.06);
}

/* ---- Buttons: richer gradient + glow, consistent across the site. ----- */
.erynot-account,
.mp5-rank-button,
.eryn-coins-cta,
#ContentHelper button,
#ContentHelper input[type="submit"] {
  border-radius: 10px !important;
  letter-spacing: .03em !important;
  text-transform: uppercase;
  font-size: 11px !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

.erynot-coins-banner {
  border-radius: 16px !important;
  box-shadow: 0 20px 46px rgba(0, 0, 0, .4) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}

.erynot-coins-banner:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 24px 54px rgba(0, 0, 0, .48) !important;
}

/* ---- Breathing room: premium sites are rarely cramped. ----------------- */
body.mp-v12.mp-home .mp5-dashboard-grid {
  gap: 22px !important;
}

body.mp-v12.mp-home .erynot-stats,
body.mp-v12.mp-home .mp5-panel .mp5-news-list,
body.mp-v12.mp-home .mp5-panel .mp5-ranking-list {
  padding-top: 4px;
}

@media (max-width: 760px) {
  body.mp-v12.mp-home .erynot-hero-title-wrap h1 {
    font-size: clamp(38px, 12vw, 56px) !important;
  }
  body.mp-v12.mp-home .erynot-hero::before,
  body.mp-v12.mp-home .erynot-hero::after {
    width: 70vw;
    height: 70vw;
    opacity: .18;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mp-v12.mp-home .erynot-hero::before,
  body.mp-v12.mp-home .erynot-hero::after {
    animation: none !important;
  }
}

/* ==========================================================================
   ErynOT — Universal Polish Layer (v3): medieval atmosphere + effects.
   All motion here is transform/opacity only (GPU-cheap) and capped in
   count, so it doesn't cost real load/scroll performance. Fully disabled
   under prefers-reduced-motion. Site-wide (not just home).
   ========================================================================== */

/* ---- Torch-lit vignette: fixed, cheap, never re-triggers layout. ------- */
#ery-vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, .55) 100%);
  animation: ery-torch-flicker 6s ease-in-out infinite;
}

@keyframes ery-torch-flicker {
  0%, 100% { opacity: .85; }
  22% { opacity: .95; }
  38% { opacity: .78; }
  55% { opacity: .92; }
  71% { opacity: .82; }
}

/* ---- Ember / dust particles: injected once by JS, pure CSS animation. -- */
#ery-embers {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.ery-ember {
  position: absolute;
  bottom: -5%;
  width: var(--s, 3px);
  height: var(--s, 3px);
  border-radius: 50%;
  background: radial-gradient(circle, #ffdd9a, #e7b450 55%, transparent 75%);
  opacity: 0;
  animation: ery-ember-rise var(--dur, 9s) linear infinite;
  animation-delay: var(--delay, 0s);
  left: var(--x, 50%);
}

@keyframes ery-ember-rise {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  8%   { opacity: .85; }
  50%  { transform: translate(var(--drift, 12px), -52vh) scale(1); opacity: .6; }
  92%  { opacity: 0; }
  100% { transform: translate(calc(var(--drift, 12px) * 2), -100vh) scale(.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce), (max-width: 560px) {
  #ery-embers, #ery-vignette { display: none !important; }
}

/* Corner ornaments moved to v7 (Medieval Frame System) below, where they
   no longer collide with the v2 top-accent-bar on the same pseudo-element. */
body.mp-v12.mp-inner #Bodycontainer {
  position: relative;
}

/* ---- ErynOT wordmark: living shimmer sweep across the gradient text. --- */
body.mp-v12.mp-home .erynot-hero-title-wrap h1 {
  background-size: 220% 100% !important;
  animation: ery-title-shimmer 5s ease-in-out infinite !important;
}

@keyframes ery-title-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

body.mp-v12.mp-home .erynot-hero-shield {
  filter: drop-shadow(0 0 14px rgba(231, 180, 80, .45));
  animation: ery-shield-pulse 3.4s ease-in-out infinite;
}

@keyframes ery-shield-pulse {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(231, 180, 80, .35)); }
  50% { filter: drop-shadow(0 0 22px rgba(231, 180, 80, .65)); }
}

/* Header brand wordmark gets the same family + a touch of weight. */
.erynot-brand span {
  font-family: Georgia, "Times New Roman", serif !important;
  letter-spacing: .02em !important;
}

/* ---- Call-to-action glow: draws the eye to the buttons that matter. ---- */
.erynot-account,
.eryn-coins-cta,
.mp5-rank-button {
  animation: ery-cta-glow 2.6s ease-in-out infinite;
}

@keyframes ery-cta-glow {
  0%, 100% { box-shadow: 0 10px 24px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 0 0 rgba(231, 180, 80, 0); }
  50% { box-shadow: 0 10px 24px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 16px 2px rgba(231, 180, 80, .45); }
}

@media (prefers-reduced-motion: reduce) {
  body.mp-v12.mp-home .erynot-hero-title-wrap h1,
  body.mp-v12.mp-home .erynot-hero-shield,
  .erynot-account, .eryn-coins-cta, .mp5-rank-button {
    animation: none !important;
  }
}

/* ==========================================================================
   ErynOT — Universal Polish Layer (v6): hero text legibility only.
   The banner photo itself is untouched — user asked to keep the original
   image. This just adds a shadow behind the headline text so it reads
   clearly regardless of what's behind it, without changing the art.
   ========================================================================== */
body.mp-v12.mp-home .erynot-hero-title-wrap h1 {
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .55)) drop-shadow(0 0 26px rgba(0, 0, 0, .5));
}

body.mp-v12.mp-home .erynot-hero-title-wrap strong,
body.mp-v12.mp-home .erynot-hero-title-wrap p {
  text-shadow: 0 2px 10px rgba(0, 0, 0, .8) !important;
}

/* ==========================================================================
   ErynOT — Universal Polish Layer (v7)
   1) Hero banner gets slow motion WITHOUT swapping the photo (user asked
      to keep the current image — this only pans/breathes it).
   2) Nav tabs get an animated underline (several older rules explicitly
      disabled this in the past; ours out-specifies them on purpose).
   3) Medieval Frame System: three frame tiers (primary/secondary/small)
      for the Home page panels, built from layered box-shadow + gradient +
      corner rivets — no new images needed, GPU-cheap, additive only.
   ========================================================================== */

/* ---- 1) Hero banner: slow breathing pan, same photo. ------------------- */
body.mp-v12.mp-home .erynot-hero-art {
  background-size: 112% auto !important;
  animation: ery-hero-breathe 28s ease-in-out infinite alternate !important;
}

@keyframes ery-hero-breathe {
  from { background-position: 42% 34%; background-size: 108% auto; }
  to   { background-position: 57% 46%; background-size: 120% auto; }
}

@media (max-width: 760px) {
  body.mp-v12.mp-home .erynot-hero-art { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.mp-v12.mp-home .erynot-hero-art { animation: none !important; }
}

/* ---- 2) Nav tabs: animated underline on hover/active. ------------------ */
body.mp-v12.mp-home .erynot-nav > a {
  position: relative !important;
}

body.mp-v12.mp-home .erynot-nav > a::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 9px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: linear-gradient(90deg, transparent, #e7b450, transparent) !important;
  transform: scaleX(0) !important;
  transform-origin: center !important;
  opacity: 0 !important;
  transition: transform .25s cubic-bezier(.2, .75, .25, 1), opacity .25s ease !important;
}

body.mp-v12.mp-home .erynot-nav > a:hover::after,
body.mp-v12.mp-home .erynot-nav > a.active::after,
body.mp-v12.mp-home .erynot-nav > a[aria-current="page"]::after {
  transform: scaleX(1) !important;
  opacity: 1 !important;
}

/* ---- 3) Medieval Frame System ------------------------------------------ */

/* Shared frame tokens: one palette, three tiers built from it. */
:root {
  --ery-frame-gold: #e7b450;
  --ery-frame-gold-dim: #a97a2c;
  --ery-frame-bronze-hi: rgba(255, 226, 160, .5);
  --ery-frame-line: #4a2f16;
  --ery-frame-wood-a: #241408;
  --ery-frame-wood-b: #170c04;
}

/* PRIMARY — server-info bar: the most important strip on the page, so it
   gets the fullest treatment (double ring, carved inset, top+bottom rail,
   riveted corners). */
body.mp-v12.mp-home .erynot-stats {
  position: relative;
  border: 1px solid var(--ery-frame-line) !important;
  border-radius: 14px !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 30%),
    linear-gradient(180deg, var(--ery-frame-wood-a), var(--ery-frame-wood-b)) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .6),
    0 0 0 3px rgba(90, 58, 22, .55),
    inset 0 1px 0 rgba(255, 255, 255, .06),
    inset 0 -2px 6px rgba(0, 0, 0, .55),
    0 26px 60px rgba(0, 0, 0, .55) !important;
}

body.mp-v12.mp-home .erynot-stats::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  padding: 0 !important;
  background:
    radial-gradient(circle at 12px 12px, var(--ery-frame-gold) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at calc(100% - 12px) 12px, var(--ery-frame-gold) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 12px calc(100% - 12px), var(--ery-frame-gold) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), var(--ery-frame-gold) 0 1.6px, transparent 2.4px) !important;
  opacity: .75;
}

body.mp-v12.mp-home .erynot-stats::after {
  content: "" !important;
  position: absolute !important;
  left: 10px; right: 10px; top: 0;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--ery-frame-gold), transparent) !important;
  opacity: .85;
  pointer-events: none;
}

/* SMALL tier — individual stat cells: discreet, carved-in feel. */
body.mp-v12.mp-home .erynot-stats > div {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), inset 0 -1px 0 rgba(0, 0, 0, .35);
}

/* SECONDARY — news / ranking / events panels: medieval but simpler than
   the primary bar. Top accent stays (from v2); corner rivets ride on the
   full-cover ::after instead of colliding with it. */
body.mp-v12.mp-home .mp5-panel {
  border: 1px solid var(--ery-frame-line) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 22px 50px rgba(0, 0, 0, .48) !important;
}

body.mp-v12.mp-home .mp5-panel::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 10px 10px, var(--ery-frame-gold-dim) 0 1.3px, transparent 2px),
    radial-gradient(circle at calc(100% - 10px) 10px, var(--ery-frame-gold-dim) 0 1.3px, transparent 2px),
    radial-gradient(circle at 10px calc(100% - 10px), var(--ery-frame-gold-dim) 0 1.3px, transparent 2px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), var(--ery-frame-gold-dim) 0 1.3px, transparent 2px) !important;
  opacity: .7;
}

/* Section title "plaque": looks bolted to the panel it introduces. */
body.mp-v12.mp-home .ery-v115-cardhead {
  position: relative;
  padding-bottom: 10px !important;
  margin-bottom: 4px !important;
}

body.mp-v12.mp-home .ery-v115-cardhead h3 {
  display: inline-block;
  padding: 4px 14px 5px !important;
  border-radius: 6px;
  background: linear-gradient(180deg, #3a2410, #1c1006) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    inset 0 -6px 10px -6px rgba(0, 0, 0, .7),
    0 2px 6px rgba(0, 0, 0, .4);
  border: 1px solid var(--ery-frame-gold-dim);
  text-transform: uppercase;
  color: var(--ery-frame-gold) !important;
  -webkit-text-fill-color: var(--ery-frame-gold) !important;
}

body.mp-v12.mp-home .ery-v115-cardhead::after {
  content: "" !important;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ery-frame-gold-dim), transparent);
  opacity: .6;
}

/* Buttons: layered bronze/gold with real normal/hover/active/disabled. */
.erynot-account,
.mp5-rank-button,
.eryn-coins-cta {
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease !important;
}

.erynot-account:hover,
.mp5-rank-button:hover,
.eryn-coins-cta:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.erynot-account:active,
.mp5-rank-button:active {
  transform: translateY(0);
  filter: brightness(.95);
}

.erynot-account[disabled],
.mp5-rank-button[disabled],
.eryn-coins-cta[aria-disabled="true"] {
  opacity: .5 !important;
  filter: grayscale(.4) !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

/* ---- Logo animations: hero logo breathes/floats on its own, header logo reacts to hover ---- */
@keyframes erynotHeroLogoLife {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 8px 20px rgba(0,0,0,.35)) drop-shadow(0 0 0 rgba(214,181,108,0)); }
  50% { transform: translateY(-6px) scale(1.015); filter: drop-shadow(0 12px 26px rgba(0,0,0,.4)) drop-shadow(0 0 22px rgba(214,181,108,.35)); }
}
#erynotHeroLogo {
  animation: erynotHeroLogoLife 4.5s ease-in-out infinite !important;
  will-change: transform, filter;
}
@media (prefers-reduced-motion: reduce) {
  #erynotHeroLogo { animation: none !important; }
}

/* Header logo: static, no hover effect (removed per request). */
#erynotBrandLogo {
  transition: none !important;
  transform: none !important;
  filter: none !important;
}

@media (max-width: 760px) {
  body.mp-v12.mp-home .erynot-stats::before,
  body.mp-v12.mp-home .mp5-panel::after {
    opacity: .4;
  }
}

/* ---- Inner pages: give the content card real screen presence, not a
   narrow strip lost in a sea of black. Slimmer sidebar, wider row, smaller
   outer gutter. Same breakpoint structure as the v15 rule this replaces.
   Selector matches medieval-pro.css's ".mp-v12.mp-inner #X" prefix exactly
   (plus "body" in front) — that file's rules otherwise win on specificity
   even though this file loads later, because they use two classes too. */
html body.mp-v12.mp-inner #Bodycontainer {
  width: min(1400px, calc(100vw - 16px)) !important;
  max-width: none !important;
}
html body.mp-v12.mp-inner #ContentRow {
  width: min(1400px, calc(100vw - 16px)) !important;
  max-width: none !important;
  grid-template-columns: 220px minmax(0, 1fr) !important;
  gap: 18px !important;
}
html body.mp-v12.mp-inner #MenuColumn {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
}
@media (min-width: 1421px) {
  html body.mp-v12.mp-inner #ContentRow { width: 1400px !important; }
}
@media (max-width: 980px) {
  html body.mp-v12.mp-inner #ContentRow { width: calc(100vw - 16px) !important; }
}

/* ---- Header background: unify inner pages with the home page's cool navy tone.
   An older rule ("forged dark wood") gives inner pages a warm brown/rust header
   instead — clashing with the blue/gold logo, which is why it looked dim/off
   there. `html` prefix bumps specificity just enough to beat that older rule
   (same selector otherwise, so it's not accidentally shadowing anything else). */
html body.mp-inner:not(.ery-page-gifts):not(.ery-page-payment):not(.ery-page-payments) .erynot-header {
  background: linear-gradient(180deg, #101820 0%, #080d13 58%, #04070a 100%) !important;
  border-bottom-color: #8f6c2d !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.32) !important;
}

/* ---- Custom cursor: armored gauntlet, site-wide. Hotspot at the fingertip
   (top-left of the image) so clicks register where the finger actually points. */
html, body {
  cursor: url('images/erynot-cursor.png') 4 2, auto !important;
}
a, button, [role="button"], input[type="submit"], input[type="button"], .erynot-nav a,
.erynot-account, .erynot-footer-play, .mp5-cta, .erynot-brand, .erynot-coins-banner {
  cursor: url('images/erynot-cursor.png') 4 2, pointer !important;
}

/* ---- Header social icons (Discord/Instagram) — same icon-drawing rules as the
   footer's .erynot-socials, but NOT scoped to body.mp-home so they render in the
   header on every page. */
html body.mp-v12 .erynot-header-social {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-right: 2px !important;
  flex: none !important;
}
html body.mp-v12 .erynot-header-social a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(214,181,108,.35) !important;
  background: rgba(255,255,255,.04) !important;
  color: #f2bd52 !important;
  flex: none !important;
  transition: background .16s ease, transform .16s ease;
}
.erynot-header-social a:hover {
  background: rgba(214,181,108,.16);
  transform: translateY(-1px);
}
.erynot-header-social .ery-social-discord-svg {
  width: 17px !important;
  height: 17px !important;
  fill: #f2bd52 !important;
  display: block !important;
}
.erynot-header-social .ery-social-icon {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: #f2bd52;
  line-height: 1;
  box-sizing: border-box;
}
.erynot-header-social .ery-social-instagram {
  width: 15px;
  height: 15px;
  margin: auto;
  border: 2px solid currentColor;
  border-radius: 4px;
}
.erynot-header-social .ery-social-instagram::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border: 2px solid currentColor;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  box-sizing: border-box;
}
.erynot-header-social .ery-social-instagram::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 2px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: currentColor;
}
@media (max-width: 760px) {
  .erynot-header-social { display: none; }
}

/* ---- Hero CTA button ("Jogue Agora") ------------------------------------- */
html body.mp-v12.mp-home .erynot-hero-cta {
  display: inline-block;
  margin-top: 18px;
  padding: 13px 34px;
  border-radius: 8px;
  border: 1px solid #d6b56c;
  background: linear-gradient(180deg, #1a3a5c, #0c2036);
  color: #ffe39a;
  font: 700 13px/1 Georgia, serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .16s ease, filter .16s ease;
}
html body.mp-v12.mp-home .erynot-hero-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.15);
}
@media (max-width: 760px) {
  html body.mp-v12.mp-home .erynot-hero-cta { width: 100%; text-align: center; }
}

/* ---- "TOP JOGADORES" tabs header — was overlapping its own tab buttons in the
   4-column dashboard layout (wide screens): "TOP JOGADORES" + "TOP GUILDAS" +
   "TOP FRAGS" combined needed ~315px inside a ~339px-wide column, which is too
   tight a margin and breaks with normal font-rendering variance between
   browsers/zoom levels. Shrink font/padding here specifically so there's real
   slack, and add an ellipsis safety net in case a column ever gets narrower still. */
html body.mp-v12.mp-home .mp5-tabs h3,
html body.mp-v12.mp-home .mp5-tabs > a {
  font-size: 11px !important;
  padding-left: 8px !important;
  padding-right: 20px !important;
}
html body.mp-v12.mp-home .mp5-tabs h3 {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}

/* ---- Dashboard grid: never let a panel column get narrower than ~280px.
   Below 4 columns' worth of that minimum, panels wrap to fewer per row
   instead of squeezing text into a sliver (which is what caused single
   words each on their own line in "no events scheduled" at some
   resolutions/zoom levels this couldn't be reproduced at directly). */
html body.mp-v12.mp-home .mp5-dashboard-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
}
html body.mp-v12.mp-home .mp5-empty {
  min-width: 200px !important;
}

/* ---- Unify header bits that still used the old warm-brown/wood palette,
   clashing against the new navy header. These applied on inner pages (the
   ONLINE badge) or on hover on every page (the nav underline hover state),
   which is why they only showed up "when the cursor passes" / "on other
   pages" rather than in a static screenshot of the header at rest. */
html body.mp-v12 .erynot-header-actions .erynot-online {
  border-color: #4a708f !important;
  background: linear-gradient(180deg, #0e1720, #070c11) !important;
  color: #e4d2a8 !important;
}
html body.mp-v12 .erynot-nav > a:hover {
  color: #ffe6a8 !important;
  background: linear-gradient(180deg, rgba(23,74,120,.5), rgba(10,32,53,.45)) !important;
  box-shadow: inset 0 -2px 0 #4a90c9 !important;
}

/* Lang selector / online badge / entrar were right-aligned inside their own
   390px grid column (justify-content:end), which pushed them both away from
   the nav AND flush against the header's own right edge at the same time.
   Left-align instead — that closes the gap with "SUPORTE" and, as a side
   effect, moves everything away from the edge too. */
html body.mp-v12 .erynot-header-actions {
  justify-content: start !important;
  padding-right: 20px !important;
  padding-left: 16px !important;
  width: max-content !important;
  min-width: 0 !important;
  gap: 6px !important;
}
html body.mp-v12 .erynot-header {
  grid-template-columns: 300px minmax(0, 1fr) max-content !important;
  justify-content: start !important;
}
/* Nav's own column is flexible (1fr) again — after doubling the home width,
   the extra space needs to live BETWEEN the logo and the nav, not push nav's
   individual links apart (that's what "esticar" was) and not leave a gap
   between nav and the lang/online/entrar block on its right either. So: nav
   stays compact internally (max-content columns, unchanged) but is now
   right-aligned WITHIN its own wide flexible cell — flush against the
   actions block that immediately follows, empty space pools before it. */
html body.mp-v12 .erynot-nav {
  grid-template-columns: repeat(6, max-content) !important;
  justify-content: end !important;
  gap: 4px !important;
}
html body.mp-v12 .erynot-nav > a {
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* The lang selector / online badge / entrar button's actual content
   (three text buttons + icon+text badge + icon+text button) genuinely
   needed ~390-400px — no grid trick fixes that, the content itself had to
   shrink. Tighter padding and smaller font closes the real gap. */
html body.mp-v12 .erynot-lang {
  padding: 0 8px !important;
  gap: 6px !important;
}
html body.mp-v12 .erynot-lang a {
  padding: 0 2px !important;
  font-size: 11px !important;
}
html body.mp-v12 .erynot-online {
  padding: 0 10px !important;
  min-width: 0 !important;
  font-size: 11px !important;
}
html body.mp-v12 .erynot-account {
  padding: 0 14px !important;
  min-width: 0 !important;
  font-size: 12px !important;
}

/* Home page width, 2x the previous 1300px cap. */
html body.mp-v12.mp-home #Bodycontainer {
  width: min(2600px, calc(100vw - 16px)) !important;
  max-width: none !important;
}