/* Main menu, centred composition (Skyrim-like): title and plain text options in the middle of the screen, the
   selected option framed by a thin rectangle. Colours follow the HELLWARD logo (bone-rose letters, blood-red light).
   No camera motion: the scene never follows the mouse. Only light: embers, a red halo and a slow sheen on the title.
   Loaded after menu-cinematic.css; every menu id, button and event is unchanged (menu.js / game.js). */
#authScreen{
  --sk-text:#d8c2b6;--sk-text-dim:#9d8478;--sk-hi:#fff0e8;--sk-red:#b3262e;--sk-red-hi:#ff4a4a;--sk-frame:rgb(214 72 72 / .85);
  --hw-px:0!important;--hw-py:0!important;--sk-eclipse-x:50.7%;--sk-eclipse-y:5.2%}
/* static scene: no parallax translate anywhere */
#authScreen .hw-bg,#authScreen .hw-embers,#authScreen .hw-title-art{translate:none!important;transition:none!important}
#authScreen .hw-bg{inset:0;background-position:50% 40%}
/* reading vignette around the centred column instead of the right-side scrim */
#authScreen .hw-scrim{background:
  radial-gradient(ellipse 34% 58% at 50% 55%,rgb(5 2 3 / .62),rgb(5 2 3 / .3) 60%,transparent 100%),
  radial-gradient(ellipse 120% 100% at 50% 50%,transparent 55%,rgb(0 0 0 / .78) 100%)}

/* ===== Layout ===== */
#authScreen.hw-menu{justify-content:center;align-items:center;padding:12px 4%}
#authScreen .hw-shell{width:min(40rem,100%);text-align:center;transform-origin:center center}
#authScreen .hw-title-art{width:min(100%,40rem);aspect-ratio:auto;margin:0 auto .9rem}
#authScreen #menuHome{justify-items:center;gap:.15rem;margin:.8rem auto 0;padding:0}
#authScreen #menuHome::before,#authScreen #menuPanel::before{display:none!important}

/* ===== Option: plain centred text; the selected one gets a thin frame ===== */
#authScreen #menuHome .hw-btn{justify-content:center;width:auto;min-width:16rem;min-height:3rem;padding:.4rem 2.2rem;
  font-size:1.12rem;font-weight:500;letter-spacing:.16em;text-align:center;color:var(--sk-text);text-shadow:0 2px 0 #000,0 0 .6rem rgb(0 0 0 / .8);
  transform:none!important;transition:color .2s ease!important}
#authScreen #menuHome .hw-btn::before{display:none!important}
#authScreen #menuHome .hw-btn::after{inset:0;z-index:-1;opacity:0;transform:none;border:1px solid var(--sk-frame);
  background:linear-gradient(90deg,transparent,rgb(150 20 30 / .22) 30%,rgb(150 20 30 / .22) 70%,transparent);
  box-shadow:inset 0 0 1.1rem rgb(200 30 40 / .28),0 0 .9rem rgb(200 30 40 / .22);transition:opacity .2s ease!important}
/* small notch on the frame's right corner, like the reference */
#authScreen #menuHome .hw-btn:is(:hover,:focus-visible)::after{opacity:1}
#authScreen #menuHome .hw-btn:is(:hover,:focus-visible){color:var(--sk-hi);text-shadow:0 2px 0 #000,0 0 .9rem rgb(255 60 60 / .65)}
#authScreen #menuHome .hw-btn:focus-visible{outline:none}
#authScreen #menuHome .hw-btn:active{transform:scale(.985)!important}
#authScreen #menuHome .hw-start{font-size:1.24rem;color:#f0dbcf}
#authScreen #menuHome .hw-btn[data-empty=true]{color:var(--sk-text-dim)}
#authScreen #menuHome .hw-btn .hw-count{position:absolute;right:.6rem;margin:0;border-color:rgb(179 38 46 / .6);color:var(--sk-text)}

/* footer and panels centred */
#authScreen :is(.dd-menu-quote,.hw-note){margin-left:auto;margin-right:auto;text-align:center}
#authScreen .dd-menu-quote{max-width:30rem;color:#a58a7e}
#authScreen .dd-menu-keys{margin-left:auto;margin-right:auto;text-align:center}
#authScreen #menuPanel{text-align:center;margin:0 auto}
#authScreen #menuPanel :is(h2,p,label){text-align:center}

/* ===== Light ===== */
/* red halo behind the title (the existing glow, warmer and centred) */
#authScreen .dd-menu-glow{inset:-30% -12%;background:radial-gradient(ellipse 50% 46% at 50% 56%,rgb(255 70 60 / .42),rgb(170 20 30 / .2) 50%,transparent 76%)}
/* slow sheen across the letters, clipped to the logo's own shape */
#authScreen .hw-title-art::after{content:'';position:absolute;inset:0;pointer-events:none;
  -webkit-mask:var(--sk-logo,url('assets/ui/menu-logo.webp?v=1')) center/contain no-repeat;mask:var(--sk-logo,url('assets/ui/menu-logo.webp?v=1')) center/contain no-repeat;
  background:linear-gradient(105deg,transparent 42%,rgb(255 150 130 / .32) 50%,transparent 58%) 0 0/300% 100% no-repeat;opacity:0}
#authScreen[data-menu-fx=full] .hw-title-art::after{opacity:1;animation:sk-sheen 9s cubic-bezier(.45,0,.2,1) 1.8s infinite}
@keyframes sk-sheen{0%{background-position:100% 0}45%,100%{background-position:0 0}}
/* rare lightning flash is replaced by a slow eclipse/fire pulse at the top of the scene */
#authScreen .hw-flash{display:none!important}
#authScreen .hw-eclipse{position:absolute;left:var(--sk-eclipse-x,50%);top:var(--sk-eclipse-y,8%);width:30vmin;aspect-ratio:1;translate:-50% -50%;pointer-events:none;
  background:radial-gradient(circle,rgb(255 60 50 / .32),rgb(180 20 30 / .14) 40%,transparent 70%);opacity:.8}
#authScreen[data-menu-fx=full] .hw-eclipse{animation:sk-pulse 5s ease-in-out infinite alternate;will-change:opacity}
@keyframes sk-pulse{from{opacity:.55}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#authScreen .hw-title-art::after,#authScreen .hw-eclipse{animation:none!important}}
html.hw-lite #authScreen :is(.hw-title-art::after,.hw-eclipse){animation:none!important}

/* small screens: keep everything centred and compact */
@media(max-width:760px),(max-height:600px){
  #authScreen #menuHome .hw-btn{min-width:13rem;min-height:2.6rem;font-size:1rem;padding:.3rem 1.6rem}
  #authScreen .hw-title-art{width:min(100%,26rem)}
}

/* ===== Performance (software rendering friendly) =====
   No rising embers, fog drift or background breathing: only static light plus the slow stepped eclipse pulse.
   Options appear at once when returning from a panel (no staggered entrance delay). */
#authScreen :is(.hw-embers,.hw-fog,.hw-ember){display:none!important}
#authScreen .hw-bg{animation:none!important}
#authScreen .dd-menu-glow{animation:none!important;opacity:1}
#authScreen .hw-title-art::after{display:none!important}
#authScreen #menuHome .hw-btn,#authScreen #menuHome::before{animation:none!important}
#authScreen #menuPanel:not([hidden]){animation-duration:.18s!important}
#authScreen #menuHome .hw-start::before{animation:none!important}
#authScreen.hw-menu::before{display:none!important;animation:none!important}
/* Hover cost: the options live on their own layer (the painted scene below is never repainted on hover); the frame
   only fades its opacity on that layer and the label colour switches without animating its glow. */
#authScreen .hw-shell{will-change:transform}
#authScreen #menuHome .hw-btn{transition:none!important}
#authScreen #menuHome .hw-btn::after{box-shadow:inset 0 0 1.1rem rgb(200 30 40 / .28);will-change:opacity;transition:opacity .12s linear!important}
/* No continuous animation at all: without a GPU an infinite pulse forces the whole screen to be recomposited every
   frame. The eclipse glow stays as static light (menu idle = zero frames). */
#authScreen .hw-eclipse{animation:none!important;will-change:auto;opacity:.85}