/* Common styles */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure footer stays at the bottom */
    background-image: url('https://images.squarespace-cdn.com/content/654e9f1c79033c2b2d0b18ed/27a54b0c-d97e-4a9b-b916-9af516cd4a74/FINEEEEEEE.png?content-type=image%2Fpng');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* The space art sits behind a dark veil on every page so text and card art stay readable.
   Pages that paint their own backdrop (home, abyss, campaign) switch it off. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 90% 60% at 50% 0%, rgba(40, 26, 8, 0.55), transparent 70%),
        linear-gradient(180deg, rgba(7, 6, 5, 0.86) 0%, rgba(5, 5, 5, 0.94) 100%);
}

main {
    flex: 1;
    text-align: center;
    width: 100%;
    margin-top: 140px;
    flex-wrap: wrap;
    font-family: 'HwyGothic';
}

/* Desktop styles */
header, footer, .action-bar, main, nav {
    display: flex;
    justify-content: center;
    text-align: center
}

header, .action-bar {
    position: fixed;
    background: rgba(8, 8, 8, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #ffbf00;
    font-weight: bold;
    align-items: center;
    height: 70px;
    width: 100%;
    z-index: 1000;
}

header {
    z-index: 1001;
}

header {
    border-bottom: 1px solid rgba(255, 191, 0, 0.08);
}

.action-bar {
    border-bottom: 1px solid rgba(255, 191, 0, 0.06);
}

header {
    top: 0;
}

.action-bar {
    top: 70px;
}

.page-title {
    font-family: 'DragonSlayer';
    font-size: 27px;
    margin-left: 20px;
}

button {
    background-color: #ffbf00;
    border-radius: 10px;
    border: none;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-weight: bold;
    letter-spacing: 1px;
    height: 30px;
    cursor: pointer;
    transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
}

nav a {
    transition: color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

a {
    color: #ffbf00;
    text-decoration: none;
}

a:has(img) {
    padding: 0px;
    margin: 0px;
}

.logo-link {
    display: flex;
    height: 50px;
}

img {
    max-height: 100%;
    object-fit: contain;
}

a:not(:has(img)) {
    border-radius: 10px;
}

a:not(:has(img)):hover {
    color: #0e0e0e;
    transform: scale(0.95);
}

.logo-link a img {
    transition: transform 0.3s ease;
}

.logo-link a img:hover {
    transform: scale(1.1);
}

.nav-toggle {
    display: none;
}

.backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    z-index: 999; /* Ensure the backdrop is above other content */
}

.search-bar {
    flex: 1;
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
}

.search-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-group input[type="search"] {
    padding: 5px 34px 5px 14px;
    border-radius: 20px;
    border: 2px solid rgba(255, 191, 0, 0.4);
    background: #141414;
    color: #f0ece6;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.85rem;
    width: 200px;
    height: auto;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, width 0.3s ease;
    vertical-align: unset;
}

.search-input-group input[type="search"]:focus {
    border-color: rgba(255, 191, 0, 0.7);
    box-shadow: 0 0 8px rgba(255, 191, 0, 0.2);
    width: 240px;
}

.search-input-group button {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background: transparent;
    border: none;
    color: #ffbf00;
    cursor: pointer;
    padding: 0 10px;
    font-size: 0.9rem;
    border-radius: 0 20px 20px 0;
    height: auto;
    font-weight: normal;
    transition: color 0.18s ease;
}

.search-input-group button:hover {
    color: #ffd966;
    transform: none;
    background: transparent;
    box-shadow: none;
}

.search-bar input {
    border-radius: 20px;
    height: 30px;
    background-color: #141414;
    color: #f0ece6;
    border: 2px solid rgba(255, 191, 0, 0.35);
    vertical-align: middle;
    outline: none;
    padding: 0 12px;
    font-family: 'HwyGothic', Arial, sans-serif;
}
footer {
    margin-top: auto;
    background: rgba(8, 8, 8, 0.92);
    border-top: 1px solid rgba(255, 191, 0, 0.07);
    gap: 20px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: rgba(240, 236, 230, 0.3);
    align-items: center;
    height: 70px;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}

.footer-copy {
    color: rgba(240, 236, 230, 0.25);
    font-size: 11px;
}

footer a {
    display: inline;
    padding: 0;
    margin: 0;
    color: rgba(255, 191, 0, 0.25);
    font-size: 11px;
    letter-spacing: 0.5px;
    border-radius: 0;
    transition: color 0.2s ease;
}

footer a:hover {
    color: rgba(255, 191, 0, 0.55);
    transform: none;
    background: none;
}

/* ── SIDEBAR FOOTER (mobile only) ─────────────────────────── */
.sidebar-footer {
    display: none;
}

/* Nav: 3-column layout with logo, links, and social icons */
header {
    justify-content: space-between;
    padding: 0 20px;
    gap: 12px;
    box-sizing: border-box;
    /* Shared height for the small header controls that sit side by side — the language globe and
       the SIGN IN button. They read as a pair, so a mismatch of even a few pixels is visible. */
    --nav-control-height: 32px;
}

.nav-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.nav-logo a {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
}

.nav-logo img {
    height: 44px;
    max-height: 44px;
    filter: brightness(0.82);
    transition: filter 0.2s ease;
}

.nav-logo a:hover img {
    filter: brightness(1.15) drop-shadow(0 0 6px rgba(255, 191, 0, 0.35));
}

header nav {
    flex: 1;
    /* Never wrap: the bar is a fixed 70px, so a second row of links spilled out of it. Links that
       do not fit are moved into the MORE menu by scripts.js instead; min-width lets the nav shrink
       below its content so that script can see the overflow. */
    flex-wrap: nowrap;
    min-width: 0;
    gap: 2px;
    align-items: center;
    text-align: center;
}

header nav a {
    font-size: 0.68rem;
    letter-spacing: 1px;
    padding: 6px 9px;
    margin: 0;
    border-radius: 8px;
    color: rgba(255, 191, 0, 0.78);
    border: 1px solid transparent;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

header nav a:hover {
    background-color: rgba(255, 191, 0, 0.1);
    color: #ffd966;
    border-color: rgba(255, 191, 0, 0.35);
    box-shadow: 0 0 14px rgba(255, 191, 0, 0.2);
    transform: none;
}

/* ── NAV OVERFLOW ("MORE" menu) ──────────────────────────────
   scripts.js builds <div class="nav-more"> at the end of the header nav and, whenever the links no
   longer fit on one line, moves the trailing links into its dropdown. The dropdown reuses the
   profile menu's panel styling; the button is styled to read as one more nav link. */
.nav-more {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.nav-more.is-hidden {
    display: none;
}

.nav-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Explicit so it does not inherit the global gold 30px button. */
    height: auto;
    padding: 6px 9px;
    margin: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 191, 0, 0.78);
    border: 1px solid transparent;
    font-size: 0.68rem;
    letter-spacing: 1px;
    white-space: nowrap;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.nav-more-btn:hover,
.nav-more:has(.nav-more-menu.open) .nav-more-btn {
    background-color: rgba(255, 191, 0, 0.1);
    color: #ffd966;
    border-color: rgba(255, 191, 0, 0.35);
    box-shadow: 0 0 14px rgba(255, 191, 0, 0.2);
    transform: none;
}

.nav-more-btn .nav-caret {
    font-size: 0.7rem;
    opacity: 0.6;
    transition: transform 0.18s ease;
}

.nav-more:has(.nav-more-menu.open) .nav-caret {
    transform: rotate(180deg);
}

.nav-more-menu {
    min-width: 190px;
    text-align: left;
}

/* Links moved into the menu drop their inline-bar look for the profile menu's row style. */
header nav .nav-more-menu a {
    display: block;
    width: 100%;
    padding: 11px 14px;
    margin: 0;
    border: none;
    border-radius: 0;
    box-sizing: border-box;
    color: #8a7a6a;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-align: left;
    box-shadow: none;
}

header nav .nav-more-menu a:hover {
    color: #ffbf00;
    background-color: rgba(255, 191, 0, 0.06);
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.nav-social {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 28px);
    gap: 3px;
}

.nav-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    padding: 0;
    margin: 0;
    color: rgba(255, 191, 0, 0.5);
    font-size: 0.85rem;
    border: 1px solid transparent;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.nav-social a:hover {
    color: #ffdf4d;
    background-color: rgba(255, 191, 0, 0.12);
    border-color: rgba(255, 191, 0, 0.3);
    box-shadow: 0 0 10px rgba(255, 191, 0, 0.25);
    transform: none;
}

/* ── NAV PROFILE ─────────────────────────────────────────── */
.nav-profile {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin-left: 4px;
}

.nav-signin-btn {
    display: inline-flex;
    align-items: center;
    height: var(--nav-control-height, 32px);
    padding: 0 14px;
    box-sizing: border-box;
    margin: 0;
    border-radius: 8px;
    font-size: 0.68rem;
    letter-spacing: 1px;
    color: rgba(255, 191, 0, 0.78);
    border: 1px solid rgba(255, 191, 0, 0.3);
    background: rgba(255, 191, 0, 0.06);
    text-decoration: none;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    white-space: nowrap;
}

.nav-signin-btn:hover {
    color: #ffd966;
    background-color: rgba(255, 191, 0, 0.14);
    border-color: rgba(255, 191, 0, 0.55);
    box-shadow: 0 0 14px rgba(255, 191, 0, 0.2);
    transform: none;
}

/* ── Treasure (gem) displays — one look everywhere, modelled on the Arena button's fee chip ── */
.gem-ico::before { content: '\1F48E'; font-size: 0.85em; line-height: 1; }
.gem-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-family: 'HwyGothic', Arial, sans-serif; font-size: 0.74rem; letter-spacing: 1.5px; line-height: 1.3; color: #ffd966; background: rgba(255, 191, 0, 0.1); border: 1px solid rgba(255, 191, 0, 0.3); white-space: nowrap; box-sizing: border-box; }
.gem-pill::before { content: '\1F48E'; font-size: 0.72em; line-height: 1; }
.gem-pill-lg { font-size: 0.95rem; padding: 5px 14px; }
.gem-pill.on-gold { background: rgba(14, 14, 14, 0.16); border-color: transparent; color: #0e0e0e; }
.gem-pill .price-original { opacity: 0.55; }

/* ── Account chip + dropdown ─────────────────────────────────── */
.nav-profile-chip {
    position: relative;
}

.nav-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd45a 0%, #ffb300 50%, #ff8a00 100%);
    color: #1a0d00;
    font-family: 'DragonSlayer', sans-serif;
    font-size: 0.95rem;
    line-height: 1;
    box-shadow: 0 0 0 2px rgba(255, 191, 0, 0.22), 0 0 12px rgba(255, 140, 0, 0.35);
}

.nav-avatar-lg {
    width: 46px;
    height: 46px;
    font-size: 1.45rem;
    box-shadow: 0 0 0 3px rgba(255, 191, 0, 0.22), 0 0 18px rgba(255, 140, 0, 0.45);
}

/* Equipped avatar in the chip + dropdown: the gold disc becomes a thin ring around the art,
   cropped onto the subject on the left of the plate (same crop as the in-game medallion). */
.nav-avatar.has-img {
    position: relative;
    padding: 2px;
    box-sizing: border-box;
}
.nav-avatar.has-img .nav-avatar-img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 50%;
    object-fit: cover;
    object-position: 18% 50%;
    background: #0c0a07;
}
.nav-avatar.has-img .nav-avatar-initial { display: none; }

/* Dropdown avatar links to /skins?tab=AVATAR: a pencil chip appears on hover */
.nav-avatar-link {
    position: relative;
    color: #1a0d00;
    transition: box-shadow 0.18s, transform 0.18s;
}

.nav-avatar-link:hover {
    color: #1a0d00;
    transform: scale(1.06);
    box-shadow: 0 0 0 3px rgba(255, 191, 0, 0.5), 0 0 22px rgba(255, 140, 0, 0.7);
}

/* Two classes: Font Awesome loads last and would win display/line-height on a single class */
.nav-avatar-link .nav-avatar-edit {
    display: block;
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #141414;
    border: 1px solid rgba(255, 191, 0, 0.6);
    color: #ffbf00;
    font-size: 8px;
    line-height: 16px;
    text-align: center;
    box-sizing: border-box;
}

.nav-treasure-link {
    color: #ffd966; /* the .gem-pill gold, explicit so it never depends on the parent's colour */
    transition: filter 0.18s;
}

.nav-treasure-link:hover {
    filter: brightness(1.2);
}

.nav-profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px 5px 5px;
    margin: 0;
    height: auto;
    border-radius: 12px;
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: #ffd966;
    border: 1px solid rgba(255, 191, 0, 0.28);
    background: linear-gradient(180deg, rgba(255, 191, 0, 0.12), rgba(255, 191, 0, 0.04));
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.nav-profile-btn:hover {
    color: #ffe08a;
    border-color: rgba(255, 191, 0, 0.6);
    box-shadow: 0 0 16px rgba(255, 191, 0, 0.22);
    transform: none;
}

.nav-profile-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.nav-profile-username {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 150px;
    font-family: 'HwyGothic', Arial, sans-serif;
}

.nav-profile-treasure {
    flex-shrink: 0;
}

.nav-profile-btn .nav-caret {
    font-size: 0.7rem;
    opacity: 0.6;
    transition: transform 0.18s ease;
}

.nav-profile-dropdown.open + .nav-profile-btn .nav-caret,
.nav-profile-chip:has(.nav-profile-dropdown.open) .nav-caret {
    transform: rotate(180deg);
}

.nav-profile-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    /* Wide enough for the LANGUAGE row's label and select to sit on one line. */
    min-width: 250px;
    background: linear-gradient(180deg, rgba(24, 16, 8, 0.98) 0%, rgba(10, 10, 10, 0.98) 100%);
    border: 1px solid rgba(255, 191, 0, 0.28);
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.75), 0 0 24px rgba(255, 140, 0, 0.12);
    z-index: 2000;
    overflow: hidden;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.nav-profile-dropdown::before {
    content: '';
    display: block;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffbf00 35%, #ff8a00 65%, transparent);
}

.nav-profile-dropdown.open {
    display: block;
    animation: nav-drop-in 0.18s ease-out;
}

@keyframes nav-drop-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

.nav-dropdown-hero {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px 12px;
    background: radial-gradient(circle at 0% 0%, rgba(255, 191, 0, 0.16), transparent 60%);
}

.nav-dropdown-id {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.nav-dropdown-username {
    font-family: 'DragonSlayer', sans-serif;
    font-size: 1.05rem;
    color: #ffbf00;
    letter-spacing: 0.08em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 0 10px rgba(255, 140, 0, 0.35);
}

.nav-dropdown-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.nav-level-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.66rem;
    letter-spacing: 1.5px;
    line-height: 1.3;
    color: rgba(240, 236, 230, 0.85);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 191, 0, 0.2);
    white-space: nowrap;
}

.nav-level-pill i {
    color: #ffbf00;
    font-size: 0.6rem;
}

.nav-dropdown-divider {
    height: 1px;
    background: rgba(255, 191, 0, 0.1);
    margin: 0;
}

.nav-dropdown-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px 12px 12px;
}

.nav-profile-link {
    display: block;
    width: 100%;
    padding: 11px 14px;
    margin: 0;
    background: transparent;
    border: none;
    color: #8a7a6a;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    transition: color 0.18s ease, background-color 0.18s ease;
}

.nav-profile-link i {
    margin-right: 6px;
    color: rgba(255, 191, 0, 0.45);
}

.nav-profile-link:hover {
    color: #ffbf00;
    background-color: rgba(255, 191, 0, 0.06);
    transform: none;
    box-shadow: none;
}

/* the account menu's links are icon tiles; the language menu keeps the plain list above */
.nav-dropdown-grid .nav-profile-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 6px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 191, 0, 0.14);
    color: rgba(240, 236, 230, 0.78);
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    text-align: center;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}

.nav-dropdown-grid .nav-profile-link i {
    margin: 0;
    font-size: 1.1rem;
    color: rgba(255, 191, 0, 0.85);
}

.nav-dropdown-grid .nav-profile-link:hover {
    color: #ffbf00;
    background-color: rgba(255, 191, 0, 0.1);
    border-color: rgba(255, 191, 0, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 0 12px rgba(255, 191, 0, 0.15);
}

/* the dropdown's Abyss entry gets a slowly rotating vortex icon */
.nav-abyss-icon {
    display: inline-block;
    animation: nav-abyss-spin 6s linear infinite;
}

@keyframes nav-abyss-spin {
    to { transform: rotate(360deg); }
}

.nav-profile-signout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 24px);
    margin: 10px 12px 12px;
    padding: 10px 14px;
    height: auto;
    background: transparent;
    border: 1px solid rgba(255, 90, 60, 0.28);
    border-radius: 8px;
    color: #e9a090;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    cursor: pointer;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.nav-profile-signout:hover {
    color: #ff8a70;
    background-color: rgba(190, 60, 40, 0.12);
    border-color: rgba(255, 90, 60, 0.55);
    transform: none;
    box-shadow: none;
}

/* ── Language picker ──────────────────────────────────────────
   One control for everyone, signed in or not. A signed-in player's choice is saved to their
   account and follows them to another device; a visitor's lives in the scale_lang cookie.

   This is a custom menu rather than a <select> on purpose: a select's option list is drawn by the
   operating system, so it renders white-on-white against this theme and no CSS can fix it. */
.nav-lang-chip {
    position: relative;
    display: inline-flex;
    margin-right: 8px;
}

.nav-lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* Square, matching the account chip's height (avatar + padding), and explicit so it does not
       inherit the global 30px button height. */
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border-radius: 12px;
    color: #ffd966;
    border: 1px solid rgba(255, 191, 0, 0.28);
    background: linear-gradient(180deg, rgba(255, 191, 0, 0.12), rgba(255, 191, 0, 0.04));
    cursor: pointer;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.nav-lang-btn .fa-globe {
    font-size: 1rem;
    color: rgba(255, 191, 0, 0.9);
}

.nav-lang-btn:hover {
    color: #ffe08a;
    border-color: rgba(255, 191, 0, 0.6);
    box-shadow: 0 0 16px rgba(255, 191, 0, 0.22);
    transform: none;
}

.nav-lang-btn:focus-visible {
    outline: 2px solid rgba(255, 191, 0, 0.6);
    outline-offset: 2px;
}

/* With a language explicitly chosen the button widens to carry its code, so the current
   setting is readable without opening the menu. */
.nav-lang-btn.has-code {
    width: auto;
    padding: 0 12px 0 10px;
}

.nav-lang-code {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255, 191, 0, 0.1);
    border: 1px solid rgba(255, 191, 0, 0.3);
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.6rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    line-height: 1.3;
}

/* Seventeen languages will not fit on a short screen, so the list scrolls inside the menu
   rather than running off the bottom of the viewport. */
.nav-lang-menu {
    max-height: min(60vh, 360px);
    overflow-y: auto;
    min-width: 230px;
    padding: 8px;
    box-sizing: border-box;
    /* The default scrollbar is light and reads as a white gutter against this menu. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 191, 0, 0.35) transparent;
}

.nav-lang-menu::-webkit-scrollbar {
    width: 8px;
}

.nav-lang-menu::-webkit-scrollbar-track {
    background: transparent;
}

.nav-lang-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 191, 0, 0.28);
    border-radius: 4px;
}

.nav-lang-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 191, 0, 0.45);
}

.nav-lang-option {
    position: relative;
    padding: 9px 32px 9px 12px;
    margin: 2px 0;
    border-radius: 8px;
    border: 1px solid transparent;
    color: rgba(240, 236, 230, 0.78);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    white-space: nowrap;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.nav-lang-option:hover {
    color: #ffbf00;
    background-color: rgba(255, 191, 0, 0.1);
    border-color: rgba(255, 191, 0, 0.35);
}

.nav-lang-option.selected {
    color: #ffbf00;
    background: linear-gradient(90deg, rgba(255, 191, 0, 0.16), rgba(255, 191, 0, 0.05));
    border-color: rgba(255, 191, 0, 0.3);
    box-shadow: inset 3px 0 0 #ffbf00;
}

.nav-lang-option.selected::after {
    content: '\2713';   /* numeric escape: a literal check mark in CSS risks encoding drift */
    position: absolute;
    right: 12px;
    color: #ffbf00;
}

/* ── NARROW WINDOWS (768px–1024px, mouse) ───────────────────
   Between the phone layout and a window wide enough for the full link row, the header bar, action
   bar, footer and every page's 140px top offset stay exactly as on desktop; only the links leave
   the bar. They become a panel that slides in under the header, opened by the same hamburger the
   phone layout uses (it sits in the action bar). scripts.js restores every link from the MORE menu
   here, and the menu itself is hidden. */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (hover: hover) {
    header nav {
        /* Starts under the action bar (header 70px + action bar 70px) so the hamburger in the
           action bar stays reachable while the panel is open. */
        position: absolute;
        top: calc(100% + 70px);
        left: 0;
        width: 0;
        height: calc(100vh - 140px);
        height: calc(100dvh - 140px);
        overflow-x: hidden;
        overflow-y: auto;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-end;
        gap: 0;
        padding: 10px 0;
        box-sizing: border-box;
        background: rgba(8, 8, 8, 0.96);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-right: 1px solid rgba(255, 191, 0, 0.08);
        transition: width 0.3s ease;
    }

    header.expanded nav {
        width: 230px;
    }

    header nav a {
        padding: 6px 9px;
        margin: 8px 6px 0 0;
        font-size: 0.9rem;
        white-space: nowrap;
    }

    .nav-more {
        display: none;
    }

    /* With the links out of the row, keep the controls on the right rather than spread out. */
    .nav-profile {
        margin-left: auto;
    }

    .backdrop.expanded {
        display: block;
    }

    .action-bar {
        justify-content: space-between;
    }

    .nav-toggle {
        display: flex;
        margin: 0 10px;
        justify-content: center;
        transition: transform 0.5s;
    }

    .nav-toggle.expanded {
        transform: rotate(90deg);
    }

    .nav-toggle button {
        height: 36px;
        width: 36px;
    }

    .page-title {
        margin-right: 25px;
    }
}

/* Mobile styles */
@media only screen and (max-width: 767px), only screen and (hover: none) {
    header {
        display: flex;
        width: 0;
        height: 100vh;
        height: 100dvh; /* match the visible viewport so the footer isn't pushed below the browser chrome */
        overflow-x: hidden;
        overflow-y: auto;
        top: 0;
        left: 0;
        transition: width 0.3s ease;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
        padding: 0;
        gap: 0;
        /* Both header controls grow together to a comfortable touch target. */
        --nav-control-height: 38px;
    }

    main {
        margin-top: 70px;
    }

    .nav-logo {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        padding: 14px 0;
        order: -1;
        margin-bottom: auto;
        border-bottom: 1px solid rgba(255, 191, 0, 0.1);
        box-sizing: border-box;
    }

    .nav-logo img {
        height: 36px;
        max-height: 36px;
    }

    header nav {
        flex: none;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
        flex-wrap: nowrap;
        gap: 0;
        margin-bottom: 0;
    }

    /* The panel lists every link, so the overflow menu has nothing to hold. */
    .nav-more {
        display: none;
    }

    nav {
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
        margin-bottom: 0;
    }

    nav a {
        padding-top: 0px;
        padding-bottom: 0px;
        margin-top: 6px;
        margin-bottom: 0px;
        margin-right: 2px;
    }

    header nav a {
        padding-top: 6px;
        padding-bottom: 6px;
        margin-top: 8px;
        margin-bottom: 0;
        margin-right: 6px;
        font-size: 0.9rem;
    }

    .nav-profile {
        margin-left: 0;
        margin-right: 6px;
        margin-top: 10px;
        justify-content: flex-end;
        max-width: 100%;
        min-width: 0;
    }

    .nav-signin-btn {
        font-size: 0.85rem;
        padding: 0 16px;
    }

    .nav-profile-btn {
        font-size: 0.85rem;
        padding: 5px 12px 5px 5px;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Stack treasure beneath the username so the chip never grows past the sidebar */
    .nav-profile-text {
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
        min-width: 0;
    }

    .nav-profile-username {
        max-width: 100%;
    }

    .nav-profile-treasure {
        font-size: 0.7rem;
        padding: 2px 8px;
    }

    .nav-profile-dropdown {
        right: 0;
        left: auto;
        top: auto;
        bottom: calc(100% + 8px);
        /* Never exceed the slide-in sidebar width; shrink text to fit instead */
        min-width: 0;
        width: max-content;
        max-width: 210px;
    }

    .nav-dropdown-info {
        max-width: 100%;
    }

    .nav-dropdown-username {
        font-size: clamp(0.7rem, 3.4vw, 0.95rem);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    .nav-profile-link,
    .nav-profile-signout {
        font-size: clamp(0.55rem, 2.6vw, 0.65rem);
        letter-spacing: 0.14em;
        white-space: nowrap;
    }

    .nav-dropdown-grid .nav-profile-link {
        font-size: 0.55rem;
        letter-spacing: 0.1em;
        padding: 10px 4px 8px;
    }

    .nav-lang-btn {
        font-size: 1rem;
    }

    .nav-lang-btn.has-code {
        width: auto;
        padding: 0 10px 0 9px;
    }

    /* Opening upward inside a scrolling sidebar leaves too little room, so the language list
       is shorter here than on desktop. */
    .nav-lang-menu {
        max-height: 50vh;
    }

    .nav-social {
        grid-template-columns: repeat(3, 38px);
        gap: 8px;
        padding: 8px;
        margin-bottom: 0;
    }

    .nav-social a {
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
    }

    header.expanded {
        width: 230px;
    }

    .backdrop.expanded {
        display: block;
    }

    .nav-toggle {
        display: flex;
        margin: 10px;
        justify-content: center;
        transition: transform 0.5s;
    }

    .nav-toggle.expanded {
        transform: rotate(90deg);
    }

    .nav-toggle button {
        height: 40px;
        width: 40px;
    }

    .action-bar {
        position: fixed;
        bottom: 0;
        top: auto;
        width: 100%;
        justify-content: space-between;
        z-index: 1002;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

    .page-title {
        font-size: 24px;
        margin-left: 10px;
        margin-right: 25px;
    }

    footer {
        display: none;
    }

    .sidebar-footer {
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-end;
        align-items: center;
        column-gap: 12px;
        row-gap: 4px;
        padding: 10px 10px 80px;
        width: 100%;
        box-sizing: border-box;
        border-top: 1px solid rgba(255, 191, 0, 0.08);
    }

    /* Keep the copyright on its own line; let the two policy links share a row
       (they wrap to separate lines only if they can't fit side by side). */
    .sidebar-footer .footer-copy {
        flex: 1 1 100%;
        font-family: Arial, sans-serif;
        font-size: 9px;
        color: rgba(240, 236, 230, 0.4);
        text-align: right;
    }

    .sidebar-footer a {
        display: inline-block;
        font-family: Arial, sans-serif;
        font-size: 10px;
        color: rgba(255, 191, 0, 0.5);
        letter-spacing: 0.5px;
        padding: 2px 0;
        margin: 0;
        border-radius: 0;
    }

    .sidebar-footer a:hover {
        color: rgba(255, 191, 0, 0.85);
        background: none;
        transform: none;
    }
}

/* Short slide-in nav: only on screens too short for the default spacing,
   trim link spacing just enough so every item (incl. the footer links) fits.
   Taller screens keep the comfortable default spacing above untouched.
   overflow-y:auto on the header is the fallback for anything still too short. */
@media only screen and (max-width: 767px) and (max-height: 780px), only screen and (hover: none) and (max-height: 780px) {
    .nav-logo {
        padding: 9px 0;
    }
    .nav-logo img {
        height: 32px;
        max-height: 32px;
    }
    header nav a {
        margin-top: 3px;
        padding-top: 3px;
        padding-bottom: 3px;
        font-size: 0.85rem;
    }
    .nav-profile {
        margin-top: 5px;
    }
    .nav-social {
        gap: 6px;
        padding: 6px;
    }
    .sidebar-footer {
        padding-bottom: 70px;
    }
}

/* Mobile styles (Landscape Mode) */
@media (orientation: landscape) and (hover: none) and (pointer: coarse) {

}

/* ── Larger Text (Settings › Accessibility, opt-in) ───────────────────────────
   auth.js toggles .larger-text on <body> for every page EXCEPT the live game board
   (the /play page, which always contains .board-outer) so the dense board layout is
   never resized. Scope is a curated allow-list of readable prose containers — grids,
   nav, buttons, chips, and stat panels keep their exact sizing so no fixed UI breaks.
   em units bump each element ~12.5% relative to its own size, so text reflows within
   its container. */
body.larger-text :is(
    .legal-page, .lore-content, .about-page, .tr-page, .contact-page,
    .am-page, .pt-page, .htp-page, .events-page
) :is(p, li, dd, dt, blockquote) {
    font-size: 1.125em;
}
body.larger-text .settings-row-desc {
    font-size: 1.125em;
}
/* ── Android "get the app" prompt (fragments/android-install.html) ────────── */
.android-install-overlay {
    position: fixed;
    inset: 0;
    /* Above the header (1001), the nav backdrop (999) and the profile dropdown (2000). */
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.android-install-overlay[hidden] {
    display: none;
}

.android-install-overlay.open {
    opacity: 1;
}

.android-install-box {
    position: relative;
    width: 100%;
    max-width: 400px;
    padding: 40px 28px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    background: linear-gradient(135deg, rgba(30, 25, 15, 0.98), rgba(20, 15, 10, 0.98));
    border: 1px solid rgba(212, 160, 23, 0.4);
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(212, 160, 23, 0.12);
    transform: translateY(16px) scale(0.98);
    transition: transform 0.25s ease;
}

.android-install-overlay.open .android-install-box {
    transform: none;
}

.android-install-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;   /* override main.css button { height: 30px } */
    padding: 0;
    background: transparent;
    color: #c9a96e;
    font-size: 1rem;
    line-height: 1;
    border-radius: 50%;
}

.android-install-close:hover {
    background: rgba(255, 191, 0, 0.12);
    color: #ffd700;
}

.android-install-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(184, 134, 11, 0.25), rgba(212, 160, 23, 0.25));
    border: 1px solid rgba(201, 169, 110, 0.5);
    color: #ffd700;
    font-size: 2rem;
    box-shadow: 0 6px 20px rgba(212, 160, 23, 0.25);
}

.android-install-title {
    font-family: 'HwyGothic', sans-serif;
    font-size: 1.6rem;
    font-weight: bold;
    color: #fff;
    margin: 4px 0 0;
    letter-spacing: 0.05em;
    line-height: 1.15;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
}

.android-install-text {
    margin: 0;
    font-size: 0.95rem;
    color: #e8e0ce;
    line-height: 1.55;
}

/* Google's official badge (646x250, clear space baked in): only scaled, never restyled. */
.android-install-cta {
    display: inline-block;
    margin-top: 8px;
    line-height: 0;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.android-install-cta img {
    height: 72px;
    width: auto;
}

.android-install-cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.android-install-dismiss {
    height: auto;   /* override main.css button { height: 30px } */
    padding: 8px 16px;
    background: transparent;
    color: #c9a96e;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.android-install-dismiss:hover {
    background: transparent;
    color: #ffd700;
}

.android-install-trademark {
    margin: 0;
    font-size: 0.68rem;
    line-height: 1.4;
    color: #8f8468;
}

/* ── NAV GROUPS (LEARN / STORE dropdowns) ───────────────────
   Markup in fragments/chrome.html. Desktop: the menu opens while the group is hovered or focused.
   Slide-in panel (phones, touch, 768–1024px windows): the caret button expands the sub-links inline
   (scripts.js toggles .open). In the MORE overflow menu the group renders as a block of rows. */
.nav-group {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.nav-group-row {
    display: flex;
    align-items: center;
}

.nav-group-toggle {
    display: none; /* desktop: hovering the group opens the menu */
    height: auto;
    width: auto;
    padding: 4px 8px;
    margin: 0;
    background: transparent;
    border: none;
    color: rgba(255, 191, 0, 0.6);
    font-size: 0.8rem;
    cursor: pointer;
}

.nav-group-toggle .nav-caret {
    transition: transform 0.18s ease;
}

.nav-group.open .nav-group-toggle .nav-caret {
    transform: rotate(180deg);
}

.nav-group-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 210px;
    flex-direction: column;
    background: rgba(12, 12, 12, 0.97);
    border: 1px solid rgba(255, 191, 0, 0.18);
    border-radius: 10px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 2000;
    text-align: left;
}

/* Invisible bridge over the 8px gap so the pointer can travel from the link into the menu. */
.nav-group-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}

@media only screen and (min-width: 1025px) and (hover: hover) {
    .nav-group:hover > .nav-group-menu,
    .nav-group:focus-within > .nav-group-menu {
        display: flex;
    }

    .nav-group:hover > .nav-group-row .nav-group-link {
        background-color: rgba(255, 191, 0, 0.1);
        color: #ffd966;
        border-color: rgba(255, 191, 0, 0.35);
    }
}

header nav .nav-group-menu a {
    display: block;
    width: 100%;
    text-transform: uppercase;
    padding: 11px 14px;
    margin: 0;
    border: none;
    border-radius: 0;
    box-sizing: border-box;
    color: #8a7a6a;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-align: left;
    white-space: nowrap;
    box-shadow: none;
}

header nav .nav-group-menu a:first-child {
    border-radius: 10px 10px 0 0;
}

header nav .nav-group-menu a:last-child {
    border-radius: 0 0 10px 10px;
}

header nav .nav-group-menu a:hover {
    color: #ffbf00;
    background-color: rgba(255, 191, 0, 0.06);
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

/* A group that overflowed into the MORE menu: flat rows, sub-links indented under their parent. */
header nav .nav-more-menu .nav-group,
header nav .nav-more-menu .nav-group-row {
    display: block;
}

header nav .nav-more-menu .nav-group-toggle {
    display: none;
}

header nav .nav-more-menu .nav-group-menu {
    display: block;
    position: static;
    min-width: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

header nav .nav-more-menu .nav-group-menu::before {
    display: none;
}

header nav .nav-more-menu .nav-group-menu a {
    padding-left: 28px;
    font-size: 0.6rem;
    border-radius: 0;
}

/* Slide-in panel: same query scripts.js uses for panelMql. The caret sits left of the link so the
   label stays flush with the other right-aligned links; sub-links collapse by default so the panel
   keeps its height on short screens. */
@media only screen and (max-width: 1024px), only screen and (hover: none) {
    .nav-group {
        flex-direction: column;
        align-items: flex-end;
        width: 100%;
    }

    .nav-group-row {
        justify-content: flex-end;
    }

    .nav-group-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        order: -1;
        margin-top: 8px;
        padding: 6px 8px;
    }

    .nav-group-menu {
        display: none;
        position: static;
        min-width: 0;
        width: 100%;
        padding: 0 0 4px;
        align-items: flex-end;
        background: none;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .nav-group-menu::before {
        display: none;
    }

    .nav-group.open .nav-group-menu {
        display: flex;
    }

    header nav .nav-group-menu a,
    header nav .nav-group-menu a:first-child,
    header nav .nav-group-menu a:last-child {
        display: block;
        width: auto;
        padding: 4px 9px;
        margin: 4px 6px 0 0;
        font-size: 0.72rem;
        letter-spacing: 0.14em;
        color: rgba(255, 191, 0, 0.55);
        text-align: right;
        border-radius: 6px;
    }
}

/* ── FULL SITE FOOTER (content pages; fragments/chrome.html siteFooter(true)) ──
   The app-shell pages keep the slim 70px <footer> above; their viewport math depends on it. */
footer.site-footer {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 40px 24px 18px;
    text-align: left;
}

.site-footer-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(160px, 1.2fr);
    gap: 28px 32px;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    box-sizing: border-box;
}

.site-footer-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.site-footer-heading {
    margin: 0 0 8px;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.7rem;
    font-weight: normal;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 191, 0, 0.75);
}

footer.site-footer .site-footer-col a {
    display: inline-block;
    padding: 4px 0;
    margin: 0;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(240, 236, 230, 0.5);
    border-radius: 0;
}

footer.site-footer .site-footer-col a:hover {
    color: #ffd966;
    transform: none;
    background: none;
}

.site-footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
}

.site-footer-logo img {
    height: 40px;
    opacity: 0.8;
}

.site-footer-social {
    display: flex;
    gap: 6px;
}

footer.site-footer .site-footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(255, 191, 0, 0.15);
    color: rgba(255, 191, 0, 0.6);
    font-size: 0.95rem;
}

footer.site-footer .site-footer-social a:hover {
    color: #ffd966;
    border-color: rgba(255, 191, 0, 0.45);
    background: rgba(255, 191, 0, 0.08);
    transform: none;
}

.site-footer-bottom {
    width: 100%;
    max-width: 1140px;
    margin: 28px auto 0;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 191, 0, 0.08);
    text-align: center;
    font-size: 11px;
}

@media only screen and (max-width: 1024px) {
    .site-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer-brand {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

/* ── "Back to Learning" crumb on LEARN sub-pages ─────────────────── */
.learn-back-row {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 8px 24px 40px;
    box-sizing: border-box;
}

.learn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: rgba(12, 12, 12, 0.85);
    border: 1px solid rgba(201, 169, 110, 0.25);
    border-radius: 8px;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #c9a96e;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.learn-back:hover {
    background: rgba(201, 169, 110, 0.14);
    border-color: rgba(201, 169, 110, 0.5);
    color: #c9a96e;
    transform: none;
}

/* ── Nav group extras: subscriber crown on premium rows, thin divider between row groups ── */
.nav-group-crown {
    margin-left: 8px;
    font-size: 0.55rem;
    color: #ffbf00;
    opacity: 0.8;
    vertical-align: middle;
}

.nav-group-divider {
    height: 1px;
    margin: 4px 0;
    background: rgba(255, 191, 0, 0.12);
}

@media only screen and (max-width: 1024px), only screen and (hover: none) {
    .nav-group-divider {
        display: none;
    }
}