/* =====================================================================
   enhancements.css — visual + UX upgrades layered on top of style.css.
   Loaded AFTER style.css so its rules win where needed.
   ===================================================================== */

/* ---------- Global smoothness ---------- */
:root {
  --easing: cubic-bezier(.22,.61,.36,1);
  --brand-1: #a78bfa;
  --brand-2: #ec4899;
}
html { scroll-behavior: smooth; }
* { -webkit-tap-highlight-color: transparent; }

button, .btn, a, input, select, textarea, .card, .dashCard, .featureCard,
.statCard, .connIcon, .miniAvatar, .userBtn, .musicPlayBtn, .likeBtn,
.userDropdown, .toggleLabel, .checkLabel, .segBtn {
  transition: background-color .18s var(--easing),
              border-color   .18s var(--easing),
              color          .18s var(--easing),
              box-shadow     .22s var(--easing),
              transform      .18s var(--easing),
              opacity        .22s var(--easing);
}

/* Lighter ambient cost — keep visuals, drop GPU pressure on weak devices */
@media (max-width: 900px) {
  .floatShape.fs3, .floatShape.fs4 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .floatShape, .ambientOrb { display: none !important; }
}

/* Hint the GPU on big animated layers */
.profileCard, .musicPlayer, .connectionsBlock, #effectsLayer,
#bgFxLayer, .userDropdown, .cropperShell { will-change: transform, opacity; }

/* ---------- Connection icons: brand colors + better hover ---------- */
.connIcon {
  position: relative;
  width: 46px; height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  overflow: hidden;
}
.connIcon svg {
  width: 22px; height: 22px;
  transition: transform .25s var(--easing);
}
.connIcon::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--brand, transparent);
  opacity: 0;
  transition: opacity .22s var(--easing);
  z-index: 0;
}
.connIcon svg, .connIcon img { position: relative; z-index: 1; }
.connIcon:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 10px 26px rgba(0,0,0,.45),
              0 0 22px var(--brand-glow, rgba(167,139,250,.45));
}
.connIcon:hover::before { opacity: .85; }
.connIcon:hover svg { transform: scale(1.08); color: #fff; }

/* Per-platform brand colors — driven by data-key set in app.js */
.connIcon[data-key="discord"]    { color: #5865F2; --brand: #5865F2; --brand-glow: rgba(88,101,242,.55); }
.connIcon[data-key="spotify"]    { color: #1DB954; --brand: #1DB954; --brand-glow: rgba(29,185,84,.55); }
.connIcon[data-key="steam"]      { color: #66c0f4; --brand: #1b2838; --brand-glow: rgba(102,192,244,.55); }
.connIcon[data-key="roblox"]     { color: #ffffff; --brand: #232527; --brand-glow: rgba(255,255,255,.45); }
.connIcon[data-key="youtube"]    { color: #ff0000; --brand: #ff0000; --brand-glow: rgba(255,0,0,.55); }
.connIcon[data-key="twitch"]     { color: #9146ff; --brand: #9146ff; --brand-glow: rgba(145,70,255,.55); }
.connIcon[data-key="github"]     { color: #f5f5f5; --brand: #24292f; --brand-glow: rgba(255,255,255,.4); }
.connIcon[data-key="twitter"]    { color: #ffffff; --brand: #000000; --brand-glow: rgba(255,255,255,.4); }
.connIcon[data-key="instagram"]  { color: #e1306c;
  --brand: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  --brand-glow: rgba(225,48,108,.55); }
.connIcon[data-key="tiktok"]     { color: #ffffff; --brand: linear-gradient(135deg,#25F4EE,#000,#FE2C55); --brand-glow: rgba(254,44,85,.5); }
.connIcon[data-key="soundcloud"] { color: #ff5500; --brand: #ff5500; --brand-glow: rgba(255,85,0,.55); }
.connIcon[data-key="website"]    { color: #a78bfa; --brand: #a78bfa; --brand-glow: rgba(167,139,250,.5); }

/* Connections row spacing — let icons breathe a bit more */
.connectionsRow { gap: 12px; }

/* ---------- Checkmarks — fill the box cleanly ---------- */
.toggleLabel input[type="checkbox"],
.toggleLabel input[type="radio"],
input[type="checkbox"]:not(.nativeCheck),
input[type="radio"]:not(.nativeCheck) {
  width: 22px; height: 22px;
  border-radius: 7px;
  border: 1.5px solid rgba(255,255,255,.30);
  background: rgba(255,255,255,.06);
  position: relative;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  transition: background .18s var(--easing),
              border-color .18s var(--easing),
              box-shadow .18s var(--easing);
}
.toggleLabel input[type="radio"],
input[type="radio"]:not(.nativeCheck) { border-radius: 999px; }

.toggleLabel input[type="checkbox"]:hover,
input[type="checkbox"]:not(.nativeCheck):hover,
.toggleLabel input[type="radio"]:hover,
input[type="radio"]:not(.nativeCheck):hover {
  border-color: rgba(167,139,250,.7);
  background: rgba(167,139,250,.08);
}

.toggleLabel input[type="checkbox"]:checked,
input[type="checkbox"]:not(.nativeCheck):checked {
  background: linear-gradient(135deg,#8b5cf6,#ec4899);
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(167,139,250,.18),
              0 6px 16px rgba(139,92,246,.45);
}

/* Use an SVG mask so the checkmark scales perfectly with the box */
.toggleLabel input[type="checkbox"]:checked::after,
input[type="checkbox"]:not(.nativeCheck):checked::after {
  content: "";
  width: 16px;
  height: 16px;
  border: 0;                          /* override old rotated-border tick */
  background-color: #fff;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / contain no-repeat;
  transform: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}

.toggleLabel input[type="radio"]:checked,
input[type="radio"]:not(.nativeCheck):checked {
  background: rgba(139,92,246,.18);
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167,139,250,.22);
}
.toggleLabel input[type="radio"]:checked::after,
input[type="radio"]:not(.nativeCheck):checked::after {
  content: "";
  width: 10px; height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg,#8b5cf6,#ec4899);
  border: 0;
  box-shadow: 0 0 8px rgba(167,139,250,.6);
}

/* ---------- Profile card — wider, less tall ---------- */
.profileCard {
  width: min(1080px, 96%);
  padding: 64px 56px 36px;
  gap: 14px;
}
@media (max-width: 720px) {
  .profileCard {
    padding: 56px 22px 28px;
    gap: 12px;
  }
}

/* ---------- Username size — tighter clamp values that actually shift ---------- */
.profileName[data-size="sm"] { font-size: clamp(20px, 3vw, 28px) !important; letter-spacing:-.02em; }
.profileName[data-size="md"] { font-size: clamp(28px, 4.6vw, 42px) !important; letter-spacing:-.03em; }
.profileName[data-size="lg"] { font-size: clamp(38px, 6.5vw, 60px) !important; letter-spacing:-.035em; }
.profileName[data-size="xl"] { font-size: clamp(50px, 9vw,  84px) !important; letter-spacing:-.04em; }

/* ---------- Hide remove buttons when nothing to remove ---------- */
.removeBtn[hidden],
.removeBtn[data-empty="1"] {
  display: none !important;
}

/* ---------- Music card upgrades ---------- */
.musicPlayer {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}
.musicHead { gap: 14px; padding: 12px; }
.musicCover {
  width: 56px; height: 56px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  background-color: rgba(167,139,250,.18);
  box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08);
  transition: transform .35s var(--easing);
}
.musicCover.spinning { animation: musicSpin 6s linear infinite; }
@keyframes musicSpin { to { transform: rotate(360deg); } }

.musicPlayBtn {
  width: 42px; height: 42px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: linear-gradient(135deg,#8b5cf6,#ec4899);
  color: #fff;
  border: 0;
  box-shadow: 0 6px 16px rgba(139,92,246,.45);
}
.musicPlayBtn:hover { transform: scale(1.06); }

.musicVolumeRow input[type="range"] {
  accent-color: #a78bfa;
}

/* ---------- New: Search view ---------- */
.searchCard {
  width: min(720px, 96%);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.searchInputRow {
  display: flex; gap: 10px;
}
.searchInputRow input {
  flex: 1;
}
.searchResults {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
}
.searchResult {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.searchResult:hover {
  background: rgba(167,139,250,.08);
  border-color: rgba(167,139,250,.35);
  transform: translateY(-2px);
}
.searchResult .miniAvatar {
  width: 44px; height: 44px;
  font-size: 18px;
  background-size: cover; background-position: center;
}
.searchResult .meta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.searchResult .meta strong { font-size: 15px; }
.searchResult .meta span { font-size: 12px; color: var(--text-soft); }
.searchEmpty { color: var(--text-soft); text-align: center; font-size: 14px; padding: 20px; }

/* ---------- New: Account Settings view ---------- */
.accountCard {
  width: min(720px, 96%);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.accountSection {
  padding: 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.accountSection h3 {
  margin: 0 0 6px; font-size: 15px; color: var(--text);
}
.accountSection p.muted { margin: 0 0 10px; font-size: 12px; }
.accountRow { display: flex; gap: 10px; flex-wrap: wrap; }
.twoFaStatus {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.twoFaStatus.on { background: rgba(34,197,94,.15); color:#4ade80; }
.twoFaStatus.off { background: rgba(244,63,94,.15); color:#f87171; }

/* ---------- User dropdown — account switcher rows ---------- */
.userDropdown {
  border-radius: 14px;
  overflow: hidden;
  min-width: 240px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(15,15,20,.92);
  backdrop-filter: blur(20px);
}
.userDropdown button {
  width: 100%;
  text-align: left;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
}
.userDropdown button:hover { background: rgba(167,139,250,.10); }
.userDropdown .ddDivider {
  height: 1px;
  background: rgba(255,255,255,.06);
  margin: 4px 0;
}
.userDropdown .ddSection {
  padding: 8px 14px 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-soft);
}
.userDropdown .ddAccount {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
}
.userDropdown .ddAccount .miniAvatar { width: 32px; height: 32px; font-size: 14px; }
.userDropdown .ddAccount .ddAccountInfo { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.userDropdown .ddAccount .ddAccountInfo strong { font-size: 13px; }
.userDropdown .ddAccount .ddAccountInfo span { font-size: 11px; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.userDropdown .ddSwitchAcct {
  background: rgba(167,139,250,.08);
  border: 1px solid rgba(167,139,250,.20);
  border-radius: 10px;
  margin: 4px 10px;
  padding: 8px 10px;
  font-size: 13px;
  cursor: pointer;
}
.userDropdown .ddSwitchAcct:hover { background: rgba(167,139,250,.18); }
.userDropdown .ddDanger { color: #f87171; }
.userDropdown .ddDanger:hover { background: rgba(244,63,94,.12); }

/* ---------- Captcha box — hCaptcha sits inside this ---------- */
.captchaSlot {
  display: flex; justify-content: center;
  margin: 6px 0;
  min-height: 78px;
}

/* ---------- Edit profile: collapsible sections for easier use ---------- */
.editSectionGroup { display: flex; flex-direction: column; gap: 14px; }
.editSection {
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
  overflow: hidden;
}
.editSection > .editSectionHead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  background: rgba(255,255,255,.03);
}
.editSection > .editSectionHead h3 { margin: 0; font-size: 14px; letter-spacing: .01em; }
.editSection > .editSectionHead .chev {
  width: 20px; height: 20px;
  transition: transform .18s var(--easing);
}
.editSection.open > .editSectionHead .chev { transform: rotate(90deg); }
.editSection > .editSectionBody {
  display: none;
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.editSection.open > .editSectionBody { display: block; }

/* ---------- Smoother view transitions ---------- */
.view {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .28s var(--easing), transform .28s var(--easing);
  pointer-events: none;
  position: absolute; inset: 0;
}
.view.active {
  opacity: 1; transform: translateY(0);
  pointer-events: auto;
  position: relative;
}

/* The profile view does its own fancy entry — leave its transform alone */
#view-profile { transition: opacity .25s var(--easing); transform: none; }
#view-profile.active { transform: none; }

/* ---------- Better focus states (accessibility + polish) ---------- */
:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 2px;
  border-radius: 6px;
}
button:focus-visible, .btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(167,139,250,.32);
}