/* Sternenstaub · zusätzliche Oberflächen am Kontoeinstieg, nach den Bestandsstilen laden. */
body[data-rs-material="sternenstaub"] {
  --nacht: #101525;
  --schiefer: #253047;
  --stahl: #596782;
  --licht: #adbce4;
  --flieder: #c4a5ea;
  --primaer-hell: #72529b;
  --primaer-dunkel: #46385f;
  --schrift: #f2f1fa;
  --leise: #c7cddd;
  --signal: #a4dbc8;
  --staubfoto: url('/assets/retrospace/scene/web/rs-fernebene-1440-v001.webp');
  --materiezeichen: url('/assets/retrospace/entry/rs-resource-darkmatter-v001.svg');
  --kante: color-mix(in srgb, var(--stahl) 75%, var(--nacht));
  --kante-innen: color-mix(in srgb, var(--licht) 19%, transparent);
  --panelfarbe: linear-gradient(155deg, var(--schiefer), var(--nacht) 78%);
  --innenfarbe: linear-gradient(165deg, color-mix(in srgb, var(--schiefer) 70%, var(--nacht)), var(--nacht) 84%);
  --tiefe: inset 0 1px var(--kante-innen), inset 0 -1px #070c1855, 0 8px 23px #02050d46;
}
html[data-skin="dark"] body[data-rs-material] {
  --nacht: #09171e; --schiefer: #19313c; --stahl: #456879; --licht: #a5d8de;
  --flieder: #95d7d8; --primaer-hell: #326271; --primaer-dunkel: #214454;
  --schrift: #ecf5f5; --leise: #c3d4d8;
}
html[data-skin="classic"] body[data-rs-material] {
  --nacht: #192941; --schiefer: #384e6c; --stahl: #6681a2; --licht: #c2d9f5;
  --flieder: #bad9ff; --primaer-hell: #466793; --primaer-dunkel: #314b6d;
  --schrift: #f0f5fd; --leise: #d2dfef;
}

/* Eine stoffliche Oberfläche für die großen Bereiche. Das Bild berührt nur die Flanken. */
html body[data-start-entry][data-rs-material] :is(.lobby-panel, .public-voting, .community-disclosure) {
  position: relative;
  isolation: isolate;
  background: var(--panelfarbe);
  border-color: var(--kante);
  box-shadow: var(--tiefe);
  color: var(--schrift);
}
html body[data-start-entry][data-rs-material] :is(.lobby-panel, .public-voting)::before,
body[data-rs-material] .community-disclosure > summary::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  inset: 0;
  background: var(--staubfoto) left var(--staub-hoehe, 46%) / max(730px, 185%) auto no-repeat;
  mask-image: linear-gradient(90deg, #000 1%, #000d 18%, transparent 61%);
  transform: scaleX(-1);
  opacity: var(--staub-staerke, .39);
}
html body[data-start-entry][data-rs-material] :is(.lobby-panel, .public-voting)::after,
body[data-rs-material] .community-disclosure > summary::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 0 8% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--licht) 43%, var(--flieder) 57%, transparent);
  opacity: .47;
}

/* Start: die gewählte Marke bleibt in ihrem eigenen Feld, der Formulargrund wird ruhiger. */
html body[data-start-entry][data-rs-material]:not(.entry-lobby) .b3-card {
  background: linear-gradient(105deg, var(--stahl), var(--licht) 48%, var(--stahl));
}
html body[data-start-entry][data-rs-material]:not(.entry-lobby) .b3-card > .rs-surface {
  background: radial-gradient(ellipse at 100% 0, #393447 0, transparent 49%),
              linear-gradient(150deg, var(--schiefer), var(--nacht) 74%);
}
body[data-rs-material].entry-login-wide .entry-content {
  position: relative;
  isolation: isolate;
}
body[data-rs-material].entry-login-wide .entry-content::before {
  content: "";
  position: absolute;
  inset: -16px -16px -12px;
  z-index: -1;
  pointer-events: none;
  background: var(--staubfoto) left 36% / 185% auto no-repeat;
  mask-image: linear-gradient(135deg, transparent 47%, #000a 89%, transparent);
  opacity: .17;
}
html body[data-start-entry][data-rs-material] .start-beta-announcement {
  color: var(--leise);
  font-variant-numeric: tabular-nums;
  position: relative;
  text-wrap: balance;
  background: linear-gradient(90deg, var(--nacht), color-mix(in srgb, var(--schiefer) 82%, #594563) 50%, var(--nacht));
  border-color: var(--kante);
  box-shadow: var(--tiefe);
}
body[data-rs-material] .start-beta-announcement::before,
body[data-rs-material] .start-beta-announcement::after {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 24%; bottom: 24%; width: 2px;
  background: var(--flieder);
  opacity: .73;
}
body[data-rs-material] .start-beta-announcement::before {inset-inline-start: 0}
body[data-rs-material] .start-beta-announcement::after {inset-inline-end: 0}
body[data-rs-material] .start-beta-announcement strong {color: #ead9ff}
html body[data-start-entry][data-rs-material] .language-option {
  background: var(--innenfarbe);
  border-color: var(--kante);
  box-shadow: inset 0 1px var(--kante-innen);
}
html body[data-start-entry][data-rs-material] .language-option[aria-current="true"] {
  background: linear-gradient(160deg, #514267, #25283d 85%);
  border-color: var(--flieder);
  box-shadow: inset 0 -2px var(--flieder), inset 0 1px #e5d0ff42;
}
html body[data-start-entry][data-rs-material] .language-scope {
  background: linear-gradient(90deg, transparent, #11182be8 23% 77%, transparent);
  color: var(--leise);
}
html:root body[data-start-entry][data-rs-material] :is(.entry-field input:not([type="checkbox"]), .entry-field select, .lobby-referral-link input) {
  background: linear-gradient(180deg, var(--nacht), color-mix(in srgb, var(--nacht) 69%, var(--schiefer)));
  color: var(--schrift);
  border: 1px solid var(--stahl);
  box-shadow: inset 0 2px 5px #03061370, 0 1px #99abd017;
  caret-color: var(--flieder);
}
body[data-rs-material] select option {background-color: var(--nacht); color: var(--schrift)}
html:root body[data-start-entry][data-rs-material] input[aria-invalid="true"] {
  border-color: var(--rs-error);
  box-shadow: inset 3px 0 var(--rs-error);
}
html:root body[data-start-entry][data-rs-material] .rs-button {
  color: var(--schrift);
  border-color: color-mix(in srgb, var(--flieder) 80%, var(--stahl));
  background: linear-gradient(180deg, #ffffff15, transparent 52%),
              linear-gradient(90deg, var(--primaer-dunkel), var(--primaer-hell) 50%, var(--primaer-dunkel));
  box-shadow: inset 0 1px #f0dcff3d, inset 0 -1px #110f244a, 0 2px 8px #05081355;
}
html:root body[data-start-entry][data-rs-material] .rs-button.secondary,
html:root body[data-start-entry][data-rs-material] .public-vote-button {
  background: linear-gradient(180deg, color-mix(in srgb, var(--schiefer) 92%, var(--licht)), color-mix(in srgb, var(--nacht) 80%, var(--schiefer)));
  color: var(--schrift);
  border-color: var(--stahl);
  box-shadow: inset 0 1px var(--kante-innen);
}
html:root body[data-start-entry][data-rs-material] .rs-button:disabled {
  color: var(--leise);
  border-color: var(--kante);
  background: var(--nacht);
  box-shadow: none;
  cursor: not-allowed;
}
html:root body[data-start-entry][data-rs-material] .entry-footer a.public-vote-button {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1px;
  text-align: center;
  overflow-wrap: normal;
}
body[data-rs-material] .public-vote-button bdi {white-space: nowrap; font-weight: 600}
body[data-rs-material] .public-vote-verb {font-size: 11px; font-weight: 400; color: var(--leise)}
html body[data-start-entry][data-rs-material] .public-voting {
  --staub-staerke: .54;
  --staub-hoehe: 58%;
  text-shadow: none;
}
body[data-rs-material] .entry-toplist-link img {outline: 1px solid var(--stahl); outline-offset: -1px}
body[data-rs-material] .entry-toplist-link span {color: var(--leise)}

/* Lobby. Die Weltkarte erhält die stärkste Textur, die Leseflächen bleiben dicht. */
html body[data-start-entry][data-rs-material].entry-lobby .lobby-wallet {--staub-hoehe: 22%}
html body[data-start-entry][data-rs-material].entry-lobby .lobby-balance {
  color: var(--flieder);
  font-variant-numeric: tabular-nums;
  font-weight: 550;
  letter-spacing: -.02em;
}
body[data-rs-material] .lobby-wallet .lobby-balance::after {
  content: "";
  display: inline-block;
  width: 49px; height: 26px;
  vertical-align: -.04em;
  margin-inline-start: 10px;
  background: var(--materiezeichen) center / contain no-repeat;
}
html body[data-start-entry][data-rs-material].entry-lobby .lobby-world {
  --staub-hoehe: 61%;
  --staub-staerke: .66;
}
body[data-rs-material] .lobby-world-portrait {box-shadow: 0 0 0 1px var(--kante-innen), 0 3px 8px #02050e77}
html body[data-start-entry][data-rs-material].entry-lobby .lobby-status.is-available {
  color: var(--signal); background: #173632; border-color: #578678;
}
html body[data-start-entry][data-rs-material].entry-lobby .lobby-hint {color: var(--leise)}
body[data-rs-material] .entry-brand h1 {text-shadow: 0 2px 12px #02051182}

/* Beide nativen Ausklapper, Kopf und Innenfläche. */
html body[data-start-entry][data-rs-material].entry-lobby .community-disclosure {background: var(--nacht)}
html body[data-start-entry][data-rs-material].entry-lobby .community-disclosure > summary {
  position: relative;
  isolation: isolate;
  color: var(--schrift);
  background: var(--panelfarbe);
  --staub-staerke: .42;
}
body[data-rs-material] [data-lobby-disclosure="referral"] {--staub-hoehe: 72%}
html body[data-start-entry][data-rs-material].entry-lobby .community-disclosure[open] {
  border-color: color-mix(in srgb, var(--flieder) 63%, var(--stahl));
}
html body[data-start-entry][data-rs-material].entry-lobby .community-disclosure[open] > summary {
  background: linear-gradient(105deg, color-mix(in srgb,var(--primaer-dunkel) 65%,var(--schiefer)), var(--nacht) 72%);
  border-block-end-color: var(--stahl);
}
body[data-rs-material] .disclosure-number {
  color: var(--flieder);
  font-weight: 650;
  font-family: ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
html body[data-start-entry][data-rs-material].entry-lobby .disclosure-toggle {
  position: relative;
  transform: none;
  font-size: 0;
  background: var(--innenfarbe);
  border-color: var(--stahl);
}
body[data-rs-material] .disclosure-toggle::before,
body[data-rs-material] .disclosure-toggle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 10px; height: 2px; transform: translate(-50%,-50%); background: var(--licht);
}
body[data-rs-material] .disclosure-toggle::after {transform: translate(-50%,-50%) rotate(90deg)}
body[data-rs-material] details[open] > summary .disclosure-toggle::after {display:none}
body[data-rs-material] .community-disclosure-content {
  background: radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--schiefer) 80%, transparent), transparent 62%), var(--nacht);
}
html body[data-start-entry][data-rs-material].entry-lobby .vote-provider {
  position: relative;
  isolation: isolate;
  background: var(--innenfarbe);
  border-color: var(--kante);
  box-shadow: inset 0 1px var(--kante-innen);
  color: var(--schrift);
}
body[data-rs-material] .vote-provider::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  inset: 0 0 auto auto;
  width: 71%;
  height: 84px;
  background: var(--staubfoto) left 36% / 690px auto no-repeat;
  mask-image: radial-gradient(ellipse at 0 0, #000, transparent 74%);
  transform: scaleX(-1);
  opacity: .30;
}
body[data-rs-material] .vote-provider-info h3 {color: var(--schrift); font-weight: 650}
body[data-rs-material] .vote-provider-info > p:first-of-type {
  align-self: start;
  color: var(--leise); font-size: .83rem; font-weight: 600;
}
body[data-rs-material] .vote-provider[data-vote-state="active"] .vote-provider-info > p:first-of-type {
  color: var(--signal);
  background: #142e2c;
  border: 1px solid #40685f;
  padding: 1px 7px;
}
body[data-rs-material] .vote-provider[data-vote-state="active"] .vote-provider-info > p:first-of-type::before {
  content: ""; display: inline-block; width: 5px; height: 5px; margin-inline-end: 6px;
  vertical-align: .12em; border-radius: 50%; background: var(--signal);
}
body[data-rs-material] .vote-provider-info time,
body[data-rs-material] .vote-provider-info bdi,
body[data-rs-material] .lobby-referral-grid dd {font-variant-numeric: tabular-nums}
body[data-rs-material] .vote-provider-info time {color: var(--leise); white-space: nowrap}
body[data-rs-material] .vote-provider-info > p[role="status"] {
  color: #edd3ac; padding: 4px 9px;
  border-inline-start: 2px solid #9f805e;
  background: linear-gradient(95deg,#c5a07715,transparent);
}
html body[data-start-entry][data-rs-material] .vote-provider-extra .rs-button {
  background: transparent; color: var(--flieder); box-shadow: none;
}
body[data-rs-material] .lobby-referral-grid dl {border-color: var(--stahl)}
body[data-rs-material] .lobby-referral-grid dt,
body[data-rs-material] .lobby-referral-grid dd {
  box-shadow: 0 1px var(--kante-innen); align-content: center;
}
body[data-rs-material] .lobby-referral-grid dd {color: var(--flieder); font-weight: 650}
body[data-rs-material] .entry-footer .origin-notice[open] {background: var(--innenfarbe); box-shadow: 0 0 0 1px var(--kante)}
body[data-rs-material] .entry-footer .origin-notice[open] p {padding-inline: 8px}
body[data-rs-material] .entry-notice {background: var(--innenfarbe)}
@media (hover: hover) {
  html:root body[data-start-entry][data-rs-material] :is(.rs-button:not(:disabled),.public-vote-button,.language-option:not(:disabled)):hover,
  html body[data-start-entry][data-rs-material] .community-disclosure > summary:hover .disclosure-toggle {
    border-color: var(--flieder); box-shadow: inset 0 1px #e9e0ff55, 0 0 0 1px var(--kante-innen);
  }
}
html:root body[data-start-entry][data-rs-material] :is(a,button,summary,input,select):focus-visible {
  outline: 2px solid #eee2ff; outline-offset: 3px;
}
@media(max-width:650px){
  body[data-rs-material] .community-disclosure > summary {--staub-staerke: .35}
  body[data-rs-material] .lobby-referral-grid dl {border-block-start: 1px solid var(--kante)}
}
@media(forced-colors:active){
  body[data-rs-material] :is(.lobby-panel,.public-voting,.community-disclosure>summary,.entry-content,.lobby-balance)::before,
  body[data-rs-material] :is(.lobby-panel,.public-voting,.community-disclosure>summary,.lobby-balance)::after {display:none}
  body[data-rs-material] .disclosure-toggle::before,body[data-rs-material] .disclosure-toggle::after {background:ButtonText;forced-color-adjust:none}
}