/* HELL-MU / ETAP 9 - restoring approved full composition.
   Loaded last, purely visual overrides; core DMN-CMS logic remains unchanged. */

/* Original background artwork has demon and elf at the far sides. The castle-
   only image in stages 6-8 hid both. Keep the dark center for page readability. */
body{
 background-color:#070304!important;
 background-image:linear-gradient(180deg,rgba(6,2,3,.08) 0%,rgba(6,2,3,.12) 500px,rgba(5,2,3,.22) 1100px,#080405 2100px),url('../images/hell-ultrawide-scene-3440.jpg')!important;
 background-position:center top,center top!important;
 background-size:100% 100%,max(2250px,100vw) auto!important;
 background-repeat:no-repeat!important;
}
/* The side artwork and central castles should read as one world, not a hard
   rectangular red strip above the menu. */
.masthead{background:transparent!important;box-shadow:none!important}
.masthead::after{
 z-index:-1!important;
 background-position:center 74%!important;
 background-size:100% 100%!important;
 opacity:.74!important;
 -webkit-mask-image:radial-gradient(ellipse 54% 82% at center, #000 15%,rgba(0,0,0,.84) 52%,transparent 100%)!important;
 mask-image:radial-gradient(ellipse 54% 82% at center, #000 15%,rgba(0,0,0,.84) 52%,transparent 100%)!important;
}
.masthead::before{width:min(730px,65vw)!important;height:278px!important;top:0!important;filter:drop-shadow(0 0 18px rgba(230,51,18,.45))!important}
.header-sidecopy{top:77px!important;left:2.5%!important;background:linear-gradient(90deg,rgba(9,3,5,.5),transparent)!important;border-left:2px solid #b3482d!important}
.header-tagline{top:113px!important;right:3%!important}
/* Recovered 4 gold-icon / fantasy-art shortcuts BELOW the hero. */
.quick-links{
 display:grid!important;
 grid-template-columns:repeat(4,minmax(0,1fr))!important;
 gap:11px!important;
 margin:12px 0 13px!important;
}
.quick-card{
 position:relative;isolation:isolate;display:flex!important;flex-direction:column;
 align-items:center;justify-content:center;gap:3px;
 min-width:0;min-height:126px;height:126px;padding:11px 7px 9px;
 background:#0b0808!important;color:#f2e2ca;text-decoration:none;
 border:1px solid #79523e;
}
.quick-art{
 z-index:-2;position:absolute;inset:3px;display:block;height:auto;
 background:linear-gradient(180deg,rgba(6,3,4,.62),rgba(6,3,4,.74) 64%,rgba(4,3,4,.93)),var(--art) center/cover no-repeat;
 opacity:.94;pointer-events:none;
}
.quick-icon{display:flex;justify-content:center;align-items:center;height:39px;color:#f4a85a;filter:drop-shadow(0 0 9px #fb4c1455)}
.quick-icon svg{height:36px;width:36px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.quick-title{font:bold 15px/1.15 Cinzel,Georgia,serif;color:#ffe5c0;white-space:nowrap}
.quick-desc{font:10px/1.25 Cinzel,Georgia,serif;letter-spacing:.7px;color:#c9ae97;white-space:nowrap}
.quick-card:hover{background:#2a0b09!important;box-shadow:inset 0 0 20px #aa26072b,0 0 15px #dc36182f;transform:translateY(-2px)}
.quick-card:focus-visible,.side-actions a:focus-visible{outline:2px solid #ffa773;outline-offset:3px}
/* Restore the right-column actions, immediately after SERVER STATUS. */
.side-actions{display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
.download-button{height:84px!important;display:flex!important;box-shadow:inset 0 0 0 4px #410706,0 0 14px #97090077!important}
.download-button span{font-size:22px!important}
.download-button small{letter-spacing:1.3px}
.side-button{min-height:51px!important;display:flex!important;gap:14px!important;padding:10px 15px!important;font-size:12px!important}
.side-button svg{flex-shrink:0;stroke:#e6a96d}
/* Only game-related sections were missing; ranking/news panels are preserved. */
.lower-grid{margin-top:0!important}
.sidebar{gap:10px!important}
.feature-area{margin-top:34px!important}
/* SERVER TIME: caption left, clock right, no wrap at any supported size. */
.server-clock .clock-inside{display:grid!important;grid-template-columns:max-content minmax(0,1fr)!important;gap:9px!important}
.server-clock .clock-caption{white-space:nowrap!important}
.server-clock time{white-space:nowrap!important;font-variant-numeric:tabular-nums!important}
.server-clock .clock-note{display:none!important}
@media(min-width:2200px){body{background-size:100% 100%,100vw auto!important}}
@media(max-width:1599px){
 .masthead::before{width:min(670px,63vw)!important}
 .quick-card{height:111px;min-height:111px;padding:9px 4px}
 .quick-title{font-size:13px}.quick-desc{font-size:9px}
 .quick-icon{height:34px}.quick-icon svg{width:31px;height:31px}
}
@media(max-width:1130px){
 .quick-links{gap:7px!important}
 .quick-card{height:102px;min-height:102px}
 .quick-title{font-size:12px}.quick-desc{font-size:8px;letter-spacing:0}
}
@media(max-width:980px){
 .masthead::after{opacity:.62!important}
}
@media(max-width:760px){
 body{background-size:100% 100%,auto 1030px!important}
 .masthead::before{width:min(510px,100vw)!important;height:165px!important;top:2px!important}
 .masthead::after{background-size:auto 100%!important;opacity:.6!important}
 .quick-links{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 .quick-card{height:108px;min-height:108px}
 .sidebar{display:flex!important;flex-direction:column!important}
 .sidebar>section{width:100%!important;align-self:stretch!important;grid-column:auto!important}
 .side-actions{grid-column:auto!important}
 .download-button{height:68px!important}
 .side-button{min-height:44px!important}
 .lower-grid{margin-top:0!important}
}
@media(max-width:380px){
 .quick-title{font-size:11px}
 .quick-desc{font-size:8px}
 .server-clock .clock-inside{column-gap:4px!important;padding:6px 9px!important}
 .server-clock .clock-caption{font-size:10px!important}
 .server-clock time{font-size:11px!important}
}
@media(prefers-reduced-motion:reduce){.quick-card{transition:none!important}}