/* css/shell.css */
/* Palco fixo (estilo "Amor Doce"): header + fundo fixos, só o centro muda */

:root{
  --shell-max-width: 1600px;
  --shell-radius: 26px;
  --shell-pad-x: 16px;
  --shell-pad-y: 12px;
  --header-gap: 8px;
}

.game-body{
  /* garante consistência entre páginas */
  min-height: 100vh;
}

.shell-container{
  max-width: var(--shell-max-width);
  height: 100vh;
  margin: 0 auto;
  padding: var(--shell-pad-y) var(--shell-pad-x) 20px;
  box-sizing: border-box;
}

.shell-stage{
  /* janela do fundo (palco) sólida */
  background:
    radial-gradient(1200px 700px at 20% 10%, var(--stage-2, #e7dbff), transparent 60%),
    radial-gradient(900px 600px at 85% 20%, rgba(181, 131, 242, .20), transparent 62%),
    linear-gradient(180deg, var(--stage-1, #ede6f6), var(--stage-2, #e7dbff));
  border-radius: var(--shell-radius);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04);
  position: relative;

  /* palco 16:9 */
  width: 100%;
  max-height: calc(100vh - 76px); /* header + spacing */
  aspect-ratio: 16 / 9;
  margin: 0 auto;
}

/* quando o palco precisa ocupar a altura disponível (ex: VN) */
.shell-stage.fill-available{
  height: calc(100vh - 76px);
  max-height: none;
  aspect-ratio: auto;
}

/* Conteúdo interno: scroll dentro do palco (não na página) */
.shell-scroll{
  position: absolute;
  inset: 0;
  overflow: auto;
}

/* Header consistente com logo à esquerda */
.header-logo-img{
  height: 22px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35));
}

/* Tabs do guarda-roupas (ícones maiores) */
.wardrobe-tabs img,
.wardrobe-tab-icon{
  width: 22px !important;
  height: 22px !important;
}

/* Cards de itens menores e mais uniformes */
.wardrobe-grid .wardrobe-item,
.wardrobe-item{
  max-width: 240px;
}

.wardrobe-item img{
  max-height: 170px;
  object-fit: contain;
}


/* Compat: arquivos anteriores */
.mil-stage-frame{ 
  /* janela do fundo (compat) sólida */
  background:
    radial-gradient(1200px 700px at 20% 10%, var(--stage-2, #e7dbff), transparent 60%),
    radial-gradient(900px 600px at 85% 20%, rgba(181, 131, 242, .20), transparent 62%),
    linear-gradient(180deg, var(--stage-1, #ede6f6), var(--stage-2, #e7dbff));
  border-radius: var(--shell-radius);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04);
  position: relative;
  width: 100%;
  max-height: calc(100vh - 76px);
  aspect-ratio: 16 / 9;
  margin: 0 auto;
}
.mil-scroll{
  position: absolute;
  inset: 0;
  overflow: auto;
}

/* =======================
   MIL BUTTON SYSTEM (NO SHADOW) — mapa theme polish
   ======================= */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
a[role="button"],
[class^="btn"],
[class*=" btn"],
.btn-primary,
.btn-secondary,
.msg-tab,
.msg-action,
.shop-buy,
.shop-btn,
.wardrobe-save,
.wardrobe-btn,
.mil-btn{
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
a[role="button"],
[class^="btn"],
[class*=" btn"],
.btn-primary,
.btn-secondary,
.msg-tab,
.msg-action,
.shop-buy,
.shop-btn,
.wardrobe-save,
.wardrobe-btn,
.mil-btn{
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.38);
  background: linear-gradient(135deg, rgba(181,131,242,.55), rgba(227,174,254,.30));
  color: var(--text, #1b102d);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform .08s ease, filter .12s ease, background .12s ease, border-color .12s ease;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
a[role="button"]:hover,
[class^="btn"]:hover,
[class*=" btn"]:hover,
.btn-primary:hover,
.btn-secondary:hover,
.msg-tab:hover,
.msg-action:hover,
.shop-buy:hover,
.shop-btn:hover,
.wardrobe-save:hover,
.wardrobe-btn:hover,
.mil-btn:hover{
  filter: brightness(1.06);
  border-color: rgba(255,255,255,.55);
}

button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
a[role="button"]:active,
[class^="btn"]:active,
[class*=" btn"]:active,
.btn-primary:active,
.btn-secondary:active,
.msg-tab:active,
.msg-action:active,
.shop-buy:active,
.shop-btn:active,
.wardrobe-save:active,
.wardrobe-btn:active,
.mil-btn:active{
  transform: translateY(1px);
  filter: brightness(0.98);
}

button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible,
a[role="button"]:focus-visible,
[class^="btn"]:focus-visible,
[class*=" btn"]:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.msg-tab:focus-visible,
.msg-action:focus-visible,
.shop-buy:focus-visible,
.shop-btn:focus-visible,
.wardrobe-save:focus-visible,
.wardrobe-btn:focus-visible,
.mil-btn:focus-visible{
  outline: 2px solid rgba(181,131,242,.75);
  outline-offset: 3px;
}