/* NPE Tournament: shared layout, typography, navigation and components. */
:root {
    color-scheme: dark;
    --charcoal: #111612;
    --white: #F7F8F4;
    --green: #71C26F;
    --surface: #1A201C;
    --surface-raised: #202922;
    --line: rgba(247, 248, 244, .13);
    --line-strong: rgba(247, 248, 244, .21);
    --muted: rgba(247, 248, 244, .65);
    --muted-dim: rgba(247, 248, 244, .46);
    --green-soft: rgba(113, 194, 111, .10);
    --green-line: rgba(113, 194, 111, .32);
    --page-width: 1200px;
    --radius-lg: 20px;
    --radius-md: 14px;
    --shadow: 0 24px 64px rgba(0, 0, 0, .18);
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    background: var(--charcoal);
    color: var(--white);
    font-family: Vazirmatn, IRANSansX, Tahoma, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}

body::before {
    position: fixed;
    top: -180px;
    inset-inline-start: -210px;
    z-index: -1;
    width: 440px;
    height: 440px;
    content: "";
    pointer-events: none;
    background: radial-gradient(circle, rgba(113, 194, 111, .055), transparent 70%);
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: var(--green);
}

button, input, select, textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
    opacity: .65;
}

img, svg {
    max-width: 100%;
}

[hidden] {
    display: none !important;
}

::selection {
    background: var(--green);
    color: var(--charcoal);
}

:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 4px;
}

.container {
    width: min(calc(100% - 40px), var(--page-width));
    margin-inline: auto;
}

.skip-link {
    position: fixed;
    top: -100px;
    inset-inline-start: 18px;
    z-index: 200;
    background: var(--white);
    color: var(--charcoal);
    padding: 8px 14px;
    border-radius: 8px;
}

.skip-link:focus {
    top: 10px;
}

.topline {
    border-bottom: 1px solid var(--line);
    background: rgba(247, 248, 244, .025);
}

.topline-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 35px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--muted);
}

.topline-label {
    color: var(--green);
    direction: ltr;
    unicode-bidi: isolate;
}

.topline-date {
    direction: ltr;
    unicode-bidi: isolate;
}

.site-header {
    position: relative;
    z-index: 50;
    background: rgba(17, 22, 18, .97);
    border-bottom: 1px solid var(--line);
}

.header-inner {
    display: flex;
    align-items: center;
    min-height: 88px;
    gap: 24px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 45px;
    height: 45px;
    border: 1px solid var(--green-line);
    border-radius: 13px;
    background: var(--green-soft);
    color: var(--green);
}

.brand-name {
    display: block;
    font: 800 26px/1.05 Arial, sans-serif;
    letter-spacing: -.07em;
}

.brand-name span {
    color: var(--green);
}

.brand-caption {
    display: block;
    margin-top: 7px;
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
}

.nav-link {
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 9px 14px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 650;
    transition: background .15s ease, color .15s ease;
}

.nav-link:hover {
    background: rgba(247, 248, 244, .055);
    color: var(--white);
}

.nav-link[aria-current="page"] {
    color: var(--green);
    background: var(--green-soft);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 43px;
    padding: 8px 17px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    border: 1px solid var(--line-strong);
    background: transparent;
    color: var(--white);
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.btn:hover {
    color: var(--white);
    border-color: var(--green-line);
    background: var(--green-soft);
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    background: var(--green);
    border-color: var(--green);
    color: var(--charcoal);
}

.btn-primary:hover {
    background: var(--white);
    color: var(--charcoal);
    border-color: var(--white);
}

.btn-icon {
    position: relative;
    width: 43px;
    padding: 8px;
}

.notification-count {
    position: absolute;
    top: -5px;
    inset-inline-end: -5px;
    min-width: 19px;
    height: 19px;
    padding-inline: 4px;
    border-radius: 10px;
    background: var(--green);
    color: var(--charcoal);
    border: 2px solid var(--charcoal);
    display: grid;
    place-items: center;
    font: 800 10px/1 Arial, sans-serif;
}

.menu-toggle {
    display: none;
}

.tournament-strip {
    border-bottom: 1px solid var(--line);
}

.tournament-strip-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 56px;
    padding-block: 9px;
}

.event-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 800;
}

.event-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    flex: 0 0 auto;
}

.event-facts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.fact {
    font-size: 11px;
    color: var(--muted);
}

.fact + .fact::before {
    content: "•";
    margin-inline: 9px;
    color: var(--muted-dim);
}

.site-main {
    min-height: calc(100vh - 330px);
    padding-block: 38px 72px;
}

.page-heading {
    margin-bottom: 26px;
}

.eyebrow {
    color: var(--green);
    font-size: 11px;
    letter-spacing: .13em;
    font-weight: 800;
}

.page-title {
    margin: 8px 0;
    font-weight: 900;
    line-height: 1.45;
    font-size: clamp(24px, 4vw, 40px);
}

.page-description {
    margin: 0;
    max-width: 700px;
    color: var(--muted);
    font-size: 14px;
}

.panel {
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 24px;
}

.panel-light {
    background: var(--white);
    color: var(--charcoal);
}

.panel-light a {
    color: var(--charcoal);
}

.panel-light a:hover {
    color: var(--charcoal);
    text-decoration: underline;
}

.section-label {
    color: var(--green);
    font-size: 12px;
    font-weight: 800;
}

.muted {
    color: var(--muted);
}

.text-green {
    color: var(--green);
}

.ltr {
    direction: ltr;
    unicode-bidi: isolate;
}

.site-footer {
    border-top: 1px solid var(--line);
    background: rgba(247, 248, 244, .018);
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding-block: 30px;
}

.footer-brand {
    font: 800 19px/1 Arial, sans-serif;
    letter-spacing: -.05em;
}

.footer-brand span {
    color: var(--green);
}

.footer-note {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 11px;
}

.footer-links {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--muted);
}

.site-legal {
    border-top: 1px solid var(--line);
    text-align: center;
    color: var(--muted-dim);
    padding: 14px 20px;
    font-size: 10px;
}

.toast {
    position: fixed;
    bottom: 20px;
    inset-inline-end: 20px;
    z-index: 90;
    width: min(360px, calc(100% - 40px));
    padding: 12px 18px;
    border: 1px solid var(--green-line);
    background: var(--surface-raised);
    border-radius: 12px;
    box-shadow: var(--shadow);
    font-size: 13px;
}

@media (max-width: 900px) {
    .header-inner {
        gap: 14px;
    }

    .site-nav {
        gap: 0;
    }

    .nav-link {
        padding-inline: 10px;
    }

    .brand-caption {
        display: none;
    }
}

@media (max-width: 760px) {
    .container {
        width: min(calc(100% - 28px), var(--page-width));
    }

    .header-inner {
        min-height: 72px;
    }

    .brand-mark {
        width: 41px;
        height: 41px;
    }

    .brand-name {
        font-size: 23px;
    }

    .menu-toggle {
        display: inline-flex;
    }

    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin: 0;
        padding: 12px 14px 16px;
        flex-direction: column;
        align-items: stretch;
        border-bottom: 1px solid var(--line);
        background: var(--charcoal);
        box-shadow: var(--shadow);
    }

    .site-nav.is-open {
        display: flex;
    }

    .nav-link {
        padding: 11px 14px;
    }

    .header-actions {
        margin-inline-start: auto;
    }

    .header-actions > .btn-primary {
        display: none;
    }

    .tournament-strip-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
        padding-block: 11px;
    }

    .event-facts {
        gap: 4px;
    }

    .site-main {
        padding-block: 26px 48px;
    }

    .footer-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .topline-inner {
        gap: 6px;
        font-size: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* 2026 tournament visual polish: charcoal, warm white and restrained green. */
.npe-locale-box {display:flex;align-items:center;gap:7px;padding:5px 8px;border:1px solid var(--line-strong,rgba(247,248,244,.2));border-radius:11px;background:rgba(255,255,255,.03);color:var(--muted,#abb7ad);font:700 10px Arial,sans-serif;white-space:nowrap}
.npe-locale-select {padding:5px 17px 5px 5px;border:0;background:transparent;color:var(--white,#f7f8f4);font:700 12px Arial,sans-serif;max-width:145px;outline-offset:3px;cursor:pointer}
.npe-locale-select option {background:#111612;color:#f7f8f4}
.site-main {position:relative}
.site-main::before {content:"";pointer-events:none;position:absolute;inset:0 0 auto;height:280px;background:radial-gradient(ellipse 65% 80% at 48% -10%,rgba(113,194,111,.075),transparent 80%);z-index:0}
.site-main>.container {position:relative;z-index:1}
.topline-label,.topline-date {font-variant-numeric:tabular-nums}
.tournament-strip {border-bottom:1px solid rgba(113,194,111,.22)}
.site-header .brand-mark {box-shadow:0 0 26px rgba(113,194,111,.12)}
.lb-prize {position:relative;isolation:isolate;background:linear-gradient(148deg,#1e2a20 0%,#171d19 70%);box-shadow:0 18px 50px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.06);border-color:rgba(113,194,111,.32)}
.lb-prize::before {content:"🏆";position:absolute;top:-23px;left:50%;transform:translateX(-50%);font-size:38px;line-height:1;filter:drop-shadow(0 4px 9px rgba(0,0,0,.4));pointer-events:none}
.lb-prize-value {text-shadow:0 0 25px rgba(113,194,111,.22)}
.lb-stat,.lb-section .lb-table-shell,.db-metric {box-shadow:0 10px 28px rgba(0,0,0,.10)}
[data-locale="en"] body,[data-locale="ru"] body {font-family:Inter,"Segoe UI",Arial,sans-serif}
[data-locale="ar"] body {font-family:Tahoma,"Noto Sans Arabic",Arial,sans-serif}
[data-locale="en"] .site-nav,[data-locale="ru"] .site-nav {margin-inline-start:auto}
@media(max-width:720px){.header-actions{gap:5px}.npe-locale-box span{display:none}.npe-locale-box{padding:5px}.npe-locale-select{max-width:80px;font-size:10px}.admin-topbar-actions .npe-locale-select{max-width:85px}}

/* Keep the trophy clear of the prize caption at every viewport size. */
.lb-prize {padding-top:44px}

/* NPE custom language picker (native select retained for existing i18n.js). */
.npe-language{position:relative;display:inline-flex;z-index:100;flex-shrink:0;direction:ltr}
.npe-language-button{display:flex;align-items:center;gap:9px;min-height:42px;padding:7px 11px;border:1px solid rgba(113,194,111,.35);border-radius:12px;background:#1b241d;color:#f7f8f4;box-shadow:0 3px 15px rgba(0,0,0,.1);font-size:12px;font-weight:750;white-space:nowrap;transition:border-color .15s,background .15s}
.npe-language-button:hover,.npe-language.is-open .npe-language-button{border-color:#71c26f;background:#202b22}
.npe-language-globe{font-size:17px;line-height:1}
.npe-language-current{direction:auto;unicode-bidi:plaintext;min-width:53px;text-align:center}
.npe-language-chevron{display:block;width:16px;height:16px;flex:0 0 16px;color:#71c26f;transition:transform .18s ease}
.npe-language.is-open .npe-language-chevron{transform:rotate(180deg)}
.npe-language-menu{position:absolute;top:calc(100% + 8px);right:0;left:auto;width:190px;padding:7px;border:1px solid rgba(113,194,111,.26);border-radius:14px;background:#1b241d;box-shadow:0 16px 38px rgba(0,0,0,.35);direction:ltr;z-index:300}
.npe-language-menu[hidden]{display:none!important}
.npe-language-choice{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border:0;border-radius:9px;background:transparent;color:#f7f8f4;text-align:left;font-size:13px;cursor:pointer;white-space:nowrap}
.npe-language-choice:hover,.npe-language-choice:focus-visible{background:rgba(113,194,111,.12)}
.npe-language-choice.is-active{background:rgba(113,194,111,.18);color:#9fe09c}
.npe-language-choice span:first-child{font-size:19px}
.npe-language-choice small{margin-left:auto;opacity:.55;font:700 10px Arial,sans-serif}
.npe-language-native{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:0!important;border:0!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important;clip-path:inset(50%)!important}
@media(max-width:760px){.npe-language-button{padding:7px 9px;gap:6px;min-height:39px}.npe-language-menu{width:180px}}

/* Consistent vector flags in the existing language dropdown. */
.npe-language-flag{display:inline-block;width:25px;height:17px;object-fit:cover;border-radius:3px;vertical-align:middle;flex:0 0 25px;box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.npe-language-current{display:inline-flex;align-items:center;gap:6px}
.npe-language-choice .npe-language-flag{font-size:initial}

/* Mobile navigation sign-out (desktop keeps the existing header control). */
.mobile-logout { display: none; }
@media (max-width: 760px) {
  .site-nav .mobile-logout { display: block; width: 100%; text-align: start;
    border: 1px solid rgba(247,248,244,.18); border-radius: 10px;
    color: #F7F8F4; background: transparent; cursor: pointer;
    font: inherit; }
}