/* The website laid out as the game lays out a screen: the title and its
   controls sit on the stage, sections are a heading over a hairline, tabs are
   underlined words and a choice is a compact selector. Only list rows and
   media are boxed. The doubled :root outranks the components' scoped styles. */
:root {
  /* A reading width; the stage art fills the rest of a wide window. */
  --theme-content-max: 1320px;
  --stage-rule: color-mix(in srgb, var(--theme-primary-bright) 26%, transparent);
  --stage-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23F6E9FF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* The header holds to the reading width: the mark and name, the pages, then
   Play and the account. The animated bars beside the name give way to them. */
:root:root .beatori-public-header .beatori-brand-equalizer { display: none; }
:root:root .beatori-public-links { justify-content: flex-start; gap: clamp(12px, 1.5vw, 24px); }
@media (max-width: 1360px) { :root:root .beatori-public-header .beatori-language-summary > span:last-child { display: none; } }

/* Players are round, as in the game. */
:root:root .player-avatar-frame,
:root:root .player-avatar-frame.has-avatar-border::before { border-radius: 50%; }

/* Page head: the title, then what the page is filtered by. */
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; min-width: 0; }
.page-head > h1,
.page-title { margin: 0; color: var(--theme-text); font: 800 italic clamp(34px, 3.6vw, 52px)/1.05 var(--font-arcade); letter-spacing: .01em; text-transform: uppercase; overflow-wrap: anywhere; }
/* A full line of its own, the text held to a reading measure. */
.page-head-lead { flex: 0 0 100%; margin: -4px 0 0; padding-inline-end: max(0px, calc(100% - 70ch)); color: var(--theme-text-muted); font: 400 16px/1.5 var(--font-body); }
.page-head-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-inline-start: auto; min-width: 0; }
.page-head-controls form { display: contents; }
.page-head-note { color: var(--theme-text-muted); font: 500 14px/1.4 var(--font-body); }

/* The shared hero, flattened to a page head for every page that still uses it. */
:root:root .beatori-hero { min-height: 0; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
:root:root .beatori-hero::before,
:root:root .beatori-hero-image { display: none; }
:root:root .beatori-hero h1 { font: 800 italic clamp(34px, 3.6vw, 52px)/1.05 var(--font-arcade); letter-spacing: .01em; text-transform: uppercase; }
:root:root .beatori-hero h1 span { display: inline; margin-inline-start: .28em; }
:root:root .beatori-hero-copy { gap: 8px; }
:root:root .beatori-hero-kicker { color: var(--theme-text-muted); font: 600 13px/1.3 var(--font-body); letter-spacing: .06em; }
:root:root .beatori-hero-kicker i { display: none; }
:root:root .beatori-hero-summary { padding: 0 0 0 24px; border: 0; border-inline-start: 1px solid var(--stage-rule); border-radius: 0; background: transparent; }
:root:root .beatori-hero-prominent { min-height: 0; padding: 0; }

/* Section: a heading over a hairline, its link at the end of the line. */
.section-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 20px; min-width: 0; padding-bottom: 10px; border-bottom: 1px solid var(--stage-rule); }
.section-head > :is(h2, h3) { margin: 0; color: var(--theme-text); font: 800 clamp(20px, 2vw, 26px)/1.2 var(--font-display); }
.section-head > :is(h2, h3) > i { margin-inline-end: 12px; color: var(--theme-primary-bright); font-size: 1.05em; vertical-align: -3px; }
.section-head > :is(a, .section-note) { margin-inline-start: auto; }
.section-note { color: var(--theme-text-muted); font: 500 14px/1.4 var(--font-body); }
.text-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--theme-cyan); font: 600 15px/1.3 var(--font-body); text-decoration: none; cursor: var(--beatori-cursor-pointer, pointer); }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; text-shadow: var(--theme-glow-cyan); }
.site-shell :is(.home-section-heading, .global-search-group > header, .catalog-results-heading, .artist-directory-results > header, .skin-catalog-results > header, .stats-collection > .stats-section-heading, .artist-discography-heading) {
  padding: 0 0 10px; border: 0; border-bottom: 1px solid var(--stage-rule); border-radius: 0; background: transparent;
}

/* Tabs: words on the stage, the current one underlined by the selection tube. */
:root:root .beatori-tabs { display: flex; gap: 0; padding: 0; overflow: visible; border: 0; border-bottom: 1px solid var(--stage-rule); border-radius: 0; background: transparent; box-shadow: none; }
:root:root .beatori-tab { flex: 0 0 auto; min-height: 48px; padding: 8px 22px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--theme-text-muted); font: 500 18px/1.2 var(--font-body); white-space: nowrap; }
:root:root .beatori-tab:first-child { padding-inline-start: 4px; }
:root:root .beatori-tab + .beatori-tab::before { content: ""; position: absolute; inset: 30% auto 30% 0; width: 1px; background: color-mix(in srgb, var(--theme-text) 14%, transparent); }
:root:root .beatori-tab::after { content: ""; position: absolute; inset: auto 12px -2px 12px; height: 3px; border-radius: 3px; background: var(--ag-selection); box-shadow: 0 0 10px rgb(76 130 255 / .6); opacity: 0; transform: scaleX(.4); transition: opacity var(--theme-transition), transform var(--theme-transition); }
:root:root .beatori-tab:first-child::after { inset-inline-start: 0; }
:root:root .beatori-tab:hover { color: var(--theme-text); box-shadow: none; }
:root:root .beatori-tab.active { color: var(--theme-text); font-weight: 700; background: transparent; box-shadow: none; }
:root:root .beatori-tab.active::after { opacity: 1; transform: none; }
:root:root .beatori-tab-stack { flex-direction: row-reverse; gap: 8px; }
:root:root .beatori-tab small { color: var(--theme-text-dim); font: 600 13px/1 var(--font-body); }
:root:root .beatori-tab i { font-size: 18px; color: var(--theme-text-dim); }
:root:root .beatori-tab.active i { color: var(--theme-primary-bright); }

/* A two- or three-way choice inside a section: the game's lit pill. */
.pill-toggle { display: inline-flex; padding: 3px; border: 1.5px solid var(--ag-control-edge); border-radius: 999px; background: #07081C; }
.pill-toggle > :is(a, button) { display: inline-flex; align-items: center; justify-content: center; min-width: 84px; min-height: 36px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--theme-text-muted); font: 600 15px/1 var(--font-body); text-decoration: none; cursor: var(--beatori-cursor-pointer, pointer); }
.pill-toggle > :is(a, button):hover { color: var(--theme-text); }
.pill-toggle > :is(.active, [aria-pressed="true"], [aria-current="true"]) { color: var(--theme-text); background: linear-gradient(90deg, #5B2BD9, #3A52E0); box-shadow: 0 0 0 1.5px #8E6BFF, 0 0 12px rgb(142 107 255 / .5); }

/* A choice from a list: the game's selector, a hairline box with a chevron. */
:root:root .site-shell select,
:root:root .beta-access-body select {
  appearance: none;
  width: auto;
  min-width: 96px;
  max-width: 100%;
  height: 44px;
  min-height: 44px;
  padding: 0 42px 0 16px;
  border: 1.5px solid var(--ag-control-edge);
  border-radius: 10px;
  background: #07081C var(--stage-chevron) no-repeat right 14px center / 16px;
  color: var(--theme-text);
  font: 600 16px/1.2 var(--font-body);
  letter-spacing: 0;
  box-shadow: none;
  cursor: var(--beatori-cursor-pointer, pointer);
}
:root:root .site-shell select:hover { border-color: var(--ag-control-hover); }
:root:root .site-shell select:focus-visible { border-color: #8E6BFF; box-shadow: 0 0 10px rgb(142 107 255 / .45); outline: 0; }
:root:root .site-shell .beatori-form-field select { width: 100%; }
@supports (appearance: base-select) {
  :root:root .site-shell select:not([multiple]):not([size]),
  :root:root .site-shell select:not([multiple]):not([size])::picker(select) { appearance: base-select; }
  :root:root .site-shell select:not([multiple]):not([size]) { display: inline-flex; align-items: center; }
  :root:root .site-shell select::picker-icon { display: none; }
  :root:root .site-shell select::picker(select) { margin-top: 6px; padding: 6px; max-height: min(360px, calc(100dvh - 16px)); overflow: auto; border: 1.5px solid var(--ag-control-hover); border-radius: 12px; background: #07081C; color: var(--theme-text); box-shadow: 0 12px 40px rgb(0 0 0 / .55); }
  :root:root .site-shell select option { min-height: 40px; padding: 8px 12px; border-radius: 8px; font: 500 16px/1.2 var(--font-body); background: transparent; }
  :root:root .site-shell select option::checkmark { display: none; }
  :root:root .site-shell select option:checked { background: color-mix(in srgb, var(--theme-primary) 22%, transparent); color: var(--theme-text); font-weight: 700; }
  :root:root .site-shell select option:is(:hover, :focus) { background: color-mix(in srgb, var(--theme-primary) 14%, transparent); outline: 0; }
}

/* A search field beside the selectors. */
.stage-search { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.stage-search > i { position: absolute; inset-inline-start: 14px; color: var(--theme-text-muted); font-size: 18px; pointer-events: none; }
:root:root .site-shell .stage-search > input { width: min(280px, 100%); height: 44px; min-height: 44px; padding: 0 14px 0 42px; border: 1.5px solid var(--ag-control-edge); border-radius: 10px; background: #07081C; color: var(--theme-text); font: 500 16px/1.2 var(--font-body); }
:root:root .site-shell .stage-search > input:focus-visible { border-color: #8E6BFF; box-shadow: 0 0 10px rgb(142 107 255 / .45); outline: 0; }

/* A titled section (beatori-section): always on the page, never a drawer. */
.stage-section { display: grid; align-content: start; gap: 16px; min-width: 0; }

/* A surface that only groups other things is not drawn: its content sits on
   the stage. Rows, items and cards keep their box. */
:root:root .site-shell .beatori-surface:not([class*="-row"]):not([class*="-item"]):not([class*="-card"]):not([class*="-session"]):not(.stage-row):not([data-frame="lit"]):not([data-frame="brackets-lit"]) {
  padding-inline: 0; border-color: transparent; background: transparent; box-shadow: none;
}

/* Further filters of a catalog: one link that opens them in place. */
.filter-more { min-width: 0; }
.filter-more > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: var(--theme-cyan); font: 600 15px/1.3 var(--font-body); list-style: none; cursor: var(--beatori-cursor-pointer, pointer); }
.filter-more > summary::-webkit-details-marker { display: none; }
.filter-more > summary:hover { text-shadow: var(--theme-glow-cyan); }
.filter-more > summary > small { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--theme-cyan); color: var(--theme-page-bg); font: 700 12px/1 var(--font-body); }
.filter-more > summary > .li-chevron-down { font-size: 16px; transition: transform var(--theme-transition); }
.filter-more[open] > summary > .li-chevron-down { transform: rotate(180deg); }
.filter-more > :not(summary) { margin-top: 16px; }

/* Rows: the only boxes on a list page. */
.stage-rows { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.stage-row { position: relative; display: grid; align-items: center; gap: 12px; min-width: 0; min-height: 60px; padding: 8px 16px; border: 1.5px solid var(--ag-edge); border-radius: 12px; background: var(--ag-ink); color: var(--theme-text); text-decoration: none; transition: border-color var(--theme-transition), box-shadow var(--theme-transition); }
a.stage-row:hover, .stage-row:has(a:hover) { border-color: var(--ag-edge-hover); }
.stage-row.is-selected { border: 2px solid transparent; background: linear-gradient(var(--ag-ink-selected), var(--ag-ink-selected)) padding-box, var(--ag-selection) border-box; box-shadow: var(--ag-selection-glow); }

/* A sortable column heading and the arrow at the end of a row are plain marks. */
:root:root .site-shell :is(.sortable-heading, .row-arrow) { border: 0; background: transparent; box-shadow: none; --button-rim: transparent; }
:root:root .site-shell :is(.sortable-heading, .row-arrow):hover { color: var(--theme-primary-bright); }

/* Presence is always the live green; the closed beta is the gold of a ticket. */
.live-dot { display: inline-block; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--theme-lime); box-shadow: var(--theme-glow-lime); }
.beta-badge { display: inline-flex; align-items: center; width: max-content; padding: 5px 14px; border: 1.5px solid var(--theme-gold); border-radius: 999px; background: color-mix(in srgb, var(--theme-gold) 10%, transparent); color: var(--theme-gold); box-shadow: var(--theme-glow-gold); font: 700 13px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }

/* A filter or tab change reloads only its results: they give way to a
   loader and the new rows rise in. Nothing else on the page dims. */
:root:root [data-async-page],
:root:root [data-async-page].is-loading { opacity: 1; filter: none; pointer-events: auto; transition: none; }
[data-async-results] { position: relative; min-height: 120px; }
[data-async-results].is-loading > * { visibility: hidden; }
[data-async-results].is-loading::before { content: ""; position: absolute; inset: 0; border-radius: 12px; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--ag-edge) 55%, transparent) 0 58px, transparent 58px 66px); -webkit-mask-image: linear-gradient(100deg, #000 30%, rgb(0 0 0 / .35) 50%, #000 70%); mask-image: linear-gradient(100deg, #000 30%, rgb(0 0 0 / .35) 50%, #000 70%); -webkit-mask-size: 220% 100%; mask-size: 220% 100%; animation: stage-loading-sweep 1.1s linear infinite; }
[data-async-results].is-loading::after { content: ""; position: absolute; top: min(160px, 40%); left: 50%; width: 44px; height: 44px; margin: -22px; border: 3px solid color-mix(in srgb, var(--theme-primary-bright) 25%, transparent); border-top-color: var(--theme-cyan); border-radius: 50%; box-shadow: 0 0 18px rgb(76 130 255 / .35); animation: stage-loading-spin .8s linear infinite; }
[data-async-results].is-entering > * { animation: stage-results-in 220ms var(--theme-ease) both; }
@keyframes stage-loading-sweep { from { -webkit-mask-position: 120% 0; mask-position: 120% 0; } to { -webkit-mask-position: -100% 0; mask-position: -100% 0; } }
@keyframes stage-loading-spin { to { transform: rotate(360deg); } }
@keyframes stage-results-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 767px) {
  .page-head-controls { margin-inline-start: 0; width: 100%; }
  :root:root .beatori-tabs { overflow-x: auto; scrollbar-width: none; }
  :root:root .beatori-tab { padding-inline: 14px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-async-results].is-loading::before,
  [data-async-results].is-loading::after,
  [data-async-results].is-entering > * { animation: none; }
}

/* Public pages share the operations dashboard's quiet stage background. */
:root:root .site-body { background: var(--theme-page-bg); }
:root:root .site-body::before,
:root:root .site-body::after { content: none; background: none; }