/* EternalMU premium cosmic dark-fantasy visual layer.
   Visual-only overrides: no layout routes, SQL, forms, buttons, or JS behavior changed. */
:root{
  --em-bg:#03040a;
  --em-bg-deep:#070713;
  --em-void:#020207;
  --em-panel:rgba(9,10,20,.82);
  --em-panel-strong:rgba(13,12,27,.92);
  --em-glass:rgba(255,255,255,.045);
  --em-line:rgba(226,188,112,.24);
  --em-line-soft:rgba(154,124,218,.18);
  --em-gold:#f1cf7a;
  --em-gold-bright:#ffe7a8;
  --em-amber:#b56d28;
  --em-violet:#8f68ff;
  --em-violet-deep:#21123f;
  --em-cyan:#78e6ff;
  --em-green:#44f09a;
  --em-text:#fbf3df;
  --em-muted:#bdb3ca;
  --em-shadow:0 28px 90px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.055);
  --em-radius:18px;
  --em-font:Inter,Segoe UI,Roboto,Arial,sans-serif;
}

body.em-body,
body{
  color:var(--em-text);
  background:
    radial-gradient(circle at 50% -10%,rgba(104,78,255,.22),transparent 34%),
    radial-gradient(circle at 15% 28%,rgba(177,109,40,.13),transparent 28%),
    linear-gradient(180deg,#05050d 0%,#090813 42%,#030307 100%) !important;
  text-rendering:geometricPrecision;
}

.em-bg{
  background-image:
    linear-gradient(90deg,rgba(2,2,8,.96) 0%,rgba(6,5,15,.72) 34%,rgba(4,3,10,.55) 58%,rgba(2,2,7,.94) 100%),
    radial-gradient(circle at 52% 18%,rgba(120,88,255,.18),transparent 28%),
    radial-gradient(circle at 72% 54%,rgba(241,174,78,.11),transparent 32%),
    url('../img/bg/darkwizard-vs-fairyelf-site.webp'),
    url('../img/bg/darkwizard-vs-fairyelf-site.jpg') !important;
  background-position:center top !important;
}

.em-bg:before,
body:before{
  background:
    radial-gradient(circle at 50% 12%,rgba(255,231,168,.10),transparent 18%),
    radial-gradient(circle at 20% 60%,rgba(111,76,255,.18),transparent 28%),
    radial-gradient(circle at 82% 36%,rgba(120,230,255,.08),transparent 24%),
    linear-gradient(180deg,rgba(2,2,8,.18),rgba(2,2,8,.86)) !important;
}

.em-bg__grid,
body:after{
  background-image:
    linear-gradient(rgba(241,207,122,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(143,104,255,.04) 1px,transparent 1px) !important;
  background-size:72px 72px !important;
  opacity:.5 !important;
}

.em-topbar{
  background:linear-gradient(180deg,rgba(3,3,9,.92),rgba(3,3,9,.42)) !important;
  border-bottom:1px solid rgba(241,207,122,.12) !important;
}

.em-topbar__inner{
  min-height:74px;
  border-radius:18px !important;
  border-color:rgba(241,207,122,.22) !important;
  background:
    linear-gradient(90deg,rgba(255,231,168,.095),rgba(143,104,255,.08),rgba(120,230,255,.035)) !important;
  box-shadow:0 20px 70px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.07) !important;
}

.em-brand__sigil,
.em-login-sigil{
  border-radius:14px !important;
  background:
    radial-gradient(circle at 50% 34%,rgba(255,231,168,.22),transparent 30%),
    linear-gradient(135deg,#382060,#0a0913 70%) !important;
  border-color:rgba(255,231,168,.42) !important;
  box-shadow:0 0 26px rgba(143,104,255,.32), inset 0 0 24px rgba(241,207,122,.10) !important;
}

.em-brand.em-brand--image{
  min-width:clamp(240px,24vw,350px) !important;
  width:clamp(240px,24vw,350px);
  height:66px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex:0 0 auto;
  overflow:visible;
}

.em-brand__logo-img{
  display:block;
  width:100%;
  max-width:350px;
  height:66px;
  object-fit:contain;
  object-position:left center;
  filter:none;
}

.em-brand__text strong,
.em-showcase-left h1,
.em-hero h1,
.em-page-head h1,
.em-login-title h1,
.em-cabinet-head h1{
  font-family:Georgia,'Times New Roman',serif;
  letter-spacing:.035em !important;
  color:#fff8df;
  text-shadow:0 0 34px rgba(143,104,255,.36),0 2px 0 rgba(0,0,0,.5);
}

.em-nav a{
  border-radius:10px !important;
  color:#d8d0e8 !important;
}

.em-nav a:hover,
.em-nav a.is-active{
  color:var(--em-gold-bright) !important;
  background:linear-gradient(180deg,rgba(241,207,122,.13),rgba(143,104,255,.06)) !important;
  box-shadow:inset 0 0 0 1px rgba(241,207,122,.20),0 0 22px rgba(143,104,255,.12) !important;
}

.em-play,
.em-btn--primary,
.em-btn.gold,
.em-auth-submit,
.em-md-sell,
.em-md-buy,
.rankings button,
.ranking button,
#rankings button,
.rankings .btn,
.ranking .btn,
#rankings .btn{
  background:linear-gradient(180deg,#fff0b8 0%,#e0ae50 48%,#8e4f19 100%) !important;
  color:#160d07 !important;
  border:1px solid rgba(255,231,168,.42) !important;
  border-radius:12px !important;
  box-shadow:0 14px 36px rgba(181,109,40,.28), inset 0 1px 0 rgba(255,255,255,.55) !important;
}

.em-play:hover,
.em-btn:hover,
.em-auth-submit:hover,
.em-md-buy:hover{
  transform:translateY(-2px);
  filter:brightness(1.07) saturate(1.05);
}

.em-btn--ghost,
.em-btn.ghost,
.em-cabinet-logout{
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(241,207,122,.28) !important;
  color:#f5dc9b !important;
}

.em-panel,
.em-hero__panel,
.em-news-panel,
.em-side-panel,
.em-news-card,
.em-feature-card,
.em-download-card,
.em-price-card,
.em-form-shell,
.em-account-main,
.em-account-menu,
.em-tabs,
.em-market,
.em-login-card,
.em-login-info,
.em-cabinet-head,
.em-cabinet-menu,
.em-cabinet-section,
.em-wallet-panel,
.em-wallet-card,
.em-showcase-wrap,
.em-live-strip>div,
.em-md-filterbox,
.em-md-wallet-pill,
.em-md-items.list,
.rankings table,
.ranking table,
#rankings table{
  border-radius:var(--em-radius) !important;
  border-color:var(--em-line) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.052),transparent 1px),
    linear-gradient(145deg,rgba(14,13,29,.90),rgba(5,5,12,.82) 62%,rgba(13,8,23,.86)) !important;
  box-shadow:var(--em-shadow) !important;
  backdrop-filter:blur(16px) saturate(1.12);
  -webkit-backdrop-filter:blur(16px) saturate(1.12);
}

.em-panel:before,
.em-topbar__inner:before,
.em-hero__panel:before,
.em-showcase-wrap:before{
  background:linear-gradient(135deg,rgba(255,231,168,.72),transparent 26%,rgba(143,104,255,.36) 54%,transparent 76%,rgba(120,230,255,.28)) !important;
}

.em-kicker,
.em-panel-head span,
.em-section-head span,
.em-page-head span,
.em-login-brand small,
.em-panel-kicker,
.em-live-strip small,
.em-md-wallet-pill b,
.em-table th{
  color:var(--em-gold) !important;
  letter-spacing:.16em !important;
}

.em-showcase-wrap{
  padding:44px !important;
  overflow:hidden;
}

.em-showcase-wrap:after{
  content:"";
  position:absolute;
  inset:auto -10% -42% 34%;
  height:240px;
  background:radial-gradient(ellipse at center,rgba(143,104,255,.24),transparent 64%);
  pointer-events:none;
}

.em-show-card,
.em-stat-grid>div,
.em-login-perks div,
.em-cabinet-stat,
.em-character-card,
.em-news-grid article,
.em-md-item,
.em-table td{
  border-color:rgba(241,207,122,.16) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}

.em-show-card:hover,
.em-news-card:hover,
.em-feature-card:hover,
.em-md-item:hover,
.em-player-row:hover{
  border-color:rgba(255,231,168,.35) !important;
  background:linear-gradient(180deg,rgba(143,104,255,.13),rgba(255,255,255,.035)) !important;
  box-shadow:0 18px 52px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,231,168,.05) !important;
}

.em-live-strip strong,
.em-stat-grid strong,
.em-countdown strong,
.em-metric-stack strong,
.em-news-grid h3,
.em-feature-card h3,
.pstats b,
.rank,
.em-md-found b,
.em-md-price,
.rankings td:first-child,
.ranking td:first-child,
#rankings td:first-child{
  color:var(--em-gold-bright) !important;
}

.em-lead,
.em-hero__lead,
.em-news-card p,
.em-feature-card p,
.em-form-note,
.em-download-card p,
.em-price-card p,
.em-login-title p,
.em-cabinet-head p,
.em-news-grid p,
.em-show-card span,
.em-md-wallet-user,
.em-md-item-name small{
  color:var(--em-muted) !important;
}

.em-auth-form input,
.em-mini-login input,
.em-form input,
.em-market-toolbar input,
.em-market-toolbar select,
.em-md-search,
.em-md-search input,
#emMarketSort,
.rankings input,
.ranking input,
#rankings input,
.rankings select,
.ranking select,
#rankings select{
  border-radius:12px !important;
  border:1px solid rgba(241,207,122,.22) !important;
  background:rgba(2,2,8,.72) !important;
  color:#fff8e8 !important;
  box-shadow:inset 0 0 22px rgba(0,0,0,.34),0 0 0 1px rgba(143,104,255,.035) !important;
}

.em-auth-form input:focus,
.em-mini-login input:focus,
.em-form input:focus,
.em-md-search:focus-within,
.rankings input:focus,
.ranking input:focus,
#rankings input:focus{
  border-color:rgba(255,231,168,.52) !important;
  box-shadow:0 0 0 4px rgba(241,207,122,.07),0 0 28px rgba(143,104,255,.18),inset 0 0 22px rgba(0,0,0,.34) !important;
}

.em-md-market{
  color:var(--em-text) !important;
}

.em-md-tabs{
  height:auto !important;
  gap:8px !important;
  flex-wrap:wrap;
}

.em-md-tab{
  height:38px !important;
  border:1px solid rgba(241,207,122,.18) !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.04) !important;
  color:#d7cfe8 !important;
}

.em-md-tab.active,
.em-md-filterbox button.active,
.em-md-view button.active,
.em-md-seg button.active,
.em-md-rarity button.active,
.em-md-levels button.active,
.em-md-options2 button.active,
.em-md-currencies button.active,
.em-md-class.active,
.em-md-iconfilter.active{
  background:linear-gradient(180deg,#fff0b8,#d99e43 54%,#8e4f19) !important;
  color:#170c05 !important;
  border-color:rgba(255,231,168,.62) !important;
  box-shadow:0 0 22px rgba(241,207,122,.22), inset 0 1px 0 rgba(255,255,255,.45) !important;
}

.em-md-filterbox{
  padding:16px !important;
}

.em-md-seg,
.em-md-rarity,
.em-md-levels,
.em-md-options2,
.em-md-currencies,
.em-md-class-icons,
.em-md-view{
  border-color:rgba(241,207,122,.18) !important;
  background:rgba(255,255,255,.035) !important;
}

.em-md-seg button,
.em-md-rarity button,
.em-md-levels button,
.em-md-options2 button,
.em-md-currencies button,
.em-md-iconfilter,
.em-md-class{
  color:#c9bfd9 !important;
}

.em-md-item{
  border-bottom:1px solid rgba(241,207,122,.13) !important;
}

.em-md-item-icon,
.em-md-item-icon span,
.em-mu-icon{
  background:radial-gradient(circle at 50% 36%,rgba(120,230,255,.16),rgba(143,104,255,.10) 42%,rgba(2,2,8,.86)) !important;
  border-color:rgba(120,230,255,.25) !important;
}

.em-mu-tip{
  border-radius:12px !important;
  border-color:rgba(241,207,122,.32) !important;
  background:linear-gradient(180deg,rgba(12,12,26,.98),rgba(4,4,12,.98)) !important;
  box-shadow:0 22px 70px rgba(0,0,0,.72),0 0 28px rgba(143,104,255,.18) !important;
}

.rankings-page:before,
.rankings:before,
.ranking:before,
.module-rankings:before,
#rankings:before{
  color:#fff8df !important;
  text-shadow:0 0 34px rgba(143,104,255,.36) !important;
}

.rankings table thead th,
.ranking table thead th,
.module-rankings table thead th,
#rankings table thead th,
.rankings table tr:first-child th,
.ranking table tr:first-child th{
  background:linear-gradient(180deg,rgba(42,28,68,.86),rgba(13,12,27,.88)) !important;
  color:#f4e8ff !important;
  border-bottom-color:rgba(241,207,122,.22) !important;
}

.rankings table td,
.ranking table td,
.module-rankings table td,
#rankings table td{
  color:#f0e9f8 !important;
}

.em-footer__inner{
  border-radius:18px !important;
  border-color:rgba(241,207,122,.18) !important;
  background:linear-gradient(90deg,rgba(13,12,27,.82),rgba(5,5,12,.86)) !important;
  box-shadow:0 18px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.045) !important;
}

@media (max-width:1100px){
  .em-bg{background-attachment:scroll !important}
  .em-showcase-wrap{padding:30px !important}
  .em-md-tabs{justify-content:flex-start !important}
  .em-brand.em-brand--image{min-width:220px !important;width:220px;height:58px}
  .em-brand__logo-img{height:58px}
}

@media (max-width:720px){
  .em-topbar__inner{border-radius:14px !important}
  .em-showcase-wrap{padding:22px !important}
  .em-brand.em-brand--image{min-width:178px !important;width:178px;height:50px}
  .em-brand__logo-img{height:50px}
  .em-showcase-left h1,
  .em-hero h1,
  .em-page-head h1,
  .em-login-title h1{letter-spacing:.02em !important}
  .em-md-row{align-items:stretch}
  .em-md-tab{flex:1 1 auto;padding:0 12px !important}
}

/* Homepage art frames must win over the global premium panel skin. */
.em-home-final .em-home-columns{
  grid-template-columns:1fr 1fr 1.12fr !important;
  gap:34px !important;
  margin-top:30px !important;
  overflow:visible !important;
}
.em-home-final .em-home-columns > section.em-panel{
  position:relative !important;
  isolation:isolate !important;
  min-height:410px !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  padding:52px 44px 48px !important;
}
.em-home-final .em-home-columns > section.em-panel:before{
  content:"" !important;
  position:absolute !important;
  inset:38px 34px 38px !important;
  z-index:-2 !important;
  border-radius:22px !important;
  background:
    radial-gradient(circle at 50% 0%,rgba(137,78,255,.18),transparent 36%),
    linear-gradient(180deg,rgba(8,6,18,.97),rgba(4,3,10,.96)) !important;
  box-shadow:inset 0 0 70px rgba(87,48,147,.20),0 24px 70px rgba(0,0,0,.45) !important;
  pointer-events:none !important;
}
.em-home-final .em-home-columns > section.em-panel:after{
  content:none !important;
}
.em-card-frame{
  position:absolute !important;
  inset:-34px !important;
  z-index:-1 !important;
  width:calc(100% + 68px) !important;
  height:calc(100% + 68px) !important;
  max-width:none !important;
  object-fit:fill !important;
  pointer-events:none !important;
  user-select:none !important;
  filter:drop-shadow(0 0 20px rgba(127,69,255,.30)) !important;
}
.em-home-final .em-home-columns > section.em-panel > :not(.em-card-frame){
  position:relative;
  z-index:1;
}
.em-home-final .em-home-columns > section.em-panel > .em-panel-head{
  height:54px !important;
  margin:0 0 10px !important;
  padding:0 0 0 !important;
  border-bottom:1px solid rgba(223,187,88,.13) !important;
  background:transparent !important;
}
.em-home-final .em-home-columns .em-player-row{
  grid-template-columns:34px 40px 1fr 52px 52px !important;
  gap:12px !important;
  min-height:56px !important;
  padding:11px 0 !important;
  background:transparent !important;
}
.em-home-final .em-home-columns .em-player-row:hover,
.em-home-final .em-home-columns .em-guild-row:hover{
  background:rgba(126,72,205,.10) !important;
}
.em-home-final .em-home-columns .avatar{
  width:36px !important;
  height:36px !important;
  border-radius:50% !important;
}
.em-home-final .em-home-columns .rank,
.em-home-final .em-home-columns .medal{
  display:grid !important;
  place-items:center !important;
  width:32px !important;
  height:32px !important;
  border-radius:50% !important;
  border:1px solid rgba(216,170,66,.78) !important;
  background:rgba(201,157,54,.09) !important;
  color:#ffe28a !important;
}
.em-home-final .em-home-columns .em-guild-row{
  min-height:68px !important;
  padding:14px 0 !important;
  background:transparent !important;
}
.em-home-final .em-home-columns .em-timer-main{
  margin:18px 0 20px !important;
  border-radius:22px !important;
  background:linear-gradient(180deg,rgba(40,32,25,.62),rgba(13,9,17,.72)) !important;
}
.em-home-final .em-home-columns .em-event-list{
  padding:0 !important;
}
@media (max-width:1180px){
  .em-home-final .em-home-columns{grid-template-columns:1fr !important;gap:40px !important}
  .em-home-final .em-home-columns > section.em-panel{min-height:0 !important}
}
@media (max-width:640px){
  .em-card-frame{inset:-22px !important;width:calc(100% + 44px) !important;height:calc(100% + 44px) !important}
  .em-home-final .em-home-columns > section.em-panel{padding:42px 30px 38px !important}
  .em-home-final .em-home-columns .em-player-row{grid-template-columns:30px 34px 1fr !important}
  .em-home-final .em-home-columns .pstats{display:none !important}
}