/* Public pages share a compact header; the game keeps its own scene controls. */
.public-header {
  height: 84px;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px);
  z-index: 40;
}
.public-header.scrolled { height: 76px; }
.public-navigation-panel {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(24px, 4vw, 66px);
  min-width: 0;
}
.public-header .main-nav { display: flex; gap: clamp(18px, 2vw, 30px); }
.public-header .main-nav a { font-size: 13px; white-space: nowrap; }
.public-nav-group { position:relative; }
.public-nav-group summary { display:flex;align-items:center;gap:8px;color:#cbd4ca;font-size:13px;white-space:nowrap;cursor:pointer;list-style:none; }
.public-nav-group summary::-webkit-details-marker { display:none; }
.public-nav-chevron { width:14px;height:14px;flex:0 0 auto;stroke:var(--copper-light);stroke-width:1.65;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease,stroke .2s ease; }
.public-nav-group[open] .public-nav-chevron { transform:rotate(180deg); }
.public-nav-group summary:hover,.public-nav-group summary.active { color:var(--copper-light); }
.public-nav-submenu { position:absolute;top:calc(100% + 13px);right:-16px;z-index:2;display:grid;min-width:180px;padding:8px;border:1px solid var(--line);border-radius:4px;background:#0d201d;box-shadow:0 18px 30px #0007; }
.public-nav-submenu a { padding:10px 12px;font-size:12px!important;color:#cbd4ca; }
.public-nav-submenu a:hover,.public-nav-submenu a[aria-current="page"] { background:#1b332b;color:var(--copper-light); }
.public-nav-group.is-closing .public-nav-submenu { pointer-events:none;animation:public-nav-submenu-out .14s ease-in forwards; }
@keyframes public-nav-submenu-out { to { opacity:0;transform:translateY(-5px); } }
.public-header-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.public-header .header-account-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  /* Secondary to "Jogar": same shape and type, outlined instead of filled. */
  border: 1px solid rgba(239, 189, 123, .42);
  border-radius: 4px;
  color: #e7d2ac;
  font: 700 12px "Manrope", sans-serif;
  letter-spacing: .025em;
  white-space: nowrap;
}
.public-header .header-account-action:hover { border-color: var(--copper-light); background: #c4a56b16; color: #f5d99a; transform: none; }
.public-play-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 19px;
  border: 1px solid rgba(239, 189, 123, .42);
  border-radius: 4px;
  background: linear-gradient(110deg, #dfac68, #c58b48);
  color: #14211e;
  font: 700 12px "Manrope", sans-serif;
  letter-spacing: .025em;
  transition: background .2s, border-color .2s;
}
.public-play-link:hover { background: var(--copper-light); border-color: var(--copper-light); }
.public-play-link svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.public-menu-toggle { display: none; }
.public-header [hidden] { display: none !important; }
.public-header a:focus-visible,
.public-menu-toggle:focus-visible { outline: 2px solid var(--copper-light); outline-offset: 5px; }
.legal-page:has(.public-header) .legal-nav { top: 106px; }

@media (max-width: 1120px) {
  .public-header,
  .public-header.scrolled { height: auto; min-height: 76px; grid-template-columns: 1fr auto; gap: 0; }
  .public-header[data-menu-ready] { height: 76px; }
  .public-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 84px;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: transparent;
    color: var(--ink);
    font: 600 12px "Manrope", sans-serif;
    cursor: pointer;
  }
  .public-menu-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
  .public-menu-close-icon { display: none; }
  .public-menu-toggle[aria-expanded="true"] .public-menu-open-icon { display: none; }
  .public-menu-toggle[aria-expanded="true"] .public-menu-close-icon { display: block; }
  .public-navigation-panel {
    grid-column: 1 / -1;
    display: grid;
    gap: 20px;
    justify-content: stretch;
    width: 100%;
    padding: 18px 0 24px;
  }
  .public-header[data-menu-ready] .public-navigation-panel {
    position: absolute;
    top: 100%;
    left: 0;
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px clamp(18px, 5vw, 56px) 24px;
    border-block: 1px solid var(--line);
    background: #0b1b1b;
    box-shadow: 0 20px 35px rgba(0, 0, 0, .25);
  }
  .public-header .main-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 22px; }
  .public-header .main-nav a { padding: 13px 4px; font-size: 15px; }
  .public-header .main-nav a.active::after { right: auto; width: 24px; }
  .public-nav-group { grid-column:auto; }
  .public-nav-group summary { min-height:46px;padding:13px 4px;font-size:15px; }
  .public-nav-group[open] { grid-column:1 / -1; }
  .public-nav-submenu { position:static;min-width:0;margin:0 0 6px;padding:4px 0 4px 14px;border:0;border-left:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none; }
  .public-nav-submenu a { padding:11px 10px;font-size:14px!important; }
  .public-header-actions { padding-top: 18px; border-top: 1px solid var(--line); gap: 14px; }
  .public-header .public-play-link { min-height: 46px; padding-inline: 24px; }
  .public-header .header-account-action { min-height: 46px; }
}

@media (max-width: 680px) {
  .public-header { padding-inline: 18px; }
  .public-header .brand { gap: 9px; }
  .public-header .brand-mark { width: 32px; height: 32px; }
  .public-header .brand strong { font-size: 14px; letter-spacing: 0; }
  .public-header .brand small { display: block; margin-top: 2px; font-size: 8px; letter-spacing: .14em; }
  .legal-page:has(.public-header) .legal-nav { top: auto; }
}

@media (max-width: 360px) {
  .public-header .brand small { font-size: 7px; letter-spacing: .1em; }
}

@media (prefers-reduced-motion: reduce) {
  .public-header,
  .public-header a { transition: none; }
  .public-nav-group.is-closing .public-nav-submenu { animation:none; }
}

/* The guide dock reduces page width independently of viewport media queries. */
@media (min-width:1121px) {
  .public-header.is-compact,.public-header.is-compact.scrolled { height:76px;min-height:76px;grid-template-columns:1fr auto;gap:0; }
  .public-header.is-compact .public-menu-toggle { display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:84px;min-height:44px;padding:0 10px;border:1px solid var(--line);border-radius:4px;background:transparent;color:var(--ink);font:600 12px 'Manrope',sans-serif;cursor:pointer; }
  .public-header.is-compact .public-menu-toggle svg { width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5; }
  .public-header.is-compact .public-menu-close-icon { display:none; }
  .public-header.is-compact .public-menu-toggle[aria-expanded="true"] .public-menu-open-icon { display:none; }
  .public-header.is-compact .public-menu-toggle[aria-expanded="true"] .public-menu-close-icon { display:block; }
  .public-header.is-compact .public-navigation-panel { display:grid;grid-column:1 / -1;gap:20px;justify-content:stretch;position:absolute;top:100%;left:0;width:100%;max-height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain;padding:18px 24px 24px;border-block:1px solid var(--line);background:#0b1b1b;box-shadow:0 20px 35px #0004; }
  .public-header.is-compact .main-nav { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 22px; }
  .public-header.is-compact .main-nav a { padding:13px 4px;font-size:15px; }
  .public-header.is-compact .main-nav a.active::after { right:auto;width:24px; }
  .public-header.is-compact .public-nav-group { grid-column:auto; }
  .public-header.is-compact .public-nav-group summary { min-height:46px;padding:13px 4px;font-size:15px; }
  .public-header.is-compact .public-nav-group[open] { grid-column:1 / -1; }
  .public-header.is-compact .public-nav-submenu { position:static;min-width:0;margin:0 0 6px;padding:4px 0 4px 14px;border:0;border-left:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none; }
  .public-header.is-compact .public-nav-submenu a { padding:11px 10px;font-size:14px!important; }
  .public-header.is-compact .public-header-actions { padding-top:18px;border-top:1px solid var(--line);gap:14px; }
  .public-header.is-compact .public-play-link { min-height:46px;padding-inline:24px; }
  .public-header.is-compact .header-account-action { min-height:46px; }
}

/* Menu compacto em tela cheia: cada destino é uma linha larga, como o painel do Chat. */
html.public-menu-open, html.public-menu-open body { overflow: hidden; }
html.public-menu-open .public-header { z-index: 70; }
.public-header.is-compact[data-menu-ready] .public-navigation-panel {
  position: fixed;
  inset: 76px 0 0;
  box-sizing: border-box;
  width: auto;
  height: auto;
  max-height: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 8px clamp(18px, 5vw, 40px) max(20px, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-block: 1px solid var(--line);
  background: radial-gradient(120% 60% at 100% 0, #16352c 0, transparent 60%), #0a1918;
  box-shadow: none;
}
.public-header.is-compact .main-nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; max-width: 560px; margin-inline: auto; counter-reset: public-nav; }
.public-header.is-compact .main-nav > a,
.public-header.is-compact .public-nav-submenu a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 0 4px;
  border-bottom: 1px solid #c4a56b24;
  color: #e9e1cf;
  font: 500 clamp(21px, 5.6vw, 26px)/1.1 'Playfair Display', serif !important;
  letter-spacing: -.01em;
  white-space: normal;
}
.public-header.is-compact .main-nav > a::before,
.public-header.is-compact .public-nav-submenu a::before {
  counter-increment: public-nav;
  content: counter(public-nav, decimal-leading-zero);
  min-width: 22px;
  color: #c4a56b99;
  font: 700 10px 'Manrope', sans-serif;
  letter-spacing: .12em;
}
.public-header.is-compact .main-nav > a::after,
.public-header.is-compact .public-nav-submenu a::after {
  /* An arrow with a shaft reads as "go there"; the bare chevron means "expand" in the studio menu. */
  content: '';
  position: static;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-left: auto;
  border: 0;
  background: #c4a56b;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: none;
  opacity: .75;
  transition: transform .2s ease, opacity .2s ease;
}
.public-header.is-compact .main-nav > a:hover::after,
.public-header.is-compact .public-nav-submenu a:hover::after { opacity: 1; transform: translateX(4px); }
.public-header.is-compact .main-nav > a:active,
.public-header.is-compact .public-nav-submenu a:active { background: #c4a56b12; }
.public-header.is-compact .main-nav > a.active,
.public-header.is-compact .public-nav-submenu a[aria-current="page"] { color: var(--copper-light); background: none; }
.public-header.is-compact .main-nav > a.active::before,
.public-header.is-compact .public-nav-submenu a[aria-current="page"]::before { color: var(--copper-light); }
.public-header.is-compact .main-nav > a.active::after { width: 20px; right: auto; }
.public-header.is-compact .main-nav > a.active::after,
.public-header.is-compact .public-nav-submenu a[aria-current="page"]::after { background: var(--copper-light); opacity: 1; }
.public-header.is-compact .public-nav-group { grid-column: auto; }
.public-header.is-compact .public-nav-group summary {
  min-height: 0;
  padding: 22px 4px 6px;
  color: #c4a56b;
  font: 700 10px 'Manrope', sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  pointer-events: none;
}
.public-header.is-compact .public-nav-group .public-nav-chevron { display: none; }
.public-header.is-compact .public-nav-submenu { position: static; display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; border: 0; border-top: 1px solid #c4a56b24; border-radius: 0; background: none; box-shadow: none; animation: none; }
.public-header.is-compact .public-header-actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 12px;
  width: 100%;
  max-width: 560px;
  margin: auto auto 0;
  padding-top: 24px;
  border-top: 0;
}
.public-header.is-compact .public-header-actions a { box-sizing: border-box; width: 100%; min-height: 54px; font-size: 14px; }
.public-header.is-compact .public-menu-toggle[aria-expanded="true"] { border-color: var(--copper-light); color: var(--copper-light); }

@keyframes public-menu-in { from { opacity: 0; } }
@keyframes public-menu-row-in { from { opacity: 0; transform: translateY(10px); } }
.public-header.is-compact .public-navigation-panel:not([hidden]) { animation: public-menu-in .2s ease-out; }
.public-header.is-compact .public-navigation-panel:not([hidden]) :is(.main-nav > a, .public-nav-group, .public-header-actions) {
  animation: public-menu-row-in .34s cubic-bezier(.2, .8, .2, 1) backwards;
}
.public-header.is-compact .main-nav > a:nth-child(2) { animation-delay: .03s !important; }
.public-header.is-compact .main-nav > a:nth-child(3) { animation-delay: .06s !important; }
.public-header.is-compact .main-nav > a:nth-child(4) { animation-delay: .09s !important; }
.public-header.is-compact .public-nav-group { animation-delay: .12s !important; }
.public-header.is-compact .public-header-actions { animation-delay: .16s !important; }
@media (max-height: 640px) {
  .public-header.is-compact .main-nav > a,
  .public-header.is-compact .public-nav-submenu a { min-height: 52px; font-size: 20px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .public-header.is-compact .public-navigation-panel,
  .public-header.is-compact .public-navigation-panel * { animation: none !important; }
}

/* Preloader entre páginas: o selo da marca se desenha enquanto o destino carrega. */
.public-page-loader {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 22px;
  background: radial-gradient(90% 60% at 50% 40%, #16352c 0, transparent 70%), #0a1918;
  color: #e9e1cf;
  opacity: 0;
  transition: opacity .18s ease-out;
}
.public-page-loader[hidden] { display: none; }
/* Set before the loader is parsed, so the arriving page is covered from its very first frame. */
html.public-arriving .public-page-loader:not(.is-leaving) { display: grid; opacity: 1; }
html.public-arriving .public-page-loader { animation: public-page-loader-failsafe .45s 6s forwards; }
.public-page-loader.is-visible { opacity: 1; }
/* Revealing the new page is slower than covering the old one, so it reads as a dissolve. */
.public-page-loader.is-leaving { opacity: 0; transition: opacity .45s ease-in-out; pointer-events: none; }
/* Safety net: if the script never runs, the arriving loader still gets out of the way. */
.public-page-loader.is-arriving { animation: public-page-loader-failsafe .45s 6s forwards; }
@keyframes public-page-loader-failsafe { to { opacity: 0; visibility: hidden; } }
.public-page-loader svg { width: 64px; height: 64px; fill: none; stroke: var(--copper-light, #dfac68); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.public-page-loader-ring { stroke-dasharray: 130; animation: public-page-loader-draw 1.6s cubic-bezier(.6, 0, .4, 1) infinite; }
.public-page-loader p { display: grid; justify-items: center; gap: 8px; margin: 0; }
.public-page-loader small { color: #c4a56b; font: 700 10px 'Manrope', sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.public-page-loader strong { font: 500 26px/1.1 'Playfair Display', serif; }
@keyframes public-page-loader-draw {
  0% { stroke-dashoffset: 130; }
  55% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -130; }
}
@media (prefers-reduced-motion: reduce) {
  .public-page-loader, .public-page-loader.is-leaving { transition: none; }
  .public-page-loader-ring { animation: none; stroke-dasharray: none; }
}