/* HELL-MU | ETAP 10 | Przywrocenie oryginalnego tla ze screena.
   Bazuje na ETAP 9: wszystkie kafelki, przyciski i system CMS sa zachowane.
   Zmienia tylko globalne tlo i neutralizuje efekt glowicy nadwymiarowego
   tla z postaciami z etapu 9. Zegar SERVER TIME pozostaje w jednej linii. */

/* Dokladnie ten pejzaz lawy i gotyckich mostow, bez nowych postaci.
   Oryginalna grafika z ETAP 6/7/8, nie screenshot interfejsu. */
body {
  background-color: #090405 !important;
  background-image:
    linear-gradient(180deg,
      rgba(8,3,5,.03) 0,
      rgba(5,2,3,.03) 280px,
      rgba(5,2,3,.15) 820px,
      #090506 1680px),
    url('../images/hell-approved-volcanic-bg.webp') !important;
  background-position: center top, center top !important;
  background-size: 100% 100%, max(1983px,100vw) auto !important;
  background-repeat: no-repeat, no-repeat !important;
  background-attachment: scroll, scroll !important;
}
/* Wyglad gornego tla jak we wczesniejszym zatwierdzonym etapie 8. */
.masthead {
  background: radial-gradient(ellipse 58% 65% at 50% 46%,
    rgba(154,28,12,.26), rgba(92,14,10,.13) 58%,transparent 100%) !important;
  box-shadow: inset 0 -24px 34px -22px rgba(0,0,0,.78),
              inset 0 -2px 0 rgba(172,53,26,.22) !important;
}
.masthead::after {
  opacity: 1 !important;
  background-position: center bottom !important;
  background-size: 100% 100% !important;
  -webkit-mask-image: linear-gradient(to bottom,transparent 0%,#000 11%,#000 80%,transparent 100%) !important;
  mask-image: linear-gradient(to bottom,transparent 0%,#000 11%,#000 80%,transparent 100%) !important;
}
.masthead::before {
  width: min(700px,61vw) !important;
  height: 269px !important;
  top: 2px !important;
  filter: drop-shadow(0 0 22px #ff330a60) !important;
}
/* Wczesniejsza kompozycja podpisow po bokach logo. */
.header-sidecopy { top: 91px !important; left: 3.9% !important; }
.header-tagline { top: 107px !important; right: 4% !important; }
/* Zegar poziomy w pasku, bez zawijania i bez drugiej linijki. */
.server-clock .clock-inside {
  display: grid !important;
  grid-template-columns: max-content minmax(0,1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}
.server-clock .clock-caption, .server-clock time {
  white-space: nowrap !important;
}
.server-clock time {
  min-width: 0 !important;
  font-variant-numeric: tabular-nums !important;
}
.server-clock .clock-note { display:none !important; }
@media (min-width:1620px) {
  .masthead::before { width: 700px !important; }
}
@media (max-width:1599px) {
  .masthead::before { width:min(690px,64vw) !important; }
  .header-sidecopy { top:86px !important; left:2.5% !important; }
  .header-tagline { top:108px !important; right:2.3% !important; }
}
@media (max-width:980px) {
  .header-sidecopy,.header-tagline {display:none !important;}
}
@media (max-width:760px) {
  body { background-size:100% 100%, auto 850px !important; }
  .masthead::before { width:min(510px,100vw) !important; height:165px !important; top:2px !important; }
  .masthead::after { background-size:auto 100% !important; opacity:.55 !important; }
}
@media (max-width:440px) {
  .masthead::before { height:148px !important; }
}
@media (max-width:380px) {
  .server-clock .clock-inside { gap:4px !important; padding:6px 9px !important; }
  .server-clock .clock-caption {font-size:10px !important;}
  .server-clock time {font-size:11px !important;}
}