/* ==========================================================================
   Oasis community site

   The launcher's identity - dark, tarkov gold, Bender, square edges, thin
   metallic borders - on a layout that is a WEBSITE rather than a 1920x1080
   application window.

   WHY THIS IS NOT home-style.css SERVED THROUGH asset.php. That stylesheet
   opens with `body { height: 100vh; overflow: hidden; display: flex }` and
   `.launcher-window { width: 1920px; height: 1080px }`, which is exactly right
   for something imitating a desktop client and exactly wrong for a page a
   stranger opens on a phone. Undoing it would take more overrides than writing
   the layout, and every one of those overrides would be a thing to keep in step
   with someone else's file.

   What IS shared, and shared as the SAME BYTES rather than as a copy:
     assets/richtext.css   how saved rich text renders
     assets/controls.css   toggles, sliders, the drawn dropdown
     fonts/bender/*        the typeface
   All three are served out of the launcher tree by asset.php, so there is one
   copy of each on disk and no way for them to drift.

   The variables below are deliberately the same names and the same values as
   the launcher's, because controls.css is written against them. Change a value
   here and the shared controls change with the rest of the page.
   ========================================================================== */

/* ---------------------------------------------------------------- Bender ---
   Served from the launcher tree through asset.php. A relative url() inside a
   stylesheet resolves against the STYLESHEET's URL, so these have to be written
   here rather than inherited from home-style.css, whose paths would resolve
   against this docroot and find nothing. */
@font-face { font-family: 'Bender'; src: url('../asset.php?f=fonts/bender/bender.OTF') format('opentype'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bender'; src: url('../asset.php?f=fonts/bender/bender-bold.OTF') format('opentype'); font-weight: bold; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bender'; src: url('../asset.php?f=fonts/bender/bender-black.OTF') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bender'; src: url('../asset.php?f=fonts/bender/bender-light.OTF') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bender'; src: url('../asset.php?f=fonts/bender/bender-italic.OTF') format('opentype'); font-weight: normal; font-style: italic; font-display: swap; }
@font-face { font-family: 'Bender'; src: url('../asset.php?f=fonts/bender/bender-bolditalic.OTF') format('opentype'); font-weight: bold; font-style: italic; font-display: swap; }

:root {
    --tarkov-gold: #b4a072;
    --tarkov-gold-dim: #8b7a54;
    --tarkov-bg: #090909;
    --panel-base: #141414;
    --panel-border: #2c2b29;
    --text-primary: #d1cfcb;
    --text-muted: #6e6d6b;
    --status-online: #3db846;
    --status-warning: #b8463d;
    --glow-gold: rgba(180, 160, 114, 0.4);
    --glow-gold-heavy: rgba(180, 160, 114, 0.8);

    /* controls.css reads these three. Same names, same values as the launcher. */
    --oasis-focus-outline: 2px solid var(--tarkov-gold);
    --oasis-focus-offset: 2px;
    --oasis-field-bg: #080808;

    /* Widened from 1180 with the seven-entry nav: the header has to hold DOWNLOAD through
       TROUBLESHOOTING plus the account entries on one line, and the stats and leaderboard
       tables have to hold a row of figures without a horizontal scrollbar. */
    --site-max: 1280px;
    --site-gutter: 24px;
}

/* ================================================================== base === */

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

html { -webkit-text-size-adjust: 100%; }

body.site {
    margin: 0;
    /* Tells the engine which way round this page is. It is the only way to reach the parts
       of a native control that no selector can: the calendar the date field on the releases
       form drops, the reveal button inside a password box, the spinners on a number box, and
       the option list a <select> still opens in the moment before select.js has enhanced it.
       Left on the default they are all drawn LIGHT - a white panel with a blue selection bar
       on a black form, which is the "white and oversized" that keeps being reported. The
       launcher states it too, in assets/admin.css, and for the same reason.

       The scrollbars this also affects are declared outright below, so they do not change. */
    color-scheme: dark;
    background:
        radial-gradient(circle at 50% -10%, #1b1b1b 0%, #070707 55%, #050505 100%),
        #050505;
    background-attachment: fixed;
    color: var(--text-primary);
    font-family: 'Bender', 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.65;
    /* NOT user-select: none. The launcher's global reset disables selection because
       it is pretending to be an application; a visitor here has to be able to copy
       an invite code and a SHA-256 checksum. */
}

/* Selected text is gold with black lettering, like every other highlight here.

   The launcher does not need this rule: home-style.css sets `user-select: none` on
   everything, because it is imitating a desktop application, so nothing is ever
   highlighted. This site deliberately does the opposite - an invite code and a
   SHA-256 exist to be copied, and .site-hash is `user-select: all` so one click
   takes the whole thing. That makes the browser's default highlight a large blue
   rectangle with white text, on the two gestures the site actively asks for. */
::selection { background: var(--tarkov-gold); color: #000; }
::-moz-selection { background: var(--tarkov-gold); color: #000; }

img { max-width: 100%; height: auto; }

a { color: var(--tarkov-gold); text-decoration: none; }
a:hover { color: #fff; }

h1, h2, h3, h4 { font-weight: 900; letter-spacing: 2px; margin: 0; }

code {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.92em;
    color: var(--tarkov-gold);
    background: #0b0b0b;
    border: 1px solid var(--panel-border);
    padding: 1px 5px;
}

/* The film grain over everything. Fixed, so it does not scroll with the page and
   give the whole site a texture that moves. */
.site-grain {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.16;
    mix-blend-mode: overlay;
    background:
        linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.12) 50%),
        linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    background-size: 100% 4px, 6px 100%;
}

/* Deliberately identical to home-style.css rather than merely similar. This is a
   separate docroot that cannot link that file, and a scrollbar that is nearly the
   launcher's is more jarring than one that is obviously different. */
* { scrollbar-width: thin; scrollbar-color: var(--tarkov-gold-dim) var(--tarkov-bg); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--tarkov-bg); border-left: 1px solid var(--panel-border); }
::-webkit-scrollbar-thumb { background: var(--tarkov-gold-dim); border: 2px solid var(--tarkov-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--tarkov-gold); }
::-webkit-scrollbar-corner { background: var(--tarkov-bg); }

.site-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--tarkov-gold);
    color: #000;
    padding: 10px 16px;
    font-weight: 900;
    letter-spacing: 2px;
}
.site-skip:focus { left: 8px; top: 8px; color: #000; }

/* ================================================================ header === */

.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(7, 7, 7, 0.94);
    border-bottom: 1px solid var(--panel-border);
    backdrop-filter: blur(6px);
}
.site-header-inner {
    max-width: var(--site-max);
    margin: 0 auto;
    padding: 0 var(--site-gutter);
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 66px;
}

.site-brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.site-brand-logo { max-height: 40px; width: auto; }
.site-brand-mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--tarkov-gold);
    color: var(--tarkov-gold);
    font-size: 22px;
    font-weight: 900;
    box-shadow: inset 0 0 16px rgba(180, 160, 114, 0.25);
}
.site-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.site-brand-name {
    font-size: 19px;
    font-weight: 900;
    letter-spacing: 5px;
    color: var(--text-primary);
}
.site-brand-tag {
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.site-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.site-nav-link {
    display: block;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
    color: var(--text-muted);
    border: 1px solid transparent;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
/* Gold background, BLACK text. Never the browser's blue-and-white. */
.site-nav-link:hover,
.site-nav-link:focus-visible {
    background: var(--tarkov-gold);
    color: #000;
    border-color: var(--tarkov-gold);
    outline: none;
}
.site-nav-link.is-current { color: var(--tarkov-gold); border-color: var(--panel-border); }
.site-nav-link.is-current:hover { color: #000; }
.site-nav-admin { color: var(--tarkov-gold); border-color: var(--tarkov-gold-dim); }
.site-nav-quiet { color: #4a4a4a; }
.site-nav-sep { width: 1px; height: 20px; background: var(--panel-border); margin: 0 6px; }

/* The mobile menu is a checkbox and a label. No script, so the nav opens even
   when nothing else on the page has loaded. */
.site-nav-toggle { display: none; }
.site-nav-burger { display: none; }

/* ================================================================== main === */

.site-main {
    position: relative;
    z-index: 2;
    max-width: var(--site-max);
    margin: 0 auto;
    padding: 0 var(--site-gutter) 64px;
}

/* A page that is one narrow column - login, register, account. */
.site-narrow { max-width: 620px; margin: 0 auto; }

/* ============================================================== sections === */

.ss {
    position: relative;
    margin: 34px 0;
    padding: 30px;
    border: 1px solid var(--panel-border);
    background: linear-gradient(145deg, rgba(22, 22, 22, 0.85) 0%, rgba(12, 12, 12, 0.95) 100%);
    box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.9), 0 8px 20px rgba(0, 0, 0, 0.55);
}
/* The launcher's four corner rivets, drawn the same way. */
.ss::after {
    content: '';
    position: absolute;
    inset: 4px;
    pointer-events: none;
    opacity: 0.55;
    background-image:
        radial-gradient(circle at 3px 3px, #2a2a2a 2px, transparent 3px),
        radial-gradient(circle at calc(100% - 3px) 3px, #2a2a2a 2px, transparent 3px),
        radial-gradient(circle at 3px calc(100% - 3px), #2a2a2a 2px, transparent 3px),
        radial-gradient(circle at calc(100% - 3px) calc(100% - 3px), #2a2a2a 2px, transparent 3px);
}

.ss.tone-plain { background: none; border-color: transparent; box-shadow: none; padding-left: 0; padding-right: 0; }
.ss.tone-plain::after { display: none; }
.ss.tone-dark { background: #0a0a0a; box-shadow: inset 0 0 40px rgba(0, 0, 0, 1); }
.ss.tone-gold {
    border-color: var(--tarkov-gold-dim);
    box-shadow: inset 0 0 30px rgba(180, 160, 114, 0.08), 0 0 24px rgba(180, 160, 114, 0.12);
}

/* A draft block is visible to an admin and to nobody else - the query that fetches
   it is the difference. The hatching says so at a glance. */
.ss.is-draft {
    border-style: dashed;
    border-color: var(--status-warning);
}

.ss-heading {
    font-size: 22px;
    color: var(--tarkov-gold);
    margin-bottom: 6px;
}
.ss-sub { color: var(--text-muted); margin: 0 0 18px; font-size: 14px; }
.ss-body { max-width: 78ch; }
.ss.lay-narrow .ss-body, .ss.lay-narrow .ss-heading, .ss.lay-narrow .ss-sub { max-width: 74ch; }
.ss-empty {
    color: var(--text-muted);
    border: 1px dashed var(--panel-border);
    padding: 18px;
    text-align: center;
    font-size: 13px;
    letter-spacing: 1px;
}
.ss-rule {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--panel-border), transparent);
}
.ss-divider { padding: 6px 0; }

/* The EDIT handle an admin sees on every block. A link rather than an in-place
   widget, so nothing on a public page depends on JavaScript to be correct. */
.ss-edit {
    position: absolute;
    top: -1px;
    right: -1px;
    z-index: 5;
    background: #0b0b0b;
    border: 1px solid var(--tarkov-gold-dim);
    color: var(--tarkov-gold);
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 4px 9px;
    opacity: 0.5;
    transition: opacity 0.15s, background-color 0.15s, color 0.15s;
}
.ss:hover .ss-edit { opacity: 1; }
.ss-edit:hover { background: var(--tarkov-gold); color: #000; }

/* ---- hero ---- */
.ss-hero { padding: 64px 40px; overflow: hidden; }
.ss-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.4;
    /* The copy has to stay readable over whatever picture an admin chose, and the
       one thing that is guaranteed about that picture is that nobody checked its
       contrast. The gradient is the guarantee. */
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.25));
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.25));
}
.ss-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5,5,5,0.55) 0%, rgba(5,5,5,0.88) 100%);
}
.ss-hero-inner { position: relative; z-index: 2; }
.ss-hero.lay-center .ss-hero-inner { text-align: center; margin: 0 auto; max-width: 760px; }
.ss-hero-title {
    font-size: clamp(38px, 9vw, 86px);
    letter-spacing: 14px;
    color: #fff;
    text-shadow: 0 0 40px rgba(180, 160, 114, 0.35), 0 6px 24px rgba(0, 0, 0, 0.9);
    margin-bottom: 14px;
}
.ss-hero-sub {
    font-size: clamp(15px, 2.4vw, 19px);
    color: var(--tarkov-gold);
    letter-spacing: 1px;
    margin: 0 0 16px;
}
.ss-hero-body { color: var(--text-primary); margin-bottom: 24px; }
.ss-hero.lay-center .ss-hero-body { margin-left: auto; margin-right: auto; max-width: 62ch; }

/* ---- media ---- */
.ss-media-grid { display: grid; gap: 28px; align-items: center; grid-template-columns: 1fr 1fr; }
.ss.lay-left .ss-media-grid { grid-template-columns: 1fr 1fr; }
.ss.lay-right .ss-media-figure { order: 2; }
.ss.lay-full .ss-media-grid { grid-template-columns: 1fr; }
.ss-media-figure img { display: block; width: 100%; border: 1px solid var(--panel-border); }

/* ---- cards ---- */
.ss-cards { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.ss.lay-cols-2 .ss-cards { grid-template-columns: repeat(2, 1fr); }
.ss.lay-cols-4 .ss-cards { grid-template-columns: repeat(4, 1fr); }
.ss-card {
    border: 1px solid var(--panel-border);
    background: #0c0c0c;
    display: flex;
    flex-direction: column;
    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.ss-card:hover {
    border-color: var(--tarkov-gold-dim);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
}
.ss-card-img { height: 150px; background-size: cover; background-position: center; border-bottom: 1px solid var(--panel-border); }
.ss-card-body { padding: 18px; flex: 1 1 auto; }
.ss-card-title { font-size: 14px; color: var(--tarkov-gold); margin-bottom: 8px; }
.ss-card-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 2px;
}

/* ---- stats ---- */
.ss-stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ss-stat {
    text-align: center;
    padding: 20px 10px;
    border: 1px solid var(--panel-border);
    background: #0b0b0b;
}
.ss-stat-value {
    display: block;
    font-size: 34px;
    font-weight: 900;
    color: var(--tarkov-gold);
    letter-spacing: 2px;
    text-shadow: 0 0 22px rgba(180, 160, 114, 0.35);
}
.ss-stat-label {
    display: block;
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ---- faq ---- */
.ss-faq-item {
    border: 1px solid var(--panel-border);
    background: #0b0b0b;
    margin-bottom: 8px;
}
.ss-faq-item > summary {
    cursor: pointer;
    padding: 13px 16px;
    font-weight: bold;
    letter-spacing: 1px;
    color: var(--text-primary);
    list-style: none;
    position: relative;
    padding-right: 40px;
}
.ss-faq-item > summary::-webkit-details-marker { display: none; }
.ss-faq-item > summary::after {
    content: '+';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tarkov-gold);
    font-size: 18px;
}
.ss-faq-item[open] > summary::after { content: '\2212'; }
.ss-faq-item > summary:hover { background: var(--tarkov-gold); color: #000; }
.ss-faq-item > summary:hover::after { color: #000; }
.ss-faq-item .rt-body { padding: 0 16px 14px; color: var(--text-muted); }

/* ---- patch feed ---- */
.ss-feed { border: 1px solid var(--panel-border); }
.ss-feed-row {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--panel-border);
    color: var(--text-primary);
}
.ss-feed-row:last-child { border-bottom: 0; }
.ss-feed-row:hover { background: var(--tarkov-gold); color: #000; }
.ss-feed-row:hover .ss-feed-ver, .ss-feed-row:hover .ss-feed-date { color: #000; }
.ss-feed-ver { color: var(--tarkov-gold); font-weight: 900; letter-spacing: 1px; }
.ss-feed-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-feed-date { color: var(--text-muted); font-size: 12px; }

/* ---- download banner ---- */
.ss-dl { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ss-dl-meta { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.ss-dl-ver { font-size: 24px; font-weight: 900; color: var(--tarkov-gold); letter-spacing: 2px; }
.ss-dl-name { color: var(--text-primary); word-break: break-all; }
.ss-dl-size { color: var(--text-muted); font-size: 13px; }

/* =============================================================== buttons === */

.site-btn {
    display: inline-block;
    padding: 11px 22px;
    border: 1px solid var(--tarkov-gold-dim);
    background: #0b0b0b;
    color: var(--tarkov-gold);
    font-family: 'Bender', sans-serif;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.site-btn:hover, .site-btn:focus-visible {
    background: var(--tarkov-gold);
    color: #000;
    border-color: var(--tarkov-gold);
    box-shadow: 0 0 18px rgba(180, 160, 114, 0.35);
    outline: none;
}
.site-btn-primary {
    background: rgba(180, 160, 114, 0.12);
    border-color: var(--tarkov-gold);
    color: var(--tarkov-gold);
}
.site-btn-lg { padding: 15px 34px; font-size: 14px; }
.site-btn-small { padding: 6px 12px; font-size: 10px; }
.site-btn-ghost { border-color: var(--panel-border); color: var(--text-muted); background: transparent; }
.site-btn-danger { border-color: rgba(184, 70, 61, 0.7); color: #e0705f; }
.site-btn-danger:hover { background: var(--status-warning); color: #fff; border-color: var(--status-warning); }
.site-btn[disabled], .site-btn.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* ================================================================= forms === */

.site-form { display: grid; gap: 18px; }
.site-field { display: flex; flex-direction: column; gap: 6px; }
.site-field > label {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 2px;
    color: var(--text-muted);
    text-transform: uppercase;
}
.site-field input[type="text"],
.site-field input[type="password"],
.site-field input[type="email"],
.site-field input[type="number"],
.site-field input[type="date"],
.site-field input[type="datetime-local"],
.site-field textarea {
    width: 100%;
    background: var(--oasis-field-bg);
    border: 1px solid var(--panel-border);
    color: var(--text-primary);
    font-family: 'Bender', sans-serif;
    font-size: 14px;
    padding: 10px 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.site-field input:hover, .site-field textarea:hover { border-color: var(--tarkov-gold-dim); }
.site-field input:focus, .site-field textarea:focus {
    outline: none;
    border-color: var(--tarkov-gold);
    box-shadow: 0 0 10px rgba(180, 160, 114, 0.28);
}
.site-field .site-hint { font-size: 11px; color: var(--text-muted); letter-spacing: 0.5px; }
.site-field.is-wide { grid-column: 1 / -1; }

/* The invite code box. Monospaced and spaced out, because it is read aloud and
   typed by hand. */
.site-code-input {
    font-family: 'Consolas', 'Courier New', monospace !important;
    letter-spacing: 6px;
    text-transform: uppercase;
    font-size: 18px !important;
    text-align: center;
}

.site-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* =============================================== flashes, pills and panels === */

.site-flash {
    border: 1px solid var(--panel-border);
    border-left-width: 3px;
    background: #0c0c0c;
    padding: 13px 16px;
    margin: 22px 0;
    font-size: 13px;
    letter-spacing: 0.5px;
}
.site-flash-ok { border-left-color: var(--status-online); }
.site-flash-error { border-left-color: var(--status-warning); color: #e0705f; }

.site-pill {
    display: inline-block;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 2px 7px;
    border: 1px solid var(--panel-border);
    color: var(--text-muted);
    vertical-align: middle;
}
.site-pill-live { border-color: var(--status-online); color: var(--status-online); }
.site-pill-draft { border-color: var(--status-warning); color: #e0705f; }
.site-pill-gold { border-color: var(--tarkov-gold); color: var(--tarkov-gold); }

.site-panel {
    border: 1px solid var(--panel-border);
    background: linear-gradient(145deg, rgba(22, 22, 22, 0.85) 0%, rgba(12, 12, 12, 0.95) 100%);
    padding: 26px;
    margin: 26px 0;
}
.site-panel-title {
    font-size: 16px;
    color: var(--tarkov-gold);
    letter-spacing: 3px;
    margin-bottom: 4px;
}
.site-panel-note { color: var(--text-muted); font-size: 12px; margin: 0 0 18px; }

.site-page-head { padding: 40px 0 6px; }
.site-page-title { font-size: clamp(26px, 5vw, 40px); letter-spacing: 6px; color: #fff; }
.site-page-sub { color: var(--tarkov-gold); letter-spacing: 1px; margin-top: 6px; }

/* ============================================================ admin strip === */

.site-adminbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 18px 0 0;
    padding: 10px 14px;
    border: 1px solid var(--tarkov-gold-dim);
    background: rgba(180, 160, 114, 0.06);
    font-size: 12px;
}
.site-adminbar-tag {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 3px;
    color: #000;
    background: var(--tarkov-gold);
    padding: 3px 8px;
}
.site-adminbar-what { color: var(--text-primary); letter-spacing: 1px; margin-right: auto; }

/* ============================================================ patch notes === */

.site-patch { border: 1px solid var(--panel-border); background: #0b0b0b; margin-bottom: 18px; }
.site-patch-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-bottom: 1px solid var(--panel-border);
    background: #0e0e0e;
}
.site-patch-ver { font-size: 20px; font-weight: 900; color: var(--tarkov-gold); letter-spacing: 2px; }
.site-patch-title { font-size: 15px; color: var(--text-primary); margin-right: auto; }
.site-patch-date { font-size: 12px; color: var(--text-muted); }
.site-patch-body { padding: 18px 20px; }

/* ============================================================== downloads === */

.site-release {
    border: 1px solid var(--panel-border);
    background: #0b0b0b;
    padding: 22px;
    margin-bottom: 18px;
}
.site-release.is-latest { border-color: var(--tarkov-gold-dim); box-shadow: 0 0 26px rgba(180, 160, 114, 0.1); }
.site-release-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.site-release-ver { font-size: 24px; font-weight: 900; color: var(--tarkov-gold); letter-spacing: 2px; }
.site-release-title { color: var(--text-primary); margin-right: auto; }
.site-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px 22px;
    margin: 14px 0 18px;
}
.site-meta { display: flex; flex-direction: column; gap: 2px; }
.site-meta-label { font-size: 10px; letter-spacing: 2px; color: var(--text-muted); }
.site-meta-value { font-size: 14px; color: var(--text-primary); word-break: break-all; }
.site-hash {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 12px;
    color: var(--tarkov-gold);
    word-break: break-all;
    user-select: all;
}

/* ================================================================ account === */

.site-cardgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.site-subcard { border: 1px solid var(--panel-border); background: #0b0b0b; padding: 18px; }
.site-subcard-title {
    font-size: 13px;
    color: var(--tarkov-gold);
    letter-spacing: 2px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--panel-border);
}
.site-kv { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; font-size: 13px; }
.site-kv-k { color: var(--text-muted); letter-spacing: 1px; }
.site-kv-v { color: var(--text-primary); text-align: right; word-break: break-word; }
.site-kv-v strong { color: var(--tarkov-gold); }

.site-table-wrap { overflow-x: auto; }
.site-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.site-table th {
    text-align: left;
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--panel-border);
    padding: 8px 10px;
    white-space: nowrap;
}
.site-table td { padding: 8px 10px; border-bottom: 1px solid #191919; }
.site-table tr:last-child td { border-bottom: 0; }
.site-table td.num, .site-table th.num { text-align: right; }
.site-muted { color: var(--text-muted); }

/* ================================================================= footer === */

.site-footer {
    position: relative;
    z-index: 2;
    border-top: 1px solid var(--panel-border);
    background: #070707;
    margin-top: 40px;
}
.site-footer-inner {
    max-width: var(--site-max);
    margin: 0 auto;
    padding: 26px var(--site-gutter);
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr auto;
    align-items: center;
}
.site-footer-name { font-weight: 900; letter-spacing: 4px; color: var(--tarkov-gold); }
.site-footer-note { color: var(--text-muted); margin-left: 12px; font-size: 12px; }
.site-footer-right { display: flex; gap: 6px; flex-wrap: wrap; }
.site-footer-link {
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--text-muted);
    padding: 5px 9px;
    border: 1px solid transparent;
}
.site-footer-link:hover { background: var(--tarkov-gold); color: #000; }
.site-footer-legal {
    grid-column: 1 / -1;
    border-top: 1px solid #171717;
    padding-top: 12px;
    font-size: 11px;
    color: #4a4a4a;
    line-height: 1.6;
}

/* ================================================================= glitch === */
/* The wordmark's RGB split, lifted from home-style.css. Only the mark carries it -
   a page of glitching headings is a novelty, and this is a site people read. */
.glitch-text { position: relative; display: inline-block; }
/* The header mark is a centred grid box. .glitch-text comes later in this file, so without this
   its inline-block won and the O sat against the left edge of its box. */
.site-brand-mark.glitch-text { display: grid; }
/* Invisible at rest: only the animation shows the split, for a frame or two. They were 0.55 at
   rest, which the animation hid - so with animations off (reduced motion) a second, coloured O
   sat beside the gold one for good. */
.glitch-text::before, .glitch-text::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    pointer-events: none;
    opacity: 0;
}
.glitch-text::before { color: #f00; animation: siteGlitchA 4.2s infinite steps(2); }
.glitch-text::after { color: #0ff; animation: siteGlitchB 3.6s infinite steps(2); }
@keyframes siteGlitchA { 0%, 92%, 100% { transform: none; opacity: 0; } 94% { transform: translate(-2px, 1px); opacity: 0.5; } }
@keyframes siteGlitchB { 0%, 90%, 100% { transform: none; opacity: 0; } 96% { transform: translate(2px, -1px); opacity: 0.5; } }

@media (prefers-reduced-motion: reduce) {
    /* Someone who has asked their system for less motion has asked for it here too. */
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================= responsive === */

@media (max-width: 900px) {
    .ss-cards, .ss.lay-cols-2 .ss-cards, .ss.lay-cols-4 .ss-cards { grid-template-columns: repeat(2, 1fr); }
    .ss-media-grid, .ss.lay-left .ss-media-grid { grid-template-columns: 1fr; }
    .ss.lay-right .ss-media-figure { order: 0; }
}

@media (max-width: 780px) {
    :root { --site-gutter: 16px; }

    .site-nav-burger {
        display: block;
        width: 40px;
        height: 34px;
        border: 1px solid var(--panel-border);
        cursor: pointer;
        position: relative;
    }
    .site-nav-burger span,
    .site-nav-burger span::before,
    .site-nav-burger span::after {
        content: '';
        position: absolute;
        left: 9px;
        width: 20px;
        height: 2px;
        background: var(--tarkov-gold);
    }
    .site-nav-burger span { top: 16px; }
    .site-nav-burger span::before { left: 0; top: -6px; }
    .site-nav-burger span::after { left: 0; top: 6px; }

    .site-header-inner { flex-wrap: wrap; }
    .site-nav {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        border-top: 1px solid var(--panel-border);
        padding-bottom: 8px;
    }
    .site-nav-toggle:checked ~ .site-nav { display: flex; }
    .site-nav-link { padding: 12px 4px; border-bottom: 1px solid #151515; }
    .site-nav-sep { display: none; }

    .ss { padding: 20px; }
    .ss-hero { padding: 44px 20px; }
    .ss-cards, .ss.lay-cols-2 .ss-cards, .ss.lay-cols-4 .ss-cards { grid-template-columns: 1fr; }
    .ss-feed-row { grid-template-columns: 80px 1fr; }
    .ss-feed-date { grid-column: 2; }
    .site-footer-inner { grid-template-columns: 1fr; }
}

/* ==========================================================================
   THE FRONT PAGE, AND THE NAV IT SHARES A LIST WITH

   Added when the site stopped being a landing page with a pitch on it and
   became the seven things it publishes: download, install, stats, leaderboard,
   patch notes, mechanics, troubleshooting. The masthead, the destination tiles
   and the figures strip below are what public/index.php draws; the nav rules
   are here because seven entries plus the account entries is a wider header
   than the one this stylesheet was first written for.

   Nothing in here is a launcher affordance. There is no server row, no address
   and no play control on this site, so there is no style for one.
   ========================================================================== */

/* ---------------------------------------------------------------- masthead ---
   The launcher's .panel, at the size a page opens with: the same 145deg
   gradient, the same inset shadow, the same four corner rivets drawn in
   ::after. What it adds over .ss is the gold bloom behind the wordmark and the
   scanner, both of which the launcher puts on its own hero panel. */
.site-hero {
    position: relative;
    overflow: hidden;
    margin: 34px 0;
    padding: 66px 40px 54px;
    text-align: center;
    border: 1px solid var(--panel-border);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(180, 160, 114, 0.10) 0%, transparent 62%),
        linear-gradient(145deg, rgba(22, 22, 22, 0.85) 0%, rgba(12, 12, 12, 0.95) 100%);
    box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.9), 0 8px 20px rgba(0, 0, 0, 0.55);
}
/* The same four rivets as .ss and as the launcher's .panel::after. */
.site-hero::after {
    content: '';
    position: absolute;
    inset: 4px;
    pointer-events: none;
    opacity: 0.55;
    background-image:
        radial-gradient(circle at 3px 3px, #2a2a2a 2px, transparent 3px),
        radial-gradient(circle at calc(100% - 3px) 3px, #2a2a2a 2px, transparent 3px),
        radial-gradient(circle at 3px calc(100% - 3px), #2a2a2a 2px, transparent 3px),
        radial-gradient(circle at calc(100% - 3px) calc(100% - 3px), #2a2a2a 2px, transparent 3px);
}
.site-hero-inner { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; }
.site-hero-title {
    font-size: clamp(40px, 9vw, 88px);
    letter-spacing: 14px;
    color: #fff;
    text-shadow: 0 0 40px rgba(180, 160, 114, 0.35), 0 6px 24px rgba(0, 0, 0, 0.9);
    margin-bottom: 12px;
}
.site-hero-tag {
    font-size: clamp(14px, 2.2vw, 18px);
    color: var(--tarkov-gold);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 14px;
}
.site-hero-lede { color: var(--text-primary); margin: 0 auto 26px; max-width: 60ch; }
.site-hero-actions { justify-content: center; }

/* The scanner. home-style.css puts one on every panel; here it is on the one
   element that is big enough for the sweep to read as a sweep rather than as a
   flicker, which is why the band is a share of the panel's height rather than
   the launcher's fixed 5px bar. Killed outright by the prefers-reduced-motion
   block above, along with every other animation on the site. */
.site-scan {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 22%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(180, 160, 114, 0.09), transparent);
    border-bottom: 1px solid rgba(180, 160, 114, 0.22);
    animation: siteScan 7s infinite linear;
}
@keyframes siteScan {
    0%   { transform: translateY(-120%); }
    100% { transform: translateY(560%); }
}

/* ------------------------------------------------------------------ tiles ---
   The seven destinations. Built from the same OASIS_SITE_NAV_SPINE the header
   is built from, so this grid and the nav cannot disagree about what exists.

   Hover is the site's hover: gold ground, BLACK lettering, on the whole tile
   including its title. Same as .site-nav-link, .site-btn, .ss-feed-row and the
   FAQ summary - never a border colour change on its own, and never the
   browser's blue-and-white. */
.site-tiles {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
}
.site-tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    border: 1px solid var(--panel-border);
    background: #0c0c0c;
    color: var(--text-muted);
    transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.site-tile-title {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 3px;
    color: var(--tarkov-gold);
    transition: color 0.15s;
}
.site-tile-body { font-size: 13px; line-height: 1.55; }
.site-tile:hover,
.site-tile:focus-visible {
    background: var(--tarkov-gold);
    color: #000;
    border-color: var(--tarkov-gold);
    transform: translateY(-2px);
    outline: none;
}
.site-tile:hover .site-tile-title,
.site-tile:focus-visible .site-tile-title { color: #000; }

/* A row of buttons that sits to the right under a block of figures. */
.site-actions-end { justify-content: flex-end; margin-top: 18px; }

/* ------------------------------------------------------- the wider header ---
   Seven spine entries plus ACCOUNT, ADMIN and SIGN OUT is ten labels, one of
   which is TROUBLESHOOTING. At the old 12px/2px they did not fit a laptop and
   the nav wrapped onto a second line under the wordmark. Smaller and tighter
   here rather than shortened labels: TROUBLESHOOTING abbreviated is a word
   nobody scans for.

   .site-nav still carries flex-wrap, so the failure mode at any width this does
   not cover is a second line rather than a header that overflows the page. */
.site-nav-link { font-size: 11px; letter-spacing: 1.4px; padding: 8px 9px; }

@media (max-width: 1219px) {
    /* 1219 is measured, not chosen: the widest the header ever gets is the signed-in
       admin case - seven spine entries plus ACCOUNT, ADMIN and SIGN OUT - and at the type
       size above that row plus the wordmark needs 1196px of viewport to stay on one line.
       Below that the drawer takes over rather than the nav wrapping under the wordmark. The rules are
       the same ones the 780px block below sets - repeated rather than moved, so
       that block stays readable on its own and a phone gets identical values
       from both. */
    .site-nav-burger {
        display: block;
        width: 40px;
        height: 34px;
        border: 1px solid var(--panel-border);
        cursor: pointer;
        position: relative;
    }
    .site-nav-burger span,
    .site-nav-burger span::before,
    .site-nav-burger span::after {
        content: '';
        position: absolute;
        left: 9px;
        width: 20px;
        height: 2px;
        background: var(--tarkov-gold);
    }
    .site-nav-burger span { top: 16px; }
    .site-nav-burger span::before { left: 0; top: -6px; }
    .site-nav-burger span::after { left: 0; top: 6px; }

    .site-header-inner { flex-wrap: wrap; }
    .site-nav {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        border-top: 1px solid var(--panel-border);
        padding-bottom: 8px;
    }
    .site-nav-toggle:checked ~ .site-nav { display: flex; }
    .site-nav-link { padding: 12px 4px; border-bottom: 1px solid #151515; font-size: 12px; letter-spacing: 2px; }
    .site-nav-sep { display: none; }
}

@media (max-width: 780px) {
    .site-hero { padding: 44px 20px 36px; }
    .site-hero-actions { flex-direction: column; align-items: stretch; }
    .site-tiles { grid-template-columns: 1fr; }
    .site-actions-end { justify-content: stretch; }
}

/* ------------------------------------------------- a wrapper/container clash ---
   oasis_site_render_section() names the wrapping <section> "ss ss-<kind>", and
   two kinds have an INNER container with the same class: a cards block is
   <section class="ss ss-cards"><div class="ss-cards">, and a stats block is the
   same shape. So `.ss-cards { display: grid }` above was landing on the section
   as well as on the container, and the section's own children - the EDIT handle,
   the heading, the subheading and then the container - were being laid out as
   three grid columns. The visible symptom was a cards block whose heading sat in
   the first column with the cards crushed into the third.

   Put back to a block here rather than by rewriting the two rules above, because
   scoping them as descendants would drop them below the `.ss.lay-cols-2 .ss-cards`
   overrides and the responsive ones, and this is the smaller change. */
.ss.ss-cards,
.ss.ss-stats { display: block; }