body {
    background-color: #242424;
    color: #fff;

    font-size: 14px;
}

.page-picker--virtual.vscomp-ele { display: inline-block; width: 6rem; max-width: none; }
.page-picker--virtual .vscomp-wrapper { color: var(--text, #fff); }
.page-picker--virtual .vscomp-toggle-button,
.page-picker--virtual .vscomp-dropbox { background: var(--page-picker-background, #171615); border-color: var(--line-strong, #ffffff32); }
.page-picker--virtual .vscomp-toggle-button { min-height: 2.25rem; padding-block: .24rem; border-radius: .25rem; }
.page-picker--virtual .vscomp-arrow::after { border-bottom-color: var(--text, #fff); border-right-color: var(--text, #fff); }
.page-picker--virtual .vscomp-dropbox { color: var(--text, #fff); box-shadow: 0 .4rem 1.2rem #0008; }
.page-picker--virtual .vscomp-search-container { border-bottom-color: var(--line-strong, #ffffff32); }
.page-picker--virtual .vscomp-search-input { color: inherit; }
.page-picker--virtual .vscomp-option.focused,
.page-picker--virtual .vscomp-option:hover { background: var(--surface-hover, #403934); }
.page-picker--virtual .vscomp-option.selected { color: #19120a; background: var(--accent-bright, #ffc45a); }

.content, .header {
    margin-left: auto;
    margin-right: auto;

    max-width: 1000px;

    padding-left: 1em;
    padding-right: 1em;
}

.header .pure-menu {
    margin-top: 24px;

    background-color: #1b1b1b;
    background-image: linear-gradient(to bottom, #222222, #111111);
    background-repeat: repeat-x;
    border-color: #252525;
    color: #999;

    display: flex;
    flex-direction: row;

    padding: 0;
    line-height: 36px;
}

.header .pure-menu-link:hover, .header .pure-menu-link:focus {
    background: none;
    color: #fff;
}

.header .pure-menu-item.pure-menu-selected > .pure-menu-link {
    background: #111;
    color: #fff;
}

.header .pure-menu-heading {
    flex-basis: 9.5em;
    align-self: center;

    font-family: "Jura", sans-serif;
    font-weight: 500;
    font-size: 20px;

    text-transform: initial;
    padding-top: 0;
    padding-bottom: 0;
}

.header .pure-menu form {
    margin-left: auto;

    padding: 0 1em;

    display: inline-flex;
    align-self: center;
}

.header .pure-menu form input {
    color: #fff;
    background-color: #515151;
    border-color: #111;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1), 0 1px 0 rgba(255, 255, 255, .15);
}

.header .pure-menu form input::placeholder {
    color: #a1a1a1;
}

@media screen and (min-width: 48em) {
    .content, .header {
        padding-left: 2em;
        padding-right: 2em;
    }
}

.content a:not(.pure-button), .content a:not(.pure-button):visited {
    color: #ffa719;
    text-decoration: none;
}

.content a:not(.pure-button):hover, .content a:not(.pure-button):active {
    color: #fff;
    text-decoration: underline;
}

.pagination {
    margin: 0.5em 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.pagination > div + div {
    margin-top: 0.5em;
}

.pagination .pager > a, .pagination .pager > span {
    margin: 0 0.15em;
}

.grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 32px;
}

@media (min-width: 36em) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 54em) {
    .grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 72em) {
    .grid {
        margin: 0 -64px;
        grid-template-columns: repeat(4, 1fr);
    }
}

.center {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin: 1em 0;
}

.cell {
    overflow: hidden;

    display: flex;
    flex-direction: column;

    border: 1px solid #1b1b1b;
    background-color: #141414;
}

.cell .avatar {
    background-color: #0f0f0f;
    display: grid;
    grid-template-columns: 40px auto 48px 60px;
    grid-gap: 4px;
    min-height: 40px;
}

.cell .avatar .img {
    align-self: center;

    display: block;
    padding: 4px;

    background-size: contain;
}

.cell .avatar .name {
    display: flex;
    align-items: center;

    word-break: break-word;
}

.cell .avatar a:not(.pure-button), .cell .avatar a:not(.pure-button):visited {
    color: #fff;
    text-decoration: none;
}

.cell .avatar form {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
}

.cell .avatar form button {
    line-height: inherit;
    background: none;
    color: #fff;
    padding: 0;
}

.cell .avatar form button:hover, .cell .avatar form button:active {
    background-color: #999;
}

.cell .avatar .date {
    grid-column: 4;

    display: flex;
    align-items: center;

    font-size: 85%;
    text-align: center;
}

.cell .logo {
    flex-grow: 1;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cell .logo + .logo {
    margin-top: 1em;
    padding-top: 1em;
    border-top: 1px solid #333;
}

.cell .logo img {
    display: block;
    border: 0;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 256px;
}

.cell.notice {
    padding: 1em;
    text-align: center;
}


.cell.player .img {
    grid-row: 1;
    grid-column: 1;
}

.cell.player .name {
    grid-row: 1;
    grid-column: 2;
}

.cell.player form {
    grid-row: 2;
    grid-column: 4 / 5;

    z-index: 1;
}

.cell.player .date {
    grid-row: 2;
    grid-column: 1 / 5;

    text-align: center;
    justify-content: center;

    padding: 1em 0;
    font-size: 100%;
}

.detail .cell .logo img {
    max-height: none;
}

/* The shared presentation library owns the masthead, account controls, search,
   and pager. Sprays keeps its historical wider gallery beneath that 1000px
   masthead. */
:root {
    --surface: #2b2927;
    --surface-soft: #252321;
    --surface-hover: #403934;
    --line: #ffffff20;
    --line-strong: #ffffff36;
    --text: #f9f5ee;
    --muted: #c1b8ae;
    --quiet: #91877d;
    --accent: #ffad25;
    --accent-bright: #ffc45a;
    --accent-ink: #231503;
    --header: #36120b;
    --radius: .45rem;
    --radius-large: .75rem;
    --shadow: 0 1rem 2.5rem #0006;
}

* { box-sizing: border-box; }

/* The shared presentation places the page gradient on html. Do not cover it
   with the legacy opaque body surface. */
body { background-color: transparent; }

a { color: var(--accent); text-decoration: none; text-underline-offset: .18em; }
a:hover { color: var(--accent-bright); text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 3px solid var(--accent-bright);
    outline-offset: 3px;
}
button, input { font: inherit; }
img { max-width: 100%; }
svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.sprays-main {
    width: min(100% - 2rem, 80rem);
    margin-inline: auto;
    min-height: 60vh;
    padding-block: 1.75rem;
}

.sprays-browser { margin-bottom: 0; }
.sprays-browser .saxton-card-content { padding: .65rem .9rem .9rem; }
.sprays-browser .legacy-count { padding-bottom: .25rem; }
.sprays-browser .table-scroll {
    overflow: visible;
    margin-block: .5rem;
}

.sprays-gallery {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 1rem;
    margin: 0;
}

.server-spray-groups {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

.server-spray-group { margin-bottom: 0; }
.server-spray-group .saxton-section-heading { padding-right: .5rem; }
.server-spray-group .saxton-section-title { padding: .3rem .5rem; font-size: 1.1rem; }
.server-spray-group .server-identity { gap: .3rem; }
.server-spray-group .server-identity-avatar { --server-identity-size: 1.45rem; --server-identity-frame: 2px; }
.server-spray-group .server-identity-name { font-size: 1.1rem; }
.server-spray-group .saxton-card-content { padding: .3rem .5rem .5rem; }
.server-spray-group-empty { margin: .35rem; color: var(--muted); }
.server-spray-group .pager-band {
    min-height: 1.9rem;
    gap: .35rem;
    margin-bottom: .3rem;
    padding: .15rem .25rem;
    font-size: .75rem;
}
.server-spray-group .pager-band a { padding: .1rem .2rem; }
.server-spray-group .page-picker--virtual .vscomp-toggle-button {
    min-height: 1.65rem;
    padding-block: .08rem;
}
.server-spray-group .sprays-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
}
.server-spray-group .sprays-gallery .cell { border-radius: .35rem; box-shadow: 0 .25rem .7rem #0004; font-size: .75rem; }
.server-spray-group .cell .avatar { min-height: 2rem; gap: .25rem; padding: .12rem .2rem; }
.server-spray-group .steam-identity { gap: .3rem; }
.server-spray-group .steam-identity-avatar { --steam-avatar-size: 1.5rem; --steam-avatar-frame: 2px; }
.server-spray-group .steam-identity-copy { align-self: stretch; align-content: center; }
.server-spray-group .steam-identity-copy small { display: none; }
.server-spray-group .steam-identity-name { font-size: .95rem; line-height: 1.1; }
.server-spray-group .cell .logo { padding: .5rem; }
.server-spray-group .spray-card-footer { display: flex; gap: .2rem; min-height: 2.15rem; padding: .25rem; }
.server-spray-group .spray-card-footer form { gap: .25rem; }
.server-spray-group .spray-card-footer form button { min-width: 1.25rem; padding: .18rem .3rem; }
.server-spray-group .spray-card-seen { flex: 1 1 0; justify-content: flex-start; min-width: 0; overflow: hidden; font-size: .9rem; font-variant-numeric: tabular-nums; }
.server-spray-group .timestamp-display { margin-left: .15rem; line-height: 1.05; }
.server-spray-group .timestamp-display-time { margin: 0; padding: 0; font-size: .65rem; line-height: 1; }
.server-spray-group .timestamp-display-date { margin-top: .05rem; padding: 0; font-size: .7rem; line-height: 1.05; }
.server-spray-group .spray-card-footer form { flex: 0 0 auto; margin-left: auto; }

@media (min-width: 42rem) {
    .server-spray-group .sprays-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 72rem) {
    .server-spray-group .sprays-gallery { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

@media (min-width: 72rem) {
    .sprays-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.sprays-gallery .cell,
.detail .cell {
    background: linear-gradient(145deg, #312e2b, var(--surface-soft));
    border-color: var(--line);
    border-radius: var(--radius);
    box-shadow: 0 .45rem 1.15rem #0004;
}

.cell .avatar {
    background: #171615b8;
    border-bottom: 1px solid var(--line);
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: .4rem;
    padding: .2rem .35rem;
}

.cell .logo { padding: .85rem; }
.cell .logo a { color: var(--accent); }
.cell .logo a:hover { color: var(--accent-bright); }

.spray-card-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: .5rem;
    align-items: center;
    min-height: 2.85rem;
    padding: .35rem .55rem;
    color: var(--quiet);
    background: #171615b8;
    border-top: 1px solid var(--line);
}

.spray-card-seen { display: inline-flex; gap: .35rem; align-items: center; min-width: 0; }
.spray-card-reverse-search { grid-column: 2; justify-self: center; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.spray-card-footer form { grid-column: 3; justify-self: end; display: inline-flex; gap: .35rem; align-items: center; color: var(--muted); font-size: .8rem; }
.spray-card-footer form button {
    min-width: 1.6rem;
    padding: .28rem .4rem;
    color: var(--text);
    background: #292522;
    border-color: var(--line-strong);
    border-radius: .25rem;
    box-shadow: none;
}
.spray-card-footer form button:hover {
    color: var(--text);
    background: var(--surface-hover);
    border-color: var(--accent);
}
.spray-score { min-width: 2ch; color: var(--text); text-align: center; }

.pure-button {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    justify-content: center;
    padding: .55rem .8rem;
    color: var(--accent-ink);
    background: linear-gradient(180deg, var(--accent-bright), var(--accent));
    border: 1px solid #ffd477;
    border-radius: var(--radius);
    box-shadow: inset 0 1px #fff7;
    font-weight: 700;
    cursor: pointer;
}

.pure-button:hover { color: #17110a; background: linear-gradient(180deg, #ffda8a, var(--accent-bright)); }

.center { color: var(--muted); }
.detail { max-width: 62.5rem; margin-inline: auto; }
.other-sprayers { width: min(100%, 62.5rem); margin: 1.75rem auto 0; }
.other-sprayers-title {
    margin: 0 0 .7rem;
    color: var(--muted);
    font-family: Jura, sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.other-sprayers-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}
.other-sprayer-card:only-child,
.other-sprayer-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.other-sprayer-card {
    display: flex;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    padding: .6rem .75rem;
    background: linear-gradient(145deg, #312e2b, var(--surface-soft));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 .45rem 1.15rem #0004;
}
.other-sprayer-card:is(:hover, :focus-visible) {
    color: inherit;
    background: var(--surface-hover);
    border-color: var(--line-strong);
    box-shadow: inset 3px 0 var(--accent), 0 .45rem 1.15rem #0004;
    text-decoration: none;
}
.other-sprayer-card .steam-identity { min-width: 0; }
.other-sprayer-seen { flex: 0 0 auto; color: var(--quiet); text-align: right; }
.other-sprayer-seen .timestamp-display { align-items: flex-end; }
.detail .cell.player-sprays {
    gap: 1rem;
    overflow: visible;
    background: none;
    border: 0;
    box-shadow: none;
}
.player-spray {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(145deg, #312e2b, var(--surface-soft));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 .45rem 1.15rem #0004;
}

@media (max-width: 38rem) {
    .sprays-main { width: min(100% - 1rem, 80rem); padding-block: 1rem; }
    .sprays-browser .saxton-card-content { padding-inline: .6rem; }
    .sprays-gallery { grid-template-columns: 1fr; }
    .other-sprayers-grid { grid-template-columns: 1fr; }
}