/* HELLWARD · main menu, step 6: cinematic title screen.
   Components (all scoped to #authScreen):  .hw-stage (depth layers)  ·  .hw-shell (open column, no card)
   .hw-btn (menu item)  ·  .hw-panel (page)  ·  .saved-profile (journey card)  ·  .hw-action / .hw-back (buttons)
   Rules of the house: motion is transform / opacity / translate / scale only; nothing animates a filter, blend mode
   or blurred shadow; state comes from menu-cinematic.js (#authScreen[data-menu-fx=full|static|off]).
   Logic is untouched: menu.js, menu-fit.js and game.js drive every button exactly as before. */

#authScreen{
  --hw-brass:var(--ui-brass);--hw-brass-hi:var(--ui-brass-hi);--hw-brass-lo:var(--ui-brass-lo);--hw-ember:var(--ui-ember);--hw-ember-hot:var(--ui-ember-hot);
  --hw-blood:var(--ui-blood);--hw-cream:var(--ui-cream);--hw-muted:#a8957a;--hw-ink:#060304;
  --hw-ease:cubic-bezier(.2,.8,.2,1);--hw-px:0;--hw-py:0;
  background:var(--hw-ink)!important;background-image:none!important}
#authScreen::before,#authScreen::after{content:none!important;display:none!important}

/* ===== Stage: depth layers behind the interface ===== */
.hw-stage{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;contain:layout paint style}
.hw-stage>*{position:absolute;pointer-events:none}
.hw-bg{inset:-4%;background:url('assets/ui/menu-eclipse.webp?v=1') 50% 50%/cover no-repeat;
  translate:calc(var(--hw-px) * -16px) calc(var(--hw-py) * -9px);transition:translate .9s var(--hw-ease)}
.hw-flash{inset:0;opacity:0;background:radial-gradient(ellipse 60% 55% at 38% 34%,rgb(255 120 70 / .55),rgb(255 70 40 / .18) 45%,transparent 72%)}
.hw-fog{left:-25%;width:150%;opacity:.5;background:
  radial-gradient(ellipse 18% 50% at 14% 55%,rgb(120 28 24 / .55),transparent 70%),
  radial-gradient(ellipse 22% 60% at 42% 45%,rgb(70 18 18 / .6),transparent 72%),
  radial-gradient(ellipse 16% 50% at 70% 58%,rgb(130 40 28 / .5),transparent 70%),
  radial-gradient(ellipse 20% 55% at 92% 48%,rgb(80 20 20 / .55),transparent 72%)}
.hw-fog-a{bottom:-6%;height:46%}
.hw-fog-b{bottom:-14%;height:36%;opacity:.38}
.hw-embers{inset:0;translate:calc(var(--hw-px) * -34px) calc(var(--hw-py) * -18px);transition:translate .7s var(--hw-ease)}
.hw-ember{position:absolute;bottom:-3%;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;opacity:0;
  background:radial-gradient(circle,var(--hw-ember-hot) 0 28%,var(--hw-ember) 52%,transparent 74%)}
/* Reading scrim: darkens the interface side without drawing a visible card; vignette closes the frame. */
.hw-scrim{inset:0;background:
  linear-gradient(90deg,transparent 28%,rgb(5 3 4 / .5) 52%,rgb(5 3 4 / .86) 78%,rgb(5 3 4 / .94)),
  radial-gradient(ellipse 120% 100% at 36% 52%,transparent 52%,rgb(0 0 0 / .72) 100%)}
.hw-bar{left:0;right:0;height:5.2vh;background:linear-gradient(#000 0 72%,transparent)}
.hw-bar-t{top:0}
.hw-bar-b{bottom:0;transform:scaleY(-1);transform-origin:50% 50%}

/* ===== Column: logo, rule, items ===== */
#authScreen.hw-menu{justify-content:flex-end;padding:12px 6.5%}
#authScreen .hw-shell{position:relative;z-index:3;width:min(34rem,100%);padding:.5rem 0!important;text-align:left;border:0;background:none!important;box-shadow:none!important;animation:none!important;transform-origin:right center}
#authScreen .hw-shell::before,#authScreen .hw-shell::after{content:none!important;display:none!important}
#authScreen .hw-title-art{position:relative;isolation:isolate;width:min(100%,32rem);aspect-ratio:2/1;margin:0 auto -.4rem;pointer-events:none;translate:calc(var(--hw-px) * 7px) calc(var(--hw-py) * 4px);transition:translate .8s var(--hw-ease)}
#authScreen .hw-title-art .hw-logo{width:100%;height:auto;filter:none!important}
#authScreen .dd-menu-glow{position:absolute;inset:-22% -14%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 56%,rgb(224 102 42 / .3),rgb(142 31 34 / .12) 46%,transparent 70%)}

#authScreen #menuHome{position:relative;display:grid;justify-items:stretch;gap:.1rem;margin:1.2rem 0 0 1.4rem;padding:.4rem 0 .4rem 0}
/* Brass rule with a lit diamond: the spine of the menu. */
#authScreen #menuHome::before,#authScreen #menuPanel::before{content:'';position:absolute;left:-1.4rem;top:.2rem;bottom:.2rem;width:1px;transform-origin:50% 0;
  background:linear-gradient(transparent,var(--hw-brass) 14%,var(--hw-brass-hi) 50%,var(--hw-brass) 86%,transparent)}

/* ----- Component: menu item ----- */
#authScreen #menuHome .hw-btn{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:.9rem;width:100%;min-height:3.35rem;margin:0;padding:.45rem 1rem .45rem 2.35rem;
  border:0!important;border-radius:0;background:none!important;box-shadow:none!important;clip-path:none;outline:none;cursor:pointer;
  font-size:1.18rem;font-weight:500;letter-spacing:.2em;text-align:left;white-space:nowrap;color:#b6a287;text-shadow:0 2px 0 #000;
  transition:color .2s ease,transform .3s var(--hw-ease)!important}
#authScreen #menuHome .hw-btn::before{content:'';display:block;position:absolute;left:.7rem;top:50%;width:.52rem;height:.52rem;margin-top:-.26rem;
  border:1px solid var(--hw-brass);background:#0d0708;transform:rotate(45deg) scale(.85);opacity:1!important;transition:transform .3s var(--hw-ease),background-color .2s,border-color .2s!important}
#authScreen #menuHome .hw-btn::after{content:'';display:block;position:absolute;inset:.25rem 0;z-index:-1;pointer-events:none;opacity:0;transform:translateX(-.6rem);
  background:linear-gradient(var(--hw-brass-hi),var(--hw-brass-hi)) 0 100%/0 1px no-repeat,linear-gradient(90deg,rgb(142 31 34 / .5),rgb(142 31 34 / .12) 60%,transparent);
  transition:opacity .25s ease,transform .35s var(--hw-ease),background-size .45s var(--hw-ease)!important}
#authScreen #menuHome .hw-btn:is(:hover,:focus-visible){color:#fff0d2;transform:translateX(.45rem);text-shadow:0 2px 0 #000,0 0 1rem rgb(255 150 70 / .55)}
#authScreen #menuHome .hw-btn:is(:hover,:focus-visible)::before{transform:rotate(45deg) scale(1.15);border-color:var(--hw-brass-hi);background:radial-gradient(circle,var(--hw-ember-hot),var(--hw-ember) 60%,#b3401c)}
#authScreen #menuHome .hw-btn:is(:hover,:focus-visible)::after{opacity:1;transform:none;background-size:100% 1px,auto}
#authScreen #menuHome .hw-btn:focus-visible{outline:2px solid rgb(224 191 132 / .85);outline-offset:-2px}
#authScreen #menuHome .hw-btn:active{transform:translateX(.45rem) scale(.985)}
#authScreen #menuHome .hw-start{font-size:1.42rem;color:#e9cf9a}
#authScreen #menuHome .hw-start::before{border-color:var(--hw-brass-hi)}
/* Count of saved journeys (written by menu-cinematic.js) and the empty state of "Continuar". */
#authScreen #menuHome .hw-btn .hw-count{margin-left:auto;font-size:.8rem;letter-spacing:.08em;color:var(--hw-cream);padding:.15rem .5rem;border:1px solid var(--hw-brass-lo);background:rgb(0 0 0 / .35)}
#authScreen #menuHome .hw-btn[data-empty=true]{color:#7f705c}

/* ----- Footer: whisper, note, key hints ----- */
#authScreen .dd-menu-quote{margin:1.5rem 0 0 1.4rem;max-width:26rem;color:#9a876b;font-style:italic;line-height:1.45;text-align:left}
#authScreen .hw-note{margin:.5rem 0 0 1.4rem;color:#76675a;text-align:left}
#authScreen .dd-menu-keys{display:block;margin:.55rem 0 0 1.4rem;color:#76675a;font-size:.8rem;letter-spacing:.04em;text-align:left}
#authScreen .dd-menu-keys kbd{display:inline-block;min-width:1.2rem;margin:0 .1rem;padding:0 .25rem;border:1px solid #4a3622;background:#120c0d;color:#cdb38a;font-size:.72rem;line-height:1.2rem;text-align:center}
#authScreen #menuPanel:not([hidden])~.dd-menu-quote{display:none}

/* ===== Component: panel (a "page" that replaces the items) ===== */
#authScreen .hw-panel{position:relative;min-height:0;margin:1.2rem 0 0 1.4rem;padding:.2rem 0 .4rem 0!important;border:0!important;background:none!important;box-shadow:none!important;text-align:left;color:#d9cbb0}
#authScreen .hw-panel::after{content:none!important}
#authScreen .hw-panel h2{margin:0 0 .9rem;font-size:2.1rem;font-weight:500;letter-spacing:.06em;color:var(--hw-cream);text-shadow:0 2px 0 #000,0 0 1.2rem rgb(224 102 42 / .3)}
#authScreen .hw-panel h2::after{content:'';display:block;width:min(17rem,70%);height:9px;margin:.7rem 0 0;background:
  radial-gradient(circle at 0 50%,var(--hw-brass-hi) 0 3px,transparent 4px),linear-gradient(90deg,var(--hw-brass),transparent) 0 50%/100% 1px no-repeat}
#authScreen .hw-panel p{margin:.55rem 0;color:#cdbf9f}
#authScreen .hw-panel label{margin:1.1rem 0 .25rem;font-size:.78rem;letter-spacing:.2em;color:var(--hw-muted)}
#authScreen .hw-panel input[type=text],#authScreen .hw-panel input:not([type]){width:100%;padding:.7rem .2rem;border:0;border-bottom:1px solid var(--hw-brass-lo);background:linear-gradient(rgb(255 255 255 / .03),transparent);color:var(--hw-cream);font-size:1.25rem;outline:none;transition:border-color .25s,background-color .25s}
#authScreen .hw-panel input:is([type=text],:not([type])):focus{border-bottom-color:var(--hw-brass-hi);background:linear-gradient(rgb(224 150 70 / .1),transparent);box-shadow:none}

/* ----- Component: buttons inside panels ----- */
#authScreen .hw-panel :is(.hw-action,.hw-back,.hw-panel button){position:relative}
#authScreen .hw-action,#authScreen .hw-back,#authScreen .hw-panel .hellward-audio-controls button,#authScreen .hw-panel #menuTheme{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.75rem;margin:1rem .6rem .2rem 0;padding:.5rem 1.4rem;border:1px solid var(--hw-brass-lo);border-radius:0;
  background:linear-gradient(rgb(255 255 255 / .05),rgb(0 0 0 / .35)),#1a1010;color:#ecdcb8;font-size:.85rem;letter-spacing:.16em;cursor:pointer;outline:none;box-shadow:none;
  transition:border-color .2s,color .2s,transform .25s var(--hw-ease),background-color .2s}
#authScreen .hw-action{border-color:var(--hw-brass);color:#fff0d2;background:linear-gradient(rgb(255 190 110 / .16),rgb(142 31 34 / .35)),#1d0f0e}
#authScreen :is(.hw-action,.hw-back,.hw-panel .hellward-audio-controls button,.hw-panel #menuTheme):is(:hover,:focus-visible){border-color:var(--hw-brass-hi);color:#fff;transform:translateY(-1px);box-shadow:none}
#authScreen :is(.hw-action,.hw-back,.hw-panel .hellward-audio-controls button,.hw-panel #menuTheme):focus-visible{outline:2px solid rgb(224 191 132 / .85);outline-offset:2px}
#authScreen :is(.hw-action,.hw-back,.hw-panel .hellward-audio-controls button,.hw-panel #menuTheme):active{transform:translateY(1px) scale(.985)}
#authScreen .hw-back{border-color:transparent;background:none;color:var(--hw-muted);padding-left:.2rem}
#authScreen .hw-back:is(:hover,:focus-visible){border-color:transparent;color:var(--hw-brass-hi)}

/* ----- Component: journey card (profiles written by game.js) ----- */
#authScreen .hw-panel .profile-list{max-height:min(19rem,38vh);overflow:auto;margin:.8rem 0 0;padding-right:.3rem;scrollbar-width:thin;scrollbar-color:var(--hw-brass-lo) transparent}
#authScreen .hw-menu .saved-profile,#authScreen .saved-profile{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-height:3.4rem;margin:0 0 .45rem;padding:.55rem 1rem .55rem 1.1rem;border:1px solid var(--hw-brass-lo);border-left:2px solid var(--hw-brass);border-radius:0;
  background:linear-gradient(90deg,rgb(142 31 34 / .22),rgb(0 0 0 / .4));color:var(--hw-cream);cursor:pointer;outline:none;text-align:left;transition:transform .3s var(--hw-ease),border-color .2s,background-color .2s}
#authScreen .saved-profile strong{font-size:1.5rem;font-weight:500;letter-spacing:.03em;text-transform:none}
#authScreen .saved-profile small{font-size:.7rem;letter-spacing:.18em;color:var(--hw-muted);white-space:nowrap}
#authScreen .saved-profile:is(:hover,:focus-visible){transform:translateX(.35rem);border-left-color:var(--hw-brass-hi);background:linear-gradient(90deg,rgb(190 70 40 / .4),rgb(0 0 0 / .35))}
#authScreen .saved-profile:is(:hover,:focus-visible) small{color:var(--hw-brass-hi)}
#authScreen .saved-profile:focus-visible{outline:2px solid rgb(224 191 132 / .85);outline-offset:2px}

/* ----- Settings: audio group created by soundtrack.js ----- */
#authScreen .hw-panel .hellward-audio-controls{justify-content:flex-start;margin:.5rem 0}
#authScreen .hw-panel .hellward-audio-controls input[type=range]{width:min(11rem,48vw);accent-color:var(--hw-brass-hi)}
#authScreen .hw-panel .hellward-audio-controls output{color:var(--hw-cream)}
#authScreen .hw-panel .hellward-audio-controls [data-music-track]{flex-basis:100%;text-align:left;font-size:.85rem;color:var(--hw-muted)}
#authScreen .hw-panel #musicStatus{color:var(--hw-muted)}

/* ===== Entry sequence (replays each time the menu is shown: display none -> block restarts animations) ===== */
@keyframes hw-art-in{from{opacity:0;scale:1.1}}
@keyframes hw-fade-in{from{opacity:0}}
@keyframes hw-bar-in-t{from{transform:translateY(-100%)}}
@keyframes hw-bar-in-b{from{transform:scaleY(-1) translateY(-100%)}}
@keyframes hw-logo-in{from{opacity:0;transform:translateY(1.2rem) scale(.95)}}
@keyframes hw-rule-in{from{transform:scaleY(0)}}
@keyframes hw-item-in{from{opacity:0;transform:translateX(2.4rem)}}
@keyframes hw-page-in{from{opacity:0;transform:translateY(.9rem)}}
@keyframes hw-glow{0%,100%{opacity:.75}35%{opacity:1}60%{opacity:.82}82%{opacity:.95}}
@keyframes hw-breathe{from{scale:1}to{scale:1.045}}
@keyframes hw-drift-a{from{transform:translate3d(-8%,0,0)}to{transform:translate3d(8%,0,0)}}
@keyframes hw-drift-b{from{transform:translate3d(7%,0,0)}to{transform:translate3d(-7%,0,0)}}
@keyframes hw-rise{0%{opacity:0;transform:translate3d(0,0,0)}12%{opacity:.95}70%{opacity:.7}100%{opacity:0;transform:translate3d(var(--dx),-108vh,0)}}
@keyframes hw-lightning{0%{opacity:0}6%{opacity:.9}14%{opacity:.25}24%{opacity:.7}100%{opacity:0}}
@keyframes hw-ember-pulse{0%,100%{opacity:.8}50%{opacity:1}}

#authScreen:not([hidden]) .hw-bg{animation:hw-art-in 1.6s ease-out backwards}
#authScreen:not([hidden]) .hw-scrim{animation:hw-fade-in 1.4s ease-out backwards}
#authScreen:not([hidden]) .hw-bar-t{animation:hw-bar-in-t 1.1s var(--hw-ease) backwards}
#authScreen:not([hidden]) .hw-bar-b{animation:hw-bar-in-b 1.1s var(--hw-ease) backwards}
#authScreen:not([hidden]) .hw-title-art{animation:hw-logo-in 1.2s var(--hw-ease) .35s backwards}
#authScreen:not([hidden]) #menuHome::before{animation:hw-rule-in 1s var(--hw-ease) .7s backwards}
#authScreen:not([hidden]) #menuHome .hw-btn{animation:hw-item-in .8s var(--hw-ease) calc(.85s + var(--i,0) * .075s) backwards}
#authScreen:not([hidden]) .dd-menu-quote,#authScreen:not([hidden]) .hw-note,#authScreen:not([hidden]) .dd-menu-keys{animation:hw-fade-in 1s ease-out 1.6s backwards}
#authScreen:not([hidden]) #menuPanel:not([hidden]){animation:hw-page-in .5s var(--hw-ease) backwards}
/* Review B2: the panel keeps its heading rule only; the column rule showed as a stray 1px fragment beside the panels */
#authScreen #menuPanel::before{display:none}
/* Ambient life (full mode only) */
#authScreen[data-menu-fx=full] .dd-menu-glow{animation:hw-glow 3.4s steps(14) infinite}
#authScreen[data-menu-fx=full] .hw-bg{animation:hw-art-in 1.6s ease-out backwards,hw-breathe 38s steps(76) 1.6s infinite alternate}
#authScreen[data-menu-fx=full] .hw-fog-a{animation:hw-drift-a 70s steps(140) infinite alternate}
#authScreen[data-menu-fx=full] .hw-fog-b{animation:hw-drift-b 95s steps(190) infinite alternate}
#authScreen[data-menu-fx=full] .hw-ember{animation:hw-rise var(--d) steps(90) var(--delay) infinite}
#authScreen[data-menu-fx=full][data-flash] .hw-flash{animation:hw-lightning .9s linear}
#authScreen[data-menu-fx=full] #menuHome .hw-start::before{animation:hw-ember-pulse 2.4s steps(10) infinite}
/* Static / off: layers that only make sense in motion are hidden, the rest is composed once. */
#authScreen:not([data-menu-fx=full]) :is(.hw-embers,.hw-fog,.hw-flash){display:none}
#authScreen[data-menu-fx=off] .hw-stage>:not(.hw-bg):not(.hw-scrim){display:none}

/* ===== Responsive ===== */
@media(max-width:900px){#authScreen .hw-bg{background-position:30% 50%}}
@media(max-width:700px){
  #authScreen.hw-menu{justify-content:center;padding:10px 14px}
  #authScreen .hw-scrim{background:linear-gradient(180deg,rgb(5 3 4 / .35),rgb(5 3 4 / .72) 38%,rgb(5 3 4 / .92)),radial-gradient(ellipse 130% 100% at 50% 40%,transparent 50%,rgb(0 0 0 / .7) 100%)}
  #authScreen .hw-shell{width:100%;transform-origin:center center}
  #authScreen #menuHome .hw-btn{font-size:1.05rem;min-height:3.1rem}
  #authScreen .hw-panel h2{font-size:1.8rem}
  #authScreen .dd-menu-keys{display:none}
  #authScreen .hw-bar{height:3.2vh}
}
@media(orientation:landscape) and (max-height:520px){
  #authScreen .hw-title-art{width:min(100%,19rem)}
  #authScreen #menuHome{margin-top:.5rem}#authScreen #menuHome .hw-btn{min-height:2.6rem;font-size:1rem}
  #authScreen .dd-menu-quote{display:none}
}
@media(prefers-reduced-motion:reduce){
  #authScreen *,#authScreen *::before,#authScreen *::after{animation:none!important;transition:none!important}
  #authScreen .hw-bg,#authScreen .hw-embers,#authScreen .hw-title-art{translate:none}
}
html.hw-lite #authScreen :is(.hw-embers,.hw-fog,.hw-flash){display:none}