/* ==========================================================================
   NIKHIL.OS STYLE SYSTEM (v5.0 - ONE-SCREEN CENTRED HUD CARD)
   ========================================================================== */

:root {
  --bg-primary: #020617;
  --bg-glass: rgba(10, 15, 30, 0.65);
  
  /* Cyber HUD Colors */
  --neon-cyan: #0fbbe6;
  --neon-cyan-glow: rgba(15, 187, 230, 0.35);
  --neon-emerald: #10b981;
  --neon-emerald-glow: rgba(16, 185, 129, 0.35);
  --neon-gold: #f59e0b;
  --neon-gold-glow: rgba(245, 158, 11, 0.35);
  --neon-pink: #e1306c;
  --neon-pink-glow: rgba(225, 48, 108, 0.35);
  --neon-blue: #0077b5;
  --neon-blue-glow: rgba(0, 119, 181, 0.35);
  
  /* UI Borders/Text */
  --border-color: rgba(255, 255, 255, 0.05);
  --border-hover: rgba(15, 187, 230, 0.35);
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #64748b;
  
  /* Typography */
  --font-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  
  --transition-speed: 0.3s;
}

/* Base resets & Lock Scroll */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
}

html, body {
  width: 100%;
  height: 100vh;
  overflow: hidden; /* Force strict one-screen layout */
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: 1.4;
}

/* Space Background Container (Slightly oversized for parallax translation) */
.space-container {
  position: fixed;
  top: -5%;
  left: -5%;
  width: 110%;
  height: 110%;
  background: radial-gradient(ellipse at bottom, #101622 0%, #030406 100%);
  overflow: hidden;
  z-index: -2;
  pointer-events: none;
  transition: transform 0.15s ease-out; /* Smooth hover reaction */
}



/* Linear Grid Overlay (Uiverse Style by adamgiebl) */
.grid-background {
  position: absolute;
  inset: 0;
  --color: rgba(114, 114, 114, 0.08); /* Subtle grey grid lines */
  background-image: 
    linear-gradient(0deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%, transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%, transparent),
    linear-gradient(90deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%, transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%, transparent);
  background-size: 55px 55px;
  z-index: 1;
}

/* Parallax Star Layers (Uiverse Style by jaykdoe) */
.parallax-star {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: transform 0.2s ease-out; /* Mouse tracking lag */
}

#stars {
  width: 1.2px;
  height: 1.2px;
  background: transparent;
  box-shadow:
    501px 811px #fff, 1450px 1324px #fff, 1093px 1780px #fff, 1469px 678px #fff,
    904px 741px #fff, 1160px 781px #fff, 1841px 1962px #fff, 1630px 1667px #fff,
    1788px 676px #fff, 367px 1734px #fff, 1343px 156px #fff, 1283px 1142px #fff,
    1062px 378px #fff, 1395px 467px #fff, 1017px 1891px #fff, 137px 1114px #fff,
    1767px 1403px #fff, 1543px 11px #fff, 1078px 181px #fff, 1189px 1574px #fff,
    1697px 1551px #fff, 439px 472px #fff, 1491px 677px #fff, 1364px 599px #fff,
    34px 382px #fff, 1221px 1584px #fff, 1266px 1499px #fff, 169px 1907px #fff,
    1219px 1125px #fff, 659px 18px #fff, 1731px 1959px #fff, 332px 1216px #fff,
    1913px 788px #fff, 80px 712px #fff, 326px 1605px #fff, 574px 1502px #fff,
    473px 1653px #fff, 404px 975px #fff, 322px 1797px #fff, 425px 1321px #fff,
    1121px 1797px #fff, 731px 647px #fff, 891px 1584px #fff, 1523px 109px #fff,
    1379px 244px #fff, 865px 1064px #fff, 493px 956px #fff, 624px 1380px #fff,
    440px 619px #fff, 1630px 767px #fff, 955px 1196px #fff, 62px 729px #fff,
    126px 946px #fff, 1256px 896px #fff, 1444px 256px #fff, 661px 1628px #fff,
    1078px 1716px #fff, 300px 737px #fff, 1734px 413px #fff, 1296px 129px #fff,
    1771px 1678px #fff, 977px 1764px #fff, 1879px 549px #fff, 665px 1531px #fff,
    89px 701px #fff, 1084px 1183px #fff, 1597px 1576px #fff, 1354px 1774px #fff,
    554px 1471px #fff, 1469px 287px #fff, 887px 106px #fff, 1962px 766px #fff,
    638px 805px #fff, 1651px 741px #fff, 1517px 1826px #fff, 24px 1152px #fff,
    507px 558px #fff, 1262px 652px #fff, 246px 1048px #fff, 1077px 421px #fff,
    1866px 1847px #fff, 1986px 1561px #fff, 704px 632px #fff, 1991px 1875px #fff,
    1227px 395px #fff, 45px 1116px #fff, 247px 786px #fff, 890px 607px #fff,
    787px 1235px #fff, 557px 524px #fff, 1582px 1285px #fff, 1725px 1366px #fff,
    952px 747px #fff, 251px 458px #fff, 1500px 1250px #fff, 1999px 1734px #fff,
    1336px 1955px #fff, 1705px 1464px #fff, 728px 697px #fff, 594px 510px #fff,
    1345px 1990px #fff, 1919px 1803px #fff, 1117px 966px #fff, 1629px 97px #fff,
    1046px 1196px #fff, 810px 1092px #fff, 722px 976px #fff, 406px 18px #fff,
    1665px 1860px #fff, 1758px 1628px #fff, 1183px 463px #fff, 564px 239px #fff,
    13px 1767px #fff, 1482px 1472px #fff, 1700px 347px #fff, 1362px 244px #fff,
    1141px 1708px #fff, 22px 885px #fff, 374px 1309px #fff, 1034px 1037px #fff,
    1725px 1086px #fff, 1343px 1921px #fff, 596px 903px #fff, 1061px 478px #fff,
    18px 1409px #fff, 729px 1364px #fff, 264px 911px #fff, 677px 1442px #fff,
    123px 33px #fff, 1303px 646px #fff, 1945px 792px #fff, 1305px 938px #fff,
    918px 1536px #fff, 620px 948px #fff, 183px 646px #fff, 695px 687px #fff,
    881px 272px #fff, 1521px 1212px #fff, 1423px 1022px #fff, 1545px 1271px #fff,
    1393px 348px #fff, 685px 1910px #fff, 1446px 856px #fff, 73px 1201px #fff,
    736px 999px #fff, 673px 796px #fff, 469px 850px #fff, 1912px 142px #fff,
    1278px 664px #fff, 184px 1990px #fff, 1173px 1312px #fff, 782px 1879px #fff,
    323px 1035px #fff, 611px 908px #fff, 565px 1449px #fff, 748px 1713px #fff,
    1047px 490px #fff, 1040px 1872px #fff, 1818px 1659px #fff, 1806px 1327px #fff;
  animation: animStar 55s linear infinite;
  z-index: 2;
}

#stars:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 1.2px;
  height: 1.2px;
  background: transparent;
  box-shadow: inherit;
}

#stars2 {
  width: 2.2px;
  height: 2.2px;
  background: transparent;
  box-shadow:
    1925px 1320px #fff, 693px 1778px #fff, 1016px 711px #fff, 1171px 563px #fff,
    661px 1919px #fff, 1610px 44px #fff, 1275px 140px #fff, 1208px 1802px #fff,
    1473px 1587px #fff, 11px 1117px #fff, 853px 1757px #fff, 1149px 937px #fff,
    1353px 428px #fff, 270px 279px #fff, 258px 1404px #fff, 417px 1188px #fff,
    286px 561px #fff, 393px 1765px #fff, 147px 881px #fff, 666px 1097px #fff,
    1425px 1278px #fff, 806px 156px #fff, 1252px 561px #fff, 218px 52px #fff,
    1371px 1980px #fff, 171px 745px #fff, 1424px 89px #fff, 137px 244px #fff,
    939px 1922px #fff, 137px 1080px #fff, 1757px 50px #fff, 904px 536px #fff,
    1938px 1001px #fff, 1172px 440px #fff, 72px 1475px #fff, 102px 121px #fff,
    804px 1671px #fff, 1314px 270px #fff, 440px 1341px #fff, 1216px 511px #fff,
    1061px 1523px #fff, 97px 274px #fff, 704px 1318px #fff, 52px 1872px #fff,
    1962px 296px #fff, 111px 289px #fff, 1157px 1236px #fff, 1347px 1451px #fff,
    820px 286px #fff, 1389px 1169px #fff, 644px 841px #fff, 1286px 522px #fff,
    955px 659px #fff, 428px 1805px #fff, 237px 557px #fff, 1689px 1058px #fff,
    636px 1882px #fff, 1349px 1664px #fff, 1548px 432px #fff, 1841px 504px #fff,
    302px 252px #fff, 827px 1765px #fff, 620px 123px #fff, 207px 748px #fff,
    1454px 1234px #fff, 1967px 1790px #fff, 542px 33px #fff, 742px 1214px #fff,
    255px 1402px #fff, 74px 1772px #fff, 699px 475px #fff, 980px 1253px #fff,
    534px 1676px #fff, 909px 202px #fff, 1498px 1251px #fff, 1796px 120px #fff,
    1409px 1263px #fff, 1627px 995px #fff, 969px 710px #fff, 1674px 676px #fff;
  animation: animStar 110s linear infinite;
  z-index: 3;
}

#stars2:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 2.2px;
  height: 2.2px;
  background: transparent;
  box-shadow: inherit;
}

#stars3 {
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow:
    200px 981px #fff, 1731px 521px #fff, 132px 1039px #fff, 1888px 1547px #fff,
    899px 1226px #fff, 1887px 580px #fff, 1548px 1092px #fff, 1626px 689px #fff,
    254px 1072px #fff, 1684px 1211px #fff, 672px 1267px #fff, 939px 668px #fff,
    1969px 645px #fff, 1126px 983px #fff, 457px 568px #fff, 476px 876px #fff,
    829px 1896px #fff, 1364px 1846px #fff, 1507px 1120px #fff, 936px 1948px #fff,
    1833px 832px #fff, 1424px 285px #fff, 1377px 1596px #fff, 432px 153px #fff,
    1348px 1410px #fff, 1529px 954px #fff, 1102px 387px #fff, 264px 297px #fff,
    811px 977px #fff, 1931px 673px #fff, 1734px 978px #fff, 1772px 1567px #fff,
    1197px 1400px #fff, 764px 282px #fff, 1103px 822px #fff, 872px 1803px #fff,
    1057px 1763px #fff, 52px 1299px #fff, 1312px 1236px #fff, 235px 1082px #fff,
    299px 1086px #fff, 1017px 1602px #fff, 1950px 626px #fff, 1306px 132px #fff,
    1358px 1618px #fff, 1873px 1718px #fff, 1447px 940px #fff, 1888px 1195px #fff,
    1704px 1765px #fff, 872px 1357px #fff, 1555px 1120px #fff, 250px 1415px #fff,
    450px 415px #fff, 492px 901px #fff, 170px 1641px #fff, 56px 1129px #fff;
  animation: animStar 160s linear infinite;
  z-index: 4;
}

#stars3:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: inherit;
}

#bg-canvas {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

#scanline-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    rgba(0, 0, 0, 0.15) 50%
  );
  background-size: 100% 4px;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
}

@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}

/* Base Body settings (Lock Scroll) */
body {
  background-color: transparent;
}



/* Centering main wrapper */
.dashboard-wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  z-index: 10;
  position: relative;
}

/* Outer HUD Frame (Big screen space layout decoration) */
/* Outer HUD Frame (Big screen space layout decoration) */
/* Outer HUD Frame (Big screen space layout decoration) */
.hud-container {
  position: relative;
  width: 100%;
  max-width: 920px; /* Framing width for double column on laptops */
  padding: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.4s ease;
}

.hud-bracket {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--neon-cyan);
  pointer-events: none;
  opacity: 0.45;
  transition: all 0.4s ease;
}

.hud-bracket.top-left {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
}

.hud-bracket.top-right {
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
}

.hud-bracket.bottom-left {
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
}

.hud-bracket.bottom-right {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
}

/* Hover bracket highlights */
.hud-container:hover .hud-bracket {
  opacity: 0.95;
  border-color: var(--neon-emerald);
  filter: drop-shadow(0 0 4px var(--neon-emerald-glow));
}

.hud-label {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 7.5px;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  opacity: 0.45;
  pointer-events: none;
  transition: all 0.4s ease;
}

.hud-container:hover .hud-label {
  color: var(--text-secondary);
  opacity: 0.8;
}

.top-left-label { top: -14px; left: 10px; }
.top-right-label { top: -14px; right: 10px; }
.bottom-left-label { bottom: -14px; left: 10px; }
.bottom-right-label { bottom: -14px; right: 10px; }

/* Centred HUD Card (Borderless and transparent) */
.hud-card {
  width: 90%;
  max-width: 900px; /* Spacious layout cap on laptops */
  max-height: 85vh; /* Capped at 85% of screen height to auto-adjust */
  border: 1.5px solid rgba(15, 187, 230, 0.25); /* Glowing outline border */
  border-radius: 24px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45),
              0 0 25px rgba(15, 187, 230, 0.05);
  padding: clamp(16px, 4vh, 40px) clamp(16px, 3.5vw, 44px);
  display: flex;
  flex-direction: row; /* Horizontal profile & links deck side-by-side */
  gap: clamp(16px, 3.5vh, 36px);
  align-items: center;
  overflow: hidden; /* Lock contents inside boundaries */
  transition: all var(--transition-speed) ease;
}

.hud-card:hover {
  border-color: rgba(15, 187, 230, 0.45);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55),
              0 0 35px rgba(15, 187, 230, 0.15);
}

/* Card Column Subdivisions */
.profile-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-right: clamp(16px, 2.5vw, 32px);
  border-right: 1px solid rgba(255, 255, 255, 0.05); /* Subtle vertical divider */
  max-height: 100%;
  overflow: hidden;
}

.links-section {
  flex: 1.25;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vh, 12px);
  padding-left: clamp(8px, 1.2vw, 12px);
  max-height: 100%;
  overflow: hidden;
}

/* Profile details */
.profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 4px;
}

.avatar-hud-wrapper {
  position: relative;
  width: clamp(90px, 16vh, 165px); /* Auto adjust based on screen height */
  height: clamp(90px, 16vh, 165px);
  margin-bottom: clamp(6px, 1.5vh, 12px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0; /* Never squish avatar aspect ratio */
}

.avatar-ring-outer {
  position: absolute;
  width: 94%;
  height: 94%;
  border: 1.5px solid var(--neon-cyan);
  border-radius: 12px; /* Professional square shape */
  opacity: 0.8;
  animation: pulseSquare 3s ease-in-out infinite;
  z-index: 1;
}

.avatar-ring-inner {
  position: absolute;
  width: 88%;
  height: 88%;
  border: 1px dashed var(--neon-emerald);
  border-radius: 10px;
  opacity: 0.55;
  animation: rotateSquare 24s linear infinite;
  z-index: 1;
}

.avatar-container {
  width: 82%;
  height: 82%;
  border-radius: 8px; /* Square shape matching frame */
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  border: 1.5px solid rgba(255, 255, 255, 0.05);
}

.profile-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter var(--transition-speed) ease, transform 0.5s ease;
  filter: grayscale(0.18) brightness(0.9);
}

.hud-card:hover .profile-avatar {
  filter: grayscale(0) brightness(1.05);
  transform: scale(1.04);
}

@keyframes rotateSquare {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulseSquare {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px var(--neon-cyan-glow)); }
  50% { transform: scale(1.03); filter: drop-shadow(0 0 6px var(--neon-cyan)); }
}

.status-badge {
  position: absolute;
  bottom: 0px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 20px;
  padding: 2px 7px;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--neon-emerald);
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 5;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.1);
}

.pulse-dot {
  width: 4px;
  height: 4px;
  background-color: var(--neon-emerald);
  border-radius: 50%;
  box-shadow: 0 0 5px var(--neon-emerald);
  animation: pulse 1.6s infinite;
}

.profile-name {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.profile-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--neon-cyan);
  text-shadow: 0 0 6px var(--neon-cyan-glow);
  margin-top: 2px;
}

.blinking-caret {
  animation: blink 1s step-end infinite;
}

.profile-bio {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-top: 10px;
}

.profile-cta {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--neon-cyan);
  text-transform: uppercase;
  text-align: center;
  margin: 2px 0 6px 0;
  text-shadow: 0 0 4px var(--neon-cyan-glow);
}

/* Divider node */
.divider-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.05) 50%, 
    rgba(255, 255, 255, 0) 100%
  );
  margin: 4px 0;
  position: relative;
}

.glow-node {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 4px;
  background-color: var(--neon-cyan);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--neon-cyan);
}

/* Social links list - tightly compact */
.links-deck {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.link-card {
  position: relative;
  display: flex;
  align-items: center;
  text-decoration: none;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px 14px;
  gap: 14px;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
              border-color 0.4s ease,
              box-shadow 0.4s ease;
}

.glow-edge {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: inherit;
  border: 1px solid transparent;
  transition: all 0.4s ease;
  z-index: 5;
}

.link-card:hover .glow-edge {
  border-color: var(--accent-color);
  box-shadow: inset 0 0 6px var(--accent-glow);
}

.link-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0) 45%, 
    rgba(255, 255, 255, 0.01) 50%, 
    rgba(255, 255, 255, 0) 55%, 
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(45deg);
  transition: all 0.6s ease;
  pointer-events: none;
}

.link-card:hover::before {
  left: 100%;
  top: 100%;
}

.link-card:hover {
  transform: translateY(-1.5px) scale(1.005);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5), 
              0 0 12px var(--accent-glow);
}

.link-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.03);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-secondary);
  transition: all 0.4s ease;
  flex-shrink: 0;
}

.link-icon i, .link-icon svg {
  width: 15px;
  height: 15px;
  font-size: 15px;
  transition: transform 0.4s ease;
}

.link-card:hover .link-icon {
  border-color: var(--accent-color);
  color: var(--accent-color);
  background: rgba(255, 255, 255, 0.02);
}

.link-card:hover .link-icon i, 
.link-card:hover .link-icon svg {
  transform: scale(1.05);
}

.link-content {
  flex-grow: 1;
}

.link-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  transition: color 0.4s ease;
}

.link-card:hover .link-name {
  color: var(--accent-color);
}

.link-arrow {
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-muted);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  flex-shrink: 0;
}

.link-arrow i, .link-arrow svg {
  width: 14px;
  height: 14px;
}

.link-card:hover .link-arrow {
  color: var(--accent-color);
  transform: translate(2px, -2px);
  filter: drop-shadow(0 0 3px var(--accent-glow));
}

/* Card footer details */
.hud-card-footer {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  display: flex;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--text-muted);
  text-align: center;
  letter-spacing: 0.05em;
}

/* Standard animations */
@keyframes rotateClockwise {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes rotateCounterClockwise {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes glitch {
  0% {
    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
                 -0.025em -0.05em 0 rgba(0, 255, 0, 0.75),
                 0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
  }
  14% {
    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
                 -0.025em -0.05em 0 rgba(0, 255, 0, 0.75),
                 0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
  }
  15% {
    text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
                 0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
                 -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  49% {
    text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
                 0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
                 -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  50% {
    text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
                 0.05em 0 0 rgba(0, 255, 0, 0.75),
                 0 -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  99% {
    text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
                 0.05em 0 0 rgba(0, 255, 0, 0.75),
                 0 -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  100% {
    text-shadow: -0.025em 0 0 rgba(255, 0, 0, 0.75),
                 -0.025em -0.025em 0 rgba(0, 255, 0, 0.75),
                 -0.025em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
}

/* ==========================================================================
   MOBILE & SCALING BREAKPOINTS
   ========================================================================== */
@media (max-width: 720px) {
  .hud-bracket, .hud-label {
    display: none !important;
  }
  .hud-container {
    padding: 0;
    width: 90%;
    max-width: 420px;
  }
  .hud-card {
    flex-direction: column; /* Collapses side-by-side layout into vertical column */
    gap: clamp(12px, 2vh, 18px);
    padding: clamp(16px, 3vh, 24px) clamp(12px, 2.5vw, 20px);
    width: 100%;
    max-width: 420px;
    max-height: 90vh; /* Capped relative to mobile screen heights */
  }
  .profile-section {
    padding-right: 0;
    border-right: none;
    width: 100%;
  }
  .links-section {
    width: 100%;
    gap: clamp(6px, 1.2vh, 8px);
    padding-left: 0;
  }
  .avatar-hud-wrapper {
    width: clamp(90px, 15vh, 125px);
    height: clamp(90px, 15vh, 125px);
  }
  .avatar-ring-outer {
    border-radius: 50% !important;
  }
  .avatar-ring-inner {
    border-radius: 50% !important;
  }
  .avatar-container {
    border-radius: 50% !important;
  }
}

@media (max-width: 440px) {
  .dashboard-wrapper {
    padding: 10px;
  }
  
  .hud-card {
    padding: clamp(14px, 2.5vh, 20px) clamp(10px, 2vw, 16px);
    border-radius: 20px;
  }
  
  .avatar-hud-wrapper {
    width: clamp(80px, 13vh, 115px);
    height: clamp(80px, 13vh, 115px);
    margin-bottom: 8px;
  }
  
  .profile-name {
    font-size: 19px;
  }
  
  .profile-title {
    font-size: 11px;
  }
  
  .link-card {
    padding: 9px 12px;
    gap: 12px;
    border-radius: 10px;
  }
  
  .link-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
  }
  
  .link-icon i, .link-icon svg {
    width: 13px;
    height: 13px;
  }
  
  .link-name {
    font-size: 13px;
  }
  
  .link-arrow {
    width: 20px;
    height: 20px;
  }
  
  .link-arrow i, .link-arrow svg {
    width: 12px;
    height: 12px;
  }

}

/* Handle ultra-short screen heights to strictly prevent vertical scrollbar overflows */
@media (max-height: 520px) {
  .profile-bio {
    display: none !important; /* Hide bio text on ultra-short heights to prevent clipping */
  }
}