/* Top navigation — guest CTA layout, narrower search, icon submit, sizing */

body .navbar .navbar-brand {
  padding-left: 16px;
  /* Leave room for hamburger / right actions; CZ wordmark is much wider than SK */
  max-width: min(280px, calc(100vw - 100px));
  min-width: 0;
}

body .navbar .navbar-brand img {
  display: block;
  height: auto;
  width: auto;
  max-height: 32px;
  max-width: 100%;
  object-fit: contain;
}

@media (max-width: 575.98px) {
  body .navbar .navbar-brand {
    max-width: calc(100vw - 88px);
  }

  body .navbar .navbar-brand img {
    max-height: 28px;
  }
}

@media (min-width: 992px) {
  body .navbar .navbar-brand {
    padding-left: 24px;
    max-width: 280px;
  }
}

body .navbar .nav-right-zone,
body .navbar .nav-auth-zone {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

body .navbar .nav-auth-zone {
  flex-direction: row;
}

body .navbar .nav-search-form {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

body .navbar .xp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(245, 166, 35, 0.15);
  border: 1px solid rgba(245, 166, 35, 0.3);
  color: #ffd37a;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

body .navbar .nav-link.xp-chip {
  padding: 4px 10px !important;
  line-height: 1.25;
}

body .navbar .nav-notif {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.78);
  transition: background-color 0.2s, color 0.2s;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none !important;
}

body .navbar .nav-notif:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

body .navbar .nav-notif::after {
  display: none;
}

body .navbar .nav-notif-icon {
  font-size: 18px;
}

body .navbar .nav-notif-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e05555, #c23030);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  padding: 0 5px;
  line-height: 1;
  border: 2px solid #120c71;
}

body .navbar .nav-notif-badge:empty {
  display: none;
}

body .navbar .nav-notif-dropdown.dropdown-menu {
  padding: 0;
  margin: 0;
  float: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #1b174f;
}

body .navbar .nav-notif-dropdown-wrap {
  position: relative;
}

body .navbar .nav-notif-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto !important;
  bottom: auto;
  display: flex;
  flex-direction: column;
  min-width: 360px;
  max-width: 400px;
  max-height: min(480px, calc(100vh - 80px));
  margin-top: 0;
  background: #1b174f;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  transform: none !important;
  z-index: 1050;
}

body .navbar .nav-notif-dropdown-wrap.show .nav-notif-dropdown,
body .navbar .nav-notif-dropdown-wrap.hovered .nav-notif-dropdown,
body .navbar .nav-notif-dropdown.show {
  display: flex !important;
  flex-direction: column;
}

body .navbar .nav-notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body .navbar .nav-notif-title {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
}

body .navbar .nav-notif-count {
  min-width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(224, 85, 85, 0.18);
  color: #f08080;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 0 7px;
}

body .navbar .nav-notif-list {
  flex: 1;
  min-height: 0;
  max-height: 320px;
  overflow-y: auto;
  padding: 0;
  margin: 0;
}

body .navbar .nav-notif-item {
  display: block;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: background-color 0.15s;
}

body .navbar .nav-notif-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.95);
}

body .navbar .nav-notif-item:last-child {
  border-bottom: none;
}

body .navbar .nav-notif-item-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

body .navbar .nav-notif-icon-area {
  min-width: 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
}

body .navbar .nav-notif-icon-area i {
  font-size: 13px;
}

body .navbar .nav-notif-type-end {
  color: #f5a623;
}

body .navbar .nav-notif-type-result {
  color: #30c48d;
}

body .navbar .nav-notif-type-cat {
  color: #5b8df5;
}

body .navbar .nav-notif-content {
  flex: 1;
  min-width: 0;
}

body .navbar .nav-notif-item-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

body .navbar .nav-notif-item-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}

body .navbar .nav-notif-empty {
  padding: 32px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
}

body .navbar .nav-notif-empty-icon {
  font-size: 24px;
  margin-bottom: 8px;
  display: block;
  opacity: 0.3;
}

body .navbar .nav-notif-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 10px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
}

body .navbar .nav-notif-footer-link {
  color: rgba(255, 255, 255, 0.58);
  text-decoration: none;
  transition: color 0.2s;
}

body .navbar .nav-notif-footer-link:hover {
  color: rgba(255, 255, 255, 0.88);
}

/* I12: the bell's "mark all read" is a form button now - it keeps the link's look (no button chrome). */
body .navbar .nav-notif-footer-form {
  margin: 0;
}

body .navbar .nav-notif-footer-button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}

body .navbar .nav-notif-footer-check {
  font-size: 10px;
}

body .navbar .nav-notif-view-all {
  display: block;
  flex-shrink: 0;
  padding: 12px 18px;
  background: rgba(61, 109, 242, 0.12);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #5b8df5;
  text-decoration: none;
  transition: background-color 0.2s;
}

body .navbar .nav-notif-view-all:hover {
  background: rgba(61, 109, 242, 0.18);
  color: #7ba4f7;
}

@media (max-width: 991px) {
  body .navbar .nav-notif-mobile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    border-radius: 10px;
    transition: background-color 0.2s;
  }

  body .navbar .nav-notif-mobile:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
  }

  body .navbar .nav-notif-mobile i {
    width: 18px;
    text-align: center;
    flex-shrink: 0;
  }

  body .navbar .nav-notif-mobile-badge {
    margin-left: auto;
    min-width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(224, 85, 85, 0.18);
    color: #f08080;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    padding: 0 7px;
  }
}

body .navbar .nav-search-input {
  max-width: 160px !important;
  min-width: 0 !important;
}

@media (max-width: 1100px) {
  body .navbar .nav-search-input {
    max-width: 120px !important;
  }
}

@media (max-width: 992px) {
  body .navbar .nav-search-input {
    display: none !important;
  }

  body .navbar .nav-search-submit {
    display: none !important;
  }

  body .navbar #navbarNav .nav-search-form {
    display: none !important;
  }

  body .navbar .nav-search-mobile-fallback {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    opacity: 0.95;
    text-decoration: none !important;
  }

  body .navbar .nav-search-mobile-fallback .fa-search {
    font-size: 1rem;
  }
}

body .navbar .nav-search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.12);
  color: #fff !important;
  flex-shrink: 0;
  line-height: 1;
}

body .navbar .nav-search-submit:hover {
  filter: brightness(1.08);
}

body .navbar .nav-search-submit .fa-search {
  font-size: 14px;
}

body .navbar .nav-search-mobile-fallback {
  display: none;
}

@media (min-width: 992px) {
  body .navbar.navbar {
    font-size: 13.5px;
    min-height: 52px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body .navbar .navbar-brand img,
  body .navbar .navbar-brand svg {
    max-height: 32px !important;
    height: auto !important;
    width: auto !important;
    max-width: 100% !important;
  }

  body .navbar .nav-link {
    font-size: 13.5px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

.btn-nav-login {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.btn-nav-login:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff !important;
}

.btn-nav-register {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 999px;
  background: #3d6df2;
  border: none;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  transition: filter 0.15s;
  white-space: nowrap;
}

.btn-nav-register:hover {
  filter: brightness(1.12);
  color: #fff !important;
}

.nav-guest-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Mobile drawer — guest full-width CTAs */
.drawer-guest-divider {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin: 10px 16px 8px;
}

.drawer-auth-btn {
  display: block;
  width: calc(100% - 32px);
  margin: 6px 16px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none !important;
  transition: background 0.15s, filter 0.15s;
}

.drawer-auth-btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: rgba(255, 255, 255, 0.9) !important;
}

.drawer-auth-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff !important;
}

.drawer-auth-btn--primary {
  border: none;
  background: #3d6df2;
  color: #fff !important;
}

.drawer-auth-btn--primary:hover {
  filter: brightness(1.1);
  color: #fff !important;
}

/* P2-F7 PRO Club avatar frame (locked 2026-05-14).
   Applied via th:classappend on .profile-avatar (profil.html) and on the desktop +
   mobile drawer avatar <img> elements (topnav.html) when the user is PRO.
   Uses outline + box-shadow (not border) so the gold ring layers around any
   existing border without clobbering it — see the mobile drawer avatar which
   has an inline 2px white-translucent border. Single static rule; no
   animation (prefers-reduced-motion is therefore a no-op concern). The PRO
   palette #fad776 matches the existing "Získaj PRO" button + "👑 PRO" badge.
   Class is utility-style (no element coupling) so it works on any avatar
   shape — circle or rounded square. */
.pro-frame {
  outline: 2px solid #fad776;
  outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(250, 215, 118, 0.3);
}

/* Center-nav main dropdowns (Súťaže, Hraj) — dark panel, centered positioning preserved */
body .navbar .nav-item.dropdown > .nav-link {
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}

body .navbar .nav-item.dropdown:hover > .nav-link,
body .navbar .nav-item.dropdown.show > .nav-link {
  background: rgba(255, 255, 255, 0.06);
}

body .navbar .nav-main-dropdown {
  min-width: 240px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: #1b174f;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  padding: 8px;
  overflow: hidden;
}

body .navbar .nav-main-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin: 0;
  padding: 11px 14px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  line-height: 1.25;
  white-space: normal;
  background-color: transparent;
}

body .navbar .nav-main-dropdown .dropdown-item i {
  width: 18px;
  padding: 0; /* B-116: theme.min.css gives every .fa padding: 20px, which made each item 77px tall instead of 44px */
  margin-right: 0 !important;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.78;
  color: rgba(255, 255, 255, 0.58) !important;
}

body .navbar .nav-main-dropdown .dropdown-item.active,
body .navbar .nav-main-dropdown .dropdown-item:active,
body .navbar .nav-main-dropdown .dropdown-item:hover,
body .navbar .nav-main-dropdown .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.07) !important;
  color: #fff !important;
}

body .navbar .nav-main-dropdown .dropdown-item.active i,
body .navbar .nav-main-dropdown .dropdown-item:active i,
body .navbar .nav-main-dropdown .dropdown-item:hover i,
body .navbar .nav-main-dropdown .dropdown-item:focus i {
  color: rgba(255, 255, 255, 0.82) !important;
}

body .navbar .nav-main-dropdown .dropdown-divider {
  margin: 10px 0;
  border-color: rgba(255, 255, 255, 0.08);
}

/* F3 / I1 - „Hraj“ with the hub on: the word is a link to /hry, the little caret beside it is the dropdown toggle (the hover
   script shows it on mouseenter). One pill for both, one line with the other items.
   I1: the two links are boxes of the SAME height and sit on the same line as the other items' links. The caret link was an empty
   10 x 14 px box centred in the pill (its own padding was all it had), the pair was positioned by align-items:center alone, and
   the theme hides every .dropdown-toggle::after in the navbar - so no caret showed and the pill's two parts were only
   accidentally level. Now the li stretches both links to its own height (the word's: padding + line-height, exactly the other
   items' links), each is a flex box that centres its content, the caret is drawn explicitly and has a real hit area and a focus ring. */
body .navbar .nav-item.nav-play {
  display: flex;
  align-items: stretch;
  border-radius: 999px;
  transition: background 0.15s ease;
}

body .navbar .nav-item.nav-play > .nav-link {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  margin: 0;
  border-radius: 999px;
}

body .navbar .nav-item.nav-play > .nav-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9) !important;
  outline-offset: -2px;
}

body .navbar .nav-item.nav-play:hover,
body .navbar .nav-item.nav-play:focus-within,
body .navbar .nav-item.nav-play.show {
  background: rgba(255, 255, 255, 0.06);
}

body .navbar .nav-item.nav-play > .nav-link,
body .navbar .nav-item.nav-play:hover > .nav-link,
body .navbar .nav-item.nav-play.show > .nav-link {
  background: transparent;
  white-space: nowrap;
}

/* the base rule sets the padding of every .nav-link with !important, so these must too; the theme hides the caret
   glyph (.dropdown-toggle::after), the toggle is the small hit area after the word and keeps the pill balanced */
body .navbar .nav-item.nav-play > .nav-play-link {
  padding-right: 2px !important;
}

body .navbar .nav-item.nav-play > .nav-play-caret {
  justify-content: center;
  min-width: 24px;
  padding-left: 2px !important;
  padding-right: 10px !important;
}

/* I1: the caret, drawn here (a chevron from a mask, so it takes the link's colour): the theme sets .dropdown-toggle::after to a
   Feather glyph with border:none !important and then hides it for every dropdown of the navbar - this rule is more specific. */
body .navbar .nav-item.nav-play > .nav-play-caret::after {
  display: block;
  content: "";
  width: 10px;
  height: 10px;
  margin: 0;
  padding: 0;
  border: 0 !important;
  background-color: currentColor;
  opacity: 0.85;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center / contain no-repeat;
}

body .navbar .nav-item.nav-play.show > .nav-play-caret::after {
  transform: rotate(180deg);
}

/* F3 - the centre list stays on ONE line from 992 px up. A logged-out visitor now also has „Hraj“ (six links), which in the
   narrower languages (CZ) wrapped „TOP soutěže“ and „Pro firmy“ onto two lines between 992 and 1099 px: the links do not wrap,
   sit a little closer below 1200 px, the logo keeps its size, and the blurred „??? Body“ teaser of a guest gives way below
   1100 px (it is decoration; from 1100 px up everything fits with it). */
@media (min-width: 992px) {
  body .navbar .navbar-nav.mx-auto > .nav-item > .nav-link {
    white-space: nowrap;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  body .navbar .navbar-nav.mx-auto > .nav-item:not(.nav-play) > .nav-link {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  body .navbar .navbar-brand {
    flex-shrink: 0;
  }
}

@media (min-width: 992px) and (max-width: 1099.98px) {
  body .navbar #navbarNav .nav-right-zone .nav-guest-body {
    display: none !important;
  }
}

/* F3/F7 - the calendar item: an emoji where the other items have a Font Awesome icon, the title and a small state line. F7: the
   emoji is an element of its own (<span>, no longer <i class="fa">): Font Awesome's font, the theme's .fa padding and size and the
   grey, dimmed (opacity .78) look of the icon rules above never touch it, so it keeps the system's colour emoji font at full
   opacity - and it sits in the same 18px icon column as its neighbours' icons, so the text lines up. */
body .navbar .nav-main-dropdown .dropdown-item .nav-play-emoji,
body .navbar .nav-mobile-drawer-item .nav-mobile-emoji {
  display: block;
  width: 18px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 15px;
  line-height: 1;
  font-style: normal;
  font-weight: 400;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  opacity: 1;
  color: inherit;
}

/* F7 - the „Hraj“ menu is a little wider than the other dropdowns (280 instead of 240 px): the calendar's bold title - e.g. „Adventný
   kalendár 2026“ - then fits on one line and the item is as tall as title + state line need (about 56 px), not 75 px with a wrapped
   title. A longer title still wraps; the drawer has the width already. */
body .navbar .nav-main-dropdown.nav-play-menu {
  min-width: 280px;
}

/* I6 - the „Advent“ menu (own calendar with its state line, other calendars) is as wide as „Hraj“ */
body .navbar .nav-main-dropdown.nav-advent-menu {
  min-width: 280px;
}

/* I6 - logged in, in Christmas mode the bar has one more item. Measured at 992 px with the Czech labels and logo (the widest case):
   seven items push the XP chip, the bell and the avatar 25 px out of the window (the bar had room for six). Between 992 and 1099 px
   the „Advent“ emoji gives its ~21 px back and „Blog“ (only when the Advent item is there) yields its ~48 px - together the bar is
   as it was before the item. Above 1100 px nothing is dropped. */
@media (min-width: 992px) and (max-width: 1099.98px) {
  body .navbar .nav-advent .nav-advent-emoji,
  body .navbar .nav-item.nav-yields-to-advent {
    display: none;
  }
}

body .navbar .nav-play-calendar-text,
body .navbar .nav-mobile-calendar-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

body .navbar .nav-play-calendar-title,
body .navbar .nav-mobile-calendar-text > span {
  display: block;
  font-weight: 700;
  overflow-wrap: anywhere;
}

body .navbar .nav-play-calendar-state,
body .navbar .nav-mobile-calendar-text > small {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.62);
}

/* Navbar profile avatar + dropdown */
body .navbar .nav-profile-dropdown-wrap {
  position: relative;
}

body .navbar .nav-profile-trigger {
  padding: 4px !important;
  border-radius: 999px;
}

body .navbar .nav-profile-trigger::after {
  margin-left: 2px;
}

body .navbar .nav-profile-avatar {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3d6df2, #7b2fbe);
  color: #fff;
  font-family: "Cabinet Grotesk", sans-serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(61, 109, 242, 0.28);
  flex-shrink: 0;
}

body .navbar .nav-profile-avatar.is-pro {
  background: linear-gradient(135deg, #7b2fbe, #fad776);
  box-shadow:
    0 0 0 2px #1b174f,
    0 0 0 4px #fad776,
    0 4px 14px rgba(255, 215, 0, 0.2);
}

body .navbar .nav-profile-dropdown {
  margin-top: 12px;
  margin-right: 0;
  min-width: 240px;
  max-width: min(280px, calc(100vw - 32px));
  right: 0;
  left: auto !important;
  transform: none !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: #1b174f;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  padding: 8px;
  overflow: hidden;
}

body .navbar .nav-profile-dropdown-head {
  padding: 10px 14px 12px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  border-radius: 10px;
  margin-bottom: 0;
}

body .navbar .nav-profile-dropdown-head small {
  color: inherit;
  font-size: inherit;
}

body .navbar .nav-profile-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin: 0;
  padding: 11px 14px;
  font-size: 15px;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.88);
  border-radius: 10px;
  white-space: normal;
  background-color: transparent;
}

body .navbar .nav-profile-dropdown .dropdown-item i {
  width: 18px;
  padding: 0; /* B-116 (see .nav-main-dropdown above) */
  margin-right: 0 !important;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.85;
  color: rgba(255, 255, 255, 0.45);
}

body .navbar .nav-profile-dropdown .dropdown-item.active,
body .navbar .nav-profile-dropdown .dropdown-item:active,
body .navbar .nav-profile-dropdown .dropdown-item:hover,
body .navbar .nav-profile-dropdown .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.07) !important;
  color: #fff !important;
}

body .navbar .nav-profile-dropdown .dropdown-item.active i,
body .navbar .nav-profile-dropdown .dropdown-item:active i,
body .navbar .nav-profile-dropdown .dropdown-item:hover i,
body .navbar .nav-profile-dropdown .dropdown-item:focus i {
  color: rgba(255, 255, 255, 0.65) !important;
}

body .navbar .nav-profile-dropdown .dropdown-item.text-danger {
  color: #ff8a8a !important;
}

body .navbar .nav-profile-dropdown .dropdown-item.text-danger:hover,
body .navbar .nav-profile-dropdown .dropdown-item.text-danger:focus {
  background: rgba(255, 80, 80, 0.12);
  color: #ffb4b4 !important;
}

body .navbar .nav-profile-dropdown .dropdown-divider {
  margin: 10px 0;
  border-color: rgba(255, 255, 255, 0.08);
}

@media (min-width: 992px) {
  body .navbar .nav-profile-dropdown-wrap {
    margin-right: 30px;
    padding-right: 8px;
  }
}

@media (max-width: 576px) {
  body .navbar .nav-profile-dropdown-wrap {
    margin-right: 8px;
  }

  body .navbar .nav-profile-trigger {
    margin-right: 0;
  }

  body .navbar .nav-profile-dropdown {
    position: fixed !important;
    top: 64px !important;
    right: 8px !important;
    left: auto !important;
    width: auto !important;
    max-width: calc(100vw - 16px);
  }
}

/* Mobile drawer — dark menu language aligned with desktop dropdowns */
body .navbar .nav-mobile-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1049;
}

body .navbar #mobileDrawer.nav-mobile-drawer {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  max-width: calc(100vw - 48px);
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 1050;
  background: #17134a;
  color: rgba(255, 255, 255, 0.88);
  transition: right 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -4px 0 32px rgba(0, 0, 0, 0.35);
}

body .navbar .nav-mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 16px;
  height: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

body .navbar .nav-mobile-drawer-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 8px;
  border-radius: 10px;
  transition: background 0.15s ease, color 0.15s ease;
}

body .navbar .nav-mobile-drawer-close:hover,
body .navbar .nav-mobile-drawer-close:focus {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

body .navbar .nav-mobile-profile {
  margin: 12px 12px 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}

body .navbar .nav-mobile-profile-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

body .navbar .nav-profile-avatar--mobile {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 16px;
}

body .navbar .nav-mobile-profile-name {
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.25;
}

body .navbar .nav-mobile-profile-stats {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.7rem;
  margin-top: 2px;
}

body .navbar .nav-mobile-profile-xp {
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

body .navbar .nav-mobile-profile-xp-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f5a623, #ffd978);
}

body .navbar .nav-mobile-profile-pro {
  margin-top: 10px;
}

body .navbar .nav-mobile-pro-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: filter 0.15s ease;
}

body .navbar .nav-mobile-pro-badge--active {
  background: #7b2fbe;
  color: #fff !important;
}

body .navbar .nav-mobile-pro-badge--cta {
  background: #fad776;
  color: #1a1a1a !important;
}

body .navbar .nav-mobile-pro-badge--cta:hover {
  filter: brightness(1.06);
}

body .navbar .nav-mobile-drawer-nav {
  padding: 8px 12px 16px;
}

body .navbar .nav-mobile-drawer-section {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  padding: 14px 14px 6px;
  margin: 0;
}

body .navbar .nav-mobile-drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin: 0;
  padding: 11px 14px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 0.9rem;
  line-height: 1.25;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease;
}

body .navbar .nav-mobile-drawer-item i,
body .navbar .nav-mobile-drawer-item .fa {
  width: 18px;
  padding: 0; /* B-116 (see .nav-main-dropdown above) */
  margin-right: 0 !important;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.78;
  color: rgba(255, 255, 255, 0.58) !important;
  font-size: 0.88rem;
}

body .navbar .nav-mobile-drawer-item:hover,
body .navbar .nav-mobile-drawer-item:focus,
body .navbar .nav-mobile-drawer-item.active {
  background: rgba(255, 255, 255, 0.07);
  color: #fff !important;
}

body .navbar .nav-mobile-drawer-item:hover i,
body .navbar .nav-mobile-drawer-item:focus i,
body .navbar .nav-mobile-drawer-item.active i {
  color: rgba(255, 255, 255, 0.82) !important;
}

body .navbar .nav-mobile-drawer-item--danger {
  color: #ff8a8a !important;
}

body .navbar .nav-mobile-drawer-item--danger i {
  color: rgba(255, 138, 138, 0.85) !important;
}

body .navbar .nav-mobile-drawer-item--danger:hover,
body .navbar .nav-mobile-drawer-item--danger:focus {
  background: rgba(255, 80, 80, 0.12);
  color: #ffb4b4 !important;
}

body .navbar .nav-mobile-drawer-nav .drawer-guest-divider,
body .navbar .nav-mobile-drawer-nav hr.drawer-guest-divider {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 10px 14px;
}

/* ── Drawer logout is a POST form, so its item is a <button> (LOGOUT-2). Specificity (0,2,2)
   deliberately beats `body .navbar .nav-mobile-drawer-item` (0,2,1) above; padding, gap,
   font-size and colour are left to that rule so the button matches its <a> siblings. ── */
body .navbar button.nav-mobile-drawer-item {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}