/*
 * Site breadcrumb: the Replay Viewer design, shared by every page that shows where it sits in the site.
 *
 *   <nav class="rmr-bc" aria-label="Breadcrumb">
 *     <a href="/"><svg>home</svg>Home</a><span class="sep"><svg>chevron</svg></span>
 *     <a href="/database/">Database</a><span class="sep"><svg>chevron</svg></span>
 *     <span class="cur" aria-current="page"><i></i><span>Current page</span></span>
 *   </nav>
 *
 * Pages whose content sits in a centred panel wrap it in <div class="rmr-bc-row"> (width set with --rmr-bc-w to match
 * the panel) and, when that parent is a flex row, add rmr-bc-page to the parent so the row stacks above the panel.
 */
nav.rmr-bc{position:relative;display:inline-flex;align-items:center;flex-wrap:wrap;gap:2px;max-width:100%;margin:0;padding:8px 14px;font-size:12.5px;line-height:1.4;color:rgba(226,232,240,.6);border:1px solid rgba(255,255,255,.1);background:linear-gradient(135deg,rgba(15,23,42,.78),rgba(8,12,22,.72));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 12px 26px rgba(0,0,0,.4);animation:rmr-bc-in .6s cubic-bezier(.2,.7,.2,1) both}
nav.rmr-bc::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,rgba(56,189,248,.6),rgba(239,68,68,.5),transparent);pointer-events:none}
nav.rmr-bc a{display:inline-flex;align-items:center;gap:6px;color:rgba(226,232,240,.8);text-decoration:none;transition:color .2s}
nav.rmr-bc a:hover{color:#7dd3fc}
nav.rmr-bc svg{width:13px;height:13px;flex-shrink:0}
nav.rmr-bc a svg{color:#7dd3fc}
nav.rmr-bc .sep{display:inline-flex;margin:0 5px;color:rgba(125,211,252,.4)}
nav.rmr-bc .sep svg{width:11px;height:11px}
nav.rmr-bc .cur{display:inline-flex;align-items:center;gap:6px;min-width:0;font-weight:700;color:#fff}
nav.rmr-bc .cur i{flex-shrink:0;width:6px;height:6px;background:#ef4444;box-shadow:0 0 8px #ef4444}
nav.rmr-bc .cur>span{min-width:0;max-width:52ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rmr-bc-row{width:100%;max-width:var(--rmr-bc-w,1100px);margin:0 auto 16px}
.rmr-bc-page{flex-direction:column;align-items:center}
/* Hero wrappers that used to style the old breadcrumb themselves (server list, reviews, streamers) keep only their layout. */
.sv-hero-bc:has(>nav.rmr-bc),.st-hero-bc:has(>nav.rmr-bc),.rv-hero-bc:has(>nav.rmr-bc){padding:0;border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
@keyframes rmr-bc-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){nav.rmr-bc{animation:none}}
@media(max-width:640px){nav.rmr-bc{padding:7px 11px;font-size:12px}nav.rmr-bc .cur>span{max-width:24ch}.rmr-bc-row{margin-bottom:12px}}