/* OddsQ r78: one bounded desktop stage with raised template-toned depth. */

@media (min-width: 1181px) {
  :root {
    --stage-edge: max(20px, calc((100% - var(--page)) / 2));
    --stage-blue: 43, 133, 255;
    --stage-gold: 241, 201, 40;
  }

  body {
    position: relative;
    isolation: isolate;
    background:
      radial-gradient(ellipse at 50% 8%, rgba(255, 255, 255, 0.025), transparent 31rem),
      linear-gradient(180deg, #030506 0%, #020405 56%, #060808 100%) !important;
  }

  /* The empty gutters provide the light. They do not become content surfaces. */
  body::before {
    position: fixed !important;
    z-index: 0 !important;
    display: block !important;
    inset: 0 !important;
    content: "";
    pointer-events: none;
    opacity: 1 !important;
    background:
      radial-gradient(
        ellipse 240px 820px at calc(var(--stage-edge) - 30px) 34%,
        rgba(var(--stage-blue), 0.15),
        rgba(var(--stage-blue), 0.045) 46%,
        transparent 76%
      ),
      radial-gradient(
        ellipse 240px 820px at calc(100% - var(--stage-edge) + 30px) 34%,
        rgba(var(--stage-gold), 0.105),
        rgba(var(--stage-gold), 0.03) 46%,
        transparent 76%
      ),
      radial-gradient(circle 270px at var(--stage-edge) 86px, rgba(var(--stage-blue), 0.055), transparent 72%),
      radial-gradient(circle 270px at calc(100% - var(--stage-edge)) 86px, rgba(var(--stage-gold), 0.045), transparent 72%) !important;
    background-size: auto !important;
    mask-image: none !important;
  }

  /* One central material replaces the previous page-wide outline. */
  body::after {
    position: absolute;
    z-index: 0;
    top: 0;
    right: var(--stage-edge);
    bottom: 0;
    left: var(--stage-edge);
    content: "";
    pointer-events: none;
    border: 0;
    border-right: 1px solid rgba(211, 219, 221, 0.075);
    border-left: 1px solid rgba(211, 219, 221, 0.075);
    border-radius: 0;
    background:
      linear-gradient(90deg, rgba(var(--stage-blue), 0.027), transparent 10%, transparent 90%, rgba(var(--stage-gold), 0.021)),
      linear-gradient(180deg, rgba(12, 16, 18, 0.985), rgba(5, 8, 9, 0.99) 48%, rgba(8, 10, 10, 0.995));
    box-shadow:
      -28px 0 76px rgba(var(--stage-blue), 0.085),
      28px 0 76px rgba(var(--stage-gold), 0.052),
      inset 1px 0 0 rgba(255, 255, 255, 0.018),
      inset -1px 0 0 rgba(255, 255, 255, 0.016),
      inset 0 20px 50px rgba(255, 255, 255, 0.012);
  }

  .site-header,
  .market-ticker,
  .status-banner,
  .dashboard,
  .about-shell,
  .content-shell,
  .window-page-shell,
  .site-footer {
    position: relative;
    z-index: 1;
  }

  .site-header {
    padding-right: var(--stage-edge) !important;
    padding-left: var(--stage-edge) !important;
    border-bottom: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  /* These risers turn the ticker's bounded top rail upward beside the brand
     and Telegram control instead of allowing it to run to the viewport edge. */
  .site-header::before,
  .site-header::after {
    position: absolute;
    z-index: -1;
    top: 11px;
    bottom: -44px;
    width: 1px;
    content: "";
    pointer-events: none;
  }

  .site-header::before {
    left: var(--stage-edge);
    background: linear-gradient(180deg, transparent, rgba(var(--stage-blue), 0.28) 28%, rgba(210, 220, 223, 0.12));
    box-shadow: -10px 0 28px rgba(var(--stage-blue), 0.13);
  }

  .site-header::after {
    right: var(--stage-edge);
    background: linear-gradient(180deg, transparent, rgba(var(--stage-gold), 0.23) 28%, rgba(210, 220, 223, 0.12));
    box-shadow: 10px 0 28px rgba(var(--stage-gold), 0.08);
  }

  .market-ticker {
    width: min(calc(100% - 40px), var(--page));
    min-height: 44px;
    margin: 0 auto;
    padding: 0 !important;
    grid-template-columns: clamp(178px, 14vw, 198px) minmax(0, 1fr) !important;
    overflow: hidden;
    border-top: 1px solid rgba(204, 214, 217, 0.11) !important;
    border-bottom: 1px solid rgba(204, 214, 217, 0.11) !important;
    background: transparent !important;
    box-shadow:
      0 -10px 28px rgba(var(--stage-blue), 0.025),
      0 11px 30px rgba(0, 0, 0, 0.3) !important;
  }

  .market-ticker::before {
    z-index: -1;
    inset: 0 !important;
    border: 0 !important;
    content: "";
    background:
      linear-gradient(90deg, rgba(var(--stage-blue), 0.055), transparent 15%, transparent 85%, rgba(var(--stage-gold), 0.04)),
      rgba(4, 7, 8, 0.95) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.018),
      inset 0 -1px 0 rgba(0, 0, 0, 0.58);
  }

  .market-ticker .ticker-status {
    padding: 0 14px !important;
    background: rgba(3, 6, 7, 0.74) !important;
  }

  .market-ticker .ticker-viewport {
    padding-right: 14px !important;
    background: transparent !important;
  }

  /* Pages without the live ticker keep short risers rather than dangling
     decorative lines below the header. */
  body:not(:has(.market-ticker)) .site-header::before,
  body:not(:has(.market-ticker)) .site-header::after {
    bottom: 0;
  }

  .site-footer {
    width: min(calc(100% - 40px), var(--page)) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-bottom: 0 !important;
    border-top-color: rgba(204, 214, 217, 0.13) !important;
    background:
      radial-gradient(ellipse at 50% 0, rgba(255, 255, 255, 0.042), transparent 56%),
      linear-gradient(90deg, rgba(var(--stage-blue), 0.028), transparent 13%, transparent 87%, rgba(var(--stage-gold), 0.024)),
      linear-gradient(180deg, rgba(13, 17, 18, 0.985), rgba(5, 8, 8, 0.995)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.028),
      0 -17px 42px rgba(0, 0, 0, 0.28) !important;
  }
}

/* Medium desktop widths have no useful gutter area, so retain the bounded
   stage and rails without forcing colored light into a narrow edge strip. */
@media (min-width: 1181px) and (max-width: 1480px) {
  body::before {
    background: none !important;
  }

  body::after {
    box-shadow:
      inset 1px 0 0 rgba(255, 255, 255, 0.018),
      inset -1px 0 0 rgba(255, 255, 255, 0.016),
      inset 0 20px 50px rgba(255, 255, 255, 0.012) !important;
  }
}