/* Shared ShopBox components: landing, console, onboarding and player store. */
#relay-concept {
  color-scheme: dark;
  --rc-bg: #0b141e;
  --rc-surface: #111e2b;
  --rc-ink: #f4f7fb;
  --rc-muted: #afc2d5;
  --rc-line: #2a4055;
  --rc-accent: #54b2ff;
  --rc-on: #fff;
  --rc-soft: #173550;
  --rc-hero: #0a1724;
  --rc-hero-ink: #f4f7fb;
  --rc-hero-muted: #afc2d5;
  --rc-lime: #269cff;
  --rc-warning: #f6c47d;
  --rc-warning-bg: #35291b;
  --rc-error: #ffaaa8;
  --rc-error-bg: #382228;
  --rc-shop: #0b141e;
  --rc-shop-accent: #0876df;
  --rc-shop-soft: #173550;
  background: var(--rc-bg);
}
#relay-concept button { cursor: pointer; }
#relay-concept :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid #69beff;
  outline-offset: 3px;
}
#relay-concept :is(input, textarea)::placeholder { color: #93a9be; opacity: 1; }
#relay-concept :is(input:not([type=checkbox]):not([type=radio]), select, textarea) {
  background: #0b1723;
  border-color: #344d65;
}
#relay-concept .rc-panel {
  background: linear-gradient(145deg, #142332, #111e2b);
  border-color: var(--rc-line);
  border-radius: 14px;
  box-shadow: 0 8px 28px #00000014;
}
#relay-concept .rc-btn { border-radius: 8px; }
#relay-concept .rc-btn:hover:not(:disabled) { filter: brightness(1.12); }
#relay-concept .rc-primary {
  background: #0876df;
  border-color: #198cff;
  color: #fff;
  box-shadow: 0 4px 18px #007dff15;
}
#relay-concept .rc-badge { color: #a8d7ff; }
#relay-concept .rc-badge.warn { color: var(--rc-warning); }
#relay-concept .rc-badge.err { color: var(--rc-error); }
#relay-concept .rc-mark { background: #0876df; color: #fff; }
#relay-concept .rc-code { border: 1px solid #2a4055; }
#relay-concept .rc-sidebar { background: #0d1823; }
#relay-concept .rc-sidebar .rc-logo { gap: 7px; font-size: 20px; }
#relay-concept .rc-sidebar .sb-logo-symbol { width: 28px; height: 32px; }
#relay-concept .rc-sidebar .sb-logo-symbol svg { width: 27px; height: 27px; }
#relay-concept .rc-community { border: 1px solid #24394d; background: #111f2e; }
#relay-concept .rc-appbar { background: #101d2a; }
#relay-concept .rc-nav button:hover { background: #15283b; }
#relay-concept .rc-nav button[aria-current=page] {
  background: #153754;
  color: #b6dfff;
  box-shadow: inset 3px 0 #168aff;
}
#relay-concept .rc-subnav button[aria-pressed=true] {
  color: #b6dfff;
  background: #153754;
  border-color: #366385;
}
#relay-concept .rc-kpi { border-top: 2px solid #278ad8; }
#relay-concept .rc-bar { background: linear-gradient(#279fff, #0876df); opacity: .8; }
#relay-concept :is(h1,h2)[tabindex="-1"]:focus { outline: none; }
#relay-concept :is(h1,h2)[tabindex="-1"]:focus-visible { outline: 2px solid #398fd255; outline-offset: 5px; border-radius: 5px; }
#relay-concept .rc-table-wrap::-webkit-scrollbar-thumb { background: #3f5e78; }
#relay-concept tbody tr:hover { background: #19304755; }
#relay-concept .rc-alert { border: 1px solid #5a4226; }
#relay-concept .rc-alert .rc-textbutton { color: #f6d19a; }
#relay-concept .rc-auth { box-shadow: 0 18px 55px #00000030; }
#relay-concept .rc-setup {
  background: radial-gradient(ellipse at 50% 0, #10335170, transparent 65%), #0b141e;
}
#relay-concept .rc-step.active { color: #a8d7ff; }
#relay-concept .rc-step.active span { border: 1px solid #318dde; background: #173550; }
#relay-concept .rc-shop-nav { background: linear-gradient(120deg, #0d1722, #0b1117); }
#relay-concept .rc-shop-logo { letter-spacing: 1px; }
#relay-concept .rc-shop-logo .rc-mark { color: #fff; }
#relay-concept .rc-shop .rc-primary { color: #fff; }
#relay-concept .rc-shop :is(.rc-badge, .rc-textbutton) {
  color: color-mix(in srgb, var(--rc-shop-accent), white 62%);
}
#relay-concept .rc-shop .rc-badge.warn { color: var(--rc-warning); background: var(--rc-warning-bg); }
#relay-concept .rc-shop .rc-badge.err { color: var(--rc-error); background: var(--rc-error-bg); }
#relay-concept .rc-shop-hero {
  background: radial-gradient(ellipse at 90% 15%, var(--rc-shop-soft), transparent 70%), #0d1c2b;
  border-bottom: 1px solid #263f57;
  padding-block: 44px;
}
#relay-concept .rc-product { box-shadow: 0 8px 28px #00000020; border-radius: 12px; }
#relay-concept .rc-product-art,
#relay-concept .rc-product-detail-art {
  color: color-mix(in srgb, var(--rc-shop-accent), white 60%);
}
#relay-concept .rl-package-art {
  background-image: radial-gradient(circle at 85% 85%, #168aff32, transparent 60%),
    linear-gradient(140deg, var(--rc-shop-soft), #0b1c2d);
}
#relay-concept .rc-product-art b { text-shadow: 0 3px 25px #008aff25; }
#relay-concept .rc-product-art span { color: #bed4e7; }
#relay-concept .rl-shop-world {
  background: #0c2237;
  border: 1px solid #355673;
}
#relay-concept .rl-shop-world:after {
  background: linear-gradient(transparent 5%, #091b30f5);
}
#relay-concept .rl-shop-world :is(strong, p, small) { color: #f1f7fc; }
#relay-concept .rl-appearance-world {
  background: linear-gradient(135deg, var(--rc-shop-soft), #0b2135);
  border: 1px solid #355673;
  color: #f1f7fc;
}
#relay-concept .rc-payment-choice { background: #0f2132; border-color: #355673; }
#relay-concept .rc-footer { background: #0e1823; }
#relay-concept .sb-player-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 34px; width: 34px; height: 34px;
  border: 1px solid #5480a4; border-radius: 9px;
  background-color: #193b58; background-size: 200% 200%;
  background-image: url('assets/shopbox-demo-avatars.png');
  font-size: 11px; font-weight: 700; color: transparent;
  box-shadow: 0 3px 10px #00000030;
}
#relay-concept .sb-avatar-alex { background-position: left top; }
#relay-concept .sb-avatar-mika { background-position: right top; border-color: #9a694a; }
#relay-concept .sb-avatar-lena { background-position: left bottom; border-color: #766298; }
#relay-concept .sb-avatar-jonas { background-position: right bottom; border-color: #437e80; }
#relay-concept :is(.sb-order-player,.sb-player-identity) { display: flex; align-items: center; gap: 11px; min-width: 0; }
#relay-concept .sb-order-player-details { min-width: 0; }
#relay-concept .sb-order-player-details>small { display: block; margin-top: 2px; color: var(--rc-muted); }
#relay-concept .rl-console-order { grid-template-columns: minmax(0,1fr) 64px 120px; }
#relay-concept .rl-console-order .sb-order-player { gap: 10px; }
#relay-concept .rl-console-order .sb-player-avatar { width: 32px; height: 32px; flex-basis: 32px; }
@media(max-width:480px) {
  #relay-concept .rl-console-order { grid-template-columns: minmax(0,1fr) 45px 86px; gap: 7px; }
  #relay-concept .rl-console-order .sb-order-player { gap: 7px; }
  #relay-concept .rl-console-order .sb-player-avatar { width: 27px; height: 27px; flex-basis: 27px; border-radius: 7px; }
}
@media(max-width:780px) {
  #relay-concept .rc-sidebar .rc-logo { font-size: 16px; padding-inline: 4px; }
  #relay-concept .rc-sidebar .sb-logo-symbol { width: 23px; }
}
@media(max-width:570px) {
  #relay-concept .rc-shop-hero { padding-block: 30px; }
}
@media(prefers-reduced-motion:no-preference) {
  #relay-concept :is(.rc-btn, .rc-nav button, .rc-product) {
    transition: background-color .16s, border-color .16s, filter .16s;
  }
}