/* Gobrix theme (2026-11-09): bright and playful.
   Loaded last on every page (after the page stylesheets, before dark.css), so it sets the look
   everywhere: white pages, Gobrix red as the main colour, rounded cards, chunky pill buttons and
   soft shadows. Icons (Silk / Fugue) are shown in their own colours.
   Replaces the old classic2010.css theme (still in /styles, no longer loaded). */

:root {
    --red: #E0282C;
    --red-dark: #B51D21;
    --red-soft: #FDECEC;
    --sun: #FFC93C;
    --ink: #1F2430;
    --text: #2B3140;
    --muted: #697080;
    --brand: #E0282C;
    --brand-2: #FF5A4E;
    --brand-3: #FFC9C4;
    --wash: #F6F7FB;
    --card: #FFFFFF;
    --line: #E5E7EE;
    --line-strong: #D3D7E0;
    --link: #1C63D5;
    --green: #22A55A;
    --green-dark: #17803F;
    --radius: 16px;
    --shadow: 0 1px 2px rgba(20, 28, 45, 0.05), 0 6px 18px rgba(20, 28, 45, 0.06);
    --shadow-lift: 0 2px 4px rgba(20, 28, 45, 0.06), 0 12px 28px rgba(20, 28, 45, 0.10);
    --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
    --display: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
    --box-head: transparent;
}

/* ── Page ─────────────────────────────────────────────────── */
html { background: var(--wash); }
body {
    background: var(--wash) !important;
    color: var(--text);
    font: 15px/1.55 var(--font) !important;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--link); }
a:hover { color: #124AA6; }
::selection { background: #FFD9D6; color: var(--ink); }

.page, main.page { max-width: 1180px; padding: 22px 18px 48px; }
.page.narrow { max-width: 820px; }

h1, h2, h3, .page-title, .hero-title, .card-title, .section-title, .login-title, .signup-title,
.empty-state strong, .board-title, .message-title {
    font-family: var(--display) !important;
    letter-spacing: -0.01em;
}
.page-title, main h1:not(.hero-title), .forums-header h2, .forums-wrapper > h1, .login-title, .signup-title, .message-title {
    color: var(--ink) !important;
    font-size: 28px !important;
    font-weight: 800 !important;
}
main h2 { color: var(--ink); font-size: 19px; font-weight: 800; }
.page-subtitle, .status-text { color: var(--muted); font-size: 15px; }
.hero-title { color: var(--ink); font-size: clamp(30px, 4vw, 44px) !important; font-weight: 900 !important; line-height: 1.1; }
.hero-kicker { color: var(--red) !important; font: 800 13px var(--font) !important; letter-spacing: 0.08em; text-transform: uppercase; }
.welcome-text { color: var(--text); font-size: 16px !important; }

/* ── Header: a clean white bar ────────────────────────────── */
.site-header {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid var(--line) !important;
    box-shadow: 0 2px 14px rgba(20, 28, 45, 0.06) !important;
    backdrop-filter: saturate(1.4) blur(8px);
    position: sticky !important;
    top: 0;
    z-index: 100 !important;
}
.site-header-inner {
    align-items: center !important;
    display: flex !important;
    gap: 14px !important;
    max-width: 1180px !important;
    min-height: 66px !important;
    padding: 8px 18px !important;
}
.site-logo img { height: 42px !important; filter: none !important; }
.site-logo:hover { transform: rotate(-3deg) scale(1.04); }
.site-nav { gap: 4px !important; height: auto !important; margin: 0 !important; padding: 0 !important; }
.site-nav a {
    background: transparent !important;
    border-radius: 999px !important;
    color: var(--text) !important;
    font: 700 15px/1 var(--font) !important;
    padding: 10px 14px !important;
    text-decoration: none !important;
    text-shadow: none !important;
    transition: background 0.15s ease, color 0.15s ease;
}
.site-nav a + a::before { content: none !important; }
.site-nav a:hover { background: var(--wash) !important; color: var(--ink) !important; }
.site-nav a[aria-current="page"] { background: var(--red) !important; color: #fff !important; box-shadow: 0 3px 0 var(--red-dark); }

.site-account { gap: 8px !important; margin: 0 0 0 auto !important; }
.header-pill, .header-button, .account-button {
    background: #fff !important;
    border: 1px solid var(--line-strong) !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 0 var(--line) !important;
    color: var(--ink) !important;
    font: 700 14px/1 var(--font) !important;
    height: 40px !important;
    padding: 0 14px !important;
    text-shadow: none !important;
}
.header-pill img { height: 20px !important; width: 20px !important; }
.header-button:hover, .account-button:hover { border-color: #C2C7D2 !important; }
.header-button.primary {
    background: var(--red) !important;
    border-color: var(--red-dark) !important;
    box-shadow: 0 3px 0 var(--red-dark) !important;
    color: #fff !important;
}
.header-button.primary:hover { background: #EA3438 !important; }
.header-icon-button { background: var(--wash) !important; border-radius: 999px !important; height: 40px !important; width: 40px !important; }
.header-icon-button:hover { background: #ECEEF4 !important; }
.header-icon-button img { filter: none !important; }
.account-button { padding: 0 12px 0 4px !important; }
.account-button .headshot { border-radius: 999px !important; height: 32px !important; width: 32px !important; }
.account-button .caret { border-top-color: var(--muted) !important; }
.account-dropdown {
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-lift) !important;
    padding: 8px !important;
    z-index: 101 !important;
}
.account-dropdown a { border-radius: 10px !important; color: var(--ink) !important; font: 600 14px/1 var(--font) !important; padding: 10px !important; }
.account-dropdown a img { filter: none !important; }
.account-dropdown a:hover, .account-dropdown a:focus-visible { background: var(--wash) !important; color: var(--ink) !important; }
.account-dropdown a:hover img { filter: none !important; }
.account-dropdown a.danger { color: var(--red) !important; }

/* Older pages' header bits */
.top-bar { background: #fff !important; }
.sub-bar { background: #fff !important; border-bottom: 1px solid var(--line) !important; }
.sub-bar a { color: var(--link) !important; font: 700 13px var(--font) !important; }

@media (max-width: 820px) {
    .site-header-inner { flex-wrap: wrap !important; }
    .site-nav { order: 3; overflow-x: auto; width: 100%; }
}

/* ── Cards and boxes ─────────────────────────────────────── */
.card, .home-social-card, .forum-category, .login-box, .signup-box, .message-box, .empty-state {
    background: var(--card) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
}
.card { padding: 18px !important; }
.section { margin-top: 26px; }
.section-head {
    align-items: center !important;
    background: none;
    border: 0;
    margin-bottom: 12px !important;
    padding: 0;
}
.section-title, .card-title {
    color: var(--ink) !important;
    font: 800 19px/1.3 var(--font) !important;
    margin: 0 !important;
}
.card-title { background: none; border-bottom: 0; margin: 0 0 10px !important; padding: 0; }
.card-title-row { align-items: center !important; background: none; border-bottom: 0; margin: 0 0 10px; padding: 0; }
.card-title-row .card-title { margin: 0 !important; }
.section-count { background: var(--wash); border-radius: 999px; color: var(--muted) !important; font: 700 12px var(--font) !important; padding: 2px 8px; }
.section-link, .link-button { color: var(--link) !important; font: 700 14px var(--font) !important; text-decoration: none !important; }
.section-link:hover, .link-button:hover { text-decoration: underline !important; }
.empty-state { text-align: center; }
.empty-state strong { color: var(--ink); font-size: 17px !important; }

/* ── Buttons: chunky pills ───────────────────────────────── */
.btn, button.btn, a.btn, .login-button, .signup-button, .submit-button, .signup-submit-button, .return-button, .logout-button, .text-action-button {
    align-items: center;
    background: #fff !important;
    border: 1px solid var(--line-strong) !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 0 var(--line) !important;
    color: var(--ink) !important;
    display: inline-flex;
    font: 700 14px/1 var(--font) !important;
    gap: 7px;
    justify-content: center;
    min-height: 38px !important;
    padding: 0 18px !important;
    text-decoration: none !important;
    text-shadow: none !important;
    transition: transform 0.08s ease, background 0.15s ease, box-shadow 0.08s ease;
}
.btn:hover, .return-button:hover, .text-action-button:hover { background: var(--wash) !important; border-color: #C2C7D2 !important; transform: translateY(-1px); }
.btn:active, .login-button:active, .submit-button:active, .signup-button:active { box-shadow: none !important; transform: translateY(1px); }
.btn img { height: 16px !important; width: 16px !important; }
.btn.go, .signup-button, .signup-submit-button, .btn.primary, .submit-button, .login-button {
    background: var(--red) !important;
    border-color: var(--red-dark) !important;
    box-shadow: 0 3px 0 var(--red-dark) !important;
    color: #fff !important;
}
.btn.go:hover, .btn.primary:hover, .submit-button:hover, .login-button:hover, .signup-button:hover, .signup-submit-button:hover { background: #EA3438 !important; border-color: var(--red-dark) !important; }
.btn.go img, .btn.primary img { filter: brightness(0) invert(1); }
.btn.danger { color: var(--red) !important; }
.btn.danger.solid { background: var(--red) !important; border-color: var(--red-dark) !important; color: #fff !important; }
.btn.big { font-size: 16px !important; min-height: 48px !important; padding: 0 26px !important; }
.btn.small { font-size: 12px !important; min-height: 30px !important; padding: 0 12px !important; }

/* ── Forms ───────────────────────────────────────────────── */
input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="number"], input[type="url"],
input:not([type]), textarea, select, .login-input, .signup-input {
    background: #fff !important;
    border: 1px solid var(--line-strong) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: var(--ink) !important;
    font: 15px var(--font) !important;
    padding: 9px 12px !important;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--red) !important;
    box-shadow: 0 0 0 3px rgba(224, 40, 44, 0.15) !important;
    outline: none !important;
}
.search-box { border: 1px solid var(--line-strong) !important; border-radius: 999px !important; box-shadow: none !important; padding: 4px 12px !important; background: #fff !important; }
.search-box input { border: 0 !important; box-shadow: none !important; padding: 6px 4px !important; }
.login-label, .field-label { color: var(--ink) !important; font: 700 14px var(--font) !important; }

/* ── Tabs: a pill switch ─────────────────────────────────── */
.sort-tabs, .create-tabs, .admin-tabs {
    background: #ECEEF4 !important;
    border: 0 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    flex-wrap: wrap;
    gap: 2px !important;
    padding: 4px !important;
}
.admin-tabs { border-radius: 16px !important; }
.sort-tabs button, .create-tabs button, .create-tabs a, .admin-tabs button, .tab-btn {
    background: transparent !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    color: var(--muted) !important;
    font: 700 13px/1 var(--font) !important;
    margin: 0 !important;
    padding: 9px 14px !important;
    text-decoration: none !important;
}
.sort-tabs button:hover, .create-tabs button:hover, .create-tabs a:hover, .admin-tabs button:hover, .tab-btn:hover { color: var(--ink) !important; }
.sort-tabs button[aria-selected="true"], .create-tabs [aria-selected="true"], .create-tabs .active,
.admin-tabs [aria-selected="true"], .admin-tabs .active, .tab-btn.active, .tab-btn[aria-selected="true"] {
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(20, 28, 45, 0.12) !important;
    color: var(--red) !important;
}

/* ── Avatars ─────────────────────────────────────────────── */
.headshot { background: linear-gradient(180deg, #FFF4E8, #FFE3CC) !important; border: 0 !important; border-radius: 14px; }
.headshot.ring { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--red) !important; }

/* ── Game tiles ──────────────────────────────────────────── */
.game-grid { gap: 16px !important; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important; }
.game-tile {
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow) !important;
    overflow: hidden;
    padding: 0 !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.game-tile:hover { box-shadow: var(--shadow-lift) !important; transform: translateY(-3px); }
.game-thumb { border: 0 !important; border-radius: 0 !important; }
.game-tile-body { gap: 3px !important; padding: 10px 12px 12px !important; }
.game-tile-name { color: var(--ink) !important; font: 800 15px/1.3 var(--font) !important; }
.game-tile-meta, .game-tile-stats { color: var(--muted) !important; font-size: 12px !important; }
.game-grid .game-thumb.placeholder { font-size: 22px !important; padding: 0 10px 16px; }
.thumb-wrap .live-badge { bottom: 8px; font: 700 11px var(--font) !important; left: 8px; padding: 4px 8px !important; top: auto; border-radius: 999px !important; }
.private-badge { font: 700 11px var(--font) !important; border-radius: 999px !important; }

/* ── Home ────────────────────────────────────────────────── */
.home-hero-new {
    background:
        radial-gradient(circle at 85% 20%, rgba(255, 201, 60, 0.35), transparent 40%),
        radial-gradient(circle at 10% 90%, rgba(224, 40, 44, 0.12), transparent 45%),
        linear-gradient(135deg, #FFFFFF 0%, #FFF5F2 100%) !important;
    border: 1px solid var(--line) !important;
    border-radius: 24px !important;
    box-shadow: var(--shadow) !important;
    padding: 30px 34px !important;
}
.home-welcome { padding: 18px !important; }
.home-list li { border-bottom: 1px solid var(--line); }
.friend-card { background: #fff !important; border: 1px solid var(--line) !important; border-radius: 14px !important; box-shadow: var(--shadow) !important; }

/* ── Tables (forums, lists) ──────────────────────────────── */
table th, .forum-category th {
    background: var(--wash) !important;
    border-bottom: 1px solid var(--line) !important;
    color: var(--muted) !important;
    font: 800 12px var(--font) !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.forum-category { overflow: hidden; }
.forum-category tbody tr:nth-child(even) { background: #FAFBFD !important; }
.board-title { color: var(--ink) !important; font-weight: 800; }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
    border-top: 1px solid var(--line) !important;
    color: var(--muted) !important;
    font: 13px/1.7 var(--font) !important;
    margin: 36px auto 0 !important;
    max-width: 1180px;
    padding: 18px 18px 30px !important;
    text-align: center;
}
.site-footer a { color: var(--muted) !important; font-weight: 600; margin: 0 6px; text-decoration: none; }
.site-footer a:hover { color: var(--ink) !important; text-decoration: underline; }
.site-footer .footer-fine { color: #8A90A0; font-size: 12px; line-height: 1.6; margin-top: 10px; }
.site-footer .footer-fine a { font-weight: 600; margin: 0; }

/* ── Bits from the old theme that are about layout, not looks ── */
/* Create page: "Get Gobrix Studio" box */
.card.studio-download {
    align-items: center;
    background: linear-gradient(135deg, #FFFFFF 0%, #FFF5F2 100%) !important;
    border: 1px solid #F6C9C6 !important;
    color: var(--text) !important;
    display: flex;
    gap: 16px;
    padding: 16px 18px !important;
}
.studio-download-text h2 { color: var(--ink) !important; font: 800 18px/1.2 var(--font) !important; margin: 0 0 4px !important; }
.studio-download-text p { color: var(--text) !important; font-size: 14px !important; line-height: 1.5; margin: 0 !important; }
.studio-download-soon { background: var(--wash) !important; border: 1px solid var(--line) !important; border-radius: 999px; color: var(--muted) !important; font-size: 12px !important; }

/* Messages above the login / sign-up / password forms */
.form-alert { border: 1px solid; border-radius: 12px; font: 14px/1.45 var(--font); margin: 0 0 14px; padding: 10px 12px; text-align: left; }
.form-alert.error { background: #FDECEA; border-color: #F2B8B2; color: #8C1D14; }
.form-alert.notice { background: #E8F6EE; border-color: #A9DDBD; color: #17603A; }
.form-links { font: 600 13px var(--font); margin: 14px 0 0; text-align: center; }
.form-links a + a { margin-left: 14px; }

/* Robot check (Turnstile) above the submit button */
.captcha-box { display: flex; justify-content: center; margin: 12px 0 14px; min-height: 65px; }
.captcha-box[hidden] { display: none; }

/* Login / sign-up boxes */
.login-box, .signup-box { padding: 30px !important; }
.login-wrapper, .signup-wrapper { margin-top: 46px; }

/* Legal pages and the 404 page */
.legal-tabs { background: #ECEEF4; border-radius: 999px; display: inline-flex !important; flex-wrap: wrap; gap: 2px; padding: 4px; border: 0 !important; }
.legal-tabs a { background: transparent !important; border: 0 !important; border-radius: 999px !important; color: var(--muted) !important; font: 700 13px/1 var(--font); padding: 9px 14px !important; text-decoration: none; }
.legal-tabs a[aria-current="page"] { background: #fff !important; box-shadow: 0 1px 3px rgba(20, 28, 45, 0.12); color: var(--red) !important; }
.legal-doc { border: 1px solid var(--line) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow); margin-top: 12px; }
.error-code { color: var(--red) !important; }
.not-found-card { border: 1px solid var(--line) !important; border-radius: 24px !important; box-shadow: var(--shadow) !important; }