.kinetic-gradient {
  background: var(--harfika-accent-gradient);
}

.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
}

.harfika-home {
  background-color: #eef9ff;
}

.harfika-home-stack {
  gap: clamp(1rem, 2vw, 1.5rem);
}

.harfika-home-action-nav > * {
  min-height: clamp(5rem, 7vw, 5.75rem);
}

.harfika-home-action-nav > * > div {
  min-width: 0;
}

.harfika-home-insight-grid > div {
  display: flex;
}

.harfika-home-insight-grid > div > div {
  width: 100%;
  min-height: 8rem;
}

.harfika-profile-card {
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0.85rem;
}

.harfika-profile-avatar {
  flex-shrink: 0;
}

.harfika-profile-copy {
  flex: 1 1 15rem;
}

.harfika-profile-login {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
}

.harfika-profile-input {
  flex: 1 1 11rem;
  min-width: 0;
  min-height: 2.9rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(var(--harfika-primary-rgb), 0.14);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fdff 100%);
  color: var(--harfika-primary-ink);
  font-size: 0.95rem;
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 10px 20px rgba(var(--harfika-primary-rgb), 0.06);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.harfika-profile-input::placeholder {
  color: #76a6be;
  font-weight: 600;
}

.harfika-profile-input:focus {
  outline: none;
  border-color: rgba(var(--harfika-primary-rgb), 0.32);
  box-shadow:
    0 0 0 0.22rem rgba(var(--harfika-primary-rgb), 0.14),
    0 12px 24px rgba(var(--harfika-primary-rgb), 0.08);
}

.harfika-profile-submit {
  min-height: 2.9rem;
  padding: 0.75rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: var(--harfika-accent-gradient);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  box-shadow: 0 14px 24px rgba(var(--harfika-primary-rgb), 0.18);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    opacity 160ms ease;
}

.harfika-profile-submit:hover {
  box-shadow: 0 18px 28px rgba(var(--harfika-primary-rgb), 0.24);
}

.harfika-profile-submit:active {
  transform: scale(0.97);
}

.harfika-profile-submit:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 0.22rem rgba(var(--harfika-primary-rgb), 0.14),
    0 18px 28px rgba(var(--harfika-primary-rgb), 0.24);
}

.harfika-profile-badge {
  margin-left: auto;
}

.harfika-profile-level {
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .harfika-home-stack {
    gap: 0.85rem;
  }

  .harfika-home-stack > section:first-child {
    padding: 1.05rem !important;
    border-radius: 1.15rem !important;
  }

  .harfika-profile-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "avatar badge"
      "copy copy";
    align-items: flex-start;
    column-gap: 0.85rem;
    row-gap: 0.65rem;
  }

  .harfika-profile-avatar {
    grid-area: avatar;
    padding: 0.7rem !important;
  }

  .harfika-profile-avatar .material-symbols-outlined {
    font-size: 1.3rem !important;
  }

  .harfika-profile-copy {
    grid-area: copy;
    width: 100%;
  }

  .harfika-profile-badge {
    grid-area: badge;
    width: auto;
    justify-self: end;
    align-self: center;
    margin-left: 0;
    margin-top: 0;
  }

  .harfika-profile-level {
    padding: 0.4rem 0.7rem !important;
    font-size: 0.64rem !important;
    letter-spacing: 0.04em;
  }

  #displayNickname {
    font-size: 1.28rem !important;
  }

  #profileMeta {
    font-size: 0.82rem !important;
  }

  .harfika-profile-login {
    gap: 0.65rem;
  }

  .harfika-profile-input,
  .harfika-profile-submit {
    width: 100%;
    min-height: 2.7rem;
  }

  .harfika-home-action-nav > * {
    padding-left: 1rem;
    padding-right: 1rem;
    min-height: 4.35rem;
    border-radius: 1.1rem !important;
  }

  .harfika-home-action-nav > * > div {
    gap: 0.6rem;
  }

  .harfika-home-action-nav > * .material-symbols-outlined {
    font-size: 1.3rem !important;
  }

  .harfika-home-action-nav > * > div > span:last-child {
    font-size: 0.84rem;
    line-height: 1.15;
  }

  .harfika-home-room-card {
    padding: 1.15rem !important;
    border-radius: 1.15rem !important;
  }

  #joinRoomCode {
    padding: 0.95rem 1rem !important;
    font-size: 1.2rem !important;
    letter-spacing: 0.15em !important;
  }

  #joinRoomCode + button {
    padding: 0.95rem 1rem !important;
    font-size: 0.88rem !important;
    letter-spacing: 0.06em !important;
  }

  .harfika-home-insight-grid {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.75rem;
  }

  .harfika-home-insight-grid > div > div {
    min-height: 6.35rem;
    padding: 0.9rem !important;
  }

  .harfika-home-insight-grid .material-symbols-outlined {
    font-size: 1.1rem !important;
  }

  .harfika-home-room-card h3 {
    font-size: 0.98rem !important;
  }

  .harfika-home-room-card .font-label {
    font-size: 0.62rem !important;
    letter-spacing: 0.16em !important;
  }

  #homeInsightPrimaryLabel,
  #homeInsightSecondaryLabel {
    font-size: 0.56rem !important;
    letter-spacing: 0.14em !important;
  }

  #homeInsightPrimaryValue,
  #homeInsightSecondaryValue {
    font-size: 0.84rem !important;
  }
}

@media (max-width: 399.98px) {
  .harfika-home-stack > section:first-child {
    padding: 0.95rem !important;
  }

  .harfika-home-action-nav > * {
    min-height: 4rem;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }

  #joinRoomCode {
    font-size: 1.08rem !important;
    letter-spacing: 0.12em !important;
  }

  .harfika-home-action-nav > * > div > span:last-child {
    font-size: 0.78rem;
  }

  .harfika-home-room-card {
    padding: 1rem !important;
  }
}