/* ========================================
   REGISTER — PREMIUM OVERHAUL
   Teamsurge High-End UI
======================================== */

/* subtle text selection */
::selection {
  background: rgba(0,212,255,0.25);
  color: white;
}

/* ========================================
   PAGE WRAPPER
======================================== */

.page {

  position: relative;
  z-index: 2;

  max-width: 1100px;

  margin: 0 auto;

  padding:
    54px 18px 90px;
}

/* ========================================
   TOPBAR
======================================== */

.topbar {

  text-align: center;

  margin-bottom: 42px;
}

/* ========================================
   TITLE
======================================== */

.title {

  margin: 0;

  font-size:
    clamp(44px, 7vw, 68px);

  line-height: 0.95;

  letter-spacing: -2px;

  font-weight: 800;

  background:
    linear-gradient(
      90deg,
      #ffffff,
      #dffbff 35%,
      #8cecff 70%,
      #ffffff
    );

  background-size: 200% auto;

  background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
    0 0 35px rgba(255,255,255,0.08);

  animation: titleGlow 7s linear infinite;
}

@keyframes titleGlow {

  0% {
    background-position: 0% center;
  }

  100% {
    background-position: 200% center;
  }
}

/* ========================================
   SUBTITLE
======================================== */

.subtitle {

  margin-top: 14px;

  font-size: 15px;

  line-height: 1.6;

  opacity: 0.74;

  letter-spacing: 0.3px;
}

/* ========================================
   MAIN CARD
======================================== */

.card {

  position: relative;

  overflow: hidden;

  max-width: 720px;

  margin: 22px auto;

  padding: 26px;

  border-radius: 28px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.075),
      rgba(255,255,255,0.035)
    );

  border:
    1px solid rgba(255,255,255,0.08);

  backdrop-filter: blur(22px);

  box-shadow:
    0 14px 50px rgba(0,0,0,0.45);

  transition:
    transform 0.28s ease,
    border-color 0.28s ease,
    background 0.28s ease,
    box-shadow 0.28s ease;
}

/* ambient glow */
.card::before {

  content: "";

  position: absolute;

  inset: -45%;

  background:
    radial-gradient(
      circle,
      rgba(0,212,255,0.10),
      transparent 65%
    );

  opacity: 0;

  transition: 0.45s ease;

  pointer-events: none;
}

.card:hover {

  transform:
    translateY(-7px);

  border-color:
    rgba(0,212,255,0.24);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.10),
      rgba(255,255,255,0.045)
    );

  box-shadow:
    0 0 34px rgba(0,212,255,0.14);
}

.card:hover::before {
  opacity: 1;
}

/* ========================================
   SECTION TITLE
======================================== */

.section-title {

  display: flex;
  align-items: center;
  justify-content: space-between;

  flex-wrap: wrap;

  gap: 14px;

  margin-bottom: 18px;

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 2px;

  opacity: 0.72;
}

/* ========================================
   INPUTS
======================================== */

input {

  width: 100%;

  box-sizing: border-box;

  margin: 8px 0;

  padding: 15px 16px;

  border-radius: 16px;

  background:
    rgba(0,0,0,0.34);

  border:
    1px solid rgba(255,255,255,0.10);

  color: white;

  outline: none;

  font-size: 14px;

  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

input::placeholder {
  color: rgba(255,255,255,0.38);
}

input:hover {

  border-color:
    rgba(255,255,255,0.16);

  background:
    rgba(0,0,0,0.42);
}

input:focus {

  border-color:
    rgba(0,212,255,0.6);

  background:
    rgba(0,0,0,0.52);

  transform:
    translateY(-1px);

  box-shadow:
    0 0 0 4px rgba(0,212,255,0.08),
    0 0 24px rgba(0,212,255,0.10);
}

input.error {

  border-color:
    rgba(255,70,70,0.9);

  box-shadow:
    0 0 0 4px rgba(255,70,70,0.08);
}

/* ========================================
   PLAYER BOX
======================================== */

.player-box {

  position: relative;

  overflow: hidden;

  margin-top: 16px;

  padding: 18px;

  border-radius: 22px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.045),
      rgba(255,255,255,0.025)
    );

  border:
    1px solid rgba(255,255,255,0.08);

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.player-box::before {

  content: "";

  position: absolute;

  inset: -50%;

  background:
    radial-gradient(
      circle,
      rgba(0,212,255,0.08),
      transparent 65%
    );

  opacity: 0;

  transition: 0.35s ease;

  pointer-events: none;
}

.player-box:hover {

  transform:
    translateY(-3px);

  border-color:
    rgba(0,212,255,0.22);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.06),
      rgba(255,255,255,0.03)
    );

  box-shadow:
    0 0 22px rgba(0,212,255,0.08);
}

.player-box:hover::before {
  opacity: 1;
}

/* ========================================
   PLAYER HEADER
======================================== */

.player-header {

  margin-bottom: 10px;

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 0.8px;

  opacity: 0.78;
}

/* ========================================
   PLAYER RESULT
======================================== */

.player-name {

  margin-top: 10px;

  min-height: 18px;

  font-size: 12px;

  font-weight: 500;

  letter-spacing: 0.2px;

  opacity: 0.9;
}

.player-name.ok {

  color: #00ffb0;

  text-shadow:
    0 0 12px rgba(0,255,176,0.22);
}

.player-name.error {

  color: #ff7070;

  text-shadow:
    0 0 12px rgba(255,80,80,0.18);
}

/* ========================================
   ID INPUT WRAP
======================================== */

.id-input {

  display: flex;
  align-items: center;

  height: 54px;

  box-sizing: border-box;

  padding: 0 15px;

  border-radius: 16px;

  background:
    rgba(0,0,0,0.42);

  border:
    1px solid rgba(255,255,255,0.10);

  margin: 10px 0;

  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.id-input:hover {

  border-color:
    rgba(255,255,255,0.18);

  background:
    rgba(0,0,0,0.48);
}

.id-input:focus-within {

  border-color:
    rgba(0,212,255,0.6);

  transform:
    translateY(-1px);

  box-shadow:
    0 0 0 4px rgba(0,212,255,0.08),
    0 0 24px rgba(0,212,255,0.10);
}

.id-input.error {

  border-color:
    rgba(255,70,70,0.9);

  box-shadow:
    0 0 0 4px rgba(255,70,70,0.08);
}

.id-input input {

  flex: 1;

  height: 100%;

  margin: 0;
  padding: 0;

  border: none !important;

  background: transparent;

  box-shadow: none !important;

  outline: none;
}

.hash {

  margin-right: 8px;

  opacity: 0.42;

  font-weight: 700;

  font-size: 15px;
}

/* ========================================
   BUTTONS
======================================== */

button {

  position: relative;

  overflow: hidden;

  width: 100%;

  margin-top: 24px;

  padding: 15px;

  border-radius: 16px;

  background:
    rgba(255,255,255,0.05);

  border:
    1px solid rgba(255,255,255,0.10);

  color: white;

  cursor: pointer;

  font-size: 14px;

  font-weight: 600;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

button:hover {

  transform:
    translateY(-3px);

  background:
    rgba(0,212,255,0.12);

  border-color:
    rgba(0,212,255,0.25);

  box-shadow:
    0 0 22px rgba(0,212,255,0.12);
}

/* ========================================
   SUBMIT BUTTON
======================================== */

.submit-btn {

  background:
    linear-gradient(
      135deg,
      #00d4ff,
      #0077ff
    );

  border: none;

  font-weight: 700;

  letter-spacing: 0.3px;

  box-shadow:
    0 10px 28px rgba(0,120,255,0.22);
}

.submit-btn:hover {

  box-shadow:
    0 0 30px rgba(0,212,255,0.28);

  filter: brightness(1.04);
}

/* ========================================
   ERROR BOX
======================================== */

.error-box {

  max-width: 720px;

  margin: 16px auto;

  padding: 15px 16px;

  border-radius: 18px;

  background:
    linear-gradient(
      180deg,
      rgba(255,70,70,0.14),
      rgba(255,70,70,0.08)
    );

  border:
    1px solid rgba(255,70,70,0.30);

  backdrop-filter: blur(16px);

  color: #ff8f8f;

  font-size: 14px;

  font-weight: 600;

  text-align: center;

  box-shadow:
    0 0 24px rgba(255,70,70,0.08);
}

/* ========================================
   MODAL
======================================== */

.modal {

  position: fixed;

  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;

  z-index: 999999;

  background:
    rgba(0,0,0,0.72);

  backdrop-filter: blur(14px);
}

.modal.hidden {
  display: none;
}

/* ========================================
   MODAL BOX
======================================== */

.modal-box {

  position: relative;

  overflow: hidden;

  width: 92%;
  max-width: 560px;

  padding: 26px;

  border-radius: 28px;

  background:
    linear-gradient(
      180deg,
      rgba(20,20,30,0.96),
      rgba(12,12,18,0.94)
    );

  border:
    1px solid rgba(255,255,255,0.12);

  backdrop-filter: blur(24px);

  box-shadow:
    0 20px 80px rgba(0,0,0,0.65),
    0 0 40px rgba(0,212,255,0.08);
}

.modal-box::before {

  content: "";

  position: absolute;

  inset: -45%;

  background:
    radial-gradient(
      circle,
      rgba(0,212,255,0.08),
      transparent 65%
    );

  pointer-events: none;
}

/* ========================================
   MODAL TITLE
======================================== */

.modal-box h2 {

  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  flex-wrap: wrap;

  gap: 14px;

  margin-top: 0;

  margin-bottom: 18px;

  font-size: 24px;

  letter-spacing: -0.5px;
}

/* ========================================
   MODAL ACTIONS
======================================== */

.modal-actions {

  display: flex;

  gap: 12px;

  margin-top: 22px;
}

.modal-actions .btn {

  flex: 1;

  margin-top: 0;

  padding: 13px;

  border-radius: 14px;
}

.modal-actions .btn.confirm {

  background:
    linear-gradient(
      135deg,
      #00d4ff,
      #0077ff
    );

  border: none;
}

.modal-actions .btn.cancel {

  background:
    rgba(255,255,255,0.06);
}

/* ========================================
   TERMS
======================================== */

.terms-card {

  margin-top: 24px;

  border-radius: 24px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.045),
      rgba(255,255,255,0.025)
    );

  border:
    1px solid rgba(255,255,255,0.08);

  padding: 22px;
}

.terms-card h2 {

  margin-top: 0;

  font-size: 22px;

  letter-spacing: -0.4px;
}

.terms-card p,
.terms-card li {

  font-size: 13px;

  line-height: 1.75;

  opacity: 0.76;
}

/* ========================================
   INLINE INFO TEXT
======================================== */

.info-text-inline,
.info-text-inline-modal {

  position: relative;

  overflow: hidden;

  display: inline-flex;
  align-items: center;
  justify-content: flex-end;

  margin-left: auto;

  padding: 10px 14px;

  border-radius: 14px;

  background:
    linear-gradient(
      180deg,
      rgba(255,170,0,0.12),
      rgba(255,120,0,0.06)
    );

  border:
    1px solid rgba(255,170,0,0.18);

  backdrop-filter: blur(14px);

  color:
    rgba(255,180,120,0.98);

  font-size: 11px;

  font-weight: 600;

  line-height: 1.45;

  letter-spacing: 0.2px;

  max-width: 420px;

  box-shadow:
    0 0 20px rgba(255,140,0,0.06);
}

.info-text-inline::before,
.info-text-inline-modal::before {

  content: "";

  position: absolute;

  inset: -40%;

  background:
    radial-gradient(
      circle,
      rgba(255,180,0,0.14),
      transparent 65%
    );

  pointer-events: none;
}

/* ========================================
   ICON FIX
======================================== */

.trophy-icon {

  width: 12px;
  height: 12px;

  object-fit: contain;

  position: relative;

  top: 1px;
}

/* ========================================
   HIDDEN
======================================== */

.hidden {
  display: none !important;
}

/* ========================================
   TABLET
======================================== */

@media (max-width: 900px) {

  .title {

    font-size:
      clamp(40px, 9vw, 56px);
  }

  .card {

    padding: 22px;
  }
}

/* ========================================
   MOBILE
======================================== */

@media (max-width: 768px) {

  .page {

    padding:
      34px 14px 70px;
  }

  .topbar {

    margin-bottom: 30px;
  }

  .title {

    letter-spacing: -1px;

    line-height: 1;
  }

  .subtitle {

    font-size: 14px;
  }

  .card {

    border-radius: 24px;

    padding: 20px;
  }

  .modal-box {

    padding: 22px;

    border-radius: 24px;
  }

  .section-title,
  .modal-box h2 {

    flex-direction: column;

    align-items: flex-start;
  }

  .info-text-inline,
  .info-text-inline-modal {

    width: 100%;

    max-width: 100%;

    margin-left: 0;

    justify-content: flex-start;
  }

  .modal-actions {

    flex-direction: column;
  }
}

/* ========================================
   SMALL PHONES
======================================== */

@media (max-width: 420px) {

  .title {
    font-size: 38px;
  }

  .card,
  .modal-box {
    padding: 18px;
  }

  input {
    padding: 14px;
  }

  .player-box {
    padding: 16px;
  }

  .info-text-inline,
  .info-text-inline-modal {

    font-size: 10px;
  }
}