/* Two backgrounds for the modern storefront. The components remain identical;
   Profile only changes the room behind them. This file follows style.css so it
   also neutralises whichever background that base file carried in an old cache. */
html[data-arcade-background="midnight"] {
  background-color: var(--bg, #0A0C0B);
  color-scheme: dark;
}

html[data-arcade-background="midnight"] body {
  background-color: var(--bg, #0A0C0B);
  background-image: linear-gradient(180deg, var(--bg, #0A0C0B), var(--bg-2, #0E100F) 420px);
  background-size: auto;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

html[data-arcade-background="neon"] {
  background-color: #04030A;
  color-scheme: dark;
}

html[data-arcade-background="neon"] body {
  background-color: #04030A;
  /* Exact wall restored from the neon-hall build (7777078): four quiet pixel
     silhouettes, a sparse star field and purple/cyan spill. The old CRT bars
     and vignette stay retired so text and covers keep their present clarity. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480' shape-rendering='crispEdges'%3E%3Cpath fill='%231c1033' transform='translate(46,58)' d='M8,0h4v4h-4zM32,0h4v4h-4zM12,4h4v4h-4zM28,4h4v4h-4zM8,8h28v4h-28zM4,12h8v4h-8zM16,12h12v4h-12zM32,12h8v4h-8zM0,16h44v4h-44zM0,20h4v4h-4zM8,20h28v4h-28zM40,20h4v4h-4zM0,24h4v4h-4zM8,24h4v4h-4zM32,24h4v4h-4zM40,24h4v4h-4zM12,28h8v4h-8zM24,28h8v4h-8z'/%3E%3Cpath fill='%230d2732' transform='translate(330,150)' d='M8,0h16v4h-16zM4,4h24v4h-24zM0,8h8v4h-8zM12,8h8v4h-8zM24,8h8v4h-8zM0,12h32v16h-32zM0,28h8v4h-8zM12,28h8v4h-8zM24,28h8v4h-8z'/%3E%3Cpath fill='%232b0a26' transform='translate(150,330)' d='M4,0h8v4h-8zM16,0h8v4h-8zM0,4h28v8h-28zM4,12h20v4h-20zM8,16h12v4h-12zM12,20h4v4h-4z'/%3E%3Cpath fill='%23171034' transform='translate(392,396)' d='M12,0h4v4h-4zM8,4h12v4h-12zM0,8h28v4h-28zM4,12h4v4h-4zM20,12h4v4h-4z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130' shape-rendering='crispEdges'%3E%3Cpath fill='%231a1430' d='M10,14h2v2h-2zM66,8h2v2h-2zM104,30h2v2h-2zM22,72h2v2h-2zM88,96h2v2h-2zM120,112h2v2h-2zM48,120h2v2h-2zM6,100h2v2h-2z'/%3E%3Cpath fill='%232a2150' d='M84,20h2v2h-2zM16,48h2v2h-2z'/%3E%3C/svg%3E"),
    radial-gradient(110% 70% at 50% -12%, rgba(176, 38, 255, .13), transparent 60%),
    radial-gradient(90% 55% at 50% 110%, rgba(34, 224, 255, .05), transparent 60%);
  background-size: 480px 480px, 130px 130px, auto, auto;
  background-repeat: repeat, repeat, no-repeat, no-repeat;
  background-attachment: fixed;
}

/* The splash is opaque, so it must join the selected room on the very first
   frame. Nothing else changes: typography, logo and progress stay contemporary. */
html[data-arcade-background="midnight"] .splash {
  background: radial-gradient(120% 70% at 50% 22%, #0F2318, var(--bg, #0A0C0B) 66%);
}

html[data-arcade-background="neon"] .splash {
  background:
    radial-gradient(92% 58% at 50% 17%, rgba(176, 38, 255, .19), transparent 64%),
    radial-gradient(78% 52% at 50% 108%, rgba(34, 224, 255, .08), transparent 62%),
    #04030A;
}

/* Profile picker ---------------------------------------------------------- */
.profile-bg-dot {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 6px;
  vertical-align: middle;
}

.profile-bg-dot--midnight {
  background: radial-gradient(circle at 70% 24%, rgba(62, 220, 124, .45), transparent 26%),
              linear-gradient(145deg, #171B19, #070908 74%);
}

.profile-bg-dot--neon {
  background: radial-gradient(circle at 30% 25%, #B026FF, transparent 37%),
              radial-gradient(circle at 78% 76%, #22E0FF, transparent 34%), #04030A;
  box-shadow: 0 0 10px rgba(176, 38, 255, .22);
}

.profile-bg-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 14px 16px;
  border-top: 1px solid rgba(255, 255, 255, .05);
}

.profile-bg-choice {
  position: relative;
  min-width: 0;
  min-height: 108px;
  padding: 7px;
  border: 1px solid var(--line-2, rgba(255, 255, 255, .09));
  border-radius: 14px;
  background: rgba(255, 255, 255, .025);
  color: var(--txt, #FFF);
  text-align: left;
}

.profile-bg-choice:active { transform: scale(.98); }
.profile-bg-choice--on {
  border-color: var(--acc, #3EDC7C);
  box-shadow: 0 0 0 1px rgba(62, 220, 124, .18), 0 8px 22px rgba(0, 0, 0, .2);
}

.profile-bg-preview {
  position: relative;
  display: block;
  height: 55px;
  overflow: hidden;
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.profile-bg-preview::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 9px;
  width: 26px;
  height: 12px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .1);
  box-shadow: -34px -18px 0 -2px rgba(255, 255, 255, .07);
}

.profile-bg-preview--midnight {
  background: radial-gradient(52% 72% at 72% 8%, rgba(62, 220, 124, .34), transparent 70%),
              linear-gradient(155deg, #1B211E, #080A09 72%);
}

.profile-bg-preview--neon {
  background: radial-gradient(62% 86% at 20% 9%, rgba(176, 38, 255, .58), transparent 66%),
              radial-gradient(55% 78% at 84% 92%, rgba(34, 224, 255, .33), transparent 68%), #04030A;
}

.profile-bg-choice strong,
.profile-bg-choice small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-bg-choice strong { margin: 8px 3px 0; font-size: 12px; line-height: 1.2; }
.profile-bg-choice small { margin: 3px 3px 1px; color: var(--txt-2, #8D928D); font-size: 9px; line-height: 1.2; }

.profile-bg-check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--acc, #3EDC7C);
  color: var(--acc-ink, #05230F);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .36);
  opacity: 0;
  transform: scale(.72);
}

.profile-bg-choice--on .profile-bg-check { opacity: 1; transform: none; }
.profile-bg-check svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.7; }

@media (max-width: 340px) {
  .profile-bg-picker { gap: 8px; padding-inline: 10px; }
  .profile-bg-choice { min-height: 102px; padding: 6px; }
  .profile-bg-preview { height: 51px; }
}

@media (prefers-reduced-motion: reduce) {
  .profile-bg-choice, .profile-bg-check { transition: none; }
}