/* Gobrix site-wide layout: header, navigation, account menu, page containers, cards and
   shared bits (headshots, buttons, game tiles). Loaded after the older page stylesheets. */
:root {
    --ink: #243c5a;
    --text: #27384b;
    --muted: #5b6b7d;
    --brand: #315f91;
    --brand-2: #5e91cc;
    --brand-3: #a9c6e8;
    --wash: #eaf2fb;
    --card: #ffffff;
    --line: #d5e1ef;
    --line-strong: #c3d4e8;
    --green: #3fb24f;
    --green-dark: #2e8a3b;
    --red: #c4281c;
    --yellow: #f5cd30;
    --radius: 14px;
    --shadow: 0 3px 0 #dce6f1, 0 10px 24px rgba(51, 81, 116, 0.07);
    --display: "Comic Sans MS", "Comic Neue", "Chalkboard SE", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; }
img { max-width: 100%; }

/* ── Header ─────────────────────────────────────────────── */
.site-header {
    background: linear-gradient(115deg, #75a9e2 0%, #5e91cc 55%, #507cad 100%);
    border-bottom: 3px solid #3f6798;
    box-shadow: 0 4px 14px rgba(42, 77, 117, 0.16);
    position: sticky;
    top: 0;
    z-index: 50;
}

.site-header-inner {
    align-items: center;
    display: flex;
    gap: 18px;
    margin: 0 auto;
    max-width: 1240px;
    min-height: 64px;
    padding: 8px 16px;
}

.site-logo {
    display: flex;
    flex: 0 0 auto;
    transition: transform 0.15s ease;
}

.site-logo:hover { transform: rotate(-2deg) scale(1.03); }
.site-logo img { display: block; height: 44px; width: auto; }

.site-nav {
    display: flex;
    flex: 1 1 auto;
    gap: 2px;
    min-width: 0;
}

.site-nav a {
    border-radius: 10px;
    color: #fff;
    font: bold 15px/1 Arial, sans-serif;
    padding: 10px 12px;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(30, 60, 100, 0.35);
    transition: background 0.15s ease;
    white-space: nowrap;
}

.site-nav a:hover { background: rgba(255, 255, 255, 0.16); }
.site-nav a[aria-current="page"] {
    background: rgba(255, 255, 255, 0.95);
    color: var(--brand);
    text-shadow: none;
}

.site-account {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    margin-left: auto;
}

.header-pill,
.header-button {
    align-items: center;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    box-shadow: 0 2px 0 rgba(30, 60, 100, 0.25);
    color: var(--brand);
    display: inline-flex;
    font: bold 14px/1 Arial, sans-serif;
    gap: 7px;
    height: 38px;
    padding: 0 14px;
    text-decoration: none;
    white-space: nowrap;
}

.header-pill img { height: 22px; width: 22px; }
.header-button:hover { background: #fff; }
.header-button.primary {
    background: linear-gradient(180deg, #5fd16d, #3fb24f);
    border-color: #2e8a3b;
    box-shadow: 0 2px 0 #2e8a3b;
    color: #fff;
}

.header-icon-button {
    align-items: center;
    background: rgba(255, 255, 255, 0.18);
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    position: relative;
    width: 38px;
}

.header-icon-button:hover { background: rgba(255, 255, 255, 0.3); }
.header-icon-button img { filter: brightness(0) invert(1); height: 20px; width: 20px; }

.account-menu { position: relative; }

.account-button {
    align-items: center;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    box-shadow: 0 2px 0 rgba(30, 60, 100, 0.25);
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    font: bold 14px/1 Arial, sans-serif;
    gap: 8px;
    height: 42px;
    padding: 0 12px 0 3px;
}

.account-button .headshot { height: 36px; width: 36px; }
.account-button .caret {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--brand);
    height: 0;
    width: 0;
}

.account-dropdown {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(36, 60, 90, 0.2);
    min-width: 230px;
    padding: 8px;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
}

.account-dropdown[hidden] { display: none; }

.account-dropdown-head {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 10px;
    margin-bottom: 6px;
    padding: 6px 8px 12px;
}

.account-dropdown-head .headshot { height: 48px; width: 48px; }
.account-dropdown-head strong { color: var(--ink); display: block; font-size: 16px; }
.account-dropdown-head span { color: var(--muted); font-size: 13px; }

.account-dropdown a {
    align-items: center;
    border-radius: 9px;
    color: var(--ink);
    display: flex;
    font: 15px/1 Arial, sans-serif;
    gap: 10px;
    padding: 10px 10px;
    text-decoration: none;
}

.account-dropdown a:hover,
.account-dropdown a:focus-visible { background: var(--wash); }
.account-dropdown a img {
    filter: invert(38%) sepia(51%) saturate(650%) hue-rotate(174deg) brightness(88%) contrast(90%);
    height: 18px;
    width: 18px;
}
.account-dropdown .menu-separator { border-top: 1px solid var(--line); margin: 6px 0; }
.account-dropdown a.danger { color: #b3261e; }
.account-dropdown a.danger img { filter: invert(20%) sepia(80%) saturate(3000%) hue-rotate(350deg) brightness(85%); }

/* Narrow screens: the nav moves to its own scrolling row under the logo. */
@media (max-width: 900px) {
    .site-header-inner { flex-wrap: wrap; gap: 8px 12px; }
    .site-nav {
        order: 3;
        overflow-x: auto;
        scrollbar-width: none;
        width: 100%;
        flex-basis: 100%;
    }
    .site-nav::-webkit-scrollbar { display: none; }
    .account-button .account-name { display: none; }
    .header-pill .pill-label { display: none; }
}

@media (max-width: 420px) {
    .site-logo img { height: 34px; }
    .header-pill { padding: 0 10px; }
}

/* ── Page layout ────────────────────────────────────────── */
.page {
    margin: 0 auto;
    max-width: 1180px;
    padding: 28px 16px 64px;
}

.page.narrow { max-width: 860px; }

.page-head {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    justify-content: space-between;
    margin-bottom: 22px;
}

.page-title {
    color: var(--ink);
    font: bold clamp(28px, 4vw, 38px)/1.15 var(--display);
    margin: 0;
    text-wrap: balance;
}

.page-subtitle {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.5;
    margin: 6px 0 0;
    max-width: 62ch;
}

.section { margin-top: 34px; }

.section-head {
    align-items: baseline;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 14px;
}

.section-title {
    color: var(--ink);
    font: bold 22px/1.2 var(--display);
    margin: 0;
}

.section-link {
    color: var(--brand);
    font-weight: bold;
    text-decoration: none;
}

.section-link:hover { text-decoration: underline; }

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px;
}

.status-text {
    color: var(--muted);
    font-size: 16px;
}

.empty-state {
    background: var(--card);
    border: 2px dashed var(--line-strong);
    border-radius: var(--radius);
    color: var(--muted);
    padding: 34px 20px;
    text-align: center;
}

.empty-state strong {
    color: var(--ink);
    display: block;
    font: bold 20px/1.3 var(--display);
    margin-bottom: 6px;
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    box-shadow: 0 3px 0 #dce6f1;
    color: var(--brand);
    cursor: pointer;
    display: inline-flex;
    font: bold 15px/1 Arial, sans-serif;
    gap: 8px;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { box-shadow: 0 1px 0 #dce6f1; transform: translateY(2px); }
.btn:disabled { cursor: not-allowed; opacity: 0.55; transform: none; }
.btn.primary { background: linear-gradient(180deg, #6ea6e0, #4f86c4); border-color: #3f6fa5; box-shadow: 0 3px 0 #3f6fa5; color: #fff; }
.btn.go { background: linear-gradient(180deg, #5fd16d, #3fb24f); border-color: #2e8a3b; box-shadow: 0 3px 0 #2e8a3b; color: #fff; }
.btn.danger { background: #fff; border-color: #e6b3ae; box-shadow: 0 3px 0 #f0d3cf; color: #b3261e; }
.btn.danger.solid { background: linear-gradient(180deg, #e0574c, #c4281c); border-color: #9e1f16; box-shadow: 0 3px 0 #9e1f16; color: #fff; }
.btn img { height: 18px; width: 18px; }
.btn.go img, .btn.primary img { filter: brightness(0) invert(1); }

/* ── Headshots (3D avatar icons) ────────────────────────── */
.headshot {
    background: radial-gradient(circle at 50% 35%, #ffffff 0%, #dbe8f7 70%, #c7d9ee 100%);
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
    height: 40px;
    object-fit: cover;
    vertical-align: middle;
    width: 40px;
}

.headshot.ring { box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--line-strong); }
.headshot.lg { height: 72px; width: 72px; }
.headshot.sm { height: 28px; width: 28px; }
.headshot.xs { height: 22px; width: 22px; }

.user-chip {
    align-items: center;
    color: var(--ink);
    display: inline-flex;
    font-weight: bold;
    gap: 8px;
    text-decoration: none;
}

.user-chip:hover span { text-decoration: underline; }

.online-dot {
    background: #9aa8b8;
    border: 2px solid #fff;
    border-radius: 50%;
    display: inline-block;
    height: 12px;
    width: 12px;
}

.online-dot.on { background: #3fb24f; }

.avatar-wrap { display: inline-block; position: relative; }
.avatar-wrap .online-dot { bottom: 0; position: absolute; right: 0; }

/* ── Game tiles ─────────────────────────────────────────── */
.game-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.game-tile {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: inherit;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.game-tile:hover { box-shadow: 0 5px 0 #d1deed, 0 14px 28px rgba(51, 81, 116, 0.12); transform: translateY(-3px); }

.game-thumb {
    aspect-ratio: 16 / 9;
    background: linear-gradient(140deg, #8fbdf0, #4f86c4);
    display: block;
    object-fit: cover;
    position: relative;
    width: 100%;
}

/* Placeholder art for games without a thumbnail: a brick pattern in the game's color. */
.game-thumb.placeholder {
    align-items: center;
    background-color: var(--thumb, #5e91cc);
    /* A baseplate of studs in the game's color, lit from the top left. */
    background-image:
        linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.18)),
        radial-gradient(circle at 46% 44%, rgba(255, 255, 255, 0.28) 0 26%, rgba(0, 0, 0, 0.12) 29% 33%, transparent 35%);
    background-size: 100% 100%, 34px 34px;
    color: #fff;
    display: flex;
    font: bold clamp(22px, 3vw, 30px)/1.1 var(--display);
    justify-content: center;
    padding: 0 14px;
    text-align: center;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3), 0 0 18px rgba(0, 0, 0, 0.25);
}

.game-thumb.placeholder span { overflow-wrap: anywhere; }

.live-badge {
    align-items: center;
    background: rgba(20, 40, 25, 0.78);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font: bold 12px/1 Arial, sans-serif;
    gap: 6px;
    left: 10px;
    padding: 6px 9px;
    position: absolute;
    top: 10px;
}

.live-badge::before { background: #5fe06f; border-radius: 50%; content: ""; height: 7px; width: 7px; }
.thumb-wrap { position: relative; }

.private-badge {
    background: rgba(20, 30, 45, 0.78);
    border-radius: 999px;
    color: #fff;
    font: bold 12px/1 Arial, sans-serif;
    padding: 6px 9px;
    position: absolute;
    right: 10px;
    top: 10px;
}

.game-tile-body { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px 14px; }
.game-tile-name { color: var(--ink); font: bold 17px/1.25 Arial, sans-serif; overflow-wrap: anywhere; }
.game-tile-meta { color: var(--muted); font-size: 13px; }
.game-tile-stats { color: var(--muted); display: flex; font-size: 13px; gap: 12px; }
.game-tile-stats .live { color: var(--green-dark); font-weight: bold; }

/* ── Footer ─────────────────────────────────────────────── */
.site-footer {
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
    margin-top: 40px;
    padding: 22px 16px 34px;
    text-align: center;
}

.site-footer a { color: var(--brand); margin: 0 8px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}

.page-subtitle a { color: var(--brand); font-weight: bold; }
a .game-thumb.placeholder, a.game-tile, .my-game-thumb { text-decoration: none; }

/* ── Shared lists ───────────────────────────────────────── */
.section-count { color: var(--muted); font: bold 16px Arial, sans-serif; }

.friend-strip {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.friend-card {
    align-items: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 8px 12px;
    text-decoration: none;
    transition: transform 0.15s ease;
}

.friend-card:hover { transform: translateY(-2px); }
.friend-name { font-weight: bold; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


.link-button {
    background: none;
    border: 0;
    color: var(--brand);
    cursor: pointer;
    font: bold 14px Arial, sans-serif;
    padding: 4px 0;
}

.link-button:hover { text-decoration: underline; }