/* Project-only styles.
   Reference-covered Xero pages intentionally rely on the captured Xero CSS
   bundles; do not override their navbar, cards, feed, player, clan, inventory,
   characters, statistics or download selectors here. */

:root {
    --xr-bg:#0b0c14;
    --xr-panel:#14161f;
    --xr-panel-2:#191c27;
    --xr-border:rgba(222,235,255,.10);
    --xr-text:#dce4f2;
    --xr-muted:#8a94a8;
    --xr-accent:#005bff;
    --xr-accent-2:#00c2ff;
}

/* Sign-in/sign-up are project screens rather than reference captures. */
.auth-page {
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:96px 16px 48px;
    background:radial-gradient(1200px 600px at 50% -10%,rgba(0,91,255,.18),transparent 60%);
}
.auth-card {
    width:100%;max-width:400px;background:var(--xr-panel);
    border:1px solid var(--xr-border);border-radius:14px;padding:32px 28px;
    box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.auth-logo{display:block;text-align:center;margin-bottom:20px}.auth-logo img{height:40px;width:auto}
.auth-tabs{display:flex;gap:8px;margin-bottom:22px}.auth-tab{flex:1;text-align:center;padding:10px 0;color:var(--xr-muted);text-decoration:none;font-weight:600;border-radius:8px;letter-spacing:.04em;text-transform:uppercase;font-size:13px;border:1px solid transparent}.auth-tab.is-active{color:#fff;background:var(--xr-panel-2);border-color:var(--xr-border)}
.auth-form{display:flex;flex-direction:column;gap:16px}.auth-label{display:flex;flex-direction:column;gap:6px;color:var(--xr-muted);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.auth-label .form-control{background:var(--xr-panel-2);border:1px solid var(--xr-border);border-radius:8px;color:var(--xr-text);padding:11px 12px;font-size:15px}.auth-label .form-control:focus{outline:none;border-color:var(--xr-accent);box-shadow:0 0 0 3px rgba(0,91,255,.25)}/* Running text on the auth cards (the recovery messages); .auth-label is a stacked field label. */
.auth-text{color:var(--xr-text);font-size:14px;line-height:1.5;margin:0 0 12px}
.auth-hint{color:var(--xr-muted);font-size:11px;font-weight:400;text-transform:none;letter-spacing:0}
.auth-submit{margin-top:6px;padding:12px;font-weight:700;border:0;border-radius:9px;color:#fff;cursor:pointer;text-transform:uppercase;letter-spacing:.06em;background:linear-gradient(135deg,var(--xr-accent),var(--xr-accent-2))}.auth-submit:hover{filter:brightness(1.08)}
.auth-error{background:rgba(255,48,106,.12);border:1px solid rgba(255,48,106,.4);color:#ff9db5;border-radius:8px;padding:10px 12px;margin-bottom:16px;font-size:14px}.auth-links,.auth-terms{text-align:center;margin-top:18px;font-size:13px;color:var(--xr-muted)}.auth-links a,.auth-terms a{color:var(--xr-accent-2);text-decoration:none}

/* Keyboard-navigated (arrow keys) search suggestion highlight, reusing the
   same look the vendored bundle already defines for a hovered/selected item. */
.tt-suggestion.active .tt-suggestion-item{background-color:#deebff0d}

/* Sign Out is a real POST form (CSRF-protected) styled to sit exactly where
   the captured Xero markup had a plain <a>; only reset browser button chrome. */
.uniteddb-signout-form{margin:0;padding:0;display:block}
.uniteddb-signout-button{background:none;border:0;width:100%;text-align:inherit;font:inherit;cursor:pointer;display:block}

/* Project-only static/404 pages. */
.uniteddb-page-title{font-size:28px;font-weight:700;margin:84px 0 20px;color:#fff}.uniteddb-article{max-width:820px;line-height:1.6;padding-top:76px;padding-bottom:40px}.uniteddb-article p{color:var(--xr-text);margin-bottom:14px}.uniteddb-faq-item{margin-bottom:22px}.uniteddb-faq-item h2{font-size:18px;color:#fff;margin-bottom:6px}.uniteddb-error{text-align:center;padding-top:120px}

/* Match history fidelity supplements -----------------------------------------
   The actual Xero app.css/player-view/match chunks provide the scoreboard
   layout. Keep project CSS limited to local interactions/data gaps. */
.uniteddb-web-player-matches .uniteddb-match-time {
    cursor: help;
    white-space: nowrap;
}
.uniteddb-web-player-matches .uniteddb-web-matches__clothes-inline {
    align-items: center;
    display: inline-flex;
    vertical-align: middle;
}
.uniteddb-web-player-matches .uniteddb-web-matches__clothes-inline[hidden] {
    display: none;
}
.uniteddb-web-player-matches .uniteddb-web-matches__details-footer:empty,
.uniteddb-web-player-matches .uniteddb-web-matches__details-footer > .pull-right:empty {
    min-height: 0;
}

/* Date tooltip is mounted outside the captured card's overflow clipping. */
.uniteddb-match-date-tooltip {
    position: fixed;
    z-index: 1100;
    pointer-events: none;
    color: #deebff;
    background: #05080d;
    border-radius: 4px;
    padding: 7px 10px;
    font-size: 11px;
    max-width: calc(100vw - 16px);
}

/* Tied/incomplete records have no known team; preserve the table inset. */
.uniteddb-web-player-matches .player-match-players-unknown { padding: 24px; }

/* The Change Avatar modal is a plain server-rendered form (no React portal),
   so its overlay/centering is spelled out explicitly rather than relying on
   a JS-driven .show class from the vendored bundle. */
.uniteddb-web-modal:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(3, 8, 14, .72);
}
.uniteddb-web-modal .modal-dialog { margin: 0; max-width: 420px; width: 100%; }

/* A clan mark drawn from the game's atlas code (lib/support/Media.js clanMark): three cells of
   the client's sprite sheets stacked in one box. Size, sheet scale and offsets are inline, since
   they are computed from the code; this only stacks the layers. */
.xdb-clanmark{display:inline-block;position:relative;overflow:hidden;vertical-align:middle;flex:none}
.xdb-clanmark>i{position:absolute;inset:0;display:block;background-repeat:no-repeat}

/* The top bar carries eight links where the captured one had three and a menu, so between the
   phone layout and a wide screen the links drop to their icons (the icon twin each link already
   has, with its title as tooltip), and on the narrowest of those the search box gives way too. */
@media (768px<=width<1480px){
    #uniteddb-main-navbar-react .uniteddb-main-navbar-nav-item{display:none!important}
    #uniteddb-main-navbar-react .uniteddb-main-navbar-nav-item-icon{display:block!important}
}
@media (1480px<=width<1600px){
    #uniteddb-main-navbar-react .uniteddb-main-navbar-search:not(.mobile){width:200px!important;padding-right:38px}
}
@media (768px<=width<1040px){
    #uniteddb-main-navbar-react .uniteddb-main-navbar-search:not(.mobile){width:160px!important;padding-right:38px}
    #uniteddb-main-navbar-react .uniteddb-main-navbar-nav-item-icon{padding-left:.55rem;padding-right:.55rem}
}
@media (768px<=width<900px){
    #uniteddb-main-navbar-react .uniteddb-main-navbar-search:not(.mobile){width:100px!important}
    #uniteddb-main-navbar-react .uniteddb-main-navbar-userbar{margin-left:12px}
}

/* The captured leaderboard bundle gives the table a 680px minimum on phones, which dragged the
   whole page sideways. The table now scrolls inside its own box instead. */
@media (width<=767.98px){
    #leaderboards-data-container{overflow-x:auto}
}

/* Friend, clan and follower cards (Social and Lists tabs). The presence avatar is a size container,
   so it has no size of its own; without one it collapsed to nothing and the name and "Seen ..."
   line slid under the picture. The second row also ran "Seen 2h ago" and "Level 69" together. */
.uniteddb-web-player-identity > .uniteddb-presence-avatar{flex:none;width:42px;height:42px}
.uniteddb-web-player-identity__second-row > span + span::before{content:"\00b7";margin:0 5px}

/* A PEN reward on the Quests pages: the amount beside the PEN coin. */
.uniteddb-web-challenges-reward__pen{height:20px;margin-right:5px;vertical-align:-5px}

/* Wiki toolbar on phones: the bundle turns it into a column but leaves flex-wrap on, and a wrapping
   column sizes its line to the widest item, so the search box and the filter chips ran off the
   screen. One unwrapped column keeps them at screen width; the chips then scroll sideways. */
@media (max-width:767.98px){.uniteddb-web-wiki__toolbar{flex-wrap:nowrap}}

/* Social > Blocked: the owner's Unblock button sits between a card's name and its menu. */
.uniteddb-web-social__unblock{display:flex;align-items:center;margin:0 2px 0 4px}
.uniteddb-web-social__unblock .btn{padding:3px 8px;font-size:11px;line-height:1.3}

/* Statistics > Overview has twelve cards. The bundle's auto-fit grid fits as many 130px columns as the
   width allows, so at 1280px it drew seven and five, a short half-empty second row. Twelve divides by
   six, four and two, so the grid is that many across and every row is full. */
.uniteddb-web-statistics__summary{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:991.98px){.uniteddb-web-statistics__summary{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:575.98px){.uniteddb-web-statistics__summary{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Composer, lane-composer: emotes in posts and comments. */
.uniteddb-emote{height:22px;width:auto;max-width:48px;vertical-align:middle;margin:0 1px;object-fit:contain}

/* The 2026 composer (components/composer_field): xero.gg draws the empty field's text with its
   editor's placeholder element; ours is the field's data-placeholder. Its panels, previews, error
   line and the reply window stay out of the page while hidden (their bundle rules set a display). */
.uniteddb-chat-input__editable.is-empty::before{content:attr(data-placeholder);display:inline-block;opacity:.5;pointer-events:none;white-space:nowrap;width:0}
.uniteddb-socialfeed-composer-panel-outer[hidden],.uniteddb-socialfeed-composer__submit-error[hidden],.uniteddb-socialfeed-reply-modal[hidden],.uniteddb-socialfeed-reply-modal__backdrop[hidden]{display:none}
.uniteddb-socialfeed-composer__submit-error{font-size:12px;margin-top:8px}

/* Composer, lane-composer: the previews under the post box are the bundle's. */
.uniteddb-socialfeed-composer__preview[hidden]{display:none}

/* Composer, lane-composer: a post's poll. */
.uniteddb-feed-poll{margin-bottom:6px;margin-top:10px}
.uniteddb-feed-poll__result{align-items:center;background:#deebff0d;border-radius:4px;display:flex;gap:8px;justify-content:space-between;margin:4px 0;overflow:hidden;padding:7px 12px;position:relative}
.uniteddb-feed-poll__bar{background:#1da1f233;bottom:0;left:0;position:absolute;top:0}
.uniteddb-feed-poll__result--mine .uniteddb-feed-poll__bar{background:#1da1f26b}
.uniteddb-feed-poll__text{min-width:0;overflow-wrap:anywhere;position:relative}
.uniteddb-feed-poll__pct{color:#deebff;flex:none;font-weight:600;position:relative}
.uniteddb-feed-poll__check{color:#1da1f2;height:13px;margin-right:6px;vertical-align:-1px;width:13px}
.uniteddb-feed-poll .uniteddb-newsfeed-post-poll-info{margin-top:6px}

/* Match page, lane-match: a team card with six figures (Damage joins Points, Kills, Deaths, Goals and Players) keeps one row where the card sits beside the other. */
@media (min-width:992px){.player-match-team-summary-stats[data-count="6"]{gap:8px;grid-template-columns:repeat(6,minmax(0,1fr))}}

/* Match page, lane-match: with the DMG column the tables are one column wider than a phone holds, which pushed PTS out of view; tighter padding and gaps below 576px bring it back. */
@media (max-width:575.98px){.player-match-players-alpha[data-damage],.player-match-players-beta[data-damage]{padding:16px 10px}[data-damage] .player-match-players-heading{padding:0 6px}[data-damage] .player-match-players-divider{width:12px}}

/* Match timeline, lane-match: the kills of a round, one per row, under the same header as the match page. */
.uniteddb-match-timeline-summary{display:flex;flex-wrap:wrap;gap:8px;margin:31px 0 10px}
.uniteddb-match-timeline{background:linear-gradient(#deebff0d 0%,#fff0 100%);padding:24px}
.uniteddb-match-timeline .player-match-players th,.uniteddb-match-timeline .player-match-players>tbody>tr>td,.uniteddb-match-timeline .player-match-players>tbody>tr:first-of-type>td{height:auto;padding:6px 12px;text-align:left;white-space:nowrap}
.uniteddb-match-timeline .player-match-players>tbody>tr>td{font-size:13px;line-height:28px}
.uniteddb-match-timeline .uniteddb-match-timeline-time{color:#8c9aaa;font-variant-numeric:tabular-nums;width:1%}
/* On a phone a kill is two lines instead of five columns: time, killer and victim, then weapon and assist. */
@media (max-width:575.98px){
.uniteddb-match-timeline{padding:6px 8px}
.uniteddb-match-timeline .player-match-players thead{display:none}
.uniteddb-match-timeline .player-match-players tbody tr{border-bottom:1px solid #deebff14;display:grid;gap:0 8px;grid-template-areas:"time killer victim" "time weapon assist";grid-template-columns:36px minmax(0,1fr) minmax(0,1fr);padding:6px 0}
.uniteddb-match-timeline .player-match-players tbody tr:last-child{border-bottom:0}
.uniteddb-match-timeline .player-match-players>tbody>tr>td,.uniteddb-match-timeline .player-match-players>tbody>tr:first-of-type>td{font-size:12px;line-height:22px;overflow:hidden;padding:0;text-overflow:ellipsis}
.uniteddb-match-timeline .player-match-players td:nth-child(1){grid-area:time;width:auto}
.uniteddb-match-timeline .player-match-players td:nth-child(2){grid-area:killer}
.uniteddb-match-timeline .player-match-players td:nth-child(3){color:#8c9aaa;grid-area:weapon}
.uniteddb-match-timeline .player-match-players td:nth-child(4){grid-area:victim}
.uniteddb-match-timeline .player-match-players td:nth-child(4):before{color:#8c9aaa;content:"\2192  "}
.uniteddb-match-timeline .player-match-players td:nth-child(5){grid-area:assist}
.uniteddb-match-timeline .player-match-players td:nth-child(5):before{color:#8c9aaa;content:"assist  "}
}
/* The match tabs, now up to three (Overview, Timeline, Room Matches), narrow their padding on a phone so the last one is not cut off. */
@media (max-width:575.98px){#uniteddb-match #player-profile-nav ul.xero-nav>li>a,#uniteddb-room #player-profile-nav ul.xero-nav>li>a{padding-left:14px;padding-right:14px}}

/* lane-badges: the identity badge (Staff, Verified) by a name. xero.gg's current rule for the icon badge: it grows with the text it sits beside instead of the fixed 17px / 15px of the older stylesheet. */
.uniteddb-web-badge--icon{font-size:max(14px,.85em)}
/* lane-badges, custom status: the glass pill under a player's name, xero.gg's own rules (player-view-BKFMlvBy.css) copied exactly. The profile stylesheet of this site is an older build: it has no glass colours, no title line and no container, and its pill rule is absolutely placed, so those come first and its leftovers are reset. */
.uniteddb-web-player-view__header{--uniteddb-player-view-glass:#22252a66;--uniteddb-player-view-glass-hover:#32363e8c;--uniteddb-player-view-glass-shadow:#00000080}
.uniteddb-web-player-view__title-block{container:uniteddb-player-view-title/inline-size}
@media (width<=767.98px){.uniteddb-web-player-view__title-block{align-self:stretch}}
.uniteddb-web-player-view__title-line{align-items:center;gap:16px;min-width:0;display:flex}
.uniteddb-web-player-view__title{filter:drop-shadow(0 0 1px #000c12);flex:none}
.uniteddb-web-player-view__custom-status{align-self:auto;bottom:auto;max-width:none}
.uniteddb-web-player-view__custom-status{color:#deebff;cursor:default;isolation:isolate;text-align:left;background:0 0;border:0;border-radius:4px;flex:0 auto;align-items:center;gap:7px;min-width:0;min-height:30px;padding:6px 12px;font-family:inherit;font-size:13px;line-height:18px;display:inline-flex;position:relative}
.uniteddb-web-player-view__custom-status:before{-webkit-backdrop-filter:var(--blur-30);backdrop-filter:var(--blur-30);clip-path:polygon(71px 68px,71.3px 66.47px,72.17px 65.17px,73.47px 64.3px,75px 64px,calc(100% - 68px) 64px,calc(100% - 66.47px) 64.3px,calc(100% - 65.17px) 65.17px,calc(100% - 64.3px) 66.47px,calc(100% - 64px) 68px,calc(100% - 64px) calc(100% - 68px),calc(100% - 64.3px) calc(100% - 66.47px),calc(100% - 65.17px) calc(100% - 65.17px),calc(100% - 66.47px) calc(100% - 64.3px),calc(100% - 68px) calc(100% - 64px),75px calc(100% - 64px),73.47px calc(100% - 64.3px),72.17px calc(100% - 65.17px),71.3px calc(100% - 66.47px),71px calc(100% - 68px),71px calc(50% + 7px),64px 50%,71px calc(50% - 7px));content:"";pointer-events:none;z-index:-1;position:absolute;inset:-64px -64px -64px -71px}
.uniteddb-web-player-view__custom-status:after{clip-path:polygon(evenodd,-32px -32px,calc(100% + 32px) -32px,calc(100% + 32px) calc(100% + 32px),-32px calc(100% + 32px),-32px -32px,7px 4px,7.3px 2.47px,8.17px 1.17px,9.47px .3px,11px 0,calc(100% - 4px) 0,calc(100% - 2.47px) .3px,calc(100% - 1.17px) 1.17px,calc(100% - .3px) 2.47px,100% 4px,100% calc(100% - 4px),calc(100% - .3px) calc(100% - 2.47px),calc(100% - 1.17px) calc(100% - 1.17px),calc(100% - 2.47px) calc(100% - .3px),calc(100% - 4px) 100%,11px 100%,9.47px calc(100% - .3px),8.17px calc(100% - 1.17px),7.3px calc(100% - 2.47px),7px calc(100% - 4px),7px calc(50% + 7px),0 50%,7px calc(50% - 7px),7px 4px,-32px -32px);content:"";filter:blur(2px);pointer-events:none;z-index:-1;background-image:conic-gradient(from 45deg at 0 50%, var(--uniteddb-player-view-glass-shadow) 90deg, transparent 0), linear-gradient(var(--uniteddb-player-view-glass-shadow), var(--uniteddb-player-view-glass-shadow));background-position:0 0,7px 0;background-repeat:no-repeat;background-size:7px 100%,calc(100% - 7px) 100%;border-radius:4px;position:absolute;inset:0 0 0 -7px}
.uniteddb-web-player-view__custom-status img{object-fit:contain;flex:none;width:18px;height:18px}
.uniteddb-web-player-view__custom-status .uniteddb-icon{color:#c1ccdd;filter:drop-shadow(0 1px 2px #0009);flex:none;margin-left:2px;font-size:12px}
.uniteddb-web-player-view__custom-status-glass{background-color:var(--uniteddb-player-view-glass);clip-path:polygon(7px 4px,7.3px 2.47px,8.17px 1.17px,9.47px .3px,11px 0,calc(100% - 4px) 0,calc(100% - 2.47px) .3px,calc(100% - 1.17px) 1.17px,calc(100% - .3px) 2.47px,100% 4px,100% calc(100% - 4px),calc(100% - .3px) calc(100% - 2.47px),calc(100% - 1.17px) calc(100% - 1.17px),calc(100% - 2.47px) calc(100% - .3px),calc(100% - 4px) 100%,11px 100%,9.47px calc(100% - .3px),8.17px calc(100% - 1.17px),7.3px calc(100% - 2.47px),7px calc(100% - 4px),7px calc(50% + 7px),0 50%,7px calc(50% - 7px));pointer-events:none;transition:background-color var(--transition-duration) linear;z-index:-1;position:absolute;inset:0 0 0 -7px}
.uniteddb-web-player-view__custom-status-text{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}
.uniteddb-web-player-view__custom-status--empty{color:#a0abba}
.uniteddb-web-player-view button.uniteddb-web-player-view__custom-status{cursor:pointer;transition:color var(--transition-duration) linear}
.uniteddb-web-player-view button.uniteddb-web-player-view__custom-status .uniteddb-icon{transition:color var(--transition-duration) linear}
.uniteddb-web-player-view button.uniteddb-web-player-view__custom-status:hover,.uniteddb-web-player-view button.uniteddb-web-player-view__custom-status:focus-visible{--uniteddb-player-view-glass:var(--uniteddb-player-view-glass-hover);color:#fff}
.uniteddb-web-player-view button.uniteddb-web-player-view__custom-status:hover .uniteddb-icon,.uniteddb-web-player-view button.uniteddb-web-player-view__custom-status:focus-visible .uniteddb-icon{color:#deebff}
.uniteddb-web-player-view button.uniteddb-web-player-view__custom-status:focus-visible{outline-offset:2px;outline:2px solid #00c2ffa6}
@container uniteddb-player-view-title (width<620px){.uniteddb-web-player-view__title-line{flex-direction:column;align-items:stretch;gap:9px}.uniteddb-web-player-view__custom-status{align-self:flex-start;max-width:100%;margin-bottom:4px}.uniteddb-web-player-view__custom-status:before{clip-path:polygon(64px 75px,64.3px 73.47px,65.17px 72.17px,66.47px 71.3px,68px 71px,76px 71px,83px 64px,90px 71px,calc(100% - 68px) 71px,calc(100% - 66.47px) 71.3px,calc(100% - 65.17px) 72.17px,calc(100% - 64.3px) 73.47px,calc(100% - 64px) 75px,calc(100% - 64px) calc(100% - 68px),calc(100% - 64.3px) calc(100% - 66.47px),calc(100% - 65.17px) calc(100% - 65.17px),calc(100% - 66.47px) calc(100% - 64.3px),calc(100% - 68px) calc(100% - 64px),68px calc(100% - 64px),66.47px calc(100% - 64.3px),65.17px calc(100% - 65.17px),64.3px calc(100% - 66.47px),64px calc(100% - 68px));top:-71px;left:-64px}.uniteddb-web-player-view__custom-status:after{background-image:conic-gradient(from 135deg at 19px 0, var(--uniteddb-player-view-glass-shadow) 90deg, transparent 0), linear-gradient(var(--uniteddb-player-view-glass-shadow), var(--uniteddb-player-view-glass-shadow));clip-path:polygon(evenodd,-32px -32px,calc(100% + 32px) -32px,calc(100% + 32px) calc(100% + 32px),-32px calc(100% + 32px),-32px -32px,0 11px,.3px 9.47px,1.17px 8.17px,2.47px 7.3px,4px 7px,12px 7px,19px 0,26px 7px,calc(100% - 4px) 7px,calc(100% - 2.47px) 7.3px,calc(100% - 1.17px) 8.17px,calc(100% - .3px) 9.47px,100% 11px,100% calc(100% - 4px),calc(100% - .3px) calc(100% - 2.47px),calc(100% - 1.17px) calc(100% - 1.17px),calc(100% - 2.47px) calc(100% - .3px),calc(100% - 4px) 100%,4px 100%,2.47px calc(100% - .3px),1.17px calc(100% - 1.17px),.3px calc(100% - 2.47px),0 calc(100% - 4px),0 11px,-32px -32px);background-position:0 0,0 7px;background-size:100% 7px,100% calc(100% - 7px);top:-7px;left:0}.uniteddb-web-player-view__custom-status-glass{clip-path:polygon(0 11px,.3px 9.47px,1.17px 8.17px,2.47px 7.3px,4px 7px,12px 7px,19px 0,26px 7px,calc(100% - 4px) 7px,calc(100% - 2.47px) 7.3px,calc(100% - 1.17px) 8.17px,calc(100% - .3px) 9.47px,100% 11px,100% calc(100% - 4px),calc(100% - .3px) calc(100% - 2.47px),calc(100% - 1.17px) calc(100% - 1.17px),calc(100% - 2.47px) calc(100% - .3px),calc(100% - 4px) 100%,4px 100%,2.47px calc(100% - .3px),1.17px calc(100% - 1.17px),.3px calc(100% - 2.47px),0 calc(100% - 4px));top:-7px;left:0}.uniteddb-web-player-view__custom-status-text{overflow-wrap:anywhere;white-space:normal}}
/* the older rule drew the pen faint; the current one does not */
.uniteddb-web-player-view__custom-status .uniteddb-icon{opacity:1}
/* lane-badges, custom status: the editor dialog, xero.gg's own rules copied exactly (its emote button comes from shared-GH7-V213.css). */
.uniteddb-emote-selector-button{cursor:pointer;flex-shrink:0;justify-content:center;align-items:center;display:flex}
.uniteddb-emote-selector-button:disabled{cursor:default}
.uniteddb-emote-selector-button__face{border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;display:flex}
.uniteddb-emote-selector-button__face>img{width:100%;height:100%;transition:all .2s cubic-bezier(.4,0,.2,1);display:block}
.uniteddb-emote-selector-button__face>img.is-decoration{filter:saturate(0)}
.uniteddb-emote-selector-button__face>svg{width:100%;height:100%;display:block}
.uniteddb-emote-selector-button:not(:disabled):hover .uniteddb-emote-selector-button__face>img{scale:1.2}
.uniteddb-emote-selector-button:not(:disabled):hover .uniteddb-emote-selector-button__face>img.is-decoration{filter:saturate()}
.uniteddb-emote-selector-button:not(:disabled):active .uniteddb-emote-selector-button__face>img{scale:1.1}
.uniteddb-web-player-view__custom-status-modal .modal-dialog{max-width:560px}
.uniteddb-web-player-view__custom-status-modal .modal-content{overflow:visible}
.uniteddb-web-player-view__custom-status-form{flex-direction:column;display:flex}
.uniteddb-web-player-view__custom-status-input{background-color:#5a5f6714;border:0;border-radius:4px;align-items:center;min-height:40px;display:flex}
.uniteddb-web-player-view__custom-status-input .form-control{box-shadow:none;color:#deebff;background:0 0;border:0;flex:auto;min-width:0;height:38px;padding:0 8px;font-size:13px}
.uniteddb-web-player-view__custom-status-input .form-control::placeholder{color:#deebff73}
.uniteddb-web-player-view__custom-status-emote-button,.uniteddb-web-player-view__custom-status-clear{color:#a0abba;background:0 0;border:0;flex:0 0 40px;justify-content:center;align-items:center;height:38px;padding:0;display:flex}
.uniteddb-web-player-view__custom-status-emote-button:hover,.uniteddb-web-player-view__custom-status-emote-button:focus-visible,.uniteddb-web-player-view__custom-status-clear:hover,.uniteddb-web-player-view__custom-status-clear:focus-visible{color:#fff}
.uniteddb-web-player-view__custom-status-emote-button:focus-visible,.uniteddb-web-player-view__custom-status-clear:focus-visible{outline-offset:-3px;outline:2px solid #00c2ffa6}
.uniteddb-web-player-view__custom-status-emote-button{border-radius:3px 0 0 3px}
.uniteddb-web-player-view__custom-status-emote-button img{object-fit:contain;width:22px;height:22px}
.uniteddb-web-player-view__custom-status-clear{border-radius:0 3px 3px 0;flex-basis:34px}
.uniteddb-web-player-view__custom-status-clear .uniteddb-icon{font-size:15px}
.uniteddb-web-player-view__custom-status-footer{justify-content:space-between;align-items:center;margin-top:20px;display:flex}
.uniteddb-web-player-view__custom-status-expiry{flex:none;width:260px;max-width:100%}
.uniteddb-web-player-view__custom-status-expiry .dropdown-menu{top:auto;bottom:calc(100% + 6px)}
.uniteddb-web-player-view__custom-status-actions{flex:none;align-items:center;gap:8px;display:flex}
.uniteddb-web-player-view__custom-status-actions .btn-link{white-space:nowrap}
.uniteddb-web-player-view__custom-status-modal .text-is-invalid{margin-top:12px}
@media (width<=767.98px){.uniteddb-web-player-view__custom-status-modal .modal-dialog{margin-left:12px;margin-right:12px}.uniteddb-web-player-view__custom-status-footer{flex-direction:column;align-items:stretch;gap:14px;margin-top:20px}.uniteddb-web-player-view__custom-status-expiry{align-self:flex-start}.uniteddb-web-player-view__custom-status-actions{justify-content:flex-end}}

/* The top bar's count badges (navbar-2026.css). xero.gg draws a badge only while there is a count;
   ours keeps the element and empties it, so an empty one is hidden and the icon keeps no cut-out. */
.xero-navbar__actions .uniteddb-navi-icons-notify:empty { display: none; }
.xero-navbar__actions .uniteddb-navi-icons-notify:empty + .navbar-nav-icon,
.xero-navbar__actions .uniteddb-navi-icons-notify:empty + .navbar-nav-icon svg { -webkit-mask-image: none; mask-image: none; }

/* The page background as one fixed layer. app.css paints the body gradient and #wrapper2's bg_top
   picture with background-attachment: fixed, and Chrome repaints a fixed background over the whole
   window on every scroll frame (about 60 % of the render work while scrolling the home page).
   xero.gg's 2026 app.css moved bg_top onto a position: fixed #wrapper2::before; this does the same
   and puts the gradient in that layer too (bg_top is half transparent), so nothing fixed is left
   to repaint. The body keeps its gradient, scrolled, for the rubber band past the page ends. */
body { background-attachment: scroll; }
#wrapper2 { background: none; }
#wrapper2::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: url(/assets/web/chunks/bg_top-CHFPojbq.png) top / cover no-repeat, linear-gradient(#02070c 0%, #040f19 50%, #071a27 100%);
}

/* Two-Factor Authentication: the sign-in step's heading and copy (views/auth/authenticate.ejs). */
.auth-title{text-align:center;color:#fff;font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:13px;padding:10px 0;margin-bottom:22px;background:var(--xr-panel-2);border:1px solid var(--xr-border);border-radius:8px}
.auth-copy{color:var(--xr-muted);font-size:14px;margin:0 0 4px;text-align:center}
.auth-links .auth-copy{font-size:13px;margin-bottom:8px}

/* lane-report: the Report dialog (public/assets/xero/js/report.js). The dialog is app.css's
   uniteddb-report-modal rules; two things differ. xero.gg ticks a part with its regular square /
   square-check icons, which the site does not ship, so the box is drawn here with the light tick the
   site has. And app.css cuts the reason list at 238px, which would hide the fifth of ours until scrolled. */
.uniteddb-report-modal__reasons { max-height: 330px; }
.uniteddb-report-modal__element-check .xdb-report-box { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; box-sizing: border-box; border: 2px solid rgba(222, 235, 255, .4); border-radius: 4px; transition: all var(--transition-duration) linear; }
.uniteddb-report-modal__element-check .xdb-report-box .uniteddb-icon { width: 12px; height: 12px; opacity: 0; }
.uniteddb-report-modal__element.active .xdb-report-box { border-color: #deebff; background: rgba(222, 235, 255, .16); }
.uniteddb-report-modal__element.active .xdb-report-box .uniteddb-icon { opacity: 1; }