* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: #040711;
  color: #f6f7ff;
}

body {
  font-family: "Arial Narrow", "Trebuchet MS", Arial, sans-serif;
  overflow-x: hidden;
}

button,
input {
  font: inherit;
}

.page {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 30%, rgba(36, 40, 100, .20), transparent 32%),
    linear-gradient(90deg, rgba(77, 0, 120, .30), rgba(0, 0, 0, .12) 45%, rgba(18, 96, 44, .22)),
    #040711;
  overflow-x: hidden;
}

.canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 1659px;
  height: 948px;
  transform-origin: top left;
  overflow: hidden;
  background: #050713;
}

.canvas-bg {
  position: absolute;
  inset: 0;
  background: url("../img/bg/bg-canvas.jpg") center / cover no-repeat;
  filter: saturate(1.12) contrast(1.05);
}

.canvas-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 18%, rgba(5, 8, 21, .04), rgba(4, 6, 15, .12) 43%, rgba(4, 6, 15, .40) 100%),
    radial-gradient(circle at 19% 50%, rgba(174, 0, 255, .27), transparent 26%),
    radial-gradient(circle at 82% 51%, rgba(111, 255, 59, .20), transparent 25%),
    linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.03) 47%, rgba(0,0,0,.28));
}

.center-stadium-glow {
  position: absolute;
  left: 425px;
  top: 140px;
  width: 820px;
  height: 460px;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 68%, rgba(80, 105, 255, .18), transparent 58%),
    radial-gradient(ellipse at 50% 33%, rgba(255, 255, 255, .08), transparent 44%);
  mix-blend-mode: screen;
}

.top-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.banner,
.logo {
  position: absolute;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.banner-left {
  left: 34px;
  top: 30px;
  width: 445px;
  height: 125px;
  filter: drop-shadow(0 0 18px rgba(182, 56, 255, .38));
}

.logo {
  left: 555px;
  top: 0;
  width: 551px;
  height: 188px;
  object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(104,255,63,.32)) drop-shadow(0 0 24px rgba(160,0,255,.20));
}

.banner-right {
  left: 1178px;
  top: 30px;
  width: 447px;
  height: 125px;
  filter: drop-shadow(0 0 18px rgba(95,255,60,.28));
}

/* Auth panel */
.auth-card {
  position: absolute;
  z-index: 10;
  left: 433px;
  top: 184px;
  width: 795px;
  height: 414px;
  clip-path: polygon(4.3% 0, 96% 0, 100% 8%, 100% 92%, 96% 100%, 4% 100%, 0 92%, 0 8%);
  background:
    linear-gradient(90deg, rgba(5,7,17,.965) 0%, rgba(5,8,18,.955) 49.75%, rgba(4,22,17,.952) 50%, rgba(4,22,17,.94) 100%);
  box-shadow:
    0 0 0 2px rgba(177, 85, 255, .30) inset,
    0 0 36px rgba(135, 0, 255, .26),
    0 26px 48px rgba(0,0,0,.52);
}

.auth-frame {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(191, 230, 255, .20);
  clip-path: polygon(4.3% 0, 96% 0, 100% 8%, 100% 92%, 96% 100%, 4% 100%, 0 92%, 0 8%);
  pointer-events: none;
}

.auth-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 42%),
    linear-gradient(90deg, rgba(156,0,255,.12), transparent 44%, rgba(103,255,59,.10));
}

.auth-card::after {
  content: "";
  position: absolute;
  top: 54px;
  bottom: 10px;
  left: 50%;
  width: 1px;
  background: linear-gradient(transparent, rgba(255,255,255,.22), transparent);
}

.tab {
  position: absolute;
  top: 0;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .055em;
  text-shadow: 0 0 14px currentColor;
  z-index: 4;
}

.tab-signin {
  left: 0;
  width: 50%;
  color: #fff;
  clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);
  background: linear-gradient(90deg, rgba(151,0,255,.92), rgba(151,48,255,.39));
}

.tab-join {
  right: 0;
  width: 50%;
  color: #ecffe1;
  background: linear-gradient(90deg, rgba(82,255,55,.16), rgba(82,255,55,.05));
}

.panel {
  position: absolute;
  z-index: 5;
  top: 75px;
  height: 322px;
}

.panel-login {
  left: 48px;
  width: 330px;
}

.panel-join {
  left: 423px;
  width: 322px;
}

.panel h1,
.panel h2 {
  margin: 0;
  color: #fff;
  font-size: 17px;
  line-height: 1.07;
  font-weight: 900;
}

.sub {
  margin: 7px 0 20px;
  color: #bdc2da;
  font-size: 12px;
}

.field {
  height: 37px;
  margin-bottom: 13px;
  padding: 0 14px 0 36px;
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid rgba(170, 160, 255, .40);
  border-radius: 6px;
  background: rgba(4, 8, 19, .70);
  box-shadow: inset 0 0 14px rgba(255,255,255,.03);
}

.field input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font-size: 12px;
}

.field input::placeholder {
  color: #c6cada;
}

.icon {
  position: absolute;
  left: 14px;
  width: 13px;
  height: 13px;
  opacity: .86;
}

.icon-mail {
  border: 1px solid #d8dcf2;
  border-radius: 2px;
}

.icon-mail::before {
  content: "";
  position: absolute;
  inset: 1px;
  background:
    linear-gradient(135deg, transparent 45%, #d8dcf2 48%, #d8dcf2 52%, transparent 55%),
    linear-gradient(45deg, transparent 45%, #d8dcf2 48%, #d8dcf2 52%, transparent 55%);
  opacity: .55;
}

.icon-lock::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 7px;
  height: 6px;
  border: 1px solid #d8dcf2;
  border-radius: 2px;
}

.icon-lock::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 6px;
  border: 1px solid #d8dcf2;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
}

.eye {
  position: absolute;
  right: 13px;
  width: 12px;
  height: 7px;
  border: 1px solid rgba(216,221,244,.8);
  border-radius: 50%;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.eye::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #d8ddf4;
  transform: translate(-50%, -50%);
}

.tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 7px 0 17px;
  font-size: 12px;
  color: #c8cbda;
}

.tools a,
.panel small a {
  color: #e170ff;
  text-decoration: none;
}

.remember {
  display: flex;
  align-items: center;
  gap: 7px;
}

.remember input {
  width: 13px;
  height: 13px;
  accent-color: #a42dff;
  margin: 0;
}

.btn {
  height: 43px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .035em;
  cursor: pointer;
}

.btn-purple {
  width: 100%;
  background: linear-gradient(180deg, #d95dff, #8d20ec);
  box-shadow: 0 0 22px rgba(203,56,255,.72), inset 0 0 12px rgba(255,255,255,.18);
}

.divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 12px;
  color: #989db2;
  font-size: 10px;
}

.divider::before,
.divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(255,255,255,.18);
}

.socials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.socials button {
  height: 33px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(8,10,22,.78);
  color: #fff;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.socials b {
  font-family: Arial, sans-serif;
  font-size: 14px;
}

.google { color: #ffdf4d; }
.facebook { color: #4da3ff; }
.discord { color: #a780ff; }

.panel small {
  display: block;
  margin: 13px 0 0;
  color: #adb0c9;
  font-size: 10px;
}

.join-list {
  list-style: none;
  padding: 0;
  margin: 25px 0 0;
  display: grid;
  gap: 14px;
}

.join-list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
}

.join-list img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.12));
}

.join-list strong {
  display: block;
  font-size: 14px;
  line-height: 1.05;
}

.join-list span {
  display: block;
  margin-top: 3px;
  color: #c3c8d8;
  font-size: 11px;
}

.btn-green {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  width: 100%;
  background: linear-gradient(180deg, #90ff49, #38bb2d);
  box-shadow: 0 0 24px rgba(106,255,70,.62), inset 0 0 12px rgba(255,255,255,.15);
}

/* Features */
.section-title {
  position: absolute;
  z-index: 11;
  left: 576px;
  top: 606px;
  width: 545px;
  text-align: center;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .055em;
  text-shadow: 0 0 12px rgba(255,255,255,.35);
}

.section-title b {
  color: #8fff45;
  text-shadow: 0 0 12px rgba(141,255,66,.60);
}

.features {
  position: absolute;
  z-index: 10;
  left: 112px;
  top: 629px;
  width: 1435px;
  height: 185px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 9px;
}

.feature-card {
  height: 185px;
  padding: 9px 10px 10px;
  border: 1px solid rgba(180,70,255,.62);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(25,12,54,.92), rgba(8,8,25,.84));
  box-shadow:
    0 0 18px rgba(141,0,255,.24),
    inset 0 0 15px rgba(176,55,255,.10);
  overflow: hidden;
}

.feature-card header {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 16px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .02em;
  white-space: nowrap;
}

.feature-card header span {
  color: #df73ff;
  text-shadow: 0 0 9px #df73ff;
  font-size: 12px;
}

.feature-card > img {
  display: block;
  width: 100%;
  height: 92px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  margin: 8px 0 9px;
}

.feature-card p {
  margin: 0;
  text-align: center;
  color: #e8e4fb;
  font-size: 11px;
  line-height: 1.18;
}

/* Bottom HUD */
.bottom-hud {
  position: absolute;
  z-index: 10;
  left: 112px;
  top: 821px;
  width: 1435px;
  height: 77px;
  display: grid;
  grid-template-columns: 365px 538px 532px;
  overflow: hidden;
  border-radius: 6px;
}

.hud-panel {
  height: 77px;
  border: 1px solid rgba(160,74,255,.42);
  background: linear-gradient(90deg, rgba(20,8,44,.94), rgba(8,11,24,.88));
  box-shadow: inset 0 0 15px rgba(255,255,255,.04);
}

.live-events {
  display: grid;
  grid-template-columns: 78px 1fr 84px;
  align-items: center;
  padding: 9px 13px;
}

.live-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(198,83,255,.45));
}

.live-copy h3 {
  margin: 0;
  color: #dda1ff;
  font-size: 12px;
}

.live-copy p {
  margin: 3px 0;
  color: #fff;
  font-size: 11px;
}

.live-copy span {
  color: #d0d1e0;
  font-size: 10px;
}

.live-copy b {
  color: #8fff45;
}

.cup-box {
  width: 73px;
  height: 51px;
  border: 1px solid rgba(116,138,255,.24);
  border-radius: 4px;
  background: rgba(255,255,255,.04);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cup-box img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.stats div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-left: 1px solid rgba(255,255,255,.10);
}

.stats div:first-child {
  border-left: 0;
}

.stats img {
  width: 25px;
  height: 25px;
  object-fit: contain;
  margin-bottom: 3px;
}

.stats strong {
  color: #fff;
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
}

.stats span {
  margin-top: 3px;
  color: #d0d0e0;
  font-size: 10px;
  letter-spacing: .04em;
}

.legacy {
  display: grid;
  grid-template-columns: 1fr 260px 70px;
  align-items: center;
  padding: 9px 12px;
  color: #fff;
  text-decoration: none;
  border-color: rgba(114,255,59,.48);
  background:
    radial-gradient(circle at 86% 50%, rgba(115,255,58,.40), transparent 32%),
    linear-gradient(90deg, rgba(6,15,22,.93), rgba(36,107,21,.80));
}

.legacy h3 {
  margin: 0;
  color: #8fff45;
  font-size: 16px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .04em;
}

.legacy p {
  margin: 4px 0 0;
  color: #ddf3d5;
  font-size: 10px;
}

.legacy span {
  height: 36px;
  border-radius: 25px;
  background: linear-gradient(180deg, #98ff55, #4ac72e);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 0 19px rgba(117,255,61,.54);
}

.legacy img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  justify-self: end;
  filter: drop-shadow(0 0 16px rgba(116,255,60,.5));
}

/* Footer */
.footer {
  position: absolute;
  z-index: 11;
  left: 114px;
  top: 908px;
  width: 1428px;
  height: 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: #aaa9c3;
  font-size: 10px;
}

.footer nav {
  display: flex;
  gap: 25px;
}

.footer a {
  color: #aaa9c3;
  text-decoration: none;
}

.footer p {
  margin: 0;
  text-align: center;
}

.footer-icons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.footer-icons span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d6d4ef;
  font-size: 10px;
}