/* Afterglow: the game's arcade-cabinet presentation over the shared Live Rim
   primitives (design-system/after-glow). Cards are ink bodies with a hairline
   edge; the selected card wears the violet-to-cyan tube; chips and the main
   actions are lit neon tubes with a white-hot core and a soft bloom. The
   doubled :root outranks the components' scoped styles. */
@font-face {
  font-family: "Beatori Arcade";
  src: url("../fonts/Poppins-ExtraBoldItalic.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

:root {
  --font-arcade: "Beatori Arcade", var(--font-display);
  --ag-ink: rgb(7 6 26 / .92);
  --ag-ink-selected: rgb(6 11 44 / .95);
  --ag-edge: #221E40;
  --ag-edge-hover: #463C7E;
  --ag-control-edge: #2A2C5C;
  --ag-control-hover: #5B4BA6;
  --ag-field-edge: #2E3168;
  --ag-magenta: #F052FF;
  --ag-halo: #C83CFF;
  --ag-selection: linear-gradient(90deg, #B44DFF 0%, #4C82FF 55%, #19D6FF 100%);
  --ag-selection-glow: 0 0 10px rgb(180 77 255 / .7), 0 0 26px rgb(76 130 255 / .45), 0 0 60px rgb(25 214 255 / .22);
  --ag-magenta-glow: inset 0 0 0 1px rgb(255 255 255 / .5), inset 0 0 14px rgb(240 82 255 / .4), 0 0 8px rgb(240 82 255 / .85), 0 0 24px rgb(200 60 255 / .55), 0 0 56px rgb(200 60 255 / .3);
}

/* The concert stage behind the catalog, community and inbox scenes. */
:root:root .site-body { --page-scene: url('/_content/Beatori.Server.UI/images/cohesion/afterglow-stage-left.webp'); }
:root:root :is(.scene-community, .scene-inbox) { --page-scene: url('/_content/Beatori.Server.UI/images/cohesion/afterglow-stage-right.webp'); }

/* Cards. */
:root:root .beatori-media-frame {
  position: relative;
  border: 1.5px solid var(--ag-edge);
  border-radius: 12px;
  background: var(--ag-ink);
  transition: border-color var(--theme-transition), box-shadow var(--theme-transition);
}
:root:root .beatori-media-frame.is-embedded { border: 0; background: transparent; }
:root:root .beatori-media-frame.has-action:not(.is-disabled):hover { border-color: var(--ag-edge-hover); background: var(--ag-ink); }
:root:root .beatori-media-frame.is-selected {
  border: 2.5px 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 chart's dominant style as glowing rails beside the card: set --rail. */
:root:root .beatori-media-frame.has-rails { width: calc(100% - 44px); margin-inline: 22px; }
:root:root .beatori-media-frame.has-rails::before,
:root:root .beatori-media-frame.has-rails::after {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rail) 80%, white), var(--rail));
  box-shadow: 0 0 8px var(--rail), 0 0 22px color-mix(in srgb, var(--rail) 60%, transparent);
  pointer-events: none;
}
:root:root .beatori-media-frame.has-rails::before { left: -18px; }
:root:root .beatori-media-frame.has-rails::after { right: -18px; }
:root:root .beatori-media-frame.is-row .media-title { font: 800 italic 26px/1.15 var(--font-arcade); letter-spacing: 0; }
:root:root .beatori-media-frame .media-map-level strong { font: 800 italic 44px/1 var(--font-arcade); text-shadow: 0 0 12px color-mix(in srgb, currentColor 70%, transparent), 0 0 28px color-mix(in srgb, currentColor 40%, transparent); }
:root:root :is(.beatori-card, .beatori-panel, .beatori-stat-card) { border-color: var(--ag-edge); background: var(--ag-ink); border-radius: 12px; }

/* Tables read as card rows. */
:root:root .beatori-table td { background: var(--ag-ink); border-color: var(--ag-edge); }
:root:root .beatori-table .is-selected td { background: var(--ag-ink-selected); border-color: #4C82FF; box-shadow: 0 0 14px rgb(76 130 255 / .35); }

/* Neon chips: a black capsule inside a lit tube of its color. */
:root:root .beatori-badge {
  border-width: 2px;
  background: #03051A;
  box-shadow: 0 0 6px color-mix(in srgb, var(--badge-tone) 70%, transparent), inset 0 0 5px color-mix(in srgb, var(--badge-tone) 45%, transparent);
}
:root:root .source-badge {
  border-width: 2px;
  background: #03051A;
  box-shadow: 0 0 6px color-mix(in srgb, currentColor 70%, transparent), inset 0 0 5px color-mix(in srgb, currentColor 45%, transparent);
}
:root:root .source-badge[data-source="Official"] { border-color: #FFCE38; color: #FFCE38; }
:root:root .source-badge[data-source="Permission"] { border-color: #B8FF3C; color: #B8FF3C; }
:root:root .source-badge[data-source="UserUploaded"] { border-color: #18D9FF; color: #18D9FF; }
:root:root .keymode-chip {
  border-width: 2px;
  background: #03051A;
  box-shadow: 0 0 6px color-mix(in srgb, var(--keymode, var(--theme-cyan)) 65%, transparent);
}

/* Controls: a hairline box that brightens on hover. */
:root:root :is(.beatori-button, .btn) { border-radius: 10px; }
:root:root :is(.beatori-button-outlined, .beatori-button-secondary, .btn-secondary):not(.beatori-button-primary) { --button-rim: var(--ag-control-edge); }
:root:root :is(.beatori-button-outlined, .beatori-button-secondary, .btn-secondary):not(.beatori-button-primary):hover { --button-rim: var(--ag-control-hover); }
:root:root .beatori-input { --field-outline: var(--ag-field-edge); --field-fill: #07081C; border-radius: 10px; }
:root:root .beatori-input:focus-visible { border-color: #8E6BFF; box-shadow: 0 0 10px rgb(142 107 255 / .45); }

/* Primary: a magenta tube on a dark body. */
:root:root :is(.beatori-button-primary.beatori-button-filled, .btn-primary, .neon-button) {
  border: 2px solid var(--ag-magenta);
  background: #0B0420;
  box-shadow: inset 0 0 8px rgb(240 82 255 / .35), 0 0 8px rgb(240 82 255 / .75), 0 0 22px rgb(200 60 255 / .45);
}
:root:root :is(.beatori-button-primary.beatori-button-filled, .btn-primary, .neon-button):hover {
  box-shadow: inset 0 0 10px rgb(240 82 255 / .45), 0 0 10px rgb(240 82 255 / .9), 0 0 30px rgb(200 60 255 / .6);
}

/* Arcade: the cabinet's start key. A violet capsule in a white-hot magenta
   tube with bloom, the label in the arcade italic. */
:root:root .beatori-button-hero {
  min-height: 72px;
  padding: 8px 34px;
  gap: 16px;
  border: 3px solid var(--ag-magenta);
  border-radius: 22px;
  background: linear-gradient(180deg, #1D0638, #0C0320);
  box-shadow: var(--ag-magenta-glow);
  font: 800 italic 28px/1 var(--font-arcade);
  letter-spacing: .01em;
}
:root:root .beatori-button-hero::before { display: none; }
:root:root .beatori-button-hero .beatori-button-label { transform: none; }
:root:root .beatori-button-hero .beatori-button-icon { display: inline-flex; color: #D45CFF; font-size: 1.15em; }
:root:root .beatori-button-hero:hover { box-shadow: var(--ag-magenta-glow), 0 0 80px rgb(200 60 255 / .35); }

/* Titles and figures. */
:root:root :is(.song-hero-title, .score-hero-title, .catalog-song-title) { font-family: var(--font-arcade); font-style: italic; font-weight: 800; }
:root:root :is(.stat-value, .beatori-stat-card strong) { text-shadow: 0 0 14px color-mix(in srgb, currentColor 45%, transparent); }

@media (max-width: 639px) {
  :root:root .beatori-media-frame.has-rails { width: calc(100% - 20px); margin-inline: 10px; }
  :root:root .beatori-media-frame.has-rails::before { left: -9px; width: 4px; }
  :root:root .beatori-media-frame.has-rails::after { right: -9px; width: 4px; }
  :root:root .beatori-media-frame.is-row .media-title { font-size: 20px; }
  :root:root .beatori-button-hero { min-height: 60px; font-size: 22px; padding-inline: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  :root:root .beatori-media-frame { transition: none; }
}

/* People without art (players, artists): a stage-ink tile with the initials
   lit in the theme's neon, never a random hue. */
:root:root .beatori-media-artwork-initials,
:root:root .player-avatar-fallback {
  background: radial-gradient(circle at 50% 38%, rgb(162 59 255 / .34), transparent 62%), var(--ag-ink);
  box-shadow: inset 0 0 0 1px var(--ag-edge);
  color: var(--theme-text);
}
:root:root .beatori-media-artwork-initials strong,
:root:root .player-avatar-fallback {
  text-shadow: 0 0 8px rgb(200 60 255 / .75), 0 0 20px rgb(162 59 255 / .45);
}
:root:root .beatori-media-artwork-initials strong {
  font-family: var(--font-arcade);
  letter-spacing: .02em;
  text-shadow: 0 0 8px rgb(200 60 255 / .75), 0 0 20px rgb(162 59 255 / .45);
}