/* Desktop collapse / expand for the green menu (release-menu-toggle-20261016).
   html.wg-nav-collapsed is set before first paint by the page head and kept by
   assets/nav-collapse.js (localStorage 'windgame-nav-collapsed').
   Main pages (#sidebar.mp-sidebar): desktop from 781px. Game pages (#wg-shell-sidebar): from 1181px.
   Below those widths the menu stays the drawer behind the burger and the button is hidden. */
:root { --wg-nav-full: clamp(252px, 19vw, 300px); --wg-nav-rail: 86px; --wg-nav-ease: cubic-bezier(.2, .7, .2, 1); }

.wg-nav-collapse { display: none; }

/* ---------- The round edge button ---------- */
@media (min-width: 781px) { .wg-nav-collapse--mp { display: grid; } }
@media (min-width: 1181px) { .wg-nav-collapse--shell { display: grid; } }
html body .wg-nav-collapse {
  position: fixed;
  z-index: 1002;
  top: 50%;
  /* Sits in the notch of the menu's curved right edge (sidebar-mask.svg: x = 81–83% at mid-height). */
  left: calc(7px + var(--wg-nav-w) * .82 - 13px);
  width: 34px;
  height: 34px;
  margin: -17px 0 0;
  padding: 0;
  place-items: center;
  border: 1px solid #a89561;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 22%, #6b7a4a, transparent 55%), linear-gradient(150deg, #2c4632, #10241c 78%);
  color: #f3dc9a;
  box-shadow: 0 4px 10px #000a, inset 0 1px #fff4c255, 0 0 0 3px #0c1a1499;
  cursor: pointer;
  font: inherit;
  transform: none;
  transition: left .28s var(--wg-nav-ease), background-color .2s, box-shadow .2s, color .2s;
}
html body .wg-nav-collapse svg { display: block; transition: transform .28s var(--wg-nav-ease); }
html.wg-nav-collapsed body .wg-nav-collapse svg { transform: rotate(180deg); }
@media (hover: hover) {
  html body .wg-nav-collapse:hover { color: #fff3c9; box-shadow: 0 5px 14px #000b, inset 0 1px #fff4c277, 0 0 0 3px #0c1a1499, 0 0 14px #e9c97955; transform: none; }
}
html body .wg-nav-collapse:focus-visible { outline: 2px solid #d3ff84; outline-offset: 3px; }
html[data-theme='light'] body .wg-nav-collapse {
  border-color: #b49a5c;
  background: radial-gradient(circle at 32% 22%, #fffbe8, transparent 58%), linear-gradient(150deg, #eef5e6, #d3e4d3 80%);
  color: #6b5420;
  box-shadow: 0 4px 10px #3e584a40, inset 0 1px #fff, 0 0 0 3px #f3f6f0cc;
}
html[data-theme='light'] body .wg-nav-collapse:focus-visible { outline-color: #3b722b; }

/* Accessible but invisible text on the rail (names stay for screen readers). */
/* ---------- Main pages (multipage.css menu) ---------- */
@media (min-width: 781px) {
  :root { --wg-nav-w: var(--wg-nav-full); }
  html.wg-nav-collapsed { --wg-nav-w: var(--wg-nav-rail); }
  html body .mp-sidebar { width: var(--wg-nav-w); transition: width .28s var(--wg-nav-ease), padding .28s var(--wg-nav-ease); }
  html body .mp-wrap { margin-left: var(--wg-nav-w); transition: margin-left .28s var(--wg-nav-ease); }

  html.wg-nav-collapsed body .mp-sidebar { padding: 18px 16px 16px 9px; overflow-x: hidden; }
  html.wg-nav-collapsed body .mp-brand { justify-content: center; padding: 0 0 8px; }
  html.wg-nav-collapsed body .mp-brand-wordmark,
  html.wg-nav-collapsed body .mp-side-nav a > span:not(.mp-nav-glyph) {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  html.wg-nav-collapsed body .mp-sidebar-label { visibility: hidden; height: 6px; padding: 0; overflow: hidden; }
  html.wg-nav-collapsed body .mp-side-nav a { justify-content: center; gap: 0; padding: 4px 0; }
  html.wg-nav-collapsed body .mp-side-nav a:hover { transform: none; }
  html.wg-nav-collapsed body .mp-nav-group.rd-dock { display: flex; flex-direction: column; gap: 3px; padding-top: 8px; }
  html.wg-nav-collapsed body .rd-dock a { min-height: 46px; padding: 4px 0; }
  html.wg-nav-collapsed body .mp-sidebar-note { display: none; }
}

/* ---------- Game pages (game-shell.css menu) ---------- */
@media (min-width: 1181px) {
  :root { --wg-nav-w: var(--wg-nav-full); }
  html.wg-nav-collapsed { --wg-rail-w: var(--wg-nav-rail); --wg-nav-w: var(--wg-nav-rail); }
  html body.wg-shell-ready { transition: padding-left .28s var(--wg-nav-ease); }
  html body .wg-shell-sidebar { transition: width .28s var(--wg-nav-ease), padding .28s var(--wg-nav-ease); }

  html.wg-nav-collapsed body .wg-shell-sidebar { padding: 18px 16px 16px 9px; overflow-x: hidden; }
  html.wg-nav-collapsed body .wg-shell-brand { justify-content: center; padding: 0 0 8px; }
  html.wg-nav-collapsed body .wg-shell-brand-wordmark,
  html.wg-nav-collapsed body .wg-shell-nav a > span:not(.wg-shell-nav-glyph) {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  html.wg-nav-collapsed body .wg-shell-label { visibility: hidden; height: 6px; padding: 0; overflow: hidden; }
  html.wg-nav-collapsed body .wg-shell-nav a { justify-content: center; gap: 0; padding: 4px 0; }
  html.wg-nav-collapsed body .wg-shell-nav a:hover { transform: none; }
  html.wg-nav-collapsed body .wg-shell-nav-group.wg-shell-dock { display: flex; flex-direction: column; gap: 3px; padding-top: 8px; }
  html.wg-nav-collapsed body .wg-shell-dock a { min-height: 46px; padding: 4px 0; }
  /* Theme and language stay one click away: expand the menu. */
  html.wg-nav-collapsed body .wg-shell-footer { display: none; }
}

/* ---------- Game pages whose header sits in a wrapper (.shell > header, main > header) ----------
   arena-game-shell.js marks the header it uses with .wg-shell-header; game-shell.css only
   knows body > header, so the burger room on tablets and phones is given here. */
@media (max-width: 1180px) {
  body.wg-shell-ready .wg-shell-header { position: relative; padding-left: max(76px, calc(env(safe-area-inset-left) + 76px)); }
}
/* Narrow phones: the burger takes 76px, so a full header may wrap onto a second line instead of
   pushing the page sideways. */
@media (max-width: 600px) {
  body.wg-shell-ready .wg-shell-header { flex-wrap: wrap; row-gap: 8px; min-width: 0; max-width: 100%; box-sizing: border-box; }
}
/* Phones: games with their own fixed action row (trainings, Chicken) keep it above the quick bar. */
@media (max-width: 780px) {
  body.wg-shell-ready .button-row, body.wg-shell-ready.wg-premium .button-row { bottom: var(--wg-bar-h, 0px); }
  body.wg-shell-ready.wg-premium-coin .coin-choice { bottom: calc(77px + env(safe-area-inset-bottom) + var(--wg-bar-h, 0px)); }
}
/* Race: its older built-in sidebar and burger give way to the shared menu. */
body.wg-shell-ready > aside#side-menu, body.wg-shell-ready #menu-toggle.mobile-menu { display: none !important; }
body.wg-shell-ready > aside#side-menu ~ main { margin-left: 0; }

@media (prefers-reduced-motion: reduce) {
  html body .wg-nav-collapse, html body .wg-nav-collapse svg,
  html body .mp-sidebar, html body .mp-wrap,
  html body.wg-shell-ready, html body .wg-shell-sidebar { transition: none !important; }
}
