/* ===== Tela do menu ===== */
.hw-menu[hidden], .hw-menu [hidden]{display:none!important}
.hw-menu{position:fixed;inset:0;z-index:1000;overflow:auto;display:flex;align-items:center;justify-content:flex-end;padding:24px 7%;background:#100e0d url('assets/ui/menu-eclipse.webp?v=1') center/cover no-repeat;color:#e8d6b4}

/* brasas subindo (só CSS) */
.hw-menu::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.6;
  background-image:radial-gradient(circle,#f3a24a 0 1.5px,transparent 2.6px),radial-gradient(circle,#e2792a 0 1px,transparent 2px),radial-gradient(circle,#ffd08a 0 1px,transparent 2px);
  background-size:340px 420px,230px 310px,470px 560px;
  background-position:0 0,60px 120px,200px 40px;
  animation:hw-embers 26s linear infinite}
@keyframes hw-embers{to{background-position:0 -420px,60px -190px,200px -520px}}
/* bordas escurecidas */
.hw-menu::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 35% 50%,transparent 30%,rgba(0,0,0,.78) 100%)}

/* ===== Coluna do menu ===== */
.hw-shell{position:relative;z-index:2;width:min(520px,100%);text-align:center;padding:30px 28px 24px;background:linear-gradient(90deg,transparent,rgba(9,7,6,.88) 18%,rgba(9,7,6,.88) 82%,transparent);animation:hw-in 1.6s ease-out both}
.hw-shell::before,.hw-shell::after{content:"";position:absolute;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,#b58a3c,transparent)}
.hw-shell::before{top:0}.hw-shell::after{bottom:0}
@keyframes hw-in{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:none}}
.hw-logo{display:block;width:min(100%,420px);height:auto;margin:auto;filter:drop-shadow(0 0 22px rgba(226,121,42,.25))}
.hw-subtitle{display:block;width:min(86%,340px);height:auto;margin:-10px auto 22px}
.hw-buttons{display:grid;justify-items:center;gap:2px}

/* ===== Itens do menu ===== */
.hw-btn{position:relative;display:block;width:min(100%,340px);min-height:50px;padding:0 20px;border:0;background:transparent;color:#9b8d76;font:500 19px 'Optimus Princeps',Georgia,serif;letter-spacing:.14em;cursor:pointer;outline:none;transition:color .25s,text-shadow .25s,transform .15s}
.hw-btn::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(190,140,60,.2) 30%,rgba(190,140,60,.2) 70%,transparent);opacity:0;transition:opacity .3s}
.hw-btn::after{content:"";position:absolute;left:8%;right:8%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#d5a65f,transparent);transform:scaleX(0);transition:transform .35s}
.hw-btn:focus{color:#f3e2bf;text-shadow:0 0 14px rgba(226,121,42,.7)}
.hw-btn:focus::before{opacity:1}
.hw-btn:focus::after{transform:scaleX(1)}
.hw-btn:active{transform:scale(.985)}
.hw-start{color:#c9b793}

/* ===== Painéis (perfil, carregar, configurações...) ===== */
.hw-panel{position:relative;min-height:220px;margin-top:6px;padding:26px 26px 14px;background:linear-gradient(180deg,rgba(26,21,17,.94),rgba(14,11,9,.94));border:1px solid #5a4528;box-shadow:inset 0 0 0 4px #0c0a08,inset 0 0 0 5px #3b2d18,0 10px 40px #000a;color:#d9cbb0;font:20px/1.5 'Cormorant Garamond',Georgia,serif}
.hw-panel::before,.hw-panel::after{content:"";position:absolute;width:14px;height:14px;border:1px solid #b58a3c}
.hw-panel::before{top:8px;left:8px;border-right:0;border-bottom:0}
.hw-panel::after{bottom:8px;right:8px;border-left:0;border-top:0}
.hw-panel h2{margin:0 0 14px;font:500 22px 'Optimus Princeps',Georgia,serif;letter-spacing:.12em;color:#ecd6a3}
.hw-panel h2::after{content:"";display:block;width:60%;height:1px;margin:12px auto 0;background:linear-gradient(90deg,transparent,#b58a3c,transparent)}
.hw-panel p{margin:10px 0;line-height:1.5}
.hw-panel label{display:block;margin:14px 0 6px;font:500 14px 'Optimus Princeps',Georgia,serif;letter-spacing:.1em;color:#b9a67f}
.hw-panel input{width:100%;padding:11px 12px;background:#0d0b09;color:#f4e5cd;border:1px solid #5a4528;border-bottom-color:#b58a3c;font:19px 'Cormorant Garamond',Georgia,serif;outline:none;transition:border-color .2s,box-shadow .2s}
.hw-panel input:focus{border-color:#e2792a;box-shadow:0 0 14px rgba(226,121,42,.3)}
.hw-action,.hw-back{margin:14px 4px 6px;padding:9px 20px;border:1px solid #8a6a2f;background:linear-gradient(#2a1d13,#1a120c);color:#ecd9b2;font:500 15px 'Optimus Princeps',Georgia,serif;letter-spacing:.08em;cursor:pointer;outline:none;transition:border-color .2s,box-shadow .2s,color .2s}
.hw-action:hover,.hw-action:focus,.hw-back:hover,.hw-back:focus{border-color:#e2792a;color:#fff;box-shadow:0 0 14px rgba(226,121,42,.35)}
.hw-back{border-color:#4a3a22;color:#a89878}
.hw-note{display:block;margin-top:16px;color:#8f8068;font-style:italic;font-family:'Cormorant Garamond',Georgia,serif;font-size:16px}
.hw-panel .profile-list{max-height:180px;overflow:auto}
.hw-menu .saved-profile{width:100%;color:#f1dbb5}
.hw-menu .saved-profile:hover{background:rgba(181,138,60,.14)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== Celular ===== */
@media(max-width:700px){
  .hw-menu{justify-content:center;padding:12px;background-position:35% center}
  .hw-menu::after{background:radial-gradient(ellipse at center,transparent 25%,rgba(0,0,0,.7) 100%)}
  .hw-shell{padding:20px 16px 18px;background:rgba(9,7,6,.9)}
  .hw-logo{width:min(80%,320px)}
  .hw-btn{min-height:46px;font-size:17px}
  .hw-subtitle{margin:0 auto 12px}
}
@media(prefers-reduced-motion:reduce){
  .hw-menu::before,.hw-shell{animation:none}
  .hw-btn,.hw-btn::before,.hw-btn::after{transition:none}
}


/* Moldura ilustrada original, com interior reparado e dois estados. */
.hw-menu .hw-shell{background:transparent}
.hw-menu .hw-shell::before,.hw-menu .hw-shell::after{display:none}
.hw-menu .hw-btn,.hw-menu .hw-start{
  background:transparent url('assets/menu/botoes/botao-cinza.png') center/100% 100% no-repeat;
  border:0;box-shadow:none;outline:0;clip-path:none;
  min-height:60px;padding:10px 40px;color:#f5dfb7;letter-spacing:.06em;
  text-transform:uppercase;text-shadow:0 1px 2px #050100,0 0 5px #de54273d;
  filter:none;transition:none;
}
.hw-menu .hw-btn::before,.hw-menu .hw-btn::after{display:none}
.hw-menu .hw-btn:hover,.hw-menu .hw-btn:focus-visible{
  background-image:url('assets/menu/botoes/botao-vermelho.png');
  color:#fff0d6;outline:0;box-shadow:none;filter:none;
}
@media(max-width:700px){.hw-menu .hw-btn{min-height:54px;font-size:15px;padding:8px 30px}}

/* Metal escuro com detalhes de cobre/brasa; dourado e vermelho na seleção. */
.hw-menu .hw-btn,.hw-menu .hw-start,.hw-menu .hw-btn:hover,.hw-menu .hw-btn:focus-visible {
  position:relative;isolation:isolate;background:none;filter:none;
}
.hw-menu .hw-btn::before,.hw-menu .hw-btn::after {
  content:"";display:block;position:absolute;inset:0;z-index:-1;pointer-events:none;
  width:auto;height:auto;border:0;transform:none;clip-path:none;
  background:transparent url('assets/menu/botoes/botao-cinza.png') center/100% 100% no-repeat;
}
.hw-menu .hw-btn::before{opacity:1}
.hw-menu .hw-btn::after {
  background-image:url('assets/menu/botoes/botao-vermelho.png');
  opacity:.42;transition:none;
}
.hw-menu .hw-btn:hover::after,.hw-menu .hw-btn:focus-visible::after{opacity:1}
@media(prefers-reduced-motion:reduce){.hw-menu .hw-btn::after{transition:none}}


/* Menu à direita, voltado para a abertura do novo cenário. */
.hw-menu{background-position:center center}
.hw-menu .hw-logo{display:block;width:min(100%,460px);height:auto;opacity:1}
.hw-menu::before{inset:-60px 0;animation:hw-embers-composite 22s linear infinite;will-change:transform}
@keyframes hw-embers-composite{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-60px,0)}}
@keyframes hw-in{from{opacity:0;transform:translate3d(0,6px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@media(max-width:700px){.hw-menu{background-position:65% center}.hw-menu .hw-logo{width:min(100%,380px)}}
@media(prefers-reduced-motion:reduce){.hw-menu::before,.hw-menu .hw-shell{animation:none}}

/* A vinheta escurece o cenário atrás dos controles, preservando sua leitura. */
.hw-menu::after{z-index:1;background:linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.10)),radial-gradient(ellipse at 35% 50%,transparent 30%,rgba(0,0,0,.78) 100%)}
/* A escala é calculada apenas quando o tamanho ou conteúdo muda. */
.hw-menu{height:100vh;height:100dvh;overflow:hidden;padding:12px 7%;box-sizing:border-box}
.hw-menu .hw-shell{flex:none;box-sizing:border-box;padding:12px 24px;transform:scale(var(--hw-fit,1));transform-origin:right center;animation:hw-menu-fade 1s ease-out both}
.hw-menu .hw-note{margin-top:10px}
@keyframes hw-menu-fade{from{opacity:0}to{opacity:1}}
html.hw-menu-open,html.hw-menu-open body{overflow:hidden}
@media(max-width:700px){.hw-menu{padding:10px 12px}.hw-menu .hw-shell{padding:10px 16px;transform-origin:center center}}
@media(prefers-reduced-motion:reduce){.hw-menu .hw-shell{animation:none}}


/* Iluminação quente estática, preservando a arte e o sombreado geral. */
.hw-menu .hw-title-art{position:relative;isolation:isolate;width:min(100%,460px);aspect-ratio:2/1;margin:0 auto;pointer-events:none}
.hw-menu .hw-title-art .hw-logo{width:100%;height:auto;filter:brightness(1.85) saturate(1.12) drop-shadow(0 0 9px rgba(229,85,22,.32))}

@media(max-width:700px){.hw-menu .hw-title-art{width:min(100%,380px)}}