/* Rust theme for every page except the homepage (which has its own landing.css): the dashboard, site admin,
   legal pages, status page, appeals and 404. Loaded after style.css and before a page's own stylesheet.
   It copies the game's interface: Roboto Condensed, square corners, charcoal panels with a thin light edge,
   green action buttons, red destructive ones, HUD-coloured status, corrugated sheet metal behind headers. */

:root, .theme-dark {
  --bg: #12110f; --bg2: #171613; --panel: #1f1e1b; --panel2: #2a2824; --line: #2e2c28; --line-strong: #46433d;
  --text: #e8e2d6; --muted: #a59e92; --console: #0b0a09;
  --accent: #e2583e; --on-accent: #1a0703;   /* Rust red, unless the person picked another accent in Account */
  --ok: #8ab33e; --warn: #d39231; --err: #d65a43;
  --ok-bg: #1d2412; --ok-line: #3d5220; --warn-bg: #2a1f10; --warn-line: #5e4320; --warn-ink: #f0d3a8; --err-bg: #2b1511; --err-line: #66291f;
  --sans: "Roboto Condensed", "Arial Narrow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sign: "Permanent Marker", "Roboto Condensed", cursive;
  --rs-green: #6f8b3d; --rs-green-hi: #82a24a; --rs-green-ink: #edf4dd;
  --rs-red: #a13a28; --rs-red-hi: #b94631;
  --rs-slot: #2f2d29; --rs-edge: rgba(255, 255, 255, .07); --rs-edge2: rgba(255, 255, 255, .14);
  --rs-metal: repeating-linear-gradient(90deg, #2a2723 0 9px, #1b1a17 9px 12px, #24221e 12px 22px, #191815 22px 26px);
  --row-hover: rgba(255, 255, 255, .03);
}
body:not(.rs) { font-family: var(--sans); font-size: 15.5px; background: var(--bg); color: var(--text); }
body:not(.rs) ::selection { background: var(--accent); color: #fff; }

/* Rust's interface has no rounded corners. Things that are circles in the game (status dots, spinners) stay round. */
body:not(.rs) *, body:not(.rs) *::before, body:not(.rs) *::after { border-radius: 0 !important; }
body:not(.rs) :is(.status, .fdot, .cdot, .flag-dot, .acx-dot, .acx-feed i, .acx-power i, .rail-st, .ad-light i, .ad-loading i, .ad-pill i, .ad-ev > i, .dm-av, .dc-av, .swatch span) { border-radius: 50% !important; }
/* pseudo-elements can't go inside :is(), so they're listed one by one */
body:not(.rs) .live-dot::before, body:not(.rs) .shot-on::before, body:not(.rs) .status.online::after, body:not(.rs) .acx-power i::before,
body:not(.rs) .hk-health::before, body:not(.rs) .bc-title::before { border-radius: 50% !important; }

/* headings: uppercase condensed, like every title in the game */
body:not(.rs) :is(h1, h2, h3) { font-family: var(--sans); text-transform: uppercase; letter-spacing: .01em; font-stretch: normal; }

/* ---------- buttons ---------- */
body:not(.rs) .btn { font: 700 13.5px/1.1 var(--sans); text-transform: uppercase; letter-spacing: .04em; background: #3b3934; border-color: transparent; color: var(--text); box-shadow: none; }
body:not(.rs) .btn:hover:not(:disabled) { background: #4a4741; border-color: transparent; }
body:not(.rs) .btn.primary { background: var(--rs-green); color: var(--rs-green-ink); box-shadow: none; }
body:not(.rs) .btn.primary:hover:not(:disabled) { background: var(--rs-green-hi); }
body:not(.rs) .btn.danger { background: var(--rs-red); color: #fbe3dc; border-color: transparent; }
body:not(.rs) .btn.danger:hover:not(:disabled) { background: var(--rs-red-hi); }
body:not(.rs) .btn.steam { background: #1b2838; color: #fff; } body:not(.rs) .btn.discord { background: #5865f2; color: #fff; }
body:not(.rs) .btn.lg { font-size: 15px; padding: 13px 20px; }
body:not(.rs) .btn.sm { font-size: 12px; }

/* ---------- inputs: dark slots ---------- */
body:not(.rs) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) { background: #0f0e0c; border: 1px solid var(--line); color: var(--text); font-family: var(--sans); font-size: 15px; }
body:not(.rs) :is(input, select, textarea):focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
body:not(.rs) label { font-family: var(--sans); text-transform: uppercase; letter-spacing: .05em; font-size: 12px; }
body:not(.rs) :is(label.chk, label.chk-row, label.switch-row, label.tos-check, .switch-row, .chk-row, .reset-opt, .ad-typed) { text-transform: none; letter-spacing: 0; font-size: 14.5px; }
/* toggles: square, like the game's options */
body:not(.rs) .switch span { background: #0f0e0c; border-color: var(--line-strong); }
body:not(.rs) .switch span::after { background: var(--muted); }
body:not(.rs) .switch input:checked + span { background: color-mix(in srgb, var(--rs-green) 45%, #0f0e0c); border-color: var(--rs-green); }
body:not(.rs) .switch input:checked + span::after { background: var(--rs-green-ink); }
body:not(.rs) :is(input[type=checkbox], input[type=radio], input[type=range]) { accent-color: var(--rs-green); }

/* ---------- labels and small things ---------- */
body:not(.rs) :is(.tag, .badge, .chip, .beta-tag) { font-family: var(--sans); font-weight: 700; letter-spacing: .03em; }
body:not(.rs) .tag { text-transform: uppercase; font-size: 11px; }
body:not(.rs) .chip.on { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: var(--accent); color: var(--text); }
body:not(.rs) :is(.muted, .small) { color: var(--muted); }

/* ---------- pop-ups: game panels ---------- */
body:not(.rs) .modal-bg { background: rgba(8, 7, 6, .78); backdrop-filter: blur(4px); }
body:not(.rs) .modal { background: #1c1b18; border: 0; box-shadow: 0 0 0 1px var(--rs-edge2), 0 40px 100px -20px rgba(0, 0, 0, .9); }
body:not(.rs) .modal h3 { font-size: 22px; font-weight: 800; }
body:not(.rs) .modal .actions { background: #151411; }
/* toasts: the item-pickup notification */
body:not(.rs) .toast { background: rgba(10, 9, 8, .92); border: 0; border-left: 6px solid var(--line-strong); box-shadow: 0 16px 40px -10px rgba(0, 0, 0, .8); font: 600 14.5px var(--sans); }
body:not(.rs) .toast.ok { border-left-color: var(--ok); } body:not(.rs) .toast.err { border-left-color: var(--err); color: #ffb3a3; }

/* ---------- legal pages and the appeal page ---------- */
body.lp:not(.rs) .nav { background: linear-gradient(rgba(15, 14, 12, .8), rgba(15, 14, 12, .88)), var(--rs-metal); border-bottom: 1px solid var(--rs-edge); }
body.lp:not(.rs) .logo { font: 800 18px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
body:not(.rs) .logo-mark { background: var(--accent); }
body:not(.rs) .logo-mark .eye { fill: var(--accent); }
body.lp:not(.rs) .nav-links a { font: 700 13.5px var(--sans); text-transform: uppercase; letter-spacing: .05em; }
body.lp:not(.rs) :is(.legal, .appeal) h1 { font-size: clamp(34px, 5vw, 56px); font-weight: 800; line-height: .98; }
body.lp:not(.rs) :is(.legal, .appeal) h2 { font-size: 22px; font-weight: 800; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); }
body.lp:not(.rs) :is(.legal, .appeal) :is(p, li) { color: #d8d1c4; font-size: 16.5px; line-height: 1.65; }
body.lp:not(.rs) :is(.legal, .appeal) a { color: #f0b39f; }
body.lp:not(.rs) .legal-meta { font-family: var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
body.lp:not(.rs) .caps { font-family: var(--sans); }
body.lp:not(.rs) footer, body.lp:not(.rs) .lp-foot { border-color: var(--rs-edge); }
body.lp:not(.rs) .lp-foot .logo { font-size: 15px; }
body.appeal-page .appeal :is(.box, .card) { background: var(--panel); box-shadow: 0 0 0 1px var(--rs-edge); border: 0; }

/* ---------- public status page: the server browser entry ---------- */
body.status-page { background: radial-gradient(ellipse 60% 50% at 80% 0%, rgba(205, 65, 43, .12), transparent 70%), var(--bg); }
body.status-page .st-head { padding: 22px 24px; background: linear-gradient(rgba(15, 14, 12, .78), rgba(15, 14, 12, .88)), var(--rs-metal); box-shadow: 0 0 0 1px var(--rs-edge); }
body.status-page .st-head h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; }
body.status-page .ov-card { background: var(--panel); border: 0; box-shadow: 0 0 0 1px var(--rs-edge); }
body.status-page .ov-k { font: 700 11.5px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
body.status-page .v { font-family: var(--sans); font-weight: 800; }
body.status-page .status-pill { font-family: var(--sans); text-transform: uppercase; letter-spacing: .05em; font-size: 12.5px; }

/* ---------- 404 ---------- */
body.nf { background: radial-gradient(ellipse 60% 60% at 50% 40%, rgba(161, 58, 40, .2), transparent 70%), var(--bg); }
body.nf .empty h1, body.nf .empty h2 { font-size: clamp(40px, 8vw, 84px); font-weight: 800; line-height: .95; }

/* bars read like the HUD: green fill on a dark track */
body:not(.rs) .meter { height: 12px; background: rgba(0, 0, 0, .45); border: 0; box-shadow: inset 0 0 0 1px var(--rs-edge); }
body:not(.rs) .meter > i { background: var(--ok); }