:root {
  --dp-ink: #050705;
  --dp-panel: #0d110d;
  --dp-acid: #9efe1f;
  --dp-white: #f4f7f2;
  --dp-muted: #909a90;
  color-scheme: dark;
}

html {
  scrollbar-color: var(--dp-acid) var(--dp-ink);
  scrollbar-width: thin;
}

::selection {
  color: var(--dp-ink);
  background: var(--dp-acid);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--dp-ink); }
::-webkit-scrollbar-thumb { background: var(--dp-acid); border: 3px solid var(--dp-ink); }

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--dp-acid) !important;
  outline-offset: 4px !important;
}

body {
  background: var(--dp-ink);
}

.surface-card {
  border-color: rgba(158, 254, 31, .22) !important;
  background:
    linear-gradient(150deg, rgba(158, 254, 31, .045), transparent 38%),
    rgba(12, 15, 12, .96) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .48) !important;
}

.ui-button-primary {
  background: var(--dp-acid) !important;
  box-shadow: 0 14px 38px rgba(158, 254, 31, .15);
}

main:has(a[href="/"] h1) {
  isolation: isolate;
  background:
    radial-gradient(circle at 76% 42%, rgba(158, 254, 31, .1), transparent 26%),
    linear-gradient(rgba(158, 254, 31, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(158, 254, 31, .055) 1px, transparent 1px),
    var(--dp-ink);
  background-size: auto, 72px 72px, 72px 72px, auto;
}

main:has(a[href="/"] h1)::before {
  content: "DRAFT\A PLAY";
  position: absolute;
  z-index: -1;
  left: clamp(28px, 6vw, 110px);
  top: 50%;
  white-space: pre;
  color: var(--dp-white);
  font: 900 clamp(5.2rem, 12vw, 13.5rem)/.72 Inter, sans-serif;
  letter-spacing: -.105em;
  transform: translateY(-50%);
}

main:has(a[href="/"] h1)::after {
  content: "TOURNAMENT OPERATING SYSTEM / 01";
  position: absolute;
  z-index: -1;
  left: clamp(32px, 6.4vw, 118px);
  bottom: clamp(28px, 5vw, 68px);
  color: var(--dp-acid);
  font: 700 10px/1 Inter, sans-serif;
  letter-spacing: .16em;
}

main:has(a[href="/"] h1) > div {
  justify-content: flex-end !important;
  padding-right: clamp(24px, 9vw, 170px) !important;
  padding-left: clamp(24px, 6vw, 110px) !important;
}

main:has(a[href="/"] h1) > div > div {
  width: min(430px, 100%) !important;
  max-width: 430px !important;
}

main:has(a[href="/"] h1) .surface-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(158, 254, 31, .28) !important;
}

main:has(a[href="/"] h1) .surface-card::before {
  content: "LIVE / AUTH NODE";
  position: absolute;
  top: 10px;
  right: 13px;
  color: rgba(158, 254, 31, .55);
  font: 700 7px/1 Inter, sans-serif;
  letter-spacing: .12em;
}

main:has(a[href="/"] h1) input {
  border-color: rgba(255, 255, 255, .13) !important;
  background: rgba(3, 5, 3, .82) !important;
}

main:has(a[href="/"] h1) input:focus {
  border-color: rgba(158, 254, 31, .72) !important;
  box-shadow: 0 0 0 3px rgba(158, 254, 31, .07);
}

@media (max-width: 900px) {
  main:has(a[href="/"] h1)::before {
    left: 50%;
    top: 18%;
    color: rgba(244, 247, 242, .035);
    font-size: min(28vw, 10rem);
    text-align: center;
    transform: translate(-50%, -50%);
  }

  main:has(a[href="/"] h1)::after { display: none; }

  main:has(a[href="/"] h1) > div {
    justify-content: center !important;
    padding: 18px !important;
  }
}

@media (max-width: 480px) {
  main:has(a[href="/"] h1) > div { padding: 10px !important; }
  main:has(a[href="/"] h1) .surface-card { border-color: rgba(158, 254, 31, .2) !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}