:root{--ink:#303640;--muted:#6b7480;--blue:#1b6b97;--gold:#ffd263;--line:#e5ebef;--page-width:1000px;--font:Tahoma,"Leelawadee UI",Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;color:var(--ink);position:relative;isolation:isolate;background:#0c0808;font-family:var(--font);font-size:16px;line-height:1.55}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}img{max-width:100%;height:auto;vertical-align:middle}h1,h2,h3,p{margin:0}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid #127cb2;outline-offset:4px}section[id],main[id]{scroll-margin-top:24px}.skip-link{position:absolute;top:-80px;left:16px;padding:12px 18px;background:white;z-index:50}.skip-link:focus{top:12px}
.topbar{height:72px;background:#182b41b8;border-bottom:3px solid #2434429c;color:#fff;box-shadow:0 2px 7px #17335142}.topbar-inner{max-width:1000px;height:100%;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand,.topbar-actions,.topbar-actions>a{display:flex;align-items:center;gap:10px}.brand{font-size:14px}.topbar-actions{font-size:14px;gap:20px}.cash-link{background:linear-gradient(#ffb334,#e68013);padding:3px 13px;border-radius:3px;font-weight:bold;box-shadow:inset 0 1px #ffffff7a}.topbar a:hover{color:#ffdb85}
.hero{height:378px;position:relative}.site-wrapper{width:min(var(--page-width),calc(100% - 32px));margin:0 auto}.server-status{width:800px;max-width:94%;min-height:52px;margin:auto;display:flex;justify-content:center;align-items:center;gap:22px;padding:8px 18px;color:#fff;background:#141715cf;border:2px solid #303736;border-bottom:0;border-radius:16px 16px 0 0;font-size:17px}.server-status>div{display:flex;align-items:center;gap:9px;white-space:nowrap}.server-status strong{padding:3px 11px;font-size:15px;background:#53555b;border-radius:3px;font-variant-numeric:tabular-nums;font-weight:normal}.server-status strong.online{color:white;background:#1bac42;font-size:13px}.status-dot{width:9px;height:9px;border-radius:50%;background:#6deb83;box-shadow:0 0 10px #6deb8380}.status-symbol{color:#e3e8ed;font-size:20px}.page-shell{background:#fff;padding:10px;border-radius:11px;box-shadow:0 0 0 1px #dcebf6,0 0 9px #4c92c16b;position:relative}.main-nav{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));background:#343434;border-radius:5px;padding:5px}.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:54px;padding:5px 2px;border-radius:3px;line-height:1.5;font-size:14px;color:white;transition:background .18s}.nav-item small{font-size:12px;color:#f9cf79}.nav-item:active{background:linear-gradient(#c53429,#71151b)}.nav-item:active small{color:#fff0d4}@media(hover:hover) and (pointer:fine){.nav-item:hover{background:linear-gradient(#c53429,#71151b)}.nav-item:hover small{color:#fff0d4}}.demo-note{color:#78838e;text-align:right;font-size:12px;margin:7px 2px 5px}.content-grid{display:grid;grid-template-columns:220px minmax(0,1fr) 220px;gap:12px;align-items:start}.center-column,.left-column,.right-column{min-width:0}.image-button{display:block;overflow:hidden;margin-bottom:5px;transition:filter .18s,transform .18s}.image-button img{display:block;width:100%;height:auto}.image-button:hover{filter:saturate(1.3) brightness(1.04);transform:translateY(-1px)}.mvp-button{margin-top:7px}.image-heading{line-height:0;margin:0 0 8px}.image-heading img{display:block;width:100%;height:auto}.sidebar-panel{margin-top:17px}.stat-list,.command-list{margin:0}.stat-list>div{display:flex;justify-content:space-between;gap:4px;padding:6px 8px;font-size:13px;border-bottom:1px solid var(--line)}.stat-list>div:nth-child(odd),.reward-list li:nth-child(odd){background:#f4f8fa}.stat-list dd{margin:0;font-weight:bold;color:#256187}.stat-list dt{font-size:13px}.ban-list,.reward-list,.system-summary{list-style:none;margin:0;padding:0}.ban-list li{display:flex;align-items:center;gap:5px;border-bottom:1px solid var(--line);padding:5px 2px;font-size:12px}.ban-list img{object-fit:contain;flex:none}.ban-list span{flex:1;min-width:0}.ban-list small{font-size:12px;color:#bd3838;white-space:nowrap}.news-entry{display:flex;gap:12px;align-items:flex-start;padding:12px 8px;border-bottom:1px solid var(--line)}.badge{min-width:49px;line-height:21px;border-radius:3px;padding:1px 5px;color:white;font-size:12px;text-align:center;flex:none;margin-top:2px;font-weight:bold}.badge-news{background:#21a844}.badge-event{background:#ee7b20}.badge-update{background:#2188bb}.news-entry h3{font-size:16px;line-height:1.4;font-weight:bold}.news-entry p{font-size:14px;line-height:1.65;color:#667078;margin-top:3px}.news-entry.featured{background:linear-gradient(90deg,#fff9e9,#fff)}.featured h3{color:#d53924}.featured p{color:#464d55}.vote-banner{display:block;margin:19px 0}.vote-banner img{width:100%}.systems-section{margin-top:22px}.system-summary li{font-size:14px;line-height:1.7;padding:6px 4px;border-bottom:1px solid var(--line)}.system-summary b{color:#24708f;margin-right:3px}.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px 10px;margin-top:15px}.feature img{width:100%;border-radius:3px}.feature h3{font-size:14px;color:#236580;margin-top:5px}.feature p{font-size:12px;color:#6a7580;line-height:1.6;margin-top:1px}.guild-feature{margin-top:25px}.guild-callout{background:linear-gradient(120deg,#203e54,#3f7387);padding:22px 26px;color:white;border-bottom:4px solid #dcb756}.eyebrow{font-size:12px;font-weight:bold;letter-spacing:2px;color:#b18b3a}.guild-callout .eyebrow{color:#ffe29c}.guild-callout h3{font-size:25px;line-height:1.4;margin:9px 0}.guild-callout p{font-size:14px;color:#d2e4ed}.guild-callout a{display:inline-block;color:#ffdf94;font-size:14px;border-bottom:1px solid #f4d18069;padding:10px 0 2px}.contact-button{display:flex;align-items:center;justify-content:center;gap:9px;background:linear-gradient(130deg,#00bf14,#42d20e);min-height:72px;margin-top:6px;color:white;padding:8px;font-weight:bold}.contact-button small{display:block;font-size:12px;letter-spacing:1px;font-weight:normal}.contact-button:hover{filter:brightness(1.05)}.war-card{background:linear-gradient(#ffb62c,#e58014);color:#fff;border:1px solid #ed981a;border-radius:4px;text-align:center;padding:10px 4px;display:flex;flex-direction:column;font-size:14px;text-shadow:0 1px #bc740a}.war-card strong{font-size:23px;line-height:1.5;letter-spacing:.3px}.war-card small{font-size:12px}.reward-heading{margin:8px 0 2px;padding:5px 2px;text-align:center;background:linear-gradient(#ab7937,#815323);border-radius:3px;color:white;font-size:13px;font-weight:normal}.reward-list li{display:flex;align-items:center;gap:6px;font-size:12px;min-height:34px;padding:4px;border-bottom:1px solid var(--line)}.reward-list li span{flex:1}.reward-list b{font-weight:normal;background:#e9b648;color:white;padding:0 6px;border-radius:3px;font-size:12px}.reward-list img{object-fit:contain}.saturday{margin-top:13px;background:linear-gradient(#527da4,#345573);border-color:#416789;text-shadow:none}.command-list>div{padding:6px 5px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:5px;align-items:center;font-size:12px}.command-list dt{color:#b56e13;font-size:13px}.command-list dd{margin:0;color:#64707d}.footer{margin-top:24px;background:linear-gradient(180deg,#0c0808,#25110d);padding:20px 20px 36px}.footer-inner{max-width:1000px;margin:auto;text-align:center;background:#e4f2facf;border:1px solid #bddbef;border-radius:12px;padding:24px}.footer p{font-size:14px;color:#40657e;margin:12px 0}.footer small{display:block;font-size:12px;color:#66839b;margin-top:19px}.back-top{display:inline-block;font-size:13px;color:#295577;border-bottom:1px solid #8eb0c6;padding-bottom:2px}.service-dialog{width:min(440px,calc(100% - 32px));padding:36px;border:0;border-top:5px solid #e9b756;border-radius:9px;color:var(--ink);box-shadow:0 20px 90px #12273566;text-align:center}.service-dialog::backdrop{background:#142b44b8;backdrop-filter:blur(4px)}.service-dialog .eyebrow{margin-top:12px}.service-dialog h2{font-size:25px;margin:8px 0 12px}.service-dialog>p:not(.eyebrow){font-size:16px;line-height:1.8;color:#6a7580}.dialog-close{position:absolute;right:12px;top:9px;background:none;border:0;color:#7b858e;font-size:28px;line-height:1;width:36px;height:36px}.gold-button{background:linear-gradient(#f9c967,#e5ab3d);border:1px solid #dea849;border-radius:4px;color:#503c12;padding:10px 28px;margin-top:24px;font-weight:bold}.gold-button:hover{filter:brightness(1.05)}.rules-dialog{width:min(580px,calc(100% - 32px))}.rules-dialog ol{padding-left:24px;text-align:left;font-size:16px}.rules-dialog li{margin:10px 0}.rules-dialog .rules-note{font-size:12px!important}.noscript-note{padding:12px;text-align:center;color:#795419;font-size:14px}body.dialog-open{overflow:hidden}
@keyframes brand-float{0%,100%{transform:translateY(-1px)}50%{transform:translateY(1px)}}

@media(max-width:1050px){.topbar-inner{padding:0 20px}.content-grid{grid-template-columns:190px minmax(0,1fr) 190px;gap:10px}.nav-item{font-size:13px}.server-status{gap:15px;font-size:15px}.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ban-list li,.reward-list li{font-size:12px}.news-entry{gap:8px;padding:10px 5px}}
@media(max-width:800px){.hero{height:276px}.site-wrapper{width:calc(100% - 24px)}.server-status{width:95%;gap:12px;flex-wrap:wrap;padding:9px;min-height:54px;font-size:13px}.server-status>div{gap:6px}.server-status strong{font-size:13px;padding:3px 7px}.status-symbol{display:none}.main-nav{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}.nav-item{font-size:14px;min-height:52px}.content-grid{grid-template-columns:180px minmax(0,1fr);gap:14px}.right-column{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}.right-column .sidebar-panel{margin:0}.account-button,.contact-button{height:72px;margin:0}.account-button{background:#ffbc00;display:flex;align-items:center;justify-content:center}.account-button img{width:auto;height:72px}.command-list>div,.reward-list li{font-size:14px}.demo-note{text-align:center}.news-entry p{font-size:14px}.topbar-actions{gap:14px}.topbar-actions>a:first-child{font-size:13px}.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.topbar{height:64px}.topbar-inner{padding:0 12px;gap:4px}.brand{gap:6px}.topbar-actions>a:first-child{font-size:0;gap:0}.topbar-actions{gap:10px}.cash-link{font-size:12px;padding:4px 9px}.hero{height:179px}.server-status{gap:5px 13px;max-width:100%;width:100%;font-size:12px;border-radius:11px 11px 0 0}.server-status>div{gap:5px}.server-status strong{font-size:12px}.server-status>div:first-child{width:100%;justify-content:center}.site-wrapper{width:calc(100% - 16px)}.page-shell{padding:7px}.nav-item{font-size:12px;padding:5px 1px}.nav-item small{font-size:12px}.main-nav{gap:0;padding:4px}.demo-note{font-size:12px;line-height:1.6;padding:0 6px;margin:9px 0}.content-grid{display:flex;flex-direction:column;gap:20px}.left-column{display:contents}.quick-links{order:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;width:100%}.quick-links .image-button{margin:0}.mvp-button{display:none}.center-column{order:1;width:100%}.left-column>.sidebar-panel{order:3;width:100%;margin:0}.right-column{order:2;width:100%;gap:10px}.right-column .sidebar-panel{grid-column:1/-1}.account-button,.contact-button{height:64px}.account-button img{height:auto;width:100%}.contact-button{min-height:64px;font-size:14px;gap:6px;padding:7px}.contact-button img{width:29px;height:29px}.contact-button>span:last-child{display:none}.contact-button small{font-size:12px;letter-spacing:0}.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 8px}.feature h3{font-size:12px}.feature p{font-size:12px}.news-entry{padding:13px 5px;gap:11px}.news-entry p{font-size:14px}.image-heading{margin-bottom:8px}.left-column>.sidebar-panel .image-heading,.right-column .image-heading{max-width:240px}.stat-list>div{font-size:14px;padding:8px}.stat-list dt{font-size:14px}.ban-list li{font-size:14px;padding:7px}.guild-callout h3{font-size:23px}.footer{padding:7px 10px 24px}.footer-inner{padding:20px 12px}.service-dialog{padding:28px 22px}.war-card strong{font-size:25px}}
/* Mobile usability: readable cards and comfortably sized touch controls. */
.dialog-close{width:44px;height:44px;right:8px;top:8px}
.back-top,.guild-callout a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:900px){
  .topbar .brand,.topbar-actions>a{min-height:44px}
  .topbar-actions>a:first-child{min-width:44px;justify-content:center}
  .feature h3{font-size:14px}
  .feature p{font-size:14px;line-height:1.65}
}
@media(max-width:540px){
  .quick-links .image-button{min-height:44px;display:flex;align-items:center;background:#f9c619}
  .quick-links .mvp-button{display:none}
  .nav-item{font-size:13px;min-height:58px}
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
  .feature h3,.feature p{font-size:14px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* The reference's two MU background layers share one crop and lighting pulse. */
.mu-background{
  --scene-height:800px;
  position:absolute;inset:0 0 auto;height:var(--scene-height);z-index:0;
  overflow:hidden;pointer-events:none;user-select:none;
  background:url('../images/mu-season21/bg_header.jpg') center top/cover no-repeat;
}
.mu-background-glow{
  position:absolute;inset:0;opacity:0;
  background:url('../images/mu-season21/bg_header2.jpg') center top/cover no-repeat;
  animation:mu-light-in .5s linear forwards,mu-light-pulse 3s .5s ease-in infinite;
}
.mu-background::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 68%,#0c0808);
}
.mu-embers{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:calc(var(--scene-height) * 2.4);min-width:100%;height:auto;
  aspect-ratio:12/5;pointer-events:none;
}
.mu-background.is-paused .mu-background-glow{animation-play-state:paused}
.topbar,.hero,.site-wrapper,.footer{position:relative;z-index:1}
.topbar{background:#170c0bbd;border-bottom-color:#6d38285c;box-shadow:0 2px 7px #0005}
.brand-heading{font-size:inherit;line-height:0;flex:none}
.brand{position:relative;width:140px;height:66px;gap:0;animation:brand-float 5s ease-in-out infinite,logo-luster 5s ease-in-out infinite}
.brand .brand-logo{
  display:block;width:100%;height:auto;animation:none;
  filter:drop-shadow(0 3px 2px #180701) drop-shadow(0 5px 9px #000c) drop-shadow(0 0 9px #ffc45a66);
}
/* Glints follow the left-aligned lettering; the SVG itself has a transparent background. */
.brand::before,.brand::after{
  content:"";position:absolute;z-index:1;pointer-events:none;
  width:16px;height:16px;opacity:0;
  background:radial-gradient(ellipse 50% 5% at center,#fff 20%,#ffe7a2 42%,transparent 100%),
             radial-gradient(ellipse 5% 50% at center,#fff 20%,#ffe7a2 42%,transparent 100%);
  animation:logo-glint 5s ease-in-out infinite;
}
.brand::before{left:3%;top:7%}
.brand::after{left:55%;top:10%;animation-delay:2.5s}
.footer-logo{width:235px;max-width:100%;height:auto;filter:drop-shadow(0 0 8px #ffb93440)}
@keyframes logo-luster{0%,100%{filter:brightness(1.05)}50%{filter:brightness(1.2)}}
@keyframes logo-glint{0%,35%,75%,100%{opacity:0;transform:scale(.6) rotate(0deg)}55%{opacity:.95;transform:scale(1) rotate(15deg)}}
.page-shell{box-shadow:0 0 0 1px #87533d,0 4px 22px #0006}
.footer-inner{background:#211512e8;border-color:#654332}
.footer p{color:#e2cfbd}.footer small{color:#b69c88}
.back-top{color:#f2d48e;border-bottom-color:#8d6b41}
@keyframes mu-light-in{from{opacity:0}to{opacity:1}}
@keyframes mu-light-pulse{0%,100%{opacity:1}50%{opacity:.3}}
@media(max-width:800px){.mu-background{--scene-height:620px}}
@media(max-width:540px){.mu-background{--scene-height:480px}}
@media(prefers-reduced-motion:reduce){
  .mu-background-glow{opacity:.65;animation:none}
  .mu-embers{display:none}
}

@media(max-width:540px){.brand{width:116px;height:58px}}

/* MU Online service buttons: illustrated artwork with readable live labels. */
.quick-links .mu-button{
  position:relative;aspect-ratio:11/3;min-height:50px;
  background:#170b0b;border:1px solid #a7773b;
  box-shadow:inset 0 0 0 1px #edc77c33;
}
.mu-button img{width:100%;height:100%;object-fit:cover;object-position:center}
.mu-button::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 30%,#12070730 48%,#100606a6 100%);
}
.mu-button-label{
  position:absolute;z-index:1;right:8px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  color:#fff3dc;text-shadow:0 2px 3px #000,0 0 5px #000;
}
.mu-button-label strong{font-family:Arial,Tahoma,sans-serif;font-size:24px;line-height:1.05;letter-spacing:-.6px}
.mu-button-label>span{font-size:13px;line-height:1.4;color:#f4cb83}
.quick-links .mu-button:focus-visible{outline:3px solid #b9261f;outline-offset:2px}
@media(max-width:1050px){.mu-button-label strong{font-size:21px}.mu-button-label>span{font-size:12px}}
@media(max-width:540px){.mu-button-label strong{font-size:clamp(16px,5vw,24px)}.mu-button-label>span{font-size:12px}.mu-button-label{right:7px}}

/* Dark metal navigation, matched to the MU artwork's bronze and ember palette. */
.main-nav{
  gap:3px;padding:5px;border:1px solid #936b3c;border-radius:4px;
  background:linear-gradient(180deg,#48291d 0,#1a1010 12%,#090809 65%,#31130f 100%);
  box-shadow:inset 0 1px 0 #efc88877,inset 0 -1px 0 #000,0 3px 9px #22090440;
}
.main-nav .nav-item{
  position:relative;min-width:0;min-height:64px;gap:3px;padding:9px 4px;
  border:1px solid #65422c80;border-radius:2px;
  background:linear-gradient(180deg,#2f2020 0,#191214 42%,#100b0d 75%,#25100e 100%);
  color:#fff0d9;font-size:14px;line-height:1.4;text-shadow:0 2px 3px #000;
  box-shadow:inset 0 1px 0 #e5bd7929,inset 0 -2px 3px #0008;
  transition:background .2s,border-color .2s,box-shadow .2s,color .2s;
}
.main-nav .nav-item::before,.main-nav .nav-item::after{
  content:"";position:absolute;left:16%;right:16%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#c59b60,transparent);
}
.main-nav .nav-item::before{top:3px;opacity:.4}
.main-nav .nav-item::after{
  bottom:3px;background:linear-gradient(90deg,transparent,#bd4830,transparent);opacity:.5;
  transition:opacity .2s,box-shadow .2s;
}
.main-nav .nav-item>span{font-weight:700}
.main-nav .nav-item small{color:#d6b77b;font-size:12px;line-height:1.3;letter-spacing:.25px}
.main-nav .nav-item:focus-visible{
  z-index:1;outline:2px solid #f4d592;outline-offset:1px;
  border-color:#d2a260;background:linear-gradient(180deg,#51201d,#210d10);
}
@media(hover:hover) and (pointer:fine){
  .main-nav .nav-item:hover{
    color:#fff9ed;border-color:#c28a48;
    background:radial-gradient(ellipse at 50% 100%,#83291d88,transparent 75%),linear-gradient(180deg,#482022,#1c0d10);
    box-shadow:inset 0 1px 0 #ffe2a657,inset 0 -2px 0 #d15b32,0 0 9px #9b321b33;
  }
  .main-nav .nav-item:hover small{color:#ffe0a0}
  .main-nav .nav-item:hover::after{opacity:1;box-shadow:0 0 7px #eb622c88}
}
.main-nav .nav-item:active{
  border-color:#bd8546;background:linear-gradient(180deg,#17090b,#59201a);
  box-shadow:inset 0 2px 7px #0009,inset 0 -1px 0 #e49a4b;
}
.main-nav .nav-item:active small{color:#ffe0a0}
@media(max-width:1050px){.main-nav .nav-item{font-size:13px}}
@media(max-width:800px){.main-nav .nav-item{min-height:64px}}
@media(max-width:540px){
  .main-nav{gap:2px;padding:3px}
  .main-nav .nav-item{min-height:74px;padding:8px 2px;gap:3px;font-size:13px}
  .main-nav .nav-item small{letter-spacing:0}
}

@media(max-width:540px){
  .right-column{grid-template-columns:minmax(0,1fr)}
  .right-column .account-button{width:min(220px,100%);height:auto;min-height:64px;justify-self:center}
}

/* Obsidian and ember content surfaces, with warm readable text. */
.page-shell{
  --ink:#e7ddd0;--muted:#bcb1a7;--line:#49372e;
  color:var(--ink);border:1px solid #8c633a;border-radius:8px;
  background:radial-gradient(ellipse 85% 340px at 50% 0,#6e30202e,transparent 100%),
             linear-gradient(135deg,#211719 0,#141114 48%,#1d1316 100%);
  box-shadow:inset 0 1px 0 #efc88855,inset 0 0 45px #0004,0 0 0 3px #211612,0 8px 30px #000a;
}
.page-shell .demo-note{color:var(--muted)}
.page-shell .news-list{
  background:#181215;border:1px solid var(--line);border-radius:4px;overflow:hidden;
  box-shadow:0 3px 12px #0003;
}
.page-shell .news-entry{background:#181215;border-bottom-color:var(--line)}
.page-shell .news-entry:nth-child(even){background:#211719}
.page-shell .news-entry:last-child{border-bottom:0}
.page-shell .news-entry h3{color:#f1dfc2}
.page-shell .news-entry p{color:#c9beb3}
.page-shell .news-entry.featured{
  background:linear-gradient(110deg,#38211e,#211719);
  box-shadow:inset 3px 0 0 #bf8b48;
}
.page-shell .news-entry.featured h3{color:#ffda92}
.page-shell .news-entry.featured p{color:#d4c5b5}
.page-shell .badge-news{background:#27633d;color:#f0fff3}
.page-shell .badge-event{background:#7a4022;color:#fff0d8}
.page-shell .badge-update{background:#28516a;color:#edf7ff}
.page-shell .stat-list,.page-shell .ban-list,.page-shell .command-list,.page-shell .system-summary{
  background:#181215;border:1px solid var(--line);border-top-color:#85613c;border-radius:3px;
  overflow:hidden;box-shadow:inset 0 1px 0 #e9ba7030;
}
.page-shell .stat-list>div:nth-child(odd),.page-shell .ban-list li:nth-child(odd),
.page-shell .command-list>div:nth-child(odd),.page-shell .system-summary li:nth-child(odd){background:#241c1d}
.page-shell .stat-list>div:last-child,.page-shell .ban-list li:last-child,
.page-shell .command-list>div:last-child,.page-shell .system-summary li:last-child{border-bottom:0}
.page-shell .stat-list dt{color:#dfd3c5}
.page-shell .stat-list dd{color:#f2ca83}
.page-shell .ban-list small{color:#ef998d}
.page-shell .command-list dt{color:#e6be7c}
.page-shell .command-list dd{color:var(--muted)}
.page-shell .system-summary b,.page-shell .feature h3{color:#e6be7c}
.page-shell .feature p{color:var(--muted)}
.page-shell .feature img{border:1px solid #755536;box-shadow:0 2px 6px #0005}
.page-shell .account-button{background:#211719}
.page-shell a:focus-visible{outline-color:#f4d592}

/* MU character portraits and live text replace the old white heading banners. */
.mu-section-heading{
  position:relative;display:flex;align-items:center;gap:10px;min-height:70px;
  margin:0 0 8px;border:1px solid #926b3e;border-radius:3px;overflow:hidden;
  background:radial-gradient(ellipse at 100% 100%,#792b1c55,transparent 65%),
             linear-gradient(180deg,#33211d,#160e11 55%,#291511);
  box-shadow:inset 0 1px 0 #f4d5984d,inset 0 -1px 0 #000,0 3px 9px #0005;
  line-height:1.3;
}
.mu-section-heading::after{
  content:"";position:absolute;bottom:2px;left:12px;right:12px;height:1px;
  background:linear-gradient(90deg,#b78043,transparent 85%);pointer-events:none;
}
.mu-section-art{position:relative;flex:0 0 82px;align-self:stretch;overflow:hidden}
.mu-section-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
#systems-heading .mu-section-art img{object-fit:contain}
.mu-section-art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 85%,#201214);
}
.mu-section-copy{display:flex;flex-direction:column;gap:3px;min-width:0;padding:10px 12px 10px 0}
.mu-section-title{
  color:#f6d497;font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(18px,2.2vw,23px);font-weight:700;line-height:1.2;text-shadow:0 2px 3px #000;
}
.mu-section-subtitle{color:#d1bda4;font-size:14px;font-weight:400;line-height:1.45}
@media(max-width:540px){
  .mu-section-heading{gap:8px}
  .mu-section-art{flex-basis:64px}
  .mu-section-copy{padding-right:8px}
}

/* Crisp beveled category plates, inspired by classic game news panels. */
.page-shell .news-entry>div{min-width:0;flex:1}
.page-shell .badge{
  --badge-border:#6abbe0;--badge-top:#295970;--badge-mid:#132c3d;--badge-dark:#06131f;--badge-text:#e1f7ff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 68px;min-width:68px;min-height:22px;margin-top:2px;padding:2px 5px;
  border:1px solid var(--badge-border);border-radius:0;
  background:linear-gradient(180deg,var(--badge-top) 0%,var(--badge-mid) 44%,var(--badge-dark) 45%,var(--badge-mid) 100%);
  color:var(--badge-text);font-family:Arial,Helvetica,sans-serif;font-size:12px;
  font-weight:700;line-height:16px;letter-spacing:.8px;text-transform:uppercase;white-space:nowrap;
  text-shadow:0 1px 0 #000;box-shadow:0 1px 0 #000,inset 0 1px 0 #ffffff38,inset 0 -1px 0 #000;
}
.page-shell .badge::before{
  content:"";position:absolute;inset:2px;pointer-events:none;
  border:1px solid #ffffff14;border-top-color:#ffffff55;border-bottom-color:#0009;
}
.page-shell .badge::after{
  content:"";position:absolute;bottom:1px;left:6px;right:6px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--badge-border),transparent);
}
.page-shell .badge-event{
  --badge-border:#c7b84f;--badge-top:#625c22;--badge-mid:#30300e;--badge-dark:#191b05;--badge-text:#fff6c2;
}
.page-shell .badge-update{
  --badge-border:#ca846c;--badge-top:#61372f;--badge-mid:#38201d;--badge-dark:#1e0e11;--badge-text:#ffe6d8;
}

/* Clear status plates: the status bar shows through the outlined values. */
.server-status .status-icon{
  display:block;flex:0 0 22px;width:22px;height:22px;
  color:#ead5ac;filter:drop-shadow(0 1px 1px #0009);
}
@media(max-width:800px){
  .server-status .status-icon{flex-basis:18px;width:18px;height:18px}
}
.server-status strong{
  position:relative;background:transparent;border:1px solid #a58b61;border-radius:7px;
  color:#f4e8d4;text-shadow:0 1px 0 #000;
  box-shadow:inset 0 1px 0 #ffffff29,inset 0 -1px 0 #0008;
}
.server-status strong::before{
  content:"";position:absolute;inset:2px;border:1px solid #ffffff1a;border-radius:4px;pointer-events:none;
}
.server-status strong.online{
  background:transparent;color:#78ff9a;border-color:#5ade80;font-weight:700;
  text-shadow:0 0 4px #41ff7799,0 0 9px #24e95b80;
  box-shadow:inset 0 1px 0 #a4ffbd40,inset 0 -1px 0 #0008,0 0 7px #35e96b55;
}
.server-status strong.online::before{border-color:#68f58b44}
.server-status .status-dot.is-offline{background:#ff6868;box-shadow:0 0 10px #ff4d4d80}
.server-status strong.offline{
  background:transparent;color:#ff8a83;border-color:#e06e65;font-size:13px;font-weight:700;
  text-shadow:0 0 4px #ff4f4f66,0 0 9px #e92b2b55;
  box-shadow:inset 0 1px 0 #ffb0a840,inset 0 -1px 0 #0008,0 0 7px #e94c3e44;
}
.server-status strong.offline::before{border-color:#f58b8044}

/* Seven menu items fill the desktop bar and both compact rows. */
.main-nav{grid-template-columns:repeat(7,minmax(0,1fr))}
@media(max-width:800px){
  .main-nav{grid-template-columns:repeat(12,minmax(0,1fr))}
  .main-nav .nav-item{grid-column:span 3}
  .main-nav .nav-item:nth-child(n+5){grid-column:span 4}
}

/* Official Dark Lord artwork with a live, glowing promotion title. */
.promotion-banner{
  container-type:inline-size;position:relative;isolation:isolate;display:flex;align-items:center;
  min-height:132px;margin:19px 0;overflow:hidden;border:1px solid #c39955;border-radius:4px;
  background:radial-gradient(ellipse at 18% 70%,#a42525a6,transparent 54%),
             radial-gradient(ellipse at 100% 0,#8a451d52,transparent 65%),
             linear-gradient(115deg,#1d0c13,#160d12 60%,#2d1115);
  box-shadow:inset 0 0 0 3px #170d10,inset 0 0 0 4px #c48e473b,0 5px 16px #0006;
  transition:border-color .2s,box-shadow .2s;
}
.promotion-banner::before{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:repeating-linear-gradient(125deg,transparent 0 32px,#e5a64b09 33px 34px,transparent 35px 67px);
}
.promotion-banner::after{
  content:"";position:absolute;z-index:3;left:8%;right:8%;bottom:4px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#efba5d,#fff3bc,#efba5d,transparent);
  box-shadow:0 0 10px #ff702b;opacity:.7;
}
.promotion-art{position:absolute;inset:0 auto 0 0;width:48%;pointer-events:none;mask-image:linear-gradient(90deg,#000 65%,transparent 100%)}
.promotion-art img{position:absolute;top:0;left:50%;display:block;width:auto;max-width:none;height:175%;transform:translateX(-50%);filter:drop-shadow(0 0 10px #b6772d44)}
.promotion-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;width:64%;margin-left:auto;padding:17px 14px 17px 8px;text-align:center}
.promotion-kicker{color:#c4a378;font-family:Arial,Helvetica,sans-serif;font-size:9px;font-weight:700;letter-spacing:2px;line-height:1.4}
.promotion-title{
  display:block;color:#ffe2a0;font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(21px,6.5cqw,36px);font-weight:700;letter-spacing:.5px;line-height:1.15;white-space:nowrap;
  text-shadow:0 2px 1px #000,0 0 8px #ffac4059;animation:promotion-glow 1.8s ease-in-out infinite;
}
.promotion-subtitle{display:flex;align-items:center;gap:12px;color:#e2c9a7;font-size:12px;line-height:1.4}
.promotion-subtitle>span{display:inline-grid;place-items:center;width:20px;height:20px;border:1px solid #9b7141;border-radius:50%;color:#ffe2a0;font-size:19px;line-height:1}
@keyframes promotion-glow{
  0%,100%{opacity:.66;color:#e3ba74;text-shadow:0 2px 1px #000,0 0 4px #ff8a3033}
  50%{opacity:1;color:#fff4ce;text-shadow:0 2px 1px #000,0 0 9px #ffb94ecc,0 0 23px #ff762a88}
}
@media(hover:hover) and (pointer:fine){
  .promotion-banner:hover{border-color:#ffdfa0;box-shadow:inset 0 0 0 3px #170d10,inset 0 0 0 4px #c48e476b,0 0 18px #a951283d}
}
@media(max-width:540px){
  .promotion-banner{min-height:120px}
  .promotion-copy{padding-right:9px;gap:7px}
  .promotion-kicker{font-size:8px;letter-spacing:1.3px}
}
@media(prefers-reduced-motion:reduce){
  .promotion-title{animation:none;opacity:1;color:#fff0bb}
  .promotion-banner{transition:none}
}

/* Commands occupy the sidebar after removal of the account banner. */
.right-column{grid-template-columns:minmax(0,1fr)}
.right-column>.sidebar-panel{margin-top:0}
.right-column .image-heading{max-width:240px}
@media(min-width:801px){
  .right-column>.sidebar-panel+.sidebar-panel{margin-top:17px}
}

/* Cohesive metal headers with a different emblem for each sidebar section. */
.sidebar-heading{
  position:relative;container-type:inline-size;display:flex;align-items:center;gap:3px;
  width:min(100%,240px);min-height:45px;margin:0 0 8px;padding:2px 6px 2px 2px;
  overflow:hidden;border:1px solid #9d743f;border-radius:3px;
  background:radial-gradient(ellipse at 0 50%,#75322370,transparent 65%),linear-gradient(180deg,#39251d,#170f12 52%,#291810);
  box-shadow:inset 0 1px 0 #f0cc7952,inset 0 0 0 3px #bd934414,0 2px 5px #0005;
}
.sidebar-heading::after{
  content:"";position:absolute;left:48px;right:8px;bottom:3px;height:1px;
  background:linear-gradient(90deg,#d6a65b99,transparent);pointer-events:none;
}
.sidebar-heading>img{display:block;flex:0 0 44px;width:44px;height:38px;object-fit:contain;filter:drop-shadow(0 1px 2px #0008)}
.sidebar-heading>span{
  flex:1;min-width:0;white-space:nowrap;color:#ffe0a2;text-align:center;
  font:700 clamp(13px,7.8cqw,18px)/1.2 Arial,Helvetica,sans-serif;
  letter-spacing:.1px;text-shadow:0 2px 2px #000,0 0 8px #e7ad4c1a;
}
.event-time-zone{margin:0 0 8px;text-align:center;font-size:12px;color:#b9a38a}
.event-time-list>div{flex-direction:column;align-items:flex-start;gap:3px}
.event-time-list dt{min-width:0;overflow-wrap:anywhere}
.event-time-list dd{flex:none;max-width:100%;white-space:normal;overflow-wrap:anywhere;font-variant-numeric:tabular-nums;text-align:left}
.event-countdown{display:block;font-size:23px;font-weight:700;letter-spacing:1px;line-height:1.4}
.event-next-round{display:block;font-size:12px}
.event-schedule{display:block;font-size:11px;color:#b9a38a;margin-top:2px}
.rank-table-wrap{overflow:hidden;border:1px solid var(--line);border-top-color:#85613c;border-radius:3px;background:#181215}
.rank-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13px;text-align:left}
.rank-table th,.rank-table td{padding:6px 5px;border-bottom:1px solid var(--line)}
.rank-table thead{background:linear-gradient(#38271c,#291d19);color:#e3bd7d}
.rank-table thead th{font-size:12px;font-weight:700}
.rank-table th:first-child{width:34px;text-align:center}
.rank-table th:last-child,.rank-table td:last-child{width:46px;text-align:right;font-variant-numeric:tabular-nums;color:#f2ca83}
.rank-table td:nth-child(2){overflow-wrap:anywhere;color:#d5c7b6}
.rank-table tbody tr:nth-child(odd){background:#241c1d}
.rank-table tbody tr:last-child>*{border-bottom:0}
.rank-number{display:inline-grid;place-items:center;width:22px;height:22px;color:#b9a38a;font-weight:700;font-size:12px}
.rank-top-1,.rank-top-2,.rank-top-3{border:1px solid #c49851;border-radius:4px;background:linear-gradient(#65451f,#302014);color:#ffe2a0;box-shadow:inset 0 1px #ffecb74d}
.rank-top-2{border-color:#8e9aa6;background:linear-gradient(#41434b,#24222b);color:#e4e8ed}
.rank-top-3{border-color:#9f6b46;background:linear-gradient(#553525,#2b1917);color:#e9bd98}
@media(max-width:540px){.rank-table{font-size:14px}.rank-table th,.rank-table td{padding-top:8px;padding-bottom:8px}}

/* Responsive MU layout: retain the artwork and make every panel readable. */
.site-wrapper { padding-bottom: 28px; }
.content-grid { padding-top: 14px; }
.left-column > .sidebar-panel:first-child { margin-top: 0; }
.news-entry h3,
.news-entry p,
.system-summary li { overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .center-column { grid-row: 1; width: 100%; }
  .right-column,
  .left-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    min-width: 0;
    grid-column: 1;
  }
  .right-column { grid-row: 2; }
  .left-column { grid-row: 3; }
  .left-column > .sidebar-panel,
  .right-column > .sidebar-panel {
    min-width: 0;
    margin: 0;
    padding: 12px;
    border: 1px solid #604530;
    border-radius: 7px;
    background: linear-gradient(145deg, #30201c66, #151013);
  }
  .right-column .sidebar-panel { grid-column: auto; }
  .right-column > .sidebar-panel + .sidebar-panel { margin-top: 0; }
  .event-time-panel { order: -1; }
  .sidebar-heading { width: 100%; }
  .sidebar-heading > span { font-size: 17px; }
  .stat-list > div { gap: 10px; padding: 9px 10px; }
  .stat-list dt,
  .stat-list dd { min-width: 0; overflow-wrap: anywhere; }
  .stat-list dd { text-align: right; }
  .command-list > div { gap: 12px; padding: 10px; }
  .command-list dd { text-align: right; overflow-wrap: anywhere; }
  .event-time-list > div { gap: 4px; padding: 12px; }
  .event-time-list dd { text-align: left; }
  .event-countdown { font-size: 26px; }
  .event-schedule { font-size: 12px; line-height: 1.7; }
}

@media (max-width: 700px) {
  html { scroll-padding-top: 12px; }
  .topbar { height: 66px; }
  .topbar-inner { padding: 0 16px; }
  .brand { width: 128px; height: 58px; }
  .hero { height: clamp(150px, 38vw, 220px); }
  .mu-background { --scene-height: 500px; }
  .site-wrapper { width: calc(100% - 24px); padding-bottom: 24px; }
  .server-status {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 6px;
    padding: 12px 8px;
    border-radius: 12px 12px 0 0;
    font-size: 12px;
  }
  .server-status > div { min-width: 0; gap: 5px; justify-content: center; }
  .server-status > div:first-child { width: auto; grid-column: 1 / -1; }
  .server-status strong { flex-shrink: 0; padding: 3px 7px; font-size: 13px; }
  .server-status strong.online { font-size: 13px; }
  .server-status .status-icon { width: 16px; height: 16px; flex-basis: 16px; }
  .page-shell { padding: 8px; border-radius: 9px; }
  .main-nav { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; padding: 5px; }
  .main-nav .nav-item {
    grid-column: span 3;
    min-height: 60px;
    padding: 9px 4px;
    gap: 4px;
    font-size: 14px;
    border-radius: 4px;
  }
  .main-nav .nav-item:nth-child(n + 5) { grid-column: span 2; font-size: 13px; }
  .main-nav .nav-item small { font-size: 12px; letter-spacing: .15px; }
  .content-grid { gap: 18px; padding-top: 16px; }
  .right-column,
  .left-column { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .mu-section-heading { min-height: 72px; gap: 8px; margin-bottom: 10px; }
  .mu-section-art { flex-basis: 62px; }
  .mu-section-copy { padding: 10px 10px 10px 0; }
  .mu-section-title { font-size: clamp(18px, 5.5vw, 23px); }
  .mu-section-subtitle { font-size: 13px; line-height: 1.5; }
  .page-shell .news-entry { flex-direction: column; gap: 9px; padding: 14px; }
  .page-shell .badge { flex: none; min-width: 64px; min-height: 24px; margin: 0; }
  .news-entry h3 { font-size: 16px; line-height: 1.55; }
  .news-entry p { font-size: 14px; line-height: 1.85; margin-top: 5px; }
  .promotion-banner { min-height: 130px; margin: 18px 0; border-radius: 6px; }
  .promotion-art { width: 45%; }
  .promotion-copy { width: 65%; padding: 16px 8px; gap: 8px; }
  .promotion-title { font-size: clamp(20px, 6.5cqw, 32px); letter-spacing: 0; }
  .promotion-kicker { font-size: 8px; letter-spacing: .8px; }
  .promotion-subtitle { gap: 8px; font-size: 12px; }
  .systems-section { margin-top: 20px; }
  .system-summary li { padding: 12px; font-size: 14px; line-height: 1.85; }
  .system-summary b { display: block; margin: 0 0 3px; }
  .sidebar-heading { min-height: 48px; margin-bottom: 10px; }
  .sidebar-heading > span { font-size: 18px; }
  .stat-list dt,
  .stat-list dd { font-size: 14px; }
  .command-list dt,
  .command-list dd { font-size: 14px; }
  .rank-table { font-size: 14px; }
  .rank-table th,
  .rank-table td { padding: 10px 8px; }
  .rank-table th:first-child { width: 40px; }
  .rank-table th:last-child,
  .rank-table td:last-child { width: 62px; }
  .service-dialog { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow: auto; }
  .service-dialog h2 { font-size: 23px; overflow-wrap: anywhere; }
  .rules-dialog ol { font-size: 14px; line-height: 1.8; }
}

@media (max-width: 360px) {
  .site-wrapper { width: calc(100% - 20px); }
  .page-shell { padding: 6px; }
  .server-status { padding-right: 5px; padding-left: 5px; font-size: 11px; }
  .server-status > div { gap: 4px; }
  .server-status strong { padding: 3px 5px; font-size: 12px; }
  .server-status .status-icon { width: 14px; height: 14px; flex-basis: 14px; }
  .main-nav { gap: 4px; padding: 4px; }
  .main-nav .nav-item { font-size: 13px; }
  .main-nav .nav-item:nth-child(n + 5) { font-size: 12px; }
  .page-shell .news-entry { padding: 12px; }
  .mu-section-art { flex-basis: 54px; }
  .mu-section-title { font-size: 18px; }
  .mu-section-subtitle { font-size: 12px; }
  .promotion-copy { width: 67%; padding-right: 6px; padding-left: 4px; }
  .promotion-title { font-size: 20px; }
  .promotion-kicker { font-size: 7px; letter-spacing: .6px; }
}


/* Freestanding logo over the hero artwork. */
.hero.hero-brand {
  height: 450px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 80px 24px 0;
}
.hero-brand .brand-heading { position: relative; z-index: 1; }
.hero-brand .brand {
  width: clamp(280px, 28vw, 380px);
  max-width: calc(100vw - 48px);
  height: auto;
}
.hero-brand .brand-logo {
  filter: drop-shadow(0 3px 2px #180701) drop-shadow(0 8px 14px #000e) drop-shadow(0 0 16px #ffbc494d);
}
.hero-brand .brand:focus-visible { outline-color: #ffe2a0; border-radius: 4px; }
@media (max-width: 800px) {
  .hero.hero-brand { height: 348px; padding-top: 55px; }
  .hero-brand .brand { width: 300px; }
}
@media (max-width: 700px) {
  .hero.hero-brand { height: clamp(220px, 56vw, 300px); padding: 26px 20px 0; }
  .hero-brand .brand { width: clamp(205px, 58vw, 280px); max-width: calc(100vw - 40px); }
}

/* Gold light, warm aura and drifting embers around the hero logo. */
.hero-brand .brand {
  isolation: isolate;
  animation: hero-logo-float 6s ease-in-out infinite;
}
.hero-brand .brand-logo {
  position: relative;
  z-index: 1;
  animation: hero-logo-radiance 4.8s ease-in-out infinite;
}
.hero-brand .brand::before {
  inset: -14% -8% -18%;
  width: auto;
  height: auto;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse, #ffbe4352 0%, #ff6b242c 40%, transparent 72%);
  filter: blur(12px);
  opacity: .6;
  animation: hero-logo-aura 4.8s ease-in-out infinite;
}
.hero-brand .brand::after {
  inset: 0;
  width: auto;
  height: auto;
  z-index: 2;
  background: linear-gradient(110deg, transparent 40%, #ffd96a55 46%, #fff8dc 50%, #ffdb7855 54%, transparent 60%) 120% 0 / 260% 100% no-repeat;
  -webkit-mask: url('../images/mu-swordman-logo.svg') center / contain no-repeat;
  mask: url('../images/mu-swordman-logo.svg') center / contain no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
  animation: hero-logo-shine 6s ease-in-out infinite;
}
.hero-logo-embers {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.hero-logo-embers > i {
  position: absolute;
  left: 12%;
  top: 80%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff4bf;
  box-shadow: 0 0 5px #ffd75a, 0 0 10px #ff792b;
  opacity: 0;
  animation: hero-logo-ember 3.8s linear infinite;
}
.hero-logo-embers > i:nth-child(2) { left: 28%; top: 88%; animation-delay: -1.2s; animation-duration: 4.4s; }
.hero-logo-embers > i:nth-child(3) { left: 48%; top: 68%; animation-delay: -2.4s; }
.hero-logo-embers > i:nth-child(4) { left: 67%; top: 82%; animation-delay: -.7s; animation-duration: 4.7s; }
.hero-logo-embers > i:nth-child(5) { left: 84%; top: 90%; animation-delay: -3.1s; }
.hero-logo-embers > i:nth-child(6) { left: 94%; top: 70%; animation-delay: -1.8s; animation-duration: 4.2s; }
.hero-logo-embers::before,
.hero-logo-embers::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  left: 9%;
  top: 11%;
  background: radial-gradient(ellipse 50% 6%, #fff 10%, #ffe8a4 35%, transparent 100%), radial-gradient(ellipse 6% 50%, #fff 10%, #ffe8a4 35%, transparent 100%);
  opacity: 0;
  animation: logo-glint 5.5s ease-in-out infinite;
}
.hero-logo-embers::after { left: 76%; top: 76%; animation-delay: -2.75s; }
@keyframes hero-logo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes hero-logo-radiance {
  0%, 100% { filter: drop-shadow(0 3px 2px #180701) drop-shadow(0 8px 14px #000e) drop-shadow(0 0 10px #ffb52f55); }
  50% { filter: drop-shadow(0 3px 2px #180701) drop-shadow(0 8px 14px #000e) drop-shadow(0 0 19px #ffd36c99); }
}
@keyframes hero-logo-aura {
  0%, 100% { opacity: .45; transform: scale(.94); }
  50% { opacity: .8; transform: scale(1.04); }
}
@keyframes hero-logo-shine {
  0%, 8% { background-position: 120% 0; opacity: 0; }
  16% { opacity: .8; }
  42% { background-position: -20% 0; opacity: .8; }
  48%, 100% { background-position: -20% 0; opacity: 0; }
}
@keyframes hero-logo-ember {
  0% { transform: translate(0, 12px) scale(.5); opacity: 0; }
  18% { opacity: .85; }
  75% { opacity: .65; }
  100% { transform: translate(12px, -66px) scale(.25); opacity: 0; }
}
@media (max-width: 700px) {
  .hero-brand .brand::before { filter: blur(8px); }
  .hero-logo-embers > i { width: 2px; height: 2px; }
  .hero-logo-embers > i:nth-child(n + 5) { display: none; }
  .hero-logo-embers::before,
  .hero-logo-embers::after { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-brand .brand::before { opacity: .4; }
  .hero-brand .brand::after,
  .hero-logo-embers { display: none; }
}

/* Let the remaining event panel fill the compact sidebar grid. */
.right-column > .sidebar-panel:only-child { grid-column: 1 / -1; }

/* Server rules share the site's obsidian, ember and gold palette. */
.rules-dialog {
  width: min(620px, calc(100% - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 32px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: #805d37 #170f12;
  border: 1px solid #a57b43;
  border-radius: 10px;
  color: #e8dccb;
  background: radial-gradient(ellipse at 50% 0, #802c224d, transparent 58%), linear-gradient(145deg, #28191b, #140f12 60%, #211315);
  box-shadow: inset 0 1px 0 #ffe1a36b, inset 0 0 0 4px #bd934412, 0 0 0 3px #1b100dc9, 0 28px 100px #000d;
}
.rules-dialog::backdrop { background: #080507d9; backdrop-filter: blur(7px); }
.rules-dialog .dialog-close {
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #72513580;
  border-radius: 5px;
  color: #ccb58f;
  background: #150d10b3;
}
.rules-dialog .dialog-close svg { width: 20px; height: 20px; }
.rules-heading { margin-bottom: 24px; padding: 0 24px; }
.rules-emblem {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 4px;
  border: 1px solid #a77b41;
  border-radius: 12px;
  color: #f3d293;
  background: radial-gradient(ellipse at top, #a969343b, transparent 75%), #241417;
  box-shadow: inset 0 1px 0 #ffe2a447, 0 0 22px #e0a33f16;
}
.rules-emblem svg { width: 32px; height: 32px; }
.rules-dialog .eyebrow { margin-top: 12px; color: #d0a66b; font-size: 11px; letter-spacing: 2.5px; }
.rules-dialog h2 { margin: 8px 0 0; color: #ffe0a5; font-size: 27px; line-height: 1.5; text-shadow: 0 2px 3px #0009; }
.rules-dialog ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: server-rule;
  text-align: left;
}
.rules-dialog li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 13px;
  margin: 0;
  padding: 14px;
  border: 1px solid #6448318c;
  border-radius: 5px;
  background: linear-gradient(110deg, #35232080, #160f1280);
  counter-increment: server-rule;
}
.rules-dialog li::before {
  content: counter(server-rule, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid #96703e;
  border-radius: 4px;
  color: #f4d497;
  background: linear-gradient(#51351f, #261911);
  box-shadow: inset 0 1px #ffe5af29;
  font: 700 13px/1 Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}
.rules-dialog li > span { min-width: 0; align-self: center; color: #e1d3c1; font-size: 15px; line-height: 1.8; overflow-wrap: anywhere; }
.rules-actions { margin-top: 24px; padding-top: 20px; border-top: 1px solid #79533266; }
.rules-dialog .rules-acknowledge {
  max-width: 480px;
  margin: 0 auto;
}
.rules-dialog .dialog-close:focus-visible,
.rules-dialog .rules-acknowledge:focus-visible { outline: 2px solid #ffe3a5; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .rules-dialog .dialog-close:hover { color: #fff0d4; border-color: #bf9356; background: #38201f; }
}
@media (max-width: 540px) {
  .rules-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); padding: 22px 16px 18px; }
  .rules-dialog .dialog-close { top: 8px; right: 8px; }
  .rules-heading { margin-bottom: 18px; padding: 0 22px; }
  .rules-emblem { width: 48px; height: 48px; border-radius: 10px; }
  .rules-emblem svg { width: 28px; height: 28px; }
  .rules-dialog h2 { font-size: 22px; }
  .rules-dialog li { padding: 12px 10px; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
  .rules-dialog li::before { width: 30px; height: 30px; }
  .rules-dialog li > span { font-size: 14px; }
  .rules-actions { margin-top: 18px; padding-top: 16px; }
}