/* Navigation v5 (TZ3 §7, release-tz-nav-20261016): bigger, brighter tile icons, larger labels,
   stronger contrast, one hover/selected system for the site menu (.mp-*), the game-page menu
   (.wg-shell-*) and both phone quick bars. Visual only; loaded after nav-collapse.css.
   Owner art slots (html.art-nav-*) keep priority; owner-only entries (Номера, Админ панель) get tiles too. */
:root { --nv-ico: 40px; --nv-ease: cubic-bezier(.2, .7, .2, 1); --nv-gold: #f2d27a; --nv-text: var(--wg-text-tint); --nv-muted: var(--wg-text-tint); }

/* ---------- Icons (one set for menus and bars) ---------- */
.mp-nav-games .mp-nav-glyph::after, .wg-shell-nav-games .wg-shell-nav-glyph::after, .rd-bb-games .rd-bb-icon, .wg-shell-bar-games .wg-shell-bar-icon { background-image: url('/assets/nav-icons-v5/games.svg'); }
.mp-nav-lobby .mp-nav-glyph::after, .wg-shell-nav-lobby .wg-shell-nav-glyph::after { background-image: url('/assets/nav-icons-v5/lobby.svg'); }
.mp-nav-rounds .mp-nav-glyph::after, .wg-shell-nav-rounds .wg-shell-nav-glyph::after { background-image: url('/assets/nav-icons-v5/rounds.svg'); }
.mp-nav-challenges .mp-nav-glyph::after, .wg-shell-nav-challenges .wg-shell-nav-glyph::after { background-image: url('/assets/nav-icons-v5/challenges.svg'); }
.mp-nav-rankings .mp-nav-glyph::after, .wg-shell-nav-rankings .wg-shell-nav-glyph::after { background-image: url('/assets/nav-icons-v5/rankings.svg'); }
.mp-nav-tournaments .mp-nav-glyph::after, .wg-shell-nav-tournaments .wg-shell-nav-glyph::after, .rd-bb-tournaments .rd-bb-icon, .wg-shell-bar-tournaments .wg-shell-bar-icon { background-image: url('/assets/nav-icons-v5/tournaments.svg'); }
.mp-nav-referrals .mp-nav-glyph::after, .wg-shell-nav-referrals .wg-shell-nav-glyph::after { background-image: url('/assets/nav-icons-v5/referrals.svg'); }
.mp-nav-share .mp-nav-glyph::after, .wg-shell-nav-share .wg-shell-nav-glyph::after { background-image: url('/assets/nav-icons-v5/share.svg'); }
.mp-nav-community .mp-nav-glyph::after, .wg-shell-nav-community .wg-shell-nav-glyph::after { background-image: url('/assets/nav-icons-v5/community.svg'); }
.mp-nav-profile .mp-nav-glyph::after, .wg-shell-nav-profile .wg-shell-nav-glyph::after, .rd-bb-profile .rd-bb-icon, .wg-shell-bar-profile .wg-shell-bar-icon { background-image: url('/assets/nav-icons-v5/profile.svg'); }
.mp-nav-support .mp-nav-glyph::after, .wg-shell-nav-support .wg-shell-nav-glyph::after, .rd-bb-support .rd-bb-icon, .wg-shell-bar-support .wg-shell-bar-icon { background-image: url('/assets/nav-icons-v5/support.svg'); }
.mp-nav-rules .mp-nav-glyph::after, .wg-shell-nav-rules .wg-shell-nav-glyph::after, .rd-bb-rules .rd-bb-icon, .wg-shell-bar-rules .wg-shell-bar-icon { background-image: url('/assets/nav-icons-v5/rules.svg'); }
html body .mp-side-nav .mp-nav-plates .mp-nav-glyph::after { background-image: url('/assets/nav-icons-v5/plates.svg') !important; }
/* «Номера» carries an «Только владелец» mark: put it under the label so the row fits the menu. */
html body .mp-side-nav a.mp-nav-plates { display: grid; grid-template-columns: var(--nv-ico) minmax(0, 1fr); column-gap: 13px; row-gap: 3px; align-items: center; }
html body .mp-side-nav a.mp-nav-plates .mp-nav-glyph { grid-row: 1 / span 2; }
html body .mp-side-nav a.mp-nav-plates .wg-owner-mark { grid-column: 2; justify-self: start; margin: 0; font-size: 8.5px; letter-spacing: .04em; }
html body .mp-side-nav, html body .mp-side-nav a { min-width: 0; }
html body .mp-nav-admin .mp-nav-glyph::after { content: ''; background-image: url('/assets/nav-icons-v5/admin.svg'); }
html body .mp-nav-admin .mp-nav-glyph .mp-icon { display: none; }

/* The tile is the icon now: no second frame around it. */
html body .mp-side-nav .mp-nav-glyph, html body .wg-shell-nav .wg-shell-nav-glyph {
  width: var(--nv-ico); height: var(--nv-ico); flex: none; border: 0; border-radius: 13px; background: none;
  box-shadow: 0 4px 10px #0007; transition: transform .22s var(--nv-ease), box-shadow .22s var(--nv-ease);
}
html body .mp-side-nav .mp-nav-glyph::before, html body .wg-shell-nav .wg-shell-nav-glyph::before { display: none; }
html body .mp-side-nav .mp-nav-glyph::after, html body .wg-shell-nav .wg-shell-nav-glyph::after {
  width: var(--nv-ico); height: var(--nv-ico); background-position: center; background-size: contain; background-repeat: no-repeat; filter: none; transition: transform .22s var(--nv-ease);
}

/* ---------- Items: larger text, clearer contrast, one hover and one selected state ---------- */
html body .mp-side-nav a, html body .wg-shell-nav a {
  position: relative; min-height: 52px; gap: 13px; padding: 5px 10px 5px 6px; border: 1px solid transparent; border-radius: 14px;
  color: var(--nv-text); font-size: 15px; font-weight: 700; letter-spacing: .005em; line-height: 1.2;
  transition: background-color .22s var(--nv-ease), border-color .22s var(--nv-ease), color .22s, transform .22s var(--nv-ease), box-shadow .22s var(--nv-ease);
}
@media (hover: hover) {
  html body .mp-side-nav a:hover, html body .wg-shell-nav a:hover { background: #ffffff12; border-color: #ffffff1f; color: #fff; transform: translateX(2px); }
  html body .mp-side-nav a:hover .mp-nav-glyph, html body .wg-shell-nav a:hover .wg-shell-nav-glyph { transform: translateY(-1px) scale(1.06); box-shadow: 0 6px 14px #0008; }
  html body .mp-side-nav a:hover .mp-nav-glyph::after, html body .wg-shell-nav a:hover .wg-shell-nav-glyph::after { transform: none; }
}
html body .mp-side-nav a:active, html body .wg-shell-nav a:active { transform: scale(.985); }
html body .mp-side-nav a:focus-visible, html body .wg-shell-nav a:focus-visible { outline: 2px solid #d3ff84; outline-offset: 2px; }

/* Selected section: gold edge, lit background, glowing tile. */
html body .mp-side-nav a.active, html body .mp-side-nav a[aria-current="page"], html body .wg-shell-nav a.active {
  background: linear-gradient(100deg, #f2d27a33, #f2d27a14 55%, #ffffff08); border-color: #f2d27a8c; color: #fff8df; font-weight: 800;
  box-shadow: inset 4px 0 var(--nv-gold), 0 0 18px #f2d27a26;
}
html body .mp-side-nav a.active .mp-nav-glyph, html body .mp-side-nav a[aria-current="page"] .mp-nav-glyph, html body .wg-shell-nav a.active .wg-shell-nav-glyph {
  box-shadow: 0 0 0 2px var(--nv-gold), 0 0 16px #f2d27a80, 0 4px 10px #0007;
}

/* Section label above the list. */
html body .mp-sidebar-label, html body .wg-shell-label { color: #e2c581; font-size: 10px; letter-spacing: .2em; }

/* Bottom dock (Профиль / Поддержка / Правила): same tiles, readable labels. */
html body .rd-dock a, html body .wg-shell-dock a { min-height: 84px; gap: 6px; padding: 8px 2px; min-width: 0; font-size: 11.5px; font-weight: 700; color: var(--nv-text); background: #ffffff0d; border-color: #ffffff1c; border-radius: 16px; }
html body .rd-dock a .mp-nav-glyph, html body .wg-shell-dock a .wg-shell-nav-glyph, html body .rd-dock a .mp-nav-glyph::after, html body .wg-shell-dock a .wg-shell-nav-glyph::after { width: 36px; height: 36px; }
@media (hover: hover) { html body .rd-dock a:hover, html body .wg-shell-dock a:hover { transform: translateY(-2px); background: #ffffff17; } }

/* Short screens: keep all items without scrolling. */
@media (min-width: 781px) and (max-height: 860px) {
  :root { --nv-ico: 36px; }
  html body .mp-side-nav a, html body .wg-shell-nav a { min-height: 44px; }
  html body .rd-dock a, html body .wg-shell-dock a { min-height: 70px; }
}

/* ---------- Collapsed rail (nav-collapse.css): centred tiles, owner marks hidden ---------- */
html.wg-nav-collapsed body .mp-side-nav a, html.wg-nav-collapsed body .wg-shell-nav a { padding: 5px 0; transform: none; }
html.wg-nav-collapsed body .mp-side-nav a.active, html.wg-nav-collapsed body .wg-shell-nav a.active { box-shadow: inset 3px 0 var(--nv-gold), 0 0 14px #f2d27a26; }
html.wg-nav-collapsed body .rd-dock a, html.wg-nav-collapsed body .wg-shell-dock a { min-height: 48px; }
@media (min-width: 781px) {
  html.wg-nav-collapsed body .mp-side-nav .wg-owner-mark { display: none; }
  html.wg-nav-collapsed body .mp-side-nav a.mp-nav-plates { display: flex; }
}

/* ---------- Phones: drawer items and quick bar ---------- */
@media (max-width: 780px) {
  html body .mp-side-nav a, html body .wg-shell-nav a { min-height: 50px; font-size: 15.5px; }
  html body .rd-bottom-bar a, html body .wg-shell-bar a { font-size: 11px; font-weight: 700; color: var(--nv-muted); transition: color .2s, background-color .2s; }
  html body .rd-bottom-bar a .rd-bb-icon, html body .wg-shell-bar a .wg-shell-bar-icon { width: 30px; height: 30px; border-radius: 9px; box-shadow: 0 3px 8px #0007; background-size: contain; transition: transform .2s var(--nv-ease), box-shadow .2s; }
  html body .rd-bottom-bar a[aria-current="page"], html body .wg-shell-bar a[aria-current="page"] { color: #fff3c9; }
  html body .rd-bottom-bar a[aria-current="page"] .rd-bb-icon, html body .wg-shell-bar a[aria-current="page"] .wg-shell-bar-icon { box-shadow: 0 0 0 2px var(--nv-gold), 0 0 12px #f2d27a80; transform: translateY(-1px); }
}

/* ---------- Light theme ---------- */
html[data-theme='light'] body .mp-side-nav a, html[data-theme='light'] body .wg-shell-nav a { color: #1d3424; }
html[data-theme='light'] body .rd-dock a, html[data-theme='light'] body .wg-shell-dock a { color: var(--wg-s3); background: #ffffff8c; border-color: var(--wg-accent-hi); }
@media (hover: hover) {
  html[data-theme='light'] body .mp-side-nav a:hover, html[data-theme='light'] body .wg-shell-nav a:hover { background: #ffffffa6; border-color: #b9ccb5; color: #0f2416; }
}
html[data-theme='light'] body .mp-side-nav a.active, html[data-theme='light'] body .mp-side-nav a[aria-current="page"], html[data-theme='light'] body .wg-shell-nav a.active {
  background: linear-gradient(100deg, #f6e3a8, #f3ecd0 60%, #ffffff99); border-color: #c9a64e; color: #3a2a06; box-shadow: inset 4px 0 #c9971f, 0 4px 12px #a07a1a22;
}
html[data-theme='light'] body .mp-side-nav a.active .mp-nav-glyph, html[data-theme='light'] body .wg-shell-nav a.active .wg-shell-nav-glyph { box-shadow: 0 0 0 2px #c9971f, 0 0 12px #c9971f55, 0 3px 8px #0003; }
html[data-theme='light'] body .mp-sidebar-label, html[data-theme='light'] body .wg-shell-label { color: #7a5c14; }
html[data-theme='light'] body .mp-side-nav .mp-nav-glyph, html[data-theme='light'] body .wg-shell-nav .wg-shell-nav-glyph { box-shadow: 0 3px 8px #2f4a3a40; }

@media (prefers-reduced-motion: reduce) {
  html body .mp-side-nav a, html body .wg-shell-nav a, html body .mp-side-nav .mp-nav-glyph, html body .wg-shell-nav .wg-shell-nav-glyph,
  html body .rd-bottom-bar a .rd-bb-icon, html body .wg-shell-bar a .wg-shell-bar-icon { transition: none !important; }
  html body .mp-side-nav a:hover, html body .wg-shell-nav a:hover, html body .mp-side-nav a:hover .mp-nav-glyph, html body .wg-shell-nav a:hover .wg-shell-nav-glyph { transform: none !important; }
}