/* esagamesv5 public header menus (assets/includes/navbar.tpl). Loaded by v4's head via
   {assetExists file="custom.css"} after esa26-chrome.css. Scope: #header #navbar (desktop) and the
   drawer block at the end (#header #navbar-mobile, under 993px); colours are the v4 chrome tokens
   (#header is a dark island in both themes, so the panels are always dark). */

.esa-mm-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* moved to <body> by the script */

/* ---- trigger: a <button> dressed exactly like the sibling <a> items (chrome v3 bar rules) ---- */
#header #navbar .esa-mm { position: relative; }
#header #navbar .esa-mm-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 10px 12px;
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0;
    white-space: nowrap;
    color: var(--esa26c-ink);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: color var(--esa26c-motion);
}
#header #navbar .esa-mm-btn::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 4px;
    height: 2px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .18s ease-out;
    pointer-events: none;
}
#header #navbar .esa-mm-chev {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: var(--esa26c-ink-dim);
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke var(--esa26c-motion), transform var(--esa26c-motion);
}
#header #navbar .esa-mm:hover > .esa-mm-btn,
#header #navbar .esa-mm.open > .esa-mm-btn,
#header #navbar .esa-mm:focus-within > .esa-mm-btn { color: var(--brand); }
#header #navbar .esa-mm.open > .esa-mm-btn::after,
#header #navbar .esa-mm:focus-within > .esa-mm-btn::after { transform: scaleX(1); }
#header #navbar .esa-mm.open > .esa-mm-btn .esa-mm-chev { stroke: var(--brand); transform: rotate(180deg); }
#header #navbar .esa-mm-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
#header #navbar .esa-mm-btn:focus:not(:focus-visible) { outline: 0; }
@media (min-width: 993px) and (max-width: 1199px) {
    #header #navbar .esa-mm-btn { padding: 10px 8px; font-size: 14px; }
    #header #navbar .esa-mm-btn::after { left: 8px; right: 8px; }
    /* six items do not fit the compact bar; for guests the Services item is only a sign-in prompt and the
       Sign in button sits right beside it. The chrome forces display:flex on these li, so hide by size. */
    body.is-guest #header #navbar .navbar-primary > li.nav-services { width: 0; overflow: hidden; visibility: hidden; }
}

/* ---- panel: the positioned wrapper carries the hover gap, the box is the visible surface ---- */
#header #navbar .esa-mm-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1300;
    width: 320px;
    padding-top: 12px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity var(--esa26c-motion), transform var(--esa26c-motion), visibility 0s linear .16s;
}
#header #navbar .esa-mm.open > .esa-mm-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
}
#header #navbar .esa-mm-services { width: 540px; }
/* fit() in navbar.tpl positions every panel (centred under its trigger, or the header container's
   content box for .esa-mm-wide) and sets --esa-mm-tip to the trigger's centre; the pointer sits in the 12px gap. */
#header #navbar .esa-mm-wide { width: min(1320px, calc(100vw - 64px)); }
#header #navbar .esa-mm-panel::before {
    content: "";
    position: absolute;
    top: 7px;
    left: calc(var(--esa-mm-tip, 40px) - 6px);
    z-index: 1;
    width: 12px;
    height: 12px;
    background: var(--esa26c-surface-2);
    border-top: 1px solid var(--esa26c-line-2);
    border-left: 1px solid var(--esa26c-line-2);
    border-top-left-radius: 2px;
    transform: rotate(45deg);
}
#header #navbar .esa-mm-box {
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    padding: 16px;
    color: var(--esa26c-ink);
    background: var(--esa26c-surface-2);
    border: 1px solid var(--esa26c-line-2);
    border-radius: 12px;
    text-align: left;
}

/* ---- columns, labels, rows ---- */
#header #navbar .esa-mm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
#header #navbar .esa-mm-cols3 { grid-template-columns: 1fr 1fr 1fr; }
#header #navbar .esa-mm-col + .esa-mm-col { padding-left: 16px; border-left: 1px solid var(--esa26c-line); }
#header #navbar .esa-mm-label {
    margin: 0 0 4px;
    padding: 6px 10px 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--esa26c-ink-dim);
}
#header #navbar .esa-mm-list + .esa-mm-label { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--esa26c-line); }
#header #navbar .esa-mm-list { list-style: none; margin: 0; padding: 0; }
#header #navbar .esa-mm-list > li { margin: 0; padding: 0; }
#header #navbar .esa-mm-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--esa26c-ink);
    text-decoration: none;
    transition: background-color var(--esa26c-motion), color var(--esa26c-motion);
}
#header #navbar .esa-mm-list a:hover,
#header #navbar .esa-mm-list a:focus-visible { background: var(--esa26c-surface); color: var(--brand); text-decoration: none; }
#header #navbar .esa-mm-list a:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
#header #navbar .esa-mm-ic {
    flex: none;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--esa26c-ink-dim);
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke var(--esa26c-motion);
}
#header #navbar .esa-mm-list a:hover .esa-mm-ic,
#header #navbar .esa-mm-list a:focus-visible .esa-mm-ic { stroke: var(--brand); }
#header #navbar .esa-mm-t { display: flex; flex-direction: column; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
#header #navbar .esa-mm-t small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; line-height: 1.35; color: var(--esa26c-ink-mute); }
#header #navbar .esa-mm-n {
    flex: none;
    margin-left: auto;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    color: var(--esa26c-ink-mute);
    border: 1px solid var(--esa26c-line-2);
    border-radius: 999px;
    white-space: nowrap;
}
#header #navbar .esa-mm-n.is-due { color: var(--brand); border-color: var(--esa26c-line-brand); }

/* ---- compact game grid inside the Store column: names only, as many columns as fit ---- */
#header #navbar .esa-mm-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 4px; }
#header #navbar .esa-mm-games a { padding: 5px 10px; font-size: 13px; font-weight: 500; }
#header #navbar .esa-mm-games a::before {
    content: "";
    flex: none;
    width: 5px;
    height: 5px;
    margin-right: -4px;
    border-radius: 50%;
    background: var(--esa26c-ink-dim);
    transition: background-color var(--esa26c-motion);
}
#header #navbar .esa-mm-games a:hover::before,
#header #navbar .esa-mm-games a:focus-visible::before { background: var(--brand); }

/* ---- chips (outlined, like the rest of the dark island) ---- */
#header #navbar .esa-mm-chip {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    flex: none;
    margin-left: auto;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--brand);
    background: var(--esa26c-chip-bg);
    border: 1px solid var(--esa26c-chip-line);
    border-radius: 999px;
}

/* ---- Store: section rail (tabs) on the left, the active section's cards on the right ---- */
#header #navbar .esa-mm-x { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 0 20px; align-items: start; }
#header #navbar .esa-mm-tabs { display: flex; flex-direction: column; gap: 4px; padding-right: 20px; border-right: 1px solid var(--esa26c-line); }
#header #navbar .esa-mm-tab {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    font: inherit;
    text-align: left;
    color: var(--esa26c-ink);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--esa26c-motion);
}
#header #navbar .esa-mm-tic {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border: 1px solid var(--esa26c-line-2);
    border-radius: 9px;
    transition: border-color var(--esa26c-motion), background-color var(--esa26c-motion);
}
#header #navbar .esa-mm-tab .esa-mm-t { flex: 1; font-size: 13.5px; font-weight: 700; }
#header #navbar .esa-mm-tab .esa-mm-t small { font-size: 11px; color: var(--esa26c-ink-mute); }
#header #navbar .esa-mm-chev-r { flex: none; margin-left: auto; opacity: 0; transform: rotate(-90deg) translateY(-4px); transition: opacity var(--esa26c-motion), transform var(--esa26c-motion), stroke var(--esa26c-motion); }
#header #navbar .esa-mm-tab:hover,
#header #navbar .esa-mm-tab.is-active { border-color: var(--esa26c-line-brand); }
#header #navbar .esa-mm-tab:hover .esa-mm-t,
#header #navbar .esa-mm-tab.is-active .esa-mm-t { color: var(--brand); }
#header #navbar .esa-mm-tab:hover .esa-mm-tic,
#header #navbar .esa-mm-tab.is-active .esa-mm-tic { background: var(--esa26c-brand-soft); border-color: var(--esa26c-line-brand); }
#header #navbar .esa-mm-tab:hover .esa-mm-tic .esa-mm-ic,
#header #navbar .esa-mm-tab.is-active .esa-mm-tic .esa-mm-ic { stroke: var(--brand); }
#header #navbar .esa-mm-tab.is-active .esa-mm-chev-r { opacity: 1; transform: rotate(-90deg); stroke: var(--brand); }
#header #navbar .esa-mm-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
#header #navbar .esa-mm-tab:focus:not(:focus-visible) { outline: 0; }
#header #navbar .esa-mm-sec { min-width: 0; }
#header #navbar .esa-mm-sec[hidden] { display: none; }
#header #navbar .esa-mm-sechead { display: flex; flex-direction: column; gap: 2px; margin: 0 0 12px; padding: 4px 0 12px; border-bottom: 1px solid var(--esa26c-line); }
#header #navbar .esa-mm-sechead b { font-size: 15px; font-weight: 700; color: var(--esa26c-ink); }
#header #navbar .esa-mm-sechead span { font-size: 12.5px; line-height: 1.4; color: var(--esa26c-ink-mute); }
#header #navbar .esa-mm-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
#header #navbar .esa-mm-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 11px 12px;
    color: var(--esa26c-ink);
    background: transparent;
    border: 1px solid var(--esa26c-line-2);
    border-radius: 10px;
    text-decoration: none;
    transition: border-color var(--esa26c-motion);
}
#header #navbar .esa-mm-card-wide { grid-column: 1 / -1; }
#header #navbar .esa-mm-card > .esa-mm-ic:first-child { width: 20px; height: 20px; stroke: var(--brand); }
#header #navbar .esa-mm-go { width: 14px; height: 14px; margin-left: auto; transition: stroke var(--esa26c-motion), transform var(--esa26c-motion); }
#header #navbar .esa-mm-card:hover,
#header #navbar .esa-mm-card:focus-visible { color: var(--esa26c-ink); border-color: var(--esa26c-line-brand-hover); text-decoration: none; }
#header #navbar .esa-mm-card:hover .esa-mm-t,
#header #navbar .esa-mm-card:focus-visible .esa-mm-t { color: var(--brand); }
#header #navbar .esa-mm-card:hover .esa-mm-go { stroke: var(--brand); transform: translateX(2px); }
#header #navbar .esa-mm-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
#header #navbar .esa-mm-cards + .esa-mm-label { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--esa26c-line); }
#header #navbar .esa-mm-cards .esa-mm-feat { margin: 0; }

/* ---- the highlighted store card: brand hairline, flat surface, no fill ---- */
#header #navbar .esa-mm-feat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 6px 0 4px;
    padding: 14px;
    color: var(--esa26c-ink);
    background: var(--esa26c-surface);
    border: 1px solid var(--esa26c-line-brand);
    border-radius: 10px;
    text-decoration: none;
    transition: border-color var(--esa26c-motion);
}
#header #navbar .esa-mm-feat:hover,
#header #navbar .esa-mm-feat:focus-visible { border-color: var(--brand); color: var(--esa26c-ink); text-decoration: none; }
#header #navbar .esa-mm-feat:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
#header #navbar .esa-mm-feat .esa-mm-chip { margin-left: 0; }
#header #navbar .esa-mm-feat .esa-mm-t { font-size: 15px; font-weight: 700; }
#header #navbar .esa-mm-feat small { font-size: 12px; line-height: 1.4; color: var(--esa26c-ink-mute); }
#header #navbar .esa-mm-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--brand); }
#header #navbar .esa-mm-more .esa-mm-ic { width: 14px; height: 14px; stroke: var(--brand); transition: transform var(--esa26c-motion); }
#header #navbar .esa-mm-feat:hover .esa-mm-more .esa-mm-ic { transform: translateX(2px); }

/* ---- store foot: status line left, actions right ---- */
#header #navbar .esa-mm-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--esa26c-line);
}
#header #navbar .esa-mm-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}
#header #navbar .esa-mm-status:hover { color: var(--accent); text-decoration: underline; }
#header #navbar .esa-mm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
#header #navbar .esa-mm-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#header #navbar .esa-mm-cta {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--esa26c-ink);
    background: transparent;
    border: 1px solid var(--esa26c-line-2);
    border-radius: 8px;
    text-decoration: none;
    transition: color var(--esa26c-motion), border-color var(--esa26c-motion), background-color var(--esa26c-motion);
}
#header #navbar .esa-mm-cta:hover,
#header #navbar .esa-mm-cta:focus-visible { color: var(--brand); border-color: var(--esa26c-line-brand-hover); text-decoration: none; }
#header #navbar .esa-mm-cta:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
#header #navbar .esa-mm-cta.primary,
#header #navbar .esa-mm-cta.primary:hover,
#header #navbar .esa-mm-cta.primary:focus-visible { color: var(--brand-ink); background: var(--brand); border-color: var(--brand); }
#header #navbar .esa-mm-cta.primary:hover { background: var(--brand2); border-color: var(--brand2); }

/* ---- services, logged out ---- */
#header #navbar .esa-mm-signin { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 4px 4px 2px; }
#header #navbar .esa-mm-ic-lg { width: 28px; height: 28px; stroke: var(--brand); stroke-width: 1.5; }
#header #navbar .esa-mm-signin p { display: flex; flex-direction: column; gap: 3px; margin: 0; }
#header #navbar .esa-mm-signin b { font-size: 14px; font-weight: 700; color: var(--esa26c-ink); }
#header #navbar .esa-mm-signin span { font-size: 12.5px; line-height: 1.45; color: var(--esa26c-ink-mute); }
#header #navbar .esa-mm-signin .esa-mm-actions { margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
    #header #navbar .esa-mm-panel,
    #header #navbar .esa-mm-btn::after,
    #header #navbar .esa-mm-chev { transition: none; }
}
#header #navbar .esa-mm-status a { color: var(--accent); }
#header #navbar .esa-mm-status a:hover { text-decoration: underline; }

/* ---- drawer (under 993px): the Store item's five sections as an accordion. The stock chrome styles the
   Store row and the leaf links (.dropdown-menu a.dropdown-item); only the section headers are ours. ---- */
@media (max-width: 992px) {
    #header #navbar-mobile .esa-mm-msec { display: block; margin: 0; padding: 0; list-style: none; }
    #header #navbar-mobile .esa-mm-mtab {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 48px;
        margin: 0;
        padding: 10px 8px;
        font: inherit;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
        text-align: left;
        color: var(--esa26c-ink);
        background: transparent;
        border: 0;
        border-radius: 8px;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        transition: color var(--esa26c-motion);
    }
    #header #navbar-mobile .esa-mm-mtab .esa-mm-ic { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--brand); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
    #header #navbar-mobile .esa-mm-mtab .esa-mm-chev { flex: none; width: 12px; height: 12px; margin-left: auto; fill: none; stroke: var(--esa26c-ink-dim); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--esa26c-motion), transform var(--esa26c-motion); }
    #header #navbar-mobile .esa-mm-msec.esa-mobile-open > .esa-mm-mtab { color: var(--brand); }
    #header #navbar-mobile .esa-mm-msec.esa-mobile-open > .esa-mm-mtab .esa-mm-chev { stroke: var(--brand); transform: rotate(180deg); }
    #header #navbar-mobile .esa-mm-mtab:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
    #header #navbar-mobile .esa-mm-mtab:focus:not(:focus-visible) { outline: 0; }
    #header #navbar-mobile .esa-mm-mlinks { display: none; margin: 0 0 6px; padding: 0 0 2px 28px; list-style: none; }
    #header #navbar-mobile .esa-mm-msec.esa-mobile-open > .esa-mm-mlinks { display: block; }
    #header #navbar-mobile .esa-mm-mlinks .esa-mm-chip {
        display: inline-flex;
        align-items: center;
        margin-left: 8px;
        padding: 1px 7px;
        font-size: 10px;
        font-weight: 700;
        line-height: 16px;
        letter-spacing: .06em;
        text-transform: uppercase;
        white-space: nowrap;
        color: var(--brand);
        border: 1px solid var(--esa26c-line-brand);
        border-radius: 999px;
    }
    #header #navbar-mobile .esa-mm-mall { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--esa26c-line); }
    #header #navbar-mobile .esa-mm-mall .esa-mm-ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
}
